diff --git a/.env.local b/.env.local
index 8ccdefd9048..cb6d89c9673 100644
--- a/.env.local
+++ b/.env.local
@@ -83,14 +83,14 @@ NATIVE_LOGIN_ENABLED=YES
 # Fast login max retries
 FAST_LOGIN_MAX_RETRIES=3
 # Fast login opt-in
-FAST_LOGIN_OPTIN=NO
+FAST_LOGIN_OPTIN=YES
 # Enable CIE login flow with emulator and dev server
 CIE_LOGIN_WITH_DEV_SERVER_ENABLED=NO
-# Enable CDU flow new screen
-CDU_NEW_FLOW=NO
 # Relay State for SPID
 SPID_RELAY_STATE='appio-dev'
 # Wallet V3 RESTful API
 WALLET_API_BASEURL='http://127.0.0.1:3000'
 # Wallet V3 test/env RESTful API
 WALLET_API_UAT_BASEURL='https://api.uat.platform.pagopa.it'
+# Redesign of the services section
+NEW_SERVICES_ENABLED=NO
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 964c21771b0..07db02cf403 100644
--- a/.env.production
+++ b/.env.production
@@ -86,11 +86,11 @@ FAST_LOGIN_MAX_RETRIES=3
 FAST_LOGIN_OPTIN=YES
 # Enable CIE login flow with emulator and dev server
 CIE_LOGIN_WITH_DEV_SERVER_ENABLED=NO
-# Enable CDU flow new screen
-CDU_NEW_FLOW=YES
 # Relay State for SPID
 SPID_RELAY_STATE='appio'
 # Wallet RESTful API
 WALLET_API_BASEURL='https://api.platform.pagopa.it'
 # Wallet test/env RESTful API
 WALLET_API_UAT_BASEURL='https://api.uat.platform.pagopa.it'
+# Redesign of the services section
+NEW_SERVICES_ENABLED=NO
diff --git a/.github/actions/setup-composite/action.yml b/.github/actions/setup-composite/action.yml
index 705495bf838..bcf2e107204 100644
--- a/.github/actions/setup-composite/action.yml
+++ b/.github/actions/setup-composite/action.yml
@@ -17,11 +17,7 @@ runs:
       with:
         # npm cache files are stored in `~/.npm` on Linux/macOS
         path: ~/.npm
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-        restore-keys: |
-          ${{ runner.os }}-build-${{ env.cache-name }}-
-          ${{ runner.os }}-build-
-          ${{ runner.os }}-
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
     - id: install-packages
       run: yarn install --frozen-lockfile
       shell: bash
diff --git a/.github/scripts/run-e2e-tests.sh b/.github/scripts/run-e2e-tests.sh
index 9a2c01b2b31..7217ccb2aad 100644
--- a/.github/scripts/run-e2e-tests.sh
+++ b/.github/scripts/run-e2e-tests.sh
@@ -1,10 +1,21 @@
+#!/bin/sh
+
+# Check if the correct number of arguments is provided
+if [ "$#" -ne 1 ]; then
+    echo "Usage: $0 <path_to_e2e_ts_test_file>"
+    exit 1
+fi
+
+# Navigate to the API server directory and start setup
 cd _io-dev-api-server_
 cp ../scripts/api-config.json config/config.json
 yarn
 yarn generate
 yarn start &> /tmp/io-dev-api-server.log &
+
 # wait for the server to be up and running
 sleep 10
+
 cd ..
 yarn detox clean-framework-cache
 yarn detox build-framework-cache
@@ -17,4 +28,4 @@ yarn detox test \
   --take-screenshots all \
   --record-videos failing \
   --debug-synchronization 1000 \
-  --retries 3
\ No newline at end of file
+  --retries 3 "$1"
\ No newline at end of file
diff --git a/.github/workflows/release-fl.yml b/.github/workflows/release-fl.yml
index 56bb3da4a7e..29be9a64d1b 100644
--- a/.github/workflows/release-fl.yml
+++ b/.github/workflows/release-fl.yml
@@ -46,10 +46,10 @@ jobs:
   release-ios:
     needs: run-static-checks
     environment: prod
-    runs-on: macos-12
+    runs-on: macos-13-xlarge
     steps:
       - id: set-xcode-version
-        run: sudo xcode-select -s '/Applications/Xcode_14.2.app/Contents/Developer'
+        run: sudo xcode-select -s '/Applications/Xcode_15.2.app/Contents/Developer'
         shell: bash
       - id: checkout
         uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab #v3.5.2
@@ -58,7 +58,7 @@ jobs:
       - id: setup
         uses: ./.github/actions/setup-composite
       - id: setup-ruby
-        uses: ruby/setup-ruby@d2b39ad0b52eca07d23f3aa14fdf2a3fcc1f411c #v1.149.0
+        uses: ruby/setup-ruby@5f19ec79cedfadb78ab837f95b87734d0003c899 #v1.173.0
         with:
           bundler-cache: true
       - id: prepare-ios-build
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 62f1e5aaf5e..50536ccf973 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -47,10 +47,10 @@ jobs:
   release-ios:
     needs: run-static-checks
     environment: prod
-    runs-on: macos-12
+    runs-on: macos-13-xlarge
     steps:
       - id: set-xcode-version
-        run: sudo xcode-select -s '/Applications/Xcode_14.2.app/Contents/Developer'
+        run: sudo xcode-select -s '/Applications/Xcode_15.2.app/Contents/Developer'
         shell: bash
       - id: checkout
         uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab #v3.5.2
@@ -59,7 +59,7 @@ jobs:
       - id: setup
         uses: ./.github/actions/setup-composite
       - id: setup-ruby
-        uses: ruby/setup-ruby@d2b39ad0b52eca07d23f3aa14fdf2a3fcc1f411c #v1.149.0
+        uses: ruby/setup-ruby@5f19ec79cedfadb78ab837f95b87734d0003c899 #v1.173.0
         with:
           bundler-cache: true
       - id: prepare-ios-build
@@ -90,6 +90,17 @@ jobs:
           APP_STORE_API_KEY_ISSUER_ID: ${{secrets.APP_STORE_API_KEY_ISSUER_ID}}
           ITMSTRANSPORTER_FORCE_ITMS_PACKAGE_UPLOAD: ${{secrets.ITMSTRANSPORTER_FORCE_ITMS_PACKAGE_UPLOAD}}
           MATCH_PASSWORD: ${{ secrets.MATCH_PASSWORD }}
+      - id: upload-dsym-files
+        # Sometimes the build-upload-app-store step fails for timeout,
+        # in this case we want to upload the dSYM files anyway
+        if: ${{ always() }} 
+        # We don't want to fail whole job if the dSYM upload step fails
+        continue-on-error: true 
+        uses: actions/upload-artifact@26f96dfa697d77e81fd5907df203aa23a56210a8 # v4.0.3
+        with:
+          name: ItaliaApp.app.dSYM.zip
+          path: ios/ItaliaApp.app.dSYM.zip
+          retention-days: 60        
   notify-new-version:
     environment: dev
     runs-on: ubuntu-latest
diff --git a/.github/workflows/staticcheck.yaml b/.github/workflows/staticcheck.yaml
index 6cda17b269b..28e71a1b417 100644
--- a/.github/workflows/staticcheck.yaml
+++ b/.github/workflows/staticcheck.yaml
@@ -21,4 +21,4 @@ jobs:
       - id: run-test
         run: yarn test:ci
       - id: codecov-script
-        run: ./scripts/codecov.sh
\ No newline at end of file
+        run: ./scripts/codecov.sh
diff --git a/.github/workflows/test-e2e.yml b/.github/workflows/test-e2e.yml
index c49ae1f34ad..59a4294e144 100644
--- a/.github/workflows/test-e2e.yml
+++ b/.github/workflows/test-e2e.yml
@@ -1,25 +1,27 @@
 name: Run e2e tests
 on:
+  workflow_dispatch:
   push:
     branches:
       - master
 jobs:
   run-static-checks:
-    uses: ./.github/workflows/staticcheck.yaml
-  run-e2e-test-ios:
+   uses: ./.github/workflows/staticcheck.yaml
+  build-detox-app:
     needs: run-static-checks
-    runs-on: macos-latest
-    environment: dev
+    runs-on: macos-12
     concurrency:
-      group: ${{ github.workflow }}-e2e-tests-${{ github.head_ref || github.run_id }}
+      group: ${{ github.workflow }}-e2e-tests-${{ github.ref || github.run_id }}
       cancel-in-progress: true
     steps:
       - id: checkout
         uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
       - id: setup
         uses: ./.github/actions/setup-composite
+        with:
+          use-cache: 'true'
       - id: setup-ruby
-        uses: ruby/setup-ruby@d2b39ad0b52eca07d23f3aa14fdf2a3fcc1f411c # v1.148.0
+        uses: ruby/setup-ruby@5f19ec79cedfadb78ab837f95b87734d0003c899 #v1.173.0
         with:
           bundler-cache: true
       - id: prepare-dependencies
@@ -32,9 +34,7 @@ jobs:
         with:
           path: ios/Pods
           key: ${{ runner.os }}-pods-${{ hashFiles('ios/Podfile.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-pods-
-      - id: install-detox
+      - id: install-applesimutils
         run: |
           brew tap wix/brew
           brew install applesimutils
@@ -46,29 +46,70 @@ jobs:
         with:
           path: ios/build
           key: ${{ runner.os }}-detox-build
-          restore-keys: |
-            ${{ runner.os }}-detox-build
       - id: setup-pods
         run: cd ios ; bundle exec pod install --verbose ; cd ..
         shell: bash
       - id: prepare-detox-build
         run: RN_SRC_EXT=e2e.ts yarn detox build -c ios.sim.release
         shell: bash
+      - id: upload-detox-build
+        uses: actions/upload-artifact@26f96dfa697d77e81fd5907df203aa23a56210a8 # v4.0.3
+        with:
+          name: ItaliaApp.app
+          path: ios/build/Build/Products/Release-iphonesimulator/ItaliaApp.app
+          retention-days: 2
+  run-e2e-tests:    
+    needs: build-detox-app
+    runs-on: macos-latest
+    environment: dev
+    strategy: 
+      fail-fast: false
+      matrix:
+        include:
+          - test: "ts/__e2e__/"
+            name: "Base_e2e"
+          - test: "ts/features/bonus/cgn/__e2e__/"
+            name: "cgn_e2e"
+          - test: "ts/features/messages/__e2e__/"
+            name: "messages_e2e"
+          - test: "ts/features/euCovidCert/__e2e__/"
+            name: "eucovidcert_e2e"
+          - test: "ts/features/wallet/onboarding/__e2e__/"
+            name: "wallet_onboarding_e2e"
+    steps:
+      - id: install-applesimutils
+        run: |
+          brew tap wix/brew
+          brew install applesimutils
+        shell: bash
+      - id: checkout
+        uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
+      - id: download-detox-build
+        uses: actions/download-artifact@6b208ae046db98c579e8a3aa621ab581ff575935 # v4.1.1
+        with:
+          name: ItaliaApp.app
+          path: ios/build/Build/Products/Release-iphonesimulator/ItaliaApp.app
+      - id: setup
+        uses: ./.github/actions/setup-composite
+        with:
+          use-cache: 'true'
       - id: checkout-dev-server
         uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
         with:
           repository: pagopa/io-dev-api-server
           path: './_io-dev-api-server_'
       - id: run-e2e-tests
-        run: bash ./.github/scripts/run-e2e-tests.sh
+        run: bash ./.github/scripts/run-e2e-tests.sh ${{ matrix.test }}
       - id: notify-test-failure
         if: failure()
         uses: ./.github/actions/notify-e2e
         env:
+          TEST: ${{ matrix.name }}
           IO_APP_SLACK_HELPER_BOT_TOKEN: ${{ secrets.IO_APP_SLACK_HELPER_BOT_TOKEN }}
       - id: upload-artifacts
-        uses: actions/upload-artifact@0b7f8abb1508181956e8e162db84b466c27e18ce # v.3.1.2
+        uses: actions/upload-artifact@0b7f8abb1508181956e8e162db84b466c27e18ce # v.3.1.2        
         if: always()
         with:
-          name: detox-artifacts
-          path: /tmp/e2e_artifacts/
\ No newline at end of file
+          name: detox-artifacts-${{ matrix.name }}
+          path: /tmp/e2e_artifacts/
+          retention-days: 2
diff --git a/.gitignore b/.gitignore
index c880c3a4cab..2a5b814922d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,6 +37,7 @@ local.properties
 *.iml
 *.hprof
 Google Play Android Developer-04750d2c0cf8.json
+.cxx/
 
 **/fastlane/report.xml
 **/fastlane/Preview.html
diff --git a/.hound.yml b/.hound.yml
deleted file mode 100644
index 74b81cf446d..00000000000
--- a/.hound.yml
+++ /dev/null
@@ -1,4 +0,0 @@
-tslint:
-  enabled: true
-  config_file: tslint.json
-
diff --git a/.node-version b/.node-version
index e65243f2ea3..a9d087399d7 100644
--- a/.node-version
+++ b/.node-version
@@ -1 +1 @@
-16.19.0
+18.19.0
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a3ea94b888d..b9744fdb9bf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,342 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.58.0-rc.0](https://github.com/pagopa/io-app/compare/2.57.0-rc.1...2.58.0-rc.0) (2024-04-09)
+
+
+### Features
+
+* [[IOCOM-1199](https://pagopa.atlassian.net/browse/IOCOM-1199)] Vertically ordered CTAs and Payment button on new DS message details screen ([#5636](https://github.com/pagopa/io-app/issues/5636)) ([0fa34fb](https://github.com/pagopa/io-app/commit/0fa34fb1c76ab5b11e87f2aed5dfdf5ff0d82929))
+* [[IOCOM-870](https://pagopa.atlassian.net/browse/IOCOM-870)] New DS on payment list in the SEND message details ([#5650](https://github.com/pagopa/io-app/issues/5650)) ([1f31acb](https://github.com/pagopa/io-app/commit/1f31acb4c1d7a4348b7504bf35affc99f82b752e))
+* [[IOCOM-874](https://pagopa.atlassian.net/browse/IOCOM-874)] Bottom menu on SEND message details, with "Support" action item ([#5644](https://github.com/pagopa/io-app/issues/5644)) ([9f72690](https://github.com/pagopa/io-app/commit/9f72690a37c11038935afb2ce40ec82051f94355))
+
+
+### Chores
+
+* **Cross:** [[IOAPPX-271](https://pagopa.atlassian.net/browse/IOAPPX-271)] Delete components and assets no longer referenced ([#5646](https://github.com/pagopa/io-app/issues/5646)) ([fe14f08](https://github.com/pagopa/io-app/commit/fe14f08e597b4a943cdd8aa1b4f8aab509e13dd7))
+* **deps:** bump react-native-document-picker from 9.0.1 to 9.1.1 ([#5520](https://github.com/pagopa/io-app/issues/5520)) ([cb1af3e](https://github.com/pagopa/io-app/commit/cb1af3e236fc2e2826aa8e6a87adf01c65c1996c)), closes [rnmods/react-native-document-picker#698](https://github.com/rnmods/react-native-document-picker/issues/698) [rnmods/react-native-document-picker#689](https://github.com/rnmods/react-native-document-picker/issues/689) [rnmods/react-native-document-picker#654](https://github.com/rnmods/react-native-document-picker/issues/654) [rnmods/react-native-document-picker#660](https://github.com/rnmods/react-native-document-picker/issues/660) [rnmods/react-native-document-picker#666](https://github.com/rnmods/react-native-document-picker/issues/666) [rnmods/react-native-document-picker#667](https://github.com/rnmods/react-native-document-picker/issues/667) [rnmods/react-native-document-picker#670](https://github.com/rnmods/react-native-document-picker/issues/670) [rnmods/react-native-document-picker#686](https://github.com/rnmods/react-native-document-picker/issues/686) [rnmods/react-native-document-picker#687](https://github.com/rnmods/react-native-document-picker/issues/687) [rnmods/react-native-document-picker#689](https://github.com/rnmods/react-native-document-picker/issues/689) [#698](https://github.com/pagopa/io-app/issues/698) [#689](https://github.com/pagopa/io-app/issues/689) [#687](https://github.com/pagopa/io-app/issues/687) [#686](https://github.com/pagopa/io-app/issues/686) [#670](https://github.com/pagopa/io-app/issues/670) [#667](https://github.com/pagopa/io-app/issues/667) [#666](https://github.com/pagopa/io-app/issues/666) [#660](https://github.com/pagopa/io-app/issues/660)
+* **IT Wallet:** [[SIW-951](https://pagopa.atlassian.net/browse/SIW-951)] Add user payment methods in new wallet section ([#5639](https://github.com/pagopa/io-app/issues/5639)) ([86087cc](https://github.com/pagopa/io-app/commit/86087cc684685f5e6aa650201fd7bbf9645b1078))
+* **IT Wallet:** [[SIW-963](https://pagopa.atlassian.net/browse/SIW-963)] Add wallet cards onboarding screen ([#5648](https://github.com/pagopa/io-app/issues/5648)) ([902faae](https://github.com/pagopa/io-app/commit/902faae6b4f8ef8c47065abbd002dfa716acc8ed))
+* [[IOBP-615](https://pagopa.atlassian.net/browse/IOBP-615)] Add new `paymentCard` component to `PaymentsMethodDetailsScreen` ([#5665](https://github.com/pagopa/io-app/issues/5665)) ([afb6fd6](https://github.com/pagopa/io-app/commit/afb6fd6141260ec5caa94d3bda97b4b5f09c29e5))
+* [[IOPID-1720](https://pagopa.atlassian.net/browse/IOPID-1720)] Add features to OperationResultScreenContent  ([#5666](https://github.com/pagopa/io-app/issues/5666)) ([4e9a9a9](https://github.com/pagopa/io-app/commit/4e9a9a9cabd389531b59e03db5b4f3e49973e5d2))
+
+## [2.57.0-rc.1](https://github.com/pagopa/io-app/compare/2.57.0-rc.0...2.57.0-rc.1) (2024-04-04)
+
+
+### Features
+
+* [[IOCOM-1172](https://pagopa.atlassian.net/browse/IOCOM-1172)] Update business logic for payment reminder on a message details screen with the new DS ([#5613](https://github.com/pagopa/io-app/issues/5613)) ([2a34b40](https://github.com/pagopa/io-app/commit/2a34b40a9eba194f8716824364d87d3610a77c2d))
+* [[IOCOM-873](https://pagopa.atlassian.net/browse/IOCOM-873)] IUN code on SEND message details with new DS ([#5643](https://github.com/pagopa/io-app/issues/5643)) ([4df62f9](https://github.com/pagopa/io-app/commit/4df62f9ca0e68987f03b841176dc6d736631df89))
+* [[IOCOM-882](https://pagopa.atlassian.net/browse/IOCOM-882)] New DS on a paid payment screen for a cancelled PN message ([#5621](https://github.com/pagopa/io-app/issues/5621)) ([6658689](https://github.com/pagopa/io-app/commit/6658689b8e4fd5ae592427d479d104ffaf854561))
+* [[IOPID-1541](https://pagopa.atlassian.net/browse/IOPID-1541),[IOPID-1542](https://pagopa.atlassian.net/browse/IOPID-1542)] Adopt the new DS to `RootedModal` ([#5641](https://github.com/pagopa/io-app/issues/5641)) ([8de52b5](https://github.com/pagopa/io-app/commit/8de52b5f2e2b10bca2290a728f0c50bf857c7d3f))
+* [[IOPID-1611](https://pagopa.atlassian.net/browse/IOPID-1611)] Add en copy on modal cie not supported ([#5652](https://github.com/pagopa/io-app/issues/5652)) ([5178c00](https://github.com/pagopa/io-app/commit/5178c005ab470f9a099425148de9323148243c9c))
+* [[IOPID-1611](https://pagopa.atlassian.net/browse/IOPID-1611)] Adopt new DS on CIE not supported modal ([#5647](https://github.com/pagopa/io-app/issues/5647)) ([65dfab0](https://github.com/pagopa/io-app/commit/65dfab0c201f93c52aef2530a949c48c4ce91540))
+
+
+### Bug Fixes
+
+* [[IOPID-1714](https://pagopa.atlassian.net/browse/IOPID-1714)] IOS crashes on EIC malformed URLs ([#5660](https://github.com/pagopa/io-app/issues/5660)) ([9c640a4](https://github.com/pagopa/io-app/commit/9c640a401d5c1c59c4c37d72e6fca544e18ad23f))
+* cgn test failing for new services FF ([#5649](https://github.com/pagopa/io-app/issues/5649)) ([5a78655](https://github.com/pagopa/io-app/commit/5a786552cf99ffd4b5a0a44579f3e8480c6a62c7))
+* Translations on Services Preference Screens and Identification Modal ([#5653](https://github.com/pagopa/io-app/issues/5653)) ([319706e](https://github.com/pagopa/io-app/commit/319706e8112ca67f8b86e3f74bcae10acda8bbe9))
+
+
+### Chores
+
+* [[IOBP-576](https://pagopa.atlassian.net/browse/IOBP-576)] Payment manual input A11y and UX fixes ([#5556](https://github.com/pagopa/io-app/issues/5556)) ([c4ee44c](https://github.com/pagopa/io-app/commit/c4ee44cd9f5a91531eb7de71ebb3e6bb065de84c))
+* [[IOBP-607](https://pagopa.atlassian.net/browse/IOBP-607)] Fix payments landing screen scrollview behavior ([#5656](https://github.com/pagopa/io-app/issues/5656)) ([03940ba](https://github.com/pagopa/io-app/commit/03940baef962d4af843726f8e804217cbad61205))
+* [[IOBP-610](https://pagopa.atlassian.net/browse/IOBP-610)] Refactor `payments` feature ([#5654](https://github.com/pagopa/io-app/issues/5654)) ([cc7aabe](https://github.com/pagopa/io-app/commit/cc7aabee62a53816854f9f6560be86005f651f08))
+* [[IOPAE-1046](https://pagopa.atlassian.net/browse/IOPAE-1046)] Add Service header to `ServiceDetailsScreen` ([#5633](https://github.com/pagopa/io-app/issues/5633)) ([6e6bb73](https://github.com/pagopa/io-app/commit/6e6bb73fedeb75dba83dc736407a4fd8abfe7f31))
+* [[IOPAE-1047](https://pagopa.atlassian.net/browse/IOPAE-1047)] Add service description to `ServiceDetailsScreen` ([#5640](https://github.com/pagopa/io-app/issues/5640)) ([8fbdc80](https://github.com/pagopa/io-app/commit/8fbdc8048c15aabd0d9f92824ab1f63d602548d2))
+* [[IOPAE-1066](https://pagopa.atlassian.net/browse/IOPAE-1066)] Service details failure state  ([#5642](https://github.com/pagopa/io-app/issues/5642)) ([94271fc](https://github.com/pagopa/io-app/commit/94271fc149c100fd273994d8d9767bd72165ecf0))
+* **IT Wallet:** [[SIW-962](https://pagopa.atlassian.net/browse/SIW-962)] Add cards onboarding CTA in the new wallet section ([#5645](https://github.com/pagopa/io-app/issues/5645)) ([4a25d67](https://github.com/pagopa/io-app/commit/4a25d67d266c3ef8f0ecd319b619ce4fa33dfc82))
+
+## [2.57.0-rc.0](https://github.com/pagopa/io-app/compare/2.56.0-rc.3...2.57.0-rc.0) (2024-03-28)
+
+
+### Features
+
+* [[IOCOM-872](https://pagopa.atlassian.net/browse/IOCOM-872)] Base F24 section with new DS for SEND messages ([#5595](https://github.com/pagopa/io-app/issues/5595)) ([10a2f27](https://github.com/pagopa/io-app/commit/10a2f276b1e6fc7673c36af2a1c3fc92fe9806a0))
+* [[IOCOM-879](https://pagopa.atlassian.net/browse/IOCOM-879)] Bottom sheet for SEND's F24 with the new DS ([#5603](https://github.com/pagopa/io-app/issues/5603)) ([7271904](https://github.com/pagopa/io-app/commit/72719047270e00326d122519dc4f14de0bccf78b))
+* [[IOPID-1509](https://pagopa.atlassian.net/browse/IOPID-1509),[IOPID-1484](https://pagopa.atlassian.net/browse/IOPID-1484)] Integrate new DS on email insert/validation in onboarding flow and integrate new MP events ([#5632](https://github.com/pagopa/io-app/issues/5632)) ([2e0aeab](https://github.com/pagopa/io-app/commit/2e0aeab57ec1d7fe9bcc8ffd477f440ce8fe834c))
+* [[IOPID-1540](https://pagopa.atlassian.net/browse/IOPID-1540)] Adopt the new DS to `IdentificationModal` ([#5581](https://github.com/pagopa/io-app/issues/5581)) ([4d49bdb](https://github.com/pagopa/io-app/commit/4d49bdb114c1c82fc4733a97991cf5314b80a124))
+* [[IOPID-1566](https://pagopa.atlassian.net/browse/IOPID-1566),[IOPID-1567](https://pagopa.atlassian.net/browse/IOPID-1567),[IOPID-1570](https://pagopa.atlassian.net/browse/IOPID-1570)] Adopt the new DS to FL modals ([#5614](https://github.com/pagopa/io-app/issues/5614)) ([27146a9](https://github.com/pagopa/io-app/commit/27146a9bde2c467f1a8c8ff35fdbe0e6fc1913fd))
+* [[IOPLT-341](https://pagopa.atlassian.net/browse/IOPLT-341)] Rework e2e test job with matrix ([#5616](https://github.com/pagopa/io-app/issues/5616)) ([8892d5e](https://github.com/pagopa/io-app/commit/8892d5ec7a717889e83437c6ae92c315b1316bba))
+* [[IOPLT-359](https://pagopa.atlassian.net/browse/IOPLT-359)] Upgrade `react-native-svg` to 15.1.0 and `@pagopa/io-app-design-system` to 1.30.0 ([#5609](https://github.com/pagopa/io-app/issues/5609)) ([7d858bf](https://github.com/pagopa/io-app/commit/7d858bf260e3b7a09dbb05f8c7dec3e2bfb65b46))
+* [[IOPLT-384](https://pagopa.atlassian.net/browse/IOPLT-384)] Removes Mixpanel community library to use the official npm package ([#5601](https://github.com/pagopa/io-app/issues/5601)) ([93394d8](https://github.com/pagopa/io-app/commit/93394d803dfbb3ba5ad2be675b3801c669d1b2a2)), closes [/github.com/mixpanel/mixpanel-react-native/issues/89#issuecomment-904192090](https://github.com/pagopa//github.com/mixpanel/mixpanel-react-native/issues/89/issues/issuecomment-904192090)
+* [[IOPLT-394](https://pagopa.atlassian.net/browse/IOPLT-394)] Bump Xcode version used to build the app ([#5611](https://github.com/pagopa/io-app/issues/5611)) ([9352f2c](https://github.com/pagopa/io-app/commit/9352f2c063081514d59d5142073ce9e037ca5ae0))
+* **Firma con IO:** [[SFEQS-2137](https://pagopa.atlassian.net/browse/SFEQS-2137)] Make PDF annotations read-only on iOS ([#5599](https://github.com/pagopa/io-app/issues/5599)) ([eb1ec7e](https://github.com/pagopa/io-app/commit/eb1ec7e37d9cb0b97d0021b332e8fb2275ff24fb))
+
+
+### Bug Fixes
+
+* [[IOBP-593](https://pagopa.atlassian.net/browse/IOBP-593)] Fix back button in PSP selection screen during payment ([#5634](https://github.com/pagopa/io-app/issues/5634)) ([1ad5a34](https://github.com/pagopa/io-app/commit/1ad5a3434ea4a723a7a036516bd293a7f83eedfa))
+* update minor version on cocoapods ([#5638](https://github.com/pagopa/io-app/issues/5638)) ([ff938f8](https://github.com/pagopa/io-app/commit/ff938f8db2a34587cc7b209911e9368803fa1b54))
+* **Cross:** [[IOAPPX-263](https://pagopa.atlassian.net/browse/IOAPPX-263)]  IOS crash during root modal hiding ([#5600](https://github.com/pagopa/io-app/issues/5600)) ([56ffbf8](https://github.com/pagopa/io-app/commit/56ffbf82ab444e6a8e1902f397050e590ce908f7))
+* **Cross:** [[IOAPPX-266](https://pagopa.atlassian.net/browse/IOAPPX-266)] Fix crash coming from background due to Native Base ([af4be64](https://github.com/pagopa/io-app/commit/af4be645c06318b5804dd841b7d206e4b141ff44))
+
+
+### Chores
+
+* [[IOPAE-1045](https://pagopa.atlassian.net/browse/IOPAE-1045)] Add new service details base screen ([#5607](https://github.com/pagopa/io-app/issues/5607)) ([9eddc94](https://github.com/pagopa/io-app/commit/9eddc945e25083f3dab8734dc0b941d255e886b1))
+* **IT Wallet:** [[SIW-952](https://pagopa.atlassian.net/browse/SIW-952)] Add CGN card in new wallet section ([#5626](https://github.com/pagopa/io-app/issues/5626)) ([aa74914](https://github.com/pagopa/io-app/commit/aa74914df4dd7e7560ce9e96e3b945c2e7833ee3))
+* [[IOBP-606](https://pagopa.atlassian.net/browse/IOBP-606)] Add new payments section ([#5635](https://github.com/pagopa/io-app/issues/5635)) ([d670a68](https://github.com/pagopa/io-app/commit/d670a6898bffddef1db05b5d86aceec8777e67af))
+* **Cross:** [[IOAPPX-256](https://pagopa.atlassian.net/browse/IOAPPX-256)] Remove local ToastProvider ([#5557](https://github.com/pagopa/io-app/issues/5557)) ([49e2fc0](https://github.com/pagopa/io-app/commit/49e2fc021d5886268d7d7e878722a3789db68818))
+* **Cross:** [[IOAPPX-270](https://pagopa.atlassian.net/browse/IOAPPX-270)] Update `io-app-design-system` to `1.31.0` ([#5637](https://github.com/pagopa/io-app/issues/5637)) ([df52001](https://github.com/pagopa/io-app/commit/df52001d953791aabb8862375b124c892970d52b))
+* **IT Wallet:** [[SIW-950](https://pagopa.atlassian.net/browse/SIW-950)] Add ID Pay initiatives cards in new wallet section ([#5625](https://github.com/pagopa/io-app/issues/5625)) ([c0df60f](https://github.com/pagopa/io-app/commit/c0df60f943c54037fb1be5c0ff5b27947dbd1a52))
+* **IT Wallet:** [[SIW-954](https://pagopa.atlassian.net/browse/SIW-954)] Add new wallet base UI components ([#5619](https://github.com/pagopa/io-app/issues/5619)) ([dc01ce1](https://github.com/pagopa/io-app/commit/dc01ce162b3d7b28bd981bd7f5bd9e34ea8cbb10))
+* [[IOBP-562](https://pagopa.atlassian.net/browse/IOBP-562)] Full state layout and basics for new payments page ([#5535](https://github.com/pagopa/io-app/issues/5535)) ([e9aa9a5](https://github.com/pagopa/io-app/commit/e9aa9a5b353eccc8a5542eac8059f485bcaf8fda))
+* [[IOBP-568](https://pagopa.atlassian.net/browse/IOBP-568)] Add email to payment outcome 17 description ([#5615](https://github.com/pagopa/io-app/issues/5615)) ([2a3d57d](https://github.com/pagopa/io-app/commit/2a3d57d86c12c74ff6284f87cd9c16c895e836dc))
+* [[IOBP-578](https://pagopa.atlassian.net/browse/IOBP-578),[IOBP-577](https://pagopa.atlassian.net/browse/IOBP-577)] Add dynamic payment method logos ([#5612](https://github.com/pagopa/io-app/issues/5612)) ([dd59b52](https://github.com/pagopa/io-app/commit/dd59b5272ff35c666e42de33babb130f64914250))
+* [[IOBP-592](https://pagopa.atlassian.net/browse/IOBP-592)] Updated wallet and e-commerce definitions ([#5618](https://github.com/pagopa/io-app/issues/5618)) ([9a968a0](https://github.com/pagopa/io-app/commit/9a968a0ab6a74a695fe9d49ebf8da671e4062b4c))
+* [[IOBP-597](https://pagopa.atlassian.net/browse/IOBP-597)] Add new payment card component ([#5608](https://github.com/pagopa/io-app/issues/5608)) ([6bdf41d](https://github.com/pagopa/io-app/commit/6bdf41d78436c6b6a5b64b433513351ae8a6ba39))
+* [[PE-564](https://pagopa.atlassian.net/browse/PE-564)] CGN Activation KO pages ([#5629](https://github.com/pagopa/io-app/issues/5629)) ([de6a9f7](https://github.com/pagopa/io-app/commit/de6a9f75f04501a3b2e34d83d664d3a9fbf0a5a4))
+* **release:** 2.56.0-rc.4 ([9604c2d](https://github.com/pagopa/io-app/commit/9604c2d04d8cc37e7049870670e43b29727f831f))
+* [[IOPAE-1058](https://pagopa.atlassian.net/browse/IOPAE-1058)] Add services local feature flag ([#5605](https://github.com/pagopa/io-app/issues/5605)) ([18e480e](https://github.com/pagopa/io-app/commit/18e480eb5668ab4cb8d21534f3bad7e0fde46e74))
+* **IT Wallet:** [[SIW-957](https://pagopa.atlassian.net/browse/SIW-957)] Add wallet card component for IdPay initiatives ([#5610](https://github.com/pagopa/io-app/issues/5610)) ([13b1983](https://github.com/pagopa/io-app/commit/13b1983cc97659b6e6d0df3d344dfe0d3888a232))
+
+## [2.56.0-rc.4](https://github.com/pagopa/io-app/compare/2.56.0-rc.3...2.56.0-rc.4) (2024-03-25)
+
+
+### Chores
+
+* update patches.md ([9361cfb](https://github.com/pagopa/io-app/commit/9361cfbaa4e51ecac4911594d0be49cb7200e763))
+
+## [2.56.0-rc.3](https://github.com/pagopa/io-app/compare/2.56.0-rc.2...2.56.0-rc.3) (2024-03-20)
+
+
+### Features
+
+* [[IOPID-1511](https://pagopa.atlassian.net/browse/IOPID-1511)] [[IOPID-1529](https://pagopa.atlassian.net/browse/IOPID-1529)] Add new DS in Services Preference Screen (Profile and Onboarding) ([#5544](https://github.com/pagopa/io-app/issues/5544)) ([9e0452a](https://github.com/pagopa/io-app/commit/9e0452ae870925acf854c06c8b3216cb58a8fb63))
+
+## [2.56.0-rc.2](https://github.com/pagopa/io-app/compare/2.56.0-rc.1...2.56.0-rc.2) (2024-03-20)
+
+
+### Chores
+
+* bump io-app-design-system from 1.28.0 to 1.28.1 ([57dc0b5](https://github.com/pagopa/io-app/commit/57dc0b556a8e96d4eaefd5a6359a6af5df517859))
+
+## [2.56.0-rc.1](https://github.com/pagopa/io-app/compare/2.56.0-rc.0...2.56.0-rc.1) (2024-03-19)
+
+
+### Features
+
+* [[IOCOM-856](https://pagopa.atlassian.net/browse/IOCOM-856)] Add CTAs to `MessageDetailsScreen` ([#5582](https://github.com/pagopa/io-app/issues/5582)) ([e524884](https://github.com/pagopa/io-app/commit/e524884e5e403c78c94ab81909abbad1f6c91504))
+* [[IOCOM-859](https://pagopa.atlassian.net/browse/IOCOM-859)] New DS payment button on standard message details ([#5583](https://github.com/pagopa/io-app/issues/5583)) ([3ae055f](https://github.com/pagopa/io-app/commit/3ae055f2863316077829ba757c392af4ce8af007))
+* [[IOPLT-367](https://pagopa.atlassian.net/browse/IOPLT-367)] Adds the local dark mode toggle for development purpose ([#5576](https://github.com/pagopa/io-app/issues/5576)) ([af772e5](https://github.com/pagopa/io-app/commit/af772e53f23309f44d2beaacb56822d4d511ca51))
+
+
+### Bug Fixes
+
+* [[IABT-1540](https://pagopa.atlassian.net/browse/IABT-1540)] Fix expired session handling in payment flow ([#5568](https://github.com/pagopa/io-app/issues/5568)) ([c2be1bd](https://github.com/pagopa/io-app/commit/c2be1bd4398ec8dd5f668976b6be7eeed2037198))
+* [[IOBP-596](https://pagopa.atlassian.net/browse/IOBP-596)] Fix unexpected behavior in wallet onboarding Webview on Android devices ([#5594](https://github.com/pagopa/io-app/issues/5594)) ([4e47fda](https://github.com/pagopa/io-app/commit/4e47fdad8bb6a6b2a7525455e4e0b186c325a2f8))
+* theme experimental switch doesn't rerender ([#5591](https://github.com/pagopa/io-app/issues/5591)) ([9b8f9f7](https://github.com/pagopa/io-app/commit/9b8f9f7d3458fd05a076796821235d995d0deee8))
+
+
+### Chores
+
+* [[IOBP-589](https://pagopa.atlassian.net/browse/IOBP-589)] Adapted new payment flow with new swagger definitions ([#5593](https://github.com/pagopa/io-app/issues/5593)) ([c64e253](https://github.com/pagopa/io-app/commit/c64e2538363a5865f92427c6fbbf7ac241a4949b))
+* **Cross:** [[IOAPPX-261](https://pagopa.atlassian.net/browse/IOAPPX-261)] Add the new `contrast` variant to `ButtonLink` in the DS section ([#5590](https://github.com/pagopa/io-app/issues/5590)) ([5a6b185](https://github.com/pagopa/io-app/commit/5a6b18512855b466cd48b2166315435f3d401db0))
+* **IT Wallet:** [[SIW-907](https://pagopa.atlassian.net/browse/SIW-907)] Add StrongBox Mixpanel tracking for Lollipop keys ([#5580](https://github.com/pagopa/io-app/issues/5580)) ([892f473](https://github.com/pagopa/io-app/commit/892f473ca2819de9eaf8b1e6fac5313bf75836da))
+* **IT Wallet:** [[SIW-940](https://pagopa.atlassian.net/browse/SIW-940)] Add new wallet section screen with empty state ([#5588](https://github.com/pagopa/io-app/issues/5588)) ([ad7c9e8](https://github.com/pagopa/io-app/commit/ad7c9e8432569c8eeb07e9c877cb560e237bb475))
+* **IT Wallet:** [[SIW-941](https://pagopa.atlassian.net/browse/SIW-941)] Update Pr title with SIW id ([#5587](https://github.com/pagopa/io-app/issues/5587)) ([f4f60b3](https://github.com/pagopa/io-app/commit/f4f60b345c11bd2d9a87d559c1cf2540602cc6cc))
+* **IT Wallet:** [[SIW-942](https://pagopa.atlassian.net/browse/SIW-942)] Add payments section redirect banner within wallet section ([#5589](https://github.com/pagopa/io-app/issues/5589)) ([e9624d0](https://github.com/pagopa/io-app/commit/e9624d0768f6de8a716ea5ac203f96fb28365284))
+* **IT Wallet:** [[SIW-948](https://pagopa.atlassian.net/browse/SIW-948)] Add reducers and selectors for cards in the new wallet section ([#5604](https://github.com/pagopa/io-app/issues/5604)) ([1f561f4](https://github.com/pagopa/io-app/commit/1f561f44622337b7c3b1652c07793c8b617fdfe3))
+* [[SIW-939](https://pagopa.atlassian.net/browse/SIW-939)] Add new wallet section FF ([#5584](https://github.com/pagopa/io-app/issues/5584)) ([5ce9adb](https://github.com/pagopa/io-app/commit/5ce9adb04d83e04bbaa7db7ca341c42c3059935c))
+
+## [2.56.0-rc.0](https://github.com/pagopa/io-app/compare/2.55.0-rc.3...2.56.0-rc.0) (2024-03-12)
+
+
+### Features
+
+* [[IOCOM-854](https://pagopa.atlassian.net/browse/IOCOM-854)] Add bottom sheet to display message contacts ([#5570](https://github.com/pagopa/io-app/issues/5570)) ([063fe4d](https://github.com/pagopa/io-app/commit/063fe4d3bbd306f5dcb3872d58ed7c42e7f51e76))
+* [[IOCOM-857](https://pagopa.atlassian.net/browse/IOCOM-857)] Payment data on message details ([#5575](https://github.com/pagopa/io-app/issues/5575)) ([32da27d](https://github.com/pagopa/io-app/commit/32da27d5e0a0cc98c14fb6b1a5138abd0ac658fb))
+* [[IOPID-1499](https://pagopa.atlassian.net/browse/IOPID-1499)] Adopt the new DS layout to splash screens ([#5554](https://github.com/pagopa/io-app/issues/5554)) ([a8b32f4](https://github.com/pagopa/io-app/commit/a8b32f47efe1d6402a96c9313b77aef69b70197a))
+* [[IOPID-1504](https://pagopa.atlassian.net/browse/IOPID-1504)] Adopt the new DS to `IdpSuccessfulAuthentication`  ([#5547](https://github.com/pagopa/io-app/issues/5547)) ([7357f9f](https://github.com/pagopa/io-app/commit/7357f9f55f88e80b6c8bcd257bc5d1093e9eaecd))
+* [[IOPID-1512](https://pagopa.atlassian.net/browse/IOPID-1512)] New DS on onboarding finished thank you page ([#5562](https://github.com/pagopa/io-app/issues/5562)) ([c73b6a4](https://github.com/pagopa/io-app/commit/c73b6a4a2764e27cd379999e8786fee0c21d951d))
+* [[IOPLT-342](https://pagopa.atlassian.net/browse/IOPLT-342)] Bump react-native version to 0.70 ([#5506](https://github.com/pagopa/io-app/issues/5506)) ([033eec2](https://github.com/pagopa/io-app/commit/033eec2e547f364d4b6ada6a1004cdbfb59e9bb5))
+
+
+### Bug Fixes
+
+* [[IOBP-513](https://pagopa.atlassian.net/browse/IOBP-513)] Added loading state in onboarding list wallet ([#5456](https://github.com/pagopa/io-app/issues/5456)) ([6f11e44](https://github.com/pagopa/io-app/commit/6f11e4447fa8478a8aaa317115d52c04d9e902f8))
+* [[IOBP-582](https://pagopa.atlassian.net/browse/IOBP-582)] Behavior of the new payment go back with only one PSP ([#5572](https://github.com/pagopa/io-app/issues/5572)) ([3687d7e](https://github.com/pagopa/io-app/commit/3687d7e443ec050fd73edb471da6c5149d0872d6))
+* e2e cache restore issue ([#5585](https://github.com/pagopa/io-app/issues/5585)) ([6050eee](https://github.com/pagopa/io-app/commit/6050eeeeb96a1dcb41ef96db887404abd1abd608))
+
+
+### Chores
+
+* [[IOBP-574](https://pagopa.atlassian.net/browse/IOBP-574)] Adds `success` flag to payment's Zendesk support payload ([#5546](https://github.com/pagopa/io-app/issues/5546)) ([93120f0](https://github.com/pagopa/io-app/commit/93120f0704c0349193c7f05f5a712d31a84d2568))
+* **Cross:** [[IOAPPX-249](https://pagopa.atlassian.net/browse/IOAPPX-249)] Update `build.gradle` ([#5512](https://github.com/pagopa/io-app/issues/5512)) ([51ce2d0](https://github.com/pagopa/io-app/commit/51ce2d06fdbcb50a7b6c61077ecf573e5fde0fc8))
+* **Cross:** [[IOAPPX-257](https://pagopa.atlassian.net/browse/IOAPPX-257)] Upload iOS dSYM files as artifact ([#5574](https://github.com/pagopa/io-app/issues/5574)) ([c51c295](https://github.com/pagopa/io-app/commit/c51c295bc0c7360f5271f9478e60402e182a86aa))
+* [[IOBP-581](https://pagopa.atlassian.net/browse/IOBP-581)] Changed text into payment cancelled by user outcome screen ([#5573](https://github.com/pagopa/io-app/issues/5573)) ([63e1746](https://github.com/pagopa/io-app/commit/63e1746f30be410c440886571d42b77b32ff3d7f))
+
+## [2.55.0-rc.3](https://github.com/pagopa/io-app/compare/2.55.0-rc.2...2.55.0-rc.3) (2024-03-05)
+
+
+### Features
+
+* [[IOCOM-853](https://pagopa.atlassian.net/browse/IOCOM-853)] Add footer component to MessageDetailsScreen ([#5560](https://github.com/pagopa/io-app/issues/5560)) ([b3ad3e4](https://github.com/pagopa/io-app/commit/b3ad3e427dd21d0842af6ee8253b5dbda9222a6d))
+* [[IOCOM-855](https://pagopa.atlassian.net/browse/IOCOM-855)] Add bottom sheet to display message extra data ([#5565](https://github.com/pagopa/io-app/issues/5565)) ([dc46b30](https://github.com/pagopa/io-app/commit/dc46b301590cb6ce953cb76af52be8bf7b205b65))
+* [[IOCOM-858](https://pagopa.atlassian.net/browse/IOCOM-858)] Generic payment update for messages ([#5567](https://github.com/pagopa/io-app/issues/5567)) ([8557640](https://github.com/pagopa/io-app/commit/8557640d7ad7d420db0ddd5d8f8e21cf1a552018))
+* [[IOPID-1500](https://pagopa.atlassian.net/browse/IOPID-1500)] Adopt the new DS to `IngressScreen` ([#5548](https://github.com/pagopa/io-app/issues/5548)) ([7350615](https://github.com/pagopa/io-app/commit/7350615dc6586efed94c52f17eec7038536a56db))
+
+
+### Bug Fixes
+
+* [[IOPID-1630](https://pagopa.atlassian.net/browse/IOPID-1630)] EIC error component navigation object not found ([#5571](https://github.com/pagopa/io-app/issues/5571)) ([8cb08e6](https://github.com/pagopa/io-app/commit/8cb08e6e253cff229c74bbf163573569749b5db2))
+* **Firma con IO:** [[SFEQS-2132](https://pagopa.atlassian.net/browse/SFEQS-2132)] Rerender when starting from page 0 in PDF preview ([#5569](https://github.com/pagopa/io-app/issues/5569)) ([b3c521f](https://github.com/pagopa/io-app/commit/b3c521fadf6df98d4492d1d490036c2afcbc0de2))
+
+
+### Chores
+
+* **Cross:** [[IOAPPX-259](https://pagopa.atlassian.net/browse/IOAPPX-259)] Upgrade `io-app-design-system` to `v.1.25.1` ([#5566](https://github.com/pagopa/io-app/issues/5566)) ([67f8ba0](https://github.com/pagopa/io-app/commit/67f8ba0a77fbe7ae4ee7b4405fc80694d587db27))
+* 🇩🇪 updates ([#5564](https://github.com/pagopa/io-app/issues/5564)) ([46ec138](https://github.com/pagopa/io-app/commit/46ec13805bcedcdbb37743ed64819f8fc847fb57))
+* **Cross:** [[IOAPPX-254](https://pagopa.atlassian.net/browse/IOAPPX-254)] Add iOS smooth corners to specific components ([#5552](https://github.com/pagopa/io-app/issues/5552)) ([7d5f362](https://github.com/pagopa/io-app/commit/7d5f362ddb4cb946b5f66cb2d2399e9bdd3a7c0a))
+
+## [2.55.0-rc.2](https://github.com/pagopa/io-app/compare/2.55.0-rc.1...2.55.0-rc.2) (2024-03-01)
+
+
+### Bug Fixes
+
+* [[IOCOM-1154](https://pagopa.atlassian.net/browse/IOCOM-1154)] Fix for `undefined` value on `isDesignSystemEnabled` (and double navigation bar) ([#5563](https://github.com/pagopa/io-app/issues/5563)) ([7d4414d](https://github.com/pagopa/io-app/commit/7d4414d6f745f7f5f68f5587a9dfc76e53542a92))
+
+
+### Chores
+
+* [[IOBP-561](https://pagopa.atlassian.net/browse/IOBP-561)] Addition of new payments page playground ([#5529](https://github.com/pagopa/io-app/issues/5529)) ([09b490a](https://github.com/pagopa/io-app/commit/09b490a888a4db071dc4477a6e71e97e97d30dba))
+* [[IOBP-569](https://pagopa.atlassian.net/browse/IOBP-569)] Removed expiry date from payment summary module checkout ([#5542](https://github.com/pagopa/io-app/issues/5542)) ([3355897](https://github.com/pagopa/io-app/commit/33558975ad36a8a75c1e166d8d21b9a76960dd28))
+
+## [2.55.0-rc.1](https://github.com/pagopa/io-app/compare/2.55.0-rc.0...2.55.0-rc.1) (2024-03-01)
+
+
+### Features
+
+* [[IOPID-1501](https://pagopa.atlassian.net/browse/IOPID-1501)] Adapt LandingScreen to the new DS ([#5536](https://github.com/pagopa/io-app/issues/5536)) ([9c4c4d1](https://github.com/pagopa/io-app/commit/9c4c4d14cedbe79a2d3738ffc9ce0ad73e6cb402))
+
+
+### Bug Fixes
+
+* [[IOCOM-1154](https://pagopa.atlassian.net/browse/IOCOM-1154)] Fix for double navigation bar on message details ([#5559](https://github.com/pagopa/io-app/issues/5559)) ([3bad813](https://github.com/pagopa/io-app/commit/3bad813f1aeafe8117c76de95bfa134a6a24ce4b))
+
+## [2.55.0-rc.0](https://github.com/pagopa/io-app/compare/2.54.0-rc.1...2.55.0-rc.0) (2024-02-28)
+
+
+### Features
+
+* [[IOCOM-1051](https://pagopa.atlassian.net/browse/IOCOM-1051)] Native HTTP client ([#5550](https://github.com/pagopa/io-app/issues/5550)) ([910a39c](https://github.com/pagopa/io-app/commit/910a39cc3de5a168cc0843e2e5b84078685b95fb))
+* **Firma con IO:** [[SFEQS-2083](https://pagopa.atlassian.net/browse/SFEQS-2083)] Replace abort bottom sheet with alert ([#5425](https://github.com/pagopa/io-app/issues/5425)) ([9d33b39](https://github.com/pagopa/io-app/commit/9d33b39b0db8c318a4047ef2879cbc4d441bfacf))
+* [[IOCOM-848](https://pagopa.atlassian.net/browse/IOCOM-848)] Message content with new DS System ([#5519](https://github.com/pagopa/io-app/issues/5519)) ([1560834](https://github.com/pagopa/io-app/commit/1560834b6bc3d964b252172a8988388e45edccda))
+* [[IOCOM-881](https://pagopa.atlassian.net/browse/IOCOM-881)] Update message attachment preview ([#5537](https://github.com/pagopa/io-app/issues/5537)) ([541e5c7](https://github.com/pagopa/io-app/commit/541e5c72357fc857d1ef52b2154bf95ecd7fad04))
+
+
+### Bug Fixes
+
+* [[IOCOM-1154](https://pagopa.atlassian.net/browse/IOCOM-1154)] Fix for double navigation bar on message details ([#5555](https://github.com/pagopa/io-app/issues/5555)) ([86ba3d3](https://github.com/pagopa/io-app/commit/86ba3d3a9424c1fe4a693db020de56b1b8ddda7f))
+* **Firma con IO:** [[SFEQS-2123](https://pagopa.atlassian.net/browse/SFEQS-2123)] Loading spinner not following DS toggle ([#5545](https://github.com/pagopa/io-app/issues/5545)) ([106c7df](https://github.com/pagopa/io-app/commit/106c7df8e95e2c9d7c7dd982f75d6103b0d4a768))
+* **Firma con IO:** [[SFEQS-2124](https://pagopa.atlassian.net/browse/SFEQS-2124)] Wrong margins in FCI flow ([#5543](https://github.com/pagopa/io-app/issues/5543)) ([dd16b6b](https://github.com/pagopa/io-app/commit/dd16b6b1756fa6d282c38279cc763ae49642e6cc))
+* [[IOBP-542](https://pagopa.atlassian.net/browse/IOBP-542)] StatusBar background color for Android devices in wallet details screen ([#5539](https://github.com/pagopa/io-app/issues/5539)) ([fe64210](https://github.com/pagopa/io-app/commit/fe642100928e85557293d29617d172d23f35d6bc))
+
+
+### Chores
+
+* [[IOBP-498](https://pagopa.atlassian.net/browse/IOBP-498)] Adds stepper in payment's screens header ([#5525](https://github.com/pagopa/io-app/issues/5525)) ([d09e9b0](https://github.com/pagopa/io-app/commit/d09e9b08b452bcef8526483d2956c05b014a4fe9))
+* [[IOBP-503](https://pagopa.atlassian.net/browse/IOBP-503)] Add payment attempts tracking ([#5401](https://github.com/pagopa/io-app/issues/5401)) ([54f967a](https://github.com/pagopa/io-app/commit/54f967a30ecf44bc60a43a0d33f1b5175a13182a))
+* [[IOBP-530](https://pagopa.atlassian.net/browse/IOBP-530)] Removed CTA button in payment confirmation screen with one PSP element ([#5488](https://github.com/pagopa/io-app/issues/5488)) ([69af3d9](https://github.com/pagopa/io-app/commit/69af3d923da3e2e5bdfea47c97eb3cc78eed2761))
+* [[IOBP-566](https://pagopa.atlassian.net/browse/IOBP-566)] Renames `walletV3` feature to `payments` ([#5533](https://github.com/pagopa/io-app/issues/5533)) ([4e32f86](https://github.com/pagopa/io-app/commit/4e32f8679863b0ef1d080ef57a9cb18af6c50374))
+* [[IOBP-572](https://pagopa.atlassian.net/browse/IOBP-572)] Move currency symbol to the right of the amount ([#5540](https://github.com/pagopa/io-app/issues/5540)) ([691b194](https://github.com/pagopa/io-app/commit/691b194855b0e8cb6071f22d65fcc9fa27a8e097))
+* [[IOPID-1481](https://pagopa.atlassian.net/browse/IOPID-1481)], [[IOPID-1482](https://pagopa.atlassian.net/browse/IOPID-1482)] Countdown 60 seconds ([#5514](https://github.com/pagopa/io-app/issues/5514)) ([2befb34](https://github.com/pagopa/io-app/commit/2befb345ab417d41a0a33c84c522331f4bdbb64a))
+
+## [2.54.0-rc.1](https://github.com/pagopa/io-app/compare/2.54.0-rc.0...2.54.0-rc.1) (2024-02-21)
+
+
+### Features
+
+* [[IOCOM-1059](https://pagopa.atlassian.net/browse/IOCOM-1059)] Remove 'Open' CTA on Android attachment preview (new DS) ([#5523](https://github.com/pagopa/io-app/issues/5523)) ([eb0691f](https://github.com/pagopa/io-app/commit/eb0691f0eef1ae3bf352fb2dc4f86362896f1ba2))
+* [[IOCOM-851](https://pagopa.atlassian.net/browse/IOCOM-851)] Add calendar event for messages with `due_date` ([#5524](https://github.com/pagopa/io-app/issues/5524)) ([12acdbe](https://github.com/pagopa/io-app/commit/12acdbe5a9c0309a63050f2464ae43d412d7785b))
+* [[IOCOM-851](https://pagopa.atlassian.net/browse/IOCOM-851)] Removed view reference ([#5511](https://github.com/pagopa/io-app/issues/5511)) ([39a2611](https://github.com/pagopa/io-app/commit/39a26119bf56ac5f517628888998dbe3be741504))
+
+
+### Bug Fixes
+
+* HeaderFirstLevel glitching on tab change ([#5530](https://github.com/pagopa/io-app/issues/5530)) ([d69e091](https://github.com/pagopa/io-app/commit/d69e091d888cca94c8ce9717659ff295412e559d))
+* **Cross:** [[IOAPPX-250](https://pagopa.atlassian.net/browse/IOAPPX-250)] Crash when consuming safe area insets outside of navigation context ([#5522](https://github.com/pagopa/io-app/issues/5522)) ([5ce18c2](https://github.com/pagopa/io-app/commit/5ce18c2d58c26eb00cc5d460474c7453c543c939))
+
+
+### Chores
+
+* **deps:** bump ip from 1.1.5 to 1.1.9 ([#5532](https://github.com/pagopa/io-app/issues/5532)) ([afc36a7](https://github.com/pagopa/io-app/commit/afc36a7742ac872f12a454b711d791509bcf01ee))
+* [[IOBP-555](https://pagopa.atlassian.net/browse/IOBP-555)] Add payment outcome screen for the outcome 17 and 15 ([#5527](https://github.com/pagopa/io-app/issues/5527)) ([755926d](https://github.com/pagopa/io-app/commit/755926d48cf101286847f934b59c3173f7f24b3b))
+* **Cross:** [[IOAPPX-252](https://pagopa.atlassian.net/browse/IOAPPX-252)] Update IO app icon in the main README ([#5531](https://github.com/pagopa/io-app/issues/5531)) ([f29ae25](https://github.com/pagopa/io-app/commit/f29ae2520e841554c13ee2d094749067d66a977d))
+* [[IOBP-544](https://pagopa.atlassian.net/browse/IOBP-544)] Add `usePagoPaPayment` custom hook ([#5503](https://github.com/pagopa/io-app/issues/5503)) ([b7257ad](https://github.com/pagopa/io-app/commit/b7257ad29a0c7ccf0d39a87e22c0a08559286c41))
+* [[IOBP-549](https://pagopa.atlassian.net/browse/IOBP-549)] Add new wallet payments history tracking ([#5515](https://github.com/pagopa/io-app/issues/5515)) ([ca54cd8](https://github.com/pagopa/io-app/commit/ca54cd8352b97bd4fe50b91c37c29c3987d43fb2))
+* [[IOBP-552](https://pagopa.atlassian.net/browse/IOBP-552),[IOBP-556](https://pagopa.atlassian.net/browse/IOBP-556)] Additional onboarding outcome screen for BPay ([#5518](https://github.com/pagopa/io-app/issues/5518)) ([de192e6](https://github.com/pagopa/io-app/commit/de192e6e4e48303bc9a037bdcf39d866c918c365))
+* [[IOBP-557](https://pagopa.atlassian.net/browse/IOBP-557)] Handled 404 response status with empty list from user wallet list ([#5528](https://github.com/pagopa/io-app/issues/5528)) ([a78bbce](https://github.com/pagopa/io-app/commit/a78bbce292b7987cdbe742e2c074a3fe15bf43d8))
+* [[IOBP-558](https://pagopa.atlassian.net/browse/IOBP-558)] Handle BancomatPay in method details screen ([#5517](https://github.com/pagopa/io-app/issues/5517)) ([505662b](https://github.com/pagopa/io-app/commit/505662b72745b377188360371c3aa7513a3975c1))
+* [[IOPLT-327](https://pagopa.atlassian.net/browse/IOPLT-327)] Updates Zendesk npm package version ([#5489](https://github.com/pagopa/io-app/issues/5489)) ([1dce8d5](https://github.com/pagopa/io-app/commit/1dce8d5329f34cdb0dd8dad375ddc21a8d413f5d)), closes [pagopa/io-react-native-zendesk#30](https://github.com/pagopa/io-react-native-zendesk/issues/30)
+* **Cross:** [[IOAPPX-212](https://pagopa.atlassian.net/browse/IOAPPX-212)] Removes current route selector logic from header first level handler logic ([#5510](https://github.com/pagopa/io-app/issues/5510)) ([4400127](https://github.com/pagopa/io-app/commit/44001272b06441ba3644ba2c89ac8c083f2860c8))
+* **Cross:** [[IOAPPX-230](https://pagopa.atlassian.net/browse/IOAPPX-230)] Remove `datetimepicker` and `react-native-modal-datetime-picker` dependencies ([#5451](https://github.com/pagopa/io-app/issues/5451)) ([76c841d](https://github.com/pagopa/io-app/commit/76c841d7b9b574ea1dfe99c4bb166be313bf4582))
+
+## [2.54.0-rc.0](https://github.com/pagopa/io-app/compare/2.53.0-rc.1...2.54.0-rc.0) (2024-02-15)
+
+
+### Features
+
+* [[IOCOM-1011](https://pagopa.atlassian.net/browse/IOCOM-1011)] Accessibility on "Includes Attachments"-Icon on the new DS Message Details screen ([#5497](https://github.com/pagopa/io-app/issues/5497)) ([416aff7](https://github.com/pagopa/io-app/commit/416aff73e508ad2bf9950f20c30cafdca3eb4c25))
+* [[IOCOM-1012](https://pagopa.atlassian.net/browse/IOCOM-1012)] Better accessibility on PDF preview with the new DS system ([#5494](https://github.com/pagopa/io-app/issues/5494)) ([7689647](https://github.com/pagopa/io-app/commit/76896474e9d982178af94e06fa1351ff6b8b5173))
+* [[IOCOM-1029](https://pagopa.atlassian.net/browse/IOCOM-1029)] Add support for multi image in the detail of a message ([#5508](https://github.com/pagopa/io-app/issues/5508)) ([69c9be1](https://github.com/pagopa/io-app/commit/69c9be10f76ac84ff4447dd9a4c03461231d3405))
+* [[IOCOM-849](https://pagopa.atlassian.net/browse/IOCOM-849),[IOCOM-850](https://pagopa.atlassian.net/browse/IOCOM-850)] Add `MessageDetailsComponent` in the detail of a message ([#5495](https://github.com/pagopa/io-app/issues/5495)) ([2501d29](https://github.com/pagopa/io-app/commit/2501d2953cd2bfe798af69c98763279113a302fa))
+* [[IOCOM-851](https://pagopa.atlassian.net/browse/IOCOM-851)] Add `Alert` in the detail of a message that contains an expiring payment ([#5507](https://github.com/pagopa/io-app/issues/5507)) ([1e87608](https://github.com/pagopa/io-app/commit/1e876081caa635aebf6eb2db121ad3963153e86e))
+* [[IOCOM-862](https://pagopa.atlassian.net/browse/IOCOM-862),[IOCOM-863](https://pagopa.atlassian.net/browse/IOCOM-863)] New DS on the message's attachments list ([#5485](https://github.com/pagopa/io-app/issues/5485)) ([f06e592](https://github.com/pagopa/io-app/commit/f06e5921ca8652227b82da640a8140b29712331e))
+
+
+### Bug Fixes
+
+* [[IABT-1530](https://pagopa.atlassian.net/browse/IABT-1530)] Enabled header shown property on Transaction details screens ([#5493](https://github.com/pagopa/io-app/issues/5493)) ([333a40e](https://github.com/pagopa/io-app/commit/333a40e845440b27a7bbf38843b8743409d89082))
+* [[IOBP-460](https://pagopa.atlassian.net/browse/IOBP-460),[IOBP-461](https://pagopa.atlassian.net/browse/IOBP-461),[IOBP-463](https://pagopa.atlassian.net/browse/IOBP-463)] A11y for list item info components into transaction detail screen ([#5478](https://github.com/pagopa/io-app/issues/5478)) ([a49be25](https://github.com/pagopa/io-app/commit/a49be25c9a5766e59067801830a89a2b1095d320))
+* [[IOCOM-1091](https://pagopa.atlassian.net/browse/IOCOM-1091)] Fix for duplicate message in messages list ([#5509](https://github.com/pagopa/io-app/issues/5509)) ([cb14f8a](https://github.com/pagopa/io-app/commit/cb14f8ad0191d9ae66356bda5ef1dc67e39b5602))
+* [[IOPID-1423](https://pagopa.atlassian.net/browse/IOPID-1423),[IOPID-1439](https://pagopa.atlassian.net/browse/IOPID-1439)] Fix double MP event tracking ([#5496](https://github.com/pagopa/io-app/issues/5496)) ([fbd8cb3](https://github.com/pagopa/io-app/commit/fbd8cb3949d4f330949a65ad3d80e35044ef4129))
+* [[IOPID-1546](https://pagopa.atlassian.net/browse/IOPID-1546)] Fix services refresh token error ([#5505](https://github.com/pagopa/io-app/issues/5505)) ([366f208](https://github.com/pagopa/io-app/commit/366f2088b1f73eea784dd1f2ef0720088d054191))
+
+
+### Chores
+
+* **Cross:** [[IOAPPX-234](https://pagopa.atlassian.net/browse/IOAPPX-234)] Remove `@react-native-picker/picker` dependency ([#5454](https://github.com/pagopa/io-app/issues/5454)) ([3e98819](https://github.com/pagopa/io-app/commit/3e9881974908a2932320e45260b517b8827c8101))
+* **Cross:** [[IOAPPX-241](https://pagopa.atlassian.net/browse/IOAPPX-241)] Replace legacy `FooterWithButtons` in the `DownloadProfileData` screen ([#5472](https://github.com/pagopa/io-app/issues/5472)) ([027d442](https://github.com/pagopa/io-app/commit/027d442e945d7b9784cdeb5cbfc00df9b91f39b5))
+* **Cross:** [[IOAPPX-242](https://pagopa.atlassian.net/browse/IOAPPX-242)] Replace legacy `FooterWithButtons` in the 'Remove account' flow ([#5470](https://github.com/pagopa/io-app/issues/5470)) ([6cd3b34](https://github.com/pagopa/io-app/commit/6cd3b348064d277ed1fb5138ae8d45521ce84ec5))
+* **Cross:** [[IOAPPX-243](https://pagopa.atlassian.net/browse/IOAPPX-243)] Remove `native-base` components from private screens + Add new header managed by `react-navigation` ([#5482](https://github.com/pagopa/io-app/issues/5482)) ([912604e](https://github.com/pagopa/io-app/commit/912604e5f2723c21f15cd28a3a634e45dc3d5da6))
+* **Cross:** [[IOAPPX-245](https://pagopa.atlassian.net/browse/IOAPPX-245)] Remove `hound.yml` ([#5500](https://github.com/pagopa/io-app/issues/5500)) ([96ac530](https://github.com/pagopa/io-app/commit/96ac5307c65e8d3099b8284329b997abe04691f5))
+* **Cross:** [[IOAPPX-247](https://pagopa.atlassian.net/browse/IOAPPX-247)] Remove `_editorconfig` ([#5501](https://github.com/pagopa/io-app/issues/5501)) ([932b8bf](https://github.com/pagopa/io-app/commit/932b8bfbfd2e4893466f54dd6012f0ca6af7ff92))
+* [[IOBP-525](https://pagopa.atlassian.net/browse/IOBP-525)] Fix payment authorization webview on Android devices ([#5474](https://github.com/pagopa/io-app/issues/5474)) ([d67f85f](https://github.com/pagopa/io-app/commit/d67f85f14bd5cb415e1779c91899aeb56b64031d))
+* [[IOBP-533](https://pagopa.atlassian.net/browse/IOBP-533)] Navigation to payment confirm screen if method with only one PSP ([#5487](https://github.com/pagopa/io-app/issues/5487)) ([7e7c2c9](https://github.com/pagopa/io-app/commit/7e7c2c9336ecd47eba953f9f0d2999063895496c))
+* [[IOBP-535](https://pagopa.atlassian.net/browse/IOBP-535)] Added german language for iOS app ([#5491](https://github.com/pagopa/io-app/issues/5491)) ([ae5ffeb](https://github.com/pagopa/io-app/commit/ae5ffeb80012092caf87890c5b0a98a01593f3d2))
+* [[IOBP-546](https://pagopa.atlassian.net/browse/IOBP-546)] Fix payment E2E tests ([#5498](https://github.com/pagopa/io-app/issues/5498)) ([eae6e83](https://github.com/pagopa/io-app/commit/eae6e833dd5c7201f4ee061d87ee67220c53fcd4))
+* [[IOPID-1416](https://pagopa.atlassian.net/browse/IOPID-1416)] Fix logic to show toast error ([#5502](https://github.com/pagopa/io-app/issues/5502)) ([50ad939](https://github.com/pagopa/io-app/commit/50ad93995196c4228b1691748fb99dcc0c79548f))
+* [[IOPID-1448](https://pagopa.atlassian.net/browse/IOPID-1448)] Fix double profile upsert ([#5486](https://github.com/pagopa/io-app/issues/5486)) ([0d72c2a](https://github.com/pagopa/io-app/commit/0d72c2af4330af9a6ea53cd5984b80356766c6df)), closes [/github.com/pagopa/io-app/pull/5486/files#diff-a48057473d6b62f0ea5bfaf0ed2ba3e8a390fdef1e1e3ff7e9760fd8c4a86ff6](https://github.com/pagopa//github.com/pagopa/io-app/pull/5486/files/issues/diff-a48057473d6b62f0ea5bfaf0ed2ba3e8a390fdef1e1e3ff7e9760fd8c4a86ff6) [/github.com/pagopa/io-app/pull/5486/files#diff-8a5b2f3967d681b976fe673762bd1061f5b430130c880c1195b76af06362cf31](https://github.com/pagopa//github.com/pagopa/io-app/pull/5486/files/issues/diff-8a5b2f3967d681b976fe673762bd1061f5b430130c880c1195b76af06362cf31)
+* **Cross:** [[IOAPPX-218](https://pagopa.atlassian.net/browse/IOAPPX-218)] Add the new `Titillium Sans Pro` typeface to the codebase ([#5459](https://github.com/pagopa/io-app/issues/5459)) ([20e54f4](https://github.com/pagopa/io-app/commit/20e54f4925c5bd460e49f6662d0f58d792d0317d))
+* **Cross:** [[IOAPPX-246](https://pagopa.atlassian.net/browse/IOAPPX-246)] Update `Podfile.lock` for `io-react-native-login-utils` ([#5499](https://github.com/pagopa/io-app/issues/5499)) ([e7ed331](https://github.com/pagopa/io-app/commit/e7ed3310efecc62b68b2d2b77808ffee42996496))
+
+## [2.53.0-rc.1](https://github.com/pagopa/io-app/compare/2.53.0-rc.0...2.53.0-rc.1) (2024-02-06)
+
+
+### Features
+
+* **Firma con IO:** [[SFEQS-2071](https://pagopa.atlassian.net/browse/SFEQS-2071)] Update `Firma con IO` with new DS components ([#5377](https://github.com/pagopa/io-app/issues/5377)) ([e34d79d](https://github.com/pagopa/io-app/commit/e34d79db5afdb45c5c91247c70afc54f911534aa))
+* [[IOCOM-867](https://pagopa.atlassian.net/browse/IOCOM-867)] Add service info in MessageDetailsScreen ([#5461](https://github.com/pagopa/io-app/issues/5461)) ([b2ea541](https://github.com/pagopa/io-app/commit/b2ea541609ff95afef6be15bb09cbffa682860fa))
+
+
+### Bug Fixes
+
+* [[IOBP-458](https://pagopa.atlassian.net/browse/IOBP-458),[IOBP-459](https://pagopa.atlassian.net/browse/IOBP-459)] Added accessibility label to the RNavScreenWithLargeHeader component ([#5467](https://github.com/pagopa/io-app/issues/5467)) ([a57d5e2](https://github.com/pagopa/io-app/commit/a57d5e2342be768bea5f3d5a92ae254dbd3e3725))
+* [[IOPID-1436](https://pagopa.atlassian.net/browse/IOPID-1436)], [[IOPID-1453](https://pagopa.atlassian.net/browse/IOPID-1453)] Delete helper button and header title on email validate screen and add logic to show support buttons in faq screen ([#5484](https://github.com/pagopa/io-app/issues/5484)) ([00743fd](https://github.com/pagopa/io-app/commit/00743fd5708ce4af62039ca7f6422bd22dbd747e)), closes [/github.com/pagopa/io-app/blob/6c076a1fee25c0a0853644d63aa894ff26854aa3/ts/sagas/startup.ts#L492](https://github.com/pagopa//github.com/pagopa/io-app/blob/6c076a1fee25c0a0853644d63aa894ff26854aa3/ts/sagas/startup.ts/issues/L492)
+* align podfile.lock io-react-native-zendesk version ([#5483](https://github.com/pagopa/io-app/issues/5483)) ([6c076a1](https://github.com/pagopa/io-app/commit/6c076a1fee25c0a0853644d63aa894ff26854aa3))
+
+
+### Chores
+
+* **Cross:** [[IOAPPX-210](https://pagopa.atlassian.net/browse/IOAPPX-210)] Upgrade `react-navigation` to v6 ([#5415](https://github.com/pagopa/io-app/issues/5415)) ([f730e55](https://github.com/pagopa/io-app/commit/f730e55d493df6230319494fad43626bf2070a98))
+* [[IOBP-529](https://pagopa.atlassian.net/browse/IOBP-529)] Retrieve payments methods list from eCommerce client endpoint ([#5479](https://github.com/pagopa/io-app/issues/5479)) ([63fd1c2](https://github.com/pagopa/io-app/commit/63fd1c2a73bd3408996cd35d02e145e9e195579a))
+* 🇩🇪 language adjustments ([#5490](https://github.com/pagopa/io-app/issues/5490)) ([957e245](https://github.com/pagopa/io-app/commit/957e2455330caae4af29f3a33bda6b7360ffb1d2))
+
 ## [2.53.0-rc.0](https://github.com/pagopa/io-app/compare/2.52.0-rc.0...2.53.0-rc.0) (2024-02-02)
 
 
diff --git a/Gemfile b/Gemfile
index 5afbf1ed051..956c32566e2 100644
--- a/Gemfile
+++ b/Gemfile
@@ -4,5 +4,6 @@ source "https://rubygems.org"
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
 ruby '>=2.6.10'
 
-gem "cocoapods", ">= 1.12.1"
+gem "cocoapods", ">= 1.15.2"
 gem "fastlane", "~> 2.212.2"
+gem 'activesupport', '>= 6.1.7.3', '< 7.1.0'
diff --git a/Gemfile.lock b/Gemfile.lock
index 83c42a47175..0079aaf3314 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -1,14 +1,16 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    CFPropertyList (3.0.6)
+    CFPropertyList (3.0.7)
+      base64
+      nkf
       rexml
-    activesupport (7.0.7.2)
+    activesupport (7.0.8.1)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
-    addressable (2.8.1)
+    addressable (2.8.6)
       public_suffix (>= 2.0.2, < 6.0)
     algoliasearch (1.27.5)
       httpclient (~> 2.8, >= 2.8.3)
@@ -32,13 +34,14 @@ GEM
     aws-sigv4 (1.8.0)
       aws-eventstream (~> 1, >= 1.0.2)
     babosa (1.0.4)
+    base64 (0.2.0)
     claide (1.1.0)
-    cocoapods (1.12.1)
+    cocoapods (1.15.2)
       addressable (~> 2.8)
       claide (>= 1.0.2, < 2.0)
-      cocoapods-core (= 1.12.1)
+      cocoapods-core (= 1.15.2)
       cocoapods-deintegrate (>= 1.0.3, < 2.0)
-      cocoapods-downloader (>= 1.6.0, < 2.0)
+      cocoapods-downloader (>= 2.1, < 3.0)
       cocoapods-plugins (>= 1.0.0, < 2.0)
       cocoapods-search (>= 1.0.0, < 2.0)
       cocoapods-trunk (>= 1.6.0, < 2.0)
@@ -50,8 +53,8 @@ GEM
       molinillo (~> 0.8.0)
       nap (~> 1.0)
       ruby-macho (>= 2.3.0, < 3.0)
-      xcodeproj (>= 1.21.0, < 2.0)
-    cocoapods-core (1.12.1)
+      xcodeproj (>= 1.23.0, < 2.0)
+    cocoapods-core (1.15.2)
       activesupport (>= 5.0, < 8)
       addressable (~> 2.8)
       algoliasearch (~> 1.0)
@@ -62,7 +65,7 @@ GEM
       public_suffix (~> 4.0)
       typhoeus (~> 1.0)
     cocoapods-deintegrate (1.0.5)
-    cocoapods-downloader (1.6.3)
+    cocoapods-downloader (2.1)
     cocoapods-plugins (1.0.0)
       nap
     cocoapods-search (1.0.1)
@@ -74,7 +77,7 @@ GEM
     colored2 (3.1.2)
     commander (4.6.0)
       highline (~> 2.0.0)
-    concurrent-ruby (1.2.2)
+    concurrent-ruby (1.2.3)
     declarative (0.0.20)
     digest-crc (0.6.5)
       rake (>= 12.0.0, < 14.0.0)
@@ -153,7 +156,7 @@ GEM
       xcodeproj (>= 1.13.0, < 2.0.0)
       xcpretty (~> 0.3.0)
       xcpretty-travis-formatter (>= 0.0.3)
-    ffi (1.15.5)
+    ffi (1.16.3)
     fourflusher (2.3.1)
     fuzzy_match (2.0.4)
     gh_inspector (1.1.3)
@@ -198,14 +201,14 @@ GEM
     http-cookie (1.0.5)
       domain_name (~> 0.5)
     httpclient (2.8.3)
-    i18n (1.14.1)
+    i18n (1.14.4)
       concurrent-ruby (~> 1.0)
     jmespath (1.6.2)
-    json (2.6.3)
+    json (2.7.1)
     jwt (2.7.1)
     mini_magick (4.12.0)
     mini_mime (1.1.5)
-    minitest (5.19.0)
+    minitest (5.22.3)
     molinillo (0.8.0)
     multi_json (1.15.0)
     multipart-post (2.0.0)
@@ -213,6 +216,7 @@ GEM
     nap (1.1.0)
     naturally (2.2.1)
     netrc (0.11.0)
+    nkf (0.2.0)
     optparse (0.1.1)
     os (1.1.4)
     plist (3.7.1)
@@ -223,7 +227,7 @@ GEM
       trailblazer-option (>= 0.1.1, < 0.2.0)
       uber (< 0.2.0)
     retriable (3.1.2)
-    rexml (3.2.5)
+    rexml (3.2.6)
     rouge (2.0.7)
     ruby-macho (2.5.1)
     ruby2_keywords (0.0.5)
@@ -245,14 +249,14 @@ GEM
     tty-screen (0.8.2)
     tty-spinner (0.9.3)
       tty-cursor (~> 0.7)
-    typhoeus (1.4.0)
+    typhoeus (1.4.1)
       ethon (>= 0.9.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     uber (0.1.0)
     unicode-display_width (1.8.0)
     word_wrap (1.0.0)
-    xcodeproj (1.22.0)
+    xcodeproj (1.24.0)
       CFPropertyList (>= 2.3.3, < 4.0)
       atomos (~> 0.1.3)
       claide (>= 1.0.2, < 2.0)
@@ -268,7 +272,8 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  cocoapods (>= 1.12.1)
+  activesupport (>= 6.1.7.3, < 7.1.0)
+  cocoapods (>= 1.15.2)
   fastlane (~> 2.212.2)
 
 RUBY VERSION
diff --git a/README.md b/README.md
index 8c1c79dec8c..27ba14798fd 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="img/app-logo.svg" width="100"/></br>
+  <img src="img/app-logo.svg" width="100" style="display: block" /></br>
   <h3 align="center">IO - The public services app</h3>
 </p>
 
diff --git a/_editorconfig b/_editorconfig
deleted file mode 100644
index 7c286132fe9..00000000000
--- a/_editorconfig
+++ /dev/null
@@ -1,3 +0,0 @@
-# Windows files
-[*.bat]
-end_of_line = crlf
diff --git a/android/app/build.gradle b/android/app/build.gradle
index d8c0b7bb2ed..c57ea58be7f 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -7,6 +7,7 @@ apply plugin: "com.android.application"
 apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
 
 import com.android.build.OutputFile
+import org.apache.tools.ant.taskdefs.condition.Os
 
 /**
  * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
@@ -144,26 +145,18 @@ android {
         applicationId "it.pagopa.io.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 100154794
-        versionName "2.53.0.0"
+        versionCode 100154809
+        versionName "2.58.0.0"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
         if (isNewArchitectureEnabled()) {
-            // We configure the NDK build only if you decide to opt-in for the New Architecture.
+            // We configure the CMake build only if you decide to opt-in for the New Architecture.
             externalNativeBuild {
-                ndkBuild {
-                    arguments "APP_PLATFORM=android-21",
-                        "APP_STL=c++_shared",
-                        "NDK_TOOLCHAIN_VERSION=clang",
-                        "GENERATED_SRC_DIR=$buildDir/generated/source",
-                        "PROJECT_BUILD_DIR=$buildDir",
-                        "REACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid",
-                        "REACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build",
-                        "NODE_MODULES_DIR=$rootDir/../node_modules"
-                    cFlags "-Wall", "-Werror", "-fexceptions", "-frtti", "-DWITH_INSPECTOR=1"
-                    cppFlags "-std=c++17"
-                    // Make sure this target name is the same you specify inside the
-                    // src/main/jni/Android.mk file for the `LOCAL_MODULE` variable.
-                    targets "ioapp_appmodules"
+                cmake {
+                    arguments "-DPROJECT_BUILD_DIR=$buildDir",
+                        "-DREACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid",
+                        "-DREACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build",
+                        "-DNODE_MODULES_DIR=$rootDir/../node_modules",
+                        "-DANDROID_STL=c++_shared"
                 }
             }
             if (!enableSeparateBuildPerCPUArchitecture) {
@@ -179,8 +172,8 @@ android {
         if (isNewArchitectureEnabled()) {
           // We configure the NDK build only if you decide to opt-in for the New Architecture.
           externalNativeBuild {
-              ndkBuild {
-                  path "$projectDir/src/main/jni/Android.mk"
+              cmake {
+                path "$projectDir/src/main/jni/CMakeLists.txt"
               }
           }
           def reactAndroidProjectDir = project(':ReactAndroid').projectDir
@@ -201,15 +194,15 @@ android {
               preDebugBuild.dependsOn(packageReactNdkDebugLibs)
               preReleaseBuild.dependsOn(packageReactNdkReleaseLibs)
               // Due to a bug inside AGP, we have to explicitly set a dependency
-              // between configureNdkBuild* tasks and the preBuild tasks.
+              // between configureCMakeDebug* tasks and the preBuild tasks.
               // This can be removed once this is solved: https://issuetracker.google.com/issues/207403732
-              configureNdkBuildRelease.dependsOn(preReleaseBuild)
-              configureNdkBuildDebug.dependsOn(preDebugBuild)
+              configureCMakeRelWithDebInfo.dependsOn(preReleaseBuild)
+              configureCMakeDebug.dependsOn(preDebugBuild)
               reactNativeArchitectures().each { architecture ->
-                  tasks.findByName("configureNdkBuildDebug[${architecture}]")?.configure {
+                  tasks.findByName("configureCMakeDebug[${architecture}]")?.configure {
                       dependsOn("preDebugBuild")
                   }
-                  tasks.findByName("configureNdkBuildRelease[${architecture}]")?.configure {
+                  tasks.findByName("configureCMakeRelWithDebInfo[${architecture}]")?.configure {
                       dependsOn("preReleaseBuild")
                   }
               }
@@ -334,13 +327,13 @@ dependencies {
             }
         }
     }
-    implementation project(':@react-native-community_datetimepicker')
     implementation project(':react-native-fingerprint-scanner')
     implementation project(':react-native-art')
     implementation "org.jetbrains.kotlin:kotlin-reflect:1.3.41"
     implementation('com.google.firebase:firebase-iid:21.1.0') {
         because "Firebase messaging 22.0.0 removes Firebase Instance ID API but out current version of the mixpanel sdk requires it https://github.com/mixpanel/mixpanel-android/issues/744 https://firebase.google.com/support/release-notes/android#messaging_v22-0-0"
     }
+    implementation "androidx.constraintlayout:constraintlayout:2.1.4"
 }
 
 // Run this once to be able to run the application with BUCK
diff --git a/android/app/src/main/assets/fonts/TitilliumSansPro-Black.otf b/android/app/src/main/assets/fonts/TitilliumSansPro-Black.otf
new file mode 100644
index 00000000000..3cd95e37eaf
Binary files /dev/null and b/android/app/src/main/assets/fonts/TitilliumSansPro-Black.otf differ
diff --git a/android/app/src/main/assets/fonts/TitilliumSansPro-BlackItalic.otf b/android/app/src/main/assets/fonts/TitilliumSansPro-BlackItalic.otf
new file mode 100644
index 00000000000..a6fd8bc8af7
Binary files /dev/null and b/android/app/src/main/assets/fonts/TitilliumSansPro-BlackItalic.otf differ
diff --git a/android/app/src/main/assets/fonts/TitilliumSansPro-Bold.otf b/android/app/src/main/assets/fonts/TitilliumSansPro-Bold.otf
new file mode 100644
index 00000000000..3d774ef1a03
Binary files /dev/null and b/android/app/src/main/assets/fonts/TitilliumSansPro-Bold.otf differ
diff --git a/android/app/src/main/assets/fonts/TitilliumSansPro-BoldItalic.otf b/android/app/src/main/assets/fonts/TitilliumSansPro-BoldItalic.otf
new file mode 100644
index 00000000000..bdf1aaedfc9
Binary files /dev/null and b/android/app/src/main/assets/fonts/TitilliumSansPro-BoldItalic.otf differ
diff --git a/android/app/src/main/assets/fonts/TitilliumSansPro-Italic.otf b/android/app/src/main/assets/fonts/TitilliumSansPro-Italic.otf
new file mode 100644
index 00000000000..51f58e72f82
Binary files /dev/null and b/android/app/src/main/assets/fonts/TitilliumSansPro-Italic.otf differ
diff --git a/android/app/src/main/assets/fonts/TitilliumSansPro-Light.otf b/android/app/src/main/assets/fonts/TitilliumSansPro-Light.otf
new file mode 100644
index 00000000000..c75c48c9763
Binary files /dev/null and b/android/app/src/main/assets/fonts/TitilliumSansPro-Light.otf differ
diff --git a/android/app/src/main/assets/fonts/TitilliumSansPro-LightItalic.otf b/android/app/src/main/assets/fonts/TitilliumSansPro-LightItalic.otf
new file mode 100644
index 00000000000..3146a822c96
Binary files /dev/null and b/android/app/src/main/assets/fonts/TitilliumSansPro-LightItalic.otf differ
diff --git a/android/app/src/main/assets/fonts/TitilliumSansPro-Regular.otf b/android/app/src/main/assets/fonts/TitilliumSansPro-Regular.otf
new file mode 100644
index 00000000000..4bd7bcf2d5a
Binary files /dev/null and b/android/app/src/main/assets/fonts/TitilliumSansPro-Regular.otf differ
diff --git a/android/app/src/main/assets/fonts/TitilliumSansPro-Semibold.otf b/android/app/src/main/assets/fonts/TitilliumSansPro-Semibold.otf
new file mode 100644
index 00000000000..fc7186dda82
Binary files /dev/null and b/android/app/src/main/assets/fonts/TitilliumSansPro-Semibold.otf differ
diff --git a/android/app/src/main/assets/fonts/TitilliumSansPro-SemiboldItalic.otf b/android/app/src/main/assets/fonts/TitilliumSansPro-SemiboldItalic.otf
new file mode 100644
index 00000000000..8242da46cf5
Binary files /dev/null and b/android/app/src/main/assets/fonts/TitilliumSansPro-SemiboldItalic.otf differ
diff --git a/android/app/src/main/assets/fonts/TitilliumSansPro-Thin.otf b/android/app/src/main/assets/fonts/TitilliumSansPro-Thin.otf
new file mode 100644
index 00000000000..e9f73560c42
Binary files /dev/null and b/android/app/src/main/assets/fonts/TitilliumSansPro-Thin.otf differ
diff --git a/android/app/src/main/assets/fonts/TitilliumSansPro-ThinItalic.otf b/android/app/src/main/assets/fonts/TitilliumSansPro-ThinItalic.otf
new file mode 100644
index 00000000000..869febf3eea
Binary files /dev/null and b/android/app/src/main/assets/fonts/TitilliumSansPro-ThinItalic.otf differ
diff --git a/android/app/src/main/jni/Android.mk b/android/app/src/main/jni/Android.mk
deleted file mode 100644
index ebb715535f1..00000000000
--- a/android/app/src/main/jni/Android.mk
+++ /dev/null
@@ -1,39 +0,0 @@
-THIS_DIR := $(call my-dir)
-include $(REACT_ANDROID_DIR)/Android-prebuilt.mk
-# If you wish to add a custom TurboModule or Fabric component in your app you
-# will have to include the following autogenerated makefile.
-# include $(GENERATED_SRC_DIR)/codegen/jni/Android.mk
-include $(CLEAR_VARS)
-LOCAL_PATH := $(THIS_DIR)
-# You can customize the name of your application .so file here.
-LOCAL_MODULE := ioapp_appmodules
-LOCAL_C_INCLUDES := $(LOCAL_PATH)
-LOCAL_SRC_FILES := $(wildcard $(LOCAL_PATH)/*.cpp)
-LOCAL_EXPORT_C_INCLUDES := $(LOCAL_PATH)
-# If you wish to add a custom TurboModule or Fabric component in your app you
-# will have to uncomment those lines to include the generated source
-# files from the codegen (placed in $(GENERATED_SRC_DIR)/codegen/jni)
-#
-# LOCAL_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni
-# LOCAL_SRC_FILES += $(wildcard $(GENERATED_SRC_DIR)/codegen/jni/*.cpp)
-# LOCAL_EXPORT_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni
-# Here you should add any native library you wish to depend on.
-LOCAL_SHARED_LIBRARIES := \
-  libfabricjni \
-  libfbjni \
-  libfolly_runtime \
-  libglog \
-  libjsi \
-  libreact_codegen_rncore \
-  libreact_debug \
-  libreact_nativemodule_core \
-  libreact_render_componentregistry \
-  libreact_render_core \
-  libreact_render_debug \
-  libreact_render_graphics \
-  librrc_view \
-  libruntimeexecutor \
-  libturbomodulejsijni \
-  libyoga
-LOCAL_CFLAGS := -DLOG_TAG=\"ReactNative\" -fexceptions -frtti -std=c++17 -Wall
-include $(BUILD_SHARED_LIBRARY)
\ No newline at end of file
diff --git a/android/app/src/main/jni/CMakeLists.txt b/android/app/src/main/jni/CMakeLists.txt
new file mode 100644
index 00000000000..0dd7f25118c
--- /dev/null
+++ b/android/app/src/main/jni/CMakeLists.txt
@@ -0,0 +1,7 @@
+cmake_minimum_required(VERSION 3.13)
+
+# Define the library name here.
+project(ioapp_appmodules)
+
+# This file includes all the necessary to let you build your application with the New Architecture.
+include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
diff --git a/android/app/src/main/jni/MainApplicationModuleProvider.cpp b/android/app/src/main/jni/MainApplicationModuleProvider.cpp
index 640a5baac65..1e04d15b34f 100644
--- a/android/app/src/main/jni/MainApplicationModuleProvider.cpp
+++ b/android/app/src/main/jni/MainApplicationModuleProvider.cpp
@@ -1,9 +1,10 @@
 #include "MainApplicationModuleProvider.h"
+#include <rncli.h>
 #include <rncore.h>
 namespace facebook {
 namespace react {
 std::shared_ptr<TurboModule> MainApplicationModuleProvider(
-    const std::string moduleName,
+    const std::string &moduleName,
     const JavaTurboModule::InitParams &params) {
   // Here you can provide your own module provider for TurboModules coming from
   // either your application or from external libraries. The approach to follow
@@ -14,6 +15,12 @@ std::shared_ptr<TurboModule> MainApplicationModuleProvider(
   //    return module;
   // }
   // return rncore_ModuleProvider(moduleName, params);
+  // Module providers autolinked by RN CLI
+  auto rncli_module = rncli_ModuleProvider(moduleName, params);
+  if (rncli_module != nullptr) {
+    return rncli_module;
+  }
+  
   return rncore_ModuleProvider(moduleName, params);
 }
 } // namespace react
diff --git a/android/app/src/main/jni/MainApplicationModuleProvider.h b/android/app/src/main/jni/MainApplicationModuleProvider.h
index f89ddbd02d5..4515c40bb83 100644
--- a/android/app/src/main/jni/MainApplicationModuleProvider.h
+++ b/android/app/src/main/jni/MainApplicationModuleProvider.h
@@ -5,7 +5,7 @@
 namespace facebook {
 namespace react {
 std::shared_ptr<TurboModule> MainApplicationModuleProvider(
-    const std::string moduleName,
+    const std::string &moduleName,
     const JavaTurboModule::InitParams &params);
 } // namespace react
 } // namespace facebook
\ No newline at end of file
diff --git a/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp b/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp
index decb4e17e00..8439888b532 100644
--- a/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp
+++ b/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp
@@ -18,19 +18,19 @@ void MainApplicationTurboModuleManagerDelegate::registerNatives() {
 }
 std::shared_ptr<TurboModule>
 MainApplicationTurboModuleManagerDelegate::getTurboModule(
-    const std::string name,
-    const std::shared_ptr<CallInvoker> jsInvoker) {
+    const std::string &name,
+    const std::shared_ptr<CallInvoker> &jsInvoker) {
   // Not implemented yet: provide pure-C++ NativeModules here.
   return nullptr;
 }
 std::shared_ptr<TurboModule>
 MainApplicationTurboModuleManagerDelegate::getTurboModule(
-    const std::string name,
+    const std::string &name,
     const JavaTurboModule::InitParams &params) {
   return MainApplicationModuleProvider(name, params);
 }
 bool MainApplicationTurboModuleManagerDelegate::canCreateTurboModule(
-    std::string name) {
+    const std::string n&ame) {
   return getTurboModule(name, nullptr) != nullptr ||
       getTurboModule(name, {.moduleName = name}) != nullptr;
 }
diff --git a/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h b/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h
index 3dc56868f80..c31481973d3 100644
--- a/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h
+++ b/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.h
@@ -15,16 +15,16 @@ class MainApplicationTurboModuleManagerDelegate
   static jni::local_ref<jhybriddata> initHybrid(jni::alias_ref<jhybridobject>);
   static void registerNatives();
   std::shared_ptr<TurboModule> getTurboModule(
-      const std::string name,
-      const std::shared_ptr<CallInvoker> jsInvoker) override;
+      const std::string &name,
+      const std::shared_ptr<CallInvoker> &jsInvoker) override;
   std::shared_ptr<TurboModule> getTurboModule(
-      const std::string name,
+      const std::string &name,
       const JavaTurboModule::InitParams &params) override;
   /**
    * Test-only method. Allows user to verify whether a TurboModule can be
    * created by instances of this class.
    */
-  bool canCreateTurboModule(std::string name);
+  bool canCreateTurboModule(const std::string &name);
 };
 } // namespace react
 } // namespace facebook
diff --git a/android/app/src/main/jni/MainComponentsRegistry.cpp b/android/app/src/main/jni/MainComponentsRegistry.cpp
index 01da5875a8e..c634fa5bb2e 100644
--- a/android/app/src/main/jni/MainComponentsRegistry.cpp
+++ b/android/app/src/main/jni/MainComponentsRegistry.cpp
@@ -3,12 +3,17 @@
 #include <fbjni/fbjni.h>
 #include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
 #include <react/renderer/components/rncore/ComponentDescriptors.h>
+#include <rncli.h>
+
 namespace facebook {
 namespace react {
 MainComponentsRegistry::MainComponentsRegistry(ComponentFactory *delegate) {}
 std::shared_ptr<ComponentDescriptorProviderRegistry const>
 MainComponentsRegistry::sharedProviderRegistry() {
   auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry();
+
+  // Autolinked providers registered by RN CLI
+  rncli_registerProviders(providerRegistry);
   // Custom Fabric Components go here. You can register custom
   // components coming from your App or from 3rd party libraries here.
   //
diff --git a/android/app/src/main/res/drawable/eu_next_logo.xml b/android/app/src/main/res/drawable/eu_next_logo.xml
new file mode 100644
index 00000000000..897c986a5a1
--- /dev/null
+++ b/android/app/src/main/res/drawable/eu_next_logo.xml
@@ -0,0 +1,177 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="110dp"
+    android:height="26dp"
+    android:viewportWidth="110"
+    android:viewportHeight="26">
+  <path
+      android:pathData="M36.63,24.44H1.66V1.2H36.63V24.44ZM0.96,0.52V25.15H37.33V0.52H0.96Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M18.4,6.26L19.14,5.72L19.88,6.26L19.6,5.39L20.35,4.86H19.42L19.14,3.98L18.86,4.86L17.93,4.86L18.68,5.39L18.4,6.26Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M14.58,7.28L15.32,6.75L16.06,7.28L15.78,6.42L16.53,5.88H15.6L15.32,5L15.04,5.88L14.11,5.88L14.86,6.42L14.58,7.28Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M12.53,7.79L12.24,8.67L11.32,8.67L12.07,9.21L11.79,10.08L12.53,9.54L13.26,10.08L12.98,9.21L13.73,8.67H12.81L12.53,7.79Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M11.5,13.34L12.24,13.88L11.96,13.01L12.71,12.47H11.78L11.5,11.59L11.22,12.48L10.3,12.47L11.05,13.01L10.76,13.88L11.5,13.34Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M12.81,16.29L12.53,15.41L12.24,16.29L11.32,16.29L12.07,16.83L11.79,17.69L12.53,17.16L13.26,17.69L12.98,16.83L13.73,16.29H12.81Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M15.61,19.08L15.33,18.2L15.04,19.08L14.12,19.08L14.87,19.62L14.59,20.49L15.33,19.95L16.06,20.49L15.78,19.62L16.53,19.08H15.61Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M19.42,20.09L19.14,19.21L18.86,20.09L17.93,20.09L18.68,20.63L18.4,21.5L19.14,20.96L19.88,21.5L19.6,20.63L20.35,20.09H19.42Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M23.24,19.08L22.95,18.2L22.67,19.08L21.75,19.08L22.5,19.62L22.22,20.49L22.95,19.95L23.69,20.49L23.41,19.62L24.16,19.08H23.24Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M26.04,16.29L25.75,15.41L25.47,16.29L24.55,16.29L25.3,16.83L25.01,17.69L25.75,17.16L26.49,17.69L26.21,16.83L26.96,16.29H26.04Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M27.97,12.46H27.05L26.77,11.58L26.48,12.46L25.56,12.46L26.31,13L26.03,13.87L26.77,13.33L27.5,13.87L27.22,13L27.97,12.46Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M25.01,10.07L25.75,9.53L26.49,10.07L26.21,9.2L26.96,8.66H26.04L25.75,7.78L25.47,8.66L24.55,8.66L25.3,9.2L25.01,10.07Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M22.96,5L22.68,5.88L21.76,5.88L22.51,6.42L22.23,7.29L22.97,6.75L23.7,7.29L23.42,6.42L24.17,5.88H23.25L22.96,5Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M40.96,6.76V1.56H44.53V2.44H42.01V3.67H44.18V4.55H42.01V6.76H40.96Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M45.39,6.76V2.99H46.38V6.76H45.39ZM45.39,2.48V1.56H46.38V2.48H45.39Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M50.84,6.76H49.84V4.84C49.84,4.43 49.82,4.17 49.78,4.05C49.73,3.93 49.67,3.84 49.57,3.77C49.47,3.7 49.36,3.67 49.22,3.67C49.05,3.67 48.9,3.72 48.76,3.81C48.62,3.91 48.53,4.03 48.48,4.19C48.42,4.34 48.4,4.63 48.4,5.05V6.76H47.4V2.99H48.33V3.55C48.66,3.12 49.07,2.91 49.57,2.91C49.79,2.91 49.99,2.95 50.17,3.03C50.36,3.11 50.5,3.21 50.59,3.33C50.68,3.45 50.75,3.59 50.78,3.75C50.82,3.91 50.84,4.13 50.84,4.42V6.76Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M53.93,4.95C53.8,4.99 53.6,5.04 53.33,5.1C53.05,5.16 52.87,5.22 52.78,5.28C52.65,5.37 52.59,5.49 52.59,5.63C52.59,5.77 52.64,5.89 52.74,5.99C52.85,6.09 52.98,6.14 53.14,6.14C53.32,6.14 53.49,6.08 53.66,5.96C53.78,5.87 53.86,5.76 53.89,5.63C53.92,5.55 53.93,5.39 53.93,5.15V4.95ZM52.6,4.14L51.69,3.98C51.79,3.62 51.97,3.35 52.22,3.17C52.47,3 52.84,2.91 53.33,2.91C53.77,2.91 54.1,2.96 54.32,3.07C54.54,3.17 54.69,3.31 54.78,3.47C54.87,3.63 54.91,3.93 54.91,4.36L54.9,5.52C54.9,5.85 54.92,6.09 54.95,6.25C54.98,6.41 55.04,6.58 55.13,6.76H54.14C54.12,6.69 54.08,6.59 54.05,6.46C54.03,6.4 54.02,6.36 54.01,6.35C53.84,6.51 53.66,6.64 53.46,6.72C53.27,6.8 53.06,6.84 52.84,6.84C52.45,6.84 52.15,6.74 51.92,6.53C51.7,6.32 51.59,6.05 51.59,5.73C51.59,5.52 51.64,5.33 51.74,5.16C51.84,4.99 51.99,4.87 52.17,4.78C52.35,4.69 52.62,4.61 52.96,4.55C53.43,4.46 53.75,4.38 53.93,4.3V4.2C53.93,4.01 53.89,3.88 53.79,3.79C53.7,3.71 53.52,3.67 53.25,3.67C53.08,3.67 52.94,3.71 52.84,3.78C52.74,3.85 52.66,3.97 52.6,4.14Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M59.33,6.76H58.33V4.84C58.33,4.43 58.31,4.17 58.27,4.05C58.22,3.93 58.15,3.84 58.06,3.77C57.96,3.7 57.85,3.67 57.71,3.67C57.54,3.67 57.38,3.72 57.25,3.81C57.11,3.91 57.02,4.03 56.96,4.19C56.91,4.34 56.89,4.63 56.89,5.05V6.76H55.89V2.99H56.82V3.55C57.15,3.12 57.56,2.91 58.06,2.91C58.28,2.91 58.48,2.95 58.66,3.03C58.85,3.11 58.98,3.21 59.08,3.33C59.17,3.45 59.24,3.59 59.27,3.75C59.31,3.91 59.33,4.13 59.33,4.42V6.76Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M59.94,6.76V5.98L61.35,4.36C61.58,4.1 61.76,3.91 61.87,3.8C61.75,3.81 61.6,3.81 61.41,3.81L60.08,3.82V2.99H63.2V3.7L61.75,5.36L61.25,5.91C61.52,5.89 61.69,5.88 61.76,5.88H63.31V6.76H59.94Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M63.98,6.76V2.99H64.98V6.76H63.98ZM63.98,2.48V1.56H64.98V2.48H63.98Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M68.08,4.95C67.95,4.99 67.75,5.04 67.47,5.1C67.2,5.16 67.01,5.22 66.93,5.28C66.8,5.37 66.73,5.49 66.73,5.63C66.73,5.77 66.79,5.89 66.89,5.99C66.99,6.09 67.13,6.14 67.29,6.14C67.47,6.14 67.64,6.08 67.8,5.96C67.92,5.87 68,5.76 68.04,5.63C68.07,5.55 68.08,5.39 68.08,5.15V4.95ZM66.74,4.14L65.84,3.98C65.94,3.62 66.12,3.35 66.36,3.17C66.61,3 66.98,2.91 67.47,2.91C67.92,2.91 68.25,2.96 68.47,3.07C68.68,3.17 68.84,3.31 68.93,3.47C69.02,3.63 69.06,3.93 69.06,4.36L69.05,5.52C69.05,5.85 69.07,6.09 69.1,6.25C69.13,6.41 69.19,6.58 69.28,6.76H68.29C68.26,6.69 68.23,6.59 68.19,6.46C68.18,6.4 68.17,6.36 68.16,6.35C67.99,6.51 67.81,6.64 67.61,6.72C67.42,6.8 67.21,6.84 66.99,6.84C66.6,6.84 66.3,6.74 66.07,6.53C65.85,6.32 65.74,6.05 65.74,5.73C65.74,5.52 65.79,5.33 65.89,5.16C65.99,4.99 66.13,4.87 66.32,4.78C66.5,4.69 66.76,4.61 67.11,4.55C67.58,4.46 67.9,4.38 68.08,4.3V4.2C68.08,4.01 68.03,3.88 67.94,3.79C67.84,3.71 67.66,3.67 67.4,3.67C67.22,3.67 67.09,3.71 66.99,3.78C66.89,3.85 66.81,3.97 66.74,4.14Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M71.77,2.99V3.79H71.09V5.3C71.09,5.61 71.1,5.79 71.11,5.84C71.12,5.89 71.15,5.93 71.2,5.97C71.25,6 71.3,6.02 71.37,6.02C71.46,6.02 71.59,5.98 71.77,5.92L71.86,6.69C71.62,6.79 71.36,6.84 71.07,6.84C70.89,6.84 70.72,6.81 70.58,6.75C70.44,6.69 70.33,6.61 70.26,6.52C70.19,6.42 70.15,6.29 70.12,6.13C70.1,6.01 70.09,5.78 70.09,5.43V3.79H69.63V2.99H70.09V2.25L71.09,1.67V2.99H71.77Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M73.26,4.88C73.26,5.25 73.35,5.53 73.52,5.73C73.7,5.93 73.92,6.03 74.18,6.03C74.44,6.03 74.66,5.93 74.84,5.73C75.01,5.53 75.1,5.25 75.1,4.87C75.1,4.5 75.01,4.22 74.84,4.02C74.66,3.82 74.44,3.72 74.18,3.72C73.92,3.72 73.7,3.82 73.52,4.02C73.35,4.22 73.26,4.5 73.26,4.88ZM72.24,4.82C72.24,4.49 72.32,4.17 72.48,3.86C72.64,3.55 72.88,3.32 73.17,3.15C73.47,2.99 73.81,2.91 74.18,2.91C74.75,2.91 75.22,3.09 75.58,3.46C75.95,3.83 76.13,4.3 76.13,4.87C76.13,5.43 75.94,5.91 75.58,6.28C75.21,6.65 74.74,6.84 74.19,6.84C73.84,6.84 73.51,6.76 73.2,6.61C72.88,6.45 72.64,6.22 72.48,5.92C72.32,5.62 72.24,5.25 72.24,4.82Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M41.74,13.5C41.74,13.9 41.8,14.19 41.91,14.37C42.07,14.63 42.29,14.76 42.58,14.76C42.81,14.76 43.01,14.66 43.17,14.47C43.33,14.27 43.41,13.98 43.41,13.6C43.41,13.16 43.33,12.85 43.17,12.66C43.02,12.47 42.82,12.38 42.57,12.38C42.34,12.38 42.14,12.47 41.98,12.66C41.82,12.85 41.74,13.13 41.74,13.5ZM44.4,15.46H43.48V14.91C43.32,15.12 43.14,15.28 42.93,15.39C42.72,15.49 42.51,15.55 42.3,15.55C41.86,15.55 41.49,15.37 41.18,15.02C40.87,14.68 40.72,14.19 40.72,13.57C40.72,12.93 40.87,12.44 41.17,12.11C41.47,11.78 41.85,11.61 42.31,11.61C42.73,11.61 43.1,11.79 43.41,12.14V10.27H44.4V15.46Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M47.47,13.66C47.34,13.7 47.14,13.75 46.86,13.81C46.58,13.87 46.4,13.92 46.32,13.98C46.19,14.07 46.12,14.19 46.12,14.33C46.12,14.47 46.17,14.59 46.28,14.69C46.38,14.79 46.52,14.85 46.68,14.85C46.86,14.85 47.03,14.79 47.19,14.67C47.31,14.58 47.39,14.47 47.43,14.34C47.46,14.25 47.47,14.09 47.47,13.85V13.66ZM46.13,12.85L45.23,12.68C45.33,12.32 45.5,12.05 45.75,11.88C46,11.7 46.37,11.61 46.86,11.61C47.31,11.61 47.64,11.67 47.86,11.77C48.07,11.88 48.23,12.01 48.32,12.17C48.4,12.33 48.45,12.63 48.45,13.06L48.44,14.23C48.44,14.56 48.45,14.8 48.49,14.96C48.52,15.11 48.58,15.28 48.67,15.46H47.68C47.65,15.4 47.62,15.3 47.58,15.17C47.57,15.11 47.55,15.07 47.55,15.05C47.38,15.22 47.19,15.34 47,15.42C46.81,15.51 46.6,15.55 46.38,15.55C45.99,15.55 45.68,15.44 45.46,15.23C45.24,15.02 45.12,14.76 45.12,14.43C45.12,14.22 45.18,14.03 45.28,13.87C45.38,13.7 45.52,13.57 45.71,13.48C45.89,13.4 46.15,13.32 46.5,13.25C46.97,13.16 47.29,13.08 47.47,13.01V12.91C47.47,12.72 47.42,12.58 47.33,12.5C47.23,12.42 47.05,12.38 46.79,12.38C46.61,12.38 46.47,12.41 46.37,12.48C46.28,12.55 46.19,12.67 46.13,12.85Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M49.43,15.46V10.27H50.43V15.46H49.43Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M51.45,15.46V10.27H52.45V15.46H51.45Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M53.47,12.11L53.28,11.15V10.27H54.37V11.15L54.2,12.11H53.47Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M55.2,10.27H56.26V13.08C56.26,13.53 56.27,13.82 56.29,13.95C56.34,14.16 56.45,14.33 56.62,14.46C56.79,14.59 57.02,14.65 57.31,14.65C57.61,14.65 57.83,14.59 57.99,14.47C58.14,14.35 58.23,14.2 58.26,14.02C58.29,13.85 58.31,13.55 58.31,13.14V10.27H59.36V13C59.36,13.62 59.33,14.06 59.27,14.32C59.21,14.57 59.11,14.79 58.96,14.97C58.8,15.15 58.6,15.29 58.34,15.39C58.09,15.5 57.75,15.55 57.34,15.55C56.85,15.55 56.47,15.49 56.21,15.38C55.95,15.26 55.75,15.12 55.6,14.93C55.45,14.75 55.35,14.56 55.31,14.36C55.24,14.06 55.2,13.62 55.2,13.04V10.27Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M63.89,15.46H62.89V13.54C62.89,13.14 62.87,12.87 62.83,12.75C62.78,12.63 62.71,12.54 62.62,12.48C62.52,12.41 62.41,12.38 62.27,12.38C62.1,12.38 61.94,12.42 61.81,12.52C61.67,12.61 61.58,12.74 61.53,12.89C61.47,13.05 61.45,13.34 61.45,13.76V15.46H60.45V11.7H61.38V12.25C61.71,11.83 62.12,11.62 62.62,11.62C62.84,11.62 63.04,11.65 63.22,11.73C63.41,11.81 63.54,11.91 63.64,12.04C63.73,12.16 63.8,12.3 63.83,12.45C63.87,12.61 63.89,12.83 63.89,13.12V15.46Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M64.9,15.46V11.7H65.9V15.46H64.9ZM64.9,11.19V10.27H65.9V11.19H64.9Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M67.71,13.58C67.71,13.95 67.8,14.24 67.98,14.44C68.16,14.64 68.38,14.74 68.64,14.74C68.9,14.74 69.12,14.64 69.29,14.44C69.47,14.24 69.56,13.95 69.56,13.57C69.56,13.21 69.47,12.92 69.29,12.72C69.12,12.53 68.9,12.43 68.64,12.43C68.38,12.43 68.16,12.53 67.98,12.72C67.8,12.92 67.71,13.21 67.71,13.58ZM66.69,13.53C66.69,13.2 66.77,12.88 66.94,12.57C67.1,12.26 67.33,12.02 67.63,11.86C67.93,11.7 68.26,11.61 68.63,11.61C69.2,11.61 69.67,11.8 70.04,12.17C70.4,12.54 70.58,13.01 70.58,13.57C70.58,14.14 70.4,14.61 70.03,14.99C69.66,15.36 69.2,15.55 68.64,15.55C68.3,15.55 67.97,15.47 67.65,15.31C67.34,15.16 67.1,14.93 66.94,14.63C66.77,14.33 66.69,13.96 66.69,13.53Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M74.8,15.46H73.8V13.54C73.8,13.14 73.78,12.87 73.73,12.75C73.69,12.63 73.62,12.54 73.53,12.48C73.43,12.41 73.32,12.38 73.18,12.38C73.01,12.38 72.85,12.42 72.72,12.52C72.58,12.61 72.48,12.74 72.43,12.89C72.38,13.05 72.36,13.34 72.36,13.76V15.46H71.36V11.7H72.29V12.25C72.61,11.83 73.03,11.62 73.53,11.62C73.75,11.62 73.95,11.65 74.13,11.73C74.31,11.81 74.45,11.91 74.55,12.04C74.64,12.16 74.7,12.3 74.74,12.45C74.78,12.61 74.8,12.83 74.8,13.12V15.46Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M78.05,13.26C78.04,12.97 77.97,12.75 77.83,12.6C77.68,12.45 77.51,12.38 77.31,12.38C77.09,12.38 76.91,12.46 76.77,12.61C76.63,12.77 76.56,12.99 76.56,13.26H78.05ZM77.99,14.26L78.99,14.43C78.86,14.79 78.66,15.07 78.38,15.26C78.11,15.45 77.76,15.55 77.35,15.55C76.69,15.55 76.21,15.33 75.89,14.91C75.64,14.56 75.52,14.13 75.52,13.61C75.52,12.99 75.68,12.5 76.01,12.14C76.33,11.79 76.75,11.61 77.25,11.61C77.81,11.61 78.25,11.8 78.58,12.17C78.9,12.54 79.06,13.11 79.04,13.87H76.54C76.55,14.16 76.63,14.39 76.78,14.56C76.94,14.72 77.13,14.8 77.36,14.8C77.51,14.8 77.65,14.76 77.75,14.68C77.86,14.59 77.94,14.45 77.99,14.26Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M84.12,13.26C84.11,12.97 84.03,12.75 83.89,12.6C83.75,12.45 83.58,12.38 83.37,12.38C83.16,12.38 82.98,12.46 82.83,12.61C82.69,12.77 82.62,12.99 82.62,13.26H84.12ZM84.06,14.26L85.05,14.43C84.93,14.79 84.72,15.07 84.45,15.26C84.17,15.45 83.83,15.55 83.41,15.55C82.76,15.55 82.27,15.33 81.96,14.91C81.71,14.56 81.58,14.13 81.58,13.61C81.58,12.99 81.75,12.5 82.07,12.14C82.4,11.79 82.81,11.61 83.31,11.61C83.87,11.61 84.32,11.8 84.64,12.17C84.97,12.54 85.12,13.11 85.11,13.87H82.61C82.61,14.16 82.69,14.39 82.85,14.56C83,14.72 83.19,14.8 83.42,14.8C83.58,14.8 83.71,14.76 83.82,14.68C83.92,14.59 84.01,14.45 84.06,14.26Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M88.4,15.46V14.9C88.27,15.1 88.09,15.26 87.86,15.37C87.64,15.49 87.4,15.55 87.15,15.55C86.9,15.55 86.67,15.49 86.47,15.38C86.27,15.27 86.12,15.11 86.03,14.91C85.94,14.71 85.9,14.43 85.9,14.08V11.7H86.9V13.43C86.9,13.96 86.92,14.28 86.95,14.4C86.99,14.52 87.06,14.61 87.15,14.68C87.25,14.75 87.37,14.79 87.52,14.79C87.69,14.79 87.85,14.74 87.98,14.65C88.12,14.56 88.21,14.44 88.26,14.3C88.31,14.16 88.33,13.83 88.33,13.29V11.7H89.33V15.46H88.4Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M91.32,15.46H90.32V11.7H91.25V12.24C91.41,11.98 91.55,11.82 91.68,11.74C91.8,11.66 91.95,11.62 92.11,11.62C92.34,11.62 92.55,11.68 92.76,11.8L92.46,12.67C92.29,12.56 92.13,12.51 91.99,12.51C91.85,12.51 91.73,12.55 91.63,12.62C91.53,12.7 91.46,12.84 91.4,13.04C91.35,13.24 91.32,13.66 91.32,14.3V15.46Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M93.99,13.58C93.99,13.95 94.08,14.24 94.25,14.44C94.43,14.64 94.65,14.74 94.91,14.74C95.17,14.74 95.39,14.64 95.57,14.44C95.74,14.24 95.83,13.95 95.83,13.57C95.83,13.21 95.74,12.92 95.57,12.72C95.39,12.53 95.17,12.43 94.91,12.43C94.65,12.43 94.43,12.53 94.25,12.72C94.08,12.92 93.99,13.21 93.99,13.58ZM92.96,13.53C92.96,13.2 93.05,12.88 93.21,12.57C93.37,12.26 93.6,12.02 93.9,11.86C94.2,11.7 94.54,11.61 94.91,11.61C95.48,11.61 95.94,11.8 96.31,12.17C96.67,12.54 96.86,13.01 96.86,13.57C96.86,14.14 96.67,14.61 96.3,14.99C95.94,15.36 95.47,15.55 94.91,15.55C94.57,15.55 94.24,15.47 93.92,15.31C93.61,15.16 93.37,14.93 93.21,14.63C93.05,14.33 92.96,13.96 92.96,13.53Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M98.6,13.52C98.6,13.94 98.68,14.25 98.85,14.45C99.02,14.66 99.22,14.76 99.46,14.76C99.7,14.76 99.89,14.66 100.04,14.48C100.2,14.29 100.27,13.99 100.27,13.57C100.27,13.17 100.19,12.88 100.04,12.69C99.88,12.5 99.68,12.4 99.45,12.4C99.2,12.4 99,12.5 98.84,12.68C98.68,12.87 98.6,13.15 98.6,13.52ZM97.61,11.7H98.54V12.25C98.66,12.06 98.82,11.91 99.03,11.79C99.24,11.67 99.47,11.62 99.72,11.62C100.15,11.62 100.53,11.79 100.83,12.13C101.14,12.47 101.29,12.95 101.29,13.56C101.29,14.19 101.14,14.68 100.83,15.02C100.52,15.37 100.15,15.55 99.71,15.55C99.5,15.55 99.31,15.51 99.14,15.42C98.97,15.34 98.79,15.2 98.61,15V16.89H97.61V11.7Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M104.32,13.26C104.32,12.97 104.24,12.75 104.1,12.6C103.96,12.45 103.78,12.38 103.58,12.38C103.36,12.38 103.18,12.46 103.04,12.61C102.9,12.77 102.83,12.99 102.83,13.26H104.32ZM104.27,14.26L105.26,14.43C105.13,14.79 104.93,15.07 104.65,15.26C104.38,15.45 104.03,15.55 103.62,15.55C102.96,15.55 102.48,15.33 102.16,14.91C101.92,14.56 101.79,14.13 101.79,13.61C101.79,12.99 101.95,12.5 102.28,12.14C102.61,11.79 103.02,11.61 103.52,11.61C104.08,11.61 104.52,11.8 104.85,12.17C105.17,12.54 105.33,13.11 105.31,13.87H102.81C102.82,14.16 102.9,14.39 103.06,14.56C103.21,14.72 103.4,14.8 103.63,14.8C103.79,14.8 103.92,14.76 104.03,14.68C104.13,14.59 104.21,14.45 104.27,14.26Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M108.21,13.66C108.08,13.7 107.88,13.75 107.6,13.81C107.32,13.87 107.14,13.92 107.06,13.98C106.93,14.07 106.86,14.19 106.86,14.33C106.86,14.47 106.91,14.59 107.02,14.69C107.12,14.79 107.25,14.85 107.42,14.85C107.6,14.85 107.77,14.79 107.93,14.67C108.05,14.58 108.13,14.47 108.17,14.34C108.19,14.25 108.21,14.09 108.21,13.85V13.66ZM106.87,12.85L105.97,12.68C106.07,12.32 106.24,12.05 106.49,11.88C106.74,11.7 107.11,11.61 107.6,11.61C108.05,11.61 108.38,11.67 108.6,11.77C108.81,11.88 108.97,12.01 109.06,12.17C109.14,12.33 109.19,12.63 109.19,13.06L109.18,14.23C109.18,14.56 109.19,14.8 109.23,14.96C109.26,15.11 109.32,15.28 109.4,15.46H108.42C108.39,15.4 108.36,15.3 108.32,15.17C108.31,15.11 108.29,15.07 108.29,15.05C108.12,15.22 107.93,15.34 107.74,15.42C107.54,15.51 107.34,15.55 107.12,15.55C106.73,15.55 106.42,15.44 106.2,15.23C105.98,15.02 105.86,14.76 105.86,14.43C105.86,14.22 105.92,14.03 106.02,13.87C106.12,13.7 106.26,13.57 106.44,13.48C106.63,13.4 106.89,13.32 107.24,13.25C107.71,13.16 108.03,13.08 108.21,13.01V12.91C108.21,12.72 108.16,12.58 108.07,12.5C107.97,12.42 107.79,12.38 107.53,12.38C107.35,12.38 107.21,12.41 107.11,12.48C107.01,12.55 106.93,12.67 106.87,12.85Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M40.95,23.97V19.49H41.56L43.93,23.01V19.49H44.5V23.97H43.89L41.52,20.45V23.97H40.95Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M47.66,22.93L48.23,23C48.14,23.33 47.98,23.59 47.73,23.77C47.49,23.96 47.18,24.05 46.8,24.05C46.32,24.05 45.95,23.9 45.67,23.61C45.39,23.32 45.25,22.9 45.25,22.38C45.25,21.83 45.39,21.4 45.67,21.1C45.95,20.8 46.32,20.65 46.77,20.65C47.21,20.65 47.56,20.8 47.84,21.09C48.12,21.39 48.25,21.81 48.25,22.34C48.25,22.37 48.25,22.42 48.25,22.49H45.82C45.84,22.85 45.94,23.12 46.12,23.31C46.3,23.5 46.53,23.59 46.8,23.59C47.01,23.59 47.18,23.54 47.32,23.44C47.47,23.33 47.58,23.16 47.66,22.93ZM45.85,22.04H47.67C47.65,21.76 47.58,21.56 47.46,21.42C47.28,21.21 47.06,21.1 46.78,21.1C46.52,21.1 46.31,21.19 46.13,21.36C45.96,21.53 45.87,21.75 45.85,22.04Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M48.56,23.97L49.75,22.28L48.65,20.72H49.34L49.84,21.48C49.94,21.63 50.01,21.75 50.07,21.85C50.16,21.71 50.24,21.59 50.32,21.49L50.87,20.72H51.53L50.4,22.25L51.62,23.97H50.94L50.27,22.96L50.09,22.69L49.23,23.97H48.56Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M53.28,23.48L53.36,23.97C53.21,24 53.07,24.02 52.94,24.02C52.74,24.02 52.59,23.99 52.48,23.92C52.37,23.86 52.29,23.78 52.24,23.67C52.2,23.57 52.18,23.35 52.18,23.02V21.15H51.77V20.72H52.18V19.92L52.73,19.59V20.72H53.28V21.15H52.73V23.05C52.73,23.21 52.74,23.31 52.75,23.36C52.77,23.4 52.81,23.44 52.85,23.46C52.89,23.49 52.96,23.5 53.04,23.5C53.1,23.5 53.18,23.5 53.28,23.48Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M56,22.21V21.69L57.91,21.68V23.35C57.62,23.58 57.31,23.76 57,23.88C56.69,23.99 56.37,24.05 56.05,24.05C55.6,24.05 55.2,23.96 54.84,23.77C54.48,23.58 54.21,23.31 54.02,22.95C53.84,22.59 53.75,22.19 53.75,21.75C53.75,21.31 53.84,20.91 54.02,20.53C54.2,20.15 54.47,19.87 54.81,19.68C55.16,19.5 55.55,19.41 56,19.41C56.32,19.41 56.62,19.46 56.88,19.57C57.14,19.67 57.35,19.82 57.5,20.01C57.65,20.19 57.76,20.44 57.84,20.74L57.3,20.89C57.24,20.66 57.15,20.48 57.05,20.35C56.95,20.22 56.81,20.11 56.62,20.04C56.44,19.96 56.23,19.92 56,19.92C55.73,19.92 55.49,19.96 55.3,20.04C55.1,20.12 54.94,20.23 54.81,20.37C54.69,20.5 54.6,20.65 54.53,20.81C54.42,21.09 54.36,21.39 54.36,21.71C54.36,22.11 54.43,22.45 54.57,22.72C54.7,22.99 54.91,23.19 55.17,23.32C55.43,23.45 55.71,23.51 56.01,23.51C56.27,23.51 56.52,23.47 56.77,23.37C57.01,23.27 57.2,23.16 57.33,23.05V22.21H56Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M60.95,22.93L61.52,23C61.43,23.33 61.27,23.59 61.02,23.77C60.78,23.96 60.47,24.05 60.09,24.05C59.61,24.05 59.23,23.9 58.95,23.61C58.67,23.32 58.54,22.9 58.54,22.38C58.54,21.83 58.68,21.4 58.96,21.1C59.24,20.8 59.61,20.65 60.06,20.65C60.49,20.65 60.85,20.8 61.13,21.09C61.4,21.39 61.54,21.81 61.54,22.34C61.54,22.37 61.54,22.42 61.54,22.49H59.11C59.13,22.85 59.23,23.12 59.41,23.31C59.59,23.5 59.82,23.59 60.09,23.59C60.29,23.59 60.47,23.54 60.61,23.44C60.75,23.33 60.87,23.16 60.95,22.93ZM59.14,22.04H60.96C60.93,21.76 60.86,21.56 60.75,21.42C60.57,21.21 60.34,21.1 60.06,21.1C59.81,21.1 59.6,21.19 59.42,21.36C59.25,21.53 59.16,21.75 59.14,22.04Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M62.22,23.97V20.72H62.72V21.18C62.96,20.83 63.3,20.65 63.75,20.65C63.95,20.65 64.13,20.68 64.3,20.76C64.46,20.83 64.58,20.92 64.67,21.03C64.75,21.15 64.81,21.28 64.84,21.44C64.86,21.54 64.87,21.72 64.87,21.97V23.97H64.32V22C64.32,21.77 64.3,21.6 64.25,21.49C64.21,21.38 64.13,21.29 64.02,21.23C63.91,21.16 63.79,21.13 63.64,21.13C63.4,21.13 63.2,21.2 63.03,21.35C62.86,21.5 62.77,21.78 62.77,22.2V23.97H62.22Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M67.95,22.93L68.52,23C68.43,23.33 68.27,23.59 68.02,23.77C67.78,23.96 67.47,24.05 67.09,24.05C66.61,24.05 66.23,23.9 65.95,23.61C65.67,23.32 65.54,22.9 65.54,22.38C65.54,21.83 65.68,21.4 65.96,21.1C66.24,20.8 66.61,20.65 67.06,20.65C67.49,20.65 67.85,20.8 68.13,21.09C68.4,21.39 68.54,21.81 68.54,22.34C68.54,22.37 68.54,22.42 68.54,22.49H66.11C66.13,22.85 66.23,23.12 66.41,23.31C66.59,23.5 66.82,23.59 67.09,23.59C67.29,23.59 67.47,23.54 67.61,23.44C67.75,23.33 67.87,23.16 67.95,22.93ZM66.14,22.04H67.96C67.93,21.76 67.86,21.56 67.75,21.42C67.57,21.21 67.35,21.1 67.06,21.1C66.81,21.1 66.6,21.19 66.42,21.36C66.25,21.53 66.16,21.75 66.14,22.04Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M69.21,23.97V20.72H69.71V21.22C69.84,20.98 69.95,20.83 70.06,20.76C70.17,20.69 70.29,20.65 70.42,20.65C70.6,20.65 70.79,20.71 70.99,20.83L70.79,21.34C70.66,21.26 70.52,21.22 70.39,21.22C70.27,21.22 70.16,21.25 70.06,21.33C69.97,21.4 69.9,21.5 69.86,21.63C69.8,21.82 69.77,22.04 69.77,22.27V23.97H69.21Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M73.44,23.57C73.24,23.75 73.04,23.87 72.85,23.94C72.66,24.01 72.46,24.05 72.24,24.05C71.88,24.05 71.61,23.96 71.42,23.79C71.22,23.61 71.13,23.39 71.13,23.12C71.13,22.96 71.16,22.81 71.23,22.68C71.31,22.55 71.4,22.44 71.52,22.36C71.64,22.28 71.77,22.22 71.92,22.18C72.03,22.15 72.19,22.13 72.41,22.1C72.86,22.05 73.18,21.98 73.4,21.91C73.4,21.83 73.4,21.79 73.4,21.77C73.4,21.54 73.35,21.38 73.24,21.29C73.1,21.17 72.89,21.1 72.61,21.1C72.35,21.1 72.16,21.15 72.04,21.24C71.91,21.33 71.82,21.49 71.76,21.72L71.22,21.65C71.27,21.42 71.35,21.23 71.46,21.09C71.58,20.95 71.74,20.84 71.95,20.77C72.17,20.69 72.41,20.65 72.69,20.65C72.97,20.65 73.2,20.68 73.37,20.75C73.54,20.81 73.67,20.89 73.75,20.99C73.84,21.09 73.89,21.22 73.93,21.37C73.94,21.46 73.95,21.63 73.95,21.88V22.61C73.95,23.12 73.97,23.45 73.99,23.59C74.01,23.72 74.06,23.85 74.13,23.97H73.55C73.49,23.86 73.46,23.73 73.44,23.57ZM73.4,22.34C73.19,22.42 72.89,22.49 72.49,22.55C72.27,22.58 72.1,22.62 72.01,22.66C71.92,22.7 71.84,22.76 71.79,22.84C71.74,22.92 71.72,23.01 71.72,23.1C71.72,23.25 71.77,23.37 71.88,23.47C71.99,23.57 72.16,23.62 72.37,23.62C72.59,23.62 72.78,23.57 72.94,23.48C73.11,23.38 73.23,23.26 73.31,23.1C73.37,22.97 73.4,22.79 73.4,22.54V22.34Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M76.02,23.48L76.1,23.97C75.94,24 75.81,24.02 75.68,24.02C75.48,24.02 75.33,23.99 75.22,23.92C75.11,23.86 75.03,23.78 74.98,23.67C74.94,23.57 74.92,23.35 74.92,23.02V21.15H74.51V20.72H74.92V19.92L75.46,19.59V20.72H76.02V21.15H75.46V23.05C75.46,23.21 75.47,23.31 75.49,23.36C75.51,23.4 75.54,23.44 75.59,23.46C75.63,23.49 75.7,23.5 75.78,23.5C75.84,23.5 75.92,23.5 76.02,23.48Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M76.57,20.12V19.49H77.12V20.12H76.57ZM76.57,23.97V20.72H77.12V23.97H76.57Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M77.76,22.35C77.76,21.75 77.93,21.3 78.26,21.01C78.54,20.77 78.88,20.65 79.29,20.65C79.74,20.65 80.1,20.8 80.39,21.09C80.67,21.38 80.81,21.79 80.81,22.3C80.81,22.72 80.75,23.05 80.62,23.29C80.5,23.53 80.31,23.72 80.07,23.85C79.83,23.98 79.57,24.05 79.29,24.05C78.83,24.05 78.46,23.9 78.18,23.61C77.9,23.32 77.76,22.9 77.76,22.35ZM78.33,22.35C78.33,22.76 78.42,23.08 78.6,23.28C78.78,23.49 79.01,23.59 79.29,23.59C79.56,23.59 79.79,23.49 79.97,23.28C80.15,23.07 80.25,22.76 80.25,22.33C80.25,21.93 80.15,21.62 79.97,21.42C79.79,21.21 79.56,21.1 79.29,21.1C79.01,21.1 78.78,21.21 78.6,21.41C78.42,21.62 78.33,21.93 78.33,22.35Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M81.46,23.97V20.72H81.96V21.18C82.2,20.83 82.55,20.65 83,20.65C83.2,20.65 83.38,20.68 83.54,20.76C83.71,20.83 83.83,20.92 83.91,21.03C83.99,21.15 84.05,21.28 84.08,21.44C84.1,21.54 84.11,21.72 84.11,21.97V23.97H83.56V22C83.56,21.77 83.54,21.6 83.5,21.49C83.45,21.38 83.38,21.29 83.27,21.23C83.16,21.16 83.03,21.13 82.88,21.13C82.65,21.13 82.44,21.2 82.27,21.35C82.1,21.5 82.02,21.78 82.02,22.2V23.97H81.46Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M85.05,23.97V19.49H88.3V20.01H85.64V21.39H88.13V21.92H85.64V23.44H88.41V23.97H85.05Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M92.18,19.49H92.78V22.08C92.78,22.53 92.73,22.89 92.62,23.15C92.52,23.42 92.34,23.64 92.07,23.8C91.8,23.97 91.45,24.05 91.02,24.05C90.6,24.05 90.25,23.98 89.98,23.83C89.72,23.69 89.52,23.48 89.41,23.21C89.3,22.93 89.24,22.55 89.24,22.08V19.49H89.83V22.08C89.83,22.47 89.87,22.75 89.94,22.94C90.01,23.12 90.14,23.26 90.32,23.36C90.49,23.46 90.71,23.51 90.97,23.51C91.4,23.51 91.72,23.42 91.9,23.22C92.09,23.02 92.18,22.64 92.18,22.08V19.49Z"
+      android:fillColor="#ffffff"/>
+</vector>
diff --git a/android/app/src/main/res/drawable/logo_io.xml b/android/app/src/main/res/drawable/logo_io.xml
new file mode 100644
index 00000000000..e6243fb2683
--- /dev/null
+++ b/android/app/src/main/res/drawable/logo_io.xml
@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="64dp"
+    android:height="52dp"
+    android:viewportWidth="64"
+    android:viewportHeight="52">
+  <group>
+    <clip-path
+        android:pathData="M6.403,12.971C2.867,12.971 0,10.067 0,6.486C0,2.904 2.867,0 6.403,0C9.939,0 12.806,2.904 12.806,6.486C12.806,10.067 9.939,12.971 6.403,12.971ZM6.403,18.958C9.395,18.958 11.821,21.398 11.821,24.409V45.58C11.821,48.591 9.395,51.032 6.403,51.032C3.411,51.032 0.985,48.591 0.985,45.58V24.409C0.985,21.398 3.411,18.958 6.403,18.958ZM33.972,29.925C33.441,29.925 32.992,29.735 32.644,29.355C32.297,28.975 32.113,28.51 32.113,27.961C32.113,27.412 32.297,26.947 32.624,26.567C32.971,26.187 33.421,26.017 33.952,26.017C34.483,26.017 34.933,26.208 35.28,26.588C35.627,26.968 35.791,27.433 35.791,28.003C35.791,28.573 35.627,29.017 35.28,29.397C34.953,29.735 34.524,29.925 33.972,29.925ZM50.727,29.017H47.907V33.896C47.907,34.382 47.928,34.699 47.948,34.91C47.969,35.1 48.05,35.269 48.193,35.417C48.336,35.565 48.561,35.628 48.868,35.628L50.625,35.586L50.768,38.121C49.746,38.353 48.95,38.48 48.418,38.48C47.029,38.48 46.089,38.163 45.599,37.508C45.088,36.875 44.843,35.692 44.843,33.96V22.997H47.928V26.292H50.748V29.017H50.727ZM38.611,38.184V26.313H41.696V38.205H38.611V38.184ZM43.961,52C54.58,52 64,42.53 64,30.847C64,19.165 54.58,9.695 43.961,9.695C31.338,9.695 21.918,19.165 21.918,30.847C21.918,42.53 31.338,52 43.961,52Z"
+        android:fillType="evenOdd"/>
+    <path
+        android:pathData="M-11.888,-13h100v100h-100z"
+        android:fillColor="#ffffff"/>
+  </group>
+</vector>
diff --git a/android/app/src/main/res/drawable/logo_pagopa.xml b/android/app/src/main/res/drawable/logo_pagopa.xml
new file mode 100644
index 00000000000..4e44899d259
--- /dev/null
+++ b/android/app/src/main/res/drawable/logo_pagopa.xml
@@ -0,0 +1,25 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="101dp"
+    android:height="28dp"
+    android:viewportWidth="101"
+    android:viewportHeight="28">
+  <group>
+    <clip-path
+        android:pathData="M0,0h100.17v28h-100.17z"/>
+    <path
+        android:pathData="M100.17,1.97V21.3H97.01L97.01,18.78C95.3,20.34 93.01,21.3 90.51,21.3C87.43,21.3 84.68,19.85 82.91,17.61C83.64,16.57 84.18,15.39 84.49,14.12C85.47,16.48 87.79,18.14 90.51,18.14C94.1,18.14 97.01,15.23 97.01,11.63C97.01,8.04 94.1,5.13 90.51,5.13C87.79,5.13 85.47,6.79 84.49,9.15C84.18,7.88 83.64,6.7 82.91,5.66C84.68,3.41 87.43,1.97 90.51,1.97C93.01,1.97 95.3,2.93 97.01,4.49L97.01,1.97H100.17Z"
+        android:fillColor="#ffffff"/>
+    <path
+        android:pathData="M3.15,1.97L3.15,4.49C4.87,2.93 7.16,1.97 9.66,1.97C12.74,1.97 15.49,3.41 17.26,5.66C16.53,6.7 15.99,7.88 15.68,9.15C14.7,6.79 12.38,5.13 9.66,5.13C6.07,5.13 3.15,8.04 3.15,11.63C3.15,15.23 6.07,18.14 9.66,18.14C12.38,18.14 14.7,16.48 15.68,14.12C15.99,15.39 16.53,16.57 17.26,17.61C15.49,19.85 12.74,21.3 9.66,21.3C7.16,21.3 4.87,20.34 3.15,18.78L3.15,26.82H0V1.97H3.15Z"
+        android:fillColor="#ffffff"/>
+    <path
+        android:pathData="M35.49,1.97V3.46C33.71,4.88 32.4,6.87 31.85,9.15C30.87,6.79 28.54,5.13 25.83,5.13C22.24,5.13 19.32,8.04 19.32,11.63C19.32,15.23 22.24,18.14 25.83,18.14C28.54,18.14 30.87,16.48 31.85,14.12C32.4,16.4 33.71,18.39 35.49,19.81V21.3H32.34L32.34,18.78C30.62,20.34 28.34,21.3 25.83,21.3C20.49,21.3 16.17,16.97 16.17,11.63C16.17,6.3 20.49,1.97 25.83,1.97C28.34,1.97 30.62,2.93 32.34,4.49L32.34,1.97H35.49Z"
+        android:fillColor="#ffffff"/>
+    <path
+        android:pathData="M67.83,1.97L67.83,4.49C69.55,2.93 71.83,1.97 74.34,1.97C79.67,1.97 84,6.3 84,11.63C84,16.97 79.67,21.3 74.34,21.3C71.83,21.3 69.55,20.34 67.83,18.78L67.83,26.82H64.68L64.68,19.81C66.46,18.39 67.77,16.4 68.32,14.12C69.3,16.48 71.62,18.14 74.34,18.14C77.93,18.14 80.85,15.23 80.85,11.63C80.85,8.04 77.93,5.13 74.34,5.13C71.62,5.13 69.3,6.79 68.32,9.15C67.77,6.87 66.46,4.88 64.68,3.46L64.68,1.97H67.83Z"
+        android:fillColor="#ffffff"/>
+    <path
+        android:pathData="M51.66,0V4.49C53.38,2.93 55.66,1.97 58.17,1.97C63.51,1.97 67.83,6.3 67.83,11.63C67.83,16.97 63.51,21.3 58.17,21.3C55.66,21.3 53.38,20.34 51.66,18.78V21.34C51.66,23.8 50.68,26.11 48.95,27.87L48.82,28L46.61,25.74C47.79,24.59 48.46,23.09 48.5,21.5L48.51,21.34L48.51,18.81C46.79,20.38 44.51,21.34 42,21.34C36.66,21.34 32.34,17 32.34,11.66C32.34,6.31 36.66,1.98 42,1.98C44.51,1.98 46.79,2.93 48.51,4.5L48.51,0H51.66ZM42,5.14C38.41,5.14 35.49,8.06 35.49,11.66C35.49,15.26 38.41,18.18 42,18.18C45.59,18.18 48.51,15.26 48.51,11.66C48.51,8.06 45.59,5.14 42,5.14ZM58.17,5.13C54.58,5.13 51.66,8.04 51.66,11.63C51.66,15.23 54.58,18.14 58.17,18.14C61.76,18.14 64.68,15.23 64.68,11.63C64.68,8.04 61.76,5.13 58.17,5.13Z"
+        android:fillColor="#ffffff"/>
+  </group>
+</vector>
diff --git a/android/app/src/main/res/layout/launch_screen.xml b/android/app/src/main/res/layout/launch_screen.xml
index 823ddd4beeb..783da7e2ec8 100644
--- a/android/app/src/main/res/layout/launch_screen.xml
+++ b/android/app/src/main/res/layout/launch_screen.xml
@@ -1,103 +1,66 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:app="http://schemas.android.com/apk/res-auto"
   android:orientation="vertical"
+  android:layout_width="match_parent"
+  android:layout_height="match_parent"
+  android:background="@drawable/splash_bg">
+
+
+  <ImageView
+    android:id="@+id/ioLogo"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:src="@drawable/logo_io"
+    app:layout_constraintBottom_toTopOf="@+id/logoConsiglioMinistri"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toTopOf="parent" />
+
+  <TextView
+    android:id="@+id/splashTitle"
     android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:background="@drawable/splash_bg"
-    android:paddingBottom="48px">
-
-    <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_weight="1">
-        <LinearLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center_vertical"
-            android:orientation="vertical">
-
-            <RelativeLayout
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_gravity="center_horizontal">
-
-                <ImageView
-                    android:layout_width="wrap_content"
-                    android:layout_height="62dp"
-                    android:src="@mipmap/logo_io"
-                    android:foregroundGravity="center_horizontal"
-                    android:layout_gravity="center_vertical"
-                    android:id="@+id/ioLogo"
-                    android:layout_centerHorizontal="true"/>
-
-            </RelativeLayout>
-
-
-
-            <TextView
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:text="@string/splash_io_name"
-                android:paddingTop="16dp"
-                android:textSize="16dp"
-                android:gravity="center_horizontal"
-                android:textColor="#FFFFFF"
-                />
-
-        </LinearLayout>
-    </LinearLayout>
-
-    <LinearLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:orientation="vertical"
-        android:layout_gravity="center">
-
-        <ImageView
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_gravity="center"
-            android:src="@mipmap/logo_consiglio_ministri" />
-
-      <LinearLayout
-        android:layout_width="wrap_content"
-        android:layout_height="match_parent"
-        android:layout_gravity="center"
-        android:orientation="vertical">
-
-        <View
-          android:layout_width="match_parent"
-          android:layout_height="1dp"
-          android:layout_gravity="center"
-          android:layout_marginVertical="26dp"
-          android:layout_marginStart="0dp"
-          android:layout_marginEnd="0dp"
-          android:background="@android:color/darker_gray"
-          android:backgroundTint="#FFFFFF" />
-
-        <LinearLayout
-          android:layout_width="wrap_content"
-          android:layout_height="wrap_content"
-          android:layout_gravity="center"
-          android:layout_marginBottom="44dp"
-          android:orientation="horizontal">
-
-          <ImageView
-            android:layout_width="0dp"
-            android:layout_height="match_parent"
-            android:layout_marginEnd="16dp"
-            android:layout_weight="1"
-            android:src="@mipmap/logo_pagopa" />
-
-          <ImageView
-            android:id="@+id/imageView"
-            android:layout_width="0dp"
-            android:layout_height="match_parent"
-            android:layout_marginStart="16dp"
-            android:layout_weight="1"
-            android:src="@mipmap/eu_next_logo" />
-        </LinearLayout>
-      </LinearLayout>
-
-    </LinearLayout>
-</LinearLayout>
+    android:layout_height="30dp"
+    android:layout_marginTop="16dp"
+    android:gravity="center"
+    android:text="@string/splash_io_name"
+    android:textColor="#FFFFFF"
+    android:textSize="16sp"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toBottomOf="@+id/ioLogo" />
+
+
+  <ImageView
+    android:id="@+id/logoPagopa"
+    android:layout_width="wrap_content"
+    android:layout_height="28dp"
+    android:src="@drawable/logo_pagopa"
+    app:layout_constraintBottom_toBottomOf="@+id/logoConsiglioMinistri"
+    app:layout_constraintEnd_toStartOf="@+id/logoConsiglioMinistri"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toTopOf="@+id/logoConsiglioMinistri" />
+
+  <ImageView
+    android:id="@+id/logoConsiglioMinistri"
+    android:layout_width="wrap_content"
+    android:layout_height="48dp"
+    android:layout_centerHorizontal="true"
+    android:layout_centerVertical="true"
+    android:layout_marginBottom="48dp"
+    android:src="@mipmap/logo_consiglio_ministri"
+    app:layout_constraintBottom_toBottomOf="parent"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintStart_toStartOf="parent" />
+
+  <ImageView
+    android:id="@+id/logoEuNext"
+    android:layout_width="wrap_content"
+    android:layout_height="25dp"
+    android:layout_centerVertical="true"
+    android:src="@drawable/eu_next_logo"
+    app:layout_constraintBottom_toBottomOf="@+id/logoConsiglioMinistri"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintStart_toEndOf="@+id/logoConsiglioMinistri"
+    app:layout_constraintTop_toTopOf="@+id/logoConsiglioMinistri" />
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/android/app/src/main/res/mipmap-hdpi/eu_next_logo.png b/android/app/src/main/res/mipmap-hdpi/eu_next_logo.png
deleted file mode 100644
index a37f053a9ee..00000000000
Binary files a/android/app/src/main/res/mipmap-hdpi/eu_next_logo.png and /dev/null differ
diff --git a/android/app/src/main/res/mipmap-hdpi/logo_io.png b/android/app/src/main/res/mipmap-hdpi/logo_io.png
deleted file mode 100644
index 2734d0b64d5..00000000000
Binary files a/android/app/src/main/res/mipmap-hdpi/logo_io.png and /dev/null differ
diff --git a/android/app/src/main/res/mipmap-hdpi/logo_pagopa.png b/android/app/src/main/res/mipmap-hdpi/logo_pagopa.png
deleted file mode 100644
index 65fcac8645d..00000000000
Binary files a/android/app/src/main/res/mipmap-hdpi/logo_pagopa.png and /dev/null differ
diff --git a/android/app/src/main/res/mipmap-mdpi/eu_next_logo.png b/android/app/src/main/res/mipmap-mdpi/eu_next_logo.png
deleted file mode 100644
index 99cc7c5710a..00000000000
Binary files a/android/app/src/main/res/mipmap-mdpi/eu_next_logo.png and /dev/null differ
diff --git a/android/app/src/main/res/mipmap-mdpi/logo_io.png b/android/app/src/main/res/mipmap-mdpi/logo_io.png
deleted file mode 100644
index c9364152e28..00000000000
Binary files a/android/app/src/main/res/mipmap-mdpi/logo_io.png and /dev/null differ
diff --git a/android/app/src/main/res/mipmap-mdpi/logo_pagopa.png b/android/app/src/main/res/mipmap-mdpi/logo_pagopa.png
deleted file mode 100644
index 15ffa878a1b..00000000000
Binary files a/android/app/src/main/res/mipmap-mdpi/logo_pagopa.png and /dev/null differ
diff --git a/android/app/src/main/res/mipmap-xhdpi/eu_next_logo.png b/android/app/src/main/res/mipmap-xhdpi/eu_next_logo.png
deleted file mode 100644
index 4c19d91e38e..00000000000
Binary files a/android/app/src/main/res/mipmap-xhdpi/eu_next_logo.png and /dev/null differ
diff --git a/android/app/src/main/res/mipmap-xhdpi/logo_io.png b/android/app/src/main/res/mipmap-xhdpi/logo_io.png
deleted file mode 100644
index c9364152e28..00000000000
Binary files a/android/app/src/main/res/mipmap-xhdpi/logo_io.png and /dev/null differ
diff --git a/android/app/src/main/res/mipmap-xhdpi/logo_pagopa.png b/android/app/src/main/res/mipmap-xhdpi/logo_pagopa.png
deleted file mode 100644
index 15ffa878a1b..00000000000
Binary files a/android/app/src/main/res/mipmap-xhdpi/logo_pagopa.png and /dev/null differ
diff --git a/android/app/src/main/res/mipmap-xxhdpi/eu_next_logo.png b/android/app/src/main/res/mipmap-xxhdpi/eu_next_logo.png
deleted file mode 100644
index 3d33a008152..00000000000
Binary files a/android/app/src/main/res/mipmap-xxhdpi/eu_next_logo.png and /dev/null differ
diff --git a/android/app/src/main/res/mipmap-xxhdpi/logo_io.png b/android/app/src/main/res/mipmap-xxhdpi/logo_io.png
deleted file mode 100644
index 333146f2cc5..00000000000
Binary files a/android/app/src/main/res/mipmap-xxhdpi/logo_io.png and /dev/null differ
diff --git a/android/app/src/main/res/mipmap-xxhdpi/logo_pagopa.png b/android/app/src/main/res/mipmap-xxhdpi/logo_pagopa.png
deleted file mode 100644
index 26ae73dd950..00000000000
Binary files a/android/app/src/main/res/mipmap-xxhdpi/logo_pagopa.png and /dev/null differ
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/eu_next_logo.png b/android/app/src/main/res/mipmap-xxxhdpi/eu_next_logo.png
deleted file mode 100644
index e915ebfd602..00000000000
Binary files a/android/app/src/main/res/mipmap-xxxhdpi/eu_next_logo.png and /dev/null differ
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/logo_io.png b/android/app/src/main/res/mipmap-xxxhdpi/logo_io.png
deleted file mode 100644
index 333146f2cc5..00000000000
Binary files a/android/app/src/main/res/mipmap-xxxhdpi/logo_io.png and /dev/null differ
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/logo_pagopa.png b/android/app/src/main/res/mipmap-xxxhdpi/logo_pagopa.png
deleted file mode 100644
index 26ae73dd950..00000000000
Binary files a/android/app/src/main/res/mipmap-xxxhdpi/logo_pagopa.png and /dev/null differ
diff --git a/android/build.gradle b/android/build.gradle
index 4c47f1fa60f..200c0cdea90 100644
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -23,7 +23,7 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:7.1.1'
+        classpath 'com.android.tools.build:gradle:7.2.1'
         classpath 'com.facebook.react:react-native-gradle-plugin'
         classpath 'de.undercouch:gradle-download-task:5.0.1'
         classpath 'com.google.gms:google-services:4.3.3'
@@ -36,21 +36,6 @@ buildscript {
 
 allprojects {
     repositories {
-        exclusiveContent {
-            // We get React Native's Android binaries exclusively through npm,
-            // from a local Maven repo inside node_modules/react-native/.
-            // (The use of exclusiveContent prevents looking elsewhere like Maven Central
-            // and potentially getting a wrong version.)
-            filter {
-                includeGroup "com.facebook.react"
-            }
-            forRepository {
-                maven {
-                    url "$rootDir/../node_modules/react-native/android"
-                }
-            }
-        }
-        mavenLocal()
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
             url("$rootDir/../node_modules/react-native/android")
@@ -68,10 +53,7 @@ allprojects {
         }
         google()
         jcenter()
-       	maven { url 'https://www.jitpack.io' }
+        maven { url 'https://www.jitpack.io' }
        	maven { url 'https://zendesk.jfrog.io/zendesk/repo' }
-      }
-    configurations.all {
-        resolutionStrategy.force "com.android.support:support-v4:${rootProject.ext.supportLibVersion}"
     }
 }
diff --git a/android/gradle.properties b/android/gradle.properties
index 24a536f45dc..8088bf34d62 100644
--- a/android/gradle.properties
+++ b/android/gradle.properties
@@ -10,7 +10,7 @@
 # Specifies the JVM arguments used for the daemon process.
 # The setting is particularly useful for tweaking memory settings.
 # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
-org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m -XX:MaxPermSize=512m
+org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
 
 # When configured, Gradle will run in incubating parallel mode.
 # This option should only be used with decoupled projects. More details, visit
diff --git a/android/gradle/wrapper/gradle-wrapper.jar b/android/gradle/wrapper/gradle-wrapper.jar
index 7454180f2ae..41d9927a4d4 100644
Binary files a/android/gradle/wrapper/gradle-wrapper.jar and b/android/gradle/wrapper/gradle-wrapper.jar differ
diff --git a/android/gradle/wrapper/gradle-wrapper.properties b/android/gradle/wrapper/gradle-wrapper.properties
index 669386b870a..8fad3f5a98b 100644
--- a/android/gradle/wrapper/gradle-wrapper.properties
+++ b/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.3.3-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
diff --git a/android/link-assets-manifest.json b/android/link-assets-manifest.json
index 2327e470f54..2b9428a8c65 100644
--- a/android/link-assets-manifest.json
+++ b/android/link-assets-manifest.json
@@ -45,6 +45,54 @@
       "path": "assets/fonts/TitilliumWeb/TitilliumWeb-SemiBoldItalic.ttf",
       "sha1": "f81d3a5f38c6bda1fb3547bf91fe0b68b54066c5"
     },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-Black.otf",
+      "sha1": "becf8bd5053f5529785c9d1d975f2d6f54446d47"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-BlackItalic.otf",
+      "sha1": "079c243911ef9d6cbb25f5e25b0a0fcdc80e217a"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-Bold.otf",
+      "sha1": "5348d5fdb96da25b0b444b6cf433100e17b2c944"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-BoldItalic.otf",
+      "sha1": "19b6af581aa9de369c5551b5c81af4567e96fd33"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-Italic.otf",
+      "sha1": "149caa0987bb4765e34a34ccc315d89a9d5b259c"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-Light.otf",
+      "sha1": "096f9b521b0fc0e7ebe6c60890fbfe312e7e4b01"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-LightItalic.otf",
+      "sha1": "9a74303f47edd127dc6f2c48301c9b0d4ffbbf17"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-Regular.otf",
+      "sha1": "0a8be559a9a9d8ce47eb6ca3de9db16f42a00580"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-Semibold.otf",
+      "sha1": "fa6cff8c0046996bc9fb124abf5799408eb3b369"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-SemiboldItalic.otf",
+      "sha1": "8502e9c211803bb2b0446348c69cf56763c987a3"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-Thin.otf",
+      "sha1": "dd3f889e6ca51de7e2006418b0125c02421fe574"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-ThinItalic.otf",
+      "sha1": "fb0f0fcc215d93fd4241f3af18408b7c42b33b3d"
+    },
     {
       "path": "assets/fonts/ReadexPro/ReadexPro-Regular.ttf",
       "sha1": "93e4080794b725f216a94b57ed62a51bc77bce91"
diff --git a/android/settings.gradle b/android/settings.gradle
index cf96c09a5b7..42a3d842c85 100644
--- a/android/settings.gradle
+++ b/android/settings.gradle
@@ -62,7 +62,5 @@ if (settings.hasProperty("newArchEnabled") && settings.newArchEnabled == "true")
     include(":ReactAndroid:hermes-engine")
     project(":ReactAndroid:hermes-engine").projectDir = file('../node_modules/react-native/ReactAndroid/hermes-engine')
 }
-include ':@react-native-community_datetimepicker'
-project(':@react-native-community_datetimepicker').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/datetimepicker/android')
 include ':react-native-art'
 project(':react-native-art').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/art/android')
diff --git a/assets/fonts/TitilliumSansPro-OFL.txt b/assets/fonts/TitilliumSansPro-OFL.txt
new file mode 100644
index 00000000000..5ffcfe18ea6
--- /dev/null
+++ b/assets/fonts/TitilliumSansPro-OFL.txt
@@ -0,0 +1,92 @@
+Copyright (c) 2024 The Titillium Pro Project Authors (https://github.com/chialab/titillium_pro)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/assets/fonts/TitilliumSansPro/TitilliumSansPro-Black.otf b/assets/fonts/TitilliumSansPro/TitilliumSansPro-Black.otf
new file mode 100644
index 00000000000..3cd95e37eaf
Binary files /dev/null and b/assets/fonts/TitilliumSansPro/TitilliumSansPro-Black.otf differ
diff --git a/assets/fonts/TitilliumSansPro/TitilliumSansPro-BlackItalic.otf b/assets/fonts/TitilliumSansPro/TitilliumSansPro-BlackItalic.otf
new file mode 100644
index 00000000000..a6fd8bc8af7
Binary files /dev/null and b/assets/fonts/TitilliumSansPro/TitilliumSansPro-BlackItalic.otf differ
diff --git a/assets/fonts/TitilliumSansPro/TitilliumSansPro-Bold.otf b/assets/fonts/TitilliumSansPro/TitilliumSansPro-Bold.otf
new file mode 100644
index 00000000000..3d774ef1a03
Binary files /dev/null and b/assets/fonts/TitilliumSansPro/TitilliumSansPro-Bold.otf differ
diff --git a/assets/fonts/TitilliumSansPro/TitilliumSansPro-BoldItalic.otf b/assets/fonts/TitilliumSansPro/TitilliumSansPro-BoldItalic.otf
new file mode 100644
index 00000000000..bdf1aaedfc9
Binary files /dev/null and b/assets/fonts/TitilliumSansPro/TitilliumSansPro-BoldItalic.otf differ
diff --git a/assets/fonts/TitilliumSansPro/TitilliumSansPro-Italic.otf b/assets/fonts/TitilliumSansPro/TitilliumSansPro-Italic.otf
new file mode 100644
index 00000000000..51f58e72f82
Binary files /dev/null and b/assets/fonts/TitilliumSansPro/TitilliumSansPro-Italic.otf differ
diff --git a/assets/fonts/TitilliumSansPro/TitilliumSansPro-Light.otf b/assets/fonts/TitilliumSansPro/TitilliumSansPro-Light.otf
new file mode 100644
index 00000000000..c75c48c9763
Binary files /dev/null and b/assets/fonts/TitilliumSansPro/TitilliumSansPro-Light.otf differ
diff --git a/assets/fonts/TitilliumSansPro/TitilliumSansPro-LightItalic.otf b/assets/fonts/TitilliumSansPro/TitilliumSansPro-LightItalic.otf
new file mode 100644
index 00000000000..3146a822c96
Binary files /dev/null and b/assets/fonts/TitilliumSansPro/TitilliumSansPro-LightItalic.otf differ
diff --git a/assets/fonts/TitilliumSansPro/TitilliumSansPro-Regular.otf b/assets/fonts/TitilliumSansPro/TitilliumSansPro-Regular.otf
new file mode 100644
index 00000000000..4bd7bcf2d5a
Binary files /dev/null and b/assets/fonts/TitilliumSansPro/TitilliumSansPro-Regular.otf differ
diff --git a/assets/fonts/TitilliumSansPro/TitilliumSansPro-Semibold.otf b/assets/fonts/TitilliumSansPro/TitilliumSansPro-Semibold.otf
new file mode 100644
index 00000000000..fc7186dda82
Binary files /dev/null and b/assets/fonts/TitilliumSansPro/TitilliumSansPro-Semibold.otf differ
diff --git a/assets/fonts/TitilliumSansPro/TitilliumSansPro-SemiboldItalic.otf b/assets/fonts/TitilliumSansPro/TitilliumSansPro-SemiboldItalic.otf
new file mode 100644
index 00000000000..8242da46cf5
Binary files /dev/null and b/assets/fonts/TitilliumSansPro/TitilliumSansPro-SemiboldItalic.otf differ
diff --git a/assets/fonts/TitilliumSansPro/TitilliumSansPro-Thin.otf b/assets/fonts/TitilliumSansPro/TitilliumSansPro-Thin.otf
new file mode 100644
index 00000000000..e9f73560c42
Binary files /dev/null and b/assets/fonts/TitilliumSansPro/TitilliumSansPro-Thin.otf differ
diff --git a/assets/fonts/TitilliumSansPro/TitilliumSansPro-ThinItalic.otf b/assets/fonts/TitilliumSansPro/TitilliumSansPro-ThinItalic.otf
new file mode 100644
index 00000000000..869febf3eea
Binary files /dev/null and b/assets/fonts/TitilliumSansPro/TitilliumSansPro-ThinItalic.otf differ
diff --git a/img/app-logo.svg b/img/app-logo.svg
index 71c7b51020d..41663cea693 100644
--- a/img/app-logo.svg
+++ b/img/app-logo.svg
@@ -1,16 +1,9 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 4C0 1.79086 1.79086 0 4 0H44C46.2091 0 48 1.79086 48 4V44C48 46.2091 46.2091 48 44 48H4C1.79086 48 0 46.2091 0 44V4Z" fill="url(#paint0_linear)"/>
-<mask id="mask0" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="12" y="14" width="24" height="20">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 14C15.8807 14 17 15.1193 17 16.5C17 17.8807 15.8807 19 14.5 19C13.1193 19 12 17.8807 12 16.5C12 15.1193 13.1193 14 14.5 14ZM35.5 26C35.5 30.4183 31.9183 34 27.881 34C23.0817 34 19.5 30.4183 19.5 26C19.5 21.5817 23.0817 18 27.881 18C31.9183 18 35.5 21.5817 35.5 26ZM16.5 23.5C16.5 22.3954 15.6046 21.5 14.5 21.5C13.3954 21.5 12.5 22.3954 12.5 23.5V32C12.5 33.1046 13.3954 34 14.5 34C15.6046 34 16.5 33.1046 16.5 32V23.5ZM29.4653 25.1604H30.5303V24.1124H29.4729V22.845H28.3159V27.0614C28.3159 27.7276 28.4079 28.1825 28.5994 28.4262C28.7833 28.6781 29.1358 28.7999 29.6568 28.7999C29.8561 28.7999 30.1549 28.7512 30.538 28.6618L30.4844 27.6869L29.8254 27.7032C29.7105 27.7032 29.6262 27.6788 29.5725 27.6219C29.5189 27.5651 29.4883 27.5001 29.4806 27.427C29.4729 27.3457 29.4653 27.2239 29.4653 27.037V25.1604ZM25.979 24.1205V28.6943H27.136V24.1205H25.979ZM24.2424 24.0067C24.4446 24.0067 24.6157 24.0749 24.7479 24.2111C24.8801 24.3473 24.9424 24.5138 24.9424 24.7181C24.9424 24.9224 24.8801 25.0813 24.7479 25.2176C24.6235 25.3386 24.4601 25.4067 24.2501 25.4067C24.0479 25.4067 23.8768 25.3386 23.7446 25.2024C23.6124 25.0662 23.5424 24.8997 23.5424 24.703C23.5424 24.5062 23.6124 24.3397 23.7368 24.2035C23.869 24.0673 24.0401 24.0067 24.2424 24.0067Z" fill="white"/>
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="60" height="60" rx="13" fill="#0B3EE3"/>
+<mask id="mask0_1344_407" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="17" y="17" width="28" height="24">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9043 17C21.5082 17 22.8085 18.3003 22.8085 19.9043C22.8085 21.5082 21.5082 22.8085 19.9043 22.8085C18.3003 22.8085 17 21.5082 17 19.9043C17 18.3003 18.3003 17 19.9043 17ZM44.3001 30.9404C44.3001 36.0731 40.1392 40.234 35.449 40.234C29.8738 40.234 25.7129 36.0731 25.7129 30.9404C25.7129 25.8077 29.8738 21.6468 35.449 21.6468C40.1392 21.6468 44.3001 25.8077 44.3001 30.9404ZM22.2275 28.0363C22.2275 26.7531 21.1873 25.7129 19.9041 25.7129C18.6209 25.7129 17.5807 26.7531 17.5807 28.0363V37.9107C17.5807 39.1939 18.6209 40.2341 19.9041 40.2341C21.1873 40.2341 22.2275 39.1939 22.2275 37.9107V28.0363ZM37.2897 29.9652H38.527V28.7477H37.2986V27.2754H35.9545V32.1736C35.9545 32.9475 36.0614 33.476 36.2839 33.7591C36.4975 34.0517 36.907 34.1933 37.5123 34.1933C37.7437 34.1933 38.0908 34.1366 38.5359 34.0328L38.4736 32.9003L37.7081 32.9192C37.5746 32.9192 37.4766 32.8908 37.4143 32.8248C37.352 32.7587 37.3164 32.6832 37.3075 32.5983C37.2986 32.5039 37.2897 32.3623 37.2897 32.1453V29.9652ZM33.2394 28.7571V34.0706H34.5835V28.7571H33.2394ZM31.2216 28.6247C31.4565 28.6247 31.6553 28.7038 31.8089 28.862C31.9625 29.0203 32.0348 29.2137 32.0348 29.451C32.0348 29.6884 31.9625 29.873 31.8089 30.0313C31.6643 30.1719 31.4746 30.251 31.2306 30.251C30.9957 30.251 30.7969 30.1719 30.6433 30.0137C30.4897 29.8554 30.4084 29.662 30.4084 29.4335C30.4084 29.2049 30.4897 29.0115 30.6343 28.8532C30.7879 28.695 30.9867 28.6247 31.2216 28.6247Z" fill="white"/>
 </mask>
-<g mask="url(#mask0)">
-<rect x="-26" y="-26" width="100" height="100" fill="white"/>
+<g mask="url(#mask0_1344_407)">
+<rect x="-28.145" y="-28.4683" width="116.17" height="116.17" fill="white"/>
 </g>
-<defs>
-<!-- appIcon gradient -->
-<linearGradient id="paint0_linear" x1="24" y1="0" x2="24" y2="48" gradientUnits="userSpaceOnUse">
-<stop stop-color="#1D51DF"/>
-<stop offset="1" stop-color="#1723D5"/>
-</linearGradient>
-</defs>
 </svg>
diff --git a/img/cie/CIE-onboarding-illustration.png b/img/cie/CIE-onboarding-illustration.png
deleted file mode 100644
index 3acf74bee10..00000000000
Binary files a/img/cie/CIE-onboarding-illustration.png and /dev/null differ
diff --git a/img/cie/CIE-onboarding-illustration@2x.png b/img/cie/CIE-onboarding-illustration@2x.png
deleted file mode 100644
index 3a1a7640204..00000000000
Binary files a/img/cie/CIE-onboarding-illustration@2x.png and /dev/null differ
diff --git a/img/cie/CIE-onboarding-illustration@3x.png b/img/cie/CIE-onboarding-illustration@3x.png
deleted file mode 100644
index 5d3a7890c1d..00000000000
Binary files a/img/cie/CIE-onboarding-illustration@3x.png and /dev/null differ
diff --git a/img/error.png b/img/error.png
deleted file mode 100644
index 55fab097d3e..00000000000
Binary files a/img/error.png and /dev/null differ
diff --git a/img/features/cdc/bonus.svg b/img/features/cdc/bonus.svg
deleted file mode 100644
index cfd865ed045..00000000000
--- a/img/features/cdc/bonus.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3 3.83331H11.7378C11.9094 4.31881 12.3724 4.66665 12.9167 4.66665C13.4609 4.66665 13.9239 4.31881 14.0955 3.83331H17C18.6569 3.83331 20 5.17646 20 6.83331V14.1666C20 15.8235 18.6569 17.1666 17 17.1666H14.0955C14.1416 17.0363 14.1667 16.8961 14.1667 16.75C14.1667 16.0596 13.607 15.5 12.9167 15.5C12.2263 15.5 11.6667 16.0596 11.6667 16.75C11.6667 16.8961 11.6917 17.0363 11.7378 17.1666H3C1.34315 17.1666 0 15.8235 0 14.1666V6.83331C0 5.17646 1.34315 3.83331 3 3.83331ZM13.125 7.58331C13.4702 7.58331 13.75 7.30349 13.75 6.95831C13.75 6.61313 13.4702 6.33331 13.125 6.33331C12.7798 6.33331 12.5 6.61313 12.5 6.95831C12.5 7.30349 12.7798 7.58331 13.125 7.58331ZM13.75 8.62498C13.75 8.97016 13.4702 9.24998 13.125 9.24998C12.7798 9.24998 12.5 8.97016 12.5 8.62498C12.5 8.2798 12.7798 7.99998 13.125 7.99998C13.4702 7.99998 13.75 8.2798 13.75 8.62498ZM13.125 10.9166C13.4702 10.9166 13.75 10.6368 13.75 10.2916C13.75 9.94647 13.4702 9.66665 13.125 9.66665C12.7798 9.66665 12.5 9.94647 12.5 10.2916C12.5 10.6368 12.7798 10.9166 13.125 10.9166ZM13.75 11.9583C13.75 12.3035 13.4702 12.5833 13.125 12.5833C12.7798 12.5833 12.5 12.3035 12.5 11.9583C12.5 11.6131 12.7798 11.3333 13.125 11.3333C13.4702 11.3333 13.75 11.6131 13.75 11.9583ZM13.125 14.25C13.4702 14.25 13.75 13.9702 13.75 13.625C13.75 13.2798 13.4702 13 13.125 13C12.7798 13 12.5 13.2798 12.5 13.625C12.5 13.9702 12.7798 14.25 13.125 14.25ZM3.33333 6.33331C2.8731 6.33331 2.5 6.70641 2.5 7.16665C2.5 7.62688 2.8731 7.99998 3.33333 7.99998H6.66667C7.1269 7.99998 7.5 7.62688 7.5 7.16665C7.5 6.70641 7.1269 6.33331 6.66667 6.33331H3.33333ZM2.5 9.66665C2.5 9.20641 2.8731 8.83331 3.33333 8.83331H8.33333C8.79357 8.83331 9.16667 9.20641 9.16667 9.66665C9.16667 10.1269 8.79357 10.5 8.33333 10.5H3.33333C2.8731 10.5 2.5 10.1269 2.5 9.66665ZM3.5 12.1666C2.94772 12.1666 2.5 12.6144 2.5 13.1666V13.6666C2.5 14.2189 2.94772 14.6666 3.5 14.6666H6.5C7.05228 14.6666 7.5 14.2189 7.5 13.6666V13.1666C7.5 12.6144 7.05228 12.1666 6.5 12.1666H3.5Z" fill="white"/>
-<mask id="mask0_732_8795" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="3" width="20" height="15">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3 3.83331H11.7378C11.9094 4.31881 12.3724 4.66665 12.9167 4.66665C13.4609 4.66665 13.9239 4.31881 14.0955 3.83331H17C18.6569 3.83331 20 5.17646 20 6.83331V14.1666C20 15.8235 18.6569 17.1666 17 17.1666H14.0955C14.1416 17.0363 14.1667 16.8961 14.1667 16.75C14.1667 16.0596 13.607 15.5 12.9167 15.5C12.2263 15.5 11.6667 16.0596 11.6667 16.75C11.6667 16.8961 11.6917 17.0363 11.7378 17.1666H3C1.34315 17.1666 0 15.8235 0 14.1666V6.83331C0 5.17646 1.34315 3.83331 3 3.83331ZM13.125 7.58331C13.4702 7.58331 13.75 7.30349 13.75 6.95831C13.75 6.61313 13.4702 6.33331 13.125 6.33331C12.7798 6.33331 12.5 6.61313 12.5 6.95831C12.5 7.30349 12.7798 7.58331 13.125 7.58331ZM13.75 8.62498C13.75 8.97016 13.4702 9.24998 13.125 9.24998C12.7798 9.24998 12.5 8.97016 12.5 8.62498C12.5 8.2798 12.7798 7.99998 13.125 7.99998C13.4702 7.99998 13.75 8.2798 13.75 8.62498ZM13.125 10.9166C13.4702 10.9166 13.75 10.6368 13.75 10.2916C13.75 9.94647 13.4702 9.66665 13.125 9.66665C12.7798 9.66665 12.5 9.94647 12.5 10.2916C12.5 10.6368 12.7798 10.9166 13.125 10.9166ZM13.75 11.9583C13.75 12.3035 13.4702 12.5833 13.125 12.5833C12.7798 12.5833 12.5 12.3035 12.5 11.9583C12.5 11.6131 12.7798 11.3333 13.125 11.3333C13.4702 11.3333 13.75 11.6131 13.75 11.9583ZM13.125 14.25C13.4702 14.25 13.75 13.9702 13.75 13.625C13.75 13.2798 13.4702 13 13.125 13C12.7798 13 12.5 13.2798 12.5 13.625C12.5 13.9702 12.7798 14.25 13.125 14.25ZM3.33333 6.33331C2.8731 6.33331 2.5 6.70641 2.5 7.16665C2.5 7.62688 2.8731 7.99998 3.33333 7.99998H6.66667C7.1269 7.99998 7.5 7.62688 7.5 7.16665C7.5 6.70641 7.1269 6.33331 6.66667 6.33331H3.33333ZM2.5 9.66665C2.5 9.20641 2.8731 8.83331 3.33333 8.83331H8.33333C8.79357 8.83331 9.16667 9.20641 9.16667 9.66665C9.16667 10.1269 8.79357 10.5 8.33333 10.5H3.33333C2.8731 10.5 2.5 10.1269 2.5 9.66665ZM3.5 12.1666C2.94772 12.1666 2.5 12.6144 2.5 13.1666V13.6666C2.5 14.2189 2.94772 14.6666 3.5 14.6666H6.5C7.05228 14.6666 7.5 14.2189 7.5 13.6666V13.1666C7.5 12.6144 7.05228 12.1666 6.5 12.1666H3.5Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_732_8795)">
-<rect x="-30" y="-21.9467" width="83.3333" height="83.3333" fill="#475A6D"/>
-</g>
-</svg>
diff --git a/img/features/cgn/cgn_card.svg b/img/features/cgn/cgn_card.svg
new file mode 100644
index 00000000000..6494a89f257
--- /dev/null
+++ b/img/features/cgn/cgn_card.svg
@@ -0,0 +1,15 @@
+<svg width="328" height="205" viewBox="0 0 328 205" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<mask id="mask0_3263_7307" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="328" height="205">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M270.6 0.195302C270.6 8.24639 264.073 14.7731 256.022 14.7731C247.971 14.7731 241.444 8.24639 241.444 0.195302C241.444 0.0878579 241.358 0 241.25 0H14.5778C6.52669 0 0 6.52669 0 14.5778V190.422C0 198.473 6.52669 205 14.5778 205H240.746C241.135 205 241.444 204.674 241.444 204.284C241.444 196.233 247.971 189.707 256.022 189.707C264.073 189.707 270.6 196.233 270.6 204.284C270.6 204.674 270.909 205 271.299 205H313.422C321.473 205 328 198.473 328 190.422V14.5778C328 6.5267 321.473 0 313.422 0H270.794C270.687 0 270.6 0.0878579 270.6 0.195302Z" fill="#E8EBF1"/>
+</mask>
+<g mask="url(#mask0_3263_7307)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M270.6 0.195302C270.6 8.24639 264.073 14.7731 256.022 14.7731C247.971 14.7731 241.444 8.24639 241.444 0.195302C241.444 0.1301 241.445 0.0649989 241.446 0H14.5778C6.52669 0 0 6.52669 0 14.5778V190.422C0 198.473 6.52669 205 14.5778 205H241.462C241.45 204.763 241.444 204.524 241.444 204.284C241.444 196.233 247.971 189.707 256.022 189.707C264.073 189.707 270.6 196.233 270.6 204.284C270.6 204.524 270.594 204.763 270.583 205H313.422C321.473 205 328 198.473 328 190.422V14.5778C328 6.5267 321.473 0 313.422 0H270.599C270.6 0.0649989 270.6 0.1301 270.6 0.195302Z" fill="url(#pattern0)" stroke="black" stroke-opacity="0.12" stroke-width="2" style="mix-blend-mode:multiply"/>
+<path d="M256.022 15.2731C264.248 15.2731 270.935 8.68658 271.097 0.5H313.422C321.197 0.5 327.5 6.80284 327.5 14.5778V190.422C327.5 198.197 321.197 204.5 313.422 204.5H271.098C271.099 204.428 271.1 204.356 271.1 204.284C271.1 195.957 264.349 189.207 256.022 189.207C247.695 189.207 240.944 195.957 240.944 204.284C240.944 204.356 240.945 204.428 240.946 204.5H14.5778C6.80284 204.5 0.5 198.197 0.5 190.422V14.5778C0.5 6.80283 6.80284 0.5 14.5778 0.5H240.947C241.11 8.68658 247.797 15.2731 256.022 15.2731Z" />
+</g>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_3263_7307" transform="matrix(0.00152439 0 0 0.00243902 0 -0.00487779)"/>
+</pattern>
+<image id="image0_3263_7307" width="656" height="414" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEAkACQAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAGeApADAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+mGv1U1CgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgD9L/ANn/AEU6N8LdALpsn1d73Wph6i9uXS0fOTnfp0Fm3bGcY4yfgM7q+1zGtZ3VJQpL/tyKcl8pymZy3PaK8kQUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQB+NFfqpqFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUATW1vLd3EFrAhknuZoreFB1eWZ1jjQY7s7AD60pSUYylJ2UU5N9kldv7gP1/0bTYdG0jS9ItwBBpenWWnQhQAPKsraO2TAAAGVjB6Cvy+rUdWrUqy+KpUnUfrOTk/zMjSrMAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgD8aK/VTUKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoA9N+DejDXfib4PsmTfFDqqapMP4fL0eKXVSH7bHazWMg8PvCdWArz81q+xy/FTvZum6a9arVPTzXNfytcT2Z+pVfnRmFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFAH40V+qmoUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQB9Q/sq6P9r8Za5rLoGj0jQjboSP9Xd6rdwrE4PYm1s75OxIc9ga+d4jq8uEo0k9atbmfnGnF3X/AIFOD+RMtj72r4wgKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAPxor9VNQoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgD7w/ZS0oW/hLxFrBXbJqevJZA93t9KsYZI26fdE+p3SDJzlW4AwW+N4kqc2JoUulOi5+kqk2n+FOLIlufU9fOEhQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQB+NFfqpqFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAfpv8BtN/sz4VeFkKlZL2G91KTIALfbtRupoW46j7KbcKSSSADwCFX8+zmp7TMsS+kHCmv8AtyEU/wDybmM5bnsFeWIKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAPxor9VNQoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgD9cfBVgNL8H+FdNC7PsPh3RbVl7+ZDp1ukhbAGWaQMznAyxJxzX5li5+0xWJqb89erL5OpJr5W2MnudNXOAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAfjRX6qahQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUATW8RuLiCAHaZpoogT0BkdUyevTdnoaUnyxb7Jv7lcD9j0RI0SONQqRqqIo6KiAKqj2AAAr8sbbbb1bd36syHUgCgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgD8aK/VTUKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgDT0X/kM6T/2E7D/ANKoqzq/wqv/AF7n/wCksD9hK/LjIKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgD8aK/VTUKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgDa8NqX8RaAgG4trWlqF9S19AAPxzisq+lCs+1Kp/6QwP19r8vMgoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAPxor9VNQoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAN/wn/yNPhr/sYNG/8ATjbVjif93xH/AF5q/wDpuQM/XivzAyCgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoA/Giv1U1CgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoA2/DLFPEnh91+8mt6Uwz0yt/ARn8RWWIV6Fdd6NRf8AkkgP18r8vMgoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAPxor9VNQoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKANXQmKa3o7r95NV09hnplbuEjP4is6yvRqrvTmv/JWB+wVflxkFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQB+NFfqpqFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQBc05/L1Cxfdt2Xlq+7ONu2dDuyORjGcjpU1FeE13hJfgwex+xdflhkFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQB+NFfqpqFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQBJC4jlic5ISRHIHXCsCcZIGcDjJH1pNXTXdNAfsnX5WZBQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAfjRX6qahQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFAH7KRv5kaSAYDorgHtuUNj8M1+VtWbXZ2Mh9IAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoA/Giv1U1CgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAP2Rtv8Aj3g/64xf+gLX5XL4per/ADMiakAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAfjRX6qahQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFAH7JwoY4okOCUjRCR0yqgHGQDjI4yB9K/K27tvu2zIkpAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFAH40V+qmoUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFAEsEfnTww8nzZY48Ljcd7heM5GeeMjGaUnZN9k39yA/ZKvysyCgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoA/Giv1U1CgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoA1tBh+065o1v1+0atp0OB3828hTsVP8XYj6jrWdZ8tGrL+WnUf3RbA/YGvy4yCgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoA/Giv1U1CgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoA7H4eWxvPH3gq2GcS+K/D4fHBEY1W1aVh7rGrMPpXLjpcmCxcu2Gr29fZyt+NhPZn6zV+aGYUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFAH40V+qmoUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFAHrPwMsjf/FbwfEFyIr27vWOOFFhpl7ehicHHzwKqk4y5VcgkGvNzifJluKfeEYf+B1IQ/Jv5XE9mfp9X54ZhQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAfjRX6qahQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAfR/7L2m/bPiLc3zKNuk+HtQuFY44nubizsEA75aG5uTkY4UgnnB8HiKpy4GMOtWvCPyjGc3+MYky2P0Ir4ggKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgD8aK/VTUKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgD7X/ZM0gpYeMNedMi4vNN0iB/Q2cM95doD/tfb7It/uLjvXyXEtW88LRT+GNSrJf4moRf/kk/vIl0PsCvlyQoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAPxor9VNQoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAP00+AuhHQvhf4dV0Cz6uk+uz4GN41OUyWbnk5J01LIZ9ugr8/zqt7bMa9vhpONFeXs1aX/AJUczN7s9jryhBQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAfjRX6qahQAUAFABQAUAFABQAUAFABQAUAFABQBlX2u6NphIv9VsLR16xz3UKS9M8Ql/NY45wqE4rWFGrU+CnOSfVRbX32t+IHK3XxN8IWxwl/NdsOotbO5Ydf780cEbeuVcjFdEcvxUt4KP+KcfyTb/AdmYE/wAYtFUn7NpepzehmNrbg/8AfE1wcemRn1AreOV1n8VSmvTml+aiPlMqT4z9RD4d+jSap9cZRbD6H7/qPetFlXev91P9XP8AQOXzKjfGW/Odmh2i+m67mbH1xEmf0qllUOtaXyil+rCyGD4yalkZ0axI74uLgHHscHH1wfoaf9lU/wDn7P8A8BiFkTL8Zbsff0G3Yf7N/InH1Ns/8vwpf2VHpWl/4An/AO3IOUvRfGaA/wCu8Pyp6mLUkl/HD2UP5Z/H1h5VLpXT9abX5TYcpqQfGDw++BcWGrQE9SkdrMgP1+1Rvj3Ef4Cs5ZXXXwzpS+ck/wD0lr8RWOx8M+OPCHiLWtK0g6tJYHUb+1tHmubG8228U0ypPcuYYZk2W0O+d/m+4hwCeK5MRg8VQpVKvslP2cJSSjOHvNK6jq07ydo+oNNH7FaB4z8BXlraWGg+KPDtxFawQWdrZ2+rWInjhgiEcES2rTJOoWKPan7oAhGA+6cfltfCY2EpTrYevFybnKTpzs23dvmScd3rr1MrM7UEEAg5B5BHIIPcVyCCgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoA/Giv1U1CgAoAKACgAoAKACgAoAKACgCjqGp6fpNu11qV5BZwL/AMtJ3C7iOdka8vLIe0cau57KauFOdSXLTi5y7JX+b6Jeb0A8e1z4vojPD4fsVlAyBfagHVG7ZitI2SQjurzTRnP34McH1KOVt2dedv7kLN/OTuvuT9SrHl+p+MfEurlheavd+W3WC3f7Jb47KYbURJIB2Modu5YnJr0aeFw9L4KUb95e9L75Xa+Vh2RzNdAwoAKACgAoAKACgAoAKAPX/hHohudTutcmjJh06M29qxHym9uVxIVPcwWpYMOCPtMZzXl5nW5acaKetR80v8Edvvl/6SyW+h9DV4ZJ0WkeLvFOgFToniLWtLVTxHY6neW8JwMYeCOYQyLgAbXjZeBxwKwq4bDVv41ClUv1nTjJ/KTV18mKy7HrehftJfEvSNiXt3pviCBeCmq6fGku3npc6a1hKXGeHm8/oAQwrzK2Q5fVu4RqUG+tKba/8Bqc6t5KwuVHtvh79qvw5dlIvE3h/UtHkO1TdadNFq1puz8zyRutjdwx45CxR3j5+Xn7x8ivw3Xjd4evTqr+WonSl6Jrni36uCFys988NfEDwZ4vVT4e8RabqErKH+xif7PqKKe8mnXQhvkAPGWgC56E8V4uIwWLwrft6FSC257c0H6VI3g//AibNHY1ygFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAUNT1XTNGs5dQ1e/s9MsYRmW7vriK1gTgsAZZmRdxCnagJdyMKpPFXTp1KslClCVSb2jCLlJ/JJ6eeyA+fPFH7TngfRmkt9BtdQ8UXSEr5sAGm6XkZBH2y6RrmTB+60OnywuuSs2ME+5h+HsZVtKtKGHi+j/eVP/AYvlXzmmuxSi/Q8K1z9qD4gagzrpFvo3h+HJ8sw2h1G8UHoJJ9RaW1kI4wU0+IE5yCDgexR4ewMLe1lVrvreXs4/JQtJfObHyo8w1H4r/EnVS32zxr4gAckslnfy6bEcnODDpv2SLbnouzaOgAFejTy3AU/hwlDTrKCqP76nM/xHZdjkLnWtYvCTd6tqV0TwTc391OSPQ+bK1dMaVKPw06cf8ADCK/JDM5mZiWYlmPJLEkn6k8mtALEV5dwY8i6uYcYx5U8seMHIxsYYweRjoealxi94xfqk/zA3rPxt4z0/b9h8W+JbMKchbbXNThTqDgpHdKjKcDcrAqw4YEVjPCYWfx4bDz/wAVGm/xcRWXZHaad8dPirpm0ReLbu5ReDHqNrp2o7xxw0t5aTXHYHcsyv1+bDMDyVMny2pe+FjF96cp07eihJR/CwcqPSNI/ar8Y2pRdZ0HQdWiUAM1qbzSruQ92abzr+1BP+xYoPauCrw3hZX9lWrUn/e5akV8rQl982LlPWtD/al8D3xWPWtM1rQZDjdKIotUsk65zLatHeHGBjbp5zntivMrcOYyGtKpSrLtd05v5SvH/wAnFys9s8P+PvBnioKNA8S6TqMrAEWsd0kV+AeAW0+58m+QE8Avbrk8da8mvgsXhv4+Hq01/M4tw/8AA43g/lImzOurlAKACgAoAKACgAoA/Giv1U1CgAoAKACgAoAKACgAoAhuLi3tIZLi6mit7eJS8s08ixRRqOrO7kKo9yacYuTUYpyk9Ekm235JasDxzxJ8WYIC9r4bhW6fBU6jdI6wI3Izb2xCSTEDlZJjGgYD91KhyfVw+WSlaVduK/59xtzP/FLVL0V35pjseJajqmoavctd6ldz3lw2fnmfIUHnZEgxHDGO0cSJGvZRXr06dOlHlpxUI9l18292/NtsooVYwoAKACgAoAKACgAoAKACgCSGGW4mit4EaWaeRIYY0GWkllYJGijuzuwUDuSKTaim27JJtt7JLVv5IR9g+F9Dj8O6JZaYu0yxp5t3IvSW8lw0754JUNiKMnnyY4welfL4is69adR7N2iu0VpFfdq/NslnQVgIKACgAoAcrMjK6MyOjBlZSVZWU5VlYYIYEAggggjIo30eqe6A9e8J/HT4i+EzFDHrLa1p8ZGdP18PqMZT5vkjvGdNSgA3HYsV4sSkIDE6LsPl4nJ8Dibt0vZTf26Nqbv3cbOm9tbxvvqm7icU/I+qfBf7SvgzxAYbPxFHN4U1F1UNLdP9q0aWXkER6hGqyWwYDf8A6dbQQxg+X9qkYBn+cxeQYuheVBrEwT2iuWql5wbtLt7km3vyrpLi15n0RbXNveQRXVpcQ3VtOgkguLaVJ4Jo25WSKaJmjkRhyGRip7GvClGUW4yi4yTs4yTTT7NPVPyZJNSAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAI5ZYoIpJppI4YYY3lllldY4ooo1LySSSOQiRogLO7EKqgsxABNNJtpJNttJJK7beiSS1bb2QHyz8Rf2mNI0nz9L8CRRa5qKl4n1q4Vxo1swG0tZxgpNqciNkLJmGxyFljlvYiUP0eB4fq1eWpjG6NPRqlG3tZf4nqqafbWfRqD1KUe58ZeI/FXiLxbfHUfEer3mq3XzbDcyfubdWOTHaWsYS2tIiQD5VtDFGTyVzk19VQw1DDQ5KFKFOPXlWsvOUneUn5ybZSSRz9bjCgAoAKACgAoAKACgAoAKAFBKkEEggggg4II5BBHIIPIIoA9P8M/GX4jeFPLjsPEd3eWce1Rp+sH+1bTYpyI4/tZe4to+oIs7i2OCQCK87EZVgMTdzoRjN/bpfu5X7vltGT/xRkLlR9JeE/2qdIuzFbeMdEn0mU7VfUtILX1hk4zJJYykX1tGOflhl1KQ9ga8HE8OVY3lhayqLpTq2hP0U17kn6qmiXF9NT6W8P8Ainw74qtBe+HdZsNXt9qs5tLhHmgDlgq3VsdtzaSHa2I7qGGTg/LXz9fDV8NLkr0p0pdOaLSdv5ZfDJecW0Sb9YgFABQAUAfCHxG/Zp1fR/tOq+BZJ9d01d8z6LNs/tq0jVdzrauNiasgIbyoo44r8qY4EhvZsyv9lgM/pVeWnjEqNTRKqr+yk+nMtXSfdtuG7bgtFal3PlyaCa2mkt7iGW3nhdo5oJo3imikQ7XjkjcK6OpBDKyhlIwQDX0SaklKLUotXTTTTT2aa0a8yiKmAUAFABQAUAFAHnvij4iaP4f8y1tyNT1RcqbaBx5Fu+D/AMfdwAyqVYYaCPfMD8riLIau7D4GrXtKX7um/tPeS/ux3+bsu19hpXPnzX/E+seJJ/N1K5LRqxaGzizHZ2+Rj91DubLY4MsjSSkcGQjAHt0MPSw6tTjq95PWUvV/okl5FJWOfrcYUAFABQAUAFABQAUAFABQAUAFAHtPwq8Kmab/AISW9jIigZ4tLRgMSz4KTXeD1SEFooj0MxdhgwqT5OZYmy+rwesrOo10W6j6vd+Vu5LfQ98rxSQoAKACgAoAKACgAoA7vwZ8SfGHgK5WXw/qssdqX3z6TdF7nSLon73nWTOqo7dDcWzW90AMLOoyK48XgMLjY2r005WsqsbRqx9J21X92XNHyE0mfbfw5/aD8L+Mmg0vWgnhrxBJtRIrmUHSr+U4GLG+cjypXbO20vBG/KpDPdOW2/I4/JMRheapRviKC1vFfvIL+/BbpfzQuurUUQ015n0DXiCCgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAr3V1bWNtcXt5PFa2lrDJcXNzO6xQwQQoXlllkchUjjRSzMxAABJqoxlOUYQi5Sk1GMUrttuySS3bYH53fGH42al48up9E0SSbT/CFvKVWJS0V1rbRtgXWoEHK2pYb7Ww+6o2zXQkn8tbb7nK8op4KMa1ZKeKktXvGjf7MP73SU9+kbRvzWo216ngNe0UFABQAUAFABQAUAFABQAUAFABQAUAFABQBe07VNS0e7jv9J1C90y9i/1d3YXM1pcoCQSFmgeOQKSBuXdhsDINRUp06sXCrCFSD3jOKlF/KSaA+nvAv7T+t6Z5Nh43sv7esl2p/a1gsNtrESDA3T2/7qx1DaoAGPsEx+aSWedzg/PYzh6jUvPBz9jPf2U7ypN+UtZw/wDJ10UUiXHsfYfhXxn4a8a2H9o+G9Vt9RhXCzxLuiu7SQjPlXlnMEuLd+u0vGI5QC8LyR4c/LYnCYjCT9niKcoPo94yXeMleMl6O62aT0I2OornAKACgDy/x98I/B3xBiaTU7IWOsBSIdd01Y4NQU4ARbo7TFqEK7VAiu0kaNdy20tuZHc+jgszxWBdqc+elfWjUu4efL1g/OLSbtzKVkhptHwx8Qvgp4x8ANNdy2/9teH4zldc06MmONMZzqFnvkuNPZf4nk82zyQqXkjZUfYYHNsLjbRUvZV3/wAuaj1b/uTsoz9FaXeKLTTPH69QYUAFAGZqusabolq15ql3HawDhS5JklfGRHBEoMk0hHOyNWIXLNhQWGlOlUrS5KcXJ+WyXdvZLzb8twPnzxV8TNS1kyWek+bpemnKM6ttvrpSCD5sqEiCNgcGGBiSMiSaRW2D28Nl9OladW1Spvb7EX5J/E/N/JJ6lJHmFeiUFABQAUAFABQAUAFABQAUAFABQAUAdr4K8IXHim/y4aLSrR0a/uOQXGQwtICCCZ5lByw+WCMmR8sYo5eTF4qOHhprUknyR7f3n5L8Xp3aTdj6qt7eG0ghtbaNYbe3ijhhiQYSOKJQkaKPRVAA78cnNfNyk5ScpNuUm22923q2QTUgCgAoAKACgAoAKACgAoAKAPoz4W/tA634Re20fxO9xr3hrKxJK7+ZqukR5VQ9tNJlry1iUH/QZ3DKuPs08QTyZPCzHJKOKUquHUaOI3slanVfaSXwSf8AOl/iTvdS49vuPvTQ9e0fxLptvq+hahbanp10oaK5tpA6hsAtDKnElvcRbgs9tOkc8D5SWNHBFfGVqNXD1JUq0JU6kd4yVvRp7Si+kk2mtU2iDXrIAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgD4c/aR+KL6hfSfD7Q7n/AIl+nyKfEk8Lqy3upRskkWlhlz+50xlD3a7/AJ9QPkSRxvp5Mv2GQ5coQWOrR9+a/wBnTXwU3o6nrU2jppD3k2p6XFdfuPkuvpSgoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKANrQPEWt+F9Sh1fQNRudMv4D8s1u+A6H70M8TboriB+jwTpJE/8SkgEZV6FHEU3SrU41IPpJbPunvFro000DVz7z+FXx+0fxobfRPEgttC8TNsihYyCPStZlO1VFnJM2bS9lclV06aSQytsFpcTySGCL4zMslq4TmrUOath9W1a9Skv76XxQS/5eJK2vNFJczzat6H0VXhCCgAoAQgMCCAQQQQRkEHggg8EEcEGgD578f/ALO3hHxWbjUdCA8L65KWkLWkYbR7qY8s1zpowIGfvLp7243FpZbe4kYk+5gs9xWG5adb/aKK095/vYr+7U+0l2mpdlKKKUmj4r8afDLxn4CmYa/pEqWW/ZDrFnm70i4JOE23iKBA8hzst71LW6YAnyNvNfWYTMMJjV+4qrntd0p+7Vj39x7pdZQco+ZSaZ88+LfiLpugCSzsPL1LVhlTGrZtbNumbqVD80in/l2ibzMhlleA7d3uYbA1K9pzvTpb3+1L/Cn0/vPTspFJXPnbV9a1PXbtrzU7qS5mOQgY4ihQnPlwRLhIYxgfKgBYjc5ZyWPu0qNOjHkpxUV17t95Pdv19FoVaxl1oMKACgAoAKACgAoAKACgAoAKACgAoA7nwf4Iv/FE6zOJLTR43xcXpXmXafmgsw3Ekp+60mGig5Z97hYX48VjIYdNK0qrXuw7X2cuy8t30stUm7H07pmmWWj2UGn6fAtva267UReSxPLSSMfmklkbLSSMSzMcnsK+eqVJ1Zuc3zSlu/ySXRLoiC/UAFABQAUAFABQAUAFABQAUAFABQB33w/+I3iL4dasNQ0abzbSYqupaRcPIbDUYQRxIin91dRrn7NexjzYGJBEsDzQS8WNwFDHUuSqrSV/Z1Ypc9N+T6xf2oPR+TSaTVz9J/AvjnQ/iBoUOt6JNxxFf2MpX7Xpl4FDSWt0g7jO6GZR5VxEVkjP3lX4LGYOtgqzo1l5wmvhqQ6Si/zW8XoyGrHZVyCCgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgDzH4uePI/h94NvtVjZTq17nTNDiO0k6lcxSFLlkOd0NhEkl3KCNrtFHblka4Rq9DLME8di4U3/AAofvKz/AOncWrxv3m2ortdy15WNK5+XMkkk0kk00jyyyu0kssjM8kkjsWeSR2JZ3diWZmJZmJJJJr9FSSSSSSSSSSsklskuiXRGgygAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgBQSpBBIIIIIOCCOQQRyCDyCKAPrT4P/ALQs+mG18M+PbmW60391b6d4hkzLdaeM7Fh1dy3mXVkBtCXuHurbBE/nwEPa/M5pkcanNiMFFRqayqUFpGfVuktoz/uaRl05XpKXHqj7ir5AgKACgCjqWpafo9jc6lql5b2FhZxNNc3d1KsMEMa9WZ2IGScKijLu5VEVnYA3TpzqzjTpwlOcnaMYq7b9F+PRbvQD4Y+Lf7Ql14mivfDXg4SWPh+ZZLW+1SaPZqGrwtvjligjbP2HT50IPzKL6ZcBzaqZIH+wyzI44dwxGKtOurShTT9yk9Gm39uaf/bi6c2jVqPV/cfBfiH4WaPqfmXGkv8A2PeNlvLRTJp8rHnBgyHt8nABt2ESDJFs5r7ShmVWnaNVe1j32mvntL/t7V/zFpnimueDvEHh7LX9izWw6Xtrm4syM4y0qKGhz/CtwkLt1CkV61HFUK+kJrm/kl7svknv/wButlJ3OXroGFABQAUAFABQAUAFABQAUAFAFi1tLq+njtbO3muriU7Y4YI2lkc+yICcAcscYUZJIAJpSlGCcpyUYrdyaSXzYj2vwv8ACghor3xM4OMOulQPkE8EC8uUOCOoaG3JzwTcY3RnyMRmW8MOvL2jX/pMX+cv/Aeom+x7dDDFbxRwQRRwwxKEiiiRY440UYVERAFVQOAFAAryG3Jttttu7bd233bJJKQBQAUAFABQAUAFABQAUAFABQAUAFABQB6D8NviDqfw58RwaxZF57CYx2+s6YH2x6jYb8sg3fKl1BlpbOcjMUuVbMEs8cnFj8DTx9CVKdlNXlSqW1pzto+7i9prqvNJpNXR+omj6vp+vaXYazpVwl1p2pW0V3aTp0eKVcgMvVJEOY5omAeKVHikCujAfndWlOjUnSqRcZ05OMk+jX5p7p7NNNaMzNKswCgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAPzq/aO8ZnxJ46k0a2kZtN8JJJpiLyEfVZGV9WmCk/eSVIbAnaMmxLLlWDH7rIcJ9XwaqyX7zEtVH3VNaUl803P/t8uK0Pn2vbKCgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAP2Xr8qMgoA4rxx4/wDDnw/0ptT1+7CPIsgsNNgKvqOpzRhcxWcBZcqpdPOuJGS3tw6maVSyBuvB4Kvjans6MbpW56juoU0+sn8naKvKVtFuNK5+dXxH+KviT4kX2/UZfsOjQSb9P0G1lc2Vtt3qk9wTtN7f7HZXu5UUDc628NtExir7rAZbh8BC1Nc9WStOtJLnltdR/khdaRXlzOT1LSt6nmVegMKAEIBBBGQeCDyCD2NAHEa18PPDOs7pDZ/2ddMD/pOnbbfJ2kAyW+1rWQZwzHyVlbH+tGSa7KWOxFLTn9pH+WpeX3SvzL77eQ7s8q1b4Sa5ab5NLubbVIhkiJj9juyM8KElZrdiB1b7ShJ6IMgV6VLM6MtKkZU33+OP3pKX/kr9R3POdQ0fVdKcx6lp95ZHJANxBJHG5H/POUr5co9GjdlPY13wq06ivTnGf+Fpteq3XzQzNqxhQAUAFABQAUAWrSxvL+YW9ja3F5O3SK2hkmf6lY1YgerHAAySQBUynCC5pyjFd5NJfiI9P0L4TavemOfWZ49Ktm+ZrdCs9+y8HBVc28G4dGeWWRDw9vnivPrZlShdUk6kv5npD/5KXyST6SFdHuGh+HNH8PQeRpdokLMoWa5f95d3GOcz3DDewLfMI12QoSfLjQcV49avVryvUk32itIx9I7L13fVsk3KxAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAPr39mDx+1ve3Xw/1Kcm3vRNqXh4yPxFdxKZdR0+MHOFuoFa/iRdqJJbXjENJc18xxDguaEcbTXvQtTr2W8XpTm/8AC/cb3alHpEmS6n21XyJAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFAHLeN/EkXhHwlr/AIjlKZ0vTZ5rZZBlJb5wIdPgYBlJWe+lt4ThgcOSDxXThKDxWJoUFf8AeVIqVt1BazfygpP5AfktcTzXU891cSNNcXM0k88rnLyzTO0ksjnuzuzMx7kmv0uMVFKMVaMUopLZJKyS9EakVMAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgD9l6/KjI8Y+K/xk0X4cWr2UHlap4quId9npIYmG1V8eXd6u8bq8Fvg74rdWW6vMBY/KiZ7qL1styqrj5Kcr08NF2nV6ytvGkmrOXRyfux63futpXPzu8S+J9b8Xavc63r99Lf39ycbnOIreEEmO1tIR+7trWLcfLhiCqCWdt0ju7fc4fD0cLSjRoQUIR7byfWUnvKT6t+mySNLWMCtgCgAoAKACgAoAayK6sjqrowwysAysD1DKQQQfQimm1qtH3QHMX3gnwrqO43GiWSu2cyWqNZOSf4i1m0BZu+X3Z755rohi8TD4a07dpPnX/k1/wHdnK3Xwj8NTEtb3GqWZPRUuIZoh/wGe3eU47fvvXOeMdMczxC+KNOXm4tP8JJfgFzGk+DNsSfK1+dB2EmnxykfUrdw559h6cda1Way60E/SbX/trHzeREPgwM/N4kJHoNICn8zqbfyp/2t/04/wDKv/3MObyL1v8ABzSlI+1axqEw7/Z4ba2J+hkW7xz6g+nvUSzWp9mlBf4nKX5cocx01j8NPCNkVZtPkvXXo99czSg/70MbQ27Z/wBqEj0ArnnmGKn9tQXaEUvxd5fiK7O0tbO0sYhBZWtvaQjpFbQxwRg4xnZEqrnAxnGa5JTlN3nKUn3k2397EWakAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgDV0PWLzw/rOl65p7mO80q+tr63YMVy9vKsnluRnMcqgxSqQVeJ3RlZWIOdalGvSqUZq8KkJQl6SVrrzW6fRpMD9b9F1W113R9L1qyO601bT7PUbfnJEV5BHOitwMOgk2SKQCrqysAQQPzKtSlRq1KM/ipTlTl6xk4t+jtdeRkadZgFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFAHyZ+1X4lNrofh/wAKwSgSarey6rfIp+b7HpqCG1jkHTyri7uWlXHPmWHUAYb6XhvD81aviWtKcFTg+nNUd5NecYxS9JlR3PhuvsCwoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoA/QP4zfHa28Gi58M+FmhvfFLRtHd3uUls9ALjHzr8y3OqKvMdq37m1YrJd+YV+yS/E5Vk0sVy4jE3hh73jDVSr27fy0+8t5aqNviUKNz4FvLy71G6uL6/uZ7y8upXnubq5leaeeaQ5eSWWQs7ux6liT+FfaQhGEYwhFRhFJRjFJRSWySWiRZWqgCgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgD9FP2adfbV/hxHp0rs83h3VL3TRvO5vss5TUrU567F+2TW8YJO1LcIuEVVHw2f0fZY91ErKvThU0/mV6cvm+VSfdyvuRLc+g68MkKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAPzU/aC8QnXvidrMaPuttBjttAtuTwbJGlvRg8ArqVzepx95UUnngff5JQ9jl9JtWlWcq0v8At92h/wCU4wfzNI7HidesMKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAHO7yu8kjtJJIzPJI7F3d3JZndmJZmZiWZmJJJJJJNCSSSSSSVkloklskuwDaACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoA+vP2TdUZNU8YaKXytzYabqkaE/dayuJ7SZ1X/AGxqEAkP+xGPSvmOJad6eFq21jOpTb/xxUkn6cjt6smXQ+26+RICgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAKeoXsGm2F9qNy2220+zub24YnAWC1heeVie2I42Oe1VCDqThTjrKcowj6yaivxYH5A6lfT6pqN/qd0d1zqN7dX1w3J3T3c73ExyeTmSRjzzX6jTgqcIU4/DThGEfSKUV+CNSlVAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQB9D/sxXZt/iYYc4+3+HdVtD7hJbG+weR3swe/I6dx4fEMebL7/yV6cvvU4f+3ilsfohXwxmFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAeR/HXWTovwt8Uyo4SbULWDRoRnHmDVbqG0ukHv9gku3wM8Ie2a9PJ6XtcxwyauoSdV+Xs4uUX/AOBqI1uj8xK/QjQKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoA9v/Z1dk+LPh5R0kttcRuv3Rol/Jxgj+KNeuRjtnBHkZ6r5ZX8pUX/AOVoL9RS2P0or4EzCgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAPlL9q/VTB4Z8MaMr4Oo61c6g6gjLx6VZGHBH3iok1WNv7u5VJ5C4+k4ap3xGIq2/h0owXk6k7/AJU2VHc+Fa+xLCgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAPbv2dlLfFrw4QMhLfXGbpwDoWopn3+ZlHGTznoCa8jPf+RZX85Uf/T0H+hMtj9Ka+BICgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAPgn9qrU/tHjTQ9KVtyaZ4eWdwCfkuNRvrouhHQH7PaWj5HUOM9K+04bp8uErVHvUrtLzjThGz/APApSXyLifL1fQlBQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFAHv37NVuZvijZyYz9k0fWLgnH3Q0C2uT6c3IXPqcd68XP5Wy6a/mq0o/8Ak3N/7aKWx+jNfCGYUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQB+ZXx81D+0fit4pYHMdnJp+nxjJO37HpdnHMOcY/wBK88kAAAnHzHLt+g5LD2eW4bvJTm/+36k2v/JeX+tDSOx47XqDCgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAPp79lS083x1rd4Vytr4WuI1JB+WW61TStrA9ATFBMvJ6MeD2+e4klbB0Y/zYmL9VGnU/VomWx9818WQFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAfkl46v/AO1PGvi3UAwZbzxJrdxGR08qTUrkwheAdqxbFUkZIAJ5zX6bg4ezwmGhtyYejF+qpxv+NzVbHK10AFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAfZX7JVid3jfU2HAGhWMLY6knU7i4GSO2LUgBu53AfIT8rxNP/dKf/X6b/8AKcY/+3f1ciXQ+za+UJCgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoArXtyllZ3d5J/q7S2nuXznGyCJ5WzgE9EPQE+gNVCLnOMFvKUYr1k0v1A/HSSR5ZHlkbdJI7SOxxlnclmY4wOSSeAB6V+ppJJJbJWXojUZQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQB9/fssaf9m8BarfsMPqXiW62nGM29nY2EKc4BOJ2uhwSo7YbeK+K4jnzY2nDpTw8f/Apzm3+HL/ViJbn0zXz5IUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFAHG/ES7+weAfGl3nDQ+FteMZH/PZ9MuY4enIzKyAkdAc9q6sDHnxuEj3xNG/oqkW/wAExrdH5NV+lmgUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAfp18CdNOl/CrwnGwxJd213qTnkbhqOo3d3AcHpi1lgXjhtu4da/Pc5qe0zLEvpGUaa/7hwjF/8AkyZm92eu15ggoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAPKPjjdfY/hT4ylzt32Fra55/5ftTsbLHH977Rt9OecjNelk8ebMsKu05S/wDAKc5/+2jW6Py/r9DNAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoA/Xjwrpo0bwx4d0gKF/szQ9KsCMFfmtLGCByQfm3MyFmLfMWJLfMTX5hiantcRXq7+0rVJ/wDgU21+D9DJm/WIBQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAeE/tH3HkfCrV4s4+2ahotv8AXbqUF3g8HP8Ax654xyAc4yD7OQxvmVJ/ywqy/wDKbj/7cOO5+b1feGgUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQB0PhHTf7Y8VeGtJ27hqWvaRYuO3l3N/bwyE9PlVHZmORhQTkVhiqnssNiKu3s6NWa9Ywk1+KB7M/XavzEyCgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAPm39qWcxfDmwjB/wCPnxXpsJHsum6zcc8jgNAvZhnHGcMPf4cV8fN/y4ao/wDypSj+pUdz8+q+2LCgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAPXvgPp39pfFbwnGyho7W4vdRkzyF+waZeXMLYyOftKQBcZwxDEEA15mcz9nluJfWUYQX/b9SEX/wCStiezP05r89MwoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgD5V/avm2+E/DNvk/vfETzYycHyNNukyRjBI+0DBJBGTgEE4+k4aX+04iXagl/4FUi//AG0qO58JV9iWFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAfSn7LVj9o+IOoXjAbdO8M30inGT51zfabbIByMZhe4JPPTbj5sjwOIp8uBhH/n5iIL5RhUk/xUSZbH6B18SQFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAfIf7WkpGl+Coc8SX+sy7c8kw29ggO3vjzyM4+XcBxu5+n4ZX7zFvtCkvvlN/oVHqfElfXFhQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFAH2P+yXp2ZvGmrsPuR6Np0JwefNa/ubkZ4X5fKtcAZPzHO0Y3/LcTVNMJS7urUfyUIx/OX/B6TLofaFfJkBQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFAHxx+1vu8rwDjGzzPE+713bdA2Y9sb8/hX1XDNr43vbD/d++v+hUep8X19WWFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAfoD+yzYfZvAGpXrD59R8S3jK2AMwWtjp1vGM4ycTi5745wADuLfFcRz5sbTh0p4eP/AIFKdST/AA5SJbn0tXz5IUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQB8j/tZ2+7RvBt1j/U6nqtvnjI+02trJjpnn7Jk8gcDIPBX6fhmX73FR706cv8AwGUl/wC3FR6nxBX1xYUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQB+mnwBsRY/CfwsMYe6XU76Q4xuNzq9+0Rx7W4hXPfbkcEV+f51PnzLE9o+zgv8At2lC/wD5Nczluz2OvKEFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAfNP7U1l5/w+027UZaw8UWLseOIbjT9Ugbrg8zNb9M9OR3X3+HJ8uOqR/nw8184zpyX4cxUd/kfn9X2xYUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQAUAFABQB+r/AMM7VbL4eeCLdSDjwtocrEDA8y5063uZccDI8yVsEgE9SMk1+bZhLnx2Ml/1E1l8o1JRX4JGb3Z3FcYgoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgDyP466amp/CvxZGxCtaWtrqUTkZ2vp+oWt0wHoZYY5Yc9vNJr08mqOnmWGfSUpU2vKcJR/BtP5DW6PzEr9CNAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAD/2Q=="/>
+</defs>
+</svg>
diff --git a/img/features/idpay/bonus_bg_svg.svg b/img/features/idpay/bonus_bg_svg.svg
deleted file mode 100644
index dba6c003dfd..00000000000
--- a/img/features/idpay/bonus_bg_svg.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="343" height="192" viewBox="0 0 343 192" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M223 0C223 4.97056 226.806 9 231.5 9C236.194 9 240 4.97056 240 0H335C339.418 0 343 3.58173 343 8V184C343 188.418 339.418 192 335 192H239.948C239.982 191.672 240 191.338 240 191C240 186.029 236.194 182 231.5 182C226.806 182 223 186.029 223 191C223 191.338 223.018 191.672 223.052 192H8C3.58173 192 0 188.418 0 184V8C0 3.58172 3.58173 0 8 0H223Z" fill="#E6E9F2"/>
-<mask id="mask0_983_23551" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="343" height="192">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M223 0C223 4.97056 226.806 9 231.5 9C236.194 9 240 4.97056 240 0H335C339.418 0 343 3.58173 343 8V184C343 188.418 339.418 192 335 192H239.948C239.982 191.672 240 191.338 240 191C240 186.029 236.194 182 231.5 182C226.806 182 223 186.029 223 191C223 191.338 223.018 191.672 223.052 192H8C3.58173 192 0 188.418 0 184V8C0 3.58172 3.58173 0 8 0H223Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_983_23551)">
-<rect x="-7.34375" y="-5.23828" width="356.636" height="198" fill="#2746A3"/>
-</g>
-</svg>
diff --git a/img/features/idpay/creditcard.svg b/img/features/idpay/creditcard.svg
deleted file mode 100644
index fb1183a224f..00000000000
--- a/img/features/idpay/creditcard.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21.375 0.75H2.625C1.17759 0.75 0 1.92759 0 3.375V14.625C0 16.0724 1.17759 17.25 2.625 17.25H21.375C22.8224 17.25 24 16.0724 24 14.625V3.375C24 1.92759 22.8224 0.75 21.375 0.75ZM2.625 2.25H21.375C21.9953 2.25 22.5 2.7547 22.5 3.375V4.875H1.5V3.375C1.5 2.7547 2.0047 2.25 2.625 2.25ZM21.375 15.75H2.625C2.0047 15.75 1.5 15.2453 1.5 14.625V6.375H22.5V14.625C22.5 15.2453 21.9953 15.75 21.375 15.75Z" fill="#0073E6"/>
-<path d="M5.25 13.5H4.5C4.08581 13.5 3.75 13.1642 3.75 12.75V12C3.75 11.5858 4.08581 11.25 4.5 11.25H5.25C5.66419 11.25 6 11.5858 6 12V12.75C6 13.1642 5.66419 13.5 5.25 13.5Z" fill="#0073E6"/>
-</svg>
diff --git a/img/features/idpay/empty_initiative.svg b/img/features/idpay/empty_initiative.svg
deleted file mode 100644
index 5da49215e81..00000000000
--- a/img/features/idpay/empty_initiative.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_3796_16388" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="120" height="120">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M103.784 6H117.755C118.857 6 119.751 6.89551 119.751 8V16C119.751 17.1055 118.857 18 117.755 18H103.784V20C103.784 21.1055 102.89 22 101.788 22H97.7963V116H101.348C99.9441 114.464 99.4452 112.302 100.034 110.303C100.621 108.305 102.211 106.76 104.223 106.232C103.209 103.726 103.992 100.85 106.138 99.208C108.283 97.5664 111.259 97.5664 113.404 99.208C115.55 100.85 116.334 103.726 115.319 106.232C117.332 106.76 118.921 108.305 119.509 110.303C120.097 112.302 119.598 114.464 118.194 116H119.751V120H0V116H1.16944L10.5639 106.587C11.3436 105.806 12.6065 105.806 13.3862 106.587L22.7807 116H25.9459V26H29.9376V34H55.8836V38H29.9376V44H41.9127V42H45.9044V44H57.8794V40H61.8711V44H73.8462V36H77.8378V116H85.8212V22H81.8295C80.7273 22 79.8337 21.1055 79.8337 20V18H11.9751V54.3428C13.8559 55 15.2846 56.5566 15.7796 58.4902C16.2757 60.4238 15.7728 62.4785 14.4396 63.9629L19.5589 70.8008L19.5335 70.8203C19.8005 71.1562 19.9496 71.5713 19.9584 72V80C19.9584 80.5312 19.7479 81.0391 19.3737 81.4141L15.382 85.4141C15.0078 85.7891 14.5001 86 13.9709 86H5.98753C5.45835 86 4.95062 85.7891 4.5764 85.4141L0.584719 81.4141C0.210499 81.0391 0 80.5312 0 80V72C0.00877078 71.5713 0.157874 71.1562 0.424896 70.8203L0.399558 70.8008L5.51878 63.9629C4.54035 62.875 3.99753 61.4639 3.99168 60H7.98337C7.98337 61.1055 8.87701 62 9.97921 62C11.0814 62 11.9751 61.1055 11.9751 60C11.9751 58.8955 11.0814 58 9.97921 58C8.87701 58 7.98337 57.1055 7.98337 56V18H1.99584C0.893646 18 0 17.1055 0 16V8C0 6.89551 0.893646 6 1.99584 6H79.8337V2C79.8337 0.895508 80.7273 0 81.8295 0H101.788C102.89 0 103.784 0.895508 103.784 2V6ZM13.9709 70L10.9771 66H8.98129L5.98753 70H13.9709ZM15.9667 79.1729L13.1445 82H6.81393L3.99168 79.1729V74H15.9667V79.1729ZM103.784 13.6006L109.173 10H103.784V13.6006ZM83.8254 4H91.8087V12H83.8254V4ZM35.3268 14L29.9376 10.4004L24.5485 14H35.3268ZM17.9626 13.6006L12.5734 10H23.3517L17.9626 13.6006ZM41.9127 13.6006L47.3018 10H36.5235L41.9127 13.6006ZM53.8877 10.4004L59.2769 14H48.4986L53.8877 10.4004ZM65.8628 13.6006L71.2519 10H60.4736L65.8628 13.6006ZM3.99168 10H5.38916L11.3767 14H3.99168V10ZM78.4362 10L72.4487 14H79.8337V10H78.4362ZM93.8046 109.4L90.2124 104L93.8046 98.6006V109.4ZM90.2124 56L93.8046 61.4004V50.6006L90.2124 56ZM89.8129 62.6006L93.405 68L89.8129 73.4004V62.6006ZM89.8129 38.6006V49.4004L93.405 44L89.8129 38.6006ZM89.8129 86.6006L93.405 92L89.8129 97.4004V86.6006ZM90.2124 80L93.8046 85.3887V74.6006L90.2124 80ZM90.2124 32L93.8046 26.6006V37.4004L90.2124 32ZM89.8129 22V25.4004L92.0719 22H89.8129ZM73.8462 48V68H61.8711V48H73.8462ZM57.8794 65.2002V48H45.9044V60.0762H51.8919C52.4152 60.0781 52.9171 60.2861 53.2894 60.6543L57.8794 65.2002ZM41.9127 48V51.334H29.9376V48H41.9127ZM17.1362 116L11.9751 110.828L6.81393 116H17.1362ZM29.9376 116V55.334H41.9127V62.084C41.9127 63.1895 42.8063 64.084 43.9085 64.084H51.0713L58.4778 71.4229C58.8501 71.791 59.3519 71.999 59.8753 72H73.8462V116H29.9376ZM93.405 116L89.8129 110.601V116H93.405ZM113.763 114C112.661 114 111.767 113.105 111.767 112C111.767 110.896 112.661 110 113.763 110C114.865 110 115.759 110.896 115.759 112C115.759 113.105 114.865 114 113.763 114ZM111.767 104C111.767 102.896 110.874 102 109.771 102C108.669 102 107.775 102.896 107.775 104C107.775 105.105 108.669 106 109.771 106C110.874 106 111.767 105.105 111.767 104ZM105.78 110C106.882 110 107.775 110.896 107.775 112C107.775 113.105 106.882 114 105.78 114C104.677 114 103.784 113.105 103.784 112C103.784 110.896 104.677 110 105.78 110ZM83.8254 16V18H99.7921V4H95.8004V14C95.8004 15.1055 94.9068 16 93.8046 16H83.8254ZM110.37 14L115.759 10.4004V14H110.37ZM33.9293 68H37.921V72H33.9293V68ZM33.9293 76H37.921V80H33.9293V76ZM45.9044 80V76H41.9127V80H45.9044ZM41.9127 68H45.9044V72H41.9127V68ZM53.8877 68H49.896V72H53.8877V68ZM49.896 80V76H53.8877V80H49.896ZM61.8711 80V76H57.8794V80H61.8711ZM65.8628 76H69.8545V80H65.8628V76ZM37.921 84H33.9293V88H37.921V84ZM69.8545 84H65.8628V88H69.8545V84ZM33.9293 92H37.921V96H33.9293V92ZM41.9127 84H45.9044V88H41.9127V84ZM53.8877 84H49.896V88H53.8877V84ZM57.8794 84H61.8711V88H57.8794V84ZM45.9044 96V92H41.9127V96H45.9044ZM49.896 96V92H53.8877V96H49.896ZM61.8711 96V92H57.8794V96H61.8711ZM65.8628 92H69.8545V96H65.8628V92ZM37.921 100H33.9293V104H37.921V100ZM41.9127 100H45.9044V104H41.9127V100ZM53.8877 100H49.896V104H53.8877V100ZM57.8794 100H61.8711V104H57.8794V100ZM69.8545 100H65.8628V104H69.8545V100ZM33.9293 108H37.921V112H33.9293V108ZM45.9044 112V108H41.9127V112H45.9044ZM49.896 112V108H53.8877V112H49.896ZM61.8711 112V108H57.8794V112H61.8711ZM65.8628 108H69.8545V112H65.8628V108Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_3796_16388)">
-<rect x="-5.09375" y="-3.46191" width="132" height="130" fill="#00C5CA"/>
-</g>
-</svg>
diff --git a/img/features/idpay/institution.svg b/img/features/idpay/institution.svg
deleted file mode 100644
index 676d45e605b..00000000000
--- a/img/features/idpay/institution.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M23.0621 10.1876C23.5798 10.1876 23.9995 9.76789 23.9995 9.25013V6.50025C23.9995 6.14589 23.7998 5.82186 23.4832 5.66272L12.4211 0.100399C12.1562 -0.0328153 11.8438 -0.0328153 11.5788 0.100399L0.516708 5.66272C0.200172 5.8219 0.000397655 6.14594 0.000397655 6.50025V9.25013C0.000397655 9.76789 0.420102 10.1876 0.937865 10.1876H1.81285V18.4399C1.41068 18.4667 1.06728 18.7485 0.966785 19.1438L0.0293185 22.8312C-0.121145 23.4229 0.326496 23.9996 0.937865 23.9996H23.0621C23.6727 23.9996 24.1213 23.4237 23.9706 22.8312L23.0332 19.1438C22.9301 18.7384 22.5714 18.4524 22.1558 18.4386V10.1876H23.0621ZM1.87533 7.07816L12 1.98724L22.1246 7.07816V8.31266H1.87533V7.07816ZM8.31259 18.4373V10.1876H15.6561V18.4373H8.31259ZM6.43765 10.1876V18.4373H3.68774V10.1876H6.43765ZM2.14345 22.1247L2.60426 20.3122H21.3956L21.8565 22.1247H2.14345ZM20.2809 18.4373H17.531V10.1876H20.2809V18.4373Z" fill="#0073E6"/>
-</svg>
diff --git a/img/features/idpay/wallet_card.svg b/img/features/idpay/wallet_card.svg
new file mode 100644
index 00000000000..8d816bc7c21
--- /dev/null
+++ b/img/features/idpay/wallet_card.svg
@@ -0,0 +1,4 @@
+<svg width="328" height="205" viewBox="0 0 328 205" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M270.6 0.196889C270.6 8.24798 264.073 14.7747 256.022 14.7747C247.971 14.7747 241.444 8.24798 241.444 0.196889C241.444 0.131687 241.445 0.0665858 241.446 0.00158691H14.5778C6.52669 0.00158691 0 6.52828 0 14.5794V190.424C0 198.475 6.52669 205.002 14.5778 205.002H241.462C241.45 204.765 241.444 204.526 241.444 204.286C241.444 196.235 247.971 189.708 256.022 189.708C264.073 189.708 270.6 196.235 270.6 204.286C270.6 204.526 270.594 204.765 270.583 205.002H313.422C321.473 205.002 328 198.475 328 190.424V14.5794C328 6.52829 321.473 0.00158691 313.422 0.00158691H270.599C270.6 0.0665858 270.6 0.131687 270.6 0.196889Z" fill="#DDEBFA"/>
+<path d="M256.022 15.2747C264.248 15.2747 270.935 8.68817 271.097 0.501587H313.422C321.197 0.501587 327.5 6.80443 327.5 14.5794V190.424C327.5 198.199 321.197 204.502 313.422 204.502H271.098C271.099 204.43 271.1 204.358 271.1 204.286C271.1 195.959 264.349 189.208 256.022 189.208C247.695 189.208 240.944 195.959 240.944 204.286C240.944 204.358 240.945 204.43 240.946 204.502H14.5778C6.80284 204.502 0.5 198.199 0.5 190.424V14.5794C0.5 6.80442 6.80284 0.501587 14.5778 0.501587H240.947C241.11 8.68817 247.797 15.2747 256.022 15.2747Z" stroke="black" stroke-opacity="0.12" style="mix-blend-mode:multiply"/>
+</svg>
diff --git a/img/features/payments/Amount.svg b/img/features/payments/Amount.svg
deleted file mode 100644
index bbdfc07ae08..00000000000
--- a/img/features/payments/Amount.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.0002 0.000366211C5.38341 0.000366211 0 5.38335 0 12.0001C0 18.6169 5.38341 23.9995 12.0002 23.9995C18.617 23.9995 24 18.617 24 12.0001C24 5.3833 18.617 0.000366211 12.0002 0.000366211ZM12.0002 22C6.23034 22 2 17.7699 2 12.0001C2 6.23024 6.22992 2 12.0002 2C17.77 2 22 6.23024 22 12.0001C22 17.7699 17.7701 22 12.0002 22Z" fill="currentColor"/>
-<path d="M12.1725 7.782C13.4338 7.782 14.6202 8.57616 15.27 9.85491C15.4618 10.233 15.9256 10.3837 16.3025 10.1918C16.6807 9.99966 16.8317 9.53747 16.6395 9.15933C15.7264 7.36266 14.0145 6.24609 12.1725 6.24609C10.0869 6.24609 8.28771 7.64395 7.48277 9.64683H6.24794C5.82405 9.64683 5.48003 9.99084 5.48003 10.4147C5.48003 10.8386 5.82362 11.1826 6.24794 11.1826H7.08503C7.05091 11.4499 7.03291 11.7228 7.03291 12.0005C7.03291 12.1973 7.04181 12.3919 7.05916 12.5837H5.92098C5.49709 12.5837 5.15308 12.9273 5.15308 13.3516C5.15308 13.7759 5.49667 14.1195 5.92098 14.1195H7.39403C8.14924 16.247 10.0064 17.7549 12.1726 17.7549C14.0146 17.7549 15.7268 16.638 16.6395 14.8409C16.8313 14.4627 16.6803 14.0005 16.3026 13.8088C15.9257 13.617 15.4623 13.7676 15.2701 14.1457C14.6199 15.4245 13.4335 16.2186 12.1726 16.2186C10.8449 16.2186 9.68285 15.3738 9.05763 14.1195H12.3373C12.7612 14.1195 13.1048 13.7759 13.1048 13.3516C13.1048 12.9273 12.7608 12.5837 12.3369 12.5837H8.60346C8.58082 12.393 8.56886 12.1983 8.56886 12.0005C8.56886 11.7207 8.59249 11.4473 8.63707 11.1826H12.6635C13.0878 11.1826 13.4322 10.8386 13.4322 10.4147C13.4322 9.99084 13.0882 9.64683 12.6639 9.64683H9.18325C9.83111 8.52272 10.9293 7.782 12.1725 7.782Z" fill="currentColor"/>
-</svg>
diff --git a/img/features/payments/Giacenza.svg b/img/features/payments/Giacenza.svg
deleted file mode 100644
index 8ec5322da8f..00000000000
--- a/img/features/payments/Giacenza.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_897_9830)">
-<path d="M18.0862 5.4458H5.8565C5.33857 5.4458 4.9187 5.865 4.9187 6.38211C4.9187 6.89921 5.33857 7.31841 5.8565 7.31841H18.0862C18.6041 7.31841 19.024 6.89921 19.024 6.38211C19.024 5.865 18.6041 5.4458 18.0862 5.4458Z" fill="currentColor"/>
-<path d="M18.0862 9.51587H5.8565C5.33857 9.51587 4.9187 9.93507 4.9187 10.4522C4.9187 10.9693 5.33857 11.3885 5.8565 11.3885H18.0862C18.6041 11.3885 19.024 10.9693 19.024 10.4522C19.024 9.93507 18.6041 9.51587 18.0862 9.51587Z" fill="currentColor"/>
-<path d="M10.4307 13.4141H5.8565C5.33857 13.4141 4.9187 13.8333 4.9187 14.3504C4.9187 14.8675 5.33857 15.2867 5.8565 15.2867H10.4307C10.9486 15.2867 11.3685 14.8675 11.3685 14.3504C11.3685 13.8333 10.9486 13.4141 10.4307 13.4141Z" fill="currentColor"/>
-<path d="M20.2488 1.86921e-07H3.75121C2.75239 -0.000311494 1.79302 0.389173 1.07786 1.08534C0.362708 1.7815 -0.0515677 2.72916 -0.0765381 3.72608V20.2357C-0.0765381 21.2492 0.326742 22.2213 1.04458 22.938C1.76243 23.6547 2.73603 24.0573 3.75121 24.0573H17.4928L23.9617 17.656V3.82166C23.9622 2.82765 23.5747 1.87254 22.8815 1.15905C22.1883 0.445553 21.244 0.0298204 20.2488 1.86921e-07ZM17.9522 21.4586V18.7452C17.9522 18.5476 18.0308 18.358 18.1708 18.2182C18.3108 18.0785 18.5006 18 18.6986 18H21.4354L17.9522 21.4586ZM18.6986 16.5095C18.1029 16.5095 17.5314 16.7444 17.1084 17.1632C16.6854 17.5819 16.4453 18.1505 16.4402 18.7452V22.1465H3.75121C3.24362 22.1465 2.75682 21.9451 2.3979 21.5868C2.03898 21.2284 1.83734 20.7424 1.83734 20.2357V3.72608C1.83734 3.2193 2.03898 2.7333 2.3979 2.37495C2.75682 2.0166 3.24362 1.81525 3.75121 1.81525H20.2488C20.7564 1.81525 21.2432 2.0166 21.6021 2.37495C21.9611 2.7333 22.1627 3.2193 22.1627 3.72608V16.5095H18.6986Z" fill="currentColor"/>
-</g>
-<defs>
-<clipPath id="clip0_897_9830">
-<rect width="24" height="24" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/img/features/payments/calendar.svg b/img/features/payments/calendar.svg
deleted file mode 100644
index 7f0c8dc39b8..00000000000
--- a/img/features/payments/calendar.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_77_17712" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M24 15.5625C24 16.0803 23.5803 16.5 23.0625 16.5C22.5447 16.5 22.125 16.0803 22.125 15.5625V5.625C22.125 4.59113 21.2839 3.75 20.25 3.75H19.0312V4.6875C19.0312 5.20528 18.6115 5.625 18.0938 5.625C17.576 5.625 17.1562 5.20528 17.1562 4.6875V3.75H12.8906V4.6875C12.8906 5.20528 12.4709 5.625 11.9531 5.625C11.4353 5.625 11.0156 5.20528 11.0156 4.6875V3.75H6.79688V4.6875C6.79688 5.20528 6.37716 5.625 5.85938 5.625C5.34159 5.625 4.92188 5.20528 4.92188 4.6875V3.75H3.75C2.71613 3.75 1.875 4.59113 1.875 5.625V20.25C1.875 21.2839 2.71613 22.125 3.75 22.125H20.25C21.2839 22.125 22.125 21.2839 22.125 20.25C22.125 19.7322 22.5447 19.3125 23.0625 19.3125C23.5803 19.3125 24 19.7322 24 20.25C24 22.3177 22.3177 24 20.25 24H3.75C1.68225 24 0 22.3177 0 20.25V5.625C0 3.55725 1.68225 1.875 3.75 1.875H4.92188V0.9375C4.92188 0.419719 5.34159 0 5.85938 0C6.37716 0 6.79688 0.419719 6.79688 0.9375V1.875H11.0156V0.9375C11.0156 0.419719 11.4353 0 11.9531 0C12.4709 0 12.8906 0.419719 12.8906 0.9375V1.875H17.1562V0.9375C17.1562 0.419719 17.576 0 18.0938 0C18.6115 0 19.0312 0.419719 19.0312 0.9375V1.875H20.25C22.3177 1.875 24 3.55725 24 5.625V15.5625ZM18.0938 10.7812C18.6115 10.7812 19.0312 10.3615 19.0312 9.84375C19.0312 9.32598 18.6115 8.90625 18.0938 8.90625C17.576 8.90625 17.1562 9.32598 17.1562 9.84375C17.1562 10.3615 17.576 10.7812 18.0938 10.7812ZM13.0781 17.0625C13.0781 18.0964 13.9193 18.9375 14.9531 18.9375H17.1562C18.1901 18.9375 19.0312 18.0964 19.0312 17.0625V14.8594C19.0312 13.8255 18.1901 12.9844 17.1562 12.9844H14.9531C13.9193 12.9844 13.0781 13.8255 13.0781 14.8594V17.0625ZM14.9531 14.8594H17.1562L17.1574 17.0625L17.1562 17.0625H14.9531V14.8594ZM14.9531 9.84375C14.9531 10.3615 14.5334 10.7812 14.0156 10.7812C13.4979 10.7812 13.0781 10.3615 13.0781 9.84375C13.0781 9.32598 13.4979 8.90625 14.0156 8.90625C14.5334 8.90625 14.9531 9.32598 14.9531 9.84375ZM6.79688 18C6.79688 18.5178 6.37714 18.9375 5.85938 18.9375C5.34161 18.9375 4.92188 18.5178 4.92188 18C4.92188 17.4822 5.34161 17.0625 5.85938 17.0625C6.37714 17.0625 6.79688 17.4822 6.79688 18ZM5.85938 10.7812C6.37714 10.7812 6.79688 10.3615 6.79688 9.84375C6.79688 9.32598 6.37714 8.90625 5.85938 8.90625C5.34161 8.90625 4.92188 9.32598 4.92188 9.84375C4.92188 10.3615 5.34161 10.7812 5.85938 10.7812ZM6.79688 13.9219C6.79688 14.4396 6.37714 14.8594 5.85938 14.8594C5.34161 14.8594 4.92188 14.4396 4.92188 13.9219C4.92188 13.4041 5.34161 12.9844 5.85938 12.9844C6.37714 12.9844 6.79688 13.4041 6.79688 13.9219ZM9.9375 14.8594C10.4553 14.8594 10.875 14.4396 10.875 13.9219C10.875 13.4041 10.4553 12.9844 9.9375 12.9844C9.41973 12.9844 9 13.4041 9 13.9219C9 14.4396 9.41973 14.8594 9.9375 14.8594ZM10.875 9.84375C10.875 10.3615 10.4553 10.7812 9.9375 10.7812C9.41973 10.7812 9 10.3615 9 9.84375C9 9.32598 9.41973 8.90625 9.9375 8.90625C10.4553 8.90625 10.875 9.32598 10.875 9.84375ZM9.9375 18.9375C10.4553 18.9375 10.875 18.5178 10.875 18C10.875 17.4822 10.4553 17.0625 9.9375 17.0625C9.41973 17.0625 9 17.4822 9 18C9 18.5178 9.41973 18.9375 9.9375 18.9375Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_77_17712)">
-<rect x="-4.97705" y="-26" width="100" height="100" fill="currentColor"/>
-</g>
-</svg>
diff --git a/img/landing/01.png b/img/landing/01.png
deleted file mode 100644
index b6fcef5ac73..00000000000
Binary files a/img/landing/01.png and /dev/null differ
diff --git a/img/landing/02.png b/img/landing/02.png
deleted file mode 100644
index 07d941b54ce..00000000000
Binary files a/img/landing/02.png and /dev/null differ
diff --git a/img/landing/03.png b/img/landing/03.png
deleted file mode 100644
index bad6fb3d47f..00000000000
Binary files a/img/landing/03.png and /dev/null differ
diff --git a/img/landing/04.png b/img/landing/04.png
deleted file mode 100644
index 78ef93000da..00000000000
Binary files a/img/landing/04.png and /dev/null differ
diff --git a/img/landing/05.png b/img/landing/05.png
deleted file mode 100644
index 64ac5687988..00000000000
Binary files a/img/landing/05.png and /dev/null differ
diff --git a/img/landing/session_expired.png b/img/landing/session_expired.png
deleted file mode 100644
index 4ad33dda6f7..00000000000
Binary files a/img/landing/session_expired.png and /dev/null differ
diff --git a/img/logo-it-square-icon.png b/img/logo-it-square-icon.png
deleted file mode 100644
index e12edad85ec..00000000000
Binary files a/img/logo-it-square-icon.png and /dev/null differ
diff --git a/img/logo-it.png b/img/logo-it.png
deleted file mode 100644
index d4a2a74b738..00000000000
Binary files a/img/logo-it.png and /dev/null differ
diff --git a/img/pictograms/fireworks.png b/img/pictograms/fireworks.png
deleted file mode 100644
index 0ce0e95f08c..00000000000
Binary files a/img/pictograms/fireworks.png and /dev/null differ
diff --git a/img/pictograms/hourglass.png b/img/pictograms/hourglass.png
deleted file mode 100644
index ad2d20d3262..00000000000
Binary files a/img/pictograms/hourglass.png and /dev/null differ
diff --git a/img/pictograms/payment-completed.svg b/img/pictograms/payment-completed.svg
deleted file mode 100644
index d9e061ce403..00000000000
--- a/img/pictograms/payment-completed.svg
+++ /dev/null
@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>686AD73B-1535-427E-9A17-D2F9A04978DB</title>
-    <defs>
-        <path d="M59.9565571,0.506383725 C92.7663396,0.506383725 119.460689,27.2007334 119.460689,60.010516 C119.460689,92.8202985 92.7663396,119.514648 59.9565571,119.514648 C27.1467745,119.514648 0.452424838,92.8202985 0.452424838,60.010516 C0.452424838,27.2007334 27.1467745,0.506383725 59.9565571,0.506383725 Z M59.9565571,6.45194343 C30.4228993,6.45194343 6.39798454,30.4768582 6.39798454,60.010516 C6.39798454,89.5441738 30.4228993,113.569088 59.9565571,113.569088 C89.4902149,113.569088 113.51513,89.5441738 113.51513,60.010516 C113.51513,30.4768582 89.4902149,6.45194343 59.9565571,6.45194343 Z M75.5363503,45.5227643 C76.7011946,44.35792 78.5697991,44.35792 79.7346434,45.5227643 C80.8752202,46.6876087 80.8752202,48.5562132 79.7103758,49.7210575 L79.7103758,49.7210575 L54.7875603,74.4982676 C54.2051381,75.0806897 53.4528428,75.3719008 52.7005475,75.3719008 C51.9239846,75.3719008 51.1716893,75.0806897 50.5892671,74.4982676 L50.5892671,74.4982676 L40.1784707,64.0146684 C39.0378939,62.8498241 39.0378939,60.956952 40.2027383,59.8163752 C41.3675826,58.6757985 43.2361871,58.6757985 44.4010315,59.8406428 L44.4010315,59.8406428 L52.7248151,68.2129616 Z" id="path-1"></path>
-    </defs>
-    <g id="Inserimento-Carta" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="6.-Thankyou-page---Esito---OK" transform="translate(-128.000000, -247.000000)">
-            <g id="Group-3" transform="translate(53.000000, 247.000000)">
-                <g id="colors/@aqua" transform="translate(75.000000, 0.000000)">
-                    <mask id="mask-2" fill="white">
-                        <use xlink:href="#path-1"></use>
-                    </mask>
-                    <g id="Mask" fill-rule="nonzero"></g>
-                    <g mask="url(#mask-2)" fill="#00C5CA" id="Rectangle-Copy-9">
-                        <g transform="translate(-8.925620, -23.801653)">
-                            <rect x="0" y="0" width="144.793388" height="152.727273"></rect>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/img/rooted/broken-phone.png b/img/rooted/broken-phone.png
deleted file mode 100644
index b98349e31a4..00000000000
Binary files a/img/rooted/broken-phone.png and /dev/null differ
diff --git a/img/rooted/broken-phone@2x.png b/img/rooted/broken-phone@2x.png
deleted file mode 100644
index 1bca58dad94..00000000000
Binary files a/img/rooted/broken-phone@2x.png and /dev/null differ
diff --git a/img/rooted/broken-phone@3x.png b/img/rooted/broken-phone@3x.png
deleted file mode 100644
index 7eed13352d5..00000000000
Binary files a/img/rooted/broken-phone@3x.png and /dev/null differ
diff --git a/img/test/fingerprint.svg b/img/test/fingerprint.svg
deleted file mode 100644
index e9b91053189..00000000000
--- a/img/test/fingerprint.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M31.9448 5.67184C31.8349 5.71145 31.7145 5.72779 31.5905 5.71525C27.8603 5.34108 24.1726 5.79895 20.6296 7.07598C18.7833 7.74145 17.0236 8.61944 15.3995 9.68548C15.0305 9.92737 14.5328 9.82765 14.2882 9.46191C14.0435 9.09616 14.1443 8.60318 14.5135 8.36087C16.2428 7.22584 18.1159 6.29118 20.0809 5.58294C23.8526 4.22346 27.7791 3.73612 31.7514 4.13459C32.192 4.17879 32.5132 4.56848 32.4687 5.00496C32.4368 5.31844 32.2249 5.57088 31.9448 5.67184Z" fill="#0073E6"/>
-<path d="M41.1875 12.2908C41.35 12.2322 41.4946 12.1214 41.5931 11.9648C41.8274 11.5926 41.7126 11.1026 41.3366 10.8703C37.9568 8.78251 34.0774 7.58719 30.118 7.41356C29.6757 7.39387 29.3012 7.73379 29.2817 8.17208C29.2622 8.61037 29.6052 8.98137 30.0476 9.0008C33.732 9.16243 37.3424 10.275 40.4885 12.2185C40.7062 12.353 40.9637 12.3715 41.1875 12.2908Z" fill="#0073E6"/>
-<path d="M21.2515 8.76809C22.9365 8.16077 24.6866 7.74909 26.4532 7.5445C26.8931 7.49349 27.2914 7.80554 27.343 8.24121C27.3945 8.67692 27.0796 9.07153 26.6399 9.1224C24.9967 9.31291 23.3685 9.69588 21.8003 10.2611C16.2753 12.2526 11.9196 16.2924 9.53555 21.6362C9.44365 21.8421 9.27438 21.9901 9.07637 22.0615C8.88861 22.1292 8.67516 22.1279 8.47798 22.0415C8.07291 21.864 7.88957 21.3949 8.06866 20.9937C9.31082 18.2094 11.0642 15.7393 13.28 13.6523C15.575 11.4907 18.2571 9.84741 21.2515 8.76809Z" fill="#0073E6"/>
-<path d="M22.9709 13.4463C27.3509 11.8675 32.1181 12.0271 36.3941 13.8955C40.6573 15.7584 43.9853 19.1196 45.7652 23.3603C45.9306 23.7542 46.3789 23.9465 46.7794 23.8022C46.7909 23.798 46.8022 23.7937 46.8136 23.789C47.2224 23.6207 47.416 23.1557 47.246 22.7506C45.3071 18.1314 41.6828 14.4704 37.0409 12.442C32.3845 10.4073 27.1928 10.2337 22.4222 11.9532C21.5371 12.2722 20.67 12.6563 19.845 13.0946C19.4547 13.302 19.3082 13.7834 19.5177 14.1701C19.7271 14.5567 20.2131 14.7028 20.6035 14.4947C21.361 14.0922 22.1576 13.7394 22.9709 13.4463Z" fill="#0073E6"/>
-<path d="M32.8411 16.2405C33.0054 16.2835 33.1713 16.2729 33.3197 16.2194C33.5581 16.1335 33.7515 15.9372 33.8211 15.6756C33.9343 15.2515 33.679 14.8167 33.2508 14.7045C31.5071 14.2474 29.7153 14.0825 27.9252 14.2141C27.4839 14.2469 27.1523 14.6278 27.1852 15.0652C27.2181 15.5027 27.6028 15.8311 28.0445 15.7986C29.6564 15.6801 31.2701 15.8287 32.8411 16.2405Z" fill="#0073E6"/>
-<path d="M23.5928 15.1384C23.8747 15.0368 24.1627 14.9418 24.4489 14.856C24.8728 14.7289 25.3204 14.9663 25.4488 15.3862C25.5771 15.8061 25.3386 16.2511 24.9138 16.3765C24.6556 16.4539 24.3959 16.5396 24.1416 16.6313C16.5803 19.3567 12.6687 27.6689 15.4222 35.1606L16.6245 38.4318C16.776 38.8441 16.5615 39.2999 16.1454 39.4498C15.7293 39.5998 15.2691 39.3873 15.1175 38.9749L13.9153 35.7039C10.8592 27.389 15.2006 18.1633 23.5928 15.1384Z" fill="#0073E6"/>
-<path d="M40.6612 26.909C41.0773 26.759 41.2918 26.3033 41.1403 25.8909C40.0835 23.0156 38.0093 20.618 35.2998 19.1398C32.6168 17.6759 29.4997 17.2096 26.5227 17.8266C26.0898 17.9167 25.8115 18.3374 25.9023 18.7668C25.9931 19.1961 26.4181 19.4715 26.8515 19.3817C29.4534 18.8424 32.1791 19.2507 34.5265 20.5314C36.8958 21.824 38.7094 23.9203 39.6333 26.434C39.7849 26.8464 40.2451 27.059 40.6612 26.909Z" fill="#0073E6"/>
-<path d="M20.3447 33.3864C18.5797 28.584 21.0871 23.2557 25.9341 21.5086C30.7812 19.7616 36.1604 22.2472 37.9255 27.0496L39.011 30.003C39.7397 31.9858 41.1766 33.6237 43.057 34.6148L46.0361 36.1853C46.4271 36.3914 46.5755 36.8725 46.3676 37.2599C46.1597 37.6471 45.674 37.7938 45.2831 37.5879L42.304 36.0174C40.0732 34.8415 38.3686 32.8984 37.5041 30.5462L36.4186 27.5928C34.9561 23.6136 30.499 21.5541 26.4829 23.0017C22.4667 24.4493 20.3892 28.8641 21.8517 32.8433L23.0539 36.1144C25.2474 42.0824 29.5806 46.9968 35.2555 49.9522L36.3118 50.5024C36.7038 50.7065 36.8547 51.1869 36.6487 51.5752C36.5521 51.7572 36.3942 51.8867 36.2135 51.9519C36.0085 52.0258 35.7741 52.017 35.5659 51.9086L34.5097 51.3584C28.4809 48.2185 23.8773 42.9978 21.5471 36.6575L20.3447 33.3864Z" fill="#0073E6"/>
-<path d="M27.1048 24.6938C24.0303 25.8019 22.44 29.1816 23.5595 32.2277L24.7618 35.4988C26.8002 41.045 30.8271 45.6119 36.1008 48.3586L39.9175 50.3464C40.1258 50.4548 40.3601 50.4636 40.5651 50.3897C40.7459 50.3245 40.9037 50.1952 41.0003 50.013C41.2063 49.6247 41.0554 49.1443 40.6633 48.9402L36.8467 46.9524C31.9268 44.3901 28.1701 40.1295 26.2686 34.9557L25.0663 31.6846C24.2494 29.4618 25.4099 26.9955 27.6534 26.1869C29.8969 25.3782 32.3867 26.5287 33.2037 28.7515L34.2892 31.705C35.4434 34.8454 37.7193 37.4395 40.6975 39.0095L44.0062 40.7537C44.3972 40.9596 44.8827 40.813 45.0907 40.4257C45.2986 40.0383 45.1502 39.5572 44.7592 39.3511L41.4506 37.6069C38.8227 36.2217 36.8146 33.9328 35.7962 31.1618L34.7107 28.2084C33.5912 25.1623 30.1792 23.5857 27.1048 24.6938Z" fill="#0073E6"/>
-<path d="M26.7743 31.069L27.9765 34.3401C29.7231 39.0921 33.1735 43.0052 37.6923 45.3586L42.2156 47.7145C42.4239 47.823 42.6583 47.8317 42.8632 47.7578C43.044 47.6926 43.2018 47.5633 43.2984 47.3812C43.5044 46.9929 43.3535 46.5124 42.9615 46.3083L38.4381 43.9524C34.2733 41.7834 31.0932 38.1768 29.4834 33.797L28.2812 30.5258C28.1097 30.0593 28.3533 29.5417 28.8242 29.372C29.295 29.2023 29.8176 29.4437 29.989 29.9102L31.0745 32.8637C32.5184 36.7922 35.3654 40.0374 39.0912 42.0015L43.7451 44.4549C44.1362 44.6609 44.6218 44.5141 44.8296 44.1269C45.0375 43.7394 44.8892 43.2584 44.4982 43.0523L39.8442 40.5989C36.4688 38.8197 33.8895 35.8796 32.5814 32.3205L31.496 29.3671C31.0219 28.0773 29.5772 27.4097 28.2754 27.8789C26.9736 28.3482 26.3002 29.7792 26.7743 31.069Z" fill="#0073E6"/>
-<path d="M40.7188 29.3875C40.5672 28.9751 40.7818 28.5194 41.1979 28.3694C41.614 28.2194 42.0742 28.4319 42.2257 28.8443C42.6648 30.0389 43.5304 31.0256 44.6632 31.6228L47.3132 33.0198C47.7041 33.2258 47.8525 33.7069 47.6446 34.0943C47.5477 34.2746 47.3908 34.4027 47.2112 34.4675C47.0051 34.5418 46.769 34.5324 46.5601 34.4223L43.9102 33.0254C42.4271 32.2434 41.2937 30.9516 40.7188 29.3875Z" fill="#0073E6"/>
-<path d="M23.2593 43.8313C23.0073 43.4705 22.5082 43.3805 22.1436 43.6295C21.7795 43.879 21.6885 44.3739 21.9403 44.7347C22.6423 45.7401 23.4134 46.713 24.2326 47.6267C24.4576 47.8774 24.8068 47.9539 25.1067 47.8458C25.1991 47.8125 25.2867 47.7617 25.3647 47.6932C25.6958 47.4019 25.7257 46.8998 25.4315 46.5717C24.6552 45.7061 23.9245 44.784 23.2593 43.8313Z" fill="#0073E6"/>
-<path d="M17.8657 24.2626C18.0739 23.8752 18.5596 23.7288 18.9504 23.9351C19.3413 24.1414 19.4894 24.6225 19.2813 25.0097C17.7905 27.7825 17.5557 31.06 18.637 34.002L19.8392 37.2731C20.2955 38.5146 20.8418 39.7345 21.4628 40.8991C21.6697 41.2871 21.52 41.7676 21.1285 41.9724C21.0954 41.9898 21.0616 42.0045 21.0273 42.0169C20.6568 42.1504 20.2343 41.9959 20.0449 41.6408C19.3898 40.4123 18.8135 39.1256 18.3323 37.8162L17.1301 34.5451C15.8933 31.1804 16.1615 27.4325 17.8657 24.2626Z" fill="#0073E6"/>
-<path d="M20.8882 22.6292C20.9968 22.5901 21.0984 22.5271 21.1849 22.44C21.9688 21.6508 22.8657 20.9858 23.8509 20.4631C24.2413 20.256 24.3881 19.7745 24.179 19.3878C23.9698 19.0012 23.4846 18.8556 23.0935 19.0625C21.9657 19.6607 20.9389 20.4221 20.0416 21.3255C19.731 21.6381 19.7352 22.1411 20.0509 22.4488C20.2787 22.6709 20.6066 22.7307 20.8882 22.6292Z" fill="#0073E6"/>
-<path d="M43.9336 28.2287L42.8481 25.2753C41.5717 21.8025 39.0287 18.9736 35.6876 17.3095C35.2919 17.1123 35.1322 16.6349 35.331 16.2429C35.5299 15.8509 36.0119 15.693 36.4076 15.89C40.1157 17.7369 42.9382 20.8771 44.355 24.7322L45.4405 27.6856C45.5899 28.092 45.8843 28.4276 46.2695 28.6306L47.5745 29.3185C47.9655 29.5246 48.1139 30.0057 47.9059 30.393C47.8092 30.5734 47.6522 30.7015 47.4726 30.7663C47.2664 30.8406 47.0305 30.8313 46.8215 30.7212L45.5165 30.0333C44.7809 29.6454 44.2187 29.0045 43.9336 28.2287Z" fill="#0073E6"/>
-<path d="M11.0232 22.7645C9.95855 25.3025 9.45315 27.9741 9.52105 30.7052C9.53193 31.1438 9.89969 31.4906 10.3423 31.48C10.4318 31.4778 10.5175 31.4612 10.5971 31.4325C10.9117 31.3192 11.1329 31.0166 11.1242 30.6666C11.0619 28.1593 11.5262 25.706 12.5042 23.3747C12.6741 22.9696 12.4803 22.5047 12.0714 22.3361C11.6624 22.1676 11.1932 22.3594 11.0232 22.7645Z" fill="#0073E6"/>
-<path d="M16.827 15.0771C17.1715 14.8018 17.6765 14.8552 17.9546 15.1969C18.2327 15.5384 18.1787 16.0385 17.834 16.3138C16.3796 17.4759 15.1197 18.8541 14.0892 20.4105C13.9907 20.5593 13.8503 20.6644 13.6936 20.7209C13.464 20.8037 13.199 20.7818 12.9788 20.6387C12.6085 20.398 12.5053 19.9055 12.7481 19.5387C13.8702 17.8443 15.2425 16.343 16.827 15.0771Z" fill="#0073E6"/>
-<path d="M10.7143 13.6824C11.3111 13.0276 11.9505 12.3981 12.6146 11.8116C12.9451 11.5198 12.9742 11.0175 12.6795 10.69C12.3848 10.3626 11.8779 10.3336 11.5473 10.6255C10.8401 11.2501 10.1593 11.9203 9.52393 12.6175C9.22722 12.9431 9.25322 13.4454 9.58191 13.7394C9.81009 13.9436 10.1242 13.9937 10.3942 13.8964C10.5132 13.8535 10.6237 13.782 10.7143 13.6824Z" fill="#0073E6"/>
-</svg>
diff --git a/img/wallet/errors/domain-unknown-icon.png b/img/wallet/errors/domain-unknown-icon.png
deleted file mode 100755
index 4eb89cda1c0..00000000000
Binary files a/img/wallet/errors/domain-unknown-icon.png and /dev/null differ
diff --git a/img/wallet/errors/domain-unknown-icon.svg b/img/wallet/errors/domain-unknown-icon.svg
deleted file mode 100755
index eb69484a010..00000000000
--- a/img/wallet/errors/domain-unknown-icon.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
-    <title>A14060FF-4435-46E0-894B-36B05046628C</title>
-    <desc>Created with sketchtool.</desc>
-    <g id="--#164773655-I-diversi-errori-degli-avvisi-di-pagamento-devono-essere-associati-ad-un-icona-grafica" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="#164773655-DOMAIN_UNKNOWN" transform="translate(-128.000000, -143.000000)" fill="#00C5CA">
-            <path d="M140,230.920899 L144,230.920899 L144,234.920899 L140,234.920899 L140,230.920899 Z M144,238.920899 L148,238.920899 L148,242.920899 L144,242.920899 L144,238.920899 Z M228,250.920899 L232,250.920899 L232,254.920899 L228,254.920899 L228,250.920899 Z M224,222.920899 L228,222.920899 L228,226.920899 L224,226.920899 L224,222.920899 Z M232,222.920899 L236,222.920899 L236,226.920899 L232,226.920899 L232,222.920899 Z M144,198.920899 C148.417969,198.920899 152,202.501953 152,206.920899 L152,214.920899 L136,214.920899 L136,206.920899 C136,202.501953 139.582031,198.920899 144,198.920899 Z M148,210.920899 L148,206.920899 C148,204.711914 146.208984,202.920899 144,202.920899 C141.791016,202.920899 140,204.711914 140,206.920899 L140,210.920899 L148,210.920899 Z M196,202.920899 L196,210.920899 L180,210.920899 L180,202.920899 C180,198.501953 183.582031,194.920899 188,194.920899 C192.417969,194.920899 196,198.501953 196,202.920899 Z M192,206.920899 L192,202.920899 C192,200.711914 190.208984,198.920899 188,198.920899 C185.791016,198.920899 184,200.711914 184,202.920899 L184,206.920899 L192,206.920899 Z M240,206.920899 L240,214.920899 L224,214.920899 L224,206.920899 C224,202.501953 227.582031,198.920899 232,198.920899 C236.417969,198.920899 240,202.501953 240,206.920899 Z M236,210.920899 L236,206.920899 C236,204.711914 234.208984,202.920899 232,202.920899 C229.791016,202.920899 228,204.711914 228,206.920899 L228,210.920899 L236,210.920899 Z M130,170.920899 C129.286133,170.918945 128.626953,170.53711 128.270508,169.918945 C127.915039,169.300781 127.915039,168.539062 128.272461,167.920899 L142.272461,143.920899 C142.65918,143.344727 143.306641,143 144,143 C144.69336,143 145.34082,143.344727 145.727539,143.920899 L159.727539,167.920899 C160.084961,168.539062 160.084961,169.300781 159.729492,169.918945 C159.373047,170.53711 158.713867,170.918945 158,170.920899 L156,170.920899 L156,186.920899 L160,186.920899 L160,218.920899 L164,218.920899 L164,214.920899 L168,214.920899 L168,188.920899 C168,187.816406 168.895508,186.920899 170,186.920899 L172,186.920899 L172,182.920899 C172,181.816406 172.895508,180.920899 174,180.920899 L176,180.920899 L176,160.920899 C176.00293,160.229492 176.363281,159.588867 176.952149,159.226562 C177.541016,158.864258 178.275391,158.832031 178.893555,159.140625 L190.893555,165.140625 C191.573242,165.478516 192.001953,166.171875 192.001953,166.930664 C192.001953,167.689453 191.573242,168.381836 190.893555,168.720703 L180,174.15625 L180,180.920899 L182,180.920899 C183.104492,180.920899 184,181.816406 184,182.920899 L184,186.920899 L192,186.920899 L192,182.920899 C192,181.816406 192.895508,180.920899 194,180.920899 L196,180.920899 L196,160.920899 C196.00293,160.229492 196.363281,159.588867 196.952149,159.226562 C197.541016,158.864258 198.275391,158.832031 198.893555,159.140625 L210.893555,165.140625 C211.573242,165.478516 212.001953,166.171875 212.001953,166.930664 C212.001953,167.689453 211.573242,168.381836 210.893555,168.720703 L200,174.15625 L200,180.920899 L202,180.920899 C203.104492,180.920899 204,181.816406 204,182.920899 L204,186.920899 L206,186.920899 C207.104492,186.920899 208,187.816406 208,188.920899 L208,214.920899 L212,214.920899 L212,218.920899 L216,218.920899 L216,186.920899 L220,186.920899 L220,170.920899 L218,170.920899 C217.286133,170.918945 216.626953,170.53711 216.270508,169.918945 C215.915039,169.300781 215.915039,168.539062 216.272461,167.920899 L230.272461,143.920899 C230.65918,143.344727 231.306641,143 232,143 C232.69336,143 233.34082,143.344727 233.727539,143.920899 L247.727539,167.920899 C248.084961,168.539062 248.084961,169.300781 247.729492,169.918945 C247.373047,170.53711 246.713867,170.918945 246,170.920899 L244,170.920899 L244,186.920899 L248,186.920899 L248,262.920899 L128,262.920899 L128,186.920899 L132,186.920899 L132,170.920899 L130,170.920899 Z M223.816406,162.920899 L221.482422,166.920899 L242.517578,166.920899 L236.683594,156.920899 L232,156.920899 L232,152.920899 L234.34961,152.920899 L232,148.890625 L226.150391,158.920899 L230,158.920899 L230,162.920899 L223.816406,162.920899 Z M224,186.920899 L228,186.920899 L228,190.920899 L236,190.920899 L236,186.920899 L240,186.920899 L240,170.920899 L224,170.920899 L224,186.920899 Z M220,238.920899 L220,258.920899 L244,258.920899 L244,254.920899 L236,254.920899 L236,250.920899 L244,250.920899 L244,190.920899 L240,190.920899 L240,194.920899 L224,194.920899 L224,190.920899 L220,190.920899 L220,234.920899 L232,234.920899 L232,238.920899 L220,238.920899 Z M200,164.15625 L200,169.68457 L205.52832,166.920898 L200,164.15625 Z M180,164.15625 L180,169.68457 L185.52832,166.920898 L180,164.15625 Z M186,246.920899 L186,238.920899 L184,238.920899 C178.479492,238.927735 174.006836,243.400391 174,248.920899 L174,258.920899 L186,258.920899 L186,250.920899 L182,250.920899 L182,246.920899 L186,246.920899 Z M202,258.920899 L202,248.920899 C201.993164,243.400391 197.520508,238.927735 192,238.920899 L190,238.920899 L190,246.920899 L194,246.920899 L194,250.920899 L190,250.920899 L190,258.920899 L202,258.920899 Z M172,190.920899 L172,214.920899 L176,214.920899 L176,218.920899 L180,218.920899 L180,214.920899 L196,214.920899 L196,218.920899 L200,218.920899 L200,214.920899 L204,214.920899 L204,190.920899 L202,190.920899 C200.895508,190.920899 200,190.025391 200,188.920899 L200,184.920899 L196,184.920899 L196,188.920899 C196,190.025391 195.104492,190.920899 194,190.920899 L182,190.920899 C180.895508,190.920899 180,190.025391 180,188.920899 L180,184.920899 L176,184.920899 L176,188.920899 C176,190.025391 175.104492,190.920899 174,190.920899 L172,190.920899 Z M160,244.920899 L160,258.920899 L170,258.920899 L170,248.920899 C170.008789,241.192383 176.271484,234.929688 184,234.920899 L192,234.920899 C199.728516,234.929688 205.991211,241.192383 206,248.920899 L206,258.920899 L216,258.920899 L216,250.920899 L210,250.920899 L210,246.920899 L216,246.920899 L216,238.920899 L212,238.920899 L212,234.920899 L216,234.920899 L216,230.920899 L188,230.920899 L188,226.920899 L216,226.920899 L216,222.920899 L208,222.920899 L208,218.920899 L204,218.920899 L204,222.920899 L192,222.920899 L192,218.920899 L184,218.920899 L184,222.920899 L172,222.920899 L172,218.920899 L168,218.920899 L168,222.920899 L160,222.920899 L160,226.920899 L176,226.920899 L176,230.920899 L160,230.920899 L160,240.920899 L166,240.920899 L166,244.920899 L160,244.920899 Z M156,230.920899 L156,190.920899 L152,190.920899 L152,194.920899 L136,194.920899 L136,190.920899 L132,190.920899 L132,250.920899 L140,250.920899 L140,254.920899 L132,254.920899 L132,258.920899 L156,258.920899 L156,234.920899 L148,234.920899 L148,230.920899 L156,230.920899 Z M136,186.920899 L140,186.920899 L140,190.920899 L148,190.920899 L148,186.920899 L152,186.920899 L152,170.920899 L136,170.920899 L136,186.920899 Z M135.816406,162.920899 L133.482422,166.920899 L154.517578,166.920899 L148.683594,156.920899 L144,156.920899 L144,152.920899 L146.349609,152.920899 L144,148.890625 L138.150391,158.920899 L142,158.920899 L142,162.920899 L135.816406,162.920899 Z M142,176.920899 L146,176.920899 L146,180.920899 L142,180.920899 L142,176.920899 Z M230,176.920899 L234,176.920899 L234,180.920899 L230,180.920899 L230,176.920899 Z M180,226.920899 L184,226.920899 L184,230.920899 L180,230.920899 L180,226.920899 Z" id="domain-unknown-icon"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/img/wallet/errors/domain-unknown-icon@2x.png b/img/wallet/errors/domain-unknown-icon@2x.png
deleted file mode 100755
index 11d34bfbc37..00000000000
Binary files a/img/wallet/errors/domain-unknown-icon@2x.png and /dev/null differ
diff --git a/img/wallet/errors/domain-unknown-icon@3x.png b/img/wallet/errors/domain-unknown-icon@3x.png
deleted file mode 100755
index 222d19bb0c6..00000000000
Binary files a/img/wallet/errors/domain-unknown-icon@3x.png and /dev/null differ
diff --git a/img/wallet/errors/invalid-amount-icon.png b/img/wallet/errors/invalid-amount-icon.png
deleted file mode 100755
index 56ecd84761f..00000000000
Binary files a/img/wallet/errors/invalid-amount-icon.png and /dev/null differ
diff --git a/img/wallet/errors/invalid-amount-icon.svg b/img/wallet/errors/invalid-amount-icon.svg
deleted file mode 100755
index c05d74d2f17..00000000000
--- a/img/wallet/errors/invalid-amount-icon.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 54.1 (76490) - https://sketchapp.com -->
-    <title>56267611-7536-4E1D-B42D-210C092C1A4D</title>
-    <desc>Created with sketchtool.</desc>
-    <g id="#164773655-I-diversi-errori-degli-avvisi-di-pagamento-devono-essere-associati-ad-un-icona-grafica" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="#164773655-INVALID_AMOUNT" transform="translate(-128.000000, -143.000000)" fill="#00C5CA" fill-rule="nonzero">
-            <path d="M238.425547,243.851094 L237.787344,243.851094 L237.787344,148.744766 C237.787344,145.577188 235.210391,143 232.042578,143 C228.874766,143 226.297812,145.577188 226.297812,148.744766 L226.297812,156.404375 L222.225781,156.404375 C221.373359,153.104375 218.371016,150.659609 214.808516,150.659609 C212.522422,150.659609 210.468594,151.667656 209.06375,153.261172 C207.658906,151.667656 205.605312,150.659609 203.318984,150.659609 C199.756484,150.659609 196.754141,153.104375 195.901719,156.404375 L191.587109,156.404375 C190.734922,153.104375 187.732578,150.659609 184.170078,150.659609 C181.883984,150.659609 179.830156,151.667656 178.425312,153.261172 C177.020469,151.667656 174.966875,150.659609 172.680547,150.659609 C170.394219,150.659609 168.340625,151.667656 166.935781,153.261172 C165.530937,151.667656 163.477109,150.659609 161.191016,150.659609 C157.628516,150.659609 154.626172,153.104375 153.77375,156.404375 L149.702188,156.404375 L149.702188,148.744766 C149.702188,145.577188 147.125234,143 143.957422,143 C140.789609,143 138.212656,145.577188 138.212656,148.744766 L138.212656,243.851094 L137.574453,243.851094 C132.294922,243.851094 128,248.146016 128,253.425547 L128,261.085156 C128,262.142891 128.857344,263 129.914844,263 L246.085156,263 C247.142656,263 248,262.142891 248,261.085156 L248,253.425547 C248,248.146016 243.705078,243.851094 238.425547,243.851094 Z M222.468125,160.234062 L226.297813,160.234062 L226.297813,164.06375 L222.468125,164.06375 L222.468125,160.234062 Z M210.978828,158.319219 C210.978828,156.2075 212.696797,154.489531 214.808516,154.489531 C216.920234,154.489531 218.638203,156.2075 218.638203,158.319219 L218.638203,165.978828 C218.638203,168.090547 216.920234,169.808516 214.808516,169.808516 C212.696797,169.808516 210.978828,168.090547 210.978828,165.978828 L210.978828,158.319219 Z M199.489297,158.319219 C199.489297,156.2075 201.207266,154.489531 203.318984,154.489531 C205.430703,154.489531 207.148672,156.2075 207.148672,158.319219 L207.148672,165.978828 C207.148672,168.090547 205.430703,169.808516 203.318984,169.808516 C201.207266,169.808516 199.489297,168.090547 199.489297,165.978828 L199.489297,158.319219 Z M191.829687,160.234062 L195.659375,160.234062 L195.659375,164.06375 L191.829687,164.06375 L191.829687,160.234062 Z M180.340391,158.319219 C180.340391,156.2075 182.058359,154.489531 184.170078,154.489531 C186.281797,154.489531 187.999766,156.2075 187.999766,158.319219 L187.999766,165.978828 C187.999766,168.090547 186.281797,169.808516 184.170078,169.808516 C182.058359,169.808516 180.340391,168.090547 180.340391,165.978828 L180.340391,158.319219 Z M168.851094,158.319219 C168.851094,156.2075 170.569063,154.489531 172.680781,154.489531 C174.7925,154.489531 176.510469,156.2075 176.510469,158.319219 L176.510469,165.978828 C176.510469,168.090547 174.7925,169.808516 172.680781,169.808516 C170.569063,169.808516 168.851094,168.090547 168.851094,165.978828 L168.851094,158.319219 Z M157.361797,158.319219 C157.361797,156.2075 159.079766,154.489531 161.191484,154.489531 C163.303203,154.489531 165.021172,156.2075 165.021172,158.319219 L165.021172,165.978828 C165.021172,168.090547 163.303203,169.808516 161.191484,169.808516 C159.079766,169.808516 157.361797,168.090547 157.361797,165.978828 L157.361797,158.319219 L157.361797,158.319219 Z M149.702188,160.234062 L153.531875,160.234062 L153.531875,164.06375 L149.702188,164.06375 L149.702188,160.234062 Z M149.702188,167.893672 L153.774219,167.893672 C154.626641,171.193672 157.628984,173.638438 161.191484,173.638438 C163.477578,173.638438 165.531406,172.630391 166.93625,171.037109 C168.341094,172.630625 170.394688,173.638438 172.681016,173.638438 C174.967344,173.638438 177.020938,172.630391 178.425781,171.037109 C179.830625,172.630625 181.884453,173.638438 184.170547,173.638438 C187.733047,173.638438 190.735391,171.193672 191.587813,167.893672 L195.902422,167.893672 C196.754609,171.193672 199.756953,173.638438 203.319453,173.638438 C205.605547,173.638438 207.659375,172.630391 209.064219,171.037109 C210.469063,172.630625 212.522891,173.638438 214.808984,173.638438 C218.371484,173.638438 221.373828,171.193672 222.22625,167.893672 L226.298281,167.893672 L226.298281,185.765938 L222.225781,185.765938 C221.373359,182.465937 218.371016,180.021172 214.808516,180.021172 C212.522422,180.021172 210.468594,181.029219 209.06375,182.6225 C207.658906,181.028984 205.605312,180.021172 203.318984,180.021172 C201.032656,180.021172 198.979062,181.029219 197.574219,182.6225 C196.169375,181.028984 194.115781,180.021172 191.829453,180.021172 C189.543125,180.021172 187.489531,181.029219 186.084687,182.6225 C184.679844,181.028984 182.62625,180.021172 180.339922,180.021172 C176.777422,180.021172 173.775078,182.465937 172.922656,185.765938 L168.608047,185.765938 C167.755859,182.465937 164.753516,180.021172 161.191016,180.021172 C157.628516,180.021172 154.626172,182.465937 153.77375,185.765938 L149.702188,185.765938 L149.702188,167.893672 Z M226.297813,189.595859 L226.297813,193.425547 L222.468125,193.425547 L222.468125,189.595859 L226.297813,189.595859 Z M218.638203,187.680781 L218.638203,195.340391 C218.638203,197.452109 216.920234,199.170078 214.808516,199.170078 C212.696797,199.170078 210.978828,197.452109 210.978828,195.340391 L210.978828,187.680781 C210.978828,185.569063 212.696797,183.851094 214.808516,183.851094 C216.920234,183.851094 218.638203,185.569063 218.638203,187.680781 Z M207.148906,187.680781 L207.148906,195.340391 C207.148906,197.452109 205.430938,199.170078 203.319219,199.170078 C201.2075,199.170078 199.489531,197.452109 199.489531,195.340391 L199.489531,187.680781 C199.489531,185.569063 201.2075,183.851094 203.319219,183.851094 C205.430938,183.851094 207.148906,185.569063 207.148906,187.680781 Z M195.659609,187.680781 L195.659609,195.340391 C195.659609,197.452109 193.941641,199.170078 191.829922,199.170078 C189.718203,199.170078 188.000234,197.452109 188.000234,195.340391 L188.000234,187.680781 C188.000234,185.569063 189.718203,183.851094 191.829922,183.851094 C193.941641,183.851094 195.659609,185.569063 195.659609,187.680781 Z M184.170312,187.680781 L184.170312,195.340391 C184.170312,197.452109 182.452344,199.170078 180.340625,199.170078 C178.228906,199.170078 176.510938,197.452109 176.510938,195.340391 L176.510938,187.680781 C176.510938,185.569063 178.228906,183.851094 180.340625,183.851094 C182.452344,183.851094 184.170312,185.569063 184.170312,187.680781 Z M172.680781,189.595859 L172.680781,193.425547 L168.851094,193.425547 L168.851094,189.595859 L172.680781,189.595859 Z M165.021172,187.680781 L165.021172,195.340391 C165.021172,197.452109 163.303203,199.170078 161.191484,199.170078 C159.079766,199.170078 157.361797,197.452109 157.361797,195.340391 L157.361797,187.680781 C157.361797,185.569063 159.079766,183.851094 161.191484,183.851094 C163.303203,183.851094 165.021172,185.569063 165.021172,187.680781 Z M149.702188,189.595859 L153.531875,189.595859 L153.531875,193.425547 L149.702188,193.425547 L149.702188,189.595859 Z M149.702188,197.255234 L153.774219,197.255234 C154.626641,200.555234 157.628984,203 161.191484,203 C164.753984,203 167.756328,200.555234 168.60875,197.255234 L172.923359,197.255234 C173.775547,200.555234 176.777891,203 180.340391,203 C182.626484,203 184.680312,201.991953 186.085156,200.398672 C187.489766,201.991953 189.543594,203 191.829688,203 C194.115781,203 196.169609,201.991953 197.574453,200.398672 C198.979297,201.992188 201.032891,203 203.319219,203 C205.605547,203 207.659141,201.991953 209.063984,200.398672 C210.468828,201.992188 212.522656,203 214.80875,203 C218.37125,203 221.373594,200.555234 222.226016,197.255234 L226.298047,197.255234 L226.298047,215.1275 L222.225781,215.1275 C221.373359,211.8275 218.371016,209.382734 214.808516,209.382734 C212.522422,209.382734 210.468594,210.390781 209.06375,211.984062 C207.658906,210.390547 205.605312,209.382734 203.318984,209.382734 C201.032656,209.382734 198.979062,210.390781 197.574219,211.984062 C196.169375,210.390547 194.115781,209.382734 191.829453,209.382734 C188.266953,209.382734 185.264609,211.8275 184.412187,215.1275 L180.097578,215.1275 C179.245391,211.8275 176.243047,209.382734 172.680547,209.382734 C170.394453,209.382734 168.340625,210.390781 166.935781,211.984062 C165.530937,210.390547 163.477109,209.382734 161.191016,209.382734 C157.628516,209.382734 154.626172,211.8275 153.77375,215.1275 L149.702188,215.1275 L149.702188,197.255234 Z M226.297813,218.957422 L226.297813,222.787109 L222.468125,222.787109 L222.468125,218.957422 L226.297813,218.957422 Z M218.638203,217.042578 L218.638203,224.702188 C218.638203,226.813906 216.920234,228.531875 214.808516,228.531875 C212.696797,228.531875 210.978828,226.813906 210.978828,224.702188 L210.978828,217.042578 C210.978828,214.930859 212.696797,213.212891 214.808516,213.212891 C216.920234,213.212656 218.638203,214.930859 218.638203,217.042578 Z M207.148906,217.042578 L207.148906,224.702188 C207.148906,226.813906 205.430938,228.531875 203.319219,228.531875 C201.2075,228.531875 199.489531,226.813906 199.489531,224.702188 L199.489531,217.042578 C199.489531,214.930859 201.2075,213.212891 203.319219,213.212891 C205.430938,213.212656 207.148906,214.930859 207.148906,217.042578 Z M195.659609,217.042578 L195.659609,224.702188 C195.659609,226.813906 193.941641,228.531875 191.829922,228.531875 C189.718203,228.531875 188.000234,226.813906 188.000234,224.702188 L188.000234,217.042578 C188.000234,214.930859 189.718203,213.212891 191.829922,213.212891 C193.941641,213.212656 195.659609,214.930859 195.659609,217.042578 Z M184.170312,218.957422 L184.170312,222.787109 L180.340625,222.787109 L180.340625,218.957422 L184.170312,218.957422 Z M176.510703,217.042578 L176.510703,224.702188 C176.510703,226.813906 174.792734,228.531875 172.681016,228.531875 C170.569297,228.531875 168.851328,226.813906 168.851328,224.702188 L168.851328,217.042578 C168.851328,214.930859 170.569297,213.212891 172.681016,213.212891 C174.792734,213.212891 176.510703,214.930859 176.510703,217.042578 Z M165.021172,217.042578 L165.021172,224.702188 C165.021172,226.813906 163.303203,228.531875 161.191484,228.531875 C159.079766,228.531875 157.361797,226.813906 157.361797,224.702188 L157.361797,217.042578 C157.361797,214.930859 159.079766,213.212891 161.191484,213.212891 C163.303203,213.212656 165.021172,214.930859 165.021172,217.042578 Z M149.702188,218.957422 L153.531875,218.957422 L153.531875,222.787109 L149.702188,222.787109 L149.702188,218.957422 Z M142.042578,148.744766 C142.042578,147.688672 142.901563,146.829922 143.957422,146.829922 C145.013516,146.829922 145.872266,147.688906 145.872266,148.744766 L145.872266,238.106563 C145.872266,239.164297 146.729609,240.021406 147.787109,240.021406 C148.844609,240.021406 149.701953,239.164297 149.701953,238.106563 L149.701953,226.617266 L153.773984,226.617266 C154.626406,229.917266 157.62875,232.362031 161.19125,232.362031 C163.477344,232.362031 165.531172,231.353984 166.936016,229.760703 C168.340859,231.354219 170.394453,232.362031 172.680781,232.362031 C176.243281,232.362031 179.245625,229.917266 180.098047,226.617266 L184.412656,226.617266 C185.264844,229.917266 188.267188,232.362031 191.829687,232.362031 C194.115781,232.362031 196.169609,231.353984 197.574453,229.760703 C198.979297,231.354219 201.032891,232.362031 203.319219,232.362031 C205.605547,232.362031 207.659141,231.353984 209.063984,229.760703 C210.468828,231.354219 212.522656,232.362031 214.80875,232.362031 C218.37125,232.362031 221.373594,229.917266 222.226016,226.617266 L226.298047,226.617266 L226.298047,238.106563 C226.298047,239.164297 227.155391,240.021406 228.212891,240.021406 C229.270391,240.021406 230.127734,239.164297 230.127734,238.106563 L230.127734,148.744766 C230.127734,147.688672 230.986719,146.829922 232.042578,146.829922 C233.098672,146.829922 233.957422,147.688906 233.957422,148.744766 L233.957422,243.851094 L142.042578,243.851094 L142.042578,148.744766 Z M244.170312,259.170313 L131.829688,259.170313 L131.829688,253.425547 C131.829688,250.257969 134.406641,247.680781 137.574453,247.680781 L238.425547,247.680781 C241.593359,247.680781 244.170312,250.257969 244.170312,253.425547 L244.170312,259.170313 Z" id="invalid-amount-icon"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/img/wallet/errors/invalid-amount-icon@2x.png b/img/wallet/errors/invalid-amount-icon@2x.png
deleted file mode 100755
index d1daf05e8ff..00000000000
Binary files a/img/wallet/errors/invalid-amount-icon@2x.png and /dev/null differ
diff --git a/img/wallet/errors/invalid-amount-icon@3x.png b/img/wallet/errors/invalid-amount-icon@3x.png
deleted file mode 100755
index 40593f510a0..00000000000
Binary files a/img/wallet/errors/invalid-amount-icon@3x.png and /dev/null differ
diff --git a/img/wallet/errors/missing-payment-id-icon.png b/img/wallet/errors/missing-payment-id-icon.png
deleted file mode 100755
index 54c6b853368..00000000000
Binary files a/img/wallet/errors/missing-payment-id-icon.png and /dev/null differ
diff --git a/img/wallet/errors/missing-payment-id-icon.svg b/img/wallet/errors/missing-payment-id-icon.svg
deleted file mode 100755
index 9db4b1c20b6..00000000000
--- a/img/wallet/errors/missing-payment-id-icon.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
-    <title>AE37566F-F38B-4066-8A01-2481839012A3</title>
-    <desc>Created with sketchtool.</desc>
-    <g id="--#164773655-I-diversi-errori-degli-avvisi-di-pagamento-devono-essere-associati-ad-un-icona-grafica" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="#164773655-MISSING_PAYMENT_ID" transform="translate(-128.000000, -143.000000)" fill="#00C5CA">
-            <path d="M161.929314,211 L165.920998,211 L165.920998,215 L161.929314,215 L161.929314,211 Z M169.912682,211 L173.904366,211 L173.904366,215 L169.912682,215 L169.912682,211 Z M177.89605,211 L181.887734,211 L181.887734,215 L177.89605,215 L177.89605,211 Z M161.929314,219 L165.920998,219 L165.920998,223 L161.929314,223 L161.929314,219 Z M169.912682,219 L173.904366,219 L173.904366,223 L169.912682,223 L169.912682,219 Z M177.89605,219 L181.887734,219 L181.887734,223 L177.89605,223 L177.89605,219 Z M185.879418,219 L189.871102,219 L189.871102,223 L185.879418,223 L185.879418,219 Z M193.862786,219 L197.85447,219 L197.85447,223 L193.862786,223 L193.862786,219 Z M161.929314,227 L165.920998,227 L165.920998,231 L161.929314,231 L161.929314,227 Z M169.912682,227 L173.904366,227 L173.904366,231 L169.912682,231 L169.912682,227 Z M177.89605,227 L181.887734,227 L181.887734,231 L177.89605,231 L177.89605,227 Z M185.879418,227 L189.871102,227 L189.871102,231 L185.879418,231 L185.879418,227 Z M193.862786,227 L197.85447,227 L197.85447,231 L193.862786,231 L193.862786,227 Z M161.929314,235 L165.920998,235 L165.920998,239 L161.929314,239 L161.929314,235 Z M169.912682,235 L173.904366,235 L173.904366,239 L169.912682,239 L169.912682,235 Z M177.89605,235 L181.887734,235 L181.887734,239 L177.89605,239 L177.89605,235 Z M185.879418,235 L189.871102,235 L189.871102,239 L185.879418,239 L185.879418,235 Z M193.862786,235 L197.85447,235 L197.85447,239 L193.862786,239 L193.862786,235 Z M161.929314,243 L165.920998,243 L165.920998,247 L161.929314,247 L161.929314,243 Z M169.912682,243 L173.904366,243 L173.904366,247 L169.912682,247 L169.912682,243 Z M177.89605,243 L181.887734,243 L181.887734,247 L177.89605,247 L177.89605,243 Z M185.879418,243 L189.871102,243 L189.871102,247 L185.879418,247 L185.879418,243 Z M193.862786,243 L197.85447,243 L197.85447,247 L193.862786,247 L193.862786,243 Z M161.929314,251 L165.920998,251 L165.920998,255 L161.929314,255 L161.929314,251 Z M169.912682,251 L173.904366,251 L173.904366,255 L169.912682,255 L169.912682,251 Z M177.89605,251 L181.887734,251 L181.887734,255 L177.89605,255 L177.89605,251 Z M185.879418,251 L189.871102,251 L189.871102,255 L185.879418,255 L185.879418,251 Z M193.862786,251 L197.85447,251 L197.85447,255 L193.862786,255 L193.862786,251 Z M245.754678,149 C246.856874,149 247.75052,149.895508 247.75052,151 L247.75052,159 C247.75052,160.105469 246.856874,161 245.754678,161 L231.783784,161 L231.783784,163 C231.783784,164.105469 230.890138,165 229.787942,165 L225.796258,165 L225.796258,259 L229.348428,259 C227.944127,257.463867 227.445166,255.301758 228.033784,253.302734 C228.621427,251.304688 230.210889,249.759766 232.223298,249.232422 C231.20881,246.725586 231.992334,243.849609 234.138254,242.208008 C236.283199,240.566406 239.259421,240.566406 241.404366,242.208008 C243.550286,243.849609 244.33381,246.725586 243.319322,249.232422 C245.331731,249.759766 246.921193,251.304688 247.508836,253.302734 C248.097453,255.301758 247.598493,257.463867 246.194192,259 L247.75052,259 L247.751504,263 L128,263 L128,259 L129.169439,259 L138.563929,249.586914 C139.343555,248.805664 140.606549,248.805664 141.386175,249.586914 L150.780665,259 L153.945946,259 L153.945946,169 L157.93763,169 L157.93763,177 L183.883576,177 L183.883576,181 L157.93763,181 L157.93763,187 L169.912682,187 L169.912682,185 L173.904366,185 L173.904366,187 L185.879418,187 L185.879418,183 L189.871102,183 L189.871102,187 L201.846154,187 L201.846154,179 L205.837838,179 L205.837838,259 L213.821206,259 L213.821206,165 L209.829522,165 C208.727326,165 207.83368,164.105469 207.83368,163 L207.83368,161 L139.975052,161 L139.975052,197.342773 C141.855899,198 143.284563,199.556641 143.779626,201.490234 C144.275663,203.423828 143.772804,205.478516 142.439644,206.96289 L147.558862,213.800781 L147.533524,213.820312 C147.800546,214.15625 147.949649,214.571289 147.95842,215 L147.95842,223 C147.95842,223.53125 147.747921,224.039062 147.373701,224.414062 L143.382017,228.414062 C143.007796,228.789062 142.500065,229 141.970894,229 L133.987526,229 C133.458355,229 132.950624,228.789062 132.576403,228.414062 L128.584719,224.414062 C128.210499,224.039062 128,223.53125 128,223 L128,215 C128.008771,214.571289 128.157874,214.15625 128.424896,213.820312 L128.399558,213.800781 L133.518776,206.96289 C132.540346,205.875 131.997531,204.463867 131.991684,203 L135.983368,203 C135.983368,204.105469 136.877014,205 137.97921,205 C139.081406,205 139.975052,204.105469 139.975052,203 C139.975052,201.895508 139.081406,201 137.97921,201 C136.877014,201 135.983368,200.105469 135.983368,199 L135.983368,161 L129.995842,161 C128.893646,161 128,160.105469 128,159 L128,151 C128,149.895508 128.893646,149 129.995842,149 L207.83368,149 L207.83368,145 C207.83368,143.895508 208.727326,143 209.829522,143 L229.787942,143 C230.890138,143 231.783784,143.895508 231.783784,145 L231.783784,149 L245.754678,149 Z M138.977131,209 L136.981289,209 L133.987526,213 L141.970894,213 L138.977131,209 Z M143.966736,222.172852 L143.966736,217 L131.991684,217 L131.991684,222.172852 L134.813929,225 L141.144491,225 L143.966736,222.172852 Z M237.172947,153 L231.783784,153 L231.783784,156.600586 L237.172947,153 Z M211.825364,147 L211.825364,155 L219.808732,155 L219.808732,147 L211.825364,147 Z M157.93763,153.400391 L152.548467,157 L163.326793,157 L157.93763,153.400391 Z M145.962578,156.600586 L151.351741,153 L140.573415,153 L145.962578,156.600586 Z M164.523519,153 L169.912682,156.600586 L175.301845,153 L164.523519,153 Z M181.887734,153.400391 L176.498571,157 L187.276897,157 L181.887734,153.400391 Z M188.473623,153 L193.862786,156.600586 L199.251949,153 L188.473623,153 Z M131.991684,153 L131.991684,157 L139.376689,157 L133.389163,153 L131.991684,153 Z M200.448675,157 L207.83368,157 L207.83368,153 L206.436201,153 L200.448675,157 Z M221.804574,252.400391 L221.804574,241.600586 L218.212448,247 L221.804574,252.400391 Z M221.804574,204.400391 L221.804574,193.600586 L218.212448,199 L221.804574,204.400391 Z M217.81289,205.600586 L217.81289,216.400391 L221.405016,211 L217.81289,205.600586 Z M217.81289,192.400391 L221.405016,187 L217.81289,181.600586 L217.81289,192.400391 Z M217.81289,229.600586 L217.81289,240.400391 L221.405016,235 L217.81289,229.600586 Z M221.804574,228.388672 L221.804574,217.600586 L218.212448,223 L221.804574,228.388672 Z M218.212448,175 L221.804574,180.400391 L221.804574,169.600586 L218.212448,175 Z M217.81289,168.400391 L220.071856,165 L217.81289,165 L217.81289,168.400391 Z M201.846154,191 L189.871102,191 L189.871102,211 L201.846154,211 L201.846154,191 Z M185.879418,191 L173.904366,191 L173.904366,203.076172 L179.891892,203.076172 C180.415216,203.078125 180.9171,203.286133 181.289371,203.654297 L185.879418,208.200195 L185.879418,191 Z M169.912682,191 L157.93763,191 L157.93763,194.333985 L169.912682,194.333985 L169.912682,191 Z M139.975052,253.828125 L134.813929,259 L145.136175,259 L139.975052,253.828125 Z M157.93763,259 L201.846154,259 L201.846154,215 L187.87526,215 C187.351936,214.999024 186.850052,214.791016 186.477781,214.422852 L179.071336,207.083985 L171.908524,207.083985 C170.806328,207.083985 169.912682,206.189453 169.912682,205.083985 L169.912682,198.333985 L157.93763,198.333985 L157.93763,259 Z M217.81289,253.600586 L217.81289,259 L221.405016,259 L217.81289,253.600586 Z M241.762994,257 C242.86519,257 243.758836,256.105469 243.758836,255 C243.758836,253.895508 242.86519,253 241.762994,253 C240.660798,253 239.767152,253.895508 239.767152,255 C239.767152,256.105469 240.660798,257 241.762994,257 Z M237.77131,245 C236.669114,245 235.775468,245.895508 235.775468,247 C235.775468,248.105469 236.669114,249 237.77131,249 C238.873506,249 239.767152,248.105469 239.767152,247 C239.767152,245.895508 238.873506,245 237.77131,245 Z M233.779626,253 C232.67743,253 231.783784,253.895508 231.783784,255 C231.783784,256.105469 232.67743,257 233.779626,257 C234.881822,257 235.775468,256.105469 235.775468,255 C235.775468,253.895508 234.881822,253 233.779626,253 Z M227.7921,161 L227.7921,147 L223.800416,147 L223.800416,157 C223.800416,158.105469 222.90677,159 221.804574,159 L211.825364,159 L211.825364,161 L227.7921,161 Z M238.369673,157 L243.758836,157 L243.758836,153.400391 L238.369673,157 Z" id="missing-payment-id-icon"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/img/wallet/errors/missing-payment-id-icon@2x.png b/img/wallet/errors/missing-payment-id-icon@2x.png
deleted file mode 100755
index cc2b7a1662e..00000000000
Binary files a/img/wallet/errors/missing-payment-id-icon@2x.png and /dev/null differ
diff --git a/img/wallet/errors/missing-payment-id-icon@3x.png b/img/wallet/errors/missing-payment-id-icon@3x.png
deleted file mode 100755
index 4d439e33570..00000000000
Binary files a/img/wallet/errors/missing-payment-id-icon@3x.png and /dev/null differ
diff --git a/img/wallet/errors/payment-duplicated-icon.png b/img/wallet/errors/payment-duplicated-icon.png
deleted file mode 100755
index f339cabe4e1..00000000000
Binary files a/img/wallet/errors/payment-duplicated-icon.png and /dev/null differ
diff --git a/img/wallet/errors/payment-duplicated-icon.svg b/img/wallet/errors/payment-duplicated-icon.svg
deleted file mode 100755
index 82727b8ce5c..00000000000
--- a/img/wallet/errors/payment-duplicated-icon.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
-    <title>48E36FE0-0865-477B-B31D-3066D01401D9</title>
-    <desc>Created with sketchtool.</desc>
-    <g id="--#164773655-I-diversi-errori-degli-avvisi-di-pagamento-devono-essere-associati-ad-un-icona-grafica" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="#164773655-PAYMENT_DUPLICATED" transform="translate(-128.000000, -143.000000)" fill="#00C5CA" fill-rule="nonzero">
-            <path d="M206.679064,178.986433 C206.92655,179.748304 206.767018,180.583626 206.256608,181.200702 L199.823626,188.972865 L200.459649,199.041637 C200.510175,199.84117 200.148304,200.61076 199.500117,201.081637 C199.094503,201.376608 198.611696,201.528421 198.124912,201.528421 C197.833918,201.528421 197.541754,201.474386 197.263392,201.363977 L187.883743,197.647719 L178.504094,201.363977 C177.759298,201.658947 176.915556,201.552515 176.267368,201.081637 C175.619181,200.61076 175.25731,199.84117 175.307836,199.041637 L175.94386,188.973099 L169.510877,181.200702 C169.000234,180.583626 168.840702,179.748304 169.088187,178.986433 C169.335673,178.224561 169.955789,177.642339 170.731696,177.443275 L180.504094,174.936608 L185.908304,166.416842 C186.33731,165.740351 187.082573,165.330526 187.883509,165.330526 C188.684444,165.330526 189.429942,165.740351 189.858947,166.416842 L195.26269,174.936608 L205.035556,177.443275 C205.811228,177.642339 206.431579,178.224561 206.679064,178.986433 Z M195.628304,186.703626 L200.300585,181.058713 L193.202339,179.238129 C192.625731,179.090058 192.127018,178.727953 191.808187,178.225263 L187.883509,172.037193 L183.958363,178.225263 C183.639532,178.727953 183.140819,179.090058 182.564211,179.238129 L175.466433,181.058713 L180.138947,186.70386 C180.518596,187.162573 180.709006,187.748538 180.671345,188.342924 L180.209357,195.655906 L187.021754,192.956725 C187.29848,192.847018 187.591111,192.792281 187.883509,192.792281 C188.175906,192.792281 188.468538,192.847018 188.745263,192.956725 L195.557895,195.655906 L195.095906,188.34269 C195.058246,187.748304 195.248655,187.162105 195.628304,186.703626 Z M187.883509,208.188304 C189.175439,208.188304 190.22269,209.235556 190.22269,210.527485 L190.22269,260.427602 C190.22269,261.719532 189.175439,262.766784 187.883509,262.766784 C186.591579,262.766784 185.544327,261.719298 185.544327,260.427602 L185.544327,210.527485 C185.544327,209.235789 186.591579,208.188304 187.883509,208.188304 Z M224.525848,199.574269 C225.375673,200.547135 225.276257,202.024795 224.30386,202.874854 C219.369825,207.186199 211.092865,218.198129 211.092865,243.509942 C211.092865,244.801637 210.045614,245.849123 208.753684,245.849123 C207.461754,245.849123 206.414503,244.801637 206.414503,243.509942 C206.414503,231.826199 208.098012,221.802573 211.418012,213.717661 C213.88117,207.719532 217.180819,202.886082 221.225263,199.352047 C222.197661,198.50152 223.675556,198.60117 224.525848,199.574269 Z M247.453567,186.19883 C247.854035,186.892632 247.871579,187.743158 247.500585,188.452865 L245.255906,192.743626 L246.517895,197.259181 C246.603743,197.50269 246.650292,197.764211 246.650292,198.036959 C246.650292,199.322807 245.612865,200.366316 244.329123,200.37614 C244.19462,200.378947 244.053801,200.366784 243.915789,200.343158 L239.141287,199.534503 L235.108538,202.215439 C234.71883,202.47462 234.267135,202.60655 233.813333,202.60655 C233.490526,202.60655 233.166316,202.539883 232.862222,202.404444 C232.130292,202.078596 231.616374,201.400936 231.499415,200.608421 L230.793216,195.817544 L226.997427,192.81076 C226.369591,192.313216 226.039766,191.529123 226.123509,190.732632 C226.207251,189.935906 226.692865,189.237427 227.410292,188.881637 L231.74807,186.729591 L233.435088,182.190409 C233.713918,181.439532 234.357661,180.883743 235.141287,180.717193 C235.924678,180.549708 236.739181,180.796491 237.299415,181.368889 L240.68655,184.829708 L245.525146,185.031345 C246.32538,185.064561 247.053099,185.505029 247.453567,186.19883 Z M240.500585,193.109942 C240.340117,192.536608 240.404678,191.923743 240.680702,191.395789 L241.64538,189.551813 L239.565614,189.465029 C238.97076,189.440468 238.407719,189.189474 237.991345,188.764211 L236.535439,187.276725 L235.810292,189.227836 C235.603041,189.785965 235.190643,190.243977 234.65731,190.508538 L232.792982,191.43345 L234.424561,192.725848 C234.891228,193.095673 235.199532,193.62924 235.286316,194.21848 L235.589708,196.277427 L237.323041,195.125146 C237.818713,194.795789 238.421754,194.667135 239.008655,194.767018 L241.060819,195.114386 L240.500585,193.109942 Z M154.541988,199.351813 C158.586433,202.886082 161.886082,207.719298 164.349474,213.717427 C167.669474,221.802339 169.352982,231.825965 169.352982,243.509708 C169.352982,244.801404 168.305731,245.848889 167.013801,245.848889 C165.721871,245.848889 164.67462,244.801404 164.67462,243.509708 C164.67462,218.197895 156.397427,207.185965 151.463626,202.87462 C150.490994,202.024795 150.391345,200.546901 151.241404,199.574035 C152.091228,198.600936 153.569123,198.501287 154.541988,199.351813 Z M149.643743,190.732632 C149.727485,191.529123 149.397895,192.313216 148.769825,192.81076 L144.974035,195.817544 L144.267836,200.608421 C144.150877,201.400936 143.636725,202.078596 142.905029,202.404444 C142.600936,202.539883 142.276725,202.60655 141.953918,202.60655 C141.499883,202.60655 141.048655,202.474386 140.658713,202.215439 L136.625965,199.534503 L131.851462,200.343158 C131.062222,200.477895 130.25848,200.197427 129.722339,199.602105 C129.186433,199.006784 128.992281,198.178713 129.207953,197.407251 L130.511345,192.743626 L128.266667,188.452865 C127.895205,187.743158 127.912982,186.892632 128.31345,186.19883 C128.713918,185.505029 129.441637,185.064795 130.241871,185.031345 L135.080468,184.829708 L138.467602,181.368889 C139.02807,180.796491 139.841637,180.549474 140.625731,180.717193 C141.409357,180.883743 142.053099,181.439532 142.332164,182.190409 L144.019181,186.729591 L148.356959,188.881637 C149.074386,189.237427 149.56,189.935906 149.643743,190.732632 Z M141.34269,192.725848 L142.974269,191.433684 L141.109942,190.508772 C140.576608,190.244211 140.164211,189.786199 139.956959,189.22807 L139.231813,187.276959 L137.775906,188.764444 C137.359532,189.189708 136.796491,189.440702 136.201637,189.465263 L134.121871,189.552047 L135.08655,191.396023 C135.362573,191.923743 135.426901,192.536608 135.266667,193.109942 L134.706433,195.114386 L136.758596,194.767018 C136.888421,194.744795 137.019181,194.734035 137.14924,194.734035 C137.607018,194.734035 138.058012,194.868538 138.444211,195.125146 L140.177544,196.277427 L140.480936,194.21848 C140.567719,193.62924 140.876023,193.095673 141.34269,192.725848 Z M160.362339,158.446082 C159.236491,157.812632 158.837193,156.386667 159.470175,155.260351 C160.103626,154.134737 161.529825,153.734971 162.655906,154.368421 C167.430175,157.054035 171.910877,164.037193 172.856842,170.266667 C173.05076,171.54386 172.172632,172.736608 170.895439,172.930526 C170.776374,172.948538 170.658012,172.957193 170.541287,172.957193 C169.404678,172.957193 168.407485,172.127251 168.231579,170.968889 C167.502924,166.170292 163.899415,160.435556 160.362339,158.446082 Z M149.903392,157.035322 C146.033918,157.035322 142.885848,153.887251 142.885848,150.017778 C142.885848,146.148304 146.033918,143.000234 149.903392,143.000234 C153.772865,143.000234 156.92117,146.148304 156.92117,150.017778 C156.92117,153.887251 153.772865,157.035322 149.903392,157.035322 Z M149.903392,147.678596 C148.613567,147.678596 147.564211,148.727953 147.564211,150.017778 C147.564211,151.307602 148.613567,152.356959 149.903392,152.356959 C151.19345,152.356959 152.242807,151.307602 152.242807,150.017778 C152.242807,148.727953 151.19345,147.678596 149.903392,147.678596 Z M204.871579,172.930526 C203.594386,172.736608 202.716023,171.544094 202.909942,170.266901 C203.855906,164.037427 208.336608,157.054035 213.110877,154.368655 C214.237193,153.734971 215.663392,154.134737 216.296608,155.260585 C216.929825,156.386433 216.530526,157.812632 215.404678,158.446082 C211.867836,160.435556 208.264094,166.170292 207.535439,170.968889 C207.359766,172.127251 206.362573,172.957193 205.225731,172.957193 C205.109006,172.957193 204.990643,172.948538 204.871579,172.930526 Z M225.863626,157.035322 C221.994152,157.035322 218.846082,153.887251 218.846082,150.017778 C218.846082,146.148304 221.994152,143.000234 225.863626,143.000234 C229.733099,143.000234 232.88117,146.148304 232.88117,150.017778 C232.88117,153.887251 229.733099,157.035322 225.863626,157.035322 Z M225.863626,147.678596 C224.573801,147.678596 223.524444,148.727953 223.524444,150.017778 C223.524444,151.307602 224.573801,152.356959 225.863626,152.356959 C227.15345,152.356959 228.202807,151.307602 228.202807,150.017778 C228.202807,148.727953 227.15345,147.678596 225.863626,147.678596 Z M147.689123,223.889591 C148.977544,223.889591 150.028304,224.940351 150.028304,226.228772 C150.028304,227.517193 148.977544,228.567953 147.689123,228.567953 C146.400702,228.567953 145.349942,227.517193 145.349942,226.228772 C145.349942,224.940351 146.400702,223.889591 147.689123,223.889591 Z M155.174503,177.456842 C155.174503,176.168421 156.225263,175.117661 157.513684,175.117661 C158.802105,175.117661 159.853099,176.168421 159.853099,177.456842 C159.853099,178.745497 158.802105,179.796023 157.513684,179.796023 C156.225263,179.796023 155.174503,178.745497 155.174503,177.456842 Z M187.689123,157.339883 C186.400702,157.339883 185.349942,156.289357 185.349942,155.000702 C185.349942,153.712281 186.400702,152.66152 187.689123,152.66152 C188.977544,152.66152 190.028304,153.712281 190.028304,155.000702 C190.028304,156.289357 188.977544,157.339883 187.689123,157.339883 Z M220.437661,176.755088 C220.437661,175.466667 221.488421,174.415906 222.776842,174.415906 C224.065263,174.415906 225.116257,175.466667 225.116257,176.755088 C225.116257,178.043509 224.065263,179.094269 222.776842,179.094269 C221.488421,179.094269 220.437661,178.043509 220.437661,176.755088 Z M225.584094,223.889591 C226.872515,223.889591 227.923275,224.940351 227.923275,226.228772 C227.923275,227.517193 226.872515,228.567953 225.584094,228.567953 C224.295439,228.567953 223.244912,227.517193 223.244912,226.228772 C223.244912,224.940351 224.295439,223.889591 225.584094,223.889591 Z M167.013567,247.946667 C168.301988,247.946667 169.352749,248.997661 169.352749,250.285848 C169.352749,251.574503 168.301988,252.625263 167.013567,252.625263 C165.725146,252.625263 164.674386,251.574503 164.674386,250.285848 C164.674386,248.997661 165.725146,247.946667 167.013567,247.946667 Z M208.753684,247.946667 C210.042105,247.946667 211.092865,248.997661 211.092865,250.285848 C211.092865,251.574503 210.042105,252.625263 208.753684,252.625263 C207.465029,252.625263 206.414503,251.574503 206.414503,250.285848 C206.414503,248.997661 207.465029,247.946667 208.753684,247.946667 Z M174.90386,210.293099 C176.192281,210.293099 177.243041,211.34386 177.243041,212.632281 C177.243041,213.920702 176.192281,214.971462 174.90386,214.971462 C173.615439,214.971462 172.564678,213.920702 172.564678,212.632281 C172.564678,211.34386 173.615439,210.293099 174.90386,210.293099 Z M201.044211,209.240468 C202.332632,209.240468 203.383392,210.291228 203.383392,211.579649 C203.383392,212.86807 202.332632,213.91883 201.044211,213.91883 C199.755789,213.91883 198.705029,212.86807 198.705029,211.579649 C198.705029,210.291228 199.755789,209.240468 201.044211,209.240468 Z" id="payment-duplicated-icon"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/img/wallet/errors/payment-duplicated-icon@2x.png b/img/wallet/errors/payment-duplicated-icon@2x.png
deleted file mode 100755
index 2ea734fc91f..00000000000
Binary files a/img/wallet/errors/payment-duplicated-icon@2x.png and /dev/null differ
diff --git a/img/wallet/errors/payment-duplicated-icon@3x.png b/img/wallet/errors/payment-duplicated-icon@3x.png
deleted file mode 100755
index 67ff5cf8bb4..00000000000
Binary files a/img/wallet/errors/payment-duplicated-icon@3x.png and /dev/null differ
diff --git a/img/wallet/errors/payment-ongoing-icon.png b/img/wallet/errors/payment-ongoing-icon.png
deleted file mode 100755
index b9dea78b5e2..00000000000
Binary files a/img/wallet/errors/payment-ongoing-icon.png and /dev/null differ
diff --git a/img/wallet/errors/payment-ongoing-icon.svg b/img/wallet/errors/payment-ongoing-icon.svg
deleted file mode 100755
index 75309723227..00000000000
--- a/img/wallet/errors/payment-ongoing-icon.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 54.1 (76490) - https://sketchapp.com -->
-    <title>B72CED6E-F033-4114-9030-C2BB7AAEB8F9</title>
-    <desc>Created with sketchtool.</desc>
-    <g id="#164773655-I-diversi-errori-degli-avvisi-di-pagamento-devono-essere-associati-ad-un-icona-grafica" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="#164773655-PAYMENT_ONGOING" transform="translate(-128.000000, -143.000000)" fill="#00C5CA" fill-rule="nonzero">
-            <path d="M235.775518,228.653343 C242.386745,228.660151 247.744723,234.007013 247.75057,240.603551 C247.75057,241.70346 246.856924,242.595252 245.754728,242.595252 L244.392332,242.595252 C246.86667,247.768035 245.916501,253.92597 241.996932,258.115545 C238.077364,262.306092 231.987512,263.675387 226.6461,261.566984 C221.304689,259.458582 217.800271,254.302332 217.81294,248.570356 L213.245308,248.570356 C211.383951,253.370667 206.758822,256.535216 201.601597,256.53716 L180.137525,256.53716 C174.9803,256.535216 170.35517,253.370667 168.493814,248.570356 L165.921048,248.570356 C165.921048,256.270693 159.666501,262.512264 151.950154,262.512264 C144.234783,262.512264 137.979261,256.270693 137.979261,248.570356 L129.995893,248.570356 C128.893697,248.570356 128.000051,247.678564 128.000051,246.578654 L128.000051,241.830859 C127.993229,238.827747 128.676376,235.863535 129.995893,233.164819 L129.995893,222.678239 C129.995893,221.57833 130.889539,220.686538 131.991735,220.686538 L141.970945,220.686538 L141.970945,216.21299 L131.098089,213.118462 C129.266942,212.589417 128.004923,210.917671 128.000051,209.015441 C128.005898,208.550581 128.088733,208.088639 128.245633,207.651009 C128.090682,207.373844 128.006872,207.06264 128.000051,206.744629 L128.000051,186.827617 C128.000051,183.527889 130.680989,180.852513 133.987577,180.852513 L153.945996,180.852513 C154.628169,180.859321 155.30352,180.983802 155.941838,181.21915 L155.941838,160.935501 L155.566644,160.935501 C154.810407,160.936473 154.06489,161.112498 153.38759,161.449959 C152.161628,162.064585 150.809952,162.385514 149.437811,162.387459 C148.482769,162.386486 147.533574,162.231857 146.62726,161.929406 L143.336264,160.83436 C142.521555,160.563029 141.970945,159.801554 141.970945,158.9438 L141.970945,146.993592 C141.970945,146.35368 142.279871,145.752669 142.800271,145.378252 C143.319697,145.003836 143.989201,144.901722 144.598283,145.104005 L147.889279,146.199051 C149.112317,146.611396 150.450349,146.51609 151.603221,145.936473 C152.83503,145.323792 154.191579,145.003836 155.566644,145.001891 L159.933522,145.001891 L159.933522,212.719733 L163.925206,212.719733 L163.925206,210.728032 C163.929105,208.67409 164.993294,206.766997 166.739656,205.681676 C164.937746,203.832933 163.92813,201.356922 163.925206,198.777824 L163.925206,152.968696 C163.920334,147.852319 167.800921,143.565493 172.901623,143.051035 C178.003299,142.536577 182.664487,145.963704 183.684822,150.976995 L189.871152,150.976995 L189.871152,154.960397 L184.283185,154.960397 L187.540071,159.830729 C187.949375,160.441466 187.987382,161.227254 187.639474,161.874946 C187.29254,162.52361 186.616215,162.927202 185.879468,162.927202 L183.883626,162.927202 L183.883626,180.852513 L203.842046,180.852513 C207.149609,180.852513 209.829572,183.527889 209.829572,186.827617 L210.196971,186.827617 C211.039942,184.448857 213.289162,182.854912 215.817098,182.844214 L225.796308,182.844214 C226.488226,182.844214 227.131418,183.201126 227.494918,183.788522 C227.859393,184.375918 227.892527,185.109191 227.582626,185.726735 L223.590942,193.69354 C223.291761,194.278019 222.721659,194.676748 222.068723,194.756494 L224.920204,217.276917 C225.332431,219.593437 227.07392,221.450931 229.363096,222.013042 L232.269151,222.738535 C233.15695,222.960267 233.779676,223.756754 233.779676,224.669941 L233.779676,228.653343 L235.775518,228.653343 Z M243.507457,238.611849 C242.592371,235.097197 239.415396,232.642581 235.775518,232.636746 L227.79215,232.636746 C222.284094,232.643553 217.819762,237.098623 217.81294,242.595252 L217.81294,244.586953 L218.810861,244.586953 C219.005768,244.583063 219.1997,244.567503 219.391683,244.541245 L219.842891,244.497482 C222.285069,244.31854 224.62687,243.452034 226.595425,241.998131 C229.535588,239.807065 233.104326,238.620602 236.773439,238.611849 L243.507457,238.611849 Z M233.779676,248.570356 C233.779676,247.470446 232.88603,246.578654 231.783834,246.578654 C230.681638,246.578654 229.787992,247.470446 229.787992,248.570356 C229.787992,249.670265 230.681638,250.562057 231.783834,250.562057 C232.88603,250.562057 233.779676,249.670265 233.779676,248.570356 Z M222.567683,186.827617 L215.817098,186.827617 C215.463343,186.837342 215.118359,186.943346 214.819177,187.13493 C215.435082,187.473364 215.817098,188.118138 215.817098,188.819318 C215.817098,189.520498 215.435082,190.166245 214.819177,190.504679 C215.118359,190.696263 215.463343,190.802267 215.817098,190.811019 L220.571841,190.811019 L222.567683,186.827617 Z M210.193073,190.811019 L208.273244,190.811019 C207.146685,192.073338 205.535784,192.797858 203.842046,192.802721 L183.883626,192.802721 L183.883626,196.786123 L198.187811,196.786123 C201.097764,196.787096 203.820607,198.219604 205.466592,200.613924 C207.112577,203.009217 207.47023,206.05901 206.422608,208.768424 L198.591267,229.084165 C201.757522,229.995408 204.265968,232.410151 205.293125,235.534827 L211.769866,224.226476 L209.829572,202.941141 C209.664876,199.675452 210.866475,196.488535 213.14688,194.141868 C211.769866,193.452358 210.711524,192.259088 210.193073,190.811019 Z M182.885705,236.620148 L184.321192,236.620148 L185.93989,230.161707 C185.943788,230.141284 185.945737,230.137394 185.963278,230.107246 C185.981794,230.078071 185.981794,230.045978 185.981794,230.01583 L193.096854,208.736331 L189.504728,208.736331 C189.740565,209.374297 189.865305,210.048247 189.871152,210.728032 L189.871152,214.711434 C189.871152,221.013302 185.955482,222.678239 183.883626,222.678239 L182.885705,222.678239 C179.028507,222.678239 175.900258,225.799998 175.900258,229.649194 C175.900258,233.499362 179.028507,236.620148 182.885705,236.620148 Z M179.891942,196.786123 L179.891942,192.802721 L176.583405,192.802721 C172.919164,192.803693 169.725622,190.315039 168.837824,186.768294 L167.91689,183.6407 L167.91689,196.786123 L179.891942,196.786123 Z M181.887784,200.769526 L168.258951,200.769525 C169.107769,203.155094 171.367709,204.750011 173.904416,204.752928 L195.858678,204.752928 C196.500895,204.752928 197.103156,205.060242 197.478351,205.579562 C197.853546,206.098882 197.955872,206.766997 197.753169,207.373844 L190.643957,228.653343 L194.487512,228.653343 L202.706716,207.342723 C203.282665,205.855755 203.087759,204.181092 202.184367,202.867231 C201.280001,201.553369 199.785069,200.768553 198.187811,200.769526 L181.887784,200.769526 Z M189.434562,232.636746 L188.436641,236.620148 L201.505118,236.620148 C200.656301,234.23458 198.395386,232.639663 195.858678,232.636746 L189.434562,232.636746 Z M205.837888,186.827617 C205.837888,185.727708 204.944242,184.835916 203.842046,184.835916 L201.846204,184.835916 L201.846204,188.819318 L203.842046,188.819318 C204.944242,188.819318 205.837888,187.927526 205.837888,186.827617 Z M197.85452,188.819318 L197.85452,184.835916 L179.891942,184.835916 C179.009016,184.836888 178.23134,184.258245 177.977961,183.414106 L174.902337,173.130781 C174.609978,171.829562 173.456132,170.90276 172.121023,170.894007 C171.244918,170.89498 170.41754,171.297599 169.878624,171.986136 C169.340682,172.675646 169.149674,173.573273 169.362122,174.421302 L172.689175,185.72479 C173.113096,187.531715 174.723998,188.812511 176.583405,188.819318 L197.85452,188.819318 Z M179.891942,175.87326 L179.891942,170.894007 L178.331716,170.894007 C178.508107,171.272314 178.649414,171.66618 178.754664,172.069772 L179.891942,175.87326 Z M180.227182,156.058361 L180.227182,156.066141 C180.009861,155.738405 179.892917,155.354264 179.891942,154.960397 L167.91689,154.960397 L167.91689,166.910604 L179.891942,166.910604 L179.891942,160.935501 C179.891942,159.835592 180.785588,158.9438 181.887784,158.9438 L182.149934,158.9438 L180.227182,156.058361 Z M173.904416,146.993592 C171.37648,147.00429 169.12726,148.598234 168.284289,150.976995 L179.525518,150.976995 C178.682548,148.598234 176.433328,147.00429 173.904416,146.993592 Z M167.91689,210.728032 L167.91689,212.719733 L185.879468,212.719733 L185.879468,210.728032 C185.879468,209.628123 184.985822,208.736331 183.883626,208.736331 L169.912732,208.736331 C168.810536,208.736331 167.91689,209.628123 167.91689,210.728032 Z M131.991735,204.752928 L155.941838,204.752928 L155.941838,192.802721 L131.991735,192.802721 L131.991735,204.752928 Z M155.566644,156.952098 L155.941838,156.952098 L155.941838,148.985293 L155.566644,148.985293 C154.810407,148.986266 154.06489,149.16229 153.38759,149.499751 C151.288447,150.552008 148.85504,150.725115 146.62726,149.979199 L145.962629,149.758439 L145.962629,157.508374 L147.889279,158.149259 C149.112317,158.559658 150.449375,158.464352 151.603221,157.886681 C152.83503,157.273999 154.191579,156.954043 155.566644,156.952098 Z M133.987577,184.835916 C132.885381,184.835916 131.991735,185.727708 131.991735,186.827617 L131.991735,188.819318 L155.941838,188.819318 L155.941838,186.827617 C155.941838,185.727708 155.048192,184.835916 153.945996,184.835916 L133.987577,184.835916 Z M131.991735,209.015441 C131.991735,209.13895 132.073595,209.248844 132.191514,209.283854 L144.246477,212.719733 L155.941838,212.719733 L155.941838,208.736331 L132.271425,208.736331 C132.117449,208.736331 131.991735,208.861785 131.991735,209.015441 Z M133.987577,224.669941 L133.987577,227.434788 C134.924102,226.442827 135.929819,225.518942 136.997907,224.669941 L133.987577,224.669941 Z M151.950154,258.528862 C157.459185,258.523027 161.923517,254.067957 161.929364,248.570356 L157.93768,248.570356 C157.93768,251.871056 155.257717,254.545459 151.950154,254.545459 C148.643567,254.545459 145.962629,251.871056 145.962629,248.570356 L141.970945,248.570356 C141.977766,254.067957 146.442098,258.523027 151.950154,258.528862 Z M153.945996,248.570356 L149.954312,248.570356 C149.954312,249.670265 150.847958,250.562057 151.950154,250.562057 C153.05235,250.562057 153.945996,249.670265 153.945996,248.570356 Z M201.601597,252.553758 C204.537863,252.555703 207.268502,251.05123 208.831651,248.570356 L172.906495,248.570356 C174.47062,251.05123 177.201259,252.555703 180.137525,252.553758 L201.601597,252.553758 Z M213.821256,242.595252 C213.830027,234.898805 220.080677,228.662096 227.79215,228.653343 L229.787992,228.653343 L229.787992,226.225957 L228.391488,225.876826 C224.539162,224.914041 221.62531,221.76408 220.972374,217.854588 L218.136485,195.474207 C215.268437,196.714158 213.525973,199.656001 213.821256,202.761227 L215.817098,224.490999 C215.854131,224.900426 215.76155,225.310825 215.553975,225.665791 L208.720555,237.592658 C207.81424,239.145758 206.252065,240.205794 204.471594,240.476152 C204.269866,240.55298 204.057418,240.596743 203.842046,240.603551 L182.885705,240.603551 C176.823141,240.603551 171.908574,235.699181 171.908574,229.649194 C171.908574,223.599207 176.823141,218.694837 182.885705,218.694837 L183.883626,218.694837 C184.10582,218.679277 185.185601,218.495472 185.65825,216.703136 L145.962629,216.703136 L145.962629,220.686538 L165.921048,220.686538 L165.921048,224.669941 L144.414097,224.669941 C142.452364,225.622028 131.991735,231.192568 131.991735,241.830859 L131.991735,244.586953 L213.821256,244.586953 L213.821256,242.595252 Z M241.763044,248.570356 C241.76207,246.413328 241.055534,244.315623 239.75161,242.595252 L236.773439,242.595252 C235.781366,242.60984 234.795139,242.738211 233.832301,242.978421 C236.68963,244.01609 238.3132,247.026009 237.608614,249.977578 C236.904027,252.929147 234.093476,254.885838 231.074375,254.526009 C228.055274,254.16618 225.785588,251.604588 225.796308,248.570356 C225.80313,248.0063 225.890838,247.445161 226.056509,246.905418 C225.756353,247.053239 225.463018,247.184528 225.15799,247.304147 C224.90851,247.403343 224.655131,247.488924 224.399804,247.57645 C223.944697,247.725244 223.482769,247.858478 223.014993,247.975179 C222.754793,248.038393 222.497517,248.104523 222.234393,248.158011 C222.088213,248.186214 221.950804,248.231922 221.804624,248.25818 C221.804624,248.370991 221.804624,248.46727 221.804624,248.570356 C221.804624,254.070874 226.272855,258.528862 231.783834,258.528862 C237.295789,258.528862 241.763044,254.070874 241.763044,248.570356 Z M153.945996,228.653343 L165.921048,228.653343 L165.921048,232.636746 L153.945996,232.636746 L153.945996,228.653343 Z M153.945996,236.620148 L165.921048,236.620148 L165.921048,240.603551 L153.945996,240.603551 L153.945996,236.620148 Z" id="payment-ongoing-icon"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/img/wallet/errors/payment-ongoing-icon@2x.png b/img/wallet/errors/payment-ongoing-icon@2x.png
deleted file mode 100755
index e98f8fbb017..00000000000
Binary files a/img/wallet/errors/payment-ongoing-icon@2x.png and /dev/null differ
diff --git a/img/wallet/errors/payment-ongoing-icon@3x.png b/img/wallet/errors/payment-ongoing-icon@3x.png
deleted file mode 100755
index 06764f5a89a..00000000000
Binary files a/img/wallet/errors/payment-ongoing-icon@3x.png and /dev/null differ
diff --git a/img/wallet/initiatives.svg b/img/wallet/initiatives.svg
deleted file mode 100644
index 355d5217c8f..00000000000
--- a/img/wallet/initiatives.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2.75" y="2.75" width="7.25" height="7.25" rx="1.25" stroke="@fillColor" stroke-width="1.5"/>
-<rect x="2.75" y="14" width="7.25" height="7.25" rx="1.25" stroke="@fillColor" stroke-width="1.5"/>
-<rect x="14" y="14" width="7.25" height="7.25" rx="1.25" stroke="@fillColor" stroke-width="1.5"/>
-<rect x="14" y="2.75" width="7.25" height="7.25" rx="1.25" stroke="@fillColor" stroke-width="1.5"/>
-</svg>
diff --git a/img/wallet/logo-pagopa-test.png b/img/wallet/logo-pagopa-test.png
deleted file mode 100644
index 83c44b1361f..00000000000
Binary files a/img/wallet/logo-pagopa-test.png and /dev/null differ
diff --git a/img/wallet/logo-pagopa.png b/img/wallet/logo-pagopa.png
deleted file mode 100644
index d653cf5ffa5..00000000000
Binary files a/img/wallet/logo-pagopa.png and /dev/null differ
diff --git a/img/wallet/payment-methods/paypal/paypal_logo_ext.svg b/img/wallet/payment-methods/paypal/paypal_logo_ext.svg
new file mode 100644
index 00000000000..fff548e5d45
--- /dev/null
+++ b/img/wallet/payment-methods/paypal/paypal_logo_ext.svg
@@ -0,0 +1,9 @@
+<svg width="114" height="32" viewBox="0 0 114 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect y="-0.00488281" width="113.778" height="32" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_18121_7400" transform="scale(0.000625 0.00219298)"/>
+</pattern>
+<image id="image0_18121_7400" width="1600" height="456" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABkAAAAHICAYAAAAWSCacAAAABGdBTUEAALGOfPtRkwAAQABJREFUeAHs3QmYHFd99/tzqqdnpJFGM9otW5JleZMl2/Ima4xNsAkOIWF7yUKAlyXIfkIIJAGyXksmMOM3vLyQhOSGkGA5JHkh9817k9wL2XlIbiAE25jFLGY3lmQMBoMtWZY0M9117u9Ua6SRNEsvVd1Vp74F4xl113LO51RXV53/WYxhQQABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAAQR6IGB7cEwOuYDAstHxK61z5xlrzjHODlvrlhoT9S2wGW/nWiCuKXn+58TijKkbY48ZZ6ZU1vrbL+6wXpvQ7wm9fsRaU3POHNa6x2JjDsXOPnHk3t2PNtblvwgggAACCCCAAAIIIIAAAggggAACCCCAAAJzCRAAmUumy68Pj47dao39IVV+r1Xl90odfkSFs1IV34M2iqrWRqoPZymsgKIYxh2PcRzPhF6KFfiY9P/Uu1P+t1XQQ78arzsz6RQY0WsKiPj3FRRJgijRpDOupvPD73BC2z5mjXvMGft9rfOIdvbdODb7nvzkngf1PgsCCCCAAAIIIIAAAggggAACCCCAAAIIIFBKAQIgPSz2xdvfvHRgcf9vqTL7x1QQq9Xaf5WxFaXIhzp8hblPXPIf/wdLkAKzfARPeemUf8wQmH5dZ08c++DJpLF20jjnAyr+59jx4MmUzqCH9e+v61z6mk6nLxy8Z8+/6d8sCCCAAAIIIIAAAggggAACCCCAAAIIIIBA0ALTtahBZzKPmRseHX+D8N+goMd6YyM14PeBDoIdeSyrYqRpxkc5+XPGv13sTy+NoKUeI36oLadeJepJorPt0/q5Xz1M7pt07p+P3LvnsWLklVQigAACCCCAAAIIIIAAAggggAACCCCAAAILC8yoJV14ZdboXCCZ38OYO6JK9TnJkEiqnGZBoHsCMz7yir4p+KZDa/A1/R3XJv0wW/dqvpm71a/kc4qaHNAYW48cvuE5XzfvvObU8bu6l2COhAACCCCAAAIIIIAAAggggAACCCCAAAIItCUwoza0re3ZqAWB4Z1j16me+Y9spX+7SUYtamFjVkUgcwEfEPHBED/fjDolxVN+gvb71Uvks/rth9B6UOG6zz15zx79zYIAAggggAACCCCAAAIIIIAAAggggAACCORbgABIl8rH9/xQW/s/sVHlmtMnw+5SEjgMAi0KNAIiSS+RWCNnqUeIduCDH9/yw2fFzn2IYEiLpKyOAAIIIIAAAggggAACCCCAAAIIIIAAAl0TIADSJeqR0fG/1TBDL2Sejy6Bc5j0BfyQWeoZ4hcFQx7Xf/zk6vs0XNYHD969573JG/wHAQQQQAABBBBAAAEEEEAAAQQQQAABBBDIiQABkC4UxMjo2LjGFXqTBhdaRACkC+AcogsCunT4gIjmsNGwWE9qIvXDOuhHas6NH75nz1e6kAAOgQACCCCAAAIIIIAAAggggAACCCCAAAIIzCtAAGRens7f1LwfN6nnx7tsFF3mK4tZEAhPwAdDfK4al5M4jr+oyMi7XBx9+NC9tz0UXn7JEQIIIIAAAggggAACCCCAAAIIIIAAAggUQaBShEQWOY2LNzzrdbbS90Lm/ShyKZL25gQ0M4ifPj2K1tio+jxr6i8eWP/M9YvOuWnJxLf+7UvN7YO1EEAAAQQQQAABBBBAAAEEEEAAAQQQQACBdAToAZKO46x7WbZz7HL1/vhAFEXb6P0xKxEvhizgh8iyfYr9TT2mbP6/Co989ODdu/885CyTNwQQQAABBBBAAAEEEEAAAQQQQAABBBDIjwA9QDIsi8Xrf/hZUSV6DcGPDJHZdb4FNOybjeygtZWrNGn66KL1z7xh4JybpugRku9iI3UIIIAAAggggAACCCCAAAIIIIAAAgiEIBCFkIm85sFZc/P0vAh5TSPpQiBzAae+H67uAyHr1CnkheoV9ccjo+N/m/lxOQACCCCAAAIIIIAAAggggAACCCCAAAIIlFqAAEiGxa8BgH7UGCY+z5CYXRdJwAdCtCgQssoHQhQEOTy8c/xXipQF0ooAAggggAACCCCAAAIIIIAAAggggAACxRFgDpCMymrw2vG1i/r7v+Pqkxkdgd0iUHQBXX6iionrtS9ZZ+449Pjk/46/+lY+MEUvVtKPAAIIIIAAAggggAACCCCAAAIIIIBATgToAZJRQfRb8yx3vMV7RodgtwgUXEA9QuKaiaLKJcaaPx5a0f8ny3aO7Sh4pkg+AggggAACCCCAAAIIIIAAAggggAACCOREgABIVgVhzdOY/DwrXPYblICfH8TaJQqEvDKy9j3DO8deHVT+yAwCCCCAAAIIIIAAAggggAACCCCAAAII9ESAAEh27Fdr5ufs9s6eEQhKYHqi9MpVCob8t+HR8d8PKntkBgEEEEAAAQQQQAABBBBAAAEEEEAAAQS6LsAcIBmRLx8df0LN2ocJgmQEzG7DFdAM6S52sTL4D3Hd/PyhT+5+ONzMkjMEEEAAAQQQQAABBBBAAAEEEEAAAQQQyEqAHiAZyTprBjLaNbtFIGwBzZ2jGIhGxOp7ruZI/3cNifW8sDNM7hBAAAEEEEAAAQQQQAABBBBAAAEEEEAgCwECIBmoqsL25gx2yy4RKJWA0wTpNqpsNpF9P/OClKroySwCCCCAAAIIIIAAAggggAACCCCAAAKpCBAASYXxtJ1Ye6mm/6gw/NVpLvwTgVYFNEF6ZKMhzQvyB8M7x3e3ujnrI4AAAggggAACCCCAAAIIIIAAAggggEB5BQiAZFD2mlhlm4bw6ctg1+wSgfIJaDoQG9lBfaZ+Y2R07G3lAyDHCCCAAAIIIIAAAggggAACCCCAAAIIINCOAAGQdtQW3uZS42cxYEEAgXQE/LwgkV2ij9UvEQRJh5S9IIAAAggggAACCCCAAAIIIIAAAgggELoAAZAMSlgToA8T/8gAll2WW8AHQYxdZG3068OjY28pNwa5RwABBBBAAAEEEEAAAQQQQAABBBBAAIGFBDRPBUuaAkM7x7ZF1r5S/T9G0twv+0IAgWkBhUEqfc8YOOfGyYmH//U/pl/lNwIIIIAAAggggAACCCCAAAIIIIAAAgggMFOAHiAzNVL4W6AXawL0fv2wIIBAJgL6cMV+cnT739QT5NZMDsFOEUAAAQQQQAABBBBAAAEEEEAAAQQQQKDwAgRA0i5Cay/WEFhL094t+0MAgZkCCoJolh31BRkb2Tn+spnv8DcCCCCAAAIIIIAAAggggAACCCCAAAIIIOAFCICkfx5cbJ1ZYugCkr4se0RgpoCfE8Tatca6Xx3eOfb0mW/xNwIIIIAAAggggAACCCCAAAIIIIAAAgggQAAk/XNgjY0iXNN3ZY8IzCKgIEgUbVcg5I3Vy8cHZ1mBlxBAAAEEEEAAAQQQQAABBBBAAAEEEECgpAJU1KdY8EM7xpdb46iETdGUXSGwoIDvCRJVXjg4aO5YcF1WQAABBBBAAAEEEEAAAQQQQAABBBBAAIHSCBAASbGobeQu0KwEQynukl0hgEAzAi72U4LcynwgzWCxDgIIIIAAAggggAACCCCAAAIIIIAAAuUQIACSYjlbazarFnYl83+kiMquEGhKIBkKa4k+f29uanVWQgABBBBAAAEEEEAAAQQQQAABBBBAAIHgBQiApFnEzm7Q3OermP88TVT2hUCTAr4XSKV64fDo+Hua3ILVEEAAAQQQQAABBBBAAAEEEEAAAQQQQCBgAQIgKRauJmI+S3MRLKEHSIqo7AqBVgTimkahMy8d3jl2UyubsS4CCCCAAAIIIIAAAggggAACCCCAAAIIhCdAACTVMnUjqe6OnSGAQIsCzkQ2GlIw8l0tbsjqCCCAAAIIIIAAAggggAACCCCAAAIIIBCYAAGQlAp02Y7x9dqV5v9gQQCBngo453uBXDgyesc7epoODo4AAggggAACCCCAAAIIIIAAAggggAACPRUgAJIWf+TWaVf6UeUrCwII9FBAE6LbaJEz7kc1FNbTe5gQDo0AAggggAACCCCAAAIIIIAAAggggAACPRQgAJISfmQ1+bkx5xAASQmU3SDQiYAmRNdncqsiIS/qZDdsiwACCCCAAAIIIIAAAggggAACCCCAAALFFSAAklLZqc35amvNeuOH32FBAIHeC9hIU4GY/8KE6L0vClKAAAIIIIAAAggggAACCCCAAAIIIIBALwQIgKSm7oZt1Jfa3tgRAgh0KKBeINZWztV8IDd2uCc2RwABBBBAAAEEEEAAAQQQQAABBBBAAIECChAASanQbDL8VUo7YzcIIJCOgB8Ky9hfWrZjfH06O2QvCCCAAAIIIIAAAggggAACCCCAAAIIIFAUAQIgKZRUdNHt/cbYCxzDX6WgyS4QSFNAQ9JVqsO24m5Nc6/sCwEEEEAAAQQQQAABBBBAAAEEEEAAAQTyL0AAJIUyWjRSXabdXMAE6ClgsgsE0hZwNY2CZQmApO3K/hBAAAEEEEAAAQQQQAABBBBAAAEEEMi5AAGQFAqoz9lF2s2FTICeAia7QCBtAfXM0nzo64ZHx16c9q7ZHwIIIIAAAggggAACCCCAAAIIIIAAAgjkV4AASApl4yJNgF6pDtIDJAVMdoFARgLqBfKGjHbNbhFAAAEEEEAAAQQQQAABBBBAAAEEEEAghwIEQFIoFCFenMJu2AUCCGQloKlAtJw/vHPspqwOwX4RQAABBBBAAAEEEEAAAQQQQAABBBBAIF8CBEDSKA9rtlvTqGFNY3fsAwEE0hZIPp/D1tqXpb1n9ocAAggggAACCCCAAAIIIIAAAggggAAC+RQgAJJCuWhonW1O8wywIIBAfgVsFFWVuu2Lt795aX5TScoQQAABBBBAAAEEEEAAAQQQQAABBBBAIC0BAiDpSF7O/B/pQLIXBLITSIKUZw0sqr4gu2OwZwQQQAABBBBAAAEEEEAAAQQQQAABBBDIiwABkHRK4nxDD5B0JNkLAlkJ6DOqIbDWG2ueltUh2C8CCCCAAAIIIIAAAggggAACCCCAAAII5EeAAEiHZRFddHu/jawcGQKrQ0o2RyB7Af9RNWbjkmvH1mV/MI6AAAIIIIAAAggggAACCCCAAAIIIIAAAr0UIADSof7Q8uqziX10iMjmCHRNIPZH2tpnzTVdOyQHQgABBBBAAAEEEEAAAQQQQAABBBBAAIGeCPT15KhBHdRuDyo7ZAaBkAUaw2BtVn+tC0LOJnlDAAEEEEAAAQQQQAABBBBAAAEEEEAAAWPoAdLhWWCtuVpzCrAggEBBBGxU8Sk9ryDJJZkIIIAAAggggAACCCCAAAIIIIAAAggg0KYAAZA24WZstm3G3/yJAAI5F3AuVszSblm2Y3x9zpNK8hBAAAEEEEAAAQQQQAABBBBAAAEEEECgAwECIB3gHd90aee7YA8IINA1AQ2DZYy70lTM6q4dkwMhgAACCCCAAAIIIIAAAggggAACCCCAQNcFCIB0QL5sdPxKbV5lEvQOENkUga4LOGMr/asi487q+qE5IAIIIIAAAggggAACCCCAAAIIIIAAAgh0TYAASAfUmvrjMv1UO9gFmyKAQA8ErIkVt7RX9ODQHBIBBBBAAAEEEEAAAQQQQAABBBBAAAEEuiRAAKQDaGvcVmfNQAe7YFMEEOiBgNMwWApebu3BoTkkAggggAACCCCAAAIIIIAAAggggAACCHRJgABIR9D2YlWiLtJ8Ah3thY0RQKDbAvrMWret20fleAgggAACCCCAAAIIIIAAAggggAACCCDQPQECIB1Zu9XGQtgRIRsj0AsBPxG6s5f24tAcEwEEEEAAAQQQQAABBBBAAAEEEEAAAQS6I9DXncOEd5TBa8fXKleLw8sZOUKgDALORH39zN9ThqImjwgggAACCCCAAAIIIIAAAggggAACpRWg+0KbRV+1zs8fMNTm5myGAAI9FvCdQJZde8emHieDwyOAAAIIIIAAAggggAACCCCAAAIIIIBARgIEQNqFteYCbbrU+FpUFgQQKKCAeoFE8SUFTDhJRgABBBBAAAEEEEAAAQQQQAABBBBAAIEmBAiANIE02yqa/Px8Y83y2d7jNQQQyL+ANU7/SwKZ+U8sKUQAAQQQQAABBBBAAAEEEEAAAQQQQACBlgUIgLRMNr2BXWVttEgzKU+/wG8EECiYgDXRuQVLMslFAAEEEEAAAQQQQAABBBBAAAEEEEAAgSYFCIA0CXXmak7zf6gfCAsCCBRSwGn4Ov1vVSETT6IRQAABBBBAAAEEEEAAAQQQQAABBBBAYEEBAiALEp25wtKdYxcr+LGa3h9n2vAKAkUSUAhzZZHSS1oRQAABBBBAAAEEEEAAAQQQQAABBBBAoHkBAiDNW51Ys2LM2Wo5TsXpCRH+QKCIAn74Osc8PkUsOtKMAAIIIIAAAggggAACCCCAAAIIIIBAEwJ9TazDKqcJWGPP1ktnGw2hw4IAAsUVcMaOFDf1pBwBBBBAAAEEEEAAAQQQQAABBBBAAAEE5hOgB8h8OnO856xZY63V3AEEQOYg4mUECiGgIbAWFyKhJBIBBBBAAAEEEEAAAQQQQAABBBBAAAEEWhYgANIymd/AjZhIA2GxIIBAgQUUwLSGD3KBS5CkI4AAAggggAACCCCAAAIIIIAAAgggMJ8AAZD5dGZ5L7ro9n7Vmq5l+KtZcHgJAQQQQAABBBBAAAEEEEAAAQQQQAABBBBAAIGcCBAAabEglg73r9EmG1vcjNURQCCPAs7U85gs0oQAAggggAACCCCAAAIIIIAAAggggAACnQsQAGnR0EVuWMPmnMf8Hy3CsToCuRPQDCDGPJW7ZJEgBBBAAAEEEEAAAQQQQAABBBBAAAEEEEhFoC+VvZRoJ4oYLbPOnE8ApESFTlYDFnCHAs4cWUMAAQQQQAABBBBAAAEEEEAAAQQQQKDUAvQAabH4rTUjtlKtEgBpEY7VEcidgO8BYh/PXbJIEAIIIIAAAggggAACCCCAAAIIIIAAAgikIkAApHXGTda41rdiCwQQyJ2APsnfz12iSBACCCCAAAIIIIAAAggggAACCCCAAAIIpCJAAKRlRnupcwRAWmZjAwRyJmDVnUv/eyxnySI5CCCAAAIIIIAAAggggAACCCCAAAIIIJCSAHOAtA55CcNftY7GFgjkUcAZ9608pos0IVAUgaEd48s1mNwSYy33Ez0otLqJJ9QkY2rqmD0y9bndR3qQBA6JAAIIIIAAAmkIvPdR3U9NrjC1eiWN3bGPFgUW9U2Z2B0zcW3K3HIe80S2yMfqCCCAQN4FqLBovYQuIwDSOhpbIJA3Aaf+H8a5fXlLF+lBIO8Cw6Pjr1Aan6ZP0Cr9HtBcOvph6YWAerHVVA71/kFTM6PjdV3U6rq21fWagiH2CfVY/Y7+/raCvQ/WnHnoqXv3fLsX6eSYCCCAAAIIIDCLwN59z9GrN+lnkzHH+vXdvcj0W0bpmIUq85fqcaxj1I2NYrN3/6S/p1J5TOm3fswT+vt7+vth/X3AOPuwuWXjVzNPEwdAAIHyCdy1/xLVU92gjJ+tnzwHxP018lFVq/2LefXGB4tQUHouZmlFYMX1b3MurrWyCesigEAeBaKqqdUmL33ynj1fzGPySBMCeRMYHh17sW4afl43OhdpBLl1xs68H2NoyN6U1xy3cS7WfbOb0rtHVDJPOmsOW2cmlMZj+tEDvP2Kbmb+sz7lPnL407cf7E3aOSoCCCCAAAIlFbhz/0XGunfq+/hSCZxj+vqqjWlGuZ/q7Rkx475q+k8//Hm97oMguo9yT+q3b2RyWL8VJDH+3w/o9fsUFPkEQRFpsCCAQPsCe/f/oa4nN+oas1I7WaK/FRDXU1zuFj1dJov1IxDs18/fmF0b72i8lt//Tl/W85vCHKVsybVj6/qrA4+Y2H/XsSCAQKEFon7z+Md/jWtgoQuRxHdLYGR0bFw3Xz9no0i9PnQPxlxY3aLv8Di6xCVXuRmXOh8cUSDEB0T8bx3gkH7/p8r0gwfv2fM3HR6QzRFAAAEEEEBgPoG9+16pL+fb9P18oXob6J5KHQ+4r5pPLAfvzbifUiugZPG/facRNTjRf46qTH0lka8M/IJ+PqTKwPck6/EfBBBAYCGB9zy0yVSjP9VqTzdRpZJ8LzSi4gtt2eP3/bXRXwvrGjbQvj3vQRCllKVZgZGd4y+zfdX/aWLfAIAFAQSKLGAr/eYH/0EApMhlSNq7I6Dgx9ustb+e3NzwgN4d9K4cxd+wTh/oxB96lq9/Tq0Y/7ce5j8y5eyDR+7d/ej0WvxGAAEEEEAAgQ4E9u67VV++Y6ZSWWvqjCrRgWR+Np0OiPibquR26uQ9lSoFNfSo/WvdU/2DGnJ/wdyy4UB+Ek5KEEAgFwLve/gcXSv+1FT6bza+s1kRn7crml2jXr9fnq9TEOQ/cuE6SyKUSpamBay90ioKp5aSLJkK+JsGKcd+lgYNK8cSlIA7fRjDaPomcfp3Nz5hVvPbTXbjQEGVHZkpn0Ay34c1v0TwI8Sy1yXwxFXwxB8miiqXWxtdriG0xvrj+uf7R8f+Qe9+xsXRPYfuve2hECXIEwIIIIAAApkL7N2vMd3dL2u4q7VG82yzBCJworJy5n2Vz5uebaNonYn6XqeA1+vMxLGHNbfIB3UO3Ks3Pmt2bfCVhSwIIFB2gXr9Fj1rFzf44csvTupt/ZCOV+qHAIg3Kf7irtKY2cXPRi5z0Ah6WM2vYn1rmOS3PkT6IEUG81wWWYuJilWSyRKdnDfAqXdf47WTsdhYARJbaQRDkmBJdHy7ZMWTlXSNDdv8b2P3fqxCFgQQmEdAH5U3WltZlMwDOc96vBWQQDJ/SON7V0OeXaZgyGVxvfaUidxH1Rvo03rO/4iGyvq3gHJMVhBAAAEEEOiGwKtMdWCrmfJTcrGEL6DnVjXoTIZP9519omi9giGvNbVJzafn7lEw5D69+lG1llavWxYEECilwJ0HNugicY3xPSiKHBj3geDqQMVMTgzkuRxP1jrmOZX5SduWGc0l85OqAFISTR011t8M+oCHU+BjuiXFiS6lAWSy5FmIpnvz1GeUr78ZnF58WevHnhYomRkkcfpicJG/bDUiGO1/HrW9ix+aPjS/EUDgTIFk2MdK33YfkGYpqcDxYIiGQFuiQMhzXFx/li6/LxoZHX9APUTepUDIx0oqQ7YRQAABBBBoXmDvge160H2JKr+b34Y1wxLw84X4uWR1U6Ux/kc15uio6jyeb+7SsGjOvM/sOvcDYWWY3CCAwIIC1q3ROpck8wktuHKOV/B1eVMTE7q+Hc5xKg0BkBZKR/PcL9WkoSxpCfjKbo1xFx1Tw1I/r4q/KfAfHL9M/278i/+GJjBX+SrwdUagxNe9+vX1M7MXiQ+MuKoapvuAiH8/+Ww2+wH155n9emis5AeBNAX0nfebll6PaZIWeF+6tqpxgi61VQVCLlEA+RJdQ3cqEPJZfXPffuju3Z8pcOZIOgIIIIAAAhkLuJeb/kWDZvJYxsdh97kX8A09p+d/iaKNGvpgo8bOv1I9Ql6vtP8OPUJyX4IkEIE0BVZqZ+c3Jj1Pc7dd3lejPk5zHrlczx05c2yZLgsV63DDO8euU/ADrzSLbXLS9B15wkR1tYTwNwL+Q8OCwEwBf05Mnxc+OKIKuORH50xl8mhy/lQPP2YqT+k8Ui+ipJvxid4hM3d06t++4Y3OuG+c+ir/QgCBaYFlO8cu16fvohO98abf4DcCx4NiNrLrdS19rm6MPqa5Yj6wbMf4enAQQAABBBBAYDYBd6uZovfHbDKlfs03APXBEGtX6WdUFn9p9u77mIIhV5fahcwjUB6BYQXHG/Whhc5zUlX+HV3M9uc5G1ToN1s61lyjetWTkxc0ux3rzSoQTR0z1WNPBPBBnzV7vNgtAR8484GR2oSpHD1kqoe/ZyqHv2+iicPGzyfTCIicmRiXBEncg2e+wysIIOAFImt/TnFCda/SZ4wFgdkE/PVX54cfHqtS6XuJOuN9bXjn+O6lO8cunm11XkMAAQQQQKCUAn7y80rfssK38C1l4XUp075xif/x9U2VvhtM/8B9CoT8CYGQLvlzGAR6JuDU+yOA5+2k0bJ7TA+GD/WMsokDEwBpAqmxit2m5/x+KoOaBptjRQ17pYrpiiqoWRBITcBfcI//+B4ilYkjpu+px03l2KHTgiHTvYx84MR8N7XjsyMEAhNwxt3ga7YDyxbZyURAZ4u+1/Xtvijqq471Wftn6jX7avOm+2g0kok3O0UAAQQQKJaA+8kgKriKhV7M1PqKUN8jZFJzo/b136pM/I2CILeZ9zy0qZgZItUIILCAwJYgguNJtYE9ZF694fsL5LenbxMAaZJfA+ZsUV0QXk16zb2aWusfOdSY72PulXgHgc4Ejtfb+uHVkmCIhlpLgiHHh8ly9dpTur0kCteZMlsHKjC0Y2yzvu+GA80e2cpMQFdVzedlo2inft4x/PF/2uuHUsvscOwYAQQQQACBQgjYG2lEWYiCylEidU9V05Bpfo4Q4/aYfqveIPuek6MEkhQEEEhFwF4cRIC8pjmdjdEQP/leqNBvunzsiqSFedPrs+IZAqqU9kMTRX5oIhoWn8HDCxkJ+HNtepgsnX+VI48bN7jYn4M6EVkQQOB0gahidqiH1BL9sCDQuoCGcNBld7muvC/XUGr/U71Bbm59J2yBAAIIIIBAMAJncU8VTFl2NyNx3T+zDigSonspHwTZ/4buJoCjIYBAtgJuq/Gf8yIvjbrdg6p0O5D3bBAAaaKEjk/sqZlpWDoSqKtSxE/+RvCjI0Y2blNgOhDiA3DDg0uefNVLNMHcvre3uTc2QyBYAVVcX6bMKUrIgkCbAgo665Kr+Ie9TJOlf3B4dMwP48CCAAIIIIBAuQT27tfE1q5arkyT21QF/LBYfn6QKFqvP35bQZA7U90/O0MAgd4JDCzW/FAFb3V4IgBiv9E7yOaOTACkCScbuSu1miqDCn5iNpHX7FZRTcjUU8bPz8CCQC8FXD0ytTWr9SjSt0Rjq/6qbiIP6+cd5q79m3uZLo6NQH4E7DZVXC/hOy8/JVLclCSTpC+KbPQnI6PjdzIvSHFLkpQjgAACCLQlsEOt/5hHtC06NjpFYLo3SBTtUiO+j5k79190yvv8AwEEiiWwd//VxUrwXKlV80ljHtfPA3OtkZfXCYA0UxLWXqCmjAwH0ozVnOuoEqSu4EfRo5tz5o83CiFw/Pyrr1yp5OpC7cdW9Z/tav+bFN/8e91M/oa588DaQuSFRCKQncCwJnLIbu/suVwCx6+7ahy0S/OCfGho59i2cgGQWwQQQACBEgtsVd4HaEdZ4jMgzaz7e6pYvUEq1Rv0KPtXzAuSJi77QqDrAhp2OoBG9o0eIEfNro1f7LpgiwekhqM5MD8xzVJawzaHNdta1g871Gi1MNvbvIZA1wTcQNXUh4bUjTiJVOtjrZvIqQnfrXiLfn7b2PhO3Uz+l64liAMhkCOB40M+DvJ9l6NCCSIp/uY+GRPrORVr/pDJ0YMoVDKBAAIIILCQgHXn6+tPQ2AFUMm1UF55v0sCOpfqmnC4r7pd91a/w3Nrl9g5DAKpC7irkoBm6vvt8g4bQZwjXT5qW4cjANIEm6pJ19ooYuzOJqxmX8Wq90fNREYVzSwI9FIgdqY+MmJcv++JftqDiA/Q+dcqfc9t3ExqWKx3P8LcP70sL47ddQEN+XihPgUK+LMgkLaAv+b6IbGiZ2hykD9detVbh9M+AvtDAAEEEEAgVwLOjpiokqskkZhABPxIBn19W/Tc+nsKgjwzkFyRDQRKJGCvSBrjFjrHqi2Pk4q03E+A7pkJgDRxsumRXa1hj7cWb2J9VjldQIJJDxACIKfL8O8uC6jXRzw4aOLqHPFMHwBRsE69QzYpZb9oBmr/D+OrdrmMOFxvBazdoG+7FbRU7G0xhH10BUGi6Kq+/uhfw84nuUMAAQQQKLVAY37B/jMaXZUahcynKlBTT5BK30bVVe01ew+oRwgLAggUSOCiwvcAaVSTH1Ubty8UwZ0AyAKl5IdpUJmqlaJvucjSloBa3bMgkAcBPwF6PDLsXGWBllh+bFXfXT2yz9bvj2qS9B/JQ/pJAwLZC2ioBmNW8bCevXSpj6ChB30QZGR07P8rtQOZRwABBBAIV8C5i1WHwDDa4ZZwPnLmh8OqVDapxelfEwTJR5GQCgSaE3ABDI/oIyBuUnVmuZ//w5cJAZAFzkwV5wVahdawCzjN97Y19cYE6I3JceZblfcQyFygvmqVdYsGdJ1eIDDn3/eBkChaq5Y1/6wgyGvMm+5bIHKSefI5AAIZC9i1UaVvji5SGR+a3ZdLwAdBrH3GyOj431YvH1dPWxYEEEAAAQRCErC+HmE57ShDKtOc5sWPYFCpqhGTu0vPrNtymkqShQAC0wKNBrah1C1NGBd9ejpref5NAGSh0rHmHAVB1nDjshDUAu/7YeFYEOilgAIa8eAiE/sJ0BfqATIznf7c9UO4Gfdus3X1O817Hto0823+RiAkAX3fLXELBQdDyjB56bGAzjhjfmTJoLudAHOPi4LDI4AAAgikLOB71dqhBRtdpXxUdldSAd8TxNqr9Mx6h3nfw+eUVIFsI1AMAecu1we2+PXxyaOcnTK3bHi0CPDFB89YWeW5Vl8kDIHVoXPkCIB0SMjmKQj44EfdB0BareD161tNIGLsa03V/hZBkBQKg13kTmBox9hmnekrc5cwEhSwQDIfiJ9nbdfwx//pZQFnlKwhgAACCJROwK5WL/IAhjgpXcEVOMN+hAP7XFOPf6HAmSDpCIQvYM2lqpTqa7leKm8y/pJjzCN5S9Zc6SEAMpfMidftchuF0jPpRKa6+of1XTJbrXDuago5WFkE4hUrTH3JkvbORw3XomCoHmLsSxUEebt577eWl8WNfJZDIIrMWkX5ztYHpBwZJpf5EGjMB7JKY8f+5rJr79iUj0SRCgQQQAABBDoQSIbNdXroYEGgiwK+ziWyqrxyv6ShsG7o4pE5FAIItCRgtzYa2La0UU5Xdp/PacLOSBYBkDNITr4wtGN8ub5CljMcyEmTtv5Khg9qa0s2QiA9gVhDYC0acPESNTZuNyCXBEE0Obq1P2Wi2u+mlzj2hEAuBNYpFWe1/fnIRRZIRCEFdG3V8/qWKIr/eyHTT6IRQAABBBCYKbBtzUVqNMUoEjNN+Ls7An4Oy0qfn1vtL7pzQI6CAAJtCAypTqmNzfK2iW84aQsx/4eXIwAy3/kTubOtcRtpDTsfEu8hUAABBTxi9UD3E6DrhrCzBPvgib/ODyx5pdm77/c62xlbI5AjAWtWqsfjWr7zclQmZUqKhsqM+gZ+enjn2PPKlG3yigACCCAQoIBzm5QrGpUEWLSFyJIfgSOKNulZ9X2FSC+JRKBMAnv3b1N2FxX/mXs6gGM/UZTiIwAyT0kJZ42icuuLf2LOk8ms31Kre1vX/B9BRDezxmL/WQq4gcHGBOi+F0fHiyIgE0d0XkfqXrzvzR3vjh0gkAsBu8pyrc5FSZQ1ES6e0u2C/cPBa8cViGNBAAEEEECgqAL2LKV8nUnluaOoBqS7pwLJiAf2hRoK66d6mg4OjgACpwts1QuLgxl1eteG+0/PYF7/TQBk/pJZrpNyA8OBzI+00LuRKjRYEOipgB/+anjI1FZqfud2h786IwO+G4hf7Bt0Y/maxt/8F4FCC6ybPqsLnQsSX1wBXZ8Vg1vfH5k7ipsJUo4AAggggIBbqxb4w+k9dyCKQIsCPvhm/TBs5rXmzgM0LGmRj9URyFBAQyS6xYVvaO8bTjp3KEOn1HdNAGQ+Uj8cSKUPo/mMFnjPGvX+8ONQsiDQY4F42TJTW655y1MLgChDJ28s36ggCMO29LiMOXz7AkuveuuwbmHOS/Xz0X5y2LLMAo1uSD8yMjr2nDIzkHcEEEAAgSIL2GUdD7tb5OyT9pwIJE2brjE2/tmcJIhkIICAcRcKYajwz92Rryq3DxSpQKncn6+0nF07ParZfKvx3twCrk574rl1eKdrApE1tTWr/Vio6R/SB0Eiqy8xt8u87+Fz0j8Ae0Qge4GoEg3pKOfqPM7+YBwBgfkEkl4gdoP6grx8vtV4DwEEEEAAgVwKvPsRje2uobTTbHSVy4ySqNwL+HOwUlmqSspnm7v2X5L79JJABEohYFcrQF78qmab1K19tkhFlkFtYJGyP39a1aPnYseNy/xI875rTeR7gLAg0EsBfYbjvgEzdfbZjR4bWaRFQ2yZvv4XmHr9lix2zz4RyFogjtwSHWMLD+tZS7P/pgT0SKD/P314dOzFTa3PSggggAACCORFIJo8y1i3kfk/8lIgJU+Hn481im40sfvxkkuQfQR6L/Deb2lIEjPY+4SkkIJG4+LCzP/hc0wAZP5y962651+Dd+cVsFMT877PmwhkLqDghKsOmNpZGvo0s4CmrhP1mrJib9NQWM/IPE8cAIGUBSrGrIj6+qt856UMy+7aE9C1Oqr0rbfG3tzeDtgKAQQQQACBHglUo5WqQtic3XNHj/LFYQsqoOdUP1a/tT9h3vPQpoJmgmQjEIZAVL9YGdFc0wHUM/vrijFfKFLBEACZo7Sql48PqjhpDTuHT1Mv+89DrBYHjQ9GU5uwEgJZCNRWrzTxIj/PVIZfNH4orL4+X4E8nkUe2CcCmQpYeyE9HjMVZuctCjiX9CB99vDOsZta3JTVEUAAAQQQ6KGA08TTdhM9QHpYBBz6VAHfUK9SGTVV+7RT3+BfCCDQVQHrh5xWACSEhvZTk8ZMxQ931a/DgxEAmQNw8YBZoXHZdPOSYYXpHMcO6eUo9q3iWRDorcDUBefro6wARdZLbUr96vpuUC+Q12R9KPaPQJoC1rit+klzl+wLgc4EFLC26gWiSqTrO9sRWyOAAAIIINBVgWEzsKiSacOrrmaHg4Uh4Fun2l1h5IVcIFBQAefOU8XUqsJ/P/jhr2IFP/oqR4tUEgRA5igtGzkNf+W/JFjaFqh3ocK57cSxYSkEVIHmXMVMbtrkL9BdynJynDd26WAcBoGUBCxzXqUkyW5SFFDg2lr30hT3yK4QQAABBBDIWMCu795zR8ZZYffhCPheIFH0zHAyRE4QKKKAXaWG9oOFD4A0JkD/qnH9h4tUCgRA5iotay6lNexcOM29bpkAvTko1spOQPN/1NauNrWR4e41bW8Ms7XJ7N33e9lljD0jkLKANVcqSpjyTtkdAh0KKAASVaqXLBsd1/nJggACCCCAQCEEGEa7EMVUtkTqcbjSZzRSwW1lyzn5RSA/Am6ZaQQP8pOkdlLSyMM3za1rn2pn815tQwBkDnlNvHkt46HPgdPUyxJMJoVuamVWQiAzgcktfp4pdefKcv6Pman3x6lUNBeIfbZuMK+e+RZ/I5BXAWujc7v2GckrAunKpYC/F1N/3F/NZeJIFAIIIIAAAmcIuMu7MvTuGcflBQQWEKhruGZjXr/AWryNAAJZCNx5YIN2uyaIZ+5knmf39SyYstwnAZC5dS9j/o+5cRZ8x48exvwfCzKxQoYCqjSLNSf51NlnKxbR5eHs4mTyXg2jZ16VYQ7ZNQKpCAxeO7YqlR2xEwSyEPC9QIz5sSx2zT4RQAABBBDIQGArQ2BloMouOxdoNAhcokZ6z+h8Z+wBAQRaErBujSqmzg4iQN64lny/pfznYGUCIHMXwoVBRObmzl/m79ipye5XPGeeKw5QGAENf1VfsdLUli/vfpL9F0KlUtGBr6EXSPf5OWJrAlVrrmttC9ZGoJsCmsvJmKGR0bHndPOoHAsBBBBAAIG2BPoXrQiigqutzLNRrgV0Q6VlsRr6vizX6SRxCAQp4AMgbn3h65l94+La5BEV0WNFKyYCIHOUmMrUfzHM8S4vLyigCuCI8eQXZGKFbAWmzttkzEB/tgeZa++NXiB+CKwfmmsVXkcgFwJWgToWBHIsoHsy3a/an8hxEkkaAggggAACxty1f3PXe57jjkDTAqrfiiI10rMM09y0GSsikJrASn0/rCt+AMSHEex+/fwgNZku7YgAyCzQwzvHbprlZV5qRUCt71kQ6JmAAnB++Kuahr+KqwqANLrodTc5/ph9Vc0F4q4z7/1WD7qhdDe7HK24Apqx6fLipp6Ul0JAERBnzfWlyCuZRAABBBAossCOnjx3FFmMtPdAwA0zSkEP2DlkyQXsclMdkEHB60r1XKblEU3S+N2iFSgBkFlLLImId3nSgFkTUtwXmQC9uGUXQsr98Fdr1praypXKTQ+/YBoTzT3fRHUqmEM4r8LNg87PHn5OwnUlZykKWGeWLhsdvzLFXbIrBBBAAAEE0hVwZgfzf6RLyt5SFtDcamq5rfn/3M0p75ndIYDAvAJuQxDfD40AyHfMsb5vzpvdHL5JAGS2QrHmqtle5rVmBfxYFZoEuhet7ptNIusFLeBcxUxtWG/ipUt6ex76z0D/IoX53Y1Bg5O5ogvog8KCQI4FdClVD5BhBUF+OMepJGkIIIAAAghcyfwfnAS5FvDPp1E0rDRS55XrgiJxQQm8+5FFCjyeH0YdadJX4AfmtWcfK1oZ9RUtwd1Ir4pzazJ2JxX47XH7z0Nca29btkKgUwF9buPBxY3hrwYUe6grGNfLpTalo9uf0X/e0stkcGwEZhM43qK+EnYHEH0pNVqqzEYwx2v+iyytRQ+a00tyXzHj39Ov83sBAT+vmFmqIMj2BVbkbQQQQAABBHopsC2IFr5zCfr7KT+FRGbLQvdfx++h/P1U8uN7M7C0LGB9O+h4mfGVsgWsxGw5v2yAQK8Fqk5zTBsFQIp+zdI1ujbpL8SP95q0neMTAJlNzZqR2V7mtSYF9HGwva50bjKprBaggIa/ipcvbwx/FefgC8ZPht7XvyVAabIUgIBuYS5TpfLAQo+bRc6qc+4xBXg+oyflJu95bE1Xkaaj+LLzUdZZ19fXoWytjhsP6ptxjdZdo4qDYasKBKVLSfLXKH8PybKggI2EFp+z4HqsgAACCCCAQM8E3FDPDp31gX3ww5nDpl77rO5pJls4nG8N1mSLtOTGaJZ1rX9NLaiNoi/O91xeoTRoQuForeZc1G2W7qecVsnDs58Sl/ulUQm7wgzUtimtn8p9ekkgAkUXqLpBU3dbCh8AaXwPfF8X3ANFLJImKwOKmLX20rx059jF+mLv14QuLO0K+BsPX+nLgkAvBFRHVluz2tVWLLe5uQmO1Mpm7/7Xm10b/6AXJBwTgbkEVKO8VQ+QenIMd1F44cO1OH6TLg16WF54ccbVbGymrI1i5+IFhwpVgGOyZo1/uD9lka3aSEYDdRsPRNYOWudGlJbliq2s1C3Guc7Yq3SvcUMUVYeSh/bCtwg6JftZ/WNw2bV3bDp0720PZXUA9osAAggggEBbAnv3X+0jBMEuvteAix/W7c1LTeSWtpDPiabXjSN/PzV7cKVWX2z6ItXTRGpJ7dRg1a0Q94iZmjxbf/seojdoguF1Sc8QPw+jb2jCModAYrNW96EXaAUCIHMo8TICqQnU45FkaPTJwo0adSpBEgBR40JjHj71jWL8iwDIaeWkJgU+Cl4N+d7ltCyn/k/bbAOP1I/MDksvoBvd+sCgmdiyJV8hzHrSOPylKh8CIKU/SfMGYC/Wh0Ut6kJ9SPSXAvfJp+7d82394X9ysyy96q3DtmpX23hqp7HuVvUKeYYe6o8/sIdaHp3x+3lAoii+RHt5qLM9sTUCCCCAAAJpCzg/p0KW40OlneDW9tdoqPGIuWVD/lr++qGc+uurzdTEpcrUi/XzymSorqS3rb+n4r7qlMJuBId8sOi8U17nHwggkJGAuyijHXd3tz4AYswTmpzxG909cDpHIwByumNjfGk/PhtLmwKu7sfqzsHQQ22mn80KLHB8+KvJjRvy1QU66RHlLi+wLEkPV2B9o9I91Gu2nvCcuzuPxXf407cfVLr8z9f18/7ootv7l63o/4Aq+X9EYRANoZEEb/KY9N6kSUWpSdCXqwpjfW8SwFERQAABBBCYT8BeoXf7wqxr1z2J2pnpP5+fT6Bn7zXmsfCBGf/zj/p5lXrfv0Pp9Q3QztK9rh9GU3+yJAI+AFIdqCpg1FTvaNQQQKBjgSsD6pV20Nyy8asdi/RgBwsO7dCDNPX4kPZCBbU0VjetBNorCKvgB8NftWfHVh0L1GMzsVWNgxuR6Y53l/oO9u5/Xur7ZIcItCkweO3YKm0a9PBXnubgPXs+0SZRVzeLv/rWySfu3v2TJnYvc85+WHOEPJUEp7qaipwfTD1AlEICIDkvJpKHAAIIlFRgi9ouVIKsR0ga/Trfpf2LhSnbXRt/RQ+FN+vnL1Xx+Fi2k7cXRuVkQpNeINbPp8KCAALZC1yem+HZO8lrct0wT3Wyi15uSwDkNH19tzdaCJz2Ov9sUsDfHPm5YxsfjCY3YjUEUhDQORcvHjRHt2i+8bxNgJfEU+2APhg/nEJO2QUCqQhUrfFDCSngH+qixn7OHCla7hSw+dChH0w8V2l/m4vjAwRBpktQPUBstEhzrvjAHQsCCCCAAAI5E3C+HiFnaUozOVYP+TafPUDmyuaujV/UHIwv0zPY/6Hnw7s1Bv9ca5bw9eQBdcS891vLS5h5soxAtwUuLXwvNN/IOK77OZ2+2W28tI4X8jd0y0aLt7/ZT+YVcGVQyyStbzAd+Jj+3foe2AKB9gQ0/NXU5s3GLVFDltydf7rBtFYtwowmR2RBIDcCFyolS/P3eUnJp9ET7Csp7a2ru/G9QQ7es3tcvUB+QUGQz9uIEUsbBZA0QVUwmQUBBBBAAIEcCdx5YK1u9kPvVesUTMjlsKILngm7zn2vyuc1ZvLY32nopwVXL8UKjeflEVOpEwApRYGTyd4K2E2FD4AkwzMnvT++3lvL9o9OAGSGXXVRX+CtYWdkNqs/VQlt6wyBlRUv+51DQDdwzlXM0Su2K/iR0/Fdk8pYWi7PUYK83AsBa87VYf2QQoEu6gFiTLFaKp5WEr43SOzcrrheu48gyAkcai5OUPAHAggggEAuBGy8Tenwvb1zkZz0E5E0QCjssCeJx64N9xsX3WKmJj9g+vp947T0mQq3R7dMpyzz3xau3EhwoQTe++iSpDFs0b8ekkum1egKrpDzf/hzhgDIjE+OtdYHQBQBL/qZOSNTXf7T+vk//ITP3FB0Wb7kh1PgbfKSi03tLDW+yl3vj+mySa4rg5qQ74bpV/iNQC8FNJTQZhtFwc55pe908bpP9dI4jWMfumfPJ+vOvUpBkHv4bk1EFw/tGKe1YhonF/tAAAEEEEhJwCoA4sLtVRup2si6z6WE1bvd3LLh0WRIrNrknyVVPmWus0ieme2ICmOodwXCkREogUB07EcadcxFr2dOIiBHTbzonqKWGgGQmSXnzEb9cwXxj5ko/I1AzgV08xb3Vc3EJVv0W8PE5DUA0vi+80Ps+WGHWBDIg4BafIXb+k39Ef295hfyAN1pGp68Z48mHXVvcbH7Wshl1oyTLqWDCm4F3HOpGQXWQQABBBDImcBF+n4OtyLZz23i7H05M28/OS76dQV0Ptz+DkLYMnk4Xaac0LM2hOIkD3kWuDKg57cJc+vawvYGJAAy82NizfqQW8POzGo2f6s9cb1mIscQWNn4stdZBfzcH+s3mNrKlfpeyXNlbnKT6bsYEwCZtSB5sZsCQzvGNusDo4eeRmSum8fu3rE0NF5sFTAIY3ni7j3/qNL6o9i4JwO6iW6xcHxYy/Y5GzMpSotyrI4AAgggkKWA22CiqJrbhlidZj3pAWLu73Q3udne9wRx9g7dBu8Pe+L6ecQbjwA++EEAZB4m3kIgBYHLU9hH73fhR/ox5lu9T0j7KSAAMsNOVaeaPTnPFagzEpvLP49XpOW1BX4uzUhURwLHe39MXXC+qY2oQXCezz2fNuuvMcm8Cx1lm40R6FRAz7Hn6AOzptP95Hd7fZfXawePTpgf5DeNrafs4N27f1cP638XduBqIZdYA3fzsL6QEu8jgAACCHRTwC7Kd0OsDi18I7PJuLDDnsya+10b/12vv8NElVnfLseLrqp7yigbxxYAAEAASURBVDIDlKOYyWWPBezW4lcz+3pyqwhIsYdCJABy/KOwbMf4elVPqgk5S0cCca2jzdkYgVYF6itWmqmzz9aMRgW4nEW+0bImm2NBoNcC1uhDYxQAOR647nV60j6+HtSVsy9PfW63JmoLa5mKzRsUT1XXY38jyoIAAggggAACPRW4c7+GvzLhD834mk0P9dQ5i4Pv2vgHajDzaVMpY8dS/wxgfaMSFgQQyFRA80MVfUkeO52v7C30XFAFqDHszpliI7dBZbo62MqgbjBqKCJbZ/irblBzjJMCU+dtMlNrNfl5HJ98Mbd/JTeaamnDgkCPBZzdoHkU1uW611RHRI0ASEe7yOnGR+7d/agCIG+zpW2xaBfpfs3Pp8SCAAIIIIBA7wWs2aREjAR7T+Xn/5g49ljvoTNLwRtLOwyW8T1AbBmjP5mdTOwYgVME9u6/Wp+xKJA2h3X1dPzUKfkr2D8IgJwssHX6cwMBkJMgrf5ljYIffly4XM/D0GquWD+3AvXYTK1aa45ddpnOudymcpaEuSXmzgO61rAg0DsBa91IyBXoCu74r/Ov90442yMfvGf3eFyvqXdLoS5+KaGo9ZG1dDdNSZPdIIAAAgh0LLBZNx1rgg2AJPN/uM90rJTXHTzw3f8wtal/NpVStlFT5Q0LAghkKODn/1gURj2zjc2rN34pQ6vMd00A5Dix6krWqsJkbbA3LpmfSo0DRKYIrfC7hMFhMhfwvT+Syc8L0ftDHMkcJXbA2JDnXsi82DlACgLqr7fKJedjCjvL4S6Sgb2sezSHSUstScrjX4QcxJoHqqZzd3Ke93kLAQQQQACBLgo4P6zoCuMCfQ72PUCc/UoXQbt7qHde44MAf2+SobzL1rBEFZomGdamu+YcDYHSCLhL9BlTAKTgS6ORe+F7AhIAOX4eqjIo6NawXfu4FaUiumsgHCgTAVXcxv2LzJGrrmr0OsrkIJnt1I+1WvxxIDPjYcdZCyy5dmydHu80bly4i6vXYvUA+X64OVTOnPsX53tdlm7xD+ssCCCAAAII5EXALjfVgbwkJv10NCq+vpr+jnO1x8/pvvHLhZhTMjU2H+zxDUr8xMYsCCCQkYACIGag8A3tbUXZcPdnZNS13RIAOUm9JmkxevLf/NWigK0zIkWLZKzeroDmmzl25RUmXqb5xIvXil1PSI7x69ste7brWCCyaqVozHk6DzveVy534B/UrTmgtD2ey/SllChn7Tdj575YvnGrk+GvJlJiZDcIIIAAAgi0L/DeR5do43B7f3gZPwSWcQ/7P4Nd4oom9nWfL1cAxJemnQq2TMkYAvkQGDGVAKbZSb4Hij0Buj8dCIAIYWjH+HJVl2woYEVqPj7S06lIuo1O/4PfCGQk4Ht/9FUL2vsjqXBWF0hLD5CMTg92u7CAvvhX6DtvU7jfecqdcw/r0xZ0D5Cpo1NfU2nf56M95Vl8Xt2EdREtLspT6OQUAQQQyK+AnThHiVsZ7D2Vb1QycUw9BOwP8lsIKaTs1nPUaMbuN2UazaJx+3hUejQqSeEUYhcInCFw5wGNuGAHg/h+aPQELPxcUARA/FkauZX670V6qD7jnOWF5gVsnd6TzWuxZlsCCn64emSO3HijiZeoE0XRen80LjFqAuBKOcteW2XORlkIqCVK/3C433lW3+Z2v4ut7wUS7HL0/rccVk4f1oTgweZx9oy5I1MTk4Ufg3b2vPEqAggggEChBKxZp/SeW7hnkmaR/fwfxqjBhX2i2U2Ku577igIgj5anZ21y/3hQ5XW4uGVGyhHIsYCNtyl1QzlOYfNJ88+bK9d9pPkN8rkmARCViyY/9yfl+cHeuHTr3PNjkZeuIqZbuBwnEdDQV7Vz1pljF15Y9HONay+ndO8ErDnLmoCnUdD3kG7RHn/yk7uDHgLLn0CKqT7q4toxXRB7dz51/ch20gd/un5YDogAAggggMAZAs4PK6qRJAK9r2o82+/TDUfYPUAa5foN3Vl9vzT1GUnZuieVdd1HsiCAQAYC52ufy4pfz6znzClNF/TC/kMZGHV1l1TCids6N2IrVd+cvKv4oR0scvQACa1Mc5UfP/SVJj4/doXm/ihi74+TmOr9YekBctKDv7osoFsYfzMW7pJUQrjggx/HC/C7+q3WiuEW5yw5Y6iGWVB4CQEEEECgFwJ2xFT7lxS/gmsOu0YPkIfNZOV7c6wRzsvWPqRntEOlCYAkJWef0j2kHwaLBQEEUhew56mOeaTw9cx+/o+4rgBx8RcCIL4Mrd1Q/KLsbQ6sn/+jaMMR9ZaMo7cqoN4fU5s3m4lzN/rPbKtb52n9ij4sAcyElSdS0tKagN3mgr1eq2+Li5/0PSNaMynm2roSHlJRHtFFsZgZaCPVKlvm/2jDjU0QQAABBLIQcBrjPeCl8cz1XfPas8PvJXCs7xGVZPj5PHG6+ntHd8jECoKwIIBABgLubE2APlD4etJGIPxLGQB1fZcEQESuMbQv8iOGs7QroOFG6tRHtKvHdk0IqIavvniJmbhki4mHNH94sStv6SrVRJGzSqYCF+tDlOkBerZzPctZZ76n7H2rZ2no4oF1KXxCWS7Pg6urO91xMPxVF88xDoUAAgggMJ+AGlIW+7lkvsz5Vr96X5XkZVh8kMe6qTJkNcljEtxSj5dbNpSi0VBpypWM5klgsOANdxuWjUA4AZA8nVmdpcVuD7c1bGcyTW3tGw/4HiAsCGQloN4fkxdf5I5doJF74sKPsetvrMtTYZnVOcF+2xawUXRhsGNVN3pCfM9Z+822gQq0Ybl6Q+hmw6nHi3GlCG4V6DQkqQgggEA5Bd50X0UV5uHeU/lWv/Wan/vj26UpYGcL/6DZWlk5GpW0BsbaCDQncOf+i9Qsb2UQAXI/BJYxX2su4/leix4gjfK5QrWq+S6pnKfO1mnUnvMiKm7y6rGpLVtpjl5zjRr++mhbgZdG8rnYFLgIi570oR3jy20U8ghs/kNmDx3+weQXi15WpP80gST+YQ6ph4+f94QFAQQQQACB3gpsWafJbe0lwTYqafQQ8MNCHegtNEfPRsD3BrcaRpUFAQRSF7BuvVpunRVEAKTRAPnh1I16sEMCIEJXa9j1QZyYPTiBThzSd48teuX0iczwR24EfJdyBUCOXXuVqa1aFULvD9EmXauZbC43J1m5EhJF7oawezz6hzn3VPzVt06WoWQVEwg5mnVaEWqwUqvec9b51qgsCCCAAAII9Fag6gaNr0cofu/02R0bz/aP6Rm/PD1AZpcI71VftrWaRiUoyfBm4ZUgOcq/wNlKYvEDIL4nYG3qoCp7n8w/+cIpLH0AJLro9n5jNScxS/sCqqSOHD1A2gdkyzkFNPTVxPkXmGOXbvNdsOdcrThvJK3T/RBYJZpgrzilU46U2u0hz3nl4lhXjXJMgH78fF2q/C4ux7mrW29N+K4CZgisshQ4+UQAAQTyLFCPN5hqf55T2GHa/HOL+YF59cYgxn5vEqPa5HoFX+142RrL/B8FL0mSn1cBu1oB8hWF7yHYCIR/Q8qP51W6lXSVqOXg7CxDy6vP9pVBvs0oS3sClvk/2oNjq/kFFFiL+xeZIz/0dP3Ww0U4rasmQomgz1+AvJtHAd3DXBFuDxCNkmfck7p0fD2P9hmlaUhlulQt+DLafd52644efnzqy3lLVV7Ss2zn2OWq0rhAH4Rz9PscZ+xZSts6fS6W6Htnmc6S6YZP079nJv3E8IxaXy0OIg015lQxYh9N5l1xbp+L7b2HPrk7iC7wMzPO3wgggECbAhr+KuDv36SOvESNtu48sEEPnCFHtE6e5r5S0zlVaLrvnHyRv04R8HM4WKcJSO25cmq05tc9ldYZ0WtDeu14sMw3kZ9tccfvq5J5ZR7T+t/z91RaU+bum+pZ9ZmSBRdnQwr4NbfcVHwdlqp+irwkp3f9gKlUnihyNqbTXvoAiC5CTIA+fTa09VsVTkG0zG8r82yUlYB/mFAzXx/8mFqzOqTghxfT0DxhdCHMqvjZb6YCV+qmO9MD9GznybOcUfdc92DP0tD9A4+oOFW5XYbF18TYybIMbzZfiS7dOXZxnzXPVIBDPbrM1Vp3k358TyAfBYx0TiRdmyObDJGmVfRsrsoOL9j00nhuV7zU1ZLtIlvXLuojo+P+KI/pGPcpMPLv+qr+1yfv2cOcO03DsiICCAQksC2gBlqnFouvIE+GSCrRBOjWrNAX3GDQQa3pUvbla4wqNKNHpl8q7e+7DqzUs8OzVO7Xqfy36++LZTF88nnJ6Z7K1wI7X3eqmynZzRXzmAvR31M12lz7oEjjx2kIlb37/C6fVKDlc3r/4/r7n82ujXfPtRteL4jAm+7z9+HFH/7KcyfXCvst86r1QfTAL30AROW58+TFrSAfqLwlkx4geSuRINIzsWWrObplS+OiG0rrquQLxE2YqVjjKLIg0BOBMG7GZqXzD3PuqDqLfXbWt4N80ephfeZDWpCZbGTK1f03QWlaKg5eO7ZKQY6zdVav1eO2/zK8Tn/v1Lx1m43t00uxntV9MFM/p39HaqywU5dZ1jl1hbn+ZfW1Nd3CsaqDNharoJuNzo2s/YlIwZXl1437tHxcR/mID4zoyf5BgiJzkfI6AggEJHB14Yc3mbMwknsqzbnlvjLnKsG94dYqS4PBZWvuDB00Dzz6hbnfDuid9z66xFQmNuoeZY3O6U26p3q6cufrAbeZ/gF1fNUdjB9tIglU+N+n30dpbU1Ep/803mtv+He/g4rupXxARX9OLwq6RZWbGz/Rb5n3qZ65XntA735YP/dq3a+YeODL5ta1T01vwe+cC1yyVj2GnM43nUtBLE69wsNYSh8A0bXnsuRCFkZ5dj8XunbbOvN/dB8+4CNq0vOpNWeZo1dsN25Q96BxYOeXNUfNazY9FHAJkrWcCgztHLsgp0lLLVl6LJl88pN7Hkxth3nfkXVDNuqrmvYexPKeuxnp88+m7oju174248Xg/kx6dhh7jVoCXqLMXeisvVxNDreYSDGI5CFq+uF80j+Cd3mZccTkz/op9QM2qlwf2eh6H5Sxcf3zw6PjH1GpfbXuzEcJhnS5qDgcAgh0S+DSoHuAuPiwnvT3dQuz98dxqhy3S0/5cut9ojJKga+Ad8fMO68J7EF7BtedB9SAxF2rVy43ZuI83Tjpt7nC9C+qJp9bX8fg760mjs7YKOs/dQM143aqcTS9oPqPk/Odqmyiytbkp6JYycSx/Saa+LC5c9+X1Rr/k+oh8u9Zp5L9dyiQ9CYzmwt/LfGNd2tT+qDYQx2K5GZzAiAaE/nMi1Buyif/CfEX8NAqqPOvHm4KVXHi5/2YuPwyM7l+fYDnlr5EnPWToLMg0HUBDYdztYL+c4xT2/XkpH9AX/FqXBDjkzaPY5f5JvqzNVRrfh+FWVNPqPYbhUltkwkd2jG2OarYF+jb4Sptco5+ttpK/1r/UK6SbTycxwX42lB6XRKkUSlF0WXWRpe5uHasYtynFAz5tN780MF79ny4SRZWQwCBnApEF93ev3S4f40q4lquR6hrMHRb88HsbJbDn769yz2s3apscpKXvdrDem75Ul5Sk306krkeNPZyCZb6lG4wrOalCGzxQw9tXf1flavrdQO1UT8XmEr1/GQYn+mAx+SxnGdaRePT6n80I5sm0t5oor5dpjbpa94+Z/bu17Cj7u/NrnM/kPOMlDh5TnPEmE3F7wGipxPjvq3/PBxKYbZ84xJKxn0+kskinYsa45qFlLMu5sV3FWRBIC0BDSY+sfUSd+zSbY3Byv3XfFCLz5ArQE1WUOhk5riAbmEuU32qul4H98FKcqiW5/pCsqWZIHtox/hylekq3+I++CW5/zbHlNPPh5LX4Z1jL1Lw6uXKj38wX6+/lzfyplwWIeAxX0H4j6J+9EW+SC0Yr9dD/HXK44+PjI7dV3Pm9sP37Ml0SBXZ3qSDX6qKu4H5ktmz9zSXioAemYrNR47cu6dnFVDHz8EfU1r8EGv+mdCPWZ2XRUZ+UQtlY7+o69ynJo/V/uro/W9Ri3SWbgroPLlO1ydfoeh7pvlKHb/4bmmNv1r4rx66jem3x8u2hQ2bXFVzFPmLz4RS9pGp2L77yL27/YTD2Sx+guQkSJ3N7nu+V9/y16jX+i0bDvQ8LV1LgFttKn0DJ1vid+3A3T2QL1tn1KLbfb27B87waHv3j2rvt+jnGuVLPXk0WXlFX2u+h3S94I/evr4t9lOIquBspDlKzHbdV92kQMgr9PcfqkfIh/Q7u+Wu/ZfofPFzpOTznsrn3Nrv6+vl7hxNKr9cQ6tVTe6DbQucNsm1Ihn+ygdBglhKHQDRNeQK3SBpiGWWdgWSZ7h2N2Y7BGYKqOtnffESc/iGG6yr+ueq1h+sZu4ul3/XVfWTTDiXy9SRqOAF7Dbdx+jDFeKib3LrJnXZKM1kzC5KHvA26GIZYoGelqekfOuHPrH7M6e9Ubh/KgjwNp2sL1KO1IJa87ck82qqDI/3nihchuZNsM9XXc+l6nlmNXeJi8/Tg8fT1SPkgwfv3v2aeTdt401V1D5dx/ptHWur7iH6fV1rXhfVYtT6IzPVPzr+V0/cvfsXuplO7ySb/1MF44cEWaThy3L9veDi+Gkmsi8fWFz97/L6sM6dl3bTq6zHUkPBHeo5+j90vdomg2EbWZ0nOf5QzSwoF19drZifHtk5Pv7EPbvfP/Ot1P62ThWtAS+NER663KOm154a/qrVya17neS2ju8/x+5J/SfTxghtJa3Vjfbuu1XXJX2HOt0P2yFT0ffZ9FweRQ98nG7h60amh7yNonW6z9GPGdVE6h9Tg483mVs2fvX0TTr+9959f6Vj3KT9LNLlP8ejCLia0llTUOizCgj9cMf57nwH53S+ixzswQdArPu+iaN9OUhNKkkodwDEWI0DqAckfVpY2hHQ41u9piuhotIsCHQioOCHH/rq0E/9pHFLNO9HiPPK+C8Q5/wQLo90QsW2CLQroG+6CzUsjc7DQK/ZTq2qnbuvXZ+ibaem2n6s6kYL1KIlvuX0+oc+8/2WN8vBBr6nThS5S9Xo5tf0NfDcRuVKkh+lzv8O9PN4un0jn7oE2XV6hv45tdT+MbXq/y0Ni3XX6au28+9G8MP+gSrzNYGYTP13bs6X5LnSVl4ri40KgjyvG8kdHh17seId/1di5CtTfI/AnJ+DcqrqiaOqB44h/X7J8uvGf0ZJfnlmFdvdKIicH0OB2nGdHG/QcHaD+l5Vav15cvx3ztPuk6fzZJGuuVs0IdEf6pyvHbx7z/9KP9n2qiQelLikv/ee7tFfnJybkOQXepqObh78PQ9t0uFUoVyC7+RG+Wp4s6h498x+iKttay7SJekXdZK+Qr08dI1SmfkJyv1nUXVTpVimR2GxkW9I81z1CLlZgZC3y+Id5pbzOp+vwU8aH038tXyfnQzF5b8Dch8A1zkQVZ6pIMgBBUEUEOvpol46AVxLkmuFeSKknoA5juJlf8I64zRGcaitYbP3S44Q60smxBu/LvFxGAno/PHBj6ee9SxNfq76vBCDH0lB60vZGD/oaDBdCJNs8Z9CCPgxu3UGKuAf7qJnn1iVqR8LN4dn5Gy1rfT5FmBnvBHcC8qjcvnJIuVr2ej4lap4e32l4j4UVfo+qor55ybpTx7UfZmVoNxmKzB/vvpeIVG0Ierr36veIB/wLc1nW7Wl16x9ma1UFfzQcBeJ7bRxjn/781r30Ur3cxXAubml/Laxso7xPFUM/0VSmZFU8hXpHPTnjf9JglvKhvnzRiV9GxBsMq+APpO/r+vVbQpWNioWC3mtOn6uRJVhnSw/5wPR82a6vTevzH+FYHsZO76VAiCu+D0EmiWoRudq1eJPWtxsfjW1dqEqNX2Aau++/2q2rvlzXZIeMNXqa3QjMZgEPKZ7fBTyWtV8gc26pv9O9L21rIb8HFi8RzcU/yyn58y6bisvRhO/rNWfaZK6Ph9gmv4OzvNvpdMHwDSsrIIgd7aS3fTXdRqGVekp+pLUy4UzAbovjlIHQKzVOI+l6OZY9E8e6Q9WQF+mcdRnjl15hZm46ILAnyOSUvQPEw8HW55kLLcCQ8urfgL0cHs8Krqjhsz6fJVosfbiJKxagiz7rwpdOz9VhKwu3Tl28cjoHe/QDfYfRda+y0Z91yeV8tPDFhQhE91IY/LQPqXRKvpeIqf3qtL1Fe0e1geb9Fl4vtEICIVcfEDIWrVmzXZRo69f13E0jJEqMIq86IKgAJofVk29Z8Z+vshZyVva/RB9+jy+/kRlV94S2Gp6Gp+tm2zFbGp10ybW35z7BtFNZGL2VfzdhfWTDgQz79bs+Zz5qh9CSXNyhVBpOTNbs/3dGN7sW7O9lbvXfE+Evft+w1Sj9yhtf2z6qi9NPndTOj3LUFbNFogPUExooIlKRXOh2D9NzLxdO8udB/RZcDtkXS1eIys5+F4LxvR6GKythe8BkvT+cJp3zR1o5zTK6zalDYAMXju+1jkbdGvY7E86PYD4qKC/4LIg0KbA1AUXmiNXXWXiUOf9mHZJvovNEcWdH5x+id8IdFHAT2C3qOj1XnN7+Q9YiVoqKrfK8dNKMQF6o4apHjvzb3OXf+/fWbz9zUt95WGftX+mBjZvUgXtzqSYCHzMWzhJD4go2q7z+W3DO8d/Zd6V53gzcmZrsXtDJffRfmLTzJZGDxN7bjAVtqr4UjDHt+p/2dDOMT9HBUuHAkkwydpfauwmoGc7NbSKjDurQ55TN3/3I4v0QuhDidc1jMzdp2Y85H/p+ugnLQ69XqNROewbDP1n7ktz7/7XmOjYPymde1QZ/2xd9AdNzQc+Aro+pV0IvgdEFK3VU8JtGsLq7eauAytbPoR1l2j76ws7nFhyfmjC9r37r24572lt0L9oRfEDdEnl1RMi+VpaLHnYT+hf3HMaV63bqi6xi3UFnXMd3phfwPoucX5pfJE2/ua/CDQroHk/ptacZZ664XoTL12qj2IA3QTnzbv/ErFTZteG++ddjTcRyEBAl+nN2q0+aKEuyeerbJ+tZ4Z/3Txxvk49ec+er5/4V87+8ENd6Z5ylyqXL9YkFwo0+g4roX+npVgIvjJbc4MooHe7giDm4D2739HK3jX83TXJY1orG+Vp3cajSMaNsuxOOQ37KT+CWZJKDnttZN0zlacvBpOvHmREAbLrdI/6Kwoq6foV0knSwFSW9Myf4jJQ8xOgq7I8xX3maVf+glqmXrVJQGtqR7jDMJ9+cul51LhPnP5qbv6dDOFkf01pvFxzUKxIhnjygQ+W5gR8D58oWmpid6uu5yPa6GXNbTi9liZXr/avMr6XTWEXP8yPG+5J8n0PmhDqR30enO8BYoNqvFvaHiB6SNV4O2ZJsDcu3fq0N7pQdutoHCcUAQU/6ouXmMM/+mxTW6EGfKWpKCpNRkM5U0PKhyZAt+oKHejTuu5zVXlaiCGS0jip/JwJmjdgMNjynImUPES4z8x8KS9/q+X5BZrA+u7IRr+vz5d6MfjKQwIfbZWPaig19M6QivvtrQ5rpEe0G3CfX12u6xT8UKv1kL4D/FBYFT9B+rVLr3prbyo65mcvzLu6ft2hXmubQwx+qPLGl0Pa8+9dqn0G9nk643T90hmvhPpCf321snZzMt9BqHk8ka/k86DePef+64mX8vLHnd9cplb771dy/lYf2xt1gV+R9EIIMCibObmfF8XPdRxFLz1u2sIh7cXHr5stbJPHVW1vGvtH7mkBfZceMQ98t1BzMC50JpY3AGLsVuGsCOtBYKHiTvd9Vw/pISpdG/Y2j4CCH37S8ydf8HwztW6dJu4qSWVREiy0QY2hOE8p81bOBFRNNKIHiZylKs3kWKP2Th9Pc4953pcqin+xLBW+6lGh5wjrh0DIzdKY4Hz8d/sqfV9TBayGuvL3Q9M/uUlm8RKiSg5VxFpb6X+3WqS/qIUMXF3oh82kPsrPc8PSukDCdrPCIP65jqUNAc2/8x4FyG4s9GdornwrY64++ahzUdoBEA275vwwWAEv7t6AM3dq1nyF5cDiwSA/A6fmVPXayRfOQ6e/3NN/37V/syrp/aTm31XPA83xoQm9fdCDBiWdFYs39PUs/QMKguz7veZ35i4rfv1McvL0Zm5I564rvt+Js2XSvPMaPWKHs4RcGzJvKel26Gy1dNFEgCztCViNp1o3EWNbt8dX1q30Rex7fjz1rGeZyY0bTGHHlmy5/PzNpvVfHkGNodgyAxv0RGDZjvH1+s4Lt/dHourM4Xv2fKUnwL056I+W5cFQ/QIk7P69N8ynHnVox/hyVRa+QSn6X1FU+WUmNz/VJ51/+UqPmu8Ncpd6gjynmX1Gff36kvUBqCIvzo+znNmi269vawisY2G06pzBpIypN9xaVZhdOONV/mxSYGTn+Mv04Xm+Kh4D+AzNkmnNfq7l7w7de9tDs7zbyUuaAD1qVNJ2spdcb1uqCdB3mZpGhSrDEvnPhPuX3GR1776X6ut7rybv/qPkMzWlOmtfcc+SkoAsvamxr00mRm9ur5o3ssBtMvRtpvxOGdezoZvUKKfAftPnSJy0dn9w+p+h/C5tAEQfCg0dkXw6QinLLudDF1M/BwhfUF12L/DhdK7UBwbN0eufZo5u3VKucye51KhGx7jPFbgESXpBBWzkztMVe6igyW8i2b6F59RTTawYxCqqgH+FMqLhXsrwgJi03p06eM+ej/W68PwY+ZWKuUu3jm9RA5oLk+BHrxMV6vH9vaW1OsftWzXc2+XzZVPlcpOGv5tvlQK8528SbMYBXPeAhsA6GOSjjyoaJHhzAQo6V0lccu3YOsH9snqxrQuisuZ0Xd/SvV476Iz78OlvpfDvFRpaJoXd5HgXzt6d49SlmzRnb0zmmUh3r/ncm25k9H3zNz1PnJ8nYe/+P1I63qHgx43J/CshVBr3HHaWBPh7pEbD719UEOSls6xx8qU33VdRIOr8Yvdg8PdU6lV7y4YDJzPWzb/UIKPoI5w0eoodldoD3ZTrxrEC/+aenXDpzjGNa+dUGVT0B6bZ89eVV2PsuuIcykH0xRtHfebYjmvMsUvVa9xfVAtfYdFy4agHiP10y1uxAQKdClh7nsZID3fIx8ZN2hc6ZSrK9goJvFqDBJWjB2tStr0fhsPPSaEG0n8p9xdGxg4FWVmYuw+AHw7LXC3zN86bNGtH9ZmYd5VivOkyncT7ycen/k4OephNKgaKQdJsKlVppt4tL2h2ddZrCPRF9s0K5l4TbjDX+nHl/qE+6dIdQtEP16NBZcJ9jvHPaMphzyoPu/wJ3bv/tqRyuBTPpSpb39Nl18beBrf27h811v2DSnqX8QHYutoIBvE93uVzt5XD+aG4bbRO/9ll7tp/yZybbl17qYbMKnZ5ND7LB+fMY+ZvuMVhnM/qRWMcAZDMz5cuHEBx7416rFrVhUMFfQhb9xfSAB+kgi61HmTOfwkpYHbs6qvNU9fucHFV9XaluMmcxXrXxtJM0jxL7nmpdwLnqM5rVbjPFkn155d7x9u9I/vW7vriPT/EOszZFP38H1r+Y7b3uvWaety8T+b/Q2k5t/FAE0Jle7f0OjyOoh+6y/zx4dGxW+fak96/NoQeILotyrSBRPzVt07K8IthBu80UF5UHRraOaYWNizNCPieVRr06ueCvR/X0Fexi7+s/P3B4U/fnm5FmDMXyDjcXrX+quvco82cR2Gs43628d0eRm7mzYXvtVSv3z/vOlm/uXf/G+T997poX6p72Wppet5k7drU/nX/au0z9fn+6blXj68o/PdC0pPIfXXuPGb4jg/uKdKU4RG6tGt9D2jwNJ0vvb1eZJDbAAqnDRVrNqlI1xb+w91G1tPaJJluNpnUOa09sp8gBY4HP47sHDWHb3yG/9JVTWUJK4+S70H73SDLmEwVQWBdFPVpss4wP3tJFakzpegBorz+on7Wl+U66s9Y/XymFx8yP/+Efj6ruT5eKfMlYVYc90K2hWPqfkHD86xSD7aXqHLbVzrOtmgS+uKPtXzkqE23lfpsUsb9iT5Px3QzNuu7hX5RFR6aN+b1hc5DlxJfvXx8UFb/0qijCfG+wD9qxI9b535fwyd+IgNWjSRhlgf7PdwY2qscDbb27vsNlaWGgAvxczDLmV/p04vug7O8k/1LyUTn+z6kr5/fUfBjRRL4KIt79rrNHcF7J1//9nUafuyGOTa6vtjDNyUZ1MiH5t458pf1yzv0GQull37dvHojc4BkfcZ0Zf/OrtXDrHqAlOTLLiPUKIAHzoxo2K0X0JesH/YqCX7cdJNvcZK8Vkqc5GHCfbKUeSfTeRBYVvwW0nMzqopUb7rgbtBOz7F6f7xIr11emp6XPl5erz2oW7X9p1tk/e/hneO/oqfEP7VR3/bG8DDcL2ZtPuf+XV31tNFNaq0+64ToGvpoaeFv51V5P/W53UfmNEjpjSfu3vOPsnosxPiHD4Lpm+D5KVEFvZslg+b9eg5WQ8DiBw5nLSidCLrn+aDOdz+/QBbLudppuAGQpNFWtkPyZVEoLe/zzgNr9T3/UybqGyxNAKQxL0EWQcH5+ffu/yl99/yN6et/brJi0edHmD+3+X7X21f7/Ug4r5o9ofbqQvfK8Y+Exvobgkx71c5u5191l+n4fYW/L00czXfmzmdx3yllDxDd9I2oRVlxSy0HKXd1VQbw5ZWDkshpEupxY8Lzpz3NHH66GhgkY3vmNK3dSJZ/mOhdS4Ru5JBj5FRg2bV3bNI9zMqcJi+dZMUaotSY76Wzs3zuJbro9n4FPp6viuDNwVZanUHvb1HdfVPOfO2MtzJ8QUNe/b4u2WOyVgWhAvcsuRBQL5BXnZ4QBQWfrom9i/0s4wN9xu07PW9Z/Vt3739rNTxQcIuPUVqz3J8TweUtxQzp+vabChr+cIq7zNeudG672N1/8O7dr8ouYW6V6evTh8ifdAEujR4gmc5JlAs1G79G6bioNN/zvu6rPvUNXSj3d9Xfz7HiJzrvq243NY3ESK+PrvLPejBfDsa8wtz5zWVnvu+2BPGcsevcfz0zb1155RI9rwXw/eAjIO6zXRHr8kGK/dDQBtbi7W9eqgeNVSG3hm2DpeVNIkOlQMtoZdnABz8WLzFHr3+aOXrVlbrP0gW07Dc7/mHC2n8ryylAPnMkYOPVSs3ZwT6oJ5WHZp+z9nCO1FNPytDy6nN1Jf3xYMtxVrGkculrR+7d89isb6f8og8WjoyO/99+GB1Vti8K4gEwZaOe7U4t1dVw6arjvaBOJsPaG1TprQfNIi+6P3Dm893KgYvt7xQ9ZjS7la4XzvSrkdvPzP4+r+rzc7O+R342spHmrwix8t4PfVU/pmf8X82stN90n7/eqMdAZkfo/Y79c5uxX+l9QjJMQWOc/uebSkU9CEMuzBmGSWDL3qOAz4EZr2b75959v6cD/IacNybBj2yPxt6bFfDnfLW/amzljlM2ed/D5+iz72dAL/jiJnqXATuS1H31LgHpHLnxPRDc/B8ep3QBkL7+vjXK97p0zowS7yWulTjzZH1OgePBjyMa8urIFdvLPeH5TCTfW4oJ0GeK8HeXBDRsjO/mfE64D3hJgPUhE9vHu0Tak8OoUu91fi6EcMvxNFYf2Irjb2t4s65MYphMCBy5u3TYn2ikpCQVIqex5/ufOhus/a2ZaVSg6iZdAQo9v5HypCy5rj1kHrr3todcPLmvMf/DTM3i/21Vs69cXF/8nKSfg6Ed48t1qt2i8+3CYIO7GnZX35Hv0rwfH05f8PgeL1lzvioI1as20O8Ifz2aOKosmsDnLXQvUh6vSoZnzuxkyduO/XeNecDcct6hrqRs7/7360R6rSZnWlr6kSC6At7iQWpTfoNTGwzU6i/RtS0q9OUtuQ2wX2tRI53V3/PQJu0ogADSCY4gh28vXQBEn4mV+sLbGOyNy4nzNcM/Yj2E+vkckoe2DI/DroslcDz48eQLnm+OXrrVnx++KVax8pBFan2X46nJL2exa/aJwEICulqvTobyKfTd7Hy59MPH2IemJia70ktgvpRk9Z6fjyKq9N1UmmEaEsjkQf3Laq3+0axcp/erVtGaX8L+uZ9novHa/8/elwDYVVRpV923dNJJL9kTsgcSspCAQBYQBlEZRQdn1FEHcU2Cog4qI/qP0g2D3WEQQVwRhQ7qCO7iCCOiDojC0J2wyBIStpB0whIIkO5O0st7t+r/Tt3upLvp5S13q7pV8NJvubfqnK/q1nJWu271YROrv+QFwvlyhPC5gOiifmNcLtJ9L4r5C0cSvjVUrKX8MVdCglBbDauxSWpshNWaJu04KfkB5DR6r7HnXwp95eZuzQn2jUC7hMtZwHC6seebPuGh4AcCxTHKypt2Ip8U/yxeoCIh6z15f+RzreD3scChp9wqTTt/A3jfj1fGhkwPHPHSGvByQE1GX91yqALOPooE9bQpOfSVdm+8NAf3RUJ3xkH+DzbWjPUBw2DdnLsjwTHgRmEqkayirGElg/WGxg92DLrM8WKux4ASS0LkCJCSA0qx3NTprOMdZ7H8JBhGJT3nR/9OoYVYiHv6f2XfWwRCRGASCbqkoclOSc8KFcjuzocuNTIEFgR5J+Hc+lUpEhZ20huv28laPchnBfi+C2PoG/CumZUsBVOQqAZbN45kX0GoMrLyX4G5ba4J1uyCyVA8nfp6Btu226XIf8mzZDLoPET7UeX1yN8JXu/s4zfpf8nDDSvlVSY8K0P2Je1xhLsdZ/trDmyqf37Ia/z7EiFFObxq4dltYlEKEPdxJiuM3FMxFcKMX4OQTJlEnVUpJQHLPchE+s+BDtum1hPwHF7JsmPewHooCpFB60ugwEVUuacDfDtraqX1krxpl5BMR+viGWiH5lU7ACspj4ZRjv4hJglDNxdhGLEBqPr+IXEKEFhZTeTpDLTRyu3Ld0ATUyGF9PEmmMSwbBkdAgEcNgVcznOLFrIDp7ye5SdOsMqPwTCpmKssGkuEwbTYz4lDAEKPmZpvZUfsM8rnJSXfN+JFmv5YvabxdRDmbVRrLQn2klKwt0AS2+dxbqYDWWClV/nxbSg/ZljlR2Aw+1wx/CU4R9xq591KsKK9EBJj3c0dwI46nJAkvb0hpbMLc+efETIKnmVmzS3IPUr5exb7PPC0rg7Gf9dgnsuYOc/ReiEOYhjfgNBXtwXfUXwKhOc1xgrP1dme72DnTjPTA2TplJ+wbMU81tMV/FCJTQskzMxT6I6n2LkzgwsX27TrWKzL3wa+a5KFb2w6unhC1PqPhz6VeoPSVakQ95rvCTy5y8PFg+HDHZwtQi3IK+RDXVFWQYpwKbZESUKQbYO7ZBWMxxnYKiWLaZ+55TYBus+IalodQl6JdAXrPPlk1nH6GzzlBynGbOmHADaduR76vL3fl/atRSAcBJSlmzzSNAHXYfA4DJXcDuzSXjn8nRnvxq9uOBqzx+UO44vN7b/h+gqcM7Z3X0sd4kcHU6D8WAvh79es8iMYfIOtFXt4CVmO9soPoOQZEj3lhBxuxvOskptAQLBdFUntUIozeQSe8TMiaT5mjSJk3NXwlHq9mcqPQ2D/oa2lrvHQp0DfyAnMC7ESaCuRVa7mJPlsZO0H2XBT67dQ/Xs8z4QgG4pZ3RTRiMkd+OeuwChral2GcAdW+REYwEFWjD0VRe4wJb8vKXU4fzRIxEaoeyqUSXC30lzWrJRI8pER+NT6p8QpQLDXP4osRm0pFQHYE9vwRqWCZ859vfk+9r/9bazz+NcxUTWewjyZw59fnNACIiUScfE9flVp67EIFIpA1V9+X43VbqH2G7HhGMZBnUv2Av4EHfJiOAoC+b5yVeO0FOeX4Mj65kAaiHmlsOalxQTC2WAKBIIfgvLjYowehE9KWGixYCC1tZaMgFJAPCVcAUVuyEXyRxA2CHsTRUPIjQfYHBRj4AhWmHx1gK1oUXXt6sZzgAWS2hpasPjjTL87L+W/h8LhNc8hRAwzN/8Hgegpll8OBc8wG2lqvQzMrfWUzgmTA6mwZvwlxPO/JRDIlfJDXgvF4CnW8yMQhG2lhSJAY72nu42tnR3+HEbrA2eVhZIa6+uUBwiLSokUODSJU4B4m+KELXx+DiM6J5miIfYTl6TURcrDnjxzx9WwtnPez7qOOpIJRJSzyo9hBoDnhrkZccJah7nCfm0RCAwBl7OsWvOMVvrLFxGu1ihrxYzDvgKDvbMR6oc0qIGNj3hWTJsM1imk/F4Q9NWuaTgTLdQB27nJwzYIRG2dZSGgrK35jv0PXNxWVj0l3CwkvwdKgocRTqyEu+N9C4V7ArTz4k1lsNSNW9UwAxYC53LHmWbqXMcdRPWScu3+lvrHg0Wzt/asW4Nnxuz8H/kcedTuDQXPsBppar0Iz8C/Ya6rTJxHLa0xbv4goL4zELg37pqEer+plB/WEDIQiG2lRSDgyV22FnGHf5dWuEcj1UKVEcc2wpHzcNZV/3qg4JrM2/WOzvpyUzeCo7PuzxWcQvqoQ5s/9dlaNEGgN+TVQYS8evkT53ohr0iwarRwtdy+UcK8xwKNuVouifZ+YxFIcznNSWehoTRViE7PF3+psxNxjQ0o5PmB5M53OKnshz12TO23ETrL21s83t5Sv3mEq0r6yQuJwynnx0K7bpUEob3JZwRoBkO4pkgUuBQGC21vM9MLCpwxuRLP/Ek+d5k21WUcfgV30qcZESpuKNSR1NnN93wdeT/+ONTPgXzH5WQ8sRByGbo2q/WX78K+ygyvWrLIbtr5dZZON0L5UWHsszDSYPf69BXWnf7ySJeV9Nu1O+bBApJyqryRCfKmNfS5KAkce1MkCHgGHRHlrhAL8AxMwTMRCeu+NuopM40N3544BQhPZSYbu3HxdeQPX5ljQ0YMD46Jv/QqOXJHzGIU8mr/qad6CjBr6TFyb9OmM58jq87nRr7Q/moRCAYBDMElCQj5uD/3cB1Zt2ldyDMh67BbsUc5nQmVN0hrfkomHkItCC6vKPn+YW6knCpwTb8Syo8FZgp8h2Hcfh1rBISbx3CXoXt/HAIFidAhstppnFETwvg4nK8AXwsP8ZqgN1hPPiE5+0djBb4QciF82wM5ITeE3K1VOADNMRdXUsmyF7BWvhgyrv4319R6AqvIN7GKsZ9heeQ3MCFnVCkoKZ2EvJ998gh/s75TjsGMcxVLV5xhw16V0jH2nkAQUAo/9kwgdY9aKZ+FS6ZoL2cmJVKuZw/Wgc5RWdb0grSmdJdEdvWaxteVdKO96TACfRb/3gRz+Hv7zkwE4PUhZYp1rlnJupYvZ/lJE+FKS8lHzWTXV65oAZHiCdQZjSumr8zYyjRFYCkiZBv7uEIAguhXeodqqFrZOMFJyc9CqIKk3M4sJnKaDjU/yMZodXMH2prrf+ZHbf3rSHPnW04qtULaEJ79YbHvo0SA9tHIXwASXoqKDFjP/xrCcgoNM9e0jR28H5Cz0F0RFbZRtVu9asM8rPrnOzyFUBwG5jhSyg+xB8YdGw5uqg85VBMSoFeMzbBuQ+VC6mwvX2Br5+pt+dvUeh6ev7Xw/FhpbF8VNMEohRau5FcXdHkxFy2d+j2WSr+L5bqLucteaxEIFgFPPhmV4ekMhIKr9ryhgmUz0Nop/JWbfxLh2w8E2k6ElSdKAcKltAqQMgcbt8KDMhHU5HZSdOVclptxBOt8/cmsZ+4cJrJZT/mhCQuRk+mkKDfKLiSda46cFktAIhFAkucV5nqA0MFOUqzqVl07l7w+QPvncThdBeXHuMRaKPZ2ILwzcG7I/9jv/kTS85uQ9PwMq/zwG1lbX3kIqDnsOey2XiivnvLuloxvxtxzAqihBM/GFKksvuXfjz32kvGdD1263xjGRmHEceSVPJVeYma+Rkp6LrrwzPyElHejQBHAz8gdZWr4K4UWzUlcX6HXxtYlsPipw97wrRBEToQXfgBjQKMqSZAp3MfYurl3+Uq1yqnCPmLmHOMrUrayMBEg5UdPNz30ISvGDzFZg3mHnrlDX2j5xlMiPc16UtF5JwcMXKIUIHCFPs40C6eAx8eg6iFOc+FGaou5CNDGHjbVyuvj5NWe18eEWo9fG/Kq8H6nxSPfA7MYcxNIFQ6GvTJCBJYZu+bROV2ydkxWT0WIb8lNK6E8Y2+DizElVQUvBsSMLRkNupGT8oNcDn31/gDOVwPdfzZbaFUW8PbmyBCgSQzeHyLaePtQkt+E3f0HcEaCAgR7QFMK5lQoVZenxsiZYMnYZJ79u6t2deM5nPN3ay+A6c9U//e0txbi/pzgl/f/Orz3cjHaD6+5UFsCtnlYvjH5cqjN+tVYU+tlmL7WorrJzFHWFH7VrG89GRgudnd+3VcGmnZ+GPV9FjEGYbFi6rPgK2K2srAQoPVBChjF8VfDavJQOxt3TULbyP9hwB6KIpiQcaHfYfMOgRX9m0QpQGA3crwVMpQx6OisZj1AygAwxrf2Kj5YymHd8+azg393KstNn4Z5HBO50dZOAfWJCn/l7gZ4fwqoBVutRWBUBLAXRLJnUw8otCDJDpzWKcxc7Iuz6OLs+AmZYyGc+hT65X34O8bbJ9Nm2YANc7k94M2ZN7s5+UC5VfXdX7O68ULoVdYB64xdx/pQsX/jhACe/JfbN9dhrxBdaW+p31x7UsMuKECQIzE6OoJoGc8+SzH+HtTdGET9caqTQl8xLq9CP2JJMXDdB19SiN1Qa51/cFPdnmiw58uNxJbA9MYNcn/wZ6LBtoRWN7Yip5f8IO78NOifSLYkZMRnBfPAgbw/urv2MJH+ZQnIDn1LU+tp+OEi1D3ZWCXr0Jzbb3VAQAnu5U7sY8LPYSTldEA0w5yzBo8sNGsYQy0dRiNxaQMWTseYMzCjQRXxdL1NUjTN21aDQAB5Plg6BYXHDNZ13HGsc/kx3uHJWnaUiTYWj3Vz7iizEnu7RaAkBCpXNUwu6Ua9bura31IfW8veqtUNy3AEXYCD+TEQ3bydc+f1h9yjrWK530gjwRZUH0zevv+Bi31xue4NL/YxYI44+AYKA/uhZ9/qioDSNrTHgnrJroPw8JpY0OIjERQGi3P5flRptAKEwnw5jvgB5rtpZs53tEbgPyavaG+uf9DHIVJkVfI4Y4XrSgHCYDkNAWJcy7U75iHx9iKQdzTofBNkOm9l2TEVSNjrnVvVlBpX4kOmCzmQkFNuIzt3pj/W8J6yqZGlMwsTH1os5K60zRWIAM1hTO7CwI8grKiE1TCfo/36Sxjmuimxjz/zRoFdF/ZliVKAYF2spEfDlhIRUF4CUIDYYgYCpPhAyR0xi/UcdSTrXLaMieoqSnxkBn+RcYFZRlAmY/lIZCTYhhOPQIazk4wGAesR1nTKARJ5GbeqYYbD2cQUZ3NAzDy85mIjTAqoBZKzEx0n4yWjJUG89aIELIOK8v4QfxZS3jnol5I+UmJ5zL//z0mlF9q8HyVBaG8KHAGEfJOiA5MYwjVEX/Y113+3dk3jN5S3FM2sphSlAOFLMisaK3MP1x00ha3BfFSMTf871pyVg7835TPlh5Ju/rdtzfXfipSn7JiJrKcrUhICa1wJD7Gn6s78X2BtFFoxhZMRchI8mmZhXGM/JefjL8LL0B4L+Vwrxs5geZxVaT9lan8UitVQ15H3Rz63G1j9aaifi/7umufgsZz/Eu47ReFedAX2BotACAgoDxC2j62fH4FhCZ+E520280RrITAbUBPqPEYRTHj4XjQBsTRUtYlRgNSsbjBbGDRU7/r9HWxvHO2fbL9B0bA+UmRRgvNJM2T3iSt4z7x5LN+X54M8fGwpDwFlRQXBBuP+uR2XR5G9O5EI8GMxBsG5QcKsQf0I7o6G0O5mfB3JXgbIQufB0bZAoGU+BsqOGi7ZZAgRJyP4vMKeK8OBhCfiHNRvAz8q748DgOkvHS31Tw38rbRPqRT7KnfSp1nlR2n42btCQACTF+aKVyQna8XYlLvhLnG6eZ7ynFWOlZ+Ea9mVsUHaR0Jwvn0XRtOHuONUam99OhQuWEuRH+rJnJCfHOrn0L67ftc0PB+hNRd6Q57X/5GsIv8r1rQzIjGe2jhB2yUrsH1FTiJWjRcEi2wqPA9os0AGZpTXInR49GqQ9p/u7Uh+focvdFfkP4KzxNlqX0t9YItFII4I5OEJFpnngqyFNxrXXiHrrXHPY08RUZjJcAZWJEKDcFgb2Ar6EwnQEQrWYGHQQI79/8SZFY77j2qINfYqPtzxVazzjSczKD54vrbGixNqw1351xGezPlVhL/6g3+V2posAsUh0LvmFXeTVldLnMX4AkxgeEVTPFEIKZiwtUA5/BnfSbteKlBG+4c220hkLyX/8WiXFvI7hIFn4boPGSkILAQAe40mCNC4F/uwLdseF4IxayGEUgoKEMMEXIAa08w/A2fjFCDVKxtngbd/hfJjtnH9ph4MyLyl6IK/51cPbKqHUCbCwsXJ5ikH++FJzz13ZiC/w4y+3Uy/X0N8S3uq3kLnVvXCZ0+42feL/TscAvCWgsawFT/fPtwlxX8vNyB8a6XN+1E8cvaOkBBQngsCUQEiE9wfYcb6QCdZeH9wtjuknoukmcQoQCAqOdZBcFSspJEArX+jsHO1oZH060baOFJCOIS76lN8dC1cyMS4ysOKD6v88LlfafFgv/a5UludRaAoBOCNsIxky0YveTS/WcV8UeMiXhcfEm79d/umuh1+0Aal2Lew1UPSc8OEuH6AY+uIGwL7Ozv5lrgQJQX/i2S5A/BgG2fgwjGHQhVGLkT3ubN5in0Qyg/zlFZ9ONGxXbg3IvTVdX1fRfcXIcZMPy/RutkbHjk6nG3L5SMgH4T3xy/Krwc1bNz5B5bKTrQKKF/QtJUEhQAdeCWFbYosh9F8I84dSnCA/B9rZ78cVFfFoV7sLJJR8FiQB4gtpSJAgjSKtakETqVWYu8LBQHqI9rA4iXSyA2HHB8dZ72Dvfyvn2IHTziBifE421IxfSPvcRnuv2oBBvbr5n4h3IZtaxaBgQggvMr4gd/YTxaBmCHgKeiehHDrEj8oq1nTeDtMNeYacQjxA5CC66COwIvWr6FeyreJrrHFTwRgmHUgTnkp2jddtAO7x1964fv85DTiukhPjlA6ac7XRUyJr81Xr25YiTxHlxl7LsNcJIV7pxC80VfgSq2MyxPt2lIqePa+UBCg3B9C7MBCfrkv7TXtvARGVG9mrg3jWhSeah+FviAFLvVJ/xd9p169+66iKrYXD4sAYc7kXuxhdwx7TaA/8OVGyNW8Z31foFDFoPLEeIAA6ynqYGcF+KUNOxwguM0PURp2Yd1FYxu5PVg2zXJTp7H8ETNkbv583rVooUcB9Z+17Am2N5S1mng02EZs7RaBkRGoXtP4OlwBK/iRr7O/WgQiRQBrFv7b4AcNUH58EXJ6m+ttNDDVIbHfwRsWv4LJDihMu9EZOWCogiiraijtm5dfJ4O/Y3HrOAaTcxwy1c+e4NVOMh4Yxf0rBcS6jO0q7q4wrpb3QIL24TBaCq8NqJrg1YK55tTw2gy2pfHHf7kGPN3gCeRNfAZJ+SH3YKppIsVcsGgWWLvkS6wCpECs7GXRICAo5AO7C0Z4zWUT0NT696jjExDecxv6agQ0+5QZSumBVZ2ipUh5EP904S7sqzhpj/q7JJPsFXsqORZ/q1g6S5Md3dP76n8prrClQATUvradrZ2ztcAb/LvsmueQryi/SPv1gcayVGHEdvoHTjxrSoQCpGplwwIc6nBqM3GTGNbAstiFhXRR7dCC2RviSoytZN0rlsj8ETN5fvIklps2lSurA6u4KgrSsi7OIBdyd9fGsuqwN1sEykTAkWwpczgGoy0WgZgiAEE6rHtb4P3xs3IpRN6PU3H0ORuhr6q0P4CUC8Zr7gcy6mCOg41wAY/cjb3yO8bbAABAAElEQVTws9g5vIJTdwdEw69ia7wbGblfxkG9XUrZjstxgldn8bHwqBmLRN0T8XEyfp+J3Da1qBCJaeVUhNlb4PBUlWpShRyz+0SFxaj/AHkuD0Aksm3US8O+QLJtQsptDncWG/UsYVBzKWfAa2JFe0v9w2HD6nd76axzFVhaZlQfDQCJDjf8x/taLrpxwNfRfsD6Ei0BtnWLwLAIKO8P+SJLORcNe02hP2zcNQlzy/m4fJpVfgwBGuVZIbzJOzaf2wvlRSs+vITXAeyNOvAXnzk+y3bvxUgZgsIhd5XYM9Eeik/CF0cgtNgUvKfQHPjL5rBUepras2G/ZoRHAZgKpXh7UOAfQcm6U1jFmPGsuzOCxn1sks4KEuGvGNvhY62xrCoRChDMUdgkMisMKmMIcgp/RZOxLfFAgDw5enJMZsaw/MwZrHvpEpafPJnlJk/mkvJ7KMUIrrHKj/D6ixaO7q792A/9PrxGbUsWgSEQ4HIJvoV1EcakLRaB2CFABm8uZO3yi2WT9rn7Uvye3/8Lpt/l5goDS0AJllyU9k64eTh4yM2Sib/1KjqehNLjic6D7PHcw/WwUiy+UC6FNGeLMbssljI/E/PMMjR2GlKvTICCBPsPa8E4GqrwuDkIj4THR7su7N87Xs21VE/M3oe8Euhbg/pRydP5LIzZNwFTrRUgNWsazgcfSOpO67uBEnmlHBd/2td80YVhj/9h22tqPQFYE+C2WATiiUCmAmfQzq+zj8x6tmwChfgoppc3qlBNJq0D5QBD1vEpiE3Jw0OIbXg9gDnhaczDz6DaJzE9PMnWz95TUhPX7RnHnO7lqO9o1D8PdS5CPaewTHaOZ+RKNikGzvUlgTXETSR/EW43fnluiF+D/8o7cwffTigt8DY0sz2UpiJsJBEKEEwkR+PRgFTYFouAhgj0eXkQ6VB6UMlPns66Vh3PeubNY+6YMUyOwcaHrBHoWqv0UBiF/k8KHq353G/ZlhefCL1t26BFYAACHMJJDpdcu2EeAIv9EA8EHDpE5ja2tdTfWS5BNXff9nfwdlprrDCwKICw0yXFB6wTXbdnG0Je3si5vN+VrLWjpX5LUVWNcHFvIunncYnqv+qVjbO4IxZKkTsB59APoP1j1e2eRd4INSX0J3QTSpcUziNxQ0A88eUeubrxcSHyXWatIRQGy4GCTi6LG+bF0EN5P9AvH8KcV6P2+8XcrMO1mECgHM/1CPbBmJG7AvQkRGYSM+QtOaMjQIL57q5tCH1Vfu4PpexjH2CpVKUS9o/eurlXkGCdvD3SON93d76CM/5NYPYveG1nIrWdnTuTrOXLL+dOI88FCltGLySeJw8cuZDleqAU4e/GfP8W5oAGys9Ach5bBiGgNlXkeQOFVCRlmRHeOjTeGWtn6+b4dl6IpDcKaDQRizn6czGmiypsqwqAxF7yWgSw3YbGG7aEr/3JfuMvAn0Lmwrjiaop9CYSmUtYduSnTGI9S5eyrgXzmayEcTeVvuvpr01q7mESyb9YNPIUOp3/iV11ohsJCbZRi8AhBOR0z3LLrnmHILFv4oEABPTSzT0J748mPwhCHPwrOE/BCiDB0y4dWvCoA9MDwOH3rnA3tDfXPegHvoXU0b65bjeuo9edeF1JOYhA0eV4vRn9A8sMKnYu8nCgf6m/pBub3AaHCVPv4JlyO5f8ndh/Hn9ojznoGn0/yqO0DYPlebtdgMTnJ0ryyjeu4LnAs4Hxt/7gprrSLKkDw0RCqcttXrXA8LUVl4wArf/klcDYv5Vcx8Abz4bnwbEsRwb1CS20bSEDDsqL5rr3A98roFy6OTQ01s5+GW3RixQi16l2m3Z+H3PQR/A+Yz1zFCKH/6GlQ7L9+Ccqwf2JRng+e9v0RDz4iVCAYMKYwxHQ1ojBefhxD/cdbbb7hO3htmxua3149ubwIEZFBZQdFZVM1FQxUV3N3Jpq1jN/PuuZOwfDuHdBJkWHVXbEa1ykYCHi5u8GUZviRZilJmkIVK5qnAae4RJmi0UgbgiQda/IYY99A7w/7i2XOiQ+/5CTzp4o3cN5u8utU6v71bYWmwEpnwamd+QEuyQOgsNe5ctbkJvldGwcGyTnKxzOET/fKkHU+FI4SPKgiWVBjozNtWsaW9Ffx8eSwFKJAu4w5zoO8sLjUIV2YbBq7v79BaD9X+AhUSoCsb9PCPHDjld6fho7QjnyqpHg0c5hsesaSxBJf1kT607fWTYWnvfHpz2DvrJr068CFUkDZEvKlcbux+tyWMN7XhlRc7Nu7sfYD3ZfCoXM1dhIvwkujRMVSXZOAgz0DIiDkJM9FE03yeO0l8uRIhXel8Dv6WgwDLdV4xUgzqKLkftD4AUBpS0lItB7aKVJlh4QW4pDoG9x6qfooAok3BlF5RgmJkxg+alTJBQeXGazfbk8mBxHObHoQig8VFgrcw89HqO6/otnQlnf8JYkuA3q2ktJoTvD5SKIecbZmTopPa4Tn2ovcXteyB/4QTXG+CVmWkKPgg7twwAllEnI58H+D3h+sTcs1Sg3hvtzb4izU2pWN16IpN9IUg+PAlXUOAiXmJi1hjn60ZiRNIAcWOHfgQ3/aVAYTFCDbcCvun7AuEula7ibW6QbB+S1gsf+M8jNQlpk3cgfnV4oc4VwH8a89j0Kwzb6DSFfIflUL8ywPYeFjLxtbiQEVE4Kdxvm6JvYJ4/oTbQ90g2j/Sb/g6WzmcQpQGhPRVjmc2SYQIaM34THB9bAmBUvv8t72cbW92Gu/CioezNCdKUguI4ZoVGQw3PM85yJovEjDVmXKS8g5hPzi/EKkPETs0jOKKvN78oAOYTgnhebV6JP6B8gWbGoui9UFRFDicnV334LEa1LfV4d48YyMXEiKTuYGA9jyIqs9xuUHu7ECVxUjMHdJNXofXkurV6d9t/4IkAWI8J9Gh33v/El0lKWGAQ4n4+tfJWaSxLDtGU09gjggCkFWb3La/wQ1sP745sQqC8w5NBRePdRgmApXkW4q9/izY1QMvyx8JujubKtpe5KCHDvwkr5EVDwCWOFuAXCi74TeBoislQsjEh4E/0k68jPQuhLeTMKu0mHq8ALTjQrKW9Nb+g2HahGNDL+dYS+mmWkwletDWIv9i3X7vPBM9D3Dr1+F7xqZYXv9doKLQLlIEBRIVwXCYvlD30R1jftPBPkvF3lmSiHLt3u9RKbd7N8ns7wPweWP4w9C2vn/Iz9puc29vLzF0L+8CnkKIFwiYz3E1qUAoi/EAn3CE2JdmFor3vBCkxeNIw/rjsnhdBvvAKESzkfnVkDJUgheNhrhkCAs16BPmnIhyp0OCJFQG+CbiTOUt4NMoPF2bRCybBQJIU8QiJXiYVTjiFPjkrGkIycQlZJKDzcSZOYWwUZZG8hzw4qhxKW0/1qSPaOS8LQKjx60dLsj2eN9yg2TbdpRrkl10gE5JFY8yZ684uRDFqmdEQAUl+IHq9ra64ve56sWt2wDLuRtyqv994lVEdIiqMZtvjYf8BD/R4A+bWOV3O3xtJSehimKKwSftpcs6ZhGwTqlyJvCwTrvXvLYe4x+GsXffi3OPN3cFP93uyaRljkiwVxprNo2rBfw1Hm76QjZ+De3UXfH8EN8KCqA82nG6n8AJ5QjJP12O/3Ndd/NwJ4R2+Si2XYU8FCLTGLzeiY2CuiR0A9NvwenD0v94cYfilpWrUP5VMMGJTcPJ/fgef7a0zy37D1c3YVc3uk1/5Tth3tX8yadm4DD19g2THHsh4fnIAiZaqExkk2SblaGIvGq3bp1DeptUH35YFEvJJ34xVr45wSRsiQtxivAMGktgB9OsnuW4bs/8K/HMq9joT2pPiAR3buiFms67jjWDflqoBnQxKLSKdp+qMpBP/iD736CmHVV+h9sR41fffav/FCgCxwpKRkjT+MF2GWmqQiADHpTFhYVybOMj6pHa4B3xzGAq6b/yOUH5f4QS7O6J/H8nqUUZbpIwHjrTOE4ZeA4X+OdGncfwP930JukB0QQF/h8NTi5ClBaF8omR85cILua6gsN2Ij+3Z4WkFK1G8PG3TDgdYP/w8nM4bLHsoDQkq5WBc8KydhrvukOk/0P0fEmuoiiMPcJpl4ou3eug8WcVfIl3IKmTbemEcgZPRscwEgQMaYQiBPk3u2L7U37TwXc/zRiRnjtKfKQFbV030TE6l/ZefOfNUXHKOoZN3cmxAS60GW6/oGwnidocJhmbhWjIitJAXIIyNeEtSPUq7wJH+675HU3jTH1s8mmZbxxXwFCGdz4MJdY4VBpY9l6UqG6KwDK8Dk6o5Fgu6FC+SBk07iorYWizGs+ZKcnFvKwxoPWnwStwANHCLJ+SSfhAXOzcnh13IabwQkXM8OT0XxptVSZzwCOGgKN/98W3PdW/zgtXZNA4VpOBlSTDNj4Q8ASR1IkOrDfQTbifW9XhQDrtDxA4T/tyAk1k7J8whj5pxmjnC9sN5Ar1Kc5dgX6ickQ2/DcjLZKMEYPI/QB+egA66LcyeMW9UwA8qnb8OgYYaRZ1hodjC5HUR3nBHnfsD8tBj0HXbpjzexljrTESDhvXC7sc9/G1s/n7wAyisqhA8/F9E7qo2PREGGqZ58Zi+8JS7A2f3H5YEXk7vXztkKSv6eNbXeiL/vg8KcYqXGhLgwyED+D8buC6Ol17TB2SrgjcVMc7y9aCb6eEC9piOK+wKzqNkFUx1iE+FfW0pGwKEQWH2Kjd4HvHvOfNZx1ttYxxlncDEeybpzyFlHXg3ewpLMvyUjbG/UEgFvI0WL7te0pN8SbRwC1as2zIN9K7TRtlgEYoCAOqiLNliSf9w/avg/4Kyx0EiBYH+Q6DzFZBew+wVsUN5rivKjj0Xw8zD4+hTSYdwFZVbf1+b/Vf3KHtCFURzpf0KyFKOKCoNFird4l4zD60Dhcu0FKyPAjDnuSg1ysRwBy+oKk/thhC6yP8UJAXXuVAapV7B1c7b4QtqSKRegnkXKiNWXCmNaicKOBFq8GUKq9xmj/OgP97o5pNj/mReBJCmyz14+/Xoe+uNZ0Hu+xAg5M0UpZjIaL5qCcPb3IqNPHZWrGqcBrkn+QpbA2kT+MNMIedW9cDE78OY3sR4Kd0UaQ921noe5s+8sAoUj4OWDud96fxQOmb0yWAQ4FzOwFZyMSTnYhmztFoFREei17mXy22RJPurlBVyAcDCn4rIzvMNdATfoegkUAoiLfwB7q6sQF/99+1vqjUxK2NFSvwVbyk/DCvwBZpqQfbixR33LmDYxlnEmvh5K9eG40fd7hOXDfHJWXBmoXd1Igqx3w/vDoPBj/dCmHIqC+RYWsV/NAbzlsPIz8BkIAClbZcAIeMYC/41z58W+tHT9rmnYT50OBR8ipRh8blDKD8Xgz/Asnwf87vAFvzhWQkoQIX+NxOhxpM5/mqhvmdzrf8UF11it/fKgMOQQ6DJ/lKoFQxfdhUYrQNIOOwIPxRQrDCpjgOF0yvvyVWDtyE2dzjpOfwPLT5po81iUAau91QAE1OZCXmQAJ5YFcxCgxK54GXyQMaevDOeEDpvy1h7Bv+Ubo5yfAoGg2d4fJCCXgjw/Pg3lB1mAG13IEwS8flYKd08yPEFwWJf6WNmp/nFz243rG+UFwtfG8eGqXtk4i3H5ecx104z0dKM5zs0/iXnuq3HEfwBN17ci/4estnuqAajYD1EgkEbOCiHgvcD9O3dy8VaM7VNYf0PXKHgLsk0S7kLhCtwuh7Ln02zdbG0MEEqGRfJPsnzuzyxTUXIV2tyolIIRJe5ual2G5ydjyJEbChCujXdyuePTaAUItljT0ZlWGFTuKOm9362oZPvf+hYmqhEKtU8p4lPdthqLgFYIpGBZ0d15t9FWJFp1iCVWIcDZTOz1pxttyWW7Ov4IKCE+ux/Kj08f3FTnS0K9zIrGShxjPxp/5sugkMI2C7EXKdfWw2tmYxk1aXUreP0rlCBfAu90ANOK9uKJhWcU5w8Wf1+Ud8hfIFdLlAQE0DYZO7JTAqi47CoxDXyBO6ljjVR+4PlWCl4mf4Ln/o9lgxV0BVzOQhMT7Z4qaKBt/SMiQGfOfM/TELZ+2bfQV17uj1NZOltt7PimdYuUAPnc54Hbl9ja2S+PiLMpP6pE1rIB4em3wbvHFK6G5sOhvYl8eOgfA/6Ws2OwZzXH1WbdnPsDRiw21Zu2ox0ALOwPyRp2vrET+wBug/nAES7RETkmoD0/ePrp8ACZapUfwUBta9UFAbImcSksHL9CF5ItnQlBQPIa7qRNlyAmpDM1ZRMHTsixt+xrrlvpl/KDkKisZP/MU1lzvT+wrsALYhcUAWv3tdTdqGnvl0y2p/CR/1lyBbrciIzP7c11WilAcJb6X2mahbDnJFnZG2oqNqMHYblOT6Wz55up/OiFWcrftjXXXxIb0Ecm5Ejs9adaOcLIINlfA0SAwi27+d1oAUL8ubf51tLSqSehrg8xN+dblbGqiJQfUnSznu5PsPVzr4wVbWEQ44X5+gbGzivGeXD2x49kMoz9tf9Xob2XkjxAkGta96gLCsO20HCLQUNGK0Dg6lbDUxkrDCp3oOVdljtqIeumnB8WzXLRtPfrjoCX++PXMOPcpDsrln7DEOBsqu7bMMN6JFnseB4Mu3o6c2v8ZhzqgX9jkhTPJhayipY7cYb6IhQBvuRL0RElOBZvhLAdVuGGbjR7lVy69Q18JZ5Bv9xplhAF4X05r8RQe2dc+qNqdcNRoOlGCaMzIwuNfykfykt2sUb8USjtyUYrpDTqjMSRSudN4b6CMQjPj7k3+8z/P7FMFuF7DDw1KOWH3A+8/gOeH9f6jJs+1Xm834L5ixY8feguhlLiK7qcLotB6ljtnyHyouFSK8OcYobIUNcarQDBVmsaXkPxbb8rEAEOS3d37DjWvWQxE+PHYw22eBYInb3MRARokXARq5zJXzHlYmoik5YnHRGoXNWI9Y7NtnO0jr1nAM1K+aE8GD7c+dCldPD0rVSvbliBEDxmhoTxhIJ7IRjckETPj/6DpGNz/XaEx/kpsNhr5mFdJUDf2p9nHd4jWf1T2PPA4MMwAQo9e4wtdRZdjOD60ZcU55eDpBlmruHAWsiDeLa/ub+l/vHo0S6UAl6ViDj6hcJhrwsPAU/50Y0GvwoB73X+Nyw/itBQ/lcbdY19nh+MfQu4XR41OZG3z/lXsHZjzjVs/VbAgqceekSiKnwKQozpD6x6ZtjfokIxinaNVYBQvGioO+dgsxUFrua0Cbf3/Ny5rGc60qlYZZI5/Wo5KQ0BClHO2P9iU3VTaRXYuywCwSDgcFkLC465dp4OBl9b6wgIeMqP7b0eDHeOcGVJPzmcXWTk2Q1MQSiITaq8GCFhAhBwlAR3pDf1hsK6A0JgIzfvOClDmaBfwXnqMZWo3qgHEVwxVls9IfueqHukZnVjHWhAQmL9ZSlDYumoPLHf957vIa+I35fXPDcGc7P1/ohfz5hPkaf8aMd88LVAhPhNrWexirHIbaPOtAbhSfMnbR14k8r5YRBnJbOyds5W7KeajPQCIaNUKZAbJ4KycdcktIo1woCi8qiwaPKoRASfsQqQ7BhZg2lwgTcRRoSuCc0i90du1kwmqqz3hwndaXkoAwEV+oq3Yk5pKqMWe6tFIBAEsJhXc8kXmGk9GghktlI/ECDlh3R3Sia/FIQHQ9XKxgk4zJ7sB6mxqwP7K6wnl+1rrv9u7GiLkCBXsi9DLAMvIrOEwQhvRKIZLRUgwpV3Y0g8ZlQYLOjY0CXTMcxOj3C4s9o1DWeCjg9xxxln5JmV1gi356G25roLosS56LbH5BH+ik+3e6qikbM3lIPAIeUHg/IDibuDKfVGen9k4Mwn2e3A7VPBwKZprSoHCrxAyNLfpOLx82gkLEm5EO2ON2J9wAYEa50NgRXJQPK5UVgMjkN3LjZiYPqMTcHVIWSgqKliPfPmYUEx0hivYCjshQlHgBYHIVyg8DtY49yRcDQs+zFEACN0PEtlaowUoMQQb0sSEMDhQyXuFvKj8GD4WRCYwDCJDrKwVAyi9gjrhFBQuLmfQPlBlt+29EMAIZe2oL9vMu2wrvwNmHyuH6vavKXwZCAWXl60DTKo8BSWTj6nclXD5Ci48trl67iTWmieNTYQxd4Za8QBOHR9Pgp8y2pTsqnYT9mwomWBaG8uCgGl/BBIRsyvwFnz0qLuLfTiplZK3Hw0NiCF3qHHdWRQkutphfIDnnS2vBYB5NEjBZFJJVLPBXkUoKw1Qj5K0U3Wzdli0tAYjRfDVIGH2cWOdgJLZa0w6DAkJb3LT50i85Pg5WUVICXhZ28yBAHPymArFohPGMKRZcM8BOabx5LlKLYIeMqPrT1CHo+wJncGRSfn8q2wjK40SrHnYfcAhIKXB4Wb7vXCWvw8s4TtHDYUuQ4odpDQVs+C8frf0EPuNCs/Cw7+TC7OOOxNUfQK2j2fp9LvNmus9yGpQvzBlI5twBrxx75v9fkr4X3I5hmpmNKnE5JDaSpDhna7wfAFOGtuCJDxf4WCZZxRRiWe1wwUR+xDAeKmd9Xr5t7GurueZISVKUV5LrBtEbFzJPYOU7Q/m5ASiRSHCSsmK0Bmaz8oYzAYc/PnQ5dkmullDIC1JOiDgPL+QFAOJj+jD9GW0qQhgGG6SAVYSRrjlt+QEcCWAEUKcR+8F5Ye3FS/NygCalY3nIWD+gyj9iBK+SEo6fl32lvqExVzt9hxAsnpbQyeMkYUTNBcsh3YSOzTlR8IsW/BceAFPJO6svBaulUYLD4bHC1/7Y/BfoP57VQoky4wU/lB2Kmz4++k4D8JFsnAap/EsmMqrQFgYPjaihUCmH3SUH64uafxzHwMyo8bAgbmFOaQFFw9nwE3FUL16owukM1dfhPY3RVCi/o2IeX3kbRbX/oHU67ysvJnB38dzmeER0ylK7RfH/oMfMMBLTatGKsAwQZ9qRUGlT/OumfOJIuE8iuyNVgEdEUgUwHKcYCzoa907cGE0M2PhlA1IbxaNiNBgIT3THZhmP1KCB584mDO3wg+DQpBQhbRIoen9FdaJQOOZLBRo/KH5ngbqBPJbiadlyKD04eGMXY30Rj2oar4VOEJABZWrmqcFiZRyAnzVYenqrQXoAwFGoSSGCs78Qxf077poh1DXRL/7/gUI/sm/sAnh0IS3tMrn7sbTEP5ASv9IEvTzg+gerPGNeHH2F+Z5D8OEjoj6ua8Gdb+e4wIL0rrdr6HPGqRLy6SUm3E/tTb/zwZCYIRNmquAoSzpVYYVN7Iko7zqhxvk5+Xh6K9W2sEyEimpwtWOewyrfmwxCcBAYrrmwQ+LY9RIIBNspACIXzkVTkhzw9aqEXCSBxrj0JsfJhGGlLAkOTsaVhE29BXBXQpPEDul25+lxGHTPCL7n9u/75uLXOA9HUXVpgbwMdBxU3fl9r/JSMvflKGy0VhsVK7pvE7UICsNtP7A8oPCUW5YN+Gl2CwAt1gO2yBVYAEC3Cia6fQM5LlYBXxC6xxpPy4IwQ83oxGpxkT1k2FvhLPA7dr2fo5T4SAn95NSA5Bt/wLSxngWasUX/xpbKxeDb1Trt0xD22akf/DUyBuDx3DiBs0VwHC2ApaWWwpEQGcPHNzZsLV3RaLQEIRoEVBUOgr/h241SYqOVRCe1xrtpEnwcwkqlr3ignEI3QPkkvC6nsPNCDnUNLuA5vq6cAZaIEwchUaWIpJONB2wqucvD8gEpTsP4NWHoXHU7AtHXg114oFGEIh/Y8qEHYDLL5PPPHlnmBRC7b29ua6B/FE7jZFKaXQojBYqfRs8DQ/WPS82hH66l149+4w2oqkDbIolez3bS11V0bSvn+NQgFiyvrjHyi2pnIRwFpAYYiEJE+6S9ljL53N1s7ZWm6to95//S54uPHZ5oRAOnRGvxNn9F+Myr+9gLH1s/cABuTMoP2I5kV5Lsgd4IVyv4RbMs50NDjdCAU5KWI509owp5TOxwxsZnE4X2Y3LmX0rZtnuUULploMy8DQ3qoxAtgckMBCyuuxsbpaY0Ys6QlBQAmpXa1lawnpKY3YxBxIQnvh5m9HUuq3hUs5PxZCyQVM5MNtNqjWcFiT0v0TcPxRUE2YVq9SFqxpuB98fVh33vAMUTLol3Xnw6NffgMbpO+bwUsvF6QEYewMfAr0+Ry/uuFoKMP+A55tsMJ2jYJQMUPznHCf39dc904DmFthz8AG9GKcWCBho8BS4Oa3wuMDXtshFi7eitaWGBPW3MGMLdgunNHPCRFFA5rijyDkWissm+ZoPb95RiWtbO3sKPZVyDPNZmqvACEMu7tIgRS+F03ETxJmYkOL0gwaylsYbOVEd2769EnGLJRhYGbbMAcBWhSE3AzL0++Yw5TlxFQEYFF6hg35aGrvRsEX5j+IA6H82AWhbV3Yyo+qlY0T0PxS7Q8Xh7qOsHQFROAfOfSVfVMYApI9C+xgtUhjUtOiDupsD5Kgt2rKwQCy25rrr4PwHlODxn0ygCP6oCz9SUAYWBl77CXj05zXYTgsN1L5QWuGFMgRJbVXWLJrnhuDMDGz7Bk4sMchWRXTGqCUH3IvGP9R6MoPD+1l8P6YobXQu/+ogWcyyn/2/8q+LwiBx2Dd2arGY0GXx/ki9TxFQeB0GMnqH0rOk5XvAoBRKJGi6LdDbRqpAIEw6HQb/upQH5fwBptYh7fJMRU44NhiEUgYArQgSEGJtb7L1s1+KGHcW3Z1RIDzEzFr60i5pTluCJAFr5QH8PoVXuug/Aj9gMkdORviglN7hZJxQ6hoemDtTU/nz8IIHVY0cTG/AbjR4WyH3iGXlKLgRcmkMWEGMDf8Re8+GTTwVRis7GScH08a9ItvHyvGpj+IkXCWUbgNQAdPq2Qb21rq/zjgax0/VOSPZGlz0k/p2AXG0Ex5KuDzAWXa3eDpC1B+fCR03n6weyYU1kcao7QmTPO5HfD+uDZ0LHVv0Avp/bLW6xApFPM5hJDj+yLqjmoj1gfCkcEwJycSpwAxNAQWPyGiB8KcZiuyiPHNJ4EhrDK2WAQShAAtCJJ/DxurGxLEtWVVYwSg/DgOAimNObCkR44AzXscuT7cXAsEtTf2dOZv6Hzo0v1R0AVK5kJpMMsMK2mOVFL5A3hG/ysKLHVvMy/ZM1nOaD+qOyuvSOk8ozsTffRjufkR56nTjLEmBmN4UvEPPxtv7+3j06+/1as2zMPG8kJY3daYhNkhfDiUvCJ/D57Xbx76Tus38lhzPBC17gh9iac9VaaCsZ5ueP7JH2Ju+UkouT6GQswVR+Hr483YU4GTTJZC93xtKFbtd4UgwPciDFshF8bzGiWnkc+COHpFUczI/6E8QNznmcgmLuezmQoQjkneljIQQAL0ubOwuqBYmVoZONpbtUOANqu57lthofMl7Wi3BCcWAcn5CusBktjuL5NxHNIpybmb2ytZzzWITv3zjpb6LWVWWt7tnJ1ISaON0Okpj0L39z2CIaSiLcUicHBT/d7MmsY2vdUfivoD7Zsu2lEs/3G9HqqCFiZyHQ7jVaYcFJCjh9Rs7wXmn/Ybd8eRV0Opi6Taxub92A3Doe/ub6l73G/soqmPH2OkoioaMJPVKglnKcl5HgbqPd1NYB65JOc2RwoCR8JmJzVPa6F3H4Dk/dHdtQOT9f/0fWX/FosAvFElOwilXKWeG20KYOSS0D58r9qNuyZhbZitJ26DxgnNVUy+wj55RNegX4z/aKoC5HWmbMgjGYGQgMiq8WO8tq0GJJI+sI2GjwBtWHPdT2Ojelb4jdsWLQKlI+BINsOueaXjl8g7lQUVBZmSHczN3QS5XGP75vrdccCCM/4PiCUfB1LKpIGUOG4XdlR3kSC/zMoSezuOaAf0nt8wAhjrMKkDuzr5M5WV7FZ4NJxtjFDf07hOqV7dsKK9pf5hv/qrdnXjOTyV/icmNLa4HRYMzHFC5DC+f9nWUnfjsJfp98PxNv+Hfp0WKcXKmhoUSJlj+fwdcCe7CJEE7o+Upr7GJTsWChDIjA2Yg+isLnrIm2Z7H3v2b7EI8GdwB/YkUIDoaOnsCe73Il5/BGcWWQPsFuqvIMfOOtcNVjglQU9cwSxiXkGiQUqgaUupCGCBzB05b77C0Oo/SkXR3qcTAmpj6JKA6mM6kW1ptQiMX91wtOBmpLOzvRk0AtgY4eBAAisc0inP0a09nbnPRhXqajhuISyE8MmAgzod0oRogU0JhCG2lI6AfJXGLODUMCi/et5IgfNk6fzH787cw3UH+ZqGv4IvChllTMEYQ6pi/nEw9Ck/mIIyZSXq/I4xSqLBoNAcJ9mf25ovumDwT3p/liv0F3Dp3QN6UI/xr5Kbw7NLqoTMpPCIj+LjMIinIxbn4U+6viMlU64HZ3VpPWrL60OSd3RqK+fDY4fDTDtbP3tPeTCUcLdUXq9Har8+qLVbPo9naWcJKGh/i3EKkKrVDcvQKyrjpPa9EwkDOKy58kWZzU4lQQkW9EiosI1aBEJDgJQfQpAG/DJ4f1hBVWjA24b8QCDF2XFQ+qes0t8PNE2tA2s5Do7kjcCEpBAl9wnGvtPeXPdg3DhGEuJTQWzcyCqNHuXFwp/qaKmLNqRYadTH5i4p+T6HI1wD47C803JPilw6/OnYAOoTITgebIOn1jaHO4u1Fwb0YYJzD/Jpndb3sZy/lasap2HcfgXTGfJ+aDluR2af1hQhdruuPG/kC3X8lU81ss907Io40kzyEYQOhUcFJTcn5Tbtq5rg8XFL7Mi95jlE9MitNkIBksJ5PZ9rhuX//8UOZ70IehXkUhJxvajuozavDKTIiCuCIiaxirEVrLszgrZ9bFLJePmL2FOHH0bMRzZKrco4BQg2m8fgcdbQSqzULgzgvorsflFRMQbnzOoAardVWgTigwBZkwiXfAB/AOXH1fEhzFJiESgYgaW4EmuegQKWgiGwFw6JAM1vlJzWze3BP/dCBnc/Ql7dHHmOjyGJ9b7EnvwtEEHqP5pJkCrk83gq/zICu/anQhDgslsyntPyqE5ES4TwkmZ5gFC3dbyau6d6YuZhWECbowABX+iyiaSIbWuph4dL6SXryAtgSHaSJ2QydX2Wl3VsrjcrFM3G1iX6L0Clj1t75wgIkMGcFy75IJQfzbgSRiTyd7E2nqvIHweBLddeYEszc56i7bGtkVj+jzAsNPyJpPd6ugQpwT1rw55qZzS487lGKMcJR8ZexR5lRzQ4RtuqcQoQwLlUclahujVabDVtXTJ3Qm3ikuFo2lmW7LIQwCzhWej+ionUpWVVZW+2CESEAPIlLMM+xsS1PCJENW8WSg+uLHNdss59AGec26D4eADHxr/okYeCv9mU/B9YYF5EiLFfaz6iLPllIUCnEXkAyoJ4xIIvi5eBN4snvtwjVzc+gnB178A6BCtjA4T8xAJnExAJ6x/xrmQFCBQo70JFH8JcDGMy+NuZVpwMKdZ/vK+5/rumsQbhFvKI0vnAOM4sQ6UgQIYkpPQggSHliRTiNlTTgvGxia2f80QpVYZ7j3wDaA63ySBag4UzktbtRNU2/FXZ+HK4UGg6wSkFiCTBPY2FCIpcYsTzRGsck/vZ2rlmGTAUOCKME5ooYRBjFdo+2AV2XGCXIVi1qB7PRTaLsaHp5BgYOLZioxDIZCmW6B1wWT7HKL4sM0lDAPmacDIwUciStJ4sil/avKKoP/QPXjioCze3BWPhp1i/75KCPxOXxOaK1kL+4XyREdZV3vO4K275VQrpAnuNzwhwmSdlgc+1xqQ6+b9M8vcyhy834rnFuYeUFlDCHl8qwNUrG2dxzs/DsjzDyHXZ8yp8SEj5zVIxivl9x2H9hNTblkQh4FlEg2XaS3n7KZXfI9ezB54Hv8CY+B2+f1y/5NscChA9jf0HjD9SRDH3BWhebx/wvf2QMATovCMRtpxHpHzky8xY15WMV/M4XqUPfeMUIIBirhUGlT4g4NLJxMxp01kqVWHGYaYMLOythiKAxZMsSXI9D0D58SZDmbRsJQABZ9HFWWxhrMej8X1Nh3FiUv2DvT8CWTHZhdwv3fDuOIj3f8OXN7c111+nMxQq/4eUWSV80JkR9BN6qAN98lut2YgL8ZJXQB6lZWhbeGGR6S3FiDeyIEzUvbVrGndirC83iUFEEpiB+egM8PfHYvlyUvyzTjpzhnQN1HnhQYRy6FXsO77W3lJvpiU28qopCbiJeVuKHcymXq+UHbSvOrynwsBGOGSOCBgyh/dPwd3gVhwWER55zrN6wyBPNUIBAvkUyi62fn673v0RB+rlWFCBeG4aFu+Z7WTrZj8UDfXwENTdo4owdPPIq8e2RYNh9K0apQCpWtk4AZBqeUiKfij0UpAT3W5NzQSWgqbdNcBiIDbAWkJigQBN+qT0FnIzxvg7Y0GTJcIiUCICVRMyJ2BEYyOrLDlKrMXeFj0CvYdw9af3/SFlB9ZhKdsgi+mQXO6H+KkTFtfP4nMLFB//SwLI6On3iQLOTwTbeh7KBkFAyilXsjsHfW0/loIAl1WSQwlSyr2R3gOKueyBJ9YjkZIRcOOYh/7ABTsVwsQaI9YiTK7ouXlQgpwC6IpSgNSuaTiTc/k5hIcKGPUoqidHUwiHGftJW3Pdj6KgIJQ2JVugLP+lPQOHgrfvjdC8S5X2/6u+wFf4S8JLIfbjnw7spfCXkSDwZfzYgr/3xjKROQgrqVz/DHK5ckRF0byos7tsx1Fnk+acxIR8CXkp1zN3JCmmORkYRVTS2Rksr7txg5oPCcNnIkIx8maNUoA4jjwGT0Vl5KhqSwA2t2MrOmRFxX4sMpO0ZcMSbhEYCgFvA4VfOCWuu4B9ZJbmVj1DMWm/SxQCnC8Ev2OTp/+gg21vhAp6rjUpgymV2MhLxKyCYoO8OWjdhTuyfAXsdGCL34Xr6WC+D++fxvfbcW5/NM4JzH3ohmOBATxAwLHOhTpasi70FaxIbSkfAT4BIYWQS0HDcYG0ehgMj5WPQXxryAn2k6zDPo+puMaMtYjCYKUQBsul9bXgklnRWIkR+lXKwWRGiIyhWJebYBt31VC/GPHdNc8hl01eT8FgOR1A+yhK8N23ryqnrrDvVRsr9Q+eOzyB+R5srPgBfOjCfAQFB4XLIYEpfcfoRV4eFD5nB16PQ+FBZ0IzC0+dZgZjalN1ABOzmV5n4XfSVDwDiPTS+9yE336JLYJeIaCE560lVlDebdc9O0Epx8urJfq71eOE/B+MPxk9MdFQYJQCBBPjfMA4Hg91NGhq36rCrcutGGPWuNC+XywD/iCgFnraPF1g9IbXH7BsLVogII/EBgYWXskp3EnDmz9/AHGA7wTX2ARzbWKYIsMW+fArP37qMay4yFTOO2B6cAAiN/CExH6M7YV94ktdnfy53MN1pABJTMEMvRhx8x0tBd0DeonWGgGllS1+IAA0YdhECk/9LLJBe15I5wE/cIhrHQc31e/Nrml8CM/t7LjSWDxdygvkaITBOqlQL7txlex7UNQZEh98MGJeWD+M5w0dm+vNTZpakT8RKzMyvNMcnpCSgr6HPJZc98/4h9atfRpx3muKLfv2VbRIIJSVUnSQ8gO88FcgH3qRuakX2LkzaY+VoCJXglnsqTRnmR5Hybtxdr9Lc07iQv4MPBfYV2k2MNQ4gBc841siAdLJv4EJ2ovqXghInJ2rZj+iOyel0m+YoLtXGKTZ81xq5wVxnztpQm/4CQtiEPjaOqNAABN9GlNdPr8ZHtEfRgK7rVFQYdu0CPiNAGd8AQQu47TbxJYChPLggljZzf8YnhM/QliZre2b63aXUpW9J54IYNcxHmMaxOm//4D49MF4oqwfVRgNlTQqdC3tmy7aoSvthdKNOfkGHKjfhmnaBOkApiCooRnlgmBL8Bo1zGDNmobzMUbPoptMLJyE5PmeS/Y1199mIn+HeZLU3wgZpP8adJin4d5hxFbA4aW7825ccRlYfpptffFpdtWJ+mmah2Mx8d/zE7Clgo2N7uNZ7QuhpbPFHwQ4jBVktX6KXrUThNJTRpW74nVmrA29OL6XwzsumcUoBYgSBjnOOHNdjwMepAL2qdMmjRXjKrP6L5YBY2Wr1wMBEpqSS3c+dzdbN/dUPYi2VFoECkagVo1v42NV4zkWsg0iqUsRe/zqgtGxF2qDQPXqhpXoZXPy2UiZWMsqPwdd1eqGZRgX07U8dGL/gYTRO/zEI651wUvi17UnbaDD9AQt+2oIYJ1U2nHd/KjJ3clLBBvNjyM0BkKAKcXJELVp/BVPwXcx98eErL3L0FMwKjG8KIMSCMW7u76Ns9H5hnObZPaWGnFG8ObV7UnuSH95l1NYOsMhG/G32lBqQx4qkY4obB1fZYR8VOQx+fMdoXRXTBsxw1LnMLg4POOoZEtpCLh5JsdV1rJsptKIB7w0FOxdpiDgYHqTDAul+99W+WFKp1o++hCoXtk4C+8T4P0BISJiOQsmv5EQAUxfFyfqL+QxC8Aw9nAmFLUPfdIETqLmIcXZHNAwV0+hOo0Dfl/UGIbVPrxAfswpj4AhBcorMp0+vXetHZKrylUNk+GF+QXHSZkZ+ooiEgp3t+uK84YEwLwvj4TAGLHxdbeYH6ljMC/hYcUVP0RIIav8GAkqI34zYCx74/VpI7ojaiZ+sHsmFrZaLec4tbVGKLToQtkt0d7IgZTfjJEXTTRhxKIe/73tG6MAqV61YR4OGoiFbsBEH9HgkOnMQZnJID6mejgiosI2axHwAQE6hAvRjpqaYCnwUR9qtFVYBGKFAHfkfBA0MVZEBUIM1B+S3dnWXH9JINXbSmOCAMK5Ua4HQ7ZwUjq7YgKs1mRgOJCid56Oh3UIxkl5+5DWHVAE8ZBR/Zchj6/HNSlAuHNs71o7JBIZh5+LH96uvVBkSO4wfoVA0mh5mdF5PwbwzscbkeR2AE+DPigBGMXQd6w37SBojPrY1HoC+Enrv6fCzpBxuNbJF43qn6iYcQWU9WymjnsqbyzLCEMfy/H6P0808HgOmxurAInqGfSzXc4FxbOb6medSasLS0zOzVTYBSZpHW8av0r54b6CCf4KJioujNBSwDRkLT8xQgAhH8kyGgoQo0ROgxAmASLrwuuiQT/Yj+YhMBf9rF9SxmH6IQl5H4Zh3e+vZ1EoIr8rDaM+SqMN5W1EoRrC4HBgG+0t9Zulm9+uQq4M/EnbT55HCz9tKAZ6w7Odzx0HCTIwexlXoL5j7Lc9gv3CONaGYujaHfPwNcJom9iXvQyT8kMKShL+U7ZudmKUs73cJ+0PedUiyYsJRWIPgGT2tviBwNGoZJ6eSnuam/nf/ACh6Dr6FIpmrPUu+H+4aAwMukHLQ8WQ+HN2BL6HAsTgjcuQjPv3pagcmxbV4w3dyPuHk60pxghksuT5sQMUrodr9wZ27jRYr9liETAPAax0MyBfm2L0kkf5eyT7n/bmOptQ2rwhPIAjiGUme4LEAV/bDwlGQIUXYvx4L/qFjkBwRkoBHSkvnWZ+M7wmSr89ZneqMFic/fNQZCE82/egIJmhpyBpKI76fYc+RFrILdhnfPXgpvq9/X4x922GLwBzVeYyCM4874+X1PnIaEYtc9g8H4kXDsUmyMXIA4Ttt73qCwJzWTqrZ6h7Tzn9gC8oFF/JCtxiQO5snLYYEoeunbO1eAjMucOgXSqfjXUdG1ETJvoIBhglQB9fKUXlOD0nxQggs03GCAHa1Kexz8v13M1E6njk/Lg5RtRZUiwCviPAuYTAOA3rLnPXPLK+daW8xHfwbIVxRKAC0pk40mVpiggBCJinoenT9RQww/vDhe18wgoUBv8nRd4crikMlpM6djBDNWsav4jvX09yBPMK5mEhKKH9FQkzPoDAmE0wWo6AhPbYM15v3pi1HL0WAT4T32FfZYtFoBcBz8vtGF33VL1cbIqmPyX2ARxG4poXpQRnr2rORdnkG6MAgTCoFsKgsgFJdAXjKsaJmuqp2PgmGgbLvE4I4KCmrMTlQZbPXaWSnUeXHEsn4CytmiOA8Cp6JrErFHeyQM33bO9oqU90nNJC4dL5uqqVjRMwkeOgbq4yT+f+iYp2h7OTeSozTstx4R0yo7JUjKrLGNQBW2CHdqdJYbAIzJo1DYeSRdesbjgDO0+EZTR3vgJnN7Y11/0osoEUScN8PpqdbK4CBKOWxuy6uZdGAq9tNGwEKDJKhRnjmUJgWWVO2QMow5egjjcyoaHinqYvmsDWzYnmTMjZUthoZbR/ntTelLcoNBP8jxkKkM/dl4IwaLK+bvKRj0C1ixdjK9tYKmXGmIgcUktA4AjQJK7285RklH8Oi+KFgbdpG7AIxACB6pWNszD0yTra2EJhVLAw/Y+xDFrGDiEgHcrfJpD/w5ziKXXM4ScKTjDHfVhfC3uVvyiag3oUndXb5v6W+scxbxuWW4CyufBziMXxqxuORnL7y/AyM1cEPARwlr5vX3PdpyIcRhE1LSezdAYuEupIHBENATbr4Hjv5p8OsAVbdbwQqGUpkwyDZW284NWSmlUsW6GpEJ8EPvzlyFCXfCpTHnSRUeBPw2Q0zOQj/lSmby1GCLur//L7GXgsyNXPltIQ4JLznEilnyntdnuXRSBkBMjbS8LYUMofouXzoPy4NmQKbHMWgegQSCH3B2OzjD2og7leEcR90YFsWw4LAUicJkLCaJQChDvyqLDwM7UdKEERYkhPj2QIyKlbHje1b0bkS8pHpBDIG6EwGPFSLX6k0MqcLxp//Jdr0px/GjS/JiSWFnyMRiTGLEKYvQoFCPGYrAJDSnSynt5mhfYUQoqCx9sKvdxepz0CRsj4Dp0GGJuufY9Ez8AHES0jeipKoYAUuFEl7r5+12y0bYZy3NubRhRGrJSOD+YeM1TDjpyI7ekcZW8VDE6JqNWdONHm/0hET2vMJE3cGURK6ekiK6br4cp9ucbcWNItAiUhwCUsFTmfrb0r7rDcU/z8/F7wZ5Xyw2Jkzg+Y1mthYz3WEHEpOgbccLYAbxKWANu/MVm7ZsOVXnhLDUM1eCMAw0AmUgGCKLp/TqXkFlhLnqavB8+gsSxlNp11mvDtKdxBHHAT803iIA0FyLfaWurvHcS9+R+XTD2ScTnFyH7t670U5Hf5njv6Ptq/BiNw3R4o87rMkPF53UTbQwrpZUupCDS1nsIy2SNZrrvUGqK9T3ku5KPxXOCSQoeN76eMixaLclonOdq6uYlfB4zQDqMra3DanG/0xqWcwV7gvaJ6PJL7YAdsi0UgbgjQhE2uvBTnrqf7JlgxfcAqP+LWSZae0BDgbCJ3HITAMnS+puedycch+nwxNExtQ5EhgFFcjR4fa9h4XhoZoEY0LN+HsGj6cuJ5rjyvLwOlU96xuX47VIA7jFF+KIUmeQewd2BpmmbiWZNyaGJ7fWtOsG+V3vMa38nZDEYhTkxUbFG30J6quxNvnO0a95IlvVAEMjmEi+J4qAu9IebXKet/lb8i5oTGmrxLtc7x642BqMJrkkHTeP2fJ6wD+XysB2lYxJmiHZ7iOJkqJjR16wqrt4drR+CoMj6byU+ZMl3ryXE4/uz3GiOAyZoWPYGMXa67FRu6f0W4q7s0ZsiSbhEoGwE8FQgZRN64GgsIR0QBHDK+Def1XSNeZn80AwHJSLg4xgxm+rjgK/ve2b/FIVC7poE8O/UVNEPYKIW7C7Nze3GcG3S1lL/CyeKN8JYwxFNReXXBSMzAAsta4eYfgQLkawc31SN0WQILR3gdKTFWDd1TkfW0FI+ynNuWwN5NHsuuoHwZWXOMSuhMIGGBb0tJCDS1noD7TmVCY+G3MoxjD5fEf9k3ycU4k9Zo/zwpeZq7rWw4DKjADA8QWOTY8FfljUYh0wfYmLE2BFZ5MNq7/URAxatFng8hWrHoXAbFx3Kr/PATYFuXxgjMNXrNUxtd+ULu4bqDGveRJb1ABNDdFbBQxWHdlAJhKWPLTeEmTD6qV22Yh/beAQ83jYXNJKxhT3HBEytsRBilW4DBHgLCljgjwJmQogOODz9Cn90ZZ0oDpU2yqSyVmWiuBwiJe+RWlpavBIqjrTwuCFSBEFhJGVKUZ5asYE2tawzhKGw2NqBBjUM3Yk/V04UpjO8OG7je9o5AFBKN8evlQnnR2ATohIYRChAcNReZ4uXXO0TD/eNgA1xRsVN7zWa4qNnWgkKAFB+e18cONPEDvN6GcFcX468tFgGLgEKAH0XR4EwtyP8hpOT7TOXP8jUQAezhxkDwhOROhhTv0RxTtbJhgSEchcaG44jz9A9pq9TTrZ3dLNHCRjwG90ohrWt+aE9PKQ2hlyS7ta2l7spS7jbonmp17jCIoQGsKKMS/hRbPz+5XmkDADH+A/ZTUmMjgsH9Q5sqTka6pwz+xX4eBYGmne/HFSeoMHijXBrbn0kmJCVyv+Ypjl8ERYXAjKBdn5tUeVTYFp9r1bI6U0JgHW2s1UYYwwohsPKzpmuaFSkMgGwboSBAE3MGRsA93aThvxWr3R+g+Lg5lLZtIxYBvRBYRFILIwsd1KXcg38TGT/fyD4djSkJS0XHDIOcfqyOhS7/7ficzJj6/YAo9G3N6oZTIeR4G+cOFGL6hqLhmMOgAtmde7g+0R5sWKFuwDy+Fn0KQZyh61WhgzuO11HoKyG2Spd9IY7khUzTEUbLETwBYqIVsiGPp4ibk7Ak9KSdERPiT/OewRfy/bJV/lSYkFqu24Pwst3nALfJOu+pPOUNf5xtfflA6D23sXUJ1oZqI/YwShHOngwdwxg2CImj/gUb7GO0TpYYgy5wJ0604a9i0A+JJIH2aFmEf5eiHS6O38CbDyPU1Ses8iORo8EyXRgCi809rGNFR/JzyWRrYVDYqywCcUNA5QsYBzH438eNsljTw/m7oDxYrvVBHQCTqN96sCEBSnPdg4Biu9aWp7F+YMokjvbeUn68fXNdVGFFymTAp9s37pqEmubpPu8MiwYJvXq6c3gOXx72GvuDRSDuCKTIZhs5pbznNe7UxoM+p/tjIOTvgFs86CmVCk+Xt51ddaJbahUl3yfZbOAHBZIpRhzcnq0xGLD70b/wVNqQJHsR9YWbZ/np02psAvSI8E9is7SYkUWSdwDbg835fyK240ooPT6L1x1JhMTybBEoBAGKkc9TWcMtavmLUjo2AXohA8JeE08EvAPb7OqVjbPiSWC8qELi8zNxRKfDuuYFvh9u/gDkDS9qzohP5MvvwqPHp7psNX4hwJ00xmnuK8j78Ve/6tS2nh6X8iUsNEfANagnPKtf8qhNZoL7QXDYj5oiIJRX6CwoKs/UlINwyfYSn5/NUqnx2it3vTlse7gA9rUm58JSYKr26wPtw3q64AXIO/o4S/Jf7XelXsJE7dmIdgzmRLeYUDudifAVq9EyblsPFQFawHDoQoFxt3gFmRcfxd8PwttjOl5fYuvnPBEqPbYxi4CGCHAukFzZFEuUoTqALJVke/umi3YM9av9zkAEuOzGiDYrVwCsxTCS5+HM8S8G9lgALPFG7qQqtZ/bsM/BWG7FYdmG8MMo2ddc/12pcTizAAZ69FViUhJu/s4ewa+OnpgYUJBJ1WDeOUp7IeFwUHoKyOfwM71sSQQCvAds5o1ildaRVJoMSv7OKL6CY+YTrGLMSgYjZ+2L2kPIqEL4HQHZ1UTt1we1DvAnWM5t0348+MCA9poD7ojV2h+YfOjI0qvAYW1sxbOl32/vtAiMhAApPRCKNKUM1ttw6noIV/8SGujzoPRYDm+PH490t/3NImARGIwAP1aJ2AZ/bcxn6EcZ228MO5aRQhDo4pIZlocMo9hJ1UAe/vpCAEjyNfD+uBxebcfDJN0IGDA/vwhRjRU29vamFO49JoWj13qQQggihdgtpbz64Ka6PVrz4hvxYhKrGIvHFnO2kUUZleyBl32yQ50Z2bfDMaWsvM1YOtVOzgAAQABJREFUUPuzqJ5RfhzzvBv6/2Lf90egqfWjkI2uhcV//2/1fE+C+3yOPBciUoDwKpbSXlyO84haB3ZBHmcVIHgStO9RdOfrzBYGBT9fiXGV+4JvxbaQKARI6ZHOgmXsVoT7GCwQbsL7y2ESezaUHu+F8uMXicLDMmsR8AkBzuVyCC98qi1u1WA1F+Ig/rUH9bh1TaD0cFJ+dJHLhFkFYnDGTkBy73eZxZd/3ACbtYhN/xkmTHEAokHM9+a78jv9Q0n7mm5kHHtCWyJGwFtfsRf/IUJf3RIxMXFq/khzlR+Ambzv4YzF1s+2Cq84jbogaZGyE9WTF4hZRRlJyBPB1MlmMeYjN9fvmoba/gMGOJjwDTgrqvmL7wJPL/mIUmFVXf9MNdZLQ/J/qL1pKzt35quFMW/2VWnd2UOQgRXmCoNC6B3EVHQnTxyLBzyExmwTxiJACxQpPehFodTc/GPIKfMX7Lwfw9jaAoXHHcbybhmzCISIgOR8BXa1IbYYelNt2LNvD71V22B0CEi5H0IaAw/r2KE6zmwo9U4FuL+ODuB4tgzlx0no9wuR+HyMEQd1ghl7IczO+zsfutR6sfUOOyHZfSk31wZsKNRQPAdjIqgi7Pk9rsuuSgS7BTPJjzY6B6ZQIXCsoWPB48GECzmsvKEt8JRfJjDk8UAC/VSGQ8bwLiRDv4mtnf2yOcz5xAmXNyHvxxwjQl8RJN4YfhYGUhHkVUtNBwVm5JmmvLtM2jxQNKZQtFeAQOx6PCSuHjf235IQyM2bA5/okm61NyUKATxtpEBWhRQemEyV0gN/uzslc90WvG7FBHuvcrW2OT36wLJ/LQK+IYBQQUcaK0SijS4Jwxl70jfAbEU6IEAWSQe8Bca0zYjKBXJ29eqGm9pb6jfr0Blh0OgsujiL5NiXIrrBEmOUHwAOCdAFhwdIGBjq0kZesmcQfeFP6O93mxLmTBfsD9Hphb7am5fi/P2b660F6CFg1JtjtI/vPpCfw59oTyXUnuqFw1/ad8YjQN4+TTsNSP4wRE+58BZNZd4AAf8J+PUPQ1yR3K+adv4Au5DTlSGqKShQCCyWf4mtnRu+YRxnE9G4/goQWgd6uikknlUY9j4X2itAwEeVFd739mYJfxy3m4mpk482dvNXAiaJv0Vp2zFZUlHv8ZesLiSsSaSkUCW0qSKFx4PYgPwZWpDfIKwV5fawxSJgEQgQgcpVDZNRPdysTBMSDwDtYMeruZYB39gPRiOA0fwyVpyDRjKJtdNJpadhrfw0+PugkTwWydT4479ck846P+Cp1BnMs04usoa4Xk77JokwDeLpuFIYBV0HN9XvzaxpvAe+Me+Oon3bJsalFAiWINfub6l/3OLxGgSOM9YDhM5wUln92n5/Tbeb/oWBXrV9XaaSYrMmfJzd91Xi/zbt/DqENu+H3AZLrWmG4ZEZlUzBBHqU9nh668AujA+rCO+dKLRWgMCibiUs0kk1aEtJCMCL0HVeFJnM1JJutzcVjoBSJNDhOIIyoNl+HxRNffTge/opD8sKKSGIksicxQ/iPcURhdJDkvv0Vnz3AF73snWzrcKjDzr71yIQEgJw/D4ppKaibKZLPPFl88IhRYlozNt2JXsJFuJmKkCAvYSQH6GwPoCQTxsRe//OmHdH4ORB+XEV8Pgns5QfgM07ZLbj3Y7AQdStASkfFVJsc7izWHthgm7Yw4JWCPenNu/HMB2XzkxjeVO3HHSwkwiHxFuH4d5+bSwCOMsjzLmRhUJtp7Oz4OVyCQwwLzWSx2KYamq9CJd/BImuM0b1Oe2p8jkIplhEXouyhlWM5YhyUkxvxO9a5UXjkvLjufgRFw1FWitA8FgshyFs6nBYnmhA1LrVimybzGbHgQd62eInAjThUIioQxO46MAHmsjDLZIUGFQk2ua0G8LOQX1HMzoSz+J7SXTR70iUxzhNkM/j827Qvo2tnQPFhy0WAYtA9AjwY2Hcg4nFUA8Q8jRTc0/0SFsKwkPgwKb652vWNHYhdFB4jUbQEp7dq9HscRE0HZsma9c0fgdbonUwrogNTT4T0gGF3pM+16l9dfDqu6t6YnYL9pSLtWdGJwaQfF4K9xHICz+lE9mh0eolDA6tudAbovMnkx2sO7Ml9LZtgxEjAKWXxLmeQyhu4nrrqghfn4YSZBOUILdFDHZ0zV+/80I0/lmEJa8xKvSVQlTNX3swh+2MCOBZZiiUFI57mXR2R4Rj7JrVWgGCSX05EDU9HEiAgwZRjCbU5qQD20tb/EOA5JPpDGO57ueZK+6GQuEpTN5kFUix90KOyQk/SM7hzYEiGZk4oX2JFydlTAfLuW2IpdnGzp0ZkXZdUWb/sQhYBApAgHNJa56hhZIHk+eZtAd1Q3t4JLbQ+1iTjBWKgzVaitmxUABcv6+5bv1IWJj6Gyk/wNu52Hvgj6l9LTs7Wuqx57OlPwLk1SfXNGyBgOZMKAIrze3//lxH/B4TDpQfe/GkXdmxuc7u8YfqDi5ONn8sIhTSJ4/wzoFDYWC/MxUBWofIs7bGSAZVmCdOORq+wK7f9ShbPxshfhJWmnbSfqoOxrZQfkC0Y1ohBa6UkJ3xiPqWI/yVAXtVpQiHDJJyA9miENBaAYLHAtawNgRWyWNZQAEyc/pYliI3BVt8QSAFxYeba2e5nutQ3+8Q9+IhtnY2KT5ssQhYBCwCZSGAdMrLKLyrERuyIZDANjPHJbceZ0NgY/pXGNvPQVoHLxA2xlxeIZDk8r01qxu3tbXUXWkun6/lDB4+1+LbtZi/sEky4ED5WhbVvIxxTMYutgyFgGR/kpy9B2PAqMT3Q7Eai+8guMGT9qu25rofxYKeeBLxOlP3U0rR7OZpso1IeBjPDk8QVaQAgeKLQwFi6JqLDSOe39NgU/ElvPtEgvqWsabWC8A8lB/k+WGg8oM6UwnuYRyVStFYjqBIM3IkU8g4xg9EAGBsm4Spur4F0/l0CJj1ZSBqyuE+KGuq5uOhSJu7AQwRZNIjuflHIeFYydbNuRAumXdY5UeI+NumLAKGI4C94HiTWeQI14dV6T6TebS8DY0AVANP4Iy+H/uRoS8w4lskROdOFZ7jz9SubjzHCJZGYaJyVcNkeH780uH840YrP4CD58HGbLLhYcYEclD8FWHudhsrjBuG70i+xtkYSc/vgtzji5G0r02jfJWx519vKYVnJdumTXdYQv1DQPK/oTKEwPKvytjVRNb5yioMYTW9PBixIzEQgppaYUAjG6H8mGhe2Kv+iNHghVHJR2Y92//bEN8v1T4EFimRhGjDOvdMiLjFvilttQfjVjXMQJdWxB7hOBOYE935yZOQpwJBYm0pD4EUnKmEaIbiYzlbP+eJ8iqzd1sELAIWgYEIVK9phKUiyw781qBP3iHN3d9SbwWIBnVroazgHEuH9XajD+sEBoXCclKzpMPqkBT9rELx0fE68HdG1mG/5Kn0uz2ht6FWqKpzINpX+dbkYzr2VVg0SyZuEZLC3XkTfljtJqsdqJOl2Amev2JDX43a80vMVcjRM8aR65HbsKKjDgMDL/BCQqH/DS+kBKHk30zWe14RBvO7sXUBeLwRvP4bNpKV2gvnR+sqL88LctNGVCrGTaQ9u9ZFedEgiTzntCewpRcBbRUgac6OAQ8QBpl8oApynGKDPLZiHx4IG56pXJgp34frPspExZvLrcrebxGwCFgEhkLAkWwpvkcyw6F+NeM7hEexccrN6MqiuYB1+L0Y2iSsKfpe7W6QLtmdLIbh4gZSEmhHfwEE16xpOBf8fcdJZU4zNjzDIBwwfrswPz866Gv7sR8Cbo/8ERRFbUl4zPuxHfJb+H5I+cN9zfW3hdywjs1VGrun8pbSHPizRiU6jkxfaJaPG+vh1B8fASG1kyKj6EugIDiv/0/GvG/aeSae5etYKv1+5fWiu2B+tI7xBPfwCod3eBSlqXUNLJujaNnnNtVC0IZKt/tcsdbVaasAweZ5MSaAccZuXAIfVjiqcdblVozJBd6UyQ04eITyeSQVkhezc6fZ+Hom97XlzSIQIQLIHbAIzY+NkISAm1YW1NZSMWCU41w9zDL2JuKwTp0AJQg8I5ZjH/sNkzxBKOQV8n18k3PnK/B0WShNjU09+EHqFTaSIm/wT/bzYQT2P3AxHcT/Zs9uhzHx8x13VETj/2lrrr/Ez3qNrKup9QRMxPrKQUbtFDUp5W1UglGBMvmCe7CnUgIfk5lUvFGeA8qHweQG1rTz343iV/HDv8Ey2TcizyxYRJcaX9T8RXK1JyNi9TgjcPYUSZ2IUHN/RDjGslmNF36+EAMT8dCTMAkEMHYoAfrECVmWSZtr/RIAbK+p0ht+NyPfx82v+c1+YRGwCFgEfEIAW0GyGB9n8prXGwbJJ8RsNRoi0IyzenKMMqAccBxnCZ7rr9euadA+gWdvyKvfYK46D2euCaTkSVjpSRi/JbGLZ/z7Jq9jJYHix03I+yHc/B7IAbWfS/yAo4A6VsAS0NxIEp6Q9KUCcLCXGIsA/yPGOOJuGsvgQMZICcKRF4Pxf4cS5IqBP2r4SYW82vlz8HMRNosLWa5bQyZKJNkbs+QVHpUH27EGhRg7WGIvGHubtgoQPBfzueMg9pAtpSIgpk0aK7JZJK+wSqSSMKSk51JSuIOflnS/vckiYBGwCBSMAJ8Ca/GCr9bvQniAcGktVPTrON8ohrzmdlQGIbLJ43wQXConCF8gOf8KlCCXD/pVm4+1azZcCUXOb+D58Xr8Rai+hO0rwS7+j+qgrs04IULhJXMLhgcO5Al6zgPvIQ9LKJe+1L65DonmbSkAgWV4as2VI6gQOTYnUQHjwNxLlNW3zJvL4BCc0bjnDJ4g7EIoQX7Orn+meoir4v9V085zsam4C4S+B4ej8WYnOx+qO9Sa1hWh5wI8QHQPgQUMXRdaQblrKIST/J22ChDMboj15234ktyBJfOOxEJiwoRals3AAyRhB9WSQet/I8aeIFMDeS8m57v6/2LfWwQsAhYBPxGgsDKor9LPOuNYl41ZHsdeCY8mCEbvRGvmJ+0cDCn2YA7jVTyV/X9QgvxZl7wg1as2zKtd3XhO7ZrGFxDO63NQfGCOov1kEveUiu/Ng7vWfh4WgR8gRNqwP9ofikRAHUnEtzCHbizyziRfjlyikCUYeQZW8hFMStwalSR5hCve+f8whMZLVKFnGhsSlqmA8iC1BXlB3qMF/9c9OwG0nobXJlYx7vtIFjdL0a29IL4U9NU+MkLPBblCe6WTtwwcwJbc5qYbNAS1nBGrVjeQ1QY0uurhGMSS/VgIAjKdOeBWju3CtZMKud5eMwgBh04b8lmssDcO+sV+tAhYBCwCviKQ4WwhKjRbAZK8cDm+jhGDKmtGCIN/SF74JOxnRQ6sp0+T0j0eScSvxhn+1vaW+tgJ1cevbjg6xdnfcybeDY+P05RnGmhPfJHsocRjUCAA8FT4KUb8Jwu83F42EgKQ80khW4Dpf410mf3tNQhMYSko4WAQaFwhwZdE6CPGHjaON8tQsQjcinH+LpU7otg7db6elCAUMspJzYIg++dQKlyLh+K3CFl+W+zYIsWHk387JqMzQdt7kOg8w7oTnlZWIFY/49si7CsDLDSUBqQH/gLWO3nQQNJSAQK3lQXgAzH+bCkDgU4xZkw77rcKkFJA9CyGtlvvj1LAs/dYBCwCxSCA4FC05k0wVumP2OVSiKgS3RXTFfbagBGAEO8GCNUTqADpBRaKQIfzKmhCLsYz8RZ4hPwJDuwbOzbXbw8Y+lGrr1rZsADywo/hwjVQeqzmPDVGKaq8/dCo9xt+gcxLZhOgF9jJBzv5/eMq89sRyniB/mEmCmQ6iMs85cdezJvfj6OyNAiWfanz+l3TsJ/Kmun90Q8hG6GgHxgJfSv571gP7F0phG4S12qVFwS8c+c8KELOgCKEQq3+PBbym8/dl2JLplzAuHs6CFwFxcdkhtxwiVNWDX401VhlAEI+MvinUD6TFw5UZ6G0FXwjXSwnosExeN5KbkHLzsVzQS5hSLAI5aAtJSEgK8eOFZXjbAL0UtDzJmaYO0paRG2xCFgELAKBIoCVbj4awJoXaDMRVo7DCWNbIiTANh0TBBDC5dfqABgTeiIhg/a2CHkA4fBqCC0+l0rx39SsafzmuFUNM6KgB0qYM9H+TaDj16DnM+SlAqWsp/yIgqDYtQkLfMnkgU31z8eOtJgSlHu47iBG+W+h7IwphXqQBc8Pcr36uQ19VWR/cUGRJMbiVeSNOl0uu3Wi1tIaEALrZ++BcL0ZnhABNaBBtbSnIkWIkzoS1H4cz32Tyg/S1HpCJNQ3tS5D+19nS6feC+v8L0Lx8TbsrSYrxYeVbfZ2iVrbovKqPR5EwDIvktHhX6Mkr8TIZ+fN2+FfpWbUpKUHCKCfiz5FTHTdR2ZEgwheZWJ8pWSZdG+85ojo0LpZTMzSuUFrFizxFgGLgBYIYL2bgXjp40wNC0SheiE/tAoQLUZj8ERKKe7CeD8t8ZbhpAQhRYPDlyPn2OKMw98LRcQDkLZ/FwLPW4LsieqVjbOcFP+s5PLtXDJSvFRBIYMDIfbdNlzdQOjVGZPtGvil/TQaAhhX9wk3LzH9ewiOdoP9fSACpDyS4rF9zXWfGviD/VQAAhCEIrGwqWIEb2xYr9oCBkIyLpG/h5B9jZHh3orpQFKCICmIUoQIdwEm0DfBI+RpfLkRHiEIkRVwuX7nhVB0vBftkiJmHHMcLweRS3psW16DAHc2vea7cL4gBbn+1hmeMg0KUFsGI6CpAgThASihE7mJ2VI0Apy5TE6sHi8qKwUO1UXfn/gbvI3ls0xZVSQeDQuARcAiEDwCyHllbpGQf0EOYV10ze3iojjDeNjoILcEFCFF3WfmxaRwACJI54l/pkFSjBjRzpm1JzV2Icb7XxH65g9QHt6Fs9pLeSY7c12sg6zrC8Eis6KxMjNGVqYkq4ZqYxraOA73vQHy6LfgYF5DdfRJptUTavtjGFhJEO0+OMyP9uthEMBJ5G8pxv4P8qjXJ17ZOQxGw35NRgNC5KD8oGfWluIRQF41WVv8bZrcQdb+wo1KeKgJSIkicxPCYLVjD1GtjBgSxfpgZrGnUooQbG+4MxH/IqQ+X8k2tn4XB5EHMC/8Fnf8Ffur3fi+jbF8J1s/n0LGj16ueW4My8CzzM3VsEwKeyjyNOOvx41vQx6WeR72tKejndUhOkavN3FXqJ1njq2d/XJErK/A2KBFNqLmfWrWo/9vPtVmVDXaKUCqVjZSHPTJdgIvfRwKns5JJ3UAk3Ety2v+cJcOQ+l3qo2loAXSFouARcAiECgCZImNbfKkPkFkoI1FVDkJVyHj3R5R87bZmCEAof7fYBn+PM4fM+xer1/neNZc+IJUhsoz5AyHp85QCkQ3dyDL2NZspdwu1zQ+h2vaccjuYFx2Y+5Aegrm7fclr8B3VTiUT8D3R+AvhZQ9xkln4WEmADcdzrEv1P3g1w+2oN+SBxscq+8Puh3T6u9oqd9CHk0YhyQgsqVgBIAYnlP897mCb7EXDkKAz8QZuMJYi3jMSZjbrVHJoF5P7EfpPIB1/0/wAnkXy1tvg0PjQO11ej/RM+M4xwOj4/GXse4uuIvIrfjyaXbdzucREOklXAnjEj4wO7mU2FPBm4PBOJvlyVv2CNx/DMtkJpPlijI0JoWLa422D+E+2htlaOw+Mdplwf0uoRgjw5bgWgi+ZloDaEPPodSzZTAC2ilAmCPpwDZF81E5uB/C/QwXkNyU/9/e3YDZVdX3Hl9rz0wm7wkBSQCT8CKgYkEpktRe23rvtVXLc23V1qfX2xcZbGm1Wqlea52BRyatVkTaasWagC1K77X1rdVHVOoLtdQZovQmiLwjJAgEQsjkfeacvdf9rb0TYMK8nHPmvOy1znfrkJlz9stan7XPPnuv/3o5foc+F/G2fmmlqP9iNO6brTwE+0YAAQS8gE3calV2Rvydp8rDtLpfVa61tbDitIheYN+TlTuXrpj3VbUMHzCOh8apC9wHKnzgsGjEokr4RXrYPk9XjPN8hbx/9JlpyZ/r/LORf8Lz+0knZlqd92YQ8AEoIf5ohlV4a1oBd5t6MuzUOcuwxtMaHfWGPt+a++MrYz/76o+bkaGj3uTP2gScr7CsbdUQ18qfU83WEJNOmlsg4EesuObBraZafa3uE3r8dz7LUQLexA/vWfQO0eVBTlaBDP/Tq2uFD2bMtDzjfioPelSYgmcmrhnf89evrNqZngubtp2htPXl98YzJjKEN61/QOiMY8l5fE1uUIsSfLwS7FussSDQGQF9J5qBtTd05uAcFQEEukxAFUNmVRw3Y1OUXPFQcW+SHdWqaopVeak7BLK7L59QlfxollX3Rl1J1dTi9A/vvueGf4DXYFiz/ORDyPp18wAKlSFzKQofcJIkcxg1gOiy5EadhHfNWrnUwL6j3MTXXWbpHeqp9SFz5Xk67VjqFsgruKyGp4n8umftD+u2YYOIBex3lLk78pbtEeeyaVnzAY2854Z6zFTVQMQHNGb68ev43jW+p8fhhilNS0u37SgP4Hao54J1GrbMaG6WwNGPxOsG1owEnpOWJD+4AIgabByvn9VErxs/H9yCBWl11cplGDZg6CvrxvcT1m+Ajk0QQKABAWtW6bJzUrzX6/wu7d4szVTZzYJAIaDnzm/6SZJ5WOeMKLeAerBVJyo2s4+VO53lTN2eW973gHrQ3KsKo9CrG1oP7J8/snTMOXvt2OjQd1t/wEiPYJ1vRBnvUNr5c+rBPR0cPz/SEyfwbA2suUk52ErlfODl2A3J99cwYzZ3KKtn6rjzww+Q54YHO2RY+sOGFwAxfrLG3ghOzA6dG/4Zoz9ZlC1aqImwiqETOpSSMA/re38YS7fiMEuPVCMQnoCzy2zi+1/HufjW07qmPrDv1ks12SALAoXA3s1D9+sB5Ba1dlaTumhPf4o7dIHiQf3OQ+OGhjENl6W7QY1tH6UXyCyAQtIT3L+OjQ5+eJY1eXtmgdV6+znRNiopnlPvmpmAd7tTwH1O573mswix+q87S6w7c63zc2BNp+ZVe77MFwffA6T4jNMLcJoPUIhXQIa/mqYwa30565u/z8yfvzDam79aIRpZr7igEABpxI5tEECgfgH1/oi5aazPm4bzeLR+GLaIXSBNzSeVxy1UjMZe0iHnzwfn3B2VrYOaHJWlEYGxkaHPajv1oCHQOa2fJmRV/GPL7pHBN0y7Dm/UKnCCTrWV0TYCTPJrEnMS1Xo2dNN6A2u/mDfi9MM7sSBQRoG8B9v+zt1PWU1i39Or1s6Bf0b8JO7GMAH6NOd4gAEQu1aVJdNkh5drEcgWLNhO8KMWqSnWyVv7uXuneIeXEEAAgaYKLHnphmP0KBv3kI+aq8BYR++Ppp45ceys6AVib9IkyfQCiaNIo8tF0YPN/Di6jLU5Q3qq+zd9zumWPqW7hllzfohI994p3+bFOgXsUtM7r85tAlo9r/iy9wSUYpLaXoGPqG53Hw1L2ovO0WoUSDo40sqmH2t0HLMg+OCHpy4abN9Wo3rXrRZUAGTBOZcttsY9L4oTs4OnWrZ08aEOHj7sQ/sAiLU87IZdiqQegSAEVLmmiTrNKdF+5+l6qvYMj+iGkx4gQZyR7U/kROau0FG30zi8/fYccXYBzV/hV3pw9jVZYyYBNWzbJErNIpt7zrRq972nCiHr7Cd3jwzd0H2Zb3KOP/6whtDWXKIxN6TMG+qZh5ssx+5iERhY8w1l5Wa1co8lR+QjJoE8gOs6M4Sf7Tld9yBLovh+KL4HGAJrms9GUAEQ29+3SCcmAZBpCrPWl9MVKxj+qlaso9dL1VrZucePfpm/EUAAgWYLOJstUnXQaVHcjE2Jk1d2/UStfwmATOnDiwduGdyh82MTFaOcC6UUUA82nZ+7Spm2gBK1Z3Roq+qk76NV8uRC0/xfxqWVm3aPvO9dk9/hr4YE5qXP0XYnRDv8lQ8gToynelDd3ZAPG3WHgDNvL54rCDh3R4EHlMui4v7ODqX4VB1XDQ91Vxf64jvUOnoCTleMQQVAeo1dkPT0atzOCE7M6UqkDa9XV61cFu/NXwsBfVQ6TXeoIqZzYxO2MHvsGgEEyiWgR5OFpqcvjpuxKWnzh69HTWYfmfJtXkRAAmMjgx/Q8DjqBRLULStlF7tA3oNNE8o6AiBNKWpn/s7yGX+aUhZZWt2pR94rn36R3+YkYM0Kbb8m2nqEfP4P8xM9pxKUndOJEvnGF625W/UZ/2D6Ih4KLvIijDZ7+dBN9r6O5M+5tTruMcF/P/j7qMrETuPm7euIYwAHDepp0trs9MPdzQOgLWcSnbWV7NgVqwxD7dZfQPlF2d3Dw279dGyBAAL1CyTGnlH/VmFtoeYMT+zZPPhQWKkmte0W0BA5A/QCabc6x5tZwAdw3f26hqlhDMtcBcZGBz88133Es72Gh9TcRzq3PjI2OvTlePLV6Zxkx+oze2q0jQCLAOL96gjyWKelOX7pBf7cVMZ3mXzOhdKnlQR2hYDuqcYPKqfuiY5k19q1GhpOjcT1zRvyUsz/sdW8ZeX+kLPRyrQHFQBR1+gX6ZawlR7dsO/t3ZDJluSx6Jb3iElsZy7MLckUO0UAgbIKOOvOiPs7L/8+31NWf9JVHgFVAt7osvTzxvoJElkQKIOAD4DYR1NnGBa1ScWRabgnenp5TP/d6L64d9cEvT+adG4Vu7HHmv4F8Q4DXTynav4PSwCkqedNhDsbWHO7zpOPqEFsytCDEZZviFkqerCp94cd60zy3ZIoPgt5INx1phdNZwqu7qMGFQDRo8ZZagVYdybZ4GmBbNFCxgV9mqPO3/zDriaWu3A1AZA65VgdAQTqF7DGRvydl7dw3a96Hh7U6z81unIL3f/9rYIgDIXVlaVfwkz7IbCM2bn/liGG8GtS8ciTIKea72v07jv1uPux7O7LNTE8SxMFIh8BIX9O3cVzahPPmLh39SUFWr9HL5C4CzmY3OUV9/ZBU8naX8/2dw+dJKflwff+8IVdBMLvD6bcO5DQoAIg8jmnaBXTAakYDpk5Uzl1jZ7YCCI1VJxFl7InG9qWjRBAAIE6BZw1Z0X7nZc/p5td+ufHdbKwepcK+F4g+jz8gx8aRnf4XapAtksj4DKdhZYxlptZIM5832VV3Wd36+fbP6K5inXur3W9+24zadmXF3CnRf0MrGuS8shzKid7bQJFL5Br8/lNGQqrNjPWap1AXnHvtpte1/45jNJsle474phnOne0DM06w5kaWgDkhVHfuMxQUE15K62adMWKeLv+NgVpmp34i8nEuK90af9FeZok8TICCMQtoC/o50c7VnVRwbXbaQz9uEuR3DVTIEvtx1TB8x9RdFNvJgz7arNA0YNNldWPtvnAUR+u4uz9es7r3mGwkl5fvtftHhm6OuqC7ljm7OnR3lP559Q0VUDWMiRfx86vAA88sOZTSvVXGAorwLKLLclFD5CHzUWndGBoZHe8OE80vv9lyEteX3loXM9JjPgzQzkGFQCx1i5Ugc6QHd6aSSAxqamedMKZRsM9stQrkLdG89FUHnbrpWN9BBBoSMAWlSENbRvGRm5Pltk7w0grqSyDwJ7Ngw+pE+uQeoEwFFYZCqRb01B0UNA9IQHcZp4CB24Z3KGnvFu68llPlT8urWzfPTJ4UTNN2dckATWkDLyCa1J2nvFHMe67vyY99IxX+RWB2QUG1vhrzh3MvzQ7FWu0UCDLe7B1IPjh82TVA8StMRotJ+ilCCL9mED4zKUYTABk2brhl8+cFd6dWcCqYUjymOmfN/NqvDu1QN6dzPhxnplEfmohXkUAgSYK6DvvFYHfhtWgkRzYu3mQ4RpqkGKVpwX80DD6bFzlXHZIN/lPv8FvJRZQOfkHs/zhrMTJrDlp+Xm3y1mrB02Wpgo49/3MZXfGc67UoKNnDAV1D6hH0RtrWJtVGhXo7TtZLd0b3brk2/lrku/9kdxf8oSSvDIKZD0/pwayu5gPpIyFM0WafL2UH7bM/xR1VFOsFNBL/t4wrfhRVjo1p9pyM2++Dh/4k7c/F6yGEWN+zRlP/mACIHrGffGMOeHNWQXc/Hm7st5edYtiqVug+HLZZZz9Sd3bsgECCCBQt4D96aiHfFQzfv1vZ90sbICABMZGBq/SCXQ9D+sBnA56sFXF7n5V8G7xPwGkuMYk2icrByv31Lgyq9UosPfJyk3WGfUMzINMNW4V8mo++OE0xK67SsHd74Wck1Kn/dptp5oeVRbGuhQflzGTzbs31iySrxYKvOUkP/fS+xQgrHRV8LmFpC3btQ96OA3rkqmhQJbdqt/3BR8EKerZNMqK7VAAxJ0QRXDcOzrzsHH91FfO8AEMJgCiiQbPmSEfvDWrgDPZ8uVq9hJN87tZc9zUFfILs9tjLlq9van7ZWcIIIDAVALWnBt8S5Sp8pW/pgofVYgqf1QeTmvEG7MJ+KFiNGTMzfEPFTebRFnf9zVyecv2WxXv/GDq3Jsy535LIwzcHsetqBs/uOX9TILe5NMvu/vyCX033O5c2h09vIqKn3+vOvPpJlOyu2cKOBN3o5I8YOgOmbes1L0VCwINCAys+YS2ui4fJq64LjWwEzZpmYAvEx/8yNL7dAw/T9TFpif5H/r3Gyb0IZPz880+pstY++vZNu5YJMOTo2h0WHxud/M9oBKdYemd4b2yvfWS4ru9bMkKJD164kxPWrVAqVVTvEDSXKZk6uldy4EyJYm0IIBA1AJnR507Yw5aZ++OPI9kr8UC+mp+d5ZWr7ZJzzkaQL/FR2P3tQv44Iee0537WwU7r9kzOrT5yLbL1w/frsDIWUf+DvFf9WTx4+j4eeFYWiCgz/XX9cz3es39+PwoKiWmM8p7R2UP6jNy1b7RobumW43XmyHgfirec0nX27TiH1Qfa4YU++higZ7kMo2ZvlIV7ReYtNrFECXLuq/Y9nVRLvuWUvZhM7DmhqdSeM2DW02SvE59QgJe/D2jGzO3P97+50I7sVj3pKflgb+ABfOkV9WZ1JgOzaMSDl4wPUBE+pxwWEuYUn2JZccfe4oeKBQ6JgJSVwn5L520qqHD7MN1bcfKCCCAQIMCuuqsjPZh3d/nGnMoM+62BnnYDIFcwA8Zo6HUPuCy9CFjdXvD0nkBf8+kVooKfvy2hiq7+JnBj8XnXr5Mbx4T9n2o+qQbs1d30r4VJksLBPw8PxoG65FovwNzM98TUvMYOfcZ5ffLLWBkl5MFzo5iiJPJeSr+yu+prK/0Yv6PqXx4rXaB33nuTzTc9x8rCHKr6WXe2NrhWrimv6fKy8Jeo4Y+v2oG1j4d/MgPa5cE/13p82jsfnPlee0P4yTO9wAJPwDiB/lxTvOoUF8526cxiADIknXDz1NGQuqtMpt7+9+vZOPVY4/VZyK/S2r/8YM+Ym6mC4qjdVbQ5UjiEQhDYPG64TN1rY64Nje/pk6oYnRrGCVCKsssMDYy9Fm16/iTIgjCPU5ny8pX6pons2rlZQp+XHd0WpKeZInupU4LOgCiU0zBj73K6A+Pzh9/N1VgTNLxttjS85hy9+3dI0ODTVVjZ9MJnB9tL8Hi2V6fF6vedSwIzFHgojV350MrVStbTA/Vb3PUnNvm+Xwf+qaoTFyiXh8XmYtOmdy6f+NP1KDEnBD2PZVuqqoTamjsOjNvhTPHmP75y4K/3Si+BzSPCoHw2T50QQRAlMizVRk0n44LsxXndO/rJntB/66sv3/yRXO61Xl9skB+QbEa59k+MPkN/kIAAQSaL9BjzYvVqj3ipw5fp+X2Nl+OPXarwO7Rwev1mfmQJhPeEcf8EqGVZBF4Uq+uOzWMwJumm8zZJW6+cnZy2PfzeV4PagysO0IrpVDSu2zdhnfpue/no2215Ye+yrLtChK+JpQyiSCdK4Kv4Jq2EPJr0gFdV2moN60Rb9Ql4HuCWPMbGgHjR/QEqUuueSsX8334Fv3vUPDjqil3nFbUq9asCvva5q9fdrd+OtODzZrnhe13+Mwo6iv36HvggcOv8M80AkEEQHQTfKZOTPrhTVOIs7+cN6A6mK8Xb1uq2RnmtoZa+9k757YLtkYAAQRqEnihbgf7alozxJXUmMkZ+6MQk06ayyugniAf1S3OX2g8/ScJgrSznPzDqz7Tzt1snbtELdqPGp7h6bRozWNszzw9e4R9M6rUT+wdHbr36ZzxW7MElq0bfoVmKxywNvSh0qYTUaO0LKvoI/De6dbg9SYLXLvtBU3eYxl3VzW+5T4LAs0SuHCNgvx2wFQr9xAEaRZqjftJdJuUT3Zu36Xgx0en3aqvxwdATgy6Aj+vuHdqaNyhngvORTLXmL8XN2N8D3iGmZcgAiAqzhcqG5rAO+wHppmLooXv+gnQjz1mgevtZf6PRpjzC7OZMBetZsLLRvzYBgEE6hLQCPOn6utOQf9ov/N8BIQASF1nBSvXIqAW1VdpXP3LVMG4kyBILWJNWCefyNl8Xrea75wp+OGPpPv5VcFf1xTAVRW2WiuyNFtg4fnDx2ni80uSfPLz9g8F3uz8TLk/P063Mdf5XmtTvs+LzRdw5kW6+gRR59FQ5nVN0nWVa1JDeGw0o8DAmhGdW+9QEGQLQZAZpZr3Zt7zw23RNeudCn58auYdOz+s6JrwJ/DWSCvOdqhXrY1jfiinfsnG7J/5fOFdLxDIzYBbbRMfCmVpRMCa1GQrj13g+nojHlKlEZkat8nyhzB1QWRBAAEE2iGg7zw1f23HkTpxDD2rV611P+jEsTlm/AJFTxD3pwqCPMLE6K0sb4UzknmaVzj9y4nMTZrsfNqjWvs8BQ+mfTuEN9TTRU+Z9AhuRVn1JfY31ebogsBPkelpNLWX5ioazZz76+lX4p2mCzi3tun7LM0OdR12Tg+qluGvSlMmkSWkmHT7bQqCbD48GXdkGSxLdvRZ7vftvdMblaI3Kfjx5RpSttD09S8MvwdI3tB4ew35bcUqPxV8AMk31s5SP49KpwxbUS4t22cgFSya/4OlYQGXqgfIqpXLTZL0B32BbFhgDhv6C4pzuqAw1vMcFNkUAQTqErCLNPRjXVuEs3KRr9laioeTH1JaRgEFQTaqovq3Vdl4W8wNfztmr+uTfPe7dPwP1OvmnQduGdpZY1rO1HY1rlrG1XT9smZCXdhGy5i6kNO08PwNK9Xz4yMeWDfeIWdl6rT7z0yW7tD5/8k9o0Nbp16JV1siYO1pOqd6o3wGzm+p/HMq16SWnDvstBAYWPPvqpj/7yadUOW8rs/xttHqTIl7T9/We/zQx82Fa39RwY/ba0uIOz7458W0qqy6h2vLbwvWsub04AMg+X2T1dyaNM6p5QwpfQBk6brhl+oyu7iWzLDONAK9fWNZT88TwV8gp8leG172N5Z3teE4HAIBBBDwAvHO/1EEdmihwnnecgFNxH2jOnC+RpWON6nOXeMWFcG3lh846gMUhpps/jZV5P6WAplX15NdVQE/P688qWejsq2rNkUa7uvbZUtWyOlJzrh0Xl9ivll8RiMMfvhB0zJXUc7+j65L14ZcVmGm3Z2gdEf6BeCzZTWnTPIvYZYNqQ5G4KJT9uSV88b8vS5oB4wfqollbgL+vtT/OLdD3WnfrsDHW+vboV0bdGC3uC8/oDxrqLUOLBt3LMrP46Ab5sit+HaTo2MeqBpOo9IHQPS5OFVlujT4B6YaCqNVq+iG+5BbtAjChoD9FcVO6KdD4xI2lGg2QgABBEopUIzs5f6plIkjUdEJ7Nk8+JAq6X9BGbteFZD7abU4hyJWC0UFPSp6Tvy8xoD6bVXkfqH+vdnwAyDGHGQC9PpLfqYtlq6Y9/HEmrPCb4U5Uy7td/bumnjPTGvwHgJ1CxQViA8wT2XdcmzQqMDA2t/Rpleqwv4h0+PbaxW1r43urmu3870+fMW7c/8ugz9U8GP6yc6nRzol6ABIce4cUvZumT6LLXwnOfRzLdx7G3edfwYP6BlHc8ewzCZQ+gCILqqnOmuWx9gberbCadb7mgA9S/vnV4iANCya6kvJfzmxIIAAAu0QiHT2V3+fr+bTzny6HYgcA4EjArtHBn9Tp94HNS/I/cwLckSljn8TjR6TZTvUkeYDsnzDnpHB/6xj66dWVV3dyqAf1vNhP2xDeX8KgV8mCSxbP/yHes779Wh7aOmk1/feTk0dM5zdfbkaVLF0QCBe9968w/A1HTDlkN0sMLD2Ut3Rv8ek1c15HXb+3djNIHXmvUfT8qpBieo5P6Gxr96meqZGG4YpAKImKWEv42Zg7bc6kwV7btD3pJPRqubC1U9Mfom/phIIIABi1ibGLqHyfqriq+E19dM3PckS09erCZJqWJ9VJgsUjRr0BcWCAAIIIDAngXwC2OpNaj1d49i2czoaGyMwSWBsdHCDKiIv1qTd38jfKFrOTlqHP44S8Eb+c5tWv63gxzs0t8plR61R35+hV5Io/XL4TH2ZZu3pBJatG36F3rtIc38siagSYnJ2bZ8/Z/5UPaa+O/kN/mqfgN2hY+kpuHioa99xW3wkf32eOKTKw4Zajrc4cew+eoGBtf+gz9RbdO3emFfmMyTW7EXuP7PzNLVxWr1PK/shr37fDKyeQ6t9tyro707vYcwPZodr1RrunFbtua37zRQEs+6Rth4z4IOVPgCij4Umgy19Mkt7CliTmuyE5yzOFi5YGkGEuFPO93bqwBwXAQS6UmBb0De0UxaZvs2dOrY4u3HKt3kRgTYI+HlBJg5WXq9nhXcrGHKo6A2SP4C14eghHUImCnxkzu11WfXPJjL36wp+fDakHLQkrbqGadL361qy7y7bad/ZGxZaay9Mkp6z4/u+KwrT+p5T6cSX9Nnhe6+z5/etuqBVY4t/5BWpxnyos7QcvasFfOX9wNrf1c39a/Mhsfr69VGj3u5Z54Sv6PcBIt8NfmJcgaPk9Qp+qPfHnBeBB7zk54ptZOivZmX6XBVKs/bVof3kzzCaB8r8qEMJCO6w6n9V3mXpSzc8V6fksTyaNlZGusQ6Z3ur2aJF+3TRPUbR5sZ2xFYdjEyDjwAC3Sag770v6ur9i6ocWhj+jZkvveJbXB0SP6pW+Nd3W3mS33IJHNzy/n0HjfmwUvXhZes3fF3PpT9njVWTPL+E/iBU5KLx/+qzKhANd7XfufRmHyzyXo3v76gtdWMa6uIrs7O0+vFQ01+2dC9cYC6xSc//ygPjZUtcM9Kjih2dL/ekzr27GbtjH3MQGFjzKXPNtr/WxU3jRYV7DZok4CtTxw+NaPLzv5n0On8g0AmBgbU36LCrzTUP/qX+fbN+luaBkPCHZ5qb5pHAR5qqgjrzFdSXKPDRzOGeHtE922lzS2SHtvbDgKWV+xRAK3pldyQZdnHwXwn+EbsYTu2rHSEM8KDlDtEm7gSV6YpoblbafILomus/EhNpX/9jbT50bIdjuJbYSpT8IFBigcMtjO+JoxWV/xoyviX5DWr4tKnE7CStCwX0WfslTY7+Vp2bo/rp4knS9Tn1Q13JwGXpFv37dm/T1OBHcR24PcjrWlGZvUPXsb/rwo9J07OcD32VmP+tb4am77sUO9QDWOayvWqHdoWGfKQXeSkKxX3e9M0rRUrmlAhfoepbTWfZPaofuZzJz+ekycbNFhhY+0fa5a/qJP2qbih25r0e/DnbdYvynM/zoaFY8uGu3AcV+Hhx8+e6sKP5cULz9dewNNWwAPa9nU262xd8z8B86Dm7TedXBwNJnS3Feo9e6gBIYs1xypACICyNCmhiwSxbujieFi+NQsxpO6uu0ywIIIBAOwXce1URubMYoqedx23isYoKVdUZZv+oB6HhPaNDW5u4d3aFQFMENCzWtRri6QJVVl6pz9xNeiDT/9W6tluW4nNa0VBXN3uD6oT7eW/SouxfE1wApKhsHFO78b/QNWxzi1y6arfq3fihxPZEOu+H70HlKtaZf9y7q/L3XVWwZc5sNv+tGnrmhyYfokfX+BCXI3MsODei4Md7VJnqW92zIFAuAT+h9cCaX1aihtQN7iu6/z9gehV87JZAiA98+G4FafpD/aLhD+1r9Vm9tEWF9A1d1/xILy3afQt2m6j6WV+S+s9ndJ40Ovl7sxL2FaPevcEuvtx97yLNMxZsHjqQ8HKXuLMr9Bx6jC6cHaCJ4JD+2rJoYZItXKQJ0DGsv0T9DbJ+Bp47h8mp6j8qWyCAAAK7R4ZuUCvZ95iseqG1yc9qqBBdxsO4jqtyS2nNdH+bqlW9+VzVmev33zLE5Gyc1qUVOHDL0E4l7rLF64bP1CftddZVf8kmyc9rnGb/oKa3wvjs1Q6sextfsa9Fk8L7SrQbdcv4DbVWb2mPVw2ptbF/gYYcS3p+JTct8/AY8tG11w9j9JCuY3+VVrJWBYXycuiW/2jYuU/os3VetENfFQX5Iw19dVV29+UT3VKupc/nW1bu1zBYv28q4+9SWl+l+TP6dfHTr2W/tvtrtX58peH4IfX6MJ/Tz7+oQlVBEBYESizg57jYuOPTJhm/0FQn/ptS+koFIBfqd33syv65q9M1/4yqMrpXbY7HD/mGEl/TzzdVwX9TnXuqb/Xx3n8z/ZWrdaPydgWZ+jWkVHltfWW9Dw5VJjSsqv2M5oT88/oy24K1s/nvM9Xx1+i8PF3fDS04QKt2qe8Ef65VK2Mq8Kv0ffDFVh0pxv1Kr7zL8vXDv68PyF/pmqISZqlbQE+z2YnHmb2v+kWT9flOIJF92dQNUucG/svMt1oYWLuozi1ZHQEEEGiKQF4ha82LtbMXalTDk3RRWtKUHbdoJ87YJ7XrB3XtvEtVC3e1ukK1Rdlgt10uUHzu7DrdBfyaAnoXFAFI9dbPb6NCvZdSbvx9je/xkVUOKS+fU4+Pr7jU3rxn8+BD7SryRecPn9Br7Zusdb+SB3d7+kp1e5rf+qUTPk1b5PPPcvqaesR8r10+MR9HQf0LFfz4sM7CYw5/mCLLrg/+axg5535D58yXI8tcHNnZtH2lse58nX9n6WK4Wv8+p+QZO6D0bdPP3UrvvapQJfBR8gIjeVMIPPW5M6/RZ+63FIBUIMRX1utJIcj7Kn8vpXz6hiS+Ut/nxWQ3Ki/X68Xv63Pa0sYkk4Q3/djPt6Jhx/zQYwru9i/SxOg+uFuixQebK+P3yebrStXX1ADiJnPRKXtKkcJrtq3Xd8Llprf/lXmguez1pf4mtaIgYpZ9Sx+ejxH8qP8s8h/d0i7L1m14V9KTXFG0vittMsubMAVAqqee5Pa+6lW2uDCXN6mlTJn/QkvTEX2J/Uwp00eiEEAAAQQQQKClAgvOuWzxvPl9f6RnjrfpQCv0b99TQzmU+kHJP6DrR2lUhax/GlYEx9yq3z/ZwiGuGiqL5ed+YllDGzZ5oz37Hj5Iq/0mox7e3dL1G16is/HTSZKcFe1zne8xlKWXj40MXdYaRfaKAAIIRCBwzbaLlYu36udM3aT0quK5qJP091Rlva/y91P5PZVS7ZxvEVPVb77xyKeNS67VfDzb9Xs5li9NLDWPP95jlp3YuUjI2MOJqdiD5g9OPFQOlFlSkQfpsnNVxktnWbOzbzv3uMnmjxrfq5GlIYHiYtPQpq3fyAdAenp7r9C4xK0/WIRH0PdHNvGi5z944OUvO4UASAMF7MerrE5sVGT1dxvYmk0QQAABBBBAICIBtWB/pR6O3qyWfy/RGP++0v449Q7xXWz1aycf3P2DuYf2//FzEPhxEMyYft2vB/UHnLP/OnGo8pfNntTcH5EFgdkEFp4/fNy8xG5U749fiTf44XtWpaO7RwbXz+bB+wgggAACErh22wt0j/J7um/5Bf11rO6jVmg+i4VFoEF1950KiBwJdvh7Kt/LI634mzz1cLcavsn/a76rn0+0taeHDsiCAAJzF1ATd5aYBarHrmD82UYL2H/5GXtHo5uzHQIIIIAAAgjEI6CeEzcqN/7HaJjWV+se4QJVer5Af/qh6VbpZ2URENFvxbgOxQP8kd/9yw0v/kHcb5z/5xn/qpIgc2OqJ3hCB3tc7+/Rk/r9WuE/Kqn76uH5TfyGLAh0RKDP2ot12r4qr8zqSApafFBVkOk6sEPzfgy0+EjsHgEEEIhH4MI1vp7lj/IMXbPtp3X/8np1oztHf6/Q/Ywfnu4EzW2xML+fOhIMOfLvXO+rinoeHdLfW/n7qsP/+v2nlQPaveaGc/rJduu9R7XCiFb5V1OkWX+yIIBAiALlDoBYo3vJzvXcCrFAj0pzmi1dXK7BlY9KYKn/9BPOGXdnqdNI4hBAAAEEEECg7QK7R4b85OH+xyxZN3xWj7Evdtadockoj9NLK3X/cJzmxDlec4is0lwXx/i5N9Q3w6/+1DL5r/zx+6n3jvyifWhXqSpYM9/d3T+M79LkkXogN7v04x/Md2s/P1Hl8oO6Y966d3Tw3iPb8i8CnRZQr6mfUd3S2/QZmB9n7w8/70d2SJ/Bv2LOq06fbRwfAQSCFRhY8wOl3f8Ys2n7as3LcJ5+O1OjmGiuHrNcP76RiXqJ+H/dSs0jon+eeRel35/5p1b0t0/F8tQves3fU2nFyrif9fpx/a77KP/j76d8Q5L8XwU8nObeSW43A6u36DUWBBCIRKDcARDj9vmbSk386q9wkZC3KRua/8P29vVVV61crkh6mw4a42GsvvxYEEAAAQQQQACBqQUOV3w+NemlH/Kn15oTVTV6rObcOEZ3sMutTfszZxdpD/M1Abjua02v7tTUsrFYdK87oZFL8zFfNWSVH2bhkCoAxvWoXtX2/vU9GnZrj57bdyscsku3eU/Qu+MwHv+UVkABwKvVK2qlD+JFufjhUbL0a1mq4VBYEEAAAQTmLlDMp/H0nBobdywyPeNrVB3oAyDHKIpxnJkY12TfZoF+/H2Uv7fS4g7fU6nFiTE+wHF4JBTnf9eP9f8e1Hr+C8k3KtmrHw1plezVvneVah4PJYwFAQSaL1DuAIgzjypyu0M/a4l/1Fn46r2Qzp93q+mbd66pMApWnXr6ftQDzfhBtbJM9tS9LRsggAACCCCAQNcKHA5MqLcGCwLdK6Bh4j5oe3rPORzXiw+iGPrqNgU5P7R385AfF54FAQQQQKDZAsWEz3c0e7fsDwEEuk9AtbzlXdRv4X51S3tAUdnyJrLEKZs4+bn/oZr8EqewxEnLh7+ydysA4lthsiCAAAIIIIAAAggggEANAsvWD79RzyCXqHdEDWuHuIof+sop6OGu1txA3wsxB6QZAQQQQAABBBDoJoFSRxb8kAIaHuAB9S3upjKZe141tqE7NP7YoZet8zfmc99fN+4hnwxLAbg7H6EHSDeWP3lGAAEEEEAAAQQQqFtg6brhl2pIt2Gb2L6on0Oc+4LmArq6biA2QAABBBBAAAEEEGi7QKkDIIc1vuUy90g+JFHbeUI9YGLcvHkfVcurs4wGiWZpQKAIgDxorjwv1qZrDaCwCQIIIIAAAggggAACUwv4+W8Sa96ld0/LJ5qderWwX9Xw8ur9cevukcGLws4IqUcAAQQQQAABBLpHoPQBkLGRwetUhf+daG+im32uJb3GZdWbxkYHN6jV1Tn6o9lH6I79+TlAjHmkOzJLLhFAAAEEEEAAAQQQmJtAn7W/owZYF2jy89I/YzaWU/Wyz9KKAiA+yMOCAAIIIIAAAgggEIhAEDenlcy93bnsZpOoJ3U+pwXzWjz7/JKJD36klS3Omfcefl+trwiAPNuqhleKieOZ/6MGKlZBAAEEEEAAAQQQ6G6BZeuGf0YdqC+xSbIw2qGv/LOWcR/QvB/f7u7SJvcIIIAAAggggEBYAr0hJPfALUM7DxjzXzSh3vs1puwfKwaivsdmnm6yiYSoABXwqKo90oEsrf7fsZGhi/My3fiTY0yivmXu/KcAABPCSURBVDPRTj7YwjPXN1pz7iH959EWHoVdI4AAAggggAACCCAQhYCey66wSc8Jao0VRX6elQk9H6ih2ZcqmdEwwywIIIAAAggggAACIQkEEQA5AqrK/cv0+2XL1214k7PmPFX8r1TFf8+R97vxX00Sf1D53qJxaK+alP+k+gvqEjLpJf6oUUBPcAqAaPgr+1iNW7AaAggggAACCCCAAAJdKbB8/fCGpLf/Z106EWf+ffAjy+7XA8InfcO8ODNJrhBAAAEEEEAAgXgFggqAHCmG3aOD1+t3/8MyvcBLpn+Ld2YUyIctTncYlxAAmRGKNxFAAAEEEEAAAQS6WUBDX73OWPvH6h0RKYOf9yPbr4Z3n9LQVzdEmkmyhQACCCCAAAIIRC1AF4F4i/fseLPW4pwVA6s9YS5avb3FR2L3CCCAAAIIIIAAAggEKbB43fCZmvD8Uv3MV++IIPMwe6IV+jDmxrH/8qoPzL4uayCAAAIIIIAAAgiUUYAASBlLpTlpelFzdtONe/ERELu3G3NOnhFAAAEEEEAAAQQQqEWgx9rLNHLsOX5CwigXZU5ZezR17t3myvMindwkypIjUwgggAACCCCAwCQBAiCTOKL6Y2G0DbFaWUx+/o/qxLgOwQTorXRm3wgggAACCCCAAALBCixbt2FQd82vVaOhYPMwc8J9vjT3h3Nv3Ds6dO/M6/IuAggggAACCCCAQJkFgpwDpMygpUjbNdt+WunoK0VagktE/hD3uLrxPxRc0kkwAggggAACCCCAAAItFtCk56/WId5sk0QNrrIWH61Du1ejqCxLP6p5P77boRRwWAQQQAABBBBAAIEmCdADpEmQJduNn/9DAZBIu6O3Etv3ADFmt1qzPdDKw7BvBBBAAAEEEEAAAQRCE+g7e8NC9Yx4Z9LTe2q8wY8eP/H597PUXBZa+ZBeBBBAAAEEEEAAgWcLEAB5tkkEr7gXKPihyQhZ6hYoAiD7TCV7sO5t2QABBBBAAAEEEEAAgYgFFi20l9vEvtJl1ThzaTXsVZY+oqGvPrB38+CTcWaSXCGAAAIIIIAAAt0lwBBYcZa3AiCmP9oJCVtdZtbtNRef/ECrD8P+EUAAAQQQQAABBBAIRWDpuuGXGuveGm8nc016nmUV9aH/rIa++kIo5UI6EUAAAQQQQAABBGYWoAfIzD6BvmuPMz3EthoqPKdHHmcONLQtGyGAAAIIIIAAAgggEKlAYs3fW5uol3mkw+zmPcHdLRMHK0ORFiHZQgABBBBAAAEEulKAAEhsxb5p+2plaQG9PxooWP/Qk6U++HF3A1uzCQIIIIAAAggggAACUQosX7/hy9baF8Q770fe++P+1JnfO7jl/fuiLEQyhQACCCCAAAIIdKkAAZDYCt5mpytLmpyQpX6BfAL0Q9runvq3ZQsEEEAAAQQQQAABBOITWLZ+w3t1l/xyY/J75fgyqHy5zPmhrz62d3To9ggzSJYQQAABBBBAAIGuFiAAEl/xn6YsLaUHSKMFa30PkPsa3ZrtEEAAAQQQQAABBBCIRWDZuuFXKuzxZpMky6Id+irJhw7+l7GRwatiKTfygQACCCCAAAIIIPC0AAGQpy0i+c2eooeT5dE+oLSylIpxf8eNTba08jDsGwEEEEAAAQQQQACBsgssOn/4BGPtO22SnB7v0FeJcWnlnkrm/rDs5UH6EEAAAQQQQAABBBoTIADSmFuJt3InagL0fnqANFpENjMXrn6i0a3ZDgEEEEAAAQQQQACBGAR6rX2TJj5/dbzPFfm8Hxr6yl2x/5ahR2IoM/KAAAIIIIAAAggg8GwBAiDPNgn8Fbsk3vF5W1w0LvMH2N7io7B7BBBAAAEEEEAAAQRKLbBk3fDzkp7kiuK5QrNjxLio97dy9omxkaGNMWaPPCGAAAIIIIAAAggUAvmAp2BEIrBp2xnKCcNfNVScGt3YOf90d1tDm7MRAggggAACCCCAAAIRCCRnXDqvx9qvFlmJNPiRT3yefTt17m8iKDKygAACCCCAAAIIIDCDAD1AZsAJ7i3rnqta/FXxdlNvYYko/qEWblX95/YWHoVdI4AAAggggAACCCBQaoElK+Z9Up0jIp73Qz0/nHtE3T+u2Tc6dFepC4PEIYAAAggggAACCMxZgADInAlLtYMTVYl/PAGQRsvEj4Fl6QHSKB/bIYAAAggggAACCAQtsGz9hneqXdAbiqGvgs7KtIl3mb/nd9ftHh28ftqVeAMBBBBAAAEEEEAgGgECINEUpTLizCpj7XGmmMsippy1Ly8Da0badzCOhAACCCCAAAIIIIBAOQSWrRt+pVIyYBO7yD9YRLnYHp+tm3aPDP1JlPkjUwgggAACCCCAAALPEiAA8iySgF+wZqnp7Qs4A51Mej4G1ngnU8CxEUAAAQQQQAABBBDohMCCcy5brIZUb06S5Kx4e5Nr6KsszXaPDP7XThhzTAQQQAABBBBAAIHOCBAA6Yx784+6cYdaatkT431gaT7ZpD0m+Udh66TX+AMBBBBAAAEEEEAAgS4QmLeg991J0vMb8fYk942dnP/f/+yC4iSLCCCAAAIIIIAAAs8QIADyDIygf7UTK5T+58b70NLi0rH+o2AJgLSYmd0jgAACCCCAAAIIlEsgH/rK2nfG/hzhnPnMgQP2y+XSJzUIIIAAAggggAACrRYgANJq4Xbt3xofADmVHiANghc9QJgAvUE+NkMAAQQQQAABBBAIU0DtgP4isT1L4p33IzGa93yrc+7jla2DB8IsJVKNAAIIIIAAAggg0KgAAZBG5Uq3nVuuJJ0ce8utlrHbfA6Q/9ey/bNjBBBAAAEEEEAAAQRKJrB8/YZN1va+xLi0ZClrUnJ0j++ybKfu9D8xNjr0vSbtld0ggAACCCCAAAIIBCRAACSgwpolqUvNvP4+eoDMojTt2/ooDKwZmfZt3kAAAQQQQAABBBBAICKBZeuH36LAwBtibkDl1PVDRfa13SNDV0dUdGQFAQQQQAABBBBAoA4BAiB1YJV8VfX+cCVPYkmT53t/jO+nO3xJi4dkIYAAAggggAACCDRXYOm64Zcaay8xSbIs5qGvpHbb7pHB32yuHntDAAEEEEAAAQQQCEmAAEhIpTVzWp9PAGRmoGnfLSZAv33a93kDAQQQQAABBBBAAIFIBBaev2Gltfb9iU30/OA7SES4qIGTOn/srTr3xghzR5YQQAABBBBAAAEE6hAgAFIHVrlXdWsIgDRYQsUE6Pc0uDWbIYAAAggggAACCCAQjEBf4v5A8YFXxP3soB7ezl21b3TormAKhoQigAACCCCAAAIItESAAEhLWDuy01OjbcHVas68B4i7u9WHYf8IIIAAAggggAACCHRSYNm64ZdbY3/P2mR+rENf2aTXZFl2w9jI0GWdtObYCCCAAAIIIIAAAuUQIABSjnJoRiqeSwCkQUY/B4ix2xrcms0QQAABBBBAAAEEEAhDwJqP2aRnZbTPDWrYlKXV+33vjzAKhFQigAACCCCAAAIItFqAAEirhdu1//4FS+Puxt5CyCwf+3hnC4/ArhFAAAEEEEAAAQQQ6KjAsvUbrkp6+s42Lu1oOlp3cKvHoeyQc+ZTY6NDN7buOOwZAQQQQAABBBBAICQBAiAhlRZpbb6AH/6qWtmhHT/Z/J2zRwQQQAABBBBAAAEEOi+goa9epz7Pb1X3iM4npmUpcL492BfHRgc3tOwQ7BgBBBBAAAEEEEAgOAECIMEV2XQJpiink5nx9Xz+D7NN6xAAmRGKNxFAAAEEEEAAAQRCFEjOuHSetfZSm9i+WOf90HC2Cn64LZlzfxZiGZFmBBBAAAEEEEAAgdYJUGveOtv27jmdaO/xYjla4uf/MPcYax+NJUvkAwEEEEAAAQQQQACBIwJLV/QN6PeTjDvySmz/Kvhh3CFn7Ef2jg7dHlvuyA8CCCCAAAIIIIDA3AQIgMzNrzxbV6s7TdGboTxpCiElhdmD5sLVT4SQXNKIAAIIIIAAAggggEA9AgoMvNxac1y0vT8S37HF/s3YyOB19biwLgIIIIAAAggggEB3CBAAiaecf2gSirOu4vTBj8qEJj93d9W1HSsjgAACCCCAAAIIIBCIgPo7LzG2J5DU1plM5culE7fuHnnfu+rcktURQAABBBBAAAEEukSAGvNoCtp93fT0RpObtmQkDxi5m82PHv9MW47HQRBAAAEEEEAAAQQQaL9Atf2HbMMR1ZjJZelDmvfjzW04GodAAAEEEEAAAQQQCFSAAEigBffsZNvvmInxMXqBPFtmyld88CNNd2jCxH82V56XTrkOLyKAAAIIIIAAAgggELiAc+YHChTs9xOFx7H4fGjejyy7XxOfv2PP6NDWOPJFLhBAAAEEEEAAAQRaIUAApBWqndjnjx7brMNuMplLmQtklgLwwY/MVbTWZ8zAmk/NsjZvI4AAAggggAACCCAQrEDFmY1K/C1GE4EEv+Tz92nKc5fdpP/+6djo0BeCzxMZQAABBBBAAAEEEGipQAR3wS31CWvnm7adocZQlynRv2Z6+/pMqt7uLgsrD61MbaKxj/0wYZXxAzrMlWZg7aWtPBz7RgABBBBAAAEEEECgDALL1g2/wlp7ie3pu6B4PnBlSFYNaSgeV5V2H/TQT/qfxplvZMZ+ds/I4H/WsANWQQABBBBAAAEEEOhyAQIgsZ0Am7avNjZ7lbL1y/p5uelfsCK2LDaUn4o6fGTpA4oI3agu8zeq58c/NbQfNkIAAQQQQAABBBBAIECBpef/2clJkr1a98Iv0z3xKfp3qf4t3SSCTi26rHWHjLMTCtOMifoRpfNBpfc+DXl1h4a88j3fWRBAAAEEEEAAAQQQqEmAAEhNTIGutGn7StNrS/dQ0zHNij1g3nLSkx07PgdGAAEEEEAAAQQQQKAEAn1nb1jY35v1lSApUyYh1VJ1fVl6aKKa3X35xJQr8SICCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIINC9Av8fVEOpQy94af8AAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/img/wallet/payment-methods/postepay-logo.png b/img/wallet/payment-methods/postepay-logo.png
deleted file mode 100644
index a69b231bd6e..00000000000
Binary files a/img/wallet/payment-methods/postepay-logo.png and /dev/null differ
diff --git a/img/wallet/payment-methods/satispay-logo.png b/img/wallet/payment-methods/satispay-logo.png
deleted file mode 100644
index 479246b4a0c..00000000000
Binary files a/img/wallet/payment-methods/satispay-logo.png and /dev/null differ
diff --git a/img/wallet/payment-methods/satispay-logo.svg b/img/wallet/payment-methods/satispay-logo.svg
deleted file mode 100644
index 7c50b7c675a..00000000000
--- a/img/wallet/payment-methods/satispay-logo.svg
+++ /dev/null
@@ -1,26 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_406:431)">
-<path d="M0 4.42105C0 1.97937 1.97937 0 4.42105 0H19.5789C22.0206 0 24 1.97937 24 4.42105V19.5789C24 22.0206 22.0206 24 19.5789 24H4.42105C1.97937 24 0 22.0206 0 19.5789V4.42105Z" fill="#EF373F"/>
-<g clip-path="url(#clip1_406:431)">
-<path d="M-4 12C-4 6.47717 0.477153 2.00002 6 2.00002H17.6667C23.1895 2.00002 27.6667 6.47717 27.6667 12C27.6667 17.5229 23.1895 22 17.6667 22H5.99999C0.477147 22 -4 17.5229 -4 12Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M-4 4.00002C-4 2.89545 -3.10457 2.00002 -2 2.00002H26C27.1046 2.00002 28 2.89545 28 4.00002V20C28 21.1046 27.1046 22 26 22H-2C-3.10457 22 -4 21.1046 -4 20V4.00002Z" fill="#EF373F"/>
-<mask id="mask0_406:431" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-4" y="2" width="32" height="20">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M-4 4.00002C-4 2.89545 -3.10457 2.00002 -2 2.00002H26C27.1046 2.00002 28 2.89545 28 4.00002V20C28 21.1046 27.1046 22 26 22H-2C-3.10457 22 -4 21.1046 -4 20V4.00002Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_406:431)">
-<path d="M15.9379 5.72919C16.0705 5.58314 15.9767 5.33335 15.789 5.33335H12.6667L14.4822 7.33335L15.9379 5.72919Z" fill="white"/>
-<path d="M11.3333 10.2808L9.23606 8.00001L7.34876 10.0527L5.39137 12.1814C5.314 12.2652 5.314 12.4015 5.39137 12.4853L7.34876 14.6143L9.23606 16.6667L11.3333 14.3859L9.58565 12.4853L9.44576 12.3335L9.58565 12.1814L11.3333 10.2808Z" fill="white"/>
-<path d="M14.4826 16.6667L12.6667 18.6667H15.7881C15.9763 18.6667 16.0709 18.4159 15.9377 18.2693L14.4826 16.6667Z" fill="white"/>
-<path d="M18.6057 11.8563L16.55 9.79139L14.235 7.46603L12.1726 5.3944C12.1353 5.35697 12.0849 5.33641 12.0324 5.33457C12.0303 5.33457 12.0281 5.33335 12.0257 5.33335H8.20783C8.02303 5.33335 7.93048 5.55794 8.06121 5.68925L9.83009 7.46603L12.0324 9.67848L14.2008 11.8563L14.3474 12.0038L14.2008 12.1511L12.0324 14.3289L9.83009 16.5414L8.06854 18.3108C7.93781 18.4421 8.03036 18.6667 8.21516 18.6667H12.0318H12.0333C12.0883 18.6667 12.1411 18.6446 12.1799 18.6056L14.235 16.5414L16.55 14.2163L18.6057 12.1511C18.687 12.0698 18.687 11.9379 18.6057 11.8563Z" fill="white"/>
-</g>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_406:431">
-<path d="M0 4.42105C0 1.97937 1.97937 0 4.42105 0H19.5789C22.0206 0 24 1.97937 24 4.42105V19.5789C24 22.0206 22.0206 24 19.5789 24H4.42105C1.97937 24 0 22.0206 0 19.5789V4.42105Z" fill="white"/>
-</clipPath>
-<clipPath id="clip1_406:431">
-<path d="M-4 12C-4 6.47717 0.477153 2.00002 6 2.00002H17.6667C23.1895 2.00002 27.6667 6.47717 27.6667 12C27.6667 17.5229 23.1895 22 17.6667 22H5.99999C0.477147 22 -4 17.5229 -4 12Z" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/img/wallet/payment-methods/venpay-logo.png b/img/wallet/payment-methods/venpay-logo.png
deleted file mode 100644
index 44a14ca7e87..00000000000
Binary files a/img/wallet/payment-methods/venpay-logo.png and /dev/null differ
diff --git a/img/wallet/unknown-gdo-2x.png b/img/wallet/unknown-gdo-2x.png
deleted file mode 100644
index 04a01915fb6..00000000000
Binary files a/img/wallet/unknown-gdo-2x.png and /dev/null differ
diff --git a/img/wallet/unknown-gdo-primary.svg b/img/wallet/unknown-gdo-primary.svg
deleted file mode 100644
index 407b5d8004c..00000000000
--- a/img/wallet/unknown-gdo-primary.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.48422 20.4373C8.48422 21.6004 9.43047 22.5467 10.5936 22.5467C11.7567 22.5467 12.7029 21.6004 12.7029 20.4373C12.7029 19.2742 11.7567 18.328 10.5936 18.328C9.43047 18.328 8.48422 19.2742 8.48422 20.4373ZM10.5936 19.7342C10.9813 19.7342 11.2967 20.0496 11.2967 20.4373C11.2967 20.825 10.9813 21.1405 10.5936 21.1405C10.2059 21.1405 9.89045 20.825 9.89045 20.4373C9.89045 20.0496 10.2059 19.7342 10.5936 19.7342Z" fill="#0073E6"/>
-<path d="M15.5623 20.4373C15.5623 21.6004 16.5085 22.5467 17.6716 22.5467C18.8347 22.5467 19.7809 21.6004 19.7809 20.4373C19.7809 19.2742 18.8347 18.328 17.6716 18.328C16.5085 18.328 15.5623 19.2742 15.5623 20.4373ZM17.6716 19.7342C18.0593 19.7342 18.3747 20.0496 18.3747 20.4373C18.3747 20.825 18.0593 21.1405 17.6716 21.1405C17.2839 21.1405 16.9685 20.825 16.9685 20.4373C16.9685 20.0496 17.2839 19.7342 17.6716 19.7342Z" fill="#0073E6"/>
-<path d="M23.2965 4.26574H5.49915C5.2584 3.42299 5.03406 2.63775 4.84136 1.96328C4.75516 1.66141 4.47921 1.45329 4.16529 1.45329H0.703114C0.314808 1.45329 0 1.76809 0 2.1564C0 2.54471 0.314808 2.85951 0.703114 2.85951H3.63491C4.42118 5.61178 6.25931 12.0454 7.02992 14.7426L6.76354 15.2753C6.06159 16.6794 7.08387 18.328 8.65022 18.328H20.4841C20.8724 18.328 21.1872 18.0132 21.1872 17.6249C21.1872 17.2366 20.8724 16.9218 20.4841 16.9218H8.65022C8.1273 16.9218 7.78769 16.3716 8.02131 15.9042L8.21565 15.5156H20.4841C20.798 15.5156 21.0739 15.3075 21.1601 15.0056L23.9726 5.16202C24.1007 4.71367 23.7638 4.26574 23.2965 4.26574ZM19.9537 14.1093H8.31151C7.92841 12.7684 6.85621 9.01575 5.90091 5.67197H22.3644L19.9537 14.1093Z" fill="#0073E6"/>
-</svg>
diff --git a/img/wallet/unknown-gdo.png b/img/wallet/unknown-gdo.png
deleted file mode 100644
index 904fa267e25..00000000000
Binary files a/img/wallet/unknown-gdo.png and /dev/null differ
diff --git a/img/wallet/unknown-gdo.svg b/img/wallet/unknown-gdo.svg
deleted file mode 100644
index f8a31fdcc24..00000000000
--- a/img/wallet/unknown-gdo.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>unknown-gdo</title>
-    <g id="unknown-gdo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Group" transform="translate(1.000000, 6.000000)" fill="#00C5CA" fill-rule="nonzero">
-            <path d="M47,8 C47.668161,8 48.1367811,8.6373398 47.9654452,9.26151178 L47.9284767,9.37139068 L41.9284767,24.3713907 C41.8083216,24.6717783 41.5515263,24.8930511 41.2422914,24.970221 L41.1240347,24.9922779 L17.1240347,27.9922779 C16.5760148,28.0607804 16.0762246,27.6720547 16.0077221,27.1240347 C15.9441127,26.6151591 16.2747459,26.1478693 16.7610792,26.028863 L16.8759653,26.0077221 L40.29,23.08 L45.522,10 L13,10 C12.4871642,10 12.0644928,9.61395981 12.0067277,9.11662113 L12,9 C12,8.48716416 12.3860402,8.06449284 12.8833789,8.00672773 L13,8 L47,8 Z" id="Path-2"></path>
-            <path d="M10,-7.10542736e-15 C10.4284691,-7.10542736e-15 10.8045425,0.272080024 10.9435471,0.66861768 L10.975441,0.779739129 L16.9075739,27.0506135 C16.9601483,27.283443 16.9274657,27.5260246 16.8178192,27.7351685 L16.7566208,27.836754 L12.8244878,33.5658797 C12.5119611,34.0212317 11.8894724,34.1370146 11.4341203,33.8244878 C11.0137953,33.5360016 10.8828075,32.9834058 11.1109533,32.5419513 L11.1755122,32.4341203 L14.86,27.064 L9.2,2 L1,2 C0.487164161,2 0.0644928393,1.61395981 0.00672773133,1.11662113 L-1.77635684e-14,1 C-1.77635684e-14,0.487164161 0.38604019,0.0644928393 0.883378875,0.00672773133 L1,-7.10542736e-15 L10,-7.10542736e-15 Z" id="Path-3"></path>
-            <path d="M16,35 C13.790861,35 12,36.790861 12,39 C12,41.209139 13.790861,43 16,43 C18.209139,43 20,41.209139 20,39 C20,36.790861 18.209139,35 16,35 Z M16,37 C17.1045695,37 18,37.8954305 18,39 C18,40.1045695 17.1045695,41 16,41 C14.8954305,41 14,40.1045695 14,39 C14,37.8954305 14.8954305,37 16,37 Z" id="Oval"></path>
-            <path d="M36,35 C33.790861,35 32,36.790861 32,39 C32,41.209139 33.790861,43 36,43 C38.209139,43 40,41.209139 40,39 C40,36.790861 38.209139,35 36,35 Z M36,37 C37.1045695,37 38,37.8954305 38,39 C38,40.1045695 37.1045695,41 36,41 C34.8954305,41 34,40.1045695 34,39 C34,37.8954305 34.8954305,37 36,37 Z" id="Oval-Copy"></path>
-            <path d="M40,32 C40.5522847,32 41,32.4477153 41,33 C41,33.5128358 40.6139598,33.9355072 40.1166211,33.9932723 L40,34 L12,34 C11.4477153,34 11,33.5522847 11,33 C11,32.4871642 11.3860402,32.0644928 11.8833789,32.0067277 L12,32 L40,32 Z" id="Path-4"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/ios/ItaliaApp.xcodeproj/project.pbxproj b/ios/ItaliaApp.xcodeproj/project.pbxproj
index e625fd411f9..2a640f8fb6b 100644
--- a/ios/ItaliaApp.xcodeproj/project.pbxproj
+++ b/ios/ItaliaApp.xcodeproj/project.pbxproj
@@ -14,15 +14,16 @@
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		16E38CBD19D4437A9C020B21 /* RobotoMono-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 76E4CEA78E3F4060ABB59808 /* RobotoMono-Regular.ttf */; };
 		194A5D2B1F027F5A0078620E /* Podfile in Resources */ = {isa = PBXBuildFile; fileRef = 194A5D2A1F027F5A0078620E /* Podfile */; };
-		1CD9CAEA755BFC30AE893F46 /* libPods-ItaliaApp-ItaliaAppTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3A0A336CDDAE56472931AD9F /* libPods-ItaliaApp-ItaliaAppTests.a */; };
 		28E4866232804051B865FC10 /* RobotoMono-RegularItalic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 5389C36762A04AE69D762289 /* RobotoMono-RegularItalic.ttf */; };
 		2AD40B9924CB049500E4124A /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 2AD40B9824CB049500E4124A /* LaunchScreen.storyboard */; };
 		3A3CA4696BA44782A02FE37E /* TitilliumWeb-SemiBold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B021D4CC17ED4D54B7944FED /* TitilliumWeb-SemiBold.ttf */; };
 		4D331CF68DAC4800A6D6297A /* TitilliumWeb-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 11C2483C363E432BB4D0A583 /* TitilliumWeb-Regular.ttf */; };
+		544D7A6A6990E1AD0E113BF2 /* libPods-ItaliaApp.a in Frameworks */ = {isa = PBXBuildFile; fileRef = A88AAE92C2AA92D33DB25F0C /* libPods-ItaliaApp.a */; };
 		570BBC8FC70C4A76ABF035AC /* TitilliumWeb-Light.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 163BC670599B42509D4D138E /* TitilliumWeb-Light.ttf */; };
 		69A5E1839C924EE5B8CD9470 /* ReadexPro-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 2C584AD92CB24628B1AA76DE /* ReadexPro-Regular.ttf */; };
 		6B44A74498354CC19B90FE9C /* TitilliumWeb-ExtraLightItalic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 6754714BBEF54AA59833C0EB /* TitilliumWeb-ExtraLightItalic.ttf */; };
 		72E4B1EFF7D4414483079F91 /* TitilliumWeb-SemiBoldItalic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = CED8B1FF1E254583BB3F285F /* TitilliumWeb-SemiBoldItalic.ttf */; };
+		7578F223A01E0E15E7072DAF /* libPods-ItaliaApp-ItaliaAppTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 59BCC34321A36ABA56F255E3 /* libPods-ItaliaApp-ItaliaAppTests.a */; };
 		859781B477BB45579FB9A9F2 /* TitilliumWeb-Italic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = F709D4AE20E44EFAAB255A8E /* TitilliumWeb-Italic.ttf */; };
 		862C0E693C864E76BADCDFCC /* TitilliumWeb-Black.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 6A786CC45B2D4B77BDF55C1D /* TitilliumWeb-Black.ttf */; };
 		8788744508D34396942D3DB4 /* RobotoMono-Light.ttf in Resources */ = {isa = PBXBuildFile; fileRef = AFE8D23873DE458BB54EB46B /* RobotoMono-Light.ttf */; };
@@ -33,11 +34,22 @@
 		9975E38DE95949D28D07A275 /* RobotoMono-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B7088D9B42BA4275A767BEFF /* RobotoMono-Bold.ttf */; };
 		BE1A42156484487BABBC4DED /* TitilliumWeb-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 309BA0207AA24FE9A0EBE61C /* TitilliumWeb-Bold.ttf */; };
 		C2CF038002D24FEEAB41B336 /* RobotoMono-LightItalic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 640E574519CA4183B230AF22 /* RobotoMono-LightItalic.ttf */; };
-		CD4FC1EC91E60128F3E01292 /* libPods-ItaliaApp.a in Frameworks */ = {isa = PBXBuildFile; fileRef = A6F417D3B8F84EA607A5C6F3 /* libPods-ItaliaApp.a */; };
 		D18E075B28304466B6CA2381 /* TitilliumWeb-LightItalic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B65D221FCB5A461FBC44285D /* TitilliumWeb-LightItalic.ttf */; };
 		EFFA620FCD2D46F6B942663B /* LICENSE.txt in Resources */ = {isa = PBXBuildFile; fileRef = 2D52800996AA471A87A7F975 /* LICENSE.txt */; };
 		F0625E7F2326825600EDEF90 /* JavaScriptCore.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = ED297162215061F000B7C4FE /* JavaScriptCore.framework */; };
 		F09FEB3C231818E3007071DB /* Localizable.strings in Resources */ = {isa = PBXBuildFile; fileRef = F09FEB0D231818E3007071DB /* Localizable.strings */; };
+		F2B1630E2B753C9D00F6E487 /* TitilliumSansPro-Black.otf in Resources */ = {isa = PBXBuildFile; fileRef = F2B163022B753C9D00F6E487 /* TitilliumSansPro-Black.otf */; };
+		F2B1630F2B753C9D00F6E487 /* TitilliumSansPro-Semibold.otf in Resources */ = {isa = PBXBuildFile; fileRef = F2B163032B753C9D00F6E487 /* TitilliumSansPro-Semibold.otf */; };
+		F2B163102B753C9D00F6E487 /* TitilliumSansPro-LightItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = F2B163042B753C9D00F6E487 /* TitilliumSansPro-LightItalic.otf */; };
+		F2B163112B753C9D00F6E487 /* TitilliumSansPro-Italic.otf in Resources */ = {isa = PBXBuildFile; fileRef = F2B163052B753C9D00F6E487 /* TitilliumSansPro-Italic.otf */; };
+		F2B163122B753C9D00F6E487 /* TitilliumSansPro-SemiboldItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = F2B163062B753C9D00F6E487 /* TitilliumSansPro-SemiboldItalic.otf */; };
+		F2B163132B753C9D00F6E487 /* TitilliumSansPro-Thin.otf in Resources */ = {isa = PBXBuildFile; fileRef = F2B163072B753C9D00F6E487 /* TitilliumSansPro-Thin.otf */; };
+		F2B163142B753C9D00F6E487 /* TitilliumSansPro-BoldItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = F2B163082B753C9D00F6E487 /* TitilliumSansPro-BoldItalic.otf */; };
+		F2B163152B753C9D00F6E487 /* TitilliumSansPro-Light.otf in Resources */ = {isa = PBXBuildFile; fileRef = F2B163092B753C9D00F6E487 /* TitilliumSansPro-Light.otf */; };
+		F2B163162B753C9D00F6E487 /* TitilliumSansPro-Regular.otf in Resources */ = {isa = PBXBuildFile; fileRef = F2B1630A2B753C9D00F6E487 /* TitilliumSansPro-Regular.otf */; };
+		F2B163172B753C9D00F6E487 /* TitilliumSansPro-BlackItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = F2B1630B2B753C9D00F6E487 /* TitilliumSansPro-BlackItalic.otf */; };
+		F2B163182B753C9D00F6E487 /* TitilliumSansPro-Bold.otf in Resources */ = {isa = PBXBuildFile; fileRef = F2B1630C2B753C9D00F6E487 /* TitilliumSansPro-Bold.otf */; };
+		F2B163192B753C9D00F6E487 /* TitilliumSansPro-ThinItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = F2B1630D2B753C9D00F6E487 /* TitilliumSansPro-ThinItalic.otf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -68,6 +80,7 @@
 		00E356EE1AD99517003FC87E /* ItaliaAppTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = ItaliaAppTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		00E356F21AD99517003FC87E /* ItaliaAppTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = ItaliaAppTests.m; sourceTree = "<group>"; };
+		058F4F4927B1B1C84C7F1137 /* Pods-ItaliaApp-ItaliaAppTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ItaliaApp-ItaliaAppTests.release.xcconfig"; path = "Target Support Files/Pods-ItaliaApp-ItaliaAppTests/Pods-ItaliaApp-ItaliaAppTests.release.xcconfig"; sourceTree = "<group>"; };
 		11C2483C363E432BB4D0A583 /* TitilliumWeb-Regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "TitilliumWeb-Regular.ttf"; path = "../assets/fonts/TitilliumWeb/TitilliumWeb-Regular.ttf"; sourceTree = "<group>"; };
 		133638FB213D788900B0C079 /* en */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = en; path = en.lproj/InfoPlist.strings; sourceTree = "<group>"; };
 		133638FD213D78DB00B0C079 /* it */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = it; path = it.lproj/InfoPlist.strings; sourceTree = "<group>"; };
@@ -86,23 +99,25 @@
 		2C584AD92CB24628B1AA76DE /* ReadexPro-Regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "ReadexPro-Regular.ttf"; path = "../assets/fonts/ReadexPro/ReadexPro-Regular.ttf"; sourceTree = "<group>"; };
 		2D52800996AA471A87A7F975 /* LICENSE.txt */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = LICENSE.txt; path = ../assets/fonts/RobotoMono/LICENSE.txt; sourceTree = "<group>"; };
 		309BA0207AA24FE9A0EBE61C /* TitilliumWeb-Bold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "TitilliumWeb-Bold.ttf"; path = "../assets/fonts/TitilliumWeb/TitilliumWeb-Bold.ttf"; sourceTree = "<group>"; };
-		3A0A336CDDAE56472931AD9F /* libPods-ItaliaApp-ItaliaAppTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-ItaliaApp-ItaliaAppTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
-		4F044D1214BF98AC6510D261 /* Pods-ItaliaApp.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ItaliaApp.debug.xcconfig"; path = "Target Support Files/Pods-ItaliaApp/Pods-ItaliaApp.debug.xcconfig"; sourceTree = "<group>"; };
 		5389C36762A04AE69D762289 /* RobotoMono-RegularItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "RobotoMono-RegularItalic.ttf"; path = "../assets/fonts/RobotoMono/RobotoMono-RegularItalic.ttf"; sourceTree = "<group>"; };
+		59BCC34321A36ABA56F255E3 /* libPods-ItaliaApp-ItaliaAppTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-ItaliaApp-ItaliaAppTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		640E574519CA4183B230AF22 /* RobotoMono-LightItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "RobotoMono-LightItalic.ttf"; path = "../assets/fonts/RobotoMono/RobotoMono-LightItalic.ttf"; sourceTree = "<group>"; };
 		6754714BBEF54AA59833C0EB /* TitilliumWeb-ExtraLightItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "TitilliumWeb-ExtraLightItalic.ttf"; path = "../assets/fonts/TitilliumWeb/TitilliumWeb-ExtraLightItalic.ttf"; sourceTree = "<group>"; };
 		6A786CC45B2D4B77BDF55C1D /* TitilliumWeb-Black.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "TitilliumWeb-Black.ttf"; path = "../assets/fonts/TitilliumWeb/TitilliumWeb-Black.ttf"; sourceTree = "<group>"; };
 		6C4A0A2AB90C8575993DF1E1 /* Instabug.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = Instabug.framework; path = "../node_modules/instabug-reactnative/ios/Instabug.framework"; sourceTree = "<group>"; };
+		6D0115BDF703AEBFD8B86A12 /* Pods-ItaliaApp-ItaliaAppTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ItaliaApp-ItaliaAppTests.debug.xcconfig"; path = "Target Support Files/Pods-ItaliaApp-ItaliaAppTests/Pods-ItaliaApp-ItaliaAppTests.debug.xcconfig"; sourceTree = "<group>"; };
+		6F8C6AF94C801CE01EC3D81A /* Pods-ItaliaApp.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ItaliaApp.release.xcconfig"; path = "Target Support Files/Pods-ItaliaApp/Pods-ItaliaApp.release.xcconfig"; sourceTree = "<group>"; };
+		722056DF161D843DD91D88A7 /* Pods-ItaliaApp.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ItaliaApp.debug.xcconfig"; path = "Target Support Files/Pods-ItaliaApp/Pods-ItaliaApp.debug.xcconfig"; sourceTree = "<group>"; };
 		76E4CEA78E3F4060ABB59808 /* RobotoMono-Regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "RobotoMono-Regular.ttf"; path = "../assets/fonts/RobotoMono/RobotoMono-Regular.ttf"; sourceTree = "<group>"; };
 		7A83F0572152B12C000C6389 /* ItaliaApp.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; name = ItaliaApp.entitlements; path = ItaliaApp/ItaliaApp.entitlements; sourceTree = "<group>"; };
 		875B0C3A5326413494A9311A /* DMMono-Medium.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "DMMono-Medium.ttf"; path = "../assets/fonts/DMMono/DMMono-Medium.ttf"; sourceTree = "<group>"; };
-		A6F417D3B8F84EA607A5C6F3 /* libPods-ItaliaApp.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-ItaliaApp.a"; sourceTree = BUILT_PRODUCTS_DIR; };
-		AE2A89F5F6A57BDBD22D81D9 /* Pods-ItaliaApp-ItaliaAppTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ItaliaApp-ItaliaAppTests.release.xcconfig"; path = "Target Support Files/Pods-ItaliaApp-ItaliaAppTests/Pods-ItaliaApp-ItaliaAppTests.release.xcconfig"; sourceTree = "<group>"; };
+		A88AAE92C2AA92D33DB25F0C /* libPods-ItaliaApp.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-ItaliaApp.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		AFE8D23873DE458BB54EB46B /* RobotoMono-Light.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "RobotoMono-Light.ttf"; path = "../assets/fonts/RobotoMono/RobotoMono-Light.ttf"; sourceTree = "<group>"; };
 		B021D4CC17ED4D54B7944FED /* TitilliumWeb-SemiBold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "TitilliumWeb-SemiBold.ttf"; path = "../assets/fonts/TitilliumWeb/TitilliumWeb-SemiBold.ttf"; sourceTree = "<group>"; };
+		B57593872B70FFA400674515 /* de */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = de; path = de.lproj/InfoPlist.strings; sourceTree = "<group>"; };
+		B57593882B70FFA400674515 /* de */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = de; path = ItaliaApp/de.lproj/Localizable.strings; sourceTree = "<group>"; };
 		B65D221FCB5A461FBC44285D /* TitilliumWeb-LightItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "TitilliumWeb-LightItalic.ttf"; path = "../assets/fonts/TitilliumWeb/TitilliumWeb-LightItalic.ttf"; sourceTree = "<group>"; };
 		B7088D9B42BA4275A767BEFF /* RobotoMono-Bold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "RobotoMono-Bold.ttf"; path = "../assets/fonts/RobotoMono/RobotoMono-Bold.ttf"; sourceTree = "<group>"; };
-		B7EF7760029EB39299B837EA /* Pods-ItaliaApp.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ItaliaApp.release.xcconfig"; path = "Target Support Files/Pods-ItaliaApp/Pods-ItaliaApp.release.xcconfig"; sourceTree = "<group>"; };
 		CED8B1FF1E254583BB3F285F /* TitilliumWeb-SemiBoldItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "TitilliumWeb-SemiBoldItalic.ttf"; path = "../assets/fonts/TitilliumWeb/TitilliumWeb-SemiBoldItalic.ttf"; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		EE4F83DB63254F5285C36A40 /* TitilliumWeb-ExtraLight.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "TitilliumWeb-ExtraLight.ttf"; path = "../assets/fonts/TitilliumWeb/TitilliumWeb-ExtraLight.ttf"; sourceTree = "<group>"; };
@@ -110,8 +125,19 @@
 		F0625E7B2326822400EDEF90 /* libReact-RCTImage.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; path = "libReact-RCTImage.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		F09FEB0E231818E3007071DB /* en */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = en; path = ItaliaApp/en.lproj/Localizable.strings; sourceTree = "<group>"; };
 		F09FEB3D231818F0007071DB /* it */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = it; path = ItaliaApp/it.lproj/Localizable.strings; sourceTree = "<group>"; };
+		F2B163022B753C9D00F6E487 /* TitilliumSansPro-Black.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "TitilliumSansPro-Black.otf"; path = "../assets/fonts/TitilliumSansPro/TitilliumSansPro-Black.otf"; sourceTree = "<group>"; };
+		F2B163032B753C9D00F6E487 /* TitilliumSansPro-Semibold.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "TitilliumSansPro-Semibold.otf"; path = "../assets/fonts/TitilliumSansPro/TitilliumSansPro-Semibold.otf"; sourceTree = "<group>"; };
+		F2B163042B753C9D00F6E487 /* TitilliumSansPro-LightItalic.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "TitilliumSansPro-LightItalic.otf"; path = "../assets/fonts/TitilliumSansPro/TitilliumSansPro-LightItalic.otf"; sourceTree = "<group>"; };
+		F2B163052B753C9D00F6E487 /* TitilliumSansPro-Italic.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "TitilliumSansPro-Italic.otf"; path = "../assets/fonts/TitilliumSansPro/TitilliumSansPro-Italic.otf"; sourceTree = "<group>"; };
+		F2B163062B753C9D00F6E487 /* TitilliumSansPro-SemiboldItalic.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "TitilliumSansPro-SemiboldItalic.otf"; path = "../assets/fonts/TitilliumSansPro/TitilliumSansPro-SemiboldItalic.otf"; sourceTree = "<group>"; };
+		F2B163072B753C9D00F6E487 /* TitilliumSansPro-Thin.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "TitilliumSansPro-Thin.otf"; path = "../assets/fonts/TitilliumSansPro/TitilliumSansPro-Thin.otf"; sourceTree = "<group>"; };
+		F2B163082B753C9D00F6E487 /* TitilliumSansPro-BoldItalic.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "TitilliumSansPro-BoldItalic.otf"; path = "../assets/fonts/TitilliumSansPro/TitilliumSansPro-BoldItalic.otf"; sourceTree = "<group>"; };
+		F2B163092B753C9D00F6E487 /* TitilliumSansPro-Light.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "TitilliumSansPro-Light.otf"; path = "../assets/fonts/TitilliumSansPro/TitilliumSansPro-Light.otf"; sourceTree = "<group>"; };
+		F2B1630A2B753C9D00F6E487 /* TitilliumSansPro-Regular.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "TitilliumSansPro-Regular.otf"; path = "../assets/fonts/TitilliumSansPro/TitilliumSansPro-Regular.otf"; sourceTree = "<group>"; };
+		F2B1630B2B753C9D00F6E487 /* TitilliumSansPro-BlackItalic.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "TitilliumSansPro-BlackItalic.otf"; path = "../assets/fonts/TitilliumSansPro/TitilliumSansPro-BlackItalic.otf"; sourceTree = "<group>"; };
+		F2B1630C2B753C9D00F6E487 /* TitilliumSansPro-Bold.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "TitilliumSansPro-Bold.otf"; path = "../assets/fonts/TitilliumSansPro/TitilliumSansPro-Bold.otf"; sourceTree = "<group>"; };
+		F2B1630D2B753C9D00F6E487 /* TitilliumSansPro-ThinItalic.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "TitilliumSansPro-ThinItalic.otf"; path = "../assets/fonts/TitilliumSansPro/TitilliumSansPro-ThinItalic.otf"; sourceTree = "<group>"; };
 		F709D4AE20E44EFAAB255A8E /* TitilliumWeb-Italic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "TitilliumWeb-Italic.ttf"; path = "../assets/fonts/TitilliumWeb/TitilliumWeb-Italic.ttf"; sourceTree = "<group>"; };
-		FCE075AF22EBCD57D83AD630 /* Pods-ItaliaApp-ItaliaAppTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ItaliaApp-ItaliaAppTests.debug.xcconfig"; path = "Target Support Files/Pods-ItaliaApp-ItaliaAppTests/Pods-ItaliaApp-ItaliaAppTests.debug.xcconfig"; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -119,7 +145,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				1CD9CAEA755BFC30AE893F46 /* libPods-ItaliaApp-ItaliaAppTests.a in Frameworks */,
+				7578F223A01E0E15E7072DAF /* libPods-ItaliaApp-ItaliaAppTests.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -128,7 +154,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				F0625E7F2326825600EDEF90 /* JavaScriptCore.framework in Frameworks */,
-				CD4FC1EC91E60128F3E01292 /* libPods-ItaliaApp.a in Frameworks */,
+				544D7A6A6990E1AD0E113BF2 /* libPods-ItaliaApp.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -181,6 +207,18 @@
 		36F229EFB63F4CD98EF610EC /* Resources */ = {
 			isa = PBXGroup;
 			children = (
+				F2B163022B753C9D00F6E487 /* TitilliumSansPro-Black.otf */,
+				F2B1630B2B753C9D00F6E487 /* TitilliumSansPro-BlackItalic.otf */,
+				F2B1630C2B753C9D00F6E487 /* TitilliumSansPro-Bold.otf */,
+				F2B163082B753C9D00F6E487 /* TitilliumSansPro-BoldItalic.otf */,
+				F2B163052B753C9D00F6E487 /* TitilliumSansPro-Italic.otf */,
+				F2B163092B753C9D00F6E487 /* TitilliumSansPro-Light.otf */,
+				F2B163042B753C9D00F6E487 /* TitilliumSansPro-LightItalic.otf */,
+				F2B1630A2B753C9D00F6E487 /* TitilliumSansPro-Regular.otf */,
+				F2B163032B753C9D00F6E487 /* TitilliumSansPro-Semibold.otf */,
+				F2B163062B753C9D00F6E487 /* TitilliumSansPro-SemiboldItalic.otf */,
+				F2B163072B753C9D00F6E487 /* TitilliumSansPro-Thin.otf */,
+				F2B1630D2B753C9D00F6E487 /* TitilliumSansPro-ThinItalic.otf */,
 				6A786CC45B2D4B77BDF55C1D /* TitilliumWeb-Black.ttf */,
 				309BA0207AA24FE9A0EBE61C /* TitilliumWeb-Bold.ttf */,
 				1E4EECD1122B401CAC190472 /* TitilliumWeb-BoldItalic.ttf */,
@@ -208,10 +246,10 @@
 		591602A69619994F43D34A93 /* Pods */ = {
 			isa = PBXGroup;
 			children = (
-				4F044D1214BF98AC6510D261 /* Pods-ItaliaApp.debug.xcconfig */,
-				B7EF7760029EB39299B837EA /* Pods-ItaliaApp.release.xcconfig */,
-				FCE075AF22EBCD57D83AD630 /* Pods-ItaliaApp-ItaliaAppTests.debug.xcconfig */,
-				AE2A89F5F6A57BDBD22D81D9 /* Pods-ItaliaApp-ItaliaAppTests.release.xcconfig */,
+				722056DF161D843DD91D88A7 /* Pods-ItaliaApp.debug.xcconfig */,
+				6F8C6AF94C801CE01EC3D81A /* Pods-ItaliaApp.release.xcconfig */,
+				6D0115BDF703AEBFD8B86A12 /* Pods-ItaliaApp-ItaliaAppTests.debug.xcconfig */,
+				058F4F4927B1B1C84C7F1137 /* Pods-ItaliaApp-ItaliaAppTests.release.xcconfig */,
 			);
 			path = Pods;
 			sourceTree = "<group>";
@@ -256,8 +294,8 @@
 				F0625E7B2326822400EDEF90 /* libReact-RCTImage.a */,
 				F0625E792326820B00EDEF90 /* libReact-RCTImage.a */,
 				6C4A0A2AB90C8575993DF1E1 /* Instabug.framework */,
-				A6F417D3B8F84EA607A5C6F3 /* libPods-ItaliaApp.a */,
-				3A0A336CDDAE56472931AD9F /* libPods-ItaliaApp-ItaliaAppTests.a */,
+				A88AAE92C2AA92D33DB25F0C /* libPods-ItaliaApp.a */,
+				59BCC34321A36ABA56F255E3 /* libPods-ItaliaApp-ItaliaAppTests.a */,
 			);
 			name = Frameworks;
 			sourceTree = "<group>";
@@ -269,12 +307,12 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "ItaliaAppTests" */;
 			buildPhases = (
-				CC25A055C342FAAE3D4A7914 /* [CP] Check Pods Manifest.lock */,
+				352F3B8D397ADE20251EED97 /* [CP] Check Pods Manifest.lock */,
 				00E356EA1AD99517003FC87E /* Sources */,
 				00E356EB1AD99517003FC87E /* Frameworks */,
 				00E356EC1AD99517003FC87E /* Resources */,
-				798F586C1A40477B6340BEA7 /* [CP] Embed Pods Frameworks */,
-				F162F3AB6F2574EDC5D74D51 /* [CP] Copy Pods Resources */,
+				F08399D3BEE675C55F82C6BE /* [CP] Embed Pods Frameworks */,
+				68F41393BCCEDD7F8C939A70 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -290,7 +328,7 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "ItaliaApp" */;
 			buildPhases = (
-				02908AF96918A81891FE2AAA /* [CP] Check Pods Manifest.lock */,
+				CC23EFFCB8098D26BE7DBAA5 /* [CP] Check Pods Manifest.lock */,
 				95AEBF4A23D0A295000598A9 /* Start Packager */,
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
@@ -298,8 +336,8 @@
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				61CC933C2135818C00206602 /* Embed Frameworks */,
 				7A034949213D55CA0064B689 /* Work around InputMask.xcodeproj embedding an extra set of Swift libraries */,
-				78409FB602D7E5A8BB0D890D /* [CP] Embed Pods Frameworks */,
-				93CC51473253477B8DB84D24 /* [CP] Copy Pods Resources */,
+				520BD832C8035EF5E68D9913 /* [CP] Embed Pods Frameworks */,
+				963519164D766C5238AA1B42 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -344,6 +382,7 @@
 				en,
 				Base,
 				it,
+				de,
 			);
 			mainGroup = 83CBB9F61A601CBA00E9B192;
 			productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
@@ -370,7 +409,9 @@
 			files = (
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				133638FA213D788900B0C079 /* InfoPlist.strings in Resources */,
+				F2B163152B753C9D00F6E487 /* TitilliumSansPro-Light.otf in Resources */,
 				194A5D2B1F027F5A0078620E /* Podfile in Resources */,
+				F2B1630F2B753C9D00F6E487 /* TitilliumSansPro-Semibold.otf in Resources */,
 				862C0E693C864E76BADCDFCC /* TitilliumWeb-Black.ttf in Resources */,
 				BE1A42156484487BABBC4DED /* TitilliumWeb-Bold.ttf in Resources */,
 				8D109BF3B47F46FDA6B105CE /* TitilliumWeb-BoldItalic.ttf in Resources */,
@@ -379,18 +420,28 @@
 				859781B477BB45579FB9A9F2 /* TitilliumWeb-Italic.ttf in Resources */,
 				2AD40B9924CB049500E4124A /* LaunchScreen.storyboard in Resources */,
 				F09FEB3C231818E3007071DB /* Localizable.strings in Resources */,
+				F2B163162B753C9D00F6E487 /* TitilliumSansPro-Regular.otf in Resources */,
 				570BBC8FC70C4A76ABF035AC /* TitilliumWeb-Light.ttf in Resources */,
 				D18E075B28304466B6CA2381 /* TitilliumWeb-LightItalic.ttf in Resources */,
+				F2B163102B753C9D00F6E487 /* TitilliumSansPro-LightItalic.otf in Resources */,
+				F2B163182B753C9D00F6E487 /* TitilliumSansPro-Bold.otf in Resources */,
 				4D331CF68DAC4800A6D6297A /* TitilliumWeb-Regular.ttf in Resources */,
 				3A3CA4696BA44782A02FE37E /* TitilliumWeb-SemiBold.ttf in Resources */,
 				72E4B1EFF7D4414483079F91 /* TitilliumWeb-SemiBoldItalic.ttf in Resources */,
+				F2B163192B753C9D00F6E487 /* TitilliumSansPro-ThinItalic.otf in Resources */,
+				F2B163112B753C9D00F6E487 /* TitilliumSansPro-Italic.otf in Resources */,
+				F2B163172B753C9D00F6E487 /* TitilliumSansPro-BlackItalic.otf in Resources */,
 				EFFA620FCD2D46F6B942663B /* LICENSE.txt in Resources */,
 				9975E38DE95949D28D07A275 /* RobotoMono-Bold.ttf in Resources */,
 				8E7BB01F1A6D4D79B17B4210 /* RobotoMono-BoldItalic.ttf in Resources */,
 				8788744508D34396942D3DB4 /* RobotoMono-Light.ttf in Resources */,
+				F2B1630E2B753C9D00F6E487 /* TitilliumSansPro-Black.otf in Resources */,
+				F2B163132B753C9D00F6E487 /* TitilliumSansPro-Thin.otf in Resources */,
 				C2CF038002D24FEEAB41B336 /* RobotoMono-LightItalic.ttf in Resources */,
 				16E38CBD19D4437A9C020B21 /* RobotoMono-Regular.ttf in Resources */,
 				28E4866232804051B865FC10 /* RobotoMono-RegularItalic.ttf in Resources */,
+				F2B163122B753C9D00F6E487 /* TitilliumSansPro-SemiboldItalic.otf in Resources */,
+				F2B163142B753C9D00F6E487 /* TitilliumSansPro-BoldItalic.otf in Resources */,
 				69A5E1839C924EE5B8CD9470 /* ReadexPro-Regular.ttf in Resources */,
 				97F089B39469411991377615 /* DMMono-Medium.ttf in Resources */,
 			);
@@ -413,7 +464,7 @@
 			shellPath = /bin/sh;
 			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh\n";
 		};
-		02908AF96918A81891FE2AAA /* [CP] Check Pods Manifest.lock */ = {
+		352F3B8D397ADE20251EED97 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -428,14 +479,14 @@
 			outputFileListPaths = (
 			);
 			outputPaths = (
-				"$(DERIVED_FILE_DIR)/Pods-ItaliaApp-checkManifestLockResult.txt",
+				"$(DERIVED_FILE_DIR)/Pods-ItaliaApp-ItaliaAppTests-checkManifestLockResult.txt",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
-		78409FB602D7E5A8BB0D890D /* [CP] Embed Pods Frameworks */ = {
+		520BD832C8035EF5E68D9913 /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -481,50 +532,22 @@
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-ItaliaApp/Pods-ItaliaApp-frameworks.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
-		798F586C1A40477B6340BEA7 /* [CP] Embed Pods Frameworks */ = {
+		68F41393BCCEDD7F8C939A70 /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
 			inputPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-ItaliaApp-ItaliaAppTests/Pods-ItaliaApp-ItaliaAppTests-frameworks.sh",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/Flipper-DoubleConversion/double-conversion.framework/double-conversion",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/Flipper-Glog/glog.framework/glog",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL-Universal/OpenSSL.framework/OpenSSL",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskAnswerBotProvidersSDK/AnswerBotProvidersSDK.framework/AnswerBotProvidersSDK",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskAnswerBotSDK/AnswerBotSDK.framework/AnswerBotSDK",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskChatProvidersSDK/ChatProvidersSDK.framework/ChatProvidersSDK",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskChatSDK/ChatSDK.framework/ChatSDK",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskCommonUISDK/CommonUISDK.framework/CommonUISDK",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskCoreSDK/ZendeskCoreSDK.framework/ZendeskCoreSDK",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskMessagingAPISDK/MessagingAPI.framework/MessagingAPI",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskMessagingSDK/MessagingSDK.framework/MessagingSDK",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskSDKConfigurationsSDK/SDKConfigurations.framework/SDKConfigurations",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskSupportProvidersSDK/SupportProvidersSDK.framework/SupportProvidersSDK",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskSupportSDK/SupportSDK.framework/SupportSDK",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/hermes.framework/hermes",
+				"${PODS_ROOT}/Target Support Files/Pods-ItaliaApp-ItaliaAppTests/Pods-ItaliaApp-ItaliaAppTests-resources.sh",
+				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
 			);
-			name = "[CP] Embed Pods Frameworks";
+			name = "[CP] Copy Pods Resources";
 			outputPaths = (
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/double-conversion.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/glog.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/OpenSSL.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/AnswerBotProvidersSDK.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/AnswerBotSDK.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/ChatProvidersSDK.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/ChatSDK.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/CommonUISDK.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/ZendeskCoreSDK.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/MessagingAPI.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/MessagingSDK.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/SDKConfigurations.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/SupportProvidersSDK.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/SupportSDK.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-ItaliaApp-ItaliaAppTests/Pods-ItaliaApp-ItaliaAppTests-frameworks.sh\"\n";
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-ItaliaApp-ItaliaAppTests/Pods-ItaliaApp-ItaliaAppTests-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
 		7A034949213D55CA0064B689 /* Work around InputMask.xcodeproj embedding an extra set of Swift libraries */ = {
@@ -541,77 +564,43 @@
 			shellPath = /bin/sh;
 			shellScript = "# see https://github.com/react-native-community/react-native-text-input-mask/issues/22#issuecomment-344765116\n\nEXTRA_DIR=\"${CONFIGURATION_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Frameworks/InputMask.framework/Frameworks\"\n\nif [[ -d \"${EXTRA_DIR}\" ]]; then\n  rm -rf \"${EXTRA_DIR}\"\nfi\n";
 		};
-		93CC51473253477B8DB84D24 /* [CP] Copy Pods Resources */ = {
+		95AEBF4A23D0A295000598A9 /* Start Packager */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
+			inputFileListPaths = (
+			);
 			inputPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-ItaliaApp/Pods-ItaliaApp-resources.sh",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPArrowLeft.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPArrowLeft@2x.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPArrowRight.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPArrowRight@2x.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPCheckmark.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPCheckmark@2x.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPCloseButton.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPCloseButton@2x.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPCloseButton@3x.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPDismissKeyboard.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPDismissKeyboard@2x.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPLogo.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPLogo@2x.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/placeholder-image.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/MPTakeoverNotificationViewController~ipad.xib",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/MPTakeoverNotificationViewController~iphonelandscape.xib",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/MPTakeoverNotificationViewController~iphoneportrait.xib",
-				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
 			);
-			name = "[CP] Copy Pods Resources";
+			name = "Start Packager";
+			outputFileListPaths = (
+			);
 			outputPaths = (
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPArrowLeft.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPArrowLeft@2x.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPArrowRight.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPArrowRight@2x.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPCheckmark.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPCheckmark@2x.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPCloseButton.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPCloseButton@2x.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPCloseButton@3x.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPDismissKeyboard.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPDismissKeyboard@2x.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPLogo.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPLogo@2x.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/placeholder-image.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPTakeoverNotificationViewController~ipad.nib",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPTakeoverNotificationViewController~iphonelandscape.nib",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPTakeoverNotificationViewController~iphoneportrait.nib",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-ItaliaApp/Pods-ItaliaApp-resources.sh\"\n";
-			showEnvVarsInLog = 0;
+			shellScript = "# Type a script or drag a script file from your workspace to insert its path.\nexport RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\nif nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\nif ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\necho \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\nexit 2\nfi\nelse\nopen \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\nfi\nfi\n";
 		};
-		95AEBF4A23D0A295000598A9 /* Start Packager */ = {
+		963519164D766C5238AA1B42 /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
-			inputFileListPaths = (
-			);
 			inputPaths = (
+				"${PODS_ROOT}/Target Support Files/Pods-ItaliaApp/Pods-ItaliaApp-resources.sh",
+				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
 			);
-			name = "Start Packager";
-			outputFileListPaths = (
-			);
+			name = "[CP] Copy Pods Resources";
 			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "# Type a script or drag a script file from your workspace to insert its path.\nexport RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\nif nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\nif ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\necho \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\nexit 2\nfi\nelse\nopen \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\nfi\nfi\n";
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-ItaliaApp/Pods-ItaliaApp-resources.sh\"\n";
+			showEnvVarsInLog = 0;
 		};
-		CC25A055C342FAAE3D4A7914 /* [CP] Check Pods Manifest.lock */ = {
+		CC23EFFCB8098D26BE7DBAA5 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -626,63 +615,57 @@
 			outputFileListPaths = (
 			);
 			outputPaths = (
-				"$(DERIVED_FILE_DIR)/Pods-ItaliaApp-ItaliaAppTests-checkManifestLockResult.txt",
+				"$(DERIVED_FILE_DIR)/Pods-ItaliaApp-checkManifestLockResult.txt",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
-		F162F3AB6F2574EDC5D74D51 /* [CP] Copy Pods Resources */ = {
+		F08399D3BEE675C55F82C6BE /* [CP] Embed Pods Frameworks */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
 			);
 			inputPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-ItaliaApp-ItaliaAppTests/Pods-ItaliaApp-ItaliaAppTests-resources.sh",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPArrowLeft.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPArrowLeft@2x.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPArrowRight.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPArrowRight@2x.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPCheckmark.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPCheckmark@2x.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPCloseButton.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPCloseButton@2x.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPCloseButton@3x.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPDismissKeyboard.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPDismissKeyboard@2x.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPLogo.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/MPLogo@2x.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/Images/placeholder-image.png",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/MPTakeoverNotificationViewController~ipad.xib",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/MPTakeoverNotificationViewController~iphonelandscape.xib",
-				"${PODS_ROOT}/Mixpanel/Mixpanel/MPTakeoverNotificationViewController~iphoneportrait.xib",
-				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/AccessibilityResources.bundle",
+				"${PODS_ROOT}/Target Support Files/Pods-ItaliaApp-ItaliaAppTests/Pods-ItaliaApp-ItaliaAppTests-frameworks.sh",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/Flipper-DoubleConversion/double-conversion.framework/double-conversion",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/Flipper-Glog/glog.framework/glog",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL-Universal/OpenSSL.framework/OpenSSL",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskAnswerBotProvidersSDK/AnswerBotProvidersSDK.framework/AnswerBotProvidersSDK",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskAnswerBotSDK/AnswerBotSDK.framework/AnswerBotSDK",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskChatProvidersSDK/ChatProvidersSDK.framework/ChatProvidersSDK",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskChatSDK/ChatSDK.framework/ChatSDK",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskCommonUISDK/CommonUISDK.framework/CommonUISDK",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskCoreSDK/ZendeskCoreSDK.framework/ZendeskCoreSDK",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskMessagingAPISDK/MessagingAPI.framework/MessagingAPI",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskMessagingSDK/MessagingSDK.framework/MessagingSDK",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskSDKConfigurationsSDK/SDKConfigurations.framework/SDKConfigurations",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskSupportProvidersSDK/SupportProvidersSDK.framework/SupportProvidersSDK",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ZendeskSupportSDK/SupportSDK.framework/SupportSDK",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/hermes.framework/hermes",
 			);
-			name = "[CP] Copy Pods Resources";
+			name = "[CP] Embed Pods Frameworks";
 			outputPaths = (
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPArrowLeft.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPArrowLeft@2x.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPArrowRight.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPArrowRight@2x.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPCheckmark.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPCheckmark@2x.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPCloseButton.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPCloseButton@2x.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPCloseButton@3x.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPDismissKeyboard.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPDismissKeyboard@2x.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPLogo.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPLogo@2x.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/placeholder-image.png",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPTakeoverNotificationViewController~ipad.nib",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPTakeoverNotificationViewController~iphonelandscape.nib",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MPTakeoverNotificationViewController~iphoneportrait.nib",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AccessibilityResources.bundle",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/double-conversion.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/glog.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/OpenSSL.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/AnswerBotProvidersSDK.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/AnswerBotSDK.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/ChatProvidersSDK.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/ChatSDK.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/CommonUISDK.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/ZendeskCoreSDK.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/MessagingAPI.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/MessagingSDK.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/SDKConfigurations.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/SupportProvidersSDK.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/SupportSDK.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-ItaliaApp-ItaliaAppTests/Pods-ItaliaApp-ItaliaAppTests-resources.sh\"\n";
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-ItaliaApp-ItaliaAppTests/Pods-ItaliaApp-ItaliaAppTests-frameworks.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
 /* End PBXShellScriptBuildPhase section */
@@ -721,6 +704,7 @@
 			children = (
 				133638FB213D788900B0C079 /* en */,
 				133638FD213D78DB00B0C079 /* it */,
+				B57593872B70FFA400674515 /* de */,
 			);
 			name = InfoPlist.strings;
 			path = ItaliaApp;
@@ -731,6 +715,7 @@
 			children = (
 				F09FEB0E231818E3007071DB /* en */,
 				F09FEB3D231818F0007071DB /* it */,
+				B57593882B70FFA400674515 /* de */,
 			);
 			name = Localizable.strings;
 			sourceTree = "<group>";
@@ -740,7 +725,7 @@
 /* Begin XCBuildConfiguration section */
 		00E356F61AD99517003FC87E /* Debug */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = FCE075AF22EBCD57D83AD630 /* Pods-ItaliaApp-ItaliaAppTests.debug.xcconfig */;
+			baseConfigurationReference = 6D0115BDF703AEBFD8B86A12 /* Pods-ItaliaApp-ItaliaAppTests.debug.xcconfig */;
 			buildSettings = {
 				BUNDLE_LOADER = "$(TEST_HOST)";
 				DEVELOPMENT_TEAM = M2X5YQ4BJ7;
@@ -752,7 +737,7 @@
 				INFOPLIST_FILE = ItaliaAppTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 12.4;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = "$(inherited)";
+				LIBRARY_SEARCH_PATHS = "$(SDKROOT)/usr/lib/swift$(inherited)";
 				OTHER_LDFLAGS = (
 					"-ObjC",
 					"-lc++",
@@ -765,7 +750,7 @@
 		};
 		00E356F71AD99517003FC87E /* Release */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = AE2A89F5F6A57BDBD22D81D9 /* Pods-ItaliaApp-ItaliaAppTests.release.xcconfig */;
+			baseConfigurationReference = 058F4F4927B1B1C84C7F1137 /* Pods-ItaliaApp-ItaliaAppTests.release.xcconfig */;
 			buildSettings = {
 				BUNDLE_LOADER = "$(TEST_HOST)";
 				COPY_PHASE_STRIP = NO;
@@ -774,7 +759,7 @@
 				INFOPLIST_FILE = ItaliaAppTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 12.4;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = "$(inherited)";
+				LIBRARY_SEARCH_PATHS = "$(SDKROOT)/usr/lib/swift$(inherited)";
 				OTHER_LDFLAGS = (
 					"-ObjC",
 					"-lc++",
@@ -787,7 +772,7 @@
 		};
 		13B07F941A680F5B00A75B9A /* Debug */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 4F044D1214BF98AC6510D261 /* Pods-ItaliaApp.debug.xcconfig */;
+			baseConfigurationReference = 722056DF161D843DD91D88A7 /* Pods-ItaliaApp.debug.xcconfig */;
 			buildSettings = {
 				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
@@ -828,7 +813,7 @@
 		};
 		13B07F951A680F5B00A75B9A /* Release */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = B7EF7760029EB39299B837EA /* Pods-ItaliaApp.release.xcconfig */;
+			baseConfigurationReference = 6F8C6AF94C801CE01EC3D81A /* Pods-ItaliaApp.release.xcconfig */;
 			buildSettings = {
 				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
@@ -871,7 +856,7 @@
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
 				CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
-				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
+				CLANG_CXX_LANGUAGE_STANDARD = "c++17";
 				CLANG_CXX_LIBRARY = "libc++";
 				CLANG_ENABLE_MODULES = YES;
 				CLANG_ENABLE_OBJC_ARC = YES;
@@ -905,6 +890,7 @@
 				GCC_PREPROCESSOR_DEFINITIONS = (
 					"DEBUG=1",
 					"$(inherited)",
+					_LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION,
 				);
 				GCC_SYMBOLS_PRIVATE_EXTERN = NO;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
@@ -922,6 +908,11 @@
 				);
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-Wl",
+					"-ld_classic",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 			};
@@ -932,7 +923,7 @@
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
 				CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
-				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
+				CLANG_CXX_LANGUAGE_STANDARD = "c++17";
 				CLANG_CXX_LIBRARY = "libc++";
 				CLANG_ENABLE_MODULES = YES;
 				CLANG_ENABLE_OBJC_ARC = YES;
@@ -962,6 +953,10 @@
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"$(inherited)",
+					_LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION,
+				);
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
 				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
 				GCC_WARN_UNDECLARED_SELECTOR = YES;
@@ -976,6 +971,11 @@
 					"\"$(SDKROOT)/usr/lib/swift\"",
 				);
 				MTL_ENABLE_DEBUG_INFO = NO;
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-Wl",
+					"-ld_classic",
+				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;
diff --git a/ios/ItaliaApp/Images.xcassets/euNextLogo.imageset/Contents.json b/ios/ItaliaApp/Images.xcassets/euNextLogo.imageset/Contents.json
index 98fd313ae23..35e7856f312 100644
--- a/ios/ItaliaApp/Images.xcassets/euNextLogo.imageset/Contents.json
+++ b/ios/ItaliaApp/Images.xcassets/euNextLogo.imageset/Contents.json
@@ -1,23 +1,15 @@
 {
   "images" : [
     {
-      "filename" : "IT Finanziato dall'Unione europea.svg",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "filename" : "IT Finanziato dall'Unione europea 1.svg",
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "filename" : "IT Finanziato dall'Unione europea 2.svg",
-      "idiom" : "universal",
-      "scale" : "3x"
+      "filename" : "eu_next_logo.svg",
+      "idiom" : "universal"
     }
   ],
   "info" : {
     "author" : "xcode",
     "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
   }
 }
diff --git a/ios/ItaliaApp/Images.xcassets/euNextLogo.imageset/IT Finanziato dall'Unione europea 1.svg b/ios/ItaliaApp/Images.xcassets/euNextLogo.imageset/IT Finanziato dall'Unione europea 1.svg
deleted file mode 100644
index 244bce156e3..00000000000
--- a/ios/ItaliaApp/Images.xcassets/euNextLogo.imageset/IT Finanziato dall'Unione europea 1.svg	
+++ /dev/null
@@ -1,47 +0,0 @@
-<svg width="131" height="30" viewBox="0 0 131 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M31.1345 15.7135L30.2455 15.0653L29.3576 15.7135L29.6954 14.6673L28.7925 14.0203L29.9055 14.0215L30.2455 12.9602L30.5868 14.0203H31.6999L30.7968 14.6673L31.1345 15.7135ZM29.9135 20.3224L29.0247 19.6742L28.1356 20.3224L28.4746 19.2759L27.5716 18.6291L28.6834 18.6303L29.0247 17.5689L29.3659 18.6291H30.4776L29.5747 19.2759L29.9135 20.3224ZM28.6834 9.43927L29.0244 8.37794L29.3658 9.43794H30.4776L29.5747 10.0837L29.9135 11.1302L29.0244 10.4833L28.1355 11.1302L28.4745 10.0837L27.5714 9.43794L28.6834 9.43927ZM26.2161 6.73424L26.5537 7.78076L25.666 7.13261L24.7758 7.78076L25.1136 6.73424L24.2118 6.08609L25.3247 6.08861L25.6649 5.02728L26.005 6.08609H27.1191L26.2161 6.73424ZM26.5409 23.6858L25.6521 23.0388L24.7631 23.6858L25.1009 22.6393L24.199 21.9923L25.3109 21.9936L25.6521 20.9335L25.9922 21.9923H27.105L26.2022 22.6393L26.5409 23.6858ZM21.9456 24.9046L21.0573 24.2575L20.1685 24.9046L20.506 23.8582L19.6037 23.2113L20.7167 23.2124L21.0567 22.1512L21.3973 23.2113H22.5103L21.6074 23.8582L21.9456 24.9046ZM20.7155 4.85483L21.0561 3.79468L21.3967 4.85365H22.5098L21.6068 5.50061L21.9452 6.54698L21.0561 5.90002L20.1673 6.54698L20.5054 5.50061L19.6031 4.85365L20.7155 4.85483ZM17.3511 23.6858L16.4626 23.0388L15.5736 23.6858L15.9113 22.6393L15.009 21.9923L16.1219 21.9936L16.462 20.9335L16.8026 21.9923H17.9156L17.0133 22.6393L17.3511 23.6858ZM16.1145 6.08742L16.4551 5.02609L16.7956 6.08609H17.9089L17.0063 6.7332L17.3441 7.77957L16.4556 7.13261L15.5667 7.77957L15.9043 6.7332L15.002 6.08609L16.1145 6.08742ZM13.6401 10.0978L13.9785 11.1442L13.0894 10.4971L12.2005 11.1442L12.5387 10.0978L11.6364 9.45068L12.7488 9.45201L13.0894 8.39068L13.43 9.45068H14.5424L13.6401 10.0978ZM13.9785 20.3224L13.0894 19.6742L12.2005 20.3224L12.5387 19.2759L11.6364 18.6291L12.7488 18.6303L13.0894 17.5689L13.43 18.6291H14.5424L13.6401 19.2759L13.9785 20.3224ZM10.4012 14.0331L11.5142 14.0354L11.8548 12.9728L12.1954 14.0331H13.3076L12.4055 14.6802L12.7431 15.7262L11.8548 15.0794L10.9657 15.7262L11.3041 14.6802L10.4012 14.0331ZM0 0.443867V28.4542H42.1297V0.443867H0Z" fill="white"/>
-<path d="M47.3452 6.69928V0.442537H51.6463V1.50091H48.6119V2.98195H51.2311V4.04032H48.6119V6.69928H47.3452Z" fill="white"/>
-<path d="M52.6818 6.69928V2.16669H53.8843V6.69928H52.6818ZM52.6818 1.55202V0.442537H53.8843V1.55202H52.6818Z" fill="white"/>
-<path d="M59.251 6.69928H58.0485V4.38595C58.0485 3.89661 58.023 3.58002 57.9716 3.43647C57.9202 3.29276 57.8367 3.18106 57.7213 3.10135C57.6057 3.02165 57.4665 2.98195 57.304 2.98195C57.0957 2.98195 56.9088 3.03883 56.7432 3.15261C56.5777 3.26639 56.4644 3.41721 56.403 3.60491C56.3415 3.79276 56.311 4.13987 56.311 4.64639V6.69928H55.1085V2.16669H56.2255V2.83246C56.6218 2.32032 57.1211 2.06432 57.7232 2.06432C57.9886 2.06432 58.2309 2.11187 58.4509 2.20728C58.6705 2.30254 58.8367 2.42417 58.9493 2.57217C59.0619 2.72017 59.1405 2.88802 59.1846 3.07572C59.2291 3.26358 59.251 3.53246 59.251 3.88239V6.69928Z" fill="white"/>
-<path d="M62.9785 4.52252C62.8244 4.57378 62.5804 4.63497 62.2467 4.70608C61.9128 4.77734 61.6947 4.84697 61.5919 4.91526C61.435 5.02623 61.3566 5.16712 61.3566 5.33778C61.3566 5.50564 61.4193 5.65067 61.545 5.77304C61.6702 5.89541 61.8302 5.9566 62.0242 5.9566C62.2409 5.9566 62.4478 5.88549 62.6445 5.74326C62.7903 5.63512 62.8856 5.50282 62.9315 5.34623C62.9629 5.24386 62.9785 5.04904 62.9785 4.76163V4.52252ZM61.3694 3.54949L60.2781 3.35319C60.4007 2.91497 60.6118 2.59067 60.9115 2.38001C61.211 2.16963 61.6561 2.0643 62.2467 2.0643C62.783 2.0643 63.1824 2.12771 63.4451 2.25423C63.7073 2.38089 63.8922 2.54164 63.9992 2.73645C64.1063 2.93141 64.1596 3.28919 64.1596 3.80978L64.1468 5.20963C64.1468 5.60815 64.166 5.90178 64.2046 6.09097C64.2432 6.2803 64.3151 6.48297 64.4207 6.69926H63.2309C63.1995 6.61956 63.161 6.50149 63.1154 6.34504C63.0954 6.27393 63.0813 6.22697 63.0725 6.20415C62.8671 6.40341 62.6475 6.55275 62.4135 6.6523C62.1797 6.75186 61.93 6.80164 61.6647 6.80164C61.1968 6.80164 60.8281 6.67497 60.5584 6.42178C60.289 6.1686 60.1539 5.8486 60.1539 5.46149C60.1539 5.20549 60.2153 4.97719 60.338 4.77645C60.4607 4.57601 60.6324 4.42238 60.8538 4.31556C61.0749 4.20889 61.3934 4.11571 61.8101 4.03601C62.3721 3.93082 62.7617 3.8326 62.9785 3.74149V3.62208C62.9785 3.39156 62.9213 3.22727 62.8073 3.12904C62.6932 3.03097 62.4777 2.98193 62.1611 2.98193C61.9471 2.98193 61.7803 3.02386 61.6604 3.10786C61.5405 3.19171 61.4436 3.33897 61.3694 3.54949Z" fill="white"/>
-<path d="M69.4795 6.69928H68.2768V4.38595C68.2768 3.89661 68.2509 3.58002 68.1997 3.43647C68.1483 3.29276 68.065 3.18106 67.9492 3.10135C67.8338 3.02165 67.6948 2.98195 67.5319 2.98195C67.3237 2.98195 67.1368 3.03883 66.9715 3.15261C66.8061 3.26639 66.6926 3.41721 66.6311 3.60491C66.5699 3.79276 66.5392 4.13987 66.5392 4.64639V6.69928H65.3368V2.16669H66.4536V2.83246C66.8502 2.32032 67.3495 2.06432 67.9516 2.06432C68.2168 2.06432 68.4594 2.11187 68.6789 2.20728C68.8986 2.30254 69.0649 2.42417 69.1778 2.57217C69.2902 2.72017 69.3686 2.88802 69.4131 3.07572C69.457 3.26358 69.4795 3.53246 69.4795 3.88239V6.69928Z" fill="white"/>
-<path d="M70.2155 6.69928V5.76461L71.9186 3.81409C72.1983 3.49543 72.4051 3.26921 72.5393 3.13558C72.3993 3.14402 72.2154 3.1498 71.9871 3.15261L70.3823 3.16106V2.16669H74.1396V3.01602L72.4023 5.01335L71.7903 5.67498C72.1241 5.65498 72.3308 5.64506 72.4106 5.64506H74.2724V6.69928H70.2155Z" fill="white"/>
-<path d="M75.0812 6.69928V2.16669H76.2839V6.69928H75.0812ZM75.0812 1.55202V0.442537H76.2839V1.55202H75.0812Z" fill="white"/>
-<path d="M80.0243 4.52252C79.8702 4.57378 79.6263 4.63497 79.2922 4.70608C78.9586 4.77734 78.7405 4.84697 78.6377 4.91526C78.4808 5.02623 78.4021 5.16712 78.4021 5.33778C78.4021 5.50564 78.4648 5.65067 78.5904 5.77304C78.7161 5.89541 78.8757 5.9566 79.0697 5.9566C79.2864 5.9566 79.4936 5.88549 79.6903 5.74326C79.8361 5.63512 79.9314 5.50282 79.977 5.34623C80.0084 5.24386 80.0243 5.04904 80.0243 4.76163V4.52252ZM78.4151 3.54949L77.3237 3.35319C77.4464 2.91497 77.6577 2.59067 77.957 2.38001C78.2568 2.16963 78.7019 2.0643 79.2922 2.0643C79.8288 2.0643 80.2279 2.12771 80.4906 2.25423C80.7531 2.38089 80.938 2.54164 81.0447 2.73645C81.1518 2.93141 81.2054 3.28919 81.2054 3.80978L81.1925 5.20963C81.1925 5.60815 81.2118 5.90178 81.2501 6.09097C81.2888 6.2803 81.3607 6.48297 81.4663 6.69926H80.2767C80.2452 6.61956 80.2068 6.50149 80.1612 6.34504C80.1412 6.27393 80.1271 6.22697 80.1183 6.20415C79.9129 6.40341 79.6933 6.55275 79.4593 6.6523C79.2252 6.75186 78.9758 6.80164 78.7103 6.80164C78.2422 6.80164 77.8738 6.67497 77.6039 6.42178C77.3344 6.1686 77.1998 5.8486 77.1998 5.46149C77.1998 5.20549 77.261 4.97719 77.3837 4.77645C77.5061 4.57601 77.6782 4.42238 77.8994 4.31556C78.1204 4.20889 78.4392 4.11571 78.8559 4.03601C79.4179 3.93082 79.8072 3.8326 80.0243 3.74149V3.62208C80.0243 3.39156 79.9671 3.22727 79.8531 3.12904C79.7387 3.03097 79.5235 2.98193 79.2066 2.98193C78.9929 2.98193 78.826 3.02386 78.7062 3.10786C78.5864 3.19171 78.4891 3.33897 78.4151 3.54949Z" fill="white"/>
-<path d="M84.475 2.16667V3.12267H83.6533V4.94934C83.6533 5.31927 83.6612 5.53482 83.6768 5.59601C83.6926 5.65719 83.7282 5.70771 83.7839 5.74756C83.8393 5.78727 83.9072 5.80727 83.987 5.80727C84.0984 5.80727 84.2594 5.76875 84.4707 5.69201L84.5733 6.62238C84.2936 6.74193 83.9772 6.80164 83.6232 6.80164C83.4064 6.80164 83.2108 6.76534 83.037 6.69289C82.863 6.6203 82.7353 6.52638 82.654 6.41126C82.5726 6.29586 82.5163 6.14015 82.485 5.94386C82.4591 5.80445 82.4463 5.52267 82.4463 5.09882V3.12267H81.8942V2.16667H82.4463V1.26608L83.6533 0.566228V2.16667H84.475Z" fill="white"/>
-<path d="M86.2638 4.43304C86.2638 4.88252 86.3706 5.22682 86.5847 5.46578C86.7986 5.70475 87.0626 5.8243 87.3764 5.8243C87.6902 5.8243 87.9533 5.70475 88.166 5.46578C88.3787 5.22682 88.4848 4.87971 88.4848 4.42445C88.4848 3.9806 88.3787 3.63912 88.166 3.40015C87.9533 3.16104 87.6902 3.04164 87.3764 3.04164C87.0626 3.04164 86.7986 3.16104 86.5847 3.40015C86.3706 3.63912 86.2638 3.98341 86.2638 4.43304ZM85.0312 4.36889C85.0312 3.97067 85.1296 3.58504 85.3264 3.2123C85.5234 2.83956 85.8022 2.55512 86.1631 2.35867C86.5241 2.16238 86.9271 2.0643 87.3721 2.0643C88.0598 2.0643 88.6232 2.28697 89.0625 2.73215C89.5018 3.17749 89.7218 3.74015 89.7218 4.42015C89.7218 5.10593 89.4997 5.67423 89.0561 6.12519C88.6125 6.57615 88.054 6.80164 87.3806 6.80164C86.9642 6.80164 86.5667 6.70771 86.1889 6.52001C85.8108 6.33215 85.5234 6.05689 85.3264 5.69408C85.1296 5.33141 85.0312 4.88963 85.0312 4.36889Z" fill="white"/>
-<path d="M48.2867 14.8237C48.2867 15.3074 48.3537 15.6574 48.488 15.8737C48.6819 16.1866 48.9528 16.343 49.301 16.343C49.5778 16.343 49.8131 16.2257 50.0072 15.991C50.2012 15.7563 50.2983 15.4055 50.2983 14.9389C50.2983 14.4183 50.2039 14.0434 50.0156 13.8143C49.8273 13.5854 49.5862 13.4707 49.2926 13.4707C49.007 13.4707 48.7683 13.5837 48.5756 13.8101C48.383 14.0362 48.2867 14.3741 48.2867 14.8237ZM51.4965 17.1882H50.3795V16.5222C50.1941 16.7812 49.975 16.974 49.7226 17.1007C49.4702 17.2272 49.2155 17.2905 48.9586 17.2905C48.4367 17.2905 47.9893 17.0808 47.617 16.6611C47.2448 16.2414 47.0585 15.6559 47.0585 14.9048C47.0585 14.1365 47.2399 13.5526 47.6019 13.1528C47.9643 12.7531 48.4222 12.5531 48.9757 12.5531C49.4834 12.5531 49.923 12.7637 50.2938 13.1848V10.9313H51.4965V17.1882Z" fill="white"/>
-<path d="M55.1897 15.0114C55.0356 15.0627 54.7917 15.1239 54.4581 15.195C54.1241 15.2661 53.9059 15.3359 53.8032 15.4042C53.6462 15.5151 53.5679 15.6559 53.5679 15.8266C53.5679 15.9946 53.6305 16.1396 53.7561 16.262C53.8815 16.3843 54.0414 16.4455 54.2355 16.4455C54.4523 16.4455 54.659 16.3743 54.8557 16.232C55.0015 16.124 55.0968 15.9916 55.1427 15.8351C55.1741 15.7326 55.1897 15.5378 55.1897 15.2504V15.0114ZM53.5805 14.0384L52.4894 13.8421C52.6118 13.4039 52.8231 13.0796 53.1227 12.8689C53.4222 12.6584 53.8673 12.5531 54.4581 12.5531C54.9942 12.5531 55.3938 12.6165 55.6563 12.7431C55.9186 12.8697 56.1034 13.0306 56.2105 13.2254C56.3175 13.4202 56.371 13.7781 56.371 14.2987L56.3582 15.6986C56.3582 16.0969 56.3774 16.3907 56.4158 16.5799C56.4545 16.7691 56.5265 16.9719 56.632 17.1882H55.4422C55.4109 17.1085 55.3722 16.9904 55.3266 16.8338C55.3067 16.7627 55.2925 16.7158 55.2837 16.6931C55.0783 16.8923 54.8587 17.0415 54.6249 17.141C54.3911 17.2406 54.1412 17.2905 53.876 17.2905C53.4079 17.2905 53.0392 17.164 52.7696 16.9107C52.5001 16.6575 52.3652 16.3373 52.3652 15.9504C52.3652 15.6944 52.4264 15.4661 52.5491 15.2654C52.6718 15.0649 52.8437 14.9111 53.0651 14.8045C53.2861 14.6978 53.6048 14.6046 54.0213 14.5249C54.5833 14.4197 54.9731 14.3215 55.1897 14.2304V14.111C55.1897 13.8805 55.1326 13.7162 55.0185 13.618C54.9046 13.5199 54.6889 13.4707 54.3725 13.4707C54.1583 13.4707 53.9914 13.5128 53.8716 13.5966C53.7518 13.6806 53.6548 13.8279 53.5805 14.0384Z" fill="white"/>
-<path d="M57.5564 17.1882V10.9313H58.7591V17.1882H57.5564Z" fill="white"/>
-<path d="M59.9912 17.1882V10.9313H61.1937V17.1882H59.9912Z" fill="white"/>
-<path d="M62.418 13.1548L62.191 11.9898V10.9313H63.5008V11.9898L63.3038 13.1548H62.418Z" fill="white"/>
-<path d="M64.5105 10.9313H65.7772V14.32C65.7772 14.8578 65.7928 15.2064 65.8244 15.3657C65.8785 15.6217 66.0076 15.8273 66.2118 15.9824C66.4158 16.1375 66.6946 16.215 67.0483 16.215C67.4078 16.215 67.6788 16.1418 67.8615 15.9953C68.0441 15.8488 68.154 15.6688 68.1908 15.4553C68.228 15.242 68.2465 14.8877 68.2465 14.3926V10.9313H69.5132V14.2177C69.5132 14.9688 69.4791 15.4994 69.4106 15.8095C69.3421 16.1197 69.2158 16.3814 69.0319 16.5949C68.848 16.8082 68.6017 16.9784 68.2935 17.1049C67.9854 17.2314 67.5833 17.2947 67.0868 17.2947C66.4877 17.2947 66.0334 17.2256 65.7239 17.0878C65.4143 16.9498 65.1696 16.7705 64.9897 16.5501C64.8101 16.3296 64.6917 16.0984 64.6347 15.8565C64.5519 15.498 64.5105 14.9688 64.5105 14.2689V10.9313Z" fill="white"/>
-<path d="M74.9743 17.1882H73.7716V14.8749C73.7716 14.3855 73.7459 14.0689 73.6945 13.9252C73.6431 13.7817 73.5599 13.67 73.4441 13.5903C73.3286 13.5106 73.1896 13.4707 73.0269 13.4707C72.8185 13.4707 72.6318 13.5278 72.4663 13.6415C72.301 13.7553 72.1875 13.9061 72.126 14.0938C72.0648 14.2817 72.034 14.6288 72.034 15.1353V17.1882H70.8317V12.6556H71.9485V13.3214C72.3451 12.8092 72.8444 12.5531 73.4464 12.5531C73.7116 12.5531 73.9542 12.6008 74.1738 12.6961C74.3935 12.7915 74.5597 12.9131 74.6726 13.0611C74.7852 13.2091 74.8635 13.3769 74.9079 13.5646C74.952 13.7525 74.9743 14.0214 74.9743 14.3713V17.1882Z" fill="white"/>
-<path d="M76.1938 17.1882V12.6556H77.3965V17.1882H76.1938ZM76.1938 12.0409V10.9313H77.3965V12.0409H76.1938Z" fill="white"/>
-<path d="M79.5832 14.9218C79.5832 15.3714 79.6903 15.7156 79.9045 15.9546C80.1183 16.1937 80.382 16.3131 80.696 16.3131C81.0099 16.3131 81.273 16.1937 81.4857 15.9546C81.6982 15.7156 81.8047 15.3686 81.8047 14.9134C81.8047 14.4695 81.6982 14.128 81.4857 13.8891C81.273 13.65 81.0099 13.5306 80.696 13.5306C80.382 13.5306 80.1183 13.65 79.9045 13.8891C79.6903 14.128 79.5832 14.4723 79.5832 14.9218ZM78.3508 14.8578C78.3508 14.4596 78.4495 14.074 78.6461 13.7012C78.8431 13.3285 79.122 13.0439 79.4829 12.8476C79.8435 12.6513 80.2468 12.5531 80.6919 12.5531C81.3792 12.5531 81.9427 12.7757 82.3822 13.2211C82.8215 13.6664 83.0412 14.2291 83.0412 14.9091C83.0412 15.5949 82.8196 16.1631 82.3758 16.6141C81.932 17.0651 81.3737 17.2905 80.7003 17.2905C80.2836 17.2905 79.8864 17.1966 79.5085 17.0089C79.1304 16.8211 78.8431 16.5458 78.6461 16.183C78.4495 15.8202 78.3508 15.3786 78.3508 14.8578Z" fill="white"/>
-<path d="M88.117 17.1882H86.9143V14.8749C86.9143 14.3855 86.8887 14.0689 86.8375 13.9252C86.7861 13.7817 86.7024 13.67 86.587 13.5903C86.4716 13.5106 86.3322 13.4707 86.1697 13.4707C85.9614 13.4707 85.7746 13.5278 85.6089 13.6415C85.4436 13.7553 85.3301 13.9061 85.2689 14.0938C85.2074 14.2817 85.1769 14.6288 85.1769 15.1353V17.1882H83.9742V12.6556H85.0914V13.3214C85.4877 12.8092 85.987 12.5531 86.5891 12.5531C86.8546 12.5531 87.0968 12.6008 87.3167 12.6961C87.5364 12.7915 87.7026 12.9131 87.8152 13.0611C87.9277 13.2091 88.0064 13.3769 88.0506 13.5646C88.0948 13.7525 88.117 14.0214 88.117 14.3713V17.1882Z" fill="white"/>
-<path d="M92.0369 14.5335C92.0283 14.1864 91.9383 13.9226 91.7671 13.7418C91.596 13.5611 91.3879 13.4707 91.1425 13.4707C90.8798 13.4707 90.6631 13.5661 90.492 13.7566C90.3208 13.9474 90.2366 14.2063 90.2396 14.5335H92.0369ZM91.9686 15.7455L93.1668 15.9461C93.0127 16.3843 92.7693 16.718 92.4371 16.947C92.1046 17.1761 91.6888 17.2905 91.1894 17.2905C90.3991 17.2905 89.8142 17.0331 89.435 16.518C89.1352 16.1055 88.9855 15.5848 88.9855 14.956C88.9855 14.2048 89.1823 13.6166 89.576 13.1911C89.9696 12.7658 90.4676 12.5531 91.0697 12.5531C91.7459 12.5531 92.2792 12.7757 92.6703 13.2211C93.0612 13.6664 93.2481 14.3486 93.231 15.2676H90.218C90.2265 15.6231 90.3236 15.8999 90.509 16.0977C90.6944 16.2954 90.9257 16.3943 91.2022 16.3943C91.3905 16.3943 91.5489 16.343 91.6775 16.2406C91.8057 16.1383 91.9026 15.9731 91.9686 15.7455Z" fill="white"/>
-<path d="M99.3465 14.5335C99.3378 14.1864 99.2478 13.9226 99.0766 13.7418C98.9055 13.5611 98.6974 13.4707 98.452 13.4707C98.1893 13.4707 97.9726 13.5661 97.8015 13.7566C97.6303 13.9474 97.5461 14.2063 97.5491 14.5335H99.3465ZM99.2781 15.7455L100.476 15.9461C100.322 16.3843 100.079 16.718 99.7466 16.947C99.4141 17.1761 98.9983 17.2905 98.4989 17.2905C97.7086 17.2905 97.1238 17.0331 96.7445 16.518C96.4448 16.1055 96.2952 15.5848 96.2952 14.956C96.2952 14.2048 96.4918 13.6166 96.8855 13.1911C97.2793 12.7658 97.7771 12.5531 98.3792 12.5531C99.0555 12.5531 99.5887 12.7757 99.9798 13.2211C100.371 13.6664 100.558 14.3486 100.54 15.2676H97.5275C97.536 15.6231 97.6332 15.8999 97.8186 16.0977C98.0039 16.2954 98.2352 16.3943 98.5117 16.3943C98.7001 16.3943 98.8584 16.343 98.9871 16.2406C99.1153 16.1383 99.2121 15.9731 99.2781 15.7455Z" fill="white"/>
-<path d="M104.512 17.1882V16.5095C104.346 16.7513 104.129 16.942 103.859 17.0814C103.59 17.2208 103.305 17.2905 103.005 17.2905C102.7 17.2905 102.426 17.2236 102.184 17.0899C101.941 16.9562 101.766 16.7685 101.657 16.5266C101.549 16.2848 101.495 15.9504 101.495 15.5236V12.6556H102.697V14.7383C102.697 15.3757 102.719 15.7663 102.763 15.91C102.808 16.0535 102.888 16.1674 103.005 16.2513C103.122 16.3353 103.271 16.3772 103.45 16.3772C103.656 16.3772 103.84 16.3211 104.002 16.2086C104.165 16.0962 104.276 15.9568 104.336 15.7904C104.396 15.6239 104.426 15.2163 104.426 14.5676V12.6556H105.629V17.1882H104.512Z" fill="white"/>
-<path d="M108.025 17.1882H106.823V12.6556H107.94V13.3001C108.131 12.9956 108.303 12.795 108.455 12.6983C108.608 12.6015 108.781 12.5531 108.975 12.5531C109.249 12.5531 109.513 12.6286 109.767 12.7793L109.395 13.8249C109.192 13.6941 109.004 13.6286 108.83 13.6286C108.662 13.6286 108.519 13.675 108.402 13.7675C108.285 13.8599 108.193 14.027 108.126 14.2689C108.059 14.5107 108.025 15.0172 108.025 15.7882V17.1882Z" fill="white"/>
-<path d="M111.239 14.9218C111.239 15.3714 111.346 15.7156 111.56 15.9546C111.774 16.1937 112.038 16.3131 112.352 16.3131C112.666 16.3131 112.929 16.1937 113.142 15.9546C113.354 15.7156 113.46 15.3686 113.46 14.9134C113.46 14.4695 113.354 14.128 113.142 13.8891C112.929 13.65 112.666 13.5306 112.352 13.5306C112.038 13.5306 111.774 13.65 111.56 13.8891C111.346 14.128 111.239 14.4723 111.239 14.9218ZM110.007 14.8578C110.007 14.4596 110.105 14.074 110.302 13.7012C110.499 13.3285 110.778 13.0439 111.139 12.8476C111.5 12.6513 111.903 12.5531 112.348 12.5531C113.035 12.5531 113.599 12.7757 114.038 13.2211C114.477 13.6664 114.697 14.2291 114.697 14.9091C114.697 15.5949 114.475 16.1631 114.032 16.6141C113.588 17.0651 113.03 17.2905 112.356 17.2905C111.94 17.2905 111.542 17.1966 111.164 17.0089C110.786 16.8211 110.499 16.5458 110.302 16.183C110.105 15.8202 110.007 15.3786 110.007 14.8578Z" fill="white"/>
-<path d="M116.794 14.8451C116.794 15.3544 116.895 15.7307 117.098 15.9738C117.301 16.2172 117.548 16.3387 117.839 16.3387C118.118 16.3387 118.35 16.2272 118.536 16.0037C118.721 15.7805 118.814 15.4141 118.814 14.9048C118.814 14.4297 118.719 14.0768 118.527 13.8463C118.336 13.6159 118.099 13.5006 117.817 13.5006C117.523 13.5006 117.279 13.6138 117.085 13.8399C116.891 14.0661 116.794 14.4012 116.794 14.8451ZM115.604 12.6556H116.726V13.3214C116.871 13.0938 117.068 12.9088 117.316 12.7666C117.565 12.6243 117.84 12.5531 118.142 12.5531C118.67 12.5531 119.118 12.7594 119.486 13.172C119.854 13.5846 120.038 14.1593 120.038 14.8962C120.038 15.6531 119.853 16.2414 119.482 16.6611C119.111 17.0808 118.661 17.2905 118.134 17.2905C117.883 17.2905 117.655 17.2406 117.451 17.141C117.247 17.0415 117.032 16.8709 116.807 16.629V18.9124H115.604V12.6556Z" fill="white"/>
-<path d="M123.693 14.5335C123.684 14.1864 123.594 13.9226 123.423 13.7418C123.252 13.5611 123.044 13.4707 122.799 13.4707C122.536 13.4707 122.319 13.5661 122.148 13.7566C121.977 13.9474 121.893 14.2063 121.896 14.5335H123.693ZM123.625 15.7455L124.823 15.9461C124.669 16.3843 124.425 16.718 124.093 16.947C123.761 17.1761 123.345 17.2905 122.846 17.2905C122.055 17.2905 121.47 17.0331 121.091 16.518C120.791 16.1055 120.642 15.5848 120.642 14.956C120.642 14.2048 120.838 13.6166 121.232 13.1911C121.626 12.7658 122.124 12.5531 122.726 12.5531C123.402 12.5531 123.935 12.7757 124.326 13.2211C124.717 13.6664 124.904 14.3486 124.887 15.2676H121.874C121.883 15.6231 121.98 15.8999 122.165 16.0977C122.351 16.2954 122.582 16.3943 122.858 16.3943C123.047 16.3943 123.205 16.343 123.334 16.2406C123.462 16.1383 123.559 15.9731 123.625 15.7455Z" fill="white"/>
-<path d="M128.375 15.0114C128.221 15.0627 127.977 15.1239 127.643 15.195C127.309 15.2661 127.091 15.3359 126.988 15.4042C126.831 15.5151 126.753 15.6559 126.753 15.8266C126.753 15.9946 126.816 16.1396 126.941 16.262C127.066 16.3843 127.226 16.4455 127.42 16.4455C127.637 16.4455 127.844 16.3743 128.041 16.232C128.186 16.124 128.282 15.9916 128.328 15.8351C128.359 15.7326 128.375 15.5378 128.375 15.2504V15.0114ZM126.766 14.0384L125.674 13.8421C125.797 13.4039 126.008 13.0796 126.308 12.8689C126.607 12.6584 127.052 12.5531 127.643 12.5531C128.179 12.5531 128.579 12.6165 128.841 12.7431C129.104 12.8697 129.288 13.0306 129.395 13.2254C129.503 13.4202 129.556 13.7781 129.556 14.2987L129.543 15.6986C129.543 16.0969 129.562 16.3907 129.601 16.5799C129.639 16.7691 129.711 16.9719 129.817 17.1882H128.627C128.596 17.1085 128.557 16.9904 128.512 16.8338C128.492 16.7627 128.477 16.7158 128.469 16.6931C128.263 16.8923 128.044 17.0415 127.81 17.141C127.576 17.2406 127.326 17.2905 127.061 17.2905C126.593 17.2905 126.224 17.164 125.955 16.9107C125.685 16.6575 125.55 16.3373 125.55 15.9504C125.55 15.6944 125.611 15.4661 125.734 15.2654C125.857 15.0649 126.029 14.9111 126.25 14.8045C126.471 14.6978 126.79 14.6046 127.206 14.5249C127.768 14.4197 128.158 14.3215 128.375 14.2304V14.111C128.375 13.8805 128.318 13.7162 128.203 13.618C128.09 13.5199 127.874 13.4707 127.557 13.4707C127.343 13.4707 127.176 13.5128 127.057 13.5966C126.937 13.6806 126.84 13.8279 126.766 14.0384Z" fill="white"/>
-<path d="M47.3383 27.8889V22.4805H48.0744L50.9229 26.7268V22.4805H51.6109V27.8889H50.8748L48.0263 23.6389V27.8889H47.3383Z" fill="white"/>
-<path d="M55.4249 26.6272L56.113 26.712C56.0045 27.1129 55.8035 27.4241 55.51 27.6454C55.2165 27.8668 54.8417 27.9774 54.3854 27.9774C53.8108 27.9774 53.3545 27.8016 53.0167 27.4499C52.6813 27.0957 52.5136 26.6001 52.5136 25.9631C52.5136 25.304 52.6837 24.7924 53.0241 24.4284C53.3644 24.0644 53.8059 23.8824 54.3484 23.8824C54.8737 23.8824 55.3028 24.0607 55.6358 24.4173C55.9687 24.774 56.1352 25.2757 56.1352 25.9225C56.1352 25.9619 56.1339 26.0209 56.1315 26.0996H53.2016C53.2263 26.53 53.3484 26.8596 53.5679 27.0883C53.7874 27.3171 54.0611 27.4314 54.3891 27.4314C54.6333 27.4314 54.8417 27.3675 55.0143 27.2396C55.1869 27.1117 55.3238 26.9076 55.4249 26.6272ZM53.2386 25.5536H55.4323C55.4027 25.224 55.3189 24.9769 55.1808 24.8121C54.9687 24.5563 54.6937 24.4284 54.3558 24.4284C54.05 24.4284 53.7923 24.5305 53.5827 24.7346C53.3755 24.9387 53.2608 25.2117 53.2386 25.5536Z" fill="white"/>
-<path d="M56.5088 27.8889L57.9441 25.8524L56.6161 23.9709H57.4484L58.0514 24.8895C58.1649 25.0642 58.2561 25.2105 58.3252 25.3286C58.4337 25.1662 58.5335 25.0224 58.6248 24.8969L59.287 23.9709H60.0823L58.7247 25.8155L60.1859 27.8889H59.3684L58.5619 26.6715L58.3473 26.3431L57.3152 27.8889H56.5088Z" fill="white"/>
-<path d="M62.1946 27.2949L62.2908 27.8815C62.1034 27.9209 61.9357 27.9406 61.7877 27.9406C61.546 27.9406 61.3586 27.9024 61.2254 27.8262C61.0922 27.7499 60.9985 27.6503 60.9443 27.5274C60.89 27.4019 60.8629 27.14 60.8629 26.7415V24.4874H60.3746V23.9709H60.8629V23.0007L61.525 22.6022V23.9709H62.1946V24.4874H61.525V26.7784C61.525 26.9678 61.5361 27.0896 61.5583 27.1437C61.583 27.1978 61.6212 27.2408 61.673 27.2728C61.7273 27.3048 61.8037 27.3208 61.9024 27.3208C61.9764 27.3208 62.0738 27.3122 62.1946 27.2949Z" fill="white"/>
-<path d="M65.4722 25.7676V25.133L67.7694 25.1294V27.1363C67.4168 27.4167 67.053 27.6282 66.6782 27.7708C66.3033 27.911 65.9186 27.9811 65.524 27.9811C64.9913 27.9811 64.5067 27.868 64.0702 27.6417C63.6361 27.413 63.3081 27.0834 63.0861 26.653C62.8642 26.2226 62.7532 25.7418 62.7532 25.2105C62.7532 24.6842 62.8629 24.1935 63.0824 23.7385C63.3044 23.281 63.6225 22.9416 64.0369 22.7203C64.4512 22.4989 64.9284 22.3882 65.4685 22.3882C65.8606 22.3882 66.2145 22.4522 66.5302 22.5801C66.8483 22.7055 67.0974 22.8814 67.2774 23.1076C67.4575 23.3339 67.5943 23.6291 67.6881 23.9931L67.0407 24.1701C66.9593 23.8947 66.8582 23.6782 66.7373 23.5208C66.6165 23.3634 66.4439 23.238 66.2194 23.1445C65.995 23.0486 65.7459 23.0007 65.4722 23.0007C65.1442 23.0007 64.8606 23.0511 64.6213 23.1519C64.3821 23.2503 64.1885 23.3807 64.0406 23.543C63.8951 23.7053 63.7816 23.8836 63.7002 24.0779C63.5621 24.4124 63.4931 24.7752 63.4931 25.1662C63.4931 25.6483 63.5757 26.0517 63.7409 26.3763C63.9086 26.701 64.1515 26.942 64.4697 27.0994C64.7878 27.2568 65.1257 27.3355 65.4833 27.3355C65.794 27.3355 66.0974 27.2765 66.3933 27.1584C66.6893 27.0379 66.9137 26.91 67.0666 26.7748V25.7676H65.4722Z" fill="white"/>
-<path d="M71.4354 26.6272L72.1235 26.712C72.015 27.1129 71.814 27.4241 71.5205 27.6454C71.227 27.8668 70.8522 27.9774 70.3959 27.9774C69.8213 27.9774 69.3651 27.8016 69.0272 27.4499C68.6918 27.0957 68.5241 26.6001 68.5241 25.9631C68.5241 25.304 68.6943 24.7924 69.0346 24.4284C69.3749 24.0644 69.8164 23.8824 70.3589 23.8824C70.8842 23.8824 71.3134 24.0607 71.6463 24.4173C71.9792 24.774 72.1457 25.2757 72.1457 25.9225C72.1457 25.9619 72.1445 26.0209 72.142 26.0996H69.2122C69.2368 26.53 69.3589 26.8596 69.5784 27.0883C69.7979 27.3171 70.0716 27.4314 70.3996 27.4314C70.6438 27.4314 70.8522 27.3675 71.0248 27.2396C71.1975 27.1117 71.3343 26.9076 71.4354 26.6272ZM69.2492 25.5536H71.4428C71.4132 25.224 71.3294 24.9769 71.1913 24.8121C70.9792 24.5563 70.7042 24.4284 70.3663 24.4284C70.0605 24.4284 69.8028 24.5305 69.5932 24.7346C69.386 24.9387 69.2714 25.2117 69.2492 25.5536Z" fill="white"/>
-<path d="M72.9632 27.8889V23.9709H73.5625V24.528C73.8511 24.0976 74.2679 23.8824 74.8129 23.8824C75.0496 23.8824 75.2667 23.9254 75.464 24.0115C75.6637 24.0951 75.8129 24.2058 75.9116 24.3435C76.0102 24.4813 76.0793 24.6448 76.1187 24.8342C76.1434 24.9572 76.1557 25.1724 76.1557 25.4798V27.8889H75.4899V25.5057C75.4899 25.2351 75.464 25.0334 75.4122 24.9006C75.3604 24.7653 75.2679 24.6584 75.1347 24.5797C75.004 24.4985 74.8499 24.4579 74.6723 24.4579C74.3887 24.4579 74.1433 24.5477 73.9362 24.7272C73.7315 24.9068 73.6291 25.2474 73.6291 25.7491V27.8889H72.9632Z" fill="white"/>
-<path d="M79.8698 26.6272L80.5579 26.712C80.4494 27.1129 80.2484 27.4241 79.9549 27.6454C79.6614 27.8668 79.2866 27.9774 78.8303 27.9774C78.2557 27.9774 77.7995 27.8016 77.4616 27.4499C77.1262 27.0957 76.9585 26.6001 76.9585 25.9631C76.9585 25.304 77.1287 24.7924 77.469 24.4284C77.8093 24.0644 78.2508 23.8824 78.7933 23.8824C79.3186 23.8824 79.7477 24.0607 80.0807 24.4173C80.4136 24.774 80.5801 25.2757 80.5801 25.9225C80.5801 25.9619 80.5789 26.0209 80.5764 26.0996H77.6466C77.6712 26.53 77.7933 26.8596 78.0128 27.0883C78.2323 27.3171 78.506 27.4314 78.834 27.4314C79.0782 27.4314 79.2866 27.3675 79.4592 27.2396C79.6318 27.1117 79.7687 26.9076 79.8698 26.6272ZM77.6835 25.5536H79.8772C79.8476 25.224 79.7638 24.9769 79.6257 24.8121C79.4136 24.5563 79.1386 24.4284 78.8007 24.4284C78.4949 24.4284 78.2372 24.5305 78.0276 24.7346C77.8204 24.9387 77.7057 25.2117 77.6835 25.5536Z" fill="white"/>
-<path d="M81.3902 27.8889V23.9709H81.9895V24.5649C82.1424 24.287 82.283 24.1037 82.4112 24.0152C82.5419 23.9267 82.685 23.8824 82.8404 23.8824C83.0648 23.8824 83.2929 23.9537 83.5247 24.0964L83.2954 24.7125C83.1326 24.6165 82.9698 24.5686 82.8071 24.5686C82.6616 24.5686 82.5308 24.6129 82.4149 24.7014C82.299 24.7875 82.2164 24.908 82.1671 25.0629C82.0931 25.2991 82.0561 25.5573 82.0561 25.8377V27.8889H81.3902Z" fill="white"/>
-<path d="M86.4842 27.4056C86.2375 27.6147 85.9995 27.7622 85.7702 27.8483C85.5433 27.9344 85.2992 27.9774 85.0377 27.9774C84.6062 27.9774 84.2744 27.8729 84.0426 27.6639C83.8108 27.4523 83.6949 27.183 83.6949 26.8559C83.6949 26.6641 83.7381 26.4894 83.8244 26.332C83.9132 26.1722 84.0278 26.0443 84.1684 25.9484C84.3114 25.8524 84.4717 25.7799 84.6493 25.7307C84.78 25.6963 84.9773 25.6631 85.2412 25.6311C85.7788 25.5671 86.1747 25.4909 86.4287 25.4024C86.4311 25.3114 86.4324 25.2536 86.4324 25.229C86.4324 24.9584 86.3695 24.7678 86.2437 24.6571C86.0735 24.5071 85.8208 24.4321 85.4854 24.4321C85.1721 24.4321 84.9403 24.4874 84.7899 24.5981C84.6419 24.7063 84.5322 24.8994 84.4606 25.1773L83.8096 25.0888C83.8688 24.8108 83.9662 24.587 84.1018 24.4173C84.2375 24.2452 84.4335 24.1136 84.69 24.0226C84.9465 23.9291 85.2437 23.8824 85.5815 23.8824C85.9169 23.8824 86.1894 23.9217 86.3991 24.0004C86.6087 24.0791 86.7628 24.1788 86.8615 24.2993C86.9601 24.4173 87.0292 24.5674 87.0686 24.7494C87.0908 24.8625 87.1019 25.0666 87.1019 25.3618V26.2472C87.1019 26.8645 87.1155 27.2556 87.1426 27.4204C87.1722 27.5827 87.229 27.7389 87.3128 27.8889H86.6173C86.5483 27.7512 86.5039 27.5901 86.4842 27.4056ZM86.4287 25.9225C86.187 26.0209 85.8245 26.1045 85.3411 26.1734C85.0673 26.2128 84.8737 26.257 84.7603 26.3062C84.6468 26.3554 84.5593 26.428 84.4976 26.5239C84.436 26.6173 84.4052 26.7219 84.4052 26.8375C84.4052 27.0146 84.4717 27.1621 84.6049 27.2802C84.7406 27.3982 84.9379 27.4573 85.1968 27.4573C85.4533 27.4573 85.6814 27.4019 85.8812 27.2912C86.0809 27.1781 86.2277 27.0244 86.3214 26.8301C86.3929 26.6801 86.4287 26.4587 86.4287 26.166V25.9225Z" fill="white"/>
-<path d="M89.5916 27.2949L89.6877 27.8815C89.5003 27.9209 89.3326 27.9406 89.1846 27.9406C88.943 27.9406 88.7555 27.9024 88.6223 27.8262C88.4892 27.7499 88.3955 27.6503 88.3412 27.5274C88.2869 27.4019 88.2598 27.14 88.2598 26.7415V24.4874H87.7715V23.9709H88.2598V23.0007L88.922 22.6022V23.9709H89.5916V24.4874H88.922V26.7784C88.922 26.9678 88.9331 27.0896 88.9553 27.1437C88.9799 27.1978 89.0182 27.2408 89.07 27.2728C89.1242 27.3048 89.2007 27.3208 89.2993 27.3208C89.3733 27.3208 89.4707 27.3122 89.5916 27.2949Z" fill="white"/>
-<path d="M90.25 23.2441V22.4805H90.9159V23.2441H90.25ZM90.25 27.8889V23.9709H90.9159V27.8889H90.25Z" fill="white"/>
-<path d="M91.6854 25.9299C91.6854 25.2044 91.8876 24.667 92.292 24.3177C92.6299 24.0275 93.0418 23.8824 93.5276 23.8824C94.0677 23.8824 94.5092 24.0595 94.852 24.4136C95.1948 24.7653 95.3662 25.2523 95.3662 25.8746C95.3662 26.3788 95.2897 26.776 95.1368 27.0662C94.9864 27.354 94.7656 27.5778 94.4746 27.7376C94.1861 27.8975 93.8704 27.9774 93.5276 27.9774C92.9776 27.9774 92.5325 27.8016 92.1922 27.4499C91.8543 27.0982 91.6854 26.5915 91.6854 25.9299ZM92.3697 25.9299C92.3697 26.4317 92.4795 26.808 92.699 27.0588C92.9185 27.3072 93.1947 27.4314 93.5276 27.4314C93.8581 27.4314 94.1331 27.306 94.3526 27.0551C94.572 26.8043 94.6818 26.4218 94.6818 25.9078C94.6818 25.4233 94.5708 25.0568 94.3489 24.8084C94.1294 24.5575 93.8556 24.4321 93.5276 24.4321C93.1947 24.4321 92.9185 24.5563 92.699 24.8047C92.4795 25.0531 92.3697 25.4282 92.3697 25.9299Z" fill="white"/>
-<path d="M96.1504 27.8889V23.9709H96.7497V24.528C97.0382 24.0976 97.455 23.8824 98 23.8824C98.2368 23.8824 98.4538 23.9254 98.6511 24.0115C98.8509 24.0951 99.0001 24.2058 99.0987 24.3435C99.1974 24.4813 99.2664 24.6448 99.3059 24.8342C99.3306 24.9572 99.3429 25.1724 99.3429 25.4798V27.8889H98.677V25.5057C98.677 25.2351 98.6511 25.0334 98.5993 24.9006C98.5475 24.7653 98.4551 24.6584 98.3219 24.5797C98.1912 24.4985 98.037 24.4579 97.8595 24.4579C97.5759 24.4579 97.3305 24.5477 97.1233 24.7272C96.9186 24.9068 96.8163 25.2474 96.8163 25.7491V27.8889H96.1504Z" fill="white"/>
-<path d="M100.467 27.8889V22.4805H104.389V23.1187H101.185V24.7752H104.185V25.4097H101.185V27.2507H104.515V27.8889H100.467Z" fill="white"/>
-<path d="M109.065 22.4805H109.782V25.6053C109.782 26.1488 109.721 26.5805 109.597 26.9002C109.474 27.2199 109.251 27.4806 108.928 27.6823C108.607 27.8815 108.185 27.9811 107.663 27.9811C107.155 27.9811 106.739 27.8938 106.416 27.7192C106.093 27.5446 105.862 27.2925 105.724 26.9629C105.586 26.6309 105.517 26.1783 105.517 25.6053V22.4805H106.235V25.6016C106.235 26.0713 106.278 26.4181 106.364 26.6419C106.453 26.8633 106.603 27.0342 106.815 27.1547C107.03 27.2753 107.291 27.3355 107.6 27.3355C108.127 27.3355 108.504 27.2162 108.728 26.9777C108.952 26.7391 109.065 26.2804 109.065 25.6016V22.4805Z" fill="white"/>
-</svg>
diff --git a/ios/ItaliaApp/Images.xcassets/euNextLogo.imageset/IT Finanziato dall'Unione europea 2.svg b/ios/ItaliaApp/Images.xcassets/euNextLogo.imageset/IT Finanziato dall'Unione europea 2.svg
deleted file mode 100644
index 244bce156e3..00000000000
--- a/ios/ItaliaApp/Images.xcassets/euNextLogo.imageset/IT Finanziato dall'Unione europea 2.svg	
+++ /dev/null
@@ -1,47 +0,0 @@
-<svg width="131" height="30" viewBox="0 0 131 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M31.1345 15.7135L30.2455 15.0653L29.3576 15.7135L29.6954 14.6673L28.7925 14.0203L29.9055 14.0215L30.2455 12.9602L30.5868 14.0203H31.6999L30.7968 14.6673L31.1345 15.7135ZM29.9135 20.3224L29.0247 19.6742L28.1356 20.3224L28.4746 19.2759L27.5716 18.6291L28.6834 18.6303L29.0247 17.5689L29.3659 18.6291H30.4776L29.5747 19.2759L29.9135 20.3224ZM28.6834 9.43927L29.0244 8.37794L29.3658 9.43794H30.4776L29.5747 10.0837L29.9135 11.1302L29.0244 10.4833L28.1355 11.1302L28.4745 10.0837L27.5714 9.43794L28.6834 9.43927ZM26.2161 6.73424L26.5537 7.78076L25.666 7.13261L24.7758 7.78076L25.1136 6.73424L24.2118 6.08609L25.3247 6.08861L25.6649 5.02728L26.005 6.08609H27.1191L26.2161 6.73424ZM26.5409 23.6858L25.6521 23.0388L24.7631 23.6858L25.1009 22.6393L24.199 21.9923L25.3109 21.9936L25.6521 20.9335L25.9922 21.9923H27.105L26.2022 22.6393L26.5409 23.6858ZM21.9456 24.9046L21.0573 24.2575L20.1685 24.9046L20.506 23.8582L19.6037 23.2113L20.7167 23.2124L21.0567 22.1512L21.3973 23.2113H22.5103L21.6074 23.8582L21.9456 24.9046ZM20.7155 4.85483L21.0561 3.79468L21.3967 4.85365H22.5098L21.6068 5.50061L21.9452 6.54698L21.0561 5.90002L20.1673 6.54698L20.5054 5.50061L19.6031 4.85365L20.7155 4.85483ZM17.3511 23.6858L16.4626 23.0388L15.5736 23.6858L15.9113 22.6393L15.009 21.9923L16.1219 21.9936L16.462 20.9335L16.8026 21.9923H17.9156L17.0133 22.6393L17.3511 23.6858ZM16.1145 6.08742L16.4551 5.02609L16.7956 6.08609H17.9089L17.0063 6.7332L17.3441 7.77957L16.4556 7.13261L15.5667 7.77957L15.9043 6.7332L15.002 6.08609L16.1145 6.08742ZM13.6401 10.0978L13.9785 11.1442L13.0894 10.4971L12.2005 11.1442L12.5387 10.0978L11.6364 9.45068L12.7488 9.45201L13.0894 8.39068L13.43 9.45068H14.5424L13.6401 10.0978ZM13.9785 20.3224L13.0894 19.6742L12.2005 20.3224L12.5387 19.2759L11.6364 18.6291L12.7488 18.6303L13.0894 17.5689L13.43 18.6291H14.5424L13.6401 19.2759L13.9785 20.3224ZM10.4012 14.0331L11.5142 14.0354L11.8548 12.9728L12.1954 14.0331H13.3076L12.4055 14.6802L12.7431 15.7262L11.8548 15.0794L10.9657 15.7262L11.3041 14.6802L10.4012 14.0331ZM0 0.443867V28.4542H42.1297V0.443867H0Z" fill="white"/>
-<path d="M47.3452 6.69928V0.442537H51.6463V1.50091H48.6119V2.98195H51.2311V4.04032H48.6119V6.69928H47.3452Z" fill="white"/>
-<path d="M52.6818 6.69928V2.16669H53.8843V6.69928H52.6818ZM52.6818 1.55202V0.442537H53.8843V1.55202H52.6818Z" fill="white"/>
-<path d="M59.251 6.69928H58.0485V4.38595C58.0485 3.89661 58.023 3.58002 57.9716 3.43647C57.9202 3.29276 57.8367 3.18106 57.7213 3.10135C57.6057 3.02165 57.4665 2.98195 57.304 2.98195C57.0957 2.98195 56.9088 3.03883 56.7432 3.15261C56.5777 3.26639 56.4644 3.41721 56.403 3.60491C56.3415 3.79276 56.311 4.13987 56.311 4.64639V6.69928H55.1085V2.16669H56.2255V2.83246C56.6218 2.32032 57.1211 2.06432 57.7232 2.06432C57.9886 2.06432 58.2309 2.11187 58.4509 2.20728C58.6705 2.30254 58.8367 2.42417 58.9493 2.57217C59.0619 2.72017 59.1405 2.88802 59.1846 3.07572C59.2291 3.26358 59.251 3.53246 59.251 3.88239V6.69928Z" fill="white"/>
-<path d="M62.9785 4.52252C62.8244 4.57378 62.5804 4.63497 62.2467 4.70608C61.9128 4.77734 61.6947 4.84697 61.5919 4.91526C61.435 5.02623 61.3566 5.16712 61.3566 5.33778C61.3566 5.50564 61.4193 5.65067 61.545 5.77304C61.6702 5.89541 61.8302 5.9566 62.0242 5.9566C62.2409 5.9566 62.4478 5.88549 62.6445 5.74326C62.7903 5.63512 62.8856 5.50282 62.9315 5.34623C62.9629 5.24386 62.9785 5.04904 62.9785 4.76163V4.52252ZM61.3694 3.54949L60.2781 3.35319C60.4007 2.91497 60.6118 2.59067 60.9115 2.38001C61.211 2.16963 61.6561 2.0643 62.2467 2.0643C62.783 2.0643 63.1824 2.12771 63.4451 2.25423C63.7073 2.38089 63.8922 2.54164 63.9992 2.73645C64.1063 2.93141 64.1596 3.28919 64.1596 3.80978L64.1468 5.20963C64.1468 5.60815 64.166 5.90178 64.2046 6.09097C64.2432 6.2803 64.3151 6.48297 64.4207 6.69926H63.2309C63.1995 6.61956 63.161 6.50149 63.1154 6.34504C63.0954 6.27393 63.0813 6.22697 63.0725 6.20415C62.8671 6.40341 62.6475 6.55275 62.4135 6.6523C62.1797 6.75186 61.93 6.80164 61.6647 6.80164C61.1968 6.80164 60.8281 6.67497 60.5584 6.42178C60.289 6.1686 60.1539 5.8486 60.1539 5.46149C60.1539 5.20549 60.2153 4.97719 60.338 4.77645C60.4607 4.57601 60.6324 4.42238 60.8538 4.31556C61.0749 4.20889 61.3934 4.11571 61.8101 4.03601C62.3721 3.93082 62.7617 3.8326 62.9785 3.74149V3.62208C62.9785 3.39156 62.9213 3.22727 62.8073 3.12904C62.6932 3.03097 62.4777 2.98193 62.1611 2.98193C61.9471 2.98193 61.7803 3.02386 61.6604 3.10786C61.5405 3.19171 61.4436 3.33897 61.3694 3.54949Z" fill="white"/>
-<path d="M69.4795 6.69928H68.2768V4.38595C68.2768 3.89661 68.2509 3.58002 68.1997 3.43647C68.1483 3.29276 68.065 3.18106 67.9492 3.10135C67.8338 3.02165 67.6948 2.98195 67.5319 2.98195C67.3237 2.98195 67.1368 3.03883 66.9715 3.15261C66.8061 3.26639 66.6926 3.41721 66.6311 3.60491C66.5699 3.79276 66.5392 4.13987 66.5392 4.64639V6.69928H65.3368V2.16669H66.4536V2.83246C66.8502 2.32032 67.3495 2.06432 67.9516 2.06432C68.2168 2.06432 68.4594 2.11187 68.6789 2.20728C68.8986 2.30254 69.0649 2.42417 69.1778 2.57217C69.2902 2.72017 69.3686 2.88802 69.4131 3.07572C69.457 3.26358 69.4795 3.53246 69.4795 3.88239V6.69928Z" fill="white"/>
-<path d="M70.2155 6.69928V5.76461L71.9186 3.81409C72.1983 3.49543 72.4051 3.26921 72.5393 3.13558C72.3993 3.14402 72.2154 3.1498 71.9871 3.15261L70.3823 3.16106V2.16669H74.1396V3.01602L72.4023 5.01335L71.7903 5.67498C72.1241 5.65498 72.3308 5.64506 72.4106 5.64506H74.2724V6.69928H70.2155Z" fill="white"/>
-<path d="M75.0812 6.69928V2.16669H76.2839V6.69928H75.0812ZM75.0812 1.55202V0.442537H76.2839V1.55202H75.0812Z" fill="white"/>
-<path d="M80.0243 4.52252C79.8702 4.57378 79.6263 4.63497 79.2922 4.70608C78.9586 4.77734 78.7405 4.84697 78.6377 4.91526C78.4808 5.02623 78.4021 5.16712 78.4021 5.33778C78.4021 5.50564 78.4648 5.65067 78.5904 5.77304C78.7161 5.89541 78.8757 5.9566 79.0697 5.9566C79.2864 5.9566 79.4936 5.88549 79.6903 5.74326C79.8361 5.63512 79.9314 5.50282 79.977 5.34623C80.0084 5.24386 80.0243 5.04904 80.0243 4.76163V4.52252ZM78.4151 3.54949L77.3237 3.35319C77.4464 2.91497 77.6577 2.59067 77.957 2.38001C78.2568 2.16963 78.7019 2.0643 79.2922 2.0643C79.8288 2.0643 80.2279 2.12771 80.4906 2.25423C80.7531 2.38089 80.938 2.54164 81.0447 2.73645C81.1518 2.93141 81.2054 3.28919 81.2054 3.80978L81.1925 5.20963C81.1925 5.60815 81.2118 5.90178 81.2501 6.09097C81.2888 6.2803 81.3607 6.48297 81.4663 6.69926H80.2767C80.2452 6.61956 80.2068 6.50149 80.1612 6.34504C80.1412 6.27393 80.1271 6.22697 80.1183 6.20415C79.9129 6.40341 79.6933 6.55275 79.4593 6.6523C79.2252 6.75186 78.9758 6.80164 78.7103 6.80164C78.2422 6.80164 77.8738 6.67497 77.6039 6.42178C77.3344 6.1686 77.1998 5.8486 77.1998 5.46149C77.1998 5.20549 77.261 4.97719 77.3837 4.77645C77.5061 4.57601 77.6782 4.42238 77.8994 4.31556C78.1204 4.20889 78.4392 4.11571 78.8559 4.03601C79.4179 3.93082 79.8072 3.8326 80.0243 3.74149V3.62208C80.0243 3.39156 79.9671 3.22727 79.8531 3.12904C79.7387 3.03097 79.5235 2.98193 79.2066 2.98193C78.9929 2.98193 78.826 3.02386 78.7062 3.10786C78.5864 3.19171 78.4891 3.33897 78.4151 3.54949Z" fill="white"/>
-<path d="M84.475 2.16667V3.12267H83.6533V4.94934C83.6533 5.31927 83.6612 5.53482 83.6768 5.59601C83.6926 5.65719 83.7282 5.70771 83.7839 5.74756C83.8393 5.78727 83.9072 5.80727 83.987 5.80727C84.0984 5.80727 84.2594 5.76875 84.4707 5.69201L84.5733 6.62238C84.2936 6.74193 83.9772 6.80164 83.6232 6.80164C83.4064 6.80164 83.2108 6.76534 83.037 6.69289C82.863 6.6203 82.7353 6.52638 82.654 6.41126C82.5726 6.29586 82.5163 6.14015 82.485 5.94386C82.4591 5.80445 82.4463 5.52267 82.4463 5.09882V3.12267H81.8942V2.16667H82.4463V1.26608L83.6533 0.566228V2.16667H84.475Z" fill="white"/>
-<path d="M86.2638 4.43304C86.2638 4.88252 86.3706 5.22682 86.5847 5.46578C86.7986 5.70475 87.0626 5.8243 87.3764 5.8243C87.6902 5.8243 87.9533 5.70475 88.166 5.46578C88.3787 5.22682 88.4848 4.87971 88.4848 4.42445C88.4848 3.9806 88.3787 3.63912 88.166 3.40015C87.9533 3.16104 87.6902 3.04164 87.3764 3.04164C87.0626 3.04164 86.7986 3.16104 86.5847 3.40015C86.3706 3.63912 86.2638 3.98341 86.2638 4.43304ZM85.0312 4.36889C85.0312 3.97067 85.1296 3.58504 85.3264 3.2123C85.5234 2.83956 85.8022 2.55512 86.1631 2.35867C86.5241 2.16238 86.9271 2.0643 87.3721 2.0643C88.0598 2.0643 88.6232 2.28697 89.0625 2.73215C89.5018 3.17749 89.7218 3.74015 89.7218 4.42015C89.7218 5.10593 89.4997 5.67423 89.0561 6.12519C88.6125 6.57615 88.054 6.80164 87.3806 6.80164C86.9642 6.80164 86.5667 6.70771 86.1889 6.52001C85.8108 6.33215 85.5234 6.05689 85.3264 5.69408C85.1296 5.33141 85.0312 4.88963 85.0312 4.36889Z" fill="white"/>
-<path d="M48.2867 14.8237C48.2867 15.3074 48.3537 15.6574 48.488 15.8737C48.6819 16.1866 48.9528 16.343 49.301 16.343C49.5778 16.343 49.8131 16.2257 50.0072 15.991C50.2012 15.7563 50.2983 15.4055 50.2983 14.9389C50.2983 14.4183 50.2039 14.0434 50.0156 13.8143C49.8273 13.5854 49.5862 13.4707 49.2926 13.4707C49.007 13.4707 48.7683 13.5837 48.5756 13.8101C48.383 14.0362 48.2867 14.3741 48.2867 14.8237ZM51.4965 17.1882H50.3795V16.5222C50.1941 16.7812 49.975 16.974 49.7226 17.1007C49.4702 17.2272 49.2155 17.2905 48.9586 17.2905C48.4367 17.2905 47.9893 17.0808 47.617 16.6611C47.2448 16.2414 47.0585 15.6559 47.0585 14.9048C47.0585 14.1365 47.2399 13.5526 47.6019 13.1528C47.9643 12.7531 48.4222 12.5531 48.9757 12.5531C49.4834 12.5531 49.923 12.7637 50.2938 13.1848V10.9313H51.4965V17.1882Z" fill="white"/>
-<path d="M55.1897 15.0114C55.0356 15.0627 54.7917 15.1239 54.4581 15.195C54.1241 15.2661 53.9059 15.3359 53.8032 15.4042C53.6462 15.5151 53.5679 15.6559 53.5679 15.8266C53.5679 15.9946 53.6305 16.1396 53.7561 16.262C53.8815 16.3843 54.0414 16.4455 54.2355 16.4455C54.4523 16.4455 54.659 16.3743 54.8557 16.232C55.0015 16.124 55.0968 15.9916 55.1427 15.8351C55.1741 15.7326 55.1897 15.5378 55.1897 15.2504V15.0114ZM53.5805 14.0384L52.4894 13.8421C52.6118 13.4039 52.8231 13.0796 53.1227 12.8689C53.4222 12.6584 53.8673 12.5531 54.4581 12.5531C54.9942 12.5531 55.3938 12.6165 55.6563 12.7431C55.9186 12.8697 56.1034 13.0306 56.2105 13.2254C56.3175 13.4202 56.371 13.7781 56.371 14.2987L56.3582 15.6986C56.3582 16.0969 56.3774 16.3907 56.4158 16.5799C56.4545 16.7691 56.5265 16.9719 56.632 17.1882H55.4422C55.4109 17.1085 55.3722 16.9904 55.3266 16.8338C55.3067 16.7627 55.2925 16.7158 55.2837 16.6931C55.0783 16.8923 54.8587 17.0415 54.6249 17.141C54.3911 17.2406 54.1412 17.2905 53.876 17.2905C53.4079 17.2905 53.0392 17.164 52.7696 16.9107C52.5001 16.6575 52.3652 16.3373 52.3652 15.9504C52.3652 15.6944 52.4264 15.4661 52.5491 15.2654C52.6718 15.0649 52.8437 14.9111 53.0651 14.8045C53.2861 14.6978 53.6048 14.6046 54.0213 14.5249C54.5833 14.4197 54.9731 14.3215 55.1897 14.2304V14.111C55.1897 13.8805 55.1326 13.7162 55.0185 13.618C54.9046 13.5199 54.6889 13.4707 54.3725 13.4707C54.1583 13.4707 53.9914 13.5128 53.8716 13.5966C53.7518 13.6806 53.6548 13.8279 53.5805 14.0384Z" fill="white"/>
-<path d="M57.5564 17.1882V10.9313H58.7591V17.1882H57.5564Z" fill="white"/>
-<path d="M59.9912 17.1882V10.9313H61.1937V17.1882H59.9912Z" fill="white"/>
-<path d="M62.418 13.1548L62.191 11.9898V10.9313H63.5008V11.9898L63.3038 13.1548H62.418Z" fill="white"/>
-<path d="M64.5105 10.9313H65.7772V14.32C65.7772 14.8578 65.7928 15.2064 65.8244 15.3657C65.8785 15.6217 66.0076 15.8273 66.2118 15.9824C66.4158 16.1375 66.6946 16.215 67.0483 16.215C67.4078 16.215 67.6788 16.1418 67.8615 15.9953C68.0441 15.8488 68.154 15.6688 68.1908 15.4553C68.228 15.242 68.2465 14.8877 68.2465 14.3926V10.9313H69.5132V14.2177C69.5132 14.9688 69.4791 15.4994 69.4106 15.8095C69.3421 16.1197 69.2158 16.3814 69.0319 16.5949C68.848 16.8082 68.6017 16.9784 68.2935 17.1049C67.9854 17.2314 67.5833 17.2947 67.0868 17.2947C66.4877 17.2947 66.0334 17.2256 65.7239 17.0878C65.4143 16.9498 65.1696 16.7705 64.9897 16.5501C64.8101 16.3296 64.6917 16.0984 64.6347 15.8565C64.5519 15.498 64.5105 14.9688 64.5105 14.2689V10.9313Z" fill="white"/>
-<path d="M74.9743 17.1882H73.7716V14.8749C73.7716 14.3855 73.7459 14.0689 73.6945 13.9252C73.6431 13.7817 73.5599 13.67 73.4441 13.5903C73.3286 13.5106 73.1896 13.4707 73.0269 13.4707C72.8185 13.4707 72.6318 13.5278 72.4663 13.6415C72.301 13.7553 72.1875 13.9061 72.126 14.0938C72.0648 14.2817 72.034 14.6288 72.034 15.1353V17.1882H70.8317V12.6556H71.9485V13.3214C72.3451 12.8092 72.8444 12.5531 73.4464 12.5531C73.7116 12.5531 73.9542 12.6008 74.1738 12.6961C74.3935 12.7915 74.5597 12.9131 74.6726 13.0611C74.7852 13.2091 74.8635 13.3769 74.9079 13.5646C74.952 13.7525 74.9743 14.0214 74.9743 14.3713V17.1882Z" fill="white"/>
-<path d="M76.1938 17.1882V12.6556H77.3965V17.1882H76.1938ZM76.1938 12.0409V10.9313H77.3965V12.0409H76.1938Z" fill="white"/>
-<path d="M79.5832 14.9218C79.5832 15.3714 79.6903 15.7156 79.9045 15.9546C80.1183 16.1937 80.382 16.3131 80.696 16.3131C81.0099 16.3131 81.273 16.1937 81.4857 15.9546C81.6982 15.7156 81.8047 15.3686 81.8047 14.9134C81.8047 14.4695 81.6982 14.128 81.4857 13.8891C81.273 13.65 81.0099 13.5306 80.696 13.5306C80.382 13.5306 80.1183 13.65 79.9045 13.8891C79.6903 14.128 79.5832 14.4723 79.5832 14.9218ZM78.3508 14.8578C78.3508 14.4596 78.4495 14.074 78.6461 13.7012C78.8431 13.3285 79.122 13.0439 79.4829 12.8476C79.8435 12.6513 80.2468 12.5531 80.6919 12.5531C81.3792 12.5531 81.9427 12.7757 82.3822 13.2211C82.8215 13.6664 83.0412 14.2291 83.0412 14.9091C83.0412 15.5949 82.8196 16.1631 82.3758 16.6141C81.932 17.0651 81.3737 17.2905 80.7003 17.2905C80.2836 17.2905 79.8864 17.1966 79.5085 17.0089C79.1304 16.8211 78.8431 16.5458 78.6461 16.183C78.4495 15.8202 78.3508 15.3786 78.3508 14.8578Z" fill="white"/>
-<path d="M88.117 17.1882H86.9143V14.8749C86.9143 14.3855 86.8887 14.0689 86.8375 13.9252C86.7861 13.7817 86.7024 13.67 86.587 13.5903C86.4716 13.5106 86.3322 13.4707 86.1697 13.4707C85.9614 13.4707 85.7746 13.5278 85.6089 13.6415C85.4436 13.7553 85.3301 13.9061 85.2689 14.0938C85.2074 14.2817 85.1769 14.6288 85.1769 15.1353V17.1882H83.9742V12.6556H85.0914V13.3214C85.4877 12.8092 85.987 12.5531 86.5891 12.5531C86.8546 12.5531 87.0968 12.6008 87.3167 12.6961C87.5364 12.7915 87.7026 12.9131 87.8152 13.0611C87.9277 13.2091 88.0064 13.3769 88.0506 13.5646C88.0948 13.7525 88.117 14.0214 88.117 14.3713V17.1882Z" fill="white"/>
-<path d="M92.0369 14.5335C92.0283 14.1864 91.9383 13.9226 91.7671 13.7418C91.596 13.5611 91.3879 13.4707 91.1425 13.4707C90.8798 13.4707 90.6631 13.5661 90.492 13.7566C90.3208 13.9474 90.2366 14.2063 90.2396 14.5335H92.0369ZM91.9686 15.7455L93.1668 15.9461C93.0127 16.3843 92.7693 16.718 92.4371 16.947C92.1046 17.1761 91.6888 17.2905 91.1894 17.2905C90.3991 17.2905 89.8142 17.0331 89.435 16.518C89.1352 16.1055 88.9855 15.5848 88.9855 14.956C88.9855 14.2048 89.1823 13.6166 89.576 13.1911C89.9696 12.7658 90.4676 12.5531 91.0697 12.5531C91.7459 12.5531 92.2792 12.7757 92.6703 13.2211C93.0612 13.6664 93.2481 14.3486 93.231 15.2676H90.218C90.2265 15.6231 90.3236 15.8999 90.509 16.0977C90.6944 16.2954 90.9257 16.3943 91.2022 16.3943C91.3905 16.3943 91.5489 16.343 91.6775 16.2406C91.8057 16.1383 91.9026 15.9731 91.9686 15.7455Z" fill="white"/>
-<path d="M99.3465 14.5335C99.3378 14.1864 99.2478 13.9226 99.0766 13.7418C98.9055 13.5611 98.6974 13.4707 98.452 13.4707C98.1893 13.4707 97.9726 13.5661 97.8015 13.7566C97.6303 13.9474 97.5461 14.2063 97.5491 14.5335H99.3465ZM99.2781 15.7455L100.476 15.9461C100.322 16.3843 100.079 16.718 99.7466 16.947C99.4141 17.1761 98.9983 17.2905 98.4989 17.2905C97.7086 17.2905 97.1238 17.0331 96.7445 16.518C96.4448 16.1055 96.2952 15.5848 96.2952 14.956C96.2952 14.2048 96.4918 13.6166 96.8855 13.1911C97.2793 12.7658 97.7771 12.5531 98.3792 12.5531C99.0555 12.5531 99.5887 12.7757 99.9798 13.2211C100.371 13.6664 100.558 14.3486 100.54 15.2676H97.5275C97.536 15.6231 97.6332 15.8999 97.8186 16.0977C98.0039 16.2954 98.2352 16.3943 98.5117 16.3943C98.7001 16.3943 98.8584 16.343 98.9871 16.2406C99.1153 16.1383 99.2121 15.9731 99.2781 15.7455Z" fill="white"/>
-<path d="M104.512 17.1882V16.5095C104.346 16.7513 104.129 16.942 103.859 17.0814C103.59 17.2208 103.305 17.2905 103.005 17.2905C102.7 17.2905 102.426 17.2236 102.184 17.0899C101.941 16.9562 101.766 16.7685 101.657 16.5266C101.549 16.2848 101.495 15.9504 101.495 15.5236V12.6556H102.697V14.7383C102.697 15.3757 102.719 15.7663 102.763 15.91C102.808 16.0535 102.888 16.1674 103.005 16.2513C103.122 16.3353 103.271 16.3772 103.45 16.3772C103.656 16.3772 103.84 16.3211 104.002 16.2086C104.165 16.0962 104.276 15.9568 104.336 15.7904C104.396 15.6239 104.426 15.2163 104.426 14.5676V12.6556H105.629V17.1882H104.512Z" fill="white"/>
-<path d="M108.025 17.1882H106.823V12.6556H107.94V13.3001C108.131 12.9956 108.303 12.795 108.455 12.6983C108.608 12.6015 108.781 12.5531 108.975 12.5531C109.249 12.5531 109.513 12.6286 109.767 12.7793L109.395 13.8249C109.192 13.6941 109.004 13.6286 108.83 13.6286C108.662 13.6286 108.519 13.675 108.402 13.7675C108.285 13.8599 108.193 14.027 108.126 14.2689C108.059 14.5107 108.025 15.0172 108.025 15.7882V17.1882Z" fill="white"/>
-<path d="M111.239 14.9218C111.239 15.3714 111.346 15.7156 111.56 15.9546C111.774 16.1937 112.038 16.3131 112.352 16.3131C112.666 16.3131 112.929 16.1937 113.142 15.9546C113.354 15.7156 113.46 15.3686 113.46 14.9134C113.46 14.4695 113.354 14.128 113.142 13.8891C112.929 13.65 112.666 13.5306 112.352 13.5306C112.038 13.5306 111.774 13.65 111.56 13.8891C111.346 14.128 111.239 14.4723 111.239 14.9218ZM110.007 14.8578C110.007 14.4596 110.105 14.074 110.302 13.7012C110.499 13.3285 110.778 13.0439 111.139 12.8476C111.5 12.6513 111.903 12.5531 112.348 12.5531C113.035 12.5531 113.599 12.7757 114.038 13.2211C114.477 13.6664 114.697 14.2291 114.697 14.9091C114.697 15.5949 114.475 16.1631 114.032 16.6141C113.588 17.0651 113.03 17.2905 112.356 17.2905C111.94 17.2905 111.542 17.1966 111.164 17.0089C110.786 16.8211 110.499 16.5458 110.302 16.183C110.105 15.8202 110.007 15.3786 110.007 14.8578Z" fill="white"/>
-<path d="M116.794 14.8451C116.794 15.3544 116.895 15.7307 117.098 15.9738C117.301 16.2172 117.548 16.3387 117.839 16.3387C118.118 16.3387 118.35 16.2272 118.536 16.0037C118.721 15.7805 118.814 15.4141 118.814 14.9048C118.814 14.4297 118.719 14.0768 118.527 13.8463C118.336 13.6159 118.099 13.5006 117.817 13.5006C117.523 13.5006 117.279 13.6138 117.085 13.8399C116.891 14.0661 116.794 14.4012 116.794 14.8451ZM115.604 12.6556H116.726V13.3214C116.871 13.0938 117.068 12.9088 117.316 12.7666C117.565 12.6243 117.84 12.5531 118.142 12.5531C118.67 12.5531 119.118 12.7594 119.486 13.172C119.854 13.5846 120.038 14.1593 120.038 14.8962C120.038 15.6531 119.853 16.2414 119.482 16.6611C119.111 17.0808 118.661 17.2905 118.134 17.2905C117.883 17.2905 117.655 17.2406 117.451 17.141C117.247 17.0415 117.032 16.8709 116.807 16.629V18.9124H115.604V12.6556Z" fill="white"/>
-<path d="M123.693 14.5335C123.684 14.1864 123.594 13.9226 123.423 13.7418C123.252 13.5611 123.044 13.4707 122.799 13.4707C122.536 13.4707 122.319 13.5661 122.148 13.7566C121.977 13.9474 121.893 14.2063 121.896 14.5335H123.693ZM123.625 15.7455L124.823 15.9461C124.669 16.3843 124.425 16.718 124.093 16.947C123.761 17.1761 123.345 17.2905 122.846 17.2905C122.055 17.2905 121.47 17.0331 121.091 16.518C120.791 16.1055 120.642 15.5848 120.642 14.956C120.642 14.2048 120.838 13.6166 121.232 13.1911C121.626 12.7658 122.124 12.5531 122.726 12.5531C123.402 12.5531 123.935 12.7757 124.326 13.2211C124.717 13.6664 124.904 14.3486 124.887 15.2676H121.874C121.883 15.6231 121.98 15.8999 122.165 16.0977C122.351 16.2954 122.582 16.3943 122.858 16.3943C123.047 16.3943 123.205 16.343 123.334 16.2406C123.462 16.1383 123.559 15.9731 123.625 15.7455Z" fill="white"/>
-<path d="M128.375 15.0114C128.221 15.0627 127.977 15.1239 127.643 15.195C127.309 15.2661 127.091 15.3359 126.988 15.4042C126.831 15.5151 126.753 15.6559 126.753 15.8266C126.753 15.9946 126.816 16.1396 126.941 16.262C127.066 16.3843 127.226 16.4455 127.42 16.4455C127.637 16.4455 127.844 16.3743 128.041 16.232C128.186 16.124 128.282 15.9916 128.328 15.8351C128.359 15.7326 128.375 15.5378 128.375 15.2504V15.0114ZM126.766 14.0384L125.674 13.8421C125.797 13.4039 126.008 13.0796 126.308 12.8689C126.607 12.6584 127.052 12.5531 127.643 12.5531C128.179 12.5531 128.579 12.6165 128.841 12.7431C129.104 12.8697 129.288 13.0306 129.395 13.2254C129.503 13.4202 129.556 13.7781 129.556 14.2987L129.543 15.6986C129.543 16.0969 129.562 16.3907 129.601 16.5799C129.639 16.7691 129.711 16.9719 129.817 17.1882H128.627C128.596 17.1085 128.557 16.9904 128.512 16.8338C128.492 16.7627 128.477 16.7158 128.469 16.6931C128.263 16.8923 128.044 17.0415 127.81 17.141C127.576 17.2406 127.326 17.2905 127.061 17.2905C126.593 17.2905 126.224 17.164 125.955 16.9107C125.685 16.6575 125.55 16.3373 125.55 15.9504C125.55 15.6944 125.611 15.4661 125.734 15.2654C125.857 15.0649 126.029 14.9111 126.25 14.8045C126.471 14.6978 126.79 14.6046 127.206 14.5249C127.768 14.4197 128.158 14.3215 128.375 14.2304V14.111C128.375 13.8805 128.318 13.7162 128.203 13.618C128.09 13.5199 127.874 13.4707 127.557 13.4707C127.343 13.4707 127.176 13.5128 127.057 13.5966C126.937 13.6806 126.84 13.8279 126.766 14.0384Z" fill="white"/>
-<path d="M47.3383 27.8889V22.4805H48.0744L50.9229 26.7268V22.4805H51.6109V27.8889H50.8748L48.0263 23.6389V27.8889H47.3383Z" fill="white"/>
-<path d="M55.4249 26.6272L56.113 26.712C56.0045 27.1129 55.8035 27.4241 55.51 27.6454C55.2165 27.8668 54.8417 27.9774 54.3854 27.9774C53.8108 27.9774 53.3545 27.8016 53.0167 27.4499C52.6813 27.0957 52.5136 26.6001 52.5136 25.9631C52.5136 25.304 52.6837 24.7924 53.0241 24.4284C53.3644 24.0644 53.8059 23.8824 54.3484 23.8824C54.8737 23.8824 55.3028 24.0607 55.6358 24.4173C55.9687 24.774 56.1352 25.2757 56.1352 25.9225C56.1352 25.9619 56.1339 26.0209 56.1315 26.0996H53.2016C53.2263 26.53 53.3484 26.8596 53.5679 27.0883C53.7874 27.3171 54.0611 27.4314 54.3891 27.4314C54.6333 27.4314 54.8417 27.3675 55.0143 27.2396C55.1869 27.1117 55.3238 26.9076 55.4249 26.6272ZM53.2386 25.5536H55.4323C55.4027 25.224 55.3189 24.9769 55.1808 24.8121C54.9687 24.5563 54.6937 24.4284 54.3558 24.4284C54.05 24.4284 53.7923 24.5305 53.5827 24.7346C53.3755 24.9387 53.2608 25.2117 53.2386 25.5536Z" fill="white"/>
-<path d="M56.5088 27.8889L57.9441 25.8524L56.6161 23.9709H57.4484L58.0514 24.8895C58.1649 25.0642 58.2561 25.2105 58.3252 25.3286C58.4337 25.1662 58.5335 25.0224 58.6248 24.8969L59.287 23.9709H60.0823L58.7247 25.8155L60.1859 27.8889H59.3684L58.5619 26.6715L58.3473 26.3431L57.3152 27.8889H56.5088Z" fill="white"/>
-<path d="M62.1946 27.2949L62.2908 27.8815C62.1034 27.9209 61.9357 27.9406 61.7877 27.9406C61.546 27.9406 61.3586 27.9024 61.2254 27.8262C61.0922 27.7499 60.9985 27.6503 60.9443 27.5274C60.89 27.4019 60.8629 27.14 60.8629 26.7415V24.4874H60.3746V23.9709H60.8629V23.0007L61.525 22.6022V23.9709H62.1946V24.4874H61.525V26.7784C61.525 26.9678 61.5361 27.0896 61.5583 27.1437C61.583 27.1978 61.6212 27.2408 61.673 27.2728C61.7273 27.3048 61.8037 27.3208 61.9024 27.3208C61.9764 27.3208 62.0738 27.3122 62.1946 27.2949Z" fill="white"/>
-<path d="M65.4722 25.7676V25.133L67.7694 25.1294V27.1363C67.4168 27.4167 67.053 27.6282 66.6782 27.7708C66.3033 27.911 65.9186 27.9811 65.524 27.9811C64.9913 27.9811 64.5067 27.868 64.0702 27.6417C63.6361 27.413 63.3081 27.0834 63.0861 26.653C62.8642 26.2226 62.7532 25.7418 62.7532 25.2105C62.7532 24.6842 62.8629 24.1935 63.0824 23.7385C63.3044 23.281 63.6225 22.9416 64.0369 22.7203C64.4512 22.4989 64.9284 22.3882 65.4685 22.3882C65.8606 22.3882 66.2145 22.4522 66.5302 22.5801C66.8483 22.7055 67.0974 22.8814 67.2774 23.1076C67.4575 23.3339 67.5943 23.6291 67.6881 23.9931L67.0407 24.1701C66.9593 23.8947 66.8582 23.6782 66.7373 23.5208C66.6165 23.3634 66.4439 23.238 66.2194 23.1445C65.995 23.0486 65.7459 23.0007 65.4722 23.0007C65.1442 23.0007 64.8606 23.0511 64.6213 23.1519C64.3821 23.2503 64.1885 23.3807 64.0406 23.543C63.8951 23.7053 63.7816 23.8836 63.7002 24.0779C63.5621 24.4124 63.4931 24.7752 63.4931 25.1662C63.4931 25.6483 63.5757 26.0517 63.7409 26.3763C63.9086 26.701 64.1515 26.942 64.4697 27.0994C64.7878 27.2568 65.1257 27.3355 65.4833 27.3355C65.794 27.3355 66.0974 27.2765 66.3933 27.1584C66.6893 27.0379 66.9137 26.91 67.0666 26.7748V25.7676H65.4722Z" fill="white"/>
-<path d="M71.4354 26.6272L72.1235 26.712C72.015 27.1129 71.814 27.4241 71.5205 27.6454C71.227 27.8668 70.8522 27.9774 70.3959 27.9774C69.8213 27.9774 69.3651 27.8016 69.0272 27.4499C68.6918 27.0957 68.5241 26.6001 68.5241 25.9631C68.5241 25.304 68.6943 24.7924 69.0346 24.4284C69.3749 24.0644 69.8164 23.8824 70.3589 23.8824C70.8842 23.8824 71.3134 24.0607 71.6463 24.4173C71.9792 24.774 72.1457 25.2757 72.1457 25.9225C72.1457 25.9619 72.1445 26.0209 72.142 26.0996H69.2122C69.2368 26.53 69.3589 26.8596 69.5784 27.0883C69.7979 27.3171 70.0716 27.4314 70.3996 27.4314C70.6438 27.4314 70.8522 27.3675 71.0248 27.2396C71.1975 27.1117 71.3343 26.9076 71.4354 26.6272ZM69.2492 25.5536H71.4428C71.4132 25.224 71.3294 24.9769 71.1913 24.8121C70.9792 24.5563 70.7042 24.4284 70.3663 24.4284C70.0605 24.4284 69.8028 24.5305 69.5932 24.7346C69.386 24.9387 69.2714 25.2117 69.2492 25.5536Z" fill="white"/>
-<path d="M72.9632 27.8889V23.9709H73.5625V24.528C73.8511 24.0976 74.2679 23.8824 74.8129 23.8824C75.0496 23.8824 75.2667 23.9254 75.464 24.0115C75.6637 24.0951 75.8129 24.2058 75.9116 24.3435C76.0102 24.4813 76.0793 24.6448 76.1187 24.8342C76.1434 24.9572 76.1557 25.1724 76.1557 25.4798V27.8889H75.4899V25.5057C75.4899 25.2351 75.464 25.0334 75.4122 24.9006C75.3604 24.7653 75.2679 24.6584 75.1347 24.5797C75.004 24.4985 74.8499 24.4579 74.6723 24.4579C74.3887 24.4579 74.1433 24.5477 73.9362 24.7272C73.7315 24.9068 73.6291 25.2474 73.6291 25.7491V27.8889H72.9632Z" fill="white"/>
-<path d="M79.8698 26.6272L80.5579 26.712C80.4494 27.1129 80.2484 27.4241 79.9549 27.6454C79.6614 27.8668 79.2866 27.9774 78.8303 27.9774C78.2557 27.9774 77.7995 27.8016 77.4616 27.4499C77.1262 27.0957 76.9585 26.6001 76.9585 25.9631C76.9585 25.304 77.1287 24.7924 77.469 24.4284C77.8093 24.0644 78.2508 23.8824 78.7933 23.8824C79.3186 23.8824 79.7477 24.0607 80.0807 24.4173C80.4136 24.774 80.5801 25.2757 80.5801 25.9225C80.5801 25.9619 80.5789 26.0209 80.5764 26.0996H77.6466C77.6712 26.53 77.7933 26.8596 78.0128 27.0883C78.2323 27.3171 78.506 27.4314 78.834 27.4314C79.0782 27.4314 79.2866 27.3675 79.4592 27.2396C79.6318 27.1117 79.7687 26.9076 79.8698 26.6272ZM77.6835 25.5536H79.8772C79.8476 25.224 79.7638 24.9769 79.6257 24.8121C79.4136 24.5563 79.1386 24.4284 78.8007 24.4284C78.4949 24.4284 78.2372 24.5305 78.0276 24.7346C77.8204 24.9387 77.7057 25.2117 77.6835 25.5536Z" fill="white"/>
-<path d="M81.3902 27.8889V23.9709H81.9895V24.5649C82.1424 24.287 82.283 24.1037 82.4112 24.0152C82.5419 23.9267 82.685 23.8824 82.8404 23.8824C83.0648 23.8824 83.2929 23.9537 83.5247 24.0964L83.2954 24.7125C83.1326 24.6165 82.9698 24.5686 82.8071 24.5686C82.6616 24.5686 82.5308 24.6129 82.4149 24.7014C82.299 24.7875 82.2164 24.908 82.1671 25.0629C82.0931 25.2991 82.0561 25.5573 82.0561 25.8377V27.8889H81.3902Z" fill="white"/>
-<path d="M86.4842 27.4056C86.2375 27.6147 85.9995 27.7622 85.7702 27.8483C85.5433 27.9344 85.2992 27.9774 85.0377 27.9774C84.6062 27.9774 84.2744 27.8729 84.0426 27.6639C83.8108 27.4523 83.6949 27.183 83.6949 26.8559C83.6949 26.6641 83.7381 26.4894 83.8244 26.332C83.9132 26.1722 84.0278 26.0443 84.1684 25.9484C84.3114 25.8524 84.4717 25.7799 84.6493 25.7307C84.78 25.6963 84.9773 25.6631 85.2412 25.6311C85.7788 25.5671 86.1747 25.4909 86.4287 25.4024C86.4311 25.3114 86.4324 25.2536 86.4324 25.229C86.4324 24.9584 86.3695 24.7678 86.2437 24.6571C86.0735 24.5071 85.8208 24.4321 85.4854 24.4321C85.1721 24.4321 84.9403 24.4874 84.7899 24.5981C84.6419 24.7063 84.5322 24.8994 84.4606 25.1773L83.8096 25.0888C83.8688 24.8108 83.9662 24.587 84.1018 24.4173C84.2375 24.2452 84.4335 24.1136 84.69 24.0226C84.9465 23.9291 85.2437 23.8824 85.5815 23.8824C85.9169 23.8824 86.1894 23.9217 86.3991 24.0004C86.6087 24.0791 86.7628 24.1788 86.8615 24.2993C86.9601 24.4173 87.0292 24.5674 87.0686 24.7494C87.0908 24.8625 87.1019 25.0666 87.1019 25.3618V26.2472C87.1019 26.8645 87.1155 27.2556 87.1426 27.4204C87.1722 27.5827 87.229 27.7389 87.3128 27.8889H86.6173C86.5483 27.7512 86.5039 27.5901 86.4842 27.4056ZM86.4287 25.9225C86.187 26.0209 85.8245 26.1045 85.3411 26.1734C85.0673 26.2128 84.8737 26.257 84.7603 26.3062C84.6468 26.3554 84.5593 26.428 84.4976 26.5239C84.436 26.6173 84.4052 26.7219 84.4052 26.8375C84.4052 27.0146 84.4717 27.1621 84.6049 27.2802C84.7406 27.3982 84.9379 27.4573 85.1968 27.4573C85.4533 27.4573 85.6814 27.4019 85.8812 27.2912C86.0809 27.1781 86.2277 27.0244 86.3214 26.8301C86.3929 26.6801 86.4287 26.4587 86.4287 26.166V25.9225Z" fill="white"/>
-<path d="M89.5916 27.2949L89.6877 27.8815C89.5003 27.9209 89.3326 27.9406 89.1846 27.9406C88.943 27.9406 88.7555 27.9024 88.6223 27.8262C88.4892 27.7499 88.3955 27.6503 88.3412 27.5274C88.2869 27.4019 88.2598 27.14 88.2598 26.7415V24.4874H87.7715V23.9709H88.2598V23.0007L88.922 22.6022V23.9709H89.5916V24.4874H88.922V26.7784C88.922 26.9678 88.9331 27.0896 88.9553 27.1437C88.9799 27.1978 89.0182 27.2408 89.07 27.2728C89.1242 27.3048 89.2007 27.3208 89.2993 27.3208C89.3733 27.3208 89.4707 27.3122 89.5916 27.2949Z" fill="white"/>
-<path d="M90.25 23.2441V22.4805H90.9159V23.2441H90.25ZM90.25 27.8889V23.9709H90.9159V27.8889H90.25Z" fill="white"/>
-<path d="M91.6854 25.9299C91.6854 25.2044 91.8876 24.667 92.292 24.3177C92.6299 24.0275 93.0418 23.8824 93.5276 23.8824C94.0677 23.8824 94.5092 24.0595 94.852 24.4136C95.1948 24.7653 95.3662 25.2523 95.3662 25.8746C95.3662 26.3788 95.2897 26.776 95.1368 27.0662C94.9864 27.354 94.7656 27.5778 94.4746 27.7376C94.1861 27.8975 93.8704 27.9774 93.5276 27.9774C92.9776 27.9774 92.5325 27.8016 92.1922 27.4499C91.8543 27.0982 91.6854 26.5915 91.6854 25.9299ZM92.3697 25.9299C92.3697 26.4317 92.4795 26.808 92.699 27.0588C92.9185 27.3072 93.1947 27.4314 93.5276 27.4314C93.8581 27.4314 94.1331 27.306 94.3526 27.0551C94.572 26.8043 94.6818 26.4218 94.6818 25.9078C94.6818 25.4233 94.5708 25.0568 94.3489 24.8084C94.1294 24.5575 93.8556 24.4321 93.5276 24.4321C93.1947 24.4321 92.9185 24.5563 92.699 24.8047C92.4795 25.0531 92.3697 25.4282 92.3697 25.9299Z" fill="white"/>
-<path d="M96.1504 27.8889V23.9709H96.7497V24.528C97.0382 24.0976 97.455 23.8824 98 23.8824C98.2368 23.8824 98.4538 23.9254 98.6511 24.0115C98.8509 24.0951 99.0001 24.2058 99.0987 24.3435C99.1974 24.4813 99.2664 24.6448 99.3059 24.8342C99.3306 24.9572 99.3429 25.1724 99.3429 25.4798V27.8889H98.677V25.5057C98.677 25.2351 98.6511 25.0334 98.5993 24.9006C98.5475 24.7653 98.4551 24.6584 98.3219 24.5797C98.1912 24.4985 98.037 24.4579 97.8595 24.4579C97.5759 24.4579 97.3305 24.5477 97.1233 24.7272C96.9186 24.9068 96.8163 25.2474 96.8163 25.7491V27.8889H96.1504Z" fill="white"/>
-<path d="M100.467 27.8889V22.4805H104.389V23.1187H101.185V24.7752H104.185V25.4097H101.185V27.2507H104.515V27.8889H100.467Z" fill="white"/>
-<path d="M109.065 22.4805H109.782V25.6053C109.782 26.1488 109.721 26.5805 109.597 26.9002C109.474 27.2199 109.251 27.4806 108.928 27.6823C108.607 27.8815 108.185 27.9811 107.663 27.9811C107.155 27.9811 106.739 27.8938 106.416 27.7192C106.093 27.5446 105.862 27.2925 105.724 26.9629C105.586 26.6309 105.517 26.1783 105.517 25.6053V22.4805H106.235V25.6016C106.235 26.0713 106.278 26.4181 106.364 26.6419C106.453 26.8633 106.603 27.0342 106.815 27.1547C107.03 27.2753 107.291 27.3355 107.6 27.3355C108.127 27.3355 108.504 27.2162 108.728 26.9777C108.952 26.7391 109.065 26.2804 109.065 25.6016V22.4805Z" fill="white"/>
-</svg>
diff --git a/ios/ItaliaApp/Images.xcassets/euNextLogo.imageset/IT Finanziato dall'Unione europea.svg b/ios/ItaliaApp/Images.xcassets/euNextLogo.imageset/IT Finanziato dall'Unione europea.svg
deleted file mode 100644
index 244bce156e3..00000000000
--- a/ios/ItaliaApp/Images.xcassets/euNextLogo.imageset/IT Finanziato dall'Unione europea.svg	
+++ /dev/null
@@ -1,47 +0,0 @@
-<svg width="131" height="30" viewBox="0 0 131 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M31.1345 15.7135L30.2455 15.0653L29.3576 15.7135L29.6954 14.6673L28.7925 14.0203L29.9055 14.0215L30.2455 12.9602L30.5868 14.0203H31.6999L30.7968 14.6673L31.1345 15.7135ZM29.9135 20.3224L29.0247 19.6742L28.1356 20.3224L28.4746 19.2759L27.5716 18.6291L28.6834 18.6303L29.0247 17.5689L29.3659 18.6291H30.4776L29.5747 19.2759L29.9135 20.3224ZM28.6834 9.43927L29.0244 8.37794L29.3658 9.43794H30.4776L29.5747 10.0837L29.9135 11.1302L29.0244 10.4833L28.1355 11.1302L28.4745 10.0837L27.5714 9.43794L28.6834 9.43927ZM26.2161 6.73424L26.5537 7.78076L25.666 7.13261L24.7758 7.78076L25.1136 6.73424L24.2118 6.08609L25.3247 6.08861L25.6649 5.02728L26.005 6.08609H27.1191L26.2161 6.73424ZM26.5409 23.6858L25.6521 23.0388L24.7631 23.6858L25.1009 22.6393L24.199 21.9923L25.3109 21.9936L25.6521 20.9335L25.9922 21.9923H27.105L26.2022 22.6393L26.5409 23.6858ZM21.9456 24.9046L21.0573 24.2575L20.1685 24.9046L20.506 23.8582L19.6037 23.2113L20.7167 23.2124L21.0567 22.1512L21.3973 23.2113H22.5103L21.6074 23.8582L21.9456 24.9046ZM20.7155 4.85483L21.0561 3.79468L21.3967 4.85365H22.5098L21.6068 5.50061L21.9452 6.54698L21.0561 5.90002L20.1673 6.54698L20.5054 5.50061L19.6031 4.85365L20.7155 4.85483ZM17.3511 23.6858L16.4626 23.0388L15.5736 23.6858L15.9113 22.6393L15.009 21.9923L16.1219 21.9936L16.462 20.9335L16.8026 21.9923H17.9156L17.0133 22.6393L17.3511 23.6858ZM16.1145 6.08742L16.4551 5.02609L16.7956 6.08609H17.9089L17.0063 6.7332L17.3441 7.77957L16.4556 7.13261L15.5667 7.77957L15.9043 6.7332L15.002 6.08609L16.1145 6.08742ZM13.6401 10.0978L13.9785 11.1442L13.0894 10.4971L12.2005 11.1442L12.5387 10.0978L11.6364 9.45068L12.7488 9.45201L13.0894 8.39068L13.43 9.45068H14.5424L13.6401 10.0978ZM13.9785 20.3224L13.0894 19.6742L12.2005 20.3224L12.5387 19.2759L11.6364 18.6291L12.7488 18.6303L13.0894 17.5689L13.43 18.6291H14.5424L13.6401 19.2759L13.9785 20.3224ZM10.4012 14.0331L11.5142 14.0354L11.8548 12.9728L12.1954 14.0331H13.3076L12.4055 14.6802L12.7431 15.7262L11.8548 15.0794L10.9657 15.7262L11.3041 14.6802L10.4012 14.0331ZM0 0.443867V28.4542H42.1297V0.443867H0Z" fill="white"/>
-<path d="M47.3452 6.69928V0.442537H51.6463V1.50091H48.6119V2.98195H51.2311V4.04032H48.6119V6.69928H47.3452Z" fill="white"/>
-<path d="M52.6818 6.69928V2.16669H53.8843V6.69928H52.6818ZM52.6818 1.55202V0.442537H53.8843V1.55202H52.6818Z" fill="white"/>
-<path d="M59.251 6.69928H58.0485V4.38595C58.0485 3.89661 58.023 3.58002 57.9716 3.43647C57.9202 3.29276 57.8367 3.18106 57.7213 3.10135C57.6057 3.02165 57.4665 2.98195 57.304 2.98195C57.0957 2.98195 56.9088 3.03883 56.7432 3.15261C56.5777 3.26639 56.4644 3.41721 56.403 3.60491C56.3415 3.79276 56.311 4.13987 56.311 4.64639V6.69928H55.1085V2.16669H56.2255V2.83246C56.6218 2.32032 57.1211 2.06432 57.7232 2.06432C57.9886 2.06432 58.2309 2.11187 58.4509 2.20728C58.6705 2.30254 58.8367 2.42417 58.9493 2.57217C59.0619 2.72017 59.1405 2.88802 59.1846 3.07572C59.2291 3.26358 59.251 3.53246 59.251 3.88239V6.69928Z" fill="white"/>
-<path d="M62.9785 4.52252C62.8244 4.57378 62.5804 4.63497 62.2467 4.70608C61.9128 4.77734 61.6947 4.84697 61.5919 4.91526C61.435 5.02623 61.3566 5.16712 61.3566 5.33778C61.3566 5.50564 61.4193 5.65067 61.545 5.77304C61.6702 5.89541 61.8302 5.9566 62.0242 5.9566C62.2409 5.9566 62.4478 5.88549 62.6445 5.74326C62.7903 5.63512 62.8856 5.50282 62.9315 5.34623C62.9629 5.24386 62.9785 5.04904 62.9785 4.76163V4.52252ZM61.3694 3.54949L60.2781 3.35319C60.4007 2.91497 60.6118 2.59067 60.9115 2.38001C61.211 2.16963 61.6561 2.0643 62.2467 2.0643C62.783 2.0643 63.1824 2.12771 63.4451 2.25423C63.7073 2.38089 63.8922 2.54164 63.9992 2.73645C64.1063 2.93141 64.1596 3.28919 64.1596 3.80978L64.1468 5.20963C64.1468 5.60815 64.166 5.90178 64.2046 6.09097C64.2432 6.2803 64.3151 6.48297 64.4207 6.69926H63.2309C63.1995 6.61956 63.161 6.50149 63.1154 6.34504C63.0954 6.27393 63.0813 6.22697 63.0725 6.20415C62.8671 6.40341 62.6475 6.55275 62.4135 6.6523C62.1797 6.75186 61.93 6.80164 61.6647 6.80164C61.1968 6.80164 60.8281 6.67497 60.5584 6.42178C60.289 6.1686 60.1539 5.8486 60.1539 5.46149C60.1539 5.20549 60.2153 4.97719 60.338 4.77645C60.4607 4.57601 60.6324 4.42238 60.8538 4.31556C61.0749 4.20889 61.3934 4.11571 61.8101 4.03601C62.3721 3.93082 62.7617 3.8326 62.9785 3.74149V3.62208C62.9785 3.39156 62.9213 3.22727 62.8073 3.12904C62.6932 3.03097 62.4777 2.98193 62.1611 2.98193C61.9471 2.98193 61.7803 3.02386 61.6604 3.10786C61.5405 3.19171 61.4436 3.33897 61.3694 3.54949Z" fill="white"/>
-<path d="M69.4795 6.69928H68.2768V4.38595C68.2768 3.89661 68.2509 3.58002 68.1997 3.43647C68.1483 3.29276 68.065 3.18106 67.9492 3.10135C67.8338 3.02165 67.6948 2.98195 67.5319 2.98195C67.3237 2.98195 67.1368 3.03883 66.9715 3.15261C66.8061 3.26639 66.6926 3.41721 66.6311 3.60491C66.5699 3.79276 66.5392 4.13987 66.5392 4.64639V6.69928H65.3368V2.16669H66.4536V2.83246C66.8502 2.32032 67.3495 2.06432 67.9516 2.06432C68.2168 2.06432 68.4594 2.11187 68.6789 2.20728C68.8986 2.30254 69.0649 2.42417 69.1778 2.57217C69.2902 2.72017 69.3686 2.88802 69.4131 3.07572C69.457 3.26358 69.4795 3.53246 69.4795 3.88239V6.69928Z" fill="white"/>
-<path d="M70.2155 6.69928V5.76461L71.9186 3.81409C72.1983 3.49543 72.4051 3.26921 72.5393 3.13558C72.3993 3.14402 72.2154 3.1498 71.9871 3.15261L70.3823 3.16106V2.16669H74.1396V3.01602L72.4023 5.01335L71.7903 5.67498C72.1241 5.65498 72.3308 5.64506 72.4106 5.64506H74.2724V6.69928H70.2155Z" fill="white"/>
-<path d="M75.0812 6.69928V2.16669H76.2839V6.69928H75.0812ZM75.0812 1.55202V0.442537H76.2839V1.55202H75.0812Z" fill="white"/>
-<path d="M80.0243 4.52252C79.8702 4.57378 79.6263 4.63497 79.2922 4.70608C78.9586 4.77734 78.7405 4.84697 78.6377 4.91526C78.4808 5.02623 78.4021 5.16712 78.4021 5.33778C78.4021 5.50564 78.4648 5.65067 78.5904 5.77304C78.7161 5.89541 78.8757 5.9566 79.0697 5.9566C79.2864 5.9566 79.4936 5.88549 79.6903 5.74326C79.8361 5.63512 79.9314 5.50282 79.977 5.34623C80.0084 5.24386 80.0243 5.04904 80.0243 4.76163V4.52252ZM78.4151 3.54949L77.3237 3.35319C77.4464 2.91497 77.6577 2.59067 77.957 2.38001C78.2568 2.16963 78.7019 2.0643 79.2922 2.0643C79.8288 2.0643 80.2279 2.12771 80.4906 2.25423C80.7531 2.38089 80.938 2.54164 81.0447 2.73645C81.1518 2.93141 81.2054 3.28919 81.2054 3.80978L81.1925 5.20963C81.1925 5.60815 81.2118 5.90178 81.2501 6.09097C81.2888 6.2803 81.3607 6.48297 81.4663 6.69926H80.2767C80.2452 6.61956 80.2068 6.50149 80.1612 6.34504C80.1412 6.27393 80.1271 6.22697 80.1183 6.20415C79.9129 6.40341 79.6933 6.55275 79.4593 6.6523C79.2252 6.75186 78.9758 6.80164 78.7103 6.80164C78.2422 6.80164 77.8738 6.67497 77.6039 6.42178C77.3344 6.1686 77.1998 5.8486 77.1998 5.46149C77.1998 5.20549 77.261 4.97719 77.3837 4.77645C77.5061 4.57601 77.6782 4.42238 77.8994 4.31556C78.1204 4.20889 78.4392 4.11571 78.8559 4.03601C79.4179 3.93082 79.8072 3.8326 80.0243 3.74149V3.62208C80.0243 3.39156 79.9671 3.22727 79.8531 3.12904C79.7387 3.03097 79.5235 2.98193 79.2066 2.98193C78.9929 2.98193 78.826 3.02386 78.7062 3.10786C78.5864 3.19171 78.4891 3.33897 78.4151 3.54949Z" fill="white"/>
-<path d="M84.475 2.16667V3.12267H83.6533V4.94934C83.6533 5.31927 83.6612 5.53482 83.6768 5.59601C83.6926 5.65719 83.7282 5.70771 83.7839 5.74756C83.8393 5.78727 83.9072 5.80727 83.987 5.80727C84.0984 5.80727 84.2594 5.76875 84.4707 5.69201L84.5733 6.62238C84.2936 6.74193 83.9772 6.80164 83.6232 6.80164C83.4064 6.80164 83.2108 6.76534 83.037 6.69289C82.863 6.6203 82.7353 6.52638 82.654 6.41126C82.5726 6.29586 82.5163 6.14015 82.485 5.94386C82.4591 5.80445 82.4463 5.52267 82.4463 5.09882V3.12267H81.8942V2.16667H82.4463V1.26608L83.6533 0.566228V2.16667H84.475Z" fill="white"/>
-<path d="M86.2638 4.43304C86.2638 4.88252 86.3706 5.22682 86.5847 5.46578C86.7986 5.70475 87.0626 5.8243 87.3764 5.8243C87.6902 5.8243 87.9533 5.70475 88.166 5.46578C88.3787 5.22682 88.4848 4.87971 88.4848 4.42445C88.4848 3.9806 88.3787 3.63912 88.166 3.40015C87.9533 3.16104 87.6902 3.04164 87.3764 3.04164C87.0626 3.04164 86.7986 3.16104 86.5847 3.40015C86.3706 3.63912 86.2638 3.98341 86.2638 4.43304ZM85.0312 4.36889C85.0312 3.97067 85.1296 3.58504 85.3264 3.2123C85.5234 2.83956 85.8022 2.55512 86.1631 2.35867C86.5241 2.16238 86.9271 2.0643 87.3721 2.0643C88.0598 2.0643 88.6232 2.28697 89.0625 2.73215C89.5018 3.17749 89.7218 3.74015 89.7218 4.42015C89.7218 5.10593 89.4997 5.67423 89.0561 6.12519C88.6125 6.57615 88.054 6.80164 87.3806 6.80164C86.9642 6.80164 86.5667 6.70771 86.1889 6.52001C85.8108 6.33215 85.5234 6.05689 85.3264 5.69408C85.1296 5.33141 85.0312 4.88963 85.0312 4.36889Z" fill="white"/>
-<path d="M48.2867 14.8237C48.2867 15.3074 48.3537 15.6574 48.488 15.8737C48.6819 16.1866 48.9528 16.343 49.301 16.343C49.5778 16.343 49.8131 16.2257 50.0072 15.991C50.2012 15.7563 50.2983 15.4055 50.2983 14.9389C50.2983 14.4183 50.2039 14.0434 50.0156 13.8143C49.8273 13.5854 49.5862 13.4707 49.2926 13.4707C49.007 13.4707 48.7683 13.5837 48.5756 13.8101C48.383 14.0362 48.2867 14.3741 48.2867 14.8237ZM51.4965 17.1882H50.3795V16.5222C50.1941 16.7812 49.975 16.974 49.7226 17.1007C49.4702 17.2272 49.2155 17.2905 48.9586 17.2905C48.4367 17.2905 47.9893 17.0808 47.617 16.6611C47.2448 16.2414 47.0585 15.6559 47.0585 14.9048C47.0585 14.1365 47.2399 13.5526 47.6019 13.1528C47.9643 12.7531 48.4222 12.5531 48.9757 12.5531C49.4834 12.5531 49.923 12.7637 50.2938 13.1848V10.9313H51.4965V17.1882Z" fill="white"/>
-<path d="M55.1897 15.0114C55.0356 15.0627 54.7917 15.1239 54.4581 15.195C54.1241 15.2661 53.9059 15.3359 53.8032 15.4042C53.6462 15.5151 53.5679 15.6559 53.5679 15.8266C53.5679 15.9946 53.6305 16.1396 53.7561 16.262C53.8815 16.3843 54.0414 16.4455 54.2355 16.4455C54.4523 16.4455 54.659 16.3743 54.8557 16.232C55.0015 16.124 55.0968 15.9916 55.1427 15.8351C55.1741 15.7326 55.1897 15.5378 55.1897 15.2504V15.0114ZM53.5805 14.0384L52.4894 13.8421C52.6118 13.4039 52.8231 13.0796 53.1227 12.8689C53.4222 12.6584 53.8673 12.5531 54.4581 12.5531C54.9942 12.5531 55.3938 12.6165 55.6563 12.7431C55.9186 12.8697 56.1034 13.0306 56.2105 13.2254C56.3175 13.4202 56.371 13.7781 56.371 14.2987L56.3582 15.6986C56.3582 16.0969 56.3774 16.3907 56.4158 16.5799C56.4545 16.7691 56.5265 16.9719 56.632 17.1882H55.4422C55.4109 17.1085 55.3722 16.9904 55.3266 16.8338C55.3067 16.7627 55.2925 16.7158 55.2837 16.6931C55.0783 16.8923 54.8587 17.0415 54.6249 17.141C54.3911 17.2406 54.1412 17.2905 53.876 17.2905C53.4079 17.2905 53.0392 17.164 52.7696 16.9107C52.5001 16.6575 52.3652 16.3373 52.3652 15.9504C52.3652 15.6944 52.4264 15.4661 52.5491 15.2654C52.6718 15.0649 52.8437 14.9111 53.0651 14.8045C53.2861 14.6978 53.6048 14.6046 54.0213 14.5249C54.5833 14.4197 54.9731 14.3215 55.1897 14.2304V14.111C55.1897 13.8805 55.1326 13.7162 55.0185 13.618C54.9046 13.5199 54.6889 13.4707 54.3725 13.4707C54.1583 13.4707 53.9914 13.5128 53.8716 13.5966C53.7518 13.6806 53.6548 13.8279 53.5805 14.0384Z" fill="white"/>
-<path d="M57.5564 17.1882V10.9313H58.7591V17.1882H57.5564Z" fill="white"/>
-<path d="M59.9912 17.1882V10.9313H61.1937V17.1882H59.9912Z" fill="white"/>
-<path d="M62.418 13.1548L62.191 11.9898V10.9313H63.5008V11.9898L63.3038 13.1548H62.418Z" fill="white"/>
-<path d="M64.5105 10.9313H65.7772V14.32C65.7772 14.8578 65.7928 15.2064 65.8244 15.3657C65.8785 15.6217 66.0076 15.8273 66.2118 15.9824C66.4158 16.1375 66.6946 16.215 67.0483 16.215C67.4078 16.215 67.6788 16.1418 67.8615 15.9953C68.0441 15.8488 68.154 15.6688 68.1908 15.4553C68.228 15.242 68.2465 14.8877 68.2465 14.3926V10.9313H69.5132V14.2177C69.5132 14.9688 69.4791 15.4994 69.4106 15.8095C69.3421 16.1197 69.2158 16.3814 69.0319 16.5949C68.848 16.8082 68.6017 16.9784 68.2935 17.1049C67.9854 17.2314 67.5833 17.2947 67.0868 17.2947C66.4877 17.2947 66.0334 17.2256 65.7239 17.0878C65.4143 16.9498 65.1696 16.7705 64.9897 16.5501C64.8101 16.3296 64.6917 16.0984 64.6347 15.8565C64.5519 15.498 64.5105 14.9688 64.5105 14.2689V10.9313Z" fill="white"/>
-<path d="M74.9743 17.1882H73.7716V14.8749C73.7716 14.3855 73.7459 14.0689 73.6945 13.9252C73.6431 13.7817 73.5599 13.67 73.4441 13.5903C73.3286 13.5106 73.1896 13.4707 73.0269 13.4707C72.8185 13.4707 72.6318 13.5278 72.4663 13.6415C72.301 13.7553 72.1875 13.9061 72.126 14.0938C72.0648 14.2817 72.034 14.6288 72.034 15.1353V17.1882H70.8317V12.6556H71.9485V13.3214C72.3451 12.8092 72.8444 12.5531 73.4464 12.5531C73.7116 12.5531 73.9542 12.6008 74.1738 12.6961C74.3935 12.7915 74.5597 12.9131 74.6726 13.0611C74.7852 13.2091 74.8635 13.3769 74.9079 13.5646C74.952 13.7525 74.9743 14.0214 74.9743 14.3713V17.1882Z" fill="white"/>
-<path d="M76.1938 17.1882V12.6556H77.3965V17.1882H76.1938ZM76.1938 12.0409V10.9313H77.3965V12.0409H76.1938Z" fill="white"/>
-<path d="M79.5832 14.9218C79.5832 15.3714 79.6903 15.7156 79.9045 15.9546C80.1183 16.1937 80.382 16.3131 80.696 16.3131C81.0099 16.3131 81.273 16.1937 81.4857 15.9546C81.6982 15.7156 81.8047 15.3686 81.8047 14.9134C81.8047 14.4695 81.6982 14.128 81.4857 13.8891C81.273 13.65 81.0099 13.5306 80.696 13.5306C80.382 13.5306 80.1183 13.65 79.9045 13.8891C79.6903 14.128 79.5832 14.4723 79.5832 14.9218ZM78.3508 14.8578C78.3508 14.4596 78.4495 14.074 78.6461 13.7012C78.8431 13.3285 79.122 13.0439 79.4829 12.8476C79.8435 12.6513 80.2468 12.5531 80.6919 12.5531C81.3792 12.5531 81.9427 12.7757 82.3822 13.2211C82.8215 13.6664 83.0412 14.2291 83.0412 14.9091C83.0412 15.5949 82.8196 16.1631 82.3758 16.6141C81.932 17.0651 81.3737 17.2905 80.7003 17.2905C80.2836 17.2905 79.8864 17.1966 79.5085 17.0089C79.1304 16.8211 78.8431 16.5458 78.6461 16.183C78.4495 15.8202 78.3508 15.3786 78.3508 14.8578Z" fill="white"/>
-<path d="M88.117 17.1882H86.9143V14.8749C86.9143 14.3855 86.8887 14.0689 86.8375 13.9252C86.7861 13.7817 86.7024 13.67 86.587 13.5903C86.4716 13.5106 86.3322 13.4707 86.1697 13.4707C85.9614 13.4707 85.7746 13.5278 85.6089 13.6415C85.4436 13.7553 85.3301 13.9061 85.2689 14.0938C85.2074 14.2817 85.1769 14.6288 85.1769 15.1353V17.1882H83.9742V12.6556H85.0914V13.3214C85.4877 12.8092 85.987 12.5531 86.5891 12.5531C86.8546 12.5531 87.0968 12.6008 87.3167 12.6961C87.5364 12.7915 87.7026 12.9131 87.8152 13.0611C87.9277 13.2091 88.0064 13.3769 88.0506 13.5646C88.0948 13.7525 88.117 14.0214 88.117 14.3713V17.1882Z" fill="white"/>
-<path d="M92.0369 14.5335C92.0283 14.1864 91.9383 13.9226 91.7671 13.7418C91.596 13.5611 91.3879 13.4707 91.1425 13.4707C90.8798 13.4707 90.6631 13.5661 90.492 13.7566C90.3208 13.9474 90.2366 14.2063 90.2396 14.5335H92.0369ZM91.9686 15.7455L93.1668 15.9461C93.0127 16.3843 92.7693 16.718 92.4371 16.947C92.1046 17.1761 91.6888 17.2905 91.1894 17.2905C90.3991 17.2905 89.8142 17.0331 89.435 16.518C89.1352 16.1055 88.9855 15.5848 88.9855 14.956C88.9855 14.2048 89.1823 13.6166 89.576 13.1911C89.9696 12.7658 90.4676 12.5531 91.0697 12.5531C91.7459 12.5531 92.2792 12.7757 92.6703 13.2211C93.0612 13.6664 93.2481 14.3486 93.231 15.2676H90.218C90.2265 15.6231 90.3236 15.8999 90.509 16.0977C90.6944 16.2954 90.9257 16.3943 91.2022 16.3943C91.3905 16.3943 91.5489 16.343 91.6775 16.2406C91.8057 16.1383 91.9026 15.9731 91.9686 15.7455Z" fill="white"/>
-<path d="M99.3465 14.5335C99.3378 14.1864 99.2478 13.9226 99.0766 13.7418C98.9055 13.5611 98.6974 13.4707 98.452 13.4707C98.1893 13.4707 97.9726 13.5661 97.8015 13.7566C97.6303 13.9474 97.5461 14.2063 97.5491 14.5335H99.3465ZM99.2781 15.7455L100.476 15.9461C100.322 16.3843 100.079 16.718 99.7466 16.947C99.4141 17.1761 98.9983 17.2905 98.4989 17.2905C97.7086 17.2905 97.1238 17.0331 96.7445 16.518C96.4448 16.1055 96.2952 15.5848 96.2952 14.956C96.2952 14.2048 96.4918 13.6166 96.8855 13.1911C97.2793 12.7658 97.7771 12.5531 98.3792 12.5531C99.0555 12.5531 99.5887 12.7757 99.9798 13.2211C100.371 13.6664 100.558 14.3486 100.54 15.2676H97.5275C97.536 15.6231 97.6332 15.8999 97.8186 16.0977C98.0039 16.2954 98.2352 16.3943 98.5117 16.3943C98.7001 16.3943 98.8584 16.343 98.9871 16.2406C99.1153 16.1383 99.2121 15.9731 99.2781 15.7455Z" fill="white"/>
-<path d="M104.512 17.1882V16.5095C104.346 16.7513 104.129 16.942 103.859 17.0814C103.59 17.2208 103.305 17.2905 103.005 17.2905C102.7 17.2905 102.426 17.2236 102.184 17.0899C101.941 16.9562 101.766 16.7685 101.657 16.5266C101.549 16.2848 101.495 15.9504 101.495 15.5236V12.6556H102.697V14.7383C102.697 15.3757 102.719 15.7663 102.763 15.91C102.808 16.0535 102.888 16.1674 103.005 16.2513C103.122 16.3353 103.271 16.3772 103.45 16.3772C103.656 16.3772 103.84 16.3211 104.002 16.2086C104.165 16.0962 104.276 15.9568 104.336 15.7904C104.396 15.6239 104.426 15.2163 104.426 14.5676V12.6556H105.629V17.1882H104.512Z" fill="white"/>
-<path d="M108.025 17.1882H106.823V12.6556H107.94V13.3001C108.131 12.9956 108.303 12.795 108.455 12.6983C108.608 12.6015 108.781 12.5531 108.975 12.5531C109.249 12.5531 109.513 12.6286 109.767 12.7793L109.395 13.8249C109.192 13.6941 109.004 13.6286 108.83 13.6286C108.662 13.6286 108.519 13.675 108.402 13.7675C108.285 13.8599 108.193 14.027 108.126 14.2689C108.059 14.5107 108.025 15.0172 108.025 15.7882V17.1882Z" fill="white"/>
-<path d="M111.239 14.9218C111.239 15.3714 111.346 15.7156 111.56 15.9546C111.774 16.1937 112.038 16.3131 112.352 16.3131C112.666 16.3131 112.929 16.1937 113.142 15.9546C113.354 15.7156 113.46 15.3686 113.46 14.9134C113.46 14.4695 113.354 14.128 113.142 13.8891C112.929 13.65 112.666 13.5306 112.352 13.5306C112.038 13.5306 111.774 13.65 111.56 13.8891C111.346 14.128 111.239 14.4723 111.239 14.9218ZM110.007 14.8578C110.007 14.4596 110.105 14.074 110.302 13.7012C110.499 13.3285 110.778 13.0439 111.139 12.8476C111.5 12.6513 111.903 12.5531 112.348 12.5531C113.035 12.5531 113.599 12.7757 114.038 13.2211C114.477 13.6664 114.697 14.2291 114.697 14.9091C114.697 15.5949 114.475 16.1631 114.032 16.6141C113.588 17.0651 113.03 17.2905 112.356 17.2905C111.94 17.2905 111.542 17.1966 111.164 17.0089C110.786 16.8211 110.499 16.5458 110.302 16.183C110.105 15.8202 110.007 15.3786 110.007 14.8578Z" fill="white"/>
-<path d="M116.794 14.8451C116.794 15.3544 116.895 15.7307 117.098 15.9738C117.301 16.2172 117.548 16.3387 117.839 16.3387C118.118 16.3387 118.35 16.2272 118.536 16.0037C118.721 15.7805 118.814 15.4141 118.814 14.9048C118.814 14.4297 118.719 14.0768 118.527 13.8463C118.336 13.6159 118.099 13.5006 117.817 13.5006C117.523 13.5006 117.279 13.6138 117.085 13.8399C116.891 14.0661 116.794 14.4012 116.794 14.8451ZM115.604 12.6556H116.726V13.3214C116.871 13.0938 117.068 12.9088 117.316 12.7666C117.565 12.6243 117.84 12.5531 118.142 12.5531C118.67 12.5531 119.118 12.7594 119.486 13.172C119.854 13.5846 120.038 14.1593 120.038 14.8962C120.038 15.6531 119.853 16.2414 119.482 16.6611C119.111 17.0808 118.661 17.2905 118.134 17.2905C117.883 17.2905 117.655 17.2406 117.451 17.141C117.247 17.0415 117.032 16.8709 116.807 16.629V18.9124H115.604V12.6556Z" fill="white"/>
-<path d="M123.693 14.5335C123.684 14.1864 123.594 13.9226 123.423 13.7418C123.252 13.5611 123.044 13.4707 122.799 13.4707C122.536 13.4707 122.319 13.5661 122.148 13.7566C121.977 13.9474 121.893 14.2063 121.896 14.5335H123.693ZM123.625 15.7455L124.823 15.9461C124.669 16.3843 124.425 16.718 124.093 16.947C123.761 17.1761 123.345 17.2905 122.846 17.2905C122.055 17.2905 121.47 17.0331 121.091 16.518C120.791 16.1055 120.642 15.5848 120.642 14.956C120.642 14.2048 120.838 13.6166 121.232 13.1911C121.626 12.7658 122.124 12.5531 122.726 12.5531C123.402 12.5531 123.935 12.7757 124.326 13.2211C124.717 13.6664 124.904 14.3486 124.887 15.2676H121.874C121.883 15.6231 121.98 15.8999 122.165 16.0977C122.351 16.2954 122.582 16.3943 122.858 16.3943C123.047 16.3943 123.205 16.343 123.334 16.2406C123.462 16.1383 123.559 15.9731 123.625 15.7455Z" fill="white"/>
-<path d="M128.375 15.0114C128.221 15.0627 127.977 15.1239 127.643 15.195C127.309 15.2661 127.091 15.3359 126.988 15.4042C126.831 15.5151 126.753 15.6559 126.753 15.8266C126.753 15.9946 126.816 16.1396 126.941 16.262C127.066 16.3843 127.226 16.4455 127.42 16.4455C127.637 16.4455 127.844 16.3743 128.041 16.232C128.186 16.124 128.282 15.9916 128.328 15.8351C128.359 15.7326 128.375 15.5378 128.375 15.2504V15.0114ZM126.766 14.0384L125.674 13.8421C125.797 13.4039 126.008 13.0796 126.308 12.8689C126.607 12.6584 127.052 12.5531 127.643 12.5531C128.179 12.5531 128.579 12.6165 128.841 12.7431C129.104 12.8697 129.288 13.0306 129.395 13.2254C129.503 13.4202 129.556 13.7781 129.556 14.2987L129.543 15.6986C129.543 16.0969 129.562 16.3907 129.601 16.5799C129.639 16.7691 129.711 16.9719 129.817 17.1882H128.627C128.596 17.1085 128.557 16.9904 128.512 16.8338C128.492 16.7627 128.477 16.7158 128.469 16.6931C128.263 16.8923 128.044 17.0415 127.81 17.141C127.576 17.2406 127.326 17.2905 127.061 17.2905C126.593 17.2905 126.224 17.164 125.955 16.9107C125.685 16.6575 125.55 16.3373 125.55 15.9504C125.55 15.6944 125.611 15.4661 125.734 15.2654C125.857 15.0649 126.029 14.9111 126.25 14.8045C126.471 14.6978 126.79 14.6046 127.206 14.5249C127.768 14.4197 128.158 14.3215 128.375 14.2304V14.111C128.375 13.8805 128.318 13.7162 128.203 13.618C128.09 13.5199 127.874 13.4707 127.557 13.4707C127.343 13.4707 127.176 13.5128 127.057 13.5966C126.937 13.6806 126.84 13.8279 126.766 14.0384Z" fill="white"/>
-<path d="M47.3383 27.8889V22.4805H48.0744L50.9229 26.7268V22.4805H51.6109V27.8889H50.8748L48.0263 23.6389V27.8889H47.3383Z" fill="white"/>
-<path d="M55.4249 26.6272L56.113 26.712C56.0045 27.1129 55.8035 27.4241 55.51 27.6454C55.2165 27.8668 54.8417 27.9774 54.3854 27.9774C53.8108 27.9774 53.3545 27.8016 53.0167 27.4499C52.6813 27.0957 52.5136 26.6001 52.5136 25.9631C52.5136 25.304 52.6837 24.7924 53.0241 24.4284C53.3644 24.0644 53.8059 23.8824 54.3484 23.8824C54.8737 23.8824 55.3028 24.0607 55.6358 24.4173C55.9687 24.774 56.1352 25.2757 56.1352 25.9225C56.1352 25.9619 56.1339 26.0209 56.1315 26.0996H53.2016C53.2263 26.53 53.3484 26.8596 53.5679 27.0883C53.7874 27.3171 54.0611 27.4314 54.3891 27.4314C54.6333 27.4314 54.8417 27.3675 55.0143 27.2396C55.1869 27.1117 55.3238 26.9076 55.4249 26.6272ZM53.2386 25.5536H55.4323C55.4027 25.224 55.3189 24.9769 55.1808 24.8121C54.9687 24.5563 54.6937 24.4284 54.3558 24.4284C54.05 24.4284 53.7923 24.5305 53.5827 24.7346C53.3755 24.9387 53.2608 25.2117 53.2386 25.5536Z" fill="white"/>
-<path d="M56.5088 27.8889L57.9441 25.8524L56.6161 23.9709H57.4484L58.0514 24.8895C58.1649 25.0642 58.2561 25.2105 58.3252 25.3286C58.4337 25.1662 58.5335 25.0224 58.6248 24.8969L59.287 23.9709H60.0823L58.7247 25.8155L60.1859 27.8889H59.3684L58.5619 26.6715L58.3473 26.3431L57.3152 27.8889H56.5088Z" fill="white"/>
-<path d="M62.1946 27.2949L62.2908 27.8815C62.1034 27.9209 61.9357 27.9406 61.7877 27.9406C61.546 27.9406 61.3586 27.9024 61.2254 27.8262C61.0922 27.7499 60.9985 27.6503 60.9443 27.5274C60.89 27.4019 60.8629 27.14 60.8629 26.7415V24.4874H60.3746V23.9709H60.8629V23.0007L61.525 22.6022V23.9709H62.1946V24.4874H61.525V26.7784C61.525 26.9678 61.5361 27.0896 61.5583 27.1437C61.583 27.1978 61.6212 27.2408 61.673 27.2728C61.7273 27.3048 61.8037 27.3208 61.9024 27.3208C61.9764 27.3208 62.0738 27.3122 62.1946 27.2949Z" fill="white"/>
-<path d="M65.4722 25.7676V25.133L67.7694 25.1294V27.1363C67.4168 27.4167 67.053 27.6282 66.6782 27.7708C66.3033 27.911 65.9186 27.9811 65.524 27.9811C64.9913 27.9811 64.5067 27.868 64.0702 27.6417C63.6361 27.413 63.3081 27.0834 63.0861 26.653C62.8642 26.2226 62.7532 25.7418 62.7532 25.2105C62.7532 24.6842 62.8629 24.1935 63.0824 23.7385C63.3044 23.281 63.6225 22.9416 64.0369 22.7203C64.4512 22.4989 64.9284 22.3882 65.4685 22.3882C65.8606 22.3882 66.2145 22.4522 66.5302 22.5801C66.8483 22.7055 67.0974 22.8814 67.2774 23.1076C67.4575 23.3339 67.5943 23.6291 67.6881 23.9931L67.0407 24.1701C66.9593 23.8947 66.8582 23.6782 66.7373 23.5208C66.6165 23.3634 66.4439 23.238 66.2194 23.1445C65.995 23.0486 65.7459 23.0007 65.4722 23.0007C65.1442 23.0007 64.8606 23.0511 64.6213 23.1519C64.3821 23.2503 64.1885 23.3807 64.0406 23.543C63.8951 23.7053 63.7816 23.8836 63.7002 24.0779C63.5621 24.4124 63.4931 24.7752 63.4931 25.1662C63.4931 25.6483 63.5757 26.0517 63.7409 26.3763C63.9086 26.701 64.1515 26.942 64.4697 27.0994C64.7878 27.2568 65.1257 27.3355 65.4833 27.3355C65.794 27.3355 66.0974 27.2765 66.3933 27.1584C66.6893 27.0379 66.9137 26.91 67.0666 26.7748V25.7676H65.4722Z" fill="white"/>
-<path d="M71.4354 26.6272L72.1235 26.712C72.015 27.1129 71.814 27.4241 71.5205 27.6454C71.227 27.8668 70.8522 27.9774 70.3959 27.9774C69.8213 27.9774 69.3651 27.8016 69.0272 27.4499C68.6918 27.0957 68.5241 26.6001 68.5241 25.9631C68.5241 25.304 68.6943 24.7924 69.0346 24.4284C69.3749 24.0644 69.8164 23.8824 70.3589 23.8824C70.8842 23.8824 71.3134 24.0607 71.6463 24.4173C71.9792 24.774 72.1457 25.2757 72.1457 25.9225C72.1457 25.9619 72.1445 26.0209 72.142 26.0996H69.2122C69.2368 26.53 69.3589 26.8596 69.5784 27.0883C69.7979 27.3171 70.0716 27.4314 70.3996 27.4314C70.6438 27.4314 70.8522 27.3675 71.0248 27.2396C71.1975 27.1117 71.3343 26.9076 71.4354 26.6272ZM69.2492 25.5536H71.4428C71.4132 25.224 71.3294 24.9769 71.1913 24.8121C70.9792 24.5563 70.7042 24.4284 70.3663 24.4284C70.0605 24.4284 69.8028 24.5305 69.5932 24.7346C69.386 24.9387 69.2714 25.2117 69.2492 25.5536Z" fill="white"/>
-<path d="M72.9632 27.8889V23.9709H73.5625V24.528C73.8511 24.0976 74.2679 23.8824 74.8129 23.8824C75.0496 23.8824 75.2667 23.9254 75.464 24.0115C75.6637 24.0951 75.8129 24.2058 75.9116 24.3435C76.0102 24.4813 76.0793 24.6448 76.1187 24.8342C76.1434 24.9572 76.1557 25.1724 76.1557 25.4798V27.8889H75.4899V25.5057C75.4899 25.2351 75.464 25.0334 75.4122 24.9006C75.3604 24.7653 75.2679 24.6584 75.1347 24.5797C75.004 24.4985 74.8499 24.4579 74.6723 24.4579C74.3887 24.4579 74.1433 24.5477 73.9362 24.7272C73.7315 24.9068 73.6291 25.2474 73.6291 25.7491V27.8889H72.9632Z" fill="white"/>
-<path d="M79.8698 26.6272L80.5579 26.712C80.4494 27.1129 80.2484 27.4241 79.9549 27.6454C79.6614 27.8668 79.2866 27.9774 78.8303 27.9774C78.2557 27.9774 77.7995 27.8016 77.4616 27.4499C77.1262 27.0957 76.9585 26.6001 76.9585 25.9631C76.9585 25.304 77.1287 24.7924 77.469 24.4284C77.8093 24.0644 78.2508 23.8824 78.7933 23.8824C79.3186 23.8824 79.7477 24.0607 80.0807 24.4173C80.4136 24.774 80.5801 25.2757 80.5801 25.9225C80.5801 25.9619 80.5789 26.0209 80.5764 26.0996H77.6466C77.6712 26.53 77.7933 26.8596 78.0128 27.0883C78.2323 27.3171 78.506 27.4314 78.834 27.4314C79.0782 27.4314 79.2866 27.3675 79.4592 27.2396C79.6318 27.1117 79.7687 26.9076 79.8698 26.6272ZM77.6835 25.5536H79.8772C79.8476 25.224 79.7638 24.9769 79.6257 24.8121C79.4136 24.5563 79.1386 24.4284 78.8007 24.4284C78.4949 24.4284 78.2372 24.5305 78.0276 24.7346C77.8204 24.9387 77.7057 25.2117 77.6835 25.5536Z" fill="white"/>
-<path d="M81.3902 27.8889V23.9709H81.9895V24.5649C82.1424 24.287 82.283 24.1037 82.4112 24.0152C82.5419 23.9267 82.685 23.8824 82.8404 23.8824C83.0648 23.8824 83.2929 23.9537 83.5247 24.0964L83.2954 24.7125C83.1326 24.6165 82.9698 24.5686 82.8071 24.5686C82.6616 24.5686 82.5308 24.6129 82.4149 24.7014C82.299 24.7875 82.2164 24.908 82.1671 25.0629C82.0931 25.2991 82.0561 25.5573 82.0561 25.8377V27.8889H81.3902Z" fill="white"/>
-<path d="M86.4842 27.4056C86.2375 27.6147 85.9995 27.7622 85.7702 27.8483C85.5433 27.9344 85.2992 27.9774 85.0377 27.9774C84.6062 27.9774 84.2744 27.8729 84.0426 27.6639C83.8108 27.4523 83.6949 27.183 83.6949 26.8559C83.6949 26.6641 83.7381 26.4894 83.8244 26.332C83.9132 26.1722 84.0278 26.0443 84.1684 25.9484C84.3114 25.8524 84.4717 25.7799 84.6493 25.7307C84.78 25.6963 84.9773 25.6631 85.2412 25.6311C85.7788 25.5671 86.1747 25.4909 86.4287 25.4024C86.4311 25.3114 86.4324 25.2536 86.4324 25.229C86.4324 24.9584 86.3695 24.7678 86.2437 24.6571C86.0735 24.5071 85.8208 24.4321 85.4854 24.4321C85.1721 24.4321 84.9403 24.4874 84.7899 24.5981C84.6419 24.7063 84.5322 24.8994 84.4606 25.1773L83.8096 25.0888C83.8688 24.8108 83.9662 24.587 84.1018 24.4173C84.2375 24.2452 84.4335 24.1136 84.69 24.0226C84.9465 23.9291 85.2437 23.8824 85.5815 23.8824C85.9169 23.8824 86.1894 23.9217 86.3991 24.0004C86.6087 24.0791 86.7628 24.1788 86.8615 24.2993C86.9601 24.4173 87.0292 24.5674 87.0686 24.7494C87.0908 24.8625 87.1019 25.0666 87.1019 25.3618V26.2472C87.1019 26.8645 87.1155 27.2556 87.1426 27.4204C87.1722 27.5827 87.229 27.7389 87.3128 27.8889H86.6173C86.5483 27.7512 86.5039 27.5901 86.4842 27.4056ZM86.4287 25.9225C86.187 26.0209 85.8245 26.1045 85.3411 26.1734C85.0673 26.2128 84.8737 26.257 84.7603 26.3062C84.6468 26.3554 84.5593 26.428 84.4976 26.5239C84.436 26.6173 84.4052 26.7219 84.4052 26.8375C84.4052 27.0146 84.4717 27.1621 84.6049 27.2802C84.7406 27.3982 84.9379 27.4573 85.1968 27.4573C85.4533 27.4573 85.6814 27.4019 85.8812 27.2912C86.0809 27.1781 86.2277 27.0244 86.3214 26.8301C86.3929 26.6801 86.4287 26.4587 86.4287 26.166V25.9225Z" fill="white"/>
-<path d="M89.5916 27.2949L89.6877 27.8815C89.5003 27.9209 89.3326 27.9406 89.1846 27.9406C88.943 27.9406 88.7555 27.9024 88.6223 27.8262C88.4892 27.7499 88.3955 27.6503 88.3412 27.5274C88.2869 27.4019 88.2598 27.14 88.2598 26.7415V24.4874H87.7715V23.9709H88.2598V23.0007L88.922 22.6022V23.9709H89.5916V24.4874H88.922V26.7784C88.922 26.9678 88.9331 27.0896 88.9553 27.1437C88.9799 27.1978 89.0182 27.2408 89.07 27.2728C89.1242 27.3048 89.2007 27.3208 89.2993 27.3208C89.3733 27.3208 89.4707 27.3122 89.5916 27.2949Z" fill="white"/>
-<path d="M90.25 23.2441V22.4805H90.9159V23.2441H90.25ZM90.25 27.8889V23.9709H90.9159V27.8889H90.25Z" fill="white"/>
-<path d="M91.6854 25.9299C91.6854 25.2044 91.8876 24.667 92.292 24.3177C92.6299 24.0275 93.0418 23.8824 93.5276 23.8824C94.0677 23.8824 94.5092 24.0595 94.852 24.4136C95.1948 24.7653 95.3662 25.2523 95.3662 25.8746C95.3662 26.3788 95.2897 26.776 95.1368 27.0662C94.9864 27.354 94.7656 27.5778 94.4746 27.7376C94.1861 27.8975 93.8704 27.9774 93.5276 27.9774C92.9776 27.9774 92.5325 27.8016 92.1922 27.4499C91.8543 27.0982 91.6854 26.5915 91.6854 25.9299ZM92.3697 25.9299C92.3697 26.4317 92.4795 26.808 92.699 27.0588C92.9185 27.3072 93.1947 27.4314 93.5276 27.4314C93.8581 27.4314 94.1331 27.306 94.3526 27.0551C94.572 26.8043 94.6818 26.4218 94.6818 25.9078C94.6818 25.4233 94.5708 25.0568 94.3489 24.8084C94.1294 24.5575 93.8556 24.4321 93.5276 24.4321C93.1947 24.4321 92.9185 24.5563 92.699 24.8047C92.4795 25.0531 92.3697 25.4282 92.3697 25.9299Z" fill="white"/>
-<path d="M96.1504 27.8889V23.9709H96.7497V24.528C97.0382 24.0976 97.455 23.8824 98 23.8824C98.2368 23.8824 98.4538 23.9254 98.6511 24.0115C98.8509 24.0951 99.0001 24.2058 99.0987 24.3435C99.1974 24.4813 99.2664 24.6448 99.3059 24.8342C99.3306 24.9572 99.3429 25.1724 99.3429 25.4798V27.8889H98.677V25.5057C98.677 25.2351 98.6511 25.0334 98.5993 24.9006C98.5475 24.7653 98.4551 24.6584 98.3219 24.5797C98.1912 24.4985 98.037 24.4579 97.8595 24.4579C97.5759 24.4579 97.3305 24.5477 97.1233 24.7272C96.9186 24.9068 96.8163 25.2474 96.8163 25.7491V27.8889H96.1504Z" fill="white"/>
-<path d="M100.467 27.8889V22.4805H104.389V23.1187H101.185V24.7752H104.185V25.4097H101.185V27.2507H104.515V27.8889H100.467Z" fill="white"/>
-<path d="M109.065 22.4805H109.782V25.6053C109.782 26.1488 109.721 26.5805 109.597 26.9002C109.474 27.2199 109.251 27.4806 108.928 27.6823C108.607 27.8815 108.185 27.9811 107.663 27.9811C107.155 27.9811 106.739 27.8938 106.416 27.7192C106.093 27.5446 105.862 27.2925 105.724 26.9629C105.586 26.6309 105.517 26.1783 105.517 25.6053V22.4805H106.235V25.6016C106.235 26.0713 106.278 26.4181 106.364 26.6419C106.453 26.8633 106.603 27.0342 106.815 27.1547C107.03 27.2753 107.291 27.3355 107.6 27.3355C108.127 27.3355 108.504 27.2162 108.728 26.9777C108.952 26.7391 109.065 26.2804 109.065 25.6016V22.4805Z" fill="white"/>
-</svg>
diff --git a/ios/ItaliaApp/Images.xcassets/euNextLogo.imageset/eu_next_logo.svg b/ios/ItaliaApp/Images.xcassets/euNextLogo.imageset/eu_next_logo.svg
new file mode 100644
index 00000000000..fbe13d7d535
--- /dev/null
+++ b/ios/ItaliaApp/Images.xcassets/euNextLogo.imageset/eu_next_logo.svg
@@ -0,0 +1,59 @@
+<svg width="110" height="26" viewBox="0 0 110 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.6293 24.4434H1.66365V1.19613H36.6293V24.4434ZM0.964355 0.520853V25.147H37.3285V0.520853H0.964355Z" fill="white"/>
+<path d="M18.4012 6.26123L19.139 5.7244L19.8769 6.26123L19.5961 5.39291L20.3455 4.85596H19.4217L19.139 3.97707L18.8563 4.85695L17.9331 4.85596L18.682 5.39291L18.4012 6.26123Z" fill="white"/>
+<path d="M14.5834 7.28418L15.3212 6.74723L16.0586 7.28418L15.7782 6.41562L16.5271 5.87867H15.6034L15.3208 4.9988L15.0381 5.87978L14.1147 5.87867L14.8636 6.41562L14.5834 7.28418Z" fill="white"/>
+<path d="M12.5272 7.79152L12.2445 8.67225L11.3213 8.67127L12.0702 9.20822L11.7894 10.0767L12.5272 9.53971L13.2649 10.0767L12.9842 9.20822L13.7331 8.67127H12.8099L12.5272 7.79152Z" fill="white"/>
+<path d="M11.5023 13.3429L12.2397 13.8799L11.9593 13.0117L12.7082 12.4745H11.7849L11.5023 11.5947L11.2196 12.4766L10.2959 12.4745L11.0451 13.0117L10.7645 13.8799L11.5023 13.3429Z" fill="white"/>
+<path d="M12.8099 16.289L12.5272 15.4091L12.2445 16.2899L11.3213 16.289L12.0702 16.8258L11.7894 17.6943L12.5272 17.1564L13.2649 17.6943L12.9842 16.8258L13.7331 16.289H12.8099Z" fill="white"/>
+<path d="M15.6092 19.0804L15.3265 18.2015L15.0443 19.0815L14.1206 19.0804L14.8695 19.6173L14.5892 20.4858L15.327 19.9489L16.0643 20.4858L15.7841 19.6173L16.5329 19.0804H15.6092Z" fill="white"/>
+<path d="M19.4222 20.0918L19.1395 19.2118L18.8573 20.0926L17.9336 20.0918L18.6825 20.6287L18.4022 21.4971L19.14 20.9601L19.8773 21.4971L19.5965 20.6287L20.3459 20.0918H19.4222Z" fill="white"/>
+<path d="M23.2356 19.0804L22.9533 18.2015L22.6703 19.0815L21.7476 19.0804L22.4958 19.6173L22.2157 20.4858L22.9533 19.9489L23.6912 20.4858L23.41 19.6173L24.1594 19.0804H23.2356Z" fill="white"/>
+<path d="M26.0359 16.289L25.7528 15.4091L25.4696 16.2899L24.5469 16.289L25.2961 16.8258L25.015 17.6943L25.7528 17.1564L26.4906 17.6943L26.2093 16.8258L26.9587 16.289H26.0359Z" fill="white"/>
+<path d="M27.9729 12.4639H27.0492L26.766 11.5839L26.4838 12.4647L25.5601 12.4639L26.3094 13.0008L26.0291 13.8691L26.766 13.3313L27.5037 13.8691L27.2235 13.0008L27.9729 12.4639Z" fill="white"/>
+<path d="M25.015 10.0654L25.7528 9.5286L26.4907 10.0654L26.2095 9.19699L26.9588 8.66103H26.0359L25.7528 7.78115L25.4697 8.66213L24.5469 8.66103L25.2961 9.19699L25.015 10.0654Z" fill="white"/>
+<path d="M22.9642 4.99977L22.682 5.88075L21.7583 5.87866L22.5066 6.41659L22.2264 7.28516L22.9652 6.74722L23.702 7.28516L23.4217 6.41659L24.171 5.87866H23.2463L22.9642 4.99977Z" fill="white"/>
+<path d="M40.958 6.75684V1.56391H44.5277V2.44231H42.0093V3.6715H44.1831V4.55002H42.0093V6.75684H40.958Z" fill="white"/>
+<path d="M45.3867 6.75684V2.99499H46.3849V6.75684H45.3867ZM45.3867 2.48485V1.56391H46.3849V2.48485H45.3867Z" fill="white"/>
+<path d="M50.8391 6.75684H49.8409V4.83688C49.8409 4.43075 49.8197 4.168 49.7771 4.04873C49.7344 3.92958 49.6652 3.83688 49.5692 3.77072C49.4734 3.70457 49.3579 3.6715 49.223 3.6715C49.05 3.6715 48.895 3.71884 48.7576 3.81327C48.6204 3.9077 48.5262 4.03287 48.4752 4.18865C48.4243 4.34456 48.3989 4.63265 48.3989 5.05303V6.75684H47.4009V2.99499H48.3279V3.54756C48.657 3.1225 49.0714 2.90991 49.5711 2.90991C49.7912 2.90991 49.9925 2.9495 50.1748 3.02856C50.3572 3.10775 50.4951 3.20869 50.5887 3.33152C50.6822 3.45436 50.7473 3.59355 50.784 3.74945C50.8207 3.90536 50.8391 4.12853 50.8391 4.41895V6.75684Z" fill="white"/>
+<path d="M53.9326 4.95024C53.8048 4.99278 53.6022 5.04356 53.3252 5.10258C53.0481 5.16172 52.867 5.21939 52.7818 5.2762C52.6515 5.36829 52.5864 5.4851 52.5864 5.62687C52.5864 5.76618 52.6384 5.88655 52.7428 5.98811C52.8468 6.08967 52.9793 6.14045 53.1405 6.14045C53.3204 6.14045 53.4922 6.08144 53.6555 5.96327C53.7763 5.87364 53.8556 5.76384 53.8936 5.63387C53.9194 5.54891 53.9326 5.3871 53.9326 5.14869V4.95024ZM52.5971 4.14266L51.6913 3.97975C51.793 3.61604 51.9684 3.34689 52.217 3.17205C52.4657 2.99745 52.8351 2.90991 53.3252 2.90991C53.7704 2.90991 54.1018 2.96253 54.3198 3.06766C54.5375 3.17266 54.6909 3.30607 54.7796 3.46776C54.8685 3.62957 54.9129 3.92663 54.9129 4.3587L54.9022 5.52051C54.9022 5.85114 54.9182 6.09496 54.9502 6.25198C54.9822 6.40911 55.0419 6.57732 55.1295 6.75683H54.1421C54.116 6.69068 54.084 6.59269 54.0463 6.46285C54.0297 6.4037 54.0178 6.36485 54.0107 6.34591C53.8402 6.51129 53.6578 6.63523 53.4638 6.71786C53.2696 6.80048 53.0623 6.8418 52.8421 6.8418C52.4538 6.8418 52.1477 6.73679 51.924 6.52654C51.7002 6.31641 51.5884 6.0507 51.5884 5.72954C51.5884 5.51707 51.6392 5.32747 51.7411 5.16099C51.8428 4.99463 51.9855 4.867 52.1691 4.77847C52.3527 4.68994 52.6171 4.6126 52.9629 4.54645C53.4294 4.45903 53.7526 4.37763 53.9326 4.30202V4.20279C53.9326 4.01159 53.8852 3.87524 53.7906 3.79372C53.6958 3.71232 53.517 3.6715 53.2542 3.6715C53.0766 3.6715 52.9382 3.70642 52.8387 3.77601C52.7392 3.84572 52.6587 3.96794 52.5971 4.14266Z" fill="white"/>
+<path d="M59.3284 6.75684H58.3302V4.83688C58.3302 4.43075 58.3089 4.168 58.2662 4.04873C58.2237 3.92958 58.1544 3.83688 58.0585 3.77072C57.9627 3.70457 57.8471 3.6715 57.7121 3.6715C57.5393 3.6715 57.3842 3.71884 57.2468 3.81327C57.1096 3.9077 57.0154 4.03287 56.9645 4.18865C56.9136 4.34456 56.8882 4.63265 56.8882 5.05303V6.75684H55.8901V2.99499H56.8172V3.54756C57.1461 3.1225 57.5606 2.90991 58.0603 2.90991C58.2805 2.90991 58.4816 2.9495 58.6641 3.02856C58.8464 3.10775 58.9844 3.20869 59.0778 3.33152C59.1713 3.45436 59.2365 3.59355 59.2731 3.74945C59.3099 3.90536 59.3284 4.12853 59.3284 4.41895V6.75684Z" fill="white"/>
+<path d="M59.939 6.75684V5.98111L61.3526 4.36227C61.5845 4.09779 61.7563 3.91003 61.8676 3.799C61.7516 3.80614 61.5988 3.81093 61.4095 3.81327L60.0775 3.82027V2.99499H63.1959V3.6999L61.7539 5.3576L61.246 5.90659C61.523 5.89012 61.6948 5.88188 61.761 5.88188H63.306V6.75684H59.939Z" fill="white"/>
+<path d="M63.9775 6.75684V2.99499H64.9756V6.75684H63.9775ZM63.9775 2.48485V1.56391H64.9756V2.48485H63.9775Z" fill="white"/>
+<path d="M68.0801 4.95024C67.9522 4.99278 67.7497 5.04356 67.4726 5.10258C67.1956 5.16172 67.0145 5.21939 66.9293 5.2762C66.799 5.36829 66.7339 5.4851 66.7339 5.62687C66.7339 5.76618 66.7859 5.88655 66.8902 5.98811C66.9943 6.08967 67.1269 6.14045 67.288 6.14045C67.4678 6.14045 67.6397 6.08144 67.8029 5.96327C67.9238 5.87364 68.003 5.76384 68.041 5.63387C68.067 5.54891 68.0801 5.3871 68.0801 5.14869V4.95024ZM66.7446 4.14266L65.8388 3.97975C65.9406 3.61604 66.1158 3.34689 66.3645 3.17205C66.6132 2.99745 66.9826 2.90991 67.4726 2.90991C67.9178 2.90991 68.2493 2.96253 68.4672 3.06766C68.685 3.17266 68.8383 3.30607 68.9271 3.46776C69.016 3.62957 69.0604 3.92663 69.0604 4.3587L69.0497 5.52051C69.0497 5.85114 69.0657 6.09496 69.0976 6.25198C69.1297 6.40911 69.1893 6.57732 69.277 6.75683H68.2896C68.2634 6.69068 68.2316 6.59269 68.1938 6.46285C68.1771 6.4037 68.1653 6.36485 68.1581 6.34591C67.9876 6.51129 67.8054 6.63523 67.6112 6.71786C67.417 6.80048 67.2098 6.8418 66.9896 6.8418C66.6012 6.8418 66.2952 6.73679 66.0714 6.52654C65.8478 6.31641 65.7358 6.0507 65.7358 5.72954C65.7358 5.51707 65.7866 5.32747 65.8886 5.16099C65.9903 4.99463 66.133 4.867 66.3165 4.77847C66.5001 4.68994 66.7646 4.6126 67.1104 4.54645C67.5768 4.45903 67.9001 4.37763 68.0801 4.30202V4.20279C68.0801 4.01159 68.0326 3.87524 67.9381 3.79372C67.8433 3.71232 67.6645 3.6715 67.4016 3.6715C67.2241 3.6715 67.0856 3.70642 66.9861 3.77601C66.8866 3.84572 66.8061 3.96794 66.7446 4.14266Z" fill="white"/>
+<path d="M71.7736 2.99499V3.78843H71.0917V5.30448C71.0917 5.6115 71.0981 5.7904 71.1112 5.84106C71.1242 5.89196 71.1539 5.93389 71.2001 5.96684C71.2462 5.99992 71.3024 6.01639 71.3688 6.01639C71.4611 6.01639 71.5949 5.98455 71.7702 5.92086L71.8554 6.69302C71.6232 6.79212 71.3604 6.8418 71.0668 6.8418C70.8869 6.8418 70.7246 6.81167 70.5802 6.75155C70.4357 6.69117 70.3298 6.61334 70.2623 6.51768C70.1948 6.42202 70.1481 6.2928 70.122 6.12976C70.1007 6.01406 70.0901 5.78032 70.0901 5.42842V3.78843H69.6318V2.99499H70.0901V2.24754L71.0917 1.6667V2.99499H71.7736Z" fill="white"/>
+<path d="M73.2583 4.87585C73.2583 5.24902 73.3471 5.53465 73.5247 5.7331C73.7023 5.93143 73.9212 6.03065 74.1818 6.03065C74.4423 6.03065 74.6606 5.93143 74.8372 5.7331C75.0135 5.53465 75.1018 5.24669 75.1018 4.86872C75.1018 4.50034 75.0135 4.21705 74.8372 4.0186C74.6606 3.82027 74.4423 3.72105 74.1818 3.72105C73.9212 3.72105 73.7023 3.82027 73.5247 4.0186C73.3471 4.21705 73.2583 4.5028 73.2583 4.87585ZM72.2354 4.82273C72.2354 4.49223 72.3171 4.17217 72.4803 3.86282C72.6439 3.55346 72.8754 3.31738 73.1748 3.15434C73.4743 2.99143 73.8089 2.90991 74.1783 2.90991C74.7489 2.90991 75.2165 3.09471 75.5812 3.46432C75.9458 3.83392 76.1282 4.30091 76.1282 4.86528C76.1282 5.43444 75.9441 5.9061 75.5759 6.28038C75.2077 6.65466 74.7442 6.8418 74.1853 6.8418C73.8396 6.8418 73.5098 6.76384 73.1962 6.60793C72.8824 6.45215 72.6439 6.2237 72.4803 5.9227C72.3171 5.62146 72.2354 5.25492 72.2354 4.82273Z" fill="white"/>
+<path d="M41.7396 13.4994C41.7396 13.9009 41.7952 14.1913 41.9065 14.3708C42.0675 14.6306 42.2924 14.7604 42.5814 14.7604C42.811 14.7604 43.0064 14.6631 43.1675 14.4682C43.3284 14.2734 43.4091 13.9824 43.4091 13.5951C43.4091 13.163 43.3308 12.8518 43.1744 12.6617C43.0182 12.4717 42.8181 12.3766 42.5743 12.3766C42.3374 12.3766 42.1392 12.4704 41.9794 12.6583C41.8195 12.8459 41.7396 13.1264 41.7396 13.4994ZM44.4035 15.4618H43.4764V14.9092C43.3224 15.1242 43.1408 15.2841 42.9313 15.3892C42.7216 15.4942 42.5104 15.5469 42.2972 15.5469C41.8639 15.5469 41.4928 15.3728 41.1838 15.0244C40.8747 14.6761 40.7202 14.1902 40.7202 13.5668C40.7202 12.9291 40.8706 12.4444 41.1712 12.1127C41.472 11.781 41.852 11.615 42.3114 11.615C42.7328 11.615 43.0975 11.7898 43.4054 12.1393V10.269H44.4035V15.4618Z" fill="white"/>
+<path d="M47.4686 13.6553C47.3408 13.6979 47.1384 13.7486 46.8613 13.8077C46.5842 13.8668 46.4032 13.9245 46.3178 13.9812C46.1877 14.0732 46.1224 14.1902 46.1224 14.3318C46.1224 14.4713 46.1745 14.5916 46.2788 14.6931C46.3829 14.7948 46.5155 14.8455 46.6765 14.8455C46.8564 14.8455 47.0283 14.7864 47.1915 14.6684C47.3124 14.5787 47.3916 14.4688 47.4296 14.339C47.4556 14.2539 47.4686 14.0922 47.4686 13.8536V13.6553ZM46.1332 12.8477L45.2275 12.6847C45.3292 12.3211 45.5045 12.0518 45.7531 11.8771C46.0017 11.7024 46.3711 11.615 46.8613 11.615C47.3064 11.615 47.6378 11.6676 47.8558 11.7726C48.0736 11.8777 48.227 12.0112 48.3157 12.1728C48.4045 12.3346 48.4489 12.6316 48.4489 13.0638L48.4383 14.2256C48.4383 14.5562 48.4542 14.8 48.4862 14.9571C48.5182 15.1141 48.5779 15.2823 48.6656 15.4618H47.6782C47.6521 15.3956 47.6202 15.2976 47.5823 15.1678C47.5657 15.1088 47.554 15.0698 47.5467 15.051C47.3762 15.2162 47.194 15.3402 46.9999 15.4228C46.8056 15.5054 46.5985 15.5469 46.3783 15.5469C45.9898 15.5469 45.6839 15.4417 45.46 15.2315C45.2363 15.0214 45.1245 14.7558 45.1245 14.4346C45.1245 14.222 45.1753 14.0325 45.2771 13.8661C45.3789 13.6996 45.5215 13.5721 45.7052 13.4835C45.8887 13.395 46.1531 13.3177 46.499 13.2515C46.9654 13.1641 47.2886 13.0827 47.4686 13.0071V12.9079C47.4686 12.7167 47.4213 12.5803 47.3266 12.4988C47.2318 12.4174 47.053 12.3766 46.7902 12.3766C46.6126 12.3766 46.4742 12.4115 46.3747 12.4811C46.2753 12.5508 46.1947 12.673 46.1332 12.8477Z" fill="white"/>
+<path d="M49.4326 15.4619V10.2691H50.4308V15.4619H49.4326Z" fill="white"/>
+<path d="M51.4536 15.4619V10.2691H52.4517V15.4619H51.4536Z" fill="white"/>
+<path d="M53.4677 12.1143L53.2793 11.1473V10.2688H54.3662V11.1473L54.2027 12.1143H53.4677Z" fill="white"/>
+<path d="M55.2041 10.269H56.2555V13.0815C56.2555 13.5278 56.2685 13.817 56.2946 13.9494C56.3395 14.1617 56.4468 14.3324 56.6162 14.4611C56.7854 14.5899 57.0169 14.6542 57.3104 14.6542C57.6088 14.6542 57.8338 14.5934 57.9853 14.4718C58.1368 14.3501 58.2281 14.2009 58.2588 14.0237C58.2896 13.8466 58.305 13.5526 58.305 13.1417V10.269H59.3563V12.9965C59.3563 13.6199 59.3279 14.0603 59.2711 14.3177C59.2143 14.575 59.1095 14.7923 58.9567 14.9693C58.8041 15.1465 58.5997 15.2877 58.344 15.3928C58.0883 15.4977 57.7545 15.5503 57.3425 15.5503C56.8452 15.5503 56.468 15.493 56.2111 15.3786C55.9542 15.2641 55.7513 15.1153 55.602 14.9323C55.4529 14.7492 55.3545 14.5574 55.3072 14.3566C55.2385 14.0591 55.2041 13.6199 55.2041 13.0389V10.269Z" fill="white"/>
+<path d="M63.8889 15.4619H62.8907V13.5421C62.8907 13.136 62.8694 12.8732 62.8269 12.7539C62.7842 12.6348 62.7149 12.5421 62.619 12.4759C62.5232 12.4098 62.4077 12.3767 62.2728 12.3767C62.0998 12.3767 61.9447 12.4239 61.8074 12.5183C61.6702 12.6129 61.576 12.7381 61.525 12.8939C61.4741 13.0498 61.4487 13.3378 61.4487 13.7581V15.4619H60.4507V11.7002H61.3777V12.2528C61.7068 11.8277 62.1212 11.6151 62.6209 11.6151C62.8411 11.6151 63.0423 11.6547 63.2246 11.7338C63.407 11.8129 63.5449 11.9139 63.6385 12.0366C63.7318 12.1594 63.7971 12.2987 63.8338 12.4547C63.8705 12.6104 63.8889 12.8336 63.8889 13.1242V15.4619Z" fill="white"/>
+<path d="M64.9009 15.4619V11.7002H65.899V15.4619H64.9009ZM64.9009 11.1901V10.2691H65.899V11.1901H64.9009Z" fill="white"/>
+<path d="M67.7139 13.5809C67.7139 13.9541 67.8026 14.2397 67.9803 14.4381C68.1578 14.6364 68.3768 14.7356 68.6374 14.7356C68.8978 14.7356 69.1162 14.6364 69.2927 14.4381C69.4692 14.2397 69.5573 13.9518 69.5573 13.5738C69.5573 13.2054 69.4692 12.9221 69.2927 12.7237C69.1162 12.5254 68.8978 12.4261 68.6374 12.4261C68.3768 12.4261 68.1578 12.5254 67.9803 12.7237C67.8026 12.9221 67.7139 13.2079 67.7139 13.5809ZM66.6909 13.5278C66.6909 13.1972 66.7727 12.8773 66.936 12.5679C67.0995 12.2585 67.3309 12.0223 67.6305 11.8594C67.9299 11.6965 68.2645 11.615 68.6339 11.615C69.2045 11.615 69.6721 11.7998 70.0368 12.1694C70.4014 12.539 70.5838 13.006 70.5838 13.5704C70.5838 14.1394 70.3996 14.6111 70.0315 14.9853C69.6632 15.3596 69.1998 15.5469 68.6409 15.5469C68.2952 15.5469 67.9654 15.4689 67.6517 15.313C67.3379 15.1572 67.0995 14.9287 66.936 14.6277C66.7727 14.3265 66.6909 13.96 66.6909 13.5278Z" fill="white"/>
+<path d="M74.7966 15.4619H73.7985V13.5421C73.7985 13.136 73.7771 12.8732 73.7345 12.7539C73.6919 12.6348 73.6226 12.5421 73.5267 12.4759C73.4308 12.4098 73.3154 12.3767 73.1804 12.3767C73.0075 12.3767 72.8524 12.4239 72.7151 12.5183C72.5779 12.6129 72.4837 12.7381 72.4328 12.8939C72.3818 13.0498 72.3564 13.3378 72.3564 13.7581V15.4619H71.3584V11.7002H72.2853V12.2528C72.6144 11.8277 73.0289 11.6151 73.5284 11.6151C73.7488 11.6151 73.9499 11.6547 74.1323 11.7338C74.3146 11.8129 74.4526 11.9139 74.5461 12.0366C74.6396 12.1594 74.7046 12.2987 74.7414 12.4547C74.7781 12.6104 74.7966 12.8336 74.7966 13.1242V15.4619Z" fill="white"/>
+<path d="M78.05 13.2585C78.043 12.9706 77.9682 12.7515 77.8262 12.6016C77.6842 12.4516 77.5113 12.3766 77.3078 12.3766C77.0898 12.3766 76.9099 12.4558 76.7679 12.6139C76.6258 12.7721 76.5558 12.9871 76.5583 13.2585H78.05ZM77.9931 14.2646L78.9877 14.431C78.8599 14.7948 78.6579 15.0716 78.3821 15.2616C78.1062 15.4517 77.7611 15.5469 77.3467 15.5469C76.6908 15.5469 76.2053 15.3331 75.8905 14.9057C75.6419 14.5633 75.5176 14.1312 75.5176 13.6092C75.5176 12.9858 75.6808 12.4976 76.0077 12.1446C76.3344 11.7916 76.7477 11.615 77.2474 11.615C77.8085 11.615 78.2512 11.7998 78.5757 12.1694C78.9001 12.539 79.0553 13.1051 79.041 13.8678H76.5405C76.5475 14.163 76.6281 14.3927 76.7821 14.5568C76.9359 14.721 77.1278 14.803 77.3573 14.803C77.5137 14.803 77.6451 14.7604 77.7516 14.6755C77.8583 14.5904 77.9386 14.4534 77.9931 14.2646Z" fill="white"/>
+<path d="M84.1164 13.2585C84.1094 12.9706 84.0346 12.7515 83.8926 12.6016C83.7506 12.4516 83.5777 12.3766 83.3742 12.3766C83.1562 12.3766 82.9763 12.4558 82.8343 12.6139C82.6923 12.7721 82.6222 12.9871 82.6247 13.2585H84.1164ZM84.0596 14.2646L85.0541 14.431C84.9263 14.7948 84.7243 15.0716 84.4485 15.2616C84.1726 15.4517 83.8275 15.5469 83.4131 15.5469C82.7572 15.5469 82.2717 15.3331 81.9569 14.9057C81.7083 14.5633 81.584 14.1312 81.584 13.6092C81.584 12.9858 81.7473 12.4976 82.0741 12.1446C82.4008 11.7916 82.8141 11.615 83.3138 11.615C83.8749 11.615 84.3176 11.7998 84.6421 12.1694C84.9665 12.539 85.1217 13.1051 85.1074 13.8678H82.6069C82.614 14.163 82.6945 14.3927 82.8485 14.5568C83.0023 14.721 83.1942 14.803 83.4237 14.803C83.5801 14.803 83.7115 14.7604 83.818 14.6755C83.9247 14.5904 84.0051 14.4534 84.0596 14.2646Z" fill="white"/>
+<path d="M88.4035 15.4618V14.8985C88.2661 15.0993 88.0856 15.2576 87.8617 15.3733C87.6381 15.489 87.4018 15.5469 87.1532 15.5469C86.8998 15.5469 86.6724 15.4913 86.4712 15.3803C86.2699 15.2694 86.1244 15.1135 86.0343 14.9128C85.9444 14.7121 85.8994 14.4346 85.8994 14.0804V11.7001H86.8975V13.4286C86.8975 13.9575 86.9157 14.2818 86.9524 14.4009C86.9892 14.5202 87.056 14.6147 87.1532 14.6843C87.2502 14.7541 87.3734 14.7889 87.5225 14.7889C87.6931 14.7889 87.8458 14.7423 87.9807 14.6489C88.1158 14.5556 88.208 14.4399 88.2578 14.3018C88.3075 14.1636 88.3324 13.8254 88.3324 13.2869V11.7001H89.3304V15.4618H88.4035Z" fill="white"/>
+<path d="M91.3195 15.4619H90.3213V11.7002H91.2484V12.2351C91.407 11.9824 91.5496 11.8159 91.6765 11.7356C91.8031 11.6553 91.9469 11.6151 92.108 11.6151C92.3352 11.6151 92.5543 11.6778 92.765 11.8029L92.4561 12.6707C92.2879 12.5621 92.1316 12.5078 91.9872 12.5078C91.8474 12.5078 91.729 12.5463 91.632 12.623C91.5348 12.6997 91.4585 12.8384 91.4029 13.0391C91.3473 13.2399 91.3195 13.6602 91.3195 14.3001V15.4619Z" fill="white"/>
+<path d="M93.9868 13.5809C93.9868 13.9541 94.0756 14.2397 94.2532 14.4381C94.4308 14.6364 94.6498 14.7356 94.9103 14.7356C95.1708 14.7356 95.3891 14.6364 95.5657 14.4381C95.742 14.2397 95.8303 13.9518 95.8303 13.5738C95.8303 13.2054 95.742 12.9221 95.5657 12.7237C95.3891 12.5254 95.1708 12.4261 94.9103 12.4261C94.6498 12.4261 94.4308 12.5254 94.2532 12.7237C94.0756 12.9221 93.9868 13.2079 93.9868 13.5809ZM92.9639 13.5278C92.9639 13.1972 93.0456 12.8773 93.2088 12.5679C93.3725 12.2585 93.6039 12.0223 93.9033 11.8594C94.2028 11.6965 94.5374 11.615 94.9068 11.615C95.4774 11.615 95.945 11.7998 96.3097 12.1694C96.6743 12.539 96.8567 13.006 96.8567 13.5704C96.8567 14.1394 96.6726 14.6111 96.3044 14.9853C95.9362 15.3596 95.4727 15.5469 94.9138 15.5469C94.5681 15.5469 94.2383 15.4689 93.9247 15.313C93.6109 15.1572 93.3725 14.9287 93.2088 14.6277C93.0456 14.3265 92.9639 13.96 92.9639 13.5278Z" fill="white"/>
+<path d="M98.5973 13.5173C98.5973 13.9401 98.6813 14.2524 98.8494 14.4543C99.0176 14.6563 99.2225 14.7571 99.464 14.7571C99.6961 14.7571 99.8889 14.6645 100.043 14.4791C100.197 14.2937 100.274 13.9897 100.274 13.567C100.274 13.1727 100.194 12.8798 100.036 12.6885C99.8771 12.4973 99.6807 12.4016 99.4462 12.4016C99.2023 12.4016 98.9999 12.4954 98.8388 12.6832C98.6778 12.871 98.5973 13.149 98.5973 13.5173ZM97.6099 11.7003H98.5406V12.2529C98.6612 12.064 98.8247 11.9104 99.0306 11.7924C99.2367 11.6743 99.4651 11.6152 99.7162 11.6152C100.154 11.6152 100.526 11.7865 100.831 12.1288C101.137 12.4713 101.289 12.9483 101.289 13.5599C101.289 14.1881 101.136 14.6763 100.828 15.0246C100.52 15.373 100.147 15.5471 99.709 15.5471C99.5007 15.5471 99.3118 15.5057 99.1425 15.423C98.9731 15.3404 98.7949 15.1988 98.6079 14.998V16.8931H97.6099V11.7003Z" fill="white"/>
+<path d="M104.323 13.2585C104.316 12.9706 104.241 12.7515 104.099 12.6016C103.957 12.4516 103.784 12.3766 103.581 12.3766C103.363 12.3766 103.183 12.4558 103.041 12.6139C102.899 12.7721 102.829 12.9871 102.831 13.2585H104.323ZM104.266 14.2646L105.261 14.431C105.133 14.7948 104.931 15.0716 104.655 15.2616C104.379 15.4517 104.034 15.5469 103.62 15.5469C102.964 15.5469 102.478 15.3331 102.163 14.9057C101.915 14.5633 101.791 14.1312 101.791 13.6092C101.791 12.9858 101.954 12.4976 102.281 12.1446C102.607 11.7916 103.02 11.615 103.52 11.615C104.081 11.615 104.524 11.7998 104.849 12.1694C105.173 12.539 105.328 13.1051 105.314 13.8678H102.813C102.82 14.163 102.901 14.3927 103.055 14.5568C103.209 14.721 103.401 14.803 103.63 14.803C103.786 14.803 103.918 14.7604 104.025 14.6755C104.131 14.5904 104.212 14.4534 104.266 14.2646Z" fill="white"/>
+<path d="M108.209 13.6553C108.081 13.6979 107.878 13.7486 107.601 13.8077C107.324 13.8668 107.143 13.9245 107.058 13.9812C106.927 14.0732 106.862 14.1902 106.862 14.3318C106.862 14.4713 106.914 14.5916 107.019 14.6931C107.123 14.7948 107.255 14.8455 107.416 14.8455C107.596 14.8455 107.768 14.7864 107.931 14.6684C108.052 14.5787 108.131 14.4688 108.169 14.339C108.195 14.2539 108.209 14.0922 108.209 13.8536V13.6553ZM106.873 12.8477L105.967 12.6847C106.069 12.3211 106.244 12.0518 106.493 11.8771C106.741 11.7024 107.111 11.615 107.601 11.615C108.046 11.615 108.378 11.6676 108.596 11.7726C108.813 11.8777 108.967 12.0112 109.056 12.1728C109.144 12.3346 109.189 12.6316 109.189 13.0638L109.178 14.2256C109.178 14.5562 109.194 14.8 109.226 14.9571C109.258 15.1141 109.318 15.2823 109.405 15.4618H108.418C108.392 15.3956 108.36 15.2976 108.322 15.1678C108.306 15.1088 108.294 15.0698 108.286 15.051C108.116 15.2162 107.934 15.3402 107.74 15.4228C107.545 15.5054 107.338 15.5469 107.118 15.5469C106.73 15.5469 106.424 15.4417 106.2 15.2315C105.976 15.0214 105.864 14.7558 105.864 14.4346C105.864 14.222 105.915 14.0325 106.017 13.8661C106.119 13.6996 106.261 13.5721 106.445 13.4835C106.628 13.395 106.893 13.3177 107.239 13.2515C107.705 13.1641 108.029 13.0827 108.209 13.0071V12.9079C108.209 12.7167 108.161 12.5803 108.066 12.4988C107.972 12.4174 107.793 12.3766 107.53 12.3766C107.352 12.3766 107.214 12.4115 107.115 12.4811C107.015 12.5508 106.935 12.673 106.873 12.8477Z" fill="white"/>
+<path d="M40.9521 23.974V19.4852H41.5631L43.9272 23.0095V19.4852H44.4983V23.974H43.8873L41.5232 20.4467V23.974H40.9521Z" fill="white"/>
+<path d="M47.6637 22.9268L48.2348 22.9972C48.1447 23.33 47.9779 23.5882 47.7343 23.7719C47.4907 23.9556 47.1796 24.0475 46.801 24.0475C46.324 24.0475 45.9454 23.9015 45.665 23.6096C45.3866 23.3157 45.2474 22.9044 45.2474 22.3757C45.2474 21.8286 45.3886 21.404 45.6711 21.1019C45.9536 20.7998 46.32 20.6488 46.7703 20.6488C47.2062 20.6488 47.5624 20.7967 47.8387 21.0927C48.115 21.3887 48.2532 21.8051 48.2532 22.342C48.2532 22.3746 48.2522 22.4236 48.2501 22.489H45.8185C45.8389 22.8462 45.9403 23.1197 46.1224 23.3095C46.3046 23.4994 46.5318 23.5943 46.804 23.5943C47.0067 23.5943 47.1796 23.5412 47.3229 23.4351C47.4662 23.3289 47.5798 23.1595 47.6637 22.9268ZM45.8492 22.0358H47.6698C47.6453 21.7623 47.5757 21.5571 47.4611 21.4204C47.285 21.2081 47.0568 21.1019 46.7764 21.1019C46.5226 21.1019 46.3087 21.1866 46.1347 21.3561C45.9628 21.5255 45.8676 21.7521 45.8492 22.0358Z" fill="white"/>
+<path d="M48.5633 23.974L49.7545 22.2838L48.6523 20.7222H49.3431L49.8436 21.4847C49.9377 21.6296 50.0135 21.751 50.0708 21.849C50.1608 21.7143 50.2437 21.5949 50.3195 21.4908L50.869 20.7222H51.5291L50.4023 22.2532L51.6151 23.974H50.9366L50.2673 22.9635L50.0892 22.691L49.2326 23.974H48.5633Z" fill="white"/>
+<path d="M53.2822 23.481L53.3621 23.9679C53.2065 24.0005 53.0673 24.0168 52.9445 24.0168C52.7439 24.0168 52.5884 23.9852 52.4778 23.9219C52.3673 23.8586 52.2895 23.776 52.2445 23.6739C52.1995 23.5698 52.1769 23.3524 52.1769 23.0217V21.1509H51.7717V20.7222H52.1769V19.917L52.7265 19.5863V20.7222H53.2822V21.1509H52.7265V23.0523C52.7265 23.2095 52.7357 23.3106 52.7542 23.3555C52.7746 23.4004 52.8063 23.4361 52.8493 23.4626C52.8944 23.4892 52.9578 23.5024 53.0397 23.5024C53.1011 23.5024 53.1819 23.4953 53.2822 23.481Z" fill="white"/>
+<path d="M56.0025 22.2134V21.6867L57.9091 21.6837V23.3493C57.6164 23.5821 57.3145 23.7576 57.0034 23.876C56.6922 23.9923 56.3729 24.0505 56.0454 24.0505C55.6033 24.0505 55.2011 23.9566 54.8388 23.7688C54.4786 23.579 54.2064 23.3055 54.0222 22.9482C53.8379 22.591 53.7458 22.192 53.7458 21.751C53.7458 21.3142 53.8369 20.907 54.0191 20.5293C54.2033 20.1497 54.4673 19.868 54.8112 19.6843C55.1551 19.5005 55.5511 19.4087 55.9994 19.4087C56.3248 19.4087 56.6186 19.4618 56.8806 19.5679C57.1446 19.672 57.3513 19.818 57.5007 20.0058C57.6502 20.1936 57.7638 20.4385 57.8415 20.7406L57.3042 20.8876C57.2367 20.659 57.1528 20.4793 57.0525 20.3487C56.9522 20.2181 56.8089 20.1139 56.6227 20.0364C56.4364 19.9568 56.2297 19.917 56.0025 19.917C55.7302 19.917 55.4949 19.9588 55.2963 20.0425C55.0978 20.1242 54.9371 20.2323 54.8143 20.3671C54.6935 20.5018 54.5994 20.6498 54.5318 20.811C54.4172 21.0887 54.3599 21.3897 54.3599 21.7143C54.3599 22.1144 54.4285 22.4492 54.5656 22.7186C54.7048 22.988 54.9064 23.1881 55.1704 23.3187C55.4345 23.4494 55.7149 23.5147 56.0117 23.5147C56.2696 23.5147 56.5213 23.4657 56.767 23.3677C57.0126 23.2677 57.1988 23.1616 57.3257 23.0493V22.2134H56.0025Z" fill="white"/>
+<path d="M60.9517 22.9268L61.5228 22.9972C61.4327 23.33 61.2659 23.5882 61.0223 23.7719C60.7787 23.9556 60.4676 24.0475 60.089 24.0475C59.612 24.0475 59.2334 23.9015 58.953 23.6096C58.6746 23.3157 58.5354 22.9044 58.5354 22.3757C58.5354 21.8286 58.6766 21.404 58.9591 21.1019C59.2416 20.7998 59.608 20.6488 60.0583 20.6488C60.4942 20.6488 60.8504 20.7967 61.1267 21.0927C61.403 21.3887 61.5412 21.8051 61.5412 22.342C61.5412 22.3746 61.5402 22.4236 61.5381 22.489H59.1065C59.1269 22.8462 59.2283 23.1197 59.4104 23.3095C59.5926 23.4994 59.8198 23.5943 60.092 23.5943C60.2947 23.5943 60.4676 23.5412 60.6109 23.4351C60.7542 23.3289 60.8678 23.1595 60.9517 22.9268ZM59.1372 22.0358H60.9578C60.9333 21.7623 60.8637 21.5571 60.7491 21.4204C60.573 21.2081 60.3448 21.1019 60.0644 21.1019C59.8106 21.1019 59.5967 21.1866 59.4227 21.3561C59.2508 21.5255 59.1556 21.7521 59.1372 22.0358Z" fill="white"/>
+<path d="M62.2197 23.974V20.7222H62.7171V21.1846C62.9566 20.8274 63.3025 20.6488 63.7548 20.6488C63.9513 20.6488 64.1314 20.6845 64.2952 20.7559C64.461 20.8253 64.5848 20.9172 64.6667 21.0315C64.7486 21.1458 64.8059 21.2815 64.8386 21.4387C64.8591 21.5408 64.8693 21.7194 64.8693 21.9746V23.974H64.3167V21.996C64.3167 21.7715 64.2952 21.6041 64.2522 21.4938C64.2092 21.3816 64.1325 21.2928 64.0219 21.2275C63.9135 21.1601 63.7855 21.1264 63.6382 21.1264C63.4028 21.1264 63.1991 21.2009 63.0272 21.3499C62.8573 21.4989 62.7723 21.7817 62.7723 22.1981V23.974H62.2197Z" fill="white"/>
+<path d="M67.9518 22.9268L68.5229 22.9972C68.4328 23.33 68.266 23.5882 68.0225 23.7719C67.7789 23.9556 67.4678 24.0475 67.0891 24.0475C66.6122 24.0475 66.2335 23.9015 65.9531 23.6096C65.6747 23.3157 65.5356 22.9044 65.5356 22.3757C65.5356 21.8286 65.6768 21.404 65.9593 21.1019C66.2417 20.7998 66.6081 20.6488 67.0584 20.6488C67.4944 20.6488 67.8505 20.7967 68.1268 21.0927C68.4032 21.3887 68.5413 21.8051 68.5413 22.342C68.5413 22.3746 68.5403 22.4236 68.5383 22.489H66.1066C66.1271 22.8462 66.2284 23.1197 66.4106 23.3095C66.5927 23.4994 66.8199 23.5943 67.0922 23.5943C67.2948 23.5943 67.4678 23.5412 67.611 23.4351C67.7543 23.3289 67.8679 23.1595 67.9518 22.9268ZM66.1373 22.0358H67.958C67.9334 21.7623 67.8638 21.5571 67.7492 21.4204C67.5732 21.2081 67.345 21.1019 67.0645 21.1019C66.8107 21.1019 66.5968 21.1866 66.4229 21.3561C66.2509 21.5255 66.1558 21.7521 66.1373 22.0358Z" fill="white"/>
+<path d="M69.2137 23.974V20.7222H69.7111V21.2152C69.838 20.9845 69.9547 20.8325 70.0611 20.759C70.1696 20.6855 70.2883 20.6488 70.4172 20.6488C70.6035 20.6488 70.7928 20.708 70.9852 20.8263L70.7949 21.3377C70.6598 21.2581 70.5247 21.2183 70.3896 21.2183C70.2688 21.2183 70.1604 21.255 70.0642 21.3285C69.968 21.3999 69.8994 21.5 69.8585 21.6286C69.7971 21.8245 69.7664 22.0389 69.7664 22.2716V23.974H69.2137Z" fill="white"/>
+<path d="M73.4414 23.5729C73.2367 23.7464 73.0392 23.8689 72.8489 23.9403C72.6606 24.0117 72.4579 24.0475 72.241 24.0475C71.8828 24.0475 71.6075 23.9607 71.4151 23.7872C71.2227 23.6117 71.1265 23.3881 71.1265 23.1166C71.1265 22.9574 71.1623 22.8125 71.2339 22.6819C71.3076 22.5492 71.4028 22.443 71.5195 22.3634C71.6382 22.2838 71.7712 22.2236 71.9186 22.1828C72.0271 22.1542 72.1908 22.1266 72.4098 22.1001C72.856 22.047 73.1846 21.9837 73.3954 21.9103C73.3974 21.8347 73.3984 21.7868 73.3984 21.7663C73.3984 21.5418 73.3463 21.3836 73.2419 21.2918C73.1006 21.1672 72.8908 21.105 72.6125 21.105C72.3525 21.105 72.1601 21.1509 72.0353 21.2428C71.9125 21.3326 71.8214 21.4928 71.762 21.7235L71.2216 21.65C71.2708 21.4193 71.3516 21.2336 71.4642 21.0927C71.5768 20.9498 71.7395 20.8406 71.9524 20.7651C72.1652 20.6875 72.4119 20.6488 72.6923 20.6488C72.9707 20.6488 73.1968 20.6814 73.3708 20.7467C73.5448 20.8121 73.6727 20.8947 73.7546 20.9948C73.8365 21.0927 73.8938 21.2173 73.9265 21.3683C73.945 21.4622 73.9542 21.6316 73.9542 21.8766V22.6114C73.9542 23.1238 73.9654 23.4483 73.9879 23.5851C74.0125 23.7198 74.0596 23.8495 74.1292 23.974H73.552C73.4946 23.8597 73.4578 23.726 73.4414 23.5729ZM73.3954 22.342C73.1948 22.4236 72.8939 22.493 72.4927 22.5502C72.2655 22.5829 72.1049 22.6196 72.0107 22.6604C71.9165 22.7012 71.8439 22.7615 71.7927 22.8411C71.7415 22.9186 71.716 23.0054 71.716 23.1013C71.716 23.2483 71.7712 23.3708 71.8817 23.4688C71.9943 23.5667 72.1581 23.6157 72.373 23.6157C72.5859 23.6157 72.7752 23.5698 72.941 23.4779C73.1068 23.3841 73.2286 23.2565 73.3063 23.0952C73.3657 22.9707 73.3954 22.787 73.3954 22.5441V22.342Z" fill="white"/>
+<path d="M76.0204 23.481L76.1003 23.9679C75.9447 24.0005 75.8055 24.0168 75.6827 24.0168C75.4821 24.0168 75.3266 23.9852 75.216 23.9219C75.1055 23.8586 75.0277 23.776 74.9827 23.6739C74.9377 23.5698 74.9151 23.3524 74.9151 23.0217V21.1509H74.5099V20.7222H74.9151V19.917L75.4647 19.5863V20.7222H76.0204V21.1509H75.4647V23.0523C75.4647 23.2095 75.4739 23.3106 75.4924 23.3555C75.5128 23.4004 75.5445 23.4361 75.5875 23.4626C75.6326 23.4892 75.696 23.5024 75.7779 23.5024C75.8393 23.5024 75.9201 23.4953 76.0204 23.481Z" fill="white"/>
+<path d="M76.5669 20.1191V19.4852H77.1196V20.1191H76.5669ZM76.5669 23.974V20.7222H77.1196V23.974H76.5669Z" fill="white"/>
+<path d="M77.7582 22.3481C77.7582 21.7459 77.926 21.2999 78.2617 21.0101C78.5421 20.7692 78.8839 20.6488 79.2872 20.6488C79.7354 20.6488 80.1018 20.7957 80.3863 21.0897C80.6708 21.3816 80.8131 21.7857 80.8131 22.3022C80.8131 22.7206 80.7496 23.0503 80.6227 23.2912C80.4979 23.53 80.3147 23.7158 80.0732 23.8484C79.8337 23.9811 79.5717 24.0475 79.2872 24.0475C78.8307 24.0475 78.4613 23.9015 78.1788 23.6096C77.8984 23.3177 77.7582 22.8972 77.7582 22.3481ZM78.3262 22.3481C78.3262 22.7645 78.4173 23.0768 78.5994 23.285C78.7816 23.4912 79.0108 23.5943 79.2872 23.5943C79.5614 23.5943 79.7897 23.4902 79.9718 23.282C80.154 23.0738 80.2451 22.7564 80.2451 22.3297C80.2451 21.9276 80.153 21.6235 79.9688 21.4173C79.7866 21.2091 79.5594 21.105 79.2872 21.105C79.0108 21.105 78.7816 21.2081 78.5994 21.4142C78.4173 21.6204 78.3262 21.9317 78.3262 22.3481Z" fill="white"/>
+<path d="M81.464 23.974V20.7222H81.9613V21.1846C82.2008 20.8274 82.5467 20.6488 82.9991 20.6488C83.1956 20.6488 83.3757 20.6845 83.5394 20.7559C83.7052 20.8253 83.8291 20.9172 83.9109 21.0315C83.9928 21.1458 84.0501 21.2815 84.0829 21.4387C84.1033 21.5408 84.1136 21.7194 84.1136 21.9746V23.974H83.5609V21.996C83.5609 21.7715 83.5394 21.6041 83.4965 21.4938C83.4535 21.3816 83.3767 21.2928 83.2662 21.2275C83.1577 21.1601 83.0298 21.1264 82.8824 21.1264C82.647 21.1264 82.4434 21.2009 82.2714 21.3499C82.1016 21.4989 82.0166 21.7817 82.0166 22.1981V23.974H81.464Z" fill="white"/>
+<path d="M85.0469 23.974V19.4852H88.3014V20.0149H85.6426V21.3897H88.1325V21.9164H85.6426V23.4443H88.4058V23.974H85.0469Z" fill="white"/>
+<path d="M92.1822 19.4852H92.7778V22.0787C92.7778 22.5298 92.7266 22.888 92.6243 23.1534C92.5219 23.4188 92.3367 23.6351 92.0686 23.8025C91.8025 23.9679 91.4525 24.0505 91.0186 24.0505C90.5969 24.0505 90.252 23.9781 89.9839 23.8331C89.7157 23.6882 89.5244 23.479 89.4097 23.2054C89.2951 22.9299 89.2378 22.5543 89.2378 22.0787V19.4852H89.8334V22.0756C89.8334 22.4655 89.8693 22.7533 89.9409 22.9391C90.0146 23.1228 90.1394 23.2646 90.3155 23.3647C90.4935 23.4647 90.7105 23.5147 90.9664 23.5147C91.4044 23.5147 91.7165 23.4157 91.9028 23.2177C92.089 23.0197 92.1822 22.639 92.1822 22.0756V19.4852Z" fill="white"/>
+</svg>
diff --git a/ios/ItaliaApp/Images.xcassets/logo_consiglio_ministri.imageset/Contents.json b/ios/ItaliaApp/Images.xcassets/logo_consiglio_ministri.imageset/Contents.json
index 1a9c9cf6045..9b0051f53d9 100644
--- a/ios/ItaliaApp/Images.xcassets/logo_consiglio_ministri.imageset/Contents.json
+++ b/ios/ItaliaApp/Images.xcassets/logo_consiglio_ministri.imageset/Contents.json
@@ -1,23 +1,15 @@
 {
   "images" : [
     {
-      "filename" : "logo_ConsiglioMInistri.png",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "filename" : "logo ConsiglioMInistri@2x.png",
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "filename" : "logo ConsiglioMInistri@3x.png",
-      "idiom" : "universal",
-      "scale" : "3x"
+      "filename" : "logo_consiglio_ministri.svg",
+      "idiom" : "universal"
     }
   ],
   "info" : {
     "author" : "xcode",
     "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
   }
 }
diff --git a/ios/ItaliaApp/Images.xcassets/logo_consiglio_ministri.imageset/logo ConsiglioMInistri@2x.png b/ios/ItaliaApp/Images.xcassets/logo_consiglio_ministri.imageset/logo ConsiglioMInistri@2x.png
deleted file mode 100644
index fea6caf2353..00000000000
Binary files a/ios/ItaliaApp/Images.xcassets/logo_consiglio_ministri.imageset/logo ConsiglioMInistri@2x.png and /dev/null differ
diff --git a/ios/ItaliaApp/Images.xcassets/logo_consiglio_ministri.imageset/logo ConsiglioMInistri@3x.png b/ios/ItaliaApp/Images.xcassets/logo_consiglio_ministri.imageset/logo ConsiglioMInistri@3x.png
deleted file mode 100644
index 722aff5ec14..00000000000
Binary files a/ios/ItaliaApp/Images.xcassets/logo_consiglio_ministri.imageset/logo ConsiglioMInistri@3x.png and /dev/null differ
diff --git a/ios/ItaliaApp/Images.xcassets/logo_consiglio_ministri.imageset/logo_ConsiglioMInistri.png b/ios/ItaliaApp/Images.xcassets/logo_consiglio_ministri.imageset/logo_ConsiglioMInistri.png
deleted file mode 100644
index 1d3df27ef4a..00000000000
Binary files a/ios/ItaliaApp/Images.xcassets/logo_consiglio_ministri.imageset/logo_ConsiglioMInistri.png and /dev/null differ
diff --git a/ios/ItaliaApp/Images.xcassets/logo_consiglio_ministri.imageset/logo_consiglio_ministri.svg b/ios/ItaliaApp/Images.xcassets/logo_consiglio_ministri.imageset/logo_consiglio_ministri.svg
new file mode 100644
index 00000000000..6b00504a44b
--- /dev/null
+++ b/ios/ItaliaApp/Images.xcassets/logo_consiglio_ministri.imageset/logo_consiglio_ministri.svg
@@ -0,0 +1,10 @@
+<svg width="43" height="48" viewBox="0 0 43 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5554_34205)">
+<path d="M25.0789 0.351401C24.7441 0.36231 24.5989 0.571416 24.646 0.978672C24.0444 1.01214 23.6306 1.1169 23.4051 1.29231C23.1795 1.4678 23.1192 1.71464 23.2278 2.03208C23.3364 2.3496 23.5832 2.60888 23.9676 2.80936C23.8673 2.92637 23.8247 3.11102 23.8414 3.36163C23.8581 3.61231 24.1279 3.81843 24.646 3.98548C25.0303 4.08578 25.4033 4.09635 25.771 4.01276C25.6874 4.39713 25.8223 4.63867 26.1732 4.7389C26.6578 5.24022 27.2581 5.36457 27.9766 5.1139L27.9016 5.59117L28.88 5.99344C28.9134 6.46134 29.1301 6.79523 29.5312 6.99571L29.4835 7.09457C29.4333 7.09461 29.3907 7.11233 29.3573 7.14571L28.5562 8.04571C28.4893 8.11258 28.4113 8.12314 28.3278 8.07298C27.8599 7.80566 27.4442 7.59613 27.0766 7.44571C26.9764 7.39561 26.9161 7.31044 26.8994 7.19344L27.0494 6.04117C27.0493 5.92423 26.9924 5.83191 26.8755 5.76502C26.3408 5.51442 25.7974 5.33317 25.246 5.21617C25.0788 5.16607 24.9616 5.21617 24.8948 5.36617L24.3698 6.44344C24.3197 6.54374 24.2345 6.58631 24.1176 6.56957C23.6831 6.48606 23.2143 6.42575 22.713 6.3923C22.6127 6.39234 22.5558 6.34259 22.5392 6.2423L22.3653 5.09003C22.3486 4.93968 22.2562 4.86507 22.0892 4.86503C21.5043 4.83165 20.9183 4.83165 20.3335 4.86503C20.1998 4.86507 20.1146 4.92912 20.0812 5.06275L19.9073 6.2423C19.8906 6.34259 19.8337 6.39234 19.7335 6.3923C19.2322 6.42575 18.7634 6.48606 18.3289 6.56957C18.2621 6.60303 18.1769 6.57819 18.0767 6.49457L17.5517 5.3389C17.4848 5.23867 17.3676 5.1995 17.2005 5.21617C17.0167 5.23291 16.7326 5.31468 16.3483 5.46503V5.36617C17.05 5.06543 17.7178 4.65352 18.3528 4.13548C19.0212 3.55069 19.3799 2.94323 19.4301 2.30822C19.3131 2.15788 18.972 2.0727 18.4039 2.05594C18.7047 1.7218 18.8645 1.3702 18.8812 1.00254C18.664 0.701811 18.0105 0.652066 16.9244 0.852542C15.7881 1.13665 14.7936 1.58058 13.9415 2.18208C13.0725 2.73354 12.2928 3.40659 11.5994 4.20026C10.9059 4.994 10.3501 5.81628 9.93237 6.66844L10.4335 5.51617C10.6841 4.96479 10.9506 4.32189 11.2346 3.58663C11.3182 3.23576 11.3235 2.98365 11.2483 2.83321C11.1731 2.68288 11.008 2.64029 10.7574 2.70708C10.49 2.77396 10.0069 3.12557 9.3051 3.76048C8.53644 4.54588 7.85624 5.5155 7.26306 6.66844C6.66986 7.82144 6.26323 8.73076 6.04602 9.39911C6.16298 8.64721 6.14526 8.00432 5.99488 7.46957C5.91132 7.25238 5.73007 7.19549 5.44602 7.29571C5.17866 7.47955 4.90882 7.75313 4.64148 8.12071C4.37411 8.48835 4.11825 8.84523 3.86761 9.18774C3.61696 9.53033 3.32038 10.0187 2.97784 10.6536C2.63529 11.2887 2.33343 12.0416 2.07444 12.9105C1.81543 13.7794 1.61834 14.9303 1.48467 16.3673C1.40111 17.2863 1.46857 18.2737 1.6858 19.3264C1.95315 20.3791 2.21958 21.1569 2.48694 21.6582C2.75428 22.1595 3.0064 22.4508 3.24034 22.5343C3.39072 22.9019 3.58969 23.5128 3.84034 24.365C3.97401 24.766 4.03432 25.0698 4.01761 25.2786C4.0009 25.4875 4.05251 25.6349 4.17784 25.7184C4.30315 25.802 4.40792 25.9689 4.49148 26.2195C4.70869 27.0216 5.0034 27.764 5.37102 28.4491C5.30417 28.8167 5.26874 29.186 5.26875 29.5536C4.46668 27.231 3.81662 25.4764 3.31534 24.29C2.34618 22.1345 1.58608 21.1471 1.03467 21.3309C0.767308 21.4312 0.600367 21.6727 0.533531 22.057C0.516818 22.2074 0.516818 22.5945 0.533531 23.2127C0.550238 23.831 0.607133 24.481 0.707395 25.1661C1.20868 27.3885 2.06826 29.2426 3.28807 30.7297L5.11875 32.8877C5.48635 33.2553 5.83795 33.5236 6.17215 33.6991C6.50634 33.8745 6.81535 33.9224 7.09942 33.8388C7.51715 34.5072 8.04285 35.207 8.67783 35.9422C9.07885 36.5605 9.49791 36.8552 9.93237 36.8218C10.1162 37.2228 10.3897 37.4218 10.7574 37.4218L11.1358 37.374C11.6538 37.8753 12.1192 38.2733 12.5369 38.574L12.063 39.9309C11.2275 40.0478 10.4569 40.1119 9.7551 40.1286C9.10341 39.6607 8.18693 39.0284 7.00056 38.2263L6.92556 36.7195C6.89213 36.2015 6.98105 35.7681 7.19829 35.4172C7.24841 35.1332 7.09203 34.8739 6.72442 34.64C6.173 34.3726 5.77881 34.266 5.54488 34.3161C5.44462 34.3495 5.38772 34.4384 5.37102 34.5888V35.4172L2.98807 35.4684C2.77084 35.4684 2.59146 35.5501 2.44944 35.7172C2.3074 35.8843 2.30212 36.2182 2.4358 36.7195C2.4525 36.9033 2.44534 37.0631 2.41194 37.1968C2.29496 37.7315 1.98595 38.3849 1.48467 39.1536C1.41782 39.2706 1.44797 39.4447 1.5733 39.6786C1.69862 39.9125 2.01291 40.2784 2.51421 40.7797C2.73143 40.9969 3.06003 41.2668 3.50284 41.5843C3.94564 41.9018 4.72533 42.3849 5.84488 43.0365C7.16493 43.8219 8.42926 44.4753 9.63237 44.9934C9.883 45.0101 11.5524 44.7828 14.6437 44.3149L14.6676 44.5911C13.782 45.2595 13.2137 45.5364 12.963 45.4195C12.6121 45.4529 12.5055 45.7122 12.6392 46.1968C12.7394 46.414 12.9241 46.5632 13.1915 46.6468L13.5153 47.0218L14.4426 47.574C14.7935 47.6743 15.1274 47.6743 15.4449 47.574C15.7456 47.4571 15.948 47.1978 16.0483 46.7967L16.8733 46.4217C17.057 46.3048 17.1494 46.0632 17.1494 45.6956L17.8755 45.1433C18.4436 45.0431 18.813 44.8407 18.9801 44.5399C19.0135 44.2726 19.0881 44.1056 19.2051 44.0388L20.0812 43.4388C20.1146 43.3553 20.4768 43.4973 21.1619 43.8649C21.4961 43.9485 21.7874 43.9308 22.038 43.8138L22.6892 43.4388C23.274 43.5725 24.3005 44.2971 25.771 45.6172C25.7542 45.7676 25.8466 45.9451 26.0471 46.1456C26.164 46.296 26.4836 46.4204 27.0016 46.5206L27.3528 47.1718L27.7039 47.2979C28.2219 47.3146 28.705 47.1299 29.1562 46.7456L29.7085 46.5718C29.9925 46.3545 30.1168 46.1378 30.0835 45.9206L29.8585 45.6956L29.3812 45.5695C28.7796 45.2854 28.1687 44.9018 27.5505 44.4172L27.1516 44.1138C28.973 44.4313 31.2355 44.6834 33.9425 44.8672C34.2767 44.934 34.7259 44.7618 35.2857 44.3524C35.8454 43.9431 37.5345 42.7372 40.3584 40.732C40.7761 40.2808 41.1134 39.7623 41.3641 39.1775C41.1134 38.9435 40.8915 38.6096 40.6993 38.1752C40.5071 37.7407 40.3846 37.3714 40.3346 37.0706C40.2677 36.7866 40.2605 36.5326 40.3107 36.307C40.3608 36.0814 40.2862 35.87 40.0857 35.6695C40.0021 35.5525 39.8069 35.4745 39.5062 35.4411C38.9714 35.391 38.3711 35.4015 37.7028 35.4684C37.3852 35.435 37.2006 35.3603 37.1505 35.2434L37.1778 34.64C37.2278 34.3726 37.1532 34.2554 36.9528 34.2888C36.2175 34.4726 35.7736 34.6573 35.6232 34.8411C35.4059 35.075 35.4131 35.3272 35.6471 35.5945C35.8308 35.7616 35.9232 35.9534 35.9232 36.1706C35.8229 37.2735 35.7306 38.0159 35.6471 38.4002C34.4272 39.3693 33.5997 39.9625 33.1653 40.1797C32.8143 40.2967 32.0294 40.247 30.8096 40.0297C30.5422 39.7958 30.3504 39.3944 30.2335 38.8263C30.6512 38.5757 31.0951 38.2738 31.563 37.9229C31.8804 37.8728 32.1469 37.8106 32.3641 37.7354C32.5813 37.6602 32.6914 37.456 32.6914 37.1218C32.9086 37.0382 33.065 36.8536 33.1653 36.5695L34.6209 34.8172C35.0888 34.4162 35.5968 34.1818 36.1482 34.115C36.8166 34.0648 37.6867 33.6884 38.7562 32.9866C38.9232 32.8028 38.9232 32.5435 38.7562 32.2093C39.0736 32.0255 39.5921 31.5069 40.3107 30.6547C40.5947 30.2537 40.6622 29.8098 40.5118 29.3252C41.1802 28.5231 41.5532 27.8908 41.6368 27.4229C41.7036 27.0052 41.6965 26.5541 41.613 26.0695C41.9304 25.869 42.1524 25.6968 42.2777 25.5548C42.403 25.4127 42.4652 25.2156 42.4652 24.965C42.4652 24.7144 42.3729 24.5048 42.1891 24.3377C42.6736 23.6526 42.7339 23.0346 42.3664 22.4832C42.5 21.5809 42.4077 21.0126 42.0902 20.7786C41.756 20.5447 41.3441 20.6227 40.8596 21.007C40.5755 20.8567 40.1918 20.9987 39.7073 21.4332C39.7908 21.216 39.8014 21.0208 39.7346 20.8536C40.169 20.6531 40.4478 20.4346 40.5732 20.1923C40.6985 19.95 40.7607 19.5682 40.7607 19.0502C40.8108 18.7328 41.1021 18.1645 41.6368 17.3457C42.0044 16.5269 41.7451 16.2428 40.8596 16.4934C41.3441 16.059 41.5891 15.6825 41.5891 15.365C41.6225 15.0643 41.4947 14.6806 41.2107 14.2127C41.0937 13.9454 40.9196 13.8957 40.6857 14.0627C40.7692 13.8957 40.8137 13.6967 40.8221 13.4627C40.8304 13.2288 40.6759 12.7352 40.3584 11.9832C40.3083 10.9974 40.0773 10.5855 39.6596 10.7525C39.5927 10.2345 39.4257 9.74429 39.1584 9.27638C38.7574 8.67488 38.4378 8.51508 38.2039 8.79911C37.5522 7.82999 36.9413 7.42865 36.3732 7.59571C36.3565 7.178 36.2144 6.80153 35.9471 6.4673C35.7966 5.83237 35.6154 5.39185 35.3982 5.14117C35.0974 5.02423 34.8879 5.19117 34.7709 5.6423C34.7208 5.27473 34.6036 4.8877 34.4198 4.48662C34.236 4.08563 33.9447 3.87951 33.5437 3.86276C33.3932 3.84609 33.2512 3.87094 33.1175 3.93776C32.8501 3.77071 32.6229 3.68553 32.4391 3.68548C31.871 3.08398 31.3524 3.03424 30.8846 3.53548L30.8096 3.01049C30.6425 2.39227 30.3086 2.25736 29.8073 2.60821C28.9885 1.75606 28.2887 1.19493 27.7039 0.927542C27.2193 0.760491 26.8997 0.803069 26.7494 1.05367C26.4987 0.803069 26.2323 0.643284 25.9482 0.576401C25.6641 0.509605 25.3977 0.434997 25.1471 0.351401C25.1231 0.350314 25.1012 0.350314 25.0789 0.351401ZM25.2085 0.780946C25.3994 0.775924 25.7885 0.916512 26.3744 1.20367L26.8755 1.50367C27.0092 1.25307 27.233 1.17846 27.5505 1.27867C27.9348 1.46252 28.297 1.68449 28.6312 1.94345C28.9653 2.20248 29.3384 2.57368 29.7562 3.05821C30.1071 2.82432 30.3592 2.87407 30.5096 3.20821L30.5846 3.81163C30.2169 3.46076 29.7659 3.43589 29.2312 3.73663L28.88 3.58663C28.3954 3.00182 28.1041 2.5579 28.0039 2.25708C27.9036 1.8728 27.8539 1.84077 27.8539 2.15821C27.8706 2.49246 28.0696 2.91866 28.4539 3.43663C27.7187 3.20273 27.1805 2.90087 26.838 2.53321C26.4954 2.16564 26.2309 1.85663 26.0471 1.60594C25.8633 1.30521 25.7887 1.30521 25.8221 1.60594C26.0226 1.9736 26.2996 2.31464 26.6505 2.63208C26.3831 2.51516 26.131 2.39795 25.8971 2.28094C25.3122 2.03034 24.8291 1.89883 24.4448 1.88208C24.261 1.88213 24.2504 1.91415 24.4176 1.98094C25.0692 2.14808 25.5433 2.30259 25.8357 2.44458C26.1281 2.58666 26.3252 2.71629 26.4255 2.83321C25.9576 3.03378 25.4711 3.1261 24.9698 3.10935C24.6523 3.09269 24.5103 3.09986 24.5437 3.13321C24.5771 3.16667 24.6766 3.20211 24.8437 3.23549C25.4452 3.30237 26.0561 3.23439 26.6744 3.03435C27.1255 3.26833 27.6512 3.49216 28.2528 3.70935C27.8851 3.79294 27.5264 3.96329 27.1755 4.2139C27.0418 4.38104 27.1093 4.38818 27.3766 4.23776C27.644 4.03728 28.0453 3.91293 28.5801 3.86276L29.0062 4.03663C28.9727 4.48782 29.0794 4.94606 29.33 5.41389L29.0573 5.51617L28.205 5.24003L28.2528 4.6639L27.7789 4.76275C27.3277 4.91318 26.8766 4.78167 26.4255 4.3639C26.1247 4.41407 25.9969 4.29686 26.0471 4.01276C26.164 3.76215 26.132 3.62724 25.9482 3.61048L25.2221 3.68548C24.7542 3.61869 24.4452 3.48378 24.2948 3.28321C24.1945 3.11616 24.2586 2.91003 24.4926 2.65936C24.0414 2.47559 23.7625 2.27322 23.6539 2.05594C23.5453 1.83877 23.6127 1.66467 23.8551 1.53094C24.0973 1.39731 24.5431 1.37245 25.1948 1.45594C25.0444 1.27218 25.0052 1.08037 25.0721 0.879814C25.0773 0.817164 25.1217 0.783226 25.2085 0.780946ZM18.0289 1.1014C18.0879 1.10031 18.1464 1.10271 18.2028 1.10478C18.42 1.15495 18.4769 1.2793 18.3767 1.47978L17.8278 2.20591C17.3432 2.27279 16.6773 2.54978 15.8335 3.03432C14.9896 3.51893 14.0856 4.16184 13.1165 4.96386L12.7653 5.18886C12.5815 5.05523 12.2442 5.11553 11.7596 5.36613C13.2969 4.07953 14.6359 3.10274 15.7721 2.43432C16.5073 2.06675 16.9335 1.80748 17.0505 1.65705C16.6829 1.75735 16.1644 1.98647 15.496 2.34569C14.8276 2.70499 13.723 3.45264 12.1858 4.58886L10.7096 5.91499C11.5451 4.77878 12.4171 3.83742 13.3278 3.08545C14.2385 2.33357 15.3272 1.74756 16.5971 1.32978C17.1381 1.18361 17.6159 1.10688 18.0289 1.10137V1.1014ZM18.3596 2.38321C18.5977 2.38321 18.8046 2.41527 18.9801 2.48208C18.9801 2.7996 18.7882 3.1512 18.4039 3.53548C17.8191 4.07024 17.0891 4.5639 16.2119 5.01503C15.3346 5.46623 14.1928 5.99908 12.7892 6.6173V6.4673C14.4936 5.1974 16.074 4.16373 17.5278 3.36163C17.9121 3.12773 17.8767 3.06028 17.4255 3.16049C16.9242 3.41118 16.3737 3.72019 15.7721 4.08776C14.7695 4.73947 13.7928 5.38237 12.8403 6.0173L12.8642 5.7173C14.7691 4.04638 16.3318 2.96671 17.5517 2.48208C17.8524 2.41527 18.1215 2.38321 18.3596 2.38321ZM10.7131 3.20821C10.7213 3.20815 10.7272 3.20614 10.7335 3.20821C10.817 3.2751 10.8419 3.38515 10.8085 3.53548L9.58123 6.6923C8.77916 8.24634 7.72436 9.86942 6.42102 11.5571C5.86959 12.1586 5.52855 12.5423 5.39488 12.7093C5.2612 12.8765 5.15115 13.0362 5.06761 13.1866L5.16988 12.7605L5.64715 12.0071C6.31553 10.921 7.11481 9.38305 8.05056 7.39457C8.33461 6.80976 8.75367 6.14916 9.3051 5.41389C9.47218 5.02961 9.37985 5.04017 9.02896 5.44117C8.21018 6.46049 7.25827 8.07301 6.17215 10.2787L6.64943 9.07525C6.73296 8.80792 6.99939 8.20234 7.45056 7.2582C7.90171 6.31414 8.34564 5.56649 8.7801 5.01503C9.21454 4.46365 9.51299 4.10489 9.6801 3.93776C10.244 3.45217 10.5897 3.20923 10.7131 3.20821ZM31.5085 3.57981C31.6364 3.57326 31.7731 3.60717 31.9141 3.68548C31.4295 3.68553 31.1454 3.89506 31.0619 4.31276C31.0117 4.58015 31.0117 4.90689 31.0619 5.29117C30.8947 5.05727 30.6924 4.85489 30.4585 4.68775C30.0073 4.45386 29.9255 4.47874 30.2096 4.76275C30.4936 5.04686 30.7423 5.34157 30.9596 5.6423C30.5919 5.94311 30.1906 6.07462 29.7562 6.04117C29.6058 6.10804 29.6306 6.15063 29.8312 6.1673C30.0317 6.21747 30.2661 6.19975 30.5335 6.11617C30.5 6.38356 30.5426 6.65339 30.6596 6.92071C30.4256 6.95417 30.1486 6.91875 29.8312 6.81844C29.4635 6.61796 29.2717 6.30179 29.255 5.8673L29.7085 5.69003C29.9089 5.45613 29.911 5.28204 29.7187 5.16503C29.5265 5.0481 29.4217 4.73909 29.405 4.23776C29.5888 3.83677 30.0433 3.83677 30.7619 4.23776C30.9801 3.81274 31.227 3.59418 31.5084 3.57981H31.5085ZM31.955 4.12185C32.348 4.10725 32.7374 4.24537 33.1175 4.53776C33.1342 4.30386 33.2887 4.23453 33.5812 4.32639C33.8736 4.41833 34.1453 5.03824 34.3959 6.19117L34.7948 6.34117C34.9284 6.02372 35.0385 5.86734 35.1221 5.8673C35.2557 5.86734 35.3872 6.14092 35.5209 6.6923C35.8551 6.99311 36.0149 7.48678 35.9982 8.17184C35.7809 8.45594 35.6637 8.80754 35.6471 9.22525L35.4459 8.77525C35.3289 8.27399 35.2792 7.74489 35.2959 7.19344C35.2792 6.95954 35.2543 6.95954 35.2209 7.19344C35.1708 7.67805 35.1636 8.08995 35.1971 8.42411C34.7459 7.83931 34.2594 7.31361 33.7414 6.84571C33.6411 6.47813 33.6091 6.05907 33.6425 5.59117C33.5924 5.19017 33.5498 5.09784 33.5164 5.31503C33.4829 5.81635 33.5007 6.28516 33.5675 6.71957C33.1832 6.33529 32.7321 5.77416 32.2141 5.0389C32.0804 4.805 32.0201 4.75526 32.0369 4.8889C32.3543 5.49048 32.6916 5.9913 33.0425 6.3923C33.3934 6.79337 33.6775 7.11295 33.8948 7.34684C33.4603 7.2132 33.0839 7.12275 32.7664 7.08093C32.4489 7.03919 32.1542 6.95215 31.8869 6.81844C31.6362 6.76834 31.6467 6.82869 31.9141 6.99571C32.0645 7.09601 32.3682 7.18493 32.8278 7.26844C33.2872 7.35202 33.7187 7.49409 34.1198 7.69457C34.337 7.82828 34.6283 8.17273 34.9959 8.72411L35.2959 9.39911C34.828 9.1485 34.3095 8.97441 33.7414 8.87411C33.1732 8.77389 32.8394 8.68156 32.7391 8.59798C32.3046 8.4142 32.2549 8.43192 32.5891 8.64911C32.6894 8.74941 33.0462 8.86132 33.6562 8.98661C34.266 9.11197 34.8539 9.35165 35.4221 9.70252L35.4732 9.85252C35.3562 9.98623 35.3136 10.1709 35.3471 10.4048L35.5209 10.9059C35.3705 10.7221 35.1644 10.8039 34.8971 11.1548C34.9973 10.9376 34.9724 10.7386 34.8221 10.5548C34.5881 10.2039 34.0198 9.82745 33.1175 9.42638L32.9675 9.70252C32.2323 9.46862 31.7706 9.03184 31.5869 8.39684C31.5701 8.19636 31.7476 8.08444 32.1153 8.05934C32.4828 8.03431 32.5397 7.92955 32.2891 7.74571C31.8045 7.57865 31.4032 7.2945 31.0857 6.89344C30.8685 6.60941 30.8685 6.41044 31.0857 6.29344L31.4607 6.19117L31.638 5.96617L31.413 5.09003C31.3461 4.6389 31.4705 4.31933 31.788 4.13548C31.8444 4.12708 31.8989 4.12393 31.955 4.12185ZM21.0528 5.04912C21.3393 5.04214 21.6249 5.06252 21.9323 5.09344C22.048 5.08406 22.0858 5.18052 22.1437 5.29457L22.2767 6.18093C22.3018 6.39145 22.3157 6.60106 22.6892 6.6173C23.0626 6.63354 23.656 6.70507 23.9744 6.77411C24.2928 6.84317 24.5085 6.71021 24.6153 6.48775C24.6153 6.48775 24.9204 5.8561 25.0721 5.54003C25.1082 5.46475 25.1748 5.43045 25.2323 5.44117C25.805 5.54773 26.1819 5.67113 26.6846 5.92866C26.7517 5.96306 26.799 6.04711 26.7766 6.19117L26.6301 7.16957C26.5965 7.39512 26.7139 7.54669 26.9471 7.64002C27.3751 7.81132 27.6429 7.95373 27.9255 8.12071C28.1906 8.27732 28.5364 8.43087 28.8323 8.11733L29.6335 7.26847H29.6812L29.5073 7.4696C29.4296 7.55948 29.3879 7.71476 29.3812 7.92301C29.3769 8.05665 29.633 8.21947 29.8482 8.25369C30.2686 8.32055 30.5445 8.29816 30.9323 8.28438L30.6221 9.20141L30.5335 9.45028C30.5034 9.59233 30.4322 9.73437 30.6835 9.87641L30.9869 10.1014L31.4369 10.5276L31.6891 10.7526C31.8442 10.9045 31.936 11.1422 32.6505 10.7458C32.5839 10.9633 32.5415 11.1824 32.5141 11.4072C32.4838 11.6563 32.5169 11.8393 32.6164 12.0583C32.4024 12.1627 32.274 12.2951 32.238 12.4844C32.1951 12.7102 32.2318 12.921 32.313 13.1356C32.4035 13.3746 32.5765 13.5725 32.7153 13.7867C32.5314 13.8369 32.4748 13.8924 32.388 14.0117C32.2826 14.1565 32.3062 14.4724 32.3709 14.6696C32.5128 15.1019 32.956 15.1138 33.2914 15.3174C33.729 15.5829 34.1476 15.8567 34.4334 16.2787C34.5905 16.5106 34.7087 16.7429 34.8664 16.9742C34.934 17.0733 35.1456 17.2633 35.2482 17.3253C35.3641 17.3954 35.5959 17.4992 35.5959 17.4992C35.5187 17.6537 35.4725 17.7942 35.4016 18.0378C35.3402 18.2489 35.3327 18.3104 35.3164 18.5287C35.3058 18.6708 35.3138 18.8052 35.3675 18.9378C35.4035 19.0265 35.5993 19.2174 35.5993 19.2174C35.6527 19.554 35.7192 19.941 35.7562 20.2605C35.7713 20.3916 35.9491 20.6179 36.1414 20.6424C36.4132 20.6769 36.5664 20.6927 37.0482 20.7753C37.1608 20.7946 37.2826 20.9108 37.3005 21.1605C37.3399 21.5201 37.3058 21.9527 37.3107 22.3128C37.3129 22.4738 37.3016 22.6018 37.1027 22.6367L36.2471 22.7867C35.9899 22.8177 35.8324 22.9537 35.8073 23.1071C35.7799 23.5865 35.7007 24.0555 35.6266 24.5287C35.5958 24.7252 35.6188 24.9475 35.8721 25.098C36.0884 25.2266 36.1347 25.2542 36.6357 25.456C36.6053 25.5651 36.6154 25.6826 36.6528 25.7969C36.4679 25.7285 36.36 25.8303 36.2778 25.9298C36.2138 25.6967 36.1775 25.5481 36.0357 25.4833C35.8693 25.4071 35.6905 25.4792 35.6232 25.5173C35.5145 25.579 35.3232 25.7423 35.3232 25.7423C35.2972 25.5293 35.2725 25.3153 35.255 25.1014C35.2491 24.9566 35.2225 24.8386 35.3573 24.5014C35.3872 24.4266 35.4776 24.3426 35.5209 24.2151C35.6802 23.7158 35.6119 23.3337 35.5857 22.8378C35.5751 22.6358 35.5494 22.4815 35.5175 22.2889C35.4933 22.1428 35.4644 22.0004 35.4016 21.8662C35.3634 21.7846 35.327 21.6786 35.2721 21.6071C35.1925 21.5038 35.107 21.3863 34.9823 21.348C34.7871 21.2881 34.5894 21.362 34.4471 21.5049C34.0054 21.1224 33.8981 21.1429 33.7414 21.1674C33.5408 21.1987 33.3828 21.3712 33.2266 21.5424C33.2538 21.2044 33.2363 20.905 33.2164 20.5299C33.1964 20.1547 33.1311 19.7709 33.0357 19.3128L26.1937 21.9651L32.6641 17.2708H24.6937L31.7914 15.3174C31.117 13.6821 29.7586 12.1525 28.5051 11.1787C27.2515 10.205 25.6186 9.31585 23.2414 9.22534L23.5994 16.3776L21.2096 9.22534L18.8096 16.4151L19.188 9.16738C17.1722 9.2193 14.9907 10.2529 13.6517 11.281C12.3127 12.3092 11.0763 14.0576 10.5631 15.3174L17.7767 17.2708H9.74146L16.2289 21.9718L9.44146 19.3025C9.31445 19.7854 9.25158 20.1022 9.20624 20.5298C8.48093 20.969 8.22143 21.9619 7.90056 23.0968C7.53045 23.5641 7.2297 23.9771 6.92556 24.44C6.8452 23.9863 6.79726 23.5323 6.76192 23.0729C6.74521 22.9393 6.67444 22.839 6.51306 22.8139L5.4392 22.6468C5.2091 22.6319 5.21426 22.4322 5.20738 22.2752C5.20186 21.849 5.1901 21.3613 5.19716 20.9252C5.1985 20.8422 5.27697 20.7635 5.37784 20.7377C5.66265 20.6648 6.14183 20.6322 6.44829 20.5536C6.67718 20.4949 6.71179 20.4218 6.76193 20.3048C6.78632 19.8639 6.85309 19.4294 6.94943 18.9991C6.94943 18.9991 7.10147 18.5597 6.93921 18.4298C6.72224 18.2561 6.40398 18.1366 6.40398 18.1366C6.75949 17.8876 7.03975 17.6703 7.45057 17.2707C7.86139 16.8711 8.27388 16.4147 8.70511 15.7434C9.13634 15.0721 9.73496 14.2348 10.1028 13.4252C10.4707 12.6156 10.9668 11.2529 10.8835 10.5275C11.1129 10.1466 11.1791 10.0669 11.4903 9.52865C11.8015 8.99038 12.3018 7.95123 12.6119 7.26844H12.8131L13.546 8.09684C13.8822 8.47824 14.0819 8.40456 14.4085 8.20934C14.759 7.99983 15.0968 7.83095 15.4551 7.68435C15.6034 7.62365 15.8087 7.4956 15.7585 7.11502L15.6426 6.23889C15.6257 6.11084 15.6765 6.04853 15.8165 5.9798C16.1808 5.80089 16.8276 5.54995 17.1085 5.4923C17.2347 5.46639 17.3423 5.53514 17.3812 5.61844L17.7971 6.5048C17.9089 6.75398 18.1095 6.86992 18.4585 6.79117C18.8077 6.71235 19.1829 6.64867 19.6551 6.6173C20.1272 6.58593 20.1123 6.42114 20.146 6.18094L20.2687 5.28435C20.2537 5.18651 20.3426 5.06911 20.5312 5.09344C20.709 5.06918 20.8809 5.05331 21.0528 5.04912L21.0528 5.04912ZM12.2471 5.68321C12.2826 5.68004 12.3141 5.68168 12.3392 5.68997C12.406 5.85711 12.4203 6.08623 12.3869 6.3786C12.3535 6.67106 12.1368 7.28722 11.7358 8.22292L10.8085 10.0263C10.1568 10.1099 9.53879 10.4118 8.95396 10.9297C9.25473 10.4118 9.61876 9.81861 10.0449 9.15019C10.471 8.48184 11.1334 7.48019 12.0358 6.14338C12.1861 5.89277 12.1914 5.8306 12.0494 5.95588C11.9074 6.08124 11.529 6.55907 10.9108 7.39451C10.2925 8.23004 9.46495 9.52639 8.42897 11.2809C8.14489 11.7153 7.44169 12.7916 6.32215 14.5127C6.2386 14.5963 5.98648 14.646 5.56875 14.6627L4.74375 17.0968C4.81058 17.197 5.02011 17.1616 5.37102 16.9945C5.20391 17.312 4.9518 17.4895 4.61761 17.5229L4.41648 17.3695L4.31761 16.9945L4.34148 16.7695L4.54261 16.7934L5.41875 14.5638L4.89375 13.9127L5.01988 13.5377C5.18697 13.8886 5.34335 14.0804 5.49375 14.1138C5.72767 13.6627 6.06684 13.0465 6.50965 12.2695C6.95245 11.4925 7.47627 10.7023 8.07783 9.90019L8.05056 9.70247C8.05055 9.58553 8.11085 9.57497 8.22783 9.67519L9.47896 7.87178L8.45283 9.65132C8.61991 9.83516 8.5453 9.95953 8.22783 10.0263C7.1584 11.4467 6.338 12.8602 5.76988 14.2638L6.02215 14.3388C6.17253 14.4057 6.3146 14.3388 6.44829 14.1377L7.97556 11.4309L9.43124 8.72406C10.1163 7.50429 10.9013 6.55238 11.7869 5.86724C11.9874 5.75449 12.1406 5.69257 12.2471 5.68315V5.68321ZM15.3699 5.9423V6.0173L15.5199 7.22071C15.5365 7.33771 15.4974 7.41947 15.3971 7.46957C14.9794 7.6367 14.5532 7.84623 14.1187 8.09684C14.0352 8.1303 13.9571 8.12314 13.8903 8.07298L13.1165 7.19344L12.888 6.99571L13.1403 6.89344C13.9758 6.55928 14.7182 6.24311 15.3699 5.9423ZM30.1585 7.37071L30.8369 7.44571L31.263 7.79684C31.146 7.8303 31.0608 7.90491 31.0107 8.02184C30.075 8.03858 29.6416 7.97113 29.7085 7.82071C29.6583 7.72049 29.8075 7.57126 30.1585 7.37071ZM5.42556 7.98775C5.48118 7.98229 5.51981 8.01033 5.54488 8.07298C5.61171 8.7414 5.60643 9.38957 5.53125 10.0162C5.45604 10.6428 5.29438 11.3373 5.04375 12.1059C4.39206 14.2782 4.00128 15.7415 3.86761 16.4934C3.61696 17.3791 3.33997 18.5333 3.03921 19.9536C2.90552 19.2686 2.98542 17.8249 3.27784 15.6275C3.57025 13.4302 3.94144 11.8656 4.39261 10.9298C4.60983 10.4452 4.60268 10.3706 4.36875 10.7048C3.34945 12.4426 2.7563 15.0071 2.58921 18.3991C2.55578 19.5855 2.61983 20.4432 2.78693 20.9695C2.95403 21.4959 3.14584 21.7996 3.36307 21.8832C3.48003 21.95 3.60779 21.9429 3.74148 21.8593C3.84173 21.2244 3.90919 20.7077 3.94261 20.315C3.97603 19.9223 4.02049 19.4641 4.07898 18.9377C4.13745 18.4114 4.24222 17.9727 4.39261 17.6218L4.49148 17.7207C4.32437 18.4893 4.23732 19.0256 4.22898 19.3264C4.22061 19.6272 4.20103 19.929 4.16761 20.2298C4.13419 20.5306 4.09875 21.106 4.06534 21.9582C4.26585 21.2731 4.48594 20.6196 4.71988 20.0014L5.49375 17.748L6.49943 15.365C7.05083 14.2956 7.81808 13.0773 8.80396 11.7071C9.38879 11.022 9.90733 10.6527 10.3585 10.6025C10.4755 10.7696 10.4755 11.1141 10.3585 11.6321C10.2415 12.1501 10.0392 12.6935 9.7551 13.2616C8.66896 15.2668 7.61757 16.7195 6.59829 17.6218L8.32669 14.8161L9.1551 13.3093C9.47257 12.7412 9.52947 12.5423 9.32896 12.7093C7.64128 15.2492 6.63247 16.844 6.29829 17.4957C5.96409 18.1474 5.63736 18.7583 5.31988 19.3264C5.00239 19.8945 4.79286 20.3384 4.69261 20.6559C4.59235 20.9734 4.38282 21.5417 4.06534 22.3604C4.06533 22.5109 4.16823 22.9442 4.36875 23.6627C4.56926 24.3812 4.73807 24.8022 4.88011 24.9275C5.02214 25.0528 5.03457 25.1896 4.91761 25.34C4.86747 25.4737 4.90291 25.7258 5.01988 26.0934C5.10342 26.4944 5.29524 27.045 5.59602 27.7468L5.52102 27.9991C5.20353 27.2973 4.91938 26.5266 4.66875 25.6911C4.66874 25.3569 4.63143 25.1508 4.55625 25.0673C4.48105 24.9837 4.40644 24.8292 4.33125 24.6036C4.25605 24.3781 4.14072 24.0408 3.99034 23.5979C3.83995 23.1552 3.73331 22.7591 3.66648 22.4082C3.21531 22.2077 2.88858 21.8719 2.68807 21.3957C2.48755 20.9195 2.30102 20.2962 2.12557 19.5275C1.95012 18.7589 1.87738 17.839 1.9108 16.7695C1.99434 15.4996 2.179 14.2636 2.46307 13.0605C2.88081 11.3895 3.73323 9.80188 5.01988 8.29798C5.19742 8.09958 5.33288 7.99689 5.42556 7.98775ZM36.5743 8.02184C36.6495 8.01344 36.749 8.03838 36.8743 8.09684C37.125 8.21385 37.5263 8.65777 38.0778 9.42638C38.3451 9.12564 38.6043 9.23229 38.855 9.75025C39.1558 10.2181 39.273 10.7793 39.2062 11.4309C39.8244 11.0968 40.0411 11.3206 39.8573 12.1059C40.1246 12.6574 40.2897 13.0889 40.3482 13.398C40.4066 13.7071 40.3569 13.9965 40.1982 14.2639C40.0394 14.5313 39.9614 14.7355 39.9698 14.8775C39.9781 15.0196 40.0384 15.0143 40.1471 14.8639C40.2556 14.7135 40.4776 14.5892 40.8118 14.4889C41.029 14.9568 41.1213 15.2658 41.088 15.4161C41.0879 15.6 40.9726 15.7989 40.7471 16.0161C40.5214 16.2334 40.3918 16.4927 40.3584 16.7934C40.3584 16.9438 40.4364 17.0218 40.5868 17.0218L41.0368 16.8957C41.2707 16.8623 41.2779 17.047 41.0607 17.448C40.8267 17.8824 40.6579 18.2483 40.5493 18.5491C40.4407 18.8499 40.3857 19.0914 40.3857 19.2752C40.3689 19.6596 40.3015 19.8868 40.1846 19.9536C40.2179 19.4691 40.2055 18.963 40.1471 18.4366C40.0885 17.9103 39.9838 17.3224 39.8334 16.6707C39.9671 16.5537 40.1517 16.1596 40.3857 15.4911C40.5026 15.157 40.4778 15.1144 40.3107 15.365C40.1269 15.8663 39.9422 16.1753 39.7584 16.2923C39.5746 15.674 39.3756 14.9245 39.1584 14.0389C39.409 13.6212 39.5654 13.0921 39.6323 12.4571C39.649 11.9224 39.6169 11.8832 39.5334 12.3343C39.4331 12.9693 39.2485 13.4596 38.9812 13.8105C38.7639 13.1087 38.5295 12.4515 38.2789 11.8332C38.3624 11.4823 38.3978 11.0704 38.3812 10.6025C38.3644 10.1347 38.3218 10.1204 38.255 10.5548C38.255 10.9057 38.2124 11.2042 38.1289 11.4548L37.5766 10.0537L37.2255 9.24911C37.1085 8.98179 37.0693 8.98179 37.1028 9.24911L37.4266 10.3025C37.1759 10.0185 36.9415 9.80896 36.7243 9.67525C36.5071 9.5416 36.4679 9.55216 36.6016 9.70252C36.9692 10.02 37.2854 10.3611 37.5528 10.7286C37.7699 11.2634 37.9866 11.814 38.2039 12.3821C37.5689 11.8474 37.125 11.5489 36.8743 11.4821C36.5568 11.3651 36.5568 11.422 36.8743 11.6559C37.3255 11.94 37.8617 12.4408 38.48 13.1593C38.6805 13.7442 38.8723 14.3125 39.0562 14.8639C38.7386 14.6801 38.355 14.3142 37.9039 13.7627C37.7033 13.5622 37.6962 13.5943 37.88 13.8616C38.2476 14.413 38.6738 14.8996 39.1584 15.3173L39.5334 16.8445C39.1491 16.4603 38.6482 16.0695 38.03 15.6684C37.7626 15.5013 37.7449 15.5334 37.9789 15.7673C38.5136 16.1516 39.0747 16.7199 39.6596 17.4718C39.8266 17.9397 39.9012 18.7993 39.8846 20.0525C39.8678 20.37 39.6334 20.6044 39.1823 20.7548L39.08 21.9582L38.4562 21.982C38.1219 21.5142 37.8645 21.1502 37.6891 20.8911C37.5136 20.6322 37.2649 20.2361 36.9391 19.7014C36.6132 19.1667 36.3736 18.7333 36.2232 18.3991C36.0728 18.0649 36.0479 17.7205 36.1482 17.3695C36.2484 17.0187 36.3336 16.7522 36.4005 16.5684C36.4673 16.3846 36.4567 16.3526 36.3732 16.4695C36.1727 16.8205 36.0306 17.1615 35.9471 17.4957L35.4459 16.0673C35.496 15.4992 35.7979 14.7711 36.3493 13.8855C36.5164 13.5847 36.4987 13.5598 36.2982 13.8105C35.7969 14.4789 35.4736 15.1572 35.3232 15.8423L34.5459 14.1139C34.5292 13.7964 34.7282 13.1927 35.1459 12.3071C35.3631 11.8392 35.3134 11.8569 34.9959 12.3582C34.7285 12.8595 34.5367 13.3283 34.4198 13.7627C34.1858 12.8103 33.9586 12.0005 33.7414 11.3321L33.5675 11.2809L33.6664 11.5571C33.8 12.3926 33.9847 13.1172 34.2187 13.7355C33.9012 13.4514 33.5424 13.2204 33.1414 13.0366C32.9241 12.9197 32.9241 12.9445 33.1414 13.1116C33.6259 13.3957 33.9919 13.6798 34.2425 13.9639C34.443 14.4318 34.6277 14.858 34.7948 15.2423C34.494 15.0251 33.986 14.773 33.2675 14.4889C33.0001 14.4388 33.0001 14.4708 33.2675 14.5877C34.1698 14.9554 34.7275 15.3175 34.9448 15.6684L35.4459 16.9945C35.2621 16.9946 35.0205 16.721 34.7198 16.1695C34.4691 15.7017 33.8439 15.2506 32.8414 14.8161C32.6409 14.7326 32.5485 14.5551 32.5653 14.2877C32.5987 14.104 32.7905 14.0293 33.1414 14.0627C33.0411 13.7787 32.9239 13.5515 32.7903 13.3843L32.5891 13.0843C32.3217 12.5329 32.4815 12.2594 33.0664 12.2593C32.8491 11.9252 32.7745 11.6659 32.8414 11.4821C32.8247 11.1646 32.8993 10.8556 33.0664 10.5548C33.1666 10.3543 33.2412 10.1519 33.2914 9.95138C33.6088 10.1352 33.8983 10.2897 34.1573 10.415C34.4163 10.5404 34.5531 10.7695 34.5698 11.1036L34.4437 11.8809C34.4938 12.0313 34.6287 11.9816 34.8459 11.7309C35.0631 11.4302 35.2372 11.2561 35.3709 11.2059C35.5547 11.2895 35.7322 11.4387 35.8993 11.6559C36.0664 11.9734 36.0061 12.5594 35.7221 13.4116L35.4459 14.1139C36.014 13.362 36.4757 13.0032 36.8266 13.0366C36.9435 13.1202 36.9809 13.289 36.9391 13.548C36.8973 13.807 36.8973 14.0787 36.9391 14.3627C36.9809 14.6468 36.8832 14.8884 36.6493 15.0889C36.4154 15.2894 36.259 15.6161 36.1755 16.0673C36.7102 15.6663 36.9268 15.7409 36.8266 16.2923L36.5266 17.3695C36.443 17.8876 36.5248 18.1325 36.7755 18.0991C37.0261 18.0657 37.1806 18.0977 37.2391 18.198C37.2976 18.2982 37.31 18.4723 37.2766 18.723C37.1262 19.0739 37.0587 19.3064 37.0755 19.415C37.0922 19.5236 37.14 19.616 37.2153 19.6911C37.2904 19.7664 37.4521 19.7486 37.7028 19.64C37.9534 19.5314 38.0777 19.606 38.0778 19.865C38.0777 20.124 38.083 20.3761 38.0914 20.6184C38.0997 20.8607 38.1796 21.097 38.33 21.3309C38.4469 21.498 38.5962 21.6081 38.78 21.6582L39.005 21.382C38.6708 21.3988 38.5163 21.1821 38.5414 20.7309C38.5664 20.2798 38.5643 19.9282 38.5312 19.6775C38.3974 19.36 38.2625 19.1825 38.1289 19.1491C37.9952 19.1157 37.6862 18.281 37.2016 16.6434L37.7266 16.6707C38.1109 18.0743 38.4199 18.8291 38.6539 18.9377C38.8878 19.0464 38.9978 19.1707 38.9812 19.3127C38.9644 19.4548 39.007 19.7619 39.1073 20.2298C39.408 20.1462 39.5821 19.8693 39.6323 19.4014C39.7158 18.9669 39.5914 18.6331 39.2573 18.3991C38.9064 18.1986 38.704 18.0139 38.6539 17.8468C38.5536 17.5628 38.6636 17.3887 38.9812 17.3218C39.1649 17.2216 38.721 16.8202 37.6516 16.1184C37.1002 15.7341 36.9332 15.3897 37.1505 15.0889C37.234 14.9385 37.3885 14.9438 37.6141 15.1025C37.8397 15.2613 37.987 15.2986 38.0539 15.215C38.1708 14.9811 38.0785 14.8194 37.7778 14.7275C37.4769 14.6356 37.3349 14.5309 37.3516 14.4139C37.3349 13.8959 37.3454 13.5443 37.3789 13.3605C37.4123 13.1767 37.3946 12.96 37.3278 12.7093C37.1439 12.442 36.7923 12.4597 36.2744 12.7605C36.3913 12.4764 36.4214 12.1994 36.363 11.9321C36.3045 11.6647 36.1748 11.4055 35.9744 11.1548L35.7221 10.3775C35.6552 10.1102 35.8078 9.92553 36.1755 9.82525C36.0585 9.30729 36.0585 8.94137 36.1755 8.72411C36.2924 8.49021 36.3742 8.29841 36.4244 8.14798C36.4494 8.0728 36.4992 8.03019 36.5744 8.02184H36.5743ZM31.1096 8.70025C31.1764 8.85068 31.3592 9.08166 31.6516 9.39911C31.944 9.71663 32.3224 9.96875 32.7903 10.1525L32.163 10.6775C32.0627 10.7277 31.9704 10.7134 31.8869 10.6298C31.5861 10.3123 31.2273 10.0033 30.8096 9.70252C30.726 9.66913 30.7117 9.60168 30.7619 9.50138L31.1096 8.70025ZM18.9289 9.42298L18.5198 17.2707L10.8903 15.2457C11.3763 14.1342 12.662 12.2938 13.7949 11.4684C14.9278 10.6431 17.2425 9.52883 18.9289 9.42298ZM23.4903 9.45025C25.5583 9.52554 27.2057 10.4392 28.4096 11.3593C29.7565 12.4863 30.8923 13.8364 31.5289 15.2355L23.9028 17.257L23.4903 9.45025ZM21.2096 10.9809L23.4903 17.823H30.9357L24.8198 22.2343L27.1005 29.3252L21.2096 24.8661L15.3221 29.3252L17.6028 22.2343L11.4869 17.823H18.9289L21.2096 10.9809ZM4.84261 14.3389L5.04375 14.5877L4.36875 16.3945C4.48571 15.6426 4.64209 14.9572 4.84261 14.3389ZM6.32215 14.8639C5.97124 15.5156 5.70482 16.1016 5.52102 16.6195L5.31988 16.5957L5.84488 14.9661L6.32215 14.8639ZM5.19375 17.598L4.69261 18.9514L4.34148 20.1275L4.46761 19.1252L4.64148 18.3991L4.79488 17.673L5.19375 17.598ZM35.8243 18.0718C35.8911 18.3893 36.0227 18.6912 36.2232 18.9752C36.1396 18.9752 36.0454 18.9557 35.9369 18.9139C35.8282 18.8721 35.7555 18.8047 35.7221 18.7127C35.6886 18.6208 35.7241 18.406 35.8243 18.0718ZM3.84034 18.2491C3.67324 19.5859 3.53117 20.6301 3.41421 21.382L3.31534 21.1809C3.21508 21.0305 3.38917 20.0537 3.84034 18.2491ZM6.17215 18.348L6.62215 18.5491C6.7224 18.5992 6.74727 18.6844 6.69715 18.8014C6.59688 19.2525 6.53999 19.7179 6.52329 20.2025C6.52328 20.3028 6.47354 20.3631 6.37329 20.3798L5.19375 20.5536C5.06006 20.5871 4.9926 20.6723 4.99261 20.8059C4.95918 21.3908 4.95918 21.9734 4.99261 22.5582C4.9926 22.7253 5.07062 22.8176 5.22102 22.8343L6.37329 23.0116C6.47354 23.0283 6.52328 23.0852 6.52329 23.1854C6.5567 23.6868 6.61359 24.1555 6.69715 24.59C6.71385 24.707 6.67467 24.7887 6.57442 24.8389L5.49375 25.3673C5.34335 25.4174 5.29361 25.5346 5.34375 25.7184C5.46071 26.2531 5.62049 26.7468 5.82102 27.1979L5.79715 27.2968C5.64676 27.0629 5.50469 26.7237 5.37102 26.2809C5.23733 25.8381 5.19475 25.5415 5.24488 25.3911C5.37855 25.1572 5.33596 24.9405 5.11875 24.74C4.95164 24.5729 4.73496 23.82 4.46761 22.4832C4.48431 22.1323 4.62639 21.6066 4.89375 20.9048C5.16109 20.203 5.58731 19.3506 6.17215 18.348ZM38.705 18.3752L39.1073 18.7741C38.8399 18.6906 38.705 18.5591 38.705 18.3752ZM35.8516 19.2514L36.3459 19.34C36.5962 19.7578 36.8074 20.0955 37.1028 20.5298L36.1243 20.3798C36.0354 20.3661 35.9913 20.2789 35.9743 20.1786C35.9376 19.9612 35.8739 19.3451 35.8516 19.2514ZM32.8312 19.6741C32.9221 20.2277 32.954 20.6634 32.9403 21.1809C32.9234 21.8166 32.8701 22.443 32.78 23.0695C32.5345 22.9487 32.3072 22.916 32.1153 23.1343C32.0446 23.2147 31.9963 23.3432 32.013 23.5604L32.0641 23.7889C32.1142 23.956 32.1711 24.098 32.238 24.215C32.2904 24.3058 32.3414 24.3972 32.388 24.4911C32.0795 25.4018 31.7525 26.2451 31.4369 26.8195C30.9416 27.7208 30.4773 28.3594 29.7835 29.1002L25.471 22.4832L32.8312 19.6741ZM9.60851 19.6843L16.9483 22.4832L12.6392 29.1002C11.5944 28.1486 10.8483 26.9112 10.379 25.6946C10.5527 24.9621 10.6655 24.5377 10.7574 23.39C10.7791 23.1189 10.7191 22.8633 10.6551 22.7457C10.5589 22.5688 10.4219 22.5694 10.3551 22.6196C10.4294 22.5068 10.472 22.4054 10.5324 22.2582C10.6207 22.0429 10.6159 21.8989 10.5324 21.8321C10.3798 21.7298 10.1079 21.7606 9.6426 22.0127C9.57432 21.6506 9.53156 21.3438 9.4176 20.9934C9.43759 20.5113 9.49093 20.1034 9.60851 19.6843ZM9.1551 21.0071C9.33889 21.4917 9.48812 22.3886 9.6051 23.7002C9.72205 25.012 9.72205 26.193 9.6051 27.2457C9.49445 28.5996 9.13898 29.5043 8.60283 30.6548C8.60282 29.6188 8.61525 28.7769 8.64033 28.1252C8.66538 27.4736 8.69025 26.6087 8.71533 25.5309C8.74038 24.4532 8.81312 23.2295 8.9301 21.8593C8.99693 21.5252 8.97921 21.4471 8.87896 21.6309C8.6116 23.018 8.45181 24.7973 8.40169 26.9696L8.37783 28.398L8.32669 30.3548L8.00283 29.9798C7.76888 28.8101 7.66599 27.5812 7.69942 26.2946C7.74954 25.3421 7.90217 24.3156 8.15283 23.2127C8.50372 21.8259 8.8376 21.0906 9.1551 21.0071V21.0071ZM41.2823 21.2662C41.429 21.2547 41.5637 21.2944 41.688 21.3821C41.8383 21.6327 41.9058 21.8796 41.8891 22.1218C41.8724 22.3641 41.7872 22.6359 41.6368 22.9366C41.9543 22.9366 42.1212 23.061 42.138 23.3116C42.0042 23.8798 41.7378 24.2882 41.3368 24.5389C41.7044 24.6057 41.9015 24.7229 41.9266 24.89C41.9516 25.0571 41.9143 25.1939 41.8141 25.3025C41.7138 25.4111 41.522 25.5088 41.238 25.5923L40.9618 25.0911C40.9785 24.6901 40.8436 24.3065 40.5596 23.9389C40.6765 23.8386 40.8611 23.7391 41.1118 23.6389C41.2956 23.5553 41.2636 23.5271 41.013 23.5605C40.7456 23.6106 40.536 23.6781 40.3857 23.7616H40.3346C40.4849 23.2269 40.7265 22.7189 41.0607 22.2343C41.1442 22.0171 41.0945 22.0243 40.9107 22.2582C40.6266 22.6593 40.3779 23.0855 40.1607 23.5366C40.0604 23.4364 39.9824 23.2517 39.9323 22.9843C39.8654 22.6669 39.8157 22.6597 39.7823 22.9605C39.8324 23.3448 39.907 23.6218 40.0073 23.7889C39.6396 24.357 39.3483 24.5809 39.1312 24.4639C39.2648 23.6618 39.4423 22.82 39.6596 21.9343C40.0438 21.55 40.3777 21.4223 40.6618 21.5559C40.8874 21.3774 41.0937 21.2808 41.2823 21.2662ZM33.8709 21.5389C33.8864 21.5372 33.9032 21.5375 33.9187 21.5389C33.9599 21.5426 34.003 21.5581 34.0448 21.5832C34.2119 21.6835 34.3185 21.7901 34.3687 21.9071C34.4188 22.024 34.4934 22.0045 34.5937 21.8457C34.6939 21.687 34.7791 21.632 34.8459 21.6821C34.9127 21.7322 34.9821 21.8317 35.0573 21.9821C35.1325 22.1325 35.1875 22.2922 35.2209 22.4593C35.2544 22.6264 35.2845 22.9302 35.3096 23.373C35.3346 23.8158 35.2796 24.1124 35.1459 24.2627C35.0122 24.4132 34.9381 24.5979 34.9448 24.815C34.9715 25.6842 35.0456 26.1154 35.1459 26.107C35.2462 26.0988 35.3686 26.0313 35.5107 25.9059C35.6527 25.7806 35.7771 25.7327 35.8857 25.7661C35.9943 25.7996 36.0565 26.0445 36.0732 26.4957C36.0899 26.9469 36.1325 26.9913 36.1993 26.632C36.2661 26.2728 36.3905 26.0934 36.5743 26.0934C36.7581 26.0934 36.7935 26.5765 36.6766 27.5457C36.0249 28.1305 35.5561 28.6171 35.2721 29.0014C35.1718 28.5836 35.1665 28.2923 35.2584 28.1252C35.3503 27.9582 35.4355 27.7682 35.5107 27.5593C35.5859 27.3505 35.648 27.1639 35.6982 26.9968C35.8319 26.5958 35.807 26.5604 35.6232 26.8946C35.5229 27.0951 35.4359 27.2726 35.3607 27.423C35.2855 27.5734 35.195 27.7226 35.0948 27.873C35.0613 27.6056 34.9547 27.1297 34.7709 26.4446C34.6205 25.9767 34.5779 25.9839 34.6448 26.4684C34.7784 27.2538 34.8708 28.0139 34.9209 28.7491C34.6368 28.4483 34.3474 28.1891 34.055 27.9718C33.7626 27.7546 33.5086 27.5236 33.2914 27.273C33.1076 27.156 33.0755 27.1703 33.1925 27.3207C33.393 27.5881 33.6896 27.9024 34.0823 28.2616C34.4749 28.6209 34.7112 28.8606 34.7948 28.9775C34.8783 29.0945 34.9281 29.194 34.9448 29.2775C34.7944 29.478 34.6203 29.6876 34.4198 29.9048C34.3028 29.838 34.2353 29.7226 34.2187 29.5639C34.2019 29.4051 34.1469 29.2879 34.055 29.2127C33.9631 29.1375 33.6842 28.9084 33.2164 28.5241C32.7986 28.1565 32.6637 27.8226 32.8141 27.5218C32.6971 27.3715 32.5924 27.1974 32.5005 26.9968C32.4086 26.7963 32.4316 26.5992 32.5653 26.4071C32.6989 26.2149 33.0079 26.302 33.4925 26.6696C33.576 26.3855 33.576 26.1191 33.4925 25.8684C33.409 25.6178 33.3095 25.3657 33.1925 25.115C32.9753 24.714 32.7657 24.373 32.5653 24.0889C32.3814 23.7046 32.3388 23.4879 32.4391 23.4377C32.5394 23.3876 32.6991 23.4551 32.9164 23.6389C33.3341 23.1877 33.6077 23.0581 33.7414 23.2502C33.875 23.4424 33.9851 23.7639 34.0687 24.215C34.1522 24.6662 34.1593 25.1316 34.0925 25.6161L33.9937 25.7184L34.0925 25.8173C34.1259 25.9176 34.0867 26.294 33.9698 26.9457C33.9698 27.0794 34.0089 27.2143 34.0925 27.348C34.0591 27.1475 34.0519 26.9948 34.0687 26.8946C34.0853 26.811 34.1404 26.6173 34.2323 26.3082C34.3242 25.9991 34.3686 25.8216 34.3687 25.7798C34.3686 25.738 34.3012 25.7079 34.1675 25.6911C34.3179 25.641 34.4155 25.5717 34.4573 25.4798C34.499 25.3879 34.5062 25.2956 34.4812 25.2036C34.4561 25.1118 34.4418 24.8472 34.4334 24.4127C34.4251 23.9783 34.3825 23.6497 34.3073 23.4241C34.2321 23.1985 34.1842 23.0245 34.1675 22.8991C34.1508 22.7738 34.0513 22.7011 33.8675 22.6843C33.6837 22.6677 33.4244 22.8523 33.0903 23.2366C33.2406 22.5181 33.3951 22.0369 33.5539 21.7946C33.6581 21.6356 33.7631 21.5503 33.8709 21.5389ZM1.25626 21.9275C1.27401 21.9275 1.292 21.9301 1.3108 21.9343C1.41106 21.9343 1.64017 22.1705 1.99944 22.6467C2.35869 23.123 2.84708 24.1921 3.46534 25.8547C4.08359 27.5173 4.46194 28.6094 4.60398 29.1274C4.746 29.6454 4.88807 30.0965 5.03011 30.4808C5.17213 30.8652 5.34436 31.2559 5.54488 31.657C5.84565 32.2585 6.14751 32.6704 6.44829 32.8876C6.84931 33.1717 7.14061 33.2215 7.32442 33.0376L6.64943 31.657C6.53245 31.4063 6.35494 31.314 6.12102 31.3808C5.73669 31.3975 5.58031 31.1737 5.64715 30.7058C5.68056 30.4051 5.7872 29.8865 5.97102 29.1513C6.33862 27.9148 6.86432 26.6859 7.54942 25.4661C7.46586 26.0008 7.42668 26.4519 7.42669 26.8195C6.80843 28.2064 6.35734 29.3252 6.07329 30.1774C5.92289 30.7957 5.93005 31.0975 6.09715 31.0808L6.29829 30.982L6.14829 30.6308L6.24715 30.3547L6.54715 30.8797L6.72442 30.757L6.87442 30.982L6.72442 31.207L7.85283 32.8365L8.12556 32.6115L8.32669 32.8365C7.99249 33.1707 7.86098 33.3874 7.92783 33.4876C8.22859 34.0391 8.50217 34.483 8.75283 34.8172C9.25411 35.5524 9.6626 35.7585 9.9801 35.441C10.0803 35.3575 10.2081 35.3752 10.3585 35.4922C10.5089 35.6091 10.6758 35.8613 10.8596 36.2456L10.8324 35.6694L9.9051 34.7899L9.3801 33.7365C8.94564 33.1182 8.63662 32.6423 8.45283 32.3081C8.26901 31.9739 8.03989 31.576 7.76419 31.1081C7.48847 30.6402 7.14931 30.1111 6.74829 29.5263L6.82329 29.2501L7.62442 30.2285C8.34293 31.1476 8.84903 31.8455 9.14146 32.3217C9.43387 32.798 9.60609 32.9099 9.65624 32.6592L9.80623 32.1854L10.0312 32.3081L9.88123 33.2865L9.8301 33.5865C9.81338 33.8204 9.86125 33.9606 9.96987 34.0024C10.0785 34.0442 10.1727 34.1987 10.2562 34.466C10.3063 34.6331 10.5709 34.9795 11.0471 35.5058C11.5234 36.0322 12.0242 36.4727 12.5505 36.8319C13.0769 37.1912 13.5103 37.4859 13.8528 37.7115C14.1953 37.9371 14.3604 38.159 14.3437 38.3763L14.8176 38.4751L14.6949 37.8751L14.9949 37.8001C15.1452 37.9004 15.2696 38.0816 15.3699 38.349C15.8043 38.6832 16.1808 38.953 16.4983 39.1535L15.3971 39.3513L13.5153 38.2263L11.7869 37.0706L11.4596 36.6444C11.3594 36.5275 11.2226 36.5026 11.0471 36.5694C10.8717 36.6363 10.7349 36.5368 10.6346 36.2694C10.1835 36.5368 9.72182 36.4373 9.25396 35.9694L8.42897 34.9672L7.65169 33.6376L7.37556 33.4365C6.95781 33.7039 6.42155 33.5226 5.76988 32.8876C5.53594 32.6704 5.03511 31.8074 4.26648 30.3035C3.24718 28.3652 2.55454 26.9054 2.18694 25.9195C1.91958 25.1007 1.74548 24.5822 1.66194 24.3649C1.57839 24.1477 1.54295 24.1424 1.55967 24.3513C1.57637 24.5602 1.70072 25.029 1.93466 25.7558C2.16859 26.4827 2.60537 27.5466 3.24034 28.9501C3.79175 30.0864 4.33517 31.1235 4.86988 32.0592C3.63336 30.7225 2.73835 29.4687 2.18694 28.299C1.63551 27.1461 1.2662 26.077 1.08239 25.0911C0.998841 24.7402 0.9491 24.2021 0.932394 23.4752C0.91568 22.7483 0.926242 22.3417 0.959667 22.2581C1.03277 22.0388 1.13198 21.9293 1.25626 21.9274V21.9275ZM10.2051 22.0229C10.3568 22.012 10.3732 22.1139 10.2562 22.3332L9.78237 23.0354C9.74894 22.7514 9.73022 22.503 9.6801 22.3025C9.84718 22.1855 9.98311 22.1 10.1335 22.0332C10.1607 22.0269 10.1834 22.0244 10.2051 22.0229V22.0229ZM37.5766 22.0332L38.0539 22.8105C37.9703 23.6794 37.8211 24.4715 37.6039 25.19C37.3866 25.0229 37.1025 25.0335 36.7516 25.2173L35.9743 24.8389C35.8741 24.7887 35.8271 24.7063 35.8482 24.59C35.9273 24.1547 35.9873 23.7601 36.0153 23.257C36.0209 23.1556 36.0754 23.0297 36.1755 23.0116L37.2766 22.8139C37.427 22.7805 37.5087 22.681 37.5255 22.5139L37.5766 22.0332ZM39.005 22.3843C38.771 23.6543 38.5472 24.7234 38.33 25.5923L37.9789 25.3911C38.2796 24.1881 38.4643 23.2041 38.5312 22.4355C38.6314 22.4021 38.7878 22.3844 39.005 22.3843ZM10.3756 22.8616C10.4868 22.8544 10.5315 23.0305 10.5085 23.3866C10.4584 24.1386 10.2447 25.5313 9.95282 26.373C9.9361 25.4539 9.91675 24.9292 9.88123 24.3377L10.1062 23.7139C10.1229 23.4967 10.0803 23.4861 9.9801 23.6866L9.85055 23.9184L9.80623 23.4616L10.1812 22.9843C10.2596 22.906 10.325 22.8649 10.3756 22.8616ZM7.82556 23.5877C7.66168 24.2841 7.5894 24.8623 7.54942 25.115C6.81419 26.385 6.2459 27.6493 5.84488 28.9025C5.74462 29.2868 5.66285 29.7451 5.59602 30.2798C5.54588 29.5947 5.6578 28.6375 5.93352 27.4093C6.20922 26.1812 6.83968 24.9078 7.82556 23.5877ZM40.1368 24.348C40.2809 24.3417 40.3968 24.5899 40.4846 25.0911C40.4344 25.9768 40.6511 26.3958 41.1357 26.3457C41.2192 26.3958 41.2316 26.6268 41.1732 27.0446C41.1147 27.4623 40.9779 27.8245 40.7607 28.1252C40.0756 28.9106 39.7914 29.376 39.9084 29.5264C40.0922 29.8439 40.0602 30.2026 39.8096 30.6036C39.4419 31.0548 38.9554 31.559 38.3539 32.1105C38.5209 32.4446 38.3966 32.7288 37.9789 32.9627C37.4943 33.2301 36.958 33.4611 36.3732 33.6616C37.4593 32.8428 38.1305 31.9655 38.3812 31.0298C38.732 30.7123 39.041 30.5062 39.3084 30.4059C39.5423 30.2555 39.5815 30.1881 39.4312 30.2048C39.1303 30.3218 38.8142 30.5064 38.48 30.757C38.7975 30.1221 39.0247 29.4366 39.1584 28.7014C39.8101 28.0664 40.2186 27.5656 40.3857 27.198C40.6196 26.8471 40.6267 26.7691 40.4096 26.9696C40.1589 27.3873 39.7752 27.8312 39.2573 28.2991C39.4912 27.5806 39.7007 26.7779 39.8846 25.8923C39.9681 25.3743 39.9432 25.282 39.8096 25.6161L39.5573 26.4957C39.4403 26.1448 39.3088 25.875 39.1584 25.6911L39.4823 26.7446C39.4154 27.1623 39.2556 27.7555 39.005 28.5241C38.771 27.8557 38.462 27.2554 38.0778 26.7207C37.7268 26.2863 37.6699 26.2791 37.9039 26.6968C38.2882 27.2483 38.6043 27.9729 38.855 28.8752C38.6545 29.6773 38.4201 30.3451 38.1528 30.8798C37.9522 30.579 37.7461 30.3729 37.5289 30.2559C37.3618 30.1724 37.3618 30.2221 37.5289 30.4059C37.7461 30.6231 37.9202 30.8398 38.0539 31.057C37.8533 31.5416 37.5888 31.9678 37.263 32.3355C36.9371 32.7031 36.6157 33.0121 36.2982 33.2627C36.6992 32.6445 36.8341 31.959 36.7005 31.207C36.7004 31.0734 36.8052 30.9633 37.0141 30.8798C37.2229 30.7962 37.2923 30.7039 37.2255 30.6036C37.0416 30.236 36.9527 29.9447 36.9528 29.7275C37.0864 29.6607 37.2854 29.6607 37.5528 29.7275C37.7699 29.5771 37.7504 29.3657 37.4914 29.09C37.2324 28.8143 37.0673 28.4148 37.0005 27.8968C37.0004 27.5961 37.2028 27.4894 37.6039 27.573C37.7877 27.5563 37.802 27.3396 37.6516 26.9218L37.2255 26.3457C36.9247 25.6773 37.0524 25.4324 37.6039 25.6161L38.255 26.0184C38.6894 26.1855 38.899 25.8942 38.8823 25.1423C38.8823 24.9752 39.0119 24.9379 39.2709 25.0298C39.5299 25.1217 39.7662 24.9246 39.9834 24.44C40.0377 24.3815 40.0888 24.35 40.1368 24.348ZM6.57442 25.0604C6.23822 25.6621 6.03193 26.1092 5.85852 26.7343C5.72879 26.4011 5.61953 26.0266 5.57215 25.732C5.55544 25.6485 5.5678 25.5528 5.64715 25.5173L6.57442 25.0604ZM21.2096 25.5957L26.1732 31.732C24.848 32.4859 22.823 32.8678 21.2573 32.84C19.6917 32.8122 17.7457 32.4695 16.2221 31.732L21.2096 25.5957ZM33.2056 26.1559C32.9764 26.0837 32.7694 26.0346 32.5869 26.0975C32.4373 26.149 32.2773 26.2994 32.238 26.3934C32.1823 26.5264 32.1458 26.6763 32.163 26.8195C32.1865 27.0151 32.2511 27.2475 32.3364 27.3728C32.3596 27.407 32.4391 27.5457 32.4391 27.5457C32.3776 27.838 32.4778 28.1347 32.6641 28.3502C32.9732 28.7078 33.3769 29.0301 33.7039 29.2945C33.6323 29.581 33.58 30.0476 33.5675 30.3036C33.555 30.5596 33.5924 30.7383 33.6187 30.9547C33.4735 31.2035 33.3667 31.3775 33.1925 31.6093L32.7016 31.5616C32.7016 31.5616 32.4516 31.3631 32.3198 31.3059C32.1708 31.2411 31.9757 31.23 31.8153 31.3638C31.4465 31.6713 31.0373 31.9943 30.7107 32.2604C30.5531 32.3698 30.4213 32.5243 30.496 32.7036C30.6199 33.0012 30.8473 33.4593 30.9766 33.7536C31.0119 33.8338 31.0479 33.9449 30.9255 34.0229C30.4721 34.312 30.1076 34.5743 29.6744 34.807C29.5486 34.8746 29.499 34.8654 29.3607 34.715C29.1487 34.4842 28.9744 34.2593 28.7573 34.0331C28.5224 33.7884 28.3352 33.8866 28.1403 33.9956C27.7416 34.2188 27.2812 34.4313 26.8755 34.64C26.6917 34.7068 26.6374 34.9154 26.6505 34.9979C26.7077 35.3588 26.7328 35.5797 26.7766 35.9422C26.8059 36.184 26.7224 36.2359 26.6198 36.2763C26.1394 36.4657 25.8612 36.5685 25.3448 36.6956C25.1904 36.7337 25.0975 36.7081 25.0448 36.5968C24.8701 36.2272 24.7103 35.879 24.5437 35.5195C24.457 35.3326 24.3369 35.3136 24.1551 35.3456C23.6537 35.4626 23.18 35.4676 22.7642 35.5195C22.5578 35.5453 22.3588 35.6098 22.3142 35.9422C22.2896 36.2406 22.2349 36.5388 22.188 36.8218C22.1416 37.1021 22.0714 37.0693 21.8403 37.0877C21.3821 37.1241 21.0056 37.1147 20.5926 37.0877C20.3392 37.0711 20.3263 37.0509 20.2823 36.7945C20.2223 36.4445 20.1983 36.2125 20.1528 35.8604C20.1072 35.6319 19.8997 35.5359 19.6551 35.5229C19.2876 35.5033 18.7508 35.427 18.1755 35.3286C18.058 35.3085 17.9003 35.4357 17.8755 35.5195C17.7078 35.8783 17.561 36.2474 17.3744 36.5968C17.324 36.6912 17.2042 36.7318 17.0744 36.6956C16.6223 36.5698 16.1996 36.4351 15.7653 36.2729C15.6474 36.2289 15.6398 36.1603 15.646 36.0956C15.686 35.6754 15.7504 35.2632 15.796 34.865C15.796 34.7647 15.7391 34.6901 15.6221 34.64C15.6221 34.64 14.9359 34.3404 14.8142 34.2684C14.6925 34.1964 14.3403 33.9931 14.0915 33.8627C13.932 33.7792 13.8134 33.9178 13.7403 33.9888L13.5426 34.2138L13.1403 34.64L13.0653 34.715C12.9985 34.7818 12.899 34.7924 12.7653 34.7422L12.588 34.64L11.8619 34.2138L11.538 33.982C11.3776 33.8676 11.4584 33.7987 11.5312 33.6616C11.6925 33.3578 11.9199 33.0016 12.0119 32.6866C12.01 32.5215 11.9931 32.4915 11.8858 32.3661C11.8092 32.2766 11.5782 32.1099 11.4869 32.0354C11.3116 31.8924 11.1978 31.8055 11.0301 31.6536C10.9509 31.5819 10.8208 31.4425 10.7335 31.3809C10.6065 31.2912 10.5377 31.2302 10.3824 31.2241C10.1945 31.2165 10.0291 31.3007 9.86419 31.3911C9.75317 31.4519 9.47896 31.6093 9.47896 31.6093H9.1551L9.01192 31.3707L8.77328 31.0195C9.16125 30.3719 9.48541 29.424 9.65624 28.7763C9.81855 28.1609 9.88479 27.6226 9.97328 26.8911C10.1146 26.5561 10.1912 26.3631 10.3006 26.0661C10.8093 27.3712 11.7393 28.5769 12.6665 29.3763L16.771 23.0525L14.2687 30.8559L20.4596 26.1684L15.8505 31.8036C17.5789 32.7371 19.4152 33.0859 21.2573 33.0888C23.0995 33.0918 24.9351 32.7662 26.5107 31.7934L21.963 26.1684L28.1539 30.8559L25.6619 23.0832L29.7664 29.3797C30.3043 28.8699 31.1231 27.8488 31.6107 26.9005C32.0984 25.9523 32.2475 25.5141 32.5042 24.7085C32.6173 24.823 32.7293 25.0037 32.8013 25.1465C32.9076 25.357 32.9748 25.525 33.0664 25.7423C33.1403 25.9175 33.2077 26.0486 33.2056 26.1559ZM7.42669 27.7979C7.40998 28.3494 7.45972 28.9177 7.5767 29.5025L7.02442 28.8002L7.42669 27.7979ZM36.5743 28.0502L36.5505 28.6741C35.5479 29.9106 34.9193 30.7559 34.6687 31.207C33.8164 32.4937 33.241 33.513 32.9403 34.265C32.7564 34.6827 32.49 35.0166 32.1391 35.2672C31.8717 35.4009 31.6694 35.543 31.5357 35.6934C31.4187 35.9106 31.4862 35.9675 31.7369 35.8672C31.9039 35.7001 32.0886 35.5758 32.2891 35.4922C32.6567 35.3084 33.4417 34.4417 34.6448 32.8877L34.6209 32.0081L34.8971 31.5309C34.8803 32.0155 34.9195 32.2853 35.0198 32.3354C35.12 32.3856 35.2602 32.2454 35.4357 31.9195C35.6111 31.5937 36.0392 30.6968 36.7243 29.2263C36.5739 29.6775 36.5668 30.0717 36.7005 30.4059C36.2994 30.69 36.1894 31.1731 36.3732 31.8581L35.5482 32.6116C35.214 32.9792 35.1039 33.3628 35.2209 33.7638C34.753 34.0145 34.302 34.3804 33.8675 34.865C33.433 35.3495 33.1044 35.7615 32.8789 36.0956C32.6533 36.4298 32.4136 36.6288 32.163 36.6956C31.8789 36.8293 31.5556 36.7619 31.188 36.4945L31.0857 37.1218L29.405 38.1479L29.0062 37.3979C30.1591 36.7964 30.8269 36.2458 31.0107 35.7445C31.2446 35.3268 31.4967 34.9805 31.7641 34.7047C32.0315 34.429 32.2233 34.0899 32.3403 33.6888L32.3641 33.0854L32.2891 32.4616C32.5564 32.7623 32.798 32.8264 33.0153 32.6593C33.3661 32.0076 33.7426 31.402 34.1437 30.8422C34.5447 30.2825 34.9709 29.7621 35.4221 29.2775C35.8732 28.7929 36.2568 28.3844 36.5743 28.0502ZM33.9425 29.5775C33.9592 29.8281 34.0089 30.0022 34.0925 30.1025L33.8437 30.5286L33.9425 29.5775ZM7.32442 31.057L8.02669 32.2331L7.95169 32.3831L7.17442 31.207L7.32442 31.057ZM10.3994 31.4661C10.464 31.4675 10.5159 31.5191 10.5596 31.5581C10.8676 31.9011 11.2359 32.2014 11.6369 32.4854C11.7204 32.5356 11.7453 32.6102 11.7119 32.7104L11.1835 33.7638C11.1501 33.8975 11.1855 34.0042 11.2858 34.0877C11.7536 34.4386 12.2545 34.7476 12.7892 35.015C12.9061 35.0985 13.0162 35.0985 13.1165 35.015L13.8903 34.1388C13.9571 34.0553 14.0352 34.0481 14.1187 34.115C14.5532 34.3656 14.9794 34.5751 15.3971 34.7422C15.4974 34.7924 15.5365 34.8741 15.5199 34.9911L15.3699 36.1945C15.3531 36.3449 15.4277 36.4444 15.5949 36.4945C16.0961 36.7117 16.6324 36.8787 17.2005 36.9956C17.3676 37.0124 17.4848 36.9732 17.5517 36.8729L18.0767 35.7172C18.1268 35.617 18.2059 35.6097 18.3289 35.6422C18.7757 35.7605 19.2489 35.8028 19.7335 35.8195C19.8337 35.8195 19.8906 35.8693 19.9073 35.9695L20.0812 37.1456C20.1146 37.2793 20.1998 37.3468 20.3335 37.3468C20.9183 37.3802 21.5043 37.3802 22.0892 37.3468C22.2562 37.3468 22.3486 37.2722 22.3653 37.1218L22.5392 35.9695C22.5558 35.8693 22.6127 35.8195 22.713 35.8195C23.2143 35.7861 23.6831 35.7258 24.1176 35.6422C24.2345 35.6255 24.3197 35.6681 24.3698 35.7684L24.8948 36.8456C24.9616 36.996 25.0788 37.0458 25.246 36.9956C25.7974 36.8787 26.332 36.6778 26.8755 36.4468C27.0023 36.3929 27.0688 36.3207 27.0494 36.1706L26.8994 35.015C26.9161 34.898 26.9764 34.8162 27.0766 34.7661C27.4442 34.6157 27.8608 34.4077 28.3278 34.1388C28.4122 34.0902 28.4935 34.0919 28.5562 34.1627L29.3573 35.0661C29.4575 35.1497 29.557 35.1602 29.6573 35.0934C30.1753 34.7759 30.669 34.4492 31.1369 34.115C31.2705 34.0314 31.3025 33.9214 31.2357 33.7877L30.7619 32.7104C30.7167 32.6078 30.7713 32.5049 30.8437 32.4513C31.2553 32.1464 31.5584 31.8801 31.8869 31.582C31.9704 31.4985 32.0646 31.4589 32.1732 31.4866C32.2281 31.5005 32.3083 31.5591 32.3744 31.6093C32.2191 31.6334 31.9174 31.7748 31.9141 32.1104L32.013 33.0377C32.0798 33.422 31.8756 33.8501 31.3994 34.3263C30.9231 34.8026 30.6088 35.2412 30.4585 35.6422C30.3749 35.943 30.0516 36.2697 29.4835 36.6206C29.45 36.5204 29.3151 36.3606 29.0812 36.1434C29.0477 36.0765 28.9803 36.0517 28.88 36.0684C28.3119 36.2188 27.1682 36.7196 25.4471 37.5718C25.1463 37.7222 24.7201 38.1661 24.1687 38.9013H23.1903C22.9229 38.7509 22.6388 38.5414 22.338 38.274C22.1208 38.107 21.7371 38.1672 21.1858 38.4513C20.6677 38.3344 20.1492 38.4409 19.6312 38.7752C19.3137 38.8921 19.0793 38.917 18.9289 38.8502L17.7017 37.524C15.1618 36.4546 13.7765 35.9787 13.5426 36.0956C13.2919 36.246 13.1073 36.4627 12.9903 36.7468C12.7397 36.6298 12.3632 36.3102 11.8619 35.7922L11.0846 34.9161C10.5165 34.2811 10.2821 33.6808 10.3824 33.1127L10.5085 32.3354C10.5252 32.2185 10.5075 32.1261 10.4574 32.0593C10.2735 31.8588 10.0995 31.7416 9.93237 31.7081L10.3312 31.4831C10.3561 31.4699 10.3779 31.4656 10.3994 31.4661ZM32.6096 31.8718C32.6403 31.8707 32.6756 31.8753 32.7119 31.8854C32.8305 31.9185 32.8796 31.9171 32.9982 31.9502C32.9273 32.0684 32.8826 32.158 32.8312 32.2331C32.7235 32.3905 32.652 32.4108 32.4766 32.2604C32.3231 32.1288 32.3948 31.8782 32.6096 31.8718ZM34.3209 32.3354V32.7616L33.7175 33.4638L34.3209 32.3354ZM36.0732 32.6866L35.9982 33.1366C35.7809 33.3538 35.6815 33.3361 35.6982 33.0854L36.0732 32.6866ZM8.62669 33.2116L9.28124 34.1388L9.65624 34.8172L9.78237 35.1922C9.54842 35.0753 9.34605 34.9012 9.17896 34.6672L8.7801 34.1388L8.35397 33.5627L8.62669 33.2116ZM5.70511 34.6025C5.72861 34.5985 5.75955 34.6036 5.79715 34.6161C6.49895 34.7999 6.82227 35.0343 6.77215 35.3184C6.55492 35.686 6.45543 36.1016 6.47215 36.5695L6.49943 37.8752C5.6138 37.2903 4.65849 36.7718 3.63921 36.3206C3.75617 36.3039 3.89108 36.2915 4.04148 36.2831C4.19186 36.2747 4.29134 36.2198 4.34148 36.1195C4.3916 36.0193 4.29927 35.959 4.06534 35.9422C3.54733 35.9422 3.21345 35.9848 3.06307 36.0684C2.9461 36.202 2.97097 36.3441 3.13807 36.4945C4.34116 37.0961 5.40311 37.6998 6.32215 38.3013C7.77588 39.2203 8.9053 39.9699 9.70737 40.5547C10.4927 40.538 11.5938 40.4314 13.0142 40.2309L15.1687 39.8286C16.0543 39.6615 16.9742 39.5194 17.9267 39.4025C18.2775 39.3523 18.7215 39.3203 19.2562 39.3036C19.7909 39.2869 20.2846 39.2443 20.7358 39.1775C21.1702 39.9962 21.4366 40.7137 21.5369 41.332C21.587 41.6495 21.5444 41.827 21.4108 41.8604C19.4223 42.5956 17.9944 43.0591 17.1255 43.2513C16.2566 43.4435 15.4716 43.6123 14.7699 43.7627C13.0153 44.0802 11.2856 44.3394 9.58123 44.5399C9.14677 44.423 7.893 43.7801 5.82102 42.6104C4.35056 41.7248 3.32404 41.0073 2.73921 40.4558C2.07082 39.7373 1.80098 39.304 1.93466 39.1536C2.36911 38.4351 2.66382 37.7993 2.81421 37.2479C2.88104 37.014 2.89535 36.8293 2.86193 36.6956C2.67812 36.1275 2.81304 35.8362 3.26421 35.8195C4.38375 35.7527 5.13669 35.735 5.52102 35.7684C5.68811 35.7851 5.79474 35.7353 5.84488 35.6184L6.22329 34.865L5.99488 34.7661L5.67102 35.2672L5.64715 34.6911C5.64715 34.6389 5.66594 34.609 5.70511 34.6025ZM36.8266 34.7422V35.2911L36.3493 35.1684L36.4005 35.4172C36.5007 35.601 36.6854 35.7254 36.9528 35.7922L38.3062 35.8672L38.9062 35.8434C39.6079 35.8601 39.949 36.0323 39.9323 36.3581C39.9155 36.684 39.9404 36.9877 40.0073 37.2718C40.1242 37.9903 40.4084 38.6758 40.8596 39.3274C40.7593 39.6282 40.5426 39.9798 40.2084 40.3809L38.9062 41.2331C37.7866 42.0352 36.2664 43.0794 34.3448 44.3661C32.9746 44.3995 31.3266 44.2895 29.405 44.0388C28.0181 43.855 26.4233 43.5034 24.6187 42.9854L24.2198 42.8865L24.3937 42.7127C24.6777 42.3451 24.8322 42.0982 24.8573 41.9729C24.8824 41.8476 24.8398 41.5634 24.7312 41.1206C24.6226 40.6778 24.3117 40.154 23.7937 39.5524V39.4025L24.1687 39.3513C25.2047 39.4182 26.1264 39.5531 26.9369 39.7536C27.7473 39.9541 28.7116 40.1388 29.8312 40.3059C30.9173 40.5064 31.7057 40.6254 32.1903 40.6672C32.6748 40.709 33.0407 40.6894 33.2914 40.6059C33.7425 40.4221 34.6696 39.7366 36.0732 38.5502C37.4267 37.5309 38.5704 36.8205 39.5062 36.4195C39.7902 36.2524 39.8026 36.1333 39.5437 36.0581C39.2846 35.9829 38.8991 35.9422 38.3812 35.9422C38.214 36.0759 38.2283 36.186 38.4289 36.2695C38.6628 36.2528 38.8297 36.2706 38.93 36.3206C37.8104 36.9055 36.8762 37.4881 36.1243 38.0729C36.1911 37.6886 36.248 37.0314 36.2982 36.0956C36.2815 35.7949 36.182 35.525 35.9982 35.2911C35.8812 35.124 36.041 34.9748 36.4755 34.8411L36.8266 34.7422ZM13.8801 36.4059C13.9865 36.4032 14.1057 36.4318 14.2415 36.4945L15.4449 37.0706L17.5005 37.8479C18.0018 38.3826 18.3108 38.7519 18.4278 38.9525C18.01 39.0026 17.559 39.0346 17.0744 39.0513L15.9971 38.3013C15.5627 37.7833 15.2465 37.4068 15.046 37.1729C14.8455 36.939 14.6536 36.772 14.4699 36.6718C14.2025 36.5214 13.9824 36.4717 13.8153 36.5218C13.6983 36.5552 13.574 36.7221 13.4403 37.0229L13.3892 36.9718C13.456 36.6877 13.5608 36.5136 13.7028 36.4468C13.7561 36.4217 13.8163 36.4074 13.8801 36.4059ZM28.7403 36.5047C28.7998 36.5016 28.8538 36.5341 28.9039 36.5968L29.105 36.8456L28.8289 37.0229C28.6618 37.1566 28.4557 37.2135 28.205 37.1968C27.9878 37.1801 27.6931 37.2528 27.3255 37.4115C26.9579 37.5703 26.7589 37.7888 26.7255 38.0729C26.6586 38.2734 26.5663 38.4012 26.4494 38.4513C26.0817 38.6518 25.7478 38.8259 25.4471 38.9763L24.6698 38.9252L25.0721 38.3763C25.2726 38.1424 25.5285 37.9329 25.846 37.749C27.2663 37.0472 28.211 36.6387 28.6789 36.5218C28.6998 36.5134 28.7204 36.5058 28.7403 36.5047ZM14.1392 36.8525C14.1883 36.8535 14.2383 36.8675 14.2926 36.8968L14.6949 37.2479L14.8687 37.524C14.6348 37.641 14.4004 37.641 14.1665 37.524L13.7676 37.2206C13.8678 36.97 13.9919 36.8493 14.1392 36.8525ZM3.61534 37.2718L3.48921 37.449C3.57275 37.4992 3.59762 37.5632 3.56421 37.6468L2.48694 39.3036C2.4368 39.337 2.36934 39.3264 2.2858 39.2763L2.16307 39.4536L2.86193 39.9036L2.98807 39.7297C2.92123 39.6963 2.90351 39.6466 2.93693 39.5797L3.31534 39.0002L3.33921 39.0275C3.30578 39.4786 3.31822 39.8445 3.37671 40.1286C3.43518 40.4127 3.62512 40.6648 3.94261 40.882L3.99034 40.7559C3.80653 40.6222 3.72476 40.3309 3.74148 39.8797C3.77489 39.6124 3.77489 39.41 3.74148 39.2763C3.97541 39.4434 4.21168 39.4664 4.45398 39.3411C4.69626 39.2158 4.85076 38.9938 4.91761 38.6763C4.98444 38.3588 4.86009 38.0818 4.54261 37.8479L3.61534 37.2718ZM28.1369 37.6161C28.1758 37.6172 28.2131 37.6187 28.2528 37.6229C28.3864 37.6396 28.397 37.8811 28.2801 38.349C28.1798 38.5829 27.6861 38.8671 26.8005 39.2013L25.9721 39.1024L26.8516 38.6013L27.0766 38.9524H27.1994L27.0766 38.5501C26.9931 38.2661 27.0925 38.0422 27.3766 37.8751C27.6106 37.6997 27.8645 37.6124 28.1369 37.616V37.6161ZM28.7062 37.6468L29.0573 38.3013L28.5801 38.499C28.6469 38.332 28.6894 38.0478 28.7062 37.6468ZM4.06534 37.8479C4.31598 37.9816 4.46333 38.1112 4.50511 38.2365C4.54688 38.3619 4.51673 38.5269 4.41648 38.7275C4.31621 38.928 4.17942 39.0399 4.00398 39.0649C3.82852 39.09 3.64914 38.9924 3.46534 38.7752L4.06534 37.8479ZM38.105 37.9979L38.48 40.4047C38.4967 40.4883 38.4541 40.5734 38.3539 40.657L38.405 40.807L39.1073 40.3297L39.0323 40.2309C38.8652 40.3311 38.78 40.3311 38.78 40.2309L38.6812 39.8286L39.3562 39.3786L39.7073 39.6036C39.7741 39.6537 39.7598 39.7106 39.6596 39.7775L39.7584 39.9547L40.5596 39.4263L40.4334 39.2763C40.3665 39.3097 40.2776 39.3097 40.1607 39.2763L38.105 37.9979ZM5.44602 38.424L5.37102 38.5502C5.48798 38.6003 5.51285 38.6855 5.44602 38.8025L4.36875 40.4558C4.31861 40.5561 4.24059 40.5738 4.14034 40.507L4.06534 40.657L5.31988 41.4581L5.79715 41.2059L5.72215 41.0831C5.52163 41.1667 5.21262 41.0638 4.79488 40.7797L5.29602 40.0059L5.52102 40.1559C5.60456 40.206 5.61171 40.2878 5.54488 40.4047L5.69488 40.507L6.04602 39.9309L5.91988 39.8525C5.83632 39.9694 5.75456 40.0048 5.67102 39.9547L5.44602 39.8047L5.94715 39.0002C6.26463 39.184 6.43157 39.3686 6.44829 39.5524L6.57442 39.6036L6.67329 39.2013L5.44602 38.424ZM21.963 38.6525L22.263 38.6763L22.5221 38.9184L21.963 38.6525ZM20.8142 38.7275C21.069 38.7191 21.3433 38.7583 21.6357 38.8502L22.2392 39.1025L22.5664 38.9627L22.7403 39.1263C23.5925 40.0453 24.0737 40.6739 24.1823 41.0081C24.2909 41.3423 24.3034 41.6656 24.2198 41.9831C23.9023 42.4009 23.6751 42.5535 23.5414 42.4365L23.4153 42.0343L22.7403 42.8865L22.188 43.2377C21.9374 43.4549 21.6781 43.5401 21.4108 43.4899L20.5346 43.0638L20.9846 42.8354L21.1108 42.9377C21.0272 43.1883 21.1267 43.1529 21.4108 42.8354L22.188 42.0854C22.2381 41.6342 22.1281 41.0535 21.8608 40.3434C21.5934 39.6332 21.3944 39.184 21.2607 39.0002C21.2273 38.8498 20.8437 38.8178 20.1085 38.9013C20.3257 38.7927 20.5593 38.7358 20.8142 38.7275ZM37.0755 38.7275L36.4482 39.1263L36.5505 39.3036C36.6507 39.2535 36.7573 39.2783 36.8743 39.3786L37.3278 40.1286L35.5721 39.7024L35.0948 40.0809L35.1732 40.2036C35.3069 40.1702 35.4384 40.1951 35.5721 40.2786L36.4755 41.7104C36.5089 41.8107 36.484 41.8924 36.4005 41.9593L36.4993 42.0854L37.1028 41.7104L37.0005 41.5843C36.9002 41.6344 36.8184 41.6238 36.7516 41.557L36.0732 40.4558L38.3062 40.9809L37.1266 39.2763C37.0597 39.1259 37.0846 38.9839 37.2016 38.8502L37.0755 38.7275ZM38.5039 38.8263L39.1312 39.2286L38.6539 39.5524L38.5039 38.8263ZM12.9903 38.8502L14.1426 39.6036L12.6392 39.8525L12.9903 38.8502ZM29.8823 39.0275C29.9491 39.3784 30.0912 39.7051 30.3085 40.0059C29.874 39.939 29.1742 39.8113 28.205 39.6274L29.0812 39.3274C29.549 39.4277 29.8154 39.3285 29.8823 39.0275ZM7.00056 39.4025L6.89829 39.5524C6.98183 39.6026 7.0067 39.67 6.97329 39.7536L5.87215 41.4343C5.80531 41.5011 5.73785 41.5083 5.67102 41.4581L5.56875 41.6081L6.29829 42.0581L6.37329 41.9081C6.28973 41.858 6.27202 41.7939 6.32215 41.7104L6.69715 41.1309L6.82329 41.257C7.14076 41.5243 7.43734 41.5865 7.71306 41.4445C7.98876 41.3025 8.16098 41.0786 8.22783 40.7695C8.29466 40.4604 8.17746 40.1887 7.87669 39.9547L7.00056 39.4025ZM19.6312 39.4263L18.9801 41.8331C18.9299 41.9501 18.8625 42.0176 18.7789 42.0343L18.8028 42.1843L19.5051 42.0343V41.8843C19.3881 41.901 19.3312 41.8832 19.3312 41.8331L19.4812 41.3081L20.2073 41.1309L20.4323 41.5093C20.4657 41.6262 20.4266 41.7008 20.3096 41.7343L20.3335 41.8843L21.1858 41.6831V41.5331C21.052 41.5331 20.9597 41.4905 20.9096 41.407L19.6312 39.4263ZM17.7596 39.849C17.7035 39.8472 17.6496 39.849 17.596 39.8524C17.2383 39.8733 16.9396 40.0011 16.6994 40.2308C16.3986 40.5984 16.356 41.117 16.5733 41.7854C16.7738 42.3702 17.2071 42.6118 17.8755 42.5115C18.2097 42.4447 18.469 42.3203 18.6528 42.1365L18.5778 41.5331L18.4278 41.6081C18.4278 41.9256 18.3283 42.1351 18.1278 42.2354C17.5597 42.4025 17.176 42.1255 16.9755 41.407C16.892 40.655 17.0838 40.1968 17.5517 40.0297C17.8858 39.9796 18.1274 40.1216 18.2778 40.4558L18.3767 40.432L18.3017 39.9308C18.109 39.8838 17.9281 39.8546 17.7596 39.849V39.849ZM7.45056 39.9786C7.68448 40.0956 7.8194 40.2305 7.85283 40.3809C7.88624 40.5312 7.84552 40.6929 7.73692 40.8684C7.6283 41.0438 7.49679 41.1433 7.33806 41.1684C7.17931 41.1934 7.00708 41.1241 6.82329 40.957L7.45056 39.9786ZM25.2971 40.1559L25.2698 40.3297C25.3533 40.3799 25.3888 40.465 25.3721 40.582L25.1198 42.2593C25.0864 42.3595 25.0046 42.4021 24.871 42.3854L24.8437 42.6104L25.7232 42.7365L25.7471 42.5115C25.6301 42.4948 25.5804 42.4345 25.5971 42.3343L25.846 40.657C25.8626 40.5233 25.9407 40.463 26.0744 40.4797L26.1221 40.3059L25.2971 40.1559ZM16.2971 40.1797L15.4721 40.3297L15.5199 40.5308C15.6201 40.5141 15.6876 40.5462 15.721 40.6297L15.9971 42.4093C15.9971 42.5095 15.9474 42.577 15.8471 42.6104L15.871 42.8115L16.6755 42.6615L16.6483 42.4604C16.5146 42.4938 16.4471 42.4512 16.4471 42.3343L16.171 40.5308C16.171 40.4306 16.2313 40.3809 16.3483 40.3809L16.2971 40.1797ZM8.32669 40.2309L8.27897 40.3297C8.34579 40.4133 8.37066 40.5128 8.35397 40.6297L7.97556 43.2138L9.9051 41.557C9.98863 41.4902 10.0738 41.483 10.1574 41.5331L10.2324 41.4343L9.6801 41.0831L9.63237 41.182C9.71591 41.2488 9.72306 41.3234 9.65624 41.407L8.57897 42.3615L8.82783 40.8581C8.84453 40.7746 8.91198 40.7569 9.02896 40.807L9.0801 40.7047L8.32669 40.2309ZM19.7062 40.2786L20.0573 40.9059L19.5051 41.032L19.7062 40.2786ZM26.4255 40.3536L26.2482 40.8581L26.3744 40.9331C26.4746 40.7493 26.6984 40.6962 27.0494 40.7797L26.7255 42.5354C26.6754 42.6524 26.583 42.7021 26.4494 42.6854L26.4255 42.8627L27.3016 43.0127L27.3255 42.8354C27.2085 42.802 27.1588 42.7274 27.1755 42.6104L27.4755 40.8581C27.8264 40.8916 28.0288 41.0159 28.0789 41.2331L28.2289 41.2059L28.2528 40.657C27.6345 40.5902 27.027 40.4873 26.4255 40.3536ZM14.7699 40.507L13.9415 40.657L13.9653 40.8309C14.0823 40.8142 14.1603 40.8496 14.1937 40.9331L14.4699 42.7127C14.4698 42.8296 14.4167 42.9043 14.3165 42.9377L14.3437 43.1115L15.646 42.8627L15.7721 42.2593L15.6221 42.2354C15.5386 42.486 15.3219 42.6458 14.971 42.7127L14.6437 40.8581C14.627 40.7579 14.6839 40.6976 14.8176 40.6809L14.7699 40.507ZM13.2528 40.7286C13.2092 40.7267 13.1645 40.7275 13.1165 40.732L12.1108 40.882L12.138 41.0558C12.2383 41.0558 12.2952 41.0984 12.3119 41.182L12.513 43.0638C12.513 43.1807 12.4561 43.2448 12.3392 43.2615V43.4388L13.1403 43.3126C13.8922 43.2291 14.2012 42.9024 14.0676 42.3342C14.0174 42.0502 13.8754 41.8832 13.6415 41.8331C13.8252 41.6994 13.8927 41.4899 13.8426 41.2058C13.7548 40.8988 13.558 40.7414 13.2528 40.7286V40.7286ZM29.255 40.732L27.9766 42.8626C27.9098 42.9462 27.828 42.9854 27.7278 42.9854L27.7039 43.1388L28.5051 43.2888V43.0876C28.3546 43.0542 28.2943 42.9868 28.3278 42.8865L28.4539 42.6854L29.33 42.8115L29.405 43.1115C29.3883 43.2118 29.3243 43.2544 29.2073 43.2376L29.18 43.3876L30.2096 43.4899V43.3365C30.1093 43.3365 30.0418 43.2796 30.0085 43.1626L29.255 40.732ZM34.0175 40.732L34.3959 43.1388C34.3959 43.2557 34.3533 43.3447 34.2698 43.4115L34.3209 43.5888L35.0198 43.0876L34.9209 42.9854C34.7872 43.0522 34.7126 43.0451 34.6959 42.9615L34.5937 42.5865L35.2721 42.1365L35.5721 42.3342C35.6389 42.3844 35.6317 42.4341 35.5482 42.4842L35.6744 42.6854L36.4243 42.1604L36.2982 42.0104C36.2313 42.0438 36.1567 42.0509 36.0732 42.0342L34.0175 40.732ZM13.1096 40.9536C13.2668 40.9609 13.3599 41.0961 13.3892 41.3592C13.4059 41.5932 13.3313 41.7352 13.1642 41.7854L12.813 41.8331L12.7142 41.0081L13.038 40.957C13.0631 40.9528 13.0872 40.9525 13.1096 40.9536V40.9536ZM11.3744 41.0047C11.3306 41.0029 11.2827 41.0036 11.2346 41.0081L10.2562 41.1308L10.2835 41.3081C10.3837 41.3081 10.4406 41.3507 10.4574 41.4342L10.6346 43.3126C10.6346 43.4296 10.5743 43.4971 10.4574 43.5138V43.6876L11.2858 43.5649C12.021 43.5148 12.3372 43.1881 12.2369 42.5865C12.1868 42.3024 12.0375 42.1427 11.7869 42.1092C11.9707 41.9756 12.0382 41.766 11.988 41.482C11.8857 41.1749 11.6814 41.0175 11.3744 41.0047V41.0047ZM30.6085 41.032V41.257C30.7254 41.257 30.7785 41.3245 30.7619 41.4581L30.6596 43.1627C30.6261 43.3131 30.5515 43.3877 30.4346 43.3877L30.4107 43.5377L32.163 43.7149L32.3403 43.1115H32.2141C32.0136 43.3455 31.6548 43.4378 31.1369 43.3877L31.263 41.5093C31.2797 41.3923 31.3366 41.332 31.4369 41.332L31.4607 41.107L30.6085 41.032ZM32.7664 41.2058V41.407C32.8666 41.4404 32.9164 41.515 32.9164 41.632L32.8414 43.3127C32.8079 43.4129 32.7228 43.4627 32.5891 43.4627L32.5653 43.6877L33.4414 43.7627L33.4687 43.5377C33.3684 43.521 33.3081 43.4641 33.2914 43.3638L33.3664 41.6831C33.3998 41.5662 33.4744 41.4987 33.5914 41.482L33.6187 41.2843L32.7664 41.2058ZM11.2824 41.2263C11.4395 41.2336 11.5327 41.3688 11.5619 41.632C11.5786 41.8659 11.4863 42.008 11.2858 42.0581L10.9858 42.1093L10.8835 41.2843L11.2108 41.2331C11.2358 41.229 11.2599 41.2253 11.2824 41.2264V41.2263ZM34.3959 41.557L35.0198 41.9831L34.5459 42.3104L34.3959 41.557ZM29.0573 41.6593L29.3062 42.5865L28.5801 42.4843L29.0573 41.6593ZM13.1915 41.9831C13.392 41.9664 13.5163 42.1085 13.5665 42.4093C13.6166 42.7769 13.5242 42.9864 13.2903 43.0365L12.963 43.0877L12.8403 42.0343L13.1915 41.9831ZM11.3369 42.2354C11.5374 42.2187 11.6618 42.3536 11.7119 42.6377C11.762 43.0053 11.6874 43.222 11.4869 43.2888L11.1358 43.3365L11.0096 42.2865L11.3369 42.2354ZM17.7528 43.7149C18.0034 43.882 17.9929 44.0738 17.7255 44.2911C17.0237 44.9762 16.2316 45.6262 15.346 46.2445L15.046 46.1456C15.564 45.8281 16.2992 45.3096 17.2517 44.5911L17.6778 44.1138L17.4494 44.0899C17.1319 44.374 16.7713 44.6634 16.3619 44.9558C15.9525 45.2483 15.4784 45.5271 14.9437 45.7945L14.2176 46.1456L14.3437 46.2956L14.896 46.3706C15.2135 46.5711 15.345 46.7701 15.2949 46.9706C15.1277 47.2213 14.8613 47.2567 14.4937 47.0729L13.8903 46.7456C13.6731 46.5284 13.4564 46.3792 13.2392 46.2956L12.9903 46.0945L13.0892 45.8456L13.8426 46.1456H14.0676L13.9415 45.6956L14.8449 45.1433C15.0788 45.0598 15.1783 44.9177 15.1449 44.7172L15.2199 44.2638C15.6042 44.3473 16.0232 44.2852 16.4744 44.0763C16.9255 43.8674 17.3518 43.7484 17.7528 43.7149ZM25.4198 44.0013C25.6731 44.0026 26.0241 44.0635 26.4732 44.1888L28.6039 45.7706C28.1527 45.7706 27.8686 45.8204 27.7516 45.9206H27.4005C26.9159 45.5864 26.5323 45.2774 26.2482 44.9934L25.0721 44.0661C25.1536 44.0222 25.2679 44.0005 25.4198 44.0013ZM26.1494 45.6445L26.6505 46.0706C26.5502 46.1375 26.4225 46.1126 26.2721 45.9956C26.1217 45.8787 26.0825 45.7614 26.1494 45.6445ZM16.6483 45.8456L16.6994 45.9683L16.4983 46.2445L16.2733 46.3706L16.0721 46.2445L16.096 46.1456L16.5221 45.8695L16.6483 45.8456ZM28.5289 46.0434L29.1323 46.1456L29.5312 46.0434L29.8073 46.0945L29.7085 46.2206L29.0573 46.4217C28.7732 46.6724 28.4359 46.8393 28.0516 46.9229L27.6255 46.8479L27.5266 46.5479C27.6269 46.3975 27.7565 46.2874 27.9153 46.2206C28.074 46.1538 28.2782 46.0935 28.5289 46.0434Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_5554_34205">
+<rect width="42.7839" height="48" fill="white" transform="translate(0.168945)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/ios/ItaliaApp/Images.xcassets/logo_io.imageset/Contents.json b/ios/ItaliaApp/Images.xcassets/logo_io.imageset/Contents.json
index 8217da938e6..b96ee49db12 100644
--- a/ios/ItaliaApp/Images.xcassets/logo_io.imageset/Contents.json
+++ b/ios/ItaliaApp/Images.xcassets/logo_io.imageset/Contents.json
@@ -1,23 +1,15 @@
 {
   "images" : [
     {
-      "filename" : "io-app-logo.png",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "filename" : "io-app-logo@2x.png",
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "filename" : "io-app-logo@3x.png",
-      "idiom" : "universal",
-      "scale" : "3x"
+      "filename" : "logo_io.svg",
+      "idiom" : "universal"
     }
   ],
   "info" : {
     "author" : "xcode",
     "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
   }
 }
diff --git a/ios/ItaliaApp/Images.xcassets/logo_io.imageset/io-app-logo.png b/ios/ItaliaApp/Images.xcassets/logo_io.imageset/io-app-logo.png
deleted file mode 100644
index 2734d0b64d5..00000000000
Binary files a/ios/ItaliaApp/Images.xcassets/logo_io.imageset/io-app-logo.png and /dev/null differ
diff --git a/ios/ItaliaApp/Images.xcassets/logo_io.imageset/io-app-logo@2x.png b/ios/ItaliaApp/Images.xcassets/logo_io.imageset/io-app-logo@2x.png
deleted file mode 100644
index c9364152e28..00000000000
Binary files a/ios/ItaliaApp/Images.xcassets/logo_io.imageset/io-app-logo@2x.png and /dev/null differ
diff --git a/ios/ItaliaApp/Images.xcassets/logo_io.imageset/io-app-logo@3x.png b/ios/ItaliaApp/Images.xcassets/logo_io.imageset/io-app-logo@3x.png
deleted file mode 100644
index 333146f2cc5..00000000000
Binary files a/ios/ItaliaApp/Images.xcassets/logo_io.imageset/io-app-logo@3x.png and /dev/null differ
diff --git a/ios/ItaliaApp/Images.xcassets/logo_io.imageset/logo_io.svg b/ios/ItaliaApp/Images.xcassets/logo_io.imageset/logo_io.svg
new file mode 100644
index 00000000000..cded5bf083e
--- /dev/null
+++ b/ios/ItaliaApp/Images.xcassets/logo_io.imageset/logo_io.svg
@@ -0,0 +1,8 @@
+<svg width="64" height="52" viewBox="0 0 64 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_5554_34255" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="64" height="52">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.40312 12.9709C2.8668 12.9709 0 10.0673 0 6.48551C0 2.90371 2.8668 0 6.40312 0C9.93944 0 12.8062 2.90371 12.8062 6.48551C12.8062 10.0673 9.93944 12.9709 6.40312 12.9709ZM6.40312 18.9575C9.39536 18.9575 11.8211 21.3982 11.8211 24.409V45.5803C11.8211 48.5912 9.39536 51.0319 6.40312 51.0319C3.41088 51.0319 0.98512 48.5912 0.98512 45.5803V24.409C0.98512 21.3982 3.41088 18.9575 6.40312 18.9575ZM33.9724 29.9252C33.4411 29.9252 32.9916 29.7351 32.6442 29.3549C32.2969 28.9747 32.113 28.51 32.113 27.9609C32.113 27.4116 32.2969 26.9469 32.6238 26.5668C32.9712 26.1866 33.4207 26.0175 33.9519 26.0175C34.4831 26.0175 34.9327 26.2077 35.28 26.5879C35.6274 26.9681 35.7909 27.4327 35.7909 28.003C35.7909 28.5734 35.6274 29.017 35.28 29.3971C34.9531 29.7351 34.5241 29.9252 33.9724 29.9252ZM50.7271 29.017H47.9074V33.8963C47.9074 34.3821 47.9278 34.699 47.9483 34.9102C47.9687 35.1002 48.0505 35.2693 48.1934 35.4172C48.3365 35.5649 48.5613 35.6284 48.8678 35.6284L50.625 35.586L50.768 38.1208C49.7464 38.3531 48.9495 38.4798 48.4182 38.4798C47.0289 38.4798 46.089 38.163 45.5986 37.5082C45.0878 36.8745 44.8426 35.6917 44.8426 33.9596V22.997H47.9278V26.2921H50.7475V29.017H50.7271ZM38.6106 38.1842V26.3133H41.6959V38.2053H38.6106V38.1842ZM43.9609 52C54.5797 52 64 42.5297 64 30.8475C64 19.1653 54.5797 9.69494 43.9609 9.69494C31.3382 9.69494 21.9178 19.1653 21.9178 30.8475C21.9178 42.5297 31.3382 52 43.9609 52Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_5554_34255)">
+<rect x="-11.8877" y="-13" width="100" height="100" fill="white"/>
+</g>
+</svg>
diff --git a/ios/ItaliaApp/Images.xcassets/logo_pagopa.imageset/Contents.json b/ios/ItaliaApp/Images.xcassets/logo_pagopa.imageset/Contents.json
index 4d1d95eeb61..b499e9e931e 100644
--- a/ios/ItaliaApp/Images.xcassets/logo_pagopa.imageset/Contents.json
+++ b/ios/ItaliaApp/Images.xcassets/logo_pagopa.imageset/Contents.json
@@ -1,23 +1,15 @@
 {
   "images" : [
     {
-      "filename" : "logo_pagopa.png",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "filename" : "pagopa - logo -  darkbg - grayscale - transparency@2x.png",
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "filename" : "pagopa - logo -  darkbg - grayscale - transparency@3x.png",
-      "idiom" : "universal",
-      "scale" : "3x"
+      "filename" : "logo_pagopa.svg",
+      "idiom" : "universal"
     }
   ],
   "info" : {
     "author" : "xcode",
     "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
   }
 }
diff --git a/ios/ItaliaApp/Images.xcassets/logo_pagopa.imageset/logo_pagopa.png b/ios/ItaliaApp/Images.xcassets/logo_pagopa.imageset/logo_pagopa.png
deleted file mode 100644
index 65fcac8645d..00000000000
Binary files a/ios/ItaliaApp/Images.xcassets/logo_pagopa.imageset/logo_pagopa.png and /dev/null differ
diff --git a/ios/ItaliaApp/Images.xcassets/logo_pagopa.imageset/logo_pagopa.svg b/ios/ItaliaApp/Images.xcassets/logo_pagopa.imageset/logo_pagopa.svg
new file mode 100644
index 00000000000..744feee4f31
--- /dev/null
+++ b/ios/ItaliaApp/Images.xcassets/logo_pagopa.imageset/logo_pagopa.svg
@@ -0,0 +1,14 @@
+<svg width="101" height="28" viewBox="0 0 101 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5554_34198)">
+<path d="M100.169 1.97168V21.2956H97.0141L97.0141 18.776C95.2971 20.3412 93.0136 21.2956 90.5071 21.2956C87.4263 21.2956 84.6823 19.8537 82.9131 17.6078C83.6402 16.5671 84.182 15.388 84.4916 14.1179C85.4675 16.4793 87.7933 18.1407 90.5071 18.1407C94.1008 18.1407 97.0141 15.2274 97.0141 11.6337C97.0141 8.03991 94.1008 5.12661 90.5071 5.12661C87.7933 5.12661 85.4675 6.788 84.4913 9.14919C84.182 7.87932 83.6402 6.70018 82.9139 5.65944C84.6823 3.41364 87.4263 1.97168 90.5071 1.97168C93.0136 1.97168 95.2971 2.92609 97.0141 4.49132L97.0141 1.97168H100.169Z" fill="white"/>
+<path d="M3.15489 1.97168L3.15486 4.49132C4.87189 2.92609 7.15541 1.97168 9.66185 1.97168C12.7425 1.97168 15.4864 3.41348 17.2556 5.6591C16.5289 6.69988 15.9871 7.87916 15.6773 9.14938C14.7015 6.788 12.3757 5.12661 9.66185 5.12661C6.06816 5.12661 3.15489 8.03991 3.15489 11.6337C3.15489 15.2274 6.06816 18.1407 9.66185 18.1407C12.3757 18.1407 14.7015 16.4793 15.6777 14.1181C15.9871 15.3881 16.5289 16.5674 17.2554 17.6083C15.4864 19.8538 12.7425 21.2956 9.66185 21.2956C7.15541 21.2956 4.87189 20.3412 3.15486 18.776L3.15489 26.8168H0V1.97168H3.15489Z" fill="white"/>
+<path d="M35.4925 1.97168V3.45575C33.7105 4.87561 32.403 6.86567 31.8462 9.14978C30.8706 6.78819 28.5447 5.12661 25.8307 5.12661C22.2371 5.12661 19.3238 8.03991 19.3238 11.6337C19.3238 15.2274 22.2371 18.1407 25.8307 18.1407C28.5447 18.1407 30.8706 16.4791 31.8467 14.1177C32.403 16.4016 33.7105 18.3917 35.4925 19.8116V21.2956H32.3377L32.3377 18.776C30.6207 20.3412 28.3372 21.2956 25.8307 21.2956C20.4947 21.2956 16.1689 16.9698 16.1689 11.6337C16.1689 6.29749 20.4947 1.97168 25.8307 1.97168C28.3372 1.97168 30.6207 2.92609 32.3377 4.49132L32.3377 1.97168H35.4925Z" fill="white"/>
+<path d="M67.8312 1.97168L67.8316 4.49096C69.5486 2.92595 71.832 1.97168 74.3382 1.97168C79.6744 1.97168 84.0002 6.29749 84.0002 11.6337C84.0002 16.9698 79.6744 21.2956 74.3382 21.2956C71.832 21.2956 69.5486 20.3414 67.8316 18.7763L67.8312 26.8168H64.6763L64.6766 19.8117C66.4585 18.3919 67.766 16.4019 68.3229 14.1179C69.2985 16.4793 71.6244 18.1407 74.3382 18.1407C77.932 18.1407 80.8453 15.2274 80.8453 11.6337C80.8453 8.03991 77.932 5.12661 74.3382 5.12661C71.6244 5.12661 69.2985 6.788 68.3223 9.14919C67.766 6.86537 66.4585 4.87542 64.6766 3.45564L64.6763 1.97168H67.8312Z" fill="white"/>
+<path d="M51.6618 0V4.49146C53.3789 2.92624 55.6624 1.97183 58.1689 1.97183C63.505 1.97183 67.8308 6.29764 67.8308 11.6338C67.8308 16.97 63.505 21.2958 58.1689 21.2958C55.6624 21.2958 53.3789 20.3414 51.6618 18.7761V21.339C51.6618 23.7997 50.6775 26.1127 48.9502 27.8722L48.8225 28L46.6138 25.7426C47.7875 24.5896 48.4625 23.0932 48.5048 21.4987L48.5069 21.339L48.5069 18.8142C46.7899 20.3826 44.5063 21.339 41.9999 21.339C36.6637 21.339 32.3379 17.0044 32.3379 11.6574C32.3379 6.31042 36.6637 1.97583 41.9999 1.97583C44.5063 1.97583 46.7899 2.93218 48.5069 4.50058L48.5069 0H51.6618ZM41.9999 5.13716C38.4061 5.13716 35.4928 8.05637 35.4928 11.6574C35.4928 15.2584 38.4061 18.1776 41.9999 18.1776C45.5936 18.1776 48.5069 15.2584 48.5069 11.6574C48.5069 8.05637 45.5936 5.13716 41.9999 5.13716ZM58.1689 5.12676C54.5752 5.12676 51.6619 8.04006 51.6619 11.6338C51.6619 15.2275 54.5752 18.1408 58.1689 18.1408C61.7626 18.1408 64.6759 15.2275 64.6759 11.6338C64.6759 8.04006 61.7626 5.12676 58.1689 5.12676Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_5554_34198">
+<rect width="100.169" height="28" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/ios/ItaliaApp/Images.xcassets/logo_pagopa.imageset/pagopa - logo -  darkbg - grayscale - transparency@2x.png b/ios/ItaliaApp/Images.xcassets/logo_pagopa.imageset/pagopa - logo -  darkbg - grayscale - transparency@2x.png
deleted file mode 100644
index 15ffa878a1b..00000000000
Binary files a/ios/ItaliaApp/Images.xcassets/logo_pagopa.imageset/pagopa - logo -  darkbg - grayscale - transparency@2x.png and /dev/null differ
diff --git a/ios/ItaliaApp/Images.xcassets/logo_pagopa.imageset/pagopa - logo -  darkbg - grayscale - transparency@3x.png b/ios/ItaliaApp/Images.xcassets/logo_pagopa.imageset/pagopa - logo -  darkbg - grayscale - transparency@3x.png
deleted file mode 100644
index 26ae73dd950..00000000000
Binary files a/ios/ItaliaApp/Images.xcassets/logo_pagopa.imageset/pagopa - logo -  darkbg - grayscale - transparency@3x.png and /dev/null differ
diff --git a/ios/ItaliaApp/Info.plist b/ios/ItaliaApp/Info.plist
index fb5ab19ec9d..29a5eb5a6b2 100644
--- a/ios/ItaliaApp/Info.plist
+++ b/ios/ItaliaApp/Info.plist
@@ -17,7 +17,7 @@
     <key>CFBundlePackageType</key>
     <string>APPL</string>
     <key>CFBundleShortVersionString</key>
-    <string>2.53.0</string>
+    <string>2.58.0</string>
     <key>CFBundleSignature</key>
     <string>????</string>
     <key>CFBundleURLTypes</key>
@@ -110,6 +110,18 @@
       <string>RobotoMono-RegularItalic.ttf</string>
       <string>ReadexPro-Regular.ttf</string>
       <string>DMMono-Medium.ttf</string>
+      <string>TitilliumSansPro-Black.otf</string>
+      <string>TitilliumSansPro-BlackItalic.otf</string>
+      <string>TitilliumSansPro-Bold.otf</string>
+      <string>TitilliumSansPro-BoldItalic.otf</string>
+      <string>TitilliumSansPro-Italic.otf</string>
+      <string>TitilliumSansPro-Light.otf</string>
+      <string>TitilliumSansPro-LightItalic.otf</string>
+      <string>TitilliumSansPro-Regular.otf</string>
+      <string>TitilliumSansPro-Semibold.otf</string>
+      <string>TitilliumSansPro-SemiboldItalic.otf</string>
+      <string>TitilliumSansPro-Thin.otf</string>
+      <string>TitilliumSansPro-ThinItalic.otf</string>
     </array>
     <key>UIBackgroundModes</key>
     <array>
diff --git a/ios/ItaliaApp/LaunchScreen.storyboard b/ios/ItaliaApp/LaunchScreen.storyboard
index fe52cff7812..a4d279bc190 100644
--- a/ios/ItaliaApp/LaunchScreen.storyboard
+++ b/ios/ItaliaApp/LaunchScreen.storyboard
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="21225" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="21701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
     <device id="retina4_7" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21207"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21679"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
@@ -22,69 +22,50 @@
                             <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" insetsLayoutMarginsFromSafeArea="NO" image="sfondo" translatesAutoresizingMaskIntoConstraints="NO" id="DPp-fO-Sok">
                                 <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                             </imageView>
-                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="sh2-hc-8cp" userLabel="View IO Logo">
-                                <rect key="frame" x="0.0" y="120" width="375" height="152"/>
-                                <subviews>
-                                    <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="logo_io" translatesAutoresizingMaskIntoConstraints="NO" id="pdm-K5-7Ya">
-                                        <rect key="frame" x="155.5" y="20" width="64" height="52"/>
-                                    </imageView>
-                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" usesAttributedText="YES" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="JZQ-jS-lo4">
-                                        <rect key="frame" x="97" y="89" width="181.5" height="20.5"/>
-                                        <attributedString key="attributedText">
-                                            <fragment content="l’app dei servizi pubblici">
-                                                <attributes>
-                                                    <color key="NSColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                                                    <font key="NSFont" metaFont="system" size="17"/>
-                                                </attributes>
-                                            </fragment>
-                                        </attributedString>
-                                        <nil key="highlightedColor"/>
-                                    </label>
-                                </subviews>
-                                <constraints>
-                                    <constraint firstItem="pdm-K5-7Ya" firstAttribute="centerX" secondItem="sh2-hc-8cp" secondAttribute="centerX" id="6lo-7S-d71"/>
-                                    <constraint firstItem="JZQ-jS-lo4" firstAttribute="centerX" secondItem="sh2-hc-8cp" secondAttribute="centerX" id="Syg-oQ-nUu"/>
-                                    <constraint firstItem="JZQ-jS-lo4" firstAttribute="top" secondItem="pdm-K5-7Ya" secondAttribute="bottom" constant="17" id="dVa-pS-pez"/>
-                                    <constraint firstItem="pdm-K5-7Ya" firstAttribute="top" secondItem="sh2-hc-8cp" secondAttribute="top" constant="20" id="zEx-ee-gfl"/>
-                                </constraints>
-                            </view>
-                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="logo_consiglio_ministri" translatesAutoresizingMaskIntoConstraints="NO" id="Tei-FP-Id0">
-                                <rect key="frame" x="148.5" y="345" width="78" height="87"/>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="logo_io" translatesAutoresizingMaskIntoConstraints="NO" id="pdm-K5-7Ya">
+                                <rect key="frame" x="155.5" y="259.5" width="64" height="52"/>
                             </imageView>
-                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="aDT-aS-WNn" userLabel="Separator">
-                                <rect key="frame" x="46.5" y="462" width="282" height="2"/>
-                                <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                                <color key="tintColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                            </view>
-                            <stackView opaque="NO" contentMode="scaleToFill" distribution="equalSpacing" spacing="32" translatesAutoresizingMaskIntoConstraints="NO" id="aL7-ys-jhQ">
-                                <rect key="frame" x="46.5" y="494" width="282" height="33"/>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" usesAttributedText="YES" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="JZQ-jS-lo4">
+                                <rect key="frame" x="97" y="319.5" width="181.5" height="20.5"/>
+                                <attributedString key="attributedText">
+                                    <fragment content="l’app dei servizi pubblici">
+                                        <attributes>
+                                            <color key="NSColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                            <font key="NSFont" metaFont="system" size="17"/>
+                                        </attributes>
+                                    </fragment>
+                                </attributedString>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <stackView opaque="NO" contentMode="scaleToFill" distribution="fillProportionally" spacing="32" translatesAutoresizingMaskIntoConstraints="NO" id="aL7-ys-jhQ">
+                                <rect key="frame" x="24" y="571" width="327" height="48"/>
                                 <subviews>
                                     <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="logo_pagopa" translatesAutoresizingMaskIntoConstraints="NO" id="ur6-nk-fTh" userLabel="PagoPa logo">
-                                        <rect key="frame" x="0.0" y="0.0" width="119" height="33"/>
+                                        <rect key="frame" x="0.0" y="0.0" width="104" height="48"/>
+                                    </imageView>
+                                    <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="logo_consiglio_ministri" translatesAutoresizingMaskIntoConstraints="NO" id="Tei-FP-Id0">
+                                        <rect key="frame" x="136" y="0.0" width="55" height="48"/>
                                     </imageView>
                                     <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="euNextLogo" translatesAutoresizingMaskIntoConstraints="NO" id="BYK-0Z-U9E">
-                                        <rect key="frame" x="151" y="0.0" width="131" height="33"/>
+                                        <rect key="frame" x="223" y="0.0" width="104" height="48"/>
                                     </imageView>
                                 </subviews>
                             </stackView>
                         </subviews>
                         <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                         <constraints>
-                            <constraint firstItem="sh2-hc-8cp" firstAttribute="top" secondItem="Dji-FG-dfn" secondAttribute="bottom" constant="120" id="2J8-zi-fZC"/>
-                            <constraint firstItem="BW8-EI-1Nz" firstAttribute="top" secondItem="sh2-hc-8cp" secondAttribute="bottom" constant="395" id="CvU-ld-sm6"/>
-                            <constraint firstItem="aDT-aS-WNn" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="D5X-Aq-dcR"/>
-                            <constraint firstItem="BW8-EI-1Nz" firstAttribute="top" secondItem="aDT-aS-WNn" secondAttribute="bottom" constant="203" id="Dfx-e8-9TM"/>
-                            <constraint firstItem="aL7-ys-jhQ" firstAttribute="top" secondItem="aDT-aS-WNn" secondAttribute="bottom" constant="30" id="JZn-yL-fhL"/>
-                            <constraint firstItem="sh2-hc-8cp" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="MS3-Vt-5kh"/>
+                            <constraint firstAttribute="bottom" secondItem="aL7-ys-jhQ" secondAttribute="bottom" constant="48" id="1g8-n7-WYZ"/>
+                            <constraint firstItem="pdm-K5-7Ya" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="APm-2L-EAF"/>
                             <constraint firstAttribute="trailing" secondItem="DPp-fO-Sok" secondAttribute="trailing" id="MgL-AC-X2a"/>
-                            <constraint firstItem="aDT-aS-WNn" firstAttribute="leading" secondItem="aL7-ys-jhQ" secondAttribute="leading" id="Ot6-1v-vtK"/>
-                            <constraint firstItem="Tei-FP-Id0" firstAttribute="top" secondItem="sh2-hc-8cp" secondAttribute="bottom" constant="73" id="Q6O-va-6Hj"/>
-                            <constraint firstItem="Tei-FP-Id0" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="TAl-7b-NdJ"/>
+                            <constraint firstItem="pdm-K5-7Ya" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="OBs-ee-kkB"/>
+                            <constraint firstItem="JZQ-jS-lo4" firstAttribute="top" secondItem="pdm-K5-7Ya" secondAttribute="bottom" constant="8" id="OEo-H1-u0B"/>
                             <constraint firstItem="DPp-fO-Sok" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="TOF-qK-UX1"/>
-                            <constraint firstItem="sh2-hc-8cp" firstAttribute="leading" secondItem="DPp-fO-Sok" secondAttribute="leading" id="The-ae-ODv"/>
+                            <constraint firstItem="aL7-ys-jhQ" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leadingMargin" constant="8" id="Vqb-vz-bVi"/>
                             <constraint firstItem="DPp-fO-Sok" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="Ylg-bg-Ae3"/>
-                            <constraint firstItem="aDT-aS-WNn" firstAttribute="top" secondItem="Tei-FP-Id0" secondAttribute="bottom" constant="30" id="aFY-k0-pLn"/>
+                            <constraint firstItem="pdm-K5-7Ya" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" constant="-48" id="ayz-qR-dOQ"/>
                             <constraint firstItem="aL7-ys-jhQ" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="nr1-zv-P1U"/>
+                            <constraint firstItem="JZQ-jS-lo4" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="ods-Ud-rpo"/>
+                            <constraint firstItem="Tei-FP-Id0" firstAttribute="centerX" secondItem="pdm-K5-7Ya" secondAttribute="centerX" id="pZI-tr-LRI"/>
                             <constraint firstAttribute="bottom" secondItem="DPp-fO-Sok" secondAttribute="bottom" id="tET-pj-opH"/>
                         </constraints>
                     </view>
@@ -95,10 +76,10 @@
         </scene>
     </scenes>
     <resources>
-        <image name="euNextLogo" width="131" height="30"/>
-        <image name="logo_consiglio_ministri" width="78" height="87"/>
+        <image name="euNextLogo" width="110" height="26"/>
+        <image name="logo_consiglio_ministri" width="43" height="48"/>
         <image name="logo_io" width="64" height="52"/>
-        <image name="logo_pagopa" width="119" height="33"/>
+        <image name="logo_pagopa" width="101" height="28"/>
         <image name="sfondo" width="375" height="667"/>
     </resources>
 </document>
diff --git a/ios/ItaliaApp/de.lproj/InfoPlist.strings b/ios/ItaliaApp/de.lproj/InfoPlist.strings
new file mode 100644
index 00000000000..80f19a40455
--- /dev/null
+++ b/ios/ItaliaApp/de.lproj/InfoPlist.strings
@@ -0,0 +1,7 @@
+"NSCameraUsageDescription" = "Du kannst QR-Codes lesen und pagoPA-Mitteilungen bezahlen."; 
+"NSCalendarsUsageDescription" = "Du kannst Fälligkeiten in deinem Kalender eintragen und eine Benachrichtigung einstellen."; 
+"NSContactsUsageDescription" = "IO benötigt Zugriff auf deine Kontakte, damit du sie als Teilnehmer zu Terminen hinzufügen kannst."; 
+"NSFaceIDUsageDescription" = "IO benötigt Zugriff auf Face ID, um eine schnellere Authentifizierung zu ermöglichen."; 
+"NSPhotoLibraryUsageDescription" = "Du kannst Gutscheine und Zertifikate speichern und Screenshots und Zahlungsmitteilungen hochladen."; 
+"NSMicrophoneUsageDescription" = "IO benötigt Zugriff auf das Mikrofon, wenn du eine Sprachnachricht senden möchtest."; 
+"NSPhotoLibraryAddUsageDescription" = "Du kannst Bilder aus der App auf deinem Gerät speichern.";
\ No newline at end of file
diff --git a/ios/ItaliaApp/de.lproj/Localizable.strings b/ios/ItaliaApp/de.lproj/Localizable.strings
new file mode 100755
index 00000000000..43bb22c1062
--- /dev/null
+++ b/ios/ItaliaApp/de.lproj/Localizable.strings
@@ -0,0 +1,2 @@
+"ALERT_DEVICE_ROOTED_TITLE" = "Gerät mit Jailbreak";
+"ALERT_DEVICE_ROOTED_DESC" = "Dieses Gerät ist gejailbreakt, du kannst diese App aus Sicherheitsgründen nicht verwenden";
diff --git a/ios/ItaliaAppTests/Info.plist b/ios/ItaliaAppTests/Info.plist
index 23908b163b5..d4c8a536487 100644
--- a/ios/ItaliaAppTests/Info.plist
+++ b/ios/ItaliaAppTests/Info.plist
@@ -15,7 +15,7 @@
     <key>CFBundlePackageType</key>
     <string>BNDL</string>
     <key>CFBundleShortVersionString</key>
-    <string>2.53.0</string>
+    <string>2.58.0</string>
     <key>CFBundleSignature</key>
     <string>????</string>
     <key>CFBundleVersion</key>
diff --git a/ios/Podfile b/ios/Podfile
index 74b7bbb04aa..e90b1202f53 100644
--- a/ios/Podfile
+++ b/ios/Podfile
@@ -23,8 +23,9 @@ target 'ItaliaApp' do
   pod 'ReactNativeART', :podspec => '../node_modules/@react-native-community/art/ReactNativeART.podspec'
   use_react_native!(
     :path => config[:reactNativePath],
-    # to enable hermes on iOS, change `false` to `true` and then install pods
-    :production => production,
+    # Hermes is now enabled by default. Disable by setting this flag to false.
+    # Upcoming versions of React Native may rely on get_default_flags(), but
+    # we make it explicit here to aid in the React Native upgrade process.
     :hermes_enabled => true,
     :fabric_enabled => false,
     # An absolute path to your application root.
@@ -44,10 +45,26 @@ target 'ItaliaApp' do
   end
 
   post_install do |installer|
-    react_native_post_install(installer)
+    react_native_post_install(
+      installer,
+      # Set `mac_catalyst_enabled` to `true` in order to apply patches
+      # necessary for Mac Catalyst builds
+      :mac_catalyst_enabled => false
+    )
 
+    __apply_Xcode_12_5_M1_post_install_workaround(installer)
     installer.pods_project.targets.each do |target|
       target.build_configurations.each do |config|
+        if target.name == 'Flipper'
+          file_path = 'Pods/Flipper/xplat/Flipper/FlipperTransportTypes.h'
+          contents = File.read(file_path)
+          unless contents.include?('#include <functional>')
+            File.open(file_path, 'w') do |file|
+              file.puts('#include <functional>')
+              file.puts(contents)
+            end
+          end
+        end        
         # This is needed in order to build the project on Apple silicon.
       	# Beware that after this modification you need Rosetta to run the app 
       	# on the simulator.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 3e3269eef8a..7e61b148698 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1,17 +1,18 @@
 PODS:
+  - Alamofire (5.8.1)
   - boost (1.76.0)
   - BVLinearGradient (2.5.6):
     - React
   - CocoaAsyncSocket (7.6.5)
   - DoubleConversion (1.1.6)
-  - FBLazyVector (0.69.9)
-  - FBReactNativeSpec (0.69.9):
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTRequired (= 0.69.9)
-    - RCTTypeSafety (= 0.69.9)
-    - React-Core (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - ReactCommon/turbomodule/core (= 0.69.9)
+  - FBLazyVector (0.70.15)
+  - FBReactNativeSpec (0.70.15):
+    - RCT-Folly (= 2021.07.22.00)
+    - RCTRequired (= 0.70.15)
+    - RCTTypeSafety (= 0.70.15)
+    - React-Core (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - ReactCommon/turbomodule/core (= 0.70.15)
   - Flipper (0.154.0):
     - Flipper-Folly (~> 2.6)
   - Flipper-Boost-iOSX (1.76.0.1.11)
@@ -74,15 +75,15 @@ PODS:
     - FlipperKit/FlipperKitNetworkPlugin
   - fmt (6.2.1)
   - glog (0.3.5)
-  - GoogleDataTransport (9.1.2):
-    - GoogleUtilities/Environment (~> 7.2)
-    - nanopb (~> 2.30908.0)
+  - GoogleDataTransport (9.3.0):
+    - GoogleUtilities/Environment (~> 7.7)
+    - nanopb (< 2.30910.0, >= 2.30908.0)
     - PromisesObjC (< 3.0, >= 1.2)
-  - GoogleMLKit/BarcodeScanning (2.5.0):
+  - GoogleMLKit/BarcodeScanning (4.0.0):
     - GoogleMLKit/MLKitCore
-    - MLKitBarcodeScanning (~> 1.6.0)
-  - GoogleMLKit/MLKitCore (2.5.0):
-    - MLKitCommon (~> 5.0.0)
+    - MLKitBarcodeScanning (~> 3.0.0)
+  - GoogleMLKit/MLKitCore (4.0.0):
+    - MLKitCommon (~> 9.0.0)
   - GoogleToolboxForMac/DebugUtils (2.3.2):
     - GoogleToolboxForMac/Defines (= 2.3.2)
   - GoogleToolboxForMac/Defines (2.3.2)
@@ -95,277 +96,288 @@ PODS:
     - GoogleToolboxForMac/Defines (= 2.3.2)
     - "GoogleToolboxForMac/NSString+URLArguments (= 2.3.2)"
   - "GoogleToolboxForMac/NSString+URLArguments (2.3.2)"
-  - GoogleUtilities/Environment (7.7.0):
+  - GoogleUtilities/Environment (7.12.0):
     - PromisesObjC (< 3.0, >= 1.2)
-  - GoogleUtilities/Logger (7.7.0):
+  - GoogleUtilities/Logger (7.12.0):
     - GoogleUtilities/Environment
-  - GoogleUtilities/UserDefaults (7.7.0):
+  - GoogleUtilities/UserDefaults (7.12.0):
     - GoogleUtilities/Logger
   - GoogleUtilitiesComponents (1.1.0):
     - GoogleUtilities/Logger
-  - GTMSessionFetcher/Core (1.7.0)
-  - hermes-engine (0.69.9)
+  - GTMSessionFetcher/Core (2.3.0)
+  - hermes-engine (0.70.15)
   - jail-monkey (2.3.2):
     - React
   - libevent (2.1.12)
-  - Mixpanel (3.6.5)
-  - MLImage (1.0.0-beta2)
-  - MLKitBarcodeScanning (1.6.0):
-    - MLKitCommon (~> 5.0)
-    - MLKitVision (~> 3.0)
-  - MLKitCommon (5.0.0):
+  - Mixpanel-swift (4.2.0):
+    - Mixpanel-swift/Complete (= 4.2.0)
+  - Mixpanel-swift/Complete (4.2.0)
+  - MixpanelReactNative (2.4.1):
+    - Mixpanel-swift (= 4.2.0)
+    - React-Core
+  - MLImage (1.0.0-beta4)
+  - MLKitBarcodeScanning (3.0.0):
+    - MLKitCommon (~> 9.0)
+    - MLKitVision (~> 5.0)
+  - MLKitCommon (9.0.0):
     - GoogleDataTransport (~> 9.0)
     - GoogleToolboxForMac/Logger (~> 2.1)
     - "GoogleToolboxForMac/NSData+zlib (~> 2.1)"
     - "GoogleToolboxForMac/NSDictionary+URLArguments (~> 2.1)"
     - GoogleUtilities/UserDefaults (~> 7.0)
     - GoogleUtilitiesComponents (~> 1.0)
-    - GTMSessionFetcher/Core (~> 1.1)
-    - Protobuf (~> 3.12)
-  - MLKitVision (3.0.0):
+    - GTMSessionFetcher/Core (< 3.0, >= 1.1)
+  - MLKitVision (5.0.0):
     - GoogleToolboxForMac/Logger (~> 2.1)
     - "GoogleToolboxForMac/NSData+zlib (~> 2.1)"
-    - GTMSessionFetcher/Core (~> 1.1)
-    - MLImage (= 1.0.0-beta2)
-    - MLKitCommon (~> 5.0)
-    - Protobuf (~> 3.12)
-  - nanopb (2.30908.0):
-    - nanopb/decode (= 2.30908.0)
-    - nanopb/encode (= 2.30908.0)
-  - nanopb/decode (2.30908.0)
-  - nanopb/encode (2.30908.0)
+    - GTMSessionFetcher/Core (< 3.0, >= 1.1)
+    - MLImage (= 1.0.0-beta4)
+    - MLKitCommon (~> 9.0)
+  - nanopb (2.30909.1):
+    - nanopb/decode (= 2.30909.1)
+    - nanopb/encode (= 2.30909.1)
+  - nanopb/decode (2.30909.1)
+  - nanopb/encode (2.30909.1)
   - OpenSSL-Universal (1.1.1100)
-  - pagopa-io-react-native-crypto (0.2.1):
+  - pagopa-io-react-native-crypto (0.3.0):
+    - React-Core
+  - pagopa-io-react-native-http-client (0.1.3):
+    - Alamofire
     - React-Core
-  - pagopa-io-react-native-login-utils (0.2.2):
+  - pagopa-io-react-native-login-utils (1.0.0):
     - React-Core
-  - PromisesObjC (2.0.0)
-  - Protobuf (3.19.1)
-  - RCT-Folly (2021.06.28.00-v2):
+  - pagopa-react-native-zendesk (0.3.29):
+    - React-Core
+    - ZendeskAnswerBotSDK
+    - ZendeskChatSDK
+    - ZendeskMessagingAPISDK
+    - ZendeskSupportSDK
+  - PromisesObjC (2.3.1)
+  - RCT-Folly (2021.07.22.00):
     - boost
     - DoubleConversion
     - fmt (~> 6.2.1)
     - glog
-    - RCT-Folly/Default (= 2021.06.28.00-v2)
-  - RCT-Folly/Default (2021.06.28.00-v2):
+    - RCT-Folly/Default (= 2021.07.22.00)
+  - RCT-Folly/Default (2021.07.22.00):
     - boost
     - DoubleConversion
     - fmt (~> 6.2.1)
     - glog
-  - RCT-Folly/Futures (2021.06.28.00-v2):
+  - RCT-Folly/Futures (2021.07.22.00):
     - boost
     - DoubleConversion
     - fmt (~> 6.2.1)
     - glog
     - libevent
-  - RCTRequired (0.69.9)
-  - RCTTypeSafety (0.69.9):
-    - FBLazyVector (= 0.69.9)
-    - RCTRequired (= 0.69.9)
-    - React-Core (= 0.69.9)
-  - React (0.69.9):
-    - React-Core (= 0.69.9)
-    - React-Core/DevSupport (= 0.69.9)
-    - React-Core/RCTWebSocket (= 0.69.9)
-    - React-RCTActionSheet (= 0.69.9)
-    - React-RCTAnimation (= 0.69.9)
-    - React-RCTBlob (= 0.69.9)
-    - React-RCTImage (= 0.69.9)
-    - React-RCTLinking (= 0.69.9)
-    - React-RCTNetwork (= 0.69.9)
-    - React-RCTSettings (= 0.69.9)
-    - React-RCTText (= 0.69.9)
-    - React-RCTVibration (= 0.69.9)
-  - React-bridging (0.69.9):
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-jsi (= 0.69.9)
-  - React-callinvoker (0.69.9)
-  - React-Codegen (0.69.9):
-    - FBReactNativeSpec (= 0.69.9)
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTRequired (= 0.69.9)
-    - RCTTypeSafety (= 0.69.9)
-    - React-Core (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-jsiexecutor (= 0.69.9)
-    - ReactCommon/turbomodule/core (= 0.69.9)
-  - React-Core (0.69.9):
+  - RCTRequired (0.70.15)
+  - RCTTypeSafety (0.70.15):
+    - FBLazyVector (= 0.70.15)
+    - RCTRequired (= 0.70.15)
+    - React-Core (= 0.70.15)
+  - React (0.70.15):
+    - React-Core (= 0.70.15)
+    - React-Core/DevSupport (= 0.70.15)
+    - React-Core/RCTWebSocket (= 0.70.15)
+    - React-RCTActionSheet (= 0.70.15)
+    - React-RCTAnimation (= 0.70.15)
+    - React-RCTBlob (= 0.70.15)
+    - React-RCTImage (= 0.70.15)
+    - React-RCTLinking (= 0.70.15)
+    - React-RCTNetwork (= 0.70.15)
+    - React-RCTSettings (= 0.70.15)
+    - React-RCTText (= 0.70.15)
+    - React-RCTVibration (= 0.70.15)
+  - React-bridging (0.70.15):
+    - RCT-Folly (= 2021.07.22.00)
+    - React-jsi (= 0.70.15)
+  - React-callinvoker (0.70.15)
+  - React-Codegen (0.70.15):
+    - FBReactNativeSpec (= 0.70.15)
+    - RCT-Folly (= 2021.07.22.00)
+    - RCTRequired (= 0.70.15)
+    - RCTTypeSafety (= 0.70.15)
+    - React-Core (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-jsiexecutor (= 0.70.15)
+    - ReactCommon/turbomodule/core (= 0.70.15)
+  - React-Core (0.70.15):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/Default (= 0.69.9)
-    - React-cxxreact (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-jsiexecutor (= 0.69.9)
-    - React-perflogger (= 0.69.9)
+    - RCT-Folly (= 2021.07.22.00)
+    - React-Core/Default (= 0.70.15)
+    - React-cxxreact (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-jsiexecutor (= 0.70.15)
+    - React-perflogger (= 0.70.15)
     - Yoga
-  - React-Core/CoreModulesHeaders (0.69.9):
+  - React-Core/CoreModulesHeaders (0.70.15):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
+    - RCT-Folly (= 2021.07.22.00)
     - React-Core/Default
-    - React-cxxreact (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-jsiexecutor (= 0.69.9)
-    - React-perflogger (= 0.69.9)
+    - React-cxxreact (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-jsiexecutor (= 0.70.15)
+    - React-perflogger (= 0.70.15)
     - Yoga
-  - React-Core/Default (0.69.9):
+  - React-Core/Default (0.70.15):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-cxxreact (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-jsiexecutor (= 0.69.9)
-    - React-perflogger (= 0.69.9)
+    - RCT-Folly (= 2021.07.22.00)
+    - React-cxxreact (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-jsiexecutor (= 0.70.15)
+    - React-perflogger (= 0.70.15)
     - Yoga
-  - React-Core/DevSupport (0.69.9):
+  - React-Core/DevSupport (0.70.15):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/Default (= 0.69.9)
-    - React-Core/RCTWebSocket (= 0.69.9)
-    - React-cxxreact (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-jsiexecutor (= 0.69.9)
-    - React-jsinspector (= 0.69.9)
-    - React-perflogger (= 0.69.9)
+    - RCT-Folly (= 2021.07.22.00)
+    - React-Core/Default (= 0.70.15)
+    - React-Core/RCTWebSocket (= 0.70.15)
+    - React-cxxreact (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-jsiexecutor (= 0.70.15)
+    - React-jsinspector (= 0.70.15)
+    - React-perflogger (= 0.70.15)
     - Yoga
-  - React-Core/RCTActionSheetHeaders (0.69.9):
+  - React-Core/RCTActionSheetHeaders (0.70.15):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
+    - RCT-Folly (= 2021.07.22.00)
     - React-Core/Default
-    - React-cxxreact (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-jsiexecutor (= 0.69.9)
-    - React-perflogger (= 0.69.9)
+    - React-cxxreact (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-jsiexecutor (= 0.70.15)
+    - React-perflogger (= 0.70.15)
     - Yoga
-  - React-Core/RCTAnimationHeaders (0.69.9):
+  - React-Core/RCTAnimationHeaders (0.70.15):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
+    - RCT-Folly (= 2021.07.22.00)
     - React-Core/Default
-    - React-cxxreact (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-jsiexecutor (= 0.69.9)
-    - React-perflogger (= 0.69.9)
+    - React-cxxreact (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-jsiexecutor (= 0.70.15)
+    - React-perflogger (= 0.70.15)
     - Yoga
-  - React-Core/RCTBlobHeaders (0.69.9):
+  - React-Core/RCTBlobHeaders (0.70.15):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
+    - RCT-Folly (= 2021.07.22.00)
     - React-Core/Default
-    - React-cxxreact (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-jsiexecutor (= 0.69.9)
-    - React-perflogger (= 0.69.9)
+    - React-cxxreact (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-jsiexecutor (= 0.70.15)
+    - React-perflogger (= 0.70.15)
     - Yoga
-  - React-Core/RCTImageHeaders (0.69.9):
+  - React-Core/RCTImageHeaders (0.70.15):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
+    - RCT-Folly (= 2021.07.22.00)
     - React-Core/Default
-    - React-cxxreact (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-jsiexecutor (= 0.69.9)
-    - React-perflogger (= 0.69.9)
+    - React-cxxreact (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-jsiexecutor (= 0.70.15)
+    - React-perflogger (= 0.70.15)
     - Yoga
-  - React-Core/RCTLinkingHeaders (0.69.9):
+  - React-Core/RCTLinkingHeaders (0.70.15):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
+    - RCT-Folly (= 2021.07.22.00)
     - React-Core/Default
-    - React-cxxreact (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-jsiexecutor (= 0.69.9)
-    - React-perflogger (= 0.69.9)
+    - React-cxxreact (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-jsiexecutor (= 0.70.15)
+    - React-perflogger (= 0.70.15)
     - Yoga
-  - React-Core/RCTNetworkHeaders (0.69.9):
+  - React-Core/RCTNetworkHeaders (0.70.15):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
+    - RCT-Folly (= 2021.07.22.00)
     - React-Core/Default
-    - React-cxxreact (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-jsiexecutor (= 0.69.9)
-    - React-perflogger (= 0.69.9)
+    - React-cxxreact (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-jsiexecutor (= 0.70.15)
+    - React-perflogger (= 0.70.15)
     - Yoga
-  - React-Core/RCTSettingsHeaders (0.69.9):
+  - React-Core/RCTSettingsHeaders (0.70.15):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
+    - RCT-Folly (= 2021.07.22.00)
     - React-Core/Default
-    - React-cxxreact (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-jsiexecutor (= 0.69.9)
-    - React-perflogger (= 0.69.9)
+    - React-cxxreact (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-jsiexecutor (= 0.70.15)
+    - React-perflogger (= 0.70.15)
     - Yoga
-  - React-Core/RCTTextHeaders (0.69.9):
+  - React-Core/RCTTextHeaders (0.70.15):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
+    - RCT-Folly (= 2021.07.22.00)
     - React-Core/Default
-    - React-cxxreact (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-jsiexecutor (= 0.69.9)
-    - React-perflogger (= 0.69.9)
+    - React-cxxreact (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-jsiexecutor (= 0.70.15)
+    - React-perflogger (= 0.70.15)
     - Yoga
-  - React-Core/RCTVibrationHeaders (0.69.9):
+  - React-Core/RCTVibrationHeaders (0.70.15):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
+    - RCT-Folly (= 2021.07.22.00)
     - React-Core/Default
-    - React-cxxreact (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-jsiexecutor (= 0.69.9)
-    - React-perflogger (= 0.69.9)
+    - React-cxxreact (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-jsiexecutor (= 0.70.15)
+    - React-perflogger (= 0.70.15)
     - Yoga
-  - React-Core/RCTWebSocket (0.69.9):
+  - React-Core/RCTWebSocket (0.70.15):
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/Default (= 0.69.9)
-    - React-cxxreact (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-jsiexecutor (= 0.69.9)
-    - React-perflogger (= 0.69.9)
+    - RCT-Folly (= 2021.07.22.00)
+    - React-Core/Default (= 0.70.15)
+    - React-cxxreact (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-jsiexecutor (= 0.70.15)
+    - React-perflogger (= 0.70.15)
     - Yoga
-  - React-CoreModules (0.69.9):
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.69.9)
-    - React-Codegen (= 0.69.9)
-    - React-Core/CoreModulesHeaders (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-RCTImage (= 0.69.9)
-    - ReactCommon/turbomodule/core (= 0.69.9)
-  - React-cxxreact (0.69.9):
+  - React-CoreModules (0.70.15):
+    - RCT-Folly (= 2021.07.22.00)
+    - RCTTypeSafety (= 0.70.15)
+    - React-Codegen (= 0.70.15)
+    - React-Core/CoreModulesHeaders (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-RCTImage (= 0.70.15)
+    - ReactCommon/turbomodule/core (= 0.70.15)
+  - React-cxxreact (0.70.15):
     - boost (= 1.76.0)
     - DoubleConversion
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-callinvoker (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-jsinspector (= 0.69.9)
-    - React-logger (= 0.69.9)
-    - React-perflogger (= 0.69.9)
-    - React-runtimeexecutor (= 0.69.9)
-  - React-hermes (0.69.9):
+    - RCT-Folly (= 2021.07.22.00)
+    - React-callinvoker (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-jsinspector (= 0.70.15)
+    - React-logger (= 0.70.15)
+    - React-perflogger (= 0.70.15)
+    - React-runtimeexecutor (= 0.70.15)
+  - React-hermes (0.70.15):
     - DoubleConversion
     - glog
     - hermes-engine
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCT-Folly/Futures (= 2021.06.28.00-v2)
-    - React-cxxreact (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-jsiexecutor (= 0.69.9)
-    - React-jsinspector (= 0.69.9)
-    - React-perflogger (= 0.69.9)
-  - React-jsi (0.69.9):
+    - RCT-Folly (= 2021.07.22.00)
+    - RCT-Folly/Futures (= 2021.07.22.00)
+    - React-cxxreact (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-jsiexecutor (= 0.70.15)
+    - React-jsinspector (= 0.70.15)
+    - React-perflogger (= 0.70.15)
+  - React-jsi (0.70.15):
     - boost (= 1.76.0)
     - DoubleConversion
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-jsi/Default (= 0.69.9)
-  - React-jsi/Default (0.69.9):
+    - RCT-Folly (= 2021.07.22.00)
+    - React-jsi/Default (= 0.70.15)
+  - React-jsi/Default (0.70.15):
     - boost (= 1.76.0)
     - DoubleConversion
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
-  - React-jsiexecutor (0.69.9):
+    - RCT-Folly (= 2021.07.22.00)
+  - React-jsiexecutor (0.70.15):
     - DoubleConversion
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-cxxreact (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-perflogger (= 0.69.9)
-  - React-jsinspector (0.69.9)
-  - React-logger (0.69.9):
+    - RCT-Folly (= 2021.07.22.00)
+    - React-cxxreact (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-perflogger (= 0.70.15)
+  - React-jsinspector (0.70.15)
+  - React-logger (0.70.15):
     - glog
   - react-native-background-timer (2.1.1):
     - React
@@ -379,7 +391,7 @@ PODS:
     - React-Core
   - react-native-cookies (6.2.1):
     - React-Core
-  - react-native-document-picker (9.0.1):
+  - react-native-document-picker (9.1.1):
     - React-Core
   - react-native-fingerprint-scanner (6.0.0):
     - React
@@ -389,9 +401,8 @@ PODS:
     - React-Core
   - react-native-image-picker (4.10.3):
     - React-Core
-  - react-native-mixpanel (1.2.0):
-    - Mixpanel (~> 3.6.0)
-    - React
+  - react-native-pager-view (6.2.3):
+    - React-Core
   - react-native-pdf (6.4.0):
     - React-Core
   - react-native-pdf-thumbnail (1.2.1):
@@ -410,72 +421,72 @@ PODS:
     - React
   - react-native-webview (11.26.1):
     - React-Core
-  - React-perflogger (0.69.9)
-  - React-RCTActionSheet (0.69.9):
-    - React-Core/RCTActionSheetHeaders (= 0.69.9)
-  - React-RCTAnimation (0.69.9):
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.69.9)
-    - React-Codegen (= 0.69.9)
-    - React-Core/RCTAnimationHeaders (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - ReactCommon/turbomodule/core (= 0.69.9)
-  - React-RCTBlob (0.69.9):
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Codegen (= 0.69.9)
-    - React-Core/RCTBlobHeaders (= 0.69.9)
-    - React-Core/RCTWebSocket (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-RCTNetwork (= 0.69.9)
-    - ReactCommon/turbomodule/core (= 0.69.9)
-  - React-RCTImage (0.69.9):
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.69.9)
-    - React-Codegen (= 0.69.9)
-    - React-Core/RCTImageHeaders (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-RCTNetwork (= 0.69.9)
-    - ReactCommon/turbomodule/core (= 0.69.9)
-  - React-RCTLinking (0.69.9):
-    - React-Codegen (= 0.69.9)
-    - React-Core/RCTLinkingHeaders (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - ReactCommon/turbomodule/core (= 0.69.9)
-  - React-RCTNetwork (0.69.9):
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.69.9)
-    - React-Codegen (= 0.69.9)
-    - React-Core/RCTNetworkHeaders (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - ReactCommon/turbomodule/core (= 0.69.9)
-  - React-RCTSettings (0.69.9):
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.69.9)
-    - React-Codegen (= 0.69.9)
-    - React-Core/RCTSettingsHeaders (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - ReactCommon/turbomodule/core (= 0.69.9)
-  - React-RCTText (0.69.9):
-    - React-Core/RCTTextHeaders (= 0.69.9)
-  - React-RCTVibration (0.69.9):
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Codegen (= 0.69.9)
-    - React-Core/RCTVibrationHeaders (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - ReactCommon/turbomodule/core (= 0.69.9)
-  - React-runtimeexecutor (0.69.9):
-    - React-jsi (= 0.69.9)
-  - ReactCommon/turbomodule/core (0.69.9):
+  - React-perflogger (0.70.15)
+  - React-RCTActionSheet (0.70.15):
+    - React-Core/RCTActionSheetHeaders (= 0.70.15)
+  - React-RCTAnimation (0.70.15):
+    - RCT-Folly (= 2021.07.22.00)
+    - RCTTypeSafety (= 0.70.15)
+    - React-Codegen (= 0.70.15)
+    - React-Core/RCTAnimationHeaders (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - ReactCommon/turbomodule/core (= 0.70.15)
+  - React-RCTBlob (0.70.15):
+    - RCT-Folly (= 2021.07.22.00)
+    - React-Codegen (= 0.70.15)
+    - React-Core/RCTBlobHeaders (= 0.70.15)
+    - React-Core/RCTWebSocket (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-RCTNetwork (= 0.70.15)
+    - ReactCommon/turbomodule/core (= 0.70.15)
+  - React-RCTImage (0.70.15):
+    - RCT-Folly (= 2021.07.22.00)
+    - RCTTypeSafety (= 0.70.15)
+    - React-Codegen (= 0.70.15)
+    - React-Core/RCTImageHeaders (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-RCTNetwork (= 0.70.15)
+    - ReactCommon/turbomodule/core (= 0.70.15)
+  - React-RCTLinking (0.70.15):
+    - React-Codegen (= 0.70.15)
+    - React-Core/RCTLinkingHeaders (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - ReactCommon/turbomodule/core (= 0.70.15)
+  - React-RCTNetwork (0.70.15):
+    - RCT-Folly (= 2021.07.22.00)
+    - RCTTypeSafety (= 0.70.15)
+    - React-Codegen (= 0.70.15)
+    - React-Core/RCTNetworkHeaders (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - ReactCommon/turbomodule/core (= 0.70.15)
+  - React-RCTSettings (0.70.15):
+    - RCT-Folly (= 2021.07.22.00)
+    - RCTTypeSafety (= 0.70.15)
+    - React-Codegen (= 0.70.15)
+    - React-Core/RCTSettingsHeaders (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - ReactCommon/turbomodule/core (= 0.70.15)
+  - React-RCTText (0.70.15):
+    - React-Core/RCTTextHeaders (= 0.70.15)
+  - React-RCTVibration (0.70.15):
+    - RCT-Folly (= 2021.07.22.00)
+    - React-Codegen (= 0.70.15)
+    - React-Core/RCTVibrationHeaders (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - ReactCommon/turbomodule/core (= 0.70.15)
+  - React-runtimeexecutor (0.70.15):
+    - React-jsi (= 0.70.15)
+  - ReactCommon/turbomodule/core (0.70.15):
     - DoubleConversion
     - glog
-    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-bridging (= 0.69.9)
-    - React-callinvoker (= 0.69.9)
-    - React-Core (= 0.69.9)
-    - React-cxxreact (= 0.69.9)
-    - React-jsi (= 0.69.9)
-    - React-logger (= 0.69.9)
-    - React-perflogger (= 0.69.9)
+    - RCT-Folly (= 2021.07.22.00)
+    - React-bridging (= 0.70.15)
+    - React-callinvoker (= 0.70.15)
+    - React-Core (= 0.70.15)
+    - React-cxxreact (= 0.70.15)
+    - React-jsi (= 0.70.15)
+    - React-logger (= 0.70.15)
+    - React-perflogger (= 0.70.15)
   - ReactNativeART (1.2.0):
     - React
   - ReactNativeExceptionHandler (2.10.8):
@@ -486,17 +497,13 @@ PODS:
     - React-Core
   - RNCClipboard (1.10.0):
     - React-Core
-  - RNCPicker (2.4.1):
-    - React-Core
   - RNCPushNotificationIOS (1.8.0):
     - React-Core
-  - RNDateTimePicker (3.5.2):
-    - React-Core
   - RNDeviceInfo (10.8.0):
     - React-Core
   - RNFS (2.18.0):
     - React
-  - RNGestureHandler (2.12.0):
+  - RNGestureHandler (2.15.0):
     - React-Core
   - RNI18n (2.0.15):
     - React
@@ -536,21 +543,16 @@ PODS:
     - React-RCTText
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNScreens (2.18.1):
+  - RNScreens (3.30.1):
     - React-Core
+    - React-RCTImage
   - RNSha256 (1.2.3):
     - React
   - RNShare (7.3.9):
     - React-Core
-  - RNSVG (12.3.0):
+  - RNSVG (15.1.0):
     - React-Core
-  - RNZendeskChat (0.3.23):
-    - React
-    - ZendeskAnswerBotSDK (~> 3.0.0)
-    - ZendeskChatSDK (~> 3.0.0)
-    - ZendeskMessagingAPISDK (~> 4.0.0)
-    - ZendeskSupportSDK (~> 6.0.0)
-  - SocketRocket (0.6.0)
+  - SocketRocket (0.6.1)
   - vision-camera-code-scanner (0.2.0):
     - GoogleMLKit/BarcodeScanning
     - React-Core
@@ -561,28 +563,28 @@ PODS:
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
-  - ZendeskAnswerBotProvidersSDK (3.0.0):
-    - ZendeskSupportProvidersSDK (= 6.0.0)
-  - ZendeskAnswerBotSDK (3.0.0):
-    - ZendeskAnswerBotProvidersSDK (= 3.0.0)
-    - ZendeskMessagingSDK (= 4.0.0)
-  - ZendeskChatProvidersSDK (3.0.0)
-  - ZendeskChatSDK (3.0.0):
-    - ZendeskChatProvidersSDK (= 3.0.0)
-    - ZendeskMessagingSDK (= 4.0.0)
-  - ZendeskCommonUISDK (7.0.0)
-  - ZendeskCoreSDK (3.0.0)
-  - ZendeskMessagingAPISDK (4.0.0):
-    - ZendeskSDKConfigurationsSDK (= 2.0.0)
-  - ZendeskMessagingSDK (4.0.0):
-    - ZendeskCommonUISDK (= 7.0.0)
-    - ZendeskMessagingAPISDK (= 4.0.0)
-  - ZendeskSDKConfigurationsSDK (2.0.0)
-  - ZendeskSupportProvidersSDK (6.0.0):
-    - ZendeskCoreSDK (= 3.0.0)
-  - ZendeskSupportSDK (6.0.0):
-    - ZendeskMessagingSDK (= 4.0.0)
-    - ZendeskSupportProvidersSDK (= 6.0.0)
+  - ZendeskAnswerBotProvidersSDK (5.0.0):
+    - ZendeskSupportProvidersSDK (~> 8.0.0)
+  - ZendeskAnswerBotSDK (5.0.0):
+    - ZendeskAnswerBotProvidersSDK (~> 5.0.0)
+    - ZendeskMessagingSDK (~> 6.0.0)
+  - ZendeskChatProvidersSDK (5.0.0)
+  - ZendeskChatSDK (5.0.0):
+    - ZendeskChatProvidersSDK (~> 5.0.0)
+    - ZendeskMessagingSDK (~> 6.0.0)
+  - ZendeskCommonUISDK (9.0.0)
+  - ZendeskCoreSDK (5.0.0)
+  - ZendeskMessagingAPISDK (6.0.0):
+    - ZendeskSDKConfigurationsSDK (~> 4.0.0)
+  - ZendeskMessagingSDK (6.0.0):
+    - ZendeskCommonUISDK (~> 9.0.0)
+    - ZendeskMessagingAPISDK (~> 6.0.0)
+  - ZendeskSDKConfigurationsSDK (4.0.0)
+  - ZendeskSupportProvidersSDK (8.0.0):
+    - ZendeskCoreSDK (~> 5.0.0)
+  - ZendeskSupportSDK (8.0.0):
+    - ZendeskMessagingSDK (~> 6.0.0)
+    - ZendeskSupportProvidersSDK (~> 8.0.0)
   - ZXingObjC (3.6.5):
     - ZXingObjC/All (= 3.6.5)
   - ZXingObjC/All (3.6.5)
@@ -618,9 +620,12 @@ DEPENDENCIES:
   - hermes-engine (from `../node_modules/react-native/sdks/hermes/hermes-engine.podspec`)
   - jail-monkey (from `../node_modules/jail-monkey`)
   - libevent (~> 2.1.12)
+  - MixpanelReactNative (from `../node_modules/mixpanel-react-native`)
   - OpenSSL-Universal (= 1.1.1100)
   - "pagopa-io-react-native-crypto (from `../node_modules/@pagopa/io-react-native-crypto`)"
+  - "pagopa-io-react-native-http-client (from `../node_modules/@pagopa/io-react-native-http-client`)"
   - "pagopa-io-react-native-login-utils (from `../node_modules/@pagopa/io-react-native-login-utils`)"
+  - "pagopa-react-native-zendesk (from `../node_modules/@pagopa/io-react-native-zendesk`)"
   - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
   - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
   - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`)
@@ -647,7 +652,7 @@ DEPENDENCIES:
   - react-native-flipper (from `../node_modules/react-native-flipper`)
   - react-native-get-random-values (from `../node_modules/react-native-get-random-values`)
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
-  - react-native-mixpanel (from `../node_modules/react-native-mixpanel`)
+  - react-native-pager-view (from `../node_modules/react-native-pager-view`)
   - react-native-pdf (from `../node_modules/react-native-pdf`)
   - react-native-pdf-thumbnail (from `../node_modules/react-native-pdf-thumbnail`)
   - react-native-render-html (from `../node_modules/react-native-render-html`)
@@ -674,9 +679,7 @@ DEPENDENCIES:
   - RNCalendarEvents (from `../node_modules/react-native-calendar-events`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
-  - "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
   - "RNCPushNotificationIOS (from `../node_modules/@react-native-community/push-notification-ios`)"
-  - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNFS (from `../node_modules/react-native-fs`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
@@ -690,13 +693,13 @@ DEPENDENCIES:
   - RNSha256 (from `../node_modules/react-native-sha256`)
   - RNShare (from `../node_modules/react-native-share`)
   - RNSVG (from `../node_modules/react-native-svg`)
-  - RNZendeskChat (from `../node_modules/io-react-native-zendesk`)
   - vision-camera-code-scanner (from `../node_modules/vision-camera-code-scanner`)
   - VisionCamera (from `../node_modules/react-native-vision-camera`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
   trunk:
+    - Alamofire
     - CocoaAsyncSocket
     - Flipper
     - Flipper-Boost-iOSX
@@ -715,7 +718,7 @@ SPEC REPOS:
     - GoogleUtilitiesComponents
     - GTMSessionFetcher
     - libevent
-    - Mixpanel
+    - Mixpanel-swift
     - MLImage
     - MLKitBarcodeScanning
     - MLKitCommon
@@ -723,7 +726,6 @@ SPEC REPOS:
     - nanopb
     - OpenSSL-Universal
     - PromisesObjC
-    - Protobuf
     - SocketRocket
     - YogaKit
     - ZendeskAnswerBotProvidersSDK
@@ -756,10 +758,16 @@ EXTERNAL SOURCES:
     :podspec: "../node_modules/react-native/sdks/hermes/hermes-engine.podspec"
   jail-monkey:
     :path: "../node_modules/jail-monkey"
+  MixpanelReactNative:
+    :path: "../node_modules/mixpanel-react-native"
   pagopa-io-react-native-crypto:
     :path: "../node_modules/@pagopa/io-react-native-crypto"
+  pagopa-io-react-native-http-client:
+    :path: "../node_modules/@pagopa/io-react-native-http-client"
   pagopa-io-react-native-login-utils:
     :path: "../node_modules/@pagopa/io-react-native-login-utils"
+  pagopa-react-native-zendesk:
+    :path: "../node_modules/@pagopa/io-react-native-zendesk"
   RCT-Folly:
     :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
   RCTRequired:
@@ -810,8 +818,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-get-random-values"
   react-native-image-picker:
     :path: "../node_modules/react-native-image-picker"
-  react-native-mixpanel:
-    :path: "../node_modules/react-native-mixpanel"
+  react-native-pager-view:
+    :path: "../node_modules/react-native-pager-view"
   react-native-pdf:
     :path: "../node_modules/react-native-pdf"
   react-native-pdf-thumbnail:
@@ -864,12 +872,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-async-storage/async-storage"
   RNCClipboard:
     :path: "../node_modules/@react-native-clipboard/clipboard"
-  RNCPicker:
-    :path: "../node_modules/@react-native-picker/picker"
   RNCPushNotificationIOS:
     :path: "../node_modules/@react-native-community/push-notification-ios"
-  RNDateTimePicker:
-    :path: "../node_modules/@react-native-community/datetimepicker"
   RNDeviceInfo:
     :path: "../node_modules/react-native-device-info"
   RNFS:
@@ -896,8 +900,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-share"
   RNSVG:
     :path: "../node_modules/react-native-svg"
-  RNZendeskChat:
-    :path: "../node_modules/io-react-native-zendesk"
   vision-camera-code-scanner:
     :path: "../node_modules/vision-camera-code-scanner"
   VisionCamera:
@@ -906,12 +908,13 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  boost: a7c83b31436843459a1961bfd74b96033dc77234
+  Alamofire: 3ca42e259043ee0dc5c0cdd76c4bc568b8e42af7
+  boost: 9fa78656d705f55b1220151d997e57e2a3f2cde0
   BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
-  FBLazyVector: d3c1d2923b1009f4e709e8f1b793dedf5b323454
-  FBReactNativeSpec: d460df7d796ed4979c6cd4e092145b63eb28b5bb
+  FBLazyVector: 9cf707e46f9bd90816b7c91b2c1c8b8a2f549527
+  FBReactNativeSpec: 5ce1ea97a4309ded19af6c21f13f63ee3cabfed2
   Flipper: 53851f5b89559bb6e251572589dc166d1f8d6e2e
   Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c
   Flipper-DoubleConversion: 2dc99b02f658daf147069aad9dbd29d8feb06d30
@@ -922,53 +925,55 @@ SPEC CHECKSUMS:
   Flipper-RSocket: d9d9ade67cbecf6ac10730304bf5607266dd2541
   FlipperKit: 51cf8b6f5b0931e251c57d4d60a15a1c2ba546aa
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 3d02b25ca00c2d456734d0bcff864cbc62f6ae1a
-  GoogleDataTransport: 629c20a4d363167143f30ea78320d5a7eb8bd940
-  GoogleMLKit: 0d7f5aa2f8a2f2ea9d849a05abdbe80974b0ec83
+  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
+  GoogleDataTransport: 57c22343ab29bc686febbf7cbb13bad167c2d8fe
+  GoogleMLKit: 2bd0dc6253c4d4f227aad460f69215a504b2980e
   GoogleToolboxForMac: 8bef7c7c5cf7291c687cf5354f39f9db6399ad34
-  GoogleUtilities: e0913149f6b0625b553d70dae12b49fc62914fd1
+  GoogleUtilities: 0759d1a57ebb953965c2dfe0ba4c82e95ccc2e34
   GoogleUtilitiesComponents: 679b2c881db3b615a2777504623df6122dd20afe
-  GTMSessionFetcher: 43748f93435c2aa068b1cbe39655aaf600652e91
-  hermes-engine: f648f65e30dd2ef478c08024259c881f0a1522bf
+  GTMSessionFetcher: 3a63d75eecd6aa32c2fc79f578064e1214dfdec2
+  hermes-engine: 2592781da1571e4375dfd897f9462638c2d0ceb9
   jail-monkey: d7c5048b2336f22ee9c9e0efa145f1f917338ea9
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
-  Mixpanel: de8296d8568806ab17bfced0f823c908b808e1e0
-  MLImage: a454f9f8ecfd537783a12f9488f5be1a68820829
-  MLKitBarcodeScanning: 867463093fe27a31260898e239d5d8305be29b28
-  MLKitCommon: 3bc17c6f7d25ce3660f030350b46ae7ec9ebca6e
-  MLKitVision: e87dc3f2e456a6ab32361ebd985e078dd2746143
-  nanopb: a0ba3315591a9ae0a16a309ee504766e90db0c96
+  Mixpanel-swift: e5dd85295923e6a875acf17ccbab8d2ecb10ea65
+  MixpanelReactNative: 0101b8828c2f335c128850e71ab7d3b7adde089a
+  MLImage: 7bb7c4264164ade9bf64f679b40fb29c8f33ee9b
+  MLKitBarcodeScanning: 04e264482c5f3810cb89ebc134ef6b61e67db505
+  MLKitCommon: c1b791c3e667091918d91bda4bba69a91011e390
+  MLKitVision: 8baa5f46ee3352614169b85250574fde38c36f49
+  nanopb: d4d75c12cd1316f4a64e3c6963f879ecd4b5e0d5
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
-  pagopa-io-react-native-crypto: 644fece16966f2e1ea1f872344ee5a3c6c8761a1
-  pagopa-io-react-native-login-utils: 51a58dc0e5fe3cba461759b9e98e795fc22e17c8
-  PromisesObjC: 68159ce6952d93e17b2dfe273b8c40907db5ba58
-  Protobuf: 3724efa50cb2846d7ccebc8691c574e85fd74471
-  RCT-Folly: b9d9fe1fc70114b751c076104e52f3b1b5e5a95a
-  RCTRequired: fe80e9f71dd15939e5399dd94d0aa0e5e069d592
-  RCTTypeSafety: 4c802f7c4b9e7c55470e7fc56d50385cbfcce89b
-  React: efe0b6d0b7401a208d2d1bf8320c0b6a0dcd593b
-  React-bridging: 11a324da43d8467cfe528ccff0e00ab43bdf1cf4
-  React-callinvoker: d4d34002df449053784f1131a6382e526d172395
-  React-Codegen: 63eb91553568558cbd6fb2f336c3ff2fea66b37a
-  React-Core: 2875b1749729d07ef7cacef36e8b1381f27cc86e
-  React-CoreModules: 8b6665f9b128b875660d75a7144122c742ad4af9
-  React-cxxreact: 76d426551a4d1d6f623ef8f87a26690d5a6be93e
-  React-hermes: 9adb1d978e6d6b39fb6f4a4b340e50bf1fcfdf08
-  React-jsi: 47b65f4f789f198004c47e5b6ceaae95ea3f3659
-  React-jsiexecutor: 3b506d7fc50275bf44f8fd5624f23eaedd78bf78
-  React-jsinspector: 5b92a5a30e02e1a21802f293cc71e05d887c7378
-  React-logger: 96d904c5bc87c2660d48e6a36fb2edf65f9cfb11
+  pagopa-io-react-native-crypto: 6aa9f33e4bf64ef420ad97c720c1ad0f876cd470
+  pagopa-io-react-native-http-client: 14b1ed3cd090108f9cb324f951811fe556b81e51
+  pagopa-io-react-native-login-utils: 442a5e2ab8db2c476fed2cff6d7ad16388ff1f21
+  pagopa-react-native-zendesk: e4a63ee0745a567b641110f7ff78e457086ab7a3
+  PromisesObjC: c50d2056b5253dadbd6c2bea79b0674bd5a52fa4
+  RCT-Folly: 0080d0a6ebf2577475bda044aa59e2ca1f909cda
+  RCTRequired: 2a96ea90ffddd10cc43115bd93803692e09b5d9a
+  RCTTypeSafety: 02c99baddcf0b3393bf58e6d9b792e83a37716b4
+  React: 45e3210df90d25ec6da7fc286943b377b63a92ec
+  React-bridging: e3a18265bbd59003562e29429985e0923a5b6286
+  React-callinvoker: 344ff205a470c3c99b4daf0a2dff9bc29045d6c5
+  React-Codegen: 2b1765b0e1a38b8b3601178ca27c1e9216e81632
+  React-Core: 93efb81ef85fafee7f83f7ef6ecf546b2e1ee2c0
+  React-CoreModules: 4eb535b1650b718cb3680767c1b9a1cacf649cbc
+  React-cxxreact: 283248db3101de28d6cf0fe438a2dc95537ee472
+  React-hermes: 5439b771de0b04930c97888cc4c28852aa37389c
+  React-jsi: 560bdf0bc36d5c137ac962c0eb4b60b50c304d77
+  React-jsiexecutor: d2eebcd5a432f90be3baa5d1309f47d05478ea61
+  React-jsinspector: bfedded1f4f562d29c2d4a8bb795c9a150a739e4
+  React-logger: 31f198387a04172be49fe38e41a082560a81aeeb
   react-native-background-timer: 1b6e6b4e10f1b74c367a1fdc3c72b67c619b222b
   react-native-blob-util: a5d3561045ed98cfb2fb80cbbff600fae0e8edee
   react-native-cameraroll: 2f08db1ecc9b73dbc01f89335d6d5179fac2894c
   react-native-config: 6502b1879f97ed5ac570a029961fc35ea606cd14
   react-native-cookies: f54fcded06bb0cda05c11d86788020b43528a26c
-  react-native-document-picker: 2b8f18667caee73a96708a82b284a4f40b30a156
+  react-native-document-picker: 3599b238843369026201d2ef466df53f77ae0452
   react-native-fingerprint-scanner: ac6656f18c8e45a7459302b84da41a44ad96dbbe
   react-native-flipper: 97d537d855e0e7f6ac26a065e01bf1aecc8ba41c
   react-native-get-random-values: 237bffb1c7e05fb142092681531810a29ba53015
   react-native-image-picker: 60f4246eb5bb7187fc15638a8c1f13abd3820695
-  react-native-mixpanel: d644efe1ca33d2646d5cba29e24a13ebc9b37209
+  react-native-pager-view: c29d484f19c49ff19525a94105e4ab2c4d4ae273
   react-native-pdf: a6a5a3f0bdf340eb2eed6c96034424d2cc3f84b0
   react-native-pdf-thumbnail: a042fffdab7a49f0f9df0e11da0a90beebfd4241
   react-native-render-html: 96c979fe7452a0a41559685d2f83b12b93edac8c
@@ -978,58 +983,55 @@ SPEC CHECKSUMS:
   react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
   react-native-view-shot: 4475fde003fe8a210053d1f98fb9e06c1d834e1c
   react-native-webview: 9f111dfbcfc826084d6c507f569e5e03342ee1c1
-  React-perflogger: f6f4b3c63629ead2e8a5a22eaedd06368c31617a
-  React-RCTActionSheet: 5e95058e99c53313d778d96b7f37697ce3a9418e
-  React-RCTAnimation: c4f86d756d8398c674f61d00075993a368d83480
-  React-RCTBlob: c74cb1350831866b3b23c2379ccc3a5909593bc5
-  React-RCTImage: cc72e4092e08c7070d1dce7704fbdcdfc9e0a721
-  React-RCTLinking: dca79b9df468980462a399a630156f5a5fc0b5bc
-  React-RCTNetwork: 0dfb918fd237b6fa4e3820769c57a6a0ad61f934
-  React-RCTSettings: a9fb6736139ddf8e7d11842c8a948c47c1ae603d
-  React-RCTText: 87456d45e8bcc0c831b7c7fcfcfd860a54f54a79
-  React-RCTVibration: ea899478e6f10ee526f476f769ab33211be2addd
-  React-runtimeexecutor: df1518d092e8c74cafddc56690d1ac386ec24d7a
-  ReactCommon: fac40473e2c4117522384027ab33ad0cb6717dc5
+  React-perflogger: 010e98d3335e5185a8f7496babca50d82a042e84
+  React-RCTActionSheet: 0f585d684b540a5bbfc62b0a1fbc5292cff2aefc
+  React-RCTAnimation: eb0e5b020333f9cc652d85f27a47086fbf56fffd
+  React-RCTBlob: 4af18ad2a64515c3ede9b829e8532f1508e00894
+  React-RCTImage: 08787efa5378ad0e7344943eed1b898619cf956a
+  React-RCTLinking: ea7ec6fbfdb04df7895c39f15f0e7479acc43bca
+  React-RCTNetwork: 926b436b6afada9905d969a8e3713cf204905a00
+  React-RCTSettings: cc083c9b6e126b7e6ea1128e64837d8b78ceb219
+  React-RCTText: c36ddf2bda5131b325e1c2763700f0a63a963e1d
+  React-RCTVibration: 12a2a859fa22368d2fc3ca7594504fd130b91a18
+  React-runtimeexecutor: 04332dda2f2335ea4ddaf9255de069d3269f4e8b
+  ReactCommon: 200471e0841cf2f7cde1fa2ef3d3c199ed970c07
   ReactNativeART: 78edc68dd4a1e675338cd0cd113319cf3a65f2ab
   ReactNativeExceptionHandler: 8025d98049c25f186835a3af732dd7c9974d6dce
   RNCalendarEvents: 7e65eb4a94f53c1744d1e275f7fafcfaa619f7a3
   RNCAsyncStorage: 0c357f3156fcb16c8589ede67cc036330b6698ca
   RNCClipboard: f1736c75ab85b627a4d57587edb4b60999c4dd80
-  RNCPicker: abc646b53a3d28ccfa3232c927a0ca52e0cf024d
   RNCPushNotificationIOS: 61a7c72bd1ebad3568025957d001e0f0e7b32191
-  RNDateTimePicker: 7658208086d86d09e1627b5c34ba0cf237c60140
   RNDeviceInfo: 5795b418ed3451ebcaf39384e6cf51f60cb931c9
   RNFS: 3ab21fa6c56d65566d1fb26c2228e2b6132e5e32
-  RNGestureHandler: dec4645026e7401a0899f2846d864403478ff6a5
+  RNGestureHandler: 0cba6c7c51a90cd793cf2475cf7fdca613ede300
   RNI18n: e2f7e76389fcc6e84f2c8733ea89b92502351fd8
   RNKeychain: 840f8e6f13be0576202aefcdffd26a4f54bfe7b5
   RNPermissions: b3d9d00889e37cc184d365ab04bb7a3f20811b1c
   RNQrGenerator: 1676221c08bfabec978242989c733810dad20959
   RNReactNativeHapticFeedback: 6d24decfa94e037c2ecc312407d2a057b7933f10
-  RNReanimated: 7faa787e8d4493fbc95fab2ad331fa7625828cfa
-  RNScreens: f7ad633b2e0190b77b6a7aab7f914fad6f198d8d
+  RNReanimated: 60e291d42c77752a0f6d6f358387bdf225a87c6e
+  RNScreens: 848541d154d2a184131b34e468b10aa33008f357
   RNSha256: ab608b2185fb806185a2cc112e0474065842e085
   RNShare: 807d6f8231b8ebcf6dd839294b877342eb93d4e5
-  RNSVG: 302bfc9905bd8122f08966dc2ce2d07b7b52b9f8
-  RNZendeskChat: 338c369def4e1552a533d9d34155b4b491aaf3d7
-  SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
+  RNSVG: 50cf2c7018e57cf5d3522d98d0a3a4dd6bf9d093
+  SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   vision-camera-code-scanner: dda884a7f3ec8243a2a6d6489b91860648371bca
-  VisionCamera: 5fc30ecebdfd0335d11123ec9511dcbc27ee4046
-  Yoga: 7a4d48cfb35dfa542151e615fa73c1a0d88caf21
+  VisionCamera: e9a95af10e00aaebe99d648ff4519fd336e16ffe
+  Yoga: d6134eb3d6e3675afc1d6d65ccb3169b60e21980
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
-  ZendeskAnswerBotProvidersSDK: 7eca94f07f10a567c631321601a645b2ba35c2da
-  ZendeskAnswerBotSDK: 31bd28c7c9732243d4bf3b850c441a3cdd6eba50
-  ZendeskChatProvidersSDK: af93e02e2058875f92e6ad86e74ee51203b4079e
-  ZendeskChatSDK: fe03650a5ebe3d35fd1f4da90792021f809bcf11
-  ZendeskCommonUISDK: f06dbac6c9e74c3afff75ecdc6bec3832b23258c
-  ZendeskCoreSDK: ce6dbb5eb4d61d2d061547a92bd0b0fe98602e9d
-  ZendeskMessagingAPISDK: 95a99f1eab9482b4106ec88466b93a89f9f7c5fa
-  ZendeskMessagingSDK: 4f5f3d43766bb3b2ea6411d1331cfe609ff33618
-  ZendeskSDKConfigurationsSDK: a5c21010e17b71d02bc2cfe73dcc9da1efa0a7b2
-  ZendeskSupportProvidersSDK: 685b5d185af47ced0ec40564ec46355c838bbd06
-  ZendeskSupportSDK: 92e6f9d334e81e9186f8a17583862350460a5393
+  ZendeskAnswerBotProvidersSDK: a024260282886870a15e7a986bf5286c23fd9311
+  ZendeskAnswerBotSDK: b9f74105b26fda5f74d6639c0dc8fe37f522a867
+  ZendeskChatProvidersSDK: fa1c5acd7fd09157b5994fb05a3b1628409fdfd1
+  ZendeskChatSDK: 40fa26f80a589eb38c6cecf17af71206da7bcaf3
+  ZendeskCommonUISDK: b87f90874386ebcc01f4b2a0b20a28c62658987a
+  ZendeskCoreSDK: cdc814e7fd64764fb0b0acb04e596df437708faa
+  ZendeskMessagingAPISDK: 9ce539eebcaa014fe6acc44da31262a2c52891c1
+  ZendeskMessagingSDK: ccc8dd41b774b0d2f94733505b9f1882d72184da
+  ZendeskSDKConfigurationsSDK: 79c444da987390456ec05657ffa2f5ca0eb54aef
+  ZendeskSupportProvidersSDK: 4aafe8114a9bba1a98dc03ca14d8fa6510cf4e70
+  ZendeskSupportSDK: 8cf921c496269bb5f53aac9320f3d002a793991d
   ZXingObjC: fdbb269f25dd2032da343e06f10224d62f537bdb
 
-PODFILE CHECKSUM: 4a1130da2ee9cd7365bb5a5290feaed31a6bd470
+PODFILE CHECKSUM: 7dfdfa4afe9355d54bec685917054fc54ab9040f
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.15.2
diff --git a/ios/link-assets-manifest.json b/ios/link-assets-manifest.json
index 2327e470f54..2b9428a8c65 100644
--- a/ios/link-assets-manifest.json
+++ b/ios/link-assets-manifest.json
@@ -45,6 +45,54 @@
       "path": "assets/fonts/TitilliumWeb/TitilliumWeb-SemiBoldItalic.ttf",
       "sha1": "f81d3a5f38c6bda1fb3547bf91fe0b68b54066c5"
     },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-Black.otf",
+      "sha1": "becf8bd5053f5529785c9d1d975f2d6f54446d47"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-BlackItalic.otf",
+      "sha1": "079c243911ef9d6cbb25f5e25b0a0fcdc80e217a"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-Bold.otf",
+      "sha1": "5348d5fdb96da25b0b444b6cf433100e17b2c944"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-BoldItalic.otf",
+      "sha1": "19b6af581aa9de369c5551b5c81af4567e96fd33"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-Italic.otf",
+      "sha1": "149caa0987bb4765e34a34ccc315d89a9d5b259c"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-Light.otf",
+      "sha1": "096f9b521b0fc0e7ebe6c60890fbfe312e7e4b01"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-LightItalic.otf",
+      "sha1": "9a74303f47edd127dc6f2c48301c9b0d4ffbbf17"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-Regular.otf",
+      "sha1": "0a8be559a9a9d8ce47eb6ca3de9db16f42a00580"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-Semibold.otf",
+      "sha1": "fa6cff8c0046996bc9fb124abf5799408eb3b369"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-SemiboldItalic.otf",
+      "sha1": "8502e9c211803bb2b0446348c69cf56763c987a3"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-Thin.otf",
+      "sha1": "dd3f889e6ca51de7e2006418b0125c02421fe574"
+    },
+    {
+      "path": "assets/fonts/TitilliumSansPro/TitilliumSansPro-ThinItalic.otf",
+      "sha1": "fb0f0fcc215d93fd4241f3af18408b7c42b33b3d"
+    },
     {
       "path": "assets/fonts/ReadexPro/ReadexPro-Regular.ttf",
       "sha1": "93e4080794b725f216a94b57ed62a51bc77bce91"
diff --git a/jest-e2e.config.js b/jest-e2e.config.js
index 21194829495..a1a7a518bf1 100644
--- a/jest-e2e.config.js
+++ b/jest-e2e.config.js
@@ -1,10 +1,7 @@
 module.exports = {
   preset: "react-native",
-  transform: {
-    "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
-  },
   transformIgnorePatterns: [
-    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|native-base|native-base-shoutem-theme|@shoutem/animation|@shoutem/ui|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@react-native-camera-roll/camera-roll|@codler|@react-native-community/datetimepicker)"
+    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|native-base|native-base-shoutem-theme|@shoutem/animation|@shoutem/ui|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@react-native-camera-roll/camera-roll|@codler|mixpanel-react-native)"
   ],
   moduleNameMapper: {
     "\\.svg": "<rootDir>/ts/__mocks__/svgMock.js"
diff --git a/jest.config.js b/jest.config.js
index 2b4929b5032..5d6fdc7c042 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,15 +1,15 @@
 module.exports = {
   preset: "react-native",
-  transform: {
-    "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
-  },
   transformIgnorePatterns: [
-    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|native-base|native-base-shoutem-theme|@shoutem/animation|@shoutem/ui|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@react-native-camera-roll/camera-roll|@codler|@react-native-community/datetimepicker|remark|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|rn-qr-generator)"
+    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|native-base|native-base-shoutem-theme|@shoutem/animation|@shoutem/ui|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@react-native-camera-roll/camera-roll|@codler|remark|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|rn-qr-generator|mixpanel-react-native)"
   ],
   moduleNameMapper: {
     "\\.svg": "<rootDir>/ts/__mocks__/svgMock.js"
   },
-  setupFiles: ["./jestSetup.js"],
+  setupFiles: [
+    "./jestSetup.js",
+    "./node_modules/react-native-gesture-handler/jestSetup.js"
+  ],
   globalSetup: "./jestGlobalSetup.js",
   setupFilesAfterEnv: [
     "@testing-library/jest-native/extend-expect",
diff --git a/jest.config.no.timezone.js b/jest.config.no.timezone.js
index c9197d78ffd..fd0e92bebe9 100644
--- a/jest.config.no.timezone.js
+++ b/jest.config.no.timezone.js
@@ -4,12 +4,15 @@ module.exports = {
     "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
   },
   transformIgnorePatterns: [
-    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|native-base|native-base-shoutem-theme|@shoutem/animation|@shoutem/ui|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@react-native-camera-roll/camera-roll|@codler|@react-native-community/datetimepicker|remark|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk)"
+    "node_modules/(?!(jest-)?@react-native|react-native|react-navigation|@react-navigation|react-navigation-redux-helpers|react-native-device-info|native-base|native-base-shoutem-theme|@shoutem/animation|@shoutem/ui|rn-placeholder|jsbarcode|@pagopa/react-native-cie|react-native-share|jail-monkey|@react-native-community/art|@react-native-community/push-notification-ios|@react-native-camera-roll/camera-roll|@codler|remark|unified|bail|is-plain-obj|trough|vfile|unist-util-stringify-position|mdast-util-from-markdown|mdast-util-to-string|micromark|parse-entities|character-entities|mdast-util-to-markdown|zwitch|longest-streak|@pagopa/io-react-native-zendesk|mixpanel-react-native)"
   ],
   moduleNameMapper: {
     "\\.svg": "<rootDir>/ts/__mocks__/svgMock.js"
   },
-  setupFiles: ["./jestSetup.js"],
+  setupFiles: [
+    "./jestSetup.js",
+    "./node_modules/react-native-gesture-handler/jestSetup.js"
+  ],
   setupFilesAfterEnv: [
     "@testing-library/jest-native/extend-expect",
     "./jestSetupAfterEnv.js"
diff --git a/jestSetup.js b/jestSetup.js
index 60213bda3a4..97170930ce8 100644
--- a/jestSetup.js
+++ b/jestSetup.js
@@ -11,21 +11,10 @@ import mockRNDeviceInfo from "react-native-device-info/jest/react-native-device-
 import mockRNCameraRoll from "@react-native-camera-roll/camera-roll/src/__mocks__/nativeInterface";
 import mockZendesk from "./ts/__mocks__/io-react-native-zendesk.ts";
 
-// eslint-disable-next-line functional/immutable-data
-NativeModules.RNGestureHandlerModule = {
-  attachGestureHandler: jest.fn(),
-  createGestureHandler: jest.fn(),
-  dropGestureHandler: jest.fn(),
-  updateGestureHandler: jest.fn(),
-  forceTouchAvailable: jest.fn(),
-  State: {},
-  Directions: {}
-};
-
 jest.mock("@pagopa/io-react-native-zendesk", () => mockZendesk);
 jest.mock("@react-native-async-storage/async-storage", () => mockAsyncStorage);
-jest.mock("@react-native-community/push-notification-ios", jest.fn());
-jest.mock("@react-native-cookies/cookies", jest.fn());
+jest.mock("@react-native-community/push-notification-ios", () => jest.fn());
+jest.mock("@react-native-cookies/cookies", () => jest.fn());
 jest.mock("react-native-share", () => jest.fn());
 jest.mock("@react-native-clipboard/clipboard", () => mockClipboard);
 jest.mock("@react-native-camera-roll/camera-roll", () => mockRNCameraRoll);
@@ -47,8 +36,8 @@ jest.mock("react-native-reanimated", () => {
 });
 
 jest.mock("react-native-blob-util", () => ({
-  DocumentDir: jest.fn(),
-  polyfill: jest.fn()
+  DocumentDir: () => jest.fn(),
+  polyfill: () => jest.fn()
 }));
 
 // eslint-disable-next-line functional/immutable-data
@@ -68,16 +57,16 @@ global.fetch = nodeFetch;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any,functional/immutable-data
 global.AbortController = AbortController;
 
-jest.mock("remark-directive", jest.fn());
-jest.mock("remark-rehype", jest.fn());
-jest.mock("rehype-stringify", jest.fn());
-jest.mock("rehype-format", jest.fn());
-jest.mock("unist-util-visit", jest.fn());
-jest.mock("hastscript", jest.fn());
+jest.mock("remark-directive", () => jest.fn());
+jest.mock("remark-rehype", () => jest.fn());
+jest.mock("rehype-stringify", () => jest.fn());
+jest.mock("rehype-format", () => jest.fn());
+jest.mock("unist-util-visit", () => jest.fn());
+jest.mock("hastscript", () => jest.fn());
 
 jest.mock("react-native-device-info", () => mockRNDeviceInfo);
 
-global.__reanimatedWorkletInit = jest.fn();
+global.__reanimatedWorkletInit = () => jest.fn();
 
 jest.mock("@gorhom/bottom-sheet", () => {
   // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -105,3 +94,32 @@ jest.mock("react-native-pdf", () => jest.fn());
 jest.mock("react-native-permissions", () =>
   require("react-native-permissions/mock")
 );
+
+/*
+ * Turbo modules mocks.
+ */
+
+jest.mock("react-native/Libraries/TurboModule/TurboModuleRegistry", () => {
+  const turboModuleRegistry = jest.requireActual(
+    "react-native/Libraries/TurboModule/TurboModuleRegistry"
+  );
+  return {
+    ...turboModuleRegistry,
+    getEnforcing: name => {
+      // List of TurboModules libraries to mock.
+      const modulesToMock = ["RNDocumentPicker"];
+      if (modulesToMock.includes(name)) {
+        return null;
+      }
+      return turboModuleRegistry.getEnforcing(name);
+    }
+  };
+});
+
+jest.mock("mixpanel-react-native", () => ({
+  __esModule: true,
+  default: () => jest.fn(),
+  Mixpanel: jest.fn(() => ({
+    init: jest.fn()
+  }))
+}));
diff --git a/locales/de/index.yml b/locales/de/index.yml
index 1a5c90fb118..a2d6438f7f9 100644
--- a/locales/de/index.yml
+++ b/locales/de/index.yml
@@ -248,7 +248,6 @@ permissionRationale:
     title: "Zugriff auf die Kamera gewähren"
     message: "Wir brauchen Zugang zur Kamera, um die Taschenlampenfunktion zu benutzen."
 startup:
-  title: "Initialisierung"
   authentication: "Benutzer authentifiziert"
   sessionInfo: "SPID-Attribute geladen"
   profileInfo: "Benutzerprofil geladen"
@@ -534,11 +533,7 @@ authentication:
         hint: "Karussell mit einer einführenden Anleitung zur IO-Funktionalität. Wähle, um den Inhalt kennenzulernen."
     session_expired:
       title: "Deine Sitzung ist abgelaufen"
-      body: "Aus Sicherheitsgründen bitten wir dich {{days}} Tage nach deiner letzten Anmeldung mit SPID oder CIE, deine Anmeldedaten erneut einzugeben, um IO zu benutzen."
-    cie_unsupported:
-      title: "Anmeldung mit CIE nicht möglich"
-      os_version_unsupported: "ein Betriebssystem mit Android 6.0 oder höher"
-      nfc_incompatible: "ein kompatibler NFC-Sensor"
+      body: "Aus Sicherheitsgründen bitten wir dich, dich alle {{days}} Tage oder wenn du die App verlässt, mit SPID oder CIE anzumelden."
     contentTitleCie: "Du hast keinen SPID oder CIE?"
     spid_or_cie: "Um IO nutzen zu können, musst du über eine dieser digitalen Werkzeuge verfügen, die deine Identität in sicherer Weise bestätigen."
     request_cie: "CIE anfordern"
@@ -549,6 +544,7 @@ authentication:
     loginSpidCie: "Anmeldung mit SPID oder CIE"
     infoSpidCie: "Einführung in SPID und CIE"
     loginSpidCieContent: "Ab heute kannst du dich zusätzlich zu SPID mit deiner elektronischen Identitätskarte (CIE) anmelden"
+    privacyLink: "Datenschutzerklärung"
     nospid: "Du hast keinen SPID? Erfahre mehr"
     nospid-nocie: "Du hast keinen SPID und keine CIE? Erfahre mehr"
     card1-title: "Alle Mitteilungen an einem Ort"
@@ -557,10 +553,8 @@ authentication:
     card2-content: "Du kannst eine Steuer oder eine Strafe über dein Bankkonto oder mit deiner Bankkarte bezahlen"
     card3-title: "Bezahle schnell eine Aufforderung in Papierform"
     card3-content: "Durch das Scannen des QR-Codes kannst du schnell und einfach eine Zahlungsaufforderung in Papierform bezahlen"
-    card4-title: "Du kannst dich nur mit SPID anmelden"
-    card4-content: "Das von dir verwendete Gerät unterstützt den Zugang mit einer elektronischen Identitätskarte (CIE) nicht"
-    card5-title: "Willkommen bei der ersten öffentlichen Version von IO!"
-    card5-content: "In der rechten oberen Ecke findest du das Symbol '?', mit dem du einen Chat mit dem IO-Team beginnen kannst, wenn etwas nicht so funktioniert, wie es sollte."
+    card5-title: "Willkommen in IO!"
+    card5-content: "Lass uns gemeinsam herausfinden, was du machen kannst"
     card5-content-accessibility: "Wähle das vorherige Element, um einen Chat mit dem IO-Team zu beginnen, wenn etwas nicht so funktioniert, wie es sollte."
     expiredCardTitle: "Karte abgelaufen oder nicht mehr gültig"
     expiredCardHeaderTitle: "Anmeldung mit CIE"
@@ -646,12 +640,12 @@ authentication:
     contextualHelpContent: "Hier findest du Informationen darüber, wie du dich bei IO authentifizieren kannst, sowie einige Sicherheitstipps."
     news: "Neu"
     title: "Ab sofort kannst du leichter auf IO zugreifen"
-    identity_check: "Du musst dich nicht mehr alle 30 Tage mit SPID oder CIE authentifizieren, sondern nur noch einmal im Jahr oder wenn du die App verlässt"
+    identity_check: "Du musst dich nicht mehr alle 30 Tage mit SPID oder CIE identifizieren, sondern nur noch einmal im Jahr oder wenn du die App verlässt"
     security_suggests: "Einige Sicherheitstipps"
     passcode: "In allen anderen Fällen reicht dein Gesicht, dein Fingerabdruck oder dein Entsperrcode aus."
     notification: "Du erhältst bei jedem neuen Zugang eine E-Mail. Wenn du diese nicht erkennst, kannst dz den Zugang zu IO sperren."
     button_accept_lv: "Ja, Schnellzugriff einrichten"
-    button_decline_lv: "Nein, ich möchte mich alle 30 Tage neu anmelden"
+    button_decline_lv: "Melde dich alle 30 Tage mit SPID oder CIE an"
   security_suggestions:
     fingerprint: "Gib deinen biometrischen Erkennungs- oder Entsperrcode nicht an Dritte weiter."
     io_logout: "Wenn du dieses Gerät verlierst, beende IO über die Website"
@@ -715,10 +709,6 @@ authentication:
 email:
   cduScreens:
     validateMail:
-      title: "Du hast deine E-Mail-Adresse nicht bestätigt"
-      subtitle: "Um die App weiter nutzen zu können, musst du deine E-Mail-Adresse bestätigen"
-      editButton: "E-Mail-Adresse ändern"
-      validateButton: "E-Mail-Adresse bestätigen"
       header:
         title: "IO konfigurieren"
       help:
@@ -726,7 +716,6 @@ email:
     emailAlreadyTaken:
       title: "Deine E-Mail-Adresse ändern"
       subtitleStart: "Deine E-Mail-Adresse"
-      subtitleEnd: "wird bereits auf IO verwendet; du musst eine andere eingeben, um die App weiter benutzen zu können."
       editButton: "E-Mail-Adresse ändern"
       header:
         title: "IO konfigurieren"
@@ -756,7 +745,7 @@ email:
     label: "Persönliche E-Mail Adresse"
     alert:
       title: "Die E-Mail {{email}}, die mit Ihrer SPID-Identität verknüpft ist, wird bereits auf IO verwendet, bitte geben Sie eine andere ein."
-      description: "E-Mail bereits in Gebrauch"
+      description1: "E-Mail bereits in Gebrauch"
       modaltitle: "Diese E-Mail ist bereits in Gebrauch"
       modaldescription: "Dies kann der Fall sein, wenn Sie dieselbe Adresse wie ein Familienmitglied haben"
       modalbutton: "Andere E-Mail verwenden"
@@ -785,6 +774,7 @@ email:
     title: "Bestätige deine E-Mail-Adresse"
     subtitle: "Folge den Anweisungen, die an folgende Adresse gesendet wurden:"
     link: "Ist sie nicht korrekt?"
+    countdowntext: "Eine neue E-Mail anfordern in "
     buttonlabelsent: "E-Mail gesendet"
     buttonlabelsentagain: "E-Mail erneut senden"
     toast: "Erledigt! Prüf deinen Posteingang."
@@ -970,6 +960,11 @@ wallet:
       title: "Möchtest du in der App bezahlen?"
       content: "Finde heraus, welche Zahlungsmethoden du in dein Konto aufnehmen kannst."
       cta: "Mehr erfahren"
+    error:
+      title: "Es ist ein Fehler aufgetreten"
+      subtitle: "Versuche es erneut oder kontaktiere den Support"
+      primaryButton: "Schließen"
+      secondaryButton: "Erneut versuchen"
   wallet: "Konto"
   refreshWallet: "Konto aktualisieren"
   favourite:
@@ -1001,7 +996,7 @@ wallet:
         text3: "Wenn du möchtest, kannst du die Bank wählen, bei der du eine aktive PagoBANCOMAT-Karte hast. "
         text4: "Liste der verfügbaren Banken"
     bpay:
-      title: "Zahle auf IO mit BANCOMAT Pay"
+      title: "Zahle auf IO mit BANCOMAT-Pay"
       description:
         text1: "Füge BANCOMAT Pay hinzu, um pagoPA-Zahlungsaufforderungen einfacher zu bezahlen sowie an den auf IO verfügbaren Initiativen teilzunehmen.\nWenn du fortfährst, akzeptierst du die "
         text2: "Datenschutzbestimmungen."
@@ -1023,7 +1018,7 @@ wallet:
       creditCard: "{{brand}}-Karte, die Kartennummer endet mit {{blurredNumber}}"
       bancomat: "BANCOMAT {{bankName}}"
       coBadge: "{{brand}}-Karte, {{bankName}}"
-      bancomatPay: "BANCOMATPay {{bankName}}"
+      bancomatPay: "BANCOMAT Pay {{bankName}}"
       cta: "Details zur Zahlungsmethode anzeigen"
       bankNotAvailable: "Bankenname nicht verfügbar"
     addElement: "Element zum Konto hinzufügen"
@@ -1037,7 +1032,7 @@ wallet:
     bancomat:
       headerTitle: "PagoBANCOMAT-Karte hinzufügen"
       koTimeout:
-        title: "Wir konnten deine PagoBANCOMAT Karten nicht finden"
+        title: "Wir konnten deine PagoBANCOMAT-Karten nicht finden"
         body: "Versuche es erneut"
       koNotFound:
         title: "Wir konnten keine Karten finden"
@@ -1155,10 +1150,11 @@ wallet:
             title: "Ich weiß es nicht"
             description: "Wir durchsuchen alle auf deinem Namen lautenden Karten bei den am Dienst teilnehmenden Banken"
     generalError: "Beim Hinzufügen der Zahlungsmethode trat ein allgemeiner Fehler auf"
-    success:
-      title: "Die Karte wurde hinzugefügt!"
-      continueButton: "Weiter"
-    failure:
+    outcome:
+      SUCCESS:
+        title: "Die Karte wurde hinzugefügt!"
+        subtitle: ""
+        primaryAction: "Weiter"
       GENERIC_ERROR:
         title: "Es ist ein unerwarteter Fehler aufgetreten"
         subtitle: "Versuche es erneut oder kontaktiere den Support"
@@ -1184,6 +1180,10 @@ wallet:
         title: "Du hast diese Zahlungsmethode bereits hinzugefügt"
         subtitle: ""
         primaryAction: "Schließen"
+      BPAY_NOT_FOUND:
+        title: "Wir haben kein aktives BANCOMAT Pay Konto gefunden."
+        subtitle: "Wende dich an deine Bank, um den Dienst zu aktivieren."
+        primaryAction: "Schließen"
   alert:
     supportedCardPageLinkError: "Beim Öffnen der Übersichtsseite der unterstützten Karten ist ein Fehler aufgetreten."
     msgErrorUpdateApp: "Beim Öffnen des App-Stores ist ein Fehler aufgetreten"
@@ -1687,6 +1687,12 @@ wallet:
         subtitle: "Es wurde kein Betrag abgebucht.\nDu hast wahrscheinlich die Obergrenze deiner Zahlungsmethode überschritten."
       INVALID_METHOD:
         title: "Die Zahlungsmethode wird nicht unterstützt"
+      WAITING_CONFIRMATION_EMAIL:
+        title: "Warte auf eine Bestätigung per E-Mail"
+        subtitle: "Es war nicht möglich, das Ergebnis der Zahlung zu überprüfen. Wenn sie erfolgreich war, wirst du in Kürze eine E-Mail erhalten. Sollte diese nicht ankommen, kontaktiere bitte den Support."
+      METHOD_NOT_ENABLED:
+        title: "Zahlungsmethode in der App aktivieren"
+        subtitle: "Bevor du die Zahlung erneut versuchst, wähle die Zahlungsmethode in deinem Konto aus und aktiviere die Funktion “Zahlungen in der App”."
     support:
       button: "Support kontaktieren"
       supportTitle: "Support kontaktieren"
@@ -1819,6 +1825,7 @@ messages:
       success: "Wiederherstellung durchgeführt."
       failure: "Die Wiederherstellung ist fehlgeschlagen"
 messageDetails:
+  accessibilityAttachmentIcon: "Enthält Anhänge"
   contextualHelpTitle: "Mitteilungsdetails"
   headerTitle: "Mitteilung"
   emptyMessage: "Kein Inhalt"
@@ -1857,13 +1864,18 @@ messageDetails:
     action: "Mehr erfahren"
   bottomSheet:
     title: "Was ist eine dynamische Mitteilung?"
-    body: "Die versendende Körperschaft kann den Inhalt dieser Nachricht auch nach dem Versand aktualisieren, um sicherzustellen, dass die Informationen stets korrekt und relevant sind.\n\n Dies geschieht in bestimmten Fällen, wie z. B. bei der Aktualisierung veralteter Informationen oder nicht mehr gültiger Anlagen.\n\n Wenn die Körperschaft dich über neue Informationen oder wichtige Aktualisierungen informieren muss, wird sie dies mittels einer neuen Mitteilung tun."
+    body: "Die versendende Körperschaft kann den Inhalt dieser Nachricht auch nach dem Versand aktualisieren, um sicherzustellen, dass die Informationen stets korrekt und relevant sind.\n\n Dies geschieht in bestimmten Fällen, wie z. B. bei der Aktualisierung veralteter Informationen oder nicht mehr gültiger Anhänge.\n\n Wenn die Körperschaft dich über neue Informationen oder wichtige Aktualisierungen informieren muss, wird sie dies mittels einer neuen Mitteilung tun."
 messagePDFPreview:
   title: "PDF-Vorschau"
-  singleBtn: "Speichern oder freigeben"
+  singleBtn: "Speichern oder teilen"
+  singleBtnAccessibility: "Dokument speichern oder teilen"
   open: "Öffnen"
   save: "Speichern"
+  saveAccessibility: "Dokument speichern"
   savedAtLocation: "Das Dokument {{name}} wurde im Ordner Download gespeichert."
+  share: "Teilen"
+  shareAccessibility: "Dokument teilen"
+  pdfAccessibility: "Vorschau PDF-Dokument"
   errors:
     previewing:
       title: "Keine Vorschau verfügbar"
@@ -1976,16 +1988,13 @@ serviceDetail:
   disabled: "deaktiviert"
   notValidated: "Um die E-Mail-Weiterleitung zu aktivieren, musst du deine E-Mail-Adresse bestätigen."
 identification:
-  title: "Hallo!"
+  title: "Hallo {{name}}!"
   titleProfileName: "Hallo {{profileName}}!"
   titleValidation: "Bestätige den Vorgang"
   logout: "Abmelden"
   logoutProfileName: "Du bist nicht {{profileName}}?"
   logoutDescription: "Du kannst dich mit deinem SPID oder deiner CIE anmelden. Diese Sitzung wird abgemeldet."
-  logoutDescriptionProfileName: "Du kannst dich mit deinem SPID oder deiner CIE anmelden. Die Sitzung von {{profileName}} wird abgemeldet."
-  subtitleCode: "Gib deinen Entsperrcode ein"
-  subtitleCodeFingerprint: "Verwende den Fingerabdruck oder gib den Entsperrcode ein"
-  subtitleCodeFaceId: "Verwende FaceID oder gib den Entsperrcode ein"
+  logoutDescriptionProfileName: "Du kannst dich mit deinem SPID oder deiner CIE anmelden. Die Sitzung von {{profileName}} wird abgemeldet."  
   biometric:
     fingerprintType: "Fingerabdruck"
     title: "Biometrische Identifikation"
@@ -1993,10 +2002,7 @@ identification:
       reason: "Identifikation durch TouchID fehlgeschlagen"
       title: "Identifikation erforderlich"
       sensorDescription: "Berührungssensor"
-  fail:
-    remainingAttempts: "Du hast noch {{attempts}} Versuche übrig."
-    remainingAttemptSingle: "Du hast noch einen Versuch übrig."
-    tooManyAttempts: "Zu viele falsche Versuche."
+  fail:        
     waitMessage: "Versuche es erneut in:"
   unlockCode:
     accessibility:
@@ -2220,12 +2226,20 @@ bonus:
           other: "{{seconds}} Sekunden"
 features:
   messages:
+    attachmentDownloadFeedback: "Download läuft"
+    attachments: "Anhänge"
     loading:
       title: "Die Details der Mitteilung werden geladen"
       subtitle: "Warte ein paar Sekunden"
     updateBottomSheet:
       title: "Aktualisiere die IO-App"
       subtitle: "App IO Version {{value}} ist erforderlich, um diese Funktion zu nutzen. Bitte aktualisiere die App, um fortzufahren."
+    badge:
+      dueDate: "Abgelaufen am {{date}} um {{time}}"
+    alert:
+      addReminder: "Erinnerung hinzufügen"
+      removeReminder: "Erinnerung entfernen"
+      content: "Läuft am {{date}} um {{time}} ab"
   euCovidCertificate:
     save:
       album: "IO"
@@ -2284,13 +2298,15 @@ features:
         activated: "Vielen Dank, der Dienst ist aktiv!"
         error: "Bei deiner Anfrage ist ein Fehler aufgetreten"
     details:
+      badge:
+        legalValue: "Rechtsgültig"
       title: "Details der Mitteilung"
       noticeCode: "Zahlungskodex"
       loadError:
         title: "Etwas ist schief gelaufen"
         body: "Die Details zu deiner Mitteilung konnten nicht abgerufen werden. Bitte versuche es erneut"
       cancelledMessage:
-        body: "Dieser Bescheid wurde vom Absender gelöscht. Du kannst dessen Inhalt ignorieren."
+        body: "Diese Zustellung wurde vom Absender gelöscht. Du kannst dessen Inhalt ignorieren."
         unpaidPayments: "Für die Erstattung von Zahlungen im Zusammenhang mit diesem Bescheid wende dich bitte an den Absender."
         payments: "Zahlungen"
       paymentSection:
@@ -2306,10 +2322,10 @@ features:
         bottomSheet:
           title: "Beiliegende F24-Formulare"
       infoSection:
-        title: "Informationen zum Bescheid"
+        title: "Informationen zur Zustellung"
         iun: "IUN-Code"
       timeline:
-        title: "STATUS DES BESCHEIDS"
+        title: "STATUS DER ZUSTELLUNG"
         status:
           DELIVERED: "Zugestellt"
           DELIVERING: "In Zustellung"
@@ -2331,7 +2347,7 @@ support:
   helpCenter:
     header: "Hilfe"
     cta:
-      contactSupport: "Erstelle ein Ticket"
+      contactSupport: "Ticket erstellen"
       seeReports: "Offene Tickets"
     supportComponent:
       title: "Benötigst du Hilfe?"
@@ -2420,13 +2436,10 @@ fastLogin:
   userInteraction:
     sessionExpired:
       noPin:
-        title: "Es ist zu lange her!"
-        subtitle: "Aus Sicherheitsgründen musst du dich erneut mit SPID oder CIE authentifizieren. Anschließend kannst du die IO-Konfiguration dort fortsetzen, wo du aufgehört hast."
+        title: "Es ist zu lange her!"        
         submitButtonTitle: "Fortfahren"
       continueNavigation:
-        title: "Deine Sitzung ist abgelaufen"
-        subtitle: "Um die App weiter zu verwenden, drück auf “Fortsetzen”."
-        submitButtonTitle: "Fortsetzen"
+        title: "Deine Sitzung ist abgelaufen"        
         cancelButtonTitle: "Abbrechen"
       transientError:
         title: "Wir konnten dich nicht authentifizieren"
diff --git a/locales/de/jailbroken_body.md b/locales/de/jailbroken_body.md
index f7d5b7296cf..9762448e8c1 100644
--- a/locales/de/jailbroken_body.md
+++ b/locales/de/jailbroken_body.md
@@ -1,7 +1,7 @@
-Es scheint, dass ein **Jailbreak** auf Ihrem Gerät durchgeführt wurde.
+Sul tuo dispositivo è stato effettuato un **jailbrack**. Questo succede quando il sistema operativo viene modificato o installato in modo anomalo. Questo potrebbe compromettere l’integrità del sistema e l'app IO potrebbe non funzionare correttamente.
 
-Dies geschieht, wenn das Betriebssystem verändert oder nicht ordnungsgemäß installiert wurde. Die Integrität des Betriebssystems kann beeinträchtigt sein, und die IO-App funktioniert möglicherweise nicht richtig.
+**Cosa fare?**
 
-Wenn möglich, fahren Sie bitte nicht fort und installieren Sie die IO-App auf einem anderen Gerät mit einem intakten und aktuellen Betriebssystem.
+Ti invitiamo a usare l'app IO su un dispositivo diverso, con un sistema operativo integro e aggiornato.
 
-Wenn Sie fortfahren, erklären Sie sich damit einverstanden, die angebotenen Dienste auf eigenes Risiko zu nutzen, da mangelnde Integrität zu Datendiebstahl und/oder anderen betrügerischen Aktivitäten führen kann. Sie erklären sich ferner damit einverstanden, dass der App-Entwickler in keiner Weise für Schäden, Verluste oder Folgen verantwortlich ist, die Ihnen durch die Nutzung der IO-App in diesem Ausführungskontext entstehen.
+Se continui, accetti di proseguire a tuo rischio nell'interazione con i servizi offerti. La mancanza di integrità può portare al furto di dati o ad altre attività fraudolente. Accetti anche che lo sviluppatore dell’app non sia in alcun modo responsabile di eventuali danni, perdite o conseguenze causate dall'app IO in questo contesto di esecuzione.
\ No newline at end of file
diff --git a/locales/de/rooted_body.md b/locales/de/rooted_body.md
index cc9e5a0839e..f22ce4f6fbf 100644
--- a/locales/de/rooted_body.md
+++ b/locales/de/rooted_body.md
@@ -1,7 +1,7 @@
-Es scheint, dass **Root-Rechte** auf Ihrem Gerät aktiviert sind.
+Sul tuo dispositivo sono attivi i **permessi di root**. Questo succede quando il sistema operativo viene modificato o installato in modo anomalo. Questo potrebbe compromettere l’integrità del sistema e l'app IO potrebbe non funzionare correttamente.
 
-Dies geschieht, wenn das Betriebssystem verändert oder nicht ordnungsgemäß installiert wurde. Die Integrität des Betriebssystems kann beeinträchtigt sein, und die IO-App funktioniert möglicherweise nicht richtig.
+**Cosa fare?**
 
-Wenn möglich, fahren Sie bitte nicht fort und installieren Sie die IO-App auf einem anderen Gerät mit einem intakten und aktuellen Betriebssystem.
+Ti invitiamo a usare l'app IO su un dispositivo diverso, con un sistema operativo integro e aggiornato.
 
-Wenn Sie fortfahren, erklären Sie sich damit einverstanden, die angebotenen Dienste auf eigenes Risiko zu nutzen, da mangelnde Integrität zu Datendiebstahl und/oder anderen betrügerischen Aktivitäten führen kann. Sie erklären sich ferner damit einverstanden, dass der App-Entwickler in keiner Weise für Schäden, Verluste oder Folgen verantwortlich ist, die Ihnen durch die Nutzung der IO-App in diesem Ausführungskontext entstehen.
+Se continui, accetti di proseguire a tuo rischio nell'interazione con i servizi offerti. La mancanza di integrità può portare al furto di dati o ad altre attività fraudolente. Accetti anche che lo sviluppatore dell’app non sia in alcun modo responsabile di eventuali danni, perdite o conseguenze causate dall'app IO in questo contesto di esecuzione.
\ No newline at end of file
diff --git a/locales/en/cie/cieNotSupported.md b/locales/en/cie/cieNotSupported.md
deleted file mode 100644
index 3a9a4cd82e5..00000000000
--- a/locales/en/cie/cieNotSupported.md
+++ /dev/null
@@ -1,4 +0,0 @@
-The device you are using does not support login with Electronic Identity Card (CIE). Login with CIE is only supported by:
-
-- devices with NFC chip and Android 6.0 or higher operating system;
-- iPhone 7 and above with iOS 13 or higher operating system.
\ No newline at end of file
diff --git a/locales/en/index.yml b/locales/en/index.yml
index feca83dc088..10e9c888e5d 100644
--- a/locales/en/index.yml
+++ b/locales/en/index.yml
@@ -190,6 +190,7 @@ global:
     messages: Messages
     wallet: Wallet
     scan: Scan
+    payments: Payments
     documents: Documents
     profile: Profile
     services: Services
@@ -213,6 +214,11 @@ tablet:
   message: The IO interface is optimized for smartphones, but all the functions compatible with your device are still available.
 rooted:
   title: Looks like the security of your device has been compromised!
+  body: If you press 'Continue', you agree to continue browsing at your own risk, otherwise close the app.
+  learnMoreButton:
+    title: What does it mean?
+  learnMoreBottomsheet:
+    title: Device security
   bodyiOS: !include jailbroken_body.md
   bodyAndroid: !include rooted_body.md
   continueAlert:
@@ -229,6 +235,7 @@ locales:
   en: English
   de: German
 clipboard:
+  copyIntoClipboard: copy to clipboard
   copyFeedback: Copied to clipboard
   copyText: copy
   copyFeedbackButton: copied
@@ -249,7 +256,7 @@ permissionRationale:
     title: "Allow camera access"
     message: "We require camera permissions to use the torch on the back of your phone."
 startup:
-  title: Initialization
+  title: We are getting ready for your experience on IO
   authentication: User authenticated
   sessionInfo: SPID attributes loaded
   profileInfo: User profile loaded
@@ -437,6 +444,7 @@ profile:
       idpayTest: IDPay
       idpayTestAlert: This change requires app reboot
     designSystemEnvironment: Experimental Design System
+    newWalletSection: New wallet section
     appVersion: Version
     backendVersion: Backend Version
     debugMode: Debug mode
@@ -447,8 +455,9 @@ profile:
         title: Warning
         message: To add a new test card, you must enable the pagoPA test environment from the settings.
         closeButton: Close
-    walletPlayground:
-      titleSection: "New Wallet"
+    itWallet:
+      itWalletTest: IT Wallet
+      itWalletTestDescription: Enable the IT Wallet test environment
   data:
     title: Your data
     subtitle: Here you will find your personal and contact data used by the IO app.
@@ -560,13 +569,15 @@ authentication:
         hint: Carousel that contains an introduction guide to IO functionalities. Select to know the content.
     session_expired:
       title: Your session is expired
-      body: For security reasons, after {{days}} days from the last login with SPID or CIE, we ask you to sign in again to use IO.
+      body: For security reasons, we ask you to log in with SPID or CIE every {{days}} days or if you log out
     cie_unsupported:
-      title: Login with CIE unavailable
-      body: !include cie/cieNotSupported.md
-      android_desc: !include cie/cieNotSupported_android.md
-      os_version_unsupported: an Android 6.0 or higher operating system
-      nfc_incompatible: a NFC chip
+      title: You cannot use CIE
+      body: The device you are using does not support access with Electronic ID Card (CIE).
+      button: I get it
+      nfc_problem: To read the CIE, a device with NFC chip is required.
+      os_problem: An Android 6.0 or iOS 13 or higher operating system is required.
+      nfc_alert: Your device does not have NFC.
+      os_alert: The device's operating system is not up-to-date.
     contentTitleCie: Don't have SPID or CIE?
     cie_information_request: !include cie.md
     spid_or_cie: To use IO you must have one of these digital tools, which certify your identity.
@@ -579,6 +590,7 @@ authentication:
     loginSpidCie: Login with SPID or CIE
     infoSpidCie: Introduction to SPID and CIE
     loginSpidCieContent: From today, in addition to SPID, you can use your Electronic ID Card to login
+    privacyLink: Privacy
     nospid: Don't have SPID? Find out more
     nospid-nocie: Don't have SPID or CIE? Find out more
     card1-title: All messages in one place
@@ -587,11 +599,9 @@ authentication:
     card2-content: You can pay a tax or a penalty by your bank account and your cards
     card3-title: Quickly pay a physical notice
     card3-content: You can pay a notice also by scanning the QR code on the physical notice
-    card4-title: You can login only with SPID
-    card4-content: The device you are using does not support access with Electronic Identity Card (CIE)
-    card5-title: Welcome to the public version of IO!
-    card5-content: In this version you can find in the upper-right corner the icons to report bugs or start a chat with the development team. We're waiting for your feedback!
-    card5-content-accessibility: Seleziona elemento precedente per aprire una chat con il team di IO se qualcosa non funziona come dovrebbe.
+    card5-title: Welcome to IO!
+    card5-content: What can you do?
+    card5-content-accessibility: Select previous item to open a chat with the IO team if something is not working.
     expiredCardTitle: Card expired or no longer valid
     expiredCardHeaderTitle: Login with CIE
     expiredCardContent: "The card used is no longer valid or has expired.\nIf you want to log in and access IO you must use SPID."
@@ -654,6 +664,7 @@ authentication:
         cardLocked: CIE card locked
         wrongPin1AttemptLeft: Wrong PIN, you still have 1 attempt
         wrongPin2AttemptLeft: Wrong PIN, you still have 2 attempts
+        genericError: Something went wrong! Please try again.
       error:
         readerCardLostTitle: Hold the card again for a few seconds
         readerCardLostTitleiOS: You removed the card too soon.
@@ -708,6 +719,8 @@ authentication:
     recoverDescription: If you're missing your password, you can recover it by tapping on the following button.
     dualRecoverDescription: If you're missing your credentials, you can recover them by tapping on the following buttons.
     recoverPassword: Recover the password
+  idp_login_success:
+    contentTitle: Hi, {{name}}!
   errors:
     notoken: The session is not ready or is invalid
     logout: Error on logout
@@ -752,10 +765,10 @@ authentication:
 email:
   cduScreens:
     validateMail:
-      title: Email address not validated
-      subtitle: To continue using the app, you must validate your email address
-      editButton: Edit email address
-      validateButton: Validate email address
+      title: Is this your email?
+      subtitle: To continue using the app, you must confirm that your email is
+      editButton: No, change email
+      validateButton: Yes, confirm
       header:
         title: Configure IO
       help:
@@ -790,17 +803,20 @@ email:
   newinsert:
     header: "Configure IO"
     title: "What is your email address?"
-    subtitle: "We use email for some communications, such as payment receipts or messages exchanged with support."
+    subtitle: We will use it to send you communications such as payment receipts or support messages
     label: "Personal email address"
     alert:
-      title: "The email address {{email}} associated with your SPID identity is already in use on IO. Please enter a different one."
-      description: "email address already in use"
-      modaltitle: "This email address is already in use"
+      title: "{{email}} is already used, insert another one"
+      description1: email address already in use
+      description2: Enter an email address different from your current one
+      description3: Already using this email address
+      invalidemail: Enter a valid email address
+      modaltitle: This email address is already in use
       modaldescription: "This can happen if you share the same address with a family member"
-      modalbutton: "Use another email address"
+      modalbutton: Use another email address
   edit:
     title: Edit email
-    subtitle: The email you inserted is
+    subtitle: Now you use
     validated: The email you inserted and validated is
     label: New personal email address
     cta: Edit email
@@ -820,10 +836,11 @@ email:
     validated: Email validated!
     validated_ok: Thank you, now you can use all payment features, messages forwarding, etc.
   newvalidate:
-    title: Validate your email
-    subtitle: Follow the instructions we sent to
-    link: Is the email address wrong?
+    title: We have sent you an email
+    subtitle: To confirm your address, follow the instructions we have sent to
+    link: Isn't that right?
     buttonlabelsent: Email sent!
+    countdowntext: Request new email in
     buttonlabelsentagain: Send email again
     toast: Done! Check your mailbox.
   newvalidemail:
@@ -925,6 +942,18 @@ datetimes:
   todayAt: today, at
   notValid: Invalid date.
 payment:
+  homeScreen:
+    title: Payments
+    methodsSection:
+      header: Payment methods
+      headerCTA: Add
+    historySection:
+      header: Transaction history
+      headerCTA: View all
+      transactionStatusBadges:
+        failure: "FALLITA"
+        success: ""
+    CTA: Paga un avviso
   alertNoPaymentMethods:
     title: Add a method to make in-app payments
     message: The method will be saved in your Wallet, so you can pay easier next time.
@@ -1202,10 +1231,11 @@ wallet:
             title: "I don't know"
             description: "We will search for all cards registered to you at participating banks"
     generalError: "There was a generic error while adding the payment method"
-    success:
-      title: "Payment method added successfully!"
-      continueButton: "Vedi dettagli"
-    failure:
+    outcome:
+      SUCCESS:
+        title: "Payment method added successfully!"
+        subtitle: ""
+        primaryAction: "Vedi dettagli"
       GENERIC_ERROR:
         title: Si è verificato un errore imprevisto
         subtitle: Riprova o contatta l'assistenza
@@ -1231,6 +1261,10 @@ wallet:
         title: Hai già aggiunto questo metodo
         subtitle: ""
         primaryAction: Chiudi
+      BPAY_NOT_FOUND:
+        title: Non abbiamo trovato alcun BANCOMAT Pay attivo
+        subtitle: "Contatta la tua Banca per attivare il servizio."
+        primaryAction: Chiudi
   alert:
     supportedCardPageLinkError: An error occurred while opening the supported cards page.
     msgErrorUpdateApp: "An error occurred while opening the app store"
@@ -1740,12 +1774,19 @@ wallet:
         subtitle: Per maggiori informazioni, contatta la tua banca.
       CANCELED_BY_USER:
         title: L’operazione è stata annullata
-        subtitle: Non è stato addebitato alcun importo.
+        subtitle: Se vuoi pagare l’avviso, attendi qualche minuto prima di riprovare.
       EXCESSIVE_AMOUNT:
         title: Autorizzazione negata
         subtitle: Non è stato addebitato alcun importo.\nProbabilmente hai sforato i limiti di spesa previsti dalla tua banca.
       INVALID_METHOD:
         title: Il metodo di pagamento non è supportato
+      WAITING_CONFIRMATION_EMAIL:
+        title: Attendi la conferma via email
+        subtitle: Riceverai l'esito del pagamento all'indirizzo {{email}}
+        defaultSubtitle: Riceverai l'esito del pagamento all'indirizzo email associato.
+      METHOD_NOT_ENABLED:
+        title: Abilita il metodo per effettuare pagamenti in app
+        subtitle: Prima di riprovare con il pagamento, seleziona il metodo nel tuo Portafoglio e abilita la funzionalità “Pagamenti in app”.
     support:
       button: "Contatta l'assistenza"
       supportTitle: Contatta l'assistenza
@@ -1879,6 +1920,7 @@ messages:
       success: "Successfully unarchived."
       failure: "Failed to unarchive"
 messageDetails:
+  accessibilityAttachmentIcon: "Includes attachments"
   contextualHelpTitle: Message details
   contextualHelpContent: !include messages/message_detail.md
   headerTitle: Message
@@ -1920,12 +1962,30 @@ messageDetails:
   bottomSheet:
     title: "What's a dynamic message?"
     body: "It's a message that the sender can edit after you've received it. This way, the information it includes will always be up-to-date.\n\nThe sender can edit the information in a dynamic message only in specific cases. For example, to change outdated information or replace an attachment that is no longer valid.\n\nIf the sender needs to share new information or important updates with you, you'll receive a new message."
+  footer:
+    contacts: "Contact the sender"
+    showMoreData: "Show more data"
+  showMoreDataBottomSheet:
+    title: "Identification data"
+    messageId: "Message ID"
+    messageIdAccessibility: "ID messaggio, copy"
+  contactsBottomSheet:
+    title: "Support"
+    body: "If you are unclear about the content of the message, contact the Institution that sent it to you."
+    actions:
+      call: Call
+      email: Send email
 messagePDFPreview:
   title: "PDF Preview"
   singleBtn: "Save or share"
+  singleBtnAccessibility: "Save or share document"
   open: "Open"
   save: "Save"
+  saveAccessibility: "Save document"
   savedAtLocation: "Document {{name}} was successfully saved in your Download folder."
+  share: "Share"
+  shareAccessibility: "Share document"
+  pdfAccessibility: "Preview of the PDF document"
   errors:
     previewing:
       title: "Preview is not available"
@@ -1975,6 +2035,7 @@ services:
         value: "Quick setup"
         label: "all the services you didn't disable can contact you."
         title: "Use quick setup"
+        successAlert: "You have enabled the quick setup"
         body:
           text1: "You'll receive messages only by the institutions which have something important to tell you."
           text2: "You can always deactivate communications by services that do not interest you."
@@ -1982,6 +2043,7 @@ services:
         value: "Manual setup"
         label: "only the services you enabled can contact you."
         title: "Configure manually"
+        successAlert: "You have enabled the manual configuration"
         body:
           text1: "No one will contact you. To receive messages, you will have to enable services one by one."
         bottomSheet:
@@ -2023,6 +2085,17 @@ services:
   disableAllMsg: "Remember, on IO you will receive messages only from services having some personalized information to communicate to you. You will not receive spam messages. If you disable all the services, they can no longer contact you through the app (until you enable it again). You can use the services through other channels (front office, website, etc.)"
   close: Close
   emptyListMessage: There are no services available at this time, pull down to refresh
+  details:
+    failure:
+      title: "There is a temporary problem. Please try again"
+      subtitle: "We are retrieving service details"
+      back: "Back"
+      retry: "Retry"
+    preferences:
+      title: "This service can"
+      inbox: "Contact you in app"
+      pushNotifications: "Send you push notifications"
+      messageReadStatus: "Receive read receipts"
 serviceDetail:
   fiscalCode: "Organization's fiscal code"
   fiscalCodeAccessibility: "Organization's fiscal code"
@@ -2041,16 +2114,21 @@ serviceDetail:
   disabled: disabled
   notValidated: To enable the email forwarding you must validate your email address.
 identification:
-  title: Hi!
+  instructions:
+    unlockCode: unlock code
+    unlockCodepPrefix: use your
+    fingerprint: fingerprint
+    fingerprintPrefix: use your
+    faceId: face
+    faceIdPrefix: use your
+    congiunction: or
+  title: Hi {{name}}!
   titleProfileName: Hi {{profileName}}!
   titleValidation: Confirm the procedure
   logout: Logout
   logoutProfileName: Not {{profileName}}?
   logoutDescription: You can login with your SPID or CIE credentials. This session will be disconnected.
   logoutDescriptionProfileName: You can login with your SPID or CIE credentials. {{profileName}}'s session will be disconnected.
-  subtitleCode: Enter the unlock code
-  subtitleCodeFingerprint: use the fingerprint or the unlock code
-  subtitleCodeFaceId: use the Face ID or enter the unlock code
   biometric:
     fingerprintType: Fingerprint
     title: Biometric identification
@@ -2059,8 +2137,8 @@ identification:
       title: Identification required
       sensorDescription: Login quickly
   fail:
-    remainingAttempts: You have {{attempts}} attempts left.
-    remainingAttemptSingle: You have {{attempts}} attempt left.
+    remainingAttempts: You have {{attempts}} attempts left
+    remainingAttemptSingle: You have {{attempts}} attempt left
     tooManyAttempts: Too many attempts.
     waitMessage: "Try again in:"
   unlockCode:
@@ -2620,12 +2698,24 @@ bonus:
         conjunction: " and "
 features:
   messages:
+    attachmentDownloadFeedback: "Download in progress"
+    attachments: "Attachments"
     loading:
       title: "Loading message details"
       subtitle: "Please wait"
     updateBottomSheet:
       title: "Aggiorna l'app IO"
       subtitle: "Per usare questa funzionalità è richiesta la versione {{value}} di app IO. Aggiorna l’app per continuare."
+    badge:
+      dueDate: Expired on {{date}} at {{time}}
+    alert:
+      addReminder: Add reminder
+      removeReminder: Remove reminder
+      content: Expires on {{date}} at {{time}}
+    payments:
+      title: "pagoPA notices"
+      noticeCode: "Notice code"
+      pay: "Pay"
   euCovidCertificate:
     save:
       album: "IO"
@@ -2778,6 +2868,10 @@ features:
       content: "Do you want to quit signing **{{dossierTitle}}**?"
       cancel: "Quit signing"
       confirm: "Keep signing"
+      alert:
+        title: "Do you want to stop the operation?"
+        confirm: "Yes, stop it"
+        cancel: "No, go back"
     checkService:
       title: "Turn on messages"
       content: "To receive the signed documents, you must turn on the setting that allows the service to send you messages. If you don't turn it on, you can complete the signature but you won't receive the signed documents."
@@ -2836,6 +2930,28 @@ features:
     signatureFieldInfo:
       title: "What are restrictive clauses?"
       subTitle: "These are clauses that highlight specific conditions to be aware of and that must be accepted. By law, they have to be easily identifiable to make sure the signer is aware of their contents before signing."
+  wallet:
+    home:
+      emptyMessage: Custodisci qui i tuoi metodi di pagamento, Carta Giovani Nazionale, bonus e sconti.
+      cta: Aggiungi al Portafoglio
+      toast:
+        newMethod: Elemento aggiunto!
+      paymentsBanner:
+        title: Vuoi pagare un avviso?
+        action: Vai alla sezione Pagamenti
+        close: Chiudi
+    cards:
+      categories:
+        bonus: Iniziative welfare
+        cgn: Carta Giovani Nazionale
+        itw: IT Wallet
+        payment: Payment methods
+    onboarding:
+      title: Cosa vuoi aggiungere al portafoglio?
+      options:
+        cgn: Carta Giovani Nazionale
+        welfare: Iniziative welfare
+        payments: Metodi di pagamento
 webView:
   error:
     missingParams: Not all information necessary to access this page are available
@@ -3402,10 +3518,10 @@ fastLogin:
         subtitle: For security reasons, you must authenticate again with SPID or CIE. You can then resume IO configuration from where you left off.
         submitButtonTitle: Continue
       continueNavigation:
-        title: "La tua sessione è scaduta"
-        subtitle: "Per continuare a utilizzare l’app premi su Continua la navigazione."
-        submitButtonTitle: "Continua la navigazione"
-        cancelButtonTitle: "Annulla"
+        title: "Your session has expired"
+        subtitle: "Please log in to continue using the app"
+        submitButtonTitle: "Log in"
+        cancelButtonTitle: "Cancel"
       transientError:
         title: "We couldn't authenticate you"
         subtitle: "Close the app and try again in a few minutes."
diff --git a/locales/en/jailbroken_body.md b/locales/en/jailbroken_body.md
index 4a755794c22..fc03b935357 100644
--- a/locales/en/jailbroken_body.md
+++ b/locales/en/jailbroken_body.md
@@ -1,7 +1,7 @@
-It seems like your device has been **jailbroken**.
+A **jailbreak** has been performed on your device. This happens when the operating system is modified or incorrectly installed. This could compromise the integrity of the system and the IO application may not function properly.
 
-This happens when the operating system undergoes an unusual modification or installation. The integrity of the operating system may have been compromised and the IO app may not be working properly.
+**What should you do?**
 
-If possible, please do not continue and install the IO app on a different device running an operating system which has integrity and is up-to-date.
+Use the IO app on a device with an intact and up-to-date operating system.
 
-If you continue, you agree to proceed at your own risk in interacting with the services offered, as lack of integrity may lead to data theft and/or other fraudulent activities. You also agree that the app developer is in no way liable for any damage, loss, or consequence you might incur as a result of using the IO app in this execution context.
+By continuing, you agree to continue to interact with the services offered at your own risk. Lack of integrity can lead to data theft or other fraudulent activities. You also agree that the app developer shall not be liable in any way for any damage, loss or consequence caused by the IO app in connection with this performance.
diff --git a/locales/en/rooted_body.md b/locales/en/rooted_body.md
index 3baa573985c..05dce0aba89 100644
--- a/locales/en/rooted_body.md
+++ b/locales/en/rooted_body.md
@@ -1,7 +1,7 @@
-It seems like **root** permissions are enabled on your device.
+You have **root permissions** active on your device. This happens when the operating system is modified or incorrectly installed. This could compromise the integrity of the system and the IO application may not function properly.
 
-This happens when the operating system undergoes an unusual modification or installation. The integrity of the operating system may have been compromised and the IO app may not be working properly.
+**What should you do?**
 
-If possible, please do not continue and install the IO app on a different device running an operating system which has integrity and is up-to-date.
+Use the IO app on a device with an intact and up-to-date operating system.
 
-If you continue, you agree to proceed at your own risk in interacting with the services offered, as lack of integrity may lead to data theft and/or other fraudulent activities. You also agree that the app developer is in no way liable for any damage, loss, or consequence you might incur as a result of using the IO app in this execution context.
+By continuing, you agree to continue to interact with the services offered at your own risk. Lack of integrity can lead to data theft or other fraudulent activities. You also agree that the app developer shall not be liable in any way for any damage, loss or consequence caused by the IO app in connection with this performance.
diff --git a/locales/it/cie/cieNotSupported.md b/locales/it/cie/cieNotSupported.md
deleted file mode 100644
index 48b29e48d14..00000000000
--- a/locales/it/cie/cieNotSupported.md
+++ /dev/null
@@ -1,4 +0,0 @@
-Il dispositivo che stai utilizzando non supporta l’accesso con Carta d’Identità Elettronica (CIE). L’accesso con CIE è supportato da:
-
--   dispositivi con chip NFC e sistema operativo Android 6.0 o superiore;
--   iPhone dal modello 7 in su con sistema operativo iOS 13 o superiore. 
\ No newline at end of file
diff --git a/locales/it/index.yml b/locales/it/index.yml
index d55a2f36ae3..63abffdd875 100644
--- a/locales/it/index.yml
+++ b/locales/it/index.yml
@@ -190,6 +190,7 @@ global:
     messages: Messaggi
     wallet: Portafoglio
     scan: Inquadra
+    payments: Pagamenti
     documents: Documenti
     profile: Profilo
     services: Servizi
@@ -213,6 +214,11 @@ tablet:
   message: L’interfaccia di IO è ottimizzata per smartphone, ma tutte le funzioni compatibili con il tuo dispositivo sono comunque disponibili.
 rooted:
   title: Sembra che la sicurezza del tuo dispositivo sia compromessa!
+  body: Se premi su ‘Continua’, accetti di proseguire a tuo rischio nella navigazione, altrimenti chiudi l’app.
+  learnMoreButton:
+    title: Cosa significa?
+  learnMoreBottomsheet:
+    title: Sicurezza del dispositivo
   bodyiOS: !include jailbroken_body.md
   bodyAndroid: !include rooted_body.md
   continueAlert:
@@ -229,6 +235,7 @@ locales:
   en: Inglese
   de: Tedesco
 clipboard:
+  copyIntoClipboard: copia negli appunti
   copyFeedback: Copiato negli appunti
   copyText: copia
   copyFeedbackButton: copiato
@@ -249,7 +256,7 @@ permissionRationale:
     title: "Consenti l’accesso alla fotocamera"
     message: "Abbiamo bisogno dell'accesso alla fotocamera per utilizzare la torcia."
 startup:
-  title: Inizializzazione
+  title: Stiamo preparando la tua esperienza su IO
   authentication: Utente autenticato
   sessionInfo: Attributi SPID caricati
   profileInfo: Profilo utente caricato
@@ -437,6 +444,7 @@ profile:
       idpayTest: IDPay
       idpayTestAlert: La modifica richiede il riavvio dell'app
     designSystemEnvironment: Design System sperimentale
+    newWalletSection: Nuova sezione portafoglio
     appVersion: Versione
     backendVersion: Versione Backend
     debugMode: Modalità debug
@@ -447,8 +455,9 @@ profile:
         title: Attenzione
         message: Per aggiungere una nuova carta di test, devi abilitare l'ambiente pagoPA di test dalle impostazioni.
         closeButton: Chiudi
-    walletPlayground:
-      titleSection: "New Wallet"
+    itWallet:
+      itWalletTest: IT Wallet
+      itWalletTestDescription: Abilita ambiente di test per IT Wallet
   data:
     title: I tuoi dati
     subtitle: Qui trovi i tuoi dati anagrafici e di contatto utilizzati da app IO
@@ -560,13 +569,15 @@ authentication:
         hint: Carosello contenente una guida introduttiva alle funzionalità di IO. Seleziona per consultarne il contenuto
     session_expired:
       title: La tua sessione è scaduta
-      body: Per ragioni di sicurezza, dopo {{days}} giorni dall'ultimo accesso con SPID o CIE, ti chiediamo di inserire nuovamente le credenziali per utilizzare IO.
+      body: Per ragioni di sicurezza, ti chiediamo di entrare con SPID o CIE ogni {{days}} giorni o se esci dall’app.
     cie_unsupported:
-      title: Accesso con CIE non disponibile
-      body: !include cie/cieNotSupported.md
-      android_desc: !include cie/cieNotSupported_android.md
-      os_version_unsupported: un sistema operativo Android 6.0 o superiore
-      nfc_incompatible: un chip NFC compatibile
+      title: Non puoi entrare con CIE
+      body: Il dispositivo che stai utilizzando non supporta l’accesso con Carta d’Identità Elettronica (CIE).
+      button: Ho capito
+      nfc_problem: Per leggere la CIE è necessario un dispositivo con chip NFC.
+      os_problem: È richiesto un sistema operativo Android 6.0 o iOS 13 o superiori.
+      nfc_alert: Il tuo dispositivo non ha l'NFC.
+      os_alert: Il sistema operativo del dispositivo non è aggiornato.
     contentTitleCie: Non hai SPID o la CIE?
     cie_information_request: !include cie.md
     spid_or_cie: Per utilizzare IO devi dotarti di uno di questi strumenti digitali, che certificano in maniera certa la tua identità.
@@ -579,6 +590,7 @@ authentication:
     loginSpidCie: Accedi con SPID o CIE
     infoSpidCie: Introduzione a SPID e CIE
     loginSpidCieContent: Da oggi, oltre a SPID, puoi usare la tua Carta d'Identità Elettronica per accedere
+    privacyLink: Informativa privacy
     nospid: Non hai SPID? Scopri di più
     nospid-nocie: Non hai SPID o CIE? Scopri di più
     card1-title: Tutti i messaggi in un solo posto
@@ -587,10 +599,8 @@ authentication:
     card2-content: Puoi pagare un tributo o una multa con il tuo conto corrente e le tue carte
     card3-title: Paga velocemente un avviso cartaceo
     card3-content: Tramite la scansione del QR code puoi velocemente pagare anche un avviso cartaceo
-    card4-title: Puoi accedere solo con SPID
-    card4-content: Il dispositivo che stai utilizzando non supporta l’accesso con Carta d’Identità Elettronica (CIE)
-    card5-title: Benvenuto nella prima versione pubblica di IO!
-    card5-content: In alto a destra trovi l'icona '?' per aprire una chat con il team di IO se qualcosa non funziona come dovrebbe.
+    card5-title: Ti diamo il benvenuto su IO!
+    card5-content: Vediamo insieme cosa puoi fare
     card5-content-accessibility: Seleziona elemento precedente per aprire una chat con il team di IO se qualcosa non funziona come dovrebbe.
     expiredCardTitle: Carta scaduta o non più valida
     expiredCardHeaderTitle: Entra con CIE
@@ -654,6 +664,7 @@ authentication:
         cardLocked: Carta CIE bloccata
         wrongPin1AttemptLeft: PIN errato, hai ancora 1 tentativo
         wrongPin2AttemptLeft: PIN errato, hai ancora 2 tentativi
+        genericError: Si è verificato un errore imprevisto. Riprova.
       error:
         readerCardLostTitle: Avvicina nuovamente la carta
         readerCardLostTitleiOS: Hai rimosso la carta troppo presto
@@ -708,6 +719,8 @@ authentication:
     dualRecoverDescription: Se hai dimenticato le tue credenziali, ti consigliamo di procedere cliccando sui bottoni qui di seguito.
     recoverUsername: Recupera il nome utente
     recoverPassword: Recupera la password
+  idp_login_success:
+    contentTitle: Ciao {{name}}!
   errors:
     notoken: La sessione non è pronta o non è valida
     logout: Errore nel logout
@@ -752,10 +765,10 @@ authentication:
 email:
   cduScreens:
     validateMail:
-      title: Non hai confermato il tuo indirizzo email
-      subtitle: Per continuare a utilizzare l’app è necessario validare il tuo indirizzo email
-      editButton: Modifica email
-      validateButton: Conferma email
+      title: È questa la tua email?
+      subtitle: Per continuare a usare l’app, devi confermare che la tua email è
+      editButton: No, modifica
+      validateButton: Sì, conferma
       header:
         title: Configura IO
       help:
@@ -763,7 +776,7 @@ email:
     emailAlreadyTaken:
       title: Modifica la tua email
       subtitleStart: Il tuo indirizzo email
-      subtitleEnd: risulta già in uso su IO, è necessario inserirne uno diverso per continuare a utilizzare l’app.
+      subtitleEnd: è già in uso su IO, devi inserirne uno diverso per continuare a usare l’app.
       editButton: Modifica email
       header:
         title: Configura IO
@@ -790,17 +803,20 @@ email:
   newinsert:
     header: Configura IO
     title: Qual è la tua email?
-    subtitle: Utilizziamo l’email per alcune comunicazioni, come le ricevute di pagamento o i messaggi scambiati con l’assistenza.
+    subtitle: Servirà a inviarti comunicazioni come ricevute di pagamento o messaggi di assistenza.
     label: Indirizzo email personale
     alert:
-      title: L’email {{email}} associata alla tua identità SPID è già in uso su IO, inseriscine una diversa.
-      description: "email già in uso"
-      modaltitle: "Questa email è già in uso"
-      modaldescription: "Può succedere se condividi lo stesso indirizzo con un familiare"
-      modalbutton: "Usa un’altra email"
+      title: "{{email}} è già in uso, inseriscine un’altra."
+      description1: Email già in uso
+      description2: Inserisci un indirizzo diverso da quello attuale
+      description3: Stai già usando questa email
+      invalidemail: Inserisci un indirizzo email valido
+      modaltitle: Questa email è già in uso
+      modaldescription: Può succedere se condividi lo stesso indirizzo con un familiare
+      modalbutton: Usa un’altra email
   edit:
     title: Modifica la tua email
-    subtitle: L'email che avevi inserito in precedenza è
+    subtitle: Ora stai usando
     validated: L'email che avevi inserito e validato in precedenza è
     label: Nuovo indirizzo email personale
     cta: Modifica email
@@ -820,12 +836,13 @@ email:
     validated: Email validata!
     validated_ok: Grazie, ora puoi usare le funzionalità legate ai pagamenti, all’inoltro dei messaggi, etc.
   newvalidate:
-    title: Conferma la tua email
-    subtitle: Segui le istruzioni che abbiamo inviato a
-    link: Non è corretta?
+    title: Ti abbiamo inviato un’email
+    subtitle: Per confermare il tuo indirizzo, segui le istruzioni che abbiamo inviato a
+    link: Non è corretto?
+    countdowntext: Richiedi una nuova email tra
     buttonlabelsent: Email inviata!
     buttonlabelsentagain: Invia di nuovo l’email
-    toast: Fatto! Controlla tua casella di posta.
+    toast: Fatto! Controlla la tua casella di posta.
   newvalidemail:
     title: Email confermata!
     subtitle: Riceverai le comunicazioni di IO all’indirizzo
@@ -925,6 +942,18 @@ datetimes:
   todayAt: oggi, alle
   notValid: Data non valida.
 payment:
+  homeScreen:
+    title: Pagamenti
+    methodsSection:
+      header: Metodi di pagamento
+      headerCTA: Aggiungi
+    historySection:
+      header: Storico operazioni
+      headerCTA: Vedi tutte
+      transactionStatusBadges:
+        failure: "FALLITA"
+        success: ""
+    CTA: Paga un avviso
   alertNoPaymentMethods:
     title: Aggiungi un metodo per effettuare pagamenti in app
     message: Il metodo verrà salvato nel Portafoglio, così la prossima volta potrai pagare più facilmente.
@@ -1202,10 +1231,11 @@ wallet:
             title: "Non lo so"
             description: "Cercheremo tutte le carte intestate a te presso le banche aderenti al servizio"
     generalError: "C'è stato un errore generico durante l'aggiunta del metodo di pagamento"
-    success:
-      title: "La carta è stata aggiunta!"
-      continueButton: "Vedi dettagli"
-    failure:
+    outcome:
+      SUCCESS:
+        title: "Il metodo è stato aggiunto"
+        subtitle: ""
+        primaryAction: "Vedi dettagli"
       GENERIC_ERROR:
         title: Si è verificato un errore imprevisto
         subtitle: Riprova o contatta l'assistenza
@@ -1231,6 +1261,10 @@ wallet:
         title: Hai già aggiunto questo metodo
         subtitle: ""
         primaryAction: Chiudi
+      BPAY_NOT_FOUND:
+        title: Non abbiamo trovato alcun BANCOMAT Pay attivo
+        subtitle: "Contatta la tua Banca per attivare il servizio."
+        primaryAction: Chiudi
   alert:
     supportedCardPageLinkError: Si è verificato un errore durante l'apertura della pagina di riferimento per le carte supportate.
     msgErrorUpdateApp: "Si è verificato un errore durante l'apertura dello store delle app"
@@ -1740,12 +1774,19 @@ wallet:
         subtitle: Per maggiori informazioni, contatta la tua banca.
       CANCELED_BY_USER:
         title: L’operazione è stata annullata
-        subtitle: Non è stato addebitato alcun importo.
+        subtitle: Se vuoi pagare l’avviso, attendi qualche minuto prima di riprovare.
       EXCESSIVE_AMOUNT:
         title: Autorizzazione negata
         subtitle: Non è stato addebitato alcun importo.\nProbabilmente hai sforato i limiti di spesa previsti dalla tua banca.
       INVALID_METHOD:
         title: Il metodo di pagamento non è supportato
+      WAITING_CONFIRMATION_EMAIL:
+        title: Attendi la conferma via email
+        subtitle: Riceverai l'esito del pagamento all'indirizzo {{email}}
+        defaultSubtitle: Riceverai l'esito del pagamento all'indirizzo email associato.
+      METHOD_NOT_ENABLED:
+        title: Abilita il metodo per effettuare pagamenti in app
+        subtitle: Prima di riprovare con il pagamento, seleziona il metodo nel tuo Portafoglio e abilita la funzionalità “Pagamenti in app”.
     support:
       button: "Contatta l'assistenza"
       supportTitle: Contatta l'assistenza
@@ -1879,6 +1920,7 @@ messages:
       success: "Ripristino effettuato."
       failure: "Il ripristino non è andato a buon fine"
 messageDetails:
+  accessibilityAttachmentIcon: "Contiene allegati"
   contextualHelpTitle: Dettagli del messaggio
   contextualHelpContent: !include messages/message_detail.md
   headerTitle: Messaggio
@@ -1920,12 +1962,30 @@ messageDetails:
   bottomSheet:
     title: "Cos'è un messaggio dinamico?"
     body: "È un messaggio che l'ente può modificare dopo averlo inviato. In questo modo, le informazioni che contiene saranno sempre corrette.\n\nUn ente può modificare le informazioni di un messaggio dinamico solo in casi specifici, per esempio per cambiare un'informazione vecchia o aggiornare un allegato non più valido.\n\nSe deve comunicarti nuove informazioni o aggiornamenti importanti, ti invierà un nuovo messaggio."
+  footer:
+    contacts: "Contatta il mittente"
+    showMoreData: "Mostra altri dati"
+  showMoreDataBottomSheet:
+    title: "Dati identificativi"
+    messageId: "ID messaggio"
+    messageIdAccessibility: "ID messaggio, copia"
+  contactsBottomSheet:
+    title: "Assistenza"
+    body: "Se non ti è chiaro il contenuto del messaggio, contatta l’ente che te lo ha inviato."
+    actions:
+      call: Fai una chiamata
+      email: Scrivi un'email
 messagePDFPreview:
   title: "Anteprima PDF"
   singleBtn: "Salva o condividi"
+  singleBtnAccessibility: "Salva o condividi documento"
   open: "Apri"
   save: "Salva"
+  saveAccessibility: "Salva documento"
   savedAtLocation: "Il documento {{name}} è stato salvato nella cartella Download."
+  share: "Condividi"
+  shareAccessibility: "Condividi documento"
+  pdfAccessibility: "Anteprima documento PDF"
   errors:
     previewing:
       title: "L’anteprima non è disponibile"
@@ -1975,6 +2035,7 @@ services:
         value: "Configurazione rapida"
         label: "tutti i servizi che non hai disattivato possono contattarti."
         title: "Usa configurazione rapida"
+        successAlert: "Hai abilitato la configurazione rapida"
         body:
           text1: "Ti contatteranno solo gli enti che hanno qualcosa di importante da dirti."
           text2: "Potrai sempre disattivare le comunicazioni dei servizi che non ti interessano."
@@ -1982,6 +2043,7 @@ services:
         value: "Configurazione manuale"
         label: "ti possono contattare solo i servizi che hai attivato."
         title: "Configura manualmente"
+        successAlert: "Hai abilitato la configurazione manuale"
         body:
           text1: "Nessuno potrà contattarti. Per ricevere messaggi dovrai attivare i servizi uno a uno."
         bottomSheet:
@@ -2023,6 +2085,17 @@ services:
   disableAllMsg: "Ricorda che su IO ti scriveranno solo i servizi che effettivamente hanno qualche informazione personalizzata da comunicarti. Non riceverai messaggi di spam. Se disattivi tutti i servizi, questi non potranno più contattarti tramite IO (finché non li riattiverai). Potrai continuare a fruire i servizi attraverso altri canali (sportello, sito, etc.)"
   close: Chiudi
   emptyListMessage: Non ci sono servizi disponibili al momento, trascina in basso per aggiornare
+  details:
+    failure:
+      title: "C'è un problema temporaneo, riprova"
+      subtitle: "Stiamo recuperando i dettagli del servizio"
+      back: "Indietro"
+      retry: "Riprova"
+    preferences:
+      title: "Questo servizio può"
+      inbox: "Contattarti in app"
+      pushNotifications: "Inviarti notifiche push"
+      messageReadStatus: "Ricevere conferme di lettura"
 serviceDetail:
   fiscalCode: "C.F. Ente"
   fiscalCodeAccessibility: "Codice fiscale Ente"
@@ -2041,16 +2114,21 @@ serviceDetail:
   disabled: disabilitato
   notValidated: Per poter abilitare le notifiche via email devi validare il tuo indirizzo email."
 identification:
-  title: Ciao!
+  instructions:
+    unlockCode: codice di sblocco
+    unlockCodepPrefix: inserisci il
+    fingerprint: impronta
+    fingerprintPrefix: usa l'
+    faceId: volto
+    faceIdPrefix: usa il
+    congiunction: o
+  title: Ciao {{name}}!
   titleProfileName: Ciao {{profileName}}!
   titleValidation: Conferma l'operazione
   logout: Esci
   logoutProfileName: Non sei {{profileName}}?
   logoutDescription: Puoi accedere con le tue credenziali SPID o CIE. Questa sessione verrà disconnessa.
   logoutDescriptionProfileName: Puoi accedere con le tue credenziali SPID o CIE. La sessione di {{profileName}} verrà disconnessa.
-  subtitleCode: Inserisci il codice di sblocco
-  subtitleCodeFingerprint: "usa l'impronta o il codice di sblocco"
-  subtitleCodeFaceId: "usa Face ID o il codice di sblocco"
   biometric:
     fingerprintType: Impronta digitale
     title: Identificazione Biometrica
@@ -2059,9 +2137,9 @@ identification:
       title: Identificazione richiesta
       sensorDescription: Accedi velocemente
   fail:
-    remainingAttempts: Ti rimangono {{attempts}} tentativi.
-    remainingAttemptSingle: Ti rimane {{attempts}} tentativo.
-    tooManyAttempts: Troppi tentativi di inserimento errati.
+    remainingAttempts: Hai a disposizione ancora {{attempts}} tentativi
+    remainingAttemptSingle: Hai a disposizone ancora {{attempts}} tentativo
+    tooManyAttempts: Hai inserito troppe volte il codice sbagliato!
     waitMessage: "Riprova tra:"
   unlockCode:
     accessibility:
@@ -2544,7 +2622,7 @@ bonus:
         title: "Stiamo processando la tua richiesta."
         body: "Ti invieremo un messaggio in app quando la tua Carta Giovani sarà attiva."
       alreadyActive:
-        title: "La tua Carta Giovani Nazionale è attiva!"
+        title: "La tua Carta Giovani Nazionale è già attiva!"
         body: "Puoi visualizzarne i dettagli nella sezione Portafoglio."
       pending:
         title: "La tua Carta Giovani Nazionale è in fase di attivazione."
@@ -2620,12 +2698,24 @@ bonus:
         conjunction: ", "
 features:
   messages:
+    attachmentDownloadFeedback: "Download in corso"
+    attachments: "Allegati"
     loading:
       title: "Sto caricando i dettagli del messaggio"
       subtitle: "Attendi qualche secondo"
     updateBottomSheet:
       title: "Aggiorna l'app IO"
       subtitle: "Per usare questa funzionalità è richiesta la versione {{value}} di app IO. Aggiorna l’app per continuare."
+    badge:
+      dueDate: Scaduto il {{date}} alle ore {{time}}
+    alert:
+      addReminder: Aggiungi promemoria
+      removeReminder: Rimuovi promemoria
+      content: Scade il {{date}} alle ore {{time}}
+    payments:
+      title: "Avvisi pagoPA"
+      noticeCode: "Codice avviso"
+      pay: "Paga"
   euCovidCertificate:
     save:
       album: "IO"
@@ -2778,6 +2868,10 @@ features:
       content: "Vuoi annullare la firma di **{{dossierTitle}}**?"
       cancel: "Annulla la firma"
       confirm: "Continua a firmare"
+      alert:
+        title: "Vuoi interrompere l'operazione?"
+        confirm: "Sì, interrompi"
+        cancel: "No, torna indietro"
     checkService:
       title: "Attiva i messaggi"
       content: "Per ricevere i documenti firmati devi attivare l’opzione che consente al servizio di inviarti messaggi. Se non la attivi, puoi completare la firma ma non riceverai i documenti firmati."
@@ -2836,6 +2930,28 @@ features:
     signatureFieldInfo:
       title: "Cosa sono le clausole vessatorie?"
       subTitle: "Sono delle clausole che segnalano condizioni particolari a cui prestare attenzione e che devono essere accettate. Devono inoltre essere, per legge, facilmente identificabili per far sì che chi firma sia informato del loro contenuto prima di apporre la firma."
+  wallet:
+    home:
+      emptyMessage: Custodisci qui i tuoi metodi di pagamento, Carta Giovani Nazionale, bonus e sconti.
+      cta: Aggiungi al Portafoglio
+      toast:
+        newMethod: Elemento aggiunto!
+      paymentsBanner:
+        title: Vuoi pagare un avviso?
+        action: Vai alla sezione Pagamenti
+        close: Chiudi
+    cards:
+      categories:
+        bonus: Iniziative welfare
+        cgn: Carta Giovani Nazionale
+        itw: IT Wallet
+        payment: Metodi di pagamento
+    onboarding: 
+      title: Cosa vuoi aggiungere al portafoglio?
+      options: 
+        cgn: Carta Giovani Nazionale
+        welfare: Iniziative welfare
+        payments: Metodi di pagamento
 webView:
   error:
     missingParams: Non sono presenti le informazioni necessarie per accedere a questa pagina
@@ -3399,12 +3515,12 @@ fastLogin:
     sessionExpired:
       noPin:
         title: È passato troppo tempo!
-        subtitle: Per ragioni di sicurezza devi autenticarti di nuovo con SPID o CIE. Potrai poi continuare la configurazione di IO da dove l’avevi interrotta.
+        subtitle: Per motivi di sicurezza, devi identificarti di nuovo con SPID o CIE. Potrai poi riprendere la configurazione di IO da dove l’avevi interrotta.
         submitButtonTitle: Continua
       continueNavigation:
         title: "La tua sessione è scaduta"
-        subtitle: "Per continuare a utilizzare l’app premi su Continua la navigazione."
-        submitButtonTitle: "Continua la navigazione"
+        subtitle: "Accedi per continuare a usare l’app."
+        submitButtonTitle: "Accedi"
         cancelButtonTitle: "Annulla"
       transientError:
         title: "Non siamo riusciti ad autenticarti"
diff --git a/locales/it/jailbroken_body.md b/locales/it/jailbroken_body.md
index 6e155604224..9762448e8c1 100644
--- a/locales/it/jailbroken_body.md
+++ b/locales/it/jailbroken_body.md
@@ -1,7 +1,7 @@
-Sembra che sul tuo dispositivo sia stata effettuata la procedura di **jailbreak**.
+Sul tuo dispositivo è stato effettuato un **jailbrack**. Questo succede quando il sistema operativo viene modificato o installato in modo anomalo. Questo potrebbe compromettere l’integrità del sistema e l'app IO potrebbe non funzionare correttamente.
 
-Questo accade quando il sistema operativo viene modificato oppure quando viene installato in modo anomalo. L'integrità del sistema operativo potrebbe essere stata compromessa e l'app IO potrebbe non funzionare correttamente.
+**Cosa fare?**
 
-Se possibile, ti invitiamo a non continuare e ad installare l'app IO su un dispositivo diverso che abbia un sistema operativo integro e aggiornato.
+Ti invitiamo a usare l'app IO su un dispositivo diverso, con un sistema operativo integro e aggiornato.
 
-Se continui, accetti di proseguire a tuo rischio nell'interazione con i servizi offerti, poiché la mancanza di integrità può condurre al furto di dati e/o ad altre attività fraudolente. Accetti inoltre che lo sviluppatore dell’app non sia in alcun modo responsabile di eventuali danni, perdite o conseguenze da te subite in virtù dell'utilizzo dell'app IO in questo contesto di esecuzione.
+Se continui, accetti di proseguire a tuo rischio nell'interazione con i servizi offerti. La mancanza di integrità può portare al furto di dati o ad altre attività fraudolente. Accetti anche che lo sviluppatore dell’app non sia in alcun modo responsabile di eventuali danni, perdite o conseguenze causate dall'app IO in questo contesto di esecuzione.
\ No newline at end of file
diff --git a/locales/it/rooted_body.md b/locales/it/rooted_body.md
index 48b700b5e79..f22ce4f6fbf 100644
--- a/locales/it/rooted_body.md
+++ b/locales/it/rooted_body.md
@@ -1,7 +1,7 @@
-Sembra che sul tuo dispositivo siano abilitati i permessi di **root**.
+Sul tuo dispositivo sono attivi i **permessi di root**. Questo succede quando il sistema operativo viene modificato o installato in modo anomalo. Questo potrebbe compromettere l’integrità del sistema e l'app IO potrebbe non funzionare correttamente.
 
-Questo accade quando il sistema operativo viene modificato oppure quando viene installato in modo anomalo. L'integrità del sistema operativo potrebbe essere stata compromessa e l'app IO potrebbe non funzionare correttamente.
+**Cosa fare?**
 
-Se possibile, ti invitiamo a non continuare e ad installare l'app IO su un dispositivo diverso che abbia un sistema operativo integro e aggiornato.
+Ti invitiamo a usare l'app IO su un dispositivo diverso, con un sistema operativo integro e aggiornato.
 
-Se continui, accetti di proseguire a tuo rischio nell'interazione con i servizi offerti, poiché la mancanza di integrità può condurre al furto di dati e/o ad altre attività fraudolente. Accetti inoltre che lo sviluppatore dell’app non sia in alcun modo responsabile di eventuali danni, perdite o conseguenze da te subite in virtù dell'utilizzo dell'app IO in questo contesto di esecuzione.
+Se continui, accetti di proseguire a tuo rischio nell'interazione con i servizi offerti. La mancanza di integrità può portare al furto di dati o ad altre attività fraudolente. Accetti anche che lo sviluppatore dell’app non sia in alcun modo responsabile di eventuali danni, perdite o conseguenze causate dall'app IO in questo contesto di esecuzione.
\ No newline at end of file
diff --git a/package.json b/package.json
index ac533d5a0ed..e97c41709af 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "italia-app",
-  "version": "2.53.0-rc.0",
+  "version": "2.58.0-rc.0",
   "io_backend_api": "https://raw.githubusercontent.com/pagopa/io-backend/v13.32.1-RELEASE/api_backend.yaml",
   "io_public_api": "https://raw.githubusercontent.com/pagopa/io-backend/v13.32.1-RELEASE/api_public.yaml",
   "io_content_specs": "https://raw.githubusercontent.com/pagopa/io-services-metadata/1.0.30/definitions.yml",
@@ -19,8 +19,8 @@
   "idpay_api": "https://raw.githubusercontent.com/pagopa/cstar-infrastructure/v6.9.1/src/domains/idpay-app/api/idpay_appio_full/openapi.appio.full.yml",
   "lollipop_api": "https://raw.githubusercontent.com/pagopa/io-backend/v13.32.1-RELEASE/api_lollipop_first_consumer.yaml",
   "fast_login_api": "https://raw.githubusercontent.com/pagopa/io-backend/v13.32.1-RELEASE/openapi/generated/api_fast_login.yaml",
-  "pagopa_api_walletv3": "https://raw.githubusercontent.com/pagopa/pagopa-infra/740e7dcc5ea2ea19639316fea6797bbd504dd0ae/src/domains/wallet-app/api/payment-wallet/v1/_openapi.json.tpl",
-  "pagopa_api_ecommerce": "https://raw.githubusercontent.com/pagopa/pagopa-infra/a5299db39de86a951d353fdc2bfed48188c0c125/src/domains/ecommerce-app/api/ecommerce-io/v1/_openapi.json.tpl",
+  "pagopa_api_walletv3": "https://raw.githubusercontent.com/pagopa/pagopa-infra/bec0f57606a2002706bd5f5286fad3e508d2f50e/src/domains/wallet-app/api/payment-wallet/v1/_openapi.json.tpl",
+  "pagopa_api_ecommerce": "https://raw.githubusercontent.com/pagopa/pagopa-infra/2adee4c0a8de8570e74710379f9cccb04c6925b6/src/domains/ecommerce-app/api/ecommerce-io/v1/_openapi.json.tpl",
   "private": true,
   "scripts": {
     "start": "react-native start",
@@ -34,7 +34,7 @@
     "start-breaking-cycle": "yarn pre-cycle && standard-version -t \"\" --prerelease rc --release-as major --no-verify && yarn push-hint",
     "attach": "react-native attach",
     "postinstall": "patch-package && rn-nodeify --install path,buffer && chmod +x ./bin/add-ios-source-maps.sh && ./bin/add-ios-source-maps.sh && chmod +x ./bin/add-ios-env-config.sh && ./bin/add-ios-env-config.sh",
-    "test:ci": "jest --ci --maxWorkers=2 --silent",
+    "test:ci": "jest --ci --maxWorkers=4 --silent",
     "test:dev": "jest --detectOpenHandles --coverage=false",
     "test:tz": "yarn test:tz-eu-rome && yarn test:tz-us-ny && yarn test:tz-us-yt && yarn test:tz-au-syd && yarn test:tz-eu-rome-comp",
     "test:tz-eu-rome": "TZ='Europe/Rome' jest --config='./jest.config.no.timezone.js' --detectOpenHandles --coverage=false -t 'Check fiscal code date IT' './ts/utils/__tests__/fiscal-code.test.ts'",
@@ -76,9 +76,9 @@
     "generate:idpay": "npm-run-all generate:idpay-api",
     "generate:lollipop-api": "rimraf definitions/lollipop && mkdir -p definitions/lollipop && gen-api-models --api-spec $npm_package_lollipop_api --out-dir ./definitions/lollipop --no-strict --response-decoders --request-types --client",
     "generate:fast-login-api": "rimraf definitions/fast_login && mkdir -p definitions/fast_login && gen-api-models --api-spec $npm_package_fast_login_api --out-dir ./definitions/fast_login --no-strict --response-decoders --request-types --client",
-    "generate:wallet-api": "rimraf definitions/pagopa/walletv3 && mkdir -p definitions/pagopa/walletv3 && gen-api-models --api-spec $npm_package_pagopa_api_walletv3 --out-dir ./definitions/pagopa/walletv3 --no-strict --response-decoders --request-types --client",
+    "generate:pagopa-walletv3-api": "rimraf definitions/pagopa/walletv3 && mkdir -p definitions/pagopa/walletv3 && gen-api-models --api-spec $npm_package_pagopa_api_walletv3 --out-dir ./definitions/pagopa/walletv3 --no-strict --response-decoders --request-types --client",
     "generate:pagopa-ecommerce-api": "rimraf definitions/pagopa/ecommerce && mkdir -p definitions/pagopa/ecommerce && gen-api-models --api-spec $npm_package_pagopa_api_ecommerce --out-dir ./definitions/pagopa/ecommerce --no-strict --response-decoders --request-types --client",
-    "generate:wallet": "npm-run-all generate:wallet-api",
+    "generate:payments": "npm-run-all generate:pagopa-walletv3-api generate:pagopa-ecommerce-api",
     "generate": "npm-run-all generate:*",
     "locales_unused": "ts-node --skip-project -O '{\"lib\":[\"es2015\"]}' scripts/unused-locales.ts",
     "remove_unused_locales": "ts-node --skip-project -O '{\"lib\":[\"es2015\"]}' scripts/remove-unused-locales.ts",
@@ -95,25 +95,25 @@
   "dependencies": {
     "@babel/plugin-transform-regenerator": "^7.18.6",
     "@gorhom/bottom-sheet": "^4.1.5",
-    "@pagopa/io-app-design-system": "1.20.1",
+    "@pagopa/io-app-design-system": "1.33.0",
     "@pagopa/io-pagopa-commons": "^3.1.0",
-    "@pagopa/io-react-native-crypto": "^0.2.1",
-    "@pagopa/io-react-native-login-utils": "^0.2.2",
-    "@pagopa/io-react-native-zendesk": "^0.3.28",
-    "@pagopa/react-native-cie": "1.2.0",
+    "@pagopa/io-react-native-crypto": "^0.3.0",
+    "@pagopa/io-react-native-http-client": "^0.1.3",
+    "@pagopa/io-react-native-login-utils": "^1.0.0",
+    "@pagopa/io-react-native-zendesk": "^0.3.29",
+    "@pagopa/react-native-cie": "^1.2.1",
     "@pagopa/ts-commons": "^10.15.0",
     "@react-native-async-storage/async-storage": "^1.17.10",
     "@react-native-camera-roll/camera-roll": "5.6.1",
     "@react-native-clipboard/clipboard": "^1.10.0",
-    "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/push-notification-ios": "^1.8.0",
     "@react-native-community/slider": "^3.0.3",
     "@react-native-cookies/cookies": "^6.2.1",
-    "@react-native-picker/picker": "^2.4.1",
-    "@react-navigation/bottom-tabs": "^5.11.15",
-    "@react-navigation/material-top-tabs": "^5.x",
-    "@react-navigation/native": "^5.9.8",
-    "@react-navigation/stack": "^5.14.9",
+    "@react-navigation/bottom-tabs": "6.5.11",
+    "@react-navigation/material-top-tabs": "6.6.5",
+    "@react-navigation/native": "6.1.9",
+    "@react-navigation/native-stack": "^6.9.17",
+    "@react-navigation/stack": "6.3.20",
     "@redux-saga/testing-utils": "^1.1.3",
     "@xstate/react": "^3.0.1",
     "async-mutex": "^0.1.3",
@@ -133,13 +133,14 @@
     "jwk-thumbprint": "^0.1.4",
     "lodash": "^4.17.21",
     "metro-babel-register": "^0.72.1",
+    "mixpanel-react-native": "2.4.1",
     "native-base": "^2.15.2",
     "native-base-shoutem-theme": "0.3.1",
     "pako": "^2.1.0",
     "path-browserify": "0.0.0",
     "pdf-lib": "^1.17.1",
-    "react": "18.0.0",
-    "react-native": "0.69.9",
+    "react": "18.1.0",
+    "react-native": "0.70.15",
     "react-native-android-open-settings": "^1.3.0",
     "react-native-background-timer": "2.1.1",
     "react-native-barcode-builder": "^2.0.0",
@@ -148,13 +149,13 @@
     "react-native-config": "^1.4.5",
     "react-native-crypto": "^2.1.0",
     "react-native-device-info": "^10.8.0",
-    "react-native-document-picker": "^9.0.1",
+    "react-native-document-picker": "^9.1.1",
     "react-native-exception-handler": "^2.10.8",
     "react-native-fingerprint-scanner": "^6.0.0",
     "react-native-flag-secure-android": "^1.0.3",
     "react-native-flipper": "^0.154.0",
     "react-native-fs": "^2.18.0",
-    "react-native-gesture-handler": "^2.12.0",
+    "react-native-gesture-handler": "^2.12.1",
     "react-native-haptic-feedback": "^2.0.2",
     "react-native-i18n": "^2.0.15",
     "react-native-image-pan-zoom": "^2.1.11",
@@ -163,8 +164,7 @@
     "react-native-keychain": "^4.0.5",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-masked-text": "^1.13.0",
-    "react-native-mixpanel": "1.2.0",
-    "react-native-modal-datetime-picker": "^10.2.0",
+    "react-native-pager-view": "^6.2.3",
     "react-native-pdf": "^6.4.0",
     "react-native-pdf-thumbnail": "^1.2.1",
     "react-native-permissions": "^4.0.0",
@@ -176,12 +176,12 @@
     "react-native-responsive-screen": "^1.4.1",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-screen-brightness": "^2.0.0-alpha",
-    "react-native-screens": "^2.18.1",
+    "react-native-screens": "^3.30.1",
     "react-native-sha256": "1.2.3",
     "react-native-share": "7.3.9",
     "react-native-splash-screen": "^3.2.0",
-    "react-native-svg": "^12.3.0",
-    "react-native-tab-view": "^2.x",
+    "react-native-svg": "^15.1.0",
+    "react-native-tab-view": "3.5.2",
     "react-native-view-shot": "3.1.2",
     "react-native-vision-camera": "2.15.4",
     "react-native-webview": "^11.26.1",
@@ -218,7 +218,7 @@
     "xstate": "^4.33.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
+    "@babel/core": "^7.18.8",
     "@babel/preset-typescript": "^7.16.7",
     "@babel/runtime": "^7.15.3",
     "@jambit/eslint-plugin-typed-redux-saga": "^0.4.0",
@@ -238,7 +238,7 @@
     "@types/pako": "^2.0.0",
     "@types/prettier": "^2.7.3",
     "@types/react": "16.9.43",
-    "@types/react-native": "0.69.6",
+    "@types/react-native": "0.70.19",
     "@types/react-native-background-timer": "^2.0.0",
     "@types/react-native-i18n": "^2.0.0",
     "@types/react-native-push-notification": "^8.1.1",
@@ -275,7 +275,7 @@
     "js-yaml": "^3.13.1",
     "jsdoc-to-markdown": "^6.0.1",
     "lint-staged": "^13.2.0",
-    "metro-react-native-babel-preset": "^0.70.3",
+    "metro-react-native-babel-preset": "^0.73.0",
     "mockdate": "^3.0.2",
     "mockttp": "2.4.0",
     "node-fetch": "^2.6.7",
@@ -287,7 +287,7 @@
     "react-native-bundle-visualizer": "^2.2.1",
     "react-native-get-random-values": "^1.7.0",
     "react-native-svg-transformer": "^0.14.3",
-    "react-test-renderer": "18.0.0",
+    "react-test-renderer": "18.1.0",
     "redux-mock-store": "^1.5.4",
     "redux-saga-test-plan": "4.0.3",
     "rn-nodeify": "^10.0.1",
diff --git a/patches/@react-navigation+material-top-tabs+5.3.19.patch b/patches/@react-navigation+material-top-tabs+5.3.19.patch
deleted file mode 100644
index e3ced5a3cc6..00000000000
--- a/patches/@react-navigation+material-top-tabs+5.3.19.patch
+++ /dev/null
@@ -1,54 +0,0 @@
-diff --git a/node_modules/@react-navigation/material-top-tabs/.DS_Store b/node_modules/@react-navigation/material-top-tabs/.DS_Store
-new file mode 100644
-index 0000000..5172429
-Binary files /dev/null and b/node_modules/@react-navigation/material-top-tabs/.DS_Store differ
-diff --git a/node_modules/@react-navigation/material-top-tabs/lib/typescript/.DS_Store b/node_modules/@react-navigation/material-top-tabs/lib/typescript/.DS_Store
-new file mode 100644
-index 0000000..5127bf9
-Binary files /dev/null and b/node_modules/@react-navigation/material-top-tabs/lib/typescript/.DS_Store differ
-diff --git a/node_modules/@react-navigation/material-top-tabs/lib/typescript/src/types.d.ts b/node_modules/@react-navigation/material-top-tabs/lib/typescript/src/types.d.ts
-index 4a4b081..1cf21c0 100644
---- a/node_modules/@react-navigation/material-top-tabs/lib/typescript/src/types.d.ts
-+++ b/node_modules/@react-navigation/material-top-tabs/lib/typescript/src/types.d.ts
-@@ -76,6 +76,18 @@ export declare type MaterialTopTabNavigationConfig = Partial<Omit<React.Componen
-      * The pager handles swipe gestures and page switching.
-      */
-     pager?: React.ComponentProps<typeof TabView>['renderPager'];
-+    /**
-+     * Whether this screen should be lazily rendered. When this is set to `true`,
-+     * the screen will be rendered as it comes into the viewport.
-+     * By default all screens are rendered to provide a smoother swipe experience.
-+     * But you might want to defer the rendering of screens out of the viewport until the user sees them.
-+     * To enable lazy rendering for this screen, set `lazy` to `true`.
-+     *
-+     * When you enable `lazy`, the lazy loaded screens will usually take some time to render
-+     * when they come into the viewport. You can use the `lazyPlaceholder` prop to customize
-+     * what the user sees during this short period.
-+     */
-+    lazy?: boolean;
-     /**
-      * Function that returns a React element to render for routes that haven't been rendered yet.
-      * Receives an object containing the route as the prop.
-diff --git a/node_modules/@react-navigation/material-top-tabs/src/types.tsx b/node_modules/@react-navigation/material-top-tabs/src/types.tsx
-index 60270ff..d7ae0e8 100644
---- a/node_modules/@react-navigation/material-top-tabs/src/types.tsx
-+++ b/node_modules/@react-navigation/material-top-tabs/src/types.tsx
-@@ -121,6 +121,18 @@ export type MaterialTopTabNavigationConfig = Partial<
-    * The pager handles swipe gestures and page switching.
-    */
-   pager?: React.ComponentProps<typeof TabView>['renderPager'];
-+  /**
-+   * Whether this screen should be lazily rendered. When this is set to `true`,
-+   * the screen will be rendered as it comes into the viewport.
-+   * By default all screens are rendered to provide a smoother swipe experience.
-+   * But you might want to defer the rendering of screens out of the viewport until the user sees them.
-+   * To enable lazy rendering for this screen, set `lazy` to `true`.
-+   *
-+   * When you enable `lazy`, the lazy loaded screens will usually take some time to render
-+   * when they come into the viewport. You can use the `lazyPlaceholder` prop to customize
-+   * what the user sees during this short period.
-+   */
-+  lazy?: boolean;  
-   /**
-    * Function that returns a React element to render for routes that haven't been rendered yet.
-    * Receives an object containing the route as the prop.
diff --git a/patches/@types+react-native+0.69.6.patch b/patches/@types+react-native+0.70.19.patch
similarity index 51%
rename from patches/@types+react-native+0.69.6.patch
rename to patches/@types+react-native+0.70.19.patch
index 6cb8cb885df..ea89767f364 100644
--- a/patches/@types+react-native+0.69.6.patch
+++ b/patches/@types+react-native+0.70.19.patch
@@ -1,21 +1,11 @@
 diff --git a/node_modules/@types/react-native/index.d.ts b/node_modules/@types/react-native/index.d.ts
-index bf4b3d6..a54a72b 100755
+index 12831dd..aedaba3 100644
 --- a/node_modules/@types/react-native/index.d.ts
 +++ b/node_modules/@types/react-native/index.d.ts
-@@ -7723,7 +7723,8 @@ export type Permission =
-     | 'android.permission.WRITE_EXTERNAL_STORAGE'
-     | 'android.permission.BLUETOOTH_CONNECT'
-     | 'android.permission.BLUETOOTH_SCAN'
--    | 'android.permission.BLUETOOTH_ADVERTISE';
-+    | 'android.permission.BLUETOOTH_ADVERTISE'
-+    | 'android.permission.POST_NOTIFICATIONS';
- 
- export type PermissionStatus = 'granted' | 'denied' | 'never_ask_again';
- 
-@@ -8370,6 +8371,10 @@ export interface UIManagerStatic {
+@@ -8548,6 +8548,10 @@ export interface UIManagerStatic {
       * commandArgs - Args of the native method that we can pass from JS to native.
       */
-     dispatchViewManagerCommand: (reactTag: number | null, commandID: number | string, commandArgs?: Array<any>) => void;
+     dispatchViewManagerCommand: (reactTag: number | null, commandID: number | string, commandArgs?: any[]) => void;
 +
 +    //Added missing accesibility definition
 +    sendAccessibilityEvent(reactTag?: number, eventType: number): void;
diff --git a/patches/native-base+2.15.2.patch b/patches/native-base+2.15.2.patch
new file mode 100644
index 00000000000..3fcf5f30b79
--- /dev/null
+++ b/patches/native-base+2.15.2.patch
@@ -0,0 +1,31 @@
+diff --git a/node_modules/native-base/dist/src/basic/ToastContainer.js b/node_modules/native-base/dist/src/basic/ToastContainer.js
+index 832b3e8..d964156 100644
+--- a/node_modules/native-base/dist/src/basic/ToastContainer.js
++++ b/node_modules/native-base/dist/src/basic/ToastContainer.js
+@@ -1,2 +1,2 @@
+-Object.defineProperty(exports,"__esModule",{value:true});exports.ToastContainer=undefined;var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _jsxFileName='src/basic/ToastContainer.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _nativeBaseShoutemTheme=require('native-base-shoutem-theme');var _mapPropsToStyleNames=require('../utils/mapPropsToStyleNames');var _mapPropsToStyleNames2=_interopRequireDefault(_mapPropsToStyleNames);var _commonColor=require('../theme/variables/commonColor');var _Text=require('./Text');var _Button=require('./Button');var _Toast=require('./Toast');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _objectWithoutProperties(obj,keys){var target={};for(var i in obj){if(keys.indexOf(i)>=0)continue;if(!Object.prototype.hasOwnProperty.call(obj,i))continue;target[i]=obj[i];}return target;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var POSITION={ABSOLUTE:'absolute',BOTTOM:'bottom',TOP:'top'};var ToastContainer=function(_Component){_inherits(ToastContainer,_Component);_createClass(ToastContainer,null,[{key:'show',value:function show(_ref){var config=_objectWithoutProperties(_ref,[]);this.toastInstance._root.showToast({config:config});}},{key:'hide',value:function hide(){if(this.toastInstance._root.getModalState()){this.toastInstance._root.closeToast('functionCall');}}}]);function ToastContainer(props){_classCallCheck(this,ToastContainer);var _this=_possibleConstructorReturn(this,(ToastContainer.__proto__||Object.getPrototypeOf(ToastContainer)).call(this,props));_this.closeModal=function(reason){_this.setState({modalVisible:false});var onClose=_this.state.onClose;if(onClose&&typeof onClose==='function'){onClose(reason);}};_this.state={fadeAnim:new _reactNative.Animated.Value(0),pan:new _reactNative.Animated.ValueXY({x:0,y:0}),keyboardHeight:0,isKeyboardVisible:false,modalVisible:false};_this.keyboardDidHide=_this.keyboardDidHide.bind(_this);_this.keyboardDidShow=_this.keyboardDidShow.bind(_this);_this._panResponder=_reactNative.PanResponder.create({onMoveShouldSetPanResponderCapture:function onMoveShouldSetPanResponderCapture(){return true;},onPanResponderRelease:function onPanResponderRelease(evt,_ref2){var dx=_ref2.dx;if(dx!==0){_reactNative.Animated.timing(_this.state.pan,{toValue:{x:dx,y:0},duration:100,useNativeDriver:false}).start(function(){return _this.closeToast('swipe');});}}});return _this;}_createClass(ToastContainer,[{key:'componentDidMount',value:function componentDidMount(){_reactNative.Keyboard.addListener('keyboardDidShow',this.keyboardDidShow);_reactNative.Keyboard.addListener('keyboardDidHide',this.keyboardDidHide);}},{key:'componentWillUnmount',value:function componentWillUnmount(){_reactNative.Keyboard.removeListener('keyboardDidShow',this.keyboardDidShow);_reactNative.Keyboard.removeListener('keyboardDidHide',this.keyboardDidHide);}},{key:'getToastStyle',value:function getToastStyle(){return{position:POSITION.ABSOLUTE,opacity:this.state.fadeAnim,width:'100%',elevation:9,paddingHorizontal:_reactNative.Platform.OS===_commonColor.PLATFORM.IOS?20:0,top:this.state.position===POSITION.TOP?30:undefined,bottom:this.state.position===POSITION.BOTTOM?this.getTop():undefined};}},{key:'getTop',value:function getTop(){if(_reactNative.Platform.OS===_commonColor.PLATFORM.IOS){if(this.state.isKeyboardVisible){return this.state.keyboardHeight;}return 30;}return 0;}},{key:'getButtonText',value:function getButtonText(buttonText){if(buttonText){if(buttonText.trim().length===0){return undefined;}return buttonText;}return undefined;}},{key:'getModalState',value:function getModalState(){return this.state.modalVisible;}},{key:'keyboardDidHide',value:function keyboardDidHide(){this.setState({keyboardHeight:0,isKeyboardVisible:false});}},{key:'keyboardDidShow',value:function keyboardDidShow(e){this.setState({keyboardHeight:e.endCoordinates.height,isKeyboardVisible:true});}},{key:'showToast',value:function showToast(_ref3){var config=_ref3.config;this.setState({modalVisible:true,text:config.text,buttonText:this.getButtonText(config.buttonText),type:config.type,position:config.position?config.position:POSITION.BOTTOM,supportedOrientations:config.supportedOrientations,style:config.style,buttonTextStyle:config.buttonTextStyle,buttonStyle:config.buttonStyle,textStyle:config.textStyle,onClose:config.onClose,swipeDisabled:config.swipeDisabled||false});if(this.closeTimeout){clearTimeout(this.closeTimeout);}if(config.duration!==0){var duration=config.duration>0?config.duration:1500;this.closeTimeout=setTimeout(this.closeToast.bind(this,'timeout'),duration);}_reactNative.Animated.timing(this.state.fadeAnim,{toValue:1,duration:200,useNativeDriver:false}).start();}},{key:'closeToast',value:function closeToast(reason){var _this2=this;clearTimeout(this.closeTimeout);_reactNative.Animated.timing(this.state.fadeAnim,{toValue:0,duration:200,useNativeDriver:false}).start(function(){_this2.closeModal(reason);_this2.state.pan.setValue({x:0,y:0});});}},{key:'render',value:function render(){var _this3=this;if(this.state.modalVisible){var _state$pan=this.state.pan,x=_state$pan.x,y=_state$pan.y;return _react2.default.createElement(_reactNative.Animated.View,_extends({},this.state.swipeDisabled?{}:this._panResponder.panHandlers,{style:[this.getToastStyle(),{transform:[{translateX:x},{translateY:y}]}],__source:{fileName:_jsxFileName,lineNumber:182}}),_react2.default.createElement(_Toast.Toast,{style:[this.state.style],danger:this.state.type==='danger',success:this.state.type==='success',warning:this.state.type==='warning',__source:{fileName:_jsxFileName,lineNumber:189}},_react2.default.createElement(_Text.Text,{style:this.state.textStyle,__source:{fileName:_jsxFileName,lineNumber:195}},this.state.text),this.state.buttonText&&_react2.default.createElement(_Button.Button,{style:this.state.buttonStyle,onPress:function onPress(){return _this3.closeToast('user');},__source:{fileName:_jsxFileName,lineNumber:197}},_react2.default.createElement(_Text.Text,{style:this.state.buttonTextStyle,__source:{fileName:_jsxFileName,lineNumber:201}},this.state.buttonText))));}return null;}}]);return ToastContainer;}(_react.Component);ToastContainer.propTypes=_extends({},_reactNative.ViewPropTypes);var StyledToastContainer=(0,_nativeBaseShoutemTheme.connectStyle)('NativeBase.ToastContainer',{},_mapPropsToStyleNames2.default)(ToastContainer);exports.ToastContainer=StyledToastContainer;
++Object.defineProperty(exports,"__esModule",{value:true});exports.ToastContainer=undefined;var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};var _jsxFileName='src/basic/ToastContainer.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _react=require('react');var _react2=_interopRequireDefault(_react);var _reactNative=require('react-native');var _nativeBaseShoutemTheme=require('native-base-shoutem-theme');var _mapPropsToStyleNames=require('../utils/mapPropsToStyleNames');var _mapPropsToStyleNames2=_interopRequireDefault(_mapPropsToStyleNames);var _commonColor=require('../theme/variables/commonColor');var _Text=require('./Text');var _Button=require('./Button');var _Toast=require('./Toast');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _objectWithoutProperties(obj,keys){var target={};for(var i in obj){if(keys.indexOf(i)>=0)continue;if(!Object.prototype.hasOwnProperty.call(obj,i))continue;target[i]=obj[i];}return target;}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var POSITION={ABSOLUTE:'absolute',BOTTOM:'bottom',TOP:'top'};var ToastContainer=function(_Component){_inherits(ToastContainer,_Component);_createClass(ToastContainer,null,[{key:'show',value:function show(_ref){var config=_objectWithoutProperties(_ref,[]);this.toastInstance._root.showToast({config:config});}},{key:'hide',value:function hide(){if(this.toastInstance._root.getModalState()){this.toastInstance._root.closeToast('functionCall');}}}]);function ToastContainer(props){_classCallCheck(this,ToastContainer);var _this=_possibleConstructorReturn(this,(ToastContainer.__proto__||Object.getPrototypeOf(ToastContainer)).call(this,props));_this.closeModal=function(reason){_this.setState({modalVisible:false});var onClose=_this.state.onClose;if(onClose&&typeof onClose==='function'){onClose(reason);}};_this.state={fadeAnim:new _reactNative.Animated.Value(0),pan:new _reactNative.Animated.ValueXY({x:0,y:0}),keyboardHeight:0,isKeyboardVisible:false,modalVisible:false};_this.keyboardDidHide=_this.keyboardDidHide.bind(_this);_this.keyboardDidShow=_this.keyboardDidShow.bind(_this);_this._panResponder=_reactNative.PanResponder.create({onMoveShouldSetPanResponderCapture:function onMoveShouldSetPanResponderCapture(){return true;},onPanResponderRelease:function onPanResponderRelease(evt,_ref2){var dx=_ref2.dx;if(dx!==0){_reactNative.Animated.timing(_this.state.pan,{toValue:{x:dx,y:0},duration:100,useNativeDriver:false}).start(function(){return _this.closeToast('swipe');});}}});return _this;}_createClass(ToastContainer,[{key:'componentDidMount',value:function componentDidMount(){}},{key:'componentWillUnmount',value:function componentWillUnmount(){}},{key:'getToastStyle',value:function getToastStyle(){return{position:POSITION.ABSOLUTE,opacity:this.state.fadeAnim,width:'100%',elevation:9,paddingHorizontal:_reactNative.Platform.OS===_commonColor.PLATFORM.IOS?20:0,top:this.state.position===POSITION.TOP?30:undefined,bottom:this.state.position===POSITION.BOTTOM?this.getTop():undefined};}},{key:'getTop',value:function getTop(){if(_reactNative.Platform.OS===_commonColor.PLATFORM.IOS){if(this.state.isKeyboardVisible){return this.state.keyboardHeight;}return 30;}return 0;}},{key:'getButtonText',value:function getButtonText(buttonText){if(buttonText){if(buttonText.trim().length===0){return undefined;}return buttonText;}return undefined;}},{key:'getModalState',value:function getModalState(){return this.state.modalVisible;}},{key:'keyboardDidHide',value:function keyboardDidHide(){this.setState({keyboardHeight:0,isKeyboardVisible:false});}},{key:'keyboardDidShow',value:function keyboardDidShow(e){this.setState({keyboardHeight:e.endCoordinates.height,isKeyboardVisible:true});}},{key:'showToast',value:function showToast(_ref3){var config=_ref3.config;this.setState({modalVisible:true,text:config.text,buttonText:this.getButtonText(config.buttonText),type:config.type,position:config.position?config.position:POSITION.BOTTOM,supportedOrientations:config.supportedOrientations,style:config.style,buttonTextStyle:config.buttonTextStyle,buttonStyle:config.buttonStyle,textStyle:config.textStyle,onClose:config.onClose,swipeDisabled:config.swipeDisabled||false});if(this.closeTimeout){clearTimeout(this.closeTimeout);}if(config.duration!==0){var duration=config.duration>0?config.duration:1500;this.closeTimeout=setTimeout(this.closeToast.bind(this,'timeout'),duration);}_reactNative.Animated.timing(this.state.fadeAnim,{toValue:1,duration:200,useNativeDriver:false}).start();}},{key:'closeToast',value:function closeToast(reason){var _this2=this;clearTimeout(this.closeTimeout);_reactNative.Animated.timing(this.state.fadeAnim,{toValue:0,duration:200,useNativeDriver:false}).start(function(){_this2.closeModal(reason);_this2.state.pan.setValue({x:0,y:0});});}},{key:'render',value:function render(){var _this3=this;if(this.state.modalVisible){var _state$pan=this.state.pan,x=_state$pan.x,y=_state$pan.y;return _react2.default.createElement(_reactNative.Animated.View,_extends({},this.state.swipeDisabled?{}:this._panResponder.panHandlers,{style:[this.getToastStyle(),{transform:[{translateX:x},{translateY:y}]}],__source:{fileName:_jsxFileName,lineNumber:182}}),_react2.default.createElement(_Toast.Toast,{style:[this.state.style],danger:this.state.type==='danger',success:this.state.type==='success',warning:this.state.type==='warning',__source:{fileName:_jsxFileName,lineNumber:189}},_react2.default.createElement(_Text.Text,{style:this.state.textStyle,__source:{fileName:_jsxFileName,lineNumber:195}},this.state.text),this.state.buttonText&&_react2.default.createElement(_Button.Button,{style:this.state.buttonStyle,onPress:function onPress(){return _this3.closeToast('user');},__source:{fileName:_jsxFileName,lineNumber:197}},_react2.default.createElement(_Text.Text,{style:this.state.buttonTextStyle,__source:{fileName:_jsxFileName,lineNumber:201}},this.state.buttonText))));}return null;}}]);return ToastContainer;}(_react.Component);ToastContainer.propTypes=_extends({},_reactNative.ViewPropTypes);var StyledToastContainer=(0,_nativeBaseShoutemTheme.connectStyle)('NativeBase.ToastContainer',{},_mapPropsToStyleNames2.default)(ToastContainer);exports.ToastContainer=StyledToastContainer;
+ //# sourceMappingURL=ToastContainer.js.map
+\ No newline at end of file
+diff --git a/node_modules/native-base/src/basic/ToastContainer.js b/node_modules/native-base/src/basic/ToastContainer.js
+index 4bd57ac..31c5586 100644
+--- a/node_modules/native-base/src/basic/ToastContainer.js
++++ b/node_modules/native-base/src/basic/ToastContainer.js
+@@ -59,13 +59,13 @@ class ToastContainer extends Component {
+   }
+ 
+   componentDidMount() {
+-    Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
+-    Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
++    // Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
++    // Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
+   }
+ 
+   componentWillUnmount() {
+-    Keyboard.removeListener('keyboardDidShow', this.keyboardDidShow);
+-    Keyboard.removeListener('keyboardDidHide', this.keyboardDidHide);
++    // Keyboard.removeListener('keyboardDidShow', this.keyboardDidShow);
++    // Keyboard.removeListener('keyboardDidHide', this.keyboardDidHide);
+   }
+ 
+   getToastStyle() {
diff --git a/patches/patches.md b/patches/patches.md
index a4f288edd4c..7eb5ebc50c1 100644
--- a/patches/patches.md
+++ b/patches/patches.md
@@ -1,5 +1,22 @@
 This file describes the reason for the patches applied.
 
+### native-base+2.15.2
+Created on **25/03/2024**
+
+#### Reason:
+- Fixes a crash occurring when reopening the app while in background on Android (possibly even iOS but currently we don't have evidence) due to the usage of removed `keyboardDidShow` and `keyboardDidHide` events. 
+Remove this patch after removing `native-base`.
+
+### react-native-reanimated
+Created on **18/03/2024**
+This patch resolves [react-native-reanimated/issues/3286](https://github.com/software-mansion/react-native-reanimated/issues/3286) by applying [react-native-reanimated/pull/3298](https://github.com/software-mansion/react-native-reanimated/pull/3298). Remove this patch once bumped `react-native-reanimated` from `v2` to `v3` and checked the issue is gone.
+
+### react-native-pdf+6.4.0
+Created on **16/03/2024**
+
+#### Reason:
+- Make PDF annotations on iOS read-only to align with Android behaviour.
+
 ### react-native-vision-camera+2.15.4
 Created on **24/07/2023** 
 FIXME: remove this patch after this [PR](https://github.com/mrousavy/react-native-vision-camera/pull/1666) has been merged and a new vision camera version has been released.
@@ -20,19 +37,7 @@ Created on **15/12/2021**
     - `getMacAddress`
     - `getMacAddressSync`
 
-### react-native+0.69.9
-Created on **19/07/2023**
-
-#### Reason:
-- This patch is going to add a missing POST_NOTIFICATIONS permission (Android 13) (remove this patch after updating to version 71 of React Native).
-
-### @types/react-native+0.69.9
-Created on **19/07/2023**
-
-#### Reason:
-- Missing POST_NOTIFICATIONS permission type (remove this patch after updating to version 71 of React Native).
-
-### @types/react-native+0.69.6
+### @types/react-native+0.70.19
 Created on **30/08/2022**
 
 #### Reason:
@@ -96,7 +101,7 @@ Created on **16/08/2021**
 #### Reason:
 - implementation 'androidx.core:core:1.+' not compatible with the new gradle settings used by react-native 0.64.2
 
-### react-native+0.69.4
+### react-native+0.70.15
 Created on **20/08/2021**
 
 #### Reason:
@@ -120,7 +125,7 @@ Created on **16/09/2021**
   component, with this patch, doesn't use anymore the props permissionDialogTitle, permissionDialogMessage and
   buttonPositive.
 
-### react-native+0.64.2 (Localizable.strings)
+### react-native+0.70.15 (Localizable.strings)
 
 Created on **28/02/2022**
 
@@ -150,14 +155,6 @@ Created on **29/08/2022**
 
 - This patch is going to fix a gradle issue that breaks the compile on android platform, due to gradle imcompatibility
 
-### @react-navigation/material-top-tabs+5.3.1
-
-Created on **01/12/2022**
-
-#### Reason:
-
-- This patch is going to add a missing prop to component definition, it can be removed once updating the library.
-
 ### react-native-webview+11.26.1
 
 Updated on **13/07/2023**
diff --git a/patches/react-native+0.69.9.patch b/patches/react-native+0.70.15.patch
similarity index 78%
rename from patches/react-native+0.69.9.patch
rename to patches/react-native+0.70.15.patch
index 514b2d7f762..57b28621556 100644
--- a/patches/react-native+0.69.9.patch
+++ b/patches/react-native+0.70.15.patch
@@ -1,29 +1,9 @@
 diff --git a/node_modules/react-native/Libraries/.DS_Store b/node_modules/react-native/Libraries/.DS_Store
 new file mode 100644
 index 0000000..e69de29
-diff --git a/node_modules/react-native/Libraries/PermissionsAndroid/PermissionsAndroid.js b/node_modules/react-native/Libraries/PermissionsAndroid/PermissionsAndroid.js
-index 227af12..2c59500 100644
---- a/node_modules/react-native/Libraries/PermissionsAndroid/PermissionsAndroid.js
-+++ b/node_modules/react-native/Libraries/PermissionsAndroid/PermissionsAndroid.js
-@@ -68,6 +68,7 @@ const PERMISSIONS = Object.freeze({
-   ANSWER_PHONE_CALLS: 'android.permission.ANSWER_PHONE_CALLS',
-   READ_PHONE_NUMBERS: 'android.permission.READ_PHONE_NUMBERS',
-   UWB_RANGING: 'android.permission.UWB_RANGING',
-+  POST_NOTIFICATIONS: 'android.permission.POST_NOTIFICATIONS'
- });
- 
- /**
-@@ -93,6 +94,7 @@ class PermissionsAndroid {
-     CALL_PHONE: string,
-     CAMERA: string,
-     GET_ACCOUNTS: string,
-+    POST_NOTIFICATIONS: string,
-     PROCESS_OUTGOING_CALLS: string,
-     READ_CALENDAR: string,
-     READ_CALL_LOG: string,
 diff --git a/node_modules/react-native/React/AccessibilityResources/it.lproj/Localizable.strings b/node_modules/react-native/React/AccessibilityResources/it.lproj/Localizable.strings
 new file mode 100644
-index 0000000..00a9a38
+index 0000000..b0bc264
 --- /dev/null
 +++ b/node_modules/react-native/React/AccessibilityResources/it.lproj/Localizable.strings
 @@ -0,0 +1,26 @@
@@ -53,8 +33,9 @@ index 0000000..00a9a38
 +"expanded"="espanso";
 +"collapsed"="compresso";
 +"mixed"="misto";
+\ No newline at end of file
 diff --git a/node_modules/react-native/index.js b/node_modules/react-native/index.js
-index d59ba34..8023167 100644
+index d59ba34..d0554fd 100644
 --- a/node_modules/react-native/index.js
 +++ b/node_modules/react-native/index.js
 @@ -435,32 +435,16 @@ module.exports = {
@@ -66,7 +47,7 @@ index d59ba34..8023167 100644
 -      'ColorPropType has been removed from React Native. Migrate to ' +
 -        "ColorPropType exported from 'deprecated-react-native-prop-types'.",
 -    );
-+    return require("deprecated-react-native-prop-types").ColorPropType
++    return require("deprecated-react-native-prop-types").ColorPropType;
    },
    get EdgeInsetsPropType(): $FlowFixMe {
 -    invariant(
@@ -74,7 +55,7 @@ index d59ba34..8023167 100644
 -      'EdgeInsetsPropType has been removed from React Native. Migrate to ' +
 -        "EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'.",
 -    );
-+    return require("deprecated-react-native-prop-types").EdgeInsetsPropType
++    return require("deprecated-react-native-prop-types").EdgeInsetsPropType;
    },
    get PointPropType(): $FlowFixMe {
 -    invariant(
@@ -82,7 +63,7 @@ index d59ba34..8023167 100644
 -      'PointPropType has been removed from React Native. Migrate to ' +
 -        "PointPropType exported from 'deprecated-react-native-prop-types'.",
 -    );
-+    return require("deprecated-react-native-prop-types").PointPropType
++    return require("deprecated-react-native-prop-types").PointPropType;
    },
    get ViewPropTypes(): $FlowFixMe {
 -    invariant(
@@ -90,16 +71,16 @@ index d59ba34..8023167 100644
 -      'ViewPropTypes has been removed from React Native. Migrate to ' +
 -        "ViewPropTypes exported from 'deprecated-react-native-prop-types'.",
 -    );
-+    return require("deprecated-react-native-prop-types").ViewPropTypes
++    return require("deprecated-react-native-prop-types").ViewPropTypes;
    },
  };
  
 diff --git a/node_modules/react-native/scripts/react-native-xcode.back.sh b/node_modules/react-native/scripts/react-native-xcode.back.sh
 new file mode 100755
-index 0000000..6f95a29
+index 0000000..927ec76
 --- /dev/null
 +++ b/node_modules/react-native/scripts/react-native-xcode.back.sh
-@@ -0,0 +1,187 @@
+@@ -0,0 +1,182 @@
 +#!/bin/bash
 +# Copyright (c) Meta Platforms, Inc. and affiliates.
 +#
@@ -176,25 +157,19 @@ index 0000000..6f95a29
 +  ENTRY_FILE=${1:-index.js}
 +fi
 +
-+if [[ $DEV != true && ! -f "$ENTRY_FILE" ]]; then
-+  echo "error: Entry file $ENTRY_FILE does not exist. If you use another file as your entry point, pass ENTRY_FILE=myindex.js" >&2
-+  exit 2
-+fi
-+
 +# check and assign NODE_BINARY env
 +# shellcheck source=/dev/null
 +source "$REACT_NATIVE_DIR/scripts/node-binary.sh"
 +
-+[ -z "$HERMES_CLI_PATH" ] && HERMES_CLI_PATH="$PODS_ROOT/hermes-engine/destroot/bin/hermesc"
-+
-+if [[ -z "$USE_HERMES" && -f "$HERMES_CLI_PATH" ]]; then
-+  echo "Enabling Hermes byte-code compilation. Disable with USE_HERMES=false if needed."
-+  USE_HERMES=true
-+fi
++HERMES_ENGINE_PATH="$PODS_ROOT/hermes-engine"
++[ -z "$HERMES_CLI_PATH" ] && HERMES_CLI_PATH="$HERMES_ENGINE_PATH/destroot/bin/hermesc"
 +
-+if [[ $USE_HERMES == true && ! -f "$HERMES_CLI_PATH" ]]; then
-+  echo "error: USE_HERMES is set to true but the hermesc binary could not be " \
-+       "found at ${HERMES_CLI_PATH}. Perhaps you need to run 'bundle exec pod install' or otherwise " \
++# Hermes is enabled in new projects by default, so we cannot assume that USE_HERMES=1 is set as an envvar.
++# If hermes-engine is found in Pods, we can assume Hermes has not been disabled.
++# If hermesc is not available and USE_HERMES is either unset or true, show error.
++if [[  -f "$HERMES_ENGINE_PATH" && ! -f "$HERMES_CLI_PATH" ]]; then
++  echo "error: Hermes is enabled but the hermesc binary could not be found at ${HERMES_CLI_PATH}." \
++       "Perhaps you need to run 'bundle exec pod install' or otherwise " \
 +       "point the HERMES_CLI_PATH variable to your custom location." >&2
 +  exit 2
 +fi
@@ -237,7 +212,7 @@ index 0000000..6f95a29
 +
 +PACKAGER_SOURCEMAP_FILE=
 +if [[ $EMIT_SOURCEMAP == true ]]; then
-+  if [[ $USE_HERMES == true ]]; then
++  if [[ $USE_HERMES != false ]]; then
 +    PACKAGER_SOURCEMAP_FILE="$CONFIGURATION_BUILD_DIR/$(basename $SOURCEMAP_FILE)"
 +  else
 +    PACKAGER_SOURCEMAP_FILE="$SOURCEMAP_FILE"
@@ -246,7 +221,7 @@ index 0000000..6f95a29
 +fi
 +
 +# Hermes doesn't require JS minification.
-+if [[ $USE_HERMES == true && $DEV == false ]]; then
++if [[ $USE_HERMES != false && $DEV == false ]]; then
 +  EXTRA_ARGS="$EXTRA_ARGS --minify false"
 +fi
 +
@@ -261,7 +236,7 @@ index 0000000..6f95a29
 +  $EXTRA_ARGS \
 +  $EXTRA_PACKAGER_ARGS
 +
-+if [[ $USE_HERMES != true ]]; then
++if [[ $USE_HERMES == false ]]; then
 +  cp "$BUNDLE_FILE" "$DEST/"
 +  BUNDLE_FILE="$DEST/main.jsbundle"
 +else
@@ -276,22 +251,23 @@ index 0000000..6f95a29
 +  fi
 +  "$HERMES_CLI_PATH" -emit-binary $EXTRA_COMPILER_ARGS -out "$DEST/main.jsbundle" "$BUNDLE_FILE"
 +  if [[ $EMIT_SOURCEMAP == true ]]; then
-+    HBC_SOURCEMAP_FILE="$BUNDLE_FILE.map"
++    HBC_SOURCEMAP_FILE="$DEST/main.jsbundle.map"
 +    "$NODE_BINARY" "$COMPOSE_SOURCEMAP_PATH" "$PACKAGER_SOURCEMAP_FILE" "$HBC_SOURCEMAP_FILE" -o "$SOURCEMAP_FILE"
++    rm "$HBC_SOURCEMAP_FILE"
++    rm "$PACKAGER_SOURCEMAP_FILE"
 +  fi
 +  BUNDLE_FILE="$DEST/main.jsbundle"
 +fi
 +
 +if [[ $DEV != true && ! -f "$BUNDLE_FILE" ]]; then
-+  echo "error: File $BUNDLE_FILE does not exist. This must be a bug with" >&2
-+  echo "React Native, please report it here: https://github.com/facebook/react-native/issues"
++  echo "error: File $BUNDLE_FILE does not exist. This must be a bug with React Native, please report it here: https://github.com/facebook/react-native/issues" >&2
 +  exit 2
 +fi
 diff --git a/node_modules/react-native/scripts/react-native-xcode.sh b/node_modules/react-native/scripts/react-native-xcode.sh
-index 6f95a29..166c9d4 100755
+index 927ec76..477fc27 100755
 --- a/node_modules/react-native/scripts/react-native-xcode.sh
 +++ b/node_modules/react-native/scripts/react-native-xcode.sh
-@@ -155,6 +155,7 @@ fi
+@@ -149,6 +149,7 @@ fi
    --dev $DEV \
    --reset-cache \
    --bundle-output "$BUNDLE_FILE" \
diff --git a/patches/react-native-mixpanel+1.2.0.patch b/patches/react-native-mixpanel+1.2.0.patch
deleted file mode 100644
index 9ca04be8245..00000000000
--- a/patches/react-native-mixpanel+1.2.0.patch
+++ /dev/null
@@ -1,90 +0,0 @@
-diff --git a/node_modules/react-native-mixpanel/.DS_Store b/node_modules/react-native-mixpanel/.DS_Store
-new file mode 100644
-index 0000000..e69de29
-diff --git a/node_modules/react-native-mixpanel/RNMixpanel/RNMixpanel.m b/node_modules/react-native-mixpanel/RNMixpanel/RNMixpanel.m
-index 8564911..8a158db 100644
---- a/node_modules/react-native-mixpanel/RNMixpanel/RNMixpanel.m
-+++ b/node_modules/react-native-mixpanel/RNMixpanel/RNMixpanel.m
-@@ -46,7 +46,12 @@ -(Mixpanel*) getInstance: (NSString *)name {
-                                                   trackCrashes:trackCrashes
-                                          automaticPushTracking:automaticPushTracking
-                                        optOutTrackingByDefault:optOutTrackingByDefault];
--
-+        // disable A/B testing see https://pagopa.atlassian.net/browse/IA-42
-+        [instance setEnableVisualABTestAndCodeless: NO];
-+        instance.enableVisualABTestAndCodeless=NO;
-+        // need to change mixpanel endpoint due to saving data in EU zone
-+        // see https://www.pivotaltracker.com/story/show/171600487
-+        instance.serverURL = @"https://api-eu.mixpanel.com";
-         // copy instances and add the new instance.  then reassign instances
-         NSMutableDictionary *newInstances = [NSMutableDictionary dictionaryWithDictionary:instances];
-         [newInstances setObject:instance forKey:apiToken];
-diff --git a/node_modules/react-native-mixpanel/android/.project b/node_modules/react-native-mixpanel/android/.project
-new file mode 100644
-index 0000000..95512e0
---- /dev/null
-+++ b/node_modules/react-native-mixpanel/android/.project
-@@ -0,0 +1,23 @@
-+<?xml version="1.0" encoding="UTF-8"?>
-+<projectDescription>
-+	<name>react-native-mixpanel</name>
-+	<comment>Project react-native-mixpanel created by Buildship.</comment>
-+	<projects>
-+	</projects>
-+	<buildSpec>
-+		<buildCommand>
-+			<name>org.eclipse.jdt.core.javabuilder</name>
-+			<arguments>
-+			</arguments>
-+		</buildCommand>
-+		<buildCommand>
-+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
-+			<arguments>
-+			</arguments>
-+		</buildCommand>
-+	</buildSpec>
-+	<natures>
-+		<nature>org.eclipse.jdt.core.javanature</nature>
-+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
-+	</natures>
-+</projectDescription>
-diff --git a/node_modules/react-native-mixpanel/android/src/main/java/com/kevinejohn/RNMixpanel/RNMixpanelModule.java b/node_modules/react-native-mixpanel/android/src/main/java/com/kevinejohn/RNMixpanel/RNMixpanelModule.java
-index 6239e11..a7352d4 100644
---- a/node_modules/react-native-mixpanel/android/src/main/java/com/kevinejohn/RNMixpanel/RNMixpanelModule.java
-+++ b/node_modules/react-native-mixpanel/android/src/main/java/com/kevinejohn/RNMixpanel/RNMixpanelModule.java
-@@ -18,7 +18,7 @@ import org.json.JSONObject;
- import java.util.Collections;
- import java.util.HashMap;
- import java.util.Map;
--
-+import com.mixpanel.android.mpmetrics.MPConfig;
- /**
-  * Mixpanel React Native module.
-  * Note that synchronized(instance) is used in methods because that's what MixpanelAPI.java recommends you do if you are keeping instances.
-@@ -30,6 +30,13 @@ public class RNMixpanelModule extends ReactContextBaseJavaModule implements Life
-     public RNMixpanelModule(ReactApplicationContext reactContext) {
-         super(reactContext);
- 
-+        
-+
-+        // need to change mixpanel endpoint due to saving data in EU zone
-+        // see https://www.pivotaltracker.com/story/show/171600487
-+        MPConfig.getInstance(reactContext).setEventsEndpoint("https://api-eu.mixpanel.com/track");
-+        MPConfig.getInstance(reactContext).setPeopleEndpoint("https://api-eu.mixpanel.com/engage");
-+        MPConfig.getInstance(reactContext).setGroupsEndpoint("https://api-eu.mixpanel.com/groups");
-         // Get lifecycle notifications to flush mixpanel on pause or destroy
-         reactContext.addLifecycleEventListener(this);
-     }
-diff --git a/node_modules/react-native-mixpanel/index.d.ts b/node_modules/react-native-mixpanel/index.d.ts
-index c00ae8c..df23b29 100644
---- a/node_modules/react-native-mixpanel/index.d.ts
-+++ b/node_modules/react-native-mixpanel/index.d.ts
-@@ -5,7 +5,7 @@ declare module 'react-native-mixpanel' {
-     initialize(): Promise<void>
-     getDistinctId(): Promise<string>
-     getSuperProperty(propertyName: string): Promise<any>
--    track(event: string, properties?: Object): Promise<void>
-+    track(event: string, properties?: {[key: string]: unknown}): Promise<void>
-     flush(): Promise<void>
-     disableIpAddressGeolocalization(): Promise<void>
-     alias(alias: string, oldDistinctID?: string): Promise<void>
diff --git a/patches/react-native-pdf+6.4.0.patch b/patches/react-native-pdf+6.4.0.patch
new file mode 100644
index 00000000000..c6c9fc0c29b
--- /dev/null
+++ b/patches/react-native-pdf+6.4.0.patch
@@ -0,0 +1,27 @@
+diff --git a/node_modules/react-native-pdf/ios/RCTPdf/RCTPdfView.m b/node_modules/react-native-pdf/ios/RCTPdf/RCTPdfView.m
+index 52aafd8..5efda0b 100644
+--- a/node_modules/react-native-pdf/ios/RCTPdf/RCTPdfView.m
++++ b/node_modules/react-native-pdf/ios/RCTPdf/RCTPdfView.m
+@@ -188,12 +188,16 @@ const float MIN_SCALE = 1.0f;
+         }
+ 
+         if (_pdfDocument && ([changedProps containsObject:@"path"] || [changedProps containsObject:@"enableAnnotationRendering"])) {
+-            if (!_enableAnnotationRendering) {
+-                for (unsigned long i=0; i<_pdfView.document.pageCount; i++) {
+-                    PDFPage *pdfPage = [_pdfView.document pageAtIndex:i];
+-                    for (unsigned long j=0; j<pdfPage.annotations.count; j++) {
+-                        pdfPage.annotations[j].shouldDisplay = _enableAnnotationRendering;
+-                    }
++            for (unsigned long i=0; i<_pdfView.document.pageCount; i++) {
++                PDFPage *pdfPage = [_pdfView.document pageAtIndex:i];
++                for (unsigned long j=0; j<pdfPage.annotations.count; j++) {
++                  if (_enableAnnotationRendering) {
++                    // Annotations are read-only by default on Android so we have to disable them here on iOS
++                    pdfPage.annotations[j].readOnly = true;
++                  } else {
++                    // If annotations are hidden, there is no need to flag them as read-only, just hide them
++                    pdfPage.annotations[j].shouldDisplay = false;
++                  }
+                 }
+             }
+         }
diff --git a/patches/react-native-reanimated+2.10.0.patch b/patches/react-native-reanimated+2.10.0.patch
new file mode 100644
index 00000000000..13918c1049c
--- /dev/null
+++ b/patches/react-native-reanimated+2.10.0.patch
@@ -0,0 +1,33 @@
+diff --git a/node_modules/react-native-reanimated/ios/LayoutReanimation/REAUIManager.mm b/node_modules/react-native-reanimated/ios/LayoutReanimation/REAUIManager.mm
+index 16ed327..4813412 100644
+--- a/node_modules/react-native-reanimated/ios/LayoutReanimation/REAUIManager.mm
++++ b/node_modules/react-native-reanimated/ios/LayoutReanimation/REAUIManager.mm
+@@ -117,6 +117,11 @@ std::weak_ptr<reanimated::Scheduler> _scheduler;
+   // Reanimated changes /start
+   if (isUIViewRegistry) {
+     NSMutableDictionary<NSNumber *, id<RCTComponent>> *viewRegistry = [self valueForKey:@"_viewRegistry"];
++    NSMutableDictionary<NSNumber *, NSMutableSet<id<RCTComponent>> *> *toBeRemovedRegisterCopy =
++           [NSMutableDictionary dictionaryWithDictionary:_toBeRemovedRegister];
++    for (NSNumber *key in _toBeRemovedRegister) {
++     toBeRemovedRegisterCopy[key] = [NSMutableSet setWithSet:_toBeRemovedRegister[key]];
++    }
+     for (id<RCTComponent> toRemoveChild in _toBeRemovedRegister[containerTag]) {
+       NSInteger lastIndex = [container reactSubviews].count - 1;
+       if (lastIndex < 0) {
+@@ -129,7 +134,7 @@ std::weak_ptr<reanimated::Scheduler> _scheduler;
+       ) {
+         // we don't want layout animations when removing modals or Screens of native-stack since it brings buggy
+         // behavior        
+-        [_toBeRemovedRegister[container.reactTag] removeObject:toRemoveChild];
++        [toBeRemovedRegisterCopy[container.reactTag] removeObject:toRemoveChild];
+         [permanentlyRemovedChildren removeObject:toRemoveChild];
+ 
+       } else {
+@@ -137,6 +142,7 @@ std::weak_ptr<reanimated::Scheduler> _scheduler;
+         viewRegistry[toRemoveChild.reactTag] = toRemoveChild;
+       }
+     }
++    _toBeRemovedRegister = toBeRemovedRegisterCopy;
+ 
+     for (UIView *removedChild in permanentlyRemovedChildren) {
+       [self callAnimationForTree:removedChild parentTag:containerTag];
diff --git a/publiccode.yml b/publiccode.yml
index 1ad58474092..0f5d665af71 100644
--- a/publiccode.yml
+++ b/publiccode.yml
@@ -5,11 +5,11 @@
 publiccodeYmlVersion: '0.2'
 name: IO
 logo: "img/app-logo.svg"
-releaseDate: '2024-02-02'
+releaseDate: '2024-04-09'
 url: 'https://github.com/pagopa/io-app'
 applicationSuite: IO
 landingURL: 'https://io.italia.it/'
-softwareVersion: 2.53.0-rc.0
+softwareVersion: 2.58.0-rc.0
 developmentStatus: beta
 softwareType: standalone/mobile
 roadmap: 'https://io.italia.it/'
diff --git a/react-native.config.js b/react-native.config.js
index e93843b2f5d..6a69861eff1 100644
--- a/react-native.config.js
+++ b/react-native.config.js
@@ -12,6 +12,7 @@ module.exports = {
   },
   assets: [
     "./assets/fonts/TitilliumWeb",
+    "./assets/fonts/TitilliumSansPro",
     "./assets/fonts/ReadexPro",
     "./assets/fonts/RobotoMono",
     "./assets/fonts/DMMono"
diff --git a/scripts/e2e_message/e2e_notifier.py b/scripts/e2e_message/e2e_notifier.py
index 3a6d8ee776a..2b47bb77424 100644
--- a/scripts/e2e_message/e2e_notifier.py
+++ b/scripts/e2e_message/e2e_notifier.py
@@ -10,6 +10,7 @@
 urllib3.disable_warnings(urllib3.exceptions.InsecureRequestWarning)
 
 SLACK_TOKEN = os.environ.get("IO_APP_SLACK_HELPER_BOT_TOKEN", None)
+TEST_FILE = os.environ.get("TEST", None)
 tagged_people = ["<!here>"]
 SLACK_CHANNEL = "#io_dev_app_feed"
 BUILD_ID = os.environ.get("BUILD_ID", None)
@@ -27,8 +28,8 @@ def send_slack_message():
             token=SLACK_TOKEN, ssl=ssl_context
         )
         tags = " ".join(tagged_people)
-        message = "[E2E Tests] :warning: %s e2e tests have failed (<%s%s|here>)" % (
-            tags, BASE_ACTION_URI, BUILD_ID)
+        message = "[E2E Tests] :warning: %s e2e test \`%s\` have failed (<%s%s|here>)" % (
+            tags, TEST_FILE, BASE_ACTION_URI, BUILD_ID)
         message_blocks = []
         message_blocks.append({
             "type": "section",
diff --git a/scripts/ts/common/jiraTicket/index.ts b/scripts/ts/common/jiraTicket/index.ts
index ffc7e493e99..a464012539f 100644
--- a/scripts/ts/common/jiraTicket/index.ts
+++ b/scripts/ts/common/jiraTicket/index.ts
@@ -79,19 +79,16 @@ export const getJiraIdFromPrTitle = (
  * Try to retrieve Jira tickets from pr title
  * and transforms them into {@link GenericTicket}
  * @param title
+ * @returns a promise of {@link JiraTicketRetrievalResults} containing the jira tickets or an error. If no tickets are found, an empty array is returned
  */
-export const getTicketsFromTitle = async (
+export const getTicketsFromTitle = (
   title: string
-): Promise<JiraTicketRetrievalResults> => {
-  const maybeJiraId = await pipe(
-    getJiraIdFromPrTitle(title),
-    O.map(getJiraTickets),
-    O.toUndefined
+): Promise<JiraTicketRetrievalResults> =>
+  pipe(
+    title,
+    getJiraIdFromPrTitle,
+    O.fold(
+      () => Promise.resolve([]),
+      jiraIds => getJiraTickets(jiraIds)
+    )
   );
-
-  if (maybeJiraId) {
-    return maybeJiraId;
-  } else {
-    return [E.left(new Error("No Jira ticket found"))];
-  }
-};
diff --git a/scripts/ts/danger/updatePrTitle.tsx b/scripts/ts/danger/updatePrTitle.tsx
index 4dc968dada8..7316df26d0c 100644
--- a/scripts/ts/danger/updatePrTitle.tsx
+++ b/scripts/ts/danger/updatePrTitle.tsx
@@ -43,7 +43,8 @@ const storyOrder = new Map<JiraIssueType, number>([
 const projectToScope = new Map<string, string>([
   ["IOAPPX", "Cross"],
   ["SFEQS", "Firma con IO"],
-  ["IODPAY", "IDPay"]
+  ["IODPAY", "IDPay"],
+  ["SIW", "IT Wallet"]
 ]);
 
 /**
diff --git a/ts/App.tsx b/ts/App.tsx
index 5adaf2441b0..ca90819e487 100644
--- a/ts/App.tsx
+++ b/ts/App.tsx
@@ -1,20 +1,20 @@
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import {
+  IODSExperimentalContextProvider,
+  IOThemeContextProvider,
+  ToastProvider
+} from "@pagopa/io-app-design-system";
 import { StyleProvider } from "native-base";
 import * as React from "react";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { MenuProvider } from "react-native-popup-menu";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
-import {
-  IODSExperimentalContextProvider,
-  IOThemeContext,
-  IOThemes
-} from "@pagopa/io-app-design-system";
+import RootContainer from "./RootContainer";
 import { persistor, store } from "./boot/configureStoreAndPersistor";
 import { LightModalProvider } from "./components/ui/LightModal";
-import RootContainer from "./RootContainer";
 import theme from "./theme";
-import { ToastProvider } from "./components/Toast";
 
 // Infer the `RootState` and `AppDispatch` types from the store itself export
 export type RootState = ReturnType<typeof store.getState>;
@@ -27,23 +27,25 @@ export type AppDispatch = typeof store.dispatch;
 export const App: React.FunctionComponent<never> = () => (
   <GestureHandlerRootView style={{ flex: 1 }}>
     <StyleProvider style={theme()}>
-      <IOThemeContext.Provider value={IOThemes.light}>
+      <SafeAreaProvider>
         <IODSExperimentalContextProvider>
-          <ToastProvider>
-            <Provider store={store}>
-              <PersistGate loading={undefined} persistor={persistor}>
-                <BottomSheetModalProvider>
-                  <LightModalProvider>
-                    <MenuProvider>
-                      <RootContainer />
-                    </MenuProvider>
-                  </LightModalProvider>
-                </BottomSheetModalProvider>
-              </PersistGate>
-            </Provider>
-          </ToastProvider>
+          <IOThemeContextProvider theme={"light"}>
+            <ToastProvider>
+              <Provider store={store}>
+                <PersistGate loading={undefined} persistor={persistor}>
+                  <BottomSheetModalProvider>
+                    <LightModalProvider>
+                      <MenuProvider>
+                        <RootContainer />
+                      </MenuProvider>
+                    </LightModalProvider>
+                  </BottomSheetModalProvider>
+                </PersistGate>
+              </Provider>
+            </ToastProvider>
+          </IOThemeContextProvider>
         </IODSExperimentalContextProvider>
-      </IOThemeContext.Provider>
+      </SafeAreaProvider>
     </StyleProvider>
   </GestureHandlerRootView>
 );
diff --git a/ts/__e2e__/login.e2e.ts b/ts/__e2e__/login.e2e.ts
index 6a0b1371b26..b6f6e2b2ac0 100644
--- a/ts/__e2e__/login.e2e.ts
+++ b/ts/__e2e__/login.e2e.ts
@@ -1,9 +1,7 @@
 import { loginWithSPID } from "./utils";
 
-describe("User Login using SPID", () => {
-  describe("when the user never logged in before", () => {
-    it("should let the user log in with SPID", async () => {
-      await loginWithSPID();
-    });
+describe("User Login using SPID, when the user never logged in before", () => {
+  it("should let the user log in with SPID", async () => {
+    await loginWithSPID();
   });
 });
diff --git a/ts/__e2e__/payment.e2e.ts b/ts/__e2e__/payment.e2e.ts
deleted file mode 100644
index 3e1c0ae9cf0..00000000000
--- a/ts/__e2e__/payment.e2e.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-import I18n from "../i18n";
-import { formatNumberCentsToAmount } from "../utils/stringBuilder";
-import { e2eWaitRenderTimeout } from "./config";
-import { closeKeyboard, ensureLoggedIn } from "./utils";
-
-describe("Payment", () => {
-  beforeEach(async () => {
-    await device.launchApp({ newInstance: true });
-    await ensureLoggedIn();
-  });
-
-  describe("When the user want to pay starting from a message", () => {
-    describe("And press back in the payment transaction summary screen", () => {
-      it("Should return to the message details screen", async () => {
-        await openPaymentFromMessage();
-        const backButton = element(by.id("back-button-transaction-summary"));
-        await waitFor(backButton)
-          .toBeVisible()
-          .withTimeout(e2eWaitRenderTimeout);
-        await backButton.tap();
-        await waitFor(element(by.text(I18n.t("messageDetails.headerTitle"))))
-          .toBeVisible()
-          .withTimeout(e2eWaitRenderTimeout);
-      });
-
-      describe("when navigating to the wallet", () => {
-        it("then the wallet root screen should be visible", async () => {
-          await openPaymentFromMessage();
-
-          const backButton1 = element(by.id("back-button-transaction-summary"));
-          await waitFor(backButton1)
-            .toBeVisible()
-            .withTimeout(e2eWaitRenderTimeout);
-          await backButton1.tap();
-
-          const backButton2 = element(by.id("back-button"));
-          await waitFor(backButton2)
-            .toBeVisible()
-            .withTimeout(e2eWaitRenderTimeout);
-          await backButton2.tap();
-
-          const walletButton = element(
-            by.text(I18n.t("global.navigator.wallet"))
-          );
-          await waitFor(walletButton)
-            .toBeVisible()
-            .withTimeout(e2eWaitRenderTimeout);
-          await walletButton.tap();
-
-          await waitFor(element(by.text(I18n.t("wallet.payNotice"))))
-            .toBeVisible()
-            .withTimeout(e2eWaitRenderTimeout);
-        });
-      });
-    });
-
-    describe("And press cancel in the payment confirm screen", () => {
-      it("Should return to the message details screen", async () => {
-        await openPaymentFromMessage();
-        await waitFor(element(by.text(I18n.t("wallet.continue"))))
-          .toBeVisible()
-          .withTimeout(e2eWaitRenderTimeout);
-        await element(by.text(I18n.t("wallet.continue"))).tap();
-
-        await waitFor(element(by.text(I18n.t("wallet.ConfirmPayment.header"))))
-          .toBeVisible()
-          .withTimeout(e2eWaitRenderTimeout);
-
-        const cancelButton = element(by.id("cancelPaymentButton"));
-        // const cancelButton = element(by.id("cancelPaymentButton"));
-        await waitFor(cancelButton).toExist().withTimeout(e2eWaitRenderTimeout);
-        await cancelButton.tap();
-        // I18n.t("wallet.ConfirmPayment.confirmCancelPayment")
-        const confirmCancel = element(
-          by.label(I18n.t("wallet.ConfirmPayment.confirmCancelPayment"))
-        ).atIndex(0);
-        await waitFor(confirmCancel)
-          .toExist()
-          .withTimeout(e2eWaitRenderTimeout);
-        await confirmCancel.tap();
-
-        await waitFor(element(by.text(I18n.t("messageDetails.headerTitle"))))
-          .toBeVisible()
-          .withTimeout(e2eWaitRenderTimeout);
-      });
-    });
-
-    // TODO: this could be executed just one time until we have a way to reset the dev server between tests
-    it("Should allow the user to complete a payment", async () => {
-      await openPaymentFromMessage();
-      await completePaymentFlow();
-    });
-  });
-
-  describe("When the user want to pay using the manual insertion", () => {
-    it("Should allow the user to complete a payment", async () => {
-      await element(by.text(I18n.t("global.navigator.wallet"))).tap();
-      await element(by.text(I18n.t("wallet.payNotice"))).tap();
-
-      await element(by.id("barcodeScanBaseScreenTabInput")).tap();
-
-      const matchNoticeCodeInput = by.id("NoticeCodeInputMask");
-      await waitFor(element(matchNoticeCodeInput))
-        .toExist()
-        .withTimeout(e2eWaitRenderTimeout);
-
-      await element(matchNoticeCodeInput).typeText("123123123123123123");
-      await element(by.id("EntityCodeInputMask")).typeText("12345678901");
-
-      // Close the keyboard
-      await closeKeyboard();
-
-      await element(by.text(I18n.t("global.buttons.continue"))).tap();
-
-      await completePaymentFlow();
-    });
-  });
-});
-
-const completePaymentFlow = async () => {
-  await waitFor(element(by.text(I18n.t("wallet.continue"))))
-    .toExist()
-    .withTimeout(e2eWaitRenderTimeout);
-  await element(by.text(I18n.t("wallet.continue"))).tap();
-
-  const matchConfirmPayment = by.text(
-    `${I18n.t("wallet.ConfirmPayment.pay")} ${formatNumberCentsToAmount(
-      2322,
-      true
-    )}`
-  );
-  await waitFor(element(matchConfirmPayment))
-    .toExist()
-    .withTimeout(e2eWaitRenderTimeout);
-  await element(matchConfirmPayment).tap();
-
-  await waitFor(
-    element(
-      by.text(
-        I18n.t("payment.paidConfirm", {
-          amount: formatNumberCentsToAmount(2322, true)
-        })
-      )
-    )
-  )
-    .toExist()
-    .withTimeout(e2eWaitRenderTimeout);
-
-  await element(by.text(I18n.t("wallet.outcomeMessage.cta.close"))).tap();
-};
-
-const openPaymentFromMessage = async () => {
-  const messageWithPayment = element(
-    by.id(`MessageListItem_00000000000000000000000021`)
-  );
-  await waitFor(messageWithPayment)
-    .toBeVisible()
-    .withTimeout(e2eWaitRenderTimeout);
-  await messageWithPayment.tap();
-
-  const seeNoticeButton = element(by.text(I18n.t("messages.cta.seeNotice")));
-  await waitFor(seeNoticeButton)
-    .toBeVisible()
-    .withTimeout(e2eWaitRenderTimeout);
-  await seeNoticeButton.tap();
-};
diff --git a/ts/__e2e__/payment00.e2e.ts b/ts/__e2e__/payment00.e2e.ts
new file mode 100644
index 00000000000..79748e53d91
--- /dev/null
+++ b/ts/__e2e__/payment00.e2e.ts
@@ -0,0 +1,20 @@
+import I18n from "../i18n";
+import { e2eWaitRenderTimeout } from "./config";
+import { ensureLoggedIn, openPaymentFromMessage } from "./utils";
+
+describe("Payment", () => {
+  beforeEach(async () => {
+    await device.launchApp({ newInstance: true });
+    await ensureLoggedIn();
+  });
+
+  it("When the user want to pay starting from a message and press back in the payment transaction summary screen, it should return to the message details screen", async () => {
+    await openPaymentFromMessage();
+    const backButton = element(by.id("back-button-transaction-summary"));
+    await waitFor(backButton).toBeVisible().withTimeout(e2eWaitRenderTimeout);
+    await backButton.tap();
+    await waitFor(element(by.text(I18n.t("messageDetails.headerTitle"))))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+  });
+});
diff --git a/ts/__e2e__/payment01.e2e.ts b/ts/__e2e__/payment01.e2e.ts
new file mode 100644
index 00000000000..0d73beff9a4
--- /dev/null
+++ b/ts/__e2e__/payment01.e2e.ts
@@ -0,0 +1,30 @@
+import I18n from "../i18n";
+import { e2eWaitRenderTimeout } from "./config";
+import { ensureLoggedIn, openPaymentFromMessage } from "./utils";
+
+describe("Payment", () => {
+  beforeEach(async () => {
+    await device.launchApp({ newInstance: true });
+    await ensureLoggedIn();
+  });
+
+  it("When the user want to pay starting from a message and press back in the payment transaction summary screen, when navigating to the wallet then the wallet root screen should be visible", async () => {
+    await openPaymentFromMessage();
+
+    const backButton1 = element(by.id("back-button-transaction-summary"));
+    await waitFor(backButton1).toBeVisible().withTimeout(e2eWaitRenderTimeout);
+    await backButton1.tap();
+
+    const backButton2 = element(by.id("back-button"));
+    await waitFor(backButton2).toBeVisible().withTimeout(e2eWaitRenderTimeout);
+    await backButton2.tap();
+
+    const walletButton = element(by.text(I18n.t("global.navigator.wallet")));
+    await waitFor(walletButton).toBeVisible().withTimeout(e2eWaitRenderTimeout);
+    await walletButton.tap();
+
+    await waitFor(element(by.text(I18n.t("wallet.payNotice"))))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+  });
+});
diff --git a/ts/__e2e__/payment02.e2e.ts b/ts/__e2e__/payment02.e2e.ts
new file mode 100644
index 00000000000..c050a48077d
--- /dev/null
+++ b/ts/__e2e__/payment02.e2e.ts
@@ -0,0 +1,37 @@
+import I18n from "../i18n";
+import { e2eWaitRenderTimeout } from "./config";
+import { ensureLoggedIn, openPaymentFromMessage } from "./utils";
+
+describe("Payment", () => {
+  beforeEach(async () => {
+    await device.launchApp({ newInstance: true });
+    await ensureLoggedIn();
+  });
+
+  it("When the user want to pay starting from a message and press cancel in the payment confirm screen, it should return to the message details screen", async () => {
+    await openPaymentFromMessage();
+    await waitFor(element(by.text(I18n.t("wallet.continue"))))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+    await element(by.text(I18n.t("wallet.continue"))).tap();
+
+    await waitFor(element(by.text(I18n.t("wallet.ConfirmPayment.header"))))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+
+    const cancelButton = element(by.id("cancelPaymentButton"));
+    // const cancelButton = element(by.id("cancelPaymentButton"));
+    await waitFor(cancelButton).toExist().withTimeout(e2eWaitRenderTimeout);
+    await cancelButton.tap();
+    // I18n.t("wallet.ConfirmPayment.confirmCancelPayment")
+    const confirmCancel = element(
+      by.label(I18n.t("wallet.ConfirmPayment.confirmCancelPayment"))
+    ).atIndex(0);
+    await waitFor(confirmCancel).toExist().withTimeout(e2eWaitRenderTimeout);
+    await confirmCancel.tap();
+
+    await waitFor(element(by.text(I18n.t("messageDetails.headerTitle"))))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+  });
+});
diff --git a/ts/__e2e__/payment03.e2e.ts b/ts/__e2e__/payment03.e2e.ts
new file mode 100644
index 00000000000..d68ccd949d2
--- /dev/null
+++ b/ts/__e2e__/payment03.e2e.ts
@@ -0,0 +1,18 @@
+import {
+  completePaymentFlow,
+  ensureLoggedIn,
+  openPaymentFromMessage
+} from "./utils";
+
+describe("Payment", () => {
+  beforeEach(async () => {
+    await device.launchApp({ newInstance: true });
+    await ensureLoggedIn();
+  });
+
+  // TODO: this could be executed just one time until we have a way to reset the dev server between tests
+  it("When the user want to pay starting from a message, it should allow the user to complete a payment", async () => {
+    await openPaymentFromMessage();
+    await completePaymentFlow();
+  });
+});
diff --git a/ts/__e2e__/payment04.e2e.ts b/ts/__e2e__/payment04.e2e.ts
new file mode 100644
index 00000000000..eb75d994afe
--- /dev/null
+++ b/ts/__e2e__/payment04.e2e.ts
@@ -0,0 +1,32 @@
+import I18n from "../i18n";
+import { e2eWaitRenderTimeout } from "./config";
+import { closeKeyboard, completePaymentFlow, ensureLoggedIn } from "./utils";
+
+describe("Payment", () => {
+  beforeEach(async () => {
+    await device.launchApp({ newInstance: true });
+    await ensureLoggedIn();
+  });
+
+  it("When the user want to pay using the manual insertion, it should allow the user to complete a payment", async () => {
+    await element(by.text(I18n.t("global.navigator.wallet"))).tap();
+    await element(by.text(I18n.t("wallet.payNotice"))).tap();
+
+    await element(by.id("barcodeScanBaseScreenTabInput")).tap();
+
+    const matchNoticeCodeInput = by.id("NoticeCodeInputMask");
+    await waitFor(element(matchNoticeCodeInput))
+      .toExist()
+      .withTimeout(e2eWaitRenderTimeout);
+
+    await element(matchNoticeCodeInput).typeText("123123123123123123");
+    await element(by.id("EntityCodeInputMask")).typeText("12345678901");
+
+    // Close the keyboard
+    await closeKeyboard();
+
+    await element(by.text(I18n.t("global.buttons.continue"))).tap();
+
+    await completePaymentFlow();
+  });
+});
diff --git a/ts/__e2e__/utils.ts b/ts/__e2e__/utils.ts
index ef0e68658fb..fe1194feeb1 100644
--- a/ts/__e2e__/utils.ts
+++ b/ts/__e2e__/utils.ts
@@ -1,3 +1,5 @@
+import { formatNumberCentsToAmount } from "../utils/stringBuilder";
+import I18n from "../i18n";
 import {
   e2ePinChar1,
   e2ePinChar2,
@@ -127,3 +129,51 @@ export const closeKeyboard = async () => {
     await element(by.label("Done")).atIndex(0).tap();
   }
 };
+
+export const openPaymentFromMessage = async () => {
+  const messageWithPayment = element(
+    by.id(`MessageListItem_00000000000000000000000019`)
+  );
+  await waitFor(messageWithPayment)
+    .toBeVisible()
+    .withTimeout(e2eWaitRenderTimeout);
+  await messageWithPayment.tap();
+
+  const seeNoticeButton = element(by.text(I18n.t("messages.cta.seeNotice")));
+  await waitFor(seeNoticeButton)
+    .toBeVisible()
+    .withTimeout(e2eWaitRenderTimeout);
+  await seeNoticeButton.tap();
+};
+
+export const completePaymentFlow = async () => {
+  await waitFor(element(by.text(I18n.t("wallet.continue"))))
+    .toExist()
+    .withTimeout(e2eWaitRenderTimeout);
+  await element(by.text(I18n.t("wallet.continue"))).tap();
+
+  const matchConfirmPayment = by.text(
+    `${I18n.t("wallet.ConfirmPayment.pay")} ${formatNumberCentsToAmount(
+      2322,
+      true
+    )}`
+  );
+  await waitFor(element(matchConfirmPayment))
+    .toExist()
+    .withTimeout(e2eWaitRenderTimeout);
+  await element(matchConfirmPayment).tap();
+
+  await waitFor(
+    element(
+      by.text(
+        I18n.t("payment.paidConfirm", {
+          amount: formatNumberCentsToAmount(2322, true)
+        })
+      )
+    )
+  )
+    .toExist()
+    .withTimeout(e2eWaitRenderTimeout);
+
+  await element(by.text(I18n.t("wallet.outcomeMessage.cta.close"))).tap();
+};
diff --git a/ts/boot/__tests__/__snapshots__/persistedStore.test.ts.snap b/ts/boot/__tests__/__snapshots__/persistedStore.test.ts.snap
index 04a4f1af920..88e04fba41a 100644
--- a/ts/boot/__tests__/__snapshots__/persistedStore.test.ts.snap
+++ b/ts/boot/__tests__/__snapshots__/persistedStore.test.ts.snap
@@ -79,6 +79,9 @@ Object {
       },
     },
     "paginatedById": Object {},
+    "payments": Object {
+      "userSelectedPayments": Set {},
+    },
     "thirdPartyById": Object {},
   },
   "messagesStatus": Object {},
@@ -159,7 +162,9 @@ Object {
   "isDesignSystemEnabled": false,
   "isFingerprintEnabled": undefined,
   "isIdPayTestEnabled": false,
+  "isItWalletTestEnabled": false,
   "isMixpanelEnabled": null,
+  "isNewWalletSectionEnabled": false,
   "isPagoPATestEnabled": false,
   "isPnTestEnabled": false,
   "preferredCalendar": undefined,
diff --git a/ts/boot/configurePushNotification.ts b/ts/boot/configurePushNotification.ts
index 4530e6f9111..a501f9a8264 100644
--- a/ts/boot/configurePushNotification.ts
+++ b/ts/boot/configurePushNotification.ts
@@ -17,7 +17,6 @@ import {
   pageSize,
   remindersOptInEnabled
 } from "../config";
-import { setMixpanelPushNotificationToken } from "../mixpanel";
 import {
   loadPreviousPageMessages,
   reloadAllMessages
@@ -92,8 +91,6 @@ function configurePushNotifications() {
   PushNotification.configure({
     // Called when token is generated
     onRegister: token => {
-      // send token to enable PN through Mixpanel
-      setMixpanelPushNotificationToken(token.token).then(constNull, constNull);
       // Dispatch an action to save the token in the store
       store.dispatch(updateNotificationsInstallationToken(token.token));
     },
diff --git a/ts/boot/configureStoreAndPersistor.ts b/ts/boot/configureStoreAndPersistor.ts
index 26b33faa001..ffa429cd003 100644
--- a/ts/boot/configureStoreAndPersistor.ts
+++ b/ts/boot/configureStoreAndPersistor.ts
@@ -1,6 +1,6 @@
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import * as O from "fp-ts/lib/Option";
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import * as O from "fp-ts/lib/Option";
 import _, { merge } from "lodash";
 import {
   applyMiddleware,
@@ -38,8 +38,8 @@ import {
 import { ContentState } from "../store/reducers/content";
 import { entitiesPersistConfig } from "../store/reducers/entities";
 import {
-  InstallationState,
-  INSTALLATION_INITIAL_STATE
+  INSTALLATION_INITIAL_STATE,
+  InstallationState
 } from "../store/reducers/installation";
 import { NotificationsState } from "../store/reducers/notifications";
 import { getInitialState as getInstallationInitialState } from "../store/reducers/notifications/installation";
@@ -53,7 +53,7 @@ import { configureReactotron } from "./configureRectotron";
 /**
  * Redux persist will migrate the store to the current version
  */
-const CURRENT_REDUX_STORE_VERSION = 23;
+const CURRENT_REDUX_STORE_VERSION = 26;
 
 // see redux-persist documentation:
 // https://github.com/rt2zz/redux-persist/blob/master/docs/migrations.md
@@ -356,7 +356,47 @@ const migrations: MigrationManifest = {
         ..._.omit(persistedPreferences, "isExperimentalFeaturesEnabled")
       }
     };
-  }
+  },
+  // Version 24
+  // Adds payments history archive persistence
+  "24": (state: PersistedState) =>
+    merge(state, {
+      features: {
+        payments: {
+          history: {
+            archive: []
+          }
+        }
+      }
+    }),
+  // Version 25
+  // Adds new wallet section FF
+  "25": (state: PersistedState) =>
+    merge(state, {
+      persistedPreferences: {
+        isNewWalletSectionEnabled: false
+      }
+    }),
+  // Version 26
+  // Adds shouldShowPaymentsRedirectBanner persistence in feature wallet reducer
+  "26": (state: PersistedState) =>
+    merge(state, {
+      features: {
+        wallet: {
+          preferences: {
+            shouldShowPaymentsRedirectBanner: true
+          }
+        }
+      }
+    }),
+  // Version 27
+  // Adds it wallet section FF
+  "27": (state: PersistedState) =>
+    merge(state, {
+      persistedPreferences: {
+        isItWalletTestEnabled: false
+      }
+    })
 };
 
 const isDebuggingInChrome = isDevEnv && !!window.navigator.userAgent;
@@ -413,7 +453,10 @@ const sagaMiddleware = createSagaMiddleware(
   RTron ? { sagaMonitor: (RTron as any).createSagaMonitor() } : {}
 );
 
-function configureStoreAndPersistor(): { store: Store; persistor: Persistor } {
+function configureStoreAndPersistor(): {
+  store: Store<GlobalState, Action>;
+  persistor: Persistor;
+} {
   /**
    * If available use redux-devtool version of the compose function that allow
    * the inspection of the store from the devtool.
diff --git a/ts/common/versionInfo/store/reducers/versionInfo.ts b/ts/common/versionInfo/store/reducers/versionInfo.ts
index fec99d34b6a..99e280240f5 100644
--- a/ts/common/versionInfo/store/reducers/versionInfo.ts
+++ b/ts/common/versionInfo/store/reducers/versionInfo.ts
@@ -72,7 +72,10 @@ export const isAppSupportedSelector = createSelector(
  * Since the getAppVersion cannot change during the app execution, we can avoid forwarding it from the outside
  * @param state
  */
-export const isPagoPaSupportedSelector = createSelector(
-  [versionInfoDataSelector],
-  (versionInfo): boolean => isSupported(versionInfo?.min_app_version_pagopa)
-);
+export const isPagoPaSupportedSelector = (state: GlobalState) =>
+  pipe(
+    state,
+    versionInfoDataSelector,
+    versionInfoStatusOrNull => versionInfoStatusOrNull?.min_app_version_pagopa,
+    isSupported
+  );
diff --git a/ts/components/CalendarList.tsx b/ts/components/CalendarList.tsx
new file mode 100644
index 00000000000..b68a52748e6
--- /dev/null
+++ b/ts/components/CalendarList.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+import { Calendar } from "react-native-calendar-events";
+import {
+  ContentWrapper,
+  RadioGroup,
+  RadioItem
+} from "@pagopa/io-app-design-system";
+import { pipe } from "fp-ts/lib/function";
+import * as A from "fp-ts/lib/Array";
+import * as O from "fp-ts/lib/Option";
+import { convertLocalCalendarName } from "../utils/calendar";
+import { useIOSelector } from "../store/hooks";
+import { preferredCalendarSelector } from "../store/reducers/persistedPreferences";
+
+type CalendarListProps = {
+  calendars: Array<Calendar>;
+  isLoading: boolean;
+  onCalendarSelected: (calendar: Calendar) => void;
+};
+
+const getCalendarsByAccount = (
+  calendars: Array<Calendar>
+): Array<RadioItem<string>> =>
+  pipe(
+    calendars,
+    A.filter(calendar => calendar.allowsModifications),
+    A.map(calendar => ({
+      id: calendar.id,
+      value: convertLocalCalendarName(calendar.title),
+      description: calendar.source
+    }))
+  );
+
+export const CalendarList = ({
+  calendars = [],
+  isLoading = false,
+  onCalendarSelected
+}: CalendarListProps) => {
+  const preferredCalendar = useIOSelector(preferredCalendarSelector);
+
+  const handleSelectCalendar = (calendarId: string) =>
+    pipe(
+      calendars,
+      A.findFirst(calendar => calendar.id === calendarId),
+      O.map(onCalendarSelected)
+    );
+
+  return (
+    <ContentWrapper>
+      <RadioGroup<string>
+        items={isLoading ? loadingCalendars : getCalendarsByAccount(calendars)}
+        onPress={handleSelectCalendar}
+        selectedItem={preferredCalendar?.id}
+        type="radioListItem"
+      />
+    </ContentWrapper>
+  );
+};
+
+const loadingCalendars: Array<RadioItem<string>> = A.makeBy(5, index => ({
+  id: index.toString(),
+  disabled: true,
+  loadingProps: { skeletonDescription: true, state: true },
+  value: ""
+}));
diff --git a/ts/components/DebugInfoOverlay.tsx b/ts/components/DebugInfoOverlay.tsx
index aef80666ee3..6f558a9ac06 100644
--- a/ts/components/DebugInfoOverlay.tsx
+++ b/ts/components/DebugInfoOverlay.tsx
@@ -1,8 +1,3 @@
-import * as React from "react";
-import { StyleSheet, Pressable, SafeAreaView, View, Text } from "react-native";
-import { connect } from "react-redux";
-import { useState } from "react";
-import { widthPercentageToDP } from "react-native-responsive-screen";
 import {
   HSpacer,
   IOColors,
@@ -10,13 +5,18 @@ import {
   hexToRgba,
   makeFontStyleObject
 } from "@pagopa/io-app-design-system";
+import * as React from "react";
+import { useState } from "react";
+import { Pressable, SafeAreaView, StyleSheet, Text, View } from "react-native";
+import { widthPercentageToDP } from "react-native-responsive-screen";
+import { connect } from "react-redux";
 import { ReduxProps } from "../store/actions/types";
+import { useIOSelector } from "../store/hooks";
 import { currentRouteSelector } from "../store/reducers/navigation";
+import { isPagoPATestEnabledSelector } from "../store/reducers/persistedPreferences";
 import { GlobalState } from "../store/reducers/types";
 import { getAppVersion } from "../utils/appVersion";
 import { clipboardSetStringWithFeedback } from "../utils/clipboard";
-import { useIOSelector } from "../store/hooks";
-import { isPagoPATestEnabledSelector } from "../store/reducers/persistedPreferences";
 import PagoPATestIndicator from "./PagoPATestIndicator";
 
 type Props = ReturnType<typeof mapStateToProps> & ReduxProps;
@@ -27,6 +27,7 @@ const debugItemBorderColor = hexToRgba(IOColors.black, 0.1);
 const styles = StyleSheet.create({
   versionContainer: {
     ...StyleSheet.absoluteFillObject,
+    top: -8,
     justifyContent: "flex-start",
     alignItems: "center",
     zIndex: 1000
diff --git a/ts/components/DebugPrettyPrint.tsx b/ts/components/DebugPrettyPrint.tsx
index ad110fcff01..a9f11efec1b 100644
--- a/ts/components/DebugPrettyPrint.tsx
+++ b/ts/components/DebugPrettyPrint.tsx
@@ -1,3 +1,7 @@
+/* 
+WARNING: This component is not referenced anywhere, but is used
+for development purposes. for development purposes. Don't REMOVE it!
+*/
 import {
   IOColors,
   Icon,
diff --git a/ts/components/DevScreenButton.tsx b/ts/components/DevScreenButton.tsx
deleted file mode 100644
index 31ffc1cd68d..00000000000
--- a/ts/components/DevScreenButton.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from "react";
-import { StyleSheet } from "react-native";
-import { Text as NBButtonText } from "native-base";
-import ButtonDefaultOpacity from "./ButtonDefaultOpacity";
-
-type Props = Readonly<{
-  onPress: () => void;
-}>;
-
-const styles = StyleSheet.create({
-  devButton: {
-    position: "absolute",
-    top: 20,
-    left: 3,
-    zIndex: 1000
-  }
-});
-
-export const DevScreenButton: React.SFC<Props> = props => (
-  <ButtonDefaultOpacity
-    dark={true}
-    onPress={props.onPress}
-    small={true}
-    bordered={true}
-    transparent={true}
-    style={styles.devButton}
-  >
-    <NBButtonText>Dev</NBButtonText>
-  </ButtonDefaultOpacity>
-);
diff --git a/ts/components/EmailReadComponent.tsx b/ts/components/EmailReadComponent.tsx
deleted file mode 100644
index fe59e2e44c8..00000000000
--- a/ts/components/EmailReadComponent.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import * as O from "fp-ts/lib/Option";
-import * as React from "react";
-import { Platform, SafeAreaView, StyleSheet, View } from "react-native";
-import { Icon, VSpacer } from "@pagopa/io-app-design-system";
-import I18n from "../i18n";
-import { useIOSelector } from "../store/hooks";
-import { profileEmailSelector } from "../store/reducers/profile";
-import customVariables from "../theme/variables";
-import { ContextualHelpPropsMarkdown } from "./screens/BaseScreenComponent";
-import ScreenContent from "./screens/ScreenContent";
-import TopScreenComponent from "./screens/TopScreenComponent";
-import SectionStatusComponent from "./SectionStatus";
-import { BlockButtonsProps } from "./ui/BlockButtons";
-import FooterWithButtons from "./ui/FooterWithButtons";
-import { Body } from "./core/typography/Body";
-import { H3 } from "./core/typography/H3";
-
-const styles = StyleSheet.create({
-  flex: {
-    flex: 1
-  },
-  emailWithIcon: {
-    flexDirection: "row",
-    justifyContent: "flex-start",
-    alignItems: "center"
-  },
-  content: {
-    paddingHorizontal: customVariables.contentPadding,
-    backgroundColor: customVariables.contentBackground,
-    flex: 1
-  },
-  icon: {
-    marginTop: Platform.OS === "android" ? 3 : 0, // correct icon position to align it with baseline of email text
-    marginRight: 8
-  }
-});
-
-const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
-  title: "profile.data.email.contextualHelpTitle",
-  body: "profile.data.email.contextualHelpContent"
-};
-
-type Props = {
-  handleGoBack: () => void;
-  footerProps: BlockButtonsProps;
-};
-
-const EmailReadComponent = ({ handleGoBack, footerProps }: Props) => {
-  const optionEmail = useIOSelector(profileEmailSelector);
-
-  return (
-    <SafeAreaView style={styles.flex}>
-      <TopScreenComponent
-        goBack={handleGoBack}
-        headerTitle={I18n.t("profile.data.list.email")}
-        contextualHelpMarkdown={contextualHelpMarkdown}
-      >
-        <ScreenContent title={I18n.t("email.read.title")}>
-          <View style={styles.content}>
-            <Body>{I18n.t("email.insert.label")}</Body>
-            <VSpacer size={8} />
-            <View style={styles.emailWithIcon}>
-              <View style={styles.icon}>
-                <Icon
-                  name="email"
-                  accessible={true}
-                  accessibilityLabel={I18n.t("email.read.title")}
-                  size={24}
-                />
-              </View>
-              {O.isSome(optionEmail) && <H3>{optionEmail.value}</H3>}
-            </View>
-            <VSpacer size={24} />
-            <Body color="bluegrey">{`${I18n.t("email.read.details")}`}</Body>
-          </View>
-        </ScreenContent>
-        <SectionStatusComponent sectionKey={"email_validation"} />
-        <FooterWithButtons {...footerProps} />
-      </TopScreenComponent>
-    </SafeAreaView>
-  );
-};
-
-export default EmailReadComponent;
diff --git a/ts/components/FAQComponent.tsx b/ts/components/FAQComponent.tsx
index 82ee4aab4c4..44056171933 100644
--- a/ts/components/FAQComponent.tsx
+++ b/ts/components/FAQComponent.tsx
@@ -2,12 +2,12 @@ import * as React from "react";
 import { ComponentProps } from "react";
 import { FAQType } from "../utils/faq";
 import Accordion from "./ui/Accordion";
-import Markdown from "./ui/Markdown";
+import LegacyMarkdown from "./ui/Markdown/LegacyMarkdown";
 
 type Props = Readonly<{
   faqs: ReadonlyArray<FAQType>;
-  onLinkClicked?: ComponentProps<typeof Markdown>["onLinkClicked"];
-  shouldHandleLink?: ComponentProps<typeof Markdown>["shouldHandleLink"];
+  onLinkClicked?: ComponentProps<typeof LegacyMarkdown>["onLinkClicked"];
+  shouldHandleLink?: ComponentProps<typeof LegacyMarkdown>["shouldHandleLink"];
 }>;
 
 const FAQComponent: React.FunctionComponent<Props> = (props: Props) => (
diff --git a/ts/components/HorizontalScroll.tsx b/ts/components/HorizontalScroll.tsx
deleted file mode 100644
index 6f2a86141b6..00000000000
--- a/ts/components/HorizontalScroll.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-/**
- * This component allows to display a carousel with rounded indicators at the bottom
- */
-import { pipe } from "fp-ts/lib/function";
-import * as O from "fp-ts/lib/Option";
-import * as React from "react";
-import {
-  View,
-  Animated,
-  Dimensions,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  NativeSyntheticEvent,
-  NativeScrollEvent
-} from "react-native";
-import { IOColors, VSpacer } from "@pagopa/io-app-design-system";
-import variables from "../theme/variables";
-import { roundToThirdDecimal } from "../utils/number";
-import { trackCarousel } from "../screens/authentication/analytics/carouselAnalytics";
-
-type Props = {
-  cards: ReadonlyArray<JSX.Element>;
-  onCurrentElement?: (index: number) => void;
-  indexToScroll?: number;
-};
-
-const itemWidth = 10; // Radius of the indicators
-const noWidth = 0;
-const screenWidth = Dimensions.get("screen").width;
-
-const styles = StyleSheet.create({
-  track: {
-    backgroundColor: IOColors.greyLight,
-    overflow: "hidden",
-    width: itemWidth,
-    height: itemWidth,
-    borderRadius: itemWidth / 2
-  },
-
-  bar: {
-    backgroundColor: variables.brandPrimary,
-    borderRadius: itemWidth / 2,
-    width: itemWidth,
-    height: itemWidth
-  },
-
-  scrollView: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-
-  barContainer: {
-    zIndex: itemWidth,
-    flexDirection: "row"
-  }
-});
-
-export const HorizontalScroll: React.FunctionComponent<Props> = (
-  props: Props
-) => {
-  const scrollOffset =
-    (props.indexToScroll ?? 0) * Dimensions.get("window").width;
-  const animVal = new Animated.Value(scrollOffset);
-  const scrollRef = React.useRef<ScrollView>(null);
-  const { indexToScroll } = props;
-
-  const [currentIndex, setCurrentIndex] = React.useState(0);
-
-  React.useEffect(() => {
-    trackCarousel(currentIndex, props.cards);
-  }, [currentIndex, props.cards]);
-
-  React.useEffect(() => {
-    pipe(
-      indexToScroll,
-      O.fromNullable,
-      O.map(_ =>
-        setTimeout(() => {
-          if (scrollRef.current) {
-            scrollRef.current.scrollTo({
-              x: scrollOffset,
-              y: 0,
-              animated: false
-            });
-          }
-        }, 0)
-      )
-    );
-  }, [scrollRef, scrollOffset, indexToScroll]);
-
-  const barArray = props.cards.map((_, i) => {
-    const scrollBarVal = animVal.interpolate({
-      inputRange: [screenWidth * (i - 1), screenWidth * (i + 1)],
-      outputRange: [-itemWidth, itemWidth],
-      extrapolate: "clamp"
-    });
-
-    return (
-      <View
-        key={`bar${i}`}
-        style={[
-          styles.track,
-          {
-            marginLeft: i === 0 ? noWidth : itemWidth
-          }
-        ]}
-      >
-        <Animated.View
-          style={[
-            styles.bar,
-            {
-              transform: [{ translateX: scrollBarVal }]
-            }
-          ]}
-        />
-      </View>
-    );
-  });
-
-  const handleScrollEvent = (
-    event: NativeSyntheticEvent<NativeScrollEvent>
-  ) => {
-    {
-      const currentIndex = Platform.select({
-        ios: Math.round(
-          event.nativeEvent.contentOffset.x / Dimensions.get("window").width
-        ),
-        default: Math.round(
-          roundToThirdDecimal(event.nativeEvent.contentOffset.x) /
-            roundToThirdDecimal(Dimensions.get("window").width)
-        )
-      });
-      setCurrentIndex(currentIndex);
-      pipe(
-        props.onCurrentElement,
-        O.fromNullable,
-        O.map(onCurrElement => onCurrElement(currentIndex))
-      );
-      Animated.event([{ nativeEvent: { contentOffset: { x: animVal } } }])(
-        event
-      );
-    }
-  };
-
-  return (
-    <View style={styles.scrollView}>
-      <ScrollView
-        ref={scrollRef}
-        horizontal={true}
-        showsHorizontalScrollIndicator={false}
-        scrollEnabled={props.cards.length > 1}
-        scrollEventThrottle={props.cards.length}
-        pagingEnabled={true}
-        onScroll={handleScrollEvent}
-      >
-        {props.cards}
-      </ScrollView>
-
-      {props.cards.length > 1 && (
-        <View style={styles.barContainer}>{barArray}</View>
-      )}
-      <VSpacer size={16} />
-    </View>
-  );
-};
diff --git a/ts/components/IdpSuccessfulAuthentication.tsx b/ts/components/IdpSuccessfulAuthentication.tsx
index 70867e243ad..bbfe97ff684 100644
--- a/ts/components/IdpSuccessfulAuthentication.tsx
+++ b/ts/components/IdpSuccessfulAuthentication.tsx
@@ -1,29 +1,37 @@
-/**
- * A component to display a white tick on a blue background
- */
-import * as React from "react";
-import { View, StatusBar, StyleSheet } from "react-native";
+import { useEffect } from "react";
+import { AccessibilityInfo } from "react-native";
+import { profileNameSelector } from "../store/reducers/profile";
+import I18n from "../i18n";
+import { useOnFirstRender } from "../utils/hooks/useOnFirstRender";
+import { trackIdpAuthenticationSuccessScreen } from "../screens/profile/analytics";
+import { useIOSelector } from "../store/hooks";
+import { loggedInIdpSelector } from "../store/reducers/authentication";
+import { OperationResultScreenContent } from "./screens/OperationResultScreenContent";
 
-import { IOIconSizeScale, Icon } from "@pagopa/io-app-design-system";
-import variables from "../theme/variables";
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: variables.brandPrimary,
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center"
-  }
-});
-
-const ICON_SIZE: IOIconSizeScale = 96;
-
-export const IdpSuccessfulAuthentication = () => (
-  <View style={styles.container}>
-    <StatusBar
-      barStyle="light-content"
-      backgroundColor={styles.container.backgroundColor}
-    />
-    <Icon name="checkTickBig" color="white" size={ICON_SIZE} />
-  </View>
-);
+export const IdpSuccessfulAuthentication = () => {
+  const idp = useIOSelector(loggedInIdpSelector);
+  useOnFirstRender(() => {
+    trackIdpAuthenticationSuccessScreen(idp?.id);
+  });
+  const name = useIOSelector(profileNameSelector);
+  // If the name is undefined, we set it to an empty string to avoid
+  // the pictogram shift up when the name is available.
+  const contentTitle = name
+    ? I18n.t("authentication.idp_login_success.contentTitle", {
+        name
+      })
+    : " ";
+  // Announce the screen content when the name is available.
+  // Prefer an announce intead of setting the focus to the title
+  // because the screen is visible just for a short time.
+  useEffect(() => {
+    if (name) {
+      AccessibilityInfo.announceForAccessibility(contentTitle);
+    }
+  }, [contentTitle, name]);
+  return OperationResultScreenContent({
+    pictogram: "success",
+    title: contentTitle,
+    testID: "idp-successful-authentication"
+  });
+};
diff --git a/ts/components/IdpsGrid.tsx b/ts/components/IdpsGrid.tsx
index ee128423c19..2b8ce57c830 100644
--- a/ts/components/IdpsGrid.tsx
+++ b/ts/components/IdpsGrid.tsx
@@ -27,8 +27,12 @@ type OwnProps = {
   columnWrapperStyle?: StyleProp<ViewStyle>;
   contentContainerStyle?: StyleProp<ViewStyle>;
   headerComponentStyle?: StyleProp<ViewStyle>;
-  headerComponent?: React.ReactNode;
-  footerComponent?: React.ReactNode;
+  headerComponent?: React.ComponentProps<
+    typeof FlatList
+  >["ListHeaderComponent"];
+  footerComponent?: React.ComponentProps<
+    typeof FlatList
+  >["ListFooterComponent"];
   // Array of Identity Provider to show in the grid.
   idps: ReadonlyArray<LocalIdpsFallback>;
   // A callback function called when an Identity Provider is selected
diff --git a/ts/components/IdpsGridRevamp.tsx b/ts/components/IdpsGridRevamp.tsx
index 22ef9ce32ac..8107b88a3d2 100644
--- a/ts/components/IdpsGridRevamp.tsx
+++ b/ts/components/IdpsGridRevamp.tsx
@@ -25,9 +25,13 @@ import { LocalIdpsFallback } from "../utils/idps";
 
 type OwnProps = {
   contentContainerStyle?: StyleProp<ViewStyle>;
-  footerComponent?: React.ReactNode;
+  footerComponent?: React.ComponentProps<
+    typeof FlatList
+  >["ListFooterComponent"];
   headerComponentStyle?: StyleProp<ViewStyle>;
-  headerComponent?: React.ReactNode;
+  headerComponent?: React.ComponentProps<
+    typeof FlatList
+  >["ListHeaderComponent"];
   // Array of Identity Provider to show in the grid.
   idps: ReadonlyArray<LocalIdpsFallback>;
   // A callback function called when an Identity Provider is selected
diff --git a/ts/components/LandingCardComponent.tsx b/ts/components/LandingCardComponent.tsx
index e652067bfa3..19f22956374 100644
--- a/ts/components/LandingCardComponent.tsx
+++ b/ts/components/LandingCardComponent.tsx
@@ -3,58 +3,69 @@
  */
 
 import * as React from "react";
-import { View, Dimensions, Image, ScrollView, StyleSheet } from "react-native";
-import { Col, Grid } from "react-native-easy-grid";
-import { VSpacer } from "@pagopa/io-app-design-system";
-import { Body } from "./core/typography/Body";
-import { H2 } from "./core/typography/H2";
+import { View, ScrollView, useWindowDimensions } from "react-native";
+import {
+  Body,
+  H3,
+  IOPictograms,
+  IOStyles,
+  Pictogram,
+  VSpacer
+} from "@pagopa/io-app-design-system";
 
 type Props = {
   id: number;
-  image: NodeRequire;
+  pictogramName: IOPictograms;
   title: string;
   content: string;
   accessibilityLabel?: string;
   accessibilityHint?: string;
 };
 
-const screenWidth = Dimensions.get("screen").width;
+const VERTICAL_SPACING = 16;
 
-const styles = StyleSheet.create({
-  card: {
-    width: screenWidth,
-    alignItems: "center",
-    alignContent: "flex-start"
-  },
-  image: {
-    width: screenWidth / 2,
-    height: screenWidth / 2,
-    resizeMode: "contain"
-  }
-});
+export const LandingCardComponent = React.forwardRef<View, Props>(
+  (props, ref) => {
+    const screenDimension = useWindowDimensions();
+    const screenWidth = screenDimension.width;
+    const {
+      accessibilityLabel,
+      accessibilityHint,
+      pictogramName,
+      title,
+      content
+    } = props;
 
-export const LandingCardComponent: React.SFC<Props> = card => (
-  <ScrollView>
-    <View
-      style={styles.card}
-      accessible={true}
-      accessibilityLabel={card.accessibilityLabel}
-      accessibilityHint={card.accessibilityHint}
-    >
-      <Image source={card.image} style={styles.image} />
-      <VSpacer size={16} />
-      <Grid>
-        <Col size={1} />
-        <Col size={7}>
-          <H2 style={{ textAlign: "center" }} weight="Bold">
-            {card.title}
-          </H2>
-          <VSpacer size={16} />
-          <Body style={{ textAlign: "center" }}>{card.content}</Body>
-          <VSpacer size={16} />
-        </Col>
-        <Col size={1} />
-      </Grid>
-    </View>
-  </ScrollView>
+    return (
+      <ScrollView
+        accessible={false}
+        contentContainerStyle={{ flexGrow: 1, justifyContent: "center" }}
+      >
+        <View
+          ref={ref}
+          style={[
+            {
+              width: screenWidth
+            },
+            IOStyles.horizontalContentPadding,
+            IOStyles.alignCenter
+          ]}
+          accessible={true}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityHint={accessibilityHint}
+        >
+          <Pictogram size={180} name={pictogramName} />
+          <VSpacer size={VERTICAL_SPACING} />
+          <H3 importantForAccessibility="no" style={{ textAlign: "center" }}>
+            {title}
+          </H3>
+          <VSpacer size={VERTICAL_SPACING} />
+          <Body importantForAccessibility="no" style={{ textAlign: "center" }}>
+            {content}
+          </Body>
+          <VSpacer size={VERTICAL_SPACING} />
+        </View>
+      </ScrollView>
+    );
+  }
 );
diff --git a/ts/components/LoadingSpinnerOverlay.tsx b/ts/components/LoadingSpinnerOverlay.tsx
index 22271727f72..962fc81f4e0 100644
--- a/ts/components/LoadingSpinnerOverlay.tsx
+++ b/ts/components/LoadingSpinnerOverlay.tsx
@@ -6,9 +6,6 @@ import {
   hexToRgba
 } from "@pagopa/io-app-design-system";
 import I18n from "../i18n";
-import { useIOSelector } from "../store/hooks";
-import { isDesignSystemEnabledSelector } from "../store/reducers/persistedPreferences";
-import ButtonDefaultOpacity from "./ButtonDefaultOpacity";
 import { Overlay } from "./ui/Overlay";
 import { IOStyles } from "./core/variables/IOStyles";
 import { Body } from "./core/typography/Body";
@@ -37,50 +34,37 @@ const LoadingSpinnerOverlay = ({
   loadingCaption,
   loadingOpacity = 0.7,
   onCancel
-}: Props) => {
-  const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector);
-  return (
-    <Overlay
-      backgroundColor={hexToRgba(IOColors.white, loadingOpacity)}
-      foreground={
-        isLoading && (
-          <BoxedRefreshIndicator
-            caption={
-              <View style={styles.textCaption}>
-                <Body accessible={true} style={{ textAlign: "center" }}>
-                  {loadingCaption || I18n.t("global.remoteStates.wait")}
-                </Body>
+}: Props) => (
+  <Overlay
+    backgroundColor={hexToRgba(IOColors.white, loadingOpacity)}
+    foreground={
+      isLoading && (
+        <BoxedRefreshIndicator
+          caption={
+            <View style={styles.textCaption}>
+              <Body accessible={true} style={{ textAlign: "center" }}>
+                {loadingCaption || I18n.t("global.remoteStates.wait")}
+              </Body>
+            </View>
+          }
+          action={
+            onCancel && (
+              <View style={IOStyles.selfCenter}>
+                <ButtonOutline
+                  accessibilityLabel={I18n.t("global.buttons.cancel")}
+                  onPress={onCancel}
+                  testID="loadingSpinnerOverlayCancelButton"
+                  label={I18n.t("global.buttons.cancel")}
+                />
               </View>
-            }
-            action={
-              onCancel && (
-                <View style={IOStyles.selfCenter}>
-                  {isDesignSystemEnabled ? (
-                    <ButtonOutline
-                      accessibilityLabel={I18n.t("global.buttons.cancel")}
-                      onPress={onCancel}
-                      testID="loadingSpinnerOverlayCancelButton"
-                      label={I18n.t("global.buttons.cancel")}
-                    />
-                  ) : (
-                    <ButtonDefaultOpacity
-                      onPress={onCancel}
-                      cancel={true}
-                      testID={"loadingSpinnerOverlayCancelButton"}
-                    >
-                      <Body>{I18n.t("global.buttons.cancel")}</Body>
-                    </ButtonDefaultOpacity>
-                  )}
-                </View>
-              )
-            }
-          />
-        )
-      }
-    >
-      {children}
-    </Overlay>
-  );
-};
+            )
+          }
+        />
+      )
+    }
+  >
+    {children}
+  </Overlay>
+);
 
 export default LoadingSpinnerOverlay;
diff --git a/ts/components/NavBarLabel.tsx b/ts/components/NavBarLabel.tsx
deleted file mode 100644
index dc2f5c3be78..00000000000
--- a/ts/components/NavBarLabel.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { pipe } from "fp-ts/lib/function";
-import * as O from "fp-ts/lib/Option";
-import * as React from "react";
-import { Platform, StyleSheet, Text } from "react-native";
-import { connect } from "react-redux";
-import { Locales, TranslationKeys } from "../../locales/locales";
-import I18n from "../i18n";
-import ROUTES from "../navigation/routes";
-import { messagesUnreadAndUnarchivedSelector } from "../features/messages/store/reducers/messagesStatus";
-import { preferredLanguageSelector } from "../store/reducers/persistedPreferences";
-import { GlobalState } from "../store/reducers/types";
-import { makeFontStyleObject } from "../theme/fonts";
-import { MESSAGES_ROUTES } from "../features/messages/navigation/routes";
-
-type Routes = keyof typeof ROUTES | keyof typeof MESSAGES_ROUTES;
-
-type OwnProps = {
-  options: {
-    tintColor: string | null;
-    focused: boolean;
-  };
-  routeName: string;
-};
-
-type Props = OwnProps & ReturnType<typeof mapStateToProps>;
-
-type RouteLabelMap = { [key in Routes]?: TranslationKeys };
-const ROUTE_LABEL: RouteLabelMap = {
-  MESSAGES_NAVIGATOR: "global.navigator.messages",
-  WALLET_HOME: "global.navigator.wallet",
-  SERVICES_NAVIGATOR: "global.navigator.services",
-  PROFILE_NAVIGATOR: "global.navigator.profile"
-};
-const fallbackLabel = "unknown"; // fallback label
-
-const routeOrder = new Map<Routes, number>([
-  ["MESSAGES_NAVIGATOR", 1],
-  ["WALLET_HOME", 2],
-  ["SERVICES_NAVIGATOR", 3],
-  ["PROFILE_NAVIGATOR", 4]
-]);
-
-const getLabel = (routeName: string, locale: Locales): string =>
-  // "routeName as Routes" is assumed to be safe as explained @https://github.com/pagopa/io-app/pull/193#discussion_r192347234
-  // adding fallback anyway -- better safe than sorry
-  pipe(
-    ROUTE_LABEL[routeName as Routes],
-    O.fromNullable,
-    O.fold(
-      () => fallbackLabel,
-      l => I18n.t(l, { locale })
-    )
-  );
-const styles = StyleSheet.create({
-  labelStyle: {
-    ...makeFontStyleObject(Platform.select),
-    textAlign: "center"
-  }
-});
-
-const computeAccessibilityLabel = (
-  section: string,
-  order: number,
-  unread?: number
-) =>
-  typeof unread === "undefined"
-    ? I18n.t("navigation.accessibility", {
-        section,
-        order
-      })
-    : I18n.t("navigation.accessibilityWithBadge", {
-        section,
-        order,
-        unread
-      });
-
-/**
- * This Component is used to Render the Labels of the bottom navbar of the app
- * translated in the preferred locale if it was selected
- * @param props
- */
-const NavBarLabel: React.FunctionComponent<Props> = (props: Props) => {
-  const { options, routeName, preferredLanguage, messagesUnread } = props;
-  const locale: Locales = pipe(
-    preferredLanguage,
-    O.fold(
-      () => I18n.locale,
-      l => l
-    )
-  );
-  const label = getLabel(routeName, locale);
-  const maybeOrder = O.fromNullable(routeOrder.get(routeName as Routes));
-  const isSelected = options.focused
-    ? `${I18n.t("navigation.selected")}, `
-    : "";
-
-  const unreadMessagesMap: Record<string, number> = {
-    [MESSAGES_ROUTES.MESSAGES_NAVIGATOR]: messagesUnread.length
-  };
-
-  const computedUnreadMessages = unreadMessagesMap[routeName] || undefined;
-
-  const panelAccessibilityLabel = computeAccessibilityLabel(
-    label,
-    O.getOrElse(() => 0)(maybeOrder),
-    computedUnreadMessages
-  );
-
-  return (
-    <Text
-      style={[
-        styles.labelStyle,
-        {
-          color: options.tintColor === null ? undefined : options.tintColor
-        }
-      ]}
-      accessibilityLabel={`${isSelected} ${panelAccessibilityLabel}`}
-    >
-      {label}
-    </Text>
-  );
-};
-
-const mapStateToProps = (state: GlobalState) => ({
-  preferredLanguage: preferredLanguageSelector(state),
-  messagesUnread: messagesUnreadAndUnarchivedSelector(state)
-});
-
-export default connect(mapStateToProps)(NavBarLabel);
diff --git a/ts/components/NewRemindEmailValidationOverlay.tsx b/ts/components/NewRemindEmailValidationOverlay.tsx
deleted file mode 100644
index 504a705386b..00000000000
--- a/ts/components/NewRemindEmailValidationOverlay.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-/**
- * A component to remind the user to validate his email
- */
-import { Millisecond } from "@pagopa/ts-commons/lib/units";
-import { pipe } from "fp-ts/lib/function";
-import * as pot from "@pagopa/ts-commons/lib/pot";
-import * as O from "fp-ts/lib/Option";
-import { Content } from "native-base";
-import * as React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { View, SafeAreaView } from "react-native";
-import {
-  LabelLink,
-  IOPictogramSizeScale,
-  Label,
-  Pictogram,
-  VSpacer
-} from "@pagopa/io-app-design-system";
-import I18n from "../i18n";
-
-import {
-  acknowledgeOnEmailValidation,
-  profileLoadRequest,
-  setEmailCheckAtStartupFailure,
-  startEmailValidation
-} from "../store/actions/profile";
-import {
-  isProfileEmailValidatedSelector,
-  isProfileFirstOnBoardingSelector,
-  profileEmailSelector
-} from "../store/reducers/profile";
-import { useIODispatch, useIOSelector } from "../store/hooks";
-import { emailValidationSelector } from "../store/reducers/emailValidation";
-import { emailAcknowledged } from "../store/actions/onboarding";
-import NavigationService from "../navigation/NavigationService";
-import ROUTES from "../navigation/routes";
-import { getFlowType } from "../utils/analytics";
-import {
-  trackEmailValidation,
-  trackEmailValidationSuccess,
-  trackEmailValidationSuccessConfirmed
-} from "../screens/analytics/emailAnalytics";
-import { IOStyles } from "./core/variables/IOStyles";
-import FooterWithButtons from "./ui/FooterWithButtons";
-import { IOToast } from "./Toast";
-import { LightModalContextInterface } from "./ui/LightModal";
-import { withLightModalContext } from "./helpers/withLightModalContext";
-import BaseScreenComponent from "./screens/BaseScreenComponent";
-
-const emailSentTimeout = 10000 as Millisecond; // 10 seconds
-const profilePolling = 5000 as Millisecond; // 5 seconds
-
-const EMPTY_EMAIL = "";
-const VALIDATION_ILLUSTRATION_WIDTH: IOPictogramSizeScale = 80;
-
-type OwnProp = {
-  isOnboarding?: boolean;
-};
-
-type Props = LightModalContextInterface & OwnProp;
-
-const NewRemindEmailValidationOverlay = (props: Props) => {
-  const { isOnboarding, hideModal } = props;
-  const dispatch = useIODispatch();
-  const optionEmail = useIOSelector(profileEmailSelector);
-  const isEmailValidated = useIOSelector(isProfileEmailValidatedSelector);
-  const emailValidation = useIOSelector(emailValidationSelector);
-
-  const isFirstOnBoarding = useIOSelector(isProfileFirstOnBoardingSelector);
-  const flow = getFlowType(!!isOnboarding, isFirstOnBoarding);
-
-  const [isValidateEmailButtonDisabled, setIsValidateEmailButtonDisabled] =
-    useState(false);
-  const timeout = useRef<number | undefined>();
-  const polling = useRef<number | undefined>();
-
-  const email = pipe(
-    optionEmail,
-    O.getOrElse(() => EMPTY_EMAIL)
-  );
-
-  const sendEmailValidation = useCallback(
-    () => dispatch(startEmailValidation.request()),
-    [dispatch]
-  );
-
-  const acknowledgeEmail = useCallback(
-    () => dispatch(emailAcknowledged()),
-    [dispatch]
-  );
-
-  const reloadProfile = useCallback(
-    () => dispatch(profileLoadRequest()),
-    [dispatch]
-  );
-
-  const dispatchAcknowledgeOnEmailValidation = useCallback(
-    (maybeAcknowledged: O.Option<boolean>) =>
-      dispatch(acknowledgeOnEmailValidation(maybeAcknowledged)),
-    [dispatch]
-  );
-
-  // function to localize the title of the button. If the email is validated and if it is not, whether the confirmation email was sent or not
-  const buttonTitle = () => {
-    if (isEmailValidated) {
-      return I18n.t("global.buttons.continue");
-    } else {
-      if (isValidateEmailButtonDisabled) {
-        return I18n.t("email.newvalidate.buttonlabelsent");
-      } else {
-        return I18n.t("email.newvalidate.buttonlabelsentagain");
-      }
-    }
-  };
-
-  // this function contol if the button is disabled. It is disabled if the email is sent and the timeout is active
-  const isButtonDisabled = () => {
-    if (isEmailValidated) {
-      return false;
-    } else {
-      return isValidateEmailButtonDisabled;
-    }
-  };
-
-  const handleSendEmailValidationButton = () => {
-    if (isEmailValidated) {
-      trackEmailValidationSuccessConfirmed(flow);
-      hideModal();
-      if (isOnboarding) {
-        // if the user is in the onboarding flow and the email il correctly validated,
-        // the email validation flow is finished
-        acknowledgeEmail();
-      } else {
-        if (
-          O.isSome(emailValidation.emailCheckAtStartupFailed) &&
-          emailValidation.emailCheckAtStartupFailed.value
-        ) {
-          acknowledgeEmail();
-          dispatchAcknowledgeOnEmailValidation(O.none);
-          dispatch(setEmailCheckAtStartupFailure(O.none));
-        } else {
-          NavigationService.navigate(ROUTES.PROFILE_NAVIGATOR, {
-            screen: ROUTES.PROFILE_DATA
-          });
-        }
-      }
-    } else {
-      // send email validation only if it exists
-      pipe(
-        optionEmail,
-        O.map(_ => {
-          sendEmailValidation();
-        })
-      );
-    }
-  };
-
-  const navigateToInsertEmail = () => {
-    dispatchAcknowledgeOnEmailValidation(O.none);
-    hideModal();
-  };
-
-  const renderFooter = () => (
-    <FooterWithButtons
-      type={"SingleButton"}
-      leftButton={{
-        testID: "button-test",
-        block: true,
-        bordered: !isEmailValidated,
-        disabled: isButtonDisabled(),
-        onPress: handleSendEmailValidationButton,
-        title: buttonTitle()
-      }}
-    />
-  );
-
-  useEffect(() => {
-    // use polling to get the profile info, to check if the email is valid or not
-    // eslint-disable-next-line functional/immutable-data
-    polling.current = setInterval(() => reloadProfile(), profilePolling);
-    return () => {
-      hideModal();
-      clearTimeout(timeout.current);
-      clearInterval(polling.current);
-    };
-  }, [hideModal, reloadProfile]);
-
-  useEffect(() => {
-    // send validation email KO
-    if (pot.isError(emailValidation.sendEmailValidationRequest)) {
-      IOToast.error(I18n.t("global.actions.retry"));
-      // send validation email OK
-    } else if (pot.isSome(emailValidation.sendEmailValidationRequest)) {
-      IOToast.show(I18n.t("email.newvalidate.toast"));
-      setIsValidateEmailButtonDisabled(true);
-      // eslint-disable-next-line functional/immutable-data
-      timeout.current = setTimeout(() => {
-        setIsValidateEmailButtonDisabled(false);
-      }, emailSentTimeout);
-    }
-  }, [emailValidation.sendEmailValidationRequest]);
-
-  useEffect(() => {
-    if (isEmailValidated) {
-      clearInterval(polling.current);
-      trackEmailValidationSuccess(flow);
-    } else {
-      trackEmailValidation(flow);
-    }
-  }, [flow, isEmailValidated]);
-
-  return (
-    <BaseScreenComponent
-      goBack={false}
-      accessibilityEvents={{ avoidNavigationEventsUsage: true }}
-      contextualHelpMarkdown={{
-        title: "email.validate.title",
-        body: "email.validate.help"
-      }}
-      headerTitle={I18n.t("email.newinsert.header")}
-    >
-      <SafeAreaView style={IOStyles.flex}>
-        <VSpacer size={40} />
-        <VSpacer size={40} />
-        <Content bounces={false} testID="container-test">
-          <View style={IOStyles.selfCenter}>
-            <Pictogram
-              name={"emailValidation"}
-              size={VALIDATION_ILLUSTRATION_WIDTH}
-              color="aqua"
-            />
-          </View>
-          <VSpacer size={16} />
-          <View style={IOStyles.alignCenter}>
-            <Label weight="Bold" testID="title-test">
-              {I18n.t(
-                isEmailValidated
-                  ? "email.newvalidemail.title"
-                  : "email.newvalidate.title"
-              )}
-            </Label>
-          </View>
-          <VSpacer size={16} />
-          <View>
-            <Label
-              weight="Regular"
-              style={{ textAlign: "center" }}
-              testID="subtitle-test"
-            >
-              {I18n.t(
-                isEmailValidated
-                  ? "email.newvalidemail.subtitle"
-                  : "email.newvalidate.subtitle"
-              )}
-            </Label>
-            <Label
-              weight="SemiBold"
-              style={{ textAlign: "center" }}
-              testID="subtitle-test"
-            >
-              {email}.
-            </Label>
-          </View>
-          {!isEmailValidated && (
-            <View style={IOStyles.selfCenter}>
-              <VSpacer size={16} />
-              <LabelLink onPress={navigateToInsertEmail} testID="link-test">
-                {I18n.t("email.newvalidate.link")}
-              </LabelLink>
-              <VSpacer size={8} />
-            </View>
-          )}
-        </Content>
-        {renderFooter()}
-      </SafeAreaView>
-    </BaseScreenComponent>
-  );
-};
-export default withLightModalContext(NewRemindEmailValidationOverlay);
diff --git a/ts/components/Pinpad/KeyPad.tsx b/ts/components/Pinpad/KeyPad.tsx
deleted file mode 100644
index db786793eab..00000000000
--- a/ts/components/Pinpad/KeyPad.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import { ITuple2 } from "@pagopa/ts-commons/lib/tuples";
-import * as E from "fp-ts/lib/Either";
-import { pipe } from "fp-ts/lib/function";
-import { Col, Grid, Row, Text as NBButtonText } from "native-base";
-import * as React from "react";
-import { Platform, StyleSheet, View } from "react-native";
-import {
-  IOColors,
-  IOIconSizeScale,
-  IOIcons,
-  Icon,
-  hexToRgba
-} from "@pagopa/io-app-design-system";
-import { makeFontStyleObject } from "../../theme/fonts";
-import ButtonDefaultOpacity from "../ButtonDefaultOpacity";
-
-// left -> the string to represent as text
-// right -> the icon to represent with name and size
-export type DigitRpr = E.Either<
-  string,
-  { name: IOIcons; size: IOIconSizeScale; accessibilityLabel: string }
->;
-type Digit = ITuple2<DigitRpr, () => void> | undefined;
-
-type Props = Readonly<{
-  digits: ReadonlyArray<ReadonlyArray<Digit>>;
-  buttonType: "primary" | "light";
-  isDisabled: boolean;
-}>;
-
-// it generate buttons width of 56
-const radius = 18;
-const BUTTON_DIAMETER = 56;
-const opaqueButtonBackground = hexToRgba(IOColors.black, 0.1);
-
-const styles = StyleSheet.create({
-  roundButton: {
-    paddingTop: 0,
-    paddingBottom: 0,
-    paddingRight: 0,
-    paddingLeft: 0,
-    marginBottom: 16,
-    alignSelf: "center",
-    justifyContent: "center",
-    width: BUTTON_DIAMETER,
-    height: BUTTON_DIAMETER,
-    borderRadius: BUTTON_DIAMETER / 2,
-    backgroundColor: opaqueButtonBackground
-  },
-  transparent: {
-    backgroundColor: `transparent`
-  },
-  buttonTextBase: {
-    ...makeFontStyleObject(Platform.select, "300"),
-    fontSize: 30,
-    lineHeight: 32,
-    marginBottom: -10
-  },
-  buttonTextLabel: {
-    fontSize: radius - 5
-  },
-  noPadded: {
-    paddingRight: 0
-  }
-});
-
-const renderPinCol = (
-  label: DigitRpr,
-  handler: () => void,
-  style: "digit" | "label",
-  key: string,
-  buttonType: "primary" | "light",
-  isDisabled: boolean
-) => {
-  const buttonStyle =
-    style === "digit"
-      ? styles.roundButton
-      : style === "label"
-      ? [styles.roundButton, styles.transparent]
-      : undefined;
-
-  const accessibilityLabel = pipe(
-    label,
-    E.fold(
-      () => undefined,
-      ic => ic.accessibilityLabel
-    )
-  );
-
-  return (
-    <Col key={key}>
-      <ButtonDefaultOpacity
-        onPress={handler}
-        disabled={isDisabled}
-        style={buttonStyle}
-        block={style === "label"}
-        primary={buttonType === "primary"}
-        unNamed={buttonType === "light"}
-        accessibilityLabel={accessibilityLabel}
-      >
-        {pipe(
-          label,
-          E.fold(
-            l => (
-              <NBButtonText
-                white={style === "label" && buttonType === "primary"}
-                style={[
-                  styles.buttonTextBase,
-                  style === "label" && styles.buttonTextLabel
-                ]}
-              >
-                {l}
-              </NBButtonText>
-            ),
-            ic => (
-              <View style={styles.noPadded}>
-                <Icon
-                  name={ic.name}
-                  size={ic.size}
-                  color={buttonType === "light" ? "blue" : "white"}
-                />
-              </View>
-            )
-          )
-        )}
-      </ButtonDefaultOpacity>
-    </Col>
-  );
-};
-
-const renderPinRow = (
-  digits: ReadonlyArray<Digit>,
-  key: string,
-  buttonType: "primary" | "light",
-  isDisabled: boolean
-) => (
-  <Row key={key}>
-    {digits.map((el, i) =>
-      el ? (
-        renderPinCol(
-          el.e1,
-          el.e2,
-          E.isLeft(el.e1) ? "digit" : "label",
-          `pinpad-digit-${i}`,
-          buttonType,
-          isDisabled
-        )
-      ) : (
-        <Col key={`pinpad-empty-${i}`} />
-      )
-    )}
-  </Row>
-);
-
-/**
- * Renders a virtual key pad.
- *
- * This component is used for typing PINs
- */
-export class KeyPad extends React.PureComponent<Props> {
-  public render() {
-    return (
-      <Grid>
-        {this.props.digits.map((r, i) =>
-          renderPinRow(
-            r,
-            `pinpad-row-${i}`,
-            this.props.buttonType,
-            this.props.isDisabled
-          )
-        )}
-      </Grid>
-    );
-  }
-}
diff --git a/ts/components/Pinpad/index.tsx b/ts/components/Pinpad/index.tsx
deleted file mode 100644
index 0051496c9cc..00000000000
--- a/ts/components/Pinpad/index.tsx
+++ /dev/null
@@ -1,385 +0,0 @@
-import { Tuple2 } from "@pagopa/ts-commons/lib/tuples";
-import { Millisecond } from "@pagopa/ts-commons/lib/units";
-import * as E from "fp-ts/lib/Either";
-import * as NAR from "fp-ts/lib/NonEmptyArray";
-import { debounce, shuffle } from "lodash";
-import * as React from "react";
-import { Alert, StyleSheet, View } from "react-native";
-import { VSpacer } from "@pagopa/io-app-design-system";
-import I18n from "../../i18n";
-import { PinString } from "../../types/PinString";
-import { ComponentProps } from "../../types/react";
-import { BiometricsValidType } from "../../utils/biometrics";
-import { PIN_LENGTH, PIN_LENGTH_SIX } from "../../utils/constants";
-import { ShakeAnimation } from "../animations/ShakeAnimation";
-import { Body } from "../core/typography/Body";
-import { Link } from "../core/typography/Link";
-import { IOStyles } from "../core/variables/IOStyles";
-import { isDevEnv } from "../../utils/environment";
-import { defaultPin } from "../../config";
-import InputPlaceHolder from "./InputPlaceholder";
-import { DigitRpr, KeyPad } from "./KeyPad";
-
-interface Props {
-  activeColor: string;
-  delayOnFailureMillis?: number;
-  clearOnInvalid?: boolean;
-  shufflePad?: boolean;
-  isFingerprintEnabled?: any;
-  isValidatingTask?: boolean;
-  biometryType?: any;
-  compareWithCode?: string;
-  inactiveColor: string;
-  disabled?: boolean;
-  buttonType: ComponentProps<typeof KeyPad>["buttonType"];
-  onFulfill: (code: PinString, isValid: boolean) => void;
-  onCancel?: () => void;
-  onPinResetHandler?: () => void;
-  onFingerPrintReq?: () => void;
-  onDeleteLastDigit?: () => void;
-  remainingAttempts?: number;
-}
-
-interface State {
-  value: string;
-  isDisabled: boolean;
-  pinLength: number;
-  pinPadValues: ReadonlyArray<string>;
-}
-
-const styles = StyleSheet.create({
-  mediumText: {
-    fontSize: 18,
-    lineHeight: 21,
-    textAlign: "center"
-  }
-});
-
-const CANCEL_ICON_WIDTH = 24;
-const ICON_WIDTH = 48;
-const SHAKE_ANIMATION_DURATION = 600 as Millisecond;
-const INPUT_MARGIN = 36;
-
-/**
- * A customized CodeInput component.
- */
-class Pinpad extends React.PureComponent<Props, State> {
-  private onFulfillTimeoutId?: number;
-  private onDelayOnFailureTimeoutId?: number;
-  private shakeAnimationRef = React.createRef<ShakeAnimation>();
-
-  /**
-   * Get the name of the icon (from icon font) to represent depending on
-   * the available biometry functionality available on the device
-   */
-  private getBiometryIconName(
-    biometryPrintableSimpleType: BiometricsValidType
-  ): DigitRpr {
-    switch (biometryPrintableSimpleType) {
-      case "BIOMETRICS":
-      case "TOUCH_ID":
-        return E.right({
-          name: "biomFingerprint",
-          size: ICON_WIDTH,
-          accessibilityLabel: I18n.t(
-            "identification.unlockCode.accessibility.fingerprint"
-          )
-        });
-      case "FACE_ID":
-        return E.right({
-          name: "biomFaceID",
-          size: ICON_WIDTH,
-          accessibilityLabel: I18n.t(
-            "identification.unlockCode.accessibility.faceId"
-          )
-        });
-    }
-  }
-
-  private deleteLastDigit = () => {
-    this.setState(prev => ({
-      value:
-        prev.value.length > 0
-          ? prev.value.slice(0, prev.value.length - 1)
-          : prev.value
-    }));
-    if (this.props.onDeleteLastDigit) {
-      this.props.onDeleteLastDigit();
-    }
-  };
-
-  /**
-   * The pad can be composed by
-   * - strings
-   * - chars
-   * - icons (from icon font): they has to be declared as 'icon:<ICON_NAME>' (width 48) or 'sicon:<ICON_NAME>' (width 17)
-   */
-  private pinPadDigits = (): ComponentProps<typeof KeyPad>["digits"] => {
-    const { pinPadValues } = this.state;
-
-    return [
-      [
-        Tuple2(E.left(pinPadValues[1]), () =>
-          this.handlePinDigit(pinPadValues[1])
-        ),
-        Tuple2(E.left(pinPadValues[2]), () =>
-          this.handlePinDigit(pinPadValues[2])
-        ),
-        Tuple2(E.left(pinPadValues[3]), () =>
-          this.handlePinDigit(pinPadValues[3])
-        )
-      ],
-      [
-        Tuple2(E.left(pinPadValues[4]), () =>
-          this.handlePinDigit(pinPadValues[4])
-        ),
-        Tuple2(E.left(pinPadValues[5]), () =>
-          this.handlePinDigit(pinPadValues[5])
-        ),
-        Tuple2(E.left(pinPadValues[6]), () =>
-          this.handlePinDigit(pinPadValues[6])
-        )
-      ],
-      [
-        Tuple2(E.left(pinPadValues[7]), () =>
-          this.handlePinDigit(pinPadValues[7])
-        ),
-        Tuple2(E.left(pinPadValues[8]), () =>
-          this.handlePinDigit(pinPadValues[8])
-        ),
-        Tuple2(E.left(pinPadValues[9]), () =>
-          this.handlePinDigit(pinPadValues[9])
-        )
-      ],
-      [
-        this.props.isFingerprintEnabled &&
-        this.props.biometryType &&
-        this.props.onFingerPrintReq
-          ? Tuple2(
-              this.getBiometryIconName(this.props.biometryType),
-              this.props.onFingerPrintReq
-            )
-          : undefined,
-        Tuple2(E.left(pinPadValues[0]), () =>
-          this.handlePinDigit(pinPadValues[0])
-        ),
-        Tuple2(
-          E.right({
-            name: "cancel",
-            size: CANCEL_ICON_WIDTH,
-            accessibilityLabel: I18n.t(
-              "identification.unlockCode.accessibility.delete"
-            )
-          }),
-          this.deleteLastDigit
-        )
-      ]
-    ];
-  };
-
-  private confirmResetAlert = () =>
-    Alert.alert(
-      I18n.t("identification.forgetCode.confirmTitle"),
-      I18n.t(
-        this.props.isValidatingTask
-          ? "identification.forgetCode.confirmMsgWithTask"
-          : "identification.forgetCode.confirmMsg"
-      ),
-      [
-        {
-          text: I18n.t("global.buttons.confirm"),
-          style: "default",
-          onPress: this.props.onPinResetHandler
-        },
-        {
-          text: I18n.t("global.buttons.cancel"),
-          style: "cancel"
-        }
-      ],
-      { cancelable: false }
-    );
-
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      value: "",
-      isDisabled: false,
-      pinLength: PIN_LENGTH,
-      pinPadValues: NAR.range(0, 9).map(s => s.toString())
-    };
-  }
-
-  public componentDidMount() {
-    const { pinPadValues } = this.state;
-
-    const pinLength =
-      this.props.compareWithCode !== undefined
-        ? this.props.compareWithCode.length
-        : PIN_LENGTH_SIX;
-
-    // we avoid to shuffle pin/code pad in dev env
-    const newPinPadValue =
-      this.props.shufflePad !== true ? pinPadValues : shuffle(pinPadValues);
-
-    this.setState({
-      pinLength,
-      pinPadValues: newPinPadValue
-    });
-  }
-
-  public componentWillUnmount() {
-    if (this.onFulfillTimeoutId) {
-      clearTimeout(this.onFulfillTimeoutId);
-    } else if (this.onDelayOnFailureTimeoutId) {
-      clearTimeout(this.onDelayOnFailureTimeoutId);
-    }
-  }
-
-  private handleChangeText = (inputValue: string) => {
-    // if the component is disabled don't handle any input
-    if (this.props.disabled) {
-      return;
-    }
-    this.setState({ value: inputValue });
-
-    // Pin/code is fulfilled
-    if (inputValue.length === this.state.pinLength) {
-      const isValid = inputValue === this.props.compareWithCode;
-
-      if (!isValid && this.props.clearOnInvalid) {
-        this.debounceClear();
-        if (this.props.delayOnFailureMillis) {
-          // disable click keypad
-          this.setState({
-            isDisabled: true
-          });
-
-          // re-enable after delayOnFailureMillis milliseconds
-          // eslint-disable-next-line
-          this.onDelayOnFailureTimeoutId = setTimeout(() => {
-            this.setState({
-              isDisabled: false
-            });
-          }, this.props.delayOnFailureMillis);
-          // start animation 'shake'
-          if (this.shakeAnimationRef.current) {
-            this.shakeAnimationRef.current.shake();
-          }
-        }
-      }
-
-      // Fire the callback asynchronously, otherwise this component
-      // will be unmounted before the render of the last bullet placeholder.
-      // eslint-disable-next-line
-      this.onFulfillTimeoutId = setTimeout(() =>
-        this.props.onFulfill(inputValue as PinString, isValid)
-      );
-    }
-  };
-
-  enterDefaultPin = () => {
-    if (!isDevEnv) {
-      return;
-    }
-    this.handleChangeText(defaultPin);
-  };
-
-  private handlePinDigit = (digit: string) =>
-    this.handleChangeText(
-      `${this.state.value}${digit}`.substr(0, this.state.pinLength)
-    );
-
-  public debounceClear = debounce(() => {
-    this.setState({ value: "" });
-  }, 100);
-
-  public render() {
-    return (
-      <React.Fragment>
-        <InputPlaceHolder
-          digits={this.state.pinLength}
-          activeColor={this.props.activeColor}
-          inactiveColor={this.props.inactiveColor}
-          inputValue={this.state.value}
-          customHorizontalMargin={INPUT_MARGIN}
-          accessibilityLabel={I18n.t("identification.unlockCode.reset.code")}
-        />
-        <VSpacer size={16} />
-        {this.props.onPinResetHandler !== undefined && (
-          <React.Fragment>
-            <View style={IOStyles.alignCenter}>
-              {this.props.buttonType === "primary" ? (
-                <Body color={"white"} onPress={this.confirmResetAlert}>
-                  {`${I18n.t("identification.unlockCode.reset.button")} `}
-                  <Link
-                    color={"white"}
-                    accessibilityLabel={I18n.t(
-                      "identification.unlockCode.reset.code"
-                    )}
-                    accessibilityRole="button"
-                  >
-                    {I18n.t("identification.unlockCode.reset.code")}
-                  </Link>
-                  <Body color={"white"}>
-                    {I18n.t("global.symbols.question")}
-                  </Body>
-                </Body>
-              ) : (
-                <Body color={"bluegrey"} onPress={this.confirmResetAlert}>
-                  {`${I18n.t("identification.unlockCode.reset.button")} `}
-                  <Link
-                    color={"bluegrey"}
-                    accessibilityLabel={I18n.t(
-                      "identification.unlockCode.reset.code"
-                    )}
-                    accessibilityRole="button"
-                  >
-                    {I18n.t("identification.unlockCode.reset.code")}
-                  </Link>
-                  <Body color={"bluegrey"}>
-                    {I18n.t("global.symbols.question")}
-                  </Body>
-                </Body>
-              )}
-            </View>
-            <VSpacer size={16} />
-          </React.Fragment>
-        )}
-        <VSpacer size={16} />
-        <ShakeAnimation
-          duration={SHAKE_ANIMATION_DURATION}
-          ref={this.shakeAnimationRef}
-        >
-          <KeyPad
-            digits={this.pinPadDigits()}
-            buttonType={this.props.buttonType}
-            isDisabled={this.state.isDisabled}
-          />
-        </ShakeAnimation>
-
-        {isDevEnv && (
-          <View style={IOStyles.alignCenter}>
-            <VSpacer size={16} />
-            <Link
-              onPress={() => this.enterDefaultPin()}
-              weight="Bold"
-              color="white"
-            >
-              {"Enter default pin (DevEnv Only)"}
-            </Link>
-          </View>
-        )}
-        {this.props.onCancel && (
-          <React.Fragment>
-            <VSpacer size={24} />
-            <Link style={styles.mediumText} onPress={this.props.onCancel}>
-              {I18n.t("global.buttons.cancel")}
-            </Link>
-          </React.Fragment>
-        )}
-      </React.Fragment>
-    );
-  }
-}
-
-export default Pinpad;
diff --git a/ts/components/RemindEmailValidationOverlay.tsx b/ts/components/RemindEmailValidationOverlay.tsx
index 1adf590058d..7ae72d791e7 100644
--- a/ts/components/RemindEmailValidationOverlay.tsx
+++ b/ts/components/RemindEmailValidationOverlay.tsx
@@ -58,7 +58,7 @@ import TouchableDefaultOpacity from "./TouchableDefaultOpacity";
 import BlockButtons from "./ui/BlockButtons";
 import FooterWithButtons from "./ui/FooterWithButtons";
 import { LightModalContextInterface } from "./ui/LightModal";
-import Markdown from "./ui/Markdown";
+import LegacyMarkdown from "./ui/Markdown/LegacyMarkdown";
 
 type OwnProp = {
   isOnboarding?: boolean;
@@ -330,11 +330,13 @@ class RemindEmailValidationOverlay extends React.PureComponent<Props, State> {
               onPress: () => {
                 if (this.props.isOnboarding) {
                   NavigationService.navigate(ROUTES.ONBOARDING, {
-                    screen: ROUTES.ONBOARDING_INSERT_EMAIL_SCREEN
+                    screen: ROUTES.ONBOARDING_INSERT_EMAIL_SCREEN,
+                    params: { isOnboarding: true }
                   });
                 } else {
                   NavigationService.navigate(ROUTES.PROFILE_NAVIGATOR, {
-                    screen: ROUTES.INSERT_EMAIL_SCREEN
+                    screen: ROUTES.INSERT_EMAIL_SCREEN,
+                    params: { isOnboarding: false }
                   });
                 }
               },
@@ -391,14 +393,14 @@ class RemindEmailValidationOverlay extends React.PureComponent<Props, State> {
             <Body weight="SemiBold">{title}</Body>
           </View>
           {!this.state.emailHasBeenValidate ? (
-            <Markdown
+            <LegacyMarkdown
               onLoadEnd={this.handleOnContentLoadEnd}
               cssStyle={MARKDOWN_BODY_STYLE}
             >
               {!this.props.isOnboarding
                 ? I18n.t("email.validate.content2", { email })
                 : I18n.t("email.validate.content1", { email })}
-            </Markdown>
+            </LegacyMarkdown>
           ) : (
             <View
               style={[IOStyles.alignCenter, IOStyles.horizontalContentPadding]}
diff --git a/ts/components/SectionStatus/__tests__/__snapshots__/SectionStatusContent.test.tsx.snap b/ts/components/SectionStatus/__tests__/__snapshots__/SectionStatusContent.test.tsx.snap
index 7f5f8c83c98..c110a6c87a8 100644
--- a/ts/components/SectionStatus/__tests__/__snapshots__/SectionStatusContent.test.tsx.snap
+++ b/ts/components/SectionStatus/__tests__/__snapshots__/SectionStatusContent.test.tsx.snap
@@ -38,7 +38,6 @@ exports[`StatusContent should match the snapshot 1`] = `
       align="xMidYMid"
       bbHeight={24}
       bbWidth={24}
-      color={4279710285}
       focusable={false}
       height={24}
       importantForAccessibility="no-hide-descendants"
@@ -61,18 +60,25 @@ exports[`StatusContent should match the snapshot 1`] = `
           },
         ]
       }
-      tintColor={4279710285}
+      tintColor="#17324D"
       vbHeight={24}
       vbWidth={24}
       width={24}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGPath
           d="M17.752 8.22a1.083 1.083 0 0 0-1.531.028l-5.974 6.192-2.468-2.558-.093-.086a1.083 1.083 0 0 0-1.465 1.589l3.248 3.367.095.087c.43.352 1.068.322 1.463-.087l6.752-7 .083-.096c.328-.431.29-1.05-.11-1.435Z"
           fill={
-            Array [
-              2,
-            ]
+            Object {
+              "type": 2,
+            }
           }
           propList={
             Array [
@@ -84,9 +90,9 @@ exports[`StatusContent should match the snapshot 1`] = `
           clipRule={0}
           d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Z"
           fill={
-            Array [
-              2,
-            ]
+            Object {
+              "type": 2,
+            }
           }
           fillRule={0}
           propList={
@@ -99,9 +105,9 @@ exports[`StatusContent should match the snapshot 1`] = `
         <RNSVGPath
           d="M17.752 8.22a1.083 1.083 0 0 0-1.531.028l-5.974 6.192-2.468-2.558-.093-.086a1.083 1.083 0 0 0-1.465 1.589l3.248 3.367.095.087c.43.352 1.068.322 1.463-.087l6.752-7 .083-.096c.328-.431.29-1.05-.11-1.435Z"
           fill={
-            Array [
-              2,
-            ]
+            Object {
+              "type": 2,
+            }
           }
           propList={
             Array [
@@ -113,9 +119,9 @@ exports[`StatusContent should match the snapshot 1`] = `
           clipRule={0}
           d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Z"
           fill={
-            Array [
-              2,
-            ]
+            Object {
+              "type": 2,
+            }
           }
           fillRule={0}
           propList={
diff --git a/ts/components/Toast/ToastNotification.tsx b/ts/components/Toast/ToastNotification.tsx
deleted file mode 100644
index 3cd875c83b4..00000000000
--- a/ts/components/Toast/ToastNotification.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from "react";
-import { StyleSheet, View } from "react-native";
-import { IOColors, Icon, IOAlertRadius } from "@pagopa/io-app-design-system";
-import { CTA } from "../core/typography/CTA";
-import { Toast, ToastVariant } from "./types";
-
-type ColorVariant = {
-  background: IOColors;
-  stroke: IOColors;
-};
-
-const toastColorVariants: Record<ToastVariant, ColorVariant> = {
-  neutral: {
-    background: "turquoise-150",
-    stroke: "turquoise-850"
-  },
-  error: {
-    background: "error-100",
-    stroke: "error-850"
-  },
-  info: {
-    background: "info-100",
-    stroke: "info-850"
-  },
-  success: {
-    background: "success-100",
-    stroke: "success-850"
-  },
-  warning: {
-    background: "warning-100",
-    stroke: "warning-850"
-  }
-};
-
-type Props = Pick<Toast, "message" | "variant" | "icon">;
-
-const ToastNotification = ({ message, variant = "neutral", icon }: Props) => {
-  const colors = toastColorVariants[variant];
-
-  return (
-    <View
-      style={[
-        styles.toast,
-        {
-          backgroundColor: IOColors[colors.background],
-          borderColor: IOColors[colors.stroke]
-        }
-      ]}
-      accessible={true}
-      accessibilityRole={"alert"}
-      accessibilityLabel={message}
-    >
-      <CTA color={colors.stroke} style={styles.content}>
-        {message}
-      </CTA>
-      {icon && <Icon name={icon} size={24} color={colors.stroke} />}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  toast: {
-    borderRadius: IOAlertRadius,
-    borderWidth: 1,
-    padding: 16,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between"
-  },
-  content: {
-    paddingVertical: 2
-  }
-});
-
-export { ToastNotification };
diff --git a/ts/components/Toast/ToastProvider.tsx b/ts/components/Toast/ToastProvider.tsx
deleted file mode 100644
index 2c96f6bad63..00000000000
--- a/ts/components/Toast/ToastProvider.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import { throttle } from "lodash";
-import React from "react";
-import { SafeAreaView, StyleSheet, View } from "react-native";
-import ReactNativeHapticFeedback from "react-native-haptic-feedback";
-import Animated, {
-  Easing,
-  SequencedTransition,
-  SlideInUp,
-  SlideOutUp
-} from "react-native-reanimated";
-import { Dismissable } from "../ui/Dismissable";
-import { ToastNotification } from "./ToastNotification";
-import { Toast } from "./types";
-import { IOToastRef, useIOToast } from "./useIOToast";
-import { ToastContext } from "./context";
-
-/**
- * The maximum number of toasts that can be displayed at the same time
- * If the number of the toasts exceeds this number, the oldest one will be removed
- */
-export const MAX_TOAST_STACK_SIZE = 3;
-
-/**
- * The time in milliseconds that a toast notification will be displayed
- */
-export const TOAST_DURATION_TIME = 5000;
-
-/**
- * This is the time in milliseconds between two toast notifications.
- * This will throttle the toast notifications to avoid displaying too many of them at the same time
- * and causing visual glitches.
- */
-export const TOAST_THROTTLE_TIME = 500;
-
-type ToastNotificationStackItem = Toast & { id: number };
-type ToastNotificationStackItemProps = ToastNotificationStackItem &
-  Pick<Dismissable, "onDismiss">;
-
-/**
- * A toast notification item that can be swiped to the right to dismiss it, with enter and exit animations
- */
-const ToastNotificationStackItem = ({
-  onDismiss,
-  ...toast
-}: ToastNotificationStackItemProps) => (
-  <Animated.View
-    entering={SlideInUp.duration(300).easing(Easing.inOut(Easing.exp))}
-    exiting={SlideOutUp.duration(300).easing(Easing.inOut(Easing.exp))}
-    layout={SequencedTransition.duration(300)}
-    style={{ paddingBottom: 8 }}
-  >
-    <Dismissable onDismiss={onDismiss}>
-      <ToastNotification {...toast} />
-    </Dismissable>
-  </Animated.View>
-);
-
-type ToastProviderProps = {
-  children: React.ReactNode;
-};
-
-export const ToastProvider = ({ children }: ToastProviderProps) => {
-  const toastId = React.useRef(1);
-  const [toasts, setToasts] = React.useState<
-    ReadonlyArray<ToastNotificationStackItem>
-  >([]);
-
-  const addToast = React.useCallback((toast: Toast): number => {
-    // eslint-disable-next-line functional/immutable-data
-    const id = toastId.current++;
-    setToasts(prevToasts => [{ id, ...toast }, ...prevToasts]);
-
-    setTimeout(() => {
-      setToasts(prevToasts => prevToasts.filter(t => t.id !== id));
-    }, TOAST_DURATION_TIME);
-
-    if (toast.hapticFeedback) {
-      ReactNativeHapticFeedback.trigger(toast.hapticFeedback);
-    }
-
-    return id;
-  }, []);
-
-  const removeToast = React.useCallback((id: number) => {
-    setToasts(prevToasts => prevToasts.filter(t => t.id !== id));
-  }, []);
-
-  const removeToastAtIndex = (index: number) => {
-    setToasts(prevToasts => [
-      ...prevToasts.slice(0, index),
-      ...prevToasts.slice(index + 1)
-    ]);
-  };
-
-  // If stack size exceed the maximum, remove the oldest toast
-  React.useEffect(() => {
-    if (toasts.length > MAX_TOAST_STACK_SIZE) {
-      removeToastAtIndex(MAX_TOAST_STACK_SIZE);
-    }
-  }, [toasts]);
-
-  const removeAllToasts = React.useCallback(() => {
-    setToasts([]);
-  }, []);
-
-  const contextValue = React.useMemo(
-    () => ({
-      addToast: throttle(addToast, TOAST_THROTTLE_TIME),
-      removeToast: throttle(removeToast, TOAST_THROTTLE_TIME),
-      removeAllToasts
-    }),
-    [addToast, removeToast, removeAllToasts]
-  );
-
-  return (
-    <ToastContext.Provider value={contextValue}>
-      <InitializeToastRef />
-      <SafeAreaView style={styles.container} pointerEvents="box-none">
-        <View style={styles.list} pointerEvents="box-none">
-          {toasts.map(toast => (
-            <ToastNotificationStackItem
-              key={toast.id}
-              {...toast}
-              onDismiss={() => removeToast(toast.id)}
-            />
-          ))}
-        </View>
-      </SafeAreaView>
-      {children}
-    </ToastContext.Provider>
-  );
-};
-
-const InitializeToastRef = () => {
-  const toast = useIOToast();
-  // eslint-disable-next-line functional/immutable-data
-  IOToastRef.current = toast;
-  return null;
-};
-
-const styles = StyleSheet.create({
-  container: {
-    zIndex: 1000,
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
-    top: 0,
-    overflow: "visible"
-  },
-  list: {
-    padding: 24
-  }
-});
diff --git a/ts/components/Toast/__tests__/ToastNotification.test.tsx b/ts/components/Toast/__tests__/ToastNotification.test.tsx
deleted file mode 100644
index 1a081a6d50b..00000000000
--- a/ts/components/Toast/__tests__/ToastNotification.test.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { render } from "@testing-library/react-native";
-import React from "react";
-import { ToastNotification } from "../ToastNotification";
-import { Toast } from "../types";
-
-describe("Test ToastNotification component", () => {
-  it.each<Toast>([
-    { message: "Hello", icon: "checkTick" },
-    { message: "Hello", variant: "error" },
-    { message: "Hello", variant: "info" },
-    { message: "Hello", variant: "neutral" },
-    { message: "Hello", variant: "success" },
-    { message: "Hello", variant: "warning" }
-  ])("should match snapshot for props (%s)", toast => {
-    const component = render(<ToastNotification {...toast} />);
-    expect(component).toMatchSnapshot();
-  });
-});
diff --git a/ts/components/Toast/__tests__/__snapshots__/ToastNotification.test.tsx.snap b/ts/components/Toast/__tests__/__snapshots__/ToastNotification.test.tsx.snap
deleted file mode 100644
index bcd5152bf21..00000000000
--- a/ts/components/Toast/__tests__/__snapshots__/ToastNotification.test.tsx.snap
+++ /dev/null
@@ -1,397 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Test ToastNotification component should match snapshot for props ({ message: 'Hello', icon: 'checkTick' }) 1`] = `
-<View
-  accessibilityLabel="Hello"
-  accessibilityRole="alert"
-  accessible={true}
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "borderRadius": 8,
-        "borderWidth": 1,
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "padding": 16,
-      },
-      Object {
-        "backgroundColor": "#AAEEEF",
-        "borderColor": "#003B3D",
-      },
-    ]
-  }
->
-  <Text
-    color="turquoise-850"
-    defaultColor="black"
-    defaultWeight="Regular"
-    font="ReadexPro"
-    fontStyle={
-      Object {
-        "fontSize": 16,
-        "lineHeight": 20,
-      }
-    }
-    style={
-      Array [
-        Object {
-          "paddingVertical": 2,
-        },
-        Object {
-          "fontSize": 16,
-          "lineHeight": 20,
-        },
-        Object {
-          "color": "#003B3D",
-          "fontFamily": "Readex Pro",
-          "fontStyle": "normal",
-          "fontWeight": "400",
-        },
-      ]
-    }
-    weight="Regular"
-  >
-    Hello
-  </Text>
-  <RNSVGSvgView
-    accessibilityElementsHidden={true}
-    accessibilityLabel=""
-    accessible={false}
-    align="xMidYMid"
-    bbHeight={24}
-    bbWidth={24}
-    color={4278205245}
-    focusable={false}
-    height={24}
-    importantForAccessibility="no-hide-descendants"
-    meetOrSlice={0}
-    minX={0}
-    minY={0}
-    style={
-      Array [
-        Object {
-          "backgroundColor": "transparent",
-          "borderWidth": 0,
-        },
-        Object {
-          "color": "#003B3D",
-        },
-        Object {
-          "flex": 0,
-          "height": 24,
-          "width": 24,
-        },
-      ]
-    }
-    tintColor={4278205245}
-    vbHeight={24}
-    vbWidth={24}
-    width={24}
-  >
-    <RNSVGGroup>
-      <RNSVGPath
-        clipRule={0}
-        d="M17.7071 9.29289C18.0976 9.68342 18.0976 10.3166 17.7071 10.7071L11.4142 17C10.6332 17.781 9.36684 17.7811 8.58579 17L5.29289 13.7071C4.90237 13.3166 4.90237 12.6834 5.29289 12.2929C5.68342 11.9024 6.31658 11.9024 6.70711 12.2929L10 15.5858L16.2929 9.29289C16.6834 8.90237 17.3166 8.90237 17.7071 9.29289Z"
-        fill={
-          Array [
-            2,
-          ]
-        }
-        fillRule={0}
-        propList={
-          Array [
-            "fill",
-            "fillRule",
-          ]
-        }
-      />
-    </RNSVGGroup>
-  </RNSVGSvgView>
-</View>
-`;
-
-exports[`Test ToastNotification component should match snapshot for props ({ message: 'Hello', variant: 'error' }) 1`] = `
-<View
-  accessibilityLabel="Hello"
-  accessibilityRole="alert"
-  accessible={true}
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "borderRadius": 8,
-        "borderWidth": 1,
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "padding": 16,
-      },
-      Object {
-        "backgroundColor": "#FFE0E0",
-        "borderColor": "#761F1F",
-      },
-    ]
-  }
->
-  <Text
-    color="error-850"
-    defaultColor="black"
-    defaultWeight="Regular"
-    font="ReadexPro"
-    fontStyle={
-      Object {
-        "fontSize": 16,
-        "lineHeight": 20,
-      }
-    }
-    style={
-      Array [
-        Object {
-          "paddingVertical": 2,
-        },
-        Object {
-          "fontSize": 16,
-          "lineHeight": 20,
-        },
-        Object {
-          "color": "#761F1F",
-          "fontFamily": "Readex Pro",
-          "fontStyle": "normal",
-          "fontWeight": "400",
-        },
-      ]
-    }
-    weight="Regular"
-  >
-    Hello
-  </Text>
-</View>
-`;
-
-exports[`Test ToastNotification component should match snapshot for props ({ message: 'Hello', variant: 'info' }) 1`] = `
-<View
-  accessibilityLabel="Hello"
-  accessibilityRole="alert"
-  accessible={true}
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "borderRadius": 8,
-        "borderWidth": 1,
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "padding": 16,
-      },
-      Object {
-        "backgroundColor": "#E1F5FE",
-        "borderColor": "#215C76",
-      },
-    ]
-  }
->
-  <Text
-    color="info-850"
-    defaultColor="black"
-    defaultWeight="Regular"
-    font="ReadexPro"
-    fontStyle={
-      Object {
-        "fontSize": 16,
-        "lineHeight": 20,
-      }
-    }
-    style={
-      Array [
-        Object {
-          "paddingVertical": 2,
-        },
-        Object {
-          "fontSize": 16,
-          "lineHeight": 20,
-        },
-        Object {
-          "color": "#215C76",
-          "fontFamily": "Readex Pro",
-          "fontStyle": "normal",
-          "fontWeight": "400",
-        },
-      ]
-    }
-    weight="Regular"
-  >
-    Hello
-  </Text>
-</View>
-`;
-
-exports[`Test ToastNotification component should match snapshot for props ({ message: 'Hello', variant: 'neutral' }) 1`] = `
-<View
-  accessibilityLabel="Hello"
-  accessibilityRole="alert"
-  accessible={true}
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "borderRadius": 8,
-        "borderWidth": 1,
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "padding": 16,
-      },
-      Object {
-        "backgroundColor": "#AAEEEF",
-        "borderColor": "#003B3D",
-      },
-    ]
-  }
->
-  <Text
-    color="turquoise-850"
-    defaultColor="black"
-    defaultWeight="Regular"
-    font="ReadexPro"
-    fontStyle={
-      Object {
-        "fontSize": 16,
-        "lineHeight": 20,
-      }
-    }
-    style={
-      Array [
-        Object {
-          "paddingVertical": 2,
-        },
-        Object {
-          "fontSize": 16,
-          "lineHeight": 20,
-        },
-        Object {
-          "color": "#003B3D",
-          "fontFamily": "Readex Pro",
-          "fontStyle": "normal",
-          "fontWeight": "400",
-        },
-      ]
-    }
-    weight="Regular"
-  >
-    Hello
-  </Text>
-</View>
-`;
-
-exports[`Test ToastNotification component should match snapshot for props ({ message: 'Hello', variant: 'success' }) 1`] = `
-<View
-  accessibilityLabel="Hello"
-  accessibilityRole="alert"
-  accessible={true}
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "borderRadius": 8,
-        "borderWidth": 1,
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "padding": 16,
-      },
-      Object {
-        "backgroundColor": "#E1F4E1",
-        "borderColor": "#224021",
-      },
-    ]
-  }
->
-  <Text
-    color="success-850"
-    defaultColor="black"
-    defaultWeight="Regular"
-    font="ReadexPro"
-    fontStyle={
-      Object {
-        "fontSize": 16,
-        "lineHeight": 20,
-      }
-    }
-    style={
-      Array [
-        Object {
-          "paddingVertical": 2,
-        },
-        Object {
-          "fontSize": 16,
-          "lineHeight": 20,
-        },
-        Object {
-          "color": "#224021",
-          "fontFamily": "Readex Pro",
-          "fontStyle": "normal",
-          "fontWeight": "400",
-        },
-      ]
-    }
-    weight="Regular"
-  >
-    Hello
-  </Text>
-</View>
-`;
-
-exports[`Test ToastNotification component should match snapshot for props ({ message: 'Hello', variant: 'warning' }) 1`] = `
-<View
-  accessibilityLabel="Hello"
-  accessibilityRole="alert"
-  accessible={true}
-  style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "borderRadius": 8,
-        "borderWidth": 1,
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "padding": 16,
-      },
-      Object {
-        "backgroundColor": "#FFF5DA",
-        "borderColor": "#614C15",
-      },
-    ]
-  }
->
-  <Text
-    color="warning-850"
-    defaultColor="black"
-    defaultWeight="Regular"
-    font="ReadexPro"
-    fontStyle={
-      Object {
-        "fontSize": 16,
-        "lineHeight": 20,
-      }
-    }
-    style={
-      Array [
-        Object {
-          "paddingVertical": 2,
-        },
-        Object {
-          "fontSize": 16,
-          "lineHeight": 20,
-        },
-        Object {
-          "color": "#614C15",
-          "fontFamily": "Readex Pro",
-          "fontStyle": "normal",
-          "fontWeight": "400",
-        },
-      ]
-    }
-    weight="Regular"
-  >
-    Hello
-  </Text>
-</View>
-`;
diff --git a/ts/components/Toast/context.ts b/ts/components/Toast/context.ts
deleted file mode 100644
index 66c24e437f8..00000000000
--- a/ts/components/Toast/context.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createContext } from "react";
-import { Toast } from "./types";
-
-export type ToastContext = {
-  addToast: (props: Toast) => number;
-  removeToast: (id: number) => void;
-  removeAllToasts: () => void;
-};
-
-export const ToastContext = createContext<ToastContext>({
-  addToast: () => 0,
-  removeToast: () => undefined,
-  removeAllToasts: () => undefined
-});
diff --git a/ts/components/Toast/index.ts b/ts/components/Toast/index.ts
deleted file mode 100644
index d1ce3b6d83a..00000000000
--- a/ts/components/Toast/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./ToastNotification";
-export * from "./ToastProvider";
-export * from "./useIOToast";
diff --git a/ts/components/Toast/types.ts b/ts/components/Toast/types.ts
deleted file mode 100644
index a66e0dd7be4..00000000000
--- a/ts/components/Toast/types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { HapticFeedbackTypes } from "react-native-haptic-feedback";
-import { IOIcons } from "@pagopa/io-app-design-system";
-
-export type ToastVariant = "neutral" | "error" | "info" | "success" | "warning";
-
-export type Toast = {
-  message: string;
-  variant?: ToastVariant;
-  icon?: IOIcons;
-  hapticFeedback?: keyof typeof HapticFeedbackTypes;
-};
-
-export type ToastOptions = Omit<Toast, "message">;
diff --git a/ts/components/Toast/useIOToast.ts b/ts/components/Toast/useIOToast.ts
deleted file mode 100644
index 47828d927ef..00000000000
--- a/ts/components/Toast/useIOToast.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import React, { MutableRefObject } from "react";
-import { ToastOptions } from "./types";
-import { ToastContext } from "./context";
-
-export const useIOToast = () => {
-  const { addToast, removeToast, removeAllToasts } =
-    React.useContext(ToastContext);
-
-  const show = React.useCallback(
-    (message: string, options?: ToastOptions) => {
-      addToast({ message, ...options });
-    },
-    [addToast]
-  );
-
-  const error = React.useCallback(
-    (message: string) => {
-      show(message, {
-        variant: "error",
-        icon: "errorFilled",
-        hapticFeedback: "notificationError"
-      });
-    },
-    [show]
-  );
-
-  const info = React.useCallback(
-    (message: string) => {
-      show(message, {
-        variant: "info",
-        icon: "infoFilled",
-        hapticFeedback: "impactMedium"
-      });
-    },
-    [show]
-  );
-
-  const success = React.useCallback(
-    (message: string) => {
-      show(message, {
-        variant: "success",
-        icon: "success",
-        hapticFeedback: "notificationSuccess"
-      });
-    },
-    [show]
-  );
-
-  const warning = React.useCallback(
-    (message: string) => {
-      show(message, {
-        variant: "warning",
-        icon: "warningFilled",
-        hapticFeedback: "notificationWarning"
-      });
-    },
-    [show]
-  );
-
-  return React.useMemo(
-    () => ({
-      show,
-      error,
-      info,
-      success,
-      warning,
-      hide: removeToast,
-      hideAll: removeAllToasts
-    }),
-    [show, error, info, success, warning, removeToast, removeAllToasts]
-  );
-};
-
-export type IOToast = ReturnType<typeof useIOToast>;
-
-export const IOToastRef =
-  React.createRef<IOToast>() as MutableRefObject<IOToast>;
-
-export const IOToast: IOToast = {
-  show: (message: string, options?: ToastOptions) =>
-    IOToastRef.current?.show(message, options),
-  error: (message: string) => IOToastRef.current?.error(message),
-  warning: (message: string) => IOToastRef.current?.warning(message),
-  success: (message: string) => IOToastRef.current?.success(message),
-  info: (message: string) => IOToastRef.current?.info(message),
-  hideAll: () => IOToastRef.current?.hideAll(),
-  hide: (id: number) => IOToastRef.current?.hide(id)
-};
diff --git a/ts/components/__tests__/NewRemindEmailValidationOverlay.test.tsx b/ts/components/__tests__/NewRemindEmailValidationOverlay.test.tsx
deleted file mode 100644
index ae771f78bd3..00000000000
--- a/ts/components/__tests__/NewRemindEmailValidationOverlay.test.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import * as pot from "@pagopa/ts-commons/lib/pot";
-import configureMockStore from "redux-mock-store";
-import { fireEvent } from "@testing-library/react-native";
-import I18n from "../../i18n";
-
-import NewRemindEmailValidationOverlay from "../NewRemindEmailValidationOverlay";
-import { appReducer } from "../../store/reducers";
-import { applicationChangeState } from "../../store/actions/application";
-import { renderScreenWithNavigationStoreContext } from "../../utils/testWrapper";
-import { ServicesPreferencesModeEnum } from "../../../definitions/backend/ServicesPreferencesMode";
-
-describe("NewRemindEmailValidationOverlay with isEmailValidated as true", () => {
-  const globalState = appReducer(undefined, applicationChangeState("active"));
-  const mockStore = configureMockStore();
-
-  // eslint-disable-next-line functional/no-let
-  let finalState: ReturnType<typeof mockStore>;
-  beforeAll(() => {
-    finalState = mockStore({
-      ...globalState,
-      profile: pot.some({
-        service_preferences_settings: {
-          mode: ServicesPreferencesModeEnum.AUTO
-        },
-        is_email_validated: true,
-        email: "prova.prova@prova.com"
-      })
-    });
-  });
-
-  it("the components into the page should be render correctly", async () => {
-    const component = renderComponent(finalState);
-    expect(component).toBeDefined();
-    expect(component.getByTestId("container-test")).not.toBeNull();
-    expect(component.getByTestId("title-test")).toBeDefined();
-    expect(
-      component.getByText(I18n.t("email.newvalidemail.title"))
-    ).toBeTruthy();
-    expect(
-      component.getByText(I18n.t("email.newvalidemail.subtitle"))
-    ).toBeTruthy();
-    const button = component.getByTestId("button-test");
-    expect(button).toBeDefined();
-    expect(component.getByText(I18n.t("global.buttons.continue"))).toBeTruthy();
-    expect(button).not.toBeDisabled();
-    if (button) {
-      fireEvent.press(button);
-    }
-  });
-});
-
-describe("NewRemindEmailValidationOverlay with isEmailValidated as false", () => {
-  const globalState = appReducer(undefined, applicationChangeState("active"));
-  const mockStore = configureMockStore();
-
-  // eslint-disable-next-line functional/no-let
-  let finalState: ReturnType<typeof mockStore>;
-
-  beforeAll(() => {
-    finalState = mockStore({
-      ...globalState,
-      profile: pot.some({
-        service_preferences_settings: {
-          mode: ServicesPreferencesModeEnum.AUTO
-        },
-        is_email_validated: false,
-        email: "prova.prova@prova.com"
-      })
-    });
-  });
-
-  it("the components into the page should be render correctly", async () => {
-    const component = renderComponent(finalState);
-    expect(component).toBeDefined();
-    expect(component.getByTestId("container-test")).not.toBeNull();
-    expect(component.getByTestId("title-test")).toBeDefined();
-    expect(component.getByText(I18n.t("email.newvalidate.title"))).toBeTruthy();
-    expect(
-      component.getByText(I18n.t("email.newvalidate.subtitle"))
-    ).toBeTruthy();
-    expect(component.getByTestId("link-test")).toBeDefined();
-    const button = component.getByTestId("button-test");
-    expect(button).toBeDefined();
-    expect(
-      component.getByText(I18n.t("email.newvalidate.buttonlabelsentagain"))
-    ).toBeTruthy();
-    expect(button).not.toBeDisabled();
-    if (button) {
-      fireEvent.press(button);
-    }
-
-    setTimeout(() => {
-      expect(
-        component.getByText(I18n.t("email.newvalidate.buttonlabelsentagain"))
-      ).not.toBeDisabled();
-    }, 10000);
-  });
-});
-
-const renderComponent = (globalStateProp?: any) =>
-  renderScreenWithNavigationStoreContext(
-    NewRemindEmailValidationOverlay,
-    "DUMMY",
-    {},
-    globalStateProp
-  );
diff --git a/ts/components/__tests__/__snapshots__/LoadingSpinnerOverlay.test.tsx.snap b/ts/components/__tests__/__snapshots__/LoadingSpinnerOverlay.test.tsx.snap
index 5f42ae771f3..3c8c2f69eb6 100644
--- a/ts/components/__tests__/__snapshots__/LoadingSpinnerOverlay.test.tsx.snap
+++ b/ts/components/__tests__/__snapshots__/LoadingSpinnerOverlay.test.tsx.snap
@@ -140,6 +140,12 @@ exports[`LoadingSpinnerOverlay Should match all-properties and loading snapshot
                 />
               </RNSVGDefs>
               <RNSVGGroup
+                fill={
+                  Object {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
                 propList={
                   Array [
                     "strokeWidth",
@@ -149,41 +155,64 @@ exports[`LoadingSpinnerOverlay Should match all-properties and loading snapshot
               >
                 <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={
-                    Array [
-                      1,
-                      "spinner-secondHalf",
-                    ]
+                    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={
-                    Array [
-                      1,
-                      "spinner-firstHalf",
-                    ]
+                    Object {
+                      "brushRef": "spinner-firstHalf",
+                      "type": 1,
+                    }
                   }
                 />
                 <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",
                       "strokeLinecap",
                     ]
                   }
-                  stroke={4278927075}
+                  stroke={
+                    Object {
+                      "payload": 4278927075,
+                      "type": 0,
+                    }
+                  }
                   strokeLinecap={1}
                 />
               </RNSVGGroup>
@@ -303,8 +332,11 @@ exports[`LoadingSpinnerOverlay Should match all-properties and loading snapshot
             }
           >
             <Text
+              accessibilityElementsHidden={true}
+              accessible={false}
               allowFontScaling={false}
               ellipsizeMode="tail"
+              importantForAccessibility="no-hide-descendants"
               maxFontSizeMultiplier={1.3}
               numberOfLines={1}
               style={
@@ -520,6 +552,12 @@ exports[`LoadingSpinnerOverlay Should match base loading snapshot 1`] = `
                 />
               </RNSVGDefs>
               <RNSVGGroup
+                fill={
+                  Object {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
                 propList={
                   Array [
                     "strokeWidth",
@@ -529,41 +567,64 @@ exports[`LoadingSpinnerOverlay Should match base loading snapshot 1`] = `
               >
                 <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={
-                    Array [
-                      1,
-                      "spinner-secondHalf",
-                    ]
+                    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={
-                    Array [
-                      1,
-                      "spinner-firstHalf",
-                    ]
+                    Object {
+                      "brushRef": "spinner-firstHalf",
+                      "type": 1,
+                    }
                   }
                 />
                 <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",
                       "strokeLinecap",
                     ]
                   }
-                  stroke={4278927075}
+                  stroke={
+                    Object {
+                      "payload": 4278927075,
+                      "type": 0,
+                    }
+                  }
                   strokeLinecap={1}
                 />
               </RNSVGGroup>
diff --git a/ts/components/animations/ShakeAnimation.tsx b/ts/components/animations/ShakeAnimation.tsx
deleted file mode 100644
index 0c7383b50b8..00000000000
--- a/ts/components/animations/ShakeAnimation.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as React from "react";
-import { Animated, Easing } from "react-native";
-
-type Props = Readonly<{
-  duration: number;
-}>;
-/**
- *
- * This component create a custom animation called 'shake'
- */
-export class ShakeAnimation extends React.PureComponent<Props> {
-  private animatedValue: Animated.Value;
-
-  constructor(props: Props) {
-    super(props);
-    this.animatedValue = new Animated.Value(0);
-  }
-
-  public shake = () => {
-    this.animatedValue.setValue(0);
-    // start animation
-    Animated.timing(this.animatedValue, {
-      toValue: 1,
-      duration: this.props.duration,
-      useNativeDriver: true,
-      easing: Easing.ease
-    }).start();
-  };
-
-  public render() {
-    // animation interpolate from left to right and the other way around
-    const shaker = this.animatedValue.interpolate({
-      inputRange: [0, 0.2, 0.4, 0.6, 0.8, 0.9, 1],
-      outputRange: [0, -10, 10, -10, 10, -10, 0]
-    });
-    return (
-      <Animated.View
-        style={{
-          transform: [
-            {
-              translateX: shaker
-            }
-          ]
-        }}
-      >
-        {this.props.children}
-      </Animated.View>
-    );
-  }
-}
diff --git a/ts/components/bottomSheet/AccessibilityContent.tsx b/ts/components/bottomSheet/AccessibilityContent.tsx
deleted file mode 100644
index 32dc84020e6..00000000000
--- a/ts/components/bottomSheet/AccessibilityContent.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from "react";
-import { View, Modal } from "react-native";
-import { VSpacer } from "@pagopa/io-app-design-system";
-import { IOStyles } from "../core/variables/IOStyles";
-
-type Props = {
-  header: React.ReactNode;
-  content: React.ReactNode;
-};
-/**
- * Accessibility version of a BottomSheet including a header and it's content
- * @param header
- * @param content
- */
-export const AccessibilityContent = ({ header, content }: Props) => (
-  <Modal>
-    <VSpacer size={40} />
-    {header}
-    <View style={IOStyles.horizontalContentPadding}>{content}</View>
-  </Modal>
-);
diff --git a/ts/components/bottomSheet/BlurredBackgroundComponent.tsx b/ts/components/bottomSheet/BlurredBackgroundComponent.tsx
deleted file mode 100644
index 67118c7fffe..00000000000
--- a/ts/components/bottomSheet/BlurredBackgroundComponent.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from "react";
-import { StyleSheet } from "react-native";
-import { IOColors, hexToRgba } from "@pagopa/io-app-design-system";
-import TouchableDefaultOpacity from "../TouchableDefaultOpacity";
-
-const opaqueBgColor = hexToRgba(IOColors.black, 0.2);
-
-/**
- * Simple component used as background when the bottom sheet pops up to blur the background and demands its closing when tapping on it
- * @param onPress
- */
-export const BlurredBackgroundComponent = (onPress: () => void) => (
-  <TouchableDefaultOpacity
-    accessible={true}
-    onPress={onPress}
-    style={{
-      ...StyleSheet.absoluteFillObject,
-      overflow: "hidden",
-      backgroundColor: opaqueBgColor
-    }}
-  />
-);
diff --git a/ts/components/cie/CieNotSupported.tsx b/ts/components/cie/CieNotSupported.tsx
index f354fc433b1..1073298d317 100644
--- a/ts/components/cie/CieNotSupported.tsx
+++ b/ts/components/cie/CieNotSupported.tsx
@@ -1,80 +1,96 @@
-import { List, ListItem } from "native-base";
-import * as React from "react";
-import { useState } from "react";
+/* eslint-disable no-console */
+import React, { useRef } from "react";
 import { Platform, View } from "react-native";
 import {
-  IOColors,
-  IOIcons,
-  Icon,
-  HSpacer,
+  Alert,
+  Body,
+  ContentWrapper,
+  FeatureInfo,
+  GradientScrollView,
+  H3,
+  IOStyles,
+  Pictogram,
   VSpacer
 } from "@pagopa/io-app-design-system";
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { useFocusEffect, useNavigation } from "@react-navigation/native";
 import I18n from "../../i18n";
-import Markdown from "../ui/Markdown";
-import { Body } from "../core/typography/Body";
+import { useIOSelector } from "../../store/hooks";
+import {
+  hasApiLevelSupportSelector,
+  hasNFCFeatureSelector
+} from "../../store/reducers/cie";
+import { setAccessibilityFocus } from "../../utils/accessibility";
 
-type Props = {
-  hasCieApiLevelSupport: boolean;
-  hasCieNFCFeature: boolean;
-};
+const CieNotSupported = () => {
+  const hasApiLevelSupport = useIOSelector(hasApiLevelSupportSelector);
+  const hasCieApiLevelSupport = pot.getOrElse(hasApiLevelSupport, false);
+  const hasNFCFeature = useIOSelector(hasNFCFeatureSelector);
+  const hasCieNFCFeature = pot.getOrElse(hasNFCFeature, false);
+  const accessibilityFirstFocuseViewRef = useRef<View>(null);
+  const navigation = useNavigation();
 
-const ICON_SIZE = 24;
-const okColor: IOColors = "green";
-const koColor: IOColors = "red";
-const okIcon: IOIcons = "ok";
-const koIcon: IOIcons = "errorFilled";
-const markDownElements = 2;
-const CieNotSupported: React.FunctionComponent<Props> = props => {
-  const [markdownLoaded, setMarkdownLoaded] = useState(0);
-  const handleMarkdownLoaded = () => setMarkdownLoaded(s => s + 1);
-  return (
-    <React.Fragment>
-      <Markdown onLoadEnd={handleMarkdownLoaded}>
-        {I18n.t("authentication.landing.cie_unsupported.body")}
-      </Markdown>
+  useFocusEffect(() => setAccessibilityFocus(accessibilityFirstFocuseViewRef));
 
-      {Platform.OS === "android" && (
-        <React.Fragment>
-          <VSpacer size={16} />
-          <Markdown onLoadEnd={handleMarkdownLoaded}>
-            {I18n.t("authentication.landing.cie_unsupported.android_desc")}
-          </Markdown>
-          <VSpacer size={40} />
-          {markdownLoaded === markDownElements && (
-            <List>
-              <ListItem>
-                <Icon
-                  size={ICON_SIZE}
-                  name={props.hasCieApiLevelSupport ? okIcon : koIcon}
-                  color={props.hasCieApiLevelSupport ? okColor : koColor}
-                />
-                <HSpacer size={8} />
-                <Body>
-                  {I18n.t(
-                    "authentication.landing.cie_unsupported.os_version_unsupported"
-                  )}
-                </Body>
-              </ListItem>
-              <ListItem>
-                <View style={{ alignItems: "flex-start" }}>
-                  <Icon
-                    size={ICON_SIZE}
-                    name={props.hasCieNFCFeature ? okIcon : koIcon}
-                    color={props.hasCieNFCFeature ? okColor : koColor}
-                  />
-                </View>
-                <HSpacer size={8} />
-                <Body>
-                  {I18n.t(
-                    "authentication.landing.cie_unsupported.nfc_incompatible"
-                  )}
-                </Body>
-              </ListItem>
-            </List>
-          )}
-        </React.Fragment>
-      )}
-    </React.Fragment>
+  return (
+    <GradientScrollView
+      testID="container-test"
+      primaryActionProps={{
+        label: I18n.t("authentication.landing.cie_unsupported.button"),
+        accessibilityLabel: I18n.t(
+          "authentication.landing.cie_unsupported.button"
+        ),
+        onPress: () => navigation.goBack(),
+        testID: "close-button"
+      }}
+    >
+      <ContentWrapper>
+        <View style={IOStyles.selfCenter} testID="pictogram-test">
+          <Pictogram name="updateOS" size={120} />
+        </View>
+        <VSpacer size={24} />
+        <View accessible={true} ref={accessibilityFirstFocuseViewRef}>
+          <H3
+            accessible={true}
+            style={{ textAlign: "center", alignItems: "center" }}
+            testID="title-test"
+          >
+            {I18n.t("authentication.landing.cie_unsupported.title")}
+          </H3>
+        </View>
+        <VSpacer size={24} />
+        <Body style={[IOStyles.selfCenter, { textAlign: "center" }]}>
+          {I18n.t("authentication.landing.cie_unsupported.body")}
+        </Body>
+        <VSpacer size={24} />
+        <FeatureInfo
+          iconName="contactless"
+          body={I18n.t("authentication.landing.cie_unsupported.nfc_problem")}
+        />
+        <VSpacer size={24} />
+        <FeatureInfo
+          iconName="history"
+          body={I18n.t("authentication.landing.cie_unsupported.os_problem")}
+        />
+        <VSpacer size={24} />
+        {Platform.OS === "android" && !hasCieNFCFeature ? (
+          <Alert
+            content={I18n.t("authentication.landing.cie_unsupported.nfc_alert")}
+            variant="warning"
+          />
+        ) : (
+          Platform.OS === "android" &&
+          hasCieApiLevelSupport && (
+            <Alert
+              content={I18n.t(
+                "authentication.landing.cie_unsupported.os_alert"
+              )}
+              variant="warning"
+            />
+          )
+        )}
+      </ContentWrapper>
+    </GradientScrollView>
   );
 };
 
diff --git a/ts/components/cie/CieRequestAuthenticationOverlay.tsx b/ts/components/cie/CieRequestAuthenticationOverlay.tsx
index c451b430cfb..fdf8022daee 100644
--- a/ts/components/cie/CieRequestAuthenticationOverlay.tsx
+++ b/ts/components/cie/CieRequestAuthenticationOverlay.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { createRef, useEffect } from "react";
-import { View, Platform, SafeAreaView, StyleSheet } from "react-native";
+import { View, Platform, StyleSheet } from "react-native";
 import WebView from "react-native-webview";
 import {
   WebViewErrorEvent,
@@ -22,7 +22,6 @@ import { getIdpLoginUri } from "../../utils/login";
 import { closeInjectedScript } from "../../utils/webview";
 import { IOStyles } from "../core/variables/IOStyles";
 import { withLoadingSpinner } from "../helpers/withLoadingSpinner";
-import GenericErrorComponent from "../screens/GenericErrorComponent";
 import { lollipopKeyTagSelector } from "../../features/lollipop/store/reducers/lollipop";
 import { useIODispatch, useIOSelector } from "../../store/hooks";
 import { isMixpanelEnabled } from "../../store/reducers/persistedPreferences";
@@ -32,6 +31,7 @@ import { isFastLoginEnabledSelector } from "../../features/fastLogin/store/selec
 import { isCieLoginUatEnabledSelector } from "../../features/cieLogin/store/selectors";
 import { cieFlowForDevServerEnabled } from "../../features/cieLogin/utils";
 import { selectedIdentityProviderSelector } from "../../store/reducers/authentication";
+import { OperationResultScreenContent } from "../screens/OperationResultScreenContent";
 
 const styles = StyleSheet.create({
   errorContainer: {
@@ -307,15 +307,22 @@ const CieWebView = (props: Props) => {
 const ErrorComponent = (
   props: { onRetry: () => void } & Pick<Props, "onClose">
 ) => (
-  <SafeAreaView style={[IOStyles.flex, styles.errorContainer]}>
-    <GenericErrorComponent
-      avoidNavigationEvents={true}
-      onRetry={props.onRetry}
-      onCancel={props.onClose}
-      image={require("../../../img/broken-link.png")} // TODO: use custom or generic image?
-      text={I18n.t("authentication.errors.network.title")} // TODO: use custom or generic text?
+  <View style={[IOStyles.flex, styles.errorContainer]}>
+    <OperationResultScreenContent
+      pictogram="umbrellaNew"
+      title={I18n.t("authentication.errors.network.title")}
+      action={{
+        label: I18n.t("global.buttons.retry"),
+        accessibilityLabel: I18n.t("global.buttons.retry"),
+        onPress: props.onRetry
+      }}
+      secondaryAction={{
+        label: I18n.t("global.buttons.cancel"),
+        accessibilityLabel: I18n.t("global.buttons.cancel"),
+        onPress: props.onClose
+      }}
     />
-  </SafeAreaView>
+  </View>
 );
 
 /**
diff --git a/ts/components/core/accordion/IOAccordion.tsx b/ts/components/core/accordion/IOAccordion.tsx
deleted file mode 100644
index 36332200936..00000000000
--- a/ts/components/core/accordion/IOAccordion.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from "react";
-import { StyleSheet } from "react-native";
-import themeVariables from "../../../theme/variables";
-import { H3 } from "../typography/H3";
-import { IOStyles } from "../variables/IOStyles";
-import { RawAccordion } from "./RawAccordion";
-
-type Props = Omit<React.ComponentProps<typeof RawAccordion>, "header"> & {
-  title: string;
-};
-
-const styles = StyleSheet.create({
-  header: {
-    marginVertical: themeVariables.contentPadding
-  }
-});
-
-/**
- * A simplified accordion that accepts a title and one child and uses {@link RawAccordion}
- * @param props
- * @constructor
- */
-export const IOAccordion = (props: Props): React.ReactElement => (
-  <RawAccordion
-    animated={props.animated}
-    headerStyle={styles.header}
-    accessibilityLabel={props.title}
-    header={
-      <H3 numberOfLines={1} style={IOStyles.flex}>
-        {props.title}
-      </H3>
-    }
-  >
-    {props.children}
-  </RawAccordion>
-);
diff --git a/ts/components/core/accordion/__test__/RawAccordion.test.tsx b/ts/components/core/accordion/__test__/RawAccordion.test.tsx
index c8d1626b732..38b37c94750 100644
--- a/ts/components/core/accordion/__test__/RawAccordion.test.tsx
+++ b/ts/components/core/accordion/__test__/RawAccordion.test.tsx
@@ -1,8 +1,7 @@
+import { IOColors } from "@pagopa/io-app-design-system";
 import { fireEvent, render } from "@testing-library/react-native";
-import { View } from "react-native";
 import * as React from "react";
-import { IOColors } from "@pagopa/io-app-design-system";
-import Fingerprint from "../../../../../img/test/fingerprint.svg";
+import { View } from "react-native";
 import I18n from "../../../../i18n";
 import { Body } from "../../typography/Body";
 import { H3 } from "../../typography/H3";
@@ -121,7 +120,6 @@ const renderRawAccordion = (
       }}
       header={
         <View style={IOStyles.row}>
-          <Fingerprint width={32} height={32} />
           <H3 style={{ alignSelf: "center" }}>{headerText}</H3>
         </View>
       }
diff --git a/ts/components/core/fonts.ts b/ts/components/core/fonts.ts
index bf0fb1be368..56f141b2555 100644
--- a/ts/components/core/fonts.ts
+++ b/ts/components/core/fonts.ts
@@ -24,6 +24,10 @@ const fonts = {
     android: "TitilliumWeb",
     ios: "Titillium Web"
   }),
+  TitilliumSansPro: Platform.select({
+    android: "TitilliumSansPro",
+    ios: "Titillium Sans Pro"
+  }),
   ReadexPro: Platform.select({
     android: "ReadexPro",
     ios: "Readex Pro"
diff --git a/ts/components/core/selection/__test__/__snapshots__/RemoteSwitch.test.tsx.snap b/ts/components/core/selection/__test__/__snapshots__/RemoteSwitch.test.tsx.snap
index 56d389d3df0..673a56fba5e 100644
--- a/ts/components/core/selection/__test__/__snapshots__/RemoteSwitch.test.tsx.snap
+++ b/ts/components/core/selection/__test__/__snapshots__/RemoteSwitch.test.tsx.snap
@@ -52,7 +52,6 @@ exports[`RemoteSwitch tests Snapshot for pot.noneError 1`] = `
     align="xMidYMid"
     bbHeight={24}
     bbWidth={24}
-    color={4278219750}
     focusable={false}
     height={24}
     importantForAccessibility="no-hide-descendants"
@@ -75,19 +74,26 @@ exports[`RemoteSwitch tests Snapshot for pot.noneError 1`] = `
         },
       ]
     }
-    tintColor={4278219750}
+    tintColor="#0073E6"
     vbHeight={24}
     vbWidth={24}
     width={24}
   >
-    <RNSVGGroup>
+    <RNSVGGroup
+      fill={
+        Object {
+          "payload": 4278190080,
+          "type": 0,
+        }
+      }
+    >
       <RNSVGPath
         clipRule={0}
         d="M20.5 3.52945V1.50002c0-.55229.4477-1 1-1s1 .44771 1 1v4.5c0 .26521-.1054.51957-.2929.7071a.99994.99994 0 0 1-.7071.2929L17 7.00001c-.5523 0-1-.44771-1-1 0-.55228.4477-1 1-1l2.1415.00001a10.00086 10.00086 0 0 0-3.3774-2.26457A10.00004 10.00004 0 0 0 4.6248 5.24676a9.99995 9.99995 0 0 0-2.53547 5.41974 9.99986 9.99986 0 0 0 1.01273 5.8971A9.99994 9.99994 0 0 0 13.1813 21.93a9.99978 9.99978 0 0 0 5.458-2.452c.413-.3667 1.045-.3292 1.4117.0838s.3292 1.0451-.0838 1.4118a12.0013 12.0013 0 0 1-6.5496 2.9424 12.00094 12.00094 0 0 1-7.05709-1.3237 12.00006 12.00006 0 0 1-5.03804-5.116 11.99975 11.99975 0 0 1-1.21528-7.0765 11.99992 11.99992 0 0 1 3.04257-6.50368A11.99992 11.99992 0 0 1 9.36088.29382 11.99986 11.99986 0 0 1 20.5 3.52945Z"
         fill={
-          Array [
-            2,
-          ]
+          Object {
+            "type": 2,
+          }
         }
         fillRule={0}
         propList={
diff --git a/ts/components/core/typography/CTA.tsx b/ts/components/core/typography/CTA.tsx
deleted file mode 100644
index 19fab8e5399..00000000000
--- a/ts/components/core/typography/CTA.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import * as React from "react";
-import { IOTheme, IOThemeLight } from "@pagopa/io-app-design-system";
-import { IOFontFamily, IOFontWeight } from "../fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
-
-type AllowedColors = IOTheme["textBody-default"] | "blueIO-850";
-type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
-
-type OwnProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-/* Common typographic styles */
-export const ctaFontSize = 16;
-export const ctaLineHeight = 20;
-export const ctaDefaultColor: AllowedColors = IOThemeLight["textBody-default"];
-/* New typographic styles */
-const ctaFontName: IOFontFamily = "ReadexPro";
-const ctaDefaultWeight: AllowedWeight = "Regular";
-
-/**
- * Typography component to render `H4` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `Bold`, color: `bluegreyDark`
- * @param props
- * @constructor
- */
-export const CTA: React.FunctionComponent<OwnProps> = props =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight: ctaDefaultWeight,
-    defaultColor: ctaDefaultColor,
-    font: ctaFontName,
-    fontStyle: { fontSize: ctaFontSize, lineHeight: ctaLineHeight }
-  });
diff --git a/ts/components/core/typography/Label.tsx b/ts/components/core/typography/Label.tsx
index bed1db91c37..92ac7e207c7 100644
--- a/ts/components/core/typography/Label.tsx
+++ b/ts/components/core/typography/Label.tsx
@@ -1,8 +1,8 @@
 import {
   FontSize,
   fontSizeMapping,
-  type IOColors,
-  type IOColorsStatusForeground
+  IOColors,
+  IOColorsStatusForeground
 } from "@pagopa/io-app-design-system";
 import { IOFontFamily, IOFontWeight } from "../fonts";
 import { ExternalTypographyProps, TypographyProps } from "./common";
diff --git a/ts/components/core/variables/IOStyleVariables.ts b/ts/components/core/variables/IOStyleVariables.ts
index 88a20791963..a32f81e033a 100644
--- a/ts/components/core/variables/IOStyleVariables.ts
+++ b/ts/components/core/variables/IOStyleVariables.ts
@@ -1,6 +1,9 @@
+import { IOSpacer } from "@pagopa/io-app-design-system";
+
 /**
  * A collection of default style variables used within IO App.
  */
 export const IOStyleVariables = {
+  defaultSpaceBetweenPictogramAndText: 24 as IOSpacer,
   switchWidth: 51
 };
diff --git a/ts/components/countdown/CountdownProvider.tsx b/ts/components/countdown/CountdownProvider.tsx
new file mode 100644
index 00000000000..0083d52d2f6
--- /dev/null
+++ b/ts/components/countdown/CountdownProvider.tsx
@@ -0,0 +1,58 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  ReactNode,
+  useRef
+} from "react";
+import BackgroundTimer from "react-native-background-timer";
+
+type CountdownContextType = {
+  timerCount: number;
+  resetTimer?: () => void;
+  startTimer?: () => void;
+  isRunning?: () => boolean;
+};
+
+const CountdownContext = createContext<CountdownContextType>({ timerCount: 0 });
+
+// Props type for the provider component
+interface CountdownProviderProps {
+  children: ReactNode;
+  timerTiming: number;
+  intervalDuration: number;
+}
+
+export const CountdownProvider = (props: CountdownProviderProps) => {
+  const { children, timerTiming, intervalDuration } = props;
+  const [timerCount, setTimerCount] = useState<number>(timerTiming);
+  const isRunningTimer = useRef<boolean>(false);
+
+  const startTimer = () => {
+    // eslint-disable-next-line functional/immutable-data
+    isRunningTimer.current = true;
+    BackgroundTimer.runBackgroundTimer(() => {
+      setTimerCount(prevCount => (prevCount > 0 ? prevCount - 1 : 0));
+    }, intervalDuration);
+  };
+
+  const resetTimer = () => {
+    setTimerCount(timerTiming);
+    BackgroundTimer.stopBackgroundTimer();
+    // eslint-disable-next-line functional/immutable-data
+    isRunningTimer.current = false;
+  };
+
+  const isRunning = () => isRunningTimer.current;
+
+  return (
+    <CountdownContext.Provider
+      value={{ timerCount, resetTimer, startTimer, isRunning }}
+    >
+      {children}
+    </CountdownContext.Provider>
+  );
+};
+
+// Hook to use the countdown context
+export const useCountdown = () => useContext(CountdownContext);
diff --git a/ts/components/cta/ExtractedCTABar.tsx b/ts/components/cta/ExtractedCTABar.tsx
index 61b4e5d666b..1e9bb07f129 100644
--- a/ts/components/cta/ExtractedCTABar.tsx
+++ b/ts/components/cta/ExtractedCTABar.tsx
@@ -35,7 +35,7 @@ const renderCtaButton = (
     if (isPNOptInMessage) {
       trackPNOptInMessageAccepted();
     }
-    handleCtaAction(cta, linkTo, service);
+    handleCtaAction(cta, linkTo, service?.service_id);
   };
 
   if (cta !== undefined && isCtaActionValid(cta, serviceMetadata)) {
@@ -68,7 +68,7 @@ const ExtractedCTABar: React.FunctionComponent<Props> = (
         props,
         linkTo,
         false,
-        props.isPNOptInMessage?.cta2HasServiceNavigationLink ?? false,
+        props.isPNOptInMessage?.cta2LinksToPNService ?? false,
         ctas.cta_2
       ),
     [ctas.cta_2, linkTo, props]
@@ -79,7 +79,7 @@ const ExtractedCTABar: React.FunctionComponent<Props> = (
         props,
         linkTo,
         true,
-        props.isPNOptInMessage?.cta1HasServiceNavigationLink ?? false,
+        props.isPNOptInMessage?.cta1LinksToPNService ?? false,
         ctas.cta_1
       ),
     [ctas.cta_1, linkTo, props]
diff --git a/ts/components/helpers/withErrorModal.tsx b/ts/components/helpers/withErrorModal.tsx
deleted file mode 100644
index 18da5d90bac..00000000000
--- a/ts/components/helpers/withErrorModal.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { pipe } from "fp-ts/lib/function";
-import * as O from "fp-ts/lib/Option";
-import { Text as NBButtonText } from "native-base";
-import * as React from "react";
-import { Image, StyleSheet, View } from "react-native";
-
-import { IOColors } from "@pagopa/io-app-design-system";
-import I18n from "../../i18n";
-import variables from "../../theme/variables";
-import ButtonDefaultOpacity from "../ButtonDefaultOpacity";
-import { H1 } from "../core/typography/H1";
-import { Overlay } from "../ui/Overlay";
-
-const styles = StyleSheet.create({
-  contentWrapper: {
-    flex: 1,
-    padding: variables.contentPadding
-  },
-
-  imageAndMessageContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-
-  image: {
-    marginBottom: 20
-  },
-
-  buttonsContainer: {
-    flexDirection: "row",
-    marginTop: "auto"
-  },
-
-  buttonCancel: {
-    flex: 4,
-    backgroundColor: IOColors.bluegrey
-  },
-
-  separator: {
-    width: 10
-  },
-
-  buttonRetry: {
-    flex: 8
-  }
-});
-
-/**
- * A HOC to display a modal to notify the user an error occurred.
- * Inside the modal cancel and retry buttons are rendered conditionally.
- *
- * @param WrappedComponent The react component you want to wrap
- * @param errorSelector A redux selector that returns the error (as string) or undefined
- * @param errorMapping A mapping function that converts the extracted error (if any) into a user-readable string
- */
-export function withErrorModal<
-  E,
-  P extends Readonly<{
-    error: O.Option<E>;
-    onCancel: () => void;
-    onRetry?: () => void;
-  }>
->(WrappedComponent: React.ComponentType<P>, errorMapping: (t: E) => string) {
-  class WithErrorModal extends React.Component<P> {
-    public render() {
-      const { error } = this.props;
-
-      const errorMessage = pipe(
-        error,
-        O.fold(
-          () => "",
-          e => errorMapping(e)
-        )
-      );
-
-      return (
-        <Overlay
-          foreground={
-            O.isSome(error) ? this.renderContent(errorMessage) : undefined
-          }
-        >
-          <WrappedComponent {...this.props} />
-        </Overlay>
-      );
-    }
-
-    private renderContent = (errorMessage: string) => (
-      <View style={styles.contentWrapper}>
-        <View style={styles.imageAndMessageContainer}>
-          <Image
-            style={styles.image}
-            source={require("../../../img/error.png")}
-          />
-          <H1>{errorMessage}</H1>
-        </View>
-        {this.renderButtons()}
-      </View>
-    );
-
-    private renderButtons = () => (
-      <View style={styles.buttonsContainer}>
-        <ButtonDefaultOpacity
-          onPress={this.props.onCancel}
-          style={styles.buttonCancel}
-          light={true}
-          block={true}
-        >
-          <NBButtonText white={true}>
-            {I18n.t("global.buttons.cancel")}
-          </NBButtonText>
-        </ButtonDefaultOpacity>
-        {this.props.onRetry && <View style={styles.separator} />}
-        {this.props.onRetry && (
-          <ButtonDefaultOpacity
-            primary={true}
-            block={true}
-            onPress={this.props.onRetry}
-            style={styles.buttonRetry}
-          >
-            <NBButtonText>{I18n.t("global.buttons.retry")}</NBButtonText>
-          </ButtonDefaultOpacity>
-        )}
-      </View>
-    );
-  }
-
-  return WithErrorModal;
-}
diff --git a/ts/components/helpers/withItemsSelection.tsx b/ts/components/helpers/withItemsSelection.tsx
deleted file mode 100644
index 1479abd7de0..00000000000
--- a/ts/components/helpers/withItemsSelection.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Omit } from "@pagopa/ts-commons/lib/types";
-import { pipe } from "fp-ts/lib/function";
-import * as O from "fp-ts/lib/Option";
-import hoistNonReactStatics from "hoist-non-react-statics";
-import React from "react";
-
-type State = {
-  selectedItemIds: O.Option<Set<string>>;
-};
-
-export type InjectedWithItemsSelectionProps = {
-  selectedItemIds: O.Option<Set<string>>;
-  toggleItemSelection: (id: string) => void;
-  resetSelection: () => void;
-  setSelectedItemIds: (newSelectedItemIds: O.Option<Set<string>>) => void;
-};
-
-/**
- * An HOC to maintain and manipulate a list of selected items.
- *
- * @deprecated please use the hook useItemsSelection instead
- */
-export function withItemsSelection<P extends InjectedWithItemsSelectionProps>(
-  WrappedComponent: React.ComponentType<P>
-) {
-  class WithItemsSelection extends React.PureComponent<
-    Omit<P, keyof InjectedWithItemsSelectionProps>,
-    State
-  > {
-    constructor(props: Omit<P, keyof InjectedWithItemsSelectionProps>) {
-      super(props);
-      this.state = {
-        selectedItemIds: O.none
-      };
-    }
-
-    public render() {
-      const { selectedItemIds } = this.state;
-      return (
-        <WrappedComponent
-          {...(this.props as P)}
-          selectedItemIds={selectedItemIds}
-          toggleItemSelection={this.toggleItemSelection}
-          resetSelection={this.resetSelection}
-          setSelectedItemIds={this.setSelectedItemIds}
-        />
-      );
-    }
-
-    // A function to add/remove an id from the selectedItemIds Set.
-    private toggleItemSelection = (id: string) => {
-      this.setState(({ selectedItemIds }) =>
-        pipe(
-          selectedItemIds,
-          O.map(_ => {
-            const newSelectedItemIds = new Set(_);
-            if (newSelectedItemIds.has(id)) {
-              newSelectedItemIds.delete(id);
-            } else {
-              newSelectedItemIds.add(id);
-            }
-
-            return {
-              selectedItemIds: O.some(newSelectedItemIds)
-            };
-          }),
-          O.getOrElse(() => ({
-            selectedItemIds: O.some(new Set<string>([id]))
-          }))
-        )
-      );
-    };
-
-    private setSelectedItemIds = (
-      newSelectedItemIds: O.Option<Set<string>>
-    ) => {
-      this.setState({
-        selectedItemIds: newSelectedItemIds
-      });
-    };
-
-    private resetSelection = () => {
-      this.setState({
-        selectedItemIds: O.none
-      });
-    };
-  }
-
-  hoistNonReactStatics(WithItemsSelection, WrappedComponent);
-
-  return WithItemsSelection;
-}
diff --git a/ts/components/markdown/MarkdownBaseScreen.tsx b/ts/components/markdown/MarkdownBaseScreen.tsx
deleted file mode 100644
index 1ab6024f4a1..00000000000
--- a/ts/components/markdown/MarkdownBaseScreen.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useEffect, useState } from "react";
-import * as React from "react";
-import { View, StyleSheet } from "react-native";
-import BaseScreenComponent from "../screens/BaseScreenComponent";
-import { EdgeBorderComponent } from "../screens/EdgeBorderComponent";
-import ScreenContent from "../screens/ScreenContent";
-import Markdown from "../ui/Markdown";
-import themeVariables from "../../theme/variables";
-
-/**
- * TODO Rename the title prop in the BaseScreenComponent to navigationTitle
- * https://www.pivotaltracker.com/story/show/173056117
- */
-type Props = {
-  markDown: string;
-  navigationTitle?: string;
-  title?: string;
-  subtitle?: string;
-  hideHeader?: boolean;
-};
-
-const styles = StyleSheet.create({
-  markdownContainer: {
-    paddingLeft: themeVariables.contentPadding,
-    paddingRight: themeVariables.contentPadding
-  }
-});
-
-/**
- * A base screen that allow the rendering of a markdown, in addition with a title and subtitle
- * @param props
- * @constructor
- */
-export const MarkdownBaseScreen: React.FunctionComponent<Props> = props => {
-  const [isMarkdownLoaded, setMarkdownLoaded] = useState(false);
-
-  useEffect(() => setMarkdownLoaded(false), [props.markDown]);
-
-  return (
-    <BaseScreenComponent goBack={true} headerTitle={props.navigationTitle}>
-      <ScreenContent
-        title={props.title}
-        subtitle={props.subtitle}
-        bounces={false}
-        hideHeader={props.hideHeader}
-      >
-        <View style={styles.markdownContainer}>
-          <Markdown onLoadEnd={() => setMarkdownLoaded(true)}>
-            {props.markDown}
-          </Markdown>
-          {isMarkdownLoaded && <EdgeBorderComponent />}
-        </View>
-      </ScreenContent>
-      {isMarkdownLoaded && props.children}
-    </BaseScreenComponent>
-  );
-};
diff --git a/ts/components/screens/BaseScreenComponent/utils.tsx b/ts/components/screens/BaseScreenComponent/utils.tsx
index 04ddd89cebb..27bd6d1d037 100644
--- a/ts/components/screens/BaseScreenComponent/utils.tsx
+++ b/ts/components/screens/BaseScreenComponent/utils.tsx
@@ -7,7 +7,7 @@ import { ScreenCHData } from "../../../../definitions/content/ScreenCHData";
 import { ContextualHelpData } from "../../../features/zendesk/screens/ZendeskSupportHelpCenter";
 import I18n from "../../../i18n";
 import { handleItemOnPress } from "../../../utils/url";
-import Markdown from "../../ui/Markdown";
+import LegacyMarkdown from "../../ui/Markdown/LegacyMarkdown";
 import {
   deriveCustomHandledLink,
   isIoInternalLink
@@ -50,13 +50,13 @@ export const getContextualHelpConfig = (
     : contextualHelpMarkdown
     ? {
         body: () => (
-          <Markdown
+          <LegacyMarkdown
             onLinkClicked={onLinkClicked}
             onLoadEnd={onLoadEnd}
             shouldHandleLink={shouldHandleLink}
           >
             {I18n.t(contextualHelpMarkdown.body)}
-          </Markdown>
+          </LegacyMarkdown>
         ),
         title: I18n.t(contextualHelpMarkdown.title)
       }
@@ -77,7 +77,9 @@ export const getContextualHelpData = (
       () => defaultData,
       data => ({
         title: data.title,
-        content: <Markdown onLoadEnd={onReady}>{data.content}</Markdown>,
+        content: (
+          <LegacyMarkdown onLoadEnd={onReady}>{data.content}</LegacyMarkdown>
+        ),
         faqs: pipe(
           data.faqs,
           O.fromNullable,
diff --git a/ts/components/screens/IdpCustomContextualHelpContent.tsx b/ts/components/screens/IdpCustomContextualHelpContent.tsx
index 172313f4c71..321045b12f8 100644
--- a/ts/components/screens/IdpCustomContextualHelpContent.tsx
+++ b/ts/components/screens/IdpCustomContextualHelpContent.tsx
@@ -4,7 +4,7 @@ import { VSpacer } from "@pagopa/io-app-design-system";
 import { Idp } from "../../../definitions/content/Idp";
 import { handleItemOnPress } from "../../utils/url";
 import BlockButtons from "../ui/BlockButtons";
-import Markdown from "../ui/Markdown";
+import LegacyMarkdown from "../ui/Markdown/LegacyMarkdown";
 import EmailCallCTA from "./EmailCallCTA";
 
 type Props = Readonly<{
@@ -25,11 +25,11 @@ const IdpCustomContextualHelpBody: React.FunctionComponent<Props> = props => {
   return (
     <React.Fragment>
       {/** Recover credentials */}
-      <Markdown onLoadEnd={() => setIsMarkdown1Loaded(true)}>
+      <LegacyMarkdown onLoadEnd={() => setIsMarkdown1Loaded(true)}>
         {idpTextData.recover_username
           ? I18n.t("authentication.idp_login.dualRecoverDescription")
           : I18n.t("authentication.idp_login.recoverDescription")}
-      </Markdown>
+      </LegacyMarkdown>
 
       <VSpacer size={16} />
       {isMarkdown1Loaded && (
@@ -60,9 +60,9 @@ const IdpCustomContextualHelpBody: React.FunctionComponent<Props> = props => {
 
       {/** Idp contacts */}
       <VSpacer size={16} />
-      <Markdown onLoadEnd={() => setIsMarkdown2Loaded(true)}>
+      <LegacyMarkdown onLoadEnd={() => setIsMarkdown2Loaded(true)}>
         {idpTextData.description}
-      </Markdown>
+      </LegacyMarkdown>
       <VSpacer size={16} />
       {isMarkdown2Loaded && (
         <React.Fragment>
diff --git a/ts/components/screens/OperationResultScreenContent.tsx b/ts/components/screens/OperationResultScreenContent.tsx
index 3d28636e18e..92d50d74702 100644
--- a/ts/components/screens/OperationResultScreenContent.tsx
+++ b/ts/components/screens/OperationResultScreenContent.tsx
@@ -1,25 +1,44 @@
 import {
+  Body,
   ButtonLink,
   ButtonLinkProps,
   ButtonSolid,
   ButtonSolidProps,
+  ExternalTypographyProps,
   H3,
+  IOColors,
+  IOFontWeight,
   IOPictograms,
   IOStyles,
+  IOTheme,
   IOVisualCostants,
   Pictogram,
+  TypographyProps,
   VSpacer,
   WithTestID
 } from "@pagopa/io-app-design-system";
 import * as React from "react";
-import { Platform, SafeAreaView, StyleSheet, View } from "react-native";
+import { Platform, StyleSheet, View } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
-import { LabelSmall } from "../core/typography/LabelSmall";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+type PartialAllowedColors = Extract<
+  IOColors,
+  "bluegreyDark" | "white" | "blue" | "bluegrey" | "bluegreyLight"
+>;
+type AllowedColors = PartialAllowedColors | IOTheme["textBody-default"];
+type AllowedWeight = IOFontWeight | "Regular" | "SemiBold";
+
+export type BodyProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors> & {
+    text: string | React.ReactElement;
+  }
+>;
 
 type OperationResultScreenContentProps = WithTestID<{
   pictogram?: IOPictograms;
   title: string;
-  subtitle?: string;
+  subtitle?: string | Array<BodyProps>;
   action?: Pick<
     ButtonSolidProps,
     "label" | "accessibilityLabel" | "onPress" | "testID"
@@ -28,8 +47,27 @@ type OperationResultScreenContentProps = WithTestID<{
     ButtonLinkProps,
     "label" | "accessibilityLabel" | "onPress" | "testID"
   >;
+  isHeaderVisible?: boolean;
 }>;
 
+type PropsComposedBody = {
+  subtitle: Array<BodyProps>;
+  textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
+};
+
+export const ComposedBodyFromArray = ({
+  subtitle,
+  textAlign = "center"
+}: PropsComposedBody) => (
+  <Body style={{ textAlign }}>
+    {subtitle.map(({ text, key, ...props }) => (
+      <Body key={key} {...props}>
+        {text}
+      </Body>
+    ))}
+  </Body>
+);
+
 const OperationResultScreenContent = ({
   pictogram,
   title,
@@ -37,9 +75,14 @@ const OperationResultScreenContent = ({
   action,
   secondaryAction,
   children,
-  testID
+  testID,
+  isHeaderVisible
 }: React.PropsWithChildren<OperationResultScreenContentProps>) => (
-  <SafeAreaView style={styles.container} testID={testID}>
+  <SafeAreaView
+    edges={isHeaderVisible ? ["bottom"] : undefined}
+    style={styles.container}
+    testID={testID}
+  >
     <ScrollView
       centerContent={true}
       contentContainerStyle={[
@@ -58,9 +101,11 @@ const OperationResultScreenContent = ({
       {subtitle && (
         <>
           <VSpacer size={8} />
-          <LabelSmall style={styles.text} color="grey-650" weight="Regular">
-            {subtitle}
-          </LabelSmall>
+          {typeof subtitle === "string" ? (
+            <Body style={styles.text}>{subtitle}</Body>
+          ) : (
+            <ComposedBodyFromArray subtitle={subtitle} textAlign="center" />
+          )}
         </>
       )}
       {action && (
@@ -79,6 +124,7 @@ const OperationResultScreenContent = ({
           </View>
         </View>
       )}
+
       {React.isValidElement(children) && React.cloneElement(children)}
     </ScrollView>
   </SafeAreaView>
diff --git a/ts/components/screens/ScreenContentHeader.tsx b/ts/components/screens/ScreenContentHeader.tsx
index 949182243e4..96e08f06cba 100644
--- a/ts/components/screens/ScreenContentHeader.tsx
+++ b/ts/components/screens/ScreenContentHeader.tsx
@@ -29,7 +29,7 @@ type Props = Readonly<{
   subtitle?: string;
   subtitleLink?: JSX.Element;
   dark?: boolean;
-  dynamicHeight?: Animated.AnimatedInterpolation;
+  dynamicHeight?: Animated.AnimatedInterpolation<number>;
   // Specified if a custom component is needed, if both icon and rightComponent are defined rightComponent
   // will be rendered in place of icon
   rightComponent?: React.ReactElement;
@@ -45,8 +45,8 @@ const styles = StyleSheet.create({
   }
 });
 
-const shouldCollapse = 1 as unknown as Animated.AnimatedInterpolation;
-const shouldExpand = 0 as unknown as Animated.AnimatedInterpolation;
+const shouldCollapse = 1 as unknown as Animated.AnimatedInterpolation<number>;
+const shouldExpand = 0 as unknown as Animated.AnimatedInterpolation<number>;
 
 export class ScreenContentHeader extends React.PureComponent<Props> {
   private heightAnimation: Animated.Value;
diff --git a/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap b/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap
index 456cc47fe98..6f403769568 100644
--- a/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap
+++ b/ts/components/screens/__tests__/__snapshots__/OperationResultScreenContent.test.tsx.snap
@@ -20,627 +20,670 @@ exports[`OperationResultScreenContent should match the snapshot with default pro
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
+        collapsable={false}
         pointerEvents="box-none"
-        style={null}
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
       >
         <View
-          collapsable={false}
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
           pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
+          style={null}
         >
           <View
             collapsable={false}
+            pointerEvents="box-none"
             style={
               Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
               }
             }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
               }
-            }
-          />
+            />
+          </View>
           <View
+            collapsable={false}
             pointerEvents="box-none"
             style={
               Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
               }
             }
           >
             <View
-              collapsable={false}
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
               pointerEvents="box-none"
               style={
                 Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
                 }
               }
             >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
+              <View
                 collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
+                pointerEvents="box-none"
                 style={
                   Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
                   }
                 }
               >
-                WALLET_HOME
-              </Text>
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  WALLET_HOME
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
             </View>
           </View>
         </View>
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
+      <RNSScreenContainer
+        onLayout={[Function]}
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "flex": 1,
           }
         }
       >
-        <View
+        <RNSModalScreen
+          activityState={2}
           collapsable={false}
-          style={
+          forwardedRef={[Function]}
+          gestureResponseDistance={
             Object {
-              "opacity": 1,
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
             }
           }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          onGestureCancel={[Function]}
           pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
           style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
             Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={1}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
-                    <RCTSafeAreaView
-                      emulateUnlessSupported={true}
+                    <View
                       style={
                         Object {
-                          "flexGrow": 1,
-                          "marginHorizontal": 24,
+                          "flex": 1,
                         }
                       }
                     >
-                      <RCTScrollView
-                        centerContent={true}
-                        collapsable={false}
-                        contentContainerStyle={
-                          Array [
-                            Object {
-                              "alignContent": "center",
-                              "alignItems": "stretch",
-                              "flex": 1,
-                              "justifyContent": "center",
-                            },
-                            false,
-                          ]
-                        }
-                        handlerTag={2}
-                        handlerType="NativeViewGestureHandler"
-                        onGestureHandlerEvent={[Function]}
-                        onGestureHandlerStateChange={[Function]}
-                        waitFor={
-                          Array [
-                            Object {
-                              "current": null,
-                            },
-                          ]
+                      <RNCSafeAreaView
+                        style={
+                          Object {
+                            "flexGrow": 1,
+                            "marginHorizontal": 24,
+                          }
                         }
                       >
-                        <View>
-                          <Text
-                            allowFontScaling={false}
-                            color="bluegreyDark"
-                            defaultColor="bluegreyDark"
-                            defaultWeight="SemiBold"
-                            font="TitilliumWeb"
-                            fontStyle={
+                        <RCTScrollView
+                          centerContent={true}
+                          collapsable={false}
+                          contentContainerStyle={
+                            Array [
                               Object {
-                                "fontSize": 24,
-                                "lineHeight": 34,
-                              }
-                            }
-                            style={
-                              Array [
-                                Object {
-                                  "textAlign": "center",
-                                },
+                                "alignContent": "center",
+                                "alignItems": "stretch",
+                                "flex": 1,
+                                "justifyContent": "center",
+                              },
+                              false,
+                            ]
+                          }
+                          handlerTag={2}
+                          handlerType="NativeViewGestureHandler"
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          waitFor={
+                            Array [
+                              Object {
+                                "current": null,
+                              },
+                            ]
+                          }
+                        >
+                          <View>
+                            <Text
+                              allowFontScaling={false}
+                              color="bluegreyDark"
+                              defaultColor="bluegreyDark"
+                              defaultWeight="SemiBold"
+                              font="TitilliumWeb"
+                              fontStyle={
                                 Object {
                                   "fontSize": 24,
                                   "lineHeight": 34,
-                                },
-                                Object {
-                                  "color": "#17324D",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "600",
-                                },
-                              ]
-                            }
-                            weight="SemiBold"
-                          >
-                            title
-                          </Text>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
+                                }
                               }
-                            }
-                          />
-                          <Text
-                            color="grey-650"
-                            defaultColor="blue"
-                            defaultWeight="Bold"
-                            font="TitilliumWeb"
-                            fontStyle={
-                              Object {
-                                "fontSize": 14,
-                                "lineHeight": 21,
+                              style={
+                                Array [
+                                  Object {
+                                    "textAlign": "center",
+                                  },
+                                  Object {
+                                    "fontSize": 24,
+                                    "lineHeight": 34,
+                                  },
+                                  Object {
+                                    "color": "#17324D",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
+                                  },
+                                ]
                               }
-                            }
-                            style={
-                              Array [
-                                Object {
-                                  "textAlign": "center",
-                                },
+                              weight="SemiBold"
+                            >
+                              title
+                            </Text>
+                            <View
+                              style={
                                 Object {
-                                  "fontSize": 14,
-                                  "lineHeight": 21,
-                                },
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <Text
+                              allowFontScaling={false}
+                              color="bluegrey"
+                              defaultColor="bluegrey"
+                              defaultWeight="Regular"
+                              font="TitilliumWeb"
+                              fontStyle={
                                 Object {
-                                  "color": "#636B82",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "400",
-                                },
-                              ]
-                            }
-                            weight="Regular"
-                          >
-                            subtitle
-                          </Text>
-                          <View
-                            style={
-                              Object {
-                                "alignItems": "center",
+                                  "fontSize": 16,
+                                  "lineHeight": 24,
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "textAlign": "center",
+                                  },
+                                  Object {
+                                    "fontSize": 16,
+                                    "lineHeight": 24,
+                                  },
+                                  Object {
+                                    "color": "#475A6D",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "400",
+                                  },
+                                ]
                               }
-                            }
-                          >
+                              weight="Regular"
+                            >
+                              subtitle
+                            </Text>
                             <View
                               style={
                                 Object {
-                                  "height": 24,
+                                  "alignItems": "center",
                                 }
                               }
-                            />
-                            <View>
+                            >
                               <View
-                                accessibilityLabel="Action"
-                                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 {
-                                    "alignSelf": "flex-start",
+                                    "height": 24,
                                   }
                                 }
-                              >
+                              />
+                              <View>
                                 <View
+                                  accessibilityLabel="Action"
+                                  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={
-                                    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,
-                                          },
-                                        ],
-                                      },
-                                    ]
+                                    Object {
+                                      "alignSelf": "flex-start",
+                                    }
                                   }
                                 >
                                   <View
-                                    entering={[Function]}
-                                    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": "#0073E6",
+                                        },
+                                        Object {
+                                          "backgroundColor": undefined,
+                                          "transform": Array [
+                                            Object {
+                                              "scale": undefined,
+                                            },
+                                          ],
+                                        },
                                       ]
                                     }
                                   >
-                                    <Text
-                                      allowFontScaling={false}
-                                      color="white"
-                                      defaultColor="white"
-                                      defaultWeight="Bold"
-                                      ellipsizeMode="tail"
-                                      font="TitilliumWeb"
-                                      fontStyle={
-                                        Object {
-                                          "fontSize": 16,
-                                        }
-                                      }
-                                      maxFontSizeMultiplier={1.3}
-                                      numberOfLines={1}
+                                    <View
                                       style={
                                         Array [
                                           Object {
-                                            "alignSelf": "center",
-                                          },
-                                          Object {
-                                            "fontSize": 16,
-                                          },
-                                          Object {
-                                            "color": "#FFFFFF",
-                                            "fontFamily": "Titillium Web",
-                                            "fontStyle": "normal",
-                                            "fontWeight": "700",
+                                            "alignItems": "center",
+                                            "flexDirection": "row",
+                                            "justifyContent": "center",
                                           },
+                                          false,
                                         ]
                                       }
-                                      weight="Bold"
                                     >
-                                      Action
-                                    </Text>
+                                      <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"
+                                      >
+                                        Action
+                                      </Text>
+                                    </View>
                                   </View>
                                 </View>
                               </View>
                             </View>
-                          </View>
-                          <View
-                            style={
-                              Object {
-                                "alignItems": "center",
-                              }
-                            }
-                          >
                             <View
                               style={
                                 Object {
-                                  "height": 24,
+                                  "alignItems": "center",
                                 }
                               }
-                            />
-                            <View>
+                            >
                               <View
-                                accessibilityLabel="Secondary Action"
-                                accessibilityRole="button"
-                                accessibilityState={
-                                  Object {
-                                    "disabled": false,
-                                  }
-                                }
-                                accessible={true}
-                                collapsable={false}
-                                focusable={true}
-                                hitSlop={
-                                  Object {
-                                    "bottom": 14,
-                                    "left": 24,
-                                    "right": 24,
-                                    "top": 14,
-                                  }
-                                }
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onResponderGrant={[Function]}
-                                onResponderMove={[Function]}
-                                onResponderRelease={[Function]}
-                                onResponderTerminate={[Function]}
-                                onResponderTerminationRequest={[Function]}
-                                onStartShouldSetResponder={[Function]}
-                                onTouchEnd={[Function]}
                                 style={
                                   Object {
-                                    "alignSelf": "flex-start",
+                                    "height": 24,
                                   }
                                 }
-                              >
+                              />
+                              <View>
                                 <View
+                                  accessibilityLabel="Secondary Action"
+                                  accessibilityRole="button"
+                                  accessibilityState={
+                                    Object {
+                                      "disabled": false,
+                                    }
+                                  }
+                                  accessible={true}
+                                  collapsable={false}
+                                  focusable={true}
+                                  hitSlop={
+                                    Object {
+                                      "bottom": 14,
+                                      "left": 24,
+                                      "right": 24,
+                                      "top": 14,
+                                    }
+                                  }
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onResponderGrant={[Function]}
+                                  onResponderMove={[Function]}
+                                  onResponderRelease={[Function]}
+                                  onResponderTerminate={[Function]}
+                                  onResponderTerminationRequest={[Function]}
+                                  onStartShouldSetResponder={[Function]}
+                                  onTouchEnd={[Function]}
                                   style={
-                                    Array [
-                                      Object {
-                                        "alignItems": "center",
-                                        "elevation": 0,
-                                        "flexDirection": "row",
-                                        "justifyContent": "center",
-                                        "textAlignVertical": "center",
-                                      },
-                                      false,
-                                      Object {},
-                                      Object {
-                                        "transform": Array [
-                                          Object {
-                                            "scale": undefined,
-                                          },
-                                        ],
-                                      },
-                                    ]
+                                    Object {
+                                      "alignSelf": "flex-start",
+                                    }
                                   }
                                 >
-                                  <Text
-                                    allowFontScaling={false}
-                                    ellipsizeMode="tail"
-                                    maxFontSizeMultiplier={1.3}
-                                    numberOfLines={1}
+                                  <View
                                     style={
                                       Array [
                                         Object {
-                                          "fontFamily": "Titillium Web",
-                                          "fontSize": 16,
-                                          "fontStyle": "normal",
-                                          "fontWeight": "700",
-                                        },
-                                        Object {
-                                          "color": "#0073E6",
+                                          "alignItems": "center",
+                                          "elevation": 0,
+                                          "flexDirection": "row",
+                                          "justifyContent": "center",
+                                          "textAlignVertical": "center",
                                         },
+                                        false,
+                                        Object {},
                                         Object {
-                                          "color": undefined,
+                                          "transform": Array [
+                                            Object {
+                                              "scale": undefined,
+                                            },
+                                          ],
                                         },
                                       ]
                                     }
                                   >
-                                    Secondary Action
-                                  </Text>
+                                    <Text
+                                      accessibilityElementsHidden={true}
+                                      accessible={false}
+                                      allowFontScaling={false}
+                                      ellipsizeMode="tail"
+                                      importantForAccessibility="no-hide-descendants"
+                                      maxFontSizeMultiplier={1.3}
+                                      numberOfLines={1}
+                                      style={
+                                        Array [
+                                          Object {
+                                            "fontFamily": "Titillium Web",
+                                            "fontSize": 16,
+                                            "fontStyle": "normal",
+                                            "fontWeight": "700",
+                                          },
+                                          Object {
+                                            "color": "#0073E6",
+                                          },
+                                          Object {
+                                            "color": undefined,
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Secondary Action
+                                    </Text>
+                                  </View>
                                 </View>
                               </View>
                             </View>
                           </View>
-                        </View>
-                      </RCTScrollView>
-                    </RCTSafeAreaView>
+                        </RCTScrollView>
+                      </RNCSafeAreaView>
+                    </View>
                   </View>
                 </View>
               </View>
             </View>
           </View>
-        </View>
-      </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
     </View>
   </RNCSafeAreaProvider>
 </View>
diff --git a/ts/components/services/ContactPreferencesToggles/__test__/ContactPreferencesToggles.test.tsx b/ts/components/services/ContactPreferencesToggles/__test__/ContactPreferencesToggles.test.tsx
index 0c49c894276..efac15ced66 100644
--- a/ts/components/services/ContactPreferencesToggles/__test__/ContactPreferencesToggles.test.tsx
+++ b/ts/components/services/ContactPreferencesToggles/__test__/ContactPreferencesToggles.test.tsx
@@ -5,10 +5,10 @@ import { NotificationChannelEnum } from "../../../../../definitions/backend/Noti
 import { ServiceId } from "../../../../../definitions/backend/ServiceId";
 import I18n from "../../../../i18n";
 import { applicationChangeState } from "../../../../store/actions/application";
-import { loadServicePreference } from "../../../../store/actions/services/servicePreference";
+import { loadServicePreference } from "../../../../features/services/store/actions";
 import { appReducer } from "../../../../store/reducers";
 import { GlobalState } from "../../../../store/reducers/types";
-import { ServicePreferenceResponse } from "../../../../types/services/ServicePreferenceResponse";
+import { ServicePreferenceResponse } from "../../../../features/services/types/ServicePreferenceResponse";
 import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
 import ContactPreferencesToggles from "../index";
 
diff --git a/ts/components/services/ContactPreferencesToggles/index.tsx b/ts/components/services/ContactPreferencesToggles/index.tsx
index 2d8072737d0..07e08a7f6f1 100644
--- a/ts/components/services/ContactPreferencesToggles/index.tsx
+++ b/ts/components/services/ContactPreferencesToggles/index.tsx
@@ -10,19 +10,19 @@ import I18n from "../../../i18n";
 import {
   loadServicePreference,
   upsertServicePreference
-} from "../../../store/actions/services/servicePreference";
+} from "../../../features/services/store/actions";
 import { Dispatch } from "../../../store/actions/types";
 import { useIOSelector } from "../../../store/hooks";
 import { isPremiumMessagesOptInOutEnabledSelector } from "../../../store/reducers/backendStatus";
 import {
   servicePreferenceSelector,
   ServicePreferenceState
-} from "../../../store/reducers/entities/services/servicePreference";
+} from "../../../features/services/store/reducers/servicePreference";
 import { GlobalState } from "../../../store/reducers/types";
 import {
   isServicePreferenceResponseSuccess,
   ServicePreference
-} from "../../../types/services/ServicePreferenceResponse";
+} from "../../../features/services/types/ServicePreferenceResponse";
 import { isStrictSome } from "../../../utils/pot";
 import { showToast } from "../../../utils/showToast";
 import ItemSeparatorComponent from "../../ItemSeparatorComponent";
diff --git a/ts/components/services/LocalServicesWebView.tsx b/ts/components/services/LocalServicesWebView.tsx
index 9f56276605d..3fa9fdebb97 100644
--- a/ts/components/services/LocalServicesWebView.tsx
+++ b/ts/components/services/LocalServicesWebView.tsx
@@ -14,7 +14,7 @@ import { localServicesWebUrl } from "../../config";
 import { useTabItemPressWhenScreenActive } from "../../hooks/useTabItemPressWhenScreenActive";
 import I18n from "../../i18n";
 import { loadServiceDetail } from "../../store/actions/services";
-import { servicesByIdSelector } from "../../store/reducers/entities/services/servicesById";
+import { servicesByIdSelector } from "../../features/services/store/reducers/servicesById";
 import { GlobalState } from "../../store/reducers/types";
 import { isStrictSome } from "../../utils/pot";
 import { showToast } from "../../utils/showToast";
diff --git a/ts/components/services/__tests__/__snapshots__/SectionHeader.test.tsx.snap b/ts/components/services/__tests__/__snapshots__/SectionHeader.test.tsx.snap
index 8213c9a3f98..b9c16fdd5f8 100644
--- a/ts/components/services/__tests__/__snapshots__/SectionHeader.test.tsx.snap
+++ b/ts/components/services/__tests__/__snapshots__/SectionHeader.test.tsx.snap
@@ -17,7 +17,6 @@ exports[`SectionHeader component should match the snapshot 1`] = `
     align="xMidYMid"
     bbHeight={20}
     bbWidth={20}
-    color={4282866285}
     focusable={false}
     height={20}
     importantForAccessibility="no-hide-descendants"
@@ -40,19 +39,26 @@ exports[`SectionHeader component should match the snapshot 1`] = `
         },
       ]
     }
-    tintColor={4282866285}
+    tintColor="#475A6D"
     vbHeight={24}
     vbWidth={24}
     width={20}
   >
-    <RNSVGGroup>
+    <RNSVGGroup
+      fill={
+        Object {
+          "payload": 4278190080,
+          "type": 0,
+        }
+      }
+    >
       <RNSVGPath
         clipRule={0}
         d="M12 18h8a2 2 0 0 0 2-2V9h-4a3 3 0 0 1-3-3V2h-3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Zm9.332-11.987a2 2 0 0 1 .603.987H18a1 1 0 0 1-1-1V2.227a2 2 0 0 1 .406.281l3.926 3.505ZM14 20h-2a4 4 0 0 1-4-4V6H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2Zm2 0h4a4 4 0 0 0 4-4V7.505a4 4 0 0 0-1.336-2.984l-3.926-3.505A4 4 0 0 0 16.074 0H12a4 4 0 0 0-4 4H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4Z"
         fill={
-          Array [
-            2,
-          ]
+          Object {
+            "type": 2,
+          }
         }
         fillRule={0}
         propList={
diff --git a/ts/components/ui/Accordion.tsx b/ts/components/ui/Accordion.tsx
index a7b6cf4f429..b70a346cff8 100644
--- a/ts/components/ui/Accordion.tsx
+++ b/ts/components/ui/Accordion.tsx
@@ -1,22 +1,22 @@
-import { pipe } from "fp-ts/lib/function";
+import { Icon } from "@pagopa/io-app-design-system";
 import * as O from "fp-ts/lib/Option";
+import { pipe } from "fp-ts/lib/function";
 import * as React from "react";
 import { ComponentProps } from "react";
-import { View, StyleSheet } from "react-native";
-import { Icon } from "@pagopa/io-app-design-system";
+import { StyleSheet, View } from "react-native";
 import I18n from "../../i18n";
 import customVariables from "../../theme/variables";
-import { Body } from "../core/typography/Body";
-import { IOStyles } from "../core/variables/IOStyles";
 import ItemSeparatorComponent from "../ItemSeparatorComponent";
 import TouchableDefaultOpacity from "../TouchableDefaultOpacity";
-import Markdown from "./Markdown";
+import { Body } from "../core/typography/Body";
+import { IOStyles } from "../core/variables/IOStyles";
+import LegacyMarkdown from "./Markdown/LegacyMarkdown";
 
 type Props = {
   title: string;
   content: string;
-  onLinkClicked?: ComponentProps<typeof Markdown>["onLinkClicked"];
-  shouldHandleLink?: ComponentProps<typeof Markdown>["shouldHandleLink"];
+  onLinkClicked?: ComponentProps<typeof LegacyMarkdown>["onLinkClicked"];
+  shouldHandleLink?: ComponentProps<typeof LegacyMarkdown>["shouldHandleLink"];
 };
 
 const styles = StyleSheet.create({
@@ -34,7 +34,7 @@ const styles = StyleSheet.create({
  *
  * @param props
  * @constructor
- * @deprecated Please use {@link RawAccordion} or {@link IOAccordion}
+ * @deprecated Please use {@link RawAccordion}
  */
 const Accordion: React.FunctionComponent<Props> = (props: Props) => {
   const [expanded, setExpanded] = React.useState(false);
@@ -69,7 +69,7 @@ const Accordion: React.FunctionComponent<Props> = (props: Props) => {
 
   const renderContent = (content: string) => (
     <View style={styles.pad}>
-      <Markdown
+      <LegacyMarkdown
         shouldHandleLink={props.shouldHandleLink}
         onLinkClicked={(url: string) => {
           pipe(
@@ -80,7 +80,7 @@ const Accordion: React.FunctionComponent<Props> = (props: Props) => {
         }}
       >
         {content}
-      </Markdown>
+      </LegacyMarkdown>
     </View>
   );
 
diff --git a/ts/components/ui/DateTimePicker.tsx b/ts/components/ui/DateTimePicker.tsx
deleted file mode 100644
index fe05df77a2b..00000000000
--- a/ts/components/ui/DateTimePicker.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import * as React from "react";
-import DateTimePickerModal from "react-native-modal-datetime-picker";
-import { useState } from "react";
-import { StyleSheet, View } from "react-native";
-import { IOColors, Icon, VSpacer } from "@pagopa/io-app-design-system";
-import { H5 } from "../core/typography/H5";
-import { H4 } from "../core/typography/H4";
-import { formatDateAsLocal } from "../../utils/dates";
-import TouchableDefaultOpacity from "../TouchableDefaultOpacity";
-import I18n from "../../i18n";
-
-type Props = {
-  date: Date | undefined;
-  onConfirm: (date: Date) => void;
-  label?: string;
-  minimumDate?: Date;
-  blocked?: boolean;
-};
-
-const styles = StyleSheet.create({
-  container: { borderBottomWidth: 1, borderColor: IOColors.bluegreyLight },
-  inputContainer: {
-    flex: 1,
-    flexDirection: "row",
-    justifyContent: "space-between"
-  }
-});
-
-const DateTimePicker: React.FunctionComponent<Props> = (props: Props) => {
-  const [showModal, setShowModal] = useState<boolean>(false);
-
-  const onConfirm = (date: Date) => {
-    props.onConfirm(date);
-    setShowModal(false);
-  };
-
-  const onDismiss = () => setShowModal(false);
-
-  const onPress = () => {
-    if (props.blocked !== true) {
-      setShowModal(true);
-    }
-  };
-
-  return (
-    <View style={styles.container}>
-      {props.label && <H5 color={"bluegreyDark"}>{props.label}</H5>}
-      <VSpacer size={16} />
-      <TouchableDefaultOpacity style={styles.inputContainer} onPress={onPress}>
-        <H4
-          weight={"Regular"}
-          color={props.date ? "bluegrey" : "bluegreyLight"}
-        >
-          {props.date
-            ? formatDateAsLocal(props.date, true, true)
-            : I18n.t("global.dateFormats.dateTimePicker")}
-        </H4>
-        <Icon
-          size={24}
-          color={props.blocked !== true ? "blue" : "bluegreyLight"}
-          name="calendar"
-        />
-      </TouchableDefaultOpacity>
-
-      <DateTimePickerModal
-        minimumDate={props.minimumDate ?? new Date()}
-        isVisible={showModal}
-        mode="date"
-        onConfirm={onConfirm}
-        onCancel={onDismiss}
-      />
-    </View>
-  );
-};
-
-export default DateTimePicker;
diff --git a/ts/components/ui/LoadingIndicator.tsx b/ts/components/ui/LoadingIndicator.tsx
index e41d9debb9a..857bb04ac61 100644
--- a/ts/components/ui/LoadingIndicator.tsx
+++ b/ts/components/ui/LoadingIndicator.tsx
@@ -1,10 +1,8 @@
 import * as React from "react";
-import {
-  LoadingSpinner,
-  useIOExperimentalDesign
-} from "@pagopa/io-app-design-system";
+import { LoadingSpinner } from "@pagopa/io-app-design-system";
 import I18n from "i18n-js";
 import { WithTestID } from "../../types/WithTestID";
+import { useInteractiveElementDefaultColor } from "../../utils/hooks/theme";
 
 export type LoadingIndicator = WithTestID<
   Exclude<
@@ -18,14 +16,14 @@ export const LoadingIndicator = ({
   accessibilityLabel = I18n.t("global.accessibility.activityIndicator.label"),
   testID = "LoadingIndicator"
 }: LoadingIndicator) => {
-  const { isExperimental } = useIOExperimentalDesign();
+  const blueColor = useInteractiveElementDefaultColor();
 
   return (
     <LoadingSpinner
       size={48}
       accessibilityHint={accessibilityHint}
       accessibilityLabel={accessibilityLabel}
-      color={isExperimental ? "blueIO-500" : "blue"}
+      color={blueColor}
       testID={testID}
     />
   );
diff --git a/ts/components/ui/LogoPaymentExtended.tsx b/ts/components/ui/LogoPaymentExtended.tsx
index b53119ddd0c..241891ae9a7 100644
--- a/ts/components/ui/LogoPaymentExtended.tsx
+++ b/ts/components/ui/LogoPaymentExtended.tsx
@@ -3,7 +3,7 @@ import { Image } from "react-native";
 import paypalLogoImage from "../../../img/wallet/payment-methods/paypal-logo.png";
 // sadly no svg is available for paypal, since on Figma an image is used
 import BpayLogo from "../../../img/wallet/payment-methods/bpay_logo_full.svg";
-import { BankLogoOrSkeleton } from "./utils/components/BankLogoOrLoadingSkeleton";
+import { BankLogoOrSkeleton } from "../../features/payments/common/components/utils/BankLogoOrLoadingSkeleton";
 export type LogoPaymentExtendedProps = {
   dimensions: { height: number; width: number };
 } & (
diff --git a/ts/components/ui/Markdown/index.tsx b/ts/components/ui/Markdown/LegacyMarkdown.tsx
similarity index 97%
rename from ts/components/ui/Markdown/index.tsx
rename to ts/components/ui/Markdown/LegacyMarkdown.tsx
index 4e461a6a7f7..ae08a6edc4d 100644
--- a/ts/components/ui/Markdown/index.tsx
+++ b/ts/components/ui/Markdown/LegacyMarkdown.tsx
@@ -25,7 +25,7 @@ import customVariables from "../../../theme/variables";
 import { WithTestID } from "../../../types/WithTestID";
 import { remarkProcessor } from "../../../utils/markdown";
 import { closeInjectedScript } from "../../../utils/webview";
-import MarkdownWebviewComponent from "./MarkdownWebviewComponent";
+import { MarkdownWebviewComponent } from "./MarkdownWebviewComponent";
 import { NOTIFY_BODY_HEIGHT_SCRIPT, NOTIFY_LINK_CLICK_SCRIPT } from "./script";
 
 const INJECTED_JAVASCRIPT = `
@@ -208,7 +208,7 @@ type State = {
 /**
  * A component to render the message markdown as HTML inside a WebView
  */
-class Markdown extends React.PureComponent<Props, State> {
+class LegacyMarkdown extends React.PureComponent<Props, State> {
   private webViewRef = React.createRef<WebView>();
   private subscription: NativeEventSubscription | undefined;
 
@@ -398,6 +398,6 @@ class Markdown extends React.PureComponent<Props, State> {
   };
 }
 
-export type MarkdownProps = OwnProps;
+export type LegacyMarkdownProps = OwnProps;
 
-export default connect()(Markdown);
+export default connect()(LegacyMarkdown);
diff --git a/ts/components/ui/Markdown/LoadingSkeleton.tsx b/ts/components/ui/Markdown/LoadingSkeleton.tsx
new file mode 100644
index 00000000000..88912d8b6e1
--- /dev/null
+++ b/ts/components/ui/Markdown/LoadingSkeleton.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { View } from "react-native";
+import Placeholder from "rn-placeholder";
+import { VSpacer } from "@pagopa/io-app-design-system";
+import I18n from "../../../i18n";
+
+type LoadingSkeletonProps = {
+  testID?: string;
+};
+
+export const LoadingSkeleton = ({ testID }: LoadingSkeletonProps) => (
+  <View
+    accessible={true}
+    accessibilityLabel={I18n.t("global.accessibility.activityIndicator.label")}
+    accessibilityHint={I18n.t("global.accessibility.activityIndicator.hint")}
+    testID={testID}
+  >
+    <View
+      importantForAccessibility="no-hide-descendants"
+      accessibilityElementsHidden={true}
+    >
+      <Placeholder.Box width={"98%"} animate={"fade"} height={21} radius={4} />
+      <VSpacer size={8} />
+      <Placeholder.Box width={"86%"} animate={"fade"} height={21} radius={4} />
+      <VSpacer size={8} />
+      <Placeholder.Box width={"92%"} animate={"fade"} height={21} radius={4} />
+      <VSpacer size={8} />
+      <Placeholder.Box width={"80%"} animate={"fade"} height={21} radius={4} />
+      <VSpacer size={8} />
+      <Placeholder.Box width={"90%"} animate={"fade"} height={21} radius={4} />
+      <VSpacer size={8} />
+      <Placeholder.Box width={"96%"} animate={"fade"} height={21} radius={4} />
+      <VSpacer size={8} />
+      <Placeholder.Box width={"84%"} animate={"fade"} height={21} radius={4} />
+      <VSpacer size={8} />
+      <Placeholder.Box width={"88%"} animate={"fade"} height={21} radius={4} />
+      <VSpacer size={8} />
+      <Placeholder.Box width={"94%"} animate={"fade"} height={21} radius={4} />
+    </View>
+  </View>
+);
diff --git a/ts/components/ui/Markdown/Markdown.tsx b/ts/components/ui/Markdown/Markdown.tsx
new file mode 100644
index 00000000000..6aca1b25ef5
--- /dev/null
+++ b/ts/components/ui/Markdown/Markdown.tsx
@@ -0,0 +1,196 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  AppState,
+  AppStateStatus,
+  InteractionManager,
+  LayoutAnimation,
+  Platform,
+  ScrollView,
+  StyleProp,
+  UIManager,
+  View,
+  ViewStyle
+} from "react-native";
+import WebView from "react-native-webview";
+import { closeInjectedScript } from "../../../utils/webview";
+import { remarkProcessor } from "../../../utils/markdown";
+import { MarkdownWebviewComponent } from "./MarkdownWebviewComponent";
+import { NOTIFY_BODY_HEIGHT_SCRIPT, NOTIFY_LINK_CLICK_SCRIPT } from "./script";
+import { LoadingSkeleton } from "./LoadingSkeleton";
+import { convertOldDemoMarkdownTag, generateHtml } from "./utils";
+
+export type MarkdownProps = {
+  animated?: boolean;
+  /**
+   * The code will be inserted in the html body between
+   * <script> and </script> tags.
+   */
+  avoidTextSelection?: true;
+  children: string;
+  cssStyle?: string;
+  extraBodyHeight?: number;
+  letUserZoom?: boolean;
+  onError?: (error: any) => void;
+  onLinkClicked?: (url: string) => void;
+  onLoadEnd?: () => void;
+  /**
+   * if shouldHandleLink returns true the clicked link will be handled by the Markdown component
+   * otherwise Markdown will ignore it. If shouldHandleLink is not defined assume () => true
+   * @param url
+   */
+  shouldHandleLink?: (url: string) => boolean;
+  testID?: string;
+  webViewStyle?: StyleProp<ViewStyle>;
+  useCustomSortedList?: boolean;
+};
+
+type InternalState = {
+  html?: string;
+  htmlBodyHeight: number;
+  isLoading: boolean;
+  webviewKey: number;
+};
+
+export const Markdown = (props: MarkdownProps) => {
+  const [internalState, setInternalState] = useState<InternalState>({
+    html: undefined,
+    htmlBodyHeight: 0,
+    isLoading: true,
+    webviewKey: 0
+  });
+  const webViewRef = useRef<WebView>(null);
+  const { html, htmlBodyHeight, isLoading, webviewKey } = internalState;
+  const containerStyle: ViewStyle = {
+    height: htmlBodyHeight + (props.extraBodyHeight || 0)
+  };
+  const handleLoadEnd = useCallback(() => {
+    props.onLoadEnd?.();
+    setTimeout(() => {
+      // to avoid yellow box warning
+      // it's ugly but it works https://github.com/react-native-community/react-native-webview/issues/341#issuecomment-466639820
+      webViewRef.current?.injectJavaScript(
+        closeInjectedScript(NOTIFY_BODY_HEIGHT_SCRIPT)
+      );
+    }, 100);
+  }, [props]);
+
+  const compileMarkdownAsync = useCallback(
+    (
+      markdown: string,
+      animated: boolean = false,
+      onError?: (error: any) => void,
+      cssStyle?: string,
+      useCustomSortedList: boolean = false,
+      avoidTextSelection: boolean = false
+    ) => {
+      void InteractionManager.runAfterInteractions(() => {
+        if (animated) {
+          // Animate the layout change
+          // See https://facebook.github.io/react-native/docs/layoutanimation.html
+          if (UIManager.setLayoutAnimationEnabledExperimental) {
+            UIManager.setLayoutAnimationEnabledExperimental(true);
+          }
+          LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+        }
+        remarkProcessor.process(
+          convertOldDemoMarkdownTag(
+            // sanitize html to prevent xss attacks
+            filterXSS(markdown, { stripIgnoreTagBody: ["script"] })
+          ),
+          (error: any, file: any) => {
+            if (error) {
+              onError?.(error);
+              return;
+            }
+            // The check below on `isLoading` is to set the property back to 'false'
+            // value when refreshing with metro, since it is set back to the initial
+            // 'true' value but the underlying MarkdownWebviewComponent does not
+            // reload its content (the html is recompiled but it does not change),
+            // thus, not calling the `handleLoadEnd` callback
+            const html = generateHtml(
+              String(file),
+              cssStyle,
+              useCustomSortedList,
+              avoidTextSelection
+            );
+            setInternalState(currentInternalState => ({
+              ...currentInternalState,
+              isLoading:
+                currentInternalState.isLoading &&
+                currentInternalState.html !== html,
+              html
+            }));
+          }
+        );
+      });
+    },
+    []
+  );
+
+  useEffect(() => {
+    setInternalState(currentInternalState => ({
+      ...currentInternalState,
+      isLoading: true
+    }));
+    compileMarkdownAsync(
+      props.children,
+      props.animated,
+      props.onError,
+      props.cssStyle,
+      props.useCustomSortedList,
+      props.avoidTextSelection
+    );
+
+    const subscription = AppState.addEventListener(
+      "change",
+      (nextAppState: AppStateStatus) => {
+        if (Platform.OS === "ios" && nextAppState === "active") {
+          // Reloads the WebView on iOS. Using reload() on the webview
+          // reference causes the injected javascript to fail
+          setInternalState(currentInternalState => ({
+            ...currentInternalState,
+            webviewKey: currentInternalState.webviewKey + 1
+          }));
+        }
+      }
+    );
+    return () => subscription.remove();
+  }, [compileMarkdownAsync, props]);
+
+  return (
+    <>
+      {isLoading && <LoadingSkeleton testID={props.testID} />}
+      {/* Hide the WebView until we have the htmlBodyHeight */}
+      {html && (
+        <ScrollView nestedScrollEnabled={false} style={containerStyle}>
+          <View style={containerStyle}>
+            <MarkdownWebviewComponent
+              injectedJavascript={NOTIFY_LINK_CLICK_SCRIPT}
+              handleLoadEnd={handleLoadEnd}
+              shouldHandleLink={props.shouldHandleLink}
+              html={html}
+              webviewKey={webviewKey}
+              webViewRef={webViewRef}
+              setLoadingFalse={() =>
+                setInternalState(currentInternalState => ({
+                  ...currentInternalState,
+                  isLoading: false
+                }))
+              }
+              setHtmlBodyHeight={(inputHtmlBodyHeight: number) =>
+                setInternalState(currentInternalState => ({
+                  ...currentInternalState,
+                  htmlBodyHeight: inputHtmlBodyHeight
+                }))
+              }
+              webViewStyle={props.webViewStyle}
+              onLinkClicked={props.onLinkClicked}
+              letUserZoom={props.letUserZoom}
+              testID={props.testID}
+            />
+          </View>
+        </ScrollView>
+      )}
+    </>
+  );
+};
diff --git a/ts/components/ui/Markdown/MarkdownWebviewComponent.tsx b/ts/components/ui/Markdown/MarkdownWebviewComponent.tsx
index 6dc1611c090..75be6f68349 100644
--- a/ts/components/ui/Markdown/MarkdownWebviewComponent.tsx
+++ b/ts/components/ui/Markdown/MarkdownWebviewComponent.tsx
@@ -2,7 +2,7 @@ import { useLinkTo } from "@react-navigation/native";
 import * as E from "fp-ts/lib/Either";
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
-import React from "react";
+import React, { LegacyRef } from "react";
 import { StyleProp, ViewStyle } from "react-native";
 import { WebView } from "react-native-webview";
 import { WebViewMessageEvent } from "react-native-webview/lib/WebViewTypes";
@@ -16,7 +16,7 @@ type Props = {
   handleLoadEnd: () => void;
   html: string;
   webviewKey: number;
-  webViewRef: React.RefObject<WebView>;
+  webViewRef: LegacyRef<WebView>;
   setLoadingFalse: () => void;
   setHtmlBodyHeight: (h: number) => void;
   shouldHandleLink?: (link: string) => boolean;
@@ -26,7 +26,7 @@ type Props = {
   testID?: string;
 };
 
-const MarkdownWebviewComponent = (props: Props) => {
+export const MarkdownWebviewComponent = (props: Props) => {
   const linkTo = useLinkTo();
 
   const handleWebViewMessage = (event: WebViewMessageEvent) => {
@@ -65,7 +65,6 @@ const MarkdownWebviewComponent = (props: Props) => {
       })
     );
   };
-
   return (
     <WebView
       androidCameraAccessDisabled={true}
@@ -90,4 +89,3 @@ const MarkdownWebviewComponent = (props: Props) => {
     />
   );
 };
-export default MarkdownWebviewComponent;
diff --git a/ts/components/ui/Markdown/utils.ts b/ts/components/ui/Markdown/utils.ts
new file mode 100644
index 00000000000..75ca07c1db9
--- /dev/null
+++ b/ts/components/ui/Markdown/utils.ts
@@ -0,0 +1,146 @@
+import { FontWeight, IOColors } from "@pagopa/io-app-design-system";
+import { Platform } from "react-native";
+import * as RNFS from "react-native-fs";
+
+const textColor = IOColors.bluegrey;
+const fontSizeBase = 16;
+const textLinkWeight = "600" as FontWeight;
+const textMessageDetailLinkColor = IOColors.blue;
+const toastColor = IOColors.aquaUltraLight;
+const brandPrimary = IOColors.blue;
+
+const OLD_DEMO_TAG_MARKDOWN_REGEX = /^\[demo\]([\s\S]+?)\[\/demo\]\s*\n{2,}/;
+export const convertOldDemoMarkdownTag = (markdown: string) =>
+  markdown.replace(
+    OLD_DEMO_TAG_MARKDOWN_REGEX,
+    (_, g1: string) => `::div[${g1}]{.io-demo-block}\n`
+  );
+
+export const generateHtml = (
+  content: string,
+  cssStyle?: string,
+  useCustomSortedList: boolean = false,
+  avoidTextSelection: boolean = false
+) => `
+  <!DOCTYPE html>
+  <html>
+    <head>
+      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+    </head>
+    <body>
+    ${GLOBAL_CSS}
+    ${cssStyle ? generateInlineCss(cssStyle) : ""}
+    ${avoidTextSelection ? avoidTextSelectionCSS : ""}
+    ${useCustomSortedList ? generateCustomFontList : ""}
+    ${content}
+    </body>
+  </html>
+  `;
+
+const generateInlineCss = (cssStyle: string) => `<style>
+  ${cssStyle}
+  </style>`;
+
+const TITILLIUM_SANSPRO_FONT_PATH =
+  Platform.OS === "android"
+    ? "file:///android_asset/fonts/TitilliumSansPro-Regular.otf"
+    : `${RNFS.MainBundlePath}/TitilliumSansPro-Regular.otf`;
+
+const TITILLIUM_SANSPRO_BOLD_FONT_PATH =
+  Platform.OS === "android"
+    ? "file:///android_asset/fonts/TitilliumSansPro-Bold.otf"
+    : `${RNFS.MainBundlePath}/TitilliumSansPro-Bold.otf`;
+
+const GLOBAL_CSS = `
+<style>
+@font-face {
+  font-family: 'Titillium SansPro';
+  font-style: normal;
+  font-weight: normal;
+  src: url('${TITILLIUM_SANSPRO_FONT_PATH}');
+}
+@font-face {
+  font-family: 'Titillium SansPro';
+  font-style: normal;
+  font-weight: bold;
+  src: url('${TITILLIUM_SANSPRO_BOLD_FONT_PATH}');
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  color: ${textColor};
+  font-size: ${fontSizeBase}px;
+  font-family: 'Titillium SansPro';
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1.3333em;
+}
+
+p {
+  margin-block-start: 0;
+  font-size: ${fontSizeBase}px;
+}
+
+ul, ol {
+  padding-left: 32px;
+}
+
+a {
+  font-weight: ${textLinkWeight};
+  color: ${textMessageDetailLinkColor};
+}
+
+div.custom-block.io-demo-block {
+  background-color: ${toastColor};
+  border-radius: 4px;
+  margin-bottom: 32px;
+  padding: 4px 8px;
+}
+
+div.custom-block.io-demo-block .custom-block-body {
+  position: relative;
+  padding-right: 48px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-weight: bold;
+}
+
+</style>
+`;
+
+const avoidTextSelectionCSS = `<style>
+    body {
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      -khtml-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+    }
+  </style>`;
+
+const generateCustomFontList = `<style>
+ol {
+  list-style: none;
+  counter-reset: li;
+}
+ol li::before {
+  content: counter(li);
+  counter-increment: li;
+  color: ${brandPrimary};
+  display: inline-block;
+  width: 1em;
+  margin-left: -1.5em;
+  margin-right: 0.5em;
+  text-align: right;
+  direction: rtl;
+  font-weight: bold;
+  font-size: 32px;
+  line-height: 18px;
+}
+</style>`;
diff --git a/ts/components/ui/ProgressIndicator.tsx b/ts/components/ui/ProgressIndicator.tsx
new file mode 100644
index 00000000000..646aedffce9
--- /dev/null
+++ b/ts/components/ui/ProgressIndicator.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import { ProgressLoader } from "@pagopa/io-app-design-system";
+import { useInteractiveElementDefaultColor } from "../../utils/hooks/theme";
+
+export type ProgressIndicator = Exclude<
+  React.ComponentProps<typeof ProgressLoader>,
+  "color"
+>;
+
+export const ProgressIndicator = (props: ProgressIndicator) => {
+  const blueColor = useInteractiveElementDefaultColor();
+
+  return <ProgressLoader progress={props.progress} color={blueColor} />;
+};
diff --git a/ts/components/ui/RNavScreenWithLargeHeader.tsx b/ts/components/ui/RNavScreenWithLargeHeader.tsx
index 11e012f0174..59320a8de5d 100644
--- a/ts/components/ui/RNavScreenWithLargeHeader.tsx
+++ b/ts/components/ui/RNavScreenWithLargeHeader.tsx
@@ -22,14 +22,20 @@ import {
 import { SupportRequestParams } from "../../hooks/useStartSupportRequest";
 import I18n from "../../i18n";
 
+export type LargeHeaderTitleProps = {
+  label: string;
+  accessibilityLabel?: string;
+  testID?: string;
+};
+
 type Props = {
   children: React.ReactNode;
   fixedBottomSlot?: React.ReactNode;
-  title: string;
-  titleTestID?: string;
+  title: LargeHeaderTitleProps;
   description?: string;
   goBack?: BackProps["goBack"];
   headerActionsProp?: HeaderActionProps;
+  canGoback?: boolean;
 } & SupportRequestParams;
 
 /**
@@ -44,13 +50,14 @@ type Props = {
  * @param contextualHelpMarkdown
  * @param faqCategories
  * @param headerProps
+ * @param canGoback allows to show/not show the back button and consequently does not pass to the HeaderSecondLevel the props that would display the back button
  */
 export const RNavScreenWithLargeHeader = ({
   children,
   fixedBottomSlot,
   title,
-  titleTestID,
   goBack,
+  canGoback = true,
   description,
   contextualHelp,
   contextualHelpMarkdown,
@@ -72,10 +79,8 @@ export const RNavScreenWithLargeHeader = ({
     translationY.value = event.contentOffset.y;
   });
 
-  const headerProps: ComponentProps<typeof HeaderSecondLevel> = useHeaderProps({
-    backAccessibilityLabel: I18n.t("global.buttons.back"),
-    goBack: goBack ?? navigation.goBack,
-    title,
+  const headerPropsWithoutGoBack = {
+    title: title.label,
     scrollValues: {
       contentOffsetY: translationY,
       triggerOffset: titleHeight
@@ -84,7 +89,17 @@ export const RNavScreenWithLargeHeader = ({
     contextualHelpMarkdown,
     faqCategories,
     ...headerActionsProp
-  });
+  };
+
+  const headerProps: ComponentProps<typeof HeaderSecondLevel> = useHeaderProps(
+    canGoback
+      ? {
+          ...headerPropsWithoutGoBack,
+          backAccessibilityLabel: I18n.t("global.buttons.back"),
+          goBack: goBack ?? navigation.goBack
+        }
+      : headerPropsWithoutGoBack
+  );
 
   useLayoutEffect(() => {
     navigation.setOptions({
@@ -109,7 +124,13 @@ export const RNavScreenWithLargeHeader = ({
           style={IOStyles.horizontalContentPadding}
           onLayout={getTitleHeight}
         >
-          <H2 testID={titleTestID}>{title}</H2>
+          <H2
+            testID={title.testID}
+            accessibilityLabel={title.accessibilityLabel ?? title.label}
+            accessibilityRole="header"
+          >
+            {title.label}
+          </H2>
         </View>
 
         {description && (
diff --git a/ts/components/ui/TextboxWithSuggestion.tsx b/ts/components/ui/TextboxWithSuggestion.tsx
deleted file mode 100644
index 8c72e2d690d..00000000000
--- a/ts/components/ui/TextboxWithSuggestion.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import * as React from "react";
-import { ReactNode, useContext, useState } from "react";
-import { Body, Container, Content, Left, Right } from "native-base";
-import { View, StyleSheet, SafeAreaView } from "react-native";
-import { IOColors, Icon, HSpacer, VSpacer } from "@pagopa/io-app-design-system";
-import { H4 } from "../core/typography/H4";
-import { H5 } from "../core/typography/H5";
-import TouchableDefaultOpacity from "../TouchableDefaultOpacity";
-import { IOStyles } from "../core/variables/IOStyles";
-import { LabelledItem } from "../LabelledItem";
-import ButtonDefaultOpacity from "../ButtonDefaultOpacity";
-import AppHeader from "./AppHeader";
-import { LightModalContext } from "./LightModal";
-
-const styles = StyleSheet.create({
-  container: {
-    borderBottomWidth: 1,
-    paddingBottom: 10
-  },
-  inputContainer: {
-    flexDirection: "row",
-    justifyContent: "space-between"
-  }
-});
-
-/**
- * Props explanation:
- * - onChangeText -> method that notify when the user changes the searching text in the modal.
- * - title -> the title of the modal screen.
- * - label -> displayed on top the search text-box both.
- * - placeholder -> placeholder of the search text-box.
- * - showModalInputTextbox -> boolean that control the input textbox in the modal
- * - wrappedFlatlist -> the Flatlist component that show the suggestions that the user can choose from. Note that if the list needs to react
- *                      and change the showed data when the text change a connected component that wrap the Flatlist is needed.
- */
-type CommonProps = {
-  onChangeText?: (value: string) => void;
-  title: string;
-  label: string;
-  placeholder: string;
-  showModalInputTextbox: boolean;
-  wrappedFlatlist: ReactNode;
-};
-
-/**
- * Props explanation:
- * - selectedValue -> value to show in the initial textbox.
- * - disabled -> if true disable the onPress on the initial textBox and show the border light gray
- */
-type Props = {
-  selectedValue?: string;
-  disabled?: boolean;
-  onClose?: () => void;
-} & CommonProps;
-
-type ModalProps = {
-  onClose: () => void;
-} & CommonProps;
-
-const TextboxWithSuggestionModal = (props: ModalProps) => {
-  const [inputValue, setInputValue] = useState<string>("");
-  return (
-    <Container>
-      <AppHeader>
-        <Left>
-          <ButtonDefaultOpacity onPress={props.onClose} transparent={true}>
-            <Icon name="closeLarge" />
-          </ButtonDefaultOpacity>
-        </Left>
-        <Body style={{ alignItems: "center", marginRight: 32 }}>
-          <H5 weight={"SemiBold"} color={"bluegrey"}>
-            {props.title}
-          </H5>
-        </Body>
-        <Right />
-      </AppHeader>
-      <SafeAreaView style={IOStyles.flex}>
-        <Content style={IOStyles.flex}>
-          {props.showModalInputTextbox && (
-            <>
-              <LabelledItem
-                iconPosition={"right"}
-                label={props.label}
-                inputProps={{
-                  value: inputValue,
-                  onChangeText: v => {
-                    setInputValue(v);
-                    props.onChangeText?.(v);
-                  },
-                  placeholder: props.placeholder
-                }}
-              />
-              <VSpacer size={24} />
-            </>
-          )}
-          {props.wrappedFlatlist}
-        </Content>
-      </SafeAreaView>
-    </Container>
-  );
-};
-
-/**
- * This component is a wrapper around a modal that contains:
- * - a LabelledItem component
- * - a Flatlist that shows a list of results from which the user has to choose
- * A callback is available:
- * - onChangeText -> executed when the user inserts or cancels some character from the LabelledItem
- * @param props
- * @constructor
- */
-const TextboxWithSuggestion = (props: Props) => {
-  const { showModal, hideModal } = useContext(LightModalContext);
-
-  const borderBottomColor = props.disabled
-    ? IOColors.bluegreyLight
-    : IOColors.bluegreyDark;
-  return (
-    <>
-      <View style={[styles.container, { borderBottomColor }]}>
-        <View style={{ flex: 1, flexDirection: "row" }}>
-          <H5 color={"bluegreyDark"}>{props.label}</H5>
-          <HSpacer size={16} />
-        </View>
-        <VSpacer size={16} />
-        <TouchableDefaultOpacity
-          style={styles.inputContainer}
-          disabled={props.disabled}
-          onPress={() =>
-            showModal(
-              <TextboxWithSuggestionModal
-                title={props.title}
-                label={props.label}
-                placeholder={props.placeholder}
-                onClose={() => {
-                  hideModal();
-                  props.onClose?.();
-                }}
-                onChangeText={props.onChangeText}
-                showModalInputTextbox={props.showModalInputTextbox}
-                wrappedFlatlist={props.wrappedFlatlist}
-              />
-            )
-          }
-        >
-          {props.selectedValue ? (
-            <H4 weight={"Regular"} color={"bluegrey"}>
-              {props.selectedValue}
-            </H4>
-          ) : (
-            <H4 weight={"Regular"} color={"bluegreyLight"}>
-              {props.placeholder}
-            </H4>
-          )}
-        </TouchableDefaultOpacity>
-      </View>
-    </>
-  );
-};
-
-export default TextboxWithSuggestion;
diff --git a/ts/components/ui/__test__/__snapshots__/BoxedRefreshIndicator.test.tsx.snap b/ts/components/ui/__test__/__snapshots__/BoxedRefreshIndicator.test.tsx.snap
index a0c0c9aebab..bce0f1fd1fe 100644
--- a/ts/components/ui/__test__/__snapshots__/BoxedRefreshIndicator.test.tsx.snap
+++ b/ts/components/ui/__test__/__snapshots__/BoxedRefreshIndicator.test.tsx.snap
@@ -113,6 +113,12 @@ exports[`BoxedRefreshIndicator Should match all-properties snapshot 1`] = `
             />
           </RNSVGDefs>
           <RNSVGGroup
+            fill={
+              Object {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
             propList={
               Array [
                 "strokeWidth",
@@ -122,41 +128,64 @@ exports[`BoxedRefreshIndicator Should match all-properties snapshot 1`] = `
           >
             <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={
-                Array [
-                  1,
-                  "spinner-secondHalf",
-                ]
+                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={
-                Array [
-                  1,
-                  "spinner-firstHalf",
-                ]
+                Object {
+                  "brushRef": "spinner-firstHalf",
+                  "type": 1,
+                }
               }
             />
             <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",
                   "strokeLinecap",
                 ]
               }
-              stroke={4278927075}
+              stroke={
+                Object {
+                  "payload": 4278927075,
+                  "type": 0,
+                }
+              }
               strokeLinecap={1}
             />
           </RNSVGGroup>
@@ -284,6 +313,12 @@ exports[`BoxedRefreshIndicator Should match base snapshot 1`] = `
             />
           </RNSVGDefs>
           <RNSVGGroup
+            fill={
+              Object {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
             propList={
               Array [
                 "strokeWidth",
@@ -293,41 +328,64 @@ exports[`BoxedRefreshIndicator Should match base snapshot 1`] = `
           >
             <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={
-                Array [
-                  1,
-                  "spinner-secondHalf",
-                ]
+                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={
-                Array [
-                  1,
-                  "spinner-firstHalf",
-                ]
+                Object {
+                  "brushRef": "spinner-firstHalf",
+                  "type": 1,
+                }
               }
             />
             <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",
                   "strokeLinecap",
                 ]
               }
-              stroke={4278927075}
+              stroke={
+                Object {
+                  "payload": 4278927075,
+                  "type": 0,
+                }
+              }
               strokeLinecap={1}
             />
           </RNSVGGroup>
diff --git a/ts/components/ui/__test__/__snapshots__/TabItem.test.tsx.snap b/ts/components/ui/__test__/__snapshots__/TabItem.test.tsx.snap
index 48f7f0caaae..e805818fb1a 100644
--- a/ts/components/ui/__test__/__snapshots__/TabItem.test.tsx.snap
+++ b/ts/components/ui/__test__/__snapshots__/TabItem.test.tsx.snap
@@ -49,7 +49,6 @@ exports[`TabItem should match the snapshot with dark color 1`] = `
       align="xMidYMid"
       bbHeight={16}
       bbWidth={16}
-      color={4294967295}
       focusable={false}
       height={16}
       importantForAccessibility="no-hide-descendants"
@@ -72,19 +71,26 @@ exports[`TabItem should match the snapshot with dark color 1`] = `
           },
         ]
       }
-      tintColor={4294967295}
+      tintColor="#FFFFFF"
       vbHeight={24}
       vbWidth={24}
       width={16}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGPath
           clipRule={0}
           d="M10.2605 2.03943c.7664-1.35075 2.7127-1.35075 3.4791 0l2.729 4.81004 5.4179 1.10907c1.5215.31145 2.1229 2.16256 1.0751 3.30876l-3.7313 4.0819.6194 5.4954c.174 1.5433-1.4006 2.6873-2.8146 2.045L12 20.6022l-5.03505 2.2874c-1.41396.6423-2.98857-.5017-2.81462-2.045l.61945-5.4954-3.73131-4.0819C-.00935 10.1211.59211 8.26998 2.11356 7.95854l5.41793-1.10907 2.72901-4.81004ZM12 3.02637 9.27102 7.83641a2.00003 2.00003 0 0 1-1.33844.97243L2.51465 9.91791l3.7313 4.08179c.38952.4262.57591.9998.51124 1.5735l-.61944 5.4955 5.03505-2.2874c.5257-.2387 1.1288-.2388 1.6544 0l5.0351 2.2874-.6194-5.4955a2.00015 2.00015 0 0 1 .5112-1.5735l3.7313-4.08179-5.4179-1.10907a1.99973 1.99973 0 0 1-1.3384-.97243L12 3.02637Z"
           fill={
-            Array [
-              2,
-            ]
+            Object {
+              "type": 2,
+            }
           }
           fillRule={0}
           propList={
@@ -185,7 +191,6 @@ exports[`TabItem should match the snapshot with dark color and selected state 1`
       align="xMidYMid"
       bbHeight={16}
       bbWidth={16}
-      color={4281019960}
       focusable={false}
       height={16}
       importantForAccessibility="no-hide-descendants"
@@ -208,19 +213,26 @@ exports[`TabItem should match the snapshot with dark color and selected state 1`
           },
         ]
       }
-      tintColor={4281019960}
+      tintColor="#2B2E38"
       vbHeight={24}
       vbWidth={24}
       width={16}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGPath
           clipRule={0}
           d="M10.2576 2.04309c.7663-1.35075 2.7127-1.35075 3.479 0l2.7291 4.81004 5.4179 1.10907c1.5215.31145 2.1229 2.1625 1.0751 3.3088l-3.7313 4.0818.6194 5.4955c.174 1.5432-1.4006 2.6873-2.8146 2.0449l-5.0351-2.2873-5.03508 2.2873c-1.41396.6424-2.98857-.5017-2.81462-2.0449l.61945-5.4955-3.73131-4.0818C-.01228 10.1247.58918 8.27365 2.11063 7.9622l5.41793-1.10907 2.72904-4.81004Z"
           fill={
-            Array [
-              2,
-            ]
+            Object {
+              "type": 2,
+            }
           }
           fillRule={0}
           propList={
@@ -398,7 +410,6 @@ exports[`TabItem should match the snapshot with full width 1`] = `
       align="xMidYMid"
       bbHeight={16}
       bbWidth={16}
-      color={4281019960}
       focusable={false}
       height={16}
       importantForAccessibility="no-hide-descendants"
@@ -421,19 +432,26 @@ exports[`TabItem should match the snapshot with full width 1`] = `
           },
         ]
       }
-      tintColor={4281019960}
+      tintColor="#2B2E38"
       vbHeight={24}
       vbWidth={24}
       width={16}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGPath
           clipRule={0}
           d="M10.2576 2.04309c.7663-1.35075 2.7127-1.35075 3.479 0l2.7291 4.81004 5.4179 1.10907c1.5215.31145 2.1229 2.1625 1.0751 3.3088l-3.7313 4.0818.6194 5.4955c.174 1.5432-1.4006 2.6873-2.8146 2.0449l-5.0351-2.2873-5.03508 2.2873c-1.41396.6424-2.98857-.5017-2.81462-2.0449l.61945-5.4955-3.73131-4.0818C-.01228 10.1247.58918 8.27365 2.11063 7.9622l5.41793-1.10907 2.72904-4.81004Z"
           fill={
-            Array [
-              2,
-            ]
+            Object {
+              "type": 2,
+            }
           }
           fillRule={0}
           propList={
@@ -534,7 +552,6 @@ exports[`TabItem should match the snapshot with icons 1`] = `
       align="xMidYMid"
       bbHeight={16}
       bbWidth={16}
-      color={4284705666}
       focusable={false}
       height={16}
       importantForAccessibility="no-hide-descendants"
@@ -557,19 +574,26 @@ exports[`TabItem should match the snapshot with icons 1`] = `
           },
         ]
       }
-      tintColor={4284705666}
+      tintColor="#636B82"
       vbHeight={24}
       vbWidth={24}
       width={16}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGPath
           clipRule={0}
           d="M10.2605 2.03943c.7664-1.35075 2.7127-1.35075 3.4791 0l2.729 4.81004 5.4179 1.10907c1.5215.31145 2.1229 2.16256 1.0751 3.30876l-3.7313 4.0819.6194 5.4954c.174 1.5433-1.4006 2.6873-2.8146 2.045L12 20.6022l-5.03505 2.2874c-1.41396.6423-2.98857-.5017-2.81462-2.045l.61945-5.4954-3.73131-4.0819C-.00935 10.1211.59211 8.26998 2.11356 7.95854l5.41793-1.10907 2.72901-4.81004ZM12 3.02637 9.27102 7.83641a2.00003 2.00003 0 0 1-1.33844.97243L2.51465 9.91791l3.7313 4.08179c.38952.4262.57591.9998.51124 1.5735l-.61944 5.4955 5.03505-2.2874c.5257-.2387 1.1288-.2388 1.6544 0l5.0351 2.2874-.6194-5.4955a2.00015 2.00015 0 0 1 .5112-1.5735l3.7313-4.08179-5.4179-1.10907a1.99973 1.99973 0 0 1-1.3384-.97243L12 3.02637Z"
           fill={
-            Array [
-              2,
-            ]
+            Object {
+              "type": 2,
+            }
           }
           fillRule={0}
           propList={
diff --git a/ts/components/ui/cards/payment/__test__/__snapshots__/PaymentCards.test.tsx.snap b/ts/components/ui/cards/payment/__test__/__snapshots__/PaymentCards.test.tsx.snap
deleted file mode 100644
index 6d706f86b20..00000000000
--- a/ts/components/ui/cards/payment/__test__/__snapshots__/PaymentCards.test.tsx.snap
+++ /dev/null
@@ -1,1631 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PaymentCardBig component matches snapshot for loading 1`] = `
-<View
-  style={
-    Object {
-      "flex": 1,
-    }
-  }
->
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
-    style={
-      Array [
-        Object {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
-        Object {
-          "zIndex": 1,
-        }
-      }
-    >
-      <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
-      >
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
-              }
-            }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
-              }
-            }
-          />
-          <View
-            pointerEvents="box-none"
-            style={
-              Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              pointerEvents="box-none"
-              style={
-                Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
-                collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
-                  }
-                }
-              >
-                WALLET_HOME
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
-          pointerEvents="box-none"
-          style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
-            Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            needsOffscreenAlphaCompositing={false}
-            pointerEvents="box-none"
-            style={
-              Object {
-                "flex": 1,
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={7}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              style={
-                Object {
-                  "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                pointerEvents="none"
-                style={
-                  Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
-                      Object {
-                        "backgroundColor": "#FFFFFF",
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-              >
-                <View
-                  style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      Object {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Object {
-                          "alignContent": "space-between",
-                          "alignItems": "flex-start",
-                          "backgroundColor": "#E8EBF1",
-                          "borderRadius": 16,
-                          "flex": 1,
-                          "height": 207,
-                          "justifyContent": "space-between",
-                          "padding": 24,
-                          "width": "100%",
-                        }
-                      }
-                      testID="undefined-skeleton"
-                    >
-                      <View>
-                        <View
-                          collapsable={false}
-                          style={
-                            Object {
-                              "opacity": 0.5,
-                            }
-                          }
-                        >
-                          <View
-                            color="#D2D6E3"
-                            height={24}
-                            radius={8}
-                            style={
-                              Object {
-                                "backgroundColor": "#D2D6E3",
-                                "borderRadius": 8,
-                                "height": 24,
-                                "width": 164,
-                              }
-                            }
-                            width={164}
-                          />
-                        </View>
-                        <View
-                          style={
-                            Object {
-                              "height": 16,
-                            }
-                          }
-                        />
-                        <View
-                          collapsable={false}
-                          style={
-                            Object {
-                              "opacity": 0.5,
-                            }
-                          }
-                        >
-                          <View
-                            color="#D2D6E3"
-                            height={16}
-                            radius={8}
-                            style={
-                              Object {
-                                "backgroundColor": "#D2D6E3",
-                                "borderRadius": 8,
-                                "height": 16,
-                                "width": 117,
-                              }
-                            }
-                            width={117}
-                          />
-                        </View>
-                      </View>
-                      <View>
-                        <View
-                          collapsable={false}
-                          style={
-                            Object {
-                              "opacity": 0.5,
-                            }
-                          }
-                        >
-                          <View
-                            color="#D2D6E3"
-                            height={16}
-                            radius={8}
-                            style={
-                              Object {
-                                "backgroundColor": "#D2D6E3",
-                                "borderRadius": 8,
-                                "height": 16,
-                                "width": 97,
-                              }
-                            }
-                            width={97}
-                          />
-                        </View>
-                        <View
-                          style={
-                            Object {
-                              "height": 4,
-                            }
-                          }
-                        />
-                        <View
-                          collapsable={false}
-                          style={
-                            Object {
-                              "opacity": 0.5,
-                            }
-                          }
-                        >
-                          <View
-                            color="#D2D6E3"
-                            height={24}
-                            radius={8}
-                            style={
-                              Object {
-                                "backgroundColor": "#D2D6E3",
-                                "borderRadius": 8,
-                                "height": 24,
-                                "width": 164,
-                              }
-                            }
-                            width={164}
-                          />
-                        </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </RNCSafeAreaProvider>
-</View>
-`;
-
-exports[`PaymentCardBig component matches snapshot for paypal 1`] = `
-<View
-  style={
-    Object {
-      "flex": 1,
-    }
-  }
->
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
-    style={
-      Array [
-        Object {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
-        Object {
-          "zIndex": 1,
-        }
-      }
-    >
-      <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
-      >
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
-              }
-            }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
-              }
-            }
-          />
-          <View
-            pointerEvents="box-none"
-            style={
-              Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              pointerEvents="box-none"
-              style={
-                Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
-                collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
-                  }
-                }
-              >
-                WALLET_HOME
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
-          pointerEvents="box-none"
-          style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
-            Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            needsOffscreenAlphaCompositing={false}
-            pointerEvents="box-none"
-            style={
-              Object {
-                "flex": 1,
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={8}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              style={
-                Object {
-                  "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                pointerEvents="none"
-                style={
-                  Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
-                      Object {
-                        "backgroundColor": "#FFFFFF",
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-              >
-                <View
-                  style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      Object {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Object {
-                          "alignContent": "space-between",
-                          "alignItems": "flex-start",
-                          "backgroundColor": "#E8EBF1",
-                          "borderRadius": 16,
-                          "flex": 1,
-                          "height": 207,
-                          "justifyContent": "space-between",
-                          "padding": 24,
-                          "width": "100%",
-                        }
-                      }
-                    >
-                      <Image
-                        accessibilityLabel="PayPal"
-                        accessible={true}
-                        resizeMode="contain"
-                        source={
-                          Object {
-                            "testUri": "../../../img/wallet/payment-methods/paypal-logo.png",
-                          }
-                        }
-                        style={
-                          Object {
-                            "height": 32,
-                            "width": 114,
-                          }
-                        }
-                      />
-                      <View
-                        style={
-                          Object {
-                            "height": 8,
-                          }
-                        }
-                      />
-                      <Text
-                        accessibilityLabel="account: someEmail@test.com"
-                        accessible={true}
-                        allowFontScaling={false}
-                        color="black"
-                        defaultColor="black"
-                        defaultWeight="SemiBold"
-                        ellipsizeMode="tail"
-                        font="TitilliumWeb"
-                        fontStyle={
-                          Object {
-                            "fontSize": 18,
-                            "lineHeight": 25,
-                          }
-                        }
-                        numberOfLines={1}
-                        style={
-                          Array [
-                            Object {
-                              "width": "75%",
-                            },
-                            Object {
-                              "fontSize": 18,
-                              "lineHeight": 25,
-                            },
-                            Object {
-                              "color": "#0E0F13",
-                              "fontFamily": "Titillium Web",
-                              "fontStyle": "normal",
-                              "fontWeight": "600",
-                            },
-                          ]
-                        }
-                        weight="SemiBold"
-                      >
-                        someEmail@test.com
-                      </Text>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </RNCSafeAreaProvider>
-</View>
-`;
-
-exports[`PaymentCardSmall component matches snapshot for loading 1`] = `
-<View
-  style={
-    Object {
-      "flex": 1,
-    }
-  }
->
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
-    style={
-      Array [
-        Object {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
-        Object {
-          "zIndex": 1,
-        }
-      }
-    >
-      <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
-      >
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
-              }
-            }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
-              }
-            }
-          />
-          <View
-            pointerEvents="box-none"
-            style={
-              Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              pointerEvents="box-none"
-              style={
-                Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
-                collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
-                  }
-                }
-              >
-                WALLET_HOME
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
-          pointerEvents="box-none"
-          style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
-            Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            needsOffscreenAlphaCompositing={false}
-            pointerEvents="box-none"
-            style={
-              Object {
-                "flex": 1,
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={1}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              style={
-                Object {
-                  "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                pointerEvents="none"
-                style={
-                  Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
-                      Object {
-                        "backgroundColor": "#FFFFFF",
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-              >
-                <View
-                  style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      Object {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Array [
-                          Object {
-                            "alignContent": "center",
-                            "alignItems": "flex-start",
-                            "borderRadius": 8,
-                            "flex": 1,
-                            "flexBasis": 160,
-                            "flexGrow": 0,
-                            "justifyContent": "center",
-                            "padding": 16,
-                            "width": 160,
-                          },
-                          Object {
-                            "backgroundColor": "#E8EBF1",
-                          },
-                        ]
-                      }
-                      testID="undefined-skeleton"
-                    >
-                      <View
-                        collapsable={false}
-                        style={
-                          Object {
-                            "opacity": 0.5,
-                          }
-                        }
-                      >
-                        <View
-                          color="#D2D6E3"
-                          height={24}
-                          radius={8}
-                          style={
-                            Object {
-                              "backgroundColor": "#D2D6E3",
-                              "borderRadius": 8,
-                              "height": 24,
-                              "width": 24,
-                            }
-                          }
-                          width={24}
-                        />
-                      </View>
-                      <View
-                        style={
-                          Object {
-                            "height": 8,
-                          }
-                        }
-                      />
-                      <View
-                        collapsable={false}
-                        style={
-                          Object {
-                            "opacity": 0.5,
-                          }
-                        }
-                      >
-                        <View
-                          color="#D2D6E3"
-                          height={16}
-                          radius={8}
-                          style={
-                            Object {
-                              "backgroundColor": "#D2D6E3",
-                              "borderRadius": 8,
-                              "height": 16,
-                              "width": 125,
-                            }
-                          }
-                          width={125}
-                        />
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </RNCSafeAreaProvider>
-</View>
-`;
-
-exports[`PaymentCardSmall component matches snapshot for paypal 1`] = `
-<View
-  style={
-    Object {
-      "flex": 1,
-    }
-  }
->
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
-    style={
-      Array [
-        Object {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
-        Object {
-          "zIndex": 1,
-        }
-      }
-    >
-      <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
-      >
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
-              }
-            }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
-              }
-            }
-          />
-          <View
-            pointerEvents="box-none"
-            style={
-              Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              pointerEvents="box-none"
-              style={
-                Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
-                collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
-                  }
-                }
-              >
-                WALLET_HOME
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
-          pointerEvents="box-none"
-          style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
-            Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            needsOffscreenAlphaCompositing={false}
-            pointerEvents="box-none"
-            style={
-              Object {
-                "flex": 1,
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={2}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              style={
-                Object {
-                  "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                pointerEvents="none"
-                style={
-                  Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
-                      Object {
-                        "backgroundColor": "#FFFFFF",
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-              >
-                <View
-                  style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      Object {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Object {
-                          "alignContent": "center",
-                          "alignItems": "flex-start",
-                          "backgroundColor": "#E8EBF1",
-                          "borderRadius": 8,
-                          "flex": 1,
-                          "flexBasis": 160,
-                          "flexGrow": 0,
-                          "justifyContent": "center",
-                          "padding": 16,
-                          "width": 160,
-                        }
-                      }
-                    >
-                      <View
-                        style={
-                          Object {
-                            "alignItems": "center",
-                            "flex": 1,
-                            "flexDirection": "row",
-                            "justifyContent": "space-between",
-                            "width": "100%",
-                          }
-                        }
-                      >
-                        <RNSVGSvgView
-                          align="xMidYMid"
-                          bbHeight={24}
-                          bbWidth={24}
-                          focusable={false}
-                          height={24}
-                          meetOrSlice={0}
-                          minX={0}
-                          minY={0}
-                          style={
-                            Array [
-                              Object {
-                                "backgroundColor": "transparent",
-                                "borderWidth": 0,
-                              },
-                              Object {
-                                "flex": 0,
-                                "height": 24,
-                                "width": 24,
-                              },
-                            ]
-                          }
-                          vbHeight={24}
-                          vbWidth={24}
-                          width={24}
-                        >
-                          <RNSVGGroup>
-                            <RNSVGPath
-                              d="M19.2206 8.31688c.2592-1.63369 0-2.74569-.8944-3.7513-.9846-1.10858-2.7618-1.5845-5.0354-1.5845H6.68879c-.22503.00029-.44257.07995-.61351.22464-.17095.1447-.28408.34495-.31906.56475L3.0071 21.0043a.55436.55436 0 0 0 .01458.2396.55941.55941 0 0 0 .11462.2117.56714.56714 0 0 0 .19365.1448.57183.57183 0 0 0 .23716.0514h4.07508l-.28116 1.7641a.4841.4841 0 0 0 .01218.2085.48744.48744 0 0 0 .09894.1845.49417.49417 0 0 0 .16771.127.49976.49976 0 0 0 .20597.0463h3.43527c.1952-.0013.3837-.071.532-.1966.1483-.1257.2467-.2992.2779-.4898l.0347-.1728.6468-4.0567.0416-.2288c.0316-.1915.1309-.3657.2804-.4914.1494-.1257.3391-.1949.5353-.1951h.5138c3.3276 0 5.9332-1.3362 6.6946-5.203.3182-1.6154.1539-2.96311-.6873-3.91152-.2664-.29417-.5852-.53733-.9407-.71731"
-                              fill={4278218976}
-                              propList={
-                                Array [
-                                  "fill",
-                                ]
-                              }
-                            />
-                            <RNSVGPath
-                              d="M19.2206 8.31688c.2592-1.63369 0-2.74569-.8944-3.7513-.9846-1.10858-2.7618-1.5845-5.0354-1.5845H6.68879c-.22503.00029-.44257.07995-.61351.22464-.17095.1447-.28408.34495-.31906.56475L3.0071 21.0043a.55436.55436 0 0 0 .01458.2396.55941.55941 0 0 0 .11462.2117.56714.56714 0 0 0 .19365.1448.57183.57183 0 0 0 .23716.0514h4.07508l1.02397-6.4181-.03124.2014c.03393-.2189.14585-.4187.31557-.5632.16972-.1445.38608-.2243.61006-.225h1.93685c3.8044 0 6.7826-1.5285 7.6527-5.94905.0254-.13042.0474-.25741.0671-.38211"
-                              fill={4278197348}
-                              propList={
-                                Array [
-                                  "fill",
-                                ]
-                              }
-                            />
-                            <RNSVGPath
-                              d="M9.76535 8.33862a.81197.81197 0 0 1 .15504-.36155c.08061-.10626.18631-.19146.30781-.24823a.82557.82557 0 0 1 .3563-.08008h5.1743a10.85686 10.85686 0 0 1 1.7066.12356c.1493.02288.2951.05034.4362.08123.1412.03089.2777.06635.4108.1041l.1955.06064c.2463.07968.4855.17956.715.29859.2592-1.63369.0001-2.74569-.8943-3.7513-.9847-1.10858-2.7619-1.5845-5.0355-1.5845H6.68879c-.22503.00029-.44257.07995-.61351.22464-.17095.1447-.28408.34495-.31906.56475L3.0071 21.0043a.55436.55436 0 0 0 .01458.2396.55941.55941 0 0 0 .11462.2117.56714.56714 0 0 0 .19365.1448.57183.57183 0 0 0 .23716.0514h4.07508l1.02397-6.4181 1.09919-6.89508Z"
-                              fill={4278202503}
-                              propList={
-                                Array [
-                                  "fill",
-                                ]
-                              }
-                            />
-                          </RNSVGGroup>
-                        </RNSVGSvgView>
-                      </View>
-                      <View
-                        style={
-                          Object {
-                            "height": 8,
-                          }
-                        }
-                      />
-                      <Text
-                        allowFontScaling={false}
-                        color="grey-700"
-                        defaultColor="black"
-                        defaultWeight="SemiBold"
-                        ellipsizeMode="tail"
-                        font="TitilliumWeb"
-                        fontStyle={
-                          Object {
-                            "fontSize": 18,
-                            "lineHeight": 25,
-                          }
-                        }
-                        numberOfLines={1}
-                        style={
-                          Array [
-                            Object {
-                              "fontSize": 18,
-                              "lineHeight": 25,
-                            },
-                            Object {
-                              "color": "#555C70",
-                              "fontFamily": "Titillium Web",
-                              "fontStyle": "normal",
-                              "fontWeight": "400",
-                            },
-                          ]
-                        }
-                        weight="Regular"
-                      >
-                        PayPal
-                      </Text>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </RNCSafeAreaProvider>
-</View>
-`;
diff --git a/ts/components/ui/utils/components/PressableListItemBase.tsx b/ts/components/ui/utils/components/PressableListItemBase.tsx
deleted file mode 100644
index 08d32210ca6..00000000000
--- a/ts/components/ui/utils/components/PressableListItemBase.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as React from "react";
-import { Pressable } from "react-native";
-import Animated from "react-native-reanimated";
-import { IOListItemStyles } from "@pagopa/io-app-design-system";
-import { WithTestID } from "../../../../types/WithTestID";
-import { useListItemBaseSpringAnimation } from "../hooks/useListItemBaseSpringAnimation";
-
-export type PressableBaseProps = WithTestID<{
-  accessibilityLabel?: string;
-  onPress?: () => void;
-}>;
-
-/**
- * A base component for creating pressable list items with animation support.
- *
- * @param {string} accessibilityLabel - An optional label for accessibility.
- * @param {function} onPress - The function to be executed when the item is pressed.
- * @param {string} testID - An optional test identifier for testing purposes.
- * @param {React.ReactNode} children - The content to be rendered within the list item.
- *
- * @deprecated The usage of this component is discouraged as it is being replaced by the PressableListItemBase of the @pagopa/io-app-design-system library.
- *
- */
-export const PressableListItemBase = ({
-  onPress,
-  testID,
-  accessibilityLabel,
-  children
-}: React.PropsWithChildren<PressableBaseProps>) => {
-  const { onPressIn, onPressOut, animatedScaleStyle, animatedBackgroundStyle } =
-    useListItemBaseSpringAnimation();
-  return (
-    <Pressable
-      onPress={onPress}
-      testID={testID}
-      accessible={true}
-      accessibilityLabel={accessibilityLabel}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      onTouchEnd={onPressOut}
-      accessibilityRole="button"
-    >
-      <Animated.View
-        style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
-      >
-        <Animated.View
-          style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
-        >
-          {children}
-        </Animated.View>
-      </Animated.View>
-    </Pressable>
-  );
-};
diff --git a/ts/components/wallet/PagoPALogo.tsx b/ts/components/wallet/PagoPALogo.tsx
deleted file mode 100644
index 28b31684287..00000000000
--- a/ts/components/wallet/PagoPALogo.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Render the pagoPA Logo according to the environment (Test or Production)
- */
-import * as React from "react";
-import { Image } from "react-native";
-import { connect } from "react-redux";
-import { isPagoPATestEnabledSelector } from "../../store/reducers/persistedPreferences";
-import { GlobalState } from "../../store/reducers/types";
-
-type Props = ReturnType<typeof mapStateToProps>;
-
-class PagoPALogo extends React.Component<Props> {
-  public render(): React.ReactNode {
-    const { isPagoPATestEnabled } = this.props;
-    return isPagoPATestEnabled ? (
-      <Image
-        style={{ resizeMode: "contain", width: 60 }}
-        source={require("../../../img/wallet/logo-pagopa-test.png")}
-      />
-    ) : (
-      <Image
-        style={{ resizeMode: "contain", width: 40 }}
-        source={require("../../../img/wallet/logo-pagopa.png")}
-      />
-    );
-  }
-}
-
-const mapStateToProps = (state: GlobalState) => ({
-  isPagoPATestEnabled: isPagoPATestEnabledSelector(state)
-});
-
-export default connect(mapStateToProps)(PagoPALogo);
diff --git a/ts/components/wallet/PaymentsHistoryList.tsx b/ts/components/wallet/PaymentsHistoryList.tsx
index 68e61ce82f6..8e49001fc91 100644
--- a/ts/components/wallet/PaymentsHistoryList.tsx
+++ b/ts/components/wallet/PaymentsHistoryList.tsx
@@ -136,7 +136,9 @@ export default class PaymentHistoryList extends React.Component<Props> {
           ItemSeparatorComponent={() => (
             <ItemSeparatorComponent noPadded={true} />
           )}
-          ListFooterComponent={payments.length > 0 && <EdgeBorderComponent />}
+          ListFooterComponent={
+            payments.length > 0 ? <EdgeBorderComponent /> : null
+          }
           keyExtractor={(_, index) => index.toString()}
         />
       </Content>
diff --git a/ts/components/wallet/TransactionsList.tsx b/ts/components/wallet/TransactionsList.tsx
index 991f3c5d623..b2388d525cf 100644
--- a/ts/components/wallet/TransactionsList.tsx
+++ b/ts/components/wallet/TransactionsList.tsx
@@ -80,13 +80,15 @@ export const TransactionsList = (props: Props) => {
     !areMoreTransactionsAvailable &&
     ListEmptyComponent !== undefined;
 
-  const footerListComponent = (transactions: ReadonlyArray<Transaction>) => {
+  const footerListComponent = (
+    transactions: ReadonlyArray<Transaction>
+  ): React.ComponentProps<typeof FlatList>["ListFooterComponent"] => {
     if (!areMoreTransactionsAvailable) {
-      return transactions.length > 0 && <EdgeBorderComponent />;
+      return transactions.length > 0 ? <EdgeBorderComponent /> : null;
     }
 
     return (
-      <View>
+      <>
         <ButtonDefaultOpacity
           style={styles.moreButton}
           bordered={true}
@@ -106,7 +108,7 @@ export const TransactionsList = (props: Props) => {
           </NBButtonText>
         </ButtonDefaultOpacity>
         <EdgeBorderComponent />
-      </View>
+      </>
     );
   };
 
diff --git a/ts/components/wallet/creditCardOnboardingAttempts/CreditCardAttemptsList.tsx b/ts/components/wallet/creditCardOnboardingAttempts/CreditCardAttemptsList.tsx
index ae0162abf91..c5880589a2b 100644
--- a/ts/components/wallet/creditCardOnboardingAttempts/CreditCardAttemptsList.tsx
+++ b/ts/components/wallet/creditCardOnboardingAttempts/CreditCardAttemptsList.tsx
@@ -22,7 +22,9 @@ type Props = Readonly<{
   title: string;
   creditCardAttempts: CreditCardInsertionState;
   onAttemptPress: (attempt: CreditCardInsertion) => void;
-  ListEmptyComponent: React.ReactNode;
+  ListEmptyComponent: React.ComponentProps<
+    typeof FlatList
+  >["ListEmptyComponent"];
 }>;
 
 const styles = StyleSheet.create({
@@ -149,7 +151,7 @@ export const CreditCardAttemptsList: React.FC<Props> = (props: Props) => {
           <ItemSeparatorComponent noPadded={true} />
         )}
         ListFooterComponent={
-          creditCardAttempts.length > 0 && <EdgeBorderComponent />
+          creditCardAttempts.length > 0 ? <EdgeBorderComponent /> : null
         }
         keyExtractor={c => c.hashedPan}
       />
diff --git a/ts/config.ts b/ts/config.ts
index a7708fd2bc0..324af61d757 100644
--- a/ts/config.ts
+++ b/ts/config.ts
@@ -106,7 +106,7 @@ export const nativeLoginEnabled = Config.NATIVE_LOGIN_ENABLED === "YES";
 // Opt-in for reminder push notifications
 export const remindersOptInEnabled = Config.REMINDERS_OPT_IN_ENABLED === "YES";
 
-export const isNewCduFlow = Config.CDU_NEW_FLOW === "YES";
+export const isNewServicesEnabled = Config.NEW_SERVICES_ENABLED === "YES";
 
 export const fetchTimeout = pipe(
   parseInt(Config.FETCH_TIMEOUT_MS, 10),
diff --git a/ts/features/barcode/screens/BarcodeScanScreen.tsx b/ts/features/barcode/screens/BarcodeScanScreen.tsx
index b5d54f90311..4094bc40b59 100644
--- a/ts/features/barcode/screens/BarcodeScanScreen.tsx
+++ b/ts/features/barcode/screens/BarcodeScanScreen.tsx
@@ -1,11 +1,15 @@
-import { Divider, ListItemNav, VSpacer } from "@pagopa/io-app-design-system";
+import {
+  Divider,
+  ListItemNav,
+  VSpacer,
+  IOToast
+} from "@pagopa/io-app-design-system";
 import { useNavigation } from "@react-navigation/native";
 import React from "react";
 import { Alert, View } from "react-native";
 import ReactNativeHapticFeedback, {
   HapticFeedbackTypes
 } from "react-native-haptic-feedback";
-import { IOToast } from "../../../components/Toast";
 import { useOpenDeepLink } from "../../../hooks/useOpenDeepLink";
 import I18n from "../../../i18n";
 import { mixpanelTrack } from "../../../mixpanel";
@@ -23,7 +27,7 @@ import {
 import { emptyContextualHelp } from "../../../utils/emptyContextualHelp";
 import { useIOBottomSheetAutoresizableModal } from "../../../utils/hooks/bottomSheet";
 import { IDPayPaymentRoutes } from "../../idpay/payment/navigation/navigator";
-import { WalletPaymentRoutes } from "../../walletV3/payment/navigation/routes";
+import { PaymentsCheckoutRoutes } from "../../payments/checkout/navigation/routes";
 import * as analytics from "../analytics";
 import { BarcodeScanBaseScreenComponent } from "../components/BarcodeScanBaseScreenComponent";
 import { useIOBarcodeFileReader } from "../hooks/useIOBarcodeFileReader";
@@ -38,7 +42,7 @@ import {
 } from "../types/IOBarcode";
 import { BarcodeFailure } from "../types/failure";
 import { getIOBarcodesByType } from "../utils/getBarcodesByType";
-import { WalletBarcodeRoutes } from "../../walletV3/barcode/navigation/routes";
+import { PaymentsBarcodeRoutes } from "../../payments/barcode/navigation/routes";
 import { useHardwareBackButton } from "../../../hooks/useHardwareBackButton";
 
 const BarcodeScanScreen = () => {
@@ -92,8 +96,8 @@ const BarcodeScanScreen = () => {
         void mixpanelTrack("WALLET_SCAN_POSTE_DATAMATRIX_SUCCESS");
       }
 
-      navigation.navigate(WalletBarcodeRoutes.WALLET_BARCODE_MAIN, {
-        screen: WalletBarcodeRoutes.WALLET_BARCODE_CHOICE,
+      navigation.navigate(PaymentsBarcodeRoutes.PAYMENT_BARCODE_NAVIGATOR, {
+        screen: PaymentsBarcodeRoutes.PAYMENT_BARCODE_CHOICE,
         params: {
           barcodes: pagoPABarcodes
         }
@@ -172,8 +176,8 @@ const BarcodeScanScreen = () => {
 
   const handlePagoPACodeInput = () => {
     manualInputModal.dismiss();
-    navigation.navigate(WalletPaymentRoutes.WALLET_PAYMENT_MAIN, {
-      screen: WalletPaymentRoutes.WALLET_PAYMENT_INPUT_NOTICE_NUMBER
+    navigation.navigate(PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR, {
+      screen: PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_INPUT_NOTICE_NUMBER
     });
   };
 
diff --git a/ts/features/bonus/cdc/analytics/index.ts b/ts/features/bonus/cdc/analytics/index.ts
index e208a0f2f58..08a032da3e9 100644
--- a/ts/features/bonus/cdc/analytics/index.ts
+++ b/ts/features/bonus/cdc/analytics/index.ts
@@ -1,6 +1,6 @@
 import { getType } from "typesafe-actions";
 import * as O from "fp-ts/lib/Option";
-import { pipe } from "fp-ts/lib/function";
+import { constVoid, pipe } from "fp-ts/lib/function";
 import { cdcEnabled } from "../../../../config";
 import { mixpanel } from "../../../../mixpanel";
 import { Action } from "../../../../store/actions/types";
@@ -11,7 +11,7 @@ import {
 
 const trackCdc =
   (mp: NonNullable<typeof mixpanel>) =>
-  (action: Action): Promise<void> => {
+  (action: Action): void => {
     switch (action.type) {
       case getType(cdcRequestBonusList.request):
       case getType(cdcRequestBonusList.success):
@@ -44,10 +44,9 @@ const trackCdc =
 
         return mp.track(action.type, { status: action.payload.kind, value });
     }
-    return Promise.resolve();
   };
 
 const emptyTracking = (_: NonNullable<typeof mixpanel>) => (__: Action) =>
-  Promise.resolve();
+  constVoid();
 
 export default cdcEnabled ? trackCdc : emptyTracking;
diff --git a/ts/features/bonus/cdc/components/CdcServiceCTA.tsx b/ts/features/bonus/cdc/components/CdcServiceCTA.tsx
index 6734081f3a6..8f97a1107ad 100644
--- a/ts/features/bonus/cdc/components/CdcServiceCTA.tsx
+++ b/ts/features/bonus/cdc/components/CdcServiceCTA.tsx
@@ -1,6 +1,6 @@
 import { VSpacer } from "@pagopa/io-app-design-system";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { useFocusEffect, useNavigation } from "@react-navigation/native";
+import { useFocusEffect } from "@react-navigation/native";
 import * as React from "react";
 import { useCallback } from "react";
 import { View } from "react-native";
@@ -24,12 +24,13 @@ import { CDC_ROUTES } from "../navigation/routes";
 import { cdcRequestBonusList } from "../store/actions/cdcBonusRequest";
 import { cdcBonusRequestListSelector } from "../store/reducers/cdcBonusRequest";
 import { CdcBonusRequestList } from "../types/CdcBonusRequest";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 
 type ReadyButtonProp = {
   bonusRequestList: CdcBonusRequestList;
 };
 const ReadyButton = (props: ReadyButtonProp) => {
-  const navigation = useNavigation();
+  const navigation = useIONavigation();
 
   // Check if at least one year can be activable
   const activableBonuses = props.bonusRequestList.filter(
diff --git a/ts/features/bonus/cdc/navigation/CdcStackNavigator.tsx b/ts/features/bonus/cdc/navigation/CdcStackNavigator.tsx
index 779732812ff..265aef68509 100644
--- a/ts/features/bonus/cdc/navigation/CdcStackNavigator.tsx
+++ b/ts/features/bonus/cdc/navigation/CdcStackNavigator.tsx
@@ -13,8 +13,7 @@ const Stack = createStackNavigator<CdcBonusRequestParamsList>();
 export const CdcStackNavigator = () => (
   <Stack.Navigator
     initialRouteName={CDC_ROUTES.INFORMATION_TOS}
-    headerMode={"none"}
-    screenOptions={{ gestureEnabled: isGestureEnabled }}
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerShown: false }}
   >
     <Stack.Screen
       name={CDC_ROUTES.INFORMATION_TOS}
diff --git a/ts/features/bonus/cdc/screens/CdcBonusRequestSelectResidence.tsx b/ts/features/bonus/cdc/screens/CdcBonusRequestSelectResidence.tsx
index d719121db34..10159c65dd7 100644
--- a/ts/features/bonus/cdc/screens/CdcBonusRequestSelectResidence.tsx
+++ b/ts/features/bonus/cdc/screens/CdcBonusRequestSelectResidence.tsx
@@ -1,32 +1,31 @@
-import * as React from "react";
-import { View, SafeAreaView, ScrollView } from "react-native";
+import { HSpacer, Icon, VSpacer } from "@pagopa/io-app-design-system";
 import { useNavigation } from "@react-navigation/native";
+import * as React from "react";
+import { SafeAreaView, ScrollView, View } from "react-native";
 import { useDispatch } from "react-redux";
-import { HSpacer, VSpacer } from "@pagopa/io-app-design-system";
-import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
-import { IOStyles } from "../../../../components/core/variables/IOStyles";
-import { H1 } from "../../../../components/core/typography/H1";
-import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
-import I18n from "../../../../i18n";
-import FooterWithButtons from "../../../../components/ui/FooterWithButtons";
+import {
+  cancelButtonProps,
+  confirmButtonProps
+} from "../../../../components/buttons/ButtonConfigurations";
 import {
   RadioButtonList,
   RadioItem
 } from "../../../../components/core/selection/RadioButtonList";
+import { H1 } from "../../../../components/core/typography/H1";
+import { H3 } from "../../../../components/core/typography/H3";
 import { H4 } from "../../../../components/core/typography/H4";
+import { IOStyles } from "../../../../components/core/variables/IOStyles";
+import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
+import FooterWithButtons from "../../../../components/ui/FooterWithButtons";
+import I18n from "../../../../i18n";
 import { IOStackNavigationProp } from "../../../../navigation/params/AppParamsList";
+import { useIOSelector } from "../../../../store/hooks";
+import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
 import { CdcBonusRequestParamsList } from "../navigation/params";
 import { CDC_ROUTES } from "../navigation/routes";
-import {
-  cancelButtonProps,
-  confirmButtonProps
-} from "../../../../components/buttons/ButtonConfigurations";
+import { cdcSelectedBonus as cdcSelectedBonusAction } from "../store/actions/cdcBonusRequest";
 import { cdcSelectedBonusSelector } from "../store/reducers/cdcBonusRequest";
-import { useIOSelector } from "../../../../store/hooks";
-import { H3 } from "../../../../components/core/typography/H3";
-import BonusIcon from "../../../../../img/features/cdc/bonus.svg";
 import { ResidentChoice } from "../types/CdcBonusRequest";
-import { cdcSelectedBonus as cdcSelectedBonusAction } from "../store/actions/cdcBonusRequest";
 import { compareSelectedBonusByYear } from "../utils/bonusRequest";
 
 const getCheckResidencyItems = (): ReadonlyArray<RadioItem<ResidentChoice>> => [
@@ -80,7 +79,7 @@ const CdcBonusRequestSelectResidence = () => {
                   alignItems: "center"
                 }}
               >
-                <BonusIcon width={20} height={20} />
+                <Icon name="bonus" size={20} />
                 <HSpacer size={16} />
                 <H3 weight={"SemiBold"} color={"bluegrey"}>
                   {b.year}
diff --git a/ts/features/bonus/cgn/__e2e__/cgn00.e2e.ts b/ts/features/bonus/cgn/__e2e__/cgn00.e2e.ts
new file mode 100644
index 00000000000..96b609d2db7
--- /dev/null
+++ b/ts/features/bonus/cgn/__e2e__/cgn00.e2e.ts
@@ -0,0 +1,23 @@
+import { e2eWaitRenderTimeout } from "../../../../__e2e__/config";
+import { ensureLoggedIn } from "../../../../__e2e__/utils";
+import I18n from "../../../../i18n";
+import { ID_CGN_TYPE } from "../../common/utils";
+import { activateCGNBonusSuccess, deactivateCGNCardIfNeeded } from "./utils";
+
+describe("CGN", () => {
+  beforeEach(async () => {
+    await deactivateCGNCardIfNeeded();
+    await device.launchApp({ newInstance: true });
+    await ensureLoggedIn();
+  });
+
+  it("When the user want to start activation from bonus list, it should complete activation", async () => {
+    await element(by.text(I18n.t("global.navigator.wallet"))).tap();
+    await element(by.id("walletAddNewPaymentMethodTestId")).tap();
+    await element(by.id("bonusNameTestId")).tap();
+    const cgnBonusItem = element(by.id(`AvailableBonusItem-${ID_CGN_TYPE}`));
+    await waitFor(cgnBonusItem).toBeVisible().withTimeout(e2eWaitRenderTimeout);
+    await cgnBonusItem.tap();
+    await activateCGNBonusSuccess();
+  });
+});
diff --git a/ts/features/bonus/cgn/__e2e__/cgn01.e2e.ts b/ts/features/bonus/cgn/__e2e__/cgn01.e2e.ts
new file mode 100644
index 00000000000..0a1d0e19508
--- /dev/null
+++ b/ts/features/bonus/cgn/__e2e__/cgn01.e2e.ts
@@ -0,0 +1,23 @@
+import { e2eWaitRenderTimeout } from "../../../../__e2e__/config";
+import { ensureLoggedIn } from "../../../../__e2e__/utils";
+import I18n from "../../../../i18n";
+import { activateCGNBonusSuccess, deactivateCGNCardIfNeeded } from "./utils";
+
+describe("CGN", () => {
+  beforeEach(async () => {
+    await deactivateCGNCardIfNeeded();
+    await device.launchApp({ newInstance: true });
+    await ensureLoggedIn();
+  });
+
+  it("When the user want to start activation from card carousel, it should complete activation", async () => {
+    await element(by.text(I18n.t("global.navigator.wallet"))).tap();
+    // TODO: This could be fail if we will add more e2e tests on the addition of a new payment method (just do a single swipe, not a scroll)
+    await waitFor(element(by.id("walletPaymentMethodsTestId")))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+    await element(by.id("walletPaymentMethodsTestId")).swipe("up");
+    await element(by.id("FeaturedCardCGNTestID")).tap();
+    await activateCGNBonusSuccess();
+  });
+});
diff --git a/ts/features/bonus/cgn/__e2e__/cgn02.e2e.ts b/ts/features/bonus/cgn/__e2e__/cgn02.e2e.ts
new file mode 100644
index 00000000000..ed1a4374236
--- /dev/null
+++ b/ts/features/bonus/cgn/__e2e__/cgn02.e2e.ts
@@ -0,0 +1,35 @@
+import { e2eWaitRenderTimeout } from "../../../../__e2e__/config";
+import { ensureLoggedIn } from "../../../../__e2e__/utils";
+import I18n from "../../../../i18n";
+import { activateCGNBonusSuccess, deactivateCGNCardIfNeeded } from "./utils";
+const CGN_TITLE = "Carta Giovani Nazionale";
+const SERVICES_LIST = "services-list";
+
+describe("CGN", () => {
+  beforeEach(async () => {
+    await deactivateCGNCardIfNeeded();
+    await device.launchApp({ newInstance: true });
+    await ensureLoggedIn();
+  });
+
+  it("When the user want to start activation from service detail, it should complete activation", async () => {
+    await element(by.text(I18n.t("global.navigator.services"))).tap();
+
+    await waitFor(element(by.id(SERVICES_LIST)))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+
+    await waitFor(element(by.id(CGN_TITLE)))
+      .toBeVisible()
+      .whileElement(by.id(SERVICES_LIST))
+      .scroll(300, "down");
+
+    await element(by.id(CGN_TITLE)).tap();
+    const startActivationCta = element(by.id("service-activate-bonus-button"));
+    await waitFor(startActivationCta)
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+    await startActivationCta.tap();
+    await activateCGNBonusSuccess();
+  });
+});
diff --git a/ts/features/bonus/cgn/__e2e__/cgn.e2e.ts b/ts/features/bonus/cgn/__e2e__/utils.ts
similarity index 51%
rename from ts/features/bonus/cgn/__e2e__/cgn.e2e.ts
rename to ts/features/bonus/cgn/__e2e__/utils.ts
index a4f879c725f..dced57ab20b 100644
--- a/ts/features/bonus/cgn/__e2e__/cgn.e2e.ts
+++ b/ts/features/bonus/cgn/__e2e__/utils.ts
@@ -1,13 +1,8 @@
 import fetch from "node-fetch";
 import { e2eWaitRenderTimeout } from "../../../../__e2e__/config";
-import { ensureLoggedIn } from "../../../../__e2e__/utils";
 import I18n from "../../../../i18n";
-import { ID_CGN_TYPE } from "../../common/utils";
 
-const CGN_TITLE = "Carta Giovani Nazionale";
-const SERVICES_LIST = "services-list";
-
-const activateBonusSuccess = async () => {
+export const activateCGNBonusSuccess = async () => {
   const startActivationCta = element(by.id("activate-bonus-button"));
   await waitFor(startActivationCta)
     .toBeVisible()
@@ -28,7 +23,9 @@ const activateBonusSuccess = async () => {
 
   // The section has a loading spinner on top of
   // everything so we must wait for it to disappear
-  await waitFor(scrollView).toBeVisible().withTimeout(e2eWaitRenderTimeout);
+  await waitFor(scrollView)
+    .toBeVisible()
+    .withTimeout(2 * e2eWaitRenderTimeout);
 
   // make sure to scroll to bottom, otherwise in small devices the element will not be visible nor tappable
   await scrollView.scrollTo("bottom");
@@ -46,67 +43,7 @@ const activateBonusSuccess = async () => {
   await alertCTA.tap();
 };
 
-describe("CGN", () => {
-  beforeEach(async () => {
-    await deactivateCGNCardIfNeeded();
-    await device.launchApp({ newInstance: true });
-    await ensureLoggedIn();
-  });
-
-  describe("When the user want to start activation from bonus list", () => {
-    it("Should complete activation", async () => {
-      await element(by.text(I18n.t("global.navigator.wallet"))).tap();
-      await element(by.id("walletAddNewPaymentMethodTestId")).tap();
-      await element(by.id("bonusNameTestId")).tap();
-      const cgnBonusItem = element(by.id(`AvailableBonusItem-${ID_CGN_TYPE}`));
-      await waitFor(cgnBonusItem)
-        .toBeVisible()
-        .withTimeout(e2eWaitRenderTimeout);
-      await cgnBonusItem.tap();
-      await activateBonusSuccess();
-    });
-  });
-
-  describe("When the user want to start activation from card carousel", () => {
-    it("Should complete activation", async () => {
-      await element(by.text(I18n.t("global.navigator.wallet"))).tap();
-      // TODO: This could be fail if we will add more e2e tests on the addition of a new payment method (just do a single swipe, not a scroll)
-      await waitFor(element(by.id("walletPaymentMethodsTestId")))
-        .toBeVisible()
-        .withTimeout(e2eWaitRenderTimeout);
-      await element(by.id("walletPaymentMethodsTestId")).swipe("up");
-      await element(by.id("FeaturedCardCGNTestID")).tap();
-      await activateBonusSuccess();
-    });
-  });
-
-  describe("When the user want to start activation from service detail", () => {
-    it("Should complete activation", async () => {
-      await element(by.text(I18n.t("global.navigator.services"))).tap();
-
-      await waitFor(element(by.id(SERVICES_LIST)))
-        .toBeVisible()
-        .withTimeout(e2eWaitRenderTimeout);
-
-      await waitFor(element(by.id(CGN_TITLE)))
-        .toBeVisible()
-        .whileElement(by.id(SERVICES_LIST))
-        .scroll(300, "down");
-
-      await element(by.id(CGN_TITLE)).tap();
-      const startActivationCta = element(
-        by.id("service-activate-bonus-button")
-      );
-      await waitFor(startActivationCta)
-        .toBeVisible()
-        .withTimeout(e2eWaitRenderTimeout);
-      await startActivationCta.tap();
-      await activateBonusSuccess();
-    });
-  });
-});
-
-const deactivateCGNCardIfNeeded = async () => {
+export const deactivateCGNCardIfNeeded = async () => {
   // This is needed since an E2E can fail at any moment. If it does so
   // after the card has been activated, all subsequent retries and tests
   // will fail, since the card is already activated. Be aware that this
diff --git a/ts/features/bonus/cgn/analytics/index.ts b/ts/features/bonus/cgn/analytics/index.ts
index 5a33f25f4f8..9de5bf76e5a 100644
--- a/ts/features/bonus/cgn/analytics/index.ts
+++ b/ts/features/bonus/cgn/analytics/index.ts
@@ -31,7 +31,7 @@ import { cgnCategories } from "../store/actions/categories";
 const trackCgnAction =
   (mp: NonNullable<typeof mixpanel>) =>
   // eslint-disable-next-line complexity
-  (action: Action): Promise<void> => {
+  (action: Action): void => {
     switch (action.type) {
       case getType(cgnActivationStart):
       case getType(cgnRequestActivation):
@@ -86,7 +86,6 @@ const trackCgnAction =
           reason: action.payload
         });
     }
-    return Promise.resolve();
   };
 
 export default trackCgnAction;
diff --git a/ts/features/bonus/cgn/components/CgnCard.tsx b/ts/features/bonus/cgn/components/CgnCard.tsx
new file mode 100644
index 00000000000..f877d99fa1d
--- /dev/null
+++ b/ts/features/bonus/cgn/components/CgnCard.tsx
@@ -0,0 +1,107 @@
+import { H6, IOColors, LabelSmallAlt, Tag } from "@pagopa/io-app-design-system";
+import { format } from "date-fns";
+import * as React from "react";
+import { Image, StyleSheet, View } from "react-native";
+import cgnLogo from "../../../../../img/bonus/cgn/cgn_logo.png";
+import eycaLogo from "../../../../../img/bonus/cgn/eyca_logo.png";
+import CgnCardShape from "../../../../../img/features/cgn/cgn_card.svg";
+import I18n from "../../../../i18n";
+
+export type CgnCardProps = {
+  expireDate?: Date;
+  withEycaLogo?: boolean;
+};
+
+export const CgnCard = ({ expireDate, withEycaLogo }: CgnCardProps) => {
+  const isExpired = expireDate === undefined;
+
+  const eycaLogoComponent = (
+    <View
+      testID="cgnEycaLogoTestID"
+      style={[styles.logoContainer, { bottom: 12, right: 12 }]}
+    >
+      <Image source={eycaLogo} style={styles.logo} />
+    </View>
+  );
+
+  const cngLogoComponent = (
+    <View
+      testID="cgnLogoTestID"
+      style={[styles.logoContainer, { top: 12, right: 12 }]}
+    >
+      <Image source={cgnLogo} style={styles.logo} />
+    </View>
+  );
+
+  const expiredTag = (
+    <View>
+      <Tag
+        testID="cgnExpiredTagTestID"
+        variant="error"
+        text={I18n.t("bonus.cgn.detail.status.badge.expired")}
+      />
+    </View>
+  );
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.card}>
+        <CgnCardShape />
+      </View>
+      <View style={styles.content}>
+        <View style={styles.header}>
+          <H6>{I18n.t("bonus.cgn.name")}</H6>
+          {isExpired && expiredTag}
+        </View>
+        <LabelSmallAlt style={{ width: "70%" }}>
+          {I18n.t("bonus.cgn.departmentName")}
+        </LabelSmallAlt>
+        <LabelSmallAlt color="blueItalia-850">
+          {expireDate &&
+            I18n.t("bonusCard.validUntil", {
+              endDate: format(expireDate, "MM/YY")
+            })}
+        </LabelSmallAlt>
+      </View>
+      {!isExpired && cngLogoComponent}
+      {withEycaLogo && eycaLogoComponent}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    aspectRatio: 16 / 10
+  },
+  card: {
+    position: "absolute",
+    transform: [{ rotateX: "180deg" }],
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+    paddingTop: 12,
+    justifyContent: "space-between"
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    height: 48
+  },
+  logoContainer: {
+    position: "absolute",
+    padding: 5,
+    backgroundColor: IOColors.white,
+    borderRadius: 8
+  },
+  logo: {
+    width: 30,
+    height: 30,
+    resizeMode: "contain"
+  }
+});
diff --git a/ts/features/bonus/cgn/components/CgnServiceCTA.tsx b/ts/features/bonus/cgn/components/CgnServiceCTA.tsx
index d4020fdc427..7ceaffee6c6 100644
--- a/ts/features/bonus/cgn/components/CgnServiceCTA.tsx
+++ b/ts/features/bonus/cgn/components/CgnServiceCTA.tsx
@@ -7,15 +7,15 @@ import { Label } from "../../../../components/core/typography/Label";
 import ButtonDefaultOpacity from "../../../../components/ButtonDefaultOpacity";
 import I18n from "../../../../i18n";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
-import { servicePreferenceSelector } from "../../../../store/reducers/entities/services/servicePreference";
-import { isServicePreferenceResponseSuccess } from "../../../../types/services/ServicePreferenceResponse";
+import { servicePreferenceSelector } from "../../../services/store/reducers/servicePreference";
+import { isServicePreferenceResponseSuccess } from "../../../services/types/ServicePreferenceResponse";
 import { ServiceId } from "../../../../../definitions/backend/ServiceId";
 import { cgnActivationStart } from "../store/actions/activation";
 import { cgnUnsubscribe } from "../store/actions/unsubscribe";
 import { fold, isLoading } from "../../../../common/model/RemoteValue";
 import { showToast } from "../../../../utils/showToast";
 import { cgnUnsubscribeSelector } from "../store/reducers/unsubscribe";
-import { loadServicePreference } from "../../../../store/actions/services/servicePreference";
+import { loadServicePreference } from "../../../services/store/actions";
 import ActivityIndicator from "../../../../components/ui/ActivityIndicator";
 import { loadAvailableBonuses } from "../../common/store/actions/availableBonusesTypes";
 
diff --git a/ts/features/bonus/cgn/components/CgnWalletCard.tsx b/ts/features/bonus/cgn/components/CgnWalletCard.tsx
new file mode 100644
index 00000000000..2af7ddb8784
--- /dev/null
+++ b/ts/features/bonus/cgn/components/CgnWalletCard.tsx
@@ -0,0 +1,40 @@
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import * as O from "fp-ts/lib/Option";
+import { pipe } from "fp-ts/lib/function";
+import * as React from "react";
+import { Pressable } from "react-native";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { useIOSelector } from "../../../../store/hooks";
+import { profileSelector } from "../../../../store/reducers/profile";
+import { withWalletCardBaseComponent } from "../../../newWallet/components/WalletCardBaseComponent";
+import CGN_ROUTES from "../navigation/routes";
+import { CgnCard, CgnCardProps } from "./CgnCard";
+
+export type CgnWalletCardProps = CgnCardProps;
+
+const WrappedCgnCard = (props: CgnWalletCardProps) => {
+  const navigation = useIONavigation();
+  const profilePot = useIOSelector(profileSelector);
+
+  const isUnder31 = pipe(
+    pot.toOption(profilePot),
+    O.chainNullableK(({ date_of_birth }) => date_of_birth),
+    O.map(birthDate => new Date().getFullYear() - birthDate.getFullYear()),
+    O.map(years => years < 31),
+    O.getOrElse(() => false)
+  );
+
+  const handleCardPress = () => {
+    navigation.navigate(CGN_ROUTES.DETAILS.MAIN, {
+      screen: CGN_ROUTES.DETAILS.DETAILS
+    });
+  };
+
+  return (
+    <Pressable onPress={handleCardPress}>
+      <CgnCard {...props} withEycaLogo={isUnder31} />
+    </Pressable>
+  );
+};
+
+export const CgnWalletCard = withWalletCardBaseComponent(WrappedCgnCard);
diff --git a/ts/features/bonus/cgn/components/__test__/CgnCard.test.tsx b/ts/features/bonus/cgn/components/__test__/CgnCard.test.tsx
new file mode 100644
index 00000000000..8c2e8e4826c
--- /dev/null
+++ b/ts/features/bonus/cgn/components/__test__/CgnCard.test.tsx
@@ -0,0 +1,68 @@
+import { render } from "@testing-library/react-native";
+import { format } from "date-fns";
+import * as React from "react";
+import I18n from "../../../../../i18n";
+import { CgnCard } from "../CgnCard";
+
+describe("CgnCard", () => {
+  it("should match the snapshot", () => {
+    const component = render(
+      <CgnCard expireDate={new Date(2023, 11, 2)} withEycaLogo={true} />
+    );
+    expect(component).toMatchSnapshot();
+  });
+  it("should correctly render a valid card with EYCA logo", () => {
+    const expireDate = new Date(2023, 11, 2);
+    const { queryByTestId, queryByText } = render(
+      <CgnCard expireDate={expireDate} withEycaLogo={true} />
+    );
+    expect(queryByTestId("cgnLogoTestID")).not.toBeNull();
+    expect(queryByTestId("cgnExpiredTagTestID")).toBeNull();
+    expect(queryByTestId("cgnEycaLogoTestID")).not.toBeNull();
+    expect(queryByText(I18n.t("bonus.cgn.name"))).not.toBeNull();
+    expect(queryByText(I18n.t("bonus.cgn.departmentName"))).not.toBeNull();
+    expect(
+      queryByText(
+        I18n.t("bonusCard.validUntil", {
+          endDate: format(expireDate, "MM/YY")
+        })
+      )
+    ).not.toBeNull();
+  });
+  it("should correctly render a valid card without EYCA logo", () => {
+    const expireDate = new Date(2023, 11, 2);
+    const { queryByTestId, queryByText } = render(
+      <CgnCard expireDate={expireDate} />
+    );
+    expect(queryByTestId("cgnLogoTestID")).not.toBeNull();
+    expect(queryByTestId("cgnExpiredTagTestID")).toBeNull();
+    expect(queryByTestId("cgnEycaLogoTestID")).toBeNull();
+    expect(queryByText(I18n.t("bonus.cgn.name"))).not.toBeNull();
+    expect(queryByText(I18n.t("bonus.cgn.departmentName"))).not.toBeNull();
+    expect(
+      queryByText(
+        I18n.t("bonusCard.validUntil", {
+          endDate: format(expireDate, "MM/YY")
+        })
+      )
+    ).not.toBeNull();
+  });
+  it("should correctly render an expired card with EYCA logo", () => {
+    const { queryByTestId, queryByText } = render(
+      <CgnCard withEycaLogo={true} />
+    );
+    expect(queryByTestId("cgnLogoTestID")).toBeNull();
+    expect(queryByTestId("cgnExpiredTagTestID")).not.toBeNull();
+    expect(queryByTestId("cgnEycaLogoTestID")).not.toBeNull();
+    expect(queryByText(I18n.t("bonus.cgn.name"))).not.toBeNull();
+    expect(queryByText(I18n.t("bonus.cgn.departmentName"))).not.toBeNull();
+  });
+  it("should correctly render an expired card without EYCA logo", () => {
+    const { queryByTestId, queryByText } = render(<CgnCard />);
+    expect(queryByTestId("cgnLogoTestID")).toBeNull();
+    expect(queryByTestId("cgnExpiredTagTestID")).not.toBeNull();
+    expect(queryByTestId("cgnEycaLogoTestID")).toBeNull();
+    expect(queryByText(I18n.t("bonus.cgn.name"))).not.toBeNull();
+    expect(queryByText(I18n.t("bonus.cgn.departmentName"))).not.toBeNull();
+  });
+});
diff --git a/ts/features/bonus/cgn/components/__test__/__snapshots__/CgnCard.test.tsx.snap b/ts/features/bonus/cgn/components/__test__/__snapshots__/CgnCard.test.tsx.snap
new file mode 100644
index 00000000000..a0e44d51a06
--- /dev/null
+++ b/ts/features/bonus/cgn/components/__test__/__snapshots__/CgnCard.test.tsx.snap
@@ -0,0 +1,209 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CgnCard should match the snapshot 1`] = `
+<View
+  style={
+    Object {
+      "aspectRatio": 1.6,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": Array [
+          Object {
+            "rotateX": "180deg",
+          },
+        ],
+      }
+    }
+  >
+    <SvgMock />
+  </View>
+  <View
+    style={
+      Object {
+        "flex": 1,
+        "justifyContent": "space-between",
+        "padding": 16,
+        "paddingTop": 12,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "height": 48,
+          "justifyContent": "space-between",
+        }
+      }
+    >
+      <Text
+        allowFontScaling={false}
+        color="black"
+        defaultColor="black"
+        defaultWeight="SemiBold"
+        font="TitilliumWeb"
+        fontStyle={
+          Object {
+            "fontSize": 18,
+            "lineHeight": 25,
+          }
+        }
+        style={
+          Array [
+            Object {
+              "fontSize": 18,
+              "lineHeight": 25,
+            },
+            Object {
+              "color": "#0E0F13",
+              "fontFamily": "Titillium Web",
+              "fontStyle": "normal",
+              "fontWeight": "600",
+            },
+          ]
+        }
+        weight="SemiBold"
+      >
+        Carta Giovani Nazionale
+      </Text>
+    </View>
+    <Text
+      allowFontScaling={false}
+      color="black"
+      defaultColor="black"
+      defaultWeight="SemiBold"
+      font="TitilliumWeb"
+      fontStyle={
+        Object {
+          "fontSize": 16,
+          "lineHeight": 21,
+        }
+      }
+      style={
+        Array [
+          Object {
+            "width": "70%",
+          },
+          Object {
+            "fontSize": 16,
+            "lineHeight": 21,
+          },
+          Object {
+            "color": "#0E0F13",
+            "fontFamily": "Titillium Web",
+            "fontStyle": "normal",
+            "fontWeight": "600",
+          },
+        ]
+      }
+      weight="SemiBold"
+    >
+      Dipartimento per le politiche giovanili e il servizio civile universale
+    </Text>
+    <Text
+      allowFontScaling={false}
+      color="blueItalia-850"
+      defaultColor="black"
+      defaultWeight="SemiBold"
+      font="TitilliumWeb"
+      fontStyle={
+        Object {
+          "fontSize": 16,
+          "lineHeight": 21,
+        }
+      }
+      style={
+        Array [
+          Object {
+            "fontSize": 16,
+            "lineHeight": 21,
+          },
+          Object {
+            "color": "#001F3D",
+            "fontFamily": "Titillium Web",
+            "fontStyle": "normal",
+            "fontWeight": "600",
+          },
+        ]
+      }
+      weight="SemiBold"
+    >
+      Valida fino al 12/23
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderRadius": 8,
+          "padding": 5,
+          "position": "absolute",
+        },
+        Object {
+          "right": 12,
+          "top": 12,
+        },
+      ]
+    }
+    testID="cgnLogoTestID"
+  >
+    <Image
+      source={
+        Object {
+          "testUri": "../../../img/bonus/cgn/cgn_logo.png",
+        }
+      }
+      style={
+        Object {
+          "height": 30,
+          "resizeMode": "contain",
+          "width": 30,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "borderRadius": 8,
+          "padding": 5,
+          "position": "absolute",
+        },
+        Object {
+          "bottom": 12,
+          "right": 12,
+        },
+      ]
+    }
+    testID="cgnEycaLogoTestID"
+  >
+    <Image
+      source={
+        Object {
+          "testUri": "../../../img/bonus/cgn/eyca_logo.png",
+        }
+      }
+      style={
+        Object {
+          "height": 30,
+          "resizeMode": "contain",
+          "width": 30,
+        }
+      }
+    />
+  </View>
+</View>
+`;
diff --git a/ts/features/bonus/cgn/components/detail/CgnUnsubscribe.tsx b/ts/features/bonus/cgn/components/detail/CgnUnsubscribe.tsx
index ec0eebcd348..96a3d46f548 100644
--- a/ts/features/bonus/cgn/components/detail/CgnUnsubscribe.tsx
+++ b/ts/features/bonus/cgn/components/detail/CgnUnsubscribe.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useEffect, useRef } from "react";
 import { View, Alert } from "react-native";
-import { LabelLink } from "@pagopa/io-app-design-system";
+import { LabelLink, IOToast } from "@pagopa/io-app-design-system";
 
 import { useIODispatch, useIOSelector } from "../../../../../store/hooks";
 import { cgnUnsubscribeSelector } from "../../store/reducers/unsubscribe";
@@ -10,7 +10,6 @@ import { cgnUnsubscribe } from "../../store/actions/unsubscribe";
 import { isError, isReady } from "../../../../../common/model/RemoteValue";
 import { navigateBack } from "../../../../../store/actions/navigation";
 import { cgnDetails } from "../../store/actions/details";
-import { IOToast } from "../../../../../components/Toast";
 
 const CgnUnsubscribe = () => {
   const dispatch = useIODispatch();
diff --git a/ts/features/bonus/cgn/components/detail/eyca/EycaInformationComponent.tsx b/ts/features/bonus/cgn/components/detail/eyca/EycaInformationComponent.tsx
index 46bd06d3d2e..c27021a1d94 100644
--- a/ts/features/bonus/cgn/components/detail/eyca/EycaInformationComponent.tsx
+++ b/ts/features/bonus/cgn/components/detail/eyca/EycaInformationComponent.tsx
@@ -1,12 +1,11 @@
 import * as React from "react";
 import { View } from "react-native";
-import { ButtonOutline, VSpacer } from "@pagopa/io-app-design-system";
-import Markdown from "../../../../../../components/ui/Markdown";
+import { ButtonOutline, VSpacer, IOToast } from "@pagopa/io-app-design-system";
+import LegacyMarkdown from "../../../../../../components/ui/Markdown/LegacyMarkdown";
 import I18n from "../../../../../../i18n";
 import { useIOBottomSheetAutoresizableModal } from "../../../../../../utils/hooks/bottomSheet";
 import { openWebUrl } from "../../../../../../utils/url";
 import { EYCA_WEBSITE_BASE_URL } from "../../../utils/constants";
-import { IOToast } from "../../../../../../components/Toast";
 
 /**
  * this component shows information about EYCA card. It is included within a bottom sheet
@@ -18,9 +17,12 @@ const EycaInformationComponent: React.FunctionComponent = () => {
     <View>
       <VSpacer size={16} />
       <View>
-        <Markdown avoidTextSelection onLoadEnd={() => setMarkdownloaded(true)}>
+        <LegacyMarkdown
+          avoidTextSelection
+          onLoadEnd={() => setMarkdownloaded(true)}
+        >
           {I18n.t("bonus.cgn.detail.status.eycaDescription")}
-        </Markdown>
+        </LegacyMarkdown>
         <VSpacer size={16} />
         {isMarkdownloaded && (
           <ButtonOutline
diff --git a/ts/features/bonus/cgn/components/detail/eyca/EycaPendingComponent.tsx b/ts/features/bonus/cgn/components/detail/eyca/EycaPendingComponent.tsx
index a9a3e9066cc..a272f7a78bc 100644
--- a/ts/features/bonus/cgn/components/detail/eyca/EycaPendingComponent.tsx
+++ b/ts/features/bonus/cgn/components/detail/eyca/EycaPendingComponent.tsx
@@ -1,13 +1,17 @@
 import * as React from "react";
 import { View, StyleSheet } from "react-native";
-import { ButtonOutline, Icon, VSpacer } from "@pagopa/io-app-design-system";
+import {
+  ButtonOutline,
+  Icon,
+  VSpacer,
+  IOToast
+} from "@pagopa/io-app-design-system";
 import { H4 } from "../../../../../../components/core/typography/H4";
 import I18n from "../../../../../../i18n";
 import { InfoBox } from "../../../../../../components/box/InfoBox";
 import { openWebUrl } from "../../../../../../utils/url";
 import TouchableDefaultOpacity from "../../../../../../components/TouchableDefaultOpacity";
 import { EYCA_WEBSITE_DISCOUNTS_PAGE_URL } from "../../../utils/constants";
-import { IOToast } from "../../../../../../components/Toast";
 
 type Props = {
   openBottomSheet: () => void;
diff --git a/ts/features/bonus/cgn/components/detail/eyca/EycaStatusDetailsComponent.tsx b/ts/features/bonus/cgn/components/detail/eyca/EycaStatusDetailsComponent.tsx
index 7eb20a9b9e1..813ee5689f4 100644
--- a/ts/features/bonus/cgn/components/detail/eyca/EycaStatusDetailsComponent.tsx
+++ b/ts/features/bonus/cgn/components/detail/eyca/EycaStatusDetailsComponent.tsx
@@ -6,6 +6,7 @@ import {
   HSpacer,
   VSpacer,
   IOSpacingScale,
+  IOToast,
   Badge,
   ButtonOutline
 } from "@pagopa/io-app-design-system";
@@ -23,7 +24,6 @@ import { clipboardSetStringWithFeedback } from "../../../../../../utils/clipboar
 import TouchableDefaultOpacity from "../../../../../../components/TouchableDefaultOpacity";
 import { openWebUrl } from "../../../../../../utils/url";
 import { EYCA_WEBSITE_DISCOUNTS_PAGE_URL } from "../../../utils/constants";
-import { IOToast } from "../../../../../../components/Toast";
 
 type Props = {
   eycaCard: EycaCardActivated | EycaCardExpired | EycaCardRevoked;
diff --git a/ts/features/bonus/cgn/components/merchants/CgnDiscountDetail.tsx b/ts/features/bonus/cgn/components/merchants/CgnDiscountDetail.tsx
index 84ce1f6c391..3d3f8e40800 100644
--- a/ts/features/bonus/cgn/components/merchants/CgnDiscountDetail.tsx
+++ b/ts/features/bonus/cgn/components/merchants/CgnDiscountDetail.tsx
@@ -8,6 +8,7 @@ import {
   HSpacer,
   VSpacer,
   Icon,
+  IOToast,
   IOIconSizeScale,
   ButtonOutline
 } from "@pagopa/io-app-design-system";
@@ -25,7 +26,6 @@ import { mixpanelTrack } from "../../../../../mixpanel";
 import { useIOSelector } from "../../../../../store/hooks";
 import { profileSelector } from "../../../../../store/reducers/profile";
 import { localeDateFormat } from "../../../../../utils/locale";
-import { IOToast } from "../../../../../components/Toast";
 import { openWebUrl } from "../../../../../utils/url";
 import { getCgnUserAgeRange } from "../../utils/dates";
 import { getCategorySpecs } from "../../utils/filters";
diff --git a/ts/features/bonus/cgn/components/merchants/CgnMerchantsListView.tsx b/ts/features/bonus/cgn/components/merchants/CgnMerchantsListView.tsx
index 3308dbca6db..be91b904616 100644
--- a/ts/features/bonus/cgn/components/merchants/CgnMerchantsListView.tsx
+++ b/ts/features/bonus/cgn/components/merchants/CgnMerchantsListView.tsx
@@ -43,7 +43,7 @@ const CgnMerchantsListView: React.FunctionComponent<Props> = (props: Props) => {
         keyExtractor={c => c.id}
         keyboardShouldPersistTaps={"handled"}
         ListFooterComponent={
-          props.merchantList.length > 0 && <EdgeBorderComponent />
+          props.merchantList.length > 0 ? <EdgeBorderComponent /> : null
         }
       />
     </View>
diff --git a/ts/features/bonus/cgn/components/merchants/__test__/__snapshots__/CgnDiscountDetail.test.tsx.snap b/ts/features/bonus/cgn/components/merchants/__test__/__snapshots__/CgnDiscountDetail.test.tsx.snap
index 900c53e914d..33405951ef8 100644
--- a/ts/features/bonus/cgn/components/merchants/__test__/__snapshots__/CgnDiscountDetail.test.tsx.snap
+++ b/ts/features/bonus/cgn/components/merchants/__test__/__snapshots__/CgnDiscountDetail.test.tsx.snap
@@ -128,7 +128,6 @@ exports[`when rendering on match snapshot for OTP discount 1`] = `
         align="xMidYMid"
         bbHeight={24}
         bbWidth={24}
-        color={4278219750}
         focusable={false}
         height={24}
         importantForAccessibility="no-hide-descendants"
@@ -151,19 +150,26 @@ exports[`when rendering on match snapshot for OTP discount 1`] = `
             },
           ]
         }
-        tintColor={4278219750}
+        tintColor="#0073E6"
         vbHeight={24}
         vbWidth={24}
         width={24}
       >
-        <RNSVGGroup>
+        <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+        >
           <RNSVGPath
             clipRule={0}
             d="M2.377 11.667A10.997 10.997 0 0 1 12.001 6c4.138 0 7.744 2.285 9.623 5.666a.686.686 0 0 1 0 .667A10.997 10.997 0 0 1 12 18a10.997 10.997 0 0 1-9.623-5.666.686.686 0 0 1 0-.667zM12.001 4A12.997 12.997 0 0 0 .629 10.696a2.686 2.686 0 0 0 0 2.609A12.997 12.997 0 0 0 12 20c4.894 0 9.155-2.705 11.372-6.696.45-.812.45-1.797 0-2.609A12.997 12.997 0 0 0 12.001 4zM15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm2 0a5 5 0 1 1-10 0 5 5 0 0 1 10 0z"
             fill={
-              Array [
-                2,
-              ]
+              Object {
+                "type": 2,
+              }
             }
             fillRule={0}
             propList={
@@ -607,7 +613,6 @@ exports[`when rendering on match snapshot for static code 1`] = `
       align="xMidYMid"
       bbHeight={24}
       bbWidth={24}
-      color={4278219750}
       focusable={false}
       height={24}
       importantForAccessibility="no-hide-descendants"
@@ -630,19 +635,26 @@ exports[`when rendering on match snapshot for static code 1`] = `
           },
         ]
       }
-      tintColor={4278219750}
+      tintColor="#0073E6"
       vbHeight={24}
       vbWidth={24}
       width={24}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGPath
           clipRule={0}
           d="M2.377 11.667A10.997 10.997 0 0 1 12.001 6c4.138 0 7.744 2.285 9.623 5.666a.686.686 0 0 1 0 .667A10.997 10.997 0 0 1 12 18a10.997 10.997 0 0 1-9.623-5.666.686.686 0 0 1 0-.667zM12.001 4A12.997 12.997 0 0 0 .629 10.696a2.686 2.686 0 0 0 0 2.609A12.997 12.997 0 0 0 12 20c4.894 0 9.155-2.705 11.372-6.696.45-.812.45-1.797 0-2.609A12.997 12.997 0 0 0 12.001 4zM15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm2 0a5 5 0 1 1-10 0 5 5 0 0 1 10 0z"
           fill={
-            Array [
-              2,
-            ]
+            Object {
+              "type": 2,
+            }
           }
           fillRule={0}
           propList={
diff --git a/ts/features/bonus/cgn/components/merchants/discount/__test__/__snapshots__/CgnDiscountCodeComponent.test.tsx.snap b/ts/features/bonus/cgn/components/merchants/discount/__test__/__snapshots__/CgnDiscountCodeComponent.test.tsx.snap
index aaf0faf9cc2..1317ad9a812 100644
--- a/ts/features/bonus/cgn/components/merchants/discount/__test__/__snapshots__/CgnDiscountCodeComponent.test.tsx.snap
+++ b/ts/features/bonus/cgn/components/merchants/discount/__test__/__snapshots__/CgnDiscountCodeComponent.test.tsx.snap
@@ -92,7 +92,6 @@ Array [
       align="xMidYMid"
       bbHeight={24}
       bbWidth={24}
-      color={4278219750}
       focusable={false}
       height={24}
       importantForAccessibility="no-hide-descendants"
@@ -115,19 +114,26 @@ Array [
           },
         ]
       }
-      tintColor={4278219750}
+      tintColor="#0073E6"
       vbHeight={24}
       vbWidth={24}
       width={24}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGPath
           clipRule={0}
           d="M2.377 11.667A10.997 10.997 0 0 1 12.001 6c4.138 0 7.744 2.285 9.623 5.666a.686.686 0 0 1 0 .667A10.997 10.997 0 0 1 12 18a10.997 10.997 0 0 1-9.623-5.666.686.686 0 0 1 0-.667zM12.001 4A12.997 12.997 0 0 0 .629 10.696a2.686 2.686 0 0 0 0 2.609A12.997 12.997 0 0 0 12 20c4.894 0 9.155-2.705 11.372-6.696.45-.812.45-1.797 0-2.609A12.997 12.997 0 0 0 12.001 4zM15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0zm2 0a5 5 0 1 1-10 0 5 5 0 0 1 10 0z"
           fill={
-            Array [
-              2,
-            ]
+            Object {
+              "type": 2,
+            }
           }
           fillRule={0}
           propList={
diff --git a/ts/features/bonus/cgn/navigation/navigator.tsx b/ts/features/bonus/cgn/navigation/navigator.tsx
index 2327300a913..650f18e2ab8 100644
--- a/ts/features/bonus/cgn/navigation/navigator.tsx
+++ b/ts/features/bonus/cgn/navigation/navigator.tsx
@@ -18,6 +18,7 @@ import CgnMerchantsCategoriesSelectionScreen from "../screens/merchants/CgnMerch
 import CgnMerchantsListByCategory from "../screens/merchants/CgnMerchantsListByCategory";
 import MerchantsListScreen from "../screens/merchants/CgnMerchantsListScreen";
 import CgnMerchantsTabsScreen from "../screens/merchants/CgnMerchantsTabsScreen";
+import { AppParamsList } from "../../../../navigation/params/AppParamsList";
 import {
   CgnActivationParamsList,
   CgnDetailsParamsList,
@@ -25,7 +26,9 @@ import {
 } from "./params";
 import CGN_ROUTES from "./routes";
 
-export const cgnLinkingOptions: PathConfigMap = {
+export const cgnLinkingOptions: PathConfigMap<
+  CgnActivationParamsList | AppParamsList
+> = {
   [CGN_ROUTES.DETAILS.MAIN]: {
     path: "cgn-details",
     screens: {
@@ -48,8 +51,7 @@ const ActivationStack = createStackNavigator<CgnActivationParamsList>();
 export const CgnActivationNavigator = () => (
   <ActivationStack.Navigator
     initialRouteName={CGN_ROUTES.ACTIVATION.INFORMATION_TOS}
-    headerMode="none"
-    screenOptions={{ gestureEnabled: isGestureEnabled }}
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerShown: false }}
   >
     <ActivationStack.Screen
       name={CGN_ROUTES.ACTIVATION.INFORMATION_TOS}
@@ -91,8 +93,7 @@ const DetailStack = createStackNavigator<CgnDetailsParamsList>();
 export const CgnDetailsNavigator = () => (
   <DetailStack.Navigator
     initialRouteName={CGN_ROUTES.DETAILS.DETAILS}
-    headerMode="none"
-    screenOptions={{ gestureEnabled: isGestureEnabled }}
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerShown: false }}
   >
     <DetailStack.Screen
       name={CGN_ROUTES.DETAILS.DETAILS}
@@ -130,8 +131,7 @@ const EycaActivationStack = createStackNavigator<CgnEYCAActivationParamsList>();
 export const CgnEYCAActivationNavigator = () => (
   <EycaActivationStack.Navigator
     initialRouteName={CGN_ROUTES.EYCA.ACTIVATION.LOADING}
-    headerMode="none"
-    screenOptions={{ gestureEnabled: isGestureEnabled }}
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerShown: false }}
   >
     <EycaActivationStack.Screen
       name={CGN_ROUTES.EYCA.ACTIVATION.LOADING}
diff --git a/ts/features/bonus/cgn/saga/networking/details/getCgnInformationSaga.ts b/ts/features/bonus/cgn/saga/networking/details/getCgnInformationSaga.ts
index b86f7df6cd8..948cb2e8e5c 100644
--- a/ts/features/bonus/cgn/saga/networking/details/getCgnInformationSaga.ts
+++ b/ts/features/bonus/cgn/saga/networking/details/getCgnInformationSaga.ts
@@ -1,12 +1,14 @@
-import { ActionType } from "typesafe-actions";
 import { readableReport } from "@pagopa/ts-commons/lib/reporters";
 import * as E from "fp-ts/lib/Either";
 import { call, put } from "typed-redux-saga/macro";
+import { ActionType } from "typesafe-actions";
+import { StatusEnum } from "../../../../../../../definitions/cgn/CardActivated";
 import { SagaCallReturnType } from "../../../../../../types/utils";
 import { getNetworkError } from "../../../../../../utils/errors";
+import { withRefreshApiCall } from "../../../../../fastLogin/saga/utils";
+import { walletAddCards } from "../../../../../newWallet/store/actions/cards";
 import { BackendCGN } from "../../../api/backendCgn";
 import { cgnDetails } from "../../../store/actions/details";
-import { withRefreshApiCall } from "../../../../../fastLogin/saga/utils";
 
 export function* cgnGetInformationSaga(
   getCgnStatus: ReturnType<typeof BackendCGN>["getCgnStatus"],
@@ -30,7 +32,23 @@ export function* cgnGetInformationSaga(
       E.isRight(cgnInformationResult) &&
       cgnInformationResult.right.status === 200
     ) {
-      yield* put(cgnDetails.success(cgnInformationResult.right.value));
+      const cgnInfo = cgnInformationResult.right.value;
+      const expireDate =
+        cgnInfo.status === StatusEnum.ACTIVATED
+          ? cgnInfo.expiration_date
+          : undefined;
+
+      yield* put(
+        walletAddCards([
+          {
+            type: "cgn",
+            category: "cgn",
+            key: "cgn_card",
+            expireDate
+          }
+        ])
+      );
+      yield* put(cgnDetails.success(cgnInfo));
     } else {
       yield* put(
         cgnDetails.failure({
diff --git a/ts/features/bonus/cgn/saga/orchestration/activation/activationSaga.ts b/ts/features/bonus/cgn/saga/orchestration/activation/activationSaga.ts
index 001e9abb69b..4c76242618e 100644
--- a/ts/features/bonus/cgn/saga/orchestration/activation/activationSaga.ts
+++ b/ts/features/bonus/cgn/saga/orchestration/activation/activationSaga.ts
@@ -1,6 +1,8 @@
+import { CommonActions } from "@react-navigation/native";
 import { SagaIterator } from "redux-saga";
 import { call } from "typed-redux-saga/macro";
 import NavigationService from "../../../../../../navigation/NavigationService";
+import ROUTES from "../../../../../../navigation/routes";
 import {
   executeWorkUnit,
   withResetNavigationStack
@@ -8,6 +10,7 @@ import {
 import { navigateBack } from "../../../../../../store/actions/navigation";
 import { SagaCallReturnType } from "../../../../../../types/utils";
 import { MESSAGES_ROUTES } from "../../../../../messages/navigation/routes";
+import { WalletRoutes } from "../../../../../newWallet/navigation/routes";
 import { BONUS_ROUTES } from "../../../../common/navigation/navigator";
 import {
   navigateToCgnActivationInformationTos,
@@ -45,12 +48,38 @@ export function* handleCgnStartActivationSaga(): SagaIterator {
   );
 
   if (initialScreen?.name === CGN_ROUTES.ACTIVATION.CTA_START_CGN) {
-    yield* call(NavigationService.navigate, MESSAGES_ROUTES.MESSAGES_HOME);
+    yield* call(NavigationService.navigate, ROUTES.MAIN, {
+      screen: MESSAGES_ROUTES.MESSAGES_HOME
+    });
   }
   if (result === "completed") {
     if (initialScreen?.name === BONUS_ROUTES.BONUS_AVAILABLE_LIST) {
       yield* call(navigateBack);
+      yield* call(navigateToCgnDetails);
+    } else if (initialScreen?.name === WalletRoutes.WALLET_CARD_ONBOARDING) {
+      yield* call(
+        NavigationService.dispatchNavigationAction,
+        CommonActions.reset({
+          index: 0,
+          routes: [
+            {
+              name: ROUTES.MAIN,
+              params: {
+                screen: ROUTES.WALLET_HOME,
+                params: { newMethodAdded: true }
+              }
+            },
+            {
+              name: CGN_ROUTES.DETAILS.MAIN,
+              params: {
+                screen: CGN_ROUTES.DETAILS.DETAILS
+              }
+            }
+          ]
+        })
+      );
+    } else {
+      yield* call(navigateToCgnDetails);
     }
-    yield* call(navigateToCgnDetails);
   }
 }
diff --git a/ts/features/bonus/cgn/screens/activation/CgnActivationCompletedScreen.tsx b/ts/features/bonus/cgn/screens/activation/CgnActivationCompletedScreen.tsx
index 33b2b6d96c8..c2f24ea5eac 100644
--- a/ts/features/bonus/cgn/screens/activation/CgnActivationCompletedScreen.tsx
+++ b/ts/features/bonus/cgn/screens/activation/CgnActivationCompletedScreen.tsx
@@ -1,57 +1,32 @@
 import * as React from "react";
-import { connect } from "react-redux";
-import { SafeAreaView, View } from "react-native";
-import { FooterWithButtons } from "@pagopa/io-app-design-system";
-
-import { GlobalState } from "../../../../../store/reducers/types";
-import { Dispatch } from "../../../../../store/actions/types";
-import { InfoScreenComponent } from "../../../../../components/infoScreen/InfoScreenComponent";
-import { IOStyles } from "../../../../../components/core/variables/IOStyles";
 import { cgnActivationComplete } from "../../store/actions/activation";
 import I18n from "../../../../../i18n";
-import paymentCompleted from "../../../../../../img/pictograms/payment-completed.png";
-import { renderInfoRasterImage } from "../../../../../components/infoScreen/imageRendering";
-
-type Props = ReturnType<typeof mapStateToProps> &
-  ReturnType<typeof mapDispatchToProps>;
+import { useIODispatch } from "../../../../../store/hooks";
+import { OperationResultScreenContent } from "../../../../../components/screens/OperationResultScreenContent";
 
 /**
  * Screen which is displayed when a user requested a CGN activation
  * and it has been correctly activated
  */
-const CgnActivationCompletedScreen = (props: Props): React.ReactElement => (
-  <SafeAreaView style={IOStyles.flex}>
-    <InfoScreenComponent
-      image={renderInfoRasterImage(paymentCompleted)}
+const CgnActivationCompletedScreen = () => {
+  const dispatch = useIODispatch();
+  const onConfirm = React.useCallback(() => {
+    dispatch(cgnActivationComplete());
+  }, [dispatch]);
+
+  return (
+    <OperationResultScreenContent
+      pictogram="success"
       title={I18n.t("bonus.cgn.activation.success.title")}
-      body={I18n.t("bonus.cgn.activation.success.body")}
+      subtitle={I18n.t("bonus.cgn.activation.success.body")}
+      action={{
+        label: I18n.t("bonus.cgn.cta.goToDetail"),
+        accessibilityLabel: I18n.t("bonus.cgn.cta.goToDetail"),
+        testID: "cgnConfirmButtonTestId",
+        onPress: onConfirm
+      }}
     />
-    <View>
-      <FooterWithButtons
-        type="SingleButton"
-        primary={{
-          type: "Solid",
-          buttonProps: {
-            label: I18n.t("bonus.cgn.cta.goToDetail"),
-            onPress: props.onConfirm,
-            accessibilityLabel: I18n.t("bonus.cgn.cta.goToDetail"),
-            testID: "cgnConfirmButtonTestId"
-          }
-        }}
-      />
-    </View>
-  </SafeAreaView>
-);
-
-const mapStateToProps = (_: GlobalState) => ({});
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  onConfirm: () => {
-    dispatch(cgnActivationComplete());
-  }
-});
+  );
+};
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(CgnActivationCompletedScreen);
+export default CgnActivationCompletedScreen;
diff --git a/ts/features/bonus/cgn/screens/activation/CgnActivationIneligibleScreen.tsx b/ts/features/bonus/cgn/screens/activation/CgnActivationIneligibleScreen.tsx
index e8a90eedf46..baf5ee88bba 100644
--- a/ts/features/bonus/cgn/screens/activation/CgnActivationIneligibleScreen.tsx
+++ b/ts/features/bonus/cgn/screens/activation/CgnActivationIneligibleScreen.tsx
@@ -1,53 +1,31 @@
 import * as React from "react";
-import { connect } from "react-redux";
-import { SafeAreaView, View } from "react-native";
-import { FooterWithButtons } from "@pagopa/io-app-design-system";
-import { GlobalState } from "../../../../../store/reducers/types";
-import { Dispatch } from "../../../../../store/actions/types";
-import { InfoScreenComponent } from "../../../../../components/infoScreen/InfoScreenComponent";
-import { renderInfoRasterImage } from "../../../../../components/infoScreen/imageRendering";
-import { IOStyles } from "../../../../../components/core/variables/IOStyles";
 import { cgnActivationCancel } from "../../store/actions/activation";
-import image from "../../../../../../img/servicesStatus/error-detail-icon.png";
 import I18n from "../../../../../i18n";
-
-type Props = ReturnType<typeof mapStateToProps> &
-  ReturnType<typeof mapDispatchToProps>;
+import { useIODispatch } from "../../../../../store/hooks";
+import { OperationResultScreenContent } from "../../../../../components/screens/OperationResultScreenContent";
 
 /**
  * Screen which is displayed when a user requested a CGN activation
  * but is not eligible for its activation
  */
-const CgnActivationIneligibleScreen = (props: Props): React.ReactElement => (
-  <SafeAreaView style={IOStyles.flex}>
-    <InfoScreenComponent
-      image={renderInfoRasterImage(image)}
+const CgnActivationIneligibleScreen = () => {
+  const dispatch = useIODispatch();
+  const onExit = React.useCallback(
+    () => dispatch(cgnActivationCancel()),
+    [dispatch]
+  );
+  return (
+    <OperationResultScreenContent
+      pictogram="accessDenied"
       title={I18n.t("bonus.cgn.activation.ineligible.title")}
-      body={I18n.t("bonus.cgn.activation.ineligible.body")}
+      subtitle={I18n.t("bonus.cgn.activation.ineligible.body")}
+      action={{
+        label: I18n.t("global.buttons.close"),
+        accessibilityLabel: I18n.t("global.buttons.close"),
+        onPress: onExit
+      }}
     />
-    <View>
-      <FooterWithButtons
-        type="SingleButton"
-        primary={{
-          type: "Outline",
-          buttonProps: {
-            onPress: props.onCancel,
-            label: I18n.t("global.buttons.exit"),
-            accessibilityLabel: I18n.t("global.buttons.exit")
-          }
-        }}
-      />
-    </View>
-  </SafeAreaView>
-);
-
-const mapStateToProps = (_: GlobalState) => ({});
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  onCancel: () => dispatch(cgnActivationCancel())
-});
+  );
+};
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(CgnActivationIneligibleScreen);
+export default CgnActivationIneligibleScreen;
diff --git a/ts/features/bonus/cgn/screens/activation/CgnActivationPendingScreen.tsx b/ts/features/bonus/cgn/screens/activation/CgnActivationPendingScreen.tsx
index e0a7f2278e0..bbae18593f9 100644
--- a/ts/features/bonus/cgn/screens/activation/CgnActivationPendingScreen.tsx
+++ b/ts/features/bonus/cgn/screens/activation/CgnActivationPendingScreen.tsx
@@ -1,54 +1,32 @@
 import * as React from "react";
-import { connect } from "react-redux";
-import { SafeAreaView, View } from "react-native";
-import { FooterWithButtons } from "@pagopa/io-app-design-system";
-
-import { GlobalState } from "../../../../../store/reducers/types";
-import { Dispatch } from "../../../../../store/actions/types";
-import { IOStyles } from "../../../../../components/core/variables/IOStyles";
-import { InfoScreenComponent } from "../../../../../components/infoScreen/InfoScreenComponent";
-import { renderInfoRasterImage } from "../../../../../components/infoScreen/imageRendering";
-import image from "../../../../../../img/messages/empty-message-list-icon.png";
 import I18n from "../../../../../i18n";
 import { cgnActivationCancel } from "../../store/actions/activation";
-
-type Props = ReturnType<typeof mapStateToProps> &
-  ReturnType<typeof mapDispatchToProps>;
+import { useIODispatch } from "../../../../../store/hooks";
+import { OperationResultScreenContent } from "../../../../../components/screens/OperationResultScreenContent";
 
 /**
  * Screen which is displayed when a user requested a CGN activation
  * and the server has already another request pending for the user
  */
-const CgnActivationPendingScreen = (props: Props): React.ReactElement => (
-  <SafeAreaView style={IOStyles.flex}>
-    <InfoScreenComponent
-      image={renderInfoRasterImage(image)}
+const CgnActivationPendingScreen = () => {
+  const dispatch = useIODispatch();
+  const onExit = React.useCallback(
+    () => dispatch(cgnActivationCancel()),
+    [dispatch]
+  );
+
+  return (
+    <OperationResultScreenContent
+      pictogram="pending"
       title={I18n.t("bonus.cgn.activation.pending.title")}
-      body={I18n.t("bonus.cgn.activation.pending.body")}
+      subtitle={I18n.t("bonus.cgn.activation.pending.body")}
+      action={{
+        label: I18n.t("global.buttons.close"),
+        accessibilityLabel: I18n.t("global.buttons.close"),
+        onPress: onExit
+      }}
     />
-    <View>
-      <FooterWithButtons
-        type="SingleButton"
-        primary={{
-          type: "Outline",
-          buttonProps: {
-            onPress: props.onExit,
-            label: I18n.t("global.buttons.exit"),
-            accessibilityLabel: I18n.t("global.buttons.exit")
-          }
-        }}
-      />
-    </View>
-  </SafeAreaView>
-);
-
-const mapStateToProps = (_: GlobalState) => ({});
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  onExit: () => dispatch(cgnActivationCancel())
-});
+  );
+};
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(CgnActivationPendingScreen);
+export default CgnActivationPendingScreen;
diff --git a/ts/features/bonus/cgn/screens/activation/CgnActivationTimeoutScreen.tsx b/ts/features/bonus/cgn/screens/activation/CgnActivationTimeoutScreen.tsx
index 8dafd6abd3d..d472c6135ef 100644
--- a/ts/features/bonus/cgn/screens/activation/CgnActivationTimeoutScreen.tsx
+++ b/ts/features/bonus/cgn/screens/activation/CgnActivationTimeoutScreen.tsx
@@ -1,34 +1,33 @@
 import * as React from "react";
-import { connect } from "react-redux";
-import { GlobalState } from "../../../../../store/reducers/types";
-import { Dispatch } from "../../../../../store/actions/types";
-import { BaseTimeoutScreen } from "../../../common/BaseTimeoutScreen";
 import { cgnActivationCancel } from "../../store/actions/activation";
 import I18n from "../../../../../i18n";
-
-type Props = ReturnType<typeof mapStateToProps> &
-  ReturnType<typeof mapDispatchToProps>;
+import { useIODispatch } from "../../../../../store/hooks";
+import { OperationResultScreenContent } from "../../../../../components/screens/OperationResultScreenContent";
 
 /**
  * Screen which is displayed when a user requested a CGN activation
  * and it took too long to get an answer from the server
  * (the user will be notified when the activation is completed by a message)
  */
-const CgnActivationTimeoutScreen = (props: Props): React.ReactElement => (
-  <BaseTimeoutScreen
-    title={I18n.t("bonus.cgn.activation.timeout.title")}
-    body={I18n.t("bonus.cgn.activation.timeout.body")}
-    onExit={props.onExit}
-  />
-);
-
-const mapStateToProps = (_: GlobalState) => ({});
+const CgnActivationTimeoutScreen = () => {
+  const dispatch = useIODispatch();
+  const onExit = React.useCallback(
+    () => dispatch(cgnActivationCancel()),
+    [dispatch]
+  );
 
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  onExit: () => dispatch(cgnActivationCancel())
-});
+  return (
+    <OperationResultScreenContent
+      pictogram="pending"
+      title={I18n.t("bonus.cgn.activation.timeout.title")}
+      subtitle={I18n.t("bonus.cgn.activation.timeout.body")}
+      action={{
+        label: I18n.t("global.buttons.close"),
+        accessibilityLabel: I18n.t("global.buttons.close"),
+        onPress: onExit
+      }}
+    />
+  );
+};
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(CgnActivationTimeoutScreen);
+export default CgnActivationTimeoutScreen;
diff --git a/ts/features/bonus/cgn/screens/activation/CgnAlreadyActiveScreen.tsx b/ts/features/bonus/cgn/screens/activation/CgnAlreadyActiveScreen.tsx
index dd86514c0e3..e21b833213f 100644
--- a/ts/features/bonus/cgn/screens/activation/CgnAlreadyActiveScreen.tsx
+++ b/ts/features/bonus/cgn/screens/activation/CgnAlreadyActiveScreen.tsx
@@ -1,58 +1,39 @@
 import * as React from "react";
-import { connect } from "react-redux";
-import { SafeAreaView, View } from "react-native";
-import { FooterWithButtons } from "@pagopa/io-app-design-system";
-import { GlobalState } from "../../../../../store/reducers/types";
-import { Dispatch } from "../../../../../store/actions/types";
-import { InfoScreenComponent } from "../../../../../components/infoScreen/InfoScreenComponent";
-import { renderInfoRasterImage } from "../../../../../components/infoScreen/imageRendering";
-import { IOStyles } from "../../../../../components/core/variables/IOStyles";
 import { cgnActivationCancel } from "../../store/actions/activation";
-import image from "../../../../../../img/messages/empty-due-date-list-icon.png";
 import I18n from "../../../../../i18n";
-import { navigateToCgnDetails } from "../../navigation/actions";
-
-type Props = ReturnType<typeof mapStateToProps> &
-  ReturnType<typeof mapDispatchToProps>;
+import { useIODispatch } from "../../../../../store/hooks";
+import { useIONavigation } from "../../../../../navigation/params/AppParamsList";
+import CGN_ROUTES from "../../navigation/routes";
+import { OperationResultScreenContent } from "../../../../../components/screens/OperationResultScreenContent";
 
 /**
  * Screen which is displayed when a user requested a CGN activation
  * but it is yet active
  */
-const CgnAlreadyActiveScreen = (props: Props): React.ReactElement => (
-  <SafeAreaView style={IOStyles.flex}>
-    <InfoScreenComponent
-      image={renderInfoRasterImage(image)}
-      title={I18n.t("bonus.cgn.activation.alreadyActive.title")}
-      body={I18n.t("bonus.cgn.activation.alreadyActive.body")}
-    />
-    <View>
-      <FooterWithButtons
-        type="SingleButton"
-        primary={{
-          type: "Solid",
-          buttonProps: {
-            onPress: props.navigateToDetail,
-            label: I18n.t("bonus.cgn.cta.goToDetail"),
-            accessibilityLabel: I18n.t("bonus.cgn.cta.goToDetail"),
-            testID: "cgnConfirmButtonTestId"
-          }
-        }}
-      />
-    </View>
-  </SafeAreaView>
-);
-
-const mapStateToProps = (_: GlobalState) => ({});
+const CgnAlreadyActiveScreen = () => {
+  const dispatch = useIODispatch();
+  const navigation = useIONavigation();
 
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  navigateToDetail: () => {
+  const navigateToDetail = React.useCallback(() => {
     dispatch(cgnActivationCancel());
-    navigateToCgnDetails();
-  }
-});
+    navigation.navigate(CGN_ROUTES.DETAILS.MAIN, {
+      screen: CGN_ROUTES.DETAILS.DETAILS
+    });
+  }, [dispatch, navigation]);
+
+  return (
+    <OperationResultScreenContent
+      pictogram="cardFavourite"
+      title={I18n.t("bonus.cgn.activation.alreadyActive.title")}
+      subtitle={I18n.t("bonus.cgn.activation.alreadyActive.body")}
+      action={{
+        label: I18n.t("bonus.cgn.cta.goToDetail"),
+        accessibilityLabel: I18n.t("bonus.cgn.cta.goToDetail"),
+        testID: "cgnConfirmButtonTestId",
+        onPress: navigateToDetail
+      }}
+    />
+  );
+};
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(CgnAlreadyActiveScreen);
+export default CgnAlreadyActiveScreen;
diff --git a/ts/features/bonus/cgn/screens/merchants/CgnMerchantsCategoriesSelectionScreen.tsx b/ts/features/bonus/cgn/screens/merchants/CgnMerchantsCategoriesSelectionScreen.tsx
index 0e2170aa72e..f3add25c6cd 100644
--- a/ts/features/bonus/cgn/screens/merchants/CgnMerchantsCategoriesSelectionScreen.tsx
+++ b/ts/features/bonus/cgn/screens/merchants/CgnMerchantsCategoriesSelectionScreen.tsx
@@ -9,6 +9,7 @@ import {
   getGradientColorValues,
   VSpacer,
   Badge,
+  IOToast,
   Icon
 } from "@pagopa/io-app-design-system";
 import { ProductCategoryWithNewDiscountsCount } from "../../../../../../definitions/cgn/merchants/ProductCategoryWithNewDiscountsCount";
@@ -26,7 +27,6 @@ import CGN_ROUTES from "../../navigation/routes";
 import { cgnCategories } from "../../store/actions/categories";
 import { cgnCategoriesListSelector } from "../../store/reducers/categories";
 import { getCategorySpecs } from "../../utils/filters";
-import { IOToast } from "../../../../../components/Toast";
 
 const CgnMerchantsCategoriesSelectionScreen = () => {
   const isFirstRender = useRef<boolean>(true);
diff --git a/ts/features/bonus/common/BaseTimeoutScreen.tsx b/ts/features/bonus/common/BaseTimeoutScreen.tsx
deleted file mode 100644
index c6cdc7c0fcc..00000000000
--- a/ts/features/bonus/common/BaseTimeoutScreen.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from "react";
-import { SafeAreaView } from "react-native";
-import image from "../../../../img/wallet/errors/payment-expired-icon.png";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
-import { renderInfoRasterImage } from "../../../components/infoScreen/imageRendering";
-import { InfoScreenComponent } from "../../../components/infoScreen/InfoScreenComponent";
-import I18n from "../../../i18n";
-import { cancelButtonProps } from "../../../components/buttons/ButtonConfigurations";
-import { FooterStackButton } from "../../../components/buttons/FooterStackButtons";
-
-type Props = {
-  title: string;
-  body: string | React.ReactNode;
-  onExit: () => void;
-};
-
-/**
- * This screen informs the user that the request takes longer than necessary to be completed
- * and will receive a notification with the outcome of the operation.
- * @param props
- * @constructor
- */
-
-export const BaseTimeoutScreen: React.FunctionComponent<Props> = props => {
-  const confirmText = I18n.t("global.buttons.exit");
-  return (
-    <SafeAreaView style={IOStyles.flex}>
-      <InfoScreenComponent
-        image={renderInfoRasterImage(image)}
-        title={props.title}
-        body={props.body}
-      />
-      <FooterStackButton
-        buttons={[cancelButtonProps(props.onExit, confirmText)]}
-      />
-    </SafeAreaView>
-  );
-};
diff --git a/ts/features/bonus/common/components/BonusInformationComponent.tsx b/ts/features/bonus/common/components/BonusInformationComponent.tsx
index f5f9f6a0788..9e8034b9fbc 100644
--- a/ts/features/bonus/common/components/BonusInformationComponent.tsx
+++ b/ts/features/bonus/common/components/BonusInformationComponent.tsx
@@ -30,7 +30,7 @@ import ItemSeparatorComponent from "../../../../components/ItemSeparatorComponen
 import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
 import { EdgeBorderComponent } from "../../../../components/screens/EdgeBorderComponent";
 import { LightModalContextInterface } from "../../../../components/ui/LightModal";
-import Markdown from "../../../../components/ui/Markdown";
+import LegacyMarkdown from "../../../../components/ui/Markdown/LegacyMarkdown";
 import I18n from "../../../../i18n";
 import customVariables from "../../../../theme/variables";
 import { useScreenReaderEnabled } from "../../../../utils/accessibility";
@@ -129,7 +129,7 @@ const getTosFooter = (
                 <VSpacer size={40} />
                 <ItemSeparatorComponent noPadded={true} />
                 <VSpacer size={40} />
-                <Markdown
+                <LegacyMarkdown
                   cssStyle={CSS_STYLE}
                   extraBodyHeight={extraMarkdownBodyHeight}
                 >
@@ -138,7 +138,7 @@ const getTosFooter = (
                     regulationLink: rU.url,
                     tosUrl: bT
                   })}
-                </Markdown>
+                </LegacyMarkdown>
               </>
             )
           )
@@ -259,13 +259,13 @@ const BonusInformationComponent: React.FunctionComponent<Props> = props => {
 
           <VSpacer size={16} />
           <ItemSeparatorComponent noPadded={true} />
-          <Markdown
+          <LegacyMarkdown
             cssStyle={CSS_STYLE}
             extraBodyHeight={extraMarkdownBodyHeight}
             onLoadEnd={onMarkdownLoaded}
           >
             {bonusTypeLocalizedContent.content}
-          </Markdown>
+          </LegacyMarkdown>
           <VSpacer size={40} />
           {isMarkdownLoaded && renderUrls()}
           {getTosFooter(
diff --git a/ts/features/bonus/common/components/DeclarationEntry.tsx b/ts/features/bonus/common/components/DeclarationEntry.tsx
deleted file mode 100644
index fea7b09b00d..00000000000
--- a/ts/features/bonus/common/components/DeclarationEntry.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, TouchableWithoutFeedback } from "react-native";
-import { HSpacer, VSpacer } from "@pagopa/io-app-design-system";
-import { Body } from "../../../../components/core/typography/Body";
-import { XOR } from "../../../../types/utils";
-import { RawCheckBox } from "../../../../components/core/selection/checkbox/RawCheckBox";
-
-const styles = StyleSheet.create({
-  main: { flex: 1, flexDirection: "row", flexWrap: "nowrap" },
-  shrink: { flexShrink: 1 }
-});
-
-type Props = {
-  // in order to accepts composite text with bold
-  text: XOR<string, React.ReactNode>;
-  onValueChange: (value: boolean) => void;
-};
-
-/**
- * Choose between a string or a node
- * @param text
- */
-const pickText = (text: XOR<string, React.ReactNode>) =>
-  typeof text === "string" ? <Body>{text}</Body> : text;
-
-/**
- * A declaration entry (checkbox + text) that the user have to accept in order to continue
- * @constructor
- */
-export const DeclarationEntry: React.FunctionComponent<Props> = props => {
-  const [isChecked, setIsChecked] = React.useState<boolean>(false);
-  const handleOnPress = () => {
-    const newValue = !isChecked;
-    setIsChecked(newValue);
-    props.onValueChange(newValue);
-  };
-
-  return (
-    <View>
-      <View style={styles.main}>
-        <RawCheckBox checked={isChecked} onPress={handleOnPress} />
-        <HSpacer size={16} />
-        <View style={styles.shrink}>
-          <TouchableWithoutFeedback onPress={handleOnPress}>
-            {pickText(props.text)}
-          </TouchableWithoutFeedback>
-        </View>
-      </View>
-      <VSpacer size={24} />
-    </View>
-  );
-};
diff --git a/ts/features/bonus/common/navigation/navigator.tsx b/ts/features/bonus/common/navigation/navigator.tsx
index 619409eae9f..8fbfa158274 100644
--- a/ts/features/bonus/common/navigation/navigator.tsx
+++ b/ts/features/bonus/common/navigation/navigator.tsx
@@ -19,8 +19,7 @@ const BonusStack = createStackNavigator<BonusParamsList>();
 export const BonusNavigator = () => (
   <BonusStack.Navigator
     initialRouteName={BONUS_ROUTES.MAIN}
-    headerMode="none"
-    screenOptions={{ gestureEnabled: isGestureEnabled }}
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerShown: false }}
   >
     <BonusStack.Screen
       name={BONUS_ROUTES.BONUS_AVAILABLE_LIST}
diff --git a/ts/features/bonus/common/screens/AvailableBonusScreen.tsx b/ts/features/bonus/common/screens/AvailableBonusScreen.tsx
index ec4b6bf18ef..18120c44b75 100644
--- a/ts/features/bonus/common/screens/AvailableBonusScreen.tsx
+++ b/ts/features/bonus/common/screens/AvailableBonusScreen.tsx
@@ -17,15 +17,14 @@ import { ServiceId } from "../../../../../definitions/backend/ServiceId";
 import { ServicePublic } from "../../../../../definitions/backend/ServicePublic";
 import { BonusAvailable } from "../../../../../definitions/content/BonusAvailable";
 import ItemSeparatorComponent from "../../../../components/ItemSeparatorComponent";
+import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay";
 import { IOStyles } from "../../../../components/core/variables/IOStyles";
-import { withLoadingSpinner } from "../../../../components/helpers/withLoadingSpinner";
 import BaseScreenComponent, {
   ContextualHelpPropsMarkdown
 } from "../../../../components/screens/BaseScreenComponent";
 import GenericErrorComponent from "../../../../components/screens/GenericErrorComponent";
 import FooterWithButtons from "../../../../components/ui/FooterWithButtons";
 import I18n from "../../../../i18n";
-import { ServiceDetailsScreenNavigationParams } from "../../../../screens/services/ServiceDetailsScreen";
 import {
   navigateBack,
   navigateToServiceDetailsScreen
@@ -58,6 +57,7 @@ import {
   supportedAvailableBonusSelector
 } from "../store/selectors";
 import { ID_CDC_TYPE, ID_CGN_TYPE } from "../utils";
+import { ServiceDetailsScreenNavigationParams } from "../../../services/screens/ServiceDetailsScreen";
 
 export type Props = ReturnType<typeof mapStateToProps> &
   ReturnType<typeof mapDispatchToProps>;
@@ -271,7 +271,15 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
     dispatch(showServiceDetails(service))
 });
 
+const AvailableBonusScreenFC: React.FunctionComponent<Props> = (
+  props: Props
+) => (
+  <LoadingSpinnerOverlay isLoading={props.isLoading}>
+    <AvailableBonusScreen {...props} />
+  </LoadingSpinnerOverlay>
+);
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(withLoadingSpinner(AvailableBonusScreen));
+)(AvailableBonusScreenFC);
diff --git a/ts/features/bonus/common/store/selectors/index.ts b/ts/features/bonus/common/store/selectors/index.ts
index 9967af718e6..a469485e2ed 100644
--- a/ts/features/bonus/common/store/selectors/index.ts
+++ b/ts/features/bonus/common/store/selectors/index.ts
@@ -8,7 +8,7 @@ import { GlobalState } from "../../../../../store/reducers/types";
 
 import { ServicePublic } from "../../../../../../definitions/backend/ServicePublic";
 import { BonusVisibilityEnum } from "../../../../../../definitions/content/BonusVisibility";
-import { servicesByIdSelector } from "../../../../../store/reducers/entities/services/servicesById";
+import { servicesByIdSelector } from "../../../../services/store/reducers/servicesById";
 import { mapBonusIdFeatureFlag } from "../../utils";
 import { AvailableBonusTypesState } from "../reducers/availableBonusesTypes";
 
diff --git a/ts/features/common/store/reducers/index.ts b/ts/features/common/store/reducers/index.ts
index 06d34f28b66..b0ed82336b6 100644
--- a/ts/features/common/store/reducers/index.ts
+++ b/ts/features/common/store/reducers/index.ts
@@ -28,13 +28,14 @@ import {
   CieLoginState
 } from "../../../cieLogin/store/reducers";
 
-import walletV3Reducer, {
-  WalletState as WalletV3State
-} from "../../../walletV3/common/store/reducers";
+import paymentsReducer, {
+  PaymentsState
+} from "../../../payments/common/store/reducers";
 import {
   fastLoginReducer,
   FastLoginState
 } from "../../../fastLogin/store/reducers";
+import walletReducer, { WalletState } from "../../../newWallet/store/reducers";
 
 type LoginFeaturesState = {
   testLogin: TestLoginState;
@@ -50,7 +51,8 @@ export type FeaturesState = {
   idPay: IDPayState;
   whatsNew: WhatsNewState & PersistPartial;
   loginFeatures: LoginFeaturesState;
-  wallet: WalletV3State;
+  payments: PaymentsState;
+  wallet: WalletState;
 };
 
 export type PersistedFeaturesState = FeaturesState & PersistPartial;
@@ -60,14 +62,15 @@ const rootReducer = combineReducers<FeaturesState, Action>({
   pn: pnReducer,
   fci: fciReducer,
   idPay: idPayReducer,
-  wallet: walletV3Reducer,
+  payments: paymentsReducer,
   whatsNew: whatsNewPersistor,
   loginFeatures: combineReducers<LoginFeaturesState, Action>({
     testLogin: testLoginReducer,
     nativeLogin: nativeLoginReducer,
     fastLogin: fastLoginReducer,
     cieLogin: cieLoginReducer
-  })
+  }),
+  wallet: walletReducer
 });
 
 const CURRENT_REDUX_FEATURES_STORE_VERSION = 1;
diff --git a/ts/features/design-system/DesignSystem.tsx b/ts/features/design-system/DesignSystem.tsx
index e70966a061c..1fbbba666f7 100644
--- a/ts/features/design-system/DesignSystem.tsx
+++ b/ts/features/design-system/DesignSystem.tsx
@@ -1,26 +1,17 @@
-import { SectionList, StatusBar, View, useColorScheme } from "react-native";
-import * as React from "react";
 import {
-  useIOTheme,
   Divider,
-  VSpacer,
+  IOStyles,
+  IOVisualCostants,
   ListItemNav,
-  IOVisualCostants
+  VSpacer,
+  useIOTheme
 } from "@pagopa/io-app-design-system";
-import { IOStyles } from "../../components/core/variables/IOStyles";
-import {
-  AppParamsList,
-  IOStackNavigationRouteProps
-} from "../../navigation/params/AppParamsList";
+import * as React from "react";
+import { SectionList, StatusBar, View, useColorScheme } from "react-native";
 import { H1 } from "../../components/core/typography/H1";
 import { LabelSmall } from "../../components/core/typography/LabelSmall";
+import { useIONavigation } from "../../navigation/params/AppParamsList";
 import DESIGN_SYSTEM_ROUTES from "./navigation/routes";
-import { DesignSystemParamsList } from "./navigation/params";
-
-type Props = IOStackNavigationRouteProps<
-  DesignSystemParamsList,
-  "DESIGN_SYSTEM_MAIN"
->;
 
 type SingleSectionProps = {
   title: string;
@@ -78,9 +69,10 @@ const DESIGN_SYSTEM_SECTION_DATA = [
   }
 ];
 
-export const DesignSystem = (props: Props) => {
+export const DesignSystem = () => {
   const theme = useIOTheme();
   const colorScheme = useColorScheme();
+  const navigation = useIONavigation();
 
   const renderDSNavItem = ({
     item: { title, route }
@@ -90,7 +82,7 @@ export const DesignSystem = (props: Props) => {
     <ListItemNav
       accessibilityLabel={`Go to the ${title} page`}
       value={title}
-      onPress={() => props.navigation.navigate(route as keyof AppParamsList)}
+      onPress={() => navigation.navigate(route as any)}
     />
   );
 
@@ -115,6 +107,7 @@ export const DesignSystem = (props: Props) => {
     <>
       <StatusBar
         barStyle={colorScheme === "dark" ? "light-content" : "default"}
+        backgroundColor={theme["appBackground-primary"]}
       />
       <SectionList
         keyExtractor={(item, index) => `${item.route}-${index}`}
diff --git a/ts/features/design-system/components/DSIconViewerBox.tsx b/ts/features/design-system/components/DSIconViewerBox.tsx
index b666dbf6a03..dc103082821 100644
--- a/ts/features/design-system/components/DSIconViewerBox.tsx
+++ b/ts/features/design-system/components/DSIconViewerBox.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View, StyleSheet, Text } from "react-native";
-import { IOColors, IOThemeContext } from "@pagopa/io-app-design-system";
+import { IOColors, useIOTheme } from "@pagopa/io-app-design-system";
 
 export const iconItemGutter = 8;
 
@@ -91,40 +91,39 @@ export const DSIconViewerBox = ({
   image,
   size,
   withDot = false
-}: DSIconViewerBoxProps) => (
-  <IOThemeContext.Consumer>
-    {theme => (
+}: DSIconViewerBoxProps) => {
+  const theme = useIOTheme();
+  return (
+    <View
+      style={[
+        styles.iconWrapper,
+        size ? sizeMap[size].wrapper : styles.iconWrapperAuto
+      ]}
+    >
       <View
         style={[
-          styles.iconWrapper,
-          size ? sizeMap[size].wrapper : styles.iconWrapperAuto
+          styles.iconItem,
+          size ? sizeMap[size].item : {},
+          { borderColor: IOColors[theme["cardBorder-default"]] }
         ]}
       >
-        <View
-          style={[
-            styles.iconItem,
-            size ? sizeMap[size].item : {},
-            { borderColor: IOColors[theme["cardBorder-default"]] }
-          ]}
-        >
-          {withDot && <View style={styles.signalDot} />}
-          {image}
-        </View>
-        <View style={styles.nameWrapper}>
-          {name && (
-            <Text
-              numberOfLines={1}
-              ellipsizeMode="tail"
-              style={[
-                { color: IOColors[theme["textBody-secondary"]] },
-                size ? sizeMap[size].label : styles.iconLabelMedium
-              ]}
-            >
-              {name}
-            </Text>
-          )}
-        </View>
+        {withDot && <View style={styles.signalDot} />}
+        {image}
       </View>
-    )}
-  </IOThemeContext.Consumer>
-);
+      <View style={styles.nameWrapper}>
+        {name && (
+          <Text
+            numberOfLines={1}
+            ellipsizeMode="tail"
+            style={[
+              { color: IOColors[theme["textBody-secondary"]] },
+              size ? sizeMap[size].label : styles.iconLabelMedium
+            ]}
+          >
+            {name}
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+};
diff --git a/ts/features/design-system/components/DSSpacerViewerBox.tsx b/ts/features/design-system/components/DSSpacerViewerBox.tsx
index 5aa059b52fc..33127fab7cc 100644
--- a/ts/features/design-system/components/DSSpacerViewerBox.tsx
+++ b/ts/features/design-system/components/DSSpacerViewerBox.tsx
@@ -2,11 +2,11 @@ import * as React from "react";
 import { View, Text } from "react-native";
 import {
   IOColors,
-  IOThemeContext,
   VSpacer,
   HSpacer,
   IOSpacer,
-  SpacerOrientation
+  SpacerOrientation,
+  useIOTheme
 } from "@pagopa/io-app-design-system";
 
 type DSSpacerViewerBoxProps = {
@@ -18,60 +18,58 @@ type DSSpacerLabelProps = {
   value: IOSpacer;
 };
 
-const DSSpacerLabel = ({ value }: DSSpacerLabelProps) => (
-  <IOThemeContext.Consumer>
-    {theme => (
-      <Text
-        numberOfLines={1}
-        ellipsizeMode="tail"
-        style={{ fontSize: 9, color: IOColors[theme["textBody-tertiary"]] }}
-      >
-        {value}
-      </Text>
-    )}
-  </IOThemeContext.Consumer>
-);
+const DSSpacerLabel = ({ value }: DSSpacerLabelProps) => {
+  const theme = useIOTheme();
+  return (
+    <Text
+      numberOfLines={1}
+      ellipsizeMode="tail"
+      style={{ fontSize: 9, color: IOColors[theme["textBody-tertiary"]] }}
+    >
+      {value}
+    </Text>
+  );
+};
 
 export const DSSpacerViewerBox = ({
   size,
   orientation = "vertical"
-}: DSSpacerViewerBoxProps) => (
-  <IOThemeContext.Consumer>
-    {theme => (
-      <>
-        {orientation === "vertical" ? (
-          <View style={{ flexDirection: "column" }}>
-            <View
-              style={{
-                backgroundColor: IOColors[theme["appBackground-tertiary"]]
-              }}
-            >
-              <VSpacer size={size} />
-            </View>
-            {size && (
-              <View style={{ flexDirection: "row", marginTop: 4 }}>
-                <DSSpacerLabel value={size} />
-              </View>
-            )}
+}: DSSpacerViewerBoxProps) => {
+  const theme = useIOTheme();
+  return (
+    <>
+      {orientation === "vertical" ? (
+        <View style={{ flexDirection: "column" }}>
+          <View
+            style={{
+              backgroundColor: IOColors[theme["appBackground-tertiary"]]
+            }}
+          >
+            <VSpacer size={size} />
           </View>
-        ) : (
-          <View style={{ flexDirection: "row" }}>
-            <View
-              style={{
-                backgroundColor: IOColors[theme["appBackground-tertiary"]],
-                height: 75
-              }}
-            >
-              <HSpacer size={size} />
+          {size && (
+            <View style={{ flexDirection: "row", marginTop: 4 }}>
+              <DSSpacerLabel value={size} />
             </View>
-            {size && (
-              <View style={{ flexDirection: "column", marginLeft: 4 }}>
-                <DSSpacerLabel value={size} />
-              </View>
-            )}
+          )}
+        </View>
+      ) : (
+        <View style={{ flexDirection: "row" }}>
+          <View
+            style={{
+              backgroundColor: IOColors[theme["appBackground-tertiary"]],
+              height: 75
+            }}
+          >
+            <HSpacer size={size} />
           </View>
-        )}
-      </>
-    )}
-  </IOThemeContext.Consumer>
-);
+          {size && (
+            <View style={{ flexDirection: "column", marginLeft: 4 }}>
+              <DSSpacerLabel value={size} />
+            </View>
+          )}
+        </View>
+      )}
+    </>
+  );
+};
diff --git a/ts/features/design-system/components/DesignSystemScreen.tsx b/ts/features/design-system/components/DesignSystemScreen.tsx
index edf7b21d0e3..154c1d26f4c 100644
--- a/ts/features/design-system/components/DesignSystemScreen.tsx
+++ b/ts/features/design-system/components/DesignSystemScreen.tsx
@@ -23,6 +23,7 @@ export const DesignSystemScreen = ({ children, noMargin = false }: Props) => {
     <>
       <StatusBar
         barStyle={colorScheme === "dark" ? "light-content" : "default"}
+        backgroundColor={theme["appBackground-primary"]}
       />
       <ScrollView
         contentContainerStyle={{
diff --git a/ts/features/design-system/core/DSBottomSheet.tsx b/ts/features/design-system/core/DSBottomSheet.tsx
index ea3ee094025..fe7d54ac34d 100644
--- a/ts/features/design-system/core/DSBottomSheet.tsx
+++ b/ts/features/design-system/core/DSBottomSheet.tsx
@@ -2,10 +2,10 @@ import * as React from "react";
 import { SafeAreaView } from "react-native";
 import {
   ButtonSolid,
-  IOThemeContext,
   VSpacer,
   ContentWrapper,
-  ListItemNav
+  ListItemNav,
+  useIOTheme
 } from "@pagopa/io-app-design-system";
 import { Body } from "../../../components/core/typography/Body";
 import { H2 } from "../../../components/core/typography/H2";
@@ -18,6 +18,7 @@ import { DesignSystemScreen } from "../components/DesignSystemScreen";
 import DESIGN_SYSTEM_ROUTES from "../navigation/routes";
 
 export const DSBottomSheet = () => {
+  const theme = useIOTheme();
   const handlePressDismiss = () => {
     dismissStaticBottomSheet();
     dismissStaticBottomSheetWithFooter();
@@ -186,85 +187,79 @@ export const DSBottomSheet = () => {
   );
 
   return (
-    <IOThemeContext.Consumer>
-      {theme => (
-        <DesignSystemScreen
-          title={DESIGN_SYSTEM_ROUTES.COMPONENTS.BOTTOM_SHEET.title}
-        >
-          <H2
-            color={theme["textHeading-default"]}
-            weight={"SemiBold"}
-            style={{ marginBottom: 16, marginTop: 16 }}
-          >
-            Available bottom sheets
-          </H2>
-          <ListItemNav
-            value="Static bottom sheet"
-            description="This bottom sheet has a static snap point of 300 hard coded in the hook declaration"
-            accessibilityLabel="Static bottom sheet"
-            onPress={presentStaticBottomSheet}
-          />
-          <ListItemNav
-            value="Static bottom sheet with footer"
-            description="This bottom sheet has a static snap point of 300 hard coded in the hook declaration with a footer"
-            accessibilityLabel="Static bottom sheet"
-            onPress={presentStaticBottomSheetWithFooter}
-          />
-          <ListItemNav
-            value="Autoresizable bottom sheet"
-            description="This bottom sheet has a snap point that is calculated based on the content height"
-            accessibilityLabel="Autoresizable bottom sheet"
-            onPress={presentAutoresizableBottomSheet}
-          />
-          <ListItemNav
-            value="Autoresizable bottom sheet with footer"
-            description="This bottom sheet has a snap point that is calculated based on the content height with a footer"
-            accessibilityLabel="Autoresizable bottom sheet with footer"
-            onPress={presentAutoresizableBottomSheetWithFooter}
-          />
-          <ListItemNav
-            value="Autoresizable bottom sheet with very long content and a footer"
-            description="This bottom sheet has a snap point that is calculated based on the content height with a footer, its content is very long  and the modal should snap below the upper safe area limit"
-            accessibilityLabel="Static bottom sheet"
-            onPress={presentVeryLongAutoresizableBottomSheetWithFooter}
-          />
-          <ListItemNav
-            value="Autoresizable bottom sheet with very long content and a footer, full screen"
-            description="This bottom sheet has a snap point that is calculated based on the content height with a footer, its content is very long and the modal takes the full screen"
-            accessibilityLabel="Static bottom sheet"
-            onPress={
-              presentVeryLongAutoresizableBottomSheetWithFooterFullScreen
-            }
-          />
-          <H2
-            color={theme["textHeading-default"]}
-            weight={"SemiBold"}
-            style={{ marginBottom: 16, marginTop: 16 }}
-          >
-            Legacy
-          </H2>
+    <DesignSystemScreen
+      title={DESIGN_SYSTEM_ROUTES.COMPONENTS.BOTTOM_SHEET.title}
+    >
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
+      >
+        Available bottom sheets
+      </H2>
+      <ListItemNav
+        value="Static bottom sheet"
+        description="This bottom sheet has a static snap point of 300 hard coded in the hook declaration"
+        accessibilityLabel="Static bottom sheet"
+        onPress={presentStaticBottomSheet}
+      />
+      <ListItemNav
+        value="Static bottom sheet with footer"
+        description="This bottom sheet has a static snap point of 300 hard coded in the hook declaration with a footer"
+        accessibilityLabel="Static bottom sheet"
+        onPress={presentStaticBottomSheetWithFooter}
+      />
+      <ListItemNav
+        value="Autoresizable bottom sheet"
+        description="This bottom sheet has a snap point that is calculated based on the content height"
+        accessibilityLabel="Autoresizable bottom sheet"
+        onPress={presentAutoresizableBottomSheet}
+      />
+      <ListItemNav
+        value="Autoresizable bottom sheet with footer"
+        description="This bottom sheet has a snap point that is calculated based on the content height with a footer"
+        accessibilityLabel="Autoresizable bottom sheet with footer"
+        onPress={presentAutoresizableBottomSheetWithFooter}
+      />
+      <ListItemNav
+        value="Autoresizable bottom sheet with very long content and a footer"
+        description="This bottom sheet has a snap point that is calculated based on the content height with a footer, its content is very long  and the modal should snap below the upper safe area limit"
+        accessibilityLabel="Static bottom sheet"
+        onPress={presentVeryLongAutoresizableBottomSheetWithFooter}
+      />
+      <ListItemNav
+        value="Autoresizable bottom sheet with very long content and a footer, full screen"
+        description="This bottom sheet has a snap point that is calculated based on the content height with a footer, its content is very long and the modal takes the full screen"
+        accessibilityLabel="Static bottom sheet"
+        onPress={presentVeryLongAutoresizableBottomSheetWithFooterFullScreen}
+      />
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
+      >
+        Legacy
+      </H2>
 
-          <ListItemNav
-            value="Legacy bottom sheet"
-            accessibilityLabel="Legacy bottom sheet"
-            onPress={presentLegacyBottomSheet}
-          />
-          <ListItemNav
-            value="Legacy bottom sheet with footer"
-            accessibilityLabel="Legacy bottom sheet with footer"
-            onPress={presentLegacyBottomSheetWithFooter}
-          />
-          <VSpacer size={24} />
-          {staticBottomSheet}
-          {staticBottomSheetWithFooter}
-          {autoResizableBottomSheet}
-          {autoResizableBottomSheetWithFooter}
-          {veryLongAutoResizableBottomSheetWithFooter}
-          {veryLongAutoResizableBottomSheetWithFooterFullScreen}
-          {legacyBottomSheet}
-          {legacyBottomSheetWithFooter}
-        </DesignSystemScreen>
-      )}
-    </IOThemeContext.Consumer>
+      <ListItemNav
+        value="Legacy bottom sheet"
+        accessibilityLabel="Legacy bottom sheet"
+        onPress={presentLegacyBottomSheet}
+      />
+      <ListItemNav
+        value="Legacy bottom sheet with footer"
+        accessibilityLabel="Legacy bottom sheet with footer"
+        onPress={presentLegacyBottomSheetWithFooter}
+      />
+      <VSpacer size={24} />
+      {staticBottomSheet}
+      {staticBottomSheetWithFooter}
+      {autoResizableBottomSheet}
+      {autoResizableBottomSheetWithFooter}
+      {veryLongAutoResizableBottomSheetWithFooter}
+      {veryLongAutoResizableBottomSheetWithFooterFullScreen}
+      {legacyBottomSheet}
+      {legacyBottomSheetWithFooter}
+    </DesignSystemScreen>
   );
 };
diff --git a/ts/features/design-system/core/DSButtons.tsx b/ts/features/design-system/core/DSButtons.tsx
index c5ed0e27ad6..70a2d2b83f5 100644
--- a/ts/features/design-system/core/DSButtons.tsx
+++ b/ts/features/design-system/core/DSButtons.tsx
@@ -1,29 +1,29 @@
-import { View, StyleSheet, Alert } from "react-native";
-import * as React from "react";
-import { OrganizationFiscalCode } from "@pagopa/ts-commons/lib/strings";
 import {
+  BlockButtons,
   ButtonLink,
   ButtonOutline,
   ButtonSolid,
+  HSpacer,
+  IOColors,
   IconButton,
-  IconButtonSolid,
   IconButtonContained,
-  IOColors,
-  HSpacer,
+  IconButtonSolid,
+  ListItemSwitch,
   VSpacer,
   useIOExperimentalDesign,
-  useIOTheme,
-  BlockButtons,
-  ListItemSwitch
+  useIOTheme
 } from "@pagopa/io-app-design-system";
+import { OrganizationFiscalCode } from "@pagopa/ts-commons/lib/strings";
+import * as React from "react";
 import { useState } from "react";
-import { H2 } from "../../../components/core/typography/H2";
+import { Alert, StyleSheet, View } from "react-native";
+import { PaymentNoticeNumber } from "../../../../definitions/backend/PaymentNoticeNumber";
 import CopyButtonComponent from "../../../components/CopyButtonComponent";
+import { H2 } from "../../../components/core/typography/H2";
+import { IOStyles } from "../../../components/core/variables/IOStyles";
 import PaymentButton from "../../messages/components/MessageDetail/PaymentButton";
-import { PaymentNoticeNumber } from "../../../../definitions/backend/PaymentNoticeNumber";
 import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
 import { DesignSystemScreen } from "../components/DesignSystemScreen";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
 
 const styles = StyleSheet.create({
   primaryBlockLegacy: {
@@ -78,7 +78,7 @@ export const DSButtons = () => {
       >
         ButtonLink
       </H2>
-      {renderButtonLink()}
+      {renderButtonLink(isExperimental)}
 
       <VSpacer size={48} />
 
@@ -628,7 +628,7 @@ const renderButtonOutline = (isExperimental: boolean) => (
   </>
 );
 
-const renderButtonLink = () => (
+const renderButtonLink = (isExperimental: boolean) => (
   <>
     <DSComponentViewerBox name="ButtonLink · Primary variant (using Pressable API)">
       <ButtonLink
@@ -687,6 +687,84 @@ const renderButtonLink = () => (
         />
       </View>
     </DSComponentViewerBox>
+
+    <View
+      style={isExperimental ? styles.primaryBlock : styles.primaryBlockLegacy}
+    >
+      <DSComponentViewerBox
+        name="ButtonLink · Contrast variant"
+        colorMode="dark"
+      >
+        <View>
+          <ButtonLink
+            color="contrast"
+            accessibilityLabel="Tap to trigger test alert"
+            label={"Primary button"}
+            onPress={onButtonPress}
+          />
+
+          <VSpacer size={16} />
+
+          <ButtonLink
+            color="contrast"
+            accessibilityLabel="Tap to trigger test alert"
+            label={"Primary button"}
+            icon="starEmpty"
+            onPress={onButtonPress}
+          />
+
+          <VSpacer size={16} />
+
+          <ButtonLink
+            color="contrast"
+            accessibilityLabel="Tap to trigger test alert"
+            label={"Primary button"}
+            icon="starEmpty"
+            iconPosition="end"
+            onPress={onButtonPress}
+          />
+
+          <VSpacer size={16} />
+
+          <View style={{ alignSelf: "center" }}>
+            <ButtonLink
+              color="contrast"
+              accessibilityLabel="Tap to trigger test alert"
+              label={"Primary button (centered)"}
+              onPress={onButtonPress}
+            />
+          </View>
+        </View>
+      </DSComponentViewerBox>
+
+      <DSComponentViewerBox
+        name="ButtonLink · Contrast, disabled"
+        colorMode="dark"
+        last
+      >
+        <View>
+          <ButtonLink
+            disabled
+            color="contrast"
+            accessibilityLabel="Tap to trigger test alert"
+            label={"Primary button (disabled)"}
+            onPress={onButtonPress}
+          />
+
+          <VSpacer size={16} />
+
+          <ButtonLink
+            disabled
+            color="contrast"
+            accessibilityLabel="Tap to trigger test alert"
+            label={"Primary button (disabled)"}
+            icon="starEmpty"
+            iconPosition="end"
+            onPress={onButtonPress}
+          />
+        </View>
+      </DSComponentViewerBox>
+    </View>
   </>
 );
 
diff --git a/ts/features/design-system/core/DSCards.tsx b/ts/features/design-system/core/DSCards.tsx
index 0b2cfd7a0b1..1c94441f2d3 100644
--- a/ts/features/design-system/core/DSCards.tsx
+++ b/ts/features/design-system/core/DSCards.tsx
@@ -1,14 +1,18 @@
-import * as React from "react";
-import { Alert, StyleSheet, View } from "react-native";
 import { HSpacer, VSpacer } from "@pagopa/io-app-design-system";
-import { PaymentCardBig } from "../../../components/ui/cards/payment/PaymentCardBig";
-import { PaymentCardSmall } from "../../../components/ui/cards/payment/PaymentCardSmall";
+import * as React from "react";
+import { Alert, ScrollView, StyleSheet, View } from "react-native";
+import { CgnCard } from "../../bonus/cgn/components/CgnCard";
+import { IdPayCard } from "../../idpay/wallet/components/IdPayCard";
+import { PaymentCard } from "../../payments/common/components/PaymentCard";
+import { PaymentCardBig } from "../../payments/common/components/PaymentCardBig";
+import { PaymentCardSmall } from "../../payments/common/components/PaymentCardSmall";
 import {
   PaymentCardsCarousel,
   PaymentCardsCarouselProps
-} from "../../../components/ui/cards/payment/PaymentCardsCarousel";
+} from "../../payments/common/components/PaymentCardsCarousel";
 import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
 import { DesignSystemScreen } from "../components/DesignSystemScreen";
+import { DesignSystemSection } from "../components/DesignSystemSection";
 
 const styles = StyleSheet.create({
   content: {
@@ -68,87 +72,132 @@ const cardsDataForCarousel: PaymentCardsCarouselProps = {
 // https://www.comuniecitta.it/elenco-banche-per-codice-abi
 export const DSCards = () => (
   <DesignSystemScreen title={"Cards"}>
-    <DSComponentViewerBox name="PaymentCardSmall">
-      <View style={styles.content}>
-        <PaymentCardSmall hpan="9999" isError={false} cardType={"CREDIT"} />
-        <HSpacer size={16} />
-        <PaymentCardSmall cardType="PAYPAL" />
-      </View>
-      <VSpacer size={16} />
-      <View style={styles.content}>
-        <PaymentCardSmall
-          cardType={"COBADGE"}
-          isError={true}
-          providerName="A very very long name for a provider"
-          cardIcon="maestro"
-          onCardPress={onPress}
-        />
-        <HSpacer size={16} />
-        <PaymentCardSmall
-          cardType={"BANCOMATPAY"}
-          isError={true}
-          onCardPress={onPress}
-        />
-      </View>
-      <VSpacer size={16} />
-      <View style={styles.content}>
-        <PaymentCardSmall isLoading={true} />
-
-        <HSpacer size={16} />
-
-        <PaymentCardSmall isLoading={true} />
-      </View>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox
-      name="PaymentCardBig
-"
-    >
-      <PaymentCardBig
-        hpan="9999"
-        cardType={"CREDIT"}
-        holderName="Mario Rossi"
-        cardIcon="mastercard"
-        expirationDate={new Date()}
-      />
-      <VSpacer size={16} />
-      <PaymentCardBig
-        cardType={"PAGOBANCOMAT"}
-        expirationDate={new Date()}
-        holderName="A very very very long citizen name"
-        abiCode="03069"
-      />
-      <VSpacer size={16} />
-      <PaymentCardBig
-        cardType={"PAYPAL"}
-        holderEmail="userPaypalEmail@email.com"
-      />
-      <VSpacer size={16} />
-      <PaymentCardBig
-        cardType={"COBADGE"}
-        holderName="Mario Rossi"
-        abiCode="08509"
-        expirationDate={new Date()}
-        cardIcon="visa"
-      />
-      <VSpacer size={16} />
-      <PaymentCardBig
-        cardType={"COBADGE"}
-        holderName="Mario Rossi"
-        abiCode="08508"
-        expirationDate={new Date()}
-        cardIcon="visa"
-      />
-      <VSpacer size={16} />
-      <PaymentCardBig
-        cardType={"BANCOMATPAY"}
-        holderName="Mario Rossi"
-        phoneNumber="+39 1234567890"
+    <DesignSystemSection title="PaymentCard">
+      <DSComponentViewerBox name="PaymentCard">
+        <ScrollView
+          horizontal={true}
+          style={{ aspectRatio: 16 / 10, marginHorizontal: -24 }}
+          contentContainerStyle={{ paddingHorizontal: 24, paddingVertical: 16 }}
+        >
+          <PaymentCard brand="MASTERCARD" hpan="9900" expireDate={new Date()} />
+          <HSpacer size={16} />
+          <PaymentCard
+            holderName="Anna Verdi"
+            expireDate={new Date()}
+            abiCode="03069"
+            brand="pagoBancomat"
+          />
+          <HSpacer size={16} />
+          <PaymentCard
+            holderName="Anna Verdi"
+            expireDate={new Date()}
+            abiCode="08509"
+            brand="maestro"
+          />
+          <HSpacer size={16} />
+          <PaymentCard holderEmail="anna_v********@**hoo.it" />
+          <HSpacer size={16} />
+          <PaymentCard holderName="Anna Verdi" holderPhone="+39 340 *** **62" />
+          <HSpacer size={16} />
+          <PaymentCard isLoading />
+        </ScrollView>
+      </DSComponentViewerBox>
+      <DSComponentViewerBox name="PaymentCardBig (Pre ITW)">
+        <ScrollView
+          horizontal={true}
+          style={{ marginHorizontal: -24 }}
+          contentContainerStyle={{ paddingHorizontal: 24 }}
+        >
+          <PaymentCardBig
+            cardType={"PAGOBANCOMAT"}
+            expirationDate={new Date()}
+            holderName="A very very very long citizen name"
+            abiCode="03069"
+          />
+          <HSpacer size={16} />
+          <PaymentCardBig
+            cardType={"PAYPAL"}
+            holderEmail="userPaypalEmail@email.com"
+          />
+          <HSpacer size={16} />
+          <PaymentCardBig
+            cardType={"COBADGE"}
+            holderName="Mario Rossi"
+            abiCode="08509"
+            expirationDate={new Date()}
+            cardIcon="visa"
+          />
+          <HSpacer size={16} />
+          <PaymentCardBig
+            cardType={"COBADGE"}
+            holderName="Mario Rossi"
+            abiCode="08508"
+            expirationDate={new Date()}
+            cardIcon="visa"
+          />
+          <HSpacer size={16} />
+          <PaymentCardBig
+            cardType={"BANCOMATPAY"}
+            holderName="Mario Rossi"
+            phoneNumber="+39 1234567890"
+          />
+          <HSpacer size={16} />
+          <PaymentCardBig isLoading={true} />
+        </ScrollView>
+      </DSComponentViewerBox>
+      <DSComponentViewerBox name="PaymentCardSmall">
+        <View style={styles.content}>
+          <PaymentCardSmall hpan="9999" isError={false} cardType={"CREDIT"} />
+          <HSpacer size={16} />
+          <PaymentCardSmall cardType="PAYPAL" />
+        </View>
+        <VSpacer size={16} />
+        <View style={styles.content}>
+          <PaymentCardSmall
+            cardType={"COBADGE"}
+            isError={true}
+            providerName="A very very long name for a provider"
+            cardIcon="maestro"
+            onCardPress={onPress}
+          />
+          <HSpacer size={16} />
+          <PaymentCardSmall
+            cardType={"BANCOMATPAY"}
+            isError={true}
+            onCardPress={onPress}
+          />
+        </View>
+        <VSpacer size={16} />
+        <View style={styles.content}>
+          <PaymentCardSmall isLoading={true} />
+          <HSpacer size={16} />
+          <PaymentCardSmall isLoading={true} />
+        </View>
+      </DSComponentViewerBox>
+      <DSComponentViewerBox name="PaymentCardsCarousel">
+        <PaymentCardsCarousel {...cardsDataForCarousel} />
+      </DSComponentViewerBox>
+    </DesignSystemSection>
+    <DesignSystemSection title="IdPayCard">
+      <IdPayCard
+        name="18 app"
+        amount={9999}
+        avatarSource={{
+          uri: "https://vtlogo.com/wp-content/uploads/2021/08/18app-vector-logo.png"
+        }}
+        expireDate={new Date()}
       />
-      <VSpacer size={16} />
-      <PaymentCardBig isLoading={true} />
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name="PaymentCardsCarousel">
-      <PaymentCardsCarousel {...cardsDataForCarousel} />
-    </DSComponentViewerBox>
+    </DesignSystemSection>
+    <DesignSystemSection title="CgnCard">
+      <DSComponentViewerBox name="Under 31">
+        <CgnCard expireDate={new Date(2023, 11, 2)} withEycaLogo={true} />
+      </DSComponentViewerBox>
+      <DSComponentViewerBox name="Expired">
+        <CgnCard withEycaLogo={true} />
+      </DSComponentViewerBox>
+      <DSComponentViewerBox name="Over 31">
+        <CgnCard expireDate={new Date(2023, 11, 2)} />
+      </DSComponentViewerBox>
+    </DesignSystemSection>
   </DesignSystemScreen>
 );
diff --git a/ts/features/design-system/core/DSHapticFeedback.tsx b/ts/features/design-system/core/DSHapticFeedback.tsx
index 7e45720299f..b7fe2194404 100644
--- a/ts/features/design-system/core/DSHapticFeedback.tsx
+++ b/ts/features/design-system/core/DSHapticFeedback.tsx
@@ -1,88 +1,79 @@
 import * as React from "react";
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
-import {
-  ButtonSolid,
-  IOThemeContext,
-  VSpacer
-} from "@pagopa/io-app-design-system";
+import { ButtonSolid, VSpacer, useIOTheme } from "@pagopa/io-app-design-system";
 import { H2 } from "../../../components/core/typography/H2";
 
 import { DesignSystemScreen } from "../components/DesignSystemScreen";
 
-export const DSHapticFeedback = () => (
-  <IOThemeContext.Consumer>
-    {theme => (
-      <DesignSystemScreen title={"Haptic Feedback"}>
-        <H2 color={theme["textHeading-default"]}>Feedback</H2>
-        <VSpacer size={24} />
-        <ButtonSolid
-          fullWidth
-          label="impactLight"
-          onPress={() => ReactNativeHapticFeedback.trigger("impactLight")}
-          accessibilityLabel="impactLight"
-          accessibilityHint="impactLight"
-        />
-        <VSpacer />
-        <ButtonSolid
-          fullWidth
-          label="impactMedium"
-          onPress={() => ReactNativeHapticFeedback.trigger("impactMedium")}
-          accessibilityLabel="impactMedium"
-          accessibilityHint="impactMedium"
-        />
-        <VSpacer />
-        <ButtonSolid
-          fullWidth
-          label="impactHeavy"
-          onPress={() => ReactNativeHapticFeedback.trigger("impactHeavy")}
-          accessibilityLabel="impactHeavy"
-          accessibilityHint="impactHeavy"
-        />
-        <VSpacer />
-        <ButtonSolid
-          fullWidth
-          label="rigid"
-          onPress={() => ReactNativeHapticFeedback.trigger("rigid")}
-          accessibilityLabel="rigid"
-          accessibilityHint="rigid"
-        />
-        <VSpacer />
-        <ButtonSolid
-          fullWidth
-          label="soft"
-          onPress={() => ReactNativeHapticFeedback.trigger("soft")}
-          accessibilityLabel="soft"
-          accessibilityHint="soft"
-        />
-        <VSpacer />
-        <ButtonSolid
-          fullWidth
-          label="notificationSuccess"
-          onPress={() =>
-            ReactNativeHapticFeedback.trigger("notificationSuccess")
-          }
-          accessibilityLabel="notificationSuccess"
-          accessibilityHint="notificationSuccess"
-        />
-        <VSpacer />
-        <ButtonSolid
-          fullWidth
-          label="notificationWarning"
-          onPress={() =>
-            ReactNativeHapticFeedback.trigger("notificationWarning")
-          }
-          accessibilityLabel="notificationWarning"
-          accessibilityHint="notificationWarning"
-        />
-        <VSpacer />
-        <ButtonSolid
-          fullWidth
-          label="notificationError"
-          onPress={() => ReactNativeHapticFeedback.trigger("notificationError")}
-          accessibilityLabel="notificationError"
-          accessibilityHint="notificationError"
-        />
-      </DesignSystemScreen>
-    )}
-  </IOThemeContext.Consumer>
-);
+export const DSHapticFeedback = () => {
+  const theme = useIOTheme();
+  return (
+    <DesignSystemScreen title={"Haptic Feedback"}>
+      <H2 color={theme["textHeading-default"]}>Feedback</H2>
+      <VSpacer size={24} />
+      <ButtonSolid
+        fullWidth
+        label="impactLight"
+        onPress={() => ReactNativeHapticFeedback.trigger("impactLight")}
+        accessibilityLabel="impactLight"
+        accessibilityHint="impactLight"
+      />
+      <VSpacer />
+      <ButtonSolid
+        fullWidth
+        label="impactMedium"
+        onPress={() => ReactNativeHapticFeedback.trigger("impactMedium")}
+        accessibilityLabel="impactMedium"
+        accessibilityHint="impactMedium"
+      />
+      <VSpacer />
+      <ButtonSolid
+        fullWidth
+        label="impactHeavy"
+        onPress={() => ReactNativeHapticFeedback.trigger("impactHeavy")}
+        accessibilityLabel="impactHeavy"
+        accessibilityHint="impactHeavy"
+      />
+      <VSpacer />
+      <ButtonSolid
+        fullWidth
+        label="rigid"
+        onPress={() => ReactNativeHapticFeedback.trigger("rigid")}
+        accessibilityLabel="rigid"
+        accessibilityHint="rigid"
+      />
+      <VSpacer />
+      <ButtonSolid
+        fullWidth
+        label="soft"
+        onPress={() => ReactNativeHapticFeedback.trigger("soft")}
+        accessibilityLabel="soft"
+        accessibilityHint="soft"
+      />
+      <VSpacer />
+      <ButtonSolid
+        fullWidth
+        label="notificationSuccess"
+        onPress={() => ReactNativeHapticFeedback.trigger("notificationSuccess")}
+        accessibilityLabel="notificationSuccess"
+        accessibilityHint="notificationSuccess"
+      />
+      <VSpacer />
+      <ButtonSolid
+        fullWidth
+        label="notificationWarning"
+        onPress={() => ReactNativeHapticFeedback.trigger("notificationWarning")}
+        accessibilityLabel="notificationWarning"
+        accessibilityHint="notificationWarning"
+      />
+      <VSpacer />
+      <ButtonSolid
+        fullWidth
+        label="notificationError"
+        onPress={() => ReactNativeHapticFeedback.trigger("notificationError")}
+        accessibilityLabel="notificationError"
+        accessibilityHint="notificationError"
+      />
+    </DesignSystemScreen>
+  );
+};
diff --git a/ts/features/design-system/core/DSHeaderSecondLevel.tsx b/ts/features/design-system/core/DSHeaderSecondLevel.tsx
index 1838a0a2276..89d44f1a5c2 100644
--- a/ts/features/design-system/core/DSHeaderSecondLevel.tsx
+++ b/ts/features/design-system/core/DSHeaderSecondLevel.tsx
@@ -3,7 +3,11 @@ import { Body, VSpacer } from "@pagopa/io-app-design-system";
 import { RNavScreenWithLargeHeader } from "../../../components/ui/RNavScreenWithLargeHeader";
 
 export const DSHeaderSecondLevel = () => (
-  <RNavScreenWithLargeHeader title="Questo è un titolo lungo, ma lungo lungo davvero, eh!">
+  <RNavScreenWithLargeHeader
+    title={{
+      label: "Questo è un titolo lungo, ma lungo lungo davvero, eh!"
+    }}
+  >
     <VSpacer />
     {[...Array(50)].map((_el, i) => (
       <Body key={`body-${i}`}>Repeated text</Body>
diff --git a/ts/features/design-system/core/DSIcons.tsx b/ts/features/design-system/core/DSIcons.tsx
index ffb2766e00a..05f08908c56 100644
--- a/ts/features/design-system/core/DSIcons.tsx
+++ b/ts/features/design-system/core/DSIcons.tsx
@@ -11,11 +11,11 @@ import {
   SVGIconProps,
   IOIconSizeScale,
   IOSystemIcons,
-  IOThemeContext,
   IOColors,
   IconContained,
   HSpacer,
-  IOStyles
+  IOStyles,
+  useIOTheme
 } from "@pagopa/io-app-design-system";
 import { DSIconViewerBox, iconItemGutter } from "../components/DSIconViewerBox";
 import { H2 } from "../../../components/core/typography/H2";
@@ -75,202 +75,201 @@ const styles = StyleSheet.create({
   }
 });
 
-export const DSIcons = () => (
-  <IOThemeContext.Consumer>
-    {theme => (
-      <DesignSystemScreen title={"Icons"}>
-        <View style={styles.itemsWrapper}>
-          {Object.entries(filteredIOIcons).map(([iconItemName]) => (
-            <DSIconViewerBox
-              key={iconItemName}
-              name={iconItemName}
-              size="small"
-              image={
-                <Icon
-                  name={iconItemName as IOIcons}
-                  color={theme["icon-default"]}
-                  size="100%"
-                />
-              }
-              withDot={Object.keys(IOIconsNew).includes(iconItemName)}
-            />
-          ))}
-        </View>
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 12 }}
-        >
-          Navigation
-        </H2>
-        <View style={styles.itemsWrapper}>
-          {Object.entries(IONavIcons).map(([iconItemName]) => (
-            <DSIconViewerBox
-              key={iconItemName}
-              name={iconItemName}
-              size="medium"
-              image={
-                <Icon
-                  name={iconItemName as IONavIcons}
-                  color={theme["icon-default"]}
-                  size="100%"
-                />
-              }
-            />
-          ))}
-        </View>
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 12 }}
-        >
-          Biometric
-        </H2>
-        <View style={styles.itemsWrapper}>
-          {Object.entries(IOBiometricIcons).map(([iconItemName]) => (
-            <DSIconViewerBox
-              key={iconItemName}
-              name={iconItemName}
-              size="large"
-              image={
-                <Icon
-                  name={iconItemName as IOBiometricIcons}
-                  color={theme["icon-default"]}
-                  size="100%"
-                />
-              }
-            />
-          ))}
-        </View>
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 12 }}
-        >
-          Categories
-        </H2>
-        <View style={styles.itemsWrapper}>
-          {Object.entries(IOCategoryIcons).map(([iconItemName]) => (
-            <DSIconViewerBox
-              key={iconItemName}
-              name={iconItemName}
-              size="medium"
-              image={
-                <Icon
-                  name={iconItemName as IOCategoryIcons}
-                  color={theme["icon-default"]}
-                  size="100%"
-                />
-              }
-            />
-          ))}
-        </View>
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 12 }}
-        >
-          Product
-        </H2>
-        <View style={styles.itemsWrapper}>
-          {Object.entries(IOProductIcons).map(([iconItemName]) => (
-            <DSIconViewerBox
-              key={iconItemName}
-              name={iconItemName}
-              size="large"
-              image={
-                <Icon
-                  name={iconItemName as IOProductIcons}
-                  color={theme["icon-default"]}
-                  size="100%"
-                />
-              }
-            />
-          ))}
-        </View>
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 12 }}
-        >
-          System
-        </H2>
-        <View style={styles.itemsWrapper}>
-          {Object.entries(IOSystemIcons).map(([iconItemName]) => (
-            <DSIconViewerBox
-              key={iconItemName}
-              name={iconItemName}
-              size="medium"
-              image={
-                <Icon
-                  name={iconItemName as IOSystemIcons}
-                  color={theme["icon-default"]}
-                  size="100%"
-                />
-              }
-            />
-          ))}
-        </View>
+export const DSIcons = () => {
+  const theme = useIOTheme();
+  return (
+    <DesignSystemScreen title={"Icons"}>
+      <View style={styles.itemsWrapper}>
+        {Object.entries(filteredIOIcons).map(([iconItemName]) => (
+          <DSIconViewerBox
+            key={iconItemName}
+            name={iconItemName}
+            size="small"
+            image={
+              <Icon
+                name={iconItemName as IOIcons}
+                color={theme["icon-default"]}
+                size="100%"
+              />
+            }
+            withDot={Object.keys(IOIconsNew).includes(iconItemName)}
+          />
+        ))}
+      </View>
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 12 }}
+      >
+        Navigation
+      </H2>
+      <View style={styles.itemsWrapper}>
+        {Object.entries(IONavIcons).map(([iconItemName]) => (
+          <DSIconViewerBox
+            key={iconItemName}
+            name={iconItemName}
+            size="medium"
+            image={
+              <Icon
+                name={iconItemName as IONavIcons}
+                color={theme["icon-default"]}
+                size="100%"
+              />
+            }
+          />
+        ))}
+      </View>
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 12 }}
+      >
+        Biometric
+      </H2>
+      <View style={styles.itemsWrapper}>
+        {Object.entries(IOBiometricIcons).map(([iconItemName]) => (
+          <DSIconViewerBox
+            key={iconItemName}
+            name={iconItemName}
+            size="large"
+            image={
+              <Icon
+                name={iconItemName as IOBiometricIcons}
+                color={theme["icon-default"]}
+                size="100%"
+              />
+            }
+          />
+        ))}
+      </View>
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 12 }}
+      >
+        Categories
+      </H2>
+      <View style={styles.itemsWrapper}>
+        {Object.entries(IOCategoryIcons).map(([iconItemName]) => (
+          <DSIconViewerBox
+            key={iconItemName}
+            name={iconItemName}
+            size="medium"
+            image={
+              <Icon
+                name={iconItemName as IOCategoryIcons}
+                color={theme["icon-default"]}
+                size="100%"
+              />
+            }
+          />
+        ))}
+      </View>
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 12 }}
+      >
+        Product
+      </H2>
+      <View style={styles.itemsWrapper}>
+        {Object.entries(IOProductIcons).map(([iconItemName]) => (
+          <DSIconViewerBox
+            key={iconItemName}
+            name={iconItemName}
+            size="large"
+            image={
+              <Icon
+                name={iconItemName as IOProductIcons}
+                color={theme["icon-default"]}
+                size="100%"
+              />
+            }
+          />
+        ))}
+      </View>
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 12 }}
+      >
+        System
+      </H2>
+      <View style={styles.itemsWrapper}>
+        {Object.entries(IOSystemIcons).map(([iconItemName]) => (
+          <DSIconViewerBox
+            key={iconItemName}
+            name={iconItemName}
+            size="medium"
+            image={
+              <Icon
+                name={iconItemName as IOSystemIcons}
+                color={theme["icon-default"]}
+                size="100%"
+              />
+            }
+          />
+        ))}
+      </View>
 
-        <H3
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 12 }}
-        >
-          IconContained
-        </H3>
-        <DSComponentViewerBox name="IconContained · Tonal variant, neutral color">
-          <View style={IOStyles.row}>
-            <IconContained icon="device" variant="tonal" color="neutral" />
-            <HSpacer size={8} />
-            <IconContained icon="institution" variant="tonal" color="neutral" />
-          </View>
-        </DSComponentViewerBox>
+      <H3
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 12 }}
+      >
+        IconContained
+      </H3>
+      <DSComponentViewerBox name="IconContained · Tonal variant, neutral color">
+        <View style={IOStyles.row}>
+          <IconContained icon="device" variant="tonal" color="neutral" />
+          <HSpacer size={8} />
+          <IconContained icon="institution" variant="tonal" color="neutral" />
+        </View>
+      </DSComponentViewerBox>
 
-        <H3
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 12 }}
-        >
-          Sizes
-        </H3>
-        <View style={styles.itemsWrapper}>
-          {/* If you want to render another icon in different sizes,
+      <H3
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 12 }}
+      >
+        Sizes
+      </H3>
+      <View style={styles.itemsWrapper}>
+        {/* If you want to render another icon in different sizes,
       just change the name below */}
-          {IOIconSizes.map(size => (
-            <DSIconViewerBox
-              key={`iconSize-${size}`}
-              name={`${size}`}
-              image={
-                <Icon
-                  name="creditCard"
-                  color={theme["icon-default"]}
-                  size={size}
-                />
-              }
-            />
-          ))}
-        </View>
-        <H3
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 12 }}
-        >
-          Colors
-        </H3>
-        <View style={styles.itemsWrapper}>
-          {IOIconColors.map(color => (
-            <DSIconViewerBox
-              key={`iconColor-${color}`}
-              name={`${color}`}
-              size="medium"
-              image={
-                <Icon name="messageLegal" size={24} color={color as IOColors} />
-              }
-            />
-          ))}
-        </View>
-      </DesignSystemScreen>
-    )}
-  </IOThemeContext.Consumer>
-);
+        {IOIconSizes.map(size => (
+          <DSIconViewerBox
+            key={`iconSize-${size}`}
+            name={`${size}`}
+            image={
+              <Icon
+                name="creditCard"
+                color={theme["icon-default"]}
+                size={size}
+              />
+            }
+          />
+        ))}
+      </View>
+      <H3
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 12 }}
+      >
+        Colors
+      </H3>
+      <View style={styles.itemsWrapper}>
+        {IOIconColors.map(color => (
+          <DSIconViewerBox
+            key={`iconColor-${color}`}
+            name={`${color}`}
+            size="medium"
+            image={
+              <Icon name="messageLegal" size={24} color={color as IOColors} />
+            }
+          />
+        ))}
+      </View>
+    </DesignSystemScreen>
+  );
+};
diff --git a/ts/features/design-system/core/DSLayout.tsx b/ts/features/design-system/core/DSLayout.tsx
index 8b5ea692ec8..3a9257d545a 100644
--- a/ts/features/design-system/core/DSLayout.tsx
+++ b/ts/features/design-system/core/DSLayout.tsx
@@ -2,14 +2,14 @@ import * as React from "react";
 import { View } from "react-native";
 import {
   IOColors,
-  IOThemeContext,
   Divider,
   VDivider,
   HSpacer,
   VSpacer,
   IOAppMargin,
   IOSpacer,
-  ContentWrapper
+  ContentWrapper,
+  useIOTheme
 } from "@pagopa/io-app-design-system";
 import { DesignSystemScreen } from "../components/DesignSystemScreen";
 import { DSSpacerViewerBox } from "../components/DSSpacerViewerBox";
@@ -18,152 +18,147 @@ import { LabelSmall } from "../../../components/core/typography/LabelSmall";
 import { H3 } from "../../../components/core/typography/H3";
 import { H1 } from "../../../components/core/typography/H1";
 
-export const DSLayout = () => (
-  <IOThemeContext.Consumer>
-    {theme => (
-      <DesignSystemScreen title={"Layout"} noMargin>
-        <ContentWrapper>
-          <H1
-            color={theme["textHeading-default"]}
-            weight={"Bold"}
-            style={{ marginBottom: 16 }}
-          >
-            Grid
-          </H1>
-          <H3
-            color={theme["textHeading-default"]}
-            weight={"SemiBold"}
-            style={{ marginBottom: 16 }}
+export const DSLayout = () => {
+  const theme = useIOTheme();
+
+  return (
+    <DesignSystemScreen title={"Layout"} noMargin>
+      <ContentWrapper>
+        <H1
+          color={theme["textHeading-default"]}
+          weight={"Bold"}
+          style={{ marginBottom: 16 }}
+        >
+          Grid
+        </H1>
+        <H3
+          color={theme["textHeading-default"]}
+          weight={"SemiBold"}
+          style={{ marginBottom: 16 }}
+        >
+          ContentWrapper
+        </H3>
+      </ContentWrapper>
+      {IOAppMargin.map((value, i, arr) => (
+        <React.Fragment key={`${value}-${i}`}>
+          <View
+            style={{
+              backgroundColor: IOColors[theme["appBackground-tertiary"]]
+            }}
           >
-            ContentWrapper
-          </H3>
-        </ContentWrapper>
-        {IOAppMargin.map((value, i, arr) => (
-          <React.Fragment key={`${value}-${i}`}>
-            <View
-              style={{
-                backgroundColor: IOColors[theme["appBackground-tertiary"]]
-              }}
-            >
-              <ContentWrapper margin={value}>
-                <View
-                  style={{
-                    paddingVertical: 16,
-                    backgroundColor: IOColors[theme["appBackground-secondary"]]
-                  }}
+            <ContentWrapper margin={value}>
+              <View
+                style={{
+                  paddingVertical: 16,
+                  backgroundColor: IOColors[theme["appBackground-secondary"]]
+                }}
+              >
+                <Body color={theme["textBody-secondary"]}>Content example</Body>
+                <LabelSmall
+                  style={{ position: "absolute", right: 4, top: 4 }}
+                  fontSize="small"
+                  weight="Regular"
+                  color={theme["textBody-tertiary"]}
                 >
-                  <Body color={theme["textBody-secondary"]}>
-                    Content example
-                  </Body>
-                  <LabelSmall
-                    style={{ position: "absolute", right: 4, top: 4 }}
-                    fontSize="small"
-                    weight="Regular"
-                    color={theme["textBody-tertiary"]}
-                  >
-                    {value}
-                  </LabelSmall>
-                </View>
-              </ContentWrapper>
-            </View>
-            {i !== arr.length - 1 && <VSpacer size={16} />}
-          </React.Fragment>
-        ))}
+                  {value}
+                </LabelSmall>
+              </View>
+            </ContentWrapper>
+          </View>
+          {i !== arr.length - 1 && <VSpacer size={16} />}
+        </React.Fragment>
+      ))}
 
-        <VSpacer size={40} />
+      <VSpacer size={40} />
 
-        <ContentWrapper>
-          <H1
-            color={theme["textHeading-default"]}
-            weight={"Bold"}
-            style={{ marginBottom: 16 }}
-          >
-            Spacing
-          </H1>
+      <ContentWrapper>
+        <H1
+          color={theme["textHeading-default"]}
+          weight={"Bold"}
+          style={{ marginBottom: 16 }}
+        >
+          Spacing
+        </H1>
 
-          <H3
-            color={theme["textHeading-default"]}
-            weight={"SemiBold"}
-            style={{ marginBottom: 16 }}
-          >
-            VSpacer
-          </H3>
+        <H3
+          color={theme["textHeading-default"]}
+          weight={"SemiBold"}
+          style={{ marginBottom: 16 }}
+        >
+          VSpacer
+        </H3>
 
-          {/* Vertical */}
-          {IOSpacer.map((spacerEntry, i, arr) => (
-            <React.Fragment key={`${spacerEntry}-${i}-vertical`}>
-              <DSSpacerViewerBox orientation="vertical" size={spacerEntry} />
-              {/* Don't add spacer to the last item. Quick and dirty
+        {/* Vertical */}
+        {IOSpacer.map((spacerEntry, i, arr) => (
+          <React.Fragment key={`${spacerEntry}-${i}-vertical`}>
+            <DSSpacerViewerBox orientation="vertical" size={spacerEntry} />
+            {/* Don't add spacer to the last item. Quick and dirty
         alternative to the Stack component.
         https://stackoverflow.com/a/60975451 */}
-              {i !== arr.length - 1 && <VSpacer size={16} />}
-            </React.Fragment>
-          ))}
+            {i !== arr.length - 1 && <VSpacer size={16} />}
+          </React.Fragment>
+        ))}
 
-          <VSpacer size={24} />
+        <VSpacer size={24} />
 
-          <H3
-            color={theme["textHeading-default"]}
-            weight={"SemiBold"}
-            style={{ marginBottom: 16 }}
-          >
-            HSpacer
-          </H3>
+        <H3
+          color={theme["textHeading-default"]}
+          weight={"SemiBold"}
+          style={{ marginBottom: 16 }}
+        >
+          HSpacer
+        </H3>
 
-          {/* Horizontal */}
-          <View style={{ flexDirection: "row" }}>
-            {IOSpacer.map((spacerEntry, i, arr) => (
-              <React.Fragment key={`${spacerEntry}-${i}-horizontal`}>
-                <DSSpacerViewerBox
-                  orientation="horizontal"
-                  size={spacerEntry}
-                />
-                {i !== arr.length - 1 && <HSpacer size={8} />}
-              </React.Fragment>
-            ))}
-          </View>
+        {/* Horizontal */}
+        <View style={{ flexDirection: "row" }}>
+          {IOSpacer.map((spacerEntry, i, arr) => (
+            <React.Fragment key={`${spacerEntry}-${i}-horizontal`}>
+              <DSSpacerViewerBox orientation="horizontal" size={spacerEntry} />
+              {i !== arr.length - 1 && <HSpacer size={8} />}
+            </React.Fragment>
+          ))}
+        </View>
 
-          <VSpacer size={48} />
-        </ContentWrapper>
+        <VSpacer size={48} />
+      </ContentWrapper>
 
-        <ContentWrapper>
-          <H1
-            color={theme["textHeading-default"]}
-            weight={"Bold"}
-            style={{ marginBottom: 16 }}
-          >
-            Divider
-          </H1>
+      <ContentWrapper>
+        <H1
+          color={theme["textHeading-default"]}
+          weight={"Bold"}
+          style={{ marginBottom: 16 }}
+        >
+          Divider
+        </H1>
 
-          <H3
-            color={theme["textHeading-default"]}
-            weight={"SemiBold"}
-            style={{ marginBottom: 16 }}
-          >
-            Default (Horizontal)
-          </H3>
+        <H3
+          color={theme["textHeading-default"]}
+          weight={"SemiBold"}
+          style={{ marginBottom: 16 }}
+        >
+          Default (Horizontal)
+        </H3>
 
-          <Divider />
-          <VSpacer size={48} />
-        </ContentWrapper>
         <Divider />
         <VSpacer size={48} />
+      </ContentWrapper>
+      <Divider />
+      <VSpacer size={48} />
 
-        <ContentWrapper>
-          <H3
-            color={theme["textHeading-default"]}
-            weight={"SemiBold"}
-            style={{ marginBottom: 16 }}
-          >
-            Vertical
-          </H3>
+      <ContentWrapper>
+        <H3
+          color={theme["textHeading-default"]}
+          weight={"SemiBold"}
+          style={{ marginBottom: 16 }}
+        >
+          Vertical
+        </H3>
 
-          <View style={{ flexDirection: "row", height: 100 }}>
-            <VDivider />
-          </View>
-          <VSpacer size={48} />
-        </ContentWrapper>
-      </DesignSystemScreen>
-    )}
-  </IOThemeContext.Consumer>
-);
+        <View style={{ flexDirection: "row", height: 100 }}>
+          <VDivider />
+        </View>
+        <VSpacer size={48} />
+      </ContentWrapper>
+    </DesignSystemScreen>
+  );
+};
diff --git a/ts/features/design-system/core/DSLegacyButtons.tsx b/ts/features/design-system/core/DSLegacyButtons.tsx
deleted file mode 100644
index 6658178d02e..00000000000
--- a/ts/features/design-system/core/DSLegacyButtons.tsx
+++ /dev/null
@@ -1,275 +0,0 @@
-import * as React from "react";
-import { View } from "react-native";
-import { Text as NBText } from "native-base";
-import { IOColors, VSpacer } from "@pagopa/io-app-design-system";
-import { H2 } from "../../../components/core/typography/H2";
-
-import { DesignSystemScreen } from "../components/DesignSystemScreen";
-import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
-import ButtonDefaultOpacity from "../../../components/ButtonDefaultOpacity";
-import { Label } from "../../../components/core/typography/Label";
-import GoBackButton from "../../../components/GoBackButton";
-import { LabelSmall } from "../../../components/core/typography/LabelSmall";
-
-export const DSLegacyButtons = () => (
-  <DesignSystemScreen title={"Legacy Buttons"}>
-    <H2
-      color={"bluegrey"}
-      weight={"SemiBold"}
-      style={{ marginBottom: 16, marginTop: 16 }}
-    >
-      NativeBase
-    </H2>
-    <DSComponentViewerBox name="NativeBase ButtonDefaultOpacity (Primary)">
-      {/* The following props render the button with the same
-              graphical attributes:
-                  - Active
-                  - Input Button
-            */}
-      <ButtonDefaultOpacity
-        primary={true}
-        onPress={() => {
-          alert("Action triggered");
-        }}
-      >
-        <NBText>Primary button</NBText>
-      </ButtonDefaultOpacity>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name="NativeBase ButtonDefaultOpacity (Primary Block)">
-      <ButtonDefaultOpacity
-        primary={true}
-        block={true}
-        onPress={() => {
-          alert("Action triggered");
-        }}
-      >
-        <NBText>Primary button (Block)</NBText>
-      </ButtonDefaultOpacity>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name="NativeBase ButtonDefaultOpacity (Primary Small)">
-      <ButtonDefaultOpacity
-        small={true}
-        onPress={() => {
-          alert("Action triggered");
-        }}
-      >
-        <NBText>Primary button (Small)</NBText>
-      </ButtonDefaultOpacity>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name="NativeBase Button (XSmall)">
-      <ButtonDefaultOpacity
-        xsmall={true}
-        onPress={() => {
-          alert("Action triggered");
-        }}
-      >
-        <NBText>XSmall button</NBText>
-      </ButtonDefaultOpacity>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name="NativeBase ButtonDefaultOpacity (Primary Disabled)">
-      <ButtonDefaultOpacity
-        disabled={true}
-        onPress={() => {
-          alert("Action triggered");
-        }}
-      >
-        <NBText>Primary button (Disabled)</NBText>
-      </ButtonDefaultOpacity>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name="NativeBase ButtonDefaultOpacity (Outline)">
-      <ButtonDefaultOpacity
-        bordered={true}
-        onPress={() => {
-          alert("Action triggered");
-        }}
-      >
-        <NBText>Outline button (Light)</NBText>
-      </ButtonDefaultOpacity>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name="NativeBase ButtonDefaultOpacity (Outline Block)">
-      <ButtonDefaultOpacity
-        bordered={true}
-        block={true}
-        onPress={() => {
-          alert("Action triggered");
-        }}
-      >
-        <NBText>Outline button (Block Light)</NBText>
-      </ButtonDefaultOpacity>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name="NativeBase ButtonDefaultOpacity (Outline Small)">
-      <ButtonDefaultOpacity
-        bordered={true}
-        small={true}
-        onPress={() => {
-          alert("Action triggered");
-        }}
-      >
-        <NBText>Outline button (Small Light)</NBText>
-      </ButtonDefaultOpacity>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name="NativeBase ButtonDefaultOpacity (Outline Disabled)">
-      <ButtonDefaultOpacity
-        bordered={true}
-        disabled={true}
-        onPress={() => {
-          alert("Action triggered");
-        }}
-      >
-        <NBText>Outline button (disabled)</NBText>
-      </ButtonDefaultOpacity>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name="NativeBase ButtonDefaultOpacity (Outline Light)">
-      <ButtonDefaultOpacity
-        bordered={true}
-        light={true}
-        onPress={() => {
-          alert("Action triggered");
-        }}
-      >
-        <NBText>Outline button (light)</NBText>
-      </ButtonDefaultOpacity>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name="NativeBase ButtonDefaultOpacity (Outline Block Light)">
-      <ButtonDefaultOpacity
-        bordered={true}
-        block={true}
-        light={true}
-        onPress={() => {
-          alert("Action triggered");
-        }}
-      >
-        <NBText>Outline button (block light)</NBText>
-      </ButtonDefaultOpacity>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name="NativeBase ButtonDefaultOpacity (Outline Small Light)">
-      <ButtonDefaultOpacity
-        bordered={true}
-        small={true}
-        light={true}
-        onPress={() => {
-          alert("Action triggered");
-        }}
-      >
-        <NBText>Outline button (small light)</NBText>
-      </ButtonDefaultOpacity>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name="NativeBase ButtonDefaultOpacity (Outline Light Disabled)">
-      <ButtonDefaultOpacity
-        bordered={true}
-        light={true}
-        disabled={true}
-        onPress={() => {
-          alert("Action triggered");
-        }}
-      >
-        <NBText>Outline button (light disabled)</NBText>
-      </ButtonDefaultOpacity>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name="NativeBase ButtonDefaultOpacity (Dark)">
-      <ButtonDefaultOpacity
-        dark={true}
-        onPress={() => {
-          alert("Action triggered");
-        }}
-      >
-        <NBText>Primary button (dark)</NBText>
-      </ButtonDefaultOpacity>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name="NativeBase ButtonDefaultOpacity (Outline Dark)">
-      <ButtonDefaultOpacity
-        dark={true}
-        bordered={true}
-        onPress={() => {
-          alert("Action triggered");
-        }}
-      >
-        <NBText>Outline button (dark)</NBText>
-      </ButtonDefaultOpacity>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name="NativeBase Button (Cancel) · Custom style, not managed by props">
-      <ButtonDefaultOpacity
-        bordered={true}
-        style={{ borderColor: IOColors.red }}
-        onPress={() => {
-          alert("Action triggered");
-        }}
-      >
-        <Label color={"red"}>Cancel outline button</Label>
-      </ButtonDefaultOpacity>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name="NativeBase Button (Cancel) · Custom style, not managed by props">
-      <ButtonDefaultOpacity
-        bordered={true}
-        block={true}
-        style={{ borderColor: IOColors.red }}
-        onPress={() => {
-          alert("Action triggered");
-        }}
-      >
-        <Label color={"red"}>Cancel outline button (block)</Label>
-      </ButtonDefaultOpacity>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name="NativeBase Button (Cancel)">
-      <ButtonDefaultOpacity
-        alert={true}
-        onPress={() => {
-          alert("Action triggered");
-        }}
-      >
-        <Label color={"white"}>Cancel button</Label>
-      </ButtonDefaultOpacity>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name="NativeBase Button (Cancel Block)">
-      <ButtonDefaultOpacity
-        alert={true}
-        block={true}
-        onPress={() => {
-          alert("Action triggered");
-        }}
-      >
-        <Label color={"white"}>Cancel button (block)</Label>
-      </ButtonDefaultOpacity>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name="NativeBase ButtonDefaultOpacity (Light Text)">
-      <ButtonDefaultOpacity
-        lightText={true}
-        onPress={() => {
-          alert("Action triggered");
-        }}
-      >
-        <NBText>Button (light text)</NBText>
-      </ButtonDefaultOpacity>
-    </DSComponentViewerBox>
-    <View
-      style={{
-        backgroundColor: IOColors.blue,
-        padding: 16,
-        borderRadius: 8
-      }}
-    >
-      <DSComponentViewerBox name="NativeBase Button (White)" colorMode="dark">
-        <ButtonDefaultOpacity
-          white={true}
-          onPress={() => {
-            alert("Action triggered");
-          }}
-        >
-          <LabelSmall color={"bluegrey"} weight={"Bold"}>
-            White button
-          </LabelSmall>
-        </ButtonDefaultOpacity>
-      </DSComponentViewerBox>
-
-      <DSComponentViewerBox name="NativeBase Button (White)" colorMode="dark">
-        <GoBackButton
-          onPress={() => {
-            alert("Going back");
-          }}
-          white={true}
-        />
-      </DSComponentViewerBox>
-    </View>
-    <VSpacer size={24} />
-  </DesignSystemScreen>
-);
diff --git a/ts/features/design-system/core/DSLegacyIllustrations.tsx b/ts/features/design-system/core/DSLegacyIllustrations.tsx
index 5ceef2b68b4..a0f001b9ecb 100644
--- a/ts/features/design-system/core/DSLegacyIllustrations.tsx
+++ b/ts/features/design-system/core/DSLegacyIllustrations.tsx
@@ -8,14 +8,7 @@ import {
 } from "../components/DSAssetViewerBox";
 
 /* ILLUSTRATIONS */
-/* Onboarding */
-import Landing05 from "../../../../img/landing/05.png";
-import Landing01 from "../../../../img/landing/01.png";
-import Landing02 from "../../../../img/landing/02.png";
-import Landing03 from "../../../../img/landing/03.png";
-import Landing04 from "../../../../img/landing/04.png";
 /* CIE */
-import LandingCIE from "../../../../img/cie/CIE-onboarding-illustration.png";
 import PlacingCard from "../../../../img/cie/place-card-illustration.png";
 import { DesignSystemScreen } from "../components/DesignSystemScreen";
 
@@ -32,45 +25,10 @@ const styles = StyleSheet.create({
 
 export const DSLegacyIllustrations = () => (
   <DesignSystemScreen title={"Legacy Illustrations"}>
-    <H2 color={"bluegrey"} weight={"SemiBold"} style={{ marginBottom: 16 }}>
-      Onboarding
-    </H2>
-    <View style={styles.itemsWrapper}>
-      <DSAssetViewerBox
-        type="raster"
-        name={"05"}
-        image={renderRasterImage(Landing05)}
-      />
-      <DSAssetViewerBox
-        type="raster"
-        name={"01"}
-        image={renderRasterImage(Landing01)}
-      />
-      <DSAssetViewerBox
-        type="raster"
-        name={"02"}
-        image={renderRasterImage(Landing02)}
-      />
-      <DSAssetViewerBox
-        type="raster"
-        name={"03"}
-        image={renderRasterImage(Landing03)}
-      />
-      <DSAssetViewerBox
-        type="raster"
-        name={"04"}
-        image={renderRasterImage(Landing04)}
-      />
-    </View>
     <H2 color={"bluegrey"} weight={"SemiBold"} style={{ marginBottom: 16 }}>
       CIE
     </H2>
     <View style={styles.itemsWrapper}>
-      <DSAssetViewerBox
-        type="raster"
-        name={"CIE"}
-        image={renderRasterImage(LandingCIE)}
-      />
       <DSAssetViewerBox
         type="raster"
         name={"Placing Card"}
diff --git a/ts/features/design-system/core/DSLegacyPictograms.tsx b/ts/features/design-system/core/DSLegacyPictograms.tsx
index 6d41cb43161..dd185ecf833 100644
--- a/ts/features/design-system/core/DSLegacyPictograms.tsx
+++ b/ts/features/design-system/core/DSLegacyPictograms.tsx
@@ -10,25 +10,16 @@ import {
 
 /* PICTOGRAMS */
 import BrokenLink from "../../../../img/broken-link.png";
-import AirBaloonRaster from "../../../../img/landing/session_expired.png";
-import Baloons from "../../../../img/messages/empty-due-date-list-icon.png";
 import AirBaloonArrow from "../../../../img/messages/empty-message-list-icon.png";
 import PiggyBank from "../../../../img/messages/empty-transaction-list-icon.png";
 import Error from "../../../../img/messages/error-message-detail-icon.png";
 import Question from "../../../../img/pictograms/doubt.png";
-import Fireworks from "../../../../img/pictograms/fireworks.png";
-import Hourglass from "../../../../img/pictograms/hourglass.png";
 import CompletedRaster from "../../../../img/pictograms/payment-completed.png";
-import Completed from "../../../../img/pictograms/payment-completed.svg";
 import BeerMug from "../../../../img/search/beer-mug.png";
 import Search from "../../../../img/search/search-icon.png";
 import Puzzle from "../../../../img/services/icon-loading-services.png";
 import ABILogo from "../../../../img/wallet/cards-icons/abiLogoFallback.png";
-import Castle from "../../../../img/wallet/errors/domain-unknown-icon.png";
 import Umbrella from "../../../../img/wallet/errors/generic-error-icon.png";
-import Abacus from "../../../../img/wallet/errors/invalid-amount-icon.png";
-import InProgress from "../../../../img/wallet/errors/missing-payment-id-icon.png";
-import Vespa from "../../../../img/wallet/errors/payment-ongoing-icon.png";
 import NotAvailable from "../../../../img/wallet/errors/payment-unavailable-icon.png";
 import Unrecognized from "../../../../img/wallet/errors/payment-unknown-icon.png";
 /* EU Covid Certificate */
@@ -36,6 +27,7 @@ import CertificateExpired from "../../../../img/features/euCovidCert/certificate
 import CertificateNotFound from "../../../../img/features/euCovidCert/certificate_not_found.png";
 import CertificateRevoked from "../../../../img/features/euCovidCert/certificate_revoked.png";
 import CertificateWrongFormat from "../../../../img/features/euCovidCert/certificate_wrong_format.png";
+import Baloons from "../../../../img/messages/empty-due-date-list-icon.png";
 /* Donations */
 import Heart from "../../../../img/features/uaDonations/heart.svg";
 /* Sections */
@@ -58,26 +50,11 @@ export const DSLegacyPictograms = () => {
   return (
     <DesignSystemScreen title={"Legacy Pictograms"}>
       <View style={styles.itemsWrapper}>
-        <DSAssetViewerBox
-          type="raster"
-          name={"Fireworks"}
-          image={renderRasterImage(Fireworks)}
-        />
         <DSAssetViewerBox
           type="raster"
           name={"Question"}
           image={renderRasterImage(Question)}
         />
-        <DSAssetViewerBox
-          type="raster"
-          name={"Hourglass"}
-          image={renderRasterImage(Hourglass)}
-        />
-        <DSAssetViewerBox
-          type="raster"
-          name={"Air Baloon (raster)"}
-          image={renderRasterImage(AirBaloonRaster)}
-        />
         <DSAssetViewerBox
           type="raster"
           name={"Air Baloon (arrow)"}
@@ -118,36 +95,16 @@ export const DSLegacyPictograms = () => {
           name={"ABILogo"}
           image={renderRasterImage(ABILogo)}
         />
-        <DSAssetViewerBox
-          type="raster"
-          name={"Castle"}
-          image={renderRasterImage(Castle)}
-        />
         <DSAssetViewerBox
           type="raster"
           name={"Umbrella"}
           image={renderRasterImage(Umbrella)}
         />
-        <DSAssetViewerBox
-          type="raster"
-          name={"Abacus"}
-          image={renderRasterImage(Abacus)}
-        />
-        <DSAssetViewerBox
-          type="raster"
-          name={"Vespa"}
-          image={renderRasterImage(Vespa)}
-        />
         <DSAssetViewerBox
           type="raster"
           name={"NotAvailable"}
           image={renderRasterImage(NotAvailable)}
         />
-        <DSAssetViewerBox
-          type="raster"
-          name={"InProgress"}
-          image={renderRasterImage(InProgress)}
-        />
         <DSAssetViewerBox
           type="raster"
           name={"Unrecognized"}
@@ -159,7 +116,6 @@ export const DSLegacyPictograms = () => {
           name={"Completed"}
           image={renderRasterImage(CompletedRaster)}
         />
-        <DSAssetViewerBox name={"Completed"} image={<Completed />} />
         <DSAssetViewerBox
           type="raster"
           name={"BrokenLink"}
diff --git a/ts/features/design-system/core/DSListItems.tsx b/ts/features/design-system/core/DSListItems.tsx
index 41226fbac72..5adaca5496d 100644
--- a/ts/features/design-system/core/DSListItems.tsx
+++ b/ts/features/design-system/core/DSListItems.tsx
@@ -3,7 +3,6 @@ import * as React from "react";
 
 import {
   Divider,
-  IOThemeContext,
   Icon,
   ListItemAction,
   ListItemHeader,
@@ -14,7 +13,8 @@ import {
   ListItemTransaction,
   ListItemTransactionLogo,
   ListItemTransactionStatusWithBadge,
-  VSpacer
+  VSpacer,
+  useIOTheme
 } from "@pagopa/io-app-design-system";
 import { Alert, View } from "react-native";
 import { H2 } from "../../../components/core/typography/H2";
@@ -29,7 +29,7 @@ import { ProductCategoryEnum } from "../../../../definitions/cgn/merchants/Produ
 import DetailedlistItemComponent from "../../../components/DetailedlistItemComponent";
 import CgnMerchantListItem from "../../bonus/cgn/components/merchants/CgnMerchantListItem";
 import OrderOption from "../../bonus/cgn/components/merchants/search/OrderOption";
-import { getBadgeTextByTransactionStatus } from "../../walletV3/common/utils";
+import { getBadgeTextByTransactionStatus } from "../../payments/common/utils";
 import ZendeskItemPermissionComponent from "../../zendesk/components/ZendeskItemPermissionComponent";
 import { DesignSystemScreen } from "../components/DesignSystemScreen";
 
@@ -41,270 +41,268 @@ const onCopyButtonPress = () => {
   Alert.alert("Copied!", "Value copied");
 };
 
-export const DSListItems = () => (
-  <IOThemeContext.Consumer>
-    {theme => (
-      <DesignSystemScreen title="List Items">
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16, marginTop: 16 }}
-        >
-          ListItemNav
-        </H2>
-        {renderListItemNav()}
-
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16, marginTop: 16 }}
-        >
-          ListItemInfoCopy
-        </H2>
-        {renderListItemInfoCopy()}
-
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16, marginTop: 16 }}
-        >
-          ListItemInfo
-        </H2>
-        {renderListItemInfo()}
-
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16, marginTop: 16 }}
-        >
-          ListItemHeader
-        </H2>
-        {renderListItemHeader()}
-
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16, marginTop: 16 }}
-        >
-          ListItemAction
-        </H2>
-        {renderListItemAction()}
-
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16, marginTop: 16 }}
-        >
-          ListItemTransaction
-        </H2>
-        {renderListItemTransaction()}
-
-        <VSpacer size={24} />
-
-        <H2
-          color={"bluegrey"}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16, marginTop: 16 }}
-        >
-          NativeBase lookalikes (not NativeBase)
-        </H2>
-        <DSComponentViewerBox name="BankPreviewItem -- using PressableListItemBase">
-          <BankPreviewItem
-            bank={{
-              abi: "03069",
-              logoUrl: "https://assets.cdn.io.italia.it/logos/abi/03069.png",
-              name: "Intesa Sanpaolo"
-            }}
-            onPress={() => alert("Action triggered")}
-          />
-        </DSComponentViewerBox>
-
-        <VSpacer size={40} />
-
-        <H2
-          color={"bluegrey"}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16, marginTop: 16 }}
-        >
-          ListItemComponent (NativeBase)
-        </H2>
-        <DSComponentViewerBox name="ListItemComponent (title)">
-          <ListItemComponent
-            title={"Title"}
-            onPress={() => alert("Action triggered")}
-          />
-        </DSComponentViewerBox>
-        <DSComponentViewerBox name="ListItemComponent (title + subtitle)">
-          <ListItemComponent
-            title={"Title"}
-            subTitle="Subtitle"
-            onPress={() => alert("Action triggered")}
-          />
-        </DSComponentViewerBox>
-        <DSComponentViewerBox name="ListItemComponent (without icon)">
-          <ListItemComponent
-            title={"Title"}
-            hideIcon={true}
-            onPress={() => alert("Action triggered")}
-          />
-        </DSComponentViewerBox>
-        <DSComponentViewerBox name="ListItemComponent (without separator)">
-          <ListItemComponent
-            title={"Title"}
-            onPress={() => alert("Action triggered")}
-            hideSeparator={true}
-          />
-        </DSComponentViewerBox>
-        <DSComponentViewerBox name="ListItemComponent (stress test)">
-          <ListItemComponent
-            title={"Let's try a looong looooong looooooooong title"}
-            subTitle="A loooong looooooong looooooooooong subtitle, too"
-            onPress={() => alert("Action triggered")}
-          />
-        </DSComponentViewerBox>
-        <DSComponentViewerBox name="ListItemComponent (stress test, no truncated subtitle)">
-          <ListItemComponent
-            title={"Let's try a looong looooong looooooooong title"}
-            subTitle="A loooong looooooong looooooooooong subtitle, too"
-            useExtendedSubTitle={true}
-            onPress={() => alert("Action triggered")}
-          />
-        </DSComponentViewerBox>
-
-        <DSComponentViewerBox name="ListItemComponent (badge)">
-          <ListItemComponent
-            title={"A looong looooong looooooooong looooooooooong title"}
-            hasBadge={true}
-            onPress={() => alert("Action triggered")}
-          />
-        </DSComponentViewerBox>
-        <DSComponentViewerBox name="ListItemComponent (badge)">
-          <ListItemComponent
-            title={"A looong looooong looooooooong looooooooooong title"}
-            titleBadge="Badge"
-            onPress={() => alert("Action triggered")}
-          />
-        </DSComponentViewerBox>
-        <DSComponentViewerBox name="ListItemComponent (custom icon)">
-          <ListItemComponent
-            title={"Title"}
-            iconSize={12}
-            iconName={"checkTickBig"}
-            onPress={() => alert("Action triggered")}
-          />
-        </DSComponentViewerBox>
-        <DSComponentViewerBox name="ListItemComponent (switch)">
-          <ListItemComponent
-            title={"Setting with switch"}
-            switchValue={true}
-            accessibilityRole={"switch"}
-            accessibilityState={{ checked: false }}
-            isLongPressEnabled={true}
-            onPress={() => alert("Action triggered")}
-          />
-        </DSComponentViewerBox>
-        <DSComponentViewerBox name="ListItemComponent (radio)">
-          <ListItemComponent
-            title={"Title"}
-            subTitle={"Subtitle"}
-            iconName={"legRadioOn"}
-            smallIconSize={true}
-            iconOnTop={true}
-            onPress={() => alert("Action triggered")}
-          />
-        </DSComponentViewerBox>
-
-        <H2
-          color={"bluegrey"}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16, marginTop: 16 }}
-        >
-          Derivated from ListItem (NativeBase)
-        </H2>
-        <DSComponentViewerBox name="OrderOption">
-          <OrderOption
-            text={"Checked"}
-            value={"Value"}
-            checked={true}
-            onPress={() => alert("Action triggered")}
-          />
-          <OrderOption
-            text={"Unchecked"}
-            value={"Value"}
-            checked={false}
-            onPress={() => alert("Action triggered")}
-          />
-        </DSComponentViewerBox>
-
-        <DSComponentViewerBox name="ZendeskItemPermissionComponent">
-          <ZendeskItemPermissionComponent
-            icon={<Icon name="info" size={24} />}
-            title="Storico versioni dell'app"
-            value="Per capire se il problema dipende dall'ultimo aggiornamento"
-            testId="TestID"
-          />
-        </DSComponentViewerBox>
-        <H2
-          color={"bluegrey"}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16, marginTop: 16 }}
-        >
-          Misc
-        </H2>
-        <DSComponentViewerBox name="DetailedlistItemComponent">
-          <DetailedlistItemComponent
-            isNew={true}
-            text11={"Payment Recipient"}
-            text12={"+200,00 €"}
-            text2={"19/12/2022 - 1:25:23 PM"}
-            text3={"Transaction Name"}
-            onPressItem={() => alert("Action triggered")}
-            accessible={true}
-            accessibilityRole={"button"}
-            accessibilityLabel={"Accessibility Label"}
-          />
-        </DSComponentViewerBox>
-
-        <H2
-          color={"bluegrey"}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16, marginTop: 16 }}
-        >
-          Native (Not NativeBase)
-        </H2>
-        <DSComponentViewerBox name="CgnMerchantDiscountItem">
-          <CgnMerchantDiscountItem
-            discount={{
-              name: "Small Rubber Chips" as NonEmptyString,
-              id: "28201" as NonEmptyString,
-              description: undefined,
-              discount: 25,
-              discountUrl: "https://localhost",
-              endDate: new Date(),
-              isNew: false,
-              productCategories: [ProductCategoryEnum.cultureAndEntertainment],
-              startDate: new Date()
-            }}
-            operatorName={"Operator name"}
-            merchantType={undefined}
-          />
-        </DSComponentViewerBox>
-        <DSComponentViewerBox name="CgnMerchantListItem">
-          <CgnMerchantListItem
-            categories={[
-              ProductCategoryEnum.cultureAndEntertainment,
-              ProductCategoryEnum.home
-            ]}
-            name={"Partner Name"}
-            onPress={() => alert("Action triggered")}
-            isNew={true}
-          />
-        </DSComponentViewerBox>
-      </DesignSystemScreen>
-    )}
-  </IOThemeContext.Consumer>
-);
+export const DSListItems = () => {
+  const theme = useIOTheme();
+  return (
+    <DesignSystemScreen title="List Items">
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
+      >
+        ListItemNav
+      </H2>
+      {renderListItemNav()}
+
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
+      >
+        ListItemInfoCopy
+      </H2>
+      {renderListItemInfoCopy()}
+
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
+      >
+        ListItemInfo
+      </H2>
+      {renderListItemInfo()}
+
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
+      >
+        ListItemHeader
+      </H2>
+      {renderListItemHeader()}
+
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
+      >
+        ListItemAction
+      </H2>
+      {renderListItemAction()}
+
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
+      >
+        ListItemTransaction
+      </H2>
+      {renderListItemTransaction()}
+
+      <VSpacer size={24} />
+
+      <H2
+        color={"bluegrey"}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
+      >
+        NativeBase lookalikes (not NativeBase)
+      </H2>
+      <DSComponentViewerBox name="BankPreviewItem -- using PressableListItemBase">
+        <BankPreviewItem
+          bank={{
+            abi: "03069",
+            logoUrl: "https://assets.cdn.io.italia.it/logos/abi/03069.png",
+            name: "Intesa Sanpaolo"
+          }}
+          onPress={() => alert("Action triggered")}
+        />
+      </DSComponentViewerBox>
+
+      <VSpacer size={40} />
+
+      <H2
+        color={"bluegrey"}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
+      >
+        ListItemComponent (NativeBase)
+      </H2>
+      <DSComponentViewerBox name="ListItemComponent (title)">
+        <ListItemComponent
+          title={"Title"}
+          onPress={() => alert("Action triggered")}
+        />
+      </DSComponentViewerBox>
+      <DSComponentViewerBox name="ListItemComponent (title + subtitle)">
+        <ListItemComponent
+          title={"Title"}
+          subTitle="Subtitle"
+          onPress={() => alert("Action triggered")}
+        />
+      </DSComponentViewerBox>
+      <DSComponentViewerBox name="ListItemComponent (without icon)">
+        <ListItemComponent
+          title={"Title"}
+          hideIcon={true}
+          onPress={() => alert("Action triggered")}
+        />
+      </DSComponentViewerBox>
+      <DSComponentViewerBox name="ListItemComponent (without separator)">
+        <ListItemComponent
+          title={"Title"}
+          onPress={() => alert("Action triggered")}
+          hideSeparator={true}
+        />
+      </DSComponentViewerBox>
+      <DSComponentViewerBox name="ListItemComponent (stress test)">
+        <ListItemComponent
+          title={"Let's try a looong looooong looooooooong title"}
+          subTitle="A loooong looooooong looooooooooong subtitle, too"
+          onPress={() => alert("Action triggered")}
+        />
+      </DSComponentViewerBox>
+      <DSComponentViewerBox name="ListItemComponent (stress test, no truncated subtitle)">
+        <ListItemComponent
+          title={"Let's try a looong looooong looooooooong title"}
+          subTitle="A loooong looooooong looooooooooong subtitle, too"
+          useExtendedSubTitle={true}
+          onPress={() => alert("Action triggered")}
+        />
+      </DSComponentViewerBox>
 
+      <DSComponentViewerBox name="ListItemComponent (badge)">
+        <ListItemComponent
+          title={"A looong looooong looooooooong looooooooooong title"}
+          hasBadge={true}
+          onPress={() => alert("Action triggered")}
+        />
+      </DSComponentViewerBox>
+      <DSComponentViewerBox name="ListItemComponent (badge)">
+        <ListItemComponent
+          title={"A looong looooong looooooooong looooooooooong title"}
+          titleBadge="Badge"
+          onPress={() => alert("Action triggered")}
+        />
+      </DSComponentViewerBox>
+      <DSComponentViewerBox name="ListItemComponent (custom icon)">
+        <ListItemComponent
+          title={"Title"}
+          iconSize={12}
+          iconName={"checkTickBig"}
+          onPress={() => alert("Action triggered")}
+        />
+      </DSComponentViewerBox>
+      <DSComponentViewerBox name="ListItemComponent (switch)">
+        <ListItemComponent
+          title={"Setting with switch"}
+          switchValue={true}
+          accessibilityRole={"switch"}
+          accessibilityState={{ checked: false }}
+          isLongPressEnabled={true}
+          onPress={() => alert("Action triggered")}
+        />
+      </DSComponentViewerBox>
+      <DSComponentViewerBox name="ListItemComponent (radio)">
+        <ListItemComponent
+          title={"Title"}
+          subTitle={"Subtitle"}
+          iconName={"legRadioOn"}
+          smallIconSize={true}
+          iconOnTop={true}
+          onPress={() => alert("Action triggered")}
+        />
+      </DSComponentViewerBox>
+
+      <H2
+        color={"bluegrey"}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
+      >
+        Derivated from ListItem (NativeBase)
+      </H2>
+      <DSComponentViewerBox name="OrderOption">
+        <OrderOption
+          text={"Checked"}
+          value={"Value"}
+          checked={true}
+          onPress={() => alert("Action triggered")}
+        />
+        <OrderOption
+          text={"Unchecked"}
+          value={"Value"}
+          checked={false}
+          onPress={() => alert("Action triggered")}
+        />
+      </DSComponentViewerBox>
+
+      <DSComponentViewerBox name="ZendeskItemPermissionComponent">
+        <ZendeskItemPermissionComponent
+          icon={<Icon name="info" size={24} />}
+          title="Storico versioni dell'app"
+          value="Per capire se il problema dipende dall'ultimo aggiornamento"
+          testId="TestID"
+        />
+      </DSComponentViewerBox>
+      <H2
+        color={"bluegrey"}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
+      >
+        Misc
+      </H2>
+      <DSComponentViewerBox name="DetailedlistItemComponent">
+        <DetailedlistItemComponent
+          isNew={true}
+          text11={"Payment Recipient"}
+          text12={"+200,00 €"}
+          text2={"19/12/2022 - 1:25:23 PM"}
+          text3={"Transaction Name"}
+          onPressItem={() => alert("Action triggered")}
+          accessible={true}
+          accessibilityRole={"button"}
+          accessibilityLabel={"Accessibility Label"}
+        />
+      </DSComponentViewerBox>
+
+      <H2
+        color={"bluegrey"}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16, marginTop: 16 }}
+      >
+        Native (Not NativeBase)
+      </H2>
+      <DSComponentViewerBox name="CgnMerchantDiscountItem">
+        <CgnMerchantDiscountItem
+          discount={{
+            name: "Small Rubber Chips" as NonEmptyString,
+            id: "28201" as NonEmptyString,
+            description: undefined,
+            discount: 25,
+            discountUrl: "https://localhost",
+            endDate: new Date(),
+            isNew: false,
+            productCategories: [ProductCategoryEnum.cultureAndEntertainment],
+            startDate: new Date()
+          }}
+          operatorName={"Operator name"}
+          merchantType={undefined}
+        />
+      </DSComponentViewerBox>
+      <DSComponentViewerBox name="CgnMerchantListItem">
+        <CgnMerchantListItem
+          categories={[
+            ProductCategoryEnum.cultureAndEntertainment,
+            ProductCategoryEnum.home
+          ]}
+          name={"Partner Name"}
+          onPress={() => alert("Action triggered")}
+          isNew={true}
+        />
+      </DSComponentViewerBox>
+    </DesignSystemScreen>
+  );
+};
 const renderListItemNav = () => (
   <>
     <DSComponentViewerBox name="ListItemNav">
diff --git a/ts/features/design-system/core/DSLogos.tsx b/ts/features/design-system/core/DSLogos.tsx
index b9baf5982a1..05f3373743f 100644
--- a/ts/features/design-system/core/DSLogos.tsx
+++ b/ts/features/design-system/core/DSLogos.tsx
@@ -146,31 +146,7 @@ const organizationsURIs = [
 
 const renderAvatar = () => (
   <>
-    <DSComponentViewerBox name={`Avatar, small size, circle shape`}>
-      <ScrollView
-        horizontal={true}
-        showsHorizontalScrollIndicator={false}
-        style={styles.horizontalScroll}
-      >
-        {organizationsURIs.map(({ imageSource }, i) => (
-          <React.Fragment key={i}>
-            <Avatar
-              shape="circle"
-              size="small"
-              logoUri={
-                imageSource
-                  ? {
-                      uri: imageSource
-                    }
-                  : undefined
-              }
-            />
-            {i < organizationsURIs.length - 1 && <HSpacer size={4} />}
-          </React.Fragment>
-        ))}
-      </ScrollView>
-    </DSComponentViewerBox>
-    <DSComponentViewerBox name={`Avatar, small size, square shape`}>
+    <DSComponentViewerBox name={`Avatar, small size`}>
       <ScrollView
         horizontal={true}
         showsHorizontalScrollIndicator={false}
@@ -194,7 +170,7 @@ const renderAvatar = () => (
         ))}
       </ScrollView>
     </DSComponentViewerBox>
-    <DSComponentViewerBox name={`Avatar, medium size, square shape`}>
+    <DSComponentViewerBox name={`Avatar, medium size`}>
       <ScrollView
         horizontal={true}
         showsHorizontalScrollIndicator={false}
diff --git a/ts/features/design-system/core/DSModules.tsx b/ts/features/design-system/core/DSModules.tsx
index 8a2d0898d5c..8d781c4d042 100644
--- a/ts/features/design-system/core/DSModules.tsx
+++ b/ts/features/design-system/core/DSModules.tsx
@@ -2,18 +2,21 @@ import * as React from "react";
 import { Alert, View, ImageSourcePropType } from "react-native";
 import {
   ButtonExtendedOutline,
-  IOThemeContext,
+  ModuleAttachment,
   ModuleCheckout,
   ModuleIDP,
   ModulePaymentNotice,
   PaymentNoticeStatus,
-  VSpacer
+  VSpacer,
+  useIOTheme
 } from "@pagopa/io-app-design-system";
-import { ModuleAttachment } from "../../messages/components/ModuleAttachment";
 import { getBadgeTextByPaymentNoticeStatus } from "../../messages/utils/strings";
 import { H2 } from "../../../components/core/typography/H2";
 import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
 import { DesignSystemScreen } from "../components/DesignSystemScreen";
+import { LegacyModuleAttachment } from "../../messages/components/MessageDetail/LegacyModuleAttachment";
+import { useIOSelector } from "../../../store/hooks";
+import { isDesignSystemEnabledSelector } from "../../../store/reducers/persistedPreferences";
 
 const onButtonPress = () => {
   Alert.alert("Alert", "Action triggered");
@@ -32,113 +35,158 @@ const noticeStatusArray: Array<PaymentNoticeStatusWithoutDefault> = [
   "canceled"
 ];
 
-export const DSModules = () => (
-  <IOThemeContext.Consumer>
-    {theme => (
-      <DesignSystemScreen title="Modules">
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16 }}
-        >
-          ModuleAttachment
-        </H2>
-        {renderModuleAttachment()}
+export const DSModules = () => {
+  const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector);
+  const theme = useIOTheme();
+  return (
+    <DesignSystemScreen title="Modules">
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16 }}
+      >
+        ModuleAttachment
+      </H2>
+      {renderModuleAttachment(isDesignSystemEnabled)}
 
-        <VSpacer size={40} />
+      <VSpacer size={40} />
 
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16 }}
-        >
-          ModulePaymentNotice
-        </H2>
-        {renderModulePaymentNotice()}
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16 }}
+      >
+        ModulePaymentNotice
+      </H2>
+      {renderModulePaymentNotice()}
 
-        <VSpacer size={40} />
+      <VSpacer size={40} />
 
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16 }}
-        >
-          ModuleCheckout
-        </H2>
-        {renderModuleCheckout()}
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16 }}
+      >
+        ModuleCheckout
+      </H2>
+      {renderModuleCheckout()}
 
-        <VSpacer size={40} />
+      <VSpacer size={40} />
 
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16 }}
-        >
-          ButtonExtendedOutline
-        </H2>
-        {renderButtonExtendedOutline()}
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16 }}
+      >
+        ButtonExtendedOutline
+      </H2>
+      {renderButtonExtendedOutline()}
 
-        <VSpacer size={40} />
+      <VSpacer size={40} />
 
-        <H2
-          color={theme["textHeading-default"]}
-          weight={"SemiBold"}
-          style={{ marginBottom: 16 }}
-        >
-          ModuleIDP
-        </H2>
-        {renderModuleIDP()}
-      </DesignSystemScreen>
-    )}
-  </IOThemeContext.Consumer>
-);
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{ marginBottom: 16 }}
+      >
+        ModuleIDP
+      </H2>
+      {renderModuleIDP()}
+    </DesignSystemScreen>
+  );
+};
 
-const renderModuleAttachment = () => (
+const renderModuleAttachment = (isDesignSystemEnabled: boolean) => (
   <DSComponentViewerBox name="ModuleAttachment">
     <View>
-      <ModuleAttachment
-        title="Nome del documento.pdf"
-        subtitle="123 Kb"
-        format="pdf"
-        isLoading={true}
-        onPress={onButtonPress}
-      />
+      {isDesignSystemEnabled ? (
+        <ModuleAttachment
+          title="Nome del documento.pdf"
+          format="pdf"
+          isLoading={true}
+          onPress={onButtonPress}
+        />
+      ) : (
+        <LegacyModuleAttachment
+          title="Nome del documento.pdf"
+          subtitle="123 Kb"
+          format="pdf"
+          isLoading={true}
+          onPress={onButtonPress}
+        />
+      )}
       <VSpacer size={16} />
-      <ModuleAttachment
-        title="Nome del documento.pdf"
-        subtitle="123 Kb"
-        format="pdf"
-        onPress={onButtonPress}
-      />
+      {isDesignSystemEnabled ? (
+        <ModuleAttachment
+          title="Nome del documento.pdf"
+          format="pdf"
+          onPress={onButtonPress}
+        />
+      ) : (
+        <LegacyModuleAttachment
+          title="Nome del documento.pdf"
+          subtitle="123 Kb"
+          format="pdf"
+          onPress={onButtonPress}
+        />
+      )}
       <VSpacer size={16} />
-      <ModuleAttachment
-        title="Nome del documento.pdf"
-        format="pdf"
-        onPress={onButtonPress}
-      />
+      {isDesignSystemEnabled ? null : (
+        <LegacyModuleAttachment
+          title="Nome del documento.pdf"
+          format="pdf"
+          onPress={onButtonPress}
+        />
+      )}
       <VSpacer size={16} />
-      <ModuleAttachment
-        title={"This is a very loooooooooooooooooooooong title"}
-        subtitle={"This is a very loooooooooooong subtitle"}
-        format="pdf"
-        onPress={onButtonPress}
-      />
+      {isDesignSystemEnabled ? (
+        <ModuleAttachment
+          title="This is a very loooooooooooooooooooooong title"
+          format="pdf"
+          onPress={onButtonPress}
+        />
+      ) : (
+        <LegacyModuleAttachment
+          title={"This is a very loooooooooooooooooooooong title"}
+          subtitle={"This is a very loooooooooooong subtitle"}
+          format="pdf"
+          onPress={onButtonPress}
+        />
+      )}
       <VSpacer size={16} />
-      <ModuleAttachment
-        title="Nome del documento.pdf"
-        subtitle="123 Kb"
-        format="pdf"
-        isFetching={true}
-        onPress={onButtonPress}
-      />
+      {isDesignSystemEnabled ? (
+        <ModuleAttachment
+          title="Nome del documento.pdf"
+          format="pdf"
+          isFetching={true}
+          onPress={onButtonPress}
+        />
+      ) : (
+        <LegacyModuleAttachment
+          title="Nome del documento.pdf"
+          subtitle="123 Kb"
+          format="pdf"
+          isFetching={true}
+          onPress={onButtonPress}
+        />
+      )}
       <VSpacer size={16} />
-      <ModuleAttachment
-        title="Nome del documento.pdf"
-        subtitle="123 Kb"
-        format="pdf"
-        disabled={true}
-        onPress={onButtonPress}
-      />
+      {isDesignSystemEnabled ? (
+        <ModuleAttachment
+          title="Nome del documento.pdf"
+          format="pdf"
+          disabled={true}
+          onPress={onButtonPress}
+        />
+      ) : (
+        <LegacyModuleAttachment
+          title="Nome del documento.pdf"
+          subtitle="123 Kb"
+          format="pdf"
+          disabled={true}
+          onPress={onButtonPress}
+        />
+      )}
     </View>
   </DSComponentViewerBox>
 );
diff --git a/ts/features/design-system/core/DSNumberPad.tsx b/ts/features/design-system/core/DSNumberPad.tsx
index 26a9fe60bd6..50ab287d3a2 100644
--- a/ts/features/design-system/core/DSNumberPad.tsx
+++ b/ts/features/design-system/core/DSNumberPad.tsx
@@ -1,20 +1,20 @@
-import * as React from "react";
 import {
+  Body,
   CodeInput,
   H2,
   IOColors,
-  ListItemSwitch,
-  NumberPad,
-  VSpacer,
-  hexToRgba,
-  LabelSmallAlt,
   IOVisualCostants,
   LabelLink,
+  LabelSmallAlt,
+  ListItemSwitch,
+  NumberPad,
   Pictogram,
-  Body
+  VSpacer,
+  hexToRgba
 } from "@pagopa/io-app-design-system";
 import { useNavigation } from "@react-navigation/native";
-import { Alert, View } from "react-native";
+import * as React from "react";
+import { Alert, StatusBar, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const PIN_LENGTH = 6;
@@ -59,6 +59,7 @@ export const DSNumberPad = () => {
         }
       ]}
     >
+      <StatusBar barStyle={darkBackground ? "light-content" : "default"} />
       <View
         style={{
           backgroundColor: IOColors.white,
diff --git a/ts/features/design-system/core/DSPictograms.tsx b/ts/features/design-system/core/DSPictograms.tsx
index e10b59ec8b9..d5542f78382 100644
--- a/ts/features/design-system/core/DSPictograms.tsx
+++ b/ts/features/design-system/core/DSPictograms.tsx
@@ -5,16 +5,15 @@ import {
   IOPictogramsBleed,
   IOPictogramsObject,
   IOPictogramsLegacy,
-  IOThemeContext,
   Pictogram,
   PictogramBleed,
   SVGPictogramProps,
   IOColors,
   HSpacer,
   hexToRgba,
-  VSpacer
+  VSpacer,
+  useIOTheme
 } from "@pagopa/io-app-design-system";
-import { useContext } from "react";
 import {
   DSAssetViewerBox,
   assetItemGutter
@@ -77,7 +76,7 @@ const filteredIOPictograms = filterPictogramSet(
 );
 
 export const DSPictograms = () => {
-  const theme = useContext(IOThemeContext);
+  const theme = useIOTheme();
   return (
     <DesignSystemScreen title={"Pictograms"}>
       <View style={styles.itemsWrapper}>
diff --git a/ts/features/design-system/core/DSScreenOperationResult.tsx b/ts/features/design-system/core/DSScreenOperationResult.tsx
index 655253035f0..ba57b15d5a6 100644
--- a/ts/features/design-system/core/DSScreenOperationResult.tsx
+++ b/ts/features/design-system/core/DSScreenOperationResult.tsx
@@ -1,16 +1,41 @@
 import { useNavigation } from "@react-navigation/native";
 import React from "react";
-import { OperationResultScreenContent } from "../../../components/screens/OperationResultScreenContent";
+import {
+  BodyProps,
+  OperationResultScreenContent
+} from "../../../components/screens/OperationResultScreenContent";
 import I18n from "../../../i18n";
 
 const DSScreenOperationResult = () => {
   const navigation = useNavigation();
 
+  const bodyPropsArray: Array<BodyProps> = [
+    {
+      text: I18n.t("email.cduScreens.emailAlreadyTaken.subtitleStart"),
+      style: {
+        textAlign: "center"
+      }
+    },
+    {
+      text: <> example@try.com </>,
+      style: {
+        textAlign: "center"
+      },
+      weight: "SemiBold"
+    },
+    {
+      text: I18n.t("email.cduScreens.emailAlreadyTaken.subtitleEnd"),
+      style: {
+        textAlign: "center"
+      }
+    }
+  ];
+
   return (
     <OperationResultScreenContent
       pictogram="umbrellaNew"
       title="C’è un problema temporaneo, riprova."
-      subtitle="Premi a lungo uno o più messaggi per archiviarli."
+      subtitle={bodyPropsArray}
       action={{
         label: I18n.t("global.buttons.close"),
         accessibilityLabel: I18n.t("global.buttons.close"),
diff --git a/ts/features/design-system/core/DSSelection.tsx b/ts/features/design-system/core/DSSelection.tsx
index 7c686a82d46..f63ad12f7c7 100644
--- a/ts/features/design-system/core/DSSelection.tsx
+++ b/ts/features/design-system/core/DSSelection.tsx
@@ -1,6 +1,6 @@
 import * as pot from "@pagopa/ts-commons/lib/pot";
 import * as React from "react";
-import { Alert, StyleSheet, View } from "react-native";
+import { Alert, StyleSheet, Text, View } from "react-native";
 import { useState } from "react";
 import {
   AnimatedMessageCheckbox,
@@ -14,7 +14,9 @@ import {
   RadioGroup,
   SwitchLabel,
   VSpacer,
-  ListItemRadioWithAmount
+  ListItemRadioWithAmount,
+  LabelSmall,
+  IOColors
 } from "@pagopa/io-app-design-system";
 import { CheckBox } from "../../../components/core/selection/checkbox/CheckBox";
 import { RemoteSwitch } from "../../../components/core/selection/RemoteSwitch";
@@ -190,6 +192,19 @@ const mockRadioItems = (): ReadonlyArray<RadioItem<string>> => [
       "Ti contatteranno solo i servizi che hanno qualcosa di importante da dirti. Potrai sempre disattivare le comunicazioni che non ti interessano.",
     id: "example-1"
   },
+  {
+    value: "Let's try with JSX description",
+    description: (
+      <LabelSmall color="grey-700" weight="Regular">
+        Ti contatteranno solo i servizi che hanno qualcosa di importante da
+        dirti.{" "}
+        <Text style={{ color: IOColors["grey-700"], fontWeight: "600" }}>
+          Potrai sempre disattivare le comunicazioni che non ti interessano.
+        </Text>
+      </LabelSmall>
+    ),
+    id: "example-jsx-element"
+  },
   {
     startImage: { paymentLogo: "myBank" },
     value: "Payment method item",
diff --git a/ts/features/design-system/core/DSToastNotifications.tsx b/ts/features/design-system/core/DSToastNotifications.tsx
index 90b92ded4b0..ff7c3887259 100644
--- a/ts/features/design-system/core/DSToastNotifications.tsx
+++ b/ts/features/design-system/core/DSToastNotifications.tsx
@@ -1,11 +1,12 @@
-import { Toast as NBToast } from "native-base";
+import {
+  ButtonOutline,
+  VSpacer,
+  IOToast,
+  ToastNotification
+} from "@pagopa/io-app-design-system";
 import * as React from "react";
-import { ButtonOutline, VSpacer } from "@pagopa/io-app-design-system";
-import { H2 } from "../../../components/core/typography/H2";
 import { H3 } from "../../../components/core/typography/H3";
-import { showToast } from "../../../utils/showToast";
 import { DesignSystemScreen } from "../components/DesignSystemScreen";
-import { IOToast, ToastNotification } from "../../../components/Toast";
 
 export const DSToastNotifications = () => (
   <DesignSystemScreen title={"Toast Notifications (NativeBase)"}>
@@ -88,111 +89,5 @@ export const DSToastNotifications = () => (
     />
 
     <VSpacer size={40} />
-
-    <H2 color={"bluegrey"} weight={"SemiBold"} style={{ marginBottom: 16 }}>
-      Legacy toasts
-    </H2>
-
-    <H3 color={"bluegrey"} weight={"SemiBold"} style={{ marginBottom: 16 }}>
-      Type
-    </H3>
-
-    <ButtonOutline
-      fullWidth={true}
-      label="Default behavior"
-      accessibilityLabel="Default behavior"
-      onPress={() =>
-        NBToast.show({
-          text: "Here's the default behavior"
-        })
-      }
-    />
-
-    <VSpacer size={16} />
-
-    <ButtonOutline
-      fullWidth={true}
-      label="Danger"
-      accessibilityLabel="Danger"
-      onPress={() => showToast("Example of a danger message")}
-    />
-
-    <VSpacer size={16} />
-
-    <ButtonOutline
-      fullWidth={true}
-      label="Success"
-      accessibilityLabel="Success"
-      onPress={() => showToast("Example of a success message", "success")}
-    />
-
-    <VSpacer size={16} />
-
-    <ButtonOutline
-      fullWidth={true}
-      label="Warning"
-      accessibilityLabel="Warning"
-      onPress={() => showToast("Example of a warning message", "warning")}
-    />
-
-    <H3
-      color={"bluegrey"}
-      weight={"SemiBold"}
-      style={{ marginTop: 24, marginBottom: 16 }}
-    >
-      Position
-    </H3>
-
-    <ButtonOutline
-      fullWidth={true}
-      label="Default · Top"
-      accessibilityLabel="Default · Top"
-      onPress={() =>
-        showToast("Here's the notification at the top", "danger", "top")
-      }
-    />
-
-    <VSpacer size={16} />
-
-    <ButtonOutline
-      fullWidth={true}
-      label="Default · Center"
-      accessibilityLabel="Default · Center"
-      onPress={() =>
-        showToast("Here's the notification at the top", "danger", "top")
-      }
-    />
-
-    <VSpacer size={16} />
-
-    <ButtonOutline
-      fullWidth={true}
-      label="Default · Bottom"
-      accessibilityLabel="Default · Bottom"
-      onPress={() =>
-        showToast("Here's the notification at the bottom", "danger", "bottom")
-      }
-    />
-
-    <H3
-      color={"bluegrey"}
-      weight={"SemiBold"}
-      style={{ marginTop: 24, marginBottom: 16 }}
-    >
-      Misc
-    </H3>
-
-    <ButtonOutline
-      fullWidth={true}
-      label="Multi-line text"
-      accessibilityLabel="Multi-line text"
-      onPress={() =>
-        NBToast.show({
-          text: "Here's the default behavior with multi-line loooong loooooong text"
-        })
-      }
-    />
-
-    <VSpacer size={40} />
   </DesignSystemScreen>
 );
diff --git a/ts/features/design-system/core/DSWallet.tsx b/ts/features/design-system/core/DSWallet.tsx
new file mode 100644
index 00000000000..d26fc64fba9
--- /dev/null
+++ b/ts/features/design-system/core/DSWallet.tsx
@@ -0,0 +1,77 @@
+import * as React from "react";
+import { WalletCardsCategoryContainer } from "../../newWallet/components/WalletCardsCategoryContainer";
+import { WalletCard, WalletCardCategory } from "../../newWallet/types";
+import { DesignSystemScreen } from "../components/DesignSystemScreen";
+import { DesignSystemSection } from "../components/DesignSystemSection";
+
+export const DSWallet = () => {
+  const cards: ReadonlyArray<WalletCard> = [
+    {
+      key: "1",
+      type: "idPay",
+      category: "bonus",
+      initiativeId: "1",
+      amount: 412.69,
+      avatarSource: {
+        uri: "https://vtlogo.com/wp-content/uploads/2021/08/18app-vector-logo.png"
+      },
+      expireDate: new Date(),
+      name: "18 App"
+    },
+    {
+      key: "2",
+      type: "payment",
+      category: "payment",
+      walletId: "1",
+      hpan: "9900",
+      brand: "maestro",
+      holderName: "Anna Verdi",
+      expireDate: new Date()
+    },
+    {
+      key: "3",
+      type: "payment",
+      category: "payment",
+      walletId: "1",
+      abiCode: "03069",
+      brand: "pagoBancomat",
+      holderName: "Anna Verdi",
+      expireDate: new Date()
+    },
+    {
+      key: "4",
+      type: "payment",
+      category: "payment",
+      walletId: "1",
+      holderEmail: "anna_v********@**hoo.it"
+    }
+  ];
+
+  const cardsByCategory = cards.reduce(
+    (acc, card) => ({
+      ...acc,
+      [card.category]: [...(acc[card.category] || []), card]
+    }),
+    {} as { [category in WalletCardCategory]: ReadonlyArray<WalletCard> }
+  );
+
+  return (
+    <DesignSystemScreen title={"Wallet"}>
+      <DesignSystemSection title="Single card">
+        <WalletCardsCategoryContainer
+          label="Iniziative welfare"
+          iconName="bonus"
+          cards={cardsByCategory.bonus}
+        />
+      </DesignSystemSection>
+
+      <DesignSystemSection title="Multiple cards">
+        <WalletCardsCategoryContainer
+          label="Metodi di pagamento"
+          iconName="creditCard"
+          cards={cardsByCategory.payment}
+        />
+      </DesignSystemSection>
+    </DesignSystemScreen>
+  );
+};
diff --git a/ts/features/design-system/navigation/navigator.tsx b/ts/features/design-system/navigation/navigator.tsx
index ca02ca4ee8f..3f3f21746a3 100644
--- a/ts/features/design-system/navigation/navigator.tsx
+++ b/ts/features/design-system/navigation/navigator.tsx
@@ -1,26 +1,16 @@
 import {
-  IOThemeContext,
-  IOThemes,
-  IOVisualCostants,
-  IconButton
+  HeaderSecondLevel,
+  IconButton,
+  makeFontStyleObject,
+  useIOExperimentalDesign,
+  useIOThemeContext
 } from "@pagopa/io-app-design-system";
-import { ThemeProvider, useNavigation } from "@react-navigation/native";
-import {
-  StackNavigationOptions,
-  TransitionPresets,
-  createStackNavigator
-} from "@react-navigation/stack";
+import { useNavigation } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import I18n from "i18n-js";
 import * as React from "react";
-import { useMemo } from "react";
-import { Alert, Platform, View, useColorScheme } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { makeFontStyleObject } from "../../../components/core/fonts";
+import { Alert, Platform } from "react-native";
 import HeaderFirstLevel from "../../../components/ui/HeaderFirstLevel";
-import {
-  IONavigationDarkTheme,
-  IONavigationLightTheme
-} from "../../../theme/navigations";
-import { isGestureEnabled } from "../../../utils/navigation";
 import { DesignSystem } from "../DesignSystem";
 import { DSAccordion } from "../core/DSAccordion";
 import { DSAdvice } from "../core/DSAdvice";
@@ -38,16 +28,15 @@ import { DSHapticFeedback } from "../core/DSHapticFeedback";
 import { DSHeaderFirstLevel } from "../core/DSHeaderFirstLevel";
 import { DSHeaderSecondLevel } from "../core/DSHeaderSecondLevel";
 import { DSHeaderSecondLevelWithSectionTitle } from "../core/DSHeaderSecondLevelWithSectionTitle";
-import { DSNumberPad } from "../core/DSNumberPad";
 import { DSIcons } from "../core/DSIcons";
 import { DSLayout } from "../core/DSLayout";
-import { DSLegacyButtons } from "../core/DSLegacyButtons";
 import { DSLegacyIllustrations } from "../core/DSLegacyIllustrations";
 import { DSLegacyPictograms } from "../core/DSLegacyPictograms";
 import { DSListItems } from "../core/DSListItems";
 import { DSLoaders } from "../core/DSLoaders";
 import { DSLogos } from "../core/DSLogos";
 import { DSModules } from "../core/DSModules";
+import { DSNumberPad } from "../core/DSNumberPad";
 import { DSPictograms } from "../core/DSPictograms";
 import { DSSafeArea } from "../core/DSSafeArea";
 import { DSSafeAreaCentered } from "../core/DSSafeAreaCentered";
@@ -57,46 +46,26 @@ import { DSTabNavigation } from "../core/DSTabNavigation";
 import { DSTextFields } from "../core/DSTextFields";
 import { DSToastNotifications } from "../core/DSToastNotifications";
 import { DSTypography } from "../core/DSTypography";
+import { DSWallet } from "../core/DSWallet";
 import { DSWizardScreen } from "../core/DSWizardScreen";
-import { DesignSystemModalParamsList, DesignSystemParamsList } from "./params";
+import { DesignSystemParamsList } from "./params";
 import DESIGN_SYSTEM_ROUTES from "./routes";
 
-const Stack = createStackNavigator<DesignSystemParamsList>();
-const ModalStack = createStackNavigator<DesignSystemModalParamsList>();
+const Stack = createNativeStackNavigator<DesignSystemParamsList>();
 
 // BackButton managed through React Navigation
 const RNNBackButton = () => {
   const navigation = useNavigation();
-  const colorScheme = useColorScheme();
-
+  const { themeType } = useIOThemeContext();
   return (
-    <View style={{ marginLeft: IOVisualCostants.appMarginDefault }}>
-      <IconButton
-        icon="backiOS"
-        color={colorScheme === "dark" ? "contrast" : "neutral"}
-        onPress={() => {
-          navigation.goBack();
-        }}
-        accessibilityLabel={""}
-      />
-    </View>
-  );
-};
-
-const RNNCloseButton = () => {
-  const navigation = useNavigation();
-
-  return (
-    <View style={{ marginRight: IOVisualCostants.appMarginDefault }}>
-      <IconButton
-        icon="closeMedium"
-        color="neutral"
-        onPress={() => {
-          navigation.goBack();
-        }}
-        accessibilityLabel={""}
-      />
-    </View>
+    <IconButton
+      icon={Platform.OS === "ios" ? "backiOS" : "backAndroid"}
+      color={themeType === "dark" ? "contrast" : "neutral"}
+      onPress={() => {
+        navigation.goBack();
+      }}
+      accessibilityLabel={""}
+    />
   );
 };
 
@@ -124,89 +93,33 @@ const HeaderFirstLevelComponent = () => (
   />
 );
 
-const customModalHeaderConf: StackNavigationOptions = {
-  headerLeft: () => null,
-  headerTitle: () => null,
-  headerRight: RNNCloseButton,
-  headerStyle: { height: IOVisualCostants.headerHeight },
-  headerStatusBarHeight: 0
-};
-
 export const DesignSystemNavigator = () => {
-  const colorScheme = useColorScheme();
-
-  return (
-    <ThemeProvider
-      value={
-        colorScheme === "dark" ? IONavigationDarkTheme : IONavigationLightTheme
-      }
-    >
-      <IOThemeContext.Provider
-        value={colorScheme === "dark" ? IOThemes.dark : IOThemes.light}
-      >
-        {/* You need two nested navigators to apply the modal
-      behavior only to the single screen and not to any other.
-      Read documentation for reference:
-      https://reactnavigation.org/docs/5.x/modal/#creating-a-modal-stack
-      
-      With RN Navigation 6.x it's much easier because you can
-      use the Group function */}
-        <ModalStack.Navigator
-          mode="modal"
-          headerMode="screen"
-          screenOptions={
-            Platform.OS === "ios"
-              ? {
-                  gestureEnabled: isGestureEnabled,
-                  cardOverlayEnabled: true,
-                  ...TransitionPresets.ModalPresentationIOS
-                }
-              : {}
-          }
-        >
-          <ModalStack.Screen
-            name={DESIGN_SYSTEM_ROUTES.MAIN.route}
-            component={DesignSystemMainStack}
-            options={{ headerShown: false }}
-          />
-          <ModalStack.Screen
-            name={DESIGN_SYSTEM_ROUTES.DEBUG.FULL_SCREEN_MODAL.route}
-            component={DSFullScreenModal}
-            options={customModalHeaderConf}
-          />
-        </ModalStack.Navigator>
-      </IOThemeContext.Provider>
-    </ThemeProvider>
-  );
-};
-
-const DesignSystemMainStack = () => {
-  const insets = useSafeAreaInsets();
-
-  const customHeaderConf: StackNavigationOptions = useMemo(
-    () => ({
-      headerTitleStyle: {
-        ...makeFontStyleObject("Regular", false, "ReadexPro"),
-        fontSize: 14
-      },
-      headerTitleAlign: "center",
-      headerStyle: { height: insets.top + IOVisualCostants.headerHeight },
-      headerLeft: RNNBackButton
-    }),
-    [insets]
-  );
+  const { isExperimental } = useIOExperimentalDesign();
 
   return (
     <Stack.Navigator
       initialRouteName={DESIGN_SYSTEM_ROUTES.MAIN.route}
-      headerMode="screen"
-      screenOptions={customHeaderConf}
+      screenOptions={{
+        headerTitleStyle: {
+          ...makeFontStyleObject(
+            "Regular",
+            false,
+            isExperimental ? "ReadexPro" : "TitilliumWeb"
+          ),
+          fontSize: 16
+        },
+        headerTitleAlign: "center",
+        headerBackTitleVisible: false,
+        headerShown: true,
+        autoHideHomeIndicator: true
+      }}
     >
-      <ModalStack.Screen
+      <Stack.Screen
         name={DESIGN_SYSTEM_ROUTES.MAIN.route}
         component={DesignSystem}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.MAIN.title
+          title: DESIGN_SYSTEM_ROUTES.MAIN.title,
+          headerLeft: RNNBackButton
         }}
       />
 
@@ -214,7 +127,7 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.FOUNDATION.COLOR.route}
         component={DSColors}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.FOUNDATION.COLOR.title
+          title: DESIGN_SYSTEM_ROUTES.FOUNDATION.COLOR.title
         }}
       />
 
@@ -222,7 +135,7 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.FOUNDATION.TYPOGRAPHY.route}
         component={DSTypography}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.FOUNDATION.TYPOGRAPHY.title
+          title: DESIGN_SYSTEM_ROUTES.FOUNDATION.TYPOGRAPHY.title
         }}
       />
 
@@ -230,7 +143,7 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.FOUNDATION.LAYOUT.route}
         component={DSLayout}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.FOUNDATION.LAYOUT.title
+          title: DESIGN_SYSTEM_ROUTES.FOUNDATION.LAYOUT.title
         }}
       />
 
@@ -238,7 +151,7 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.FOUNDATION.ICONS.route}
         component={DSIcons}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.FOUNDATION.ICONS.title
+          title: DESIGN_SYSTEM_ROUTES.FOUNDATION.ICONS.title
         }}
       />
 
@@ -246,7 +159,7 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.FOUNDATION.PICTOGRAMS.route}
         component={DSPictograms}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.FOUNDATION.PICTOGRAMS.title
+          title: DESIGN_SYSTEM_ROUTES.FOUNDATION.PICTOGRAMS.title
         }}
       />
 
@@ -254,7 +167,7 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.FOUNDATION.LOGOS.route}
         component={DSLogos}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.FOUNDATION.LOGOS.title
+          title: DESIGN_SYSTEM_ROUTES.FOUNDATION.LOGOS.title
         }}
       />
 
@@ -262,7 +175,7 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.FOUNDATION.LOADERS.route}
         component={DSLoaders}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.FOUNDATION.LOADERS.title
+          title: DESIGN_SYSTEM_ROUTES.FOUNDATION.LOADERS.title
         }}
       />
 
@@ -270,7 +183,7 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.FOUNDATION.HAPTIC_FEEDBACK.route}
         component={DSHapticFeedback}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.FOUNDATION.HAPTIC_FEEDBACK.title
+          title: DESIGN_SYSTEM_ROUTES.FOUNDATION.HAPTIC_FEEDBACK.title
         }}
       />
 
@@ -279,7 +192,7 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.COMPONENTS.BUTTONS.route}
         component={DSButtons}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.COMPONENTS.BUTTONS.title
+          title: DESIGN_SYSTEM_ROUTES.COMPONENTS.BUTTONS.title
         }}
       />
 
@@ -287,7 +200,7 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.COMPONENTS.SELECTION.route}
         component={DSSelection}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.COMPONENTS.SELECTION.title
+          title: DESIGN_SYSTEM_ROUTES.COMPONENTS.SELECTION.title
         }}
       />
 
@@ -295,7 +208,7 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.COMPONENTS.TEXT_FIELDS.route}
         component={DSTextFields}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.COMPONENTS.TEXT_FIELDS.title
+          title: DESIGN_SYSTEM_ROUTES.COMPONENTS.TEXT_FIELDS.title
         }}
       />
 
@@ -303,7 +216,7 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.COMPONENTS.BADGE.route}
         component={DSBadges}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.COMPONENTS.BADGE.title
+          title: DESIGN_SYSTEM_ROUTES.COMPONENTS.BADGE.title
         }}
       />
 
@@ -311,7 +224,7 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.COMPONENTS.LIST_ITEMS.route}
         component={DSListItems}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.COMPONENTS.LIST_ITEMS.title
+          title: DESIGN_SYSTEM_ROUTES.COMPONENTS.LIST_ITEMS.title
         }}
       />
 
@@ -319,7 +232,7 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.COMPONENTS.MODULES.route}
         component={DSModules}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.COMPONENTS.MODULES.title
+          title: DESIGN_SYSTEM_ROUTES.COMPONENTS.MODULES.title
         }}
       />
 
@@ -327,14 +240,15 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.COMPONENTS.CARDS.route}
         component={DSCards}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.COMPONENTS.CARDS.title
+          title: DESIGN_SYSTEM_ROUTES.COMPONENTS.CARDS.title
         }}
       />
+
       <Stack.Screen
         name={DESIGN_SYSTEM_ROUTES.COMPONENTS.TOASTS.route}
         component={DSToastNotifications}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.COMPONENTS.TOASTS.title
+          title: DESIGN_SYSTEM_ROUTES.COMPONENTS.TOASTS.title
         }}
       />
 
@@ -342,7 +256,7 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.COMPONENTS.ACCORDION.route}
         component={DSAccordion}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.COMPONENTS.ACCORDION.title
+          title: DESIGN_SYSTEM_ROUTES.COMPONENTS.ACCORDION.title
         }}
       />
 
@@ -350,7 +264,7 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.COMPONENTS.ALERT.route}
         component={DSAlert}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.COMPONENTS.ALERT.title
+          title: DESIGN_SYSTEM_ROUTES.COMPONENTS.ALERT.title
         }}
       />
 
@@ -358,7 +272,7 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.COMPONENTS.ADVICE.route}
         component={DSAdvice}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.COMPONENTS.ADVICE.title
+          title: DESIGN_SYSTEM_ROUTES.COMPONENTS.ADVICE.title
         }}
       />
 
@@ -366,7 +280,7 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.COMPONENTS.BOTTOM_SHEET.route}
         component={DSBottomSheet}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.COMPONENTS.BOTTOM_SHEET.title
+          title: DESIGN_SYSTEM_ROUTES.COMPONENTS.BOTTOM_SHEET.title
         }}
       />
 
@@ -374,7 +288,15 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.COMPONENTS.TAB_NAVIGATION.route}
         component={DSTabNavigation}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.COMPONENTS.TAB_NAVIGATION.title
+          title: DESIGN_SYSTEM_ROUTES.COMPONENTS.TAB_NAVIGATION.title
+        }}
+      />
+
+      <Stack.Screen
+        name={DESIGN_SYSTEM_ROUTES.COMPONENTS.WALLET.route}
+        component={DSWallet}
+        options={{
+          headerTitle: DESIGN_SYSTEM_ROUTES.COMPONENTS.WALLET.title
         }}
       />
 
@@ -405,7 +327,7 @@ const DesignSystemMainStack = () => {
         name={DESIGN_SYSTEM_ROUTES.SCREENS.GRADIENT_SCROLL.route}
         component={DSGradientScroll}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.SCREENS.GRADIENT_SCROLL.title
+          title: DESIGN_SYSTEM_ROUTES.SCREENS.GRADIENT_SCROLL.title
         }}
       />
 
@@ -439,37 +361,60 @@ const DesignSystemMainStack = () => {
         component={DSSafeArea}
         options={{ headerShown: false }}
       />
+
       <Stack.Screen
         name={DESIGN_SYSTEM_ROUTES.DEBUG.SAFE_AREA_CENTERED.route}
         component={DSSafeAreaCentered}
         options={{ headerShown: false }}
       />
+
       <Stack.Screen
         name={DESIGN_SYSTEM_ROUTES.DEBUG.EDGE_TO_EDGE_AREA.route}
         component={DSEdgeToEdgeArea}
         options={{ headerShown: false }}
       />
 
+      <Stack.Group
+        screenOptions={{
+          presentation: "formSheet"
+        }}
+      >
+        <Stack.Screen
+          name={DESIGN_SYSTEM_ROUTES.DEBUG.FULL_SCREEN_MODAL.route}
+          component={DSFullScreenModal}
+          options={{
+            header: ({ navigation }) => (
+              <HeaderSecondLevel
+                title={DESIGN_SYSTEM_ROUTES.DEBUG.FULL_SCREEN_MODAL.title}
+                transparent
+                isModal
+                type="singleAction"
+                firstAction={{
+                  icon: "closeMedium",
+                  onPress: () => {
+                    navigation.goBack();
+                  },
+                  accessibilityLabel: I18n.t("global.buttons.back")
+                }}
+              />
+            )
+          }}
+        />
+      </Stack.Group>
+
       {/* LEGACY */}
       <Stack.Screen
         name={DESIGN_SYSTEM_ROUTES.LEGACY.PICTOGRAMS.route}
         component={DSLegacyPictograms}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.LEGACY.PICTOGRAMS.title
-        }}
-      />
-      <Stack.Screen
-        name={DESIGN_SYSTEM_ROUTES.LEGACY.BUTTONS.route}
-        component={DSLegacyButtons}
-        options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.LEGACY.BUTTONS.title
+          title: DESIGN_SYSTEM_ROUTES.LEGACY.PICTOGRAMS.title
         }}
       />
       <Stack.Screen
         name={DESIGN_SYSTEM_ROUTES.LEGACY.ILLUSTRATIONS.route}
         component={DSLegacyIllustrations}
         options={{
-          headerTitle: DESIGN_SYSTEM_ROUTES.LEGACY.ILLUSTRATIONS.title
+          title: DESIGN_SYSTEM_ROUTES.LEGACY.ILLUSTRATIONS.title
         }}
       />
     </Stack.Navigator>
diff --git a/ts/features/design-system/navigation/params.ts b/ts/features/design-system/navigation/params.ts
index bae589ccdbe..811d196304b 100644
--- a/ts/features/design-system/navigation/params.ts
+++ b/ts/features/design-system/navigation/params.ts
@@ -22,6 +22,7 @@ export type DesignSystemParamsList = {
   [DESIGN_SYSTEM_ROUTES.COMPONENTS.TOASTS.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.COMPONENTS.BOTTOM_SHEET.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.COMPONENTS.TAB_NAVIGATION.route]: undefined;
+  [DESIGN_SYSTEM_ROUTES.COMPONENTS.WALLET.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.HEADERS.FIRST_LEVEL.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.HEADERS.SECOND_LEVEL.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.HEADERS.SECOND_LEVEL_SECTION_TITLE.route]: undefined;
@@ -34,12 +35,7 @@ export type DesignSystemParamsList = {
   [DESIGN_SYSTEM_ROUTES.DEBUG.SAFE_AREA.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.DEBUG.SAFE_AREA_CENTERED.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.DEBUG.EDGE_TO_EDGE_AREA.route]: undefined;
+  [DESIGN_SYSTEM_ROUTES.DEBUG.FULL_SCREEN_MODAL.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.LEGACY.PICTOGRAMS.route]: undefined;
-  [DESIGN_SYSTEM_ROUTES.LEGACY.BUTTONS.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.LEGACY.ILLUSTRATIONS.route]: undefined;
 };
-
-export type DesignSystemModalParamsList = {
-  [DESIGN_SYSTEM_ROUTES.MAIN.route]: undefined;
-  [DESIGN_SYSTEM_ROUTES.DEBUG.FULL_SCREEN_MODAL.route]: undefined;
-};
diff --git a/ts/features/design-system/navigation/routes.ts b/ts/features/design-system/navigation/routes.ts
index 48ceca64e34..4baccfa8b81 100644
--- a/ts/features/design-system/navigation/routes.ts
+++ b/ts/features/design-system/navigation/routes.ts
@@ -29,6 +29,10 @@ const DESIGN_SYSTEM_ROUTES = {
     TAB_NAVIGATION: {
       route: "DESIGN_SYSTEM_TAB_NAVIGATION",
       title: "Tab Navigation"
+    },
+    WALLET: {
+      route: "DESIGN_SYSTEM_WALLET",
+      title: "Wallet"
     }
   },
   HEADERS: {
@@ -84,10 +88,6 @@ const DESIGN_SYSTEM_ROUTES = {
     ILLUSTRATIONS: {
       route: "DESIGN_SYSTEM_LEGACY_ILLUSTRATIONS",
       title: "Illustrations"
-    },
-    BUTTONS: {
-      route: "DESIGN_SYSTEM_LEGACY_BUTTONS",
-      title: "Buttons"
     }
   } as const
 } as const;
diff --git a/ts/features/euCovidCert/__e2e__/euCovidCertExpired.e2e.ts b/ts/features/euCovidCert/__e2e__/euCovidCertExpired00.e2e.ts
similarity index 63%
rename from ts/features/euCovidCert/__e2e__/euCovidCertExpired.e2e.ts
rename to ts/features/euCovidCert/__e2e__/euCovidCertExpired00.e2e.ts
index 84b19fee096..7275f114f4d 100644
--- a/ts/features/euCovidCert/__e2e__/euCovidCertExpired.e2e.ts
+++ b/ts/features/euCovidCert/__e2e__/euCovidCertExpired00.e2e.ts
@@ -1,31 +1,21 @@
 import { device } from "detox";
-import { e2eWaitRenderTimeout } from "../../../__e2e__/config";
 import { ensureLoggedIn } from "../../../__e2e__/utils";
+import { e2eWaitRenderTimeout } from "../../../__e2e__/config";
+import { learnMoreLinkTestId, scrollToEUCovidMessage } from "./utils";
 
 const euCovidCertExpiredSubject = "🏥 EUCovidCert - expired";
 const euCovidCertExpiredTitle = "Expired Certificate title";
 const euCovidCertExpiredSubTitle = "Expired Certificate sub title";
 
-const messageListTestId = "MessageList_inbox";
-const learnMoreLinkTestId = "euCovidCertLearnMoreLink";
-
 describe("EuCovidCert Expired", () => {
   beforeAll(async () => {
     await device.launchApp({ newInstance: true });
     await ensureLoggedIn();
   });
 
-  it("should find the expired EuCovidCert message and open it", async () => {
-    await waitFor(element(by.text(euCovidCertExpiredSubject)))
-      .toBeVisible()
-      .whileElement(by.id(messageListTestId))
-      .scroll(350, "down");
-
-    const subject = element(by.text(euCovidCertExpiredSubject));
-    await subject.tap();
-  });
+  it("should find the expired EuCovidCert message, open it and check all the correct elements in the details page", async () => {
+    await openExpiredEUCovidMessage();
 
-  it("should check all the correct elements in the details page", async () => {
     await waitFor(element(by.text(euCovidCertExpiredTitle)))
       .toBeVisible()
       .withTimeout(e2eWaitRenderTimeout);
@@ -39,3 +29,10 @@ describe("EuCovidCert Expired", () => {
       .withTimeout(e2eWaitRenderTimeout);
   });
 });
+
+const openExpiredEUCovidMessage = async () => {
+  await scrollToEUCovidMessage(euCovidCertExpiredSubject);
+
+  const subject = element(by.text(euCovidCertExpiredSubject));
+  await subject.tap();
+};
diff --git a/ts/features/euCovidCert/__e2e__/euCovidCertRevoked.e2e.ts b/ts/features/euCovidCert/__e2e__/euCovidCertRevoked00.e2e.ts
similarity index 63%
rename from ts/features/euCovidCert/__e2e__/euCovidCertRevoked.e2e.ts
rename to ts/features/euCovidCert/__e2e__/euCovidCertRevoked00.e2e.ts
index c2de8638b12..d0a0e9cc314 100644
--- a/ts/features/euCovidCert/__e2e__/euCovidCertRevoked.e2e.ts
+++ b/ts/features/euCovidCert/__e2e__/euCovidCertRevoked00.e2e.ts
@@ -1,31 +1,21 @@
 import { device } from "detox";
-import { e2eWaitRenderTimeout } from "../../../__e2e__/config";
 import { ensureLoggedIn } from "../../../__e2e__/utils";
+import { e2eWaitRenderTimeout } from "../../../__e2e__/config";
+import { learnMoreLinkTestId, scrollToEUCovidMessage } from "./utils";
 
 const euCovidCertRevokedSubject = "🏥 EUCovidCert - revoked";
 const euCovidCertRevokedTitle = "Revoked Certificate title";
 const euCovidCertRevokedSubTitle = "Revoked Certificate sub title";
 
-const messageListTestId = "MessageList_inbox";
-const learnMoreLinkTestId = "euCovidCertLearnMoreLink";
-
 describe("EuCovidCert Revoked", () => {
   beforeAll(async () => {
     await device.launchApp({ newInstance: true });
     await ensureLoggedIn();
   });
 
-  it("should find the revoked EuCovidCert message and open it", async () => {
-    await waitFor(element(by.text(euCovidCertRevokedSubject)))
-      .toBeVisible()
-      .whileElement(by.id(messageListTestId))
-      .scroll(350, "down");
-
-    const subject = element(by.text(euCovidCertRevokedSubject));
-    await subject.tap();
-  });
+  it("should find the revoked EuCovidCert message, open it and check all the correct elements in the details page", async () => {
+    await openRevokedEUCovidMessage();
 
-  it("should check all the correct elements in the details page", async () => {
     await waitFor(element(by.text(euCovidCertRevokedTitle)))
       .toBeVisible()
       .withTimeout(e2eWaitRenderTimeout);
@@ -39,3 +29,10 @@ describe("EuCovidCert Revoked", () => {
       .withTimeout(e2eWaitRenderTimeout);
   });
 });
+
+const openRevokedEUCovidMessage = async () => {
+  await scrollToEUCovidMessage(euCovidCertRevokedSubject);
+
+  const subject = element(by.text(euCovidCertRevokedSubject));
+  await subject.tap();
+};
diff --git a/ts/features/euCovidCert/__e2e__/euCovidCertValid.e2e.ts b/ts/features/euCovidCert/__e2e__/euCovidCertValid.e2e.ts
deleted file mode 100644
index 8f2fe2ac19b..00000000000
--- a/ts/features/euCovidCert/__e2e__/euCovidCertValid.e2e.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { device } from "detox";
-import I18n from "../../../i18n";
-import { e2eWaitRenderTimeout } from "../../../__e2e__/config";
-import { ensureLoggedIn } from "../../../__e2e__/utils";
-
-const euCovidCertValidSubject = "🏥 EUCovidCert - valid";
-const euCovidCertValidTitle = "Valid Certificate title";
-const euCovidCertValidSubTitle = "Valid Certificate sub title";
-
-const messageListTestId = "MessageList_inbox";
-const qrCodeTestId = "QRCode";
-const fullScreenQrCodeTestId = "fullScreenQRCode";
-
-describe("EuCovidCert Valid", () => {
-  beforeAll(async () => {
-    await device.launchApp({ newInstance: true });
-    await ensureLoggedIn();
-  });
-
-  it("should find the valid EuCovidCert message and open it", async () => {
-    await waitFor(element(by.text(euCovidCertValidSubject)))
-      .toBeVisible()
-      .whileElement(by.id(messageListTestId))
-      .scroll(350, "down");
-
-    const subject = element(by.text(euCovidCertValidSubject));
-    await subject.tap();
-  });
-
-  it("should check all the correct elements in the details page", async () => {
-    await waitFor(element(by.text(euCovidCertValidTitle)))
-      .toBeVisible()
-      .withTimeout(e2eWaitRenderTimeout);
-
-    await waitFor(element(by.text(euCovidCertValidSubTitle)))
-      .toBeVisible()
-      .withTimeout(e2eWaitRenderTimeout);
-
-    await waitFor(element(by.text(I18n.t("global.genericSave"))))
-      .toBeVisible()
-      .withTimeout(e2eWaitRenderTimeout);
-
-    await waitFor(element(by.id(qrCodeTestId)))
-      .toBeVisible()
-      .withTimeout(e2eWaitRenderTimeout);
-  });
-
-  it("should open the QRCode in fullscreen and return back", async () => {
-    const qrCode = element(by.id(qrCodeTestId));
-    await qrCode.tap();
-
-    await waitFor(element(by.id(fullScreenQrCodeTestId)))
-      .toBeVisible()
-      .withTimeout(e2eWaitRenderTimeout);
-
-    await waitFor(element(by.text(I18n.t("global.buttons.close"))))
-      .toBeVisible()
-      .withTimeout(e2eWaitRenderTimeout);
-
-    const closeButton = element(by.text(I18n.t("global.buttons.close")));
-    await closeButton.tap();
-  });
-
-  it("should open the certificate details page and return back", async () => {
-    await waitFor(element(by.text(I18n.t("global.buttons.details"))))
-      .toBeVisible()
-      .withTimeout(e2eWaitRenderTimeout);
-
-    const detailsButton = element(by.text(I18n.t("global.buttons.details")));
-    await detailsButton.tap();
-
-    await waitFor(element(by.text(I18n.t("global.buttons.close"))))
-      .toBeVisible()
-      .withTimeout(e2eWaitRenderTimeout);
-
-    const closeButton = element(by.text(I18n.t("global.buttons.close")));
-    await closeButton.tap();
-  });
-
-  it("should save the certificate in the gallery", async () => {
-    await waitFor(element(by.text(I18n.t("global.genericSave"))))
-      .toBeVisible()
-      .withTimeout(e2eWaitRenderTimeout);
-
-    const saveButton = element(by.text(I18n.t("global.genericSave")));
-    await saveButton.tap();
-
-    await waitFor(
-      element(
-        by.text(
-          I18n.t(
-            "features.euCovidCertificate.save.bottomSheet.saveAsImage.title"
-          )
-        )
-      )
-    )
-      .toBeVisible()
-      .withTimeout(e2eWaitRenderTimeout);
-
-    const saveIntoGalleryButton = element(
-      by.text(
-        I18n.t("features.euCovidCertificate.save.bottomSheet.saveAsImage.title")
-      )
-    );
-    await saveIntoGalleryButton.tap();
-
-    await waitFor(
-      element(by.text(I18n.t("features.euCovidCertificate.save.ok")))
-    )
-      .toBeVisible()
-      .withTimeout(e2eWaitRenderTimeout);
-  });
-});
diff --git a/ts/features/euCovidCert/__e2e__/euCovidCertValid00.e2e.ts b/ts/features/euCovidCert/__e2e__/euCovidCertValid00.e2e.ts
new file mode 100644
index 00000000000..c76e0ebc284
--- /dev/null
+++ b/ts/features/euCovidCert/__e2e__/euCovidCertValid00.e2e.ts
@@ -0,0 +1,35 @@
+import { device } from "detox";
+import I18n from "../../../i18n";
+import { ensureLoggedIn } from "../../../__e2e__/utils";
+import { e2eWaitRenderTimeout } from "../../../__e2e__/config";
+import { openValidEUCovidMessage, qrCodeTestId } from "./utils";
+
+const euCovidCertValidTitle = "Valid Certificate title";
+const euCovidCertValidSubTitle = "Valid Certificate sub title";
+
+describe("EuCovidCert Valid", () => {
+  beforeAll(async () => {
+    await device.launchApp({ newInstance: true });
+    await ensureLoggedIn();
+  });
+
+  it("should find the valid EuCovidCert message, open it and check all the correct elements in the details page", async () => {
+    await openValidEUCovidMessage();
+
+    await waitFor(element(by.text(euCovidCertValidTitle)))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+
+    await waitFor(element(by.text(euCovidCertValidSubTitle)))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+
+    await waitFor(element(by.text(I18n.t("global.genericSave"))))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+
+    await waitFor(element(by.id(qrCodeTestId)))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+  });
+});
diff --git a/ts/features/euCovidCert/__e2e__/euCovidCertValid01.e2e.ts b/ts/features/euCovidCert/__e2e__/euCovidCertValid01.e2e.ts
new file mode 100644
index 00000000000..b2d36406d8b
--- /dev/null
+++ b/ts/features/euCovidCert/__e2e__/euCovidCertValid01.e2e.ts
@@ -0,0 +1,34 @@
+import { device } from "detox";
+import I18n from "../../../i18n";
+import { e2eWaitRenderTimeout } from "../../../__e2e__/config";
+import { ensureLoggedIn } from "../../../__e2e__/utils";
+import {
+  fullScreenQrCodeTestId,
+  openValidEUCovidMessage,
+  qrCodeTestId
+} from "./utils";
+
+describe("EuCovidCert Valid", () => {
+  beforeAll(async () => {
+    await device.launchApp({ newInstance: true });
+    await ensureLoggedIn();
+  });
+
+  it("should open the QRCode in fullscreen and return back", async () => {
+    await openValidEUCovidMessage();
+
+    const qrCode = element(by.id(qrCodeTestId));
+    await qrCode.tap();
+
+    await waitFor(element(by.id(fullScreenQrCodeTestId)))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+
+    await waitFor(element(by.text(I18n.t("global.buttons.close"))))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+
+    const closeButton = element(by.text(I18n.t("global.buttons.close")));
+    await closeButton.tap();
+  });
+});
diff --git a/ts/features/euCovidCert/__e2e__/euCovidCertValid02.e2e.ts b/ts/features/euCovidCert/__e2e__/euCovidCertValid02.e2e.ts
new file mode 100644
index 00000000000..964a37c6645
--- /dev/null
+++ b/ts/features/euCovidCert/__e2e__/euCovidCertValid02.e2e.ts
@@ -0,0 +1,30 @@
+import { device } from "detox";
+import I18n from "../../../i18n";
+import { e2eWaitRenderTimeout } from "../../../__e2e__/config";
+import { ensureLoggedIn } from "../../../__e2e__/utils";
+import { openValidEUCovidMessage } from "./utils";
+
+describe("EuCovidCert Valid", () => {
+  beforeAll(async () => {
+    await device.launchApp({ newInstance: true });
+    await ensureLoggedIn();
+  });
+
+  it("should open the certificate details page and return back", async () => {
+    await openValidEUCovidMessage();
+
+    await waitFor(element(by.text(I18n.t("global.buttons.details"))))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+
+    const detailsButton = element(by.text(I18n.t("global.buttons.details")));
+    await detailsButton.tap();
+
+    await waitFor(element(by.text(I18n.t("global.buttons.close"))))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+
+    const closeButton = element(by.text(I18n.t("global.buttons.close")));
+    await closeButton.tap();
+  });
+});
diff --git a/ts/features/euCovidCert/__e2e__/euCovidCertValid03.e2e.ts b/ts/features/euCovidCert/__e2e__/euCovidCertValid03.e2e.ts
new file mode 100644
index 00000000000..493ec46b041
--- /dev/null
+++ b/ts/features/euCovidCert/__e2e__/euCovidCertValid03.e2e.ts
@@ -0,0 +1,48 @@
+import { device } from "detox";
+import I18n from "../../../i18n";
+import { e2eWaitRenderTimeout } from "../../../__e2e__/config";
+import { ensureLoggedIn } from "../../../__e2e__/utils";
+import { openValidEUCovidMessage } from "./utils";
+
+describe("EuCovidCert Valid", () => {
+  beforeAll(async () => {
+    await device.launchApp({ newInstance: true });
+    await ensureLoggedIn();
+  });
+
+  it("should save the certificate in the gallery", async () => {
+    await openValidEUCovidMessage();
+
+    await waitFor(element(by.text(I18n.t("global.genericSave"))))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+
+    const saveButton = element(by.text(I18n.t("global.genericSave")));
+    await saveButton.tap();
+
+    await waitFor(
+      element(
+        by.text(
+          I18n.t(
+            "features.euCovidCertificate.save.bottomSheet.saveAsImage.title"
+          )
+        )
+      )
+    )
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+
+    const saveIntoGalleryButton = element(
+      by.text(
+        I18n.t("features.euCovidCertificate.save.bottomSheet.saveAsImage.title")
+      )
+    );
+    await saveIntoGalleryButton.tap();
+
+    await waitFor(
+      element(by.text(I18n.t("features.euCovidCertificate.save.ok")))
+    )
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+  });
+});
diff --git a/ts/features/euCovidCert/__e2e__/utils.ts b/ts/features/euCovidCert/__e2e__/utils.ts
new file mode 100644
index 00000000000..759fde03a09
--- /dev/null
+++ b/ts/features/euCovidCert/__e2e__/utils.ts
@@ -0,0 +1,20 @@
+const euCovidCertValidSubject = "🏥 EUCovidCert - valid";
+
+export const learnMoreLinkTestId = "euCovidCertLearnMoreLink";
+export const messageListTestId = "MessageList_inbox";
+export const qrCodeTestId = "QRCode";
+export const fullScreenQrCodeTestId = "fullScreenQRCode";
+
+export const scrollToEUCovidMessage = async (messageSubject: string) => {
+  await waitFor(element(by.text(messageSubject)))
+    .toBeVisible()
+    .whileElement(by.id(messageListTestId))
+    .scroll(350, "down");
+};
+
+export const openValidEUCovidMessage = async () => {
+  await scrollToEUCovidMessage(euCovidCertValidSubject);
+
+  const subject = element(by.text(euCovidCertValidSubject));
+  await subject.tap();
+};
diff --git a/ts/features/euCovidCert/analytics/index.ts b/ts/features/euCovidCert/analytics/index.ts
index 4fcf7efbc51..748c6a73eb6 100644
--- a/ts/features/euCovidCert/analytics/index.ts
+++ b/ts/features/euCovidCert/analytics/index.ts
@@ -1,4 +1,5 @@
 import { getType } from "typesafe-actions";
+import { constVoid } from "fp-ts/lib/function";
 import { euCovidCertificateEnabled } from "../../../config";
 import { mixpanel } from "../../../mixpanel";
 import { Action } from "../../../store/actions/types";
@@ -11,7 +12,7 @@ import {
 
 const trackEuCovidCertificateActions =
   (mp: NonNullable<typeof mixpanel>) =>
-  (action: Action): Promise<void> => {
+  (action: Action): void => {
     switch (action.type) {
       case getType(euCovidCertificateGet.request):
         return mp.track(action.type);
@@ -25,7 +26,6 @@ const trackEuCovidCertificateActions =
           reason: getNetworkErrorMessage(action.payload)
         });
     }
-    return Promise.resolve();
   };
 
 const trackEuCovidCertificateGetSuccessResponse = (
@@ -55,7 +55,7 @@ const trackEuCovidCertificateGetSuccessResponse = (
 };
 
 const emptyTracking = (_: NonNullable<typeof mixpanel>) => (__: Action) =>
-  Promise.resolve();
+  constVoid();
 
 export default euCovidCertificateEnabled
   ? trackEuCovidCertificateActions
diff --git a/ts/features/euCovidCert/components/MarkdownHandleCustomLink.tsx b/ts/features/euCovidCert/components/MarkdownHandleCustomLink.tsx
index 789ee805216..5523fc8d95b 100644
--- a/ts/features/euCovidCert/components/MarkdownHandleCustomLink.tsx
+++ b/ts/features/euCovidCert/components/MarkdownHandleCustomLink.tsx
@@ -2,16 +2,16 @@ import * as E from "fp-ts/lib/Either";
 import { pipe } from "fp-ts/lib/function";
 import { Toast } from "native-base";
 import * as React from "react";
-import Markdown from "../../../components/ui/Markdown";
+import LegacyMarkdown from "../../../components/ui/Markdown/LegacyMarkdown";
 import { deriveCustomHandledLink } from "../../../components/ui/Markdown/handlers/link";
 import I18n from "../../../i18n";
 import { clipboardSetStringWithFeedback } from "../../../utils/clipboard";
 import { taskLinking } from "../../../utils/url";
 
 export const MarkdownHandleCustomLink = (
-  props: React.ComponentProps<typeof Markdown>
+  props: React.ComponentProps<typeof LegacyMarkdown>
 ): React.ReactElement => (
-  <Markdown
+  <LegacyMarkdown
     {...props}
     onLinkClicked={(link: string) => {
       pipe(
@@ -32,5 +32,5 @@ export const MarkdownHandleCustomLink = (
     }}
   >
     {props.children}
-  </Markdown>
+  </LegacyMarkdown>
 );
diff --git a/ts/features/euCovidCert/navigation/navigator.tsx b/ts/features/euCovidCert/navigation/navigator.tsx
index 5c95a024313..4133fbbb5c3 100644
--- a/ts/features/euCovidCert/navigation/navigator.tsx
+++ b/ts/features/euCovidCert/navigation/navigator.tsx
@@ -12,8 +12,7 @@ const Stack = createStackNavigator<EUCovidCertParamsList>();
 export const EUCovidCertStackNavigator = () => (
   <Stack.Navigator
     initialRouteName={EUCOVIDCERT_ROUTES.CERTIFICATE}
-    headerMode={"none"}
-    screenOptions={{ gestureEnabled: isGestureEnabled }}
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerShown: false }}
   >
     <Stack.Screen
       name={EUCOVIDCERT_ROUTES.CERTIFICATE}
diff --git a/ts/features/fastLogin/analytics/optinAnalytics.ts b/ts/features/fastLogin/analytics/optinAnalytics.ts
index 68648063e94..78f232d0c6a 100644
--- a/ts/features/fastLogin/analytics/optinAnalytics.ts
+++ b/ts/features/fastLogin/analytics/optinAnalytics.ts
@@ -6,7 +6,7 @@ import { buildEventProperties } from "../../../utils/analytics";
 
 export function trackLoginSessionOptIn() {
   void mixpanelTrack(
-    "LOGIN_SESSION_OPTIN",
+    "LOGIN_SESSION_OPTIN_2",
     buildEventProperties("UX", "screen_view")
   );
 }
@@ -27,7 +27,7 @@ export async function trackLoginSessionOptIn365(state: GlobalState) {
     property: "LOGIN_SESSION",
     value: "365"
   });
-  await mixpanelTrack(
+  mixpanelTrack(
     "LOGIN_SESSION_OPTIN_365_SELECTED",
     buildEventProperties("UX", "action")
   );
@@ -42,7 +42,7 @@ export async function trackLoginSessionOptIn30(state: GlobalState) {
     property: "LOGIN_SESSION",
     value: "30"
   });
-  await mixpanelTrack(
+  mixpanelTrack(
     "LOGIN_SESSION_OPTIN_30_SELECTED",
     buildEventProperties("UX", "action")
   );
diff --git a/ts/features/fastLogin/components/CountDown.tsx b/ts/features/fastLogin/components/CountDown.tsx
deleted file mode 100644
index 5d58524f662..00000000000
--- a/ts/features/fastLogin/components/CountDown.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from "react";
-import { H3 } from "../../../components/core/typography/H3";
-import { WithTestID } from "../../../types/WithTestID";
-
-type Props = WithTestID<{
-  totalSeconds: number;
-  onExpiration: () => void;
-}>;
-
-const formattedTime = (time: number) => {
-  const date = new Date(time * 1000);
-  const minutes = date.getUTCMinutes();
-  const seconds = date.getSeconds();
-  return `${minutes.toString().padStart(2, "0")}:${seconds
-    .toString()
-    .padStart(2, "0")}`;
-};
-
-const ConuntDown = (props: Props) => {
-  const { totalSeconds: totalTime, onExpiration } = props;
-  const [remainingTime, setRemainingTime] = React.useState(totalTime);
-
-  React.useEffect(() => {
-    const intervalId = setInterval(() => {
-      setRemainingTime(prevRemainingTime =>
-        prevRemainingTime > 0 ? prevRemainingTime - 1 : 0
-      );
-    }, 1000);
-
-    return () => {
-      clearInterval(intervalId);
-    };
-  }, []);
-
-  React.useEffect(() => {
-    if (remainingTime === 0) {
-      onExpiration();
-    }
-  }, [onExpiration, remainingTime]);
-
-  return (
-    <>
-      <H3 testID={props.testID}>{`${formattedTime(remainingTime)}`}</H3>
-    </>
-  );
-};
-
-export default ConuntDown;
diff --git a/ts/features/fastLogin/components/ModalHeader.tsx b/ts/features/fastLogin/components/ModalHeader.tsx
deleted file mode 100644
index d4be6f18e04..00000000000
--- a/ts/features/fastLogin/components/ModalHeader.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet } from "react-native";
-import { IOColors, Icon } from "@pagopa/io-app-design-system";
-import ButtonDefaultOpacity from "../../../components/ButtonDefaultOpacity";
-import I18n from "../../../i18n";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
-import { WithTestID } from "../../../types/WithTestID";
-
-const styles = StyleSheet.create({
-  mainContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    ...IOStyles.horizontalContentPadding,
-    paddingTop: 24,
-    backgroundColor: IOColors.white,
-    borderTopRightRadius: 16,
-    borderTopLeftRadius: 16
-  },
-  closeButton: {
-    paddingRight: 0,
-    justifyContent: "flex-end"
-  }
-});
-
-type ModalHeaderProps = WithTestID<{
-  onClose: () => void;
-}>;
-
-const ModalHeader = ({ onClose, testID }: ModalHeaderProps) => (
-  <View style={styles.mainContainer}>
-    <View />
-    <ButtonDefaultOpacity
-      testID={`${testID}-close-button`}
-      style={styles.closeButton}
-      onPressWithGestureHandler={true}
-      onPress={onClose}
-      transparent={true}
-      accessible={true}
-      accessibilityRole={"button"}
-      accessibilityLabel={I18n.t("global.buttons.close")}
-    >
-      <Icon name="closeLarge" color="bluegreyDark" size={24} />
-    </ButtonDefaultOpacity>
-  </View>
-);
-
-export default ModalHeader;
diff --git a/ts/features/fastLogin/saga/pendingActionsSaga.ts b/ts/features/fastLogin/saga/pendingActionsSaga.ts
index 290880e646b..903968ee1a3 100644
--- a/ts/features/fastLogin/saga/pendingActionsSaga.ts
+++ b/ts/features/fastLogin/saga/pendingActionsSaga.ts
@@ -1,9 +1,19 @@
 import { SagaIterator } from "redux-saga";
-import { put, select, take, takeLatest } from "typed-redux-saga/macro";
+import {
+  put,
+  race,
+  select,
+  take,
+  takeLatest,
+  delay
+} from "typed-redux-saga/macro";
+import { Millisecond } from "@pagopa/ts-commons/lib/units";
 import { applicationInitialized } from "../../../store/actions/application";
 import { clearPendingAction } from "../store/actions/tokenRefreshActions";
 import { fastLoginPendingActionsSelector } from "../store/selectors";
 
+const ACTION_TO_WAIT_FOR_TIMEOUT = 3000 as Millisecond;
+
 export function* watchPendingActionsSaga(): SagaIterator {
   yield* takeLatest(applicationInitialized, handleApplicationInitialized);
 }
@@ -13,11 +23,24 @@ function* handleApplicationInitialized(
 ) {
   const { actionsToWaitFor } = _.payload;
   const pendingActions = yield* select(fastLoginPendingActionsSelector);
+  // if there are no pending actions,
+  // we don't need to wait for anything,
+  // because there is no saga to restart
+  // with the pending actions
   if (pendingActions.length === 0) {
     return;
   }
+  // If there are pending actions,
+  // we wait for the actionsToWaitFor, if any,
+  // and then we dispatch the pending actions.
   for (const action of actionsToWaitFor) {
-    yield* take(action);
+    // If for some reason the action is dispatched before
+    // we start waiting for it, we are stuck here.
+    // So we need to handle this race contion.
+    yield* race({
+      take: take(action),
+      timeout: delay(ACTION_TO_WAIT_FOR_TIMEOUT)
+    });
   }
   for (const action of pendingActions) {
     yield* put(action);
diff --git a/ts/features/fastLogin/saga/tokenRefreshSaga.ts b/ts/features/fastLogin/saga/tokenRefreshSaga.ts
index 9f960259544..4065f8ba3d0 100644
--- a/ts/features/fastLogin/saga/tokenRefreshSaga.ts
+++ b/ts/features/fastLogin/saga/tokenRefreshSaga.ts
@@ -44,6 +44,7 @@ import {
 import { getPin } from "../../../utils/keychain";
 import { dismissSupport } from "../../../utils/supportAssistance";
 import { MESSAGES_ROUTES } from "../../messages/navigation/routes";
+import ROUTES from "../../../navigation/routes";
 
 export function* watchTokenRefreshSaga(): SagaIterator {
   yield* takeLatest(refreshSessionToken.request, handleRefreshSessionToken);
@@ -90,7 +91,9 @@ function* handleRefreshSessionToken(
     }
   } else {
     // Lock the app
-    NavigationService.navigate(MESSAGES_ROUTES.MESSAGES_HOME);
+    NavigationService.navigate(ROUTES.MAIN, {
+      screen: MESSAGES_ROUTES.MESSAGES_HOME
+    });
     yield* put(identificationRequest());
   }
 }
diff --git a/ts/features/fastLogin/saga/utils/index.ts b/ts/features/fastLogin/saga/utils/index.ts
index cbbdb3df550..7562a148acb 100644
--- a/ts/features/fastLogin/saga/utils/index.ts
+++ b/ts/features/fastLogin/saga/utils/index.ts
@@ -11,13 +11,48 @@ import {
   savePendingAction
 } from "../../store/actions/tokenRefreshActions";
 
+type RefreshApiCallErrorHandlingTypeWithTypeField = {
+  errorMessage?: string;
+  skipThrowingError?: boolean;
+  // Because we check the "type" field in a type guard
+  // looking for a Redux Action,
+  // we must be sure to never put a property named "type"
+  // inside this object.
+  type?: never;
+};
+
+export type RefreshApiCallErrorHandlingType = Omit<
+  RefreshApiCallErrorHandlingTypeWithTypeField,
+  "type"
+>;
+
+function isReduxAction<A extends Action>(
+  obj?: A | RefreshApiCallErrorHandlingType
+): obj is A {
+  return !!(obj && "type" in obj);
+}
+
+// The function implementation with flexible parameter handling
+// This has been done as a refactor to avoid the use of optional parameters
 export function* withRefreshApiCall<R, A extends Action>(
   apiCall: Promise<t.Validation<IResponseType<401, any> | R>>,
-  action?: A | undefined,
-  errorMessage?: string,
-  skipThrowingError: boolean = false
+  actionOrErrorHandling?: A | RefreshApiCallErrorHandlingType
 ): SagaIterator<t.Validation<IResponseType<401, any> | R>> {
   const response = yield* call(() => apiCall);
+
+  // eslint-disable-next-line functional/no-let
+  let action: A | undefined;
+  // eslint-disable-next-line functional/no-let
+  let errorHandling: typeof actionOrErrorHandling = {};
+
+  if (isReduxAction(actionOrErrorHandling)) {
+    action = actionOrErrorHandling;
+  } else {
+    errorHandling =
+      (actionOrErrorHandling as RefreshApiCallErrorHandlingType) ?? {};
+  }
+
+  const { errorMessage, skipThrowingError } = errorHandling;
   // BEWARE: we can cast to any only because we know for sure that f will
   // always return a Promise<IResponseType<A, B>>
   if (E.isRight(response) && (response.right as any).status === 401) {
diff --git a/ts/features/fastLogin/screens/AskUserInteractionScreen.tsx b/ts/features/fastLogin/screens/AskUserInteractionScreen.tsx
new file mode 100644
index 00000000000..8656448388a
--- /dev/null
+++ b/ts/features/fastLogin/screens/AskUserInteractionScreen.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import { Modal } from "react-native";
+import { IOPictograms } from "@pagopa/io-app-design-system";
+import { useAvoidHardwareBackButton } from "../../../utils/useAvoidHardwareBackButton";
+import { OperationResultScreenContent } from "../../../components/screens/OperationResultScreenContent";
+
+type PrimaryActionType = Parameters<
+  typeof OperationResultScreenContent
+>[0]["action"];
+
+type SecondaryActionType = Parameters<
+  typeof OperationResultScreenContent
+>[0]["secondaryAction"];
+
+export type Props = {
+  title: string;
+  subtitle: string;
+  pictogramName: IOPictograms;
+  primaryAction?: PrimaryActionType;
+  secondaryAction?: SecondaryActionType;
+};
+
+const AskUserInteractionScreen = (props: Props) => {
+  useAvoidHardwareBackButton();
+
+  return (
+    <Modal>
+      <OperationResultScreenContent
+        pictogram={props.pictogramName}
+        title={props.title}
+        subtitle={props.subtitle}
+        action={props.primaryAction}
+        secondaryAction={props.secondaryAction}
+      />
+    </Modal>
+  );
+};
+export default AskUserInteractionScreen;
diff --git a/ts/features/fastLogin/screens/AskUserInterarctionScreen.tsx b/ts/features/fastLogin/screens/AskUserInterarctionScreen.tsx
deleted file mode 100644
index eff8a7e7e00..00000000000
--- a/ts/features/fastLogin/screens/AskUserInterarctionScreen.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import * as React from "react";
-import {
-  View,
-  SafeAreaView,
-  StyleSheet,
-  Modal,
-  GestureResponderEvent
-} from "react-native";
-import {
-  ButtonOutline,
-  ButtonSolid,
-  HSpacer,
-  VSpacer,
-  IOPictograms,
-  Pictogram
-} from "@pagopa/io-app-design-system";
-import I18n from "../../../i18n";
-import { Body } from "../../../components/core/typography/Body";
-import { H3 } from "../../../components/core/typography/H3";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
-import themeVariables from "../../../theme/variables";
-import { useAvoidHardwareBackButton } from "../../../utils/useAvoidHardwareBackButton";
-import CountDown from "../components/CountDown";
-import ModalHeader from "../components/ModalHeader";
-
-const styles = StyleSheet.create({
-  mainContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    padding: themeVariables.contentPaddingLarge
-  },
-  buttonContainer: {
-    flexDirection: "row",
-    padding: themeVariables.contentPadding
-  },
-  title: {
-    textAlign: "center"
-  }
-});
-
-type ButtonStyle = {
-  type: "solid" | "outline";
-  title: string;
-};
-type ButtonStylesProps = {
-  submitButtonStyle: ButtonStyle;
-  cancelButtonStyle?: ButtonStyle;
-};
-const DefaultButtonStylesProps: ButtonStylesProps = {
-  submitButtonStyle: {
-    type: "solid",
-    title: I18n.t("global.buttons.continue")
-  },
-  cancelButtonStyle: { type: "outline", title: I18n.t("global.buttons.cancel") }
-};
-
-const DEFAULT_TIMER_DURATION = 60;
-
-export type Props = {
-  title: string;
-  subtitle: string;
-  pictogramName: IOPictograms;
-  onSubmit: () => void;
-  onCancel?: () => void;
-  onClose?: () => void;
-  onTimerExpired?: () => void;
-  timerDurationInSeconds?: number;
-  buttonStylesProps?: ButtonStylesProps;
-};
-
-const AskUserInteractionScreen = (props: Props) => {
-  useAvoidHardwareBackButton();
-
-  const { submitButtonStyle, cancelButtonStyle } =
-    props.buttonStylesProps || DefaultButtonStylesProps;
-
-  const cancelButtonTitle =
-    cancelButtonStyle?.title || I18n.t("global.buttons.exit");
-  const cancelButtonProps = {
-    fullWidth: true,
-    onPress: (_: GestureResponderEvent) => props.onCancel && props.onCancel(),
-    label: cancelButtonTitle,
-    accessibilityLabel: cancelButtonTitle
-  };
-
-  const submitButtonTitle = submitButtonStyle.title;
-  const submitButtonProps = {
-    fullWidth: true,
-    onPress: (_: GestureResponderEvent) => props.onSubmit(),
-    label: submitButtonTitle,
-    accessibilityLabel: submitButtonTitle
-  };
-
-  return (
-    <Modal>
-      <SafeAreaView style={IOStyles.flex}>
-        {props.onClose && (
-          <ModalHeader testID="header" onClose={props.onClose} />
-        )}
-        <View style={styles.mainContainer}>
-          <Pictogram name={props.pictogramName} size={120} />
-          <VSpacer size={16} />
-          <H3 style={styles.title}>{props.title}</H3>
-          <VSpacer size={16} />
-          <Body style={{ textAlign: "center" }}>{props.subtitle}</Body>
-          <VSpacer size={16} />
-          {props.onTimerExpired && (
-            <CountDown
-              testID={"countdown-timer"}
-              totalSeconds={
-                props.timerDurationInSeconds ?? DEFAULT_TIMER_DURATION
-              }
-              onExpiration={props.onTimerExpired}
-            />
-          )}
-        </View>
-        <View style={styles.buttonContainer}>
-          {props.onCancel && (
-            <>
-              <View style={IOStyles.flex}>
-                {cancelButtonStyle?.type === "outline" ? (
-                  <ButtonOutline {...cancelButtonProps} />
-                ) : (
-                  <ButtonSolid {...cancelButtonProps} />
-                )}
-              </View>
-              <HSpacer size={16} />
-            </>
-          )}
-          <View style={IOStyles.flex}>
-            {submitButtonStyle.type === "solid" ? (
-              <ButtonSolid {...submitButtonProps} />
-            ) : (
-              <ButtonOutline {...submitButtonProps} />
-            )}
-          </View>
-        </View>
-      </SafeAreaView>
-    </Modal>
-  );
-};
-export default AskUserInteractionScreen;
diff --git a/ts/features/fastLogin/screens/FastLoginModals.tsx b/ts/features/fastLogin/screens/FastLoginModals.tsx
index debd9d31b92..d2e077fbdac 100644
--- a/ts/features/fastLogin/screens/FastLoginModals.tsx
+++ b/ts/features/fastLogin/screens/FastLoginModals.tsx
@@ -3,12 +3,11 @@ import React from "react";
 import { useDispatch } from "react-redux";
 import { TokenRefreshState } from "../store/reducers/tokenRefreshReducer";
 import { logoutRequest } from "../../../store/actions/authentication";
-import { openWebUrl } from "../../../utils/url";
 import {
   askUserToRefreshSessionToken,
   clearTokenRefreshError
 } from "../store/actions/tokenRefreshActions";
-import AskUserInteractionScreen from "./AskUserInterarctionScreen";
+import AskUserInteractionScreen from "./AskUserInteractionScreen";
 import RefreshTokenLoadingScreen from "./RefreshTokenLoadingScreen";
 
 const FastLoginModals = (
@@ -20,21 +19,21 @@ const FastLoginModals = (
   if (tokenRefreshing.kind === "no-pin-error") {
     return (
       <AskUserInteractionScreen
-        pictogramName="timeout"
+        pictogramName="time"
         title={I18n.t("fastLogin.userInteraction.sessionExpired.noPin.title")}
         subtitle={I18n.t(
           "fastLogin.userInteraction.sessionExpired.noPin.subtitle"
         )}
-        onSubmit={() => {
-          dispatch(clearTokenRefreshError());
-          dispatch(logoutRequest());
-        }}
-        buttonStylesProps={{
-          submitButtonStyle: {
-            type: "solid",
-            title: I18n.t(
-              "fastLogin.userInteraction.sessionExpired.noPin.submitButtonTitle"
-            )
+        primaryAction={{
+          label: I18n.t(
+            "fastLogin.userInteraction.sessionExpired.noPin.submitButtonTitle"
+          ),
+          accessibilityLabel: I18n.t(
+            "fastLogin.userInteraction.sessionExpired.noPin.submitButtonTitle"
+          ),
+          onPress: () => {
+            dispatch(clearTokenRefreshError());
+            dispatch(logoutRequest());
           }
         }}
       />
@@ -44,26 +43,13 @@ const FastLoginModals = (
   if (tokenRefreshing.kind === "transient-error") {
     return (
       <AskUserInteractionScreen
-        pictogramName="umbrella"
+        pictogramName="umbrellaNew"
         title={I18n.t(
           "fastLogin.userInteraction.sessionExpired.transientError.title"
         )}
         subtitle={I18n.t(
           "fastLogin.userInteraction.sessionExpired.transientError.subtitle"
         )}
-        onSubmit={() => {
-          // FIXME: update this URL once available
-          // https://pagopa.atlassian.net/browse/IOPID-393
-          openWebUrl("https://io.italia.it/faq");
-        }}
-        buttonStylesProps={{
-          submitButtonStyle: {
-            type: "solid",
-            title: I18n.t(
-              "fastLogin.userInteraction.sessionExpired.transientError.submitButtonTitle"
-            )
-          }
-        }}
       />
     );
   }
@@ -75,22 +61,22 @@ const FastLoginModals = (
   if (isFastLoginUserInteractionNeeded) {
     return (
       <AskUserInteractionScreen
-        pictogramName="timeout"
+        pictogramName="time"
         title={I18n.t(
           "fastLogin.userInteraction.sessionExpired.continueNavigation.title"
         )}
         subtitle={I18n.t(
           "fastLogin.userInteraction.sessionExpired.continueNavigation.subtitle"
         )}
-        onSubmit={() => {
-          dispatch(askUserToRefreshSessionToken.success("yes"));
-        }}
-        buttonStylesProps={{
-          submitButtonStyle: {
-            type: "solid",
-            title: I18n.t(
-              "fastLogin.userInteraction.sessionExpired.continueNavigation.submitButtonTitle"
-            )
+        primaryAction={{
+          label: I18n.t(
+            "fastLogin.userInteraction.sessionExpired.continueNavigation.submitButtonTitle"
+          ),
+          accessibilityLabel: I18n.t(
+            "fastLogin.userInteraction.sessionExpired.continueNavigation.submitButtonTitle"
+          ),
+          onPress: () => {
+            dispatch(askUserToRefreshSessionToken.success("yes"));
           }
         }}
       />
diff --git a/ts/features/fastLogin/screens/__tests__/AskUserToContinueScreen.test.tsx b/ts/features/fastLogin/screens/__tests__/AskUserToContinueScreen.test.tsx
index 9a761083dd1..b90f48c68b6 100644
--- a/ts/features/fastLogin/screens/__tests__/AskUserToContinueScreen.test.tsx
+++ b/ts/features/fastLogin/screens/__tests__/AskUserToContinueScreen.test.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { render, fireEvent, act } from "@testing-library/react-native";
+import { render, fireEvent } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import { Store, createStore } from "redux";
 import * as _ from "lodash";
 import type { IOPictograms } from "@pagopa/io-app-design-system";
-import AskUserInteractionScreen, { Props } from "../AskUserInterarctionScreen";
+import AskUserInteractionScreen, { Props } from "../AskUserInteractionScreen";
 import { GlobalState } from "../../../../store/reducers/types";
 import { appReducer } from "../../../../store/reducers";
 import { applicationChangeState } from "../../../../store/actions/application";
@@ -14,87 +14,65 @@ jest.useFakeTimers();
 const globalState = appReducer(undefined, applicationChangeState("active"));
 const store = createStore(appReducer, globalState as any);
 
+const primaryActionButtonTitle = "Continue";
+const secondaryActionButtonTitle = "Cancel";
+
 const defaultProps = {
   title: "Test title",
   subtitle: "Test subtitle",
   pictogramName: "timeout" as IOPictograms,
-  onSubmit: jest.fn(),
-  onClose: jest.fn(),
-  onCancel: jest.fn(),
-  onTimerExpired: jest.fn(),
-  timerDurationInSeconds: 10
+  primaryAction: {
+    label: primaryActionButtonTitle,
+    accessibilityLabel: primaryActionButtonTitle,
+    onPress: jest.fn()
+  },
+  secondaryAction: {
+    label: secondaryActionButtonTitle,
+    accessibilityLabel: secondaryActionButtonTitle,
+    onPress: jest.fn()
+  }
 };
 
 describe("AskUserInteractionScreen component", () => {
   it("should render properly", () => {
-    const { getByText, getByTestId } = renderComponent(defaultProps, store);
+    const { getByText } = renderComponent(defaultProps, store);
 
     expect(getByText(defaultProps.title)).toBeTruthy();
     expect(getByText(defaultProps.subtitle)).toBeTruthy();
-    const continueButton = getByText("Continue");
-    const cancelButton = getByText("Cancel");
-    const headerCloseButton = getByTestId("header-close-button");
-    const countdownTimer = getByText("00:10");
+    const continueButton = getByText(primaryActionButtonTitle);
+    const cancelButton = getByText(secondaryActionButtonTitle);
     expect(continueButton).toBeTruthy();
     expect(cancelButton).toBeTruthy();
-    expect(headerCloseButton).toBeTruthy();
-    expect(countdownTimer).toBeTruthy();
-    expect(getByTestId("countdown-timer")).toBeTruthy();
   });
 
-  it("should call onSubmit when the continue button is pressed", () => {
+  it("should call primaryAction onPress when the primary button is pressed", () => {
     const { getByText } = renderComponent(defaultProps, store);
-    const button = getByText("Continue");
+    const button = getByText(primaryActionButtonTitle);
     fireEvent.press(button);
-    expect(defaultProps.onSubmit).toHaveBeenCalled();
+    expect(defaultProps.primaryAction.onPress).toHaveBeenCalled();
   });
 
-  it("should call onCancel when the exit button is pressed", () => {
+  it("should call secondaryAction onPress when the secondary button is pressed", () => {
     const { getByText } = renderComponent(defaultProps, store);
-    const button = getByText("Cancel");
+    const button = getByText(secondaryActionButtonTitle);
     fireEvent.press(button);
-    expect(defaultProps.onCancel).toHaveBeenCalled();
+    expect(defaultProps.secondaryAction.onPress).toHaveBeenCalled();
   });
 
-  it("should call onClose when the close button is pressed", () => {
-    const { getByTestId } = renderComponent(defaultProps, store);
-    const button = getByTestId("header-close-button");
-    fireEvent.press(button);
-    expect(defaultProps.onClose).toHaveBeenCalled();
-  });
-
-  it("does not render exit button if onExit prop is not provided", () => {
+  it("does not render primary button if primaryAction is not provided", () => {
     const { queryByText } = renderComponent(
-      _.omit(defaultProps, "onCancel"),
-      store
-    );
-    expect(queryByText("Cancel")).toBeNull();
-  });
-
-  it("does not render close button if onExit prop is not provided", () => {
-    const { queryByTestId } = renderComponent(
-      _.omit(defaultProps, "onClose"),
+      _.omit(defaultProps, "primaryAction"),
       store
     );
-    expect(queryByTestId("header-close-button")).toBeNull();
+    expect(queryByText(primaryActionButtonTitle)).toBeNull();
   });
 
-  it("does not render timer if onTimerExpired prop is not provided", () => {
-    const { queryByTestId } = renderComponent(
-      _.omit(defaultProps, "onTimerExpired"),
+  it("does not render secondary button if secondaryAction is not provided", () => {
+    const { queryByText } = renderComponent(
+      _.omit(defaultProps, "secondaryAction"),
       store
     );
-    expect(queryByTestId("countdown-timer")).toBeNull();
-  });
-
-  it("should call onTimerExpired when the timer expires", async () => {
-    renderComponent(defaultProps, store);
-
-    await act(() => {
-      jest.advanceTimersByTime(10 * 1000);
-    });
-
-    expect(defaultProps.onTimerExpired).toHaveBeenCalled();
+    expect(queryByText(secondaryActionButtonTitle)).toBeNull();
   });
 });
 
diff --git a/ts/features/fastLogin/store/selectors/__tests__/emailUniquenessValidation.test.ts b/ts/features/fastLogin/store/selectors/__tests__/emailUniquenessValidation.test.ts
deleted file mode 100644
index f47468e239e..00000000000
--- a/ts/features/fastLogin/store/selectors/__tests__/emailUniquenessValidation.test.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import * as O from "fp-ts/lib/Option";
-import { Tuple2, ITuple2 } from "@pagopa/ts-commons/lib/tuples";
-import { BackendStatus } from "../../../../../../definitions/content/BackendStatus";
-import { baseRawBackendStatus } from "../../../../../store/reducers/__mock__/backendStatus";
-import { GlobalState } from "../../../../../store/reducers/types";
-import { isEmailUniquenessValidationEnabledSelector } from "..";
-import { EmailUniquenessConfig } from "../../../../../../definitions/content/EmailUniquenessConfig";
-
-jest.mock("react-native-device-info", () => ({
-  getReadableVersion: jest.fn().mockReturnValue("1.2.3.4"),
-  getVersion: jest.fn().mockReturnValue("1.2.3.4")
-}));
-
-jest.mock("../../../../../config", () => ({
-  isNewCduFlow: true
-}));
-
-describe('backend service Feature Flag "emailUniquenessValidation"', () => {
-  const status: BackendStatus = {
-    ...baseRawBackendStatus
-  };
-
-  const customStore = (emailUniquenessValidation: EmailUniquenessConfig) =>
-    ({
-      features: {
-        loginFeatures: {
-          fastLogin: {
-            optIn: {
-              enabled: true
-            }
-          }
-        }
-      },
-      backendStatus: {
-        status: O.some({
-          ...status,
-          config: {
-            ...status.config,
-            emailUniquenessValidation
-          }
-        })
-      }
-    } as unknown as GlobalState);
-
-  [
-    Tuple2("0", false),
-    Tuple2("0.0", false),
-    Tuple2("0.0.0", false),
-    Tuple2("0.0.0.0", false),
-    Tuple2("1", true),
-    Tuple2("1.2", true),
-    Tuple2("1.2.3", true),
-    Tuple2("1.2.3.0", true),
-    Tuple2("1.2.3.1", true),
-    Tuple2("1.2.3.2", true),
-    Tuple2("1.2.3.3", true),
-    Tuple2("1.2.3.4", true),
-    Tuple2("1.2.3.5", false),
-    Tuple2("-1", false),
-    Tuple2("", false),
-    Tuple2(undefined, false),
-    Tuple2("?$&&/!@", false),
-    Tuple2("2", false),
-    Tuple2("1.3", false),
-    Tuple2("1.2.4", false)
-  ].forEach((t: ITuple2<string | undefined, boolean>) => {
-    const [minAppVersion, expectedValue] = [t.e1, t.e2];
-    it(`should return ${expectedValue} for ${JSON.stringify(
-      minAppVersion
-    )}`, () => {
-      const store = customStore({
-        min_app_version: {
-          ios: minAppVersion,
-          android: minAppVersion
-        }
-      });
-
-      expect(isEmailUniquenessValidationEnabledSelector(store)).toBe(
-        expectedValue
-      );
-    });
-  });
-});
diff --git a/ts/features/fastLogin/store/selectors/index.ts b/ts/features/fastLogin/store/selectors/index.ts
index e9f7b1215e2..7becc55e6b3 100644
--- a/ts/features/fastLogin/store/selectors/index.ts
+++ b/ts/features/fastLogin/store/selectors/index.ts
@@ -1,24 +1,10 @@
 import { createSelector } from "reselect";
 import { uniqWith, isEqual } from "lodash";
 import { backendStatusSelector } from "../../../../store/reducers/backendStatus";
-import {
-  fastLoginOptIn,
-  fastLoginEnabled,
-  isNewCduFlow
-} from "../../../../config";
+import { fastLoginOptIn, fastLoginEnabled } from "../../../../config";
 import { GlobalState } from "../../../../store/reducers/types";
 import { isPropertyWithMinAppVersionEnabled } from "../../../../store/reducers/featureFlagWithMinAppVersionStatus";
 
-export const isEmailUniquenessValidationEnabledSelector = createSelector(
-  backendStatusSelector,
-  backendStatus =>
-    isPropertyWithMinAppVersionEnabled({
-      backendStatus,
-      mainLocalFlag: isNewCduFlow,
-      configPropertyName: "emailUniquenessValidation"
-    })
-);
-
 export const fastLoginOptInSelector = (state: GlobalState) =>
   state.features.loginFeatures.fastLogin.optIn;
 
diff --git a/ts/features/fci/analytics/index.ts b/ts/features/fci/analytics/index.ts
index 0eaf9c86e46..99a6073ccd4 100644
--- a/ts/features/fci/analytics/index.ts
+++ b/ts/features/fci/analytics/index.ts
@@ -20,7 +20,7 @@ export const trackFciDocOpening = (
   total_doc_count: number,
   environment: string
 ) =>
-  void mixpanelTrack(
+  mixpanelTrack(
     "FCI_DOC_OPENING",
     buildEventProperties("UX", "action", {
       expire_date,
@@ -34,7 +34,7 @@ export const trackFciUserExit = (
   environment: string,
   cta_id?: string
 ) =>
-  void mixpanelTrack(
+  mixpanelTrack(
     "FCI_USER_EXIT",
     buildEventProperties("UX", "exit", {
       screen_name,
@@ -44,7 +44,7 @@ export const trackFciUserExit = (
   );
 
 export const trackFciUxConversion = (environment: string) =>
-  void mixpanelTrack(
+  mixpanelTrack(
     "FCI_UX_CONVERSION",
     buildEventProperties("UX", "action", {
       environment
@@ -52,7 +52,7 @@ export const trackFciUxConversion = (environment: string) =>
   );
 
 export const trackFciUserDataConfirmed = (environment: string) =>
-  void mixpanelTrack(
+  mixpanelTrack(
     "FCI_USER_DATA_CONFIRMED",
     buildEventProperties("UX", "action", { environment })
   );
@@ -63,7 +63,7 @@ export const trackFciDocOpeningSuccess = (
   optional_sign_count: number,
   environment: string
 ) =>
-  void mixpanelTrack(
+  mixpanelTrack(
     "FCI_DOC_OPENING_SUCCESS",
     buildEventProperties("UX", "control", {
       doc_count,
@@ -74,13 +74,13 @@ export const trackFciDocOpeningSuccess = (
   );
 
 export const trackFciSigningDoc = (environment: string) =>
-  void mixpanelTrack(
+  mixpanelTrack(
     "FCI_SIGNING_DOC",
     buildEventProperties("UX", "action", { environment })
   );
 
 export const trackFciShowSignatureFields = (environment: string) =>
-  void mixpanelTrack(
+  mixpanelTrack(
     "FCI_SHOW_SIGNATURE_FIELDS",
     buildEventProperties("UX", "micro_action", { environment })
   );
@@ -91,7 +91,7 @@ export const trackFciUxSuccess = (
   optional_signed_count: number,
   environment: string
 ) =>
-  void mixpanelTrack(
+  mixpanelTrack(
     "FCI_UX_SUCCESS",
     buildEventProperties("UX", "screen_view", {
       doc_signed_count,
@@ -102,14 +102,14 @@ export const trackFciUxSuccess = (
   );
 
 export const trackFciStartSignature = (environment: string) =>
-  void mixpanelTrack(
+  mixpanelTrack(
     "FCI_START_SIGNATURE",
     buildEventProperties("UX", "action", { environment })
   );
 
 const trackFciAction =
   (mp: NonNullable<typeof mixpanel>, environment: string) =>
-  (action: Action): Promise<void> => {
+  (action: Action): void => {
     switch (action.type) {
       case getType(fciStartRequest):
       case getType(fciSignatureRequestFromId.request):
@@ -146,7 +146,6 @@ const trackFciAction =
           })
         );
     }
-    return Promise.resolve();
   };
 
 export default trackFciAction;
diff --git a/ts/features/fci/components/DocumentViewer.tsx b/ts/features/fci/components/DocumentViewer.tsx
index 14b23cdf843..aa9e0f8825b 100644
--- a/ts/features/fci/components/DocumentViewer.tsx
+++ b/ts/features/fci/components/DocumentViewer.tsx
@@ -1,17 +1,18 @@
 import React, { useState } from "react";
 import { StyleSheet } from "react-native";
-import { constNull } from "fp-ts/lib/function";
 import * as pot from "@pagopa/ts-commons/lib/pot";
 import ReactNativeBlobUtil from "react-native-blob-util";
 import Pdf from "react-native-pdf";
 import * as S from "fp-ts/lib/string";
-import { IOColors } from "@pagopa/io-app-design-system";
-import FooterWithButtons from "../../../components/ui/FooterWithButtons";
+import {
+  ButtonSolidProps,
+  FooterWithButtons,
+  IOColors
+} from "@pagopa/io-app-design-system";
 import I18n from "../../../i18n";
 import { isIos } from "../../../utils/platform";
 import { share } from "../../../utils/share";
 import { showToast } from "../../../utils/showToast";
-import { confirmButtonProps } from "../../../components/buttons/ButtonConfigurations";
 import { FciDownloadPreviewDirectoryPath } from "../saga/networking/handleDownloadDocument";
 import { useIODispatch, useIOSelector } from "../../../store/hooks";
 import { fciDownloadPreview } from "../store/actions";
@@ -19,7 +20,7 @@ import {
   fciDownloadPathSelector,
   fciDownloadPreviewSelector
 } from "../store/reducers/fciDownloadPreview";
-import { LoadingErrorComponent } from "../../../components/LoadingErrorComponent";
+import LoadingComponent from "./LoadingComponent";
 
 const styles = StyleSheet.create({
   pdf: {
@@ -31,94 +32,99 @@ const styles = StyleSheet.create({
 export const getFileNameFromUrl = (url: string) =>
   url.substring(url.lastIndexOf("/") + 1).split("?")[0] + ".pdf";
 
-const renderFooter = (url: string, filePath: string) =>
-  isIos ? (
+const renderFooter = (url: string, filePath: string) => {
+  const confirmButtonProps: ButtonSolidProps = {
+    onPress: () => ReactNativeBlobUtil.ios.presentOptionsMenu(filePath),
+    label: I18n.t("messagePDFPreview.open"),
+    accessibilityLabel: I18n.t("messagePDFPreview.open")
+  };
+
+  const shareButtonProps: ButtonSolidProps = {
+    onPress: () => {
+      share(
+        `file://${
+          FciDownloadPreviewDirectoryPath + "/" + getFileNameFromUrl(url)
+        }`,
+        undefined,
+        false
+      )().catch(_ => {
+        showToast(I18n.t("messagePDFPreview.errors.sharing"));
+      });
+    },
+    label: I18n.t("global.buttons.share"),
+    accessibilityLabel: I18n.t("global.buttons.share")
+  };
+
+  const saveButtonProps: ButtonSolidProps = {
+    onPress: () => {
+      ReactNativeBlobUtil.MediaCollection.copyToMediaStore(
+        {
+          name: getFileNameFromUrl(url),
+          parentFolder: "",
+          mimeType: "application/pdf"
+        },
+        "Download",
+        FciDownloadPreviewDirectoryPath + "/" + getFileNameFromUrl(url)
+      )
+        .then(_ => {
+          showToast(
+            I18n.t("messagePDFPreview.savedAtLocation", {
+              name: "attachment.displayName"
+            }),
+            "success"
+          );
+        })
+        .catch(_ => {
+          showToast(I18n.t("messagePDFPreview.errors.saving"));
+        });
+    },
+    label: I18n.t("messagePDFPreview.save"),
+    accessibilityLabel: I18n.t("messagePDFPreview.save")
+  };
+
+  const openButtonProps: ButtonSolidProps = {
+    onPress: () => {
+      ReactNativeBlobUtil.android
+        .actionViewIntent(
+          FciDownloadPreviewDirectoryPath + "/" + getFileNameFromUrl(url),
+          "application/pdf"
+        )
+        .catch(_ => {
+          showToast(I18n.t("messagePDFPreview.errors.opening"));
+        });
+    },
+    label: I18n.t("messagePDFPreview.open"),
+    accessibilityLabel: I18n.t("messagePDFPreview.open")
+  };
+
+  return isIos ? (
     <FooterWithButtons
       type={"SingleButton"}
-      leftButton={confirmButtonProps(() => {
-        ReactNativeBlobUtil.ios.presentOptionsMenu(filePath);
-      }, I18n.t("messagePDFPreview.open"))}
+      primary={{ type: "Solid", buttonProps: confirmButtonProps }}
     />
   ) : (
     <FooterWithButtons
       type={"ThreeButtonsInLine"}
-      leftButton={{
-        bordered: true,
-        primary: false,
-        onPress: () => {
-          share(
-            `file://${
-              FciDownloadPreviewDirectoryPath + "/" + getFileNameFromUrl(url)
-            }`,
-            undefined,
-            false
-          )().catch(_ => {
-            showToast(I18n.t("messagePDFPreview.errors.sharing"));
-          });
-        },
-        title: I18n.t("global.buttons.share")
-      }}
-      midButton={{
-        bordered: true,
-        primary: false,
-        onPress: () => {
-          ReactNativeBlobUtil.MediaCollection.copyToMediaStore(
-            {
-              name: getFileNameFromUrl(url),
-              parentFolder: "",
-              mimeType: "application/pdf"
-            },
-            "Download",
-            FciDownloadPreviewDirectoryPath + "/" + getFileNameFromUrl(url)
-          )
-            .then(_ => {
-              showToast(
-                I18n.t("messagePDFPreview.savedAtLocation", {
-                  name: "attachment.displayName"
-                }),
-                "success"
-              );
-            })
-            .catch(_ => {
-              showToast(I18n.t("messagePDFPreview.errors.saving"));
-            });
-        },
-        title: I18n.t("messagePDFPreview.save")
+      primary={{
+        type: "Solid",
+        buttonProps: shareButtonProps
       }}
-      rightButton={confirmButtonProps(() => {
-        ReactNativeBlobUtil.android
-          .actionViewIntent(
-            FciDownloadPreviewDirectoryPath + "/" + getFileNameFromUrl(url),
-            "application/pdf"
-          )
-          .catch(_ => {
-            showToast(I18n.t("messagePDFPreview.errors.opening"));
-          });
-      }, I18n.t("messagePDFPreview.open"))}
+      secondary={{ type: "Outline", buttonProps: saveButtonProps }}
+      third={{ type: "Outline", buttonProps: openButtonProps }}
     />
   );
+};
 
 type Props = {
   documentUrl: string;
-  enableAnnotationRendering?: boolean;
   onLoadComplete?: (totalPages: number) => void;
   onPageChanged?: (page: number) => void;
   onError: () => void;
 };
 
-const LoadingComponent = () => (
-  <LoadingErrorComponent
-    isLoading={true}
-    loadingCaption={""}
-    onRetry={constNull}
-    testID={"FciRouterLoadingScreenTestID"}
-  />
-);
-
 export const DocumentViewer = (props: Props): React.ReactElement => {
   const [isError, setIsError] = useState(false);
   const documentUrl = props.documentUrl;
-  const enableAnnotationRendering = props.enableAnnotationRendering;
   const dispatch = useIODispatch();
   const fciDownloadSelector = useIOSelector(fciDownloadPreviewSelector);
   const fciDownloadPath = useIOSelector(fciDownloadPathSelector);
@@ -128,7 +134,7 @@ export const DocumentViewer = (props: Props): React.ReactElement => {
   }, [documentUrl, dispatch]);
 
   if (pot.isLoading(fciDownloadSelector)) {
-    return <LoadingComponent />;
+    return <LoadingComponent testID={"FciRouterLoadingScreenTestID"} />;
   }
 
   if (pot.isError(fciDownloadSelector) || isError) {
@@ -148,7 +154,6 @@ export const DocumentViewer = (props: Props): React.ReactElement => {
               setIsError(true);
             }}
             enablePaging
-            enableAnnotationRendering={enableAnnotationRendering ? true : false}
           />
           {renderFooter(documentUrl, fciDownloadPath)}
         </>
diff --git a/ts/features/fci/components/DocumentWithSignature.tsx b/ts/features/fci/components/DocumentWithSignature.tsx
index 4560d707252..58a5aedbe10 100644
--- a/ts/features/fci/components/DocumentWithSignature.tsx
+++ b/ts/features/fci/components/DocumentWithSignature.tsx
@@ -1,26 +1,31 @@
 import * as React from "react";
 import Pdf from "react-native-pdf";
-import { Body, Container, Left, Right } from "native-base";
 import { constNull, pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { SafeAreaView, StyleSheet } from "react-native";
-import { IconButton, IOColors } from "@pagopa/io-app-design-system";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
-import FooterWithButtons from "../../../components/ui/FooterWithButtons";
+import { StyleSheet, View } from "react-native";
+import {
+  ButtonSolidProps,
+  FooterWithButtons,
+  H5,
+  HSpacer,
+  IconButton,
+  IOColors,
+  IOStyles,
+  VSpacer
+} from "@pagopa/io-app-design-system";
+import { SafeAreaView } from "react-native-safe-area-context";
 import I18n from "../../../i18n";
 import { ExistingSignatureFieldAttrs } from "../../../../definitions/fci/ExistingSignatureFieldAttrs";
 import { SignatureFieldToBeCreatedAttrs } from "../../../../definitions/fci/SignatureFieldToBeCreatedAttrs";
 import { fciSignatureDetailDocumentsSelector } from "../store/reducers/fciSignatureRequest";
-import AppHeader from "../../../components/ui/AppHeader";
 import { useIODispatch, useIOSelector } from "../../../store/hooks";
 import { WithTestID } from "../../../types/WithTestID";
-import { H5 } from "../../../components/core/typography/H5";
 import { useOnFirstRender } from "../../../utils/hooks/useOnFirstRender";
 import { fciDocumentSignatureFields } from "../store/actions";
 import { fciSignatureFieldDrawingSelector } from "../store/reducers/fciSignatureFieldDrawing";
-import LoadingSpinnerOverlay from "../../../components/LoadingSpinnerOverlay";
 import DocumentsNavigationBar from "./DocumentsNavigationBar";
+import LoadingComponent from "./LoadingComponent";
 
 export type SignatureFieldAttrType =
   | ExistingSignatureFieldAttrs
@@ -37,23 +42,32 @@ const styles = StyleSheet.create({
   pdf: {
     flex: 1,
     backgroundColor: IOColors.bluegrey
+  },
+  header: {
+    alignItems: "center",
+    flexDirection: "row"
+  },
+  headerTitle: {
+    flex: 1,
+    textAlign: "center"
   }
 });
 
 const DocumentWithSignature = (props: Props) => {
   const pdfRef = React.useRef<Pdf>(null);
   const [totalPages, setTotalPages] = React.useState(0);
-  const [currentPage, setCurrentPage] = React.useState(0);
+  const [currentPage, setCurrentPage] = React.useState(1);
   const documents = useIOSelector(fciSignatureDetailDocumentsSelector);
   const parsedDocuments = useIOSelector(fciSignatureFieldDrawingSelector);
   const { attrs, currentDoc } = props;
   const dispatch = useIODispatch();
   const onContinuePress = () => props.onClose();
-  const continueButtonProps = {
-    block: true,
-    primary: true,
+  const continueButtonProps: ButtonSolidProps = {
     onPress: onContinuePress,
-    title: I18n.t("features.fci.documents.footer.backToSignFieldsList")
+    label: I18n.t("features.fci.documents.footer.backToSignFieldsList"),
+    accessibilityLabel: I18n.t(
+      "features.fci.documents.footer.backToSignFieldsList"
+    )
   };
 
   /**
@@ -89,7 +103,7 @@ const DocumentWithSignature = (props: Props) => {
         source={{
           uri: document
         }}
-        page={page + 1}
+        page={page}
         onLoadComplete={(numberOfPages, _) => {
           setTotalPages(numberOfPages);
         }}
@@ -100,7 +114,6 @@ const DocumentWithSignature = (props: Props) => {
         onError={props.onError}
         onPressLink={constNull}
         enablePaging
-        enableAnnotationRendering={false}
         style={styles.pdf}
       />
     ),
@@ -139,12 +152,6 @@ const DocumentWithSignature = (props: Props) => {
     );
   };
 
-  /**
-   * Renders the loading spinner.
-   * @returns a loading spinner overlay
-   */
-  const LoadingView = () => <LoadingSpinnerOverlay isLoading={true} />;
-
   /**
    * Callback to be used when the pdf cannot be loaded or the signature field cannot be drawn.
    * It returns an empty fragment and calls the `onError` callback.
@@ -161,39 +168,40 @@ const DocumentWithSignature = (props: Props) => {
     () =>
       pot.fold(
         parsedDocuments,
-        () => <LoadingView />,
-        () => <LoadingView />,
-        () => <LoadingView />,
+        () => <LoadingComponent />,
+        () => <LoadingComponent />,
+        () => <LoadingComponent />,
         () => <ErrorView />,
         some => (
           <RenderPdf document={some.drawnBase64} page={some.signaturePage} />
         ),
-        () => <LoadingView />,
-        () => <LoadingView />,
+        () => <LoadingComponent />,
+        () => <LoadingComponent />,
         () => <ErrorView />
       ),
     [ErrorView, RenderPdf, parsedDocuments]
   );
 
   return (
-    <Container>
-      <AppHeader>
-        <Left />
-        <Body style={{ alignItems: "center" }}>
-          <H5 weight={"SemiBold"} color={"bluegrey"}>
-            {I18n.t("messagePDFPreview.title")}
-          </H5>
-        </Body>
-        <Right>
-          <IconButton
-            icon="closeLarge"
-            onPress={props.onClose}
-            color="neutral"
-            testID="FciDocumentWithSignatureTopRightButtonTestID"
-            accessibilityLabel={I18n.t("global.buttons.close")}
-          />
-        </Right>
-      </AppHeader>
+    <SafeAreaView
+      style={[IOStyles.flex, IOStyles.bgWhite]}
+      testID={"FciDocumentsScreenTestID"}
+      edges={["top", "left", "right"]}
+    >
+      <View style={[IOStyles.horizontalContentPadding, styles.header]}>
+        <HSpacer />
+        <H5 weight={"SemiBold"} color={"bluegrey"} style={styles.headerTitle}>
+          {I18n.t("messagePDFPreview.title")}
+        </H5>
+        <IconButton
+          color="neutral"
+          accessibilityLabel={I18n.t("global.buttons.close")}
+          icon="closeLarge"
+          onPress={props.onClose}
+          testID="FciDocumentWithSignatureTopRightButtonTestID"
+        />
+      </View>
+      <VSpacer />
       <DocumentsNavigationBar
         indicatorPosition={"right"}
         titleLeft={I18n.t("features.fci.documentsBar.titleLeft", {
@@ -204,21 +212,19 @@ const DocumentWithSignature = (props: Props) => {
           currentPage,
           totalPages
         })}
-        iconLeftColor={currentPage === 1 ? "bluegreyLight" : "blue"}
-        iconRightColor={currentPage === totalPages ? "bluegreyLight" : "blue"}
+        iconLeftDisabled={currentPage === 1}
+        iconRightDisabled={currentPage === totalPages}
         onPrevious={onPrevious}
         onNext={onNext}
         disabled={false}
         testID={"FciDocumentsNavBarTestID"}
       />
-      <SafeAreaView style={IOStyles.flex} testID={"FciDocumentsScreenTestID"}>
-        <RenderMask />
-        <FooterWithButtons
-          type={"SingleButton"}
-          leftButton={continueButtonProps}
-        />
-      </SafeAreaView>
-    </Container>
+      <RenderMask />
+      <FooterWithButtons
+        type={"SingleButton"}
+        primary={{ type: "Solid", buttonProps: continueButtonProps }}
+      />
+    </SafeAreaView>
   );
 };
 export default DocumentWithSignature;
diff --git a/ts/features/fci/components/DocumentsNavigationBar.tsx b/ts/features/fci/components/DocumentsNavigationBar.tsx
index 66c8bd7150e..cf7bdcb7c92 100644
--- a/ts/features/fci/components/DocumentsNavigationBar.tsx
+++ b/ts/features/fci/components/DocumentsNavigationBar.tsx
@@ -1,10 +1,13 @@
 import * as React from "react";
 import { View, StyleSheet } from "react-native";
-import { IOColors, Icon, HSpacer } from "@pagopa/io-app-design-system";
-import ButtonDefaultOpacity from "../../../components/ButtonDefaultOpacity";
-import { H4 } from "../../../components/core/typography/H4";
-import { WithTestID } from "../../../types/WithTestID";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
+import {
+  IOColors,
+  HSpacer,
+  H6,
+  IOStyles,
+  IconButton,
+  WithTestID
+} from "@pagopa/io-app-design-system";
 
 const styles = StyleSheet.create({
   container: {
@@ -13,13 +16,7 @@ const styles = StyleSheet.create({
     borderColor: IOColors.bluegreyLight,
     alignItems: "center",
     paddingTop: 12,
-    paddingBottom: 12
-  },
-  button: {
-    paddingLeft: 8,
-    paddingRight: 8,
-    paddingBottom: 0,
-    paddingTop: 0
+    paddingBottom: 14
   },
   shadow: {
     // iOS
@@ -43,8 +40,8 @@ export type IndicatorPositionEnum = "left" | "right";
 type Props = WithTestID<{
   titleRight: string;
   titleLeft: string;
-  iconRightColor?: IOColors;
-  iconLeftColor?: IOColors;
+  iconRightDisabled?: boolean;
+  iconLeftDisabled?: boolean;
   disabled?: boolean;
   indicatorPosition: IndicatorPositionEnum;
   onPrevious: () => void;
@@ -52,41 +49,29 @@ type Props = WithTestID<{
 }>;
 
 const renderNavigationComponent = (
-  { onPrevious, onNext, disabled, iconLeftColor, iconRightColor }: Props,
+  { onPrevious, onNext, iconLeftDisabled, iconRightDisabled }: Props,
   title: string
 ) => (
   <>
     {/* button left */}
-    <ButtonDefaultOpacity
+    <IconButton
       onPress={onPrevious}
-      transparent={true}
-      style={styles.button}
-      disabled={disabled}
+      disabled={iconLeftDisabled}
       testID={"DocumentsNavigationBarLeftButtonTestID"}
-    >
-      <Icon
-        name="chevronLeft"
-        size={24}
-        color={iconLeftColor ?? "blue"}
-        accessible={true}
-      />
-    </ButtonDefaultOpacity>
-    <H4>{title}</H4>
+      icon="chevronLeft"
+      iconSize={24}
+      accessibilityLabel="previous"
+    />
+    <H6>{title}</H6>
     {/* button right */}
-    <ButtonDefaultOpacity
+    <IconButton
       onPress={onNext}
-      transparent={true}
-      style={styles.button}
-      disabled={disabled}
+      disabled={iconRightDisabled}
       testID={"DocumentsNavigationBarRightButtonTestID"}
-    >
-      <Icon
-        name="chevronRight"
-        size={24}
-        color={iconRightColor ?? "blue"}
-        accessible={true}
-      />
-    </ButtonDefaultOpacity>
+      icon="chevronRight"
+      iconSize={24}
+      accessibilityLabel="next"
+    />
   </>
 );
 
@@ -101,13 +86,13 @@ const DocumentsNavigationBar = (props: Props) => (
       <>
         {renderNavigationComponent(props, props.titleLeft)}
         <View style={{ flex: 1 }} />
-        <H4 style={IOStyles.horizontalContentPadding}>{props.titleRight}</H4>
+        <H6 style={IOStyles.horizontalContentPadding}>{props.titleRight}</H6>
       </>
     )}
     {props.indicatorPosition === "right" && (
       <>
         <HSpacer />
-        <H4>{props.titleLeft}</H4>
+        <H6>{props.titleLeft}</H6>
         <View style={{ flex: 1 }} />
         {renderNavigationComponent(props, props.titleRight)}
         <HSpacer />
diff --git a/ts/features/fci/components/ErrorComponent.tsx b/ts/features/fci/components/ErrorComponent.tsx
index b73a2f6f181..b74d06224a7 100644
--- a/ts/features/fci/components/ErrorComponent.tsx
+++ b/ts/features/fci/components/ErrorComponent.tsx
@@ -1,12 +1,22 @@
 import * as React from "react";
-import { SafeAreaView } from "react-native";
+import { View } from "react-native";
 import { EmailString } from "@pagopa/ts-commons/lib/strings";
-import { IOPictograms, Pictogram } from "@pagopa/io-app-design-system";
+import {
+  ButtonOutline,
+  ButtonSolid,
+  ButtonSolidProps,
+  IOPictograms,
+  IOSpacingScale,
+  IOStyles,
+  Pictogram,
+  VSpacer
+} from "@pagopa/io-app-design-system";
+import {
+  SafeAreaView,
+  useSafeAreaInsets
+} from "react-native-safe-area-context";
 import I18n from "../../../i18n";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
-import BaseScreenComponent from "../../../components/screens/BaseScreenComponent";
 import { WithTestID } from "../../../types/WithTestID";
-import { FooterStackButton } from "../../../components/buttons/FooterStackButtons";
 import {
   addTicketCustomField,
   assistanceToolRemoteConfig,
@@ -35,11 +45,14 @@ export type Props = WithTestID<{
   onPress: () => void;
 }>;
 
+const DEFAULT_BOTTOM_PADDING: IOSpacingScale = 20;
+
 const ErrorComponent = (props: Props) => {
   const dispatch = useIODispatch();
   const signatureRequestId = useIOSelector(fciSignatureRequestIdSelector);
   const assistanceToolConfig = useIOSelector(assistanceToolConfigSelector);
   const choosenTool = assistanceToolRemoteConfig(assistanceToolConfig);
+  const insets = useSafeAreaInsets();
 
   const zendeskAssistanceLogAndStart = () => {
     resetCustomFields();
@@ -64,63 +77,92 @@ const ErrorComponent = (props: Props) => {
     }
   };
 
-  const retryButtonProps = {
+  const retryButtonProps: ButtonSolidProps = {
     testID: "FciRetryButtonTestID",
-    block: true,
-    primary: true,
     onPress: props.onPress,
-    title: I18n.t("features.fci.errors.buttons.retry")
+    fullWidth: true,
+    label: I18n.t("features.fci.errors.buttons.retry"),
+    accessibilityLabel: I18n.t("features.fci.errors.buttons.retry")
   };
 
-  const closeButtonProps = {
+  const closeButtonProps: ButtonSolidProps = {
     testID: "FciCloseButtonTestID",
-    bordered: true,
-    block: true,
     onPress: props.onPress,
-    title: I18n.t("features.fci.errors.buttons.close")
+    fullWidth: true,
+    label: I18n.t("features.fci.errors.buttons.close"),
+    accessibilityLabel: I18n.t("features.fci.errors.buttons.close")
   };
 
-  const assistanceButtonProps = {
+  const assistanceButtonProps: ButtonSolidProps = {
     testID: "FciAssistanceButtonTestID",
-    bordered: true,
-    primary: false,
-    block: true,
+    fullWidth: true,
     onPress: handleAskAssistance,
-    title: I18n.t("features.fci.errors.buttons.assistance")
+    label: I18n.t("features.fci.errors.buttons.assistance"),
+    accessibilityLabel: I18n.t("features.fci.errors.buttons.assistance")
   };
 
+  /**
+   * Render the footer buttons as vertical stacked buttons
+   * @returns {React.ReactElement}
+   */
   const footerButtons = () => {
     if (props.retry && props.assistance) {
-      return [retryButtonProps, assistanceButtonProps];
+      return (
+        <>
+          <ButtonSolid {...retryButtonProps} />
+          <VSpacer size={8} />
+          <ButtonOutline {...assistanceButtonProps} />
+        </>
+      );
     }
     if (props.retry) {
-      return [retryButtonProps, closeButtonProps];
+      return (
+        <>
+          <ButtonSolid {...retryButtonProps} />
+          <VSpacer size={8} />
+          <ButtonOutline {...closeButtonProps} />
+        </>
+      );
     }
     if (props.assistance) {
-      return [
-        {
-          ...closeButtonProps,
-          bordered: false,
-          title: I18n.t("features.fci.errors.buttons.back")
-        },
-        assistanceButtonProps
-      ];
+      return (
+        <>
+          <ButtonSolid
+            {...{
+              ...closeButtonProps,
+              label: I18n.t("features.fci.errors.buttons.back"),
+              accessibilityLabel: I18n.t("features.fci.errors.buttons.back")
+            }}
+          />
+          <VSpacer size={8} />
+          <ButtonOutline {...assistanceButtonProps} />
+        </>
+      );
     }
-    return [closeButtonProps];
+    return <ButtonOutline {...closeButtonProps} />;
   };
 
   return (
-    <BaseScreenComponent goBack={false}>
-      <SafeAreaView style={IOStyles.flex} testID={props.testID}>
-        <InfoScreenComponent
-          image={<Pictogram name={props.pictogram} />}
-          title={props.title}
-          body={props.subTitle}
-          email={props.email}
-        />
-        <FooterStackButton buttons={footerButtons()} />
-      </SafeAreaView>
-    </BaseScreenComponent>
+    <SafeAreaView
+      edges={["top", "left", "right"]}
+      style={IOStyles.flex}
+      testID={props.testID}
+    >
+      <InfoScreenComponent
+        image={<Pictogram name={props.pictogram} />}
+        title={props.title}
+        body={props.subTitle}
+        email={props.email}
+      />
+      <View
+        style={[
+          IOStyles.horizontalContentPadding,
+          { paddingBottom: Math.max(insets.bottom, DEFAULT_BOTTOM_PADDING) }
+        ]}
+      >
+        {footerButtons()}
+      </View>
+    </SafeAreaView>
   );
 };
 
diff --git a/ts/features/fci/components/InfoScreenComponent.tsx b/ts/features/fci/components/InfoScreenComponent.tsx
index 74ad818934e..eee25b6785e 100644
--- a/ts/features/fci/components/InfoScreenComponent.tsx
+++ b/ts/features/fci/components/InfoScreenComponent.tsx
@@ -1,13 +1,10 @@
 import * as React from "react";
 import { Linking, StyleSheet, Text, View } from "react-native";
 import { EmailString } from "@pagopa/ts-commons/lib/strings";
-import { VSpacer } from "@pagopa/io-app-design-system";
+import { Body, H2, LabelLink, VSpacer } from "@pagopa/io-app-design-system";
 import { useFocusEffect } from "@react-navigation/native";
 import themeVariables from "../../../theme/variables";
 import { setAccessibilityFocus } from "../../../utils/accessibility";
-import { Body } from "../../../components/core/typography/Body";
-import { H2 } from "../../../components/core/typography/H2";
-import { Link } from "../../../components/core/typography/Link";
 
 type Props = {
   image: React.ReactNode;
@@ -38,9 +35,9 @@ const renderNode = (body: string | React.ReactNode, email?: EmailString) => {
           {email && <> </>}
         </Body>
         {email && (
-          <Link onPress={() => Linking.openURL(`mailto:${email}`)}>
+          <LabelLink onPress={() => Linking.openURL(`mailto:${email}`)}>
             {email}
-          </Link>
+          </LabelLink>
         )}
       </>
     );
diff --git a/ts/features/fci/components/LinkedText.tsx b/ts/features/fci/components/LinkedText.tsx
index 959b93acb0e..dcdcc524548 100644
--- a/ts/features/fci/components/LinkedText.tsx
+++ b/ts/features/fci/components/LinkedText.tsx
@@ -1,8 +1,6 @@
 import * as React from "react";
 import * as O from "fp-ts/lib/Option";
-import { H4 } from "../../../components/core/typography/H4";
-import { Link } from "../../../components/core/typography/Link";
-import { WithTestID } from "../../../types/WithTestID";
+import { H4, H6, LabelLink, WithTestID } from "@pagopa/io-app-design-system";
 
 type Props = WithTestID<{
   text: string;
@@ -65,14 +63,14 @@ const LinkedText = (props: Props) => {
       const textToBeLinked = splitted[1];
       const url = splitted[2];
       return (
-        <Link
+        <LabelLink
           key={index}
           onPress={() =>
             onPress(getOrReplaceTagWithLink(url, props.replacementUrl))
           }
         >
           {textToBeLinked}
-        </Link>
+        </LabelLink>
       );
     };
 
@@ -91,15 +89,15 @@ const LinkedText = (props: Props) => {
       {textWithSeparator.split("$@").map((text, index) =>
         O.isSome(O.fromNullable(arrayOfLinkedText[index])) ? (
           <>
-            <H4 weight={"Regular"} color={"bluegreyDark"}>
+            <H6 weight={"Regular"} color={"bluegreyDark"}>
               {text}
-            </H4>
+            </H6>
             {arrayOfLinkedText[index]}
           </>
         ) : (
-          <H4 weight={"Regular"} color={"bluegreyDark"}>
+          <H6 weight={"Regular"} color={"bluegreyDark"}>
             {text}
-          </H4>
+          </H6>
         )
       )}
     </H4>
diff --git a/ts/features/fci/components/LoadingComponent.tsx b/ts/features/fci/components/LoadingComponent.tsx
new file mode 100644
index 00000000000..373b8d29064
--- /dev/null
+++ b/ts/features/fci/components/LoadingComponent.tsx
@@ -0,0 +1,49 @@
+import * as React from "react";
+import { SafeAreaView, StyleSheet } from "react-native";
+import { Body, H3, VSpacer, WithTestID } from "@pagopa/io-app-design-system";
+import { LoadingIndicator } from "../../../components/ui/LoadingIndicator";
+
+const styles = StyleSheet.create({
+  main: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  textAlignCenter: {
+    textAlign: "center"
+  }
+});
+
+type Props = WithTestID<
+  Readonly<{
+    captionTitle?: string;
+    captionSubtitle?: string;
+  }>
+>;
+
+/**
+ * A Component to display an animated spinner.
+ * It can be used to display a loading spinner with optionally a caption title and subtitle.
+ */
+const LoadingComponent = (props: Props) => {
+  const { captionTitle, captionSubtitle } = props;
+
+  return (
+    <SafeAreaView style={styles.main} testID={props.testID}>
+      <LoadingIndicator />
+      <VSpacer size={48} />
+      <H3 style={styles.textAlignCenter} testID="LoadingSpinnerCaptionTitleID">
+        {captionTitle}
+      </H3>
+      <VSpacer />
+      <Body
+        style={styles.textAlignCenter}
+        testID="LoadingSpinnerCaptionSubTitleID"
+      >
+        {captionSubtitle}
+      </Body>
+    </SafeAreaView>
+  );
+};
+
+export default LoadingComponent;
diff --git a/ts/features/fci/components/QtspClauseListItem.tsx b/ts/features/fci/components/QtspClauseListItem.tsx
index 2a4d02cef90..13fd38a90c2 100644
--- a/ts/features/fci/components/QtspClauseListItem.tsx
+++ b/ts/features/fci/components/QtspClauseListItem.tsx
@@ -1,12 +1,9 @@
 import * as React from "react";
 import { StyleSheet, View } from "react-native";
 import { useSelector } from "react-redux";
-import { Icon } from "@pagopa/io-app-design-system";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
-import TouchableDefaultOpacity from "../../../components/TouchableDefaultOpacity";
+import { CheckboxLabel, IOStyles } from "@pagopa/io-app-design-system";
 import { QtspClause } from "../../../../definitions/fci/QtspClause";
 import { fciQtspFilledDocumentUrlSelector } from "../store/reducers/fciQtspFilledDocument";
-import I18n from "../../../i18n";
 import LinkedText from "./LinkedText";
 
 type Props = {
@@ -39,37 +36,21 @@ const QtspClauseListItem = (props: Props) => {
   return (
     <View style={styles.container} testID="QtspClauseListItemContainerTestID">
       <View style={{ flex: 1 }} testID="QtspClauseLinkedTextTestID">
-        {
-          <LinkedText
-            text={props.clause.text}
-            replacementUrl={qtspFilledDocumentUrl}
-            onPress={onPressLinkedText}
-          />
-        }
+        <LinkedText
+          text={props.clause.text}
+          replacementUrl={qtspFilledDocumentUrl}
+          onPress={onPressLinkedText}
+        />
       </View>
       <View style={IOStyles.horizontalContentPadding} />
-      <TouchableDefaultOpacity
-        accessibilityLabel={
-          checked
-            ? I18n.t("features.fci.signatureFields.accessibility.selected")
-            : I18n.t("features.fci.signatureFields.accessibility.unselected")
-        }
-        accessibilityRole={"checkbox"}
-        testID={"QtspClauseListItemButtonTestID"}
-        onPress={() => {
+      <CheckboxLabel
+        label=""
+        checked={checked}
+        onValueChange={() => {
           onChange(!checked);
           setChecked(!checked);
         }}
-      >
-        <View style={IOStyles.column}>
-          <Icon
-            testID="QtspClauseListItemCheckboxTestID"
-            name={checked ? "legCheckOn" : "legCheckOff"}
-            color={checked ? "blue" : "bluegreyDark"}
-            size={24}
-          />
-        </View>
-      </TouchableDefaultOpacity>
+      />
     </View>
   );
 };
diff --git a/ts/features/fci/components/SignatureFieldItem.tsx b/ts/features/fci/components/SignatureFieldItem.tsx
index c7e8a1185db..79272905710 100644
--- a/ts/features/fci/components/SignatureFieldItem.tsx
+++ b/ts/features/fci/components/SignatureFieldItem.tsx
@@ -1,10 +1,11 @@
 import * as React from "react";
 import { View, StyleSheet } from "react-native";
-import { IOColors, Icon } from "@pagopa/io-app-design-system";
-import { H4 } from "../../../components/core/typography/H4";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
-import TouchableDefaultOpacity from "../../../components/TouchableDefaultOpacity";
-import { Link } from "../../../components/core/typography/Link";
+import {
+  IOColors,
+  IOStyles,
+  LabelLink,
+  ListItemCheckbox
+} from "@pagopa/io-app-design-system";
 import I18n from "../../../i18n";
 
 type Props = {
@@ -20,15 +21,13 @@ const styles = StyleSheet.create({
     paddingTop: 16,
     paddingBottom: 8,
     marginBottom: 16,
-    flexDirection: "column",
     borderBottomColor: IOColors.greyLight,
     borderBottomWidth: 1
   },
   details: {
     paddingTop: 16,
     paddingBottom: 8
-  },
-  titleMargin: { marginRight: 22, flex: 1 }
+  }
 });
 
 const SignatureFieldItem = (props: Props) => {
@@ -40,41 +39,17 @@ const SignatureFieldItem = (props: Props) => {
 
   return (
     <View style={styles.container}>
-      <View style={IOStyles.row}>
-        <H4 style={styles.titleMargin} testID="SignatureFieldItemTitleTestID">
-          {props.title}
-        </H4>
-        <TouchableDefaultOpacity
-          accessibilityRole={"checkbox"}
-          accessibilityLabel={
-            checked
-              ? I18n.t("features.fci.signatureFields.accessibility.selected")
-              : I18n.t("features.fci.signatureFields.accessibility.unselected")
-          }
-          accessibilityState={{ selected: checked }}
-          testID={"SignatureFieldItemButtonTestID"}
-          onPress={() => {
-            onChange(!checked);
-          }}
-          disabled={props.disabled}
-          style={{ alignSelf: "center" }}
-        >
-          <Icon
-            testID="SignatureFieldItemCheckboxTestID"
-            name={checked ? "legCheckOn" : "legCheckOff"}
-            color={
-              checked && !props.disabled
-                ? "blue"
-                : props.disabled
-                ? "grey"
-                : "bluegreyDark"
-            }
-            size={24}
-          />
-        </TouchableDefaultOpacity>
-      </View>
+      <ListItemCheckbox
+        value={props.title}
+        disabled={props.disabled}
+        selected={checked}
+        onValueChange={() => {
+          onChange(!checked);
+        }}
+        accessibilityLabel={props.title}
+      />
       <View style={[IOStyles.row, styles.details]}>
-        <Link
+        <LabelLink
           accessibilityLabel={I18n.t(
             "features.fci.signatureFields.showOnDocument"
           )}
@@ -86,7 +61,7 @@ const SignatureFieldItem = (props: Props) => {
           onPress={props.onPressDetail}
         >
           {I18n.t("features.fci.signatureFields.showOnDocument")}
-        </Link>
+        </LabelLink>
       </View>
     </View>
   );
diff --git a/ts/features/fci/components/SignatureRequestItem.tsx b/ts/features/fci/components/SignatureRequestItem.tsx
index 5b01e01185e..d0ecdc51e17 100644
--- a/ts/features/fci/components/SignatureRequestItem.tsx
+++ b/ts/features/fci/components/SignatureRequestItem.tsx
@@ -1,13 +1,15 @@
 import * as React from "react";
 import { View, StyleSheet } from "react-native";
-import { HSpacer } from "@pagopa/io-app-design-system";
-import { H4 } from "../../../components/core/typography/H4";
+import {
+  Badge,
+  Divider,
+  H6,
+  HSpacer,
+  LabelSmall
+} from "@pagopa/io-app-design-system";
 import { SignatureRequestListView } from "../../../../definitions/fci/SignatureRequestListView";
 import { SignatureRequestStatusEnum } from "../../../../definitions/fci/SignatureRequestStatus";
-import { IOBadge } from "../../../components/core/IOBadge";
-import { LabelSmall } from "../../../components/core/typography/LabelSmall";
 import TouchableDefaultOpacity from "../../../components/TouchableDefaultOpacity";
-import ItemSeparatorComponent from "../../../components/ItemSeparatorComponent";
 import I18n from "../../../i18n";
 
 type Props = {
@@ -29,20 +31,16 @@ const SignatureRequestItem = (props: Props) => {
     switch (item.status) {
       case SignatureRequestStatusEnum.WAIT_FOR_SIGNATURE:
         return (
-          <IOBadge
-            small
-            variant="solid"
-            color="blue"
+          <Badge
+            variant="blue"
             text={I18n.t("features.fci.requests.signingInProgress")}
             testID={"FciSignatureRequestItemBadgeInProgress"}
           />
         );
       case SignatureRequestStatusEnum.SIGNED:
         return (
-          <IOBadge
-            small
-            variant="solid"
-            color="aqua"
+          <Badge
+            variant="turquoise"
             text={I18n.t("features.fci.requests.signed")}
             testID={"FciSignatureRequestItemBadgeSigned"}
           />
@@ -50,10 +48,9 @@ const SignatureRequestItem = (props: Props) => {
       case SignatureRequestStatusEnum.WAIT_FOR_QTSP:
       default:
         return (
-          <IOBadge
-            small
-            variant="outline"
-            color="red"
+          <Badge
+            outline
+            variant="error"
             text={I18n.t("features.fci.requests.notAvailable")}
             testID={"FciSignatureRequestItemBadgeNotAvailable"}
           />
@@ -68,7 +65,7 @@ const SignatureRequestItem = (props: Props) => {
         testID={"FciSignatureRequestOnPress"}
       >
         <View style={{ flexDirection: "column", flex: 1 }}>
-          <H4>{item.dossier_title}</H4>
+          <H6>{item.dossier_title}</H6>
           <LabelSmall weight={"Regular"} color={"bluegrey"} numberOfLines={1}>
             {I18n.t("features.fci.requests.itemSubtitle", {
               date: item.created_at.toLocaleDateString(),
@@ -80,7 +77,7 @@ const SignatureRequestItem = (props: Props) => {
         <HSpacer />
         <View style={styles.badge}>{renderStatusLabel()}</View>
       </TouchableDefaultOpacity>
-      <ItemSeparatorComponent noPadded={true} />
+      <Divider />
     </View>
   );
 };
diff --git a/ts/features/fci/components/__tests__/DocumentsNavigationBar.test.tsx b/ts/features/fci/components/__tests__/DocumentsNavigationBar.test.tsx
index 5aaad148a56..7f591ee7afa 100644
--- a/ts/features/fci/components/__tests__/DocumentsNavigationBar.test.tsx
+++ b/ts/features/fci/components/__tests__/DocumentsNavigationBar.test.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 import { fireEvent, render } from "@testing-library/react-native";
-import type { IOColors } from "@pagopa/io-app-design-system";
 import DocumentsNavigationBar, {
   IndicatorPositionEnum
 } from "../DocumentsNavigationBar";
@@ -8,8 +7,8 @@ import DocumentsNavigationBar, {
 type Props = {
   titleRight: string;
   titleLeft: string;
-  iconRightColor?: IOColors;
-  iconLeftColor?: IOColors;
+  iconRightDisabled?: boolean;
+  iconLeftDisabled?: boolean;
   disabled?: boolean;
   indicatorPosition: IndicatorPositionEnum;
   onPrevious: () => void;
@@ -21,8 +20,6 @@ describe("Test DocumentsNavigationBar component", () => {
     const props: Props = {
       titleRight: "Pagina 1 di 2",
       titleLeft: "Documento 1 di 2",
-      iconRightColor: "blue",
-      iconLeftColor: "blue",
       indicatorPosition: "left",
       onPrevious: jest.fn(),
       onNext: jest.fn()
@@ -100,7 +97,7 @@ describe("Test DocumentsNavigationBar component", () => {
     const props: Props = {
       titleRight: "",
       titleLeft: "",
-      disabled: true,
+      iconRightDisabled: true,
       indicatorPosition: "left",
       onPrevious: jest.fn(),
       onNext: onPress
@@ -121,7 +118,7 @@ describe("Test DocumentsNavigationBar component", () => {
     const props: Props = {
       titleRight: "",
       titleLeft: "",
-      disabled: true,
+      iconLeftDisabled: true,
       indicatorPosition: "left",
       onPrevious: jest.fn(),
       onNext: onPress
diff --git a/ts/features/fci/components/__tests__/LoadingComponent.test.tsx b/ts/features/fci/components/__tests__/LoadingComponent.test.tsx
new file mode 100644
index 00000000000..117b6c6fba9
--- /dev/null
+++ b/ts/features/fci/components/__tests__/LoadingComponent.test.tsx
@@ -0,0 +1,47 @@
+import * as React from "react";
+import { render } from "@testing-library/react-native";
+import LoadingComponent from "../LoadingComponent";
+
+type Props = {
+  captionTitle?: string;
+  captionSubtitle?: string;
+};
+
+describe("Test LoadingComponent component", () => {
+  it("should render a LoadingComponent component with props correctly", () => {
+    const props = {
+      captionTitle: "Loading",
+      captionSubtitle: "Please wait..."
+    };
+    const component = renderComponent({ ...props });
+    expect(component).toBeTruthy();
+    expect(component).toMatchSnapshot();
+  });
+  it("should render a LoadingComponent component with the right caption title", () => {
+    const props = {
+      captionTitle: "Loading",
+      captionSubtitle: "Please wait..."
+    };
+    const component = renderComponent({ ...props });
+    expect(component).toBeTruthy();
+    expect(
+      component.queryByTestId("LoadingSpinnerCaptionTitleID")
+    ).toBeTruthy();
+    expect(component.queryByText("Loading")).toBeTruthy();
+  });
+  it("should render a LoadingComponent component with the right caption subTitle", () => {
+    const props = {
+      captionTitle: "Loading",
+      captionSubtitle: "Please wait..."
+    };
+    const component = renderComponent({ ...props });
+    expect(component).toBeTruthy();
+    expect(
+      component.queryByTestId("LoadingSpinnerCaptionSubTitleID")
+    ).toBeTruthy();
+    expect(component.queryByText("Please wait...")).toBeTruthy();
+  });
+});
+
+const renderComponent = (props: Props) =>
+  render(<LoadingComponent {...props} />);
diff --git a/ts/features/fci/components/__tests__/QtspClauseListItem.test.tsx b/ts/features/fci/components/__tests__/QtspClauseListItem.test.tsx
index c3df86f94d8..0e9250a186b 100644
--- a/ts/features/fci/components/__tests__/QtspClauseListItem.test.tsx
+++ b/ts/features/fci/components/__tests__/QtspClauseListItem.test.tsx
@@ -2,7 +2,6 @@ import * as React from "react";
 import { Store } from "redux";
 import { Provider } from "react-redux";
 import configureMockStore from "redux-mock-store";
-import { fireEvent } from "@testing-library/react-native";
 import { mockQtspClausesMetadata } from "../../types/__mocks__/QtspClausesMetadata.mock";
 import { QtspClause } from "../../../../../definitions/fci/QtspClause";
 import QtspClauseListItem from "../QtspClauseListItem";
@@ -39,6 +38,7 @@ describe("Test QtspClauseListItem component", () => {
     };
     const component = renderComponent({ ...props }, store);
     expect(component).toBeTruthy();
+    expect(component).toMatchSnapshot();
   });
   it("should render a QtspClauseListItem component with container", () => {
     const mockStore = configureMockStore<GlobalState>();
@@ -84,11 +84,11 @@ describe("Test QtspClauseListItem component", () => {
     const component = renderComponent({ ...props }, store);
     expect(component).toBeTruthy();
     expect(
-      component.getByTestId("QtspClauseListItemCheckboxTestID")
+      component.getByTestId("QtspClauseListItemContainerTestID")
     ).toBeTruthy();
-    expect(component.queryAllByText("io-checkbox-on")).toBeTruthy();
+    expect(component.queryAllByText("legCheckOn")).toBeTruthy();
   });
-  it("should render a QtspClauseListItem component with checkbox clickable", () => {
+  it("should render a QtspClauseListItem component with checkbox enabled", () => {
     const mockStore = configureMockStore<GlobalState>();
     const store: ReturnType<typeof mockStore> = mockStore(globalState);
 
@@ -101,14 +101,9 @@ describe("Test QtspClauseListItem component", () => {
     };
     const component = renderComponent({ ...props }, store);
     expect(component).toBeTruthy();
-    const rightButton = component.getByTestId("QtspClauseListItemButtonTestID");
-    expect(rightButton).toBeTruthy();
-    expect(rightButton).toBeEnabled();
-    fireEvent.press(rightButton);
-    expect(component.queryAllByText("io-checkbox-on")).toBeTruthy();
-    fireEvent.press(rightButton);
-    expect(component.queryAllByText("io-checkbox-off")).toBeTruthy();
-    expect(onPress).toHaveBeenCalledTimes(2);
+    const checkbox = component.getByTestId("AnimatedCheckbox");
+    expect(checkbox).toBeTruthy();
+    expect(checkbox).toBeEnabled();
   });
   it("should render a QtspClauseListItem component with right text for clause", () => {
     const mockStore = configureMockStore<GlobalState>();
diff --git a/ts/features/fci/components/__tests__/SignatureFieldItem.test.tsx b/ts/features/fci/components/__tests__/SignatureFieldItem.test.tsx
index 90aaeeaac08..c763f296088 100644
--- a/ts/features/fci/components/__tests__/SignatureFieldItem.test.tsx
+++ b/ts/features/fci/components/__tests__/SignatureFieldItem.test.tsx
@@ -31,7 +31,7 @@ describe("Test SignatureFieldItem component", () => {
     expect(component).toBeTruthy();
     expect(component.queryByText("Clause title 1")).toBeTruthy();
   });
-  it("should render a SignatureFieldItem component with checkbox unchecked", () => {
+  it("should render a SignatureFieldItem component with checkbox enabled", () => {
     const props = {
       title: "Clause title 1",
       onChange: jest.fn(),
@@ -39,43 +39,27 @@ describe("Test SignatureFieldItem component", () => {
     };
     const component = renderComponent({ ...props });
     expect(component).toBeTruthy();
-    expect(
-      component.getByTestId("SignatureFieldItemCheckboxTestID")
-    ).toBeTruthy();
-    expect(component.queryAllByText("io-checkbox-off")).toBeTruthy();
+    const listItemCheckbox = component.getByTestId("ListItemCheckbox");
+    expect(listItemCheckbox).toBeTruthy();
+    const checkbox = component.getByTestId("AnimatedCheckboxInput");
+    expect(checkbox).toBeTruthy();
+    expect(checkbox).toBeEnabled();
   });
-  it("should render a SignatureFieldItem component with checkbox checked", () => {
+  it("should render a SignatureFieldItem component with checkbox disabled", () => {
     const props = {
       title: "Clause title 1",
-      value: true,
+      value: false,
+      disabled: true,
       onChange: jest.fn(),
       onPressDetail: jest.fn()
     };
     const component = renderComponent({ ...props });
     expect(component).toBeTruthy();
-    expect(
-      component.getByTestId("SignatureFieldItemCheckboxTestID")
-    ).toBeTruthy();
-    expect(component.queryAllByText("io-checkbox-on")).toBeTruthy();
-  });
-  it("should render a SignatureFieldItem component with checkbox clickable", () => {
-    const onPress = jest.fn();
-    const props = {
-      title: "Clause title 1",
-      value: true,
-      onChange: onPress,
-      onPressDetail: jest.fn()
-    };
-    const component = renderComponent({ ...props });
-    expect(component).toBeTruthy();
-    const rightButton = component.getByTestId("SignatureFieldItemButtonTestID");
-    expect(rightButton).toBeTruthy();
-    expect(rightButton).toBeEnabled();
-    fireEvent.press(rightButton);
-    expect(component.queryAllByText("io-checkbox-on")).toBeTruthy();
-    fireEvent.press(rightButton);
-    expect(component.queryAllByText("io-checkbox-off")).toBeTruthy();
-    expect(onPress).toHaveBeenCalledTimes(2);
+    const listItemCheckbox = component.getByTestId("ListItemCheckbox");
+    expect(listItemCheckbox).toBeTruthy();
+    const checkbox = component.getByTestId("AnimatedCheckboxInput");
+    expect(checkbox).toBeTruthy();
+    expect(checkbox).toBeDisabled();
   });
   it("should render a SignatureFieldItem component with right text for details link", () => {
     const props = {
diff --git a/ts/features/fci/components/__tests__/__snapshots__/DocumentsNavigationBar.test.tsx.snap b/ts/features/fci/components/__tests__/__snapshots__/DocumentsNavigationBar.test.tsx.snap
index abecc0e98b7..7f74d2bf287 100644
--- a/ts/features/fci/components/__tests__/__snapshots__/DocumentsNavigationBar.test.tsx.snap
+++ b/ts/features/fci/components/__tests__/__snapshots__/DocumentsNavigationBar.test.tsx.snap
@@ -22,255 +22,267 @@ exports[`Test DocumentsNavigationBar component should render a DocumentsNavigati
         "backgroundColor": "#FFFFFF",
         "borderColor": "#CCD4DC",
         "flexDirection": "row",
-        "paddingBottom": 12,
+        "paddingBottom": 14,
         "paddingTop": 12,
       },
     ]
   }
 >
   <View
+    accessibilityLabel="previous"
     accessibilityRole="button"
     accessibilityState={
       Object {
-        "disabled": undefined,
+        "disabled": false,
       }
     }
     accessible={true}
     collapsable={false}
     focusable={true}
-    forwardedRef={[Function]}
-    hitSlop={
-      Object {
-        "bottom": 4,
-        "top": 4,
-      }
-    }
+    hitSlop={8}
+    onBlur={[Function]}
     onClick={[Function]}
+    onFocus={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
     onResponderRelease={[Function]}
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
-    style={
-      Object {
-        "alignItems": "center",
-        "alignSelf": "flex-start",
-        "backgroundColor": "transparent",
-        "borderBottomWidth": null,
-        "borderColor": "#007aff",
-        "borderLeftWidth": null,
-        "borderRadius": 5,
-        "borderRightWidth": null,
-        "borderTopWidth": null,
-        "borderWidth": undefined,
-        "elevation": 0,
-        "flexDirection": "row",
-        "height": 45,
-        "justifyContent": "space-between",
-        "opacity": 1,
-        "paddingBottom": 0,
-        "paddingLeft": 8,
-        "paddingRight": 8,
-        "paddingTop": 0,
-        "shadowColor": null,
-        "shadowOffset": null,
-        "shadowOpacity": null,
-        "shadowRadius": null,
-      }
-    }
     testID="DocumentsNavigationBarLeftButtonTestID"
   >
-    <RNSVGSvgView
-      accessibilityElementsHidden={true}
-      accessibilityLabel=""
-      accessible={true}
-      align="xMidYMid"
-      bbHeight={24}
-      bbWidth={24}
-      color={4278219750}
-      focusable={false}
-      height={24}
-      importantForAccessibility="no-hide-descendants"
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
+    <View
       style={
         Array [
           Object {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
+            "height": 24,
+            "width": 24,
           },
           Object {
-            "color": "#0073E6",
+            "alignItems": "center",
           },
           Object {
-            "flex": 0,
-            "height": 24,
-            "width": 24,
+            "justifyContent": "center",
+          },
+          Object {
+            "transform": Array [
+              Object {
+                "scale": undefined,
+              },
+            ],
           },
         ]
       }
-      tintColor={4278219750}
-      vbHeight={24}
-      vbWidth={24}
-      width={24}
     >
-      <RNSVGGroup>
-        <RNSVGPath
-          clipRule={0}
-          d="M15.7071 5.29289c-.3905-.39052-1.0237-.39052-1.4142 0L8.29289 11.2929c-.39052.3905-.39052 1.0237 0 1.4142l6.00001 6c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L10.4142 12l5.2929-5.29289c.3905-.39053.3905-1.02369 0-1.41422Z"
-          fill={
-            Array [
-              2,
-            ]
+      <RNSVGSvgView
+        accessibilityElementsHidden={true}
+        accessibilityLabel=""
+        accessible={false}
+        align="xMidYMid"
+        animatedProps={
+          Object {
+            "color": undefined,
           }
-          fillRule={0}
-          propList={
-            Array [
-              "fill",
-              "fillRule",
-            ]
+        }
+        bbHeight={24}
+        bbWidth={24}
+        focusable={false}
+        height={24}
+        importantForAccessibility="no-hide-descendants"
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "color": "#0073E6",
+            },
+            Object {
+              "flex": 0,
+              "height": 24,
+              "width": 24,
+            },
+          ]
+        }
+        tintColor="#0073E6"
+        vbHeight={24}
+        vbWidth={24}
+        width={24}
+      >
+        <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
           }
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
+        >
+          <RNSVGPath
+            clipRule={0}
+            d="M15.7071 5.29289c-.3905-.39052-1.0237-.39052-1.4142 0L8.29289 11.2929c-.39052.3905-.39052 1.0237 0 1.4142l6.00001 6c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L10.4142 12l5.2929-5.29289c.3905-.39053.3905-1.02369 0-1.41422Z"
+            fill={
+              Object {
+                "type": 2,
+              }
+            }
+            fillRule={0}
+            propList={
+              Array [
+                "fill",
+                "fillRule",
+              ]
+            }
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
   </View>
   <Text
-    color="bluegreyDark"
+    allowFontScaling={false}
+    color="black"
+    defaultColor="black"
+    defaultWeight="SemiBold"
     font="TitilliumWeb"
     fontStyle={
       Object {
-        "fontSize": 16,
-        "lineHeight": 22,
+        "fontSize": 18,
+        "lineHeight": 25,
       }
     }
     style={
       Array [
         Object {
-          "fontSize": 16,
-          "lineHeight": 22,
+          "fontSize": 18,
+          "lineHeight": 25,
         },
         Object {
-          "color": "#17324D",
+          "color": "#0E0F13",
           "fontFamily": "Titillium Web",
           "fontStyle": "normal",
-          "fontWeight": "700",
+          "fontWeight": "600",
         },
       ]
     }
-    weight="Bold"
-    weightColorFactory={[Function]}
+    weight="SemiBold"
   >
     Documento 1 di 2
   </Text>
   <View
+    accessibilityLabel="next"
     accessibilityRole="button"
     accessibilityState={
       Object {
-        "disabled": undefined,
+        "disabled": false,
       }
     }
     accessible={true}
     collapsable={false}
     focusable={true}
-    forwardedRef={[Function]}
-    hitSlop={
-      Object {
-        "bottom": 4,
-        "top": 4,
-      }
-    }
+    hitSlop={8}
+    onBlur={[Function]}
     onClick={[Function]}
+    onFocus={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
     onResponderRelease={[Function]}
     onResponderTerminate={[Function]}
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
-    style={
-      Object {
-        "alignItems": "center",
-        "alignSelf": "flex-start",
-        "backgroundColor": "transparent",
-        "borderBottomWidth": null,
-        "borderColor": "#007aff",
-        "borderLeftWidth": null,
-        "borderRadius": 5,
-        "borderRightWidth": null,
-        "borderTopWidth": null,
-        "borderWidth": undefined,
-        "elevation": 0,
-        "flexDirection": "row",
-        "height": 45,
-        "justifyContent": "space-between",
-        "opacity": 1,
-        "paddingBottom": 0,
-        "paddingLeft": 8,
-        "paddingRight": 8,
-        "paddingTop": 0,
-        "shadowColor": null,
-        "shadowOffset": null,
-        "shadowOpacity": null,
-        "shadowRadius": null,
-      }
-    }
     testID="DocumentsNavigationBarRightButtonTestID"
   >
-    <RNSVGSvgView
-      accessibilityElementsHidden={true}
-      accessibilityLabel=""
-      accessible={true}
-      align="xMidYMid"
-      bbHeight={24}
-      bbWidth={24}
-      color={4278219750}
-      focusable={false}
-      height={24}
-      importantForAccessibility="no-hide-descendants"
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
+    <View
       style={
         Array [
           Object {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
+            "height": 24,
+            "width": 24,
           },
           Object {
-            "color": "#0073E6",
+            "alignItems": "center",
           },
           Object {
-            "flex": 0,
-            "height": 24,
-            "width": 24,
+            "justifyContent": "center",
+          },
+          Object {
+            "transform": Array [
+              Object {
+                "scale": undefined,
+              },
+            ],
           },
         ]
       }
-      tintColor={4278219750}
-      vbHeight={24}
-      vbWidth={24}
-      width={24}
     >
-      <RNSVGGroup>
-        <RNSVGPath
-          clipRule={0}
-          d="M8.29289 5.29289c.39053-.39052 1.02369-.39052 1.41422 0l5.99999 6.00001c.3905.3905.3905 1.0237 0 1.4142l-5.99999 6c-.39053.3905-1.02369.3905-1.41422 0-.39052-.3905-.39052-1.0237 0-1.4142L13.5858 12 8.29289 6.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z"
-          fill={
-            Array [
-              2,
-            ]
+      <RNSVGSvgView
+        accessibilityElementsHidden={true}
+        accessibilityLabel=""
+        accessible={false}
+        align="xMidYMid"
+        animatedProps={
+          Object {
+            "color": undefined,
           }
-          fillRule={0}
-          propList={
-            Array [
-              "fill",
-              "fillRule",
-            ]
+        }
+        bbHeight={24}
+        bbWidth={24}
+        focusable={false}
+        height={24}
+        importantForAccessibility="no-hide-descendants"
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "color": "#0073E6",
+            },
+            Object {
+              "flex": 0,
+              "height": 24,
+              "width": 24,
+            },
+          ]
+        }
+        tintColor="#0073E6"
+        vbHeight={24}
+        vbWidth={24}
+        width={24}
+      >
+        <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
           }
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
+        >
+          <RNSVGPath
+            clipRule={0}
+            d="M8.29289 5.29289c.39053-.39052 1.02369-.39052 1.41422 0l5.99999 6.00001c.3905.3905.3905 1.0237 0 1.4142l-5.99999 6c-.39053.3905-1.02369.3905-1.41422 0-.39052-.3905-.39052-1.0237 0-1.4142L13.5858 12 8.29289 6.70711c-.39052-.39053-.39052-1.02369 0-1.41422Z"
+            fill={
+              Object {
+                "type": 2,
+              }
+            }
+            fillRule={0}
+            propList={
+              Array [
+                "fill",
+                "fillRule",
+              ]
+            }
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
   </View>
   <View
     style={
@@ -280,12 +292,15 @@ exports[`Test DocumentsNavigationBar component should render a DocumentsNavigati
     }
   />
   <Text
-    color="bluegreyDark"
+    allowFontScaling={false}
+    color="black"
+    defaultColor="black"
+    defaultWeight="SemiBold"
     font="TitilliumWeb"
     fontStyle={
       Object {
-        "fontSize": 16,
-        "lineHeight": 22,
+        "fontSize": 18,
+        "lineHeight": 25,
       }
     }
     style={
@@ -294,19 +309,18 @@ exports[`Test DocumentsNavigationBar component should render a DocumentsNavigati
           "paddingHorizontal": 24,
         },
         Object {
-          "fontSize": 16,
-          "lineHeight": 22,
+          "fontSize": 18,
+          "lineHeight": 25,
         },
         Object {
-          "color": "#17324D",
+          "color": "#0E0F13",
           "fontFamily": "Titillium Web",
           "fontStyle": "normal",
-          "fontWeight": "700",
+          "fontWeight": "600",
         },
       ]
     }
-    weight="Bold"
-    weightColorFactory={[Function]}
+    weight="SemiBold"
   >
     Pagina 1 di 2
   </Text>
diff --git a/ts/features/fci/components/__tests__/__snapshots__/LinkedText.test.tsx.snap b/ts/features/fci/components/__tests__/__snapshots__/LinkedText.test.tsx.snap
index 493e234a7e7..b2d98facc5c 100644
--- a/ts/features/fci/components/__tests__/__snapshots__/LinkedText.test.tsx.snap
+++ b/ts/features/fci/components/__tests__/__snapshots__/LinkedText.test.tsx.snap
@@ -2,45 +2,50 @@
 
 exports[`Test LinkedText component should render a LinkedText component with props correctly 1`] = `
 <Text
+  allowFontScaling={false}
   color="bluegreyDark"
+  defaultColor="bluegreyDark"
+  defaultWeight="SemiBold"
   font="TitilliumWeb"
   fontStyle={
     Object {
-      "fontSize": 16,
-      "lineHeight": 22,
+      "fontSize": 22,
+      "lineHeight": 30,
     }
   }
   style={
     Array [
       Object {
-        "fontSize": 16,
-        "lineHeight": 22,
+        "fontSize": 22,
+        "lineHeight": 30,
       },
       Object {
         "color": "#17324D",
         "fontFamily": "Titillium Web",
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
       },
     ]
   }
-  weight="Bold"
-  weightColorFactory={[Function]}
+  weight="SemiBold"
 >
   <Text
+    allowFontScaling={false}
     color="bluegreyDark"
+    defaultColor="black"
+    defaultWeight="SemiBold"
     font="TitilliumWeb"
     fontStyle={
       Object {
-        "fontSize": 16,
-        "lineHeight": 22,
+        "fontSize": 18,
+        "lineHeight": 25,
       }
     }
     style={
       Array [
         Object {
-          "fontSize": 16,
-          "lineHeight": 22,
+          "fontSize": 18,
+          "lineHeight": 25,
         },
         Object {
           "color": "#17324D",
@@ -51,22 +56,24 @@ exports[`Test LinkedText component should render a LinkedText component with pro
       ]
     }
     weight="Regular"
-    weightColorFactory={[Function]}
   />
   <Text
+    allowFontScaling={false}
     color="bluegreyDark"
+    defaultColor="black"
+    defaultWeight="SemiBold"
     font="TitilliumWeb"
     fontStyle={
       Object {
-        "fontSize": 16,
-        "lineHeight": 22,
+        "fontSize": 18,
+        "lineHeight": 25,
       }
     }
     style={
       Array [
         Object {
-          "fontSize": 16,
-          "lineHeight": 22,
+          "fontSize": 18,
+          "lineHeight": 25,
         },
         Object {
           "color": "#17324D",
@@ -77,24 +84,26 @@ exports[`Test LinkedText component should render a LinkedText component with pro
       ]
     }
     weight="Regular"
-    weightColorFactory={[Function]}
   >
     C
   </Text>
   <Text
+    allowFontScaling={false}
     color="bluegreyDark"
+    defaultColor="black"
+    defaultWeight="SemiBold"
     font="TitilliumWeb"
     fontStyle={
       Object {
-        "fontSize": 16,
-        "lineHeight": 22,
+        "fontSize": 18,
+        "lineHeight": 25,
       }
     }
     style={
       Array [
         Object {
-          "fontSize": 16,
-          "lineHeight": 22,
+          "fontSize": 18,
+          "lineHeight": 25,
         },
         Object {
           "color": "#17324D",
@@ -105,24 +114,26 @@ exports[`Test LinkedText component should render a LinkedText component with pro
       ]
     }
     weight="Regular"
-    weightColorFactory={[Function]}
   >
     l
   </Text>
   <Text
+    allowFontScaling={false}
     color="bluegreyDark"
+    defaultColor="black"
+    defaultWeight="SemiBold"
     font="TitilliumWeb"
     fontStyle={
       Object {
-        "fontSize": 16,
-        "lineHeight": 22,
+        "fontSize": 18,
+        "lineHeight": 25,
       }
     }
     style={
       Array [
         Object {
-          "fontSize": 16,
-          "lineHeight": 22,
+          "fontSize": 18,
+          "lineHeight": 25,
         },
         Object {
           "color": "#17324D",
@@ -133,24 +144,26 @@ exports[`Test LinkedText component should render a LinkedText component with pro
       ]
     }
     weight="Regular"
-    weightColorFactory={[Function]}
   >
     a
   </Text>
   <Text
+    allowFontScaling={false}
     color="bluegreyDark"
+    defaultColor="black"
+    defaultWeight="SemiBold"
     font="TitilliumWeb"
     fontStyle={
       Object {
-        "fontSize": 16,
-        "lineHeight": 22,
+        "fontSize": 18,
+        "lineHeight": 25,
       }
     }
     style={
       Array [
         Object {
-          "fontSize": 16,
-          "lineHeight": 22,
+          "fontSize": 18,
+          "lineHeight": 25,
         },
         Object {
           "color": "#17324D",
@@ -161,24 +174,26 @@ exports[`Test LinkedText component should render a LinkedText component with pro
       ]
     }
     weight="Regular"
-    weightColorFactory={[Function]}
   >
     u
   </Text>
   <Text
+    allowFontScaling={false}
     color="bluegreyDark"
+    defaultColor="black"
+    defaultWeight="SemiBold"
     font="TitilliumWeb"
     fontStyle={
       Object {
-        "fontSize": 16,
-        "lineHeight": 22,
+        "fontSize": 18,
+        "lineHeight": 25,
       }
     }
     style={
       Array [
         Object {
-          "fontSize": 16,
-          "lineHeight": 22,
+          "fontSize": 18,
+          "lineHeight": 25,
         },
         Object {
           "color": "#17324D",
@@ -189,24 +204,26 @@ exports[`Test LinkedText component should render a LinkedText component with pro
       ]
     }
     weight="Regular"
-    weightColorFactory={[Function]}
   >
     s
   </Text>
   <Text
+    allowFontScaling={false}
     color="bluegreyDark"
+    defaultColor="black"
+    defaultWeight="SemiBold"
     font="TitilliumWeb"
     fontStyle={
       Object {
-        "fontSize": 16,
-        "lineHeight": 22,
+        "fontSize": 18,
+        "lineHeight": 25,
       }
     }
     style={
       Array [
         Object {
-          "fontSize": 16,
-          "lineHeight": 22,
+          "fontSize": 18,
+          "lineHeight": 25,
         },
         Object {
           "color": "#17324D",
@@ -217,24 +234,26 @@ exports[`Test LinkedText component should render a LinkedText component with pro
       ]
     }
     weight="Regular"
-    weightColorFactory={[Function]}
   >
     e
   </Text>
   <Text
+    allowFontScaling={false}
     color="bluegreyDark"
+    defaultColor="black"
+    defaultWeight="SemiBold"
     font="TitilliumWeb"
     fontStyle={
       Object {
-        "fontSize": 16,
-        "lineHeight": 22,
+        "fontSize": 18,
+        "lineHeight": 25,
       }
     }
     style={
       Array [
         Object {
-          "fontSize": 16,
-          "lineHeight": 22,
+          "fontSize": 18,
+          "lineHeight": 25,
         },
         Object {
           "color": "#17324D",
@@ -245,24 +264,26 @@ exports[`Test LinkedText component should render a LinkedText component with pro
       ]
     }
     weight="Regular"
-    weightColorFactory={[Function]}
   >
      
   </Text>
   <Text
+    allowFontScaling={false}
     color="bluegreyDark"
+    defaultColor="black"
+    defaultWeight="SemiBold"
     font="TitilliumWeb"
     fontStyle={
       Object {
-        "fontSize": 16,
-        "lineHeight": 22,
+        "fontSize": 18,
+        "lineHeight": 25,
       }
     }
     style={
       Array [
         Object {
-          "fontSize": 16,
-          "lineHeight": 22,
+          "fontSize": 18,
+          "lineHeight": 25,
         },
         Object {
           "color": "#17324D",
@@ -273,24 +294,26 @@ exports[`Test LinkedText component should render a LinkedText component with pro
       ]
     }
     weight="Regular"
-    weightColorFactory={[Function]}
   >
     t
   </Text>
   <Text
+    allowFontScaling={false}
     color="bluegreyDark"
+    defaultColor="black"
+    defaultWeight="SemiBold"
     font="TitilliumWeb"
     fontStyle={
       Object {
-        "fontSize": 16,
-        "lineHeight": 22,
+        "fontSize": 18,
+        "lineHeight": 25,
       }
     }
     style={
       Array [
         Object {
-          "fontSize": 16,
-          "lineHeight": 22,
+          "fontSize": 18,
+          "lineHeight": 25,
         },
         Object {
           "color": "#17324D",
@@ -301,24 +324,26 @@ exports[`Test LinkedText component should render a LinkedText component with pro
       ]
     }
     weight="Regular"
-    weightColorFactory={[Function]}
   >
     i
   </Text>
   <Text
+    allowFontScaling={false}
     color="bluegreyDark"
+    defaultColor="black"
+    defaultWeight="SemiBold"
     font="TitilliumWeb"
     fontStyle={
       Object {
-        "fontSize": 16,
-        "lineHeight": 22,
+        "fontSize": 18,
+        "lineHeight": 25,
       }
     }
     style={
       Array [
         Object {
-          "fontSize": 16,
-          "lineHeight": 22,
+          "fontSize": 18,
+          "lineHeight": 25,
         },
         Object {
           "color": "#17324D",
@@ -329,24 +354,26 @@ exports[`Test LinkedText component should render a LinkedText component with pro
       ]
     }
     weight="Regular"
-    weightColorFactory={[Function]}
   >
     t
   </Text>
   <Text
+    allowFontScaling={false}
     color="bluegreyDark"
+    defaultColor="black"
+    defaultWeight="SemiBold"
     font="TitilliumWeb"
     fontStyle={
       Object {
-        "fontSize": 16,
-        "lineHeight": 22,
+        "fontSize": 18,
+        "lineHeight": 25,
       }
     }
     style={
       Array [
         Object {
-          "fontSize": 16,
-          "lineHeight": 22,
+          "fontSize": 18,
+          "lineHeight": 25,
         },
         Object {
           "color": "#17324D",
@@ -357,24 +384,26 @@ exports[`Test LinkedText component should render a LinkedText component with pro
       ]
     }
     weight="Regular"
-    weightColorFactory={[Function]}
   >
     l
   </Text>
   <Text
+    allowFontScaling={false}
     color="bluegreyDark"
+    defaultColor="black"
+    defaultWeight="SemiBold"
     font="TitilliumWeb"
     fontStyle={
       Object {
-        "fontSize": 16,
-        "lineHeight": 22,
+        "fontSize": 18,
+        "lineHeight": 25,
       }
     }
     style={
       Array [
         Object {
-          "fontSize": 16,
-          "lineHeight": 22,
+          "fontSize": 18,
+          "lineHeight": 25,
         },
         Object {
           "color": "#17324D",
@@ -385,24 +414,26 @@ exports[`Test LinkedText component should render a LinkedText component with pro
       ]
     }
     weight="Regular"
-    weightColorFactory={[Function]}
   >
     e
   </Text>
   <Text
+    allowFontScaling={false}
     color="bluegreyDark"
+    defaultColor="black"
+    defaultWeight="SemiBold"
     font="TitilliumWeb"
     fontStyle={
       Object {
-        "fontSize": 16,
-        "lineHeight": 22,
+        "fontSize": 18,
+        "lineHeight": 25,
       }
     }
     style={
       Array [
         Object {
-          "fontSize": 16,
-          "lineHeight": 22,
+          "fontSize": 18,
+          "lineHeight": 25,
         },
         Object {
           "color": "#17324D",
@@ -413,24 +444,26 @@ exports[`Test LinkedText component should render a LinkedText component with pro
       ]
     }
     weight="Regular"
-    weightColorFactory={[Function]}
   >
      
   </Text>
   <Text
+    allowFontScaling={false}
     color="bluegreyDark"
+    defaultColor="black"
+    defaultWeight="SemiBold"
     font="TitilliumWeb"
     fontStyle={
       Object {
-        "fontSize": 16,
-        "lineHeight": 22,
+        "fontSize": 18,
+        "lineHeight": 25,
       }
     }
     style={
       Array [
         Object {
-          "fontSize": 16,
-          "lineHeight": 22,
+          "fontSize": 18,
+          "lineHeight": 25,
         },
         Object {
           "color": "#17324D",
@@ -441,24 +474,26 @@ exports[`Test LinkedText component should render a LinkedText component with pro
       ]
     }
     weight="Regular"
-    weightColorFactory={[Function]}
   >
     1
   </Text>
   <Text
+    allowFontScaling={false}
     color="bluegreyDark"
+    defaultColor="black"
+    defaultWeight="SemiBold"
     font="TitilliumWeb"
     fontStyle={
       Object {
-        "fontSize": 16,
-        "lineHeight": 22,
+        "fontSize": 18,
+        "lineHeight": 25,
       }
     }
     style={
       Array [
         Object {
-          "fontSize": 16,
-          "lineHeight": 22,
+          "fontSize": 18,
+          "lineHeight": 25,
         },
         Object {
           "color": "#17324D",
@@ -469,7 +504,6 @@ exports[`Test LinkedText component should render a LinkedText component with pro
       ]
     }
     weight="Regular"
-    weightColorFactory={[Function]}
   />
 </Text>
 `;
diff --git a/ts/features/fci/components/__tests__/__snapshots__/LoadingComponent.test.tsx.snap b/ts/features/fci/components/__tests__/__snapshots__/LoadingComponent.test.tsx.snap
new file mode 100644
index 00000000000..167905cc47b
--- /dev/null
+++ b/ts/features/fci/components/__tests__/__snapshots__/LoadingComponent.test.tsx.snap
@@ -0,0 +1,275 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test LoadingComponent component should render a LoadingComponent component with props correctly 1`] = `
+<RCTSafeAreaView
+  style={
+    Object {
+      "alignItems": "center",
+      "flex": 1,
+      "justifyContent": "center",
+    }
+  }
+>
+  <View
+    accessibilityHint="[missing \\"en.global.accessibility.activityIndicator.hint\\" translation]"
+    accessibilityLabel="[missing \\"en.global.accessibility.activityIndicator.label\\" translation]"
+    accessibilityRole="progressbar"
+    accessible={true}
+    importantForAccessibility="no-hide-descendants"
+    style={
+      Object {
+        "height": 48,
+        "width": 48,
+      }
+    }
+    testID="LoadingIndicator"
+  >
+    <View
+      collapsable={false}
+      style={
+        Object {
+          "transform": Array [
+            Object {
+              "rotateZ": "0deg",
+            },
+          ],
+        }
+      }
+      testID="LoadingSpinnerAnimatedTestID"
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={48}
+        bbWidth={48}
+        fill="none"
+        focusable={false}
+        height={48}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "flex": 0,
+              "height": 48,
+              "width": 48,
+            },
+          ]
+        }
+        vbHeight={48}
+        vbWidth={48}
+        width={48}
+      >
+        <RNSVGGroup
+          fill={null}
+          propList={
+            Array [
+              "fill",
+            ]
+          }
+        >
+          <RNSVGDefs>
+            <RNSVGLinearGradient
+              gradient={
+                Array [
+                  0,
+                  736995,
+                  1,
+                  -16040221,
+                ]
+              }
+              gradientTransform={null}
+              gradientUnits={0}
+              name="spinner-secondHalf"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            />
+            <RNSVGLinearGradient
+              gradient={
+                Array [
+                  0,
+                  -16040221,
+                  1,
+                  -16040221,
+                ]
+              }
+              gradientTransform={null}
+              gradientUnits={0}
+              name="spinner-firstHalf"
+              x1="0%"
+              x2="100%"
+              y1="0%"
+              y2="0%"
+            />
+          </RNSVGDefs>
+          <RNSVGGroup
+            fill={
+              Object {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+            propList={
+              Array [
+                "strokeWidth",
+              ]
+            }
+            strokeWidth={5}
+          >
+            <RNSVGPath
+              d="M 2.5 24 A 21.5 21.5 0 0 1 45.5 24"
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+              propList={
+                Array [
+                  "stroke",
+                ]
+              }
+              stroke={
+                Object {
+                  "brushRef": "spinner-secondHalf",
+                  "type": 1,
+                }
+              }
+            />
+            <RNSVGPath
+              d="M 45.5 24 A 21.5 21.5 0 0 1 2.5 24"
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+              propList={
+                Array [
+                  "stroke",
+                ]
+              }
+              stroke={
+                Object {
+                  "brushRef": "spinner-firstHalf",
+                  "type": 1,
+                }
+              }
+            />
+            <RNSVGPath
+              d="M 2.5 24 A 21.5 21.5 0 0 1 2.5 22.75"
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+              propList={
+                Array [
+                  "stroke",
+                  "strokeLinecap",
+                ]
+              }
+              stroke={
+                Object {
+                  "payload": 4278927075,
+                  "type": 0,
+                }
+              }
+              strokeLinecap={1}
+            />
+          </RNSVGGroup>
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "height": 48,
+      }
+    }
+  />
+  <Text
+    allowFontScaling={false}
+    color="bluegreyDark"
+    defaultColor="bluegreyDark"
+    defaultWeight="SemiBold"
+    font="TitilliumWeb"
+    fontStyle={
+      Object {
+        "fontSize": 24,
+        "lineHeight": 34,
+      }
+    }
+    style={
+      Array [
+        Object {
+          "textAlign": "center",
+        },
+        Object {
+          "fontSize": 24,
+          "lineHeight": 34,
+        },
+        Object {
+          "color": "#17324D",
+          "fontFamily": "Titillium Web",
+          "fontStyle": "normal",
+          "fontWeight": "600",
+        },
+      ]
+    }
+    testID="LoadingSpinnerCaptionTitleID"
+    weight="SemiBold"
+  >
+    Loading
+  </Text>
+  <View
+    style={
+      Object {
+        "height": 16,
+      }
+    }
+  />
+  <Text
+    allowFontScaling={false}
+    color="bluegrey"
+    defaultColor="bluegrey"
+    defaultWeight="Regular"
+    font="TitilliumWeb"
+    fontStyle={
+      Object {
+        "fontSize": 16,
+        "lineHeight": 24,
+      }
+    }
+    style={
+      Array [
+        Object {
+          "textAlign": "center",
+        },
+        Object {
+          "fontSize": 16,
+          "lineHeight": 24,
+        },
+        Object {
+          "color": "#475A6D",
+          "fontFamily": "Titillium Web",
+          "fontStyle": "normal",
+          "fontWeight": "400",
+        },
+      ]
+    }
+    testID="LoadingSpinnerCaptionSubTitleID"
+    weight="Regular"
+  >
+    Please wait...
+  </Text>
+</RCTSafeAreaView>
+`;
diff --git a/ts/features/fci/components/__tests__/__snapshots__/QtspClauseListItem.test.tsx.snap b/ts/features/fci/components/__tests__/__snapshots__/QtspClauseListItem.test.tsx.snap
new file mode 100644
index 00000000000..ba6928c4972
--- /dev/null
+++ b/ts/features/fci/components/__tests__/__snapshots__/QtspClauseListItem.test.tsx.snap
@@ -0,0 +1,653 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test QtspClauseListItem component should render a QtspClauseListItem component with props correctly 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  FCI_QTSP_TOS
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "flexDirection": "row",
+                            "paddingBottom": 24,
+                            "paddingTop": 24,
+                          }
+                        }
+                        testID="QtspClauseListItemContainerTestID"
+                      >
+                        <View
+                          style={
+                            Object {
+                              "flex": 1,
+                            }
+                          }
+                          testID="QtspClauseLinkedTextTestID"
+                        >
+                          <Text
+                            allowFontScaling={false}
+                            color="bluegreyDark"
+                            defaultColor="bluegreyDark"
+                            defaultWeight="SemiBold"
+                            font="TitilliumWeb"
+                            fontStyle={
+                              Object {
+                                "fontSize": 22,
+                                "lineHeight": 30,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "fontSize": 22,
+                                  "lineHeight": 30,
+                                },
+                                Object {
+                                  "color": "#17324D",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "600",
+                                },
+                              ]
+                            }
+                            weight="SemiBold"
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              color="bluegreyDark"
+                              defaultColor="black"
+                              defaultWeight="SemiBold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 18,
+                                  "lineHeight": 25,
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  },
+                                  Object {
+                                    "color": "#17324D",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "400",
+                                  },
+                                ]
+                              }
+                              weight="Regular"
+                            >
+                              (1) Io sottoscritto/a dichiaro quanto indicato nel 
+                            </Text>
+                            <Text
+                              accessibilityRole="link"
+                              allowFontScaling={false}
+                              color="blue"
+                              defaultColor="blue"
+                              defaultWeight="SemiBold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 16,
+                                  "lineHeight": 24,
+                                  "textDecorationLine": "underline",
+                                }
+                              }
+                              onPress={[Function]}
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 16,
+                                    "lineHeight": 24,
+                                    "textDecorationLine": "underline",
+                                  },
+                                  Object {
+                                    "color": "#0073E6",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
+                                  },
+                                ]
+                              }
+                              weight="SemiBold"
+                            >
+                              QUADRO E - AUTOCERTIFICAZIONE E SOTTOSCRIZIONE DA PARTE DEL TITOLARE.
+                            </Text>
+                            <Text
+                              allowFontScaling={false}
+                              color="bluegreyDark"
+                              defaultColor="black"
+                              defaultWeight="SemiBold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 18,
+                                  "lineHeight": 25,
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  },
+                                  Object {
+                                    "color": "#17324D",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "400",
+                                  },
+                                ]
+                              }
+                              weight="Regular"
+                            />
+                          </Text>
+                        </View>
+                        <View
+                          style={
+                            Object {
+                              "paddingHorizontal": 24,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="checkbox"
+                          accessibilityState={
+                            Object {
+                              "checked": false,
+                              "disabled": false,
+                            }
+                          }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          needsOffscreenAlphaCompositing={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          style={
+                            Object {
+                              "alignSelf": "flex-start",
+                              "opacity": 1,
+                            }
+                          }
+                          testID="AnimatedCheckbox"
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "flexDirection": "row",
+                                },
+                                Object {
+                                  "alignItems": "center",
+                                  "width": "100%",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              pointerEvents="none"
+                              style={
+                                Object {
+                                  "alignSelf": "flex-start",
+                                }
+                              }
+                            >
+                              <View
+                                accessible={false}
+                                collapsable={false}
+                                focusable={true}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                style={
+                                  Object {
+                                    "height": 24,
+                                    "width": 24,
+                                  }
+                                }
+                                testID="AnimatedCheckboxInput"
+                              >
+                                <View
+                                  style={
+                                    Array [
+                                      Object {
+                                        "borderCurve": "continuous",
+                                        "borderRadius": 5,
+                                        "borderWidth": 2,
+                                        "height": 24,
+                                        "left": 0,
+                                        "position": "absolute",
+                                        "top": 0,
+                                        "width": 24,
+                                      },
+                                      Object {
+                                        "borderColor": "#475A6D",
+                                      },
+                                    ]
+                                  }
+                                />
+                                <View
+                                  style={
+                                    Array [
+                                      Object {
+                                        "borderCurve": "continuous",
+                                        "borderRadius": 5,
+                                        "height": 24,
+                                        "left": 0,
+                                        "position": "absolute",
+                                        "top": 0,
+                                        "width": 24,
+                                      },
+                                      Object {
+                                        "backgroundColor": "#0073E6",
+                                      },
+                                      Object {
+                                        "opacity": 0,
+                                        "transform": Array [
+                                          Object {
+                                            "scale": undefined,
+                                          },
+                                        ],
+                                      },
+                                    ]
+                                  }
+                                />
+                              </View>
+                            </View>
+                            <View
+                              style={
+                                Object {
+                                  "width": 8,
+                                }
+                              }
+                            />
+                            <Text
+                              allowFontScaling={false}
+                              color="black"
+                              defaultColor="black"
+                              defaultWeight="SemiBold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 18,
+                                  "lineHeight": 25,
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  },
+                                  Object {
+                                    "color": "#0E0F13",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
+                                  },
+                                ]
+                              }
+                              weight="SemiBold"
+                            />
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/fci/components/__tests__/__snapshots__/SignatureFieldItem.test.tsx.snap b/ts/features/fci/components/__tests__/__snapshots__/SignatureFieldItem.test.tsx.snap
index 1312c2f0e10..c545330a2c6 100644
--- a/ts/features/fci/components/__tests__/__snapshots__/SignatureFieldItem.test.tsx.snap
+++ b/ts/features/fci/components/__tests__/__snapshots__/SignatureFieldItem.test.tsx.snap
@@ -6,7 +6,6 @@ exports[`Test SignatureFieldItem component should render a SignatureFieldItem co
     Object {
       "borderBottomColor": "#E6E9F2",
       "borderBottomWidth": 1,
-      "flexDirection": "column",
       "marginBottom": 16,
       "paddingBottom": 8,
       "paddingTop": 16,
@@ -14,126 +13,193 @@ exports[`Test SignatureFieldItem component should render a SignatureFieldItem co
   }
 >
   <View
-    style={
+    accessibilityLabel="Clause title 1"
+    accessibilityRole="checkbox"
+    accessibilityState={
       Object {
-        "flexDirection": "row",
+        "checked": 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]}
+    onTouchEnd={[Function]}
+    testID="ListItemCheckbox"
   >
-    <Text
-      color="bluegreyDark"
-      font="TitilliumWeb"
-      fontStyle={
-        Object {
-          "fontSize": 16,
-          "lineHeight": 22,
-        }
-      }
+    <View
+      needsOffscreenAlphaCompositing={true}
       style={
         Array [
           Object {
-            "flex": 1,
-            "marginRight": 22,
+            "marginHorizontal": -24,
+            "paddingHorizontal": 24,
+            "paddingVertical": 12,
           },
           Object {
-            "fontSize": 16,
-            "lineHeight": 22,
+            "backgroundColor": undefined,
           },
           Object {
-            "color": "#17324D",
-            "fontFamily": "Titillium Web",
-            "fontStyle": "normal",
-            "fontWeight": "700",
+            "opacity": 1,
           },
         ]
       }
-      testID="SignatureFieldItemTitleTestID"
-      weight="Bold"
-      weightColorFactory={[Function]}
-    >
-      Clause title 1
-    </Text>
-    <View
-      accessibilityLabel="Field not selected"
-      accessibilityRole="checkbox"
-      accessibilityState={
-        Object {
-          "selected": false,
-        }
-      }
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Object {
-          "alignSelf": "center",
-          "opacity": 1,
-        }
-      }
-      testID="SignatureFieldItemButtonTestID"
     >
-      <RNSVGSvgView
-        accessibilityElementsHidden={true}
-        accessibilityLabel=""
-        accessible={false}
-        align="xMidYMid"
-        bbHeight={24}
-        bbWidth={24}
-        color={4279710285}
-        focusable={false}
-        height={24}
-        importantForAccessibility="no-hide-descendants"
-        meetOrSlice={0}
-        minX={0}
-        minY={0}
+      <View
         style={
-          Array [
-            Object {
-              "backgroundColor": "transparent",
-              "borderWidth": 0,
-            },
-            Object {
-              "color": "#17324D",
-            },
-            Object {
-              "flex": 0,
-              "height": 24,
-              "width": 24,
-            },
-          ]
+          Object {
+            "transform": Array [
+              Object {
+                "scale": undefined,
+              },
+            ],
+          }
         }
-        testID="SignatureFieldItemCheckboxTestID"
-        tintColor={4279710285}
-        vbHeight={22}
-        vbWidth={22}
-        width={24}
       >
-        <RNSVGGroup>
-          <RNSVGPath
-            clipRule={0}
-            d="M19.25 0H2.75C1.23122 0 0 1.23122 0 2.75v16.5C0 20.7688 1.23122 22 2.75 22h16.5c1.5188 0 2.75-1.2312 2.75-2.75V2.75C22 1.23122 20.7688 0 19.25 0ZM1.83333 2.75c0-.50626.41041-.91667.91667-.91667h16.5c.5063 0 .9167.41041.9167.91667v16.5c0 .5063-.4104.9167-.9167.9167H2.75c-.50626 0-.91667-.4104-.91667-.9167V2.75Z"
-            fill={
-              Array [
-                2,
-              ]
+        <View
+          style={
+            Object {
+              "alignItems": "flex-start",
+              "flexDirection": "row",
+              "justifyContent": "space-between",
             }
-            fillRule={0}
-            propList={
+          }
+        >
+          <View
+            style={
               Array [
-                "fill",
-                "fillRule",
+                Object {
+                  "flexDirection": "row",
+                },
+                Object {
+                  "flexShrink": 1,
+                },
               ]
             }
+          >
+            <Text
+              allowFontScaling={false}
+              color="black"
+              defaultColor="black"
+              defaultWeight="SemiBold"
+              font="TitilliumWeb"
+              fontStyle={
+                Object {
+                  "fontSize": 18,
+                  "lineHeight": 25,
+                }
+              }
+              style={
+                Array [
+                  Object {
+                    "flexShrink": 1,
+                  },
+                  Object {
+                    "fontSize": 18,
+                    "lineHeight": 25,
+                  },
+                  Object {
+                    "color": "#0E0F13",
+                    "fontFamily": "Titillium Web",
+                    "fontStyle": "normal",
+                    "fontWeight": "600",
+                  },
+                ]
+              }
+              weight="SemiBold"
+            >
+              Clause title 1
+            </Text>
+          </View>
+          <View
+            style={
+              Object {
+                "width": 8,
+              }
+            }
           />
-        </RNSVGGroup>
-      </RNSVGSvgView>
+          <View
+            pointerEvents="none"
+          >
+            <View
+              accessible={false}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                Object {
+                  "height": 24,
+                  "width": 24,
+                }
+              }
+              testID="AnimatedCheckboxInput"
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "borderCurve": "continuous",
+                      "borderRadius": 5,
+                      "borderWidth": 2,
+                      "height": 24,
+                      "left": 0,
+                      "position": "absolute",
+                      "top": 0,
+                      "width": 24,
+                    },
+                    Object {
+                      "borderColor": "#475A6D",
+                    },
+                  ]
+                }
+              />
+              <View
+                style={
+                  Array [
+                    Object {
+                      "borderCurve": "continuous",
+                      "borderRadius": 5,
+                      "height": 24,
+                      "left": 0,
+                      "position": "absolute",
+                      "top": 0,
+                      "width": 24,
+                    },
+                    Object {
+                      "backgroundColor": "#0073E6",
+                    },
+                    Object {
+                      "opacity": 0,
+                      "transform": Array [
+                        Object {
+                          "scale": undefined,
+                        },
+                      ],
+                    },
+                  ]
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
     </View>
   </View>
   <View
@@ -153,6 +219,7 @@ exports[`Test SignatureFieldItem component should render a SignatureFieldItem co
       accessibilityHint="Go to the page that displays the signature field"
       accessibilityLabel="See on document"
       accessibilityRole="link"
+      allowFontScaling={false}
       color="blue"
       defaultColor="blue"
       defaultWeight="SemiBold"
@@ -160,6 +227,7 @@ exports[`Test SignatureFieldItem component should render a SignatureFieldItem co
       fontStyle={
         Object {
           "fontSize": 16,
+          "lineHeight": 24,
           "textDecorationLine": "underline",
         }
       }
@@ -168,6 +236,7 @@ exports[`Test SignatureFieldItem component should render a SignatureFieldItem co
         Array [
           Object {
             "fontSize": 16,
+            "lineHeight": 24,
             "textDecorationLine": "underline",
           },
           Object {
diff --git a/ts/features/fci/hooks/useFciAbortSignatureFlow.tsx b/ts/features/fci/hooks/useFciAbortSignatureFlow.tsx
index 879be9d8417..39138093c9d 100644
--- a/ts/features/fci/hooks/useFciAbortSignatureFlow.tsx
+++ b/ts/features/fci/hooks/useFciAbortSignatureFlow.tsx
@@ -1,26 +1,21 @@
 import * as React from "react";
-import { StyleSheet, View } from "react-native";
+import { Alert, View } from "react-native";
 import { useRoute } from "@react-navigation/native";
-import { useLegacyIOBottomSheetModal } from "../../../utils/hooks/bottomSheet";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
-import { H3 } from "../../../components/core/typography/H3";
-import FooterWithButtons from "../../../components/ui/FooterWithButtons";
+import {
+  BlockButtons,
+  ButtonSolidProps,
+  IOVisualCostants,
+  useIOExperimentalDesign
+} from "@pagopa/io-app-design-system";
 import I18n from "../../../i18n";
-import customVariables from "../../../theme/variables";
-import { errorButtonProps } from "../../../components/buttons/ButtonConfigurations";
 import { fciEndRequest } from "../store/actions";
 import { useIODispatch, useIOSelector } from "../../../store/hooks";
 import { trackFciUserExit } from "../analytics";
 import { fciSignatureRequestDossierTitleSelector } from "../store/reducers/fciSignatureRequest";
-import Markdown from "../../../components/ui/Markdown";
+import LegacyMarkdown from "../../../components/ui/Markdown/LegacyMarkdown";
+import { useIOBottomSheetModal } from "../../../utils/hooks/bottomSheet";
 import { fciEnvironmentSelector } from "../store/reducers/fciEnvironment";
 
-const styles = StyleSheet.create({
-  verticalPad: {
-    paddingVertical: customVariables.spacerHeight
-  }
-});
-
 /**
  * A hook that returns a function to present the abort signature flow bottom sheet
  */
@@ -29,37 +24,75 @@ export const useFciAbortSignatureFlow = () => {
   const route = useRoute();
   const dossierTitle = useIOSelector(fciSignatureRequestDossierTitleSelector);
   const fciEnvironment = useIOSelector(fciEnvironmentSelector);
-  const { present, bottomSheet, dismiss } = useLegacyIOBottomSheetModal(
-    <View style={styles.verticalPad}>
-      <Markdown>
+  const { isExperimental } = useIOExperimentalDesign();
+
+  /**
+   * Callback function to abort the signature flow.
+   */
+  const abortSignatureFlow = () => {
+    trackFciUserExit(route.name, fciEnvironment);
+    dispatch(fciEndRequest());
+    dismiss();
+  };
+
+  const cancelButtonProps: ButtonSolidProps = {
+    testID: "FciStopAbortingSignatureTestID",
+    onPress: () => dismiss(),
+    label: I18n.t("features.fci.abort.confirm"),
+    accessibilityLabel: I18n.t("features.fci.abort.confirm")
+  };
+  const continueButtonProps: ButtonSolidProps = {
+    onPress: () => abortSignatureFlow(),
+    color: "danger",
+    label: I18n.t("features.fci.abort.cancel"),
+    accessibilityLabel: I18n.t("features.fci.abort.cancel")
+  };
+
+  const {
+    present: presentBs,
+    bottomSheet,
+    dismiss
+  } = useIOBottomSheetModal({
+    title: I18n.t("features.fci.abort.title"),
+    component: (
+      <LegacyMarkdown>
         {I18n.t("features.fci.abort.content", { dossierTitle })}
-      </Markdown>
-    </View>,
-    <View style={IOStyles.flex}>
-      <H3 color={"bluegreyDark"} weight={"SemiBold"}>
-        {I18n.t("features.fci.abort.title")}
-      </H3>
-    </View>,
-    280,
-    <FooterWithButtons
-      type={"TwoButtonsInlineHalf"}
-      leftButton={{
-        testID: "FciStopAbortingSignatureTestID",
-        onPressWithGestureHandler: true,
-        bordered: true,
-        onPress: () => dismiss(),
-        title: I18n.t("features.fci.abort.confirm")
-      }}
-      rightButton={{
-        ...errorButtonProps(() => {
-          trackFciUserExit(route.name, fciEnvironment);
-          dispatch(fciEndRequest());
-          dismiss();
-        }, I18n.t("features.fci.abort.cancel")),
-        onPressWithGestureHandler: true
-      }}
-    />
-  );
+      </LegacyMarkdown>
+    ),
+    snapPoint: [280],
+    footer: (
+      <View style={{ paddingHorizontal: IOVisualCostants.appMarginDefault }}>
+        <BlockButtons
+          type={"TwoButtonsInlineHalf"}
+          primary={{ type: "Outline", buttonProps: cancelButtonProps }}
+          secondary={{ type: "Solid", buttonProps: continueButtonProps }}
+        />
+      </View>
+    )
+  });
+
+  /**
+   * Show an alert to confirm the abort signature flow.
+   */
+  const showAlert = () => {
+    Alert.alert(I18n.t("features.fci.abort.alert.title"), undefined, [
+      {
+        text: I18n.t("features.fci.abort.alert.cancel"),
+        style: "cancel"
+      },
+      {
+        text: I18n.t("features.fci.abort.alert.confirm"),
+        onPress: () => abortSignatureFlow()
+      }
+    ]);
+  };
+
+  /**
+   * Overrides the present function of the bottom sheet to show an alert instead if the experimental design is enabled.
+   * This allows us to use an alert without changing single components which use the hook.
+   * TODO: remove when the experimental design will be enabled by default (SFEQS-2090)
+   */
+  const present = () => (isExperimental ? showAlert() : presentBs());
 
   return {
     dismiss,
diff --git a/ts/features/fci/hooks/useFciCheckService.tsx b/ts/features/fci/hooks/useFciCheckService.tsx
index 0a17fab5a47..b4d2ca6f994 100644
--- a/ts/features/fci/hooks/useFciCheckService.tsx
+++ b/ts/features/fci/hooks/useFciCheckService.tsx
@@ -1,30 +1,22 @@
 import * as React from "react";
-import { StyleSheet, View } from "react-native";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { useLegacyIOBottomSheetModal } from "../../../utils/hooks/bottomSheet";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
-import { H3 } from "../../../components/core/typography/H3";
-import FooterWithButtons from "../../../components/ui/FooterWithButtons";
+import {
+  Body,
+  ButtonSolidProps,
+  FooterWithButtons
+} from "@pagopa/io-app-design-system";
 import I18n from "../../../i18n";
-import customVariables from "../../../theme/variables";
-import { confirmButtonProps } from "../../../components/buttons/ButtonConfigurations";
-import { H4 } from "../../../components/core/typography/H4";
 import { useIODispatch, useIOSelector } from "../../../store/hooks";
 import { fciStartSigningRequest } from "../store/actions";
-import { upsertServicePreference } from "../../../store/actions/services/servicePreference";
+import { upsertServicePreference } from "../../services/store/actions";
 import { ServiceId } from "../../../../definitions/backend/ServiceId";
-import { isServicePreferenceResponseSuccess } from "../../../types/services/ServicePreferenceResponse";
-import { servicePreferenceSelector } from "../../../store/reducers/entities/services/servicePreference";
+import { isServicePreferenceResponseSuccess } from "../../services/types/ServicePreferenceResponse";
+import { servicePreferenceSelector } from "../../services/store/reducers/servicePreference";
 import { fciMetadataServiceIdSelector } from "../store/reducers/fciMetadata";
 import { trackFciUxConversion } from "../analytics";
+import { useIOBottomSheetModal } from "../../../utils/hooks/bottomSheet";
 import { fciEnvironmentSelector } from "../store/reducers/fciEnvironment";
 
-const styles = StyleSheet.create({
-  verticalPad: {
-    paddingVertical: customVariables.spacerHeight
-  }
-});
-
 /**
  * A hook that returns a function to present the abort signature flow bottom sheet
  */
@@ -34,50 +26,55 @@ export const useFciCheckService = () => {
   const servicePreference = useIOSelector(servicePreferenceSelector);
   const fciEnvironment = useIOSelector(fciEnvironmentSelector);
   const servicePreferenceValue = pot.getOrElse(servicePreference, undefined);
-  const { present, bottomSheet, dismiss } = useLegacyIOBottomSheetModal(
-    <View style={styles.verticalPad}>
-      <H4 weight={"Regular"}>{I18n.t("features.fci.checkService.content")}</H4>
-    </View>,
-    <View style={IOStyles.flex}>
-      <H3 color={"bluegreyDark"} weight={"SemiBold"}>
-        {I18n.t("features.fci.checkService.title")}
-      </H3>
-    </View>,
-    280,
-    <FooterWithButtons
-      type={"TwoButtonsInlineThird"}
-      leftButton={{
-        onPressWithGestureHandler: true,
-        bordered: true,
-        onPress: () => {
-          dispatch(fciStartSigningRequest());
-          dismiss();
-        },
-        title: I18n.t("features.fci.checkService.cancel")
-      }}
-      rightButton={{
-        ...confirmButtonProps(() => {
-          if (
-            fciServiceId &&
-            servicePreferenceValue &&
-            isServicePreferenceResponseSuccess(servicePreferenceValue)
-          ) {
-            const sp = { ...servicePreferenceValue.value, inbox: true };
-            dispatch(
-              upsertServicePreference.request({
-                id: fciServiceId as ServiceId,
-                ...sp
-              })
-            );
-          }
-          trackFciUxConversion(fciEnvironment);
-          dispatch(fciStartSigningRequest());
-          dismiss();
-        }, I18n.t("features.fci.checkService.confirm")),
-        onPressWithGestureHandler: true
-      }}
-    />
-  );
+  const cancelButtonProps: ButtonSolidProps = {
+    onPress: () => {
+      dispatch(fciStartSigningRequest());
+      dismiss();
+    },
+    label: I18n.t("features.fci.checkService.cancel"),
+    accessibilityLabel: I18n.t("features.fci.checkService.cancel")
+  };
+  const confirmButtonProps: ButtonSolidProps = {
+    onPress: () => {
+      if (
+        fciServiceId &&
+        servicePreferenceValue &&
+        isServicePreferenceResponseSuccess(servicePreferenceValue)
+      ) {
+        const sp = { ...servicePreferenceValue.value, inbox: true };
+        dispatch(
+          upsertServicePreference.request({
+            id: fciServiceId as ServiceId,
+            ...sp
+          })
+        );
+      }
+      trackFciUxConversion(fciEnvironment);
+      dispatch(fciStartSigningRequest());
+      dismiss();
+    },
+    label: I18n.t("features.fci.checkService.confirm"),
+    accessibilityLabel: I18n.t("features.fci.checkService.confirm")
+  };
+  const { present, bottomSheet, dismiss } = useIOBottomSheetModal({
+    component: (
+      <Body weight={"Regular"}>
+        {I18n.t("features.fci.checkService.content")}
+      </Body>
+    ),
+    title: I18n.t("features.fci.checkService.title"),
+    snapPoint: [320],
+    footer: (
+      <FooterWithButtons
+        type={"TwoButtonsInlineThird"}
+        primary={{
+          type: "Outline",
+          buttonProps: cancelButtonProps
+        }}
+        secondary={{ type: "Solid", buttonProps: confirmButtonProps }}
+      />
+    )
+  });
 
   return {
     dismiss,
diff --git a/ts/features/fci/hooks/useFciNoSignatureFields.tsx b/ts/features/fci/hooks/useFciNoSignatureFields.tsx
index 50081e4afe8..894ac25a2b7 100644
--- a/ts/features/fci/hooks/useFciNoSignatureFields.tsx
+++ b/ts/features/fci/hooks/useFciNoSignatureFields.tsx
@@ -1,80 +1,79 @@
-import * as React from "react";
-import { StyleSheet, View } from "react-native";
-import { StackActions, useNavigation } from "@react-navigation/native";
+import {
+  Body,
+  ButtonSolidProps,
+  FooterWithButtons
+} from "@pagopa/io-app-design-system";
+import { StackActions } from "@react-navigation/native";
 import { increment } from "fp-ts/lib/function";
-import { useLegacyIOBottomSheetModal } from "../../../utils/hooks/bottomSheet";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
-import { H3 } from "../../../components/core/typography/H3";
-import FooterWithButtons from "../../../components/ui/FooterWithButtons";
+import * as React from "react";
 import I18n from "../../../i18n";
-import customVariables from "../../../theme/variables";
-import { confirmButtonProps } from "../../../components/buttons/ButtonConfigurations";
-import { H4 } from "../../../components/core/typography/H4";
-import { FCI_ROUTES } from "../navigation/routes";
-import { fciSignatureDetailDocumentsSelector } from "../store/reducers/fciSignatureRequest";
+import { useIONavigation } from "../../../navigation/params/AppParamsList";
 import { useIOSelector } from "../../../store/hooks";
+import { useIOBottomSheetModal } from "../../../utils/hooks/bottomSheet";
 import { trackFciStartSignature } from "../analytics";
+import { FCI_ROUTES } from "../navigation/routes";
 import { fciEnvironmentSelector } from "../store/reducers/fciEnvironment";
+import { fciSignatureDetailDocumentsSelector } from "../store/reducers/fciSignatureRequest";
 
 type Props = {
   currentDoc: number;
 };
 
-const styles = StyleSheet.create({
-  verticalPad: {
-    paddingVertical: customVariables.spacerHeight
-  }
-});
-
 /**
  * A hook that returns a function to present the abort signature flow bottom sheet
  */
 export const useFciNoSignatureFields = (props: Props) => {
-  const navigation = useNavigation();
+  const navigation = useIONavigation();
   const documents = useIOSelector(fciSignatureDetailDocumentsSelector);
   const fciEnvironment = useIOSelector(fciEnvironmentSelector);
   const { currentDoc } = props;
-  const { present, bottomSheet, dismiss } = useLegacyIOBottomSheetModal(
-    <View style={styles.verticalPad}>
-      <H4 weight={"Regular"}>{I18n.t("features.fci.noFields.content")}</H4>
-    </View>,
-    <View style={IOStyles.flex}>
-      <H3 color={"bluegreyDark"} weight={"SemiBold"}>
-        {I18n.t("features.fci.noFields.title")}
-      </H3>
-    </View>,
-    280,
-    <FooterWithButtons
-      type={"TwoButtonsInlineThird"}
-      leftButton={{
-        onPressWithGestureHandler: true,
-        bordered: true,
-        onPress: () => {
-          dismiss();
-        },
-        title: I18n.t("features.fci.noFields.leftButton")
-      }}
-      rightButton={{
-        ...confirmButtonProps(() => {
-          dismiss();
-          if (currentDoc < documents.length - 1) {
-            navigation.dispatch(
-              StackActions.push(FCI_ROUTES.DOCUMENTS, {
-                attrs: undefined,
-                currentDoc: increment(currentDoc)
-              })
-            );
-          } else {
-            trackFciStartSignature(fciEnvironment);
-            navigation.navigate(FCI_ROUTES.MAIN, {
-              screen: FCI_ROUTES.USER_DATA_SHARE
-            });
-          }
-        }, I18n.t("features.fci.noFields.rightButton")),
-        onPressWithGestureHandler: true
-      }}
-    />
-  );
+  const readButtonProps: ButtonSolidProps = {
+    onPress: () => {
+      dismiss();
+    },
+    label: I18n.t("features.fci.noFields.leftButton"),
+    accessibilityLabel: I18n.t("features.fci.noFields.leftButton")
+  };
+  const confirmButtonProps: ButtonSolidProps = {
+    onPress: () => {
+      dismiss();
+      if (currentDoc < documents.length - 1) {
+        navigation.dispatch(
+          StackActions.push(FCI_ROUTES.DOCUMENTS, {
+            attrs: undefined,
+            currentDoc: increment(currentDoc)
+          })
+        );
+      } else {
+        trackFciStartSignature(fciEnvironment);
+        navigation.navigate(FCI_ROUTES.MAIN, {
+          screen: FCI_ROUTES.USER_DATA_SHARE
+        });
+      }
+    },
+    label: I18n.t("features.fci.noFields.rightButton"),
+    accessibilityLabel: I18n.t("features.fci.noFields.rightButton")
+  };
+  const { present, bottomSheet, dismiss } = useIOBottomSheetModal({
+    component: (
+      <Body weight={"Regular"}>{I18n.t("features.fci.noFields.content")}</Body>
+    ),
+    title: I18n.t("features.fci.noFields.title"),
+    snapPoint: [280],
+    footer: (
+      <FooterWithButtons
+        type={"TwoButtonsInlineThird"}
+        primary={{
+          type: "Outline",
+          buttonProps: readButtonProps
+        }}
+        secondary={{
+          type: "Solid",
+          buttonProps: confirmButtonProps
+        }}
+      />
+    )
+  });
 
   return {
     dismiss,
diff --git a/ts/features/fci/navigation/FciStackNavigator.tsx b/ts/features/fci/navigation/FciStackNavigator.tsx
index a5a3dd107f7..d4e56846eab 100644
--- a/ts/features/fci/navigation/FciStackNavigator.tsx
+++ b/ts/features/fci/navigation/FciStackNavigator.tsx
@@ -1,21 +1,22 @@
-import * as React from "react";
 import { PathConfigMap } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
+import * as React from "react";
+import { AppParamsList } from "../../../navigation/params/AppParamsList";
 import { isGestureEnabled } from "../../../utils/navigation";
-import FciDocumentsScreen from "../screens/valid/FciDocumentsScreen";
 import FciRouterScreen from "../screens/FciRouterScreen";
-import FciSignatureFieldsScreen from "../screens/valid/FciSignatureFieldsScreen";
 import FciDataSharingScreen from "../screens/valid/FciDataSharingScreen";
-import FciQtspClausesScreen from "../screens/valid/FciQtspClausesScreen";
-import FciThankyouScreen from "../screens/valid/FciThankyouScreen";
 import { FciDocumentPreviewScreen } from "../screens/valid/FciDocumentPreviewScreen";
+import FciDocumentsScreen from "../screens/valid/FciDocumentsScreen";
+import FciQtspClausesScreen from "../screens/valid/FciQtspClausesScreen";
+import FciSignatureFieldsScreen from "../screens/valid/FciSignatureFieldsScreen";
 import FciSignatureRequestsScreen from "../screens/valid/FciSignatureRequestsScreen";
-import { FCI_ROUTES } from "./routes";
+import FciThankyouScreen from "../screens/valid/FciThankyouScreen";
 import { FciParamsList } from "./params";
+import { FCI_ROUTES } from "./routes";
 
 const Stack = createStackNavigator<FciParamsList>();
 
-export const fciLinkingOptions: PathConfigMap = {
+export const fciLinkingOptions: PathConfigMap<AppParamsList> = {
   [FCI_ROUTES.MAIN]: {
     path: "fci",
     screens: {
@@ -28,10 +29,15 @@ export const fciLinkingOptions: PathConfigMap = {
 export const FciStackNavigator = () => (
   <Stack.Navigator
     initialRouteName={FCI_ROUTES.ROUTER}
-    headerMode={"none"}
-    screenOptions={{ gestureEnabled: isGestureEnabled }}
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerMode: "screen" }}
   >
-    <Stack.Screen name={FCI_ROUTES.ROUTER} component={FciRouterScreen} />
+    <Stack.Screen
+      name={FCI_ROUTES.ROUTER}
+      component={FciRouterScreen}
+      options={{
+        headerShown: false
+      }}
+    />
     <Stack.Screen name={FCI_ROUTES.DOCUMENTS} component={FciDocumentsScreen} />
     <Stack.Screen
       name={FCI_ROUTES.SIGNATURE_FIELDS}
@@ -42,7 +48,13 @@ export const FciStackNavigator = () => (
       component={FciDataSharingScreen}
     />
     <Stack.Screen name={FCI_ROUTES.QTSP_TOS} component={FciQtspClausesScreen} />
-    <Stack.Screen name={FCI_ROUTES.TYP} component={FciThankyouScreen} />
+    <Stack.Screen
+      name={FCI_ROUTES.TYP}
+      component={FciThankyouScreen}
+      options={{
+        headerShown: false
+      }}
+    />
     <Stack.Screen
       name={FCI_ROUTES.DOC_PREVIEW}
       component={FciDocumentPreviewScreen}
diff --git a/ts/features/fci/saga/__tests__/handleDrawSignatureBox.test.ts b/ts/features/fci/saga/__tests__/handleDrawSignatureBox.test.ts
index 7d8f6870b2e..767266cab46 100644
--- a/ts/features/fci/saga/__tests__/handleDrawSignatureBox.test.ts
+++ b/ts/features/fci/saga/__tests__/handleDrawSignatureBox.test.ts
@@ -58,7 +58,7 @@ describe("handleDrawSignatureBox", () => {
         fciDocumentSignatureFields.success({
           ...cachedState,
           drawnBase64: newState.drawnBase64,
-          signaturePage: newState.signaturePage
+          signaturePage: newState.signaturePage + 1 // pdf-lib pages are 0-based but react-native-pdf pages are 1-based
         })
       )
       .run();
@@ -83,7 +83,12 @@ describe("handleDrawSignatureBox", () => {
           }
         ]
       ])
-      .put(fciDocumentSignatureFields.success(newState))
+      .put(
+        fciDocumentSignatureFields.success({
+          ...newState,
+          signaturePage: newState.signaturePage + 1 // pdf-lib pages are 0-based but react-native-pdf pages are 1-based
+        })
+      )
       .run();
   });
 
diff --git a/ts/features/fci/saga/handleDrawSignatureBox.ts b/ts/features/fci/saga/handleDrawSignatureBox.ts
index 2f8f70c8616..d77eb86c653 100644
--- a/ts/features/fci/saga/handleDrawSignatureBox.ts
+++ b/ts/features/fci/saga/handleDrawSignatureBox.ts
@@ -28,7 +28,8 @@ export function* handleDrawSignatureBox(
       yield* put(
         fciDocumentSignatureFields.success({
           ...state.value,
-          ...res
+          drawnBase64: res.drawnBase64,
+          signaturePage: res.signaturePage + 1 // pdf-lib pages are 0-based but react-native-pdf pages are 1-based
         })
       );
     } else {
@@ -42,7 +43,8 @@ export function* handleDrawSignatureBox(
         fciDocumentSignatureFields.success({
           rawBase64,
           uri: action.payload.uri,
-          ...res
+          drawnBase64: res.drawnBase64,
+          signaturePage: res.signaturePage + 1 // pdf-lib pages are 0-based but react-native-pdf pages are 1-based
         })
       );
     }
diff --git a/ts/features/fci/screens/FciRouterScreen.tsx b/ts/features/fci/screens/FciRouterScreen.tsx
index 9d9bc6eadd8..5de3fe04fad 100644
--- a/ts/features/fci/screens/FciRouterScreen.tsx
+++ b/ts/features/fci/screens/FciRouterScreen.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { constNull, pipe } from "fp-ts/lib/function";
+import { pipe } from "fp-ts/lib/function";
 import * as pot from "@pagopa/ts-commons/lib/pot";
 import * as E from "fp-ts/lib/Either";
 import * as O from "fp-ts/lib/Option";
@@ -11,7 +11,6 @@ import { useIODispatch, useIOSelector } from "../../../store/hooks";
 import { FciParamsList } from "../navigation/params";
 import { fciEndRequest, fciSignatureRequestFromId } from "../store/actions";
 import { fciSignatureRequestSelector } from "../store/reducers/fciSignatureRequest";
-import { LoadingErrorComponent } from "../../../components/LoadingErrorComponent";
 import SuccessComponent from "../components/SuccessComponent";
 import GenericErrorComponent from "../components/GenericErrorComponent";
 import { withValidatedEmail } from "../../../components/helpers/withValidatedEmail";
@@ -24,6 +23,7 @@ import {
 } from "../../../utils/errors";
 import { ProblemJson } from "../../../../definitions/fci/ProblemJson";
 import ErrorComponent from "../components/ErrorComponent";
+import LoadingComponent from "../components/LoadingComponent";
 
 export type FciRouterScreenNavigationParams = Readonly<{
   signatureRequestId: SignatureRequestDetailView["id"];
@@ -57,13 +57,8 @@ const FciSignatureScreen = (
     );
   }
 
-  const LoadingComponent = () => (
-    <LoadingErrorComponent
-      isLoading={true}
-      loadingCaption={""}
-      onRetry={constNull}
-      testID={"FciRouterLoadingScreenTestID"}
-    />
+  const LoadingView = () => (
+    <LoadingComponent testID={"FciRouterLoadingScreenTestID"} />
   );
 
   const GenericError = (status?: ProblemJson["status"]) => {
@@ -110,13 +105,13 @@ const FciSignatureScreen = (
 
   return pot.fold(
     fciSignatureRequest,
-    () => <LoadingComponent />,
-    () => <LoadingComponent />,
-    () => <LoadingComponent />,
+    () => <LoadingView />,
+    () => <LoadingView />,
+    () => <LoadingView />,
     renderErrorComponent,
     b => <SuccessComponent signatureRequest={b} />,
-    () => <LoadingComponent />,
-    () => <LoadingComponent />,
+    () => <LoadingView />,
+    () => <LoadingView />,
     () => renderErrorComponent()
   );
 };
diff --git a/ts/features/fci/screens/__tests__/FciDocumentsScreen.test.tsx b/ts/features/fci/screens/__tests__/FciDocumentsScreen.test.tsx
index 7eb3cb9c989..4d9d53ca7d2 100644
--- a/ts/features/fci/screens/__tests__/FciDocumentsScreen.test.tsx
+++ b/ts/features/fci/screens/__tests__/FciDocumentsScreen.test.tsx
@@ -6,8 +6,11 @@ import { GlobalState } from "../../../../store/reducers/types";
 import FciDocumentsScreen from "../valid/FciDocumentsScreen";
 import { FCI_ROUTES } from "../../navigation/routes";
 import { mockSignatureRequestDetailView } from "../../types/__mocks__/SignatureRequestDetailView.mock";
+import {
+  fciDownloadPreview,
+  fciSignatureRequestFromId
+} from "../../store/actions";
 import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
-import { fciSignatureRequestFromId } from "../../store/actions";
 
 describe("Test FciDocuments screen", () => {
   beforeEach(() => {
@@ -21,8 +24,7 @@ describe("Test FciDocuments screen", () => {
     );
     store.dispatch(
       fciSignatureRequestFromId.success({
-        ...mockSignatureRequestDetailView,
-        documents: []
+        ...mockSignatureRequestDetailView
       })
     );
     const component = renderComponent(store);
@@ -36,8 +38,12 @@ describe("Test FciDocuments screen", () => {
     );
     store.dispatch(
       fciSignatureRequestFromId.success({
-        ...mockSignatureRequestDetailView,
-        documents: []
+        ...mockSignatureRequestDetailView
+      })
+    );
+    store.dispatch(
+      fciDownloadPreview.success({
+        path: mockSignatureRequestDetailView.documents[0].url
       })
     );
     const testComponent = renderComponent(store);
diff --git a/ts/features/fci/screens/__tests__/FciThankyouScreen.test.tsx b/ts/features/fci/screens/__tests__/FciThankyouScreen.test.tsx
index 2ef8d0ec8bf..43dea643ecd 100644
--- a/ts/features/fci/screens/__tests__/FciThankyouScreen.test.tsx
+++ b/ts/features/fci/screens/__tests__/FciThankyouScreen.test.tsx
@@ -73,8 +73,7 @@ describe("Test FciThankyouScreen screen", () => {
     store.dispatch(fciSigningRequest.success(mockSignatureDetailView));
     const component = renderComponent(store);
     expect(component).toBeTruthy();
-    expect(component.queryByTestId("FciTypSuccessTestID")).toBeTruthy();
-    const closeButton = component.getByTestId("FciTypSuccessFooterButton");
+    const closeButton = component.getByTestId("FciTypCloseButton");
     expect(closeButton).toBeTruthy();
     expect(closeButton).toBeEnabled();
     fireEvent.press(closeButton, "onPress");
diff --git a/ts/features/fci/screens/valid/FciDataSharingScreen.tsx b/ts/features/fci/screens/valid/FciDataSharingScreen.tsx
index 7987743d860..810f38b60ef 100644
--- a/ts/features/fci/screens/valid/FciDataSharingScreen.tsx
+++ b/ts/features/fci/screens/valid/FciDataSharingScreen.tsx
@@ -1,16 +1,26 @@
+import {
+  Body,
+  ButtonSolidProps,
+  FooterWithButtons,
+  H2,
+  H6,
+  HSpacer,
+  IOStyles,
+  IconButton,
+  LabelLink,
+  ListItemNav,
+  VSpacer
+} from "@pagopa/io-app-design-system";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { useNavigation, useRoute } from "@react-navigation/native";
-import { List } from "native-base";
-import * as React from "react";
-import { SafeAreaView, StyleSheet, View } from "react-native";
+import { useRoute } from "@react-navigation/native";
 import * as O from "fp-ts/lib/Option";
-import { Icon } from "@pagopa/io-app-design-system";
-import { H4 } from "../../../../components/core/typography/H4";
-import { Link } from "../../../../components/core/typography/Link";
-import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
-import ListItemComponent from "../../../../components/screens/ListItemComponent";
-import FooterWithButtons from "../../../../components/ui/FooterWithButtons";
+import * as React from "react";
+import { ScrollView, StyleSheet, View } from "react-native";
+import { withValidatedEmail } from "../../../../components/helpers/withValidatedEmail";
+import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 import I18n from "../../../../i18n";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import ROUTES from "../../../../navigation/routes";
 import { useIOSelector } from "../../../../store/hooks";
 import {
   profileEmailSelector,
@@ -18,41 +28,17 @@ import {
   profileNameSelector,
   profileSelector
 } from "../../../../store/reducers/profile";
-import customVariables from "../../../../theme/variables";
+import { formatFiscalCodeBirthdayAsShortFormat } from "../../../../utils/dates";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
 import { capitalize } from "../../../../utils/strings";
-import {
-  cancelButtonProps,
-  confirmButtonProps
-} from "../../../../components/buttons/ButtonConfigurations";
-import { useFciAbortSignatureFlow } from "../../hooks/useFciAbortSignatureFlow";
-import ROUTES from "../../../../navigation/routes";
-import { IOStyles } from "../../../../components/core/variables/IOStyles";
-import { withValidatedEmail } from "../../../../components/helpers/withValidatedEmail";
-import ScreenContent from "../../../../components/screens/ScreenContent";
 import { trackFciUserDataConfirmed, trackFciUserExit } from "../../analytics";
-import { formatFiscalCodeBirthdayAsShortFormat } from "../../../../utils/dates";
+import { useFciAbortSignatureFlow } from "../../hooks/useFciAbortSignatureFlow";
+import { FCI_ROUTES } from "../../navigation/routes";
 import { fciEnvironmentSelector } from "../../store/reducers/fciEnvironment";
 
 const styles = StyleSheet.create({
-  padded: {
-    paddingLeft: customVariables.contentPadding,
-    paddingRight: customVariables.contentPadding,
-    paddingBottom: customVariables.contentPadding
-  },
-  verticalPadding: {
-    paddingTop: customVariables.spacerHeight,
-    paddingBottom: customVariables.spacerHeight
-  },
-  paddingTextLarge: {
-    paddingLeft: 14
-  },
-  paddingText: {
-    paddingLeft: 4
-  },
   alertTextContainer: {
     flexDirection: "row",
-    justifyContent: "space-between",
     alignItems: "center"
   }
 });
@@ -64,7 +50,7 @@ const FciDataSharingScreen = (): React.ReactElement => {
   const name = useIOSelector(profileNameSelector);
   const fiscalCode = useIOSelector(profileFiscalCodeSelector);
   const fciEnvironment = useIOSelector(fciEnvironmentSelector);
-  const navigation = useNavigation();
+  const navigation = useIONavigation();
   const route = useRoute();
   const familyName = pot.getOrElse(
     pot.map(profile, p => capitalize(p.family_name)),
@@ -76,106 +62,146 @@ const FciDataSharingScreen = (): React.ReactElement => {
   );
   const email = useIOSelector(profileEmailSelector);
 
+  useHeaderSecondLevel({
+    title: I18n.t("features.fci.title"),
+    contextualHelp: emptyContextualHelp,
+    supportRequest: true
+  });
+
   const { present, bottomSheet: fciAbortSignature } =
     useFciAbortSignatureFlow();
 
+  const cancelButtonProps: ButtonSolidProps = {
+    onPress: () => present(),
+    label: I18n.t("features.fci.shareDataScreen.cancel"),
+    accessibilityLabel: I18n.t("features.fci.shareDataScreen.cancel")
+  };
+
+  const confirmButtonProps: ButtonSolidProps = {
+    onPress: () => {
+      trackFciUserDataConfirmed(fciEnvironment);
+      navigation.navigate(FCI_ROUTES.MAIN, {
+        screen: FCI_ROUTES.QTSP_TOS
+      });
+    },
+    label: I18n.t("features.fci.shareDataScreen.confirm"),
+    accessibilityLabel: I18n.t("features.fci.shareDataScreen.confirm")
+  };
+
   const AlertTextComponent = () => (
     <View
-      style={[styles.verticalPadding, styles.alertTextContainer]}
       testID="FciDataSharingScreenAlertTextTestID"
+      style={styles.alertTextContainer}
     >
-      <Icon name="notice" size={iconSize} color="bluegrey" />
-      <H4 weight="Regular" style={styles.paddingTextLarge} color={"bluegrey"}>
-        {I18n.t("features.fci.shareDataScreen.alertText")}
-        <View style={styles.paddingText} />
-        <Link
-          onPress={() => {
-            trackFciUserExit(route.name, fciEnvironment, "modifica_email");
-            navigation.navigate(ROUTES.PROFILE_NAVIGATOR, {
-              screen: ROUTES.INSERT_EMAIL_SCREEN
-            });
-          }}
-        >
-          {I18n.t("features.fci.shareDataScreen.alertLink")}
-        </Link>
-      </H4>
+      <IconButton
+        icon="notice"
+        iconSize={iconSize}
+        color="neutral"
+        disabled
+        accessibilityLabel={I18n.t("features.fci.shareDataScreen.alertText")}
+        onPress={() => undefined}
+      />
+      <HSpacer size={8} />
+      <View style={{ flex: 1 }}>
+        <H6 weight="Regular" color={"bluegrey"}>
+          {I18n.t("features.fci.shareDataScreen.alertText")}
+          <HSpacer size={8} />
+          <LabelLink
+            onPress={() => {
+              trackFciUserExit(route.name, fciEnvironment, "modifica_email");
+              navigation.navigate(ROUTES.PROFILE_NAVIGATOR, {
+                screen: ROUTES.INSERT_EMAIL_SCREEN,
+                params: {
+                  isOnboarding: false,
+                  isFciEditEmailFlow: true
+                }
+              });
+            }}
+          >
+            {I18n.t("features.fci.shareDataScreen.alertLink")}
+          </LabelLink>
+        </H6>
+      </View>
     </View>
   );
 
   return (
-    <BaseScreenComponent
-      headerTitle={I18n.t("features.fci.title")}
-      contextualHelp={emptyContextualHelp}
-      goBack
-    >
-      <SafeAreaView style={IOStyles.flex}>
-        <ScreenContent
-          title={I18n.t("features.fci.shareDataScreen.title")}
-          subtitle={I18n.t("features.fci.shareDataScreen.content")}
-        >
-          <View style={styles.padded}>
-            <List testID="FciDataSharingScreenListTestID">
-              {name && (
-                <ListItemComponent
-                  testID="FciDataSharingScreenNameTestID"
-                  title={I18n.t("features.fci.shareDataScreen.name")}
-                  subTitle={name}
-                  hideIcon
-                />
-              )}
-              {familyName && (
-                <ListItemComponent
-                  testID="FciDataSharingScreenFamilyNameTestID"
-                  title={I18n.t("features.fci.shareDataScreen.familyName")}
-                  subTitle={familyName}
-                  hideIcon
-                />
-              )}
-              {birthDate && (
-                <ListItemComponent
-                  testID="FciDataSharingScreenBirthDateTestID"
-                  title={I18n.t("features.fci.shareDataScreen.birthDate")}
-                  subTitle={formatFiscalCodeBirthdayAsShortFormat(birthDate)}
-                  hideIcon
-                />
-              )}
-              {fiscalCode && (
-                <ListItemComponent
-                  testID="FciDataSharingScreenFiscalCodeTestID"
-                  title={I18n.t("profile.fiscalCode.fiscalCode")}
-                  subTitle={fiscalCode}
-                  hideIcon
-                />
-              )}
-              {O.isSome(email) && (
-                <ListItemComponent
-                  testID="FciDataSharingScreenEmailTestID"
-                  title={I18n.t("profile.data.list.email")}
-                  subTitle={email.value}
-                  hideIcon
-                />
-              )}
-            </List>
-            <AlertTextComponent />
-          </View>
-        </ScreenContent>
-        <View testID="FciDataSharingScreenFooterTestID">
-          <FooterWithButtons
-            type={"TwoButtonsInlineThird"}
-            leftButton={cancelButtonProps(
-              () => present(),
-              I18n.t("features.fci.shareDataScreen.cancel")
+    <>
+      <ScrollView
+        style={IOStyles.horizontalContentPadding}
+        testID={"FciDataSharingScreenListTestID"}
+      >
+        <H2>{I18n.t("features.fci.shareDataScreen.title")}</H2>
+        <VSpacer size={16} />
+        <Body>{I18n.t("features.fci.shareDataScreen.content")}</Body>
+        {name && (
+          <ListItemNav
+            testID="FciDataSharingScreenNameTestID"
+            value={I18n.t("features.fci.shareDataScreen.name")}
+            description={name}
+            accessibilityLabel={I18n.t("features.fci.shareDataScreen.name")}
+            onPress={() => undefined}
+            hideChevron
+          />
+        )}
+        {familyName && (
+          <ListItemNav
+            testID="FciDataSharingScreenFamilyNameTestID"
+            value={I18n.t("features.fci.shareDataScreen.familyName")}
+            description={familyName}
+            onPress={() => undefined}
+            hideChevron
+            accessibilityLabel={I18n.t(
+              "features.fci.shareDataScreen.familyName"
+            )}
+          />
+        )}
+        {birthDate && (
+          <ListItemNav
+            testID="FciDataSharingScreenBirthDateTestID"
+            value={I18n.t("features.fci.shareDataScreen.birthDate")}
+            description={formatFiscalCodeBirthdayAsShortFormat(birthDate)}
+            hideChevron
+            accessibilityLabel={I18n.t(
+              "features.fci.shareDataScreen.birthDate"
             )}
-            rightButton={confirmButtonProps(() => {
-              trackFciUserDataConfirmed(fciEnvironment);
-              navigation.navigate("FCI_QTSP_TOS");
-            }, `${I18n.t("features.fci.shareDataScreen.confirm")}`)}
+            onPress={() => undefined}
           />
-        </View>
-      </SafeAreaView>
+        )}
+        {fiscalCode && (
+          <ListItemNav
+            testID="FciDataSharingScreenFiscalCodeTestID"
+            value={I18n.t("profile.fiscalCode.fiscalCode")}
+            description={fiscalCode}
+            hideChevron
+            accessibilityLabel={I18n.t("profile.fiscalCode.fiscalCode")}
+            onPress={() => undefined}
+          />
+        )}
+        {O.isSome(email) && (
+          <>
+            <ListItemNav
+              testID="FciDataSharingScreenEmailTestID"
+              value={I18n.t("profile.data.list.email")}
+              description={email.value}
+              hideChevron
+              accessibilityLabel={I18n.t("profile.data.list.email")}
+              onPress={() => undefined}
+            />
+            <AlertTextComponent />
+          </>
+        )}
+      </ScrollView>
+      <View testID="FciDataSharingScreenFooterTestID">
+        <FooterWithButtons
+          type={"TwoButtonsInlineThird"}
+          secondary={{ type: "Solid", buttonProps: confirmButtonProps }}
+          primary={{ type: "Outline", buttonProps: cancelButtonProps }}
+        />
+      </View>
 
       {fciAbortSignature}
-    </BaseScreenComponent>
+    </>
   );
 };
 
diff --git a/ts/features/fci/screens/valid/FciDocumentPreviewScreen.tsx b/ts/features/fci/screens/valid/FciDocumentPreviewScreen.tsx
index 348f6acb75c..7db7a4d1964 100644
--- a/ts/features/fci/screens/valid/FciDocumentPreviewScreen.tsx
+++ b/ts/features/fci/screens/valid/FciDocumentPreviewScreen.tsx
@@ -1,8 +1,5 @@
 import React from "react";
-import { Platform, SafeAreaView, StyleSheet } from "react-native";
 import * as S from "fp-ts/lib/string";
-import { IconButton } from "@pagopa/io-app-design-system";
-import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
 import I18n from "../../../../i18n";
 import { IOStackNavigationRouteProps } from "../../../../navigation/params/AppParamsList";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
@@ -12,28 +9,27 @@ import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { fciDownloadPreviewClear, fciEndRequest } from "../../store/actions";
 import { fciDownloadPathSelector } from "../../store/reducers/fciDownloadPreview";
 import GenericErrorComponent from "../../components/GenericErrorComponent";
+import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 
 export type FciDocumentPreviewScreenNavigationParams = Readonly<{
   documentUrl: string;
-  enableAnnotationRendering?: boolean;
 }>;
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  }
-});
-
 export const FciDocumentPreviewScreen = (
   props: IOStackNavigationRouteProps<FciParamsList, "FCI_DOC_PREVIEW">
 ): React.ReactElement => {
   const [isError, setIsError] = React.useState(false);
   const documentUrl = props.route.params.documentUrl ?? "";
-  const enableAnnotationRendering =
-    props.route.params.enableAnnotationRendering;
   const fciDownloadPath = useIOSelector(fciDownloadPathSelector);
   const dispatch = useIODispatch();
 
+  useHeaderSecondLevel({
+    title: I18n.t("messagePDFPreview.title"),
+    contextualHelp: emptyContextualHelp,
+    supportRequest: true,
+    goBack: () => dispatch(fciDownloadPreviewClear({ path: fciDownloadPath }))
+  });
+
   if (isError) {
     return (
       <GenericErrorComponent
@@ -45,36 +41,14 @@ export const FciDocumentPreviewScreen = (
     );
   }
 
-  const customGoBack: React.ReactElement = (
-    <IconButton
-      icon={Platform.OS === "ios" ? "backiOS" : "backAndroid"}
-      color={"neutral"}
-      onPress={() => {
-        dispatch(fciDownloadPreviewClear({ path: fciDownloadPath }));
-      }}
-      accessibilityLabel={I18n.t("global.buttons.back")}
-    />
-  );
-
   return (
-    <BaseScreenComponent
-      goBack={true}
-      customGoBack={customGoBack}
-      contextualHelp={emptyContextualHelp}
-      headerTitle={I18n.t("messagePDFPreview.title")}
-    >
-      <SafeAreaView
-        style={styles.container}
-        testID={"FciDocumentPreviewScreenTestID"}
-      >
-        {S.isEmpty(documentUrl) === false && (
-          <DocumentViewer
-            enableAnnotationRendering={enableAnnotationRendering}
-            documentUrl={documentUrl}
-            onError={() => setIsError(true)}
-          />
-        )}
-      </SafeAreaView>
-    </BaseScreenComponent>
+    <>
+      {S.isEmpty(documentUrl) === false && (
+        <DocumentViewer
+          documentUrl={documentUrl}
+          onError={() => setIsError(true)}
+        />
+      )}
+    </>
   );
 };
diff --git a/ts/features/fci/screens/valid/FciDocumentsScreen.tsx b/ts/features/fci/screens/valid/FciDocumentsScreen.tsx
index a50dc51cbbb..09b109c8d1b 100644
--- a/ts/features/fci/screens/valid/FciDocumentsScreen.tsx
+++ b/ts/features/fci/screens/valid/FciDocumentsScreen.tsx
@@ -4,7 +4,7 @@ import { pipe } from "fp-ts/lib/function";
 import * as RA from "fp-ts/lib/ReadonlyArray";
 import * as O from "fp-ts/lib/Option";
 import * as S from "fp-ts/lib/string";
-import { Platform, SafeAreaView, StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { useSelector } from "react-redux";
 import {
   RouteProp,
@@ -13,10 +13,13 @@ import {
   useNavigation,
   useRoute
 } from "@react-navigation/native";
-import { IconButton, IOColors } from "@pagopa/io-app-design-system";
-import { IOStyles } from "../../../../components/core/variables/IOStyles";
-import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
-import FooterWithButtons from "../../../../components/ui/FooterWithButtons";
+import {
+  BlockButtonProps,
+  ButtonSolidProps,
+  FooterWithButtons,
+  IOColors,
+  IOStyles
+} from "@pagopa/io-app-design-system";
 import I18n from "../../../../i18n";
 import DocumentsNavigationBar from "../../components/DocumentsNavigationBar";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
@@ -34,7 +37,6 @@ import {
 import { fciDocumentSignaturesSelector } from "../../store/reducers/fciDocumentSignatures";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { fciDownloadPathSelector } from "../../store/reducers/fciDownloadPreview";
-import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay";
 import { trackFciDocOpeningSuccess, trackFciSigningDoc } from "../../analytics";
 import {
   getOptionalSignatureFields,
@@ -43,6 +45,8 @@ import {
 } from "../../utils/signatureFields";
 import { useFciNoSignatureFields } from "../../hooks/useFciNoSignatureFields";
 import { fciEnvironmentSelector } from "../../store/reducers/fciEnvironment";
+import LoadingComponent from "../../components/LoadingComponent";
+import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 
 const styles = StyleSheet.create({
   pdf: {
@@ -58,7 +62,7 @@ export type FciDocumentsScreenNavigationParams = Readonly<{
 const FciDocumentsScreen = () => {
   const pdfRef = React.useRef<Pdf>(null);
   const [totalPages, setTotalPages] = React.useState(0);
-  const [currentPage, setCurrentPage] = React.useState(0);
+  const [currentPage, setCurrentPage] = React.useState(1);
   const route = useRoute<RouteProp<FciParamsList, "FCI_DOCUMENTS">>();
   const currentDoc = route.params.currentDoc ?? 0;
   const documents = useSelector(fciSignatureDetailDocumentsSelector);
@@ -131,19 +135,28 @@ const FciDocumentsScreen = () => {
 
   const onCancelPress = () => present();
 
-  const cancelButtonProps = {
-    block: true,
-    light: false,
-    bordered: true,
+  const cancelButtonProps: ButtonSolidProps = {
     onPress: onCancelPress,
-    title: I18n.t("features.fci.documents.footer.cancel")
+    label: I18n.t("features.fci.documents.footer.cancel"),
+    accessibilityLabel: I18n.t("features.fci.documents.footer.cancel")
   };
 
-  const continueButtonProps = {
-    block: true,
-    primary: true,
+  const continueButtonProps: ButtonSolidProps = {
     onPress: onContinuePress,
-    title: I18n.t("features.fci.documents.footer.continue")
+    label: I18n.t("features.fci.documents.footer.continue"),
+    accessibilityLabel: I18n.t("features.fci.documents.footer.continue")
+  };
+
+  const keepReadingButtonProps: ButtonSolidProps = {
+    onPress: () => pointToPage(totalPages),
+    label: I18n.t("global.buttons.continue"),
+    accessibilityLabel: I18n.t("global.buttons.continue")
+  };
+
+  const secondaryButtonProps: BlockButtonProps = {
+    type: currentPage < totalPages ? "Outline" : "Solid",
+    buttonProps:
+      currentPage < totalPages ? keepReadingButtonProps : continueButtonProps
   };
 
   const pointToPage = (page: number) =>
@@ -153,14 +166,6 @@ const FciDocumentsScreen = () => {
       O.map(_ => _.setPage(page))
     );
 
-  const keepReadingButtonProps = {
-    block: true,
-    light: true,
-    bordered: true,
-    onPress: () => pointToPage(totalPages),
-    title: I18n.t("global.buttons.continue")
-  };
-
   const renderPager = () => (
     <Pdf
       ref={pdfRef}
@@ -174,7 +179,6 @@ const FciDocumentsScreen = () => {
         setCurrentPage(page);
       }}
       enablePaging
-      enableAnnotationRendering={false}
       style={styles.pdf}
     />
   );
@@ -203,64 +207,56 @@ const FciDocumentsScreen = () => {
     );
   };
 
-  const customGoBack: React.ReactElement = (
-    <IconButton
-      icon={Platform.OS === "ios" ? "backiOS" : "backAndroid"}
-      color={"neutral"}
-      onPress={() => {
-        if (currentDoc <= 0) {
-          dispatch(fciClearStateRequest());
-        }
-        navigation.goBack();
-      }}
-      accessibilityLabel={I18n.t("global.buttons.back")}
-    />
-  );
+  useHeaderSecondLevel({
+    title: I18n.t("features.fci.title"),
+    supportRequest: true,
+    contextualHelp: emptyContextualHelp,
+    goBack: () => {
+      if (currentDoc <= 0) {
+        dispatch(fciClearStateRequest());
+      }
+      navigation.goBack();
+    }
+  });
 
-  const renderFooterButtons = () =>
-    currentPage < totalPages ? keepReadingButtonProps : continueButtonProps;
+  if (S.isEmpty(downloadPath)) {
+    return <LoadingComponent />;
+  }
 
   return (
-    <LoadingSpinnerOverlay isLoading={S.isEmpty(downloadPath)}>
-      <BaseScreenComponent
-        goBack={true}
-        headerTitle={I18n.t("features.fci.title")}
-        customGoBack={customGoBack}
-        contextualHelp={emptyContextualHelp}
-      >
-        <DocumentsNavigationBar
-          indicatorPosition={"right"}
-          titleLeft={I18n.t("features.fci.documentsBar.titleLeft", {
-            currentDoc: currentDoc + 1,
-            totalDocs: documents.length
-          })}
-          titleRight={I18n.t("features.fci.documentsBar.titleRight", {
-            currentPage,
-            totalPages
-          })}
-          iconLeftColor={currentPage === 1 ? "bluegreyLight" : "blue"}
-          iconRightColor={currentPage === totalPages ? "bluegreyLight" : "blue"}
-          onPrevious={onPrevious}
-          onNext={onNext}
-          disabled={false}
-          testID={"FciDocumentsNavBarTestID"}
-        />
-        <SafeAreaView style={IOStyles.flex} testID={"FciDocumentsScreenTestID"}>
-          {documents.length > 0 && (
-            <>
-              {renderPager()}
-              <FooterWithButtons
-                type={"TwoButtonsInlineThird"}
-                leftButton={cancelButtonProps}
-                rightButton={renderFooterButtons()}
-              />
-            </>
-          )}
-        </SafeAreaView>
-        {fciAbortSignature}
-        {fciNoSignatureFields}
-      </BaseScreenComponent>
-    </LoadingSpinnerOverlay>
+    <>
+      <DocumentsNavigationBar
+        indicatorPosition={"right"}
+        titleLeft={I18n.t("features.fci.documentsBar.titleLeft", {
+          currentDoc: currentDoc + 1,
+          totalDocs: documents.length
+        })}
+        titleRight={I18n.t("features.fci.documentsBar.titleRight", {
+          currentPage,
+          totalPages
+        })}
+        iconLeftDisabled={currentPage === 1}
+        iconRightDisabled={currentPage === totalPages}
+        onPrevious={onPrevious}
+        onNext={onNext}
+        disabled={false}
+        testID={"FciDocumentsNavBarTestID"}
+      />
+      <View style={IOStyles.flex} testID={"FciDocumentsScreenTestID"}>
+        {documents.length > 0 && (
+          <>
+            {renderPager()}
+            <FooterWithButtons
+              type="TwoButtonsInlineThird"
+              secondary={secondaryButtonProps}
+              primary={{ type: "Outline", buttonProps: cancelButtonProps }}
+            />
+          </>
+        )}
+      </View>
+      {fciAbortSignature}
+      {fciNoSignatureFields}
+    </>
   );
 };
 export default FciDocumentsScreen;
diff --git a/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx b/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx
index 2e4b72be5f0..6b4efd4465d 100644
--- a/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx
+++ b/ts/features/fci/screens/valid/FciQtspClausesScreen.tsx
@@ -1,12 +1,16 @@
 import * as React from "react";
-import { SafeAreaView, FlatList, View } from "react-native";
+import { FlatList, View, ScrollView } from "react-native";
 import { useSelector } from "react-redux";
-import { useNavigation } from "@react-navigation/native";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { constNull } from "fp-ts/lib/function";
-import { VSpacer } from "@pagopa/io-app-design-system";
-import { IOStyles } from "../../../../components/core/variables/IOStyles";
-import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
+import {
+  Body,
+  ButtonSolidProps,
+  Divider,
+  FooterWithButtons,
+  H2,
+  IOStyles,
+  VSpacer
+} from "@pagopa/io-app-design-system";
 import I18n from "../../../../i18n";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
 import {
@@ -14,34 +18,33 @@ import {
   fciQtspPrivacyTextSelector,
   fciQtspPrivacyUrlSelector
 } from "../../store/reducers/fciQtspClauses";
-import FooterWithButtons from "../../../../components/ui/FooterWithButtons";
 import { useFciAbortSignatureFlow } from "../../hooks/useFciAbortSignatureFlow";
-import ItemSeparatorComponent from "../../../../components/ItemSeparatorComponent";
 import customVariables from "../../../../theme/variables";
 import QtspClauseListItem from "../../components/QtspClauseListItem";
 import { FCI_ROUTES } from "../../navigation/routes";
 import { useIODispatch } from "../../../../store/hooks";
 import { fciEndRequest, fciStartSigningRequest } from "../../store/actions";
-import { LoadingErrorComponent } from "../../../../components/LoadingErrorComponent";
 import {
   fciPollFilledDocumentErrorSelector,
   fciPollFilledDocumentReadySelector
 } from "../../store/reducers/fciPollFilledDocument";
 import GenericErrorComponent from "../../components/GenericErrorComponent";
 import LinkedText from "../../components/LinkedText";
-import { servicePreferenceSelector } from "../../../../store/reducers/entities/services/servicePreference";
-import { loadServicePreference } from "../../../../store/actions/services/servicePreference";
+import { servicePreferenceSelector } from "../../../services/store/reducers/servicePreference";
+import { loadServicePreference } from "../../../services/store/actions";
 import { ServiceId } from "../../../../../definitions/backend/ServiceId";
 import { useFciCheckService } from "../../hooks/useFciCheckService";
-import { isServicePreferenceResponseSuccess } from "../../../../types/services/ServicePreferenceResponse";
+import { isServicePreferenceResponseSuccess } from "../../../services/types/ServicePreferenceResponse";
 import { fciMetadataServiceIdSelector } from "../../store/reducers/fciMetadata";
-import ScreenContent from "../../../../components/screens/ScreenContent";
 import { trackFciUxConversion } from "../../analytics";
+import LoadingComponent from "../../components/LoadingComponent";
 import { fciEnvironmentSelector } from "../../store/reducers/fciEnvironment";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 
 const FciQtspClausesScreen = () => {
   const dispatch = useIODispatch();
-  const navigation = useNavigation();
+  const navigation = useIONavigation();
   const [clausesChecked, setClausesChecked] = React.useState(0);
   const servicePreference = useSelector(servicePreferenceSelector);
   const qtspClausesSelector = useSelector(fciQtspClausesSelector);
@@ -76,20 +79,19 @@ const FciQtspClausesScreen = () => {
     useFciAbortSignatureFlow();
 
   const openUrl = (url: string) => {
-    navigation.navigate(FCI_ROUTES.DOC_PREVIEW, {
-      documentUrl: url,
-      enableAnnotationRendering: true
+    navigation.navigate(FCI_ROUTES.MAIN, {
+      screen: FCI_ROUTES.DOC_PREVIEW,
+      params: {
+        documentUrl: url
+      }
     });
   };
 
-  const LoadingComponent = () => (
-    <LoadingErrorComponent
-      isLoading={true}
-      loadingCaption={""}
-      onRetry={constNull}
-      testID={"FciLoadingScreenTestID"}
-    />
-  );
+  useHeaderSecondLevel({
+    title: I18n.t("features.fci.title"),
+    contextualHelp: emptyContextualHelp,
+    supportRequest: true
+  });
 
   if (fciPollFilledDocumentError && !isPollFilledDocumentReady) {
     return (
@@ -102,7 +104,7 @@ const FciQtspClausesScreen = () => {
       />
     );
   } else if (!isPollFilledDocumentReady) {
-    return <LoadingComponent />;
+    return <LoadingComponent testID={"FciLoadingScreenTestID"} />;
   }
 
   const renderClausesFields = () => (
@@ -116,9 +118,7 @@ const FciQtspClausesScreen = () => {
         <FlatList
           data={qtspClausesSelector}
           keyExtractor={(_, index) => `${index}`}
-          ItemSeparatorComponent={() => (
-            <ItemSeparatorComponent noPadded={true} />
-          )}
+          ItemSeparatorComponent={() => <Divider />}
           renderItem={({ item }) => (
             <QtspClauseListItem
               clause={item}
@@ -132,7 +132,7 @@ const FciQtspClausesScreen = () => {
           )}
           ListFooterComponent={
             <>
-              <ItemSeparatorComponent noPadded={true} />
+              <Divider />
               <VSpacer size={24} />
               <LinkedText
                 text={qtspPrivacyTextSelector}
@@ -148,17 +148,13 @@ const FciQtspClausesScreen = () => {
     </View>
   );
 
-  const cancelButtonProps = {
-    block: true,
-    light: false,
-    bordered: true,
+  const cancelButtonProps: ButtonSolidProps = {
     onPress: showAbort,
-    title: I18n.t("global.buttons.cancel")
+    label: I18n.t("global.buttons.cancel"),
+    accessibilityLabel: I18n.t("global.buttons.cancel")
   };
 
-  const continueButtonProps = {
-    block: true,
-    primary: true,
+  const continueButtonProps: ButtonSolidProps = {
     disabled: clausesChecked !== qtspClausesSelector.length,
     onPress: () => {
       if (isServiceActive) {
@@ -168,33 +164,28 @@ const FciQtspClausesScreen = () => {
         showCheckService();
       }
     },
-    title: I18n.t("global.buttons.continue")
+    label: I18n.t("global.buttons.continue"),
+    accessibilityLabel: I18n.t("global.buttons.continue")
   };
 
   return (
-    <BaseScreenComponent
-      goBack={true}
-      headerTitle={I18n.t("features.fci.signatureFields.title")}
-      contextualHelp={emptyContextualHelp}
-    >
-      <SafeAreaView style={IOStyles.flex} testID={"FciQtspClausesTestID"}>
-        <ScreenContent
-          title={I18n.t("features.fci.qtspTos.title")}
-          subtitle={I18n.t("features.fci.qtspTos.subTitle")}
-        >
-          <View style={[IOStyles.flex, IOStyles.horizontalContentPadding]}>
-            {renderClausesFields()}
-          </View>
-        </ScreenContent>
+    <>
+      <View style={IOStyles.flex} testID={"FciQtspClausesTestID"}>
+        <ScrollView style={IOStyles.horizontalContentPadding}>
+          <H2>{I18n.t("features.fci.qtspTos.title")}</H2>
+          <VSpacer size={16} />
+          <Body>{I18n.t("features.fci.qtspTos.subTitle")}</Body>
+          {renderClausesFields()}
+        </ScrollView>
         <FooterWithButtons
           type={"TwoButtonsInlineThird"}
-          leftButton={cancelButtonProps}
-          rightButton={continueButtonProps}
+          primary={{ type: "Outline", buttonProps: cancelButtonProps }}
+          secondary={{ type: "Solid", buttonProps: continueButtonProps }}
         />
-      </SafeAreaView>
+      </View>
       {fciAbortSignature}
       {fciCheckService}
-    </BaseScreenComponent>
+    </>
   );
 };
 export default FciQtspClausesScreen;
diff --git a/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx b/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx
index c71ad3c4bce..97b9646c356 100644
--- a/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx
+++ b/ts/features/fci/screens/valid/FciSignatureFieldsScreen.tsx
@@ -1,13 +1,20 @@
 import * as React from "react";
-import { View, SafeAreaView, SectionList, Platform } from "react-native";
+import { View, SectionList, ScrollView } from "react-native";
 import { useSelector } from "react-redux";
-import { StackActions, useNavigation } from "@react-navigation/native";
+import { Route, StackActions, useRoute } from "@react-navigation/native";
 import * as RA from "fp-ts/lib/ReadonlyArray";
 import * as O from "fp-ts/lib/Option";
 import { constFalse, increment, pipe } from "fp-ts/lib/function";
-import { IconButton, IOColors, VSpacer } from "@pagopa/io-app-design-system";
-import { IOStyles } from "../../../../components/core/variables/IOStyles";
-import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
+import {
+  ButtonSolidProps,
+  FooterWithButtons,
+  H2,
+  H4,
+  IconButton,
+  IOColors,
+  IOStyles,
+  VSpacer
+} from "@pagopa/io-app-design-system";
 import I18n from "../../../../i18n";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
 import { useIODispatch } from "../../../../store/hooks";
@@ -16,12 +23,9 @@ import {
   fciSignatureDetailDocumentsSelector
 } from "../../store/reducers/fciSignatureRequest";
 import { DocumentDetailView } from "../../../../../definitions/fci/DocumentDetailView";
-import { IOStackNavigationRouteProps } from "../../../../navigation/params/AppParamsList";
-import { FciParamsList } from "../../navigation/params";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 import SignatureFieldItem from "../../components/SignatureFieldItem";
-import { H3 } from "../../../../components/core/typography/H3";
 import { SignatureField } from "../../../../../definitions/fci/SignatureField";
-import FooterWithButtons from "../../../../components/ui/FooterWithButtons";
 import { FCI_ROUTES } from "../../navigation/routes";
 import { fciDocumentSignaturesSelector } from "../../store/reducers/fciDocumentSignatures";
 import {
@@ -40,7 +44,6 @@ import {
   getSectionListData,
   orderSignatureFields
 } from "../../utils/signatureFields";
-import ScreenContent from "../../../../components/screens/ScreenContent";
 import { LightModalContext } from "../../../../components/ui/LightModal";
 import DocumentWithSignature from "../../components/DocumentWithSignature";
 import GenericErrorComponent from "../../components/GenericErrorComponent";
@@ -50,17 +53,19 @@ import {
 } from "../../analytics";
 import { useFciSignatureFieldInfo } from "../../hooks/useFciSignatureFieldInfo";
 import { fciEnvironmentSelector } from "../../store/reducers/fciEnvironment";
+import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 
 export type FciSignatureFieldsScreenNavigationParams = Readonly<{
   documentId: DocumentDetailView["id"];
   currentDoc: number;
 }>;
 
-const FciSignatureFieldsScreen = (
-  props: IOStackNavigationRouteProps<FciParamsList, "FCI_SIGNATURE_FIELDS">
-) => {
-  const currentDoc = props.route.params.currentDoc;
-  const docId = props.route.params.documentId;
+const FciSignatureFieldsScreen = () => {
+  const { currentDoc, documentId: docId } =
+    useRoute<
+      Route<"FCI_SIGNATURE_FIELDS", FciSignatureFieldsScreenNavigationParams>
+    >().params;
+
   const documentsSelector = useSelector(fciSignatureDetailDocumentsSelector);
   const signatureFieldsSelector = useSelector(
     fciDocumentSignatureFieldsSelector(docId)
@@ -70,7 +75,7 @@ const FciSignatureFieldsScreen = (
   );
   const fciEnvironment = useSelector(fciEnvironmentSelector);
   const dispatch = useIODispatch();
-  const navigation = useNavigation();
+  const navigation = useIONavigation();
   const [isClausesChecked, setIsClausesChecked] = React.useState(false);
   const [isError, setIsError] = React.useState(false);
   const { showModal, hideModal } = React.useContext(LightModalContext);
@@ -165,9 +170,9 @@ const FciSignatureFieldsScreen = (
           flexDirection: "row"
         }}
       >
-        <H3 color="bluegrey" style={IOStyles.flex}>
+        <H4 color="bluegrey" style={IOStyles.flex}>
           {clauseLabel}
-        </H3>
+        </H4>
 
         {/* 
           Show info icon and signature field info only for unfair clauses
@@ -190,7 +195,6 @@ const FciSignatureFieldsScreen = (
 
   const renderSignatureFields = () => (
     <SectionList
-      style={IOStyles.horizontalContentPadding}
       sections={getSectionListData(
         orderSignatureFields(signatureFieldsSelector)
       )}
@@ -216,17 +220,13 @@ const FciSignatureFieldsScreen = (
     />
   );
 
-  const cancelButtonProps = {
-    block: true,
-    light: false,
-    bordered: true,
+  const cancelButtonProps: ButtonSolidProps = {
     onPress: present,
-    title: I18n.t("global.buttons.cancel")
+    label: I18n.t("global.buttons.cancel"),
+    accessibilityLabel: I18n.t("global.buttons.cancel")
   };
 
-  const continueButtonProps = {
-    block: true,
-    primary: true,
+  const continueButtonProps: ButtonSolidProps = {
     disabled: !isClausesChecked,
     onPress: () => {
       if (currentDoc < documentsSelector.length - 1) {
@@ -243,20 +243,21 @@ const FciSignatureFieldsScreen = (
         });
       }
     },
-    title:
+    accessibilityLabel:
+      currentDoc < documentsSelector.length - 1
+        ? I18n.t("global.buttons.continue")
+        : "Firma",
+    label:
       currentDoc < documentsSelector.length - 1
         ? I18n.t("global.buttons.continue")
         : "Firma"
   };
 
-  const customGoBack: React.ReactElement = (
-    <IconButton
-      icon={Platform.OS === "ios" ? "backiOS" : "backAndroid"}
-      color={"neutral"}
-      onPress={navigation.goBack}
-      accessibilityLabel={I18n.t("global.buttons.back")}
-    />
-  );
+  useHeaderSecondLevel({
+    title: I18n.t("features.fci.title"),
+    supportRequest: true,
+    contextualHelp: emptyContextualHelp
+  });
 
   if (isError) {
     return (
@@ -270,25 +271,19 @@ const FciSignatureFieldsScreen = (
   }
 
   return (
-    <BaseScreenComponent
-      goBack={true}
-      customGoBack={customGoBack}
-      headerTitle={I18n.t("features.fci.signatureFields.title")}
-      contextualHelp={emptyContextualHelp}
-    >
-      <SafeAreaView style={IOStyles.flex} testID={"FciSignatureFieldsTestID"}>
-        <ScreenContent title={I18n.t("features.fci.signatureFields.title")}>
-          <VSpacer size={32} />
-          {renderSignatureFields()}
-        </ScreenContent>
-        <FooterWithButtons
-          type={"TwoButtonsInlineThird"}
-          leftButton={cancelButtonProps}
-          rightButton={continueButtonProps}
-        />
-      </SafeAreaView>
+    <View style={IOStyles.flex} testID={"FciSignatureFieldsTestID"}>
+      <ScrollView style={IOStyles.horizontalContentPadding}>
+        <H2>{I18n.t("features.fci.signatureFields.title")}</H2>
+        <VSpacer size={32} />
+        {renderSignatureFields()}
+      </ScrollView>
+      <FooterWithButtons
+        type={"TwoButtonsInlineThird"}
+        secondary={{ type: "Solid", buttonProps: continueButtonProps }}
+        primary={{ type: "Outline", buttonProps: cancelButtonProps }}
+      />
       {fciAbortSignature}
-    </BaseScreenComponent>
+    </View>
   );
 };
 export default FciSignatureFieldsScreen;
diff --git a/ts/features/fci/screens/valid/FciSignatureRequestsScreen.tsx b/ts/features/fci/screens/valid/FciSignatureRequestsScreen.tsx
index 434e231d406..e05434beaf7 100644
--- a/ts/features/fci/screens/valid/FciSignatureRequestsScreen.tsx
+++ b/ts/features/fci/screens/valid/FciSignatureRequestsScreen.tsx
@@ -1,8 +1,6 @@
 import * as React from "react";
-import { SafeAreaView, View, SectionList } from "react-native";
-import { IOStyles } from "../../../../components/core/variables/IOStyles";
-import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
-import ScreenContent from "../../../../components/screens/ScreenContent";
+import { SectionList, ScrollView } from "react-native";
+import { H2, IOStyles } from "@pagopa/io-app-design-system";
 import SignatureRequestItem from "../../components/SignatureRequestItem";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { fciSignaturesListSelector } from "../../store/reducers/fciSignaturesList";
@@ -24,6 +22,8 @@ import {
 } from "../../../zendesk/store/actions";
 import { ToolEnum } from "../../../../../definitions/content/AssistanceToolConfig";
 import { SignatureRequestListView } from "../../../../../definitions/fci/SignatureRequestListView";
+import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
+import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 
 const FciSignatureRequestsScreen = () => {
   const dispatch = useIODispatch();
@@ -62,6 +62,12 @@ const FciSignatureRequestsScreen = () => {
     dispatch(fciSignaturesListRequest.request());
   }, [dispatch]);
 
+  useHeaderSecondLevel({
+    title: I18n.t("features.fci.requests.header"),
+    contextualHelp: emptyContextualHelp,
+    supportRequest: true
+  });
+
   const renderSignatureRequests = () => (
     <SectionList
       sections={dataItems.map(item => ({
@@ -82,18 +88,10 @@ const FciSignatureRequestsScreen = () => {
 
   return (
     <LoadingSpinnerOverlay isLoading={dataItems === undefined}>
-      <BaseScreenComponent
-        goBack={true}
-        headerTitle={I18n.t("features.fci.requests.header")}
-      >
-        <SafeAreaView style={IOStyles.flex}>
-          <ScreenContent title={I18n.t("features.fci.requests.title")}>
-            <View style={[IOStyles.flex, IOStyles.horizontalContentPadding]}>
-              {renderSignatureRequests()}
-            </View>
-          </ScreenContent>
-        </SafeAreaView>
-      </BaseScreenComponent>
+      <ScrollView style={IOStyles.horizontalContentPadding}>
+        <H2>{I18n.t("features.fci.requests.title")}</H2>
+        {renderSignatureRequests()}
+      </ScrollView>
     </LoadingSpinnerOverlay>
   );
 };
diff --git a/ts/features/fci/screens/valid/FciThankyouScreen.tsx b/ts/features/fci/screens/valid/FciThankyouScreen.tsx
index 5773969ffbb..35c6a8f7b2e 100644
--- a/ts/features/fci/screens/valid/FciThankyouScreen.tsx
+++ b/ts/features/fci/screens/valid/FciThankyouScreen.tsx
@@ -1,23 +1,23 @@
 import * as React from "react";
-import { SafeAreaView } from "react-native";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { constNull } from "fp-ts/lib/function";
-import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
+import {
+  ButtonSolidProps,
+  FooterWithButtons,
+  IOStyles,
+  Pictogram
+} from "@pagopa/io-app-design-system";
+import { View } from "react-native";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
-import { LoadingErrorComponent } from "../../../../components/LoadingErrorComponent";
 import { fciSignatureSelector } from "../../store/reducers/fciSignature";
 import GenericErrorComponent from "../../components/GenericErrorComponent";
-import paymentCompleted from "../../../../../img/pictograms/payment-completed.png";
-import { IOStyles } from "../../../../components/core/variables/IOStyles";
 import I18n from "../../../../i18n";
-import FooterWithButtons from "../../../../components/ui/FooterWithButtons";
-import { InfoScreenComponent } from "../../../../components/infoScreen/InfoScreenComponent";
-import { renderInfoRasterImage } from "../../../../components/infoScreen/imageRendering";
 import { fciEndRequest, fciStartRequest } from "../../store/actions";
 import { trackFciUxSuccess } from "../../analytics";
 import { TypeEnum as ClauseTypeEnum } from "../../../../../definitions/fci/Clause";
 import { fciDocumentSignaturesSelector } from "../../store/reducers/fciDocumentSignatures";
 import { getClausesCountByTypes } from "../../utils/signatureFields";
+import LoadingComponent from "../../components/LoadingComponent";
+import { InfoScreenComponent } from "../../components/InfoScreenComponent";
 import { fciEnvironmentSelector } from "../../store/reducers/fciEnvironment";
 
 const FciThankyouScreen = () => {
@@ -26,13 +26,8 @@ const FciThankyouScreen = () => {
   const fciEnvironment = useIOSelector(fciEnvironmentSelector);
   const dispatch = useIODispatch();
 
-  const LoadingComponent = () => (
-    <LoadingErrorComponent
-      isLoading={true}
-      loadingCaption={""}
-      onRetry={constNull}
-      testID={"FciTypLoadingScreenTestID"}
-    />
+  const LoadingView = () => (
+    <LoadingComponent testID={"FciTypLoadingScreenTestID"} />
   );
 
   const ErrorComponent = () => (
@@ -46,34 +41,33 @@ const FciThankyouScreen = () => {
     />
   );
 
-  const SuccessComponent = () => (
-    <BaseScreenComponent goBack={false}>
-      <SafeAreaView style={IOStyles.flex} testID={"FciTypSuccessTestID"}>
+  const SuccessComponent = () => {
+    const continueButtonProps: ButtonSolidProps = {
+      onPress: () => dispatch(fciEndRequest()),
+      label: I18n.t("features.fci.thankYouPage.cta"),
+      accessibilityLabel: I18n.t("features.fci.thankYouPage.cta"),
+      testID: "FciTypCloseButton"
+    };
+    return (
+      <View style={IOStyles.flex} testID={"FciTypSuccessTestID"}>
         <InfoScreenComponent
-          image={renderInfoRasterImage(paymentCompleted)}
+          image={<Pictogram name={"success"} />}
           title={I18n.t("features.fci.thankYouPage.title")}
           body={I18n.t("features.fci.thankYouPage.content")}
         />
         <FooterWithButtons
           type={"SingleButton"}
-          leftButton={{
-            onPress: () => dispatch(fciEndRequest()),
-            title: I18n.t("features.fci.thankYouPage.cta"),
-            block: true,
-            light: false,
-            bordered: true,
-            testID: "FciTypSuccessFooterButton"
-          }}
+          primary={{ type: "Solid", buttonProps: continueButtonProps }}
         />
-      </SafeAreaView>
-    </BaseScreenComponent>
-  );
+      </View>
+    );
+  };
 
   return pot.fold(
     fciCreateSignatureSelector,
-    () => <LoadingComponent />,
-    () => <LoadingComponent />,
-    () => <LoadingComponent />,
+    () => <LoadingView />,
+    () => <LoadingView />,
+    () => <LoadingView />,
     _ => <ErrorComponent />,
     _ => {
       trackFciUxSuccess(
@@ -87,8 +81,8 @@ const FciThankyouScreen = () => {
       );
       return <SuccessComponent />;
     },
-    () => <LoadingComponent />,
-    () => <LoadingComponent />,
+    () => <LoadingView />,
+    () => <LoadingView />,
     _ => <ErrorComponent />
   );
 };
diff --git a/ts/features/fims/navigation/navigator.tsx b/ts/features/fims/navigation/navigator.tsx
index dbd46c66945..5ab2b9d246d 100644
--- a/ts/features/fims/navigation/navigator.tsx
+++ b/ts/features/fims/navigation/navigator.tsx
@@ -2,10 +2,11 @@ import { createStackNavigator } from "@react-navigation/stack";
 import * as React from "react";
 import { PathConfigMap } from "@react-navigation/native";
 import FimsWebviewScreen from "../screens/FimsWebviewScreen";
+import { AppParamsList } from "../../../navigation/params/AppParamsList";
 import FIMS_ROUTES from "./routes";
 import { FimsParamsList } from "./params";
 
-export const fimsLinkingOptions: PathConfigMap = {
+export const fimsLinkingOptions: PathConfigMap<AppParamsList> = {
   [FIMS_ROUTES.MAIN]: {
     path: "fims",
     screens: {
@@ -19,8 +20,7 @@ const Stack = createStackNavigator<FimsParamsList>();
 export const FimsNavigator = () => (
   <Stack.Navigator
     initialRouteName={FIMS_ROUTES.MAIN}
-    headerMode={"none"}
-    screenOptions={{ gestureEnabled: false }}
+    screenOptions={{ gestureEnabled: false, headerShown: false }}
   >
     <Stack.Screen name={FIMS_ROUTES.WEBVIEW} component={FimsWebviewScreen} />
   </Stack.Navigator>
diff --git a/ts/features/idpay/barcode/navigation/navigator.tsx b/ts/features/idpay/barcode/navigation/navigator.tsx
index 6ee9ee46417..d25351fcfff 100644
--- a/ts/features/idpay/barcode/navigation/navigator.tsx
+++ b/ts/features/idpay/barcode/navigation/navigator.tsx
@@ -8,8 +8,7 @@ const Stack = createStackNavigator<IdPayBarcodeParamsList>();
 export const IdPayBarcodeNavigator = () => (
   <Stack.Navigator
     initialRouteName={IdPayBarcodeRoutes.IDPAY_BARCODE_RESULT}
-    headerMode={"none"}
-    screenOptions={{ gestureEnabled: true }}
+    screenOptions={{ gestureEnabled: true, headerShown: false }}
   >
     <Stack.Screen
       name={IdPayBarcodeRoutes.IDPAY_BARCODE_RESULT}
diff --git a/ts/features/idpay/barcode/screens/IdPayBarcodeResultScreen.tsx b/ts/features/idpay/barcode/screens/IdPayBarcodeResultScreen.tsx
index fb17eac87e3..c631be630df 100644
--- a/ts/features/idpay/barcode/screens/IdPayBarcodeResultScreen.tsx
+++ b/ts/features/idpay/barcode/screens/IdPayBarcodeResultScreen.tsx
@@ -11,7 +11,7 @@ import {
   VSpacer
 } from "@pagopa/io-app-design-system";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { RouteProp, useNavigation, useRoute } from "@react-navigation/native";
+import { RouteProp, useRoute } from "@react-navigation/native";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import * as React from "react";
@@ -29,6 +29,7 @@ import { IdPayBarcodeParamsList } from "../navigation/params";
 import { idPayBarcodeByInitiativeIdSelector } from "../store";
 import { calculateIdPayBarcodeSecondsToExpire } from "../utils";
 import { idPayGenerateBarcode } from "../store/actions";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 
 // -------------------- types --------------------
 
@@ -52,15 +53,15 @@ type BarcodeExpiredContentProps = {
 const IdPayBarcodeResultScreen = () => {
   const route = useRoute<IdPayBarcodeResultRouteProps>();
   const { initiativeId } = route.params;
-  const navigation = useNavigation();
+  const navigation = useIONavigation();
   const barcodePot = useIOSelector(state =>
     idPayBarcodeByInitiativeIdSelector(state)(initiativeId)
   );
 
   const navigateToInitiativeDetails = () =>
     navigation.navigate(IDPayDetailsRoutes.IDPAY_DETAILS_MAIN, {
-      route: IDPayDetailsRoutes.IDPAY_DETAILS_MONITORING,
-      routeParams: { initiativeId }
+      screen: IDPayDetailsRoutes.IDPAY_DETAILS_MONITORING,
+      params: { initiativeId }
     });
 
   if (pot.isLoading(barcodePot)) {
@@ -170,7 +171,7 @@ const SuccessContent = ({ goBack, barcode }: SuccessContentProps) => {
 const BarcodeExpiredContent = ({
   initiativeId
 }: BarcodeExpiredContentProps) => {
-  const navigation = useNavigation();
+  const navigation = useIONavigation();
   const dispatch = useIODispatch();
   const { goBack } = navigation;
   const ctaClickHandler = () => {
diff --git a/ts/features/idpay/code/navigation/navigator.tsx b/ts/features/idpay/code/navigation/navigator.tsx
index 1f6a688e665..ae97c4f06da 100644
--- a/ts/features/idpay/code/navigation/navigator.tsx
+++ b/ts/features/idpay/code/navigation/navigator.tsx
@@ -16,8 +16,7 @@ const Stack = createStackNavigator<IdPayCodeParamsList>();
 export const IdPayCodeNavigator = () => (
   <Stack.Navigator
     initialRouteName={IdPayCodeRoutes.IDPAY_CODE_ONBOARDING}
-    headerMode={"none"}
-    screenOptions={{ gestureEnabled: false }}
+    screenOptions={{ gestureEnabled: false, headerShown: false }}
   >
     <Stack.Screen
       name={IdPayCodeRoutes.IDPAY_CODE_ONBOARDING}
diff --git a/ts/features/idpay/common/navigation/linking.ts b/ts/features/idpay/common/navigation/linking.ts
index c0f48d45262..ebb1aae9e16 100644
--- a/ts/features/idpay/common/navigation/linking.ts
+++ b/ts/features/idpay/common/navigation/linking.ts
@@ -2,8 +2,9 @@ import { PathConfigMap } from "@react-navigation/native";
 import { IDPayDetailsRoutes } from "../../details/navigation";
 import { IDPayOnboardingRoutes } from "../../onboarding/navigation/navigator";
 import { IDPayPaymentRoutes } from "../../payment/navigation/navigator";
+import { AppParamsList } from "../../../../navigation/params/AppParamsList";
 
-export const idPayLinkingOptions: PathConfigMap = {
+export const idPayLinkingOptions: PathConfigMap<AppParamsList> = {
   /**
    * IDPay initiative onboarding
    */
diff --git a/ts/features/idpay/configuration/navigation/navigator.tsx b/ts/features/idpay/configuration/navigation/navigator.tsx
index 5ddfeed56fd..680e6e5ec9b 100644
--- a/ts/features/idpay/configuration/navigation/navigator.tsx
+++ b/ts/features/idpay/configuration/navigation/navigator.tsx
@@ -47,8 +47,7 @@ export const IDPayConfigurationNavigator = () => (
   <IDPayConfigurationMachineProvider>
     <Stack.Navigator
       initialRouteName={IDPayConfigurationRoutes.IDPAY_CONFIGURATION_INTRO}
-      headerMode={"none"}
-      screenOptions={{ gestureEnabled: isGestureEnabled }}
+      screenOptions={{ gestureEnabled: isGestureEnabled, headerShown: false }}
     >
       <Stack.Screen
         name={IDPayConfigurationRoutes.IDPAY_CONFIGURATION_INTRO}
diff --git a/ts/features/idpay/configuration/screens/InitiativeConfigurationIntroScreen.tsx b/ts/features/idpay/configuration/screens/InitiativeConfigurationIntroScreen.tsx
index a151fec7ea7..dc7b8a251ac 100644
--- a/ts/features/idpay/configuration/screens/InitiativeConfigurationIntroScreen.tsx
+++ b/ts/features/idpay/configuration/screens/InitiativeConfigurationIntroScreen.tsx
@@ -1,7 +1,3 @@
-import React from "react";
-import { RouteProp, useNavigation, useRoute } from "@react-navigation/native";
-import { View, SafeAreaView, ScrollView, StyleSheet } from "react-native";
-import { useActor } from "@xstate/react";
 import {
   Body,
   H1,
@@ -9,22 +5,25 @@ import {
   IOStyles,
   Icon,
   LabelSmall,
-  VSpacer
+  VSpacer,
+  useIOTheme
 } from "@pagopa/io-app-design-system";
+import { RouteProp, useNavigation, useRoute } from "@react-navigation/native";
+import { useActor } from "@xstate/react";
+import React from "react";
+import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
+import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay";
+import TouchableDefaultOpacity from "../../../../components/TouchableDefaultOpacity";
 import { H3 } from "../../../../components/core/typography/H3";
 import { H4 } from "../../../../components/core/typography/H4";
-import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay";
 import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
-import TouchableDefaultOpacity from "../../../../components/TouchableDefaultOpacity";
 import FooterWithButtons from "../../../../components/ui/FooterWithButtons";
+import I18n from "../../../../i18n";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
-import InstitutionIcon from "../../../../../img/features/idpay/institution.svg";
-import CreditCardIcon from "../../../../../img/features/idpay/creditcard.svg";
-import { useConfigurationMachineService } from "../xstate/provider";
 import { LOADING_TAG } from "../../../../xstate/utils";
-import I18n from "../../../../i18n";
-import { ConfigurationMode } from "../xstate/context";
 import { IDPayConfigurationParamsList } from "../navigation/navigator";
+import { ConfigurationMode } from "../xstate/context";
+import { useConfigurationMachineService } from "../xstate/provider";
 
 type InitiativeConfigurationIntroScreenRouteParams = {
   initiativeId: string;
@@ -64,6 +63,8 @@ const InitiativeConfigurationIntroScreen = () => {
   const configurationMachine = useConfigurationMachineService();
   const [state, send] = useActor(configurationMachine);
 
+  const theme = useIOTheme();
+
   const isLoading = state.tags.has(LOADING_TAG);
 
   const handleContinuePress = () => {
@@ -78,12 +79,24 @@ const InitiativeConfigurationIntroScreen = () => {
 
   const requiredDataItems: ReadonlyArray<RequiredDataItemProps> = [
     {
-      icon: <InstitutionIcon width={24} height={24} />,
+      icon: (
+        <Icon
+          name="institution"
+          size={24}
+          color={theme["interactiveElem-default"]}
+        />
+      ),
       title: I18n.t("idpay.configuration.intro.requiredData.ibanTitle"),
       subTitle: I18n.t("idpay.configuration.intro.requiredData.ibanSubtitle")
     },
     {
-      icon: <CreditCardIcon width={24} height={24} />,
+      icon: (
+        <Icon
+          name="creditCard"
+          size={24}
+          color={theme["interactiveElem-default"]}
+        />
+      ),
       title: I18n.t("idpay.configuration.intro.requiredData.instrumentTitle"),
       subTitle: I18n.t(
         "idpay.configuration.intro.requiredData.instrumentSubtitle"
diff --git a/ts/features/idpay/configuration/xstate/__tests__/actions.test.ts b/ts/features/idpay/configuration/xstate/__tests__/actions.test.ts
index 895f259b75a..57d5f37f112 100644
--- a/ts/features/idpay/configuration/xstate/__tests__/actions.test.ts
+++ b/ts/features/idpay/configuration/xstate/__tests__/actions.test.ts
@@ -1,6 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 import * as O from "fp-ts/lib/Option";
 import * as p from "@pagopa/ts-commons/lib/pot";
+import { IOToast } from "@pagopa/io-app-design-system";
 import { createActionsImplementation } from "../actions";
 import { ConfigurationMode, Context } from "../context";
 import {
@@ -12,7 +13,6 @@ import ROUTES from "../../../../../navigation/routes";
 import { IDPayDetailsRoutes } from "../../../details/navigation";
 import { InitiativeFailureType } from "../failure";
 import I18n from "../../../../../i18n";
-import { IOToast } from "../../../../../components/Toast";
 import { refreshSessionToken } from "../../../../fastLogin/store/actions/tokenRefreshActions";
 
 jest.mock("../../../../../utils/showToast", () => ({
@@ -45,7 +45,7 @@ const T_FAILURE = InitiativeFailureType.GENERIC;
 
 describe("IDPay Configuration machine actions", () => {
   const actions = createActionsImplementation(
-    navigation as IOStackNavigationProp<AppParamsList>,
+    navigation as IOStackNavigationProp<AppParamsList, keyof AppParamsList>,
     dispatch
   );
 
diff --git a/ts/features/idpay/configuration/xstate/actions.ts b/ts/features/idpay/configuration/xstate/actions.ts
index a12d9785196..c13a055d15c 100644
--- a/ts/features/idpay/configuration/xstate/actions.ts
+++ b/ts/features/idpay/configuration/xstate/actions.ts
@@ -1,6 +1,6 @@
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
-import { IOToast } from "../../../../components/Toast";
+import { IOToast } from "@pagopa/io-app-design-system";
 import I18n from "../../../../i18n";
 import {
   AppParamsList,
diff --git a/ts/features/idpay/configuration/xstate/provider.tsx b/ts/features/idpay/configuration/xstate/provider.tsx
index 840139ee51c..c8bd425a151 100644
--- a/ts/features/idpay/configuration/xstate/provider.tsx
+++ b/ts/features/idpay/configuration/xstate/provider.tsx
@@ -1,4 +1,3 @@
-import { useNavigation } from "@react-navigation/native";
 import { useInterpret } from "@xstate/react";
 import * as E from "fp-ts/lib/Either";
 import { pipe } from "fp-ts/lib/function";
@@ -16,10 +15,7 @@ import {
   pagoPaApiUrlPrefixTest
 } from "../../../../config";
 import { useXStateMachine } from "../../../../xstate/hooks/useXStateMachine";
-import {
-  AppParamsList,
-  IOStackNavigationProp
-} from "../../../../navigation/params/AppParamsList";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { sessionInfoSelector } from "../../../../store/reducers/authentication";
 import {
@@ -62,7 +58,7 @@ const IDPayConfigurationMachineProvider = (props: Props) => {
     O.getOrElse(() => PreferredLanguageEnum.it_IT)
   );
 
-  const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
+  const navigation = useIONavigation();
 
   if (O.isNone(sessionInfo)) {
     throw new Error("Session info is undefined");
diff --git a/ts/features/idpay/details/components/BeneficiaryDetailsContent.tsx b/ts/features/idpay/details/components/BeneficiaryDetailsContent.tsx
index 63a98432e36..19f7549fd7f 100644
--- a/ts/features/idpay/details/components/BeneficiaryDetailsContent.tsx
+++ b/ts/features/idpay/details/components/BeneficiaryDetailsContent.tsx
@@ -24,11 +24,11 @@ import {
   AppParamsList,
   IOStackNavigationProp
 } from "../../../../navigation/params/AppParamsList";
-import ROUTES from "../../../../navigation/routes";
 import { format } from "../../../../utils/dates";
 import { Table, TableRow } from "../../common/components/Table";
 import { formatNumberCurrencyOrDefault } from "../../common/utils/strings";
 import { IDPayUnsubscriptionRoutes } from "../../unsubscription/navigation/navigator";
+import { SERVICES_ROUTES } from "../../../services/navigation/routes";
 import {
   InitiativeRulesInfoBox,
   InitiativeRulesInfoBoxSkeleton
@@ -176,8 +176,8 @@ const BeneficiaryDetailsContent = (props: BeneficiaryDetailsProps) => {
       NonEmptyString.decode(beneficiaryDetails.serviceId),
       O.fromEither,
       O.map(serviceId =>
-        navigation.navigate(ROUTES.SERVICES_NAVIGATOR, {
-          screen: ROUTES.SERVICE_DETAIL,
+        navigation.navigate(SERVICES_ROUTES.SERVICES_NAVIGATOR, {
+          screen: SERVICES_ROUTES.SERVICE_DETAIL,
           params: { serviceId }
         })
       )
diff --git a/ts/features/idpay/details/components/InitiativeRulesInfoBox.tsx b/ts/features/idpay/details/components/InitiativeRulesInfoBox.tsx
index de39263b47f..fb4c2142526 100644
--- a/ts/features/idpay/details/components/InitiativeRulesInfoBox.tsx
+++ b/ts/features/idpay/details/components/InitiativeRulesInfoBox.tsx
@@ -13,7 +13,7 @@ import { Body } from "../../../../components/core/typography/Body";
 import { H4 } from "../../../../components/core/typography/H4";
 import { Link } from "../../../../components/core/typography/Link";
 import { IOStyles } from "../../../../components/core/variables/IOStyles";
-import Markdown from "../../../../components/ui/Markdown";
+import LegacyMarkdown from "../../../../components/ui/Markdown/LegacyMarkdown";
 import I18n from "../../../../i18n";
 import { useIOBottomSheetAutoresizableModal } from "../../../../utils/hooks/bottomSheet";
 
@@ -26,7 +26,7 @@ const InitiativeRulesInfoBox = (props: Props) => {
 
   const { bottomSheet, present, dismiss } = useIOBottomSheetAutoresizableModal(
     {
-      component: <Markdown>{content}</Markdown>,
+      component: <LegacyMarkdown>{content}</LegacyMarkdown>,
       title: I18n.t("idpay.initiative.beneficiaryDetails.infoModal.title"),
       footer: (
         <ContentWrapper>
diff --git a/ts/features/idpay/details/components/MissingConfigurationAlert.tsx b/ts/features/idpay/details/components/MissingConfigurationAlert.tsx
index 5e240c73e60..5d3ac8969cd 100644
--- a/ts/features/idpay/details/components/MissingConfigurationAlert.tsx
+++ b/ts/features/idpay/details/components/MissingConfigurationAlert.tsx
@@ -1,13 +1,14 @@
-import { useNavigation } from "@react-navigation/core";
 import React from "react";
 import { View } from "react-native";
 import { Alert, VSpacer } from "@pagopa/io-app-design-system";
+import { NavigatorScreenParams } from "@react-navigation/native";
 import { StatusEnum as InitiativeStatusEnum } from "../../../../../definitions/idpay/InitiativeDTO";
 import I18n from "../../../../i18n";
 import {
   IDPayConfigurationParamsList,
   IDPayConfigurationRoutes
 } from "../../configuration/navigation/navigator";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 
 type StatusWithAlert = Exclude<
   InitiativeStatusEnum,
@@ -22,7 +23,7 @@ type Props = {
 };
 
 const MissingConfigurationAlert = (props: Props) => {
-  const navigation = useNavigation();
+  const navigation = useIONavigation();
 
   const { status, initiativeId } = props;
 
@@ -46,11 +47,11 @@ const MissingConfigurationAlert = (props: Props) => {
 
   const handleNavigation = () => {
     navigation.navigate(IDPayConfigurationRoutes.IDPAY_CONFIGURATION_MAIN, {
-      screen: screen[status],
+      screen: screen[status] as keyof IDPayConfigurationParamsList,
       params: {
         initiativeId
       }
-    });
+    } as NavigatorScreenParams<IDPayConfigurationParamsList>);
   };
 
   return (
diff --git a/ts/features/idpay/details/components/TimelineOperationListItem.tsx b/ts/features/idpay/details/components/TimelineOperationListItem.tsx
index 4199efb050b..edd27489c2b 100644
--- a/ts/features/idpay/details/components/TimelineOperationListItem.tsx
+++ b/ts/features/idpay/details/components/TimelineOperationListItem.tsx
@@ -48,7 +48,7 @@ import {
 import I18n from "../../../../i18n";
 import { hoursAndMinutesToAccessibilityReadableFormat } from "../../../../utils/accessibility";
 import { localeDateFormat } from "../../../../utils/locale";
-import { getBadgeTextByTransactionStatus } from "../../../walletV3/common/utils";
+import { getBadgeTextByTransactionStatus } from "../../../payments/common/utils";
 import { formatAbsNumberAmountOrDefault } from "../../common/utils/strings";
 
 export type TimelineOperationListItemProps = WithTestID<
diff --git a/ts/features/idpay/details/screens/IdPayOperationsListScreen.tsx b/ts/features/idpay/details/screens/IdPayOperationsListScreen.tsx
index db3e6ae36bd..50708d42147 100644
--- a/ts/features/idpay/details/screens/IdPayOperationsListScreen.tsx
+++ b/ts/features/idpay/details/screens/IdPayOperationsListScreen.tsx
@@ -2,6 +2,7 @@ import {
   ContentWrapper,
   Divider,
   HSpacer,
+  IOToast,
   VSpacer
 } from "@pagopa/io-app-design-system";
 import { useRoute } from "@react-navigation/core";
@@ -12,7 +13,6 @@ import React from "react";
 import { ActivityIndicator, FlatList, StyleSheet } from "react-native";
 import Placeholder from "rn-placeholder";
 import { OperationListDTO } from "../../../../../definitions/idpay/OperationListDTO";
-import { IOToast } from "../../../../components/Toast";
 import { Body } from "../../../../components/core/typography/Body";
 import { RNavScreenWithLargeHeader } from "../../../../components/ui/RNavScreenWithLargeHeader";
 import I18n from "../../../../i18n";
@@ -130,9 +130,11 @@ export const IdPayOperationsListScreen = () => {
 
   return (
     <RNavScreenWithLargeHeader
-      title={I18n.t(
-        "idpay.initiative.details.initiativeDetailsScreen.configured.operationsList.title"
-      )}
+      title={{
+        label: I18n.t(
+          "idpay.initiative.details.initiativeDetailsScreen.configured.operationsList.title"
+        )
+      }}
     >
       <ContentWrapper>
         <VSpacer size={8} />
diff --git a/ts/features/idpay/onboarding/components/OnboardingDescriptionMarkdown.tsx b/ts/features/idpay/onboarding/components/OnboardingDescriptionMarkdown.tsx
index 70e7cf8d6ed..52aa30f4632 100644
--- a/ts/features/idpay/onboarding/components/OnboardingDescriptionMarkdown.tsx
+++ b/ts/features/idpay/onboarding/components/OnboardingDescriptionMarkdown.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { View } from "react-native";
 import Placeholder from "rn-placeholder";
 import { VSpacer } from "@pagopa/io-app-design-system";
-import Markdown from "../../../../components/ui/Markdown";
+import LegacyMarkdown from "../../../../components/ui/Markdown/LegacyMarkdown";
 
 type Props = {
   description: string;
@@ -28,7 +28,9 @@ const OnboardingDescriptionMarkdown = (props: Props) => {
     return (
       <View style={{ flexGrow: 1 }}>
         {!isLoaded && <OnboardingDescriptionMarkdownSkeleton />}
-        <Markdown onLoadEnd={handleOnLoadEnd}>{description}</Markdown>
+        <LegacyMarkdown onLoadEnd={handleOnLoadEnd}>
+          {description}
+        </LegacyMarkdown>
       </View>
     );
   }
diff --git a/ts/features/idpay/onboarding/navigation/navigator.tsx b/ts/features/idpay/onboarding/navigation/navigator.tsx
index 1356290a946..40c72636c7b 100644
--- a/ts/features/idpay/onboarding/navigation/navigator.tsx
+++ b/ts/features/idpay/onboarding/navigation/navigator.tsx
@@ -43,8 +43,7 @@ export const IDPayOnboardingNavigator = () => (
       initialRouteName={
         IDPayOnboardingRoutes.IDPAY_ONBOARDING_INITIATIVE_DETAILS
       }
-      headerMode={"none"}
-      screenOptions={{ gestureEnabled: isGestureEnabled }}
+      screenOptions={{ gestureEnabled: isGestureEnabled, headerShown: false }}
     >
       <Stack.Screen
         name={IDPayOnboardingRoutes.IDPAY_ONBOARDING_INITIATIVE_DETAILS}
diff --git a/ts/features/idpay/onboarding/screens/PDNDPrerequisitesScreen.tsx b/ts/features/idpay/onboarding/screens/PDNDPrerequisitesScreen.tsx
index 390fd66b6d6..fb65c24b887 100644
--- a/ts/features/idpay/onboarding/screens/PDNDPrerequisitesScreen.tsx
+++ b/ts/features/idpay/onboarding/screens/PDNDPrerequisitesScreen.tsx
@@ -17,11 +17,11 @@ import { H1 } from "../../../../components/core/typography/H1";
 import { IOStyles } from "../../../../components/core/variables/IOStyles";
 import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
 import FooterWithButtons from "../../../../components/ui/FooterWithButtons";
-import Markdown from "../../../../components/ui/Markdown";
+import LegacyMarkdown from "../../../../components/ui/Markdown/LegacyMarkdown";
 import { useNavigationSwipeBackListener } from "../../../../hooks/useNavigationSwipeBackListener";
 import I18n from "../../../../i18n";
 import { useIOSelector } from "../../../../store/hooks";
-import { serviceByIdSelector } from "../../../../store/reducers/entities/services/servicesById";
+import { serviceByIdPotSelector } from "../../../services/store/reducers/servicesById";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
 import { useIOBottomSheetAutoresizableModal } from "../../../../utils/hooks/bottomSheet";
 import { getPDNDCriteriaDescription } from "../utils/strings";
@@ -51,7 +51,9 @@ export const PDNDPrerequisitesScreen = () => {
   const serviceId = useSelector(machine, selectServiceId);
 
   const serviceName = pipe(
-    useIOSelector(state => serviceByIdSelector(state, serviceId as ServiceId)),
+    useIOSelector(state =>
+      serviceByIdPotSelector(state, serviceId as ServiceId)
+    ),
     pot.toOption,
     O.fold(
       () => I18n.t("idpay.onboarding.PDNDPrerequisites.fallbackInitiativeName"),
@@ -69,14 +71,14 @@ export const PDNDPrerequisitesScreen = () => {
         "idpay.onboarding.PDNDPrerequisites.prerequisites.info.header"
       ),
       component: (
-        <Markdown>
+        <LegacyMarkdown>
           {I18n.t(
             "idpay.onboarding.PDNDPrerequisites.prerequisites.info.body",
             {
               provider: authority
             }
           )}
-        </Markdown>
+        </LegacyMarkdown>
       ),
       footer: (
         <ContentWrapper>
diff --git a/ts/features/idpay/onboarding/xstate/__tests__/actions.test.ts b/ts/features/idpay/onboarding/xstate/__tests__/actions.test.ts
index 772195a5b91..40698389315 100644
--- a/ts/features/idpay/onboarding/xstate/__tests__/actions.test.ts
+++ b/ts/features/idpay/onboarding/xstate/__tests__/actions.test.ts
@@ -54,8 +54,11 @@ const T_INITIATIVE_INFO_DTO: InitiativeDataDTO = {
 
 describe("IDPay Onboarding machine actions", () => {
   const actions = createActionsImplementation(
-    rootNavigation as IOStackNavigationProp<AppParamsList>,
-    onboardingNavigation as IDPayOnboardingStackNavigationProp<IDPayOnboardingParamsList>,
+    rootNavigation as IOStackNavigationProp<AppParamsList, keyof AppParamsList>,
+    onboardingNavigation as IDPayOnboardingStackNavigationProp<
+      IDPayOnboardingParamsList,
+      keyof IDPayOnboardingParamsList
+    >,
     dispatch
   );
 
diff --git a/ts/features/idpay/onboarding/xstate/provider.tsx b/ts/features/idpay/onboarding/xstate/provider.tsx
index 8eb86422cc9..6f42814cdea 100644
--- a/ts/features/idpay/onboarding/xstate/provider.tsx
+++ b/ts/features/idpay/onboarding/xstate/provider.tsx
@@ -9,10 +9,7 @@ import {
   idPayApiUatBaseUrl,
   idPayTestToken
 } from "../../../../config";
-import {
-  AppParamsList,
-  IOStackNavigationProp
-} from "../../../../navigation/params/AppParamsList";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { sessionInfoSelector } from "../../../../store/reducers/authentication";
 import {
@@ -54,10 +51,13 @@ const IDPayOnboardingMachineProvider = (props: Props) => {
 
   const sessionInfo = useIOSelector(sessionInfoSelector);
 
-  const rootNavigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
+  const rootNavigation = useIONavigation();
   const onboardingNavigation =
     useNavigation<
-      IDPayOnboardingStackNavigationProp<IDPayOnboardingParamsList>
+      IDPayOnboardingStackNavigationProp<
+        IDPayOnboardingParamsList,
+        keyof IDPayOnboardingParamsList
+      >
     >();
 
   if (O.isNone(sessionInfo)) {
diff --git a/ts/features/idpay/payment/navigation/navigator.tsx b/ts/features/idpay/payment/navigation/navigator.tsx
index d2e1aef52ed..1f78fc47a2c 100644
--- a/ts/features/idpay/payment/navigation/navigator.tsx
+++ b/ts/features/idpay/payment/navigation/navigator.tsx
@@ -32,8 +32,7 @@ export const IDPayPaymentNavigator = () => (
   <IDPayPaymentMachineProvider>
     <Stack.Navigator
       initialRouteName={IDPayPaymentRoutes.IDPAY_PAYMENT_CODE_INPUT}
-      headerMode={"none"}
-      screenOptions={{ gestureEnabled: false }}
+      screenOptions={{ gestureEnabled: false, headerShown: false }}
     >
       <Stack.Screen
         name={IDPayPaymentRoutes.IDPAY_PAYMENT_CODE_INPUT}
diff --git a/ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx b/ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx
index da8f9f017ac..2f061bacc3b 100644
--- a/ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx
+++ b/ts/features/idpay/payment/screens/IDPayPaymentCodeInputScreen.tsx
@@ -1,5 +1,6 @@
 import {
   FooterWithButtons,
+  IOColors,
   IOStyles,
   IOVisualCostants,
   TextInput,
@@ -46,7 +47,11 @@ const IDPayPaymentCodeInputScreen = () => {
 
   return (
     <BaseScreenComponent goBack={true} contextualHelp={emptyContextualHelp}>
-      <StatusBar barStyle={"dark-content"} translucent={false} />
+      <StatusBar
+        barStyle={"dark-content"}
+        translucent={false}
+        backgroundColor={IOColors.white}
+      />
       <SafeAreaView style={IOStyles.flex}>
         <View style={styles.wrapper}>
           <H1>{I18n.t("idpay.payment.manualInput.title")}</H1>
diff --git a/ts/features/idpay/payment/screens/IDPayPaymentCodeScanScreen.tsx b/ts/features/idpay/payment/screens/IDPayPaymentCodeScanScreen.tsx
index 8b17a364edb..eaed669f2bf 100644
--- a/ts/features/idpay/payment/screens/IDPayPaymentCodeScanScreen.tsx
+++ b/ts/features/idpay/payment/screens/IDPayPaymentCodeScanScreen.tsx
@@ -4,7 +4,7 @@ import { Alert } from "react-native";
 import ReactNativeHapticFeedback, {
   HapticFeedbackTypes
 } from "react-native-haptic-feedback";
-import { IOToast } from "../../../../components/Toast";
+import { IOToast } from "@pagopa/io-app-design-system";
 import { useOpenDeepLink } from "../../../../hooks/useOpenDeepLink";
 import I18n from "../../../../i18n";
 import {
diff --git a/ts/features/idpay/payment/xstate/provider.tsx b/ts/features/idpay/payment/xstate/provider.tsx
index 8c05923eda9..0f058dc5767 100644
--- a/ts/features/idpay/payment/xstate/provider.tsx
+++ b/ts/features/idpay/payment/xstate/provider.tsx
@@ -1,4 +1,3 @@
-import { useNavigation } from "@react-navigation/native";
 import { useInterpret } from "@xstate/react";
 import * as O from "fp-ts/lib/Option";
 import React from "react";
@@ -9,10 +8,7 @@ import {
   idPayTestToken
 } from "../../../../config";
 import { useXStateMachine } from "../../../../xstate/hooks/useXStateMachine";
-import {
-  AppParamsList,
-  IOStackNavigationProp
-} from "../../../../navigation/params/AppParamsList";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { sessionInfoSelector } from "../../../../store/reducers/authentication";
 import { isPagoPATestEnabledSelector } from "../../../../store/reducers/persistedPreferences";
@@ -38,7 +34,7 @@ const IDPayPaymentMachineProvider = (props: Props) => {
   const sessionInfo = useIOSelector(sessionInfoSelector);
   const isPagoPATestEnabled = useIOSelector(isPagoPATestEnabledSelector);
 
-  const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
+  const navigation = useIONavigation();
 
   if (O.isNone(sessionInfo)) {
     throw new Error("Session info is undefined");
diff --git a/ts/features/idpay/unsubscription/navigation/navigator.tsx b/ts/features/idpay/unsubscription/navigation/navigator.tsx
index 7460468f989..bc7ea864e67 100644
--- a/ts/features/idpay/unsubscription/navigation/navigator.tsx
+++ b/ts/features/idpay/unsubscription/navigation/navigator.tsx
@@ -46,7 +46,7 @@ export const IDPayUnsubscriptionNavigator = () => {
         initialRouteName={
           IDPayUnsubscriptionRoutes.IDPAY_UNSUBSCRIPTION_CONFIRMATION
         }
-        headerMode={"none"}
+        screenOptions={{ headerShown: false }}
       >
         <Stack.Screen
           name={IDPayUnsubscriptionRoutes.IDPAY_UNSUBSCRIPTION_CONFIRMATION}
diff --git a/ts/features/idpay/unsubscription/xstate/provider.tsx b/ts/features/idpay/unsubscription/xstate/provider.tsx
index 39be233b996..e58bee423b3 100644
--- a/ts/features/idpay/unsubscription/xstate/provider.tsx
+++ b/ts/features/idpay/unsubscription/xstate/provider.tsx
@@ -1,4 +1,3 @@
-import { useNavigation } from "@react-navigation/native";
 import { useInterpret } from "@xstate/react";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
@@ -12,10 +11,7 @@ import {
   idPayTestToken
 } from "../../../../config";
 import { useXStateMachine } from "../../../../xstate/hooks/useXStateMachine";
-import {
-  AppParamsList,
-  IOStackNavigationProp
-} from "../../../../navigation/params/AppParamsList";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { sessionInfoSelector } from "../../../../store/reducers/authentication";
 import {
@@ -67,7 +63,7 @@ const IDPayUnsubscriptionMachineProvider = (props: Props) => {
     O.getOrElse(() => PreferredLanguageEnum.it_IT)
   );
 
-  const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
+  const navigation = useIONavigation();
 
   if (O.isNone(sessionInfo)) {
     throw new Error("Session info is undefined");
diff --git a/ts/features/idpay/wallet/components/IdPayCard.tsx b/ts/features/idpay/wallet/components/IdPayCard.tsx
new file mode 100644
index 00000000000..1489d87709a
--- /dev/null
+++ b/ts/features/idpay/wallet/components/IdPayCard.tsx
@@ -0,0 +1,84 @@
+import {
+  Avatar,
+  H3,
+  H6,
+  LabelSmallAlt,
+  VSpacer
+} from "@pagopa/io-app-design-system";
+import { format } from "date-fns";
+import React from "react";
+import { ImageURISource, StyleSheet, View } from "react-native";
+import WalletCardShape from "../../../../../img/features/idpay/wallet_card.svg";
+import I18n from "../../../../i18n";
+import { formatNumberAmount } from "../../../../utils/stringBuilder";
+
+export type IdPayCardProps = {
+  name: string;
+  avatarSource: ImageURISource;
+  amount: number;
+  expireDate: Date;
+};
+
+/**
+ * Component that renders the ID PAy card in the wallet
+ */
+export const IdPayCard = (props: IdPayCardProps) => (
+  <View style={styles.container}>
+    <View style={styles.card}>
+      <WalletCardShape />
+    </View>
+    <View style={styles.content}>
+      <View>
+        <View style={styles.header}>
+          <H6
+            color="blueItalia-850"
+            ellipsizeMode="tail"
+            numberOfLines={1}
+            style={{
+              width: "80%"
+            }}
+          >
+            {props.name}
+          </H6>
+          <Avatar size="small" logoUri={props.avatarSource} />
+        </View>
+        <VSpacer size={16} />
+        <LabelSmallAlt>Disponibile</LabelSmallAlt>
+        <H3 color="blueItalia-500">
+          {formatNumberAmount(props.amount, true, "right")}
+        </H3>
+      </View>
+      <LabelSmallAlt color="blueItalia-850">
+        {I18n.t("bonusCard.validUntil", {
+          endDate: format(props.expireDate, "MM/YY")
+        })}
+      </LabelSmallAlt>
+    </View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    aspectRatio: 16 / 10
+  },
+  card: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0
+  },
+  content: {
+    flex: 1,
+    paddingTop: 12,
+    paddingRight: 12,
+    paddingBottom: 16,
+    paddingLeft: 16,
+    justifyContent: "space-between"
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  }
+});
diff --git a/ts/features/idpay/wallet/components/IdPayWalletCard.tsx b/ts/features/idpay/wallet/components/IdPayWalletCard.tsx
new file mode 100644
index 00000000000..1c6770b2f2a
--- /dev/null
+++ b/ts/features/idpay/wallet/components/IdPayWalletCard.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { Pressable } from "react-native";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { withWalletCardBaseComponent } from "../../../newWallet/components/WalletCardBaseComponent";
+import { IDPayDetailsRoutes } from "../../details/navigation";
+import { IdPayCard, IdPayCardProps } from "./IdPayCard";
+
+export type IdPayWalletCardProps = IdPayCardProps & {
+  initiativeId: string;
+};
+
+const WrappedIdPayCard = (props: IdPayWalletCardProps) => {
+  const navigation = useIONavigation();
+
+  const { initiativeId, ...cardProps } = props;
+
+  const handleOnPress = () => {
+    navigation.navigate(IDPayDetailsRoutes.IDPAY_DETAILS_MAIN, {
+      screen: IDPayDetailsRoutes.IDPAY_DETAILS_MONITORING,
+      params: {
+        initiativeId
+      }
+    });
+  };
+
+  return (
+    <Pressable onPress={handleOnPress}>
+      <IdPayCard {...cardProps} />
+    </Pressable>
+  );
+};
+
+/**
+ * Wrapper component which adds wallet capabilites to the IdPayCard component
+ */
+export const IdPayWalletCard = withWalletCardBaseComponent(WrappedIdPayCard);
diff --git a/ts/features/idpay/wallet/components/__tests__/IdPayCard.test.tsx b/ts/features/idpay/wallet/components/__tests__/IdPayCard.test.tsx
new file mode 100644
index 00000000000..9d511d920eb
--- /dev/null
+++ b/ts/features/idpay/wallet/components/__tests__/IdPayCard.test.tsx
@@ -0,0 +1,19 @@
+import { render } from "@testing-library/react-native";
+import * as React from "react";
+import { IdPayCard } from "../IdPayCard";
+
+describe("IdPayCard", () => {
+  it("should match the snapshot", () => {
+    const component = render(
+      <IdPayCard
+        name="18 app"
+        amount={9999}
+        avatarSource={{
+          uri: "https://vtlogo.com/wp-content/uploads/2021/08/18app-vector-logo.png"
+        }}
+        expireDate={new Date(2023, 11, 2)}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/ts/features/idpay/wallet/components/__tests__/__snapshots__/IdPayCard.test.tsx.snap b/ts/features/idpay/wallet/components/__tests__/__snapshots__/IdPayCard.test.tsx.snap
new file mode 100644
index 00000000000..9ff519e0e87
--- /dev/null
+++ b/ts/features/idpay/wallet/components/__tests__/__snapshots__/IdPayCard.test.tsx.snap
@@ -0,0 +1,234 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IdPayCard should match the snapshot 1`] = `
+<View
+  style={
+    Object {
+      "aspectRatio": 1.6,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <SvgMock />
+  </View>
+  <View
+    style={
+      Object {
+        "flex": 1,
+        "justifyContent": "space-between",
+        "paddingBottom": 16,
+        "paddingLeft": 16,
+        "paddingRight": 12,
+        "paddingTop": 12,
+      }
+    }
+  >
+    <View>
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          }
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          color="blueItalia-850"
+          defaultColor="black"
+          defaultWeight="SemiBold"
+          ellipsizeMode="tail"
+          font="TitilliumWeb"
+          fontStyle={
+            Object {
+              "fontSize": 18,
+              "lineHeight": 25,
+            }
+          }
+          numberOfLines={1}
+          style={
+            Array [
+              Object {
+                "width": "80%",
+              },
+              Object {
+                "fontSize": 18,
+                "lineHeight": 25,
+              },
+              Object {
+                "color": "#001F3D",
+                "fontFamily": "Titillium Web",
+                "fontStyle": "normal",
+                "fontWeight": "600",
+              },
+            ]
+          }
+          weight="SemiBold"
+        >
+          18 app
+        </Text>
+        <View
+          accessibilityIgnoresInvertColors={true}
+          style={
+            Array [
+              Object {
+                "borderColor": "rgba(14,15,19,0.1)",
+                "borderCurve": "continuous",
+                "borderWidth": 1,
+                "overflow": "hidden",
+              },
+              Object {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": 8,
+                "height": 44,
+                "padding": 6,
+                "width": 44,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderCurve": "continuous",
+                  "overflow": "hidden",
+                },
+                Object {
+                  "borderRadius": 2,
+                },
+              ]
+            }
+          >
+            <Image
+              accessibilityIgnoresInvertColors={true}
+              onError={[Function]}
+              source={
+                Object {
+                  "uri": "https://vtlogo.com/wp-content/uploads/2021/08/18app-vector-logo.png",
+                }
+              }
+              style={
+                Object {
+                  "height": "100%",
+                  "resizeMode": "contain",
+                  "width": "100%",
+                }
+              }
+            />
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          Object {
+            "height": 16,
+          }
+        }
+      />
+      <Text
+        allowFontScaling={false}
+        color="black"
+        defaultColor="black"
+        defaultWeight="SemiBold"
+        font="TitilliumWeb"
+        fontStyle={
+          Object {
+            "fontSize": 16,
+            "lineHeight": 21,
+          }
+        }
+        style={
+          Array [
+            Object {
+              "fontSize": 16,
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "#0E0F13",
+              "fontFamily": "Titillium Web",
+              "fontStyle": "normal",
+              "fontWeight": "600",
+            },
+          ]
+        }
+        weight="SemiBold"
+      >
+        Disponibile
+      </Text>
+      <Text
+        allowFontScaling={false}
+        color="blueItalia-500"
+        defaultColor="bluegreyDark"
+        defaultWeight="SemiBold"
+        font="TitilliumWeb"
+        fontStyle={
+          Object {
+            "fontSize": 24,
+            "lineHeight": 34,
+          }
+        }
+        style={
+          Array [
+            Object {
+              "fontSize": 24,
+              "lineHeight": 34,
+            },
+            Object {
+              "color": "#0066CC",
+              "fontFamily": "Titillium Web",
+              "fontStyle": "normal",
+              "fontWeight": "600",
+            },
+          ]
+        }
+        weight="SemiBold"
+      >
+        9,999.00 €
+      </Text>
+    </View>
+    <Text
+      allowFontScaling={false}
+      color="blueItalia-850"
+      defaultColor="black"
+      defaultWeight="SemiBold"
+      font="TitilliumWeb"
+      fontStyle={
+        Object {
+          "fontSize": 16,
+          "lineHeight": 21,
+        }
+      }
+      style={
+        Array [
+          Object {
+            "fontSize": 16,
+            "lineHeight": 21,
+          },
+          Object {
+            "color": "#001F3D",
+            "fontFamily": "Titillium Web",
+            "fontStyle": "normal",
+            "fontWeight": "600",
+          },
+        ]
+      }
+      weight="SemiBold"
+    >
+      Valida fino al 12/23
+    </Text>
+  </View>
+</View>
+`;
diff --git a/ts/features/idpay/wallet/saga/__test__/handleGetWallet.test.ts b/ts/features/idpay/wallet/saga/__test__/handleGetWallet.test.ts
index 8098858ebb6..1be5a0479d5 100644
--- a/ts/features/idpay/wallet/saga/__test__/handleGetWallet.test.ts
+++ b/ts/features/idpay/wallet/saga/__test__/handleGetWallet.test.ts
@@ -6,6 +6,7 @@ import { WalletDTO } from "../../../../../../definitions/idpay/WalletDTO";
 import { withRefreshApiCall } from "../../../../fastLogin/saga/utils";
 import { idPayWalletGet } from "../../store/actions";
 import { handleGetIDPayWallet } from "../handleGetWallet";
+import { walletAddCards } from "../../../../newWallet/store/actions/cards";
 
 const mockedWallet: WalletDTO = { initiativeList: [] };
 
@@ -25,6 +26,8 @@ describe("handleGetIDPayWallet", () => {
         .next()
         .call(withRefreshApiCall, getWallet(), idPayWalletGet.request())
         .next(E.right({ status: 200, value: mockedWallet }))
+        .put(walletAddCards([]))
+        .next()
         .put(idPayWalletGet.success(mockedWallet))
         .next()
         .isDone();
diff --git a/ts/features/idpay/wallet/saga/handleGetWallet.ts b/ts/features/idpay/wallet/saga/handleGetWallet.ts
index 5eca064526f..593dfc0d062 100644
--- a/ts/features/idpay/wallet/saga/handleGetWallet.ts
+++ b/ts/features/idpay/wallet/saga/handleGetWallet.ts
@@ -8,6 +8,7 @@ import { readablePrivacyReport } from "../../../../utils/reporters";
 import { withRefreshApiCall } from "../../../fastLogin/saga/utils";
 import { IDPayClient } from "../../common/api/client";
 import { idPayWalletGet } from "../store/actions";
+import { walletAddCards } from "../../../newWallet/store/actions/cards";
 
 /**
  * Handle the remote call to retrieve the IDPay wallet
@@ -35,7 +36,24 @@ export function* handleGetIDPayWallet(
     if (E.isRight(getWalletResult)) {
       if (getWalletResult.right.status === 200) {
         // handled success
-        yield* put(idPayWalletGet.success(getWalletResult.right.value));
+        const initiatives = getWalletResult.right.value;
+        yield* put(
+          walletAddCards(
+            initiatives.initiativeList.map(initiative => ({
+              type: "idPay",
+              category: "bonus",
+              key: `idpay_${initiative.initiativeId}`,
+              initiativeId: initiative.initiativeId,
+              name: initiative.initiativeName || "",
+              amount: initiative.amount || 0,
+              avatarSource: {
+                uri: initiative.logoURL
+              },
+              expireDate: initiative.endDate
+            }))
+          )
+        );
+        yield* put(idPayWalletGet.success(initiatives));
         return;
       }
       // not handled error codes
diff --git a/ts/features/idpay/wallet/screens/IdPayInstrumentInitiativesScreen.tsx b/ts/features/idpay/wallet/screens/IdPayInstrumentInitiativesScreen.tsx
index f65801060b5..2c67989077e 100644
--- a/ts/features/idpay/wallet/screens/IdPayInstrumentInitiativesScreen.tsx
+++ b/ts/features/idpay/wallet/screens/IdPayInstrumentInitiativesScreen.tsx
@@ -5,14 +5,13 @@ import { pipe } from "fp-ts/lib/function";
 import React from "react";
 import { ScrollView, StyleSheet, View } from "react-native";
 import { HSpacer, VSpacer } from "@pagopa/io-app-design-system";
+import { Route, useRoute } from "@react-navigation/native";
 import { H1 } from "../../../../components/core/typography/H1";
 import { H4 } from "../../../../components/core/typography/H4";
 import { IOStyles } from "../../../../components/core/variables/IOStyles";
 import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
 import { LogoPaymentWithFallback } from "../../../../components/ui/utils/components/LogoPaymentWithFallback";
 import TypedI18n from "../../../../i18n";
-import { IOStackNavigationRouteProps } from "../../../../navigation/params/AppParamsList";
-import { WalletParamsList } from "../../../../navigation/params/WalletParamsList";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import customVariables from "../../../../theme/variables";
 import { IdPayInstrumentInitiativesList } from "../components/IdPayInstrumentInitiativesList";
@@ -26,13 +25,14 @@ export type IdPayInstrumentInitiativesScreenRouteParams = {
   idWallet: string;
 };
 
-type Props = IOStackNavigationRouteProps<
-  WalletParamsList,
-  "WALLET_IDPAY_INITIATIVE_LIST"
->;
-
-export const IdPayInstrumentInitiativesScreen = (props: Props) => {
-  const { idWallet } = props.route.params;
+export const IdPayInstrumentInitiativesScreen = () => {
+  const { idWallet } =
+    useRoute<
+      Route<
+        "WALLET_IDPAY_INITIATIVE_LIST",
+        IdPayInstrumentInitiativesScreenRouteParams
+      >
+    >().params;
   const dispatch = useIODispatch();
   const initiatives = useIOSelector(idPayInitiativesFromInstrumentSelector);
 
diff --git a/ts/features/lollipop/playgrounds/LollipopPlayground.tsx b/ts/features/lollipop/playgrounds/LollipopPlayground.tsx
index f3a43ca6fc1..0d0e0fb16ba 100644
--- a/ts/features/lollipop/playgrounds/LollipopPlayground.tsx
+++ b/ts/features/lollipop/playgrounds/LollipopPlayground.tsx
@@ -1,23 +1,23 @@
-import * as O from "fp-ts/lib/Option";
+import { ContentWrapper } from "@pagopa/io-app-design-system";
 import * as E from "fp-ts/lib/Either";
+import * as O from "fp-ts/lib/Option";
 import * as TE from "fp-ts/lib/TaskEither";
 import { pipe } from "fp-ts/lib/function";
 import React, { useCallback } from "react";
 import { SafeAreaView, ScrollView } from "react-native";
-import { ContentWrapper } from "@pagopa/io-app-design-system";
-import BaseScreenComponent from "../../../components/screens/BaseScreenComponent";
+import { ProblemJson } from "../../../../definitions/lollipop/ProblemJson";
+import { SignMessageResponse } from "../../../../definitions/lollipop/SignMessageResponse";
 import { IOStyles } from "../../../components/core/variables/IOStyles";
+import { apiUrlPrefix } from "../../../config";
+import { useHeaderSecondLevel } from "../../../hooks/useHeaderSecondLevel";
+import { useIOSelector } from "../../../store/hooks";
 import { sessionTokenSelector } from "../../../store/reducers/authentication";
 import { createLollipopClient, signMessage } from "../api/backend";
-import { useIOSelector } from "../../../store/hooks";
 import {
   lollipopKeyTagSelector,
   lollipopPublicKeySelector
 } from "../store/reducers/lollipop";
 import { toThumbprint } from "../utils/crypto";
-import { apiUrlPrefix } from "../../../config";
-import { SignMessageResponse } from "../../../../definitions/lollipop/SignMessageResponse";
-import { ProblemJson } from "../../../../definitions/lollipop/ProblemJson";
 import LollipopPlaygroundContent from "./LollipopPlaygroundContent";
 
 export type LollipopPlaygroundState = {
@@ -39,6 +39,10 @@ const LollipopPlayground = () => {
   const maybePublicKey = useIOSelector(lollipopPublicKeySelector);
   const maybeSessionToken = O.fromNullable(useIOSelector(sessionTokenSelector));
 
+  useHeaderSecondLevel({
+    title: "Lollipop Playground"
+  });
+
   const lollipopClient = useCallback(
     (signBody: boolean) =>
       pipe(
@@ -125,29 +129,27 @@ const LollipopPlayground = () => {
   );
 
   return (
-    <BaseScreenComponent goBack={true} headerTitle={"Lollipop Playground"}>
-      <SafeAreaView style={IOStyles.flex}>
-        <ScrollView>
-          <ContentWrapper>
-            <LollipopPlaygroundContent
-              onSignButtonPress={body =>
-                onSignButtonPress(body, state.doSignBody)
-              }
-              onCheckBoxPress={v => {
-                setState({
-                  ...state,
-                  doSignBody: v
-                });
-              }}
-              onClearButtonPress={() => {
-                setState(INITIAL_STATE);
-              }}
-              playgroundState={state}
-            />
-          </ContentWrapper>
-        </ScrollView>
-      </SafeAreaView>
-    </BaseScreenComponent>
+    <SafeAreaView style={IOStyles.flex}>
+      <ScrollView>
+        <ContentWrapper>
+          <LollipopPlaygroundContent
+            onSignButtonPress={body =>
+              onSignButtonPress(body, state.doSignBody)
+            }
+            onCheckBoxPress={v => {
+              setState({
+                ...state,
+                doSignBody: v
+              });
+            }}
+            onClearButtonPress={() => {
+              setState(INITIAL_STATE);
+            }}
+            playgroundState={state}
+          />
+        </ContentWrapper>
+      </ScrollView>
+    </SafeAreaView>
   );
 };
 
diff --git a/ts/features/lollipop/playgrounds/LollipopPlaygroundContent.tsx b/ts/features/lollipop/playgrounds/LollipopPlaygroundContent.tsx
index cb820043047..c87c1853102 100644
--- a/ts/features/lollipop/playgrounds/LollipopPlaygroundContent.tsx
+++ b/ts/features/lollipop/playgrounds/LollipopPlaygroundContent.tsx
@@ -1,26 +1,27 @@
-import * as O from "fp-ts/lib/Option";
-import React from "react";
-import { View, StyleSheet, TextInput } from "react-native";
 import {
   Alert,
   ButtonOutline,
   ButtonSolid,
+  CheckboxLabel,
   HSpacer,
+  IOColors,
   VSpacer
 } from "@pagopa/io-app-design-system";
-import { CheckBox } from "../../../components/core/selection/checkbox/CheckBox";
-import { Label } from "../../../components/core/typography/Label";
-import { maybeNotNullyString } from "../../../utils/strings";
+import * as O from "fp-ts/lib/Option";
+import React from "react";
+import { StyleSheet, TextInput, View } from "react-native";
 import { WithTestID } from "../../../types/WithTestID";
+import { maybeNotNullyString } from "../../../utils/strings";
 import { LollipopPlaygroundState } from "./LollipopPlayground";
 
 const styles = StyleSheet.create({
   textInput: {
     textAlignVertical: "top", // Prop supported on Android only
-    padding: 10,
+    padding: 12,
     borderWidth: 1,
     height: 120,
-    borderRadius: 4
+    borderRadius: 8,
+    borderColor: IOColors["grey-450"]
   },
   column: {
     flexDirection: "column",
@@ -64,12 +65,11 @@ const LollipopPlaygroundContent = (props: Props) => {
       />
       <VSpacer size={16} />
       <View style={styles.rowStart}>
-        <CheckBox
+        <CheckboxLabel
           checked={props.playgroundState.doSignBody}
           onValueChange={props.onCheckBoxPress}
+          label="Sign body"
         />
-        <HSpacer />
-        <Label>{"Sign body"}</Label>
       </View>
       <VSpacer size={16} />
       <View style={styles.row}>
diff --git a/ts/features/lollipop/utils/crypto.ts b/ts/features/lollipop/utils/crypto.ts
index 469fbb2eb99..135f16d2842 100644
--- a/ts/features/lollipop/utils/crypto.ts
+++ b/ts/features/lollipop/utils/crypto.ts
@@ -1,8 +1,17 @@
-import { PublicKey, CryptoError } from "@pagopa/io-react-native-crypto";
+import {
+  PublicKey,
+  CryptoError,
+  isKeyStrongboxBacked
+} from "@pagopa/io-react-native-crypto";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 
 import { jwkThumbprintByEncoding } from "jwk-thumbprint";
+import { isAndroid } from "../../../utils/platform";
+import {
+  trackLollipopIsKeyStrongboxBackedFailure,
+  trackLollipopIsKeyStrongboxBackedSuccess
+} from "../../../utils/analytics";
 import { DEFAULT_LOLLIPOP_HASH_ALGORITHM_CLIENT } from "./login";
 
 export type KeyInfo = {
@@ -29,3 +38,18 @@ export const toThumbprint = (key: O.Option<PublicKey>) =>
       thumbprint => thumbprint
     )
   );
+
+/**
+ * Check if the key is backed by Strongbox and track the result only on Android.
+ * @param keyTag - the keyTag of the key to check.
+ */
+export const handleIsKeyStrongboxBacked = async (keyTag?: string) => {
+  if (keyTag && isAndroid) {
+    try {
+      const isStrongBoxBacked = await isKeyStrongboxBacked(keyTag);
+      trackLollipopIsKeyStrongboxBackedSuccess(isStrongBoxBacked);
+    } catch (e) {
+      trackLollipopIsKeyStrongboxBackedFailure(toCryptoError(e).message);
+    }
+  }
+};
diff --git a/ts/features/messages/__e2e__/messages.e2e.ts b/ts/features/messages/__e2e__/messages.e2e.ts
index a9d2037e1b3..7b9ed5604b7 100644
--- a/ts/features/messages/__e2e__/messages.e2e.ts
+++ b/ts/features/messages/__e2e__/messages.e2e.ts
@@ -8,31 +8,25 @@ describe("Messages Screen", () => {
     await ensureLoggedIn();
   });
 
-  describe("when the user is already logged in", () => {
-    it("should load the user's messages", async () => {
-      await waitFor(element(by.id("MessageList_inbox")))
-        .toBeVisible()
-        .withTimeout(e2eWaitRenderTimeout);
+  it("when the user is already logged in, it should load the user's messages", async () => {
+    await waitFor(element(by.id("MessageList_inbox")))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
 
-      // The webserver is sending us exactly 20 messages with consecutive IDs
-      // in reverse order.
-      // We test that the first one is visible on the UI and that the last one
-      // exists (but is not visible)
+    // The webserver is sending us exactly 20 messages with consecutive IDs
+    // in reverse order.
+    // We test that the first one is visible on the UI and that the last one
+    // exists (but is not visible)
 
-      await waitFor(
-        element(by.id(`MessageListItem_00000000000000000000000020`))
-      )
-        .toBeVisible()
-        .withTimeout(e2eWaitRenderTimeout);
+    await waitFor(element(by.id(`MessageListItem_00000000000000000000000020`)))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
 
-      // check for infinite scrolling
-      await element(by.id(`MessageList_inbox`)).scrollTo("bottom");
+    // check for infinite scrolling
+    await element(by.id(`MessageList_inbox`)).scrollTo("bottom");
 
-      await waitFor(
-        element(by.id(`MessageListItem_00000000000000000000000008`))
-      )
-        .toExist()
-        .withTimeout(e2eWaitRenderTimeout);
-    });
+    await waitFor(element(by.id(`MessageListItem_00000000000000000000000008`)))
+      .toExist()
+      .withTimeout(e2eWaitRenderTimeout);
   });
 });
diff --git a/ts/features/messages/__mocks__/attachment.ts b/ts/features/messages/__mocks__/attachment.ts
index f4523587e7d..d9f86c81fcf 100644
--- a/ts/features/messages/__mocks__/attachment.ts
+++ b/ts/features/messages/__mocks__/attachment.ts
@@ -1,24 +1,19 @@
-import { Byte } from "../types/digitalInformationUnit";
-import { UIMessageId, UIAttachment, UIAttachmentId } from "../types";
+import { NonEmptyString } from "@pagopa/ts-commons/lib/strings";
+import { ThirdPartyAttachment } from "../../../../definitions/backend/ThirdPartyAttachment";
 import { ATTACHMENT_CATEGORY } from "../types/attachmentCategory";
-import { message_1 } from "./message";
 
-export const mockPdfAttachment: UIAttachment = {
-  messageId: message_1.id as UIMessageId,
-  id: "1" as UIAttachmentId,
-  displayName: "invoice.pdf",
-  contentType: "application/pdf",
-  size: 1959520 as Byte,
-  resourceUrl: { href: "https://www.invoicepdf.com/invoice.pdf" },
+export const mockPdfAttachment: ThirdPartyAttachment = {
+  id: "1" as NonEmptyString,
+  name: "invoice.pdf" as NonEmptyString,
+  content_type: "application/pdf" as NonEmptyString,
+  url: "https://www.invoicepdf.com/invoice.pdf" as NonEmptyString,
   category: ATTACHMENT_CATEGORY.DOCUMENT
 };
 
-export const mockOtherAttachment: UIAttachment = {
-  messageId: message_1.id as UIMessageId,
-  id: "2" as UIAttachmentId,
-  displayName: "image.png",
-  contentType: "other",
-  size: 125952 as Byte,
-  resourceUrl: { href: "htts://www.randomImage.com/image.png" },
+export const mockOtherAttachment: ThirdPartyAttachment = {
+  id: "2" as NonEmptyString,
+  name: "image.png" as NonEmptyString,
+  content_type: "other" as NonEmptyString,
+  url: "htts://www.randomImage.com/image.png" as NonEmptyString,
   category: ATTACHMENT_CATEGORY.F24
 };
diff --git a/ts/features/messages/__mocks__/message.ts b/ts/features/messages/__mocks__/message.ts
index 5a77b7449b1..08bae54cd57 100644
--- a/ts/features/messages/__mocks__/message.ts
+++ b/ts/features/messages/__mocks__/message.ts
@@ -1,5 +1,6 @@
 import { CreatedMessageWithContentAndAttachments } from "../../../../definitions/backend/CreatedMessageWithContentAndAttachments";
 import { FiscalCode } from "../../../../definitions/backend/FiscalCode";
+import { PaymentDataWithRequiredPayee } from "../../../../definitions/backend/PaymentDataWithRequiredPayee";
 import { UIMessageDetails } from "../types";
 import { toUIMessageDetails } from "../store/reducers/transformers";
 
@@ -22,6 +23,37 @@ export const message_1: CreatedMessageWithContentAndAttachments = {
   sender_service_id: service_1.service_id
 };
 
+export const messageWithValidPayment: CreatedMessageWithContentAndAttachments =
+  {
+    ...message_1,
+    created_at: new Date("2024-01-01T14:16:41Z"),
+    content: {
+      ...message_1.content,
+      payment_data: {
+        notice_number: "075970423479738892",
+        amount: 698,
+        invalid_after_due_date: true,
+        payee: { fiscal_code: "00000000003" }
+      } as PaymentDataWithRequiredPayee
+    }
+  };
+
+export const messageWithExpairedPayment: CreatedMessageWithContentAndAttachments =
+  {
+    ...message_1,
+    created_at: new Date("2024-01-01T14:16:41Z"),
+    content: {
+      ...message_1.content,
+      due_date: new Date("2024-02-03T14:16:41Z"),
+      payment_data: {
+        notice_number: "075970423479738892",
+        amount: 698,
+        invalid_after_due_date: true,
+        payee: { fiscal_code: "00000000003" }
+      } as PaymentDataWithRequiredPayee
+    }
+  };
+
 export const paymentValidInvalidAfterDueDate: CreatedMessageWithContentAndAttachments =
   {
     created_at: "2021-11-23T13:29:54.771Z",
diff --git a/ts/features/messages/components/MessageAttachment/LegacyMessageAttachmentPreview.tsx b/ts/features/messages/components/MessageAttachment/LegacyMessageAttachmentPreview.tsx
index c20551a8d11..d87c67299bc 100644
--- a/ts/features/messages/components/MessageAttachment/LegacyMessageAttachmentPreview.tsx
+++ b/ts/features/messages/components/MessageAttachment/LegacyMessageAttachmentPreview.tsx
@@ -16,7 +16,7 @@ import {
 } from "../../store/actions";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { downloadPotForMessageAttachmentSelector } from "../../store/reducers/downloads";
-import { UIAttachment, UIMessageId } from "../../types";
+import { UIMessageId } from "../../types";
 import variables from "../../../../theme/variables";
 import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
 import { isIos } from "../../../../utils/platform";
@@ -24,11 +24,16 @@ import { isStrictNone } from "../../../../utils/pot";
 import { share } from "../../../../utils/share";
 import { showToast } from "../../../../utils/showToast";
 import { confirmButtonProps } from "../../../../components/buttons/ButtonConfigurations";
+import { ThirdPartyAttachment } from "../../../../../definitions/backend/ThirdPartyAttachment";
+import {
+  attachmentContentType,
+  attachmentDisplayName
+} from "../../store/reducers/transformers";
 import LegacyPdfViewer from "./LegacyPdfViewer";
 
 type Props = {
   messageId: UIMessageId;
-  attachment: UIAttachment;
+  attachment: ThirdPartyAttachment;
   enableDownloadAttachment?: boolean;
   onLoadComplete?: () => void;
   onPDFError?: () => void;
@@ -74,9 +79,14 @@ const renderError = (title: string, body: string) => (
 );
 
 const renderPDF = (
+  name: string,
+  mimeType: string,
   downloadPath: string,
   isPDFError: boolean,
-  props: Omit<Props, "enableDownloadAttachment">,
+  props: Omit<
+    Props,
+    "enableDownloadAttachment" | "attachment" | "messageId" | "onPDFError"
+  >,
   onPDFLoadingError: () => void
 ) => (
   <>
@@ -93,7 +103,8 @@ const renderPDF = (
       />
     )}
     {renderFooter(
-      props.attachment,
+      name,
+      mimeType,
       downloadPath,
       props.onShare,
       props.onOpen,
@@ -103,7 +114,8 @@ const renderPDF = (
 );
 
 const renderFooter = (
-  attachment: UIAttachment,
+  name: string,
+  mimeType: string,
   downloadPath: string,
   onShare?: () => void,
   onOpen?: () => void,
@@ -140,9 +152,9 @@ const renderFooter = (
           onDownload?.();
           ReactNativeBlobUtil.MediaCollection.copyToMediaStore(
             {
-              name: attachment.displayName,
+              name,
               parentFolder: "",
-              mimeType: attachment.contentType
+              mimeType
             },
             "Download",
             downloadPath
@@ -150,7 +162,7 @@ const renderFooter = (
             .then(_ => {
               showToast(
                 I18n.t("messagePDFPreview.savedAtLocation", {
-                  name: attachment.displayName
+                  name
                 }),
                 "success"
               );
@@ -165,7 +177,7 @@ const renderFooter = (
         () => {
           onOpen?.();
           ReactNativeBlobUtil.android
-            .actionViewIntent(downloadPath, attachment.contentType)
+            .actionViewIntent(downloadPath, mimeType)
             .catch(_ => {
               showToast(I18n.t("messagePDFPreview.errors.opening"));
             });
@@ -194,10 +206,7 @@ export const LegacyMessageAttachmentPreview = ({
   const attachment = props.attachment;
   const attachmentId = attachment.id;
   const downloadPot = useIOSelector(state =>
-    downloadPotForMessageAttachmentSelector(state, {
-      messageId,
-      id: attachmentId
-    })
+    downloadPotForMessageAttachmentSelector(state, messageId, attachmentId)
   );
   // This component handles the attachment blob download only if
   // it is a generic attachment (not a PN one, since that flow
@@ -239,8 +248,9 @@ export const LegacyMessageAttachmentPreview = ({
     if (shouldDownloadAttachment) {
       dispatch(
         downloadAttachment.request({
-          ...attachment,
-          skipMixpanelTrackingOnFailure: true
+          attachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
         })
       );
     } else if (
@@ -259,6 +269,7 @@ export const LegacyMessageAttachmentPreview = ({
     downloadPot,
     dispatch,
     enableDownloadAttachment,
+    messageId,
     navigation,
     shouldDownloadAttachment
   ]);
@@ -267,6 +278,9 @@ export const LegacyMessageAttachmentPreview = ({
   const shouldDisplayPDFPreview =
     pot.isSome(downloadPot) && !pot.isError(downloadPot);
 
+  const name = attachmentDisplayName(attachment);
+  const mimeType = attachmentContentType(attachment);
+
   return (
     <BaseScreenComponent
       goBack={customGoBack}
@@ -280,6 +294,8 @@ export const LegacyMessageAttachmentPreview = ({
         {shouldDisplayDownloadProgress && renderDownloadFeedback()}
         {shouldDisplayPDFPreview &&
           renderPDF(
+            name,
+            mimeType,
             downloadPot.value.path,
             isPDFError,
             props,
diff --git a/ts/features/messages/screens/MessageAttachment.tsx b/ts/features/messages/components/MessageAttachment/MessageAttachment.tsx
similarity index 61%
rename from ts/features/messages/screens/MessageAttachment.tsx
rename to ts/features/messages/components/MessageAttachment/MessageAttachment.tsx
index 5945c03aed9..7a6260bb4be 100644
--- a/ts/features/messages/screens/MessageAttachment.tsx
+++ b/ts/features/messages/components/MessageAttachment/MessageAttachment.tsx
@@ -1,54 +1,57 @@
 import React, { useCallback, useState } from "react";
+import ReactNativeBlobUtil from "react-native-blob-util";
+import { FooterWithButtons, IOToast } from "@pagopa/io-app-design-system";
 import { pipe } from "fp-ts/lib/function";
 import * as B from "fp-ts/lib/boolean";
-import ReactNativeBlobUtil from "react-native-blob-util";
-import { FooterWithButtons } from "@pagopa/io-app-design-system";
-import I18n from "../../../i18n";
-import { useIOSelector } from "../../../store/hooks";
-import { downloadedMessageAttachmentSelector } from "../store/reducers/downloads";
-import { UIAttachment, UIAttachmentId, UIMessageId } from "../types";
-import { isIos } from "../../../utils/platform";
-import { share } from "../../../utils/share";
-import { IOToast } from "../../../components/Toast";
-import { useHeaderSecondLevel } from "../../../hooks/useHeaderSecondLevel";
-import { PdfViewer } from "../components/MessageAttachment/PdfViewer";
-import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
-import { MessagesParamsList } from "../navigation/params";
+import I18n from "../../../../i18n";
+import { useIOSelector } from "../../../../store/hooks";
+import { downloadedMessageAttachmentSelector } from "../../store/reducers/downloads";
+import { UIMessageId } from "../../types";
+import { isIos } from "../../../../utils/platform";
+import { share } from "../../../../utils/share";
+import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
+import {
+  attachmentContentType,
+  attachmentDisplayName
+} from "../../store/reducers/transformers";
 import {
   trackThirdPartyMessageAttachmentCorruptedFile,
   trackThirdPartyMessageAttachmentPreviewSuccess,
   trackThirdPartyMessageAttachmentUserAction
-} from "../analytics";
-import { ServiceId } from "../../../../definitions/backend/ServiceId";
+} from "../../analytics";
 import {
-  trackPNAttachmentOpen,
   trackPNAttachmentOpeningSuccess,
   trackPNAttachmentSave,
   trackPNAttachmentSaveShare,
   trackPNAttachmentShare
-} from "../../pn/analytics";
-import { OperationResultScreenContent } from "../../../components/screens/OperationResultScreenContent";
+} from "../../../pn/analytics";
+import { ServiceId } from "../../../../../definitions/backend/ServiceId";
+import { PdfViewer } from "./PdfViewer";
 
-export type MessageAttachmentNavigationParams = Readonly<{
-  messageId: UIMessageId;
-  attachmentId: UIAttachmentId;
+type MessageAttachmentFooterProps = {
+  attachmentCategory?: string;
+  downloadPath: string;
   isPN: boolean;
-  serviceId?: ServiceId;
-}>;
+  mimeType: string;
+  name: string;
+};
 
-const renderFooter = (
-  attachment: UIAttachment,
-  downloadPath: string,
-  isPN: boolean,
-  attachmentCategory?: string
-) =>
+const MessageAttachmentFooter = ({
+  attachmentCategory,
+  downloadPath,
+  isPN,
+  mimeType,
+  name
+}: MessageAttachmentFooterProps) =>
   isIos ? (
     <FooterWithButtons
       type={"SingleButton"}
       primary={{
         type: "Solid",
         buttonProps: {
-          accessibilityLabel: I18n.t("messagePDFPreview.singleBtn"),
+          accessibilityLabel: I18n.t(
+            "messagePDFPreview.singleBtnAccessibility"
+          ),
           onPress: () => {
             onShare(isPN, attachmentCategory);
             ReactNativeBlobUtil.ios.presentOptionsMenu(downloadPath);
@@ -59,31 +62,31 @@ const renderFooter = (
     />
   ) : (
     <FooterWithButtons
-      type={"ThreeButtonsInLine"}
-      primary={{
-        type: "Outline",
+      type={"TwoButtonsInlineHalf"}
+      secondary={{
+        type: "Solid",
         buttonProps: {
-          accessibilityLabel: I18n.t("global.buttons.share"),
+          accessibilityLabel: I18n.t("messagePDFPreview.shareAccessibility"),
           onPress: () => {
             onShare(isPN, attachmentCategory);
             share(`file://${downloadPath}`, undefined, false)().catch(_ => {
               IOToast.show(I18n.t("messagePDFPreview.errors.sharing"));
             });
           },
-          label: I18n.t("global.buttons.share")
+          label: I18n.t("messagePDFPreview.share")
         }
       }}
-      third={{
-        type: "Outline",
+      primary={{
+        type: "Solid",
         buttonProps: {
-          accessibilityLabel: I18n.t("messagePDFPreview.save"),
+          accessibilityLabel: I18n.t("messagePDFPreview.saveAccessibility"),
           onPress: () => {
             onDownload(isPN, attachmentCategory);
             ReactNativeBlobUtil.MediaCollection.copyToMediaStore(
               {
-                name: attachment.displayName,
+                name,
                 parentFolder: "",
-                mimeType: attachment.contentType
+                mimeType
               },
               "Download",
               downloadPath
@@ -91,7 +94,7 @@ const renderFooter = (
               .then(_ => {
                 IOToast.show(
                   I18n.t("messagePDFPreview.savedAtLocation", {
-                    name: attachment.displayName
+                    name
                   })
                 );
               })
@@ -102,21 +105,6 @@ const renderFooter = (
           label: I18n.t("messagePDFPreview.save")
         }
       }}
-      secondary={{
-        type: "Solid",
-        buttonProps: {
-          accessibilityLabel: I18n.t("messagePDFPreview.open"),
-          onPress: () => {
-            onOpen(isPN, attachmentCategory);
-            ReactNativeBlobUtil.android
-              .actionViewIntent(downloadPath, attachment.contentType)
-              .catch(_ => {
-                IOToast.error(I18n.t("messagePDFPreview.errors.opening"));
-              });
-          },
-          label: I18n.t("messagePDFPreview.open")
-        }
-      }}
     />
   );
 
@@ -162,15 +150,6 @@ const onShare = (isPN: boolean, attachmentCategory?: string) =>
     )
   );
 
-const onOpen = (isPN: boolean, attachmentCategory?: string) =>
-  pipe(
-    isPN,
-    B.fold(
-      () => trackThirdPartyMessageAttachmentUserAction("open"),
-      () => trackPNAttachmentOpen(attachmentCategory)
-    )
-  );
-
 const onDownload = (isPN: boolean, attachmentCategory?: string) =>
   pipe(
     isPN,
@@ -180,13 +159,19 @@ const onDownload = (isPN: boolean, attachmentCategory?: string) =>
     )
   );
 
-export const MessageAttachment = (
-  props: IOStackNavigationRouteProps<
-    MessagesParamsList,
-    "MESSAGE_DETAIL_ATTACHMENT"
-  >
-): React.ReactElement => {
-  const { messageId, attachmentId, isPN, serviceId } = props.route.params;
+export type MessageAttachmentProps = {
+  messageId: UIMessageId;
+  attachmentId: string;
+  isPN: boolean;
+  serviceId?: ServiceId;
+};
+
+export const MessageAttachment = ({
+  attachmentId,
+  isPN,
+  messageId,
+  serviceId
+}: MessageAttachmentProps) => {
   const [isPDFRenderingError, setIsPDFRenderingError] = useState(false);
 
   const downloadedAttachment = useIOSelector(state =>
@@ -201,11 +186,6 @@ export const MessageAttachment = (
     onPDFError(messageId, isPN, serviceId, attachmentCategory);
   }, [attachmentCategory, messageId, isPN, serviceId]);
 
-  useHeaderSecondLevel({
-    title: I18n.t("messagePDFPreview.title"),
-    supportRequest: true
-  });
-
   if (!attachmentOpt || !downloadPathOpt) {
     return (
       <OperationResultScreenContent
@@ -215,6 +195,10 @@ export const MessageAttachment = (
       />
     );
   }
+
+  const name = attachmentDisplayName(attachmentOpt);
+  const mimeType = attachmentContentType(attachmentOpt);
+
   return (
     <>
       {isPDFRenderingError ? (
@@ -230,7 +214,13 @@ export const MessageAttachment = (
           onLoadComplete={() => onLoadComplete(isPN, attachmentCategory)}
         />
       )}
-      {renderFooter(attachmentOpt, downloadPathOpt, isPN, attachmentCategory)}
+      <MessageAttachmentFooter
+        attachmentCategory={attachmentCategory}
+        downloadPath={downloadPathOpt}
+        isPN={isPN}
+        mimeType={mimeType}
+        name={name}
+      />
     </>
   );
 };
diff --git a/ts/features/messages/components/MessageAttachment/PdfViewer.tsx b/ts/features/messages/components/MessageAttachment/PdfViewer.tsx
index b26f69052c2..04ec664299f 100644
--- a/ts/features/messages/components/MessageAttachment/PdfViewer.tsx
+++ b/ts/features/messages/components/MessageAttachment/PdfViewer.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import Pdf from "react-native-pdf";
 import { IOColors } from "@pagopa/io-app-design-system";
 import I18n from "../../../../i18n";
@@ -31,19 +31,25 @@ export const PdfViewer = ({
       isLoading={isLoading}
       loadingCaption={I18n.t("messageDetails.attachments.loading")}
     >
-      <Pdf
-        {...rest}
-        source={{ uri: downloadPath, cache: true }}
-        style={[styles.pdf, style]}
-        onLoadComplete={(...args) => {
-          setIsLoading(false);
-          onLoadComplete?.(...args);
-        }}
-        onError={(...args) => {
-          setIsLoading(false);
-          onError?.(...args);
-        }}
-      />
+      <View
+        style={{ flex: 1 }}
+        accessible={true}
+        accessibilityLabel={I18n.t("messagePDFPreview.pdfAccessibility")}
+      >
+        <Pdf
+          {...rest}
+          source={{ uri: downloadPath, cache: true }}
+          style={[styles.pdf, style]}
+          onLoadComplete={(...args) => {
+            setIsLoading(false);
+            onLoadComplete?.(...args);
+          }}
+          onError={(...args) => {
+            setIsLoading(false);
+            onError?.(...args);
+          }}
+        />
+      </View>
     </LoadingSpinnerOverlay>
   );
 };
diff --git a/ts/features/messages/components/__test__/MessageAttachmentPreview.test.tsx b/ts/features/messages/components/MessageAttachment/__test__/LegacyMessageAttachmentPreview.test.tsx
similarity index 73%
rename from ts/features/messages/components/__test__/MessageAttachmentPreview.test.tsx
rename to ts/features/messages/components/MessageAttachment/__test__/LegacyMessageAttachmentPreview.test.tsx
index d91181746df..7bde6c1ecac 100644
--- a/ts/features/messages/components/__test__/MessageAttachmentPreview.test.tsx
+++ b/ts/features/messages/components/MessageAttachment/__test__/LegacyMessageAttachmentPreview.test.tsx
@@ -2,19 +2,20 @@ import React from "react";
 import { View } from "react-native";
 import * as pot from "@pagopa/ts-commons/lib/pot";
 import { createStore } from "redux";
-import { applicationChangeState } from "../../../../store/actions/application";
-import { appReducer } from "../../../../store/reducers";
-import { GlobalState } from "../../../../store/reducers/types";
-import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
-import { Downloads } from "../../store/reducers/downloads";
-import { mockPdfAttachment } from "../../__mocks__/attachment";
-import I18n from "../../../../i18n";
-import { LegacyMessageAttachmentPreview } from "../MessageAttachment/LegacyMessageAttachmentPreview";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { appReducer } from "../../../../../store/reducers";
+import { GlobalState } from "../../../../../store/reducers/types";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
+import { Downloads } from "../../../store/reducers/downloads";
+import { mockPdfAttachment } from "../../../__mocks__/attachment";
+import I18n from "../../../../../i18n";
+import { LegacyMessageAttachmentPreview } from "../LegacyMessageAttachmentPreview";
+import { messageId_1 } from "../../../__mocks__/messages";
 
 const mockOpen = jest.fn();
 const mockPdfViewer = <View testID="pdf-viewer" />;
 
-jest.mock("../MessageAttachment/LegacyPdfViewer", () => () => mockPdfViewer);
+jest.mock("../LegacyPdfViewer", () => () => mockPdfViewer);
 
 describe("MessageAttachmentPreview", () => {
   describe("when enableDownloadAttachment is false", () => {
@@ -22,12 +23,12 @@ describe("MessageAttachmentPreview", () => {
       const { component } = renderComponent(
         {
           enableDownloadAttachment: false,
-          messageId: mockPdfAttachment.messageId,
+          messageId: messageId_1,
           attachment: mockPdfAttachment,
           onOpen: mockOpen
         },
         {
-          [mockPdfAttachment.messageId]: {
+          [messageId_1]: {
             [mockPdfAttachment.id]: pot.some({
               path: "path",
               attachment: mockPdfAttachment
@@ -43,12 +44,12 @@ describe("MessageAttachmentPreview", () => {
       const { component } = renderComponent(
         {
           enableDownloadAttachment: false,
-          messageId: mockPdfAttachment.messageId,
+          messageId: messageId_1,
           attachment: mockPdfAttachment,
           onOpen: mockOpen
         },
         {
-          [mockPdfAttachment.messageId]: {
+          [messageId_1]: {
             [mockPdfAttachment.id]: pot.some({
               path: "path",
               attachment: mockPdfAttachment
diff --git a/ts/features/messages/components/MessageAttachment/__test__/__snapshots__/PdfViewer.test.tsx.snap b/ts/features/messages/components/MessageAttachment/__test__/__snapshots__/PdfViewer.test.tsx.snap
index 07e6e5f8ead..514e3cb14bd 100644
--- a/ts/features/messages/components/MessageAttachment/__test__/__snapshots__/PdfViewer.test.tsx.snap
+++ b/ts/features/messages/components/MessageAttachment/__test__/__snapshots__/PdfViewer.test.tsx.snap
@@ -140,6 +140,12 @@ exports[`PdfViewer should match the snapshot 1`] = `
                 />
               </RNSVGDefs>
               <RNSVGGroup
+                fill={
+                  Object {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
                 propList={
                   Array [
                     "strokeWidth",
@@ -149,41 +155,64 @@ exports[`PdfViewer should match the snapshot 1`] = `
               >
                 <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={
-                    Array [
-                      1,
-                      "spinner-secondHalf",
-                    ]
+                    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={
-                    Array [
-                      1,
-                      "spinner-firstHalf",
-                    ]
+                    Object {
+                      "brushRef": "spinner-firstHalf",
+                      "type": 1,
+                    }
                   }
                 />
                 <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",
                       "strokeLinecap",
                     ]
                   }
-                  stroke={4278927075}
+                  stroke={
+                    Object {
+                      "payload": 4278927075,
+                      "type": 0,
+                    }
+                  }
                   strokeLinecap={1}
                 />
               </RNSVGGroup>
@@ -245,6 +274,16 @@ exports[`PdfViewer should match the snapshot 1`] = `
         },
       ]
     }
-  />
+  >
+    <View
+      accessibilityLabel="Preview of the PDF document"
+      accessible={true}
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    />
+  </View>
 </View>
 `;
diff --git a/ts/features/messages/components/MessageAttachments.tsx b/ts/features/messages/components/MessageAttachments.tsx
deleted file mode 100644
index 981f42200d5..00000000000
--- a/ts/features/messages/components/MessageAttachments.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-import * as pot from "@pagopa/ts-commons/lib/pot";
-import { VSpacer, WithTestID } from "@pagopa/io-app-design-system";
-import { UIAttachment } from "../types";
-import { ContentTypeValues } from "../types/contentType";
-import { useAttachmentDownload } from "../hooks/useAttachmentDownload";
-import { ModuleAttachment, ModuleAttachmentProps } from "./ModuleAttachment";
-
-type PartialProps = {
-  downloadAttachmentBeforePreview?: boolean;
-  openPreview: (attachment: UIAttachment) => void;
-};
-
-type MessageAttachmentProps = {
-  attachment: UIAttachment;
-} & PartialProps;
-
-type MessageAttachmentsProps = WithTestID<
-  {
-    attachments: ReadonlyArray<UIAttachment>;
-  } & PartialProps
->;
-
-const getFormatByContentType = (
-  contentType: UIAttachment["contentType"]
-): ModuleAttachmentProps["format"] => {
-  switch (contentType) {
-    case ContentTypeValues.applicationPdf:
-      return "pdf";
-    default:
-      return "doc";
-  }
-};
-
-const AttachmentItem = ({
-  attachment,
-  openPreview,
-  downloadAttachmentBeforePreview
-}: MessageAttachmentProps) => {
-  const { downloadPot, onAttachmentSelect } = useAttachmentDownload(
-    attachment,
-    downloadAttachmentBeforePreview,
-    openPreview
-  );
-
-  return (
-    <ModuleAttachment
-      testID="message-attachment"
-      format={getFormatByContentType(attachment.contentType)}
-      title={attachment.displayName}
-      isFetching={pot.isLoading(downloadPot)}
-      onPress={onAttachmentSelect}
-    />
-  );
-};
-
-export const MessageAttachments = ({
-  attachments = [],
-  testID,
-  ...rest
-}: MessageAttachmentsProps) => (
-  <View testID={testID}>
-    {attachments.map((attachment, index) => (
-      <React.Fragment key={index}>
-        <AttachmentItem {...rest} attachment={attachment} />
-        {index < attachments.length - 1 && <VSpacer size={8} />}
-      </React.Fragment>
-    ))}
-  </View>
-);
diff --git a/ts/features/messages/components/MessageDetail/CalendarEventButton.tsx b/ts/features/messages/components/MessageDetail/CalendarEventButton.tsx
index a3688616341..016e3058c68 100644
--- a/ts/features/messages/components/MessageDetail/CalendarEventButton.tsx
+++ b/ts/features/messages/components/MessageDetail/CalendarEventButton.tsx
@@ -26,7 +26,7 @@ import { GlobalState } from "../../../../store/reducers/types";
 import { openAppSettings } from "../../../../utils/appSettings";
 import {
   checkAndRequestPermission,
-  isEventInCalendar,
+  legacyIsEventInCalendar,
   removeCalendarEventFromDeviceCalendar,
   saveCalendarEvent,
   searchEventInCalendar
@@ -90,7 +90,9 @@ class CalendarEventButton extends React.PureComponent<Props, State> {
       });
       return;
     }
-    const mayBeInCalendar = await isEventInCalendar(calendarEvent.eventId)();
+    const mayBeInCalendar = await legacyIsEventInCalendar(
+      calendarEvent.eventId
+    )();
     this.setState({
       isEventInDeviceCalendar: pipe(
         mayBeInCalendar,
@@ -356,7 +358,7 @@ class CalendarEventButton extends React.PureComponent<Props, State> {
 
 const mapStateToProps = (state: GlobalState, ownProps: OwnProps) => ({
   preferredCalendar: preferredCalendarSelector(state),
-  calendarEvent: calendarEventByMessageIdSelector(ownProps.message.id)(state)
+  calendarEvent: calendarEventByMessageIdSelector(state, ownProps.message.id)
 });
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
diff --git a/ts/features/messages/components/MessageDetail/ContactsListItem.tsx b/ts/features/messages/components/MessageDetail/ContactsListItem.tsx
new file mode 100644
index 00000000000..ce2f084d1dd
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/ContactsListItem.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import { Linking } from "react-native";
+import { Body, ListItemAction, VSpacer } from "@pagopa/io-app-design-system";
+import I18n from "../../../../i18n";
+import { useIOBottomSheetAutoresizableModal } from "../../../../utils/hooks/bottomSheet";
+
+type ContactsListItemProps = {
+  email?: string;
+  phone?: string;
+};
+
+export const ContactsListItem = ({ email, phone }: ContactsListItemProps) => {
+  const { present, bottomSheet } = useIOBottomSheetAutoresizableModal(
+    {
+      component: (
+        <>
+          <Body color="grey-700">
+            {I18n.t("messageDetails.contactsBottomSheet.body")}
+          </Body>
+          <VSpacer size={8} />
+          {email && (
+            <ListItemAction
+              accessibilityLabel={I18n.t(
+                "messageDetails.contactsBottomSheet.actions.email"
+              )}
+              icon="email"
+              label={I18n.t("messageDetails.contactsBottomSheet.actions.email")}
+              onPress={() => Linking.openURL(`mailto:${email}`)}
+              variant="primary"
+            />
+          )}
+          {phone && (
+            <ListItemAction
+              accessibilityLabel={I18n.t(
+                "messageDetails.contactsBottomSheet.actions.call"
+              )}
+              icon="phone"
+              label={I18n.t("messageDetails.contactsBottomSheet.actions.call")}
+              onPress={() => Linking.openURL(`tel:${phone}`)}
+              variant="primary"
+            />
+          )}
+        </>
+      ),
+      title: I18n.t("messageDetails.contactsBottomSheet.title")
+    },
+    100
+  );
+
+  return (
+    <>
+      <ListItemAction
+        accessibilityLabel={I18n.t("messageDetails.footer.contacts")}
+        icon="message"
+        label={I18n.t("messageDetails.footer.contacts")}
+        onPress={present}
+        testID="contacts-action"
+        variant="primary"
+      />
+      {bottomSheet}
+    </>
+  );
+};
diff --git a/ts/features/messages/components/MessageDetail/CtaBar.tsx b/ts/features/messages/components/MessageDetail/CtaBar.tsx
index d581c8ce534..d7677cdd2fa 100644
--- a/ts/features/messages/components/MessageDetail/CtaBar.tsx
+++ b/ts/features/messages/components/MessageDetail/CtaBar.tsx
@@ -1,11 +1,9 @@
 import * as O from "fp-ts/lib/Option";
 import React, { useEffect, useRef } from "react";
 import { View, StyleSheet } from "react-native";
-import { useStore } from "react-redux";
 import { HSpacer } from "@pagopa/io-app-design-system";
 import { CommonServiceMetadata } from "../../../../../definitions/backend/CommonServiceMetadata";
-import { ServiceId } from "../../../../../definitions/backend/ServiceId";
-import { useIODispatch } from "../../../../store/hooks";
+import { useIODispatch, useIOStore } from "../../../../store/hooks";
 import { PaymentData, UIMessageDetails, UIMessageId } from "../../types";
 import { UIService } from "../../../../store/reducers/entities/services/types";
 import variables from "../../../../theme/variables";
@@ -89,16 +87,14 @@ const CtaBar = ({
 }: Props): React.ReactElement | null => {
   const dispatch = useIODispatch();
   const shoulCheckForPNOptInMessage = useRef(true);
-  const store = useStore();
+  const store = useIOStore();
 
   const { dueDate, markdown, paymentData, raw: legacyMessage } = messageDetails;
-  const maybeCtas = getMessageCTA(
-    markdown,
-    serviceMetadata,
-    service?.id as ServiceId
+  const ctas = O.toUndefined(
+    getMessageCTA(markdown, serviceMetadata, service?.id)
   );
   const state = store.getState();
-  const isPNOptInMessageInfo = isPNOptInMessage(maybeCtas, service, state);
+  const isPNOptInMessageInfo = isPNOptInMessage(ctas, service?.id, state);
   const isPNOptIn = isPNOptInMessageInfo.isPNOptInMessage;
 
   useEffect(() => {
@@ -131,12 +127,12 @@ const CtaBar = ({
     </View>
   );
 
-  const footer2 = O.isSome(maybeCtas) && (
+  const footer2 = ctas && (
     // Added a wrapper to enable the usage of the component outside the Container of Native Base
     <View style={styles.footerContainer} pointerEvents={"box-none"}>
       <View testID={"CtaBar_withCTA"} style={[IOStyles.footer, IOStyles.row]}>
         <ExtractedCTABar
-          ctas={maybeCtas.value}
+          ctas={ctas}
           xsmall={false}
           dispatch={dispatch}
           serviceMetadata={serviceMetadata}
diff --git a/ts/features/messages/components/LegacyMessageAttachments.tsx b/ts/features/messages/components/MessageDetail/LegacyMessageAttachments.tsx
similarity index 70%
rename from ts/features/messages/components/LegacyMessageAttachments.tsx
rename to ts/features/messages/components/MessageDetail/LegacyMessageAttachments.tsx
index d1b108da65e..eed4699d859 100644
--- a/ts/features/messages/components/LegacyMessageAttachments.tsx
+++ b/ts/features/messages/components/MessageDetail/LegacyMessageAttachments.tsx
@@ -7,25 +7,31 @@ import {
 } from "react-native";
 import { Divider, IOColors, Icon } from "@pagopa/io-app-design-system";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { H5 } from "../../../components/core/typography/H5";
-import I18n from "../../../i18n";
-import { UIAttachment } from "../types";
-import { ContentTypeValues } from "../types/contentType";
-import { formatByte } from "../types/digitalInformationUnit";
-import { useAttachmentDownload } from "../hooks/useAttachmentDownload";
+import { H5 } from "../../../../components/core/typography/H5";
+import I18n from "../../../../i18n";
+import { ContentTypeValues } from "../../types/contentType";
+import { useLegacyAttachmentDownload } from "../../hooks/useLegacyAttachmentDownload";
+import { ThirdPartyAttachment } from "../../../../../definitions/backend/ThirdPartyAttachment";
+import { UIMessageId } from "../../types";
+import {
+  attachmentContentType,
+  attachmentDisplayName
+} from "../../store/reducers/transformers";
 
 type PartialProps = {
   disabled?: boolean;
   downloadAttachmentBeforePreview?: boolean;
-  openPreview: (attachment: UIAttachment) => void;
+  openPreview: (attachment: ThirdPartyAttachment) => void;
 };
 
-type MessageAttachmentProps = {
-  attachment: UIAttachment;
+type LegacyMessageAttachmentProps = {
+  attachment: ThirdPartyAttachment;
+  messageId: UIMessageId;
 } & PartialProps;
 
 type LegacyMessageAttachmentsProps = {
-  attachments: ReadonlyArray<UIAttachment>;
+  attachments: ReadonlyArray<ThirdPartyAttachment>;
+  messageId: UIMessageId;
 } & PartialProps;
 
 const styles = StyleSheet.create({
@@ -60,9 +66,7 @@ const styles = StyleSheet.create({
  * @param props
  * @constructor
  */
-const AttachmentIcon = (props: {
-  contentType: UIAttachment["contentType"];
-}) => {
+const LegacyAttachmentIcon = (props: { contentType: string }) => {
   switch (props.contentType) {
     case ContentTypeValues.applicationPdf:
       return <Icon name="docAttachPDF" color="blue" size={32} />;
@@ -77,12 +81,15 @@ const AttachmentIcon = (props: {
  * @param props
  * @constructor
  */
-const AttachmentItem = (props: MessageAttachmentProps) => {
-  const { downloadPot, onAttachmentSelect } = useAttachmentDownload(
+const LegacyAttachmentItem = (props: LegacyMessageAttachmentProps) => {
+  const { downloadPot, onAttachmentSelect } = useLegacyAttachmentDownload(
     props.attachment,
+    props.messageId,
     props.downloadAttachmentBeforePreview,
     props.openPreview
   );
+  const name = attachmentDisplayName(props.attachment);
+  const mimeType = attachmentContentType(props.attachment);
   return (
     <TouchableOpacity
       style={[
@@ -92,13 +99,13 @@ const AttachmentItem = (props: MessageAttachmentProps) => {
       onPress={onAttachmentSelect}
       disabled={!!props.disabled || pot.isLoading(downloadPot)}
       accessible={true}
-      accessibilityLabel={props.attachment.displayName}
+      accessibilityLabel={name}
       accessibilityRole="button"
       testID="MessageAttachmentTouchable"
     >
       <View style={styles.row}>
         <View style={styles.icon}>
-          <AttachmentIcon contentType={props.attachment.contentType} />
+          <LegacyAttachmentIcon contentType={mimeType} />
         </View>
         <View style={styles.middleSection}>
           <H5
@@ -107,13 +114,8 @@ const AttachmentItem = (props: MessageAttachmentProps) => {
             ellipsizeMode={"middle"}
             numberOfLines={2}
           >
-            {props.attachment.displayName}
+            {name}
           </H5>
-          {typeof props.attachment.size !== "undefined" && (
-            <H5 color={"bluegrey"} weight={"Regular"}>
-              {formatByte(props.attachment.size)}
-            </H5>
-          )}
         </View>
         {pot.isLoading(downloadPot) ? (
           <ActivityIndicator
@@ -142,7 +144,7 @@ export const LegacyMessageAttachments = ({
   <>
     {attachments.map((attachment, index) => (
       <View key={index} testID="MessageAttachmentContainer">
-        <AttachmentItem {...rest} attachment={attachment} />
+        <LegacyAttachmentItem {...rest} attachment={attachment} />
         {index < attachments.length - 1 && <Divider />}
       </View>
     ))}
diff --git a/ts/features/messages/components/ModuleAttachment.tsx b/ts/features/messages/components/MessageDetail/LegacyModuleAttachment.tsx
similarity index 92%
rename from ts/features/messages/components/ModuleAttachment.tsx
rename to ts/features/messages/components/MessageDetail/LegacyModuleAttachment.tsx
index 121a64990e2..9e56b8a7569 100644
--- a/ts/features/messages/components/ModuleAttachment.tsx
+++ b/ts/features/messages/components/MessageDetail/LegacyModuleAttachment.tsx
@@ -30,7 +30,7 @@ import Animated, {
   withSpring
 } from "react-native-reanimated";
 import Placeholder from "rn-placeholder";
-import I18n from "../../../i18n";
+import I18n from "../../../../i18n";
 
 type PartialProps = WithTestID<{
   title: string;
@@ -41,11 +41,11 @@ type PartialProps = WithTestID<{
   onPress: (event: GestureResponderEvent) => void;
 }>;
 
-export type ModuleAttachmentProps = PartialProps &
+export type LegacyModuleAttachmentProps = PartialProps &
   Pick<PressableProps, "onPress" | "accessibilityLabel" | "disabled">;
 
 const formatMap: Record<
-  NonNullable<ModuleAttachmentProps["format"]>,
+  NonNullable<LegacyModuleAttachmentProps["format"]>,
   IOIcons
 > = {
   doc: "docAttach",
@@ -78,13 +78,13 @@ const DISABLED_OPACITY = 0.5;
 const ICON_SIZE: IOIconSizeScale = 32;
 const MARGIN_SIZE: IOSpacingScale = 16;
 
-const ModuleAttachmentContent = ({
+const LegacyModuleAttachmentContent = ({
   isFetching,
   format,
   title,
   subtitle
 }: Pick<
-  ModuleAttachmentProps,
+  LegacyModuleAttachmentProps,
   "isFetching" | "format" | "title" | "subtitle"
 >) => {
   const IconOrActivityIndicatorComponent = () => {
@@ -137,7 +137,7 @@ const ModuleAttachmentContent = ({
 };
 
 /**
- * The `ModuleAttachment` component is a custom button component with an extended outline style.
+ * The `LegacyModuleAttachment` component is a custom button component with an extended outline style.
  * It provides an animated scaling effect when pressed.
  *
  * @param {boolean} isLoading - If true, displays a skeleton loading component.
@@ -149,7 +149,7 @@ const ModuleAttachmentContent = ({
  * @param {string} iconName - The icon name to display.
  * @param {function} onPress - The function to be executed when the item is pressed.
  */
-export const ModuleAttachment = ({
+export const LegacyModuleAttachment = ({
   isLoading = false,
   isFetching = false,
   disabled = false,
@@ -157,7 +157,7 @@ export const ModuleAttachment = ({
   accessibilityLabel,
   onPress,
   ...rest
-}: ModuleAttachmentProps) => {
+}: LegacyModuleAttachmentProps) => {
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
 
   // Scaling transformation applied when the button is pressed
@@ -223,7 +223,7 @@ export const ModuleAttachment = ({
           { opacity: disabled ? DISABLED_OPACITY : 1 }
         ]}
       >
-        <ModuleAttachmentContent isFetching={isFetching} {...rest} />
+        <LegacyModuleAttachmentContent isFetching={isFetching} {...rest} />
       </Animated.View>
     </Pressable>
   );
diff --git a/ts/features/messages/components/MessageDetail/MessageDetailHeader.tsx b/ts/features/messages/components/MessageDetail/MessageDetailHeader.tsx
deleted file mode 100644
index ae3acb5fb8a..00000000000
--- a/ts/features/messages/components/MessageDetail/MessageDetailHeader.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { PropsWithChildren } from "react";
-import {
-  ContentWrapper,
-  Divider,
-  H3,
-  LabelSmall,
-  VSpacer
-} from "@pagopa/io-app-design-system";
-import { localeDateFormat } from "../../../../utils/locale";
-import I18n from "../../../../i18n";
-import { ServicePublic } from "../../../../../definitions/backend/ServicePublic";
-import { logosForService } from "../../../../utils/services";
-import { OrganizationHeader } from "./OrganizationHeader";
-
-export type MessageDetailHeaderProps = PropsWithChildren<{
-  createdAt: Date;
-  subject: string;
-  sender?: string;
-  service?: ServicePublic;
-}>;
-
-const MessageHeaderContent = ({
-  subject,
-  createdAt
-}: MessageDetailHeaderProps) => (
-  <>
-    <H3 testID="message-header-subject">{subject}</H3>
-    <VSpacer size={8} />
-    <LabelSmall fontSize="regular" color="grey-700">
-      {localeDateFormat(
-        createdAt,
-        I18n.t("global.dateFormats.fullFormatShortMonthLiteralWithTime")
-      )}
-    </LabelSmall>
-  </>
-);
-
-export const MessageDetailHeader = ({
-  children,
-  service,
-  ...rest
-}: MessageDetailHeaderProps) => (
-  <ContentWrapper>
-    {children}
-    <MessageHeaderContent {...rest} />
-    <VSpacer size={8} />
-    <Divider />
-    {service && (
-      <>
-        {/* TODO: update logoUri when MultiImage component will be available in DS */}
-        <OrganizationHeader
-          logoUri={logosForService(service)[0]}
-          organizationName={service.organization_name}
-          serviceName={service.service_name}
-        />
-        <Divider />
-      </>
-    )}
-  </ContentWrapper>
-);
diff --git a/ts/features/messages/components/MessageDetail/MessageDetailsAttachmentItem.tsx b/ts/features/messages/components/MessageDetail/MessageDetailsAttachmentItem.tsx
new file mode 100644
index 00000000000..9f6e8663863
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/MessageDetailsAttachmentItem.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { ModuleAttachment, VSpacer } from "@pagopa/io-app-design-system";
+import { ServiceId } from "../../../../../definitions/backend/ServiceId";
+import { ThirdPartyAttachment } from "../../../../../definitions/backend/ThirdPartyAttachment";
+import { UIMessageId } from "../../types";
+import { useAttachmentDownload } from "../../hooks/useAttachmentDownload";
+import I18n from "../../../../i18n";
+
+type MessageDetailsAttachmentItemProps = {
+  attachment: ThirdPartyAttachment;
+  bottomSpacer?: boolean;
+  disabled?: boolean;
+  isPN?: boolean;
+  messageId: UIMessageId;
+  onPreNavigate?: () => void;
+  serviceId?: ServiceId;
+};
+
+export const MessageDetailsAttachmentItem = ({
+  attachment,
+  bottomSpacer,
+  disabled = false,
+  isPN = false,
+  messageId,
+  onPreNavigate = undefined,
+  serviceId
+}: MessageDetailsAttachmentItemProps) => {
+  const { displayName, isFetching, onModuleAttachmentPress } =
+    useAttachmentDownload(
+      messageId,
+      attachment,
+      isPN,
+      serviceId,
+      onPreNavigate
+    );
+  return (
+    <>
+      <ModuleAttachment
+        disabled={disabled}
+        fetchingAccessibilityLabel={I18n.t(
+          "features.messages.attachmentDownloadFeedback"
+        )}
+        format={"pdf"}
+        isFetching={isFetching}
+        onPress={() => void onModuleAttachmentPress()}
+        title={displayName}
+      />
+      {bottomSpacer && <VSpacer size={8} />}
+    </>
+  );
+};
diff --git a/ts/features/messages/components/MessageDetail/MessageDetailsAttachments.tsx b/ts/features/messages/components/MessageDetail/MessageDetailsAttachments.tsx
new file mode 100644
index 00000000000..ab5557ff710
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/MessageDetailsAttachments.tsx
@@ -0,0 +1,60 @@
+import * as React from "react";
+import { pipe } from "fp-ts/lib/function";
+import * as B from "fp-ts/lib/boolean";
+import { ListItemHeader } from "@pagopa/io-app-design-system";
+import { UIMessageId } from "../../types";
+import { useIOSelector } from "../../../../store/hooks";
+import { thirdPartyMessageAttachments } from "../../store/reducers/thirdPartyById";
+import I18n from "../../../../i18n";
+import { ATTACHMENT_CATEGORY } from "../../types/attachmentCategory";
+import { MessageDetailsAttachmentItem } from "./MessageDetailsAttachmentItem";
+
+export type MessageDetailsAttachmentsProps = {
+  disabled?: boolean;
+  isPN?: boolean;
+  messageId: UIMessageId;
+};
+
+export const MessageDetailsAttachments = ({
+  disabled = false,
+  isPN = false,
+  messageId
+}: MessageDetailsAttachmentsProps) => {
+  const originalAttachments = useIOSelector(state =>
+    thirdPartyMessageAttachments(state, messageId)
+  );
+  const attachments = pipe(
+    isPN,
+    B.fold(
+      () => originalAttachments,
+      () =>
+        originalAttachments.filter(
+          attachment => attachment.category !== ATTACHMENT_CATEGORY.F24
+        )
+    )
+  );
+
+  const attachmentCount = attachments.length;
+  if (attachmentCount === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <ListItemHeader
+        label={I18n.t("features.messages.attachments")}
+        iconName={"attachment"}
+      />
+      {attachments.map((attachment, index) => (
+        <MessageDetailsAttachmentItem
+          attachment={attachment}
+          bottomSpacer={index + 1 < attachmentCount}
+          isPN={isPN}
+          disabled={disabled}
+          key={`MessageAttachment_${index}`}
+          messageId={messageId}
+        />
+      ))}
+    </>
+  );
+};
diff --git a/ts/features/messages/components/MessageDetail/MessageDetailsFooter.tsx b/ts/features/messages/components/MessageDetail/MessageDetailsFooter.tsx
new file mode 100644
index 00000000000..6f8e4840ed8
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/MessageDetailsFooter.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import { IOColors, IOStyles, VSpacer } from "@pagopa/io-app-design-system";
+import { useIOSelector } from "../../../../store/hooks";
+import { serviceMetadataByIdSelector } from "../../../services/store/reducers/servicesById";
+import { ServiceId } from "../../../../../definitions/backend/ServiceId";
+import { UIMessageId } from "../../types";
+import { ContactsListItem } from "./ContactsListItem";
+import { ShowMoreListItem } from "./ShowMoreListItem";
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: IOColors["grey-50"],
+    paddingBottom: "75%",
+    marginBottom: "-75%"
+  }
+});
+
+export type MessageDetailsFooterProps = {
+  messageId: UIMessageId;
+  serviceId: ServiceId;
+};
+
+export const MessageDetailsFooter = ({
+  messageId,
+  serviceId
+}: MessageDetailsFooterProps) => {
+  const serviceMetadata = useIOSelector(state =>
+    serviceMetadataByIdSelector(state, serviceId)
+  );
+
+  return (
+    <View style={[IOStyles.horizontalContentPadding, styles.container]}>
+      <VSpacer size={16} />
+      {(serviceMetadata?.email || serviceMetadata?.phone) && (
+        <ContactsListItem
+          email={serviceMetadata.email}
+          phone={serviceMetadata.phone}
+        />
+      )}
+
+      <ShowMoreListItem messageId={messageId} />
+    </View>
+  );
+};
diff --git a/ts/features/messages/components/MessageDetail/MessageDetailsHeader.tsx b/ts/features/messages/components/MessageDetail/MessageDetailsHeader.tsx
new file mode 100644
index 00000000000..4d13d10d661
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/MessageDetailsHeader.tsx
@@ -0,0 +1,78 @@
+import React, { PropsWithChildren } from "react";
+import { StyleSheet, View } from "react-native";
+import { Divider, H3, LabelSmall, VSpacer } from "@pagopa/io-app-design-system";
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/lib/Option";
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { ServiceId } from "../../../../../definitions/backend/ServiceId";
+import { localeDateFormat } from "../../../../utils/locale";
+import I18n from "../../../../i18n";
+import { logosForService } from "../../../../utils/services";
+import { useIOSelector } from "../../../../store/hooks";
+import { serviceByIdPotSelector } from "../../../services/store/reducers/servicesById";
+import { gapBetweenItemsInAGrid } from "../../utils";
+import { OrganizationHeader } from "./OrganizationHeader";
+
+const styles = StyleSheet.create({
+  tagsWrapper: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "flex-start",
+    marginHorizontal: -(gapBetweenItemsInAGrid / 2),
+    marginVertical: -(gapBetweenItemsInAGrid / 2)
+  }
+});
+
+export type MessageDetailsHeaderProps = PropsWithChildren<{
+  createdAt: Date;
+  subject: string;
+  serviceId: ServiceId;
+}>;
+
+const MessageDetailsHeaderContent = ({
+  subject,
+  createdAt
+}: Pick<MessageDetailsHeaderProps, "createdAt" | "subject">) => (
+  <>
+    <H3 testID="message-header-subject">{subject}</H3>
+    <VSpacer size={8} />
+    <LabelSmall fontSize="regular" color="grey-700">
+      {localeDateFormat(
+        createdAt,
+        I18n.t("global.dateFormats.fullFormatShortMonthLiteralWithTime")
+      )}
+    </LabelSmall>
+  </>
+);
+
+export const MessageDetailsHeader = ({
+  children,
+  serviceId,
+  ...rest
+}: MessageDetailsHeaderProps) => {
+  const service = pipe(
+    useIOSelector(state => serviceByIdPotSelector(state, serviceId)),
+    pot.toOption,
+    O.toUndefined
+  );
+
+  return (
+    <>
+      <View style={styles.tagsWrapper}>{children}</View>
+      <VSpacer size={8} />
+      <MessageDetailsHeaderContent {...rest} />
+      <VSpacer size={8} />
+      <Divider />
+      {service && (
+        <>
+          <OrganizationHeader
+            logoUri={logosForService(service)}
+            organizationName={service.organization_name}
+            serviceName={service.service_name}
+          />
+          <Divider />
+        </>
+      )}
+    </>
+  );
+};
diff --git a/ts/features/messages/components/MessageDetail/MessageDetailsPayment.tsx b/ts/features/messages/components/MessageDetail/MessageDetailsPayment.tsx
new file mode 100644
index 00000000000..1a0ebef3d90
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/MessageDetailsPayment.tsx
@@ -0,0 +1,45 @@
+import * as React from "react";
+import { ListItemHeader, VSpacer } from "@pagopa/io-app-design-system";
+import { UIMessageId } from "../../types";
+import { useIOSelector } from "../../../../store/hooks";
+import { messagePaymentDataSelector } from "../../store/reducers/detailsById";
+import I18n from "../../../../i18n";
+import { getRptIdStringFromPaymentData } from "../../utils";
+import { MessagePaymentItem } from "./MessagePaymentItem";
+
+type MessageDetailsPaymentProps = {
+  messageId: UIMessageId;
+};
+
+export const MessageDetailsPayment = ({
+  messageId
+}: MessageDetailsPaymentProps) => {
+  const paymentData = useIOSelector(state =>
+    messagePaymentDataSelector(state, messageId)
+  );
+
+  if (!paymentData) {
+    return null;
+  }
+
+  const rptId = getRptIdStringFromPaymentData(paymentData);
+
+  return (
+    <>
+      <VSpacer size={16} />
+      <ListItemHeader
+        label={I18n.t("features.messages.payments.title")}
+        iconName={"productPagoPA"}
+        iconColor={"blueItalia-500"}
+      />
+      <MessagePaymentItem
+        hideExpirationDate
+        messageId={messageId}
+        noSpaceOnTop
+        noticeNumber={paymentData.noticeNumber}
+        paymentAmount={paymentData.amount}
+        rptId={rptId}
+      />
+    </>
+  );
+};
diff --git a/ts/features/messages/components/MessageDetail/MessageDetailsPaymentButton.tsx b/ts/features/messages/components/MessageDetail/MessageDetailsPaymentButton.tsx
new file mode 100644
index 00000000000..09098d972ce
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/MessageDetailsPaymentButton.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { ButtonSolid, useIOToast } from "@pagopa/io-app-design-system";
+import { PaymentData, UIMessageId } from "../../types";
+import { useIODispatch } from "../../../../store/hooks";
+import I18n from "../../../../i18n";
+import {
+  getRptIdStringFromPaymentData,
+  initializeAndNavigateToWalletForPayment
+} from "../../utils";
+
+type MessageDetailsPaymentButtonProps = {
+  messageId: UIMessageId;
+  paymentData: PaymentData;
+  canNavigateToPayment: boolean;
+  isLoading: boolean;
+};
+
+export const MessageDetailsPaymentButton = ({
+  messageId,
+  paymentData,
+  canNavigateToPayment,
+  isLoading
+}: MessageDetailsPaymentButtonProps) => {
+  const dispatch = useIODispatch();
+  const toast = useIOToast();
+  return (
+    <ButtonSolid
+      label={I18n.t("features.messages.payments.pay")}
+      accessibilityLabel={I18n.t("features.messages.payments.pay")}
+      onPress={() =>
+        initializeAndNavigateToWalletForPayment(
+          messageId,
+          getRptIdStringFromPaymentData(paymentData),
+          false,
+          paymentData.amount,
+          canNavigateToPayment,
+          dispatch,
+          false,
+          () => toast.error(I18n.t("genericError"))
+        )
+      }
+      fullWidth
+      loading={isLoading}
+    />
+  );
+};
diff --git a/ts/features/messages/components/MessageDetail/MessageDetailsReminder.tsx b/ts/features/messages/components/MessageDetail/MessageDetailsReminder.tsx
new file mode 100644
index 00000000000..1a6f4c8932a
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/MessageDetailsReminder.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { VSpacer } from "@pagopa/io-app-design-system";
+import { UIMessageId } from "../../types";
+import { useIOSelector } from "../../../../store/hooks";
+import { paymentExpirationBannerStateSelector } from "../../store/reducers/payments";
+import { MessageDetailsReminderExpiring } from "./MessageDetailsReminderExpiring";
+import { MessageDetailsReminderExpired } from "./MessageDetailsReminderExpired";
+
+export type MessageDetailsReminderProps = {
+  dueDate?: Date;
+  messageId: UIMessageId;
+  title: string;
+};
+
+export const MessageDetailsReminder = ({
+  dueDate,
+  messageId,
+  title
+}: MessageDetailsReminderProps) => {
+  const reminderVisibility = useIOSelector(state =>
+    paymentExpirationBannerStateSelector(state, messageId)
+  );
+  if (reminderVisibility === "hidden" || !dueDate) {
+    return null;
+  }
+
+  const isExpiring = reminderVisibility === "visibleExpiring";
+  return (
+    <>
+      {isExpiring ? (
+        <MessageDetailsReminderExpiring
+          dueDate={dueDate}
+          messageId={messageId}
+          title={title}
+        />
+      ) : (
+        <MessageDetailsReminderExpired
+          dueDate={dueDate}
+          isLoading={reminderVisibility === "loading"}
+        />
+      )}
+      <VSpacer size={8} />
+    </>
+  );
+};
diff --git a/ts/features/messages/components/MessageDetail/MessageDetailsReminderExpired.tsx b/ts/features/messages/components/MessageDetail/MessageDetailsReminderExpired.tsx
new file mode 100644
index 00000000000..d68caa605c4
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/MessageDetailsReminderExpired.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { Alert, IOAlertRadius } from "@pagopa/io-app-design-system";
+import Placeholder from "rn-placeholder";
+import { localeDateFormat } from "../../../../utils/locale";
+import I18n from "../../../../i18n";
+
+type MessageDetailsReminderExpiredProps = {
+  dueDate: Date;
+  isLoading: boolean;
+};
+
+export const MessageDetailsReminderExpired = ({
+  dueDate,
+  isLoading
+}: MessageDetailsReminderExpiredProps) =>
+  isLoading ? (
+    <Placeholder.Box
+      animate="shine"
+      height={84}
+      width={"100%"}
+      radius={IOAlertRadius}
+    />
+  ) : (
+    <Alert
+      testID="due-date-alert"
+      variant="warning"
+      content={I18n.t("features.messages.badge.dueDate", {
+        date: localeDateFormat(
+          dueDate,
+          I18n.t("global.dateFormats.dayMonthWithoutTime")
+        ),
+        time: localeDateFormat(dueDate, I18n.t("global.dateFormats.timeFormat"))
+      })}
+    />
+  );
diff --git a/ts/features/messages/components/MessageDetail/MessageDetailsReminderExpiring.tsx b/ts/features/messages/components/MessageDetail/MessageDetailsReminderExpiring.tsx
new file mode 100644
index 00000000000..fbe70a9d270
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/MessageDetailsReminderExpiring.tsx
@@ -0,0 +1,57 @@
+import React, { useCallback } from "react";
+import { Alert } from "@pagopa/io-app-design-system";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { useIOSelector } from "../../../../store/hooks";
+import { preferredCalendarSelector } from "../../../../store/reducers/persistedPreferences";
+import { UIMessageId } from "../../types";
+import { useMessageReminder } from "../../hooks/useMessageReminder";
+import { localeDateFormat } from "../../../../utils/locale";
+import I18n from "../../../../i18n";
+
+type MessageDetailsReminderExpiringProps = {
+  dueDate: Date;
+  messageId: UIMessageId;
+  title: string;
+};
+
+export const MessageDetailsReminderExpiring = ({
+  dueDate,
+  messageId,
+  title
+}: MessageDetailsReminderExpiringProps) => {
+  const navigation = useIONavigation();
+  const preferredCalendar = useIOSelector(preferredCalendarSelector);
+
+  const navigate = useCallback(() => {
+    navigation.navigate("MESSAGES_NAVIGATOR", {
+      screen: "MESSAGE_DETAIL_CALENDAR",
+      params: {
+        messageId
+      }
+    });
+  }, [messageId, navigation]);
+
+  const { isEventInDeviceCalendar, upsertReminder } = useMessageReminder(
+    messageId,
+    navigate
+  );
+  return (
+    <Alert
+      testID="due-date-alert"
+      variant="warning"
+      action={
+        isEventInDeviceCalendar
+          ? I18n.t("features.messages.alert.removeReminder")
+          : I18n.t("features.messages.alert.addReminder")
+      }
+      onPress={() => upsertReminder(dueDate, title, preferredCalendar)}
+      content={I18n.t("features.messages.alert.content", {
+        date: localeDateFormat(
+          dueDate,
+          I18n.t("global.dateFormats.shortFormat")
+        ),
+        time: localeDateFormat(dueDate, I18n.t("global.dateFormats.timeFormat"))
+      })}
+    />
+  );
+};
diff --git a/ts/features/messages/components/MessageDetail/MessageDetailsScrollViewAdditionalSpace.tsx b/ts/features/messages/components/MessageDetail/MessageDetailsScrollViewAdditionalSpace.tsx
new file mode 100644
index 00000000000..dba6e46b300
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/MessageDetailsScrollViewAdditionalSpace.tsx
@@ -0,0 +1,42 @@
+import * as React from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IOStyles, buttonSolidHeight } from "@pagopa/io-app-design-system";
+import { View } from "react-native";
+import { UIMessageId } from "../../types";
+import { useIOSelector } from "../../../../store/hooks";
+import { isPaymentsButtonVisibleSelector } from "../../store/reducers/payments";
+import { gapBetweenItemsInAGrid } from "../../utils";
+
+type ScrollViewAdditionalSpaceProps = {
+  messageId: UIMessageId;
+  hasCTA1: boolean;
+  hasCTA2: boolean;
+};
+
+export const MessageDetailsScrollViewAdditionalSpace = ({
+  messageId,
+  hasCTA1,
+  hasCTA2
+}: ScrollViewAdditionalSpaceProps) => {
+  const safeAreaInsets = useSafeAreaInsets();
+  const isShowingPaymentButton = useIOSelector(state =>
+    isPaymentsButtonVisibleSelector(state, messageId)
+  );
+  const hasAtLeastAButton = isShowingPaymentButton || hasCTA1 || hasCTA2;
+
+  const height =
+    (hasAtLeastAButton ? IOStyles.footer.paddingBottom : 0) +
+    (isShowingPaymentButton ? buttonSolidHeight + gapBetweenItemsInAGrid : 0) +
+    (hasCTA1 ? buttonSolidHeight + gapBetweenItemsInAGrid : 0) +
+    (hasCTA2 ? buttonSolidHeight + gapBetweenItemsInAGrid : 0) +
+    gapBetweenItemsInAGrid +
+    IOStyles.footer.paddingBottom +
+    safeAreaInsets.bottom;
+  return (
+    <View
+      style={{
+        height
+      }}
+    ></View>
+  );
+};
diff --git a/ts/features/messages/components/MessageDetail/MessageDetailsStickyFooter.tsx b/ts/features/messages/components/MessageDetail/MessageDetailsStickyFooter.tsx
new file mode 100644
index 00000000000..a7999ec8f0b
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/MessageDetailsStickyFooter.tsx
@@ -0,0 +1,354 @@
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+import { useLinkTo } from "@react-navigation/native";
+import {
+  ButtonLink,
+  ButtonOutline,
+  ButtonSolid,
+  IOStyles,
+  VSpacer,
+  buttonSolidHeight
+} from "@pagopa/io-app-design-system";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { PaymentData, UIMessageId } from "../../types";
+import { messagePaymentDataSelector } from "../../store/reducers/detailsById";
+import { useIOSelector } from "../../../../store/hooks";
+import {
+  canNavigateToPaymentFromMessageSelector,
+  paymentsButtonStateSelector
+} from "../../store/reducers/payments";
+import { ServiceId } from "../../../../../definitions/backend/ServiceId";
+import { trackPNOptInMessageAccepted } from "../../../pn/analytics";
+import { handleCtaAction } from "../../utils/messages";
+import { CTA, CTAS } from "../../types/MessageCTA";
+import { MessageDetailsPaymentButton } from "./MessageDetailsPaymentButton";
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    overflow: "hidden",
+    bottom: 0,
+    width: "100%"
+  },
+  buttonLinkInFooter: {
+    height: buttonSolidHeight,
+    justifyContent: "center",
+    alignSelf: "center"
+  }
+});
+
+type MessageDetailsPaymentButtonProps = {
+  ctas?: CTAS;
+  firstCTAIsPNOptInMessage: boolean;
+  messageId: UIMessageId;
+  secondCTAIsPNOptInMessage: boolean;
+  serviceId: ServiceId;
+};
+
+type FooterPaymentWithDoubleCTA = {
+  tag: "PaymentWithDoubleCTA";
+  cta1: CTA;
+  cta2: CTA;
+  paymentData: PaymentData;
+};
+
+type FooterPaymentWithCTA = {
+  tag: "PaymentWithCTA";
+  cta1: CTA;
+  paymentData: PaymentData;
+};
+type FooterDoubleCTA = {
+  tag: "DoubleCTA";
+  cta1: CTA;
+  cta2: CTA;
+};
+type FooterPayment = {
+  tag: "Payment";
+  paymentData: PaymentData;
+};
+type FooterCTA = {
+  tag: "CTA";
+  cta1: CTA;
+};
+type FooterNone = {
+  tag: "None";
+};
+type FooterData =
+  | FooterPaymentWithDoubleCTA
+  | FooterPaymentWithCTA
+  | FooterDoubleCTA
+  | FooterPayment
+  | FooterCTA
+  | FooterNone;
+
+const isNone = (footerData: FooterData): footerData is FooterNone =>
+  footerData.tag === "None";
+
+const foldFooterData = (
+  footerData: FooterData,
+  onPaymentWithDoubleCTA: (
+    paymentWithDoubleCTA: FooterPaymentWithDoubleCTA
+  ) => JSX.Element,
+  onPaymentWithCTA: (paymentWithCTA: FooterPaymentWithCTA) => JSX.Element,
+  onDoubleCTA: (doubleCTA: FooterDoubleCTA) => JSX.Element,
+  onPayment: (paymentCTA: FooterPayment) => JSX.Element,
+  onCTA: (cta: FooterCTA) => JSX.Element,
+  onNone: () => JSX.Element | null
+) => {
+  switch (footerData.tag) {
+    case "PaymentWithDoubleCTA":
+      return onPaymentWithDoubleCTA(footerData);
+    case "PaymentWithCTA":
+      return onPaymentWithCTA(footerData);
+    case "DoubleCTA":
+      return onDoubleCTA(footerData);
+    case "Payment":
+      return onPayment(footerData);
+    case "CTA":
+      return onCTA(footerData);
+  }
+  return onNone();
+};
+
+const computeFooterData = (
+  paymentData: PaymentData | undefined,
+  paymentButtonStatus: "hidden" | "loading" | "enabled",
+  ctas: CTAS | undefined
+): FooterData => {
+  const isPaymentButtonVisible =
+    paymentData && paymentButtonStatus !== "hidden";
+  const isCTA1Visible = !!ctas?.cta_1;
+  const cta2 = ctas?.cta_2;
+  const isCTA2Visible = !!cta2;
+  if (isPaymentButtonVisible && isCTA1Visible && isCTA2Visible) {
+    return {
+      tag: "PaymentWithDoubleCTA",
+      cta1: ctas.cta_1,
+      cta2,
+      paymentData
+    };
+  } else if (isPaymentButtonVisible && isCTA1Visible) {
+    return {
+      tag: "PaymentWithCTA",
+      cta1: ctas.cta_1,
+      paymentData
+    };
+  } else if (isCTA1Visible && isCTA2Visible) {
+    return {
+      tag: "DoubleCTA",
+      cta1: ctas.cta_1,
+      cta2
+    };
+  } else if (isPaymentButtonVisible) {
+    return {
+      tag: "Payment",
+      paymentData
+    };
+  } else if (isCTA1Visible) {
+    return {
+      tag: "CTA",
+      cta1: ctas.cta_1
+    };
+  }
+  return { tag: "None" };
+};
+
+const renderPaymentWithDoubleCTA = (
+  messageId: UIMessageId,
+  paymentData: PaymentData,
+  canNavigateToPayment: boolean,
+  isLoadingPayment: boolean,
+  cta1: CTA,
+  cta1IsPNOptInMessage: boolean,
+  cta2: CTA,
+  cta2IsPNOptInMessage: boolean,
+  onCTAPress: (cta: CTA, isPNOptInMessage: boolean) => void
+) => (
+  <>
+    <MessageDetailsPaymentButton
+      messageId={messageId}
+      paymentData={paymentData}
+      canNavigateToPayment={canNavigateToPayment}
+      isLoading={isLoadingPayment}
+    />
+    <VSpacer size={8} />
+    <ButtonOutline
+      accessibilityLabel={cta1.text}
+      fullWidth
+      label={cta1.text}
+      onPress={() => onCTAPress(cta1, cta1IsPNOptInMessage)}
+    />
+    <VSpacer size={8} />
+    <View style={styles.buttonLinkInFooter}>
+      <ButtonLink
+        accessibilityLabel={cta2.text}
+        label={cta2.text}
+        onPress={() => onCTAPress(cta2, cta2IsPNOptInMessage)}
+      />
+    </View>
+  </>
+);
+const renderPaymentWithCTA = (
+  messageId: UIMessageId,
+  paymentData: PaymentData,
+  canNavigateToPayment: boolean,
+  isLoadingPayment: boolean,
+  cta1: CTA,
+  cta1IsPNOptInMessage: boolean,
+  onCTAPress: (cta: CTA, isPNOptInMessage: boolean) => void
+) => (
+  <>
+    <MessageDetailsPaymentButton
+      messageId={messageId}
+      paymentData={paymentData}
+      canNavigateToPayment={canNavigateToPayment}
+      isLoading={isLoadingPayment}
+    />
+    <VSpacer size={8} />
+    <View style={styles.buttonLinkInFooter}>
+      <ButtonLink
+        accessibilityLabel={cta1.text}
+        label={cta1.text}
+        onPress={() => onCTAPress(cta1, cta1IsPNOptInMessage)}
+      />
+    </View>
+  </>
+);
+const renderDoubleCTA = (
+  cta1: CTA,
+  cta1IsPNOptInMessage: boolean,
+  cta2: CTA,
+  cta2IsPNOptInMessage: boolean,
+  onCTAPress: (cta: CTA, isPNOptInMessage: boolean) => void
+) => (
+  <>
+    <ButtonSolid
+      accessibilityLabel={cta1.text}
+      fullWidth
+      label={cta1.text}
+      onPress={() => onCTAPress(cta1, cta1IsPNOptInMessage)}
+    />
+    <VSpacer size={8} />
+    <View style={styles.buttonLinkInFooter}>
+      <ButtonLink
+        accessibilityLabel={cta2.text}
+        label={cta2.text}
+        onPress={() => onCTAPress(cta2, cta2IsPNOptInMessage)}
+      />
+    </View>
+  </>
+);
+const renderPayment = (
+  messageId: UIMessageId,
+  paymentData: PaymentData,
+  canNavigateToPayment: boolean,
+  isLoadingPayment: boolean
+) => (
+  <MessageDetailsPaymentButton
+    messageId={messageId}
+    paymentData={paymentData}
+    canNavigateToPayment={canNavigateToPayment}
+    isLoading={isLoadingPayment}
+  />
+);
+const renderCTA = (
+  cta: CTA,
+  isPNOptInMessage: boolean,
+  onCTAPress: (cta: CTA, isPNOptInMessage: boolean) => void
+) => (
+  <ButtonSolid
+    accessibilityLabel={cta.text}
+    fullWidth
+    label={cta.text}
+    onPress={() => onCTAPress(cta, isPNOptInMessage)}
+  />
+);
+
+export const MessageDetailsStickyFooter = ({
+  ctas,
+  firstCTAIsPNOptInMessage,
+  messageId,
+  secondCTAIsPNOptInMessage,
+  serviceId
+}: MessageDetailsPaymentButtonProps) => {
+  const safeAreaInsets = useSafeAreaInsets();
+  const paymentData = useIOSelector(state =>
+    messagePaymentDataSelector(state, messageId)
+  );
+  const paymentButtonStatus = useIOSelector(state =>
+    paymentsButtonStateSelector(state, messageId)
+  );
+  const canNavigateToPayment = useIOSelector(state =>
+    canNavigateToPaymentFromMessageSelector(state)
+  );
+
+  const linkTo = useLinkTo();
+  const handleOnPress = React.useCallback(
+    (cta: CTA, isPNOptInMessage: boolean) => {
+      if (isPNOptInMessage) {
+        trackPNOptInMessageAccepted();
+      }
+      handleCtaAction(cta, linkTo, serviceId);
+    },
+    [linkTo, serviceId]
+  );
+
+  const footerData = computeFooterData(paymentData, paymentButtonStatus, ctas);
+  if (isNone(footerData)) {
+    return null;
+  }
+
+  const isPaymentLoading = paymentButtonStatus === "loading";
+  return (
+    <View
+      style={[
+        IOStyles.footer,
+        styles.container,
+        { paddingBottom: safeAreaInsets.bottom + IOStyles.footer.paddingBottom }
+      ]}
+    >
+      {foldFooterData(
+        footerData,
+        paymentWithDoubleCTA =>
+          renderPaymentWithDoubleCTA(
+            messageId,
+            paymentWithDoubleCTA.paymentData,
+            canNavigateToPayment,
+            isPaymentLoading,
+            paymentWithDoubleCTA.cta1,
+            firstCTAIsPNOptInMessage,
+            paymentWithDoubleCTA.cta2,
+            secondCTAIsPNOptInMessage,
+            handleOnPress
+          ),
+        paymentWithCTA =>
+          renderPaymentWithCTA(
+            messageId,
+            paymentWithCTA.paymentData,
+            canNavigateToPayment,
+            isPaymentLoading,
+            paymentWithCTA.cta1,
+            firstCTAIsPNOptInMessage,
+            handleOnPress
+          ),
+        doubleCTA =>
+          renderDoubleCTA(
+            doubleCTA.cta1,
+            firstCTAIsPNOptInMessage,
+            doubleCTA.cta2,
+            secondCTAIsPNOptInMessage,
+            handleOnPress
+          ),
+        payment =>
+          renderPayment(
+            messageId,
+            payment.paymentData,
+            canNavigateToPayment,
+            isPaymentLoading
+          ),
+        cta => renderCTA(cta.cta1, firstCTAIsPNOptInMessage, handleOnPress),
+        () => null
+      )}
+    </View>
+  );
+};
diff --git a/ts/features/messages/components/MessageDetail/MessageDetailsTagBox.tsx b/ts/features/messages/components/MessageDetail/MessageDetailsTagBox.tsx
new file mode 100644
index 00000000000..ef1906e3992
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/MessageDetailsTagBox.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import { gapBetweenItemsInAGrid } from "../../utils";
+
+const styles = StyleSheet.create({
+  tagWrapper: {
+    marginHorizontal: gapBetweenItemsInAGrid / 2,
+    marginVertical: gapBetweenItemsInAGrid / 2
+  }
+});
+
+export type MessageDetailsTagBoxProps = {
+  children: React.ReactNode;
+};
+
+export const MessageDetailsTagBox = ({
+  children
+}: MessageDetailsTagBoxProps) => (
+  <View style={styles.tagWrapper}>{children}</View>
+);
diff --git a/ts/features/messages/components/MessageDetail/MessageMarkdown.tsx b/ts/features/messages/components/MessageDetail/MessageMarkdown.tsx
index 6dd81298d80..f0a3985b03c 100644
--- a/ts/features/messages/components/MessageDetail/MessageMarkdown.tsx
+++ b/ts/features/messages/components/MessageDetail/MessageMarkdown.tsx
@@ -4,9 +4,14 @@
 
 import { Omit } from "@pagopa/ts-commons/lib/types";
 import React from "react";
-
 import customVariables from "../../../../theme/variables";
-import Markdown, { MarkdownProps } from "../../../../components/ui/Markdown";
+import {
+  Markdown,
+  MarkdownProps
+} from "../../../../components/ui/Markdown/Markdown";
+import { isDesignSystemEnabledSelector } from "../../../../store/reducers/persistedPreferences";
+import { useIOSelector } from "../../../../store/hooks";
+import LegacyMarkdown from "../../../../components/ui/Markdown/LegacyMarkdown";
 
 type Props = Omit<MarkdownProps, "cssStyle">;
 
@@ -55,8 +60,11 @@ img {
 }
 `;
 
-const MessageMarkdown: React.SFC<Props> = props => (
-  <Markdown {...props} cssStyle={MESSAGE_CSS_STYLE} />
-);
-
-export default MessageMarkdown;
+export const MessageMarkdown = (props: Props) => {
+  const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector);
+  return isDesignSystemEnabled ? (
+    <Markdown {...props} cssStyle={MESSAGE_CSS_STYLE} />
+  ) : (
+    <LegacyMarkdown {...props} cssStyle={MESSAGE_CSS_STYLE} />
+  );
+};
diff --git a/ts/features/pn/components/MessagePaymentItem.tsx b/ts/features/messages/components/MessageDetail/MessagePaymentItem.tsx
similarity index 67%
rename from ts/features/pn/components/MessagePaymentItem.tsx
rename to ts/features/messages/components/MessageDetail/MessagePaymentItem.tsx
index 92684d5c64d..060b0f36027 100644
--- a/ts/features/pn/components/MessagePaymentItem.tsx
+++ b/ts/features/messages/components/MessageDetail/MessagePaymentItem.tsx
@@ -1,45 +1,53 @@
-import { pipe } from "fp-ts/lib/function";
+import {
+  ModulePaymentNotice,
+  PaymentNoticeStatus,
+  VSpacer,
+  useIOToast
+} from "@pagopa/io-app-design-system";
 import * as O from "fp-ts/lib/Option";
+import { pipe } from "fp-ts/lib/function";
 import React, { useCallback, useEffect } from "react";
 import { View } from "react-native";
 import { useDispatch, useStore } from "react-redux";
+import { PaymentAmount } from "../../../../../definitions/backend/PaymentAmount";
+import { Detail_v2Enum } from "../../../../../definitions/backend/PaymentProblemJson";
+import { PaymentRequestsGetResponse } from "../../../../../definitions/backend/PaymentRequestsGetResponse";
 import {
-  ModulePaymentNotice,
-  PaymentNoticeStatus,
-  VSpacer
-} from "@pagopa/io-app-design-system";
-import I18n from "i18n-js";
-import { NotificationPaymentInfo } from "../../../../definitions/pn/NotificationPaymentInfo";
-import { UIMessageId } from "../../messages/types";
-import { getRptIdStringFromPayment } from "../utils/rptId";
-import { GlobalState } from "../../../store/reducers/types";
-import {
-  paymentStatusForUISelector,
-  shouldUpdatePaymentSelector
-} from "../store/reducers/payments";
-import { useIOSelector } from "../../../store/hooks";
-import { updatePaymentForMessage } from "../store/actions";
-import { RemoteValue, fold } from "../../../common/model/RemoteValue";
-import { PaymentRequestsGetResponse } from "../../../../definitions/backend/PaymentRequestsGetResponse";
-import { Detail_v2Enum } from "../../../../definitions/backend/PaymentProblemJson";
+  RemoteValue,
+  fold,
+  isError
+} from "../../../../common/model/RemoteValue";
+import I18n from "../../../../i18n";
+import { useIOSelector } from "../../../../store/hooks";
+import { GlobalState } from "../../../../store/reducers/types";
+import { format } from "../../../../utils/dates";
 import {
   cleanTransactionDescription,
   getV2ErrorMainType
-} from "../../../utils/payment";
-import { getBadgeTextByPaymentNoticeStatus } from "../../messages/utils/strings";
-import { format } from "../../../utils/dates";
+} from "../../../../utils/payment";
 import {
   centsToAmount,
   formatNumberAmount
-} from "../../../utils/stringBuilder";
-import { useIOToast } from "../../../components/Toast";
-import { initializeAndNavigateToWalletForPayment } from "../utils";
+} from "../../../../utils/stringBuilder";
+import { updatePaymentForMessage } from "../../store/actions";
+import {
+  canNavigateToPaymentFromMessageSelector,
+  paymentStatusForUISelector,
+  shouldUpdatePaymentSelector
+} from "../../store/reducers/payments";
+import { UIMessageId } from "../../types";
+import { initializeAndNavigateToWalletForPayment } from "../../utils";
+import { getBadgeTextByPaymentNoticeStatus } from "../../utils/strings";
 
 type MessagePaymentItemProps = {
-  index: number;
+  hideExpirationDate?: boolean;
+  index?: number;
+  isPNPayment?: boolean;
   messageId: UIMessageId;
-  payment: NotificationPaymentInfo;
   noSpaceOnTop?: boolean;
+  noticeNumber: string;
+  paymentAmount?: PaymentAmount;
+  rptId: string;
   willNavigateToPayment?: () => void;
 };
 
@@ -87,7 +95,8 @@ const modulePaymentNoticeForUndefinedOrLoadingPayment = () => (
 );
 
 const modulePaymentNoticeFromPaymentStatus = (
-  noticeCode: string,
+  hideExpirationDate: boolean,
+  noticeNumber: string,
   paymentStatus: RemoteValue<PaymentRequestsGetResponse, Detail_v2Enum>,
   paymentCallback: () => void
 ) =>
@@ -99,6 +108,7 @@ const modulePaymentNoticeFromPaymentStatus = (
       const dueDateOrUndefined = pipe(
         payablePayment.dueDate,
         O.fromNullable,
+        O.filter(_ => !hideExpirationDate),
         O.map(
           dueDate =>
             `${I18n.t("wallet.firstTransactionSummary.dueDate")} ${format(
@@ -128,15 +138,15 @@ const modulePaymentNoticeFromPaymentStatus = (
       );
     },
     processedPaymentDetails => {
-      const formattedPaymentNoticeCode = noticeCode
+      const formattedPaymentNoticeNumber = noticeNumber
         .replace(/(\d{4})/g, "$1  ")
         .trim();
       const { paymentNoticeStatus, badgeText } =
         processedUIPaymentFromDetailV2Enum(processedPaymentDetails);
       return (
         <ModulePaymentNotice
-          title={I18n.t("features.pn.details.noticeCode")}
-          subtitle={formattedPaymentNoticeCode}
+          title={I18n.t("features.messages.payments.noticeCode")}
+          subtitle={formattedPaymentNoticeNumber}
           onPress={paymentCallback}
           paymentNoticeStatus={paymentNoticeStatus}
           badgeText={badgeText}
@@ -146,50 +156,72 @@ const modulePaymentNoticeFromPaymentStatus = (
   );
 
 export const MessagePaymentItem = ({
-  index,
+  hideExpirationDate = false,
+  index = 0,
+  isPNPayment = false,
   messageId,
-  payment,
   noSpaceOnTop = false,
+  noticeNumber,
+  paymentAmount = undefined,
+  rptId,
   willNavigateToPayment = undefined
 }: MessagePaymentItemProps) => {
   const dispatch = useDispatch();
   const store = useStore();
   const toast = useIOToast();
 
-  const paymentId = getRptIdStringFromPayment(payment);
-
   const globalState = store.getState() as GlobalState;
   const shouldUpdatePayment = shouldUpdatePaymentSelector(
     globalState,
     messageId,
-    paymentId
+    rptId
   );
   const paymentStatusForUI = useIOSelector(state =>
-    paymentStatusForUISelector(state, messageId, paymentId)
+    paymentStatusForUISelector(state, messageId, rptId)
+  );
+
+  const canNavigateToPayment = useIOSelector(state =>
+    canNavigateToPaymentFromMessageSelector(state)
   );
 
   const startPaymentCallback = useCallback(() => {
     initializeAndNavigateToWalletForPayment(
-      paymentId,
+      messageId,
+      rptId,
+      isError(paymentStatusForUI),
+      paymentAmount,
+      canNavigateToPayment,
       dispatch,
+      isPNPayment,
       () => toast.error(I18n.t("genericError")),
       () => willNavigateToPayment?.()
     );
-  }, [dispatch, paymentId, toast, willNavigateToPayment]);
+  }, [
+    canNavigateToPayment,
+    dispatch,
+    isPNPayment,
+    messageId,
+    paymentAmount,
+    paymentStatusForUI,
+    rptId,
+    toast,
+    willNavigateToPayment
+  ]);
   useEffect(() => {
     if (shouldUpdatePayment) {
       const updateAction = updatePaymentForMessage.request({
         messageId,
-        paymentId
+        paymentId: rptId
       });
       dispatch(updateAction);
     }
-  }, [dispatch, messageId, paymentId, shouldUpdatePayment]);
+  }, [dispatch, messageId, rptId, shouldUpdatePayment]);
   return (
     <View>
       {!noSpaceOnTop && <VSpacer size={index > 0 ? 8 : 24} />}
       {modulePaymentNoticeFromPaymentStatus(
-        payment.noticeCode,
+        hideExpirationDate,
+        noticeNumber,
         paymentStatusForUI,
         startPaymentCallback
       )}
diff --git a/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx b/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx
index 43537c53909..64d1ecf7a82 100644
--- a/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx
+++ b/ts/features/messages/components/MessageDetail/OrganizationHeader.tsx
@@ -10,7 +10,7 @@ import {
 export type OrganizationHeaderProps = {
   organizationName: string;
   serviceName: string;
-  logoUri: ImageURISource;
+  logoUri: ReadonlyArray<ImageURISource>;
 };
 
 const ITEM_PADDING_VERTICAL: IOSpacingScale = 6;
diff --git a/ts/features/messages/components/MessageDetail/ShowMoreListItem.tsx b/ts/features/messages/components/MessageDetail/ShowMoreListItem.tsx
new file mode 100644
index 00000000000..288b19ba796
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/ShowMoreListItem.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { ListItemAction, ListItemInfoCopy } from "@pagopa/io-app-design-system";
+import I18n from "../../../../i18n";
+import { UIMessageId } from "../../types";
+import { useIOBottomSheetAutoresizableModal } from "../../../../utils/hooks/bottomSheet";
+import { clipboardSetStringWithFeedback } from "../../../../utils/clipboard";
+
+type ShowMoreListItemProps = {
+  messageId: UIMessageId;
+};
+
+export const ShowMoreListItem = ({ messageId }: ShowMoreListItemProps) => {
+  const { bottomSheet, present } = useIOBottomSheetAutoresizableModal(
+    {
+      component: (
+        <ListItemInfoCopy
+          value={messageId}
+          label={I18n.t("messageDetails.showMoreDataBottomSheet.messageId")}
+          accessibilityLabel={I18n.t(
+            "messageDetails.showMoreDataBottomSheet.messageIdAccessibility"
+          )}
+          onPress={() => clipboardSetStringWithFeedback(messageId)}
+        />
+      ),
+      title: I18n.t("messageDetails.showMoreDataBottomSheet.title")
+    },
+    100
+  );
+
+  return (
+    <>
+      <ListItemAction
+        accessibilityLabel={I18n.t("messageDetails.footer.showMoreData")}
+        icon="terms"
+        label={I18n.t("messageDetails.footer.showMoreData")}
+        onPress={present}
+        testID="show-more-data-action"
+        variant="primary"
+      />
+      {bottomSheet}
+    </>
+  );
+};
diff --git a/ts/features/messages/components/__test__/LegacyMessageAttachments.test.tsx b/ts/features/messages/components/MessageDetail/__tests__/LegacyMessageAttachments.test.tsx
similarity index 80%
rename from ts/features/messages/components/__test__/LegacyMessageAttachments.test.tsx
rename to ts/features/messages/components/MessageDetail/__tests__/LegacyMessageAttachments.test.tsx
index 52eb7e44539..d59b81cc351 100644
--- a/ts/features/messages/components/__test__/LegacyMessageAttachments.test.tsx
+++ b/ts/features/messages/components/MessageDetail/__tests__/LegacyMessageAttachments.test.tsx
@@ -2,20 +2,21 @@ import React from "react";
 import { act } from "@testing-library/react-native";
 import * as pot from "@pagopa/ts-commons/lib/pot";
 import { createStore } from "redux";
-import { applicationChangeState } from "../../../../store/actions/application";
-import { appReducer } from "../../../../store/reducers";
-import { GlobalState } from "../../../../store/reducers/types";
-import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { appReducer } from "../../../../../store/reducers";
+import { GlobalState } from "../../../../../store/reducers/types";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
 import { LegacyMessageAttachments } from "../LegacyMessageAttachments";
-import { Downloads } from "../../store/reducers/downloads";
-import { mockPdfAttachment } from "../../__mocks__/attachment";
-import { downloadAttachment } from "../../store/actions";
-import { MESSAGES_ROUTES } from "../../navigation/routes";
+import { Downloads } from "../../../store/reducers/downloads";
+import { mockPdfAttachment } from "../../../__mocks__/attachment";
+import { downloadAttachment } from "../../../store/actions";
+import { MESSAGES_ROUTES } from "../../../navigation/routes";
+import { messageId_1 } from "../../../__mocks__/messages";
 
 const mockOpenPreview = jest.fn();
 const mockShowToast = jest.fn();
 
-jest.mock("../../../../utils/showToast", () => ({
+jest.mock("../../../../../utils/showToast", () => ({
   showToast: () => mockShowToast()
 }));
 
@@ -35,10 +36,11 @@ describe("LegacyMessageAttachments", () => {
           const { component } = renderComponent(
             {
               attachments: [mockPdfAttachment],
+              messageId: messageId_1,
               openPreview: jest.fn()
             },
             {
-              [mockPdfAttachment.messageId]: {
+              [messageId_1]: {
                 [mockPdfAttachment.id]: loadingPot
               }
             }
@@ -64,10 +66,11 @@ describe("LegacyMessageAttachments", () => {
           const { component } = renderComponent(
             {
               attachments: [mockPdfAttachment],
+              messageId: messageId_1,
               openPreview: jest.fn()
             },
             {
-              [mockPdfAttachment.messageId]: {
+              [messageId_1]: {
                 [mockPdfAttachment.id]: notLoadingPot
               }
             }
@@ -84,10 +87,11 @@ describe("LegacyMessageAttachments", () => {
         const { store } = renderComponent(
           {
             attachments: [mockPdfAttachment],
+            messageId: messageId_1,
             openPreview: jest.fn()
           },
           {
-            [mockPdfAttachment.messageId]: {
+            [messageId_1]: {
               [mockPdfAttachment.id]: pot.noneLoading
             }
           }
@@ -97,6 +101,7 @@ describe("LegacyMessageAttachments", () => {
           store.dispatch(
             downloadAttachment.failure({
               attachment: mockPdfAttachment,
+              messageId: messageId_1,
               error: new Error()
             })
           )
@@ -110,10 +115,11 @@ describe("LegacyMessageAttachments", () => {
         const { store } = renderComponent(
           {
             attachments: [mockPdfAttachment],
+            messageId: messageId_1,
             openPreview: mockOpenPreview()
           },
           {
-            [mockPdfAttachment.messageId]: {
+            [messageId_1]: {
               [mockPdfAttachment.id]: pot.noneLoading
             }
           }
@@ -123,6 +129,7 @@ describe("LegacyMessageAttachments", () => {
           store.dispatch(
             downloadAttachment.success({
               path: "path",
+              messageId: messageId_1,
               attachment: mockPdfAttachment
             })
           )
diff --git a/ts/features/messages/components/MessageDetail/__tests__/MessageDetailHeader.test.tsx b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailHeader.test.tsx
deleted file mode 100644
index 145c99ef552..00000000000
--- a/ts/features/messages/components/MessageDetail/__tests__/MessageDetailHeader.test.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { ComponentProps } from "react";
-import { render } from "@testing-library/react-native";
-import { MessageDetailHeader } from "../MessageDetailHeader";
-import { ServicePublic } from "../../../../../../definitions/backend/ServicePublic";
-
-const service = {
-  service_id: "serviceId",
-  service_name: "health",
-  organization_name: "Organization foo",
-  department_name: "Department one",
-  organization_fiscal_code: "OFSAAAAAA"
-} as ServicePublic;
-
-const defaultProps: ComponentProps<typeof MessageDetailHeader> = {
-  subject: "Subject",
-  createdAt: new Date("2021-10-18T16:00:30.541Z")
-};
-
-describe("MessageDetailHeader component", () => {
-  it("should match the snapshot with default props", () => {
-    const component = render(<MessageDetailHeader {...defaultProps} />);
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-
-  it("should match the snapshot with all props", () => {
-    const component = render(
-      <MessageDetailHeader
-        {...defaultProps}
-        sender="#### Sender ####"
-        service={service}
-      />
-    );
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-
-  it("should render the organization info when the service is defined", () => {
-    const component = render(
-      <MessageDetailHeader
-        {...defaultProps}
-        sender="#### Sender ####"
-        service={service}
-      />
-    );
-    expect(component.queryByText(service.organization_name)).not.toBeNull();
-    expect(component.queryByText(service.service_name)).not.toBeNull();
-  });
-});
diff --git a/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsAttachmentItem.test.tsx b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsAttachmentItem.test.tsx
new file mode 100644
index 00000000000..d41de060dc9
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsAttachmentItem.test.tsx
@@ -0,0 +1,124 @@
+import * as React from "react";
+import { createStore } from "redux";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { preferencesDesignSystemSetEnabled } from "../../../../../store/actions/persistedPreferences";
+import { appReducer } from "../../../../../store/reducers";
+import { downloadAttachment } from "../../../store/actions";
+import { UIMessageId } from "../../../types";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
+import { MessageDetailsAttachmentItem } from "../MessageDetailsAttachmentItem";
+import { ThirdPartyAttachment } from "../../../../../../definitions/backend/ThirdPartyAttachment";
+import { ServiceId } from "../../../../../../definitions/backend/ServiceId";
+
+describe("MessageDetailsAttachmentItem", () => {
+  it("Should match snapshot with required parameters", () => {
+    const messageId = "01HNWXJG52YS359GWSYSRK2BWC" as UIMessageId;
+    const thirdPartyAttachment = {
+      id: "1",
+      url: "https://invalid.url",
+      content_type: "application/pdf",
+      name: "A PDF File",
+      category: "DOCUMENT"
+    } as ThirdPartyAttachment;
+
+    const component = renderScreen(thirdPartyAttachment, messageId);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match snapshot with all parameters", () => {
+    const messageId = "01HNWXJG52YS359GWSYSRK2BWC" as UIMessageId;
+    const thirdPartyAttachment = {
+      id: "1",
+      url: "https://invalid.url",
+      content_type: "application/pdf",
+      name: "A PDF File",
+      category: "DOCUMENT"
+    } as ThirdPartyAttachment;
+    const serviceId = "01HNWXKWAGWPHV7VGMQ21EZPSA" as ServiceId;
+
+    const component = renderScreen(
+      thirdPartyAttachment,
+      messageId,
+      serviceId,
+      true,
+      false,
+      true
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match snapshot when the attachment has no name", () => {
+    const messageId = "01HNWXJG52YS359GWSYSRK2BWC" as UIMessageId;
+    const thirdPartyAttachment = {
+      id: "1",
+      url: "https://invalid.url",
+      content_type: "application/pdf",
+      category: "DOCUMENT"
+    } as ThirdPartyAttachment;
+
+    const component = renderScreen(thirdPartyAttachment, messageId);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match snapshot when is fetching the attachment", () => {
+    const messageId = "01HNWXJG52YS359GWSYSRK2BWC" as UIMessageId;
+    const thirdPartyAttachment = {
+      id: "1",
+      url: "https://invalid.url",
+      content_type: "application/pdf",
+      category: "DOCUMENT"
+    } as ThirdPartyAttachment;
+
+    const component = renderScreen(
+      thirdPartyAttachment,
+      messageId,
+      undefined,
+      undefined,
+      true,
+      false
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderScreen = (
+  attachment: ThirdPartyAttachment,
+  messageId: UIMessageId,
+  serviceId?: ServiceId,
+  bottomSpacer?: boolean,
+  isFetching?: boolean,
+  disabled?: boolean
+) => {
+  const initialState = appReducer(undefined, applicationChangeState("active"));
+  const designSystemState = appReducer(
+    initialState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+  const finalState = appReducer(
+    designSystemState,
+    isFetching
+      ? downloadAttachment.request({
+          attachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      : downloadAttachment.success({
+          messageId,
+          attachment,
+          path: "file:///fileName.pdf"
+        })
+  );
+  const store = createStore(appReducer, finalState as any);
+
+  return renderScreenWithNavigationStoreContext(
+    () => (
+      <MessageDetailsAttachmentItem
+        attachment={attachment}
+        bottomSpacer={bottomSpacer}
+        disabled={disabled}
+        messageId={messageId}
+        serviceId={serviceId}
+      />
+    ),
+    "DUMMY",
+    {},
+    store
+  );
+};
diff --git a/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsAttachments.test.tsx b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsAttachments.test.tsx
new file mode 100644
index 00000000000..7865045300b
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsAttachments.test.tsx
@@ -0,0 +1,106 @@
+import * as React from "react";
+import { createStore } from "redux";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { preferencesDesignSystemSetEnabled } from "../../../../../store/actions/persistedPreferences";
+import { appReducer } from "../../../../../store/reducers";
+import { UIMessageId } from "../../../types";
+import { MessageDetailsAttachments } from "../MessageDetailsAttachments";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
+import { loadThirdPartyMessage } from "../../../store/actions";
+import { ThirdPartyMessage } from "../../../../../../definitions/backend/ThirdPartyMessage";
+import { ThirdPartyMessageWithContent } from "../../../../../../definitions/backend/ThirdPartyMessageWithContent";
+import { ThirdPartyAttachment } from "../../../../../../definitions/backend/ThirdPartyAttachment";
+import { ATTACHMENT_CATEGORY } from "../../../types/attachmentCategory";
+
+describe("MessageDetailsAttachments", () => {
+  it("Should match snapshot with no attachments", () => {
+    const messageId = "01HNWYRT55GXGPXR16BW2MSBVY" as UIMessageId;
+    const component = renderScreen(messageId);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match snapshot with no attachments and disabled UI", () => {
+    const messageId = "01HNWYRT55GXGPXR16BW2MSBVY" as UIMessageId;
+    const component = renderScreen(messageId, 0, true);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match snapshot with no attachments, where F24 have been removed and disabled UI", () => {
+    const messageId = "01HNWYRT55GXGPXR16BW2MSBVY" as UIMessageId;
+    const component = renderScreen(messageId, 0, true, true);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match snapshot with 1 attachment", () => {
+    const messageId = "01HNWYRT55GXGPXR16BW2MSBVY" as UIMessageId;
+    const component = renderScreen(messageId, 1);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match snapshot with 1 attachment that is disabled", () => {
+    const messageId = "01HNWYRT55GXGPXR16BW2MSBVY" as UIMessageId;
+    const component = renderScreen(messageId, 1, true);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match snapshot with 1 attachment that is disabled and F24 have been removed", () => {
+    const messageId = "01HNWYRT55GXGPXR16BW2MSBVY" as UIMessageId;
+    const component = renderScreen(messageId, 1, true, true);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match snapshot with 10 attachments", () => {
+    const messageId = "01HNWYRT55GXGPXR16BW2MSBVY" as UIMessageId;
+    const component = renderScreen(messageId, 10);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match snapshot with 10 attachments that are disabled", () => {
+    const messageId = "01HNWYRT55GXGPXR16BW2MSBVY" as UIMessageId;
+    const component = renderScreen(messageId, 10, true);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match snapshot with 5 attachments that are disabled and F24 have been removed", () => {
+    const messageId = "01HNWYRT55GXGPXR16BW2MSBVY" as UIMessageId;
+    const component = renderScreen(messageId, 10, true, true);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderScreen = (
+  messageId: UIMessageId,
+  attachmentCount: number = 0,
+  disabled: boolean = false,
+  isPN: boolean = false
+) => {
+  const initialState = appReducer(undefined, applicationChangeState("active"));
+  const designSystemState = appReducer(
+    initialState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+
+  const attachments = Array(attachmentCount).map(index => ({
+    id: `${index}`,
+    url: `https://invalid.url/${index}.pdf`,
+    category: index % 2 === 1 ? ATTACHMENT_CATEGORY.F24 : undefined
+  })) as Array<ThirdPartyAttachment>;
+
+  const finalState = appReducer(
+    designSystemState,
+    loadThirdPartyMessage.success({
+      id: messageId,
+      content: {
+        third_party_message: {
+          attachments
+        } as ThirdPartyMessage
+      } as ThirdPartyMessageWithContent
+    })
+  );
+  const store = createStore(appReducer, finalState as any);
+
+  return renderScreenWithNavigationStoreContext(
+    () => (
+      <MessageDetailsAttachments
+        messageId={messageId}
+        disabled={disabled}
+        isPN={isPN}
+      />
+    ),
+    "DUMMY",
+    {},
+    store
+  );
+};
diff --git a/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsFooter.test.tsx b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsFooter.test.tsx
new file mode 100644
index 00000000000..df4593179ee
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsFooter.test.tsx
@@ -0,0 +1,132 @@
+import React, { ComponentProps } from "react";
+import { Action, Store } from "redux";
+import configureMockStore from "redux-mock-store";
+import { fireEvent } from "@testing-library/react-native";
+import { appReducer } from "../../../../../store/reducers";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { GlobalState } from "../../../../../store/reducers/types";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
+import { loadServiceDetail } from "../../../../../store/actions/services";
+import { messageId_1, service_1 } from "../../../__mocks__/messages";
+import { reproduceSequence } from "../../../../../utils/tests";
+import { MessageDetailsFooter } from "../MessageDetailsFooter";
+import { ServiceMetadata } from "../../../../../../definitions/backend/ServiceMetadata";
+
+const mockPresentBottomSheet = jest.fn();
+
+jest.mock("../../../../../utils/hooks/bottomSheet", () => ({
+  useIOBottomSheetAutoresizableModal: () => ({
+    present: mockPresentBottomSheet
+  })
+}));
+
+const defaultProps: ComponentProps<typeof MessageDetailsFooter> = {
+  messageId: messageId_1,
+  serviceId: service_1.service_id
+};
+
+describe("MessageDetailsFooter component", () => {
+  beforeEach(() => {
+    mockPresentBottomSheet.mockReset();
+  });
+
+  it("should match the snapshot when the service's contact details are defined", () => {
+    const sequenceOfActions: ReadonlyArray<Action> = [
+      applicationChangeState("active"),
+      loadServiceDetail.success({
+        ...service_1,
+        service_metadata: {
+          email: "test@test.com",
+          phone: "+393331234567"
+        } as ServiceMetadata
+      })
+    ];
+
+    const state: GlobalState = reproduceSequence(
+      {} as GlobalState,
+      appReducer,
+      sequenceOfActions
+    );
+
+    const { component } = renderComponent(state, defaultProps);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it("should match the snapshot when the service's contact details are not defined", () => {
+    const sequenceOfActions: ReadonlyArray<Action> = [
+      applicationChangeState("active"),
+      loadServiceDetail.success(service_1)
+    ];
+
+    const state: GlobalState = reproduceSequence(
+      {} as GlobalState,
+      appReducer,
+      sequenceOfActions
+    );
+
+    const { component } = renderComponent(state, defaultProps);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it("should call present function when the 'Show more data' action is pressed", () => {
+    const sequenceOfActions: ReadonlyArray<Action> = [
+      applicationChangeState("active"),
+      loadServiceDetail.success(service_1)
+    ];
+
+    const state: GlobalState = reproduceSequence(
+      {} as GlobalState,
+      appReducer,
+      sequenceOfActions
+    );
+
+    const { component } = renderComponent(state, defaultProps);
+
+    const showMoreDataAction = component.getByTestId("show-more-data-action");
+    fireEvent.press(showMoreDataAction);
+    expect(mockPresentBottomSheet).toBeCalledTimes(1);
+  });
+
+  it("should call present function when the 'Contacts' action is pressed", () => {
+    const sequenceOfActions: ReadonlyArray<Action> = [
+      applicationChangeState("active"),
+      loadServiceDetail.success({
+        ...service_1,
+        service_metadata: {
+          email: "test@test.com",
+          phone: "+393331234567"
+        } as ServiceMetadata
+      })
+    ];
+
+    const state: GlobalState = reproduceSequence(
+      {} as GlobalState,
+      appReducer,
+      sequenceOfActions
+    );
+
+    const { component } = renderComponent(state, defaultProps);
+
+    const contactsAction = component.getByTestId("contacts-action");
+    fireEvent.press(contactsAction);
+    expect(mockPresentBottomSheet).toBeCalledTimes(1);
+  });
+});
+
+const renderComponent = (
+  state: GlobalState,
+  props: React.ComponentProps<typeof MessageDetailsFooter>
+) => {
+  const mockStore = configureMockStore<GlobalState>();
+  const store: Store<GlobalState> = mockStore(state);
+
+  return {
+    component: renderScreenWithNavigationStoreContext<GlobalState>(
+      () => <MessageDetailsFooter {...props} />,
+      "DUMMY_ROUTE",
+      {},
+      store
+    ),
+    store
+  };
+};
diff --git a/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsHeader.test.tsx b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsHeader.test.tsx
new file mode 100644
index 00000000000..43f6ae34900
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsHeader.test.tsx
@@ -0,0 +1,61 @@
+import React, { ComponentProps } from "react";
+import { Action, Store } from "redux";
+import configureMockStore from "redux-mock-store";
+import { MessageDetailsHeader } from "../MessageDetailsHeader";
+import { ServiceId } from "../../../../../../definitions/backend/ServiceId";
+import { appReducer } from "../../../../../store/reducers";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { GlobalState } from "../../../../../store/reducers/types";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
+import { loadServiceDetail } from "../../../../../store/actions/services";
+import { service_1 } from "../../../__mocks__/messages";
+import { reproduceSequence } from "../../../../../utils/tests";
+
+const defaultProps: ComponentProps<typeof MessageDetailsHeader> = {
+  createdAt: new Date("2021-10-18T16:00:30.541Z"),
+  serviceId: service_1.service_id,
+  subject: "#### Subject ####"
+};
+
+describe("MessageDetailsHeader component", () => {
+  it("should match the snapshot with default props", () => {
+    const { component } = renderComponent(defaultProps);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+
+  it("should NOT render the organization info when the serviceId is invalid", () => {
+    const { component } = renderComponent({
+      ...defaultProps,
+      serviceId: "invalid" as ServiceId
+    });
+    expect(component.queryByText(service_1.organization_name)).toBeNull();
+    expect(component.queryByText(service_1.service_name)).toBeNull();
+  });
+});
+
+const renderComponent = (
+  props: React.ComponentProps<typeof MessageDetailsHeader>
+) => {
+  const sequenceOfActions: ReadonlyArray<Action> = [
+    applicationChangeState("active"),
+    loadServiceDetail.success(service_1)
+  ];
+
+  const state: GlobalState = reproduceSequence(
+    {} as GlobalState,
+    appReducer,
+    sequenceOfActions
+  );
+  const mockStore = configureMockStore<GlobalState>();
+  const store: Store<GlobalState> = mockStore(state);
+
+  return {
+    component: renderScreenWithNavigationStoreContext<GlobalState>(
+      () => <MessageDetailsHeader {...props} />,
+      "DUMMY_ROUTE",
+      {},
+      store
+    ),
+    store
+  };
+};
diff --git a/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsPayment.test.tsx b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsPayment.test.tsx
new file mode 100644
index 00000000000..036a877bd2a
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsPayment.test.tsx
@@ -0,0 +1,51 @@
+import * as React from "react";
+import { createStore } from "redux";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { preferencesDesignSystemSetEnabled } from "../../../../../store/actions/persistedPreferences";
+import { appReducer } from "../../../../../store/reducers";
+import { PaymentData, UIMessageDetails, UIMessageId } from "../../../types";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
+import { MessageDetailsPayment } from "../MessageDetailsPayment";
+import { loadMessageDetails } from "../../../store/actions";
+
+describe("MessageDetailsPayment", () => {
+  it("Should match snapshot for no payment data", () => {
+    const messageId = "01HRA9THAS0NHCXS20A0FAW5Y2" as UIMessageId;
+    const component = renderScreen(messageId);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match snapshot when there are payment data", () => {
+    const messageId = "01HRA9TP2GMNHGMF2GK8V4PYSF" as UIMessageId;
+    const component = renderScreen(messageId, {
+      noticeNumber: "012345678912345610",
+      payee: {
+        fiscalCode: "01234567890"
+      },
+      amount: 199
+    } as PaymentData);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderScreen = (messageId: UIMessageId, paymentData?: PaymentData) => {
+  const initialState = appReducer(undefined, applicationChangeState("active"));
+  const designSystemState = appReducer(
+    initialState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+  const finalState = appReducer(
+    designSystemState,
+    loadMessageDetails.success({
+      id: messageId,
+      paymentData
+    } as UIMessageDetails)
+  );
+  const store = createStore(appReducer, finalState as any);
+
+  return renderScreenWithNavigationStoreContext(
+    () => <MessageDetailsPayment messageId={messageId} />,
+    "DUMMY",
+    {},
+    store
+  );
+};
diff --git a/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsPaymentButton.test.tsx b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsPaymentButton.test.tsx
new file mode 100644
index 00000000000..7a1c32f65c9
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsPaymentButton.test.tsx
@@ -0,0 +1,50 @@
+import * as React from "react";
+import { createStore } from "redux";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { preferencesDesignSystemSetEnabled } from "../../../../../store/actions/persistedPreferences";
+import { appReducer } from "../../../../../store/reducers";
+import { MessageDetailsPaymentButton } from "../MessageDetailsPaymentButton";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
+import { PaymentData, UIMessageId } from "../../../types";
+
+describe("MessageDetailsPaymentButton", () => {
+  it("should match snapshot when not loading", () => {
+    const screen = renderScreen(false);
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when loading", () => {
+    const screen = renderScreen(true);
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderScreen = (isLoading: boolean) => {
+  const initialState = appReducer(undefined, applicationChangeState("active"));
+  const designSystemState = appReducer(
+    initialState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+  const store = createStore(appReducer, designSystemState as any);
+
+  return renderScreenWithNavigationStoreContext(
+    () => (
+      <MessageDetailsPaymentButton
+        messageId={"" as UIMessageId}
+        canNavigateToPayment={true}
+        isLoading={isLoading}
+        paymentData={
+          {
+            amount: 199,
+            noticeNumber: "012345678912345670",
+            payee: {
+              fiscalCode: "01234567890"
+            }
+          } as PaymentData
+        }
+      />
+    ),
+    "DUMMY",
+    {},
+    store
+  );
+};
diff --git a/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsReminder.test.tsx b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsReminder.test.tsx
new file mode 100644
index 00000000000..45c49a7052b
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsReminder.test.tsx
@@ -0,0 +1,75 @@
+import React from "react";
+import { createStore } from "redux";
+import { MessageDetailsReminder } from "../MessageDetailsReminder";
+import { appReducer } from "../../../../../store/reducers";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { preferencesDesignSystemSetEnabled } from "../../../../../store/actions/persistedPreferences";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
+import { UIMessageId } from "../../../types";
+import * as payments from "../../../store/reducers/payments";
+
+const dueDate = new Date(2024, 2, 21, 18, 44, 31);
+
+describe("MessageDetailsReminder", () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+    jest.restoreAllMocks();
+  });
+  it("should match snapshot when the reminder is hidden", () => {
+    jest
+      .spyOn(payments, "paymentExpirationBannerStateSelector")
+      .mockImplementation((_state, _messageId) => "hidden");
+    const component = renderScreen(dueDate);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when the due date is missing", () => {
+    jest
+      .spyOn(payments, "paymentExpirationBannerStateSelector")
+      .mockImplementation((_state, _messageId) => "visibleExpired");
+    const component = renderScreen();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when the reminder is loading", () => {
+    jest
+      .spyOn(payments, "paymentExpirationBannerStateSelector")
+      .mockImplementation((_state, _messageId) => "loading");
+    const component = renderScreen(dueDate);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when the reminder is visible an expiring", () => {
+    jest
+      .spyOn(payments, "paymentExpirationBannerStateSelector")
+      .mockImplementation((_state, _messageId) => "visibleExpiring");
+    const component = renderScreen(dueDate);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when the reminder is visible and expired", () => {
+    jest
+      .spyOn(payments, "paymentExpirationBannerStateSelector")
+      .mockImplementation((_state, _messageId) => "visibleExpired");
+    const component = renderScreen(dueDate);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderScreen = (dueDate?: Date) => {
+  const initialState = appReducer(undefined, applicationChangeState("active"));
+  const designSystemState = appReducer(
+    initialState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+  const store = createStore(appReducer, designSystemState as any);
+
+  return renderScreenWithNavigationStoreContext(
+    () => (
+      <MessageDetailsReminder
+        dueDate={dueDate}
+        messageId={"01HSG6H6M4KK36CV6QWP2VJW3S" as UIMessageId}
+        title="The title"
+      />
+    ),
+    "DUMMY",
+    {},
+    store
+  );
+};
diff --git a/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsReminderExpired.test.tsx b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsReminderExpired.test.tsx
new file mode 100644
index 00000000000..e7c69f1f7ae
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsReminderExpired.test.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { createStore } from "redux";
+import { appReducer } from "../../../../../store/reducers";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { preferencesDesignSystemSetEnabled } from "../../../../../store/actions/persistedPreferences";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
+import { MessageDetailsReminderExpired } from "../MessageDetailsReminderExpired";
+
+describe("MessageDetailsReminderExpired", () => {
+  it("should match snapshot when loading", () => {
+    const component = renderScreen(true);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when not loading", () => {
+    const component = renderScreen();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderScreen = (isLoading: boolean = false) => {
+  const initialState = appReducer(undefined, applicationChangeState("active"));
+  const designSystemState = appReducer(
+    initialState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+  const store = createStore(appReducer, designSystemState as any);
+
+  return renderScreenWithNavigationStoreContext(
+    () => (
+      <MessageDetailsReminderExpired
+        dueDate={new Date(2024, 2, 21, 10, 33, 42)}
+        isLoading={isLoading}
+      />
+    ),
+    "DUMMY",
+    {},
+    store
+  );
+};
diff --git a/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsReminderExpiring.test.tsx b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsReminderExpiring.test.tsx
new file mode 100644
index 00000000000..c3325d9abef
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsReminderExpiring.test.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { createStore } from "redux";
+import { MessageDetailsReminderExpiring } from "../MessageDetailsReminderExpiring";
+import { appReducer } from "../../../../../store/reducers";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { preferencesDesignSystemSetEnabled } from "../../../../../store/actions/persistedPreferences";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
+import { UIMessageId } from "../../../types";
+
+describe("MessageDetailsReminderExpiring", () => {
+  it("should match snapshot", () => {
+    const component = renderScreen();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderScreen = () => {
+  const initialState = appReducer(undefined, applicationChangeState("active"));
+  const designSystemState = appReducer(
+    initialState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+  const store = createStore(appReducer, designSystemState as any);
+
+  return renderScreenWithNavigationStoreContext(
+    () => (
+      <MessageDetailsReminderExpiring
+        dueDate={new Date(2024, 2, 21, 10, 33, 42)}
+        messageId={"01HSG6GR1JT2E23AJ5RBTAMZZP" as UIMessageId}
+        title="The title"
+      />
+    ),
+    "DUMMY",
+    {},
+    store
+  );
+};
diff --git a/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsScrollViewAdditionalSpace.test.tsx b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsScrollViewAdditionalSpace.test.tsx
new file mode 100644
index 00000000000..bc1d8571115
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsScrollViewAdditionalSpace.test.tsx
@@ -0,0 +1,78 @@
+import * as React from "react";
+import { createStore } from "redux";
+import { appReducer } from "../../../../../store/reducers";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
+import { MessageDetailsScrollViewAdditionalSpace } from "../MessageDetailsScrollViewAdditionalSpace";
+import { UIMessageId } from "../../../types";
+import * as payments from "../../../store/reducers/payments";
+
+describe("MessageDetailsScrollViewAdditionalSpace", () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+    jest.restoreAllMocks();
+  });
+  it("Should match snapshot with hidden button and no CTAs", () => {
+    jest
+      .spyOn(payments, "isPaymentsButtonVisibleSelector")
+      .mockReturnValue(false);
+    const component = renderComponent(false, false);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match snapshot with hidden button and both CTAs", () => {
+    jest
+      .spyOn(payments, "isPaymentsButtonVisibleSelector")
+      .mockReturnValue(false);
+    const component = renderComponent(true, true);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match snapshot with hidden button and a single CTA", () => {
+    jest
+      .spyOn(payments, "isPaymentsButtonVisibleSelector")
+      .mockReturnValue(false);
+    const component = renderComponent(true, false);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match snapshot with button and no CTAs", () => {
+    jest
+      .spyOn(payments, "isPaymentsButtonVisibleSelector")
+      .mockReturnValue(true);
+    const component = renderComponent(false, false);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match snapshot with button and both CTA", () => {
+    jest
+      .spyOn(payments, "isPaymentsButtonVisibleSelector")
+      .mockReturnValue(true);
+    const component = renderComponent(true, true);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match snapshot with button and a single CTA", () => {
+    jest
+      .spyOn(payments, "isPaymentsButtonVisibleSelector")
+      .mockReturnValue(true);
+    const component = renderComponent(true, false);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderComponent = (
+  hasCTA1: boolean,
+  hasCTA2: boolean,
+  messageId: UIMessageId = "01HRW5J2QYMH3FWAA5CYGXSC84" as UIMessageId
+) => {
+  const globalState = appReducer(undefined, applicationChangeState("active"));
+  const store = createStore(appReducer, globalState as any);
+  return renderScreenWithNavigationStoreContext(
+    () => (
+      <MessageDetailsScrollViewAdditionalSpace
+        messageId={messageId}
+        hasCTA1={hasCTA1}
+        hasCTA2={hasCTA2}
+      />
+    ),
+    "DUMMY",
+    {},
+    store
+  );
+};
diff --git a/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsStickyFooter.test.tsx b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsStickyFooter.test.tsx
new file mode 100644
index 00000000000..0e8103073f8
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/MessageDetailsStickyFooter.test.tsx
@@ -0,0 +1,139 @@
+import * as React from "react";
+import { createStore } from "redux";
+import { appReducer } from "../../../../../store/reducers";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
+import { MessageDetailsStickyFooter } from "../MessageDetailsStickyFooter";
+import { PaymentData, UIMessageId } from "../../../types";
+import { ServiceId } from "../../../../../../definitions/backend/ServiceId";
+import { CTA, CTAS } from "../../../types/MessageCTA";
+import * as detailsById from "../../../store/reducers/detailsById";
+import * as payments from "../../../store/reducers/payments";
+import { PaymentAmount } from "../../../../../../definitions/backend/PaymentAmount";
+import { PaymentNoticeNumber } from "../../../../../../definitions/backend/PaymentNoticeNumber";
+import { OrganizationFiscalCode } from "../../../../../../definitions/backend/OrganizationFiscalCode";
+
+const cta1: CTA = {
+  text: "CTA 1",
+  action: ""
+};
+const cta2: CTA = {
+  text: "CTA 2",
+  action: ""
+};
+const bothCTAs: CTAS = {
+  cta_1: cta1,
+  cta_2: cta2
+};
+const onlyCTA1: CTAS = {
+  cta_1: cta1
+};
+const paymentData: PaymentData = {
+  amount: 199 as PaymentAmount,
+  noticeNumber: "012345678912345610" as PaymentNoticeNumber,
+  payee: {
+    fiscalCode: "01234567890" as OrganizationFiscalCode
+  }
+};
+
+describe("MessageDetailsStickyFooter", () => {
+  it("should match snapshot with both CTAs and visible payment button", () => {
+    jest
+      .spyOn(detailsById, "messagePaymentDataSelector")
+      .mockImplementation((_state, _messageId) => paymentData);
+    jest
+      .spyOn(payments, "paymentsButtonStateSelector")
+      .mockImplementation((_state, _messageId) => "enabled");
+    const component = renderComponent(bothCTAs);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with one CTA and visible payment button", () => {
+    jest
+      .spyOn(detailsById, "messagePaymentDataSelector")
+      .mockImplementation((_state, _messageId) => paymentData);
+    jest
+      .spyOn(payments, "paymentsButtonStateSelector")
+      .mockImplementation((_state, _messageId) => "enabled");
+    const component = renderComponent(onlyCTA1);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with no CTAs and enabled payment button", () => {
+    jest
+      .spyOn(detailsById, "messagePaymentDataSelector")
+      .mockImplementation((_state, _messageId) => paymentData);
+    jest
+      .spyOn(payments, "paymentsButtonStateSelector")
+      .mockImplementation((_state, _messageId) => "enabled");
+    const component = renderComponent();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with no CTAs and loading payment button", () => {
+    jest
+      .spyOn(detailsById, "messagePaymentDataSelector")
+      .mockImplementation((_state, _messageId) => paymentData);
+    jest
+      .spyOn(payments, "paymentsButtonStateSelector")
+      .mockImplementation((_state, _messageId) => "loading");
+    const component = renderComponent();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with no CTAs and hidden payment button", () => {
+    jest
+      .spyOn(detailsById, "messagePaymentDataSelector")
+      .mockImplementation((_state, _messageId) => paymentData);
+    jest
+      .spyOn(payments, "paymentsButtonStateSelector")
+      .mockImplementation((_state, _messageId) => "hidden");
+    const component = renderComponent();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with both CTAs and no payment button", () => {
+    jest
+      .spyOn(detailsById, "messagePaymentDataSelector")
+      .mockImplementation((_state, _messageId) => undefined);
+    jest
+      .spyOn(payments, "paymentsButtonStateSelector")
+      .mockImplementation((_state, _messageId) => "hidden");
+    const component = renderComponent(bothCTAs);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with one CTA and no payment button", () => {
+    jest
+      .spyOn(detailsById, "messagePaymentDataSelector")
+      .mockImplementation((_state, _messageId) => undefined);
+    jest
+      .spyOn(payments, "paymentsButtonStateSelector")
+      .mockImplementation((_state, _messageId) => "hidden");
+    const component = renderComponent(onlyCTA1);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot with no CTA and no payment button", () => {
+    jest
+      .spyOn(detailsById, "messagePaymentDataSelector")
+      .mockImplementation((_state, _messageId) => undefined);
+    jest
+      .spyOn(payments, "paymentsButtonStateSelector")
+      .mockImplementation((_state, _messageId) => "hidden");
+    const component = renderComponent();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderComponent = (ctas?: CTAS) => {
+  const globalState = appReducer(undefined, applicationChangeState("active"));
+  const store = createStore(appReducer, globalState as any);
+  return renderScreenWithNavigationStoreContext(
+    () => (
+      <MessageDetailsStickyFooter
+        messageId={"01HRW6GJBD594Z0K9B4D6KAERC" as UIMessageId}
+        serviceId={"01HRW6GS171WY97ZBJ5BPFJ625" as ServiceId}
+        ctas={ctas}
+        firstCTAIsPNOptInMessage={false}
+        secondCTAIsPNOptInMessage={false}
+      />
+    ),
+    "DUMMY",
+    {},
+    store
+  );
+};
diff --git a/ts/features/pn/components/__test__/MessagePaymentItem.test.tsx b/ts/features/messages/components/MessageDetail/__tests__/MessagePaymentItem.test.tsx
similarity index 74%
rename from ts/features/pn/components/__test__/MessagePaymentItem.test.tsx
rename to ts/features/messages/components/MessageDetail/__tests__/MessagePaymentItem.test.tsx
index a68779711e0..334c167177f 100644
--- a/ts/features/pn/components/__test__/MessagePaymentItem.test.tsx
+++ b/ts/features/messages/components/MessageDetail/__tests__/MessagePaymentItem.test.tsx
@@ -1,14 +1,14 @@
 import React from "react";
 import { createStore } from "redux";
-import { applicationChangeState } from "../../../../store/actions/application";
-import { appReducer } from "../../../../store/reducers";
-import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { appReducer } from "../../../../../store/reducers";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
 import { MessagePaymentItem } from "../MessagePaymentItem";
-import { UIMessageId } from "../../../messages/types";
-import { NotificationPaymentInfo } from "../../../../../definitions/pn/NotificationPaymentInfo";
-import { updatePaymentForMessage } from "../../store/actions";
-import { PaymentRequestsGetResponse } from "../../../../../definitions/backend/PaymentRequestsGetResponse";
-import { Detail_v2Enum } from "../../../../../definitions/backend/PaymentProblemJson";
+import { UIMessageId } from "../../../types";
+import { NotificationPaymentInfo } from "../../../../../../definitions/pn/NotificationPaymentInfo";
+import { Detail_v2Enum } from "../../../../../../definitions/backend/PaymentProblemJson";
+import { updatePaymentForMessage } from "../../../store/actions";
+import { PaymentRequestsGetResponse } from "../../../../../../definitions/backend/PaymentRequestsGetResponse";
 
 describe("MessagePaymentItem component", () => {
   it("Should match the snapshot for a loading item", () => {
@@ -53,6 +53,7 @@ const renderComponent = (
   payment: NotificationPaymentInfo,
   paymentStatus: "payable" | "processed" | undefined = undefined
 ) => {
+  const rptId = `${payment.creditorTaxId}${payment.noticeCode}`;
   const globalState = appReducer(undefined, applicationChangeState("active"));
   const modifiedState =
     paymentStatus === "payable"
@@ -60,7 +61,7 @@ const renderComponent = (
           globalState,
           updatePaymentForMessage.success({
             messageId,
-            paymentId: `${payment.creditorTaxId}${payment.noticeCode}`,
+            paymentId: rptId,
             paymentData: {
               codiceContestoPagamento: `${payment.noticeCode}`,
               importoSingoloVersamento: 99,
@@ -74,7 +75,7 @@ const renderComponent = (
           globalState,
           updatePaymentForMessage.failure({
             messageId,
-            paymentId: `${payment.creditorTaxId}${payment.noticeCode}`,
+            paymentId: rptId,
             details: Detail_v2Enum.PAA_PAGAMENTO_ANNULLATO
           })
         )
@@ -83,7 +84,12 @@ const renderComponent = (
 
   return renderScreenWithNavigationStoreContext(
     () => (
-      <MessagePaymentItem index={0} messageId={messageId} payment={payment} />
+      <MessagePaymentItem
+        index={0}
+        messageId={messageId}
+        rptId={rptId}
+        noticeNumber={payment.noticeCode}
+      />
     ),
     "DUMMY",
     {},
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/CtaBar.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/CtaBar.test.tsx.snap
index 4ddc122e826..aea147a5e16 100644
--- a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/CtaBar.test.tsx.snap
+++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/CtaBar.test.tsx.snap
@@ -20,291 +20,330 @@ exports[`the \`CtaBar\` component when neither \`paymentData\` nor \`dueDate\` a
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
+        collapsable={false}
         pointerEvents="box-none"
-        style={null}
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
       >
         <View
-          collapsable={false}
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
           pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
+          style={null}
         >
           <View
             collapsable={false}
+            pointerEvents="box-none"
             style={
               Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
               }
             }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
               }
-            }
-          />
+            />
+          </View>
           <View
+            collapsable={false}
             pointerEvents="box-none"
             style={
               Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
               }
             }
           >
             <View
-              collapsable={false}
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
               pointerEvents="box-none"
               style={
                 Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
                 }
               }
             >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
                 collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
+                pointerEvents="box-none"
                 style={
                   Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
                   }
                 }
               >
-                MESSAGE_DETAIL
-              </Text>
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  MESSAGE_DETAIL
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
             </View>
           </View>
         </View>
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
+      <RNSScreenContainer
+        onLayout={[Function]}
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "flex": 1,
           }
         }
       >
-        <View
+        <RNSModalScreen
+          activityState={2}
           collapsable={false}
-          style={
+          forwardedRef={[Function]}
+          gestureResponseDistance={
             Object {
-              "opacity": 1,
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
             }
           }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          onGestureCancel={[Function]}
           pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
           style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
             Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={1}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
                     <View
-                      testID="CtaBar_withFooter"
-                    />
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        testID="CtaBar_withFooter"
+                      />
+                    </View>
                   </View>
                 </View>
               </View>
             </View>
           </View>
-        </View>
-      </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
     </View>
   </RNCSafeAreaProvider>
 </View>
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/DueDate.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/DueDate.test.tsx.snap
index 0c47369b3f7..f31b577e378 100644
--- a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/DueDate.test.tsx.snap
+++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/DueDate.test.tsx.snap
@@ -44,13 +44,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -63,7 +81,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -91,6 +114,12 @@ Array [
               content="Jan"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -102,7 +131,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -131,6 +165,12 @@ Array [
               content="31"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -304,13 +344,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -323,7 +381,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -351,6 +414,12 @@ Array [
               content="Feb"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -362,7 +431,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -391,6 +465,12 @@ Array [
               content="28"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -564,13 +644,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -583,7 +681,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -611,6 +714,12 @@ Array [
               content="Feb"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -622,7 +731,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -651,6 +765,12 @@ Array [
               content="28"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -824,13 +944,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -843,7 +981,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -871,6 +1014,12 @@ Array [
               content="Feb"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -882,7 +1031,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -911,6 +1065,12 @@ Array [
               content="29"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -1084,13 +1244,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -1103,7 +1281,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -1131,6 +1314,12 @@ Array [
               content="Mar"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -1142,7 +1331,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -1171,6 +1365,12 @@ Array [
               content="31"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -1344,13 +1544,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -1363,7 +1581,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -1391,6 +1614,12 @@ Array [
               content="Apr"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -1402,7 +1631,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -1431,6 +1665,12 @@ Array [
               content="30"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -1604,13 +1844,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -1623,7 +1881,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -1651,6 +1914,12 @@ Array [
               content="May"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -1662,7 +1931,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -1691,6 +1965,12 @@ Array [
               content="31"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -1864,13 +2144,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -1883,7 +2181,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -1911,6 +2214,12 @@ Array [
               content="Jun"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -1922,7 +2231,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -1951,6 +2265,12 @@ Array [
               content="30"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -2124,13 +2444,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -2143,7 +2481,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -2171,6 +2514,12 @@ Array [
               content="Jul"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -2182,7 +2531,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -2211,6 +2565,12 @@ Array [
               content="31"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -2384,13 +2744,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -2403,7 +2781,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -2431,6 +2814,12 @@ Array [
               content="Aug"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -2442,7 +2831,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -2471,6 +2865,12 @@ Array [
               content="31"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -2644,13 +3044,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -2663,7 +3081,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -2691,6 +3114,12 @@ Array [
               content="Sep"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -2702,7 +3131,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -2731,6 +3165,12 @@ Array [
               content="30"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -2904,13 +3344,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -2923,7 +3381,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -2951,6 +3414,12 @@ Array [
               content="Oct"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -2962,7 +3431,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -2991,6 +3465,12 @@ Array [
               content="31"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -3164,13 +3644,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -3183,7 +3681,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -3211,6 +3714,12 @@ Array [
               content="Dec"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -3222,7 +3731,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -3251,6 +3765,12 @@ Array [
               content="01"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -3424,13 +3944,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -3443,7 +3981,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -3471,6 +4014,12 @@ Array [
               content="Dec"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -3482,7 +4031,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -3511,6 +4065,12 @@ Array [
               content="31"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -3684,13 +4244,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -3703,7 +4281,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -3731,6 +4314,12 @@ Array [
               content="Gen"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -3742,7 +4331,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -3771,6 +4365,12 @@ Array [
               content="31"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -3944,13 +4544,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -3963,7 +4581,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -3991,6 +4614,12 @@ Array [
               content="Feb"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -4002,7 +4631,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -4031,6 +4665,12 @@ Array [
               content="28"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -4204,13 +4844,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -4223,7 +4881,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -4251,6 +4914,12 @@ Array [
               content="Feb"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -4262,7 +4931,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -4291,6 +4965,12 @@ Array [
               content="28"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -4464,13 +5144,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -4483,7 +5181,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -4511,6 +5214,12 @@ Array [
               content="Feb"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -4522,7 +5231,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -4551,6 +5265,12 @@ Array [
               content="29"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -4724,13 +5444,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -4743,7 +5481,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -4771,6 +5514,12 @@ Array [
               content="Mar"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -4782,7 +5531,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -4811,6 +5565,12 @@ Array [
               content="31"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -4984,13 +5744,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -5003,7 +5781,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -5031,6 +5814,12 @@ Array [
               content="Apr"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -5042,7 +5831,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -5071,6 +5865,12 @@ Array [
               content="30"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -5244,13 +6044,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -5263,7 +6081,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -5291,6 +6114,12 @@ Array [
               content="Mag"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -5302,7 +6131,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -5331,6 +6165,12 @@ Array [
               content="31"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -5504,13 +6344,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -5523,7 +6381,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -5551,6 +6414,12 @@ Array [
               content="Giu"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -5562,7 +6431,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -5591,6 +6465,12 @@ Array [
               content="30"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -5764,13 +6644,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -5783,7 +6681,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -5811,6 +6714,12 @@ Array [
               content="Lug"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -5822,7 +6731,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -5851,6 +6765,12 @@ Array [
               content="31"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -6024,13 +6944,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -6043,7 +6981,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -6071,6 +7014,12 @@ Array [
               content="Ago"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -6082,7 +7031,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -6111,6 +7065,12 @@ Array [
               content="31"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -6284,13 +7244,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -6303,7 +7281,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -6331,6 +7314,12 @@ Array [
               content="Set"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -6342,7 +7331,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -6371,6 +7365,12 @@ Array [
               content="30"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -6544,13 +7544,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -6563,7 +7581,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -6591,6 +7614,12 @@ Array [
               content="Ott"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -6602,7 +7631,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -6631,6 +7665,12 @@ Array [
               content="31"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -6804,13 +7844,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -6823,7 +7881,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -6851,6 +7914,12 @@ Array [
               content="Dic"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -6862,7 +7931,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -6891,6 +7965,12 @@ Array [
               content="01"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -7064,13 +8144,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -7083,7 +8181,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -7111,6 +8214,12 @@ Array [
               content="Dic"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -7122,7 +8231,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -7151,6 +8265,12 @@ Array [
               content="31"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -7324,13 +8444,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -7343,7 +8481,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -7371,6 +8514,12 @@ Array [
               content="Dec"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -7382,7 +8531,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -7411,6 +8565,12 @@ Array [
               content="01"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -7584,13 +8744,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -7603,7 +8781,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -7631,6 +8814,12 @@ Array [
               content="Dec"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -7642,7 +8831,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -7671,6 +8865,12 @@ Array [
               content="01"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -7844,13 +9044,31 @@ Array [
       vbWidth={40}
       width={40}
     >
-      <RNSVGGroup>
+      <RNSVGGroup
+        fill={
+          Object {
+            "payload": 4278190080,
+            "type": 0,
+          }
+        }
+      >
         <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
           name="calendar"
         >
           <RNSVGPath
             d="m 33,0 h 3 c 2.209139,0 4,1.790861 4,4 v 32 c 0,2.209139 -1.790861,4 -4,4 H 4 C 1.790861,40 0,38.209139 0,36 V 4 C 0,1.790861 1.790861,0 4,0 h 3 v 3 h 4 V 0 h 18 v 3 h 4 z"
-            fill={4282866285}
+            fill={
+              Object {
+                "payload": 4282866285,
+                "type": 0,
+              }
+            }
             name="icon"
             propList={
               Array [
@@ -7863,7 +9081,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 10,
@@ -7891,6 +9114,12 @@ Array [
               content="Dec"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -7902,7 +9131,12 @@ Array [
             content={null}
             dx={Array []}
             dy={Array []}
-            fill={4294967295}
+            fill={
+              Object {
+                "payload": 4294967295,
+                "type": 0,
+              }
+            }
             font={
               Object {
                 "fontSize": 18,
@@ -7931,6 +9165,12 @@ Array [
               content="01"
               dx={Array []}
               dy={Array []}
+              fill={
+                Object {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
               font={Object {}}
               rotate={Array []}
               x={Array []}
@@ -8078,7 +9318,6 @@ exports[`the \`DueDateBar\` component when \`isPaid\` is true  should match the
     align="xMidYMid"
     bbHeight={24}
     bbWidth={24}
-    color={4279710285}
     focusable={false}
     height={24}
     importantForAccessibility="no-hide-descendants"
@@ -8101,18 +9340,25 @@ exports[`the \`DueDateBar\` component when \`isPaid\` is true  should match the
         },
       ]
     }
-    tintColor={4279710285}
+    tintColor="#17324D"
     vbHeight={24}
     vbWidth={24}
     width={24}
   >
-    <RNSVGGroup>
+    <RNSVGGroup
+      fill={
+        Object {
+          "payload": 4278190080,
+          "type": 0,
+        }
+      }
+    >
       <RNSVGPath
         d="M17.752 8.22a1.083 1.083 0 0 0-1.531.028l-5.974 6.192-2.468-2.558-.093-.086a1.083 1.083 0 0 0-1.465 1.589l3.248 3.367.095.087c.43.352 1.068.322 1.463-.087l6.752-7 .083-.096c.328-.431.29-1.05-.11-1.435Z"
         fill={
-          Array [
-            2,
-          ]
+          Object {
+            "type": 2,
+          }
         }
         propList={
           Array [
@@ -8124,9 +9370,9 @@ exports[`the \`DueDateBar\` component when \`isPaid\` is true  should match the
         clipRule={0}
         d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Z"
         fill={
-          Array [
-            2,
-          ]
+          Object {
+            "type": 2,
+          }
         }
         fillRule={0}
         propList={
@@ -8139,9 +9385,9 @@ exports[`the \`DueDateBar\` component when \`isPaid\` is true  should match the
       <RNSVGPath
         d="M17.752 8.22a1.083 1.083 0 0 0-1.531.028l-5.974 6.192-2.468-2.558-.093-.086a1.083 1.083 0 0 0-1.465 1.589l3.248 3.367.095.087c.43.352 1.068.322 1.463-.087l6.752-7 .083-.096c.328-.431.29-1.05-.11-1.435Z"
         fill={
-          Array [
-            2,
-          ]
+          Object {
+            "type": 2,
+          }
         }
         propList={
           Array [
@@ -8153,9 +9399,9 @@ exports[`the \`DueDateBar\` component when \`isPaid\` is true  should match the
         clipRule={0}
         d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Z"
         fill={
-          Array [
-            2,
-          ]
+          Object {
+            "type": 2,
+          }
         }
         fillRule={0}
         propList={
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailHeader.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailHeader.test.tsx.snap
deleted file mode 100644
index 434badfbbc3..00000000000
--- a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailHeader.test.tsx.snap
+++ /dev/null
@@ -1,322 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MessageDetailHeader component should match the snapshot with all props 1`] = `
-<View
-  style={
-    Object {
-      "paddingHorizontal": 24,
-    }
-  }
->
-  <Text
-    allowFontScaling={false}
-    color="bluegreyDark"
-    defaultColor="bluegreyDark"
-    defaultWeight="SemiBold"
-    font="TitilliumWeb"
-    fontStyle={
-      Object {
-        "fontSize": 24,
-        "lineHeight": 34,
-      }
-    }
-    style={
-      Array [
-        Object {
-          "fontSize": 24,
-          "lineHeight": 34,
-        },
-        Object {
-          "color": "#17324D",
-          "fontFamily": "Titillium Web",
-          "fontStyle": "normal",
-          "fontWeight": "600",
-        },
-      ]
-    }
-    testID="message-header-subject"
-    weight="SemiBold"
-  >
-    Subject
-  </Text>
-  <View
-    style={
-      Object {
-        "height": 8,
-      }
-    }
-  />
-  <Text
-    allowFontScaling={false}
-    color="grey-700"
-    defaultColor="blue"
-    defaultWeight="Bold"
-    font="TitilliumWeb"
-    fontSize="regular"
-    fontStyle={
-      Object {
-        "fontSize": 14,
-        "lineHeight": 21,
-      }
-    }
-    style={
-      Array [
-        Object {
-          "fontSize": 14,
-          "lineHeight": 21,
-        },
-        Object {
-          "color": "#555C70",
-          "fontFamily": "Titillium Web",
-          "fontStyle": "normal",
-          "fontWeight": "700",
-        },
-      ]
-    }
-    weight="Bold"
-  >
-    18 Oct 2021, 16:00
-  </Text>
-  <View
-    style={
-      Object {
-        "height": 8,
-      }
-    }
-  />
-  <View
-    style={
-      Object {
-        "backgroundColor": "#D2D6E3",
-        "height": 0.5,
-      }
-    }
-  />
-  <View
-    style={
-      Object {
-        "alignItems": "center",
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "paddingVertical": 6,
-      }
-    }
-  >
-    <View
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <Text
-        allowFontScaling={false}
-        color="grey-700"
-        defaultColor="blue"
-        defaultWeight="Bold"
-        font="TitilliumWeb"
-        fontSize="regular"
-        fontStyle={
-          Object {
-            "fontSize": 14,
-            "lineHeight": 21,
-          }
-        }
-        style={
-          Array [
-            Object {
-              "fontSize": 14,
-              "lineHeight": 21,
-            },
-            Object {
-              "color": "#555C70",
-              "fontFamily": "Titillium Web",
-              "fontStyle": "normal",
-              "fontWeight": "700",
-            },
-          ]
-        }
-        weight="Bold"
-      >
-        Organization foo
-      </Text>
-      <Text
-        allowFontScaling={false}
-        color="blueIO-500"
-        defaultColor="blue"
-        defaultWeight="Bold"
-        font="TitilliumWeb"
-        fontSize="regular"
-        fontStyle={
-          Object {
-            "fontSize": 14,
-            "lineHeight": 21,
-          }
-        }
-        style={
-          Array [
-            Object {
-              "fontSize": 14,
-              "lineHeight": 21,
-            },
-            Object {
-              "color": "#0B3EE3",
-              "fontFamily": "Titillium Web",
-              "fontStyle": "normal",
-              "fontWeight": "700",
-            },
-          ]
-        }
-        weight="Bold"
-      >
-        health
-      </Text>
-    </View>
-    <View
-      style={
-        Object {
-          "marginLeft": 16,
-        }
-      }
-    >
-      <View
-        style={
-          Array [
-            Object {
-              "borderColor": "rgba(14,15,19,0.1)",
-              "borderWidth": 1,
-              "overflow": "hidden",
-              "resizeMode": "contain",
-            },
-            Object {
-              "backgroundColor": "#FFFFFF",
-              "borderRadius": 22,
-              "height": 44,
-              "padding": 6,
-              "width": 44,
-            },
-          ]
-        }
-      >
-        <Image
-          onError={[Function]}
-          source={
-            Object {
-              "uri": "https://assets.cdn.io.italia.it/logos/services/serviceid.png",
-            }
-          }
-          style={
-            Object {
-              "height": "100%",
-              "width": "100%",
-            }
-          }
-        />
-      </View>
-    </View>
-  </View>
-  <View
-    style={
-      Object {
-        "backgroundColor": "#D2D6E3",
-        "height": 0.5,
-      }
-    }
-  />
-</View>
-`;
-
-exports[`MessageDetailHeader component should match the snapshot with default props 1`] = `
-<View
-  style={
-    Object {
-      "paddingHorizontal": 24,
-    }
-  }
->
-  <Text
-    allowFontScaling={false}
-    color="bluegreyDark"
-    defaultColor="bluegreyDark"
-    defaultWeight="SemiBold"
-    font="TitilliumWeb"
-    fontStyle={
-      Object {
-        "fontSize": 24,
-        "lineHeight": 34,
-      }
-    }
-    style={
-      Array [
-        Object {
-          "fontSize": 24,
-          "lineHeight": 34,
-        },
-        Object {
-          "color": "#17324D",
-          "fontFamily": "Titillium Web",
-          "fontStyle": "normal",
-          "fontWeight": "600",
-        },
-      ]
-    }
-    testID="message-header-subject"
-    weight="SemiBold"
-  >
-    Subject
-  </Text>
-  <View
-    style={
-      Object {
-        "height": 8,
-      }
-    }
-  />
-  <Text
-    allowFontScaling={false}
-    color="grey-700"
-    defaultColor="blue"
-    defaultWeight="Bold"
-    font="TitilliumWeb"
-    fontSize="regular"
-    fontStyle={
-      Object {
-        "fontSize": 14,
-        "lineHeight": 21,
-      }
-    }
-    style={
-      Array [
-        Object {
-          "fontSize": 14,
-          "lineHeight": 21,
-        },
-        Object {
-          "color": "#555C70",
-          "fontFamily": "Titillium Web",
-          "fontStyle": "normal",
-          "fontWeight": "700",
-        },
-      ]
-    }
-    weight="Bold"
-  >
-    18 Oct 2021, 16:00
-  </Text>
-  <View
-    style={
-      Object {
-        "height": 8,
-      }
-    }
-  />
-  <View
-    style={
-      Object {
-        "backgroundColor": "#D2D6E3",
-        "height": 0.5,
-      }
-    }
-  />
-</View>
-`;
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsAttachmentItem.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsAttachmentItem.test.tsx.snap
new file mode 100644
index 00000000000..dc8ddf292f9
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsAttachmentItem.test.tsx.snap
@@ -0,0 +1,2393 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageDetailsAttachmentItem Should match snapshot when is fetching the attachment 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={4}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityHint="pdf"
+                        accessibilityLabel="Download in progress"
+                        accessibilityRole="button"
+                        accessibilityState={
+                          Object {
+                            "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]}
+                      >
+                        <View
+                          accessibilityElementsHidden={true}
+                          importantForAccessibility="no-hide-descendants"
+                          style={
+                            Array [
+                              Object {
+                                "alignItems": "center",
+                                "backgroundColor": "#FFFFFF",
+                                "borderColor": "#CCD4DC",
+                                "borderRadius": 8,
+                                "borderStyle": "solid",
+                                "borderWidth": 1,
+                                "flexDirection": "row",
+                                "paddingHorizontal": 16,
+                                "paddingVertical": 16,
+                              },
+                              Object {
+                                "transform": Array [
+                                  Object {
+                                    "scale": undefined,
+                                  },
+                                ],
+                              },
+                              Object {
+                                "opacity": 1,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                                "flexDirection": "column",
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              color="blueIO-500"
+                              defaultColor="blue"
+                              defaultWeight="Bold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 14,
+                                  "lineHeight": 21,
+                                }
+                              }
+                              numberOfLines={1}
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  },
+                                  Object {
+                                    "color": "#0B3EE3",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
+                                  },
+                                ]
+                              }
+                              weight="SemiBold"
+                            >
+                              1
+                            </Text>
+                            <View
+                              style={
+                                Object {
+                                  "height": 4,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "width": 44,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#F4F5F8",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#555C70",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  PDF
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "alignItems": "center",
+                                "marginLeft": 16,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityRole="progressbar"
+                              accessible={true}
+                              importantForAccessibility="no-hide-descendants"
+                              style={
+                                Object {
+                                  "height": 24,
+                                  "width": 24,
+                                }
+                              }
+                              testID="LoadingSpinnerTestID"
+                            >
+                              <View
+                                collapsable={false}
+                                style={
+                                  Object {
+                                    "transform": Array [
+                                      Object {
+                                        "rotateZ": "0deg",
+                                      },
+                                    ],
+                                  }
+                                }
+                                testID="LoadingSpinnerAnimatedTestID"
+                              >
+                                <RNSVGSvgView
+                                  align="xMidYMid"
+                                  bbHeight={24}
+                                  bbWidth={24}
+                                  fill="none"
+                                  focusable={false}
+                                  height={24}
+                                  meetOrSlice={0}
+                                  minX={0}
+                                  minY={0}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "backgroundColor": "transparent",
+                                        "borderWidth": 0,
+                                      },
+                                      Object {
+                                        "flex": 0,
+                                        "height": 24,
+                                        "width": 24,
+                                      },
+                                    ]
+                                  }
+                                  vbHeight={24}
+                                  vbWidth={24}
+                                  width={24}
+                                >
+                                  <RNSVGGroup
+                                    fill={null}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  >
+                                    <RNSVGDefs>
+                                      <RNSVGLinearGradient
+                                        gradient={
+                                          Array [
+                                            0,
+                                            736995,
+                                            1,
+                                            -16040221,
+                                          ]
+                                        }
+                                        gradientTransform={null}
+                                        gradientUnits={0}
+                                        name="spinner-secondHalf"
+                                        x1="0%"
+                                        x2="100%"
+                                        y1="0%"
+                                        y2="0%"
+                                      />
+                                      <RNSVGLinearGradient
+                                        gradient={
+                                          Array [
+                                            0,
+                                            -16040221,
+                                            1,
+                                            -16040221,
+                                          ]
+                                        }
+                                        gradientTransform={null}
+                                        gradientUnits={0}
+                                        name="spinner-firstHalf"
+                                        x1="0%"
+                                        x2="100%"
+                                        y1="0%"
+                                        y2="0%"
+                                      />
+                                    </RNSVGDefs>
+                                    <RNSVGGroup
+                                      fill={
+                                        Object {
+                                          "payload": 4278190080,
+                                          "type": 0,
+                                        }
+                                      }
+                                      propList={
+                                        Array [
+                                          "strokeWidth",
+                                        ]
+                                      }
+                                      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-firstHalf",
+                                            "type": 1,
+                                          }
+                                        }
+                                      />
+                                      <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",
+                                            "strokeLinecap",
+                                          ]
+                                        }
+                                        stroke={
+                                          Object {
+                                            "payload": 4278927075,
+                                            "type": 0,
+                                          }
+                                        }
+                                        strokeLinecap={1}
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGGroup>
+                                </RNSVGSvgView>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsAttachmentItem Should match snapshot when the attachment has no name 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={3}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityHint="pdf"
+                        accessibilityLabel="1"
+                        accessibilityRole="button"
+                        accessibilityState={
+                          Object {
+                            "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]}
+                      >
+                        <View
+                          accessibilityElementsHidden={true}
+                          importantForAccessibility="no-hide-descendants"
+                          style={
+                            Array [
+                              Object {
+                                "alignItems": "center",
+                                "backgroundColor": "#FFFFFF",
+                                "borderColor": "#CCD4DC",
+                                "borderRadius": 8,
+                                "borderStyle": "solid",
+                                "borderWidth": 1,
+                                "flexDirection": "row",
+                                "paddingHorizontal": 16,
+                                "paddingVertical": 16,
+                              },
+                              Object {
+                                "transform": Array [
+                                  Object {
+                                    "scale": undefined,
+                                  },
+                                ],
+                              },
+                              Object {
+                                "opacity": 1,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                                "flexDirection": "column",
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              color="blueIO-500"
+                              defaultColor="blue"
+                              defaultWeight="Bold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 14,
+                                  "lineHeight": 21,
+                                }
+                              }
+                              numberOfLines={1}
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  },
+                                  Object {
+                                    "color": "#0B3EE3",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
+                                  },
+                                ]
+                              }
+                              weight="SemiBold"
+                            >
+                              1
+                            </Text>
+                            <View
+                              style={
+                                Object {
+                                  "height": 4,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "width": 44,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#F4F5F8",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#555C70",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  PDF
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "alignItems": "center",
+                                "marginLeft": 16,
+                              }
+                            }
+                          >
+                            <RNSVGSvgView
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessible={false}
+                              align="xMidYMid"
+                              bbHeight={24}
+                              bbWidth={24}
+                              focusable={false}
+                              height={24}
+                              importantForAccessibility="no-hide-descendants"
+                              meetOrSlice={0}
+                              minX={0}
+                              minY={0}
+                              style={
+                                Array [
+                                  Object {
+                                    "backgroundColor": "transparent",
+                                    "borderWidth": 0,
+                                  },
+                                  Object {
+                                    "color": "#0B3EE3",
+                                  },
+                                  Object {
+                                    "flex": 0,
+                                    "height": 24,
+                                    "width": 24,
+                                  },
+                                ]
+                              }
+                              tintColor="#0B3EE3"
+                              vbHeight={24}
+                              vbWidth={24}
+                              width={24}
+                            >
+                              <RNSVGGroup
+                                fill={
+                                  Object {
+                                    "payload": 4278190080,
+                                    "type": 0,
+                                  }
+                                }
+                              >
+                                <RNSVGPath
+                                  clipRule={0}
+                                  d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  fillRule={0}
+                                  propList={
+                                    Array [
+                                      "fill",
+                                      "fillRule",
+                                    ]
+                                  }
+                                />
+                              </RNSVGGroup>
+                            </RNSVGSvgView>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsAttachmentItem Should match snapshot with all parameters 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={2}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityHint="pdf"
+                        accessibilityLabel="A PDF File"
+                        accessibilityRole="button"
+                        accessibilityState={
+                          Object {
+                            "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]}
+                      >
+                        <View
+                          accessibilityElementsHidden={true}
+                          importantForAccessibility="no-hide-descendants"
+                          style={
+                            Array [
+                              Object {
+                                "alignItems": "center",
+                                "backgroundColor": "#FFFFFF",
+                                "borderColor": "#CCD4DC",
+                                "borderRadius": 8,
+                                "borderStyle": "solid",
+                                "borderWidth": 1,
+                                "flexDirection": "row",
+                                "paddingHorizontal": 16,
+                                "paddingVertical": 16,
+                              },
+                              Object {
+                                "transform": Array [
+                                  Object {
+                                    "scale": undefined,
+                                  },
+                                ],
+                              },
+                              Object {
+                                "opacity": 0.5,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                                "flexDirection": "column",
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              color="blueIO-500"
+                              defaultColor="blue"
+                              defaultWeight="Bold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 14,
+                                  "lineHeight": 21,
+                                }
+                              }
+                              numberOfLines={1}
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  },
+                                  Object {
+                                    "color": "#0B3EE3",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
+                                  },
+                                ]
+                              }
+                              weight="SemiBold"
+                            >
+                              A PDF File
+                            </Text>
+                            <View
+                              style={
+                                Object {
+                                  "height": 4,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "width": 44,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#F4F5F8",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#555C70",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  PDF
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "alignItems": "center",
+                                "marginLeft": 16,
+                              }
+                            }
+                          >
+                            <RNSVGSvgView
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessible={false}
+                              align="xMidYMid"
+                              bbHeight={24}
+                              bbWidth={24}
+                              focusable={false}
+                              height={24}
+                              importantForAccessibility="no-hide-descendants"
+                              meetOrSlice={0}
+                              minX={0}
+                              minY={0}
+                              style={
+                                Array [
+                                  Object {
+                                    "backgroundColor": "transparent",
+                                    "borderWidth": 0,
+                                  },
+                                  Object {
+                                    "color": "#0B3EE3",
+                                  },
+                                  Object {
+                                    "flex": 0,
+                                    "height": 24,
+                                    "width": 24,
+                                  },
+                                ]
+                              }
+                              tintColor="#0B3EE3"
+                              vbHeight={24}
+                              vbWidth={24}
+                              width={24}
+                            >
+                              <RNSVGGroup
+                                fill={
+                                  Object {
+                                    "payload": 4278190080,
+                                    "type": 0,
+                                  }
+                                }
+                              >
+                                <RNSVGPath
+                                  clipRule={0}
+                                  d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  fillRule={0}
+                                  propList={
+                                    Array [
+                                      "fill",
+                                      "fillRule",
+                                    ]
+                                  }
+                                />
+                              </RNSVGGroup>
+                            </RNSVGSvgView>
+                          </View>
+                        </View>
+                      </View>
+                      <View
+                        style={
+                          Object {
+                            "height": 8,
+                          }
+                        }
+                      />
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsAttachmentItem Should match snapshot with required parameters 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityHint="pdf"
+                        accessibilityLabel="A PDF File"
+                        accessibilityRole="button"
+                        accessibilityState={
+                          Object {
+                            "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]}
+                      >
+                        <View
+                          accessibilityElementsHidden={true}
+                          importantForAccessibility="no-hide-descendants"
+                          style={
+                            Array [
+                              Object {
+                                "alignItems": "center",
+                                "backgroundColor": "#FFFFFF",
+                                "borderColor": "#CCD4DC",
+                                "borderRadius": 8,
+                                "borderStyle": "solid",
+                                "borderWidth": 1,
+                                "flexDirection": "row",
+                                "paddingHorizontal": 16,
+                                "paddingVertical": 16,
+                              },
+                              Object {
+                                "transform": Array [
+                                  Object {
+                                    "scale": undefined,
+                                  },
+                                ],
+                              },
+                              Object {
+                                "opacity": 1,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                                "flexDirection": "column",
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              color="blueIO-500"
+                              defaultColor="blue"
+                              defaultWeight="Bold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 14,
+                                  "lineHeight": 21,
+                                }
+                              }
+                              numberOfLines={1}
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  },
+                                  Object {
+                                    "color": "#0B3EE3",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
+                                  },
+                                ]
+                              }
+                              weight="SemiBold"
+                            >
+                              A PDF File
+                            </Text>
+                            <View
+                              style={
+                                Object {
+                                  "height": 4,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "width": 44,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#F4F5F8",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#555C70",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  PDF
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "alignItems": "center",
+                                "marginLeft": 16,
+                              }
+                            }
+                          >
+                            <RNSVGSvgView
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessible={false}
+                              align="xMidYMid"
+                              bbHeight={24}
+                              bbWidth={24}
+                              focusable={false}
+                              height={24}
+                              importantForAccessibility="no-hide-descendants"
+                              meetOrSlice={0}
+                              minX={0}
+                              minY={0}
+                              style={
+                                Array [
+                                  Object {
+                                    "backgroundColor": "transparent",
+                                    "borderWidth": 0,
+                                  },
+                                  Object {
+                                    "color": "#0B3EE3",
+                                  },
+                                  Object {
+                                    "flex": 0,
+                                    "height": 24,
+                                    "width": 24,
+                                  },
+                                ]
+                              }
+                              tintColor="#0B3EE3"
+                              vbHeight={24}
+                              vbWidth={24}
+                              width={24}
+                            >
+                              <RNSVGGroup
+                                fill={
+                                  Object {
+                                    "payload": 4278190080,
+                                    "type": 0,
+                                  }
+                                }
+                              >
+                                <RNSVGPath
+                                  clipRule={0}
+                                  d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  fillRule={0}
+                                  propList={
+                                    Array [
+                                      "fill",
+                                      "fillRule",
+                                    ]
+                                  }
+                                />
+                              </RNSVGGroup>
+                            </RNSVGSvgView>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsAttachments.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsAttachments.test.tsx.snap
new file mode 100644
index 00000000000..47cf045e1b5
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsAttachments.test.tsx.snap
@@ -0,0 +1,3638 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageDetailsAttachments Should match snapshot with 1 attachment 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={4}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityLabel="Attachments"
+                        accessible={true}
+                        style={
+                          Object {
+                            "marginHorizontal": -24,
+                            "paddingHorizontal": 24,
+                            "paddingVertical": 12,
+                          }
+                        }
+                      >
+                        <View
+                          importantForAccessibility="no-hide-descendants"
+                          style={
+                            Object {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "space-between",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "marginRight": 8,
+                              }
+                            }
+                          >
+                            <RNSVGSvgView
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessible={false}
+                              align="xMidYMid"
+                              bbHeight={24}
+                              bbWidth={24}
+                              focusable={false}
+                              height={24}
+                              importantForAccessibility="no-hide-descendants"
+                              meetOrSlice={0}
+                              minX={0}
+                              minY={0}
+                              style={
+                                Array [
+                                  Object {
+                                    "backgroundColor": "transparent",
+                                    "borderWidth": 0,
+                                  },
+                                  Object {
+                                    "color": "#BBC2D6",
+                                  },
+                                  Object {
+                                    "flex": 0,
+                                    "height": 24,
+                                    "width": 24,
+                                  },
+                                ]
+                              }
+                              tintColor="#BBC2D6"
+                              vbHeight={24}
+                              vbWidth={24}
+                              width={24}
+                            >
+                              <RNSVGGroup
+                                fill={
+                                  Object {
+                                    "payload": 4278190080,
+                                    "type": 0,
+                                  }
+                                }
+                              >
+                                <RNSVGPath
+                                  d="M22.95 9.5997a.9999.9999 0 0 0-.707-.29279c-.2651 0-.5195.10532-.707.29279l-10.892 10.939a4.99896 4.99896 0 0 1-1.62212 1.084 4.99813 4.99813 0 0 1-1.9135.3808 5.00017 5.00017 0 0 1-3.53586-1.4643 5.00042 5.00042 0 0 1-1.4648-3.5357 5.00026 5.00026 0 0 1 1.4643-3.5358L14.121 2.8757a3.00005 3.00005 0 0 1 4.2253.0167 2.99985 2.99985 0 0 1 .8789 2.109 2.99996 2.99996 0 0 1-.8612 2.1163L7.81502 17.7097a1.0218 1.0218 0 0 1-.707.284 1.02182 1.02182 0 0 1-.707-.284.99989.99989 0 0 1-.29278-.707c0-.2652.10531-.5195.29278-.707l9.39198-9.435a.99975.99975 0 0 0 .2807-.7034 1.00018 1.00018 0 0 0-.2929-.69842.99994.99994 0 0 0-1.4018-.01218l-9.39198 9.435a3.00022 3.00022 0 0 0-.65045.9733 3.00027 3.00027 0 0 0 0 2.2964c.1508.364.37182.6947.65045.9733a3.07287 3.07287 0 0 0 2.1215.8498 3.07287 3.07287 0 0 0 2.1215-.8498L19.778 8.5317a5.0001 5.0001 0 0 0 1.4196-3.52223 4.99983 4.99983 0 0 0-1.4646-3.50375A5.0001 5.0001 0 0 0 16.229.0416a5.00012 5.00012 0 0 0-3.522 1.4201L2.15802 12.0537C.8452 13.3665.10767 15.1471.10767 17.0037c0 1.8566.73753 3.6372 2.05035 4.95 1.31282 1.3128 3.09339 2.0504 4.95 2.0504 1.85661 0 3.63718-.7376 4.94998-2.0504l10.892-10.936a.99968.99968 0 0 0 .2948-.709c0-.1318-.026-.2623-.0766-.38392a.999.999 0 0 0-.2182-.32508Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                              </RNSVGGroup>
+                            </RNSVGSvgView>
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityElementsHidden={false}
+                              accessible={true}
+                              importantForAccessibility="yes"
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="grey-700"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#555C70",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Attachments
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsAttachments Should match snapshot with 1 attachment that is disabled 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={5}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityLabel="Attachments"
+                        accessible={true}
+                        style={
+                          Object {
+                            "marginHorizontal": -24,
+                            "paddingHorizontal": 24,
+                            "paddingVertical": 12,
+                          }
+                        }
+                      >
+                        <View
+                          importantForAccessibility="no-hide-descendants"
+                          style={
+                            Object {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "space-between",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "marginRight": 8,
+                              }
+                            }
+                          >
+                            <RNSVGSvgView
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessible={false}
+                              align="xMidYMid"
+                              bbHeight={24}
+                              bbWidth={24}
+                              focusable={false}
+                              height={24}
+                              importantForAccessibility="no-hide-descendants"
+                              meetOrSlice={0}
+                              minX={0}
+                              minY={0}
+                              style={
+                                Array [
+                                  Object {
+                                    "backgroundColor": "transparent",
+                                    "borderWidth": 0,
+                                  },
+                                  Object {
+                                    "color": "#BBC2D6",
+                                  },
+                                  Object {
+                                    "flex": 0,
+                                    "height": 24,
+                                    "width": 24,
+                                  },
+                                ]
+                              }
+                              tintColor="#BBC2D6"
+                              vbHeight={24}
+                              vbWidth={24}
+                              width={24}
+                            >
+                              <RNSVGGroup
+                                fill={
+                                  Object {
+                                    "payload": 4278190080,
+                                    "type": 0,
+                                  }
+                                }
+                              >
+                                <RNSVGPath
+                                  d="M22.95 9.5997a.9999.9999 0 0 0-.707-.29279c-.2651 0-.5195.10532-.707.29279l-10.892 10.939a4.99896 4.99896 0 0 1-1.62212 1.084 4.99813 4.99813 0 0 1-1.9135.3808 5.00017 5.00017 0 0 1-3.53586-1.4643 5.00042 5.00042 0 0 1-1.4648-3.5357 5.00026 5.00026 0 0 1 1.4643-3.5358L14.121 2.8757a3.00005 3.00005 0 0 1 4.2253.0167 2.99985 2.99985 0 0 1 .8789 2.109 2.99996 2.99996 0 0 1-.8612 2.1163L7.81502 17.7097a1.0218 1.0218 0 0 1-.707.284 1.02182 1.02182 0 0 1-.707-.284.99989.99989 0 0 1-.29278-.707c0-.2652.10531-.5195.29278-.707l9.39198-9.435a.99975.99975 0 0 0 .2807-.7034 1.00018 1.00018 0 0 0-.2929-.69842.99994.99994 0 0 0-1.4018-.01218l-9.39198 9.435a3.00022 3.00022 0 0 0-.65045.9733 3.00027 3.00027 0 0 0 0 2.2964c.1508.364.37182.6947.65045.9733a3.07287 3.07287 0 0 0 2.1215.8498 3.07287 3.07287 0 0 0 2.1215-.8498L19.778 8.5317a5.0001 5.0001 0 0 0 1.4196-3.52223 4.99983 4.99983 0 0 0-1.4646-3.50375A5.0001 5.0001 0 0 0 16.229.0416a5.00012 5.00012 0 0 0-3.522 1.4201L2.15802 12.0537C.8452 13.3665.10767 15.1471.10767 17.0037c0 1.8566.73753 3.6372 2.05035 4.95 1.31282 1.3128 3.09339 2.0504 4.95 2.0504 1.85661 0 3.63718-.7376 4.94998-2.0504l10.892-10.936a.99968.99968 0 0 0 .2948-.709c0-.1318-.026-.2623-.0766-.38392a.999.999 0 0 0-.2182-.32508Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                              </RNSVGGroup>
+                            </RNSVGSvgView>
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityElementsHidden={false}
+                              accessible={true}
+                              importantForAccessibility="yes"
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="grey-700"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#555C70",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Attachments
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsAttachments Should match snapshot with 1 attachment that is disabled and F24 have been removed 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={6}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsAttachments Should match snapshot with 5 attachments that are disabled and F24 have been removed 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={9}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsAttachments Should match snapshot with 10 attachments 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={7}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityLabel="Attachments"
+                        accessible={true}
+                        style={
+                          Object {
+                            "marginHorizontal": -24,
+                            "paddingHorizontal": 24,
+                            "paddingVertical": 12,
+                          }
+                        }
+                      >
+                        <View
+                          importantForAccessibility="no-hide-descendants"
+                          style={
+                            Object {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "space-between",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "marginRight": 8,
+                              }
+                            }
+                          >
+                            <RNSVGSvgView
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessible={false}
+                              align="xMidYMid"
+                              bbHeight={24}
+                              bbWidth={24}
+                              focusable={false}
+                              height={24}
+                              importantForAccessibility="no-hide-descendants"
+                              meetOrSlice={0}
+                              minX={0}
+                              minY={0}
+                              style={
+                                Array [
+                                  Object {
+                                    "backgroundColor": "transparent",
+                                    "borderWidth": 0,
+                                  },
+                                  Object {
+                                    "color": "#BBC2D6",
+                                  },
+                                  Object {
+                                    "flex": 0,
+                                    "height": 24,
+                                    "width": 24,
+                                  },
+                                ]
+                              }
+                              tintColor="#BBC2D6"
+                              vbHeight={24}
+                              vbWidth={24}
+                              width={24}
+                            >
+                              <RNSVGGroup
+                                fill={
+                                  Object {
+                                    "payload": 4278190080,
+                                    "type": 0,
+                                  }
+                                }
+                              >
+                                <RNSVGPath
+                                  d="M22.95 9.5997a.9999.9999 0 0 0-.707-.29279c-.2651 0-.5195.10532-.707.29279l-10.892 10.939a4.99896 4.99896 0 0 1-1.62212 1.084 4.99813 4.99813 0 0 1-1.9135.3808 5.00017 5.00017 0 0 1-3.53586-1.4643 5.00042 5.00042 0 0 1-1.4648-3.5357 5.00026 5.00026 0 0 1 1.4643-3.5358L14.121 2.8757a3.00005 3.00005 0 0 1 4.2253.0167 2.99985 2.99985 0 0 1 .8789 2.109 2.99996 2.99996 0 0 1-.8612 2.1163L7.81502 17.7097a1.0218 1.0218 0 0 1-.707.284 1.02182 1.02182 0 0 1-.707-.284.99989.99989 0 0 1-.29278-.707c0-.2652.10531-.5195.29278-.707l9.39198-9.435a.99975.99975 0 0 0 .2807-.7034 1.00018 1.00018 0 0 0-.2929-.69842.99994.99994 0 0 0-1.4018-.01218l-9.39198 9.435a3.00022 3.00022 0 0 0-.65045.9733 3.00027 3.00027 0 0 0 0 2.2964c.1508.364.37182.6947.65045.9733a3.07287 3.07287 0 0 0 2.1215.8498 3.07287 3.07287 0 0 0 2.1215-.8498L19.778 8.5317a5.0001 5.0001 0 0 0 1.4196-3.52223 4.99983 4.99983 0 0 0-1.4646-3.50375A5.0001 5.0001 0 0 0 16.229.0416a5.00012 5.00012 0 0 0-3.522 1.4201L2.15802 12.0537C.8452 13.3665.10767 15.1471.10767 17.0037c0 1.8566.73753 3.6372 2.05035 4.95 1.31282 1.3128 3.09339 2.0504 4.95 2.0504 1.85661 0 3.63718-.7376 4.94998-2.0504l10.892-10.936a.99968.99968 0 0 0 .2948-.709c0-.1318-.026-.2623-.0766-.38392a.999.999 0 0 0-.2182-.32508Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                              </RNSVGGroup>
+                            </RNSVGSvgView>
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityElementsHidden={false}
+                              accessible={true}
+                              importantForAccessibility="yes"
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="grey-700"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#555C70",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Attachments
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsAttachments Should match snapshot with 10 attachments that are disabled 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={8}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityLabel="Attachments"
+                        accessible={true}
+                        style={
+                          Object {
+                            "marginHorizontal": -24,
+                            "paddingHorizontal": 24,
+                            "paddingVertical": 12,
+                          }
+                        }
+                      >
+                        <View
+                          importantForAccessibility="no-hide-descendants"
+                          style={
+                            Object {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "space-between",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "marginRight": 8,
+                              }
+                            }
+                          >
+                            <RNSVGSvgView
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessible={false}
+                              align="xMidYMid"
+                              bbHeight={24}
+                              bbWidth={24}
+                              focusable={false}
+                              height={24}
+                              importantForAccessibility="no-hide-descendants"
+                              meetOrSlice={0}
+                              minX={0}
+                              minY={0}
+                              style={
+                                Array [
+                                  Object {
+                                    "backgroundColor": "transparent",
+                                    "borderWidth": 0,
+                                  },
+                                  Object {
+                                    "color": "#BBC2D6",
+                                  },
+                                  Object {
+                                    "flex": 0,
+                                    "height": 24,
+                                    "width": 24,
+                                  },
+                                ]
+                              }
+                              tintColor="#BBC2D6"
+                              vbHeight={24}
+                              vbWidth={24}
+                              width={24}
+                            >
+                              <RNSVGGroup
+                                fill={
+                                  Object {
+                                    "payload": 4278190080,
+                                    "type": 0,
+                                  }
+                                }
+                              >
+                                <RNSVGPath
+                                  d="M22.95 9.5997a.9999.9999 0 0 0-.707-.29279c-.2651 0-.5195.10532-.707.29279l-10.892 10.939a4.99896 4.99896 0 0 1-1.62212 1.084 4.99813 4.99813 0 0 1-1.9135.3808 5.00017 5.00017 0 0 1-3.53586-1.4643 5.00042 5.00042 0 0 1-1.4648-3.5357 5.00026 5.00026 0 0 1 1.4643-3.5358L14.121 2.8757a3.00005 3.00005 0 0 1 4.2253.0167 2.99985 2.99985 0 0 1 .8789 2.109 2.99996 2.99996 0 0 1-.8612 2.1163L7.81502 17.7097a1.0218 1.0218 0 0 1-.707.284 1.02182 1.02182 0 0 1-.707-.284.99989.99989 0 0 1-.29278-.707c0-.2652.10531-.5195.29278-.707l9.39198-9.435a.99975.99975 0 0 0 .2807-.7034 1.00018 1.00018 0 0 0-.2929-.69842.99994.99994 0 0 0-1.4018-.01218l-9.39198 9.435a3.00022 3.00022 0 0 0-.65045.9733 3.00027 3.00027 0 0 0 0 2.2964c.1508.364.37182.6947.65045.9733a3.07287 3.07287 0 0 0 2.1215.8498 3.07287 3.07287 0 0 0 2.1215-.8498L19.778 8.5317a5.0001 5.0001 0 0 0 1.4196-3.52223 4.99983 4.99983 0 0 0-1.4646-3.50375A5.0001 5.0001 0 0 0 16.229.0416a5.00012 5.00012 0 0 0-3.522 1.4201L2.15802 12.0537C.8452 13.3665.10767 15.1471.10767 17.0037c0 1.8566.73753 3.6372 2.05035 4.95 1.31282 1.3128 3.09339 2.0504 4.95 2.0504 1.85661 0 3.63718-.7376 4.94998-2.0504l10.892-10.936a.99968.99968 0 0 0 .2948-.709c0-.1318-.026-.2623-.0766-.38392a.999.999 0 0 0-.2182-.32508Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                              </RNSVGGroup>
+                            </RNSVGSvgView>
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityElementsHidden={false}
+                              accessible={true}
+                              importantForAccessibility="yes"
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="grey-700"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#555C70",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Attachments
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsAttachments Should match snapshot with no attachments 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsAttachments Should match snapshot with no attachments and disabled UI 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={2}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsAttachments Should match snapshot with no attachments, where F24 have been removed and disabled UI 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={3}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsFooter.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsFooter.test.tsx.snap
new file mode 100644
index 00000000000..d03588a14bc
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsFooter.test.tsx.snap
@@ -0,0 +1,1181 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageDetailsFooter component should match the snapshot when the service's contact details are defined 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY_ROUTE
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Array [
+                            Object {
+                              "paddingHorizontal": 24,
+                            },
+                            Object {
+                              "backgroundColor": "#F4F5F8",
+                              "marginBottom": "-75%",
+                              "paddingBottom": "75%",
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          style={
+                            Object {
+                              "height": 16,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="Contact the sender"
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          testID="contacts-action"
+                        >
+                          <View
+                            importantForAccessibility="no-hide-descendants"
+                            style={
+                              Array [
+                                Object {
+                                  "marginHorizontal": -24,
+                                  "paddingHorizontal": 24,
+                                  "paddingVertical": 12,
+                                },
+                                Object {
+                                  "backgroundColor": undefined,
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "space-between",
+                                  },
+                                  Object {
+                                    "transform": Array [
+                                      Object {
+                                        "scale": undefined,
+                                      },
+                                    ],
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "marginRight": 16,
+                                  }
+                                }
+                              >
+                                <RNSVGSvgView
+                                  accessibilityElementsHidden={true}
+                                  accessibilityLabel=""
+                                  accessible={false}
+                                  align="xMidYMid"
+                                  bbHeight={24}
+                                  bbWidth={24}
+                                  focusable={false}
+                                  height={24}
+                                  importantForAccessibility="no-hide-descendants"
+                                  meetOrSlice={0}
+                                  minX={0}
+                                  minY={0}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "backgroundColor": "transparent",
+                                        "borderWidth": 0,
+                                      },
+                                      Object {
+                                        "color": "#0073E6",
+                                      },
+                                      Object {
+                                        "flex": 0,
+                                        "height": 24,
+                                        "width": 24,
+                                      },
+                                    ]
+                                  }
+                                  tintColor="#0073E6"
+                                  vbHeight={24}
+                                  vbWidth={24}
+                                  width={24}
+                                >
+                                  <RNSVGGroup
+                                    fill={
+                                      Object {
+                                        "payload": 4278190080,
+                                        "type": 0,
+                                      }
+                                    }
+                                  >
+                                    <RNSVGPath
+                                      clipRule={0}
+                                      d="M5 0C2.23858 0 0 2.23858 0 5v10c0 2.7614 2.23858 5 5 5h2.17157c.26522 0 .51957.1054.70711.2929l2.65842 2.6584c.8181.8181 2.1575.7735 2.9193-.0972l2.1986-2.5126A.99985.99985 0 0 1 16.4075 20H19c2.7614 0 5-2.2386 5-5V5c0-2.76142-2.2386-5-5-5H5ZM2 5c0-1.65685 1.34315-3 3-3h14c1.6569 0 3 1.34315 3 3v10c0 1.6569-1.3431 3-3 3h-2.5925c-.8651 0-1.688.3734-2.2577 1.0245l-2.1985 2.5126-2.65841-2.6584A3.00006 3.00006 0 0 0 7.17157 18H5c-1.65685 0-3-1.3431-3-3V5Zm4 8c-.55228 0-1 .4477-1 1s.44772 1 1 1h6.0269c.5523 0 1-.4477 1-1s-.4477-1-1-1H6ZM5 5.99808C5 5.44686 5.44686 5 5.99808 5H18.0019c.5512 0 .9981.44686.9981.99808 0 .55123-.4469.99808-.9981.99808H5.99808C5.44686 6.99616 5 6.54931 5 5.99808ZM5.99808 9C5.44686 9 5 9.44686 5 9.99808s.44686.99812.99808.99812H18.0019c.5512 0 .9981-.4469.9981-.99812S18.5531 9 18.0019 9H5.99808Z"
+                                      fill={
+                                        Object {
+                                          "type": 2,
+                                        }
+                                      }
+                                      fillRule={0}
+                                      propList={
+                                        Array [
+                                          "fill",
+                                          "fillRule",
+                                        ]
+                                      }
+                                    />
+                                  </RNSVGGroup>
+                                </RNSVGSvgView>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <Text
+                                  style={
+                                    Array [
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontSize": 16,
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                        "lineHeight": 20,
+                                      },
+                                      Object {
+                                        "color": "#0073E6",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Contact the sender
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                        <View
+                          accessibilityLabel="Show more data"
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          testID="show-more-data-action"
+                        >
+                          <View
+                            importantForAccessibility="no-hide-descendants"
+                            style={
+                              Array [
+                                Object {
+                                  "marginHorizontal": -24,
+                                  "paddingHorizontal": 24,
+                                  "paddingVertical": 12,
+                                },
+                                Object {
+                                  "backgroundColor": undefined,
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "space-between",
+                                  },
+                                  Object {
+                                    "transform": Array [
+                                      Object {
+                                        "scale": undefined,
+                                      },
+                                    ],
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "marginRight": 16,
+                                  }
+                                }
+                              >
+                                <RNSVGSvgView
+                                  accessibilityElementsHidden={true}
+                                  accessibilityLabel=""
+                                  accessible={false}
+                                  align="xMidYMid"
+                                  bbHeight={24}
+                                  bbWidth={24}
+                                  focusable={false}
+                                  height={24}
+                                  importantForAccessibility="no-hide-descendants"
+                                  meetOrSlice={0}
+                                  minX={0}
+                                  minY={0}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "backgroundColor": "transparent",
+                                        "borderWidth": 0,
+                                      },
+                                      Object {
+                                        "color": "#0073E6",
+                                      },
+                                      Object {
+                                        "flex": 0,
+                                        "height": 24,
+                                        "width": 24,
+                                      },
+                                    ]
+                                  }
+                                  tintColor="#0073E6"
+                                  vbHeight={24}
+                                  vbWidth={24}
+                                  width={24}
+                                >
+                                  <RNSVGGroup
+                                    fill={
+                                      Object {
+                                        "payload": 4278190080,
+                                        "type": 0,
+                                      }
+                                    }
+                                  >
+                                    <RNSVGPath
+                                      clipRule={0}
+                                      d="M23.0692 1H16.1192C14.4002 1 12.9076 1.55894 12.0012 2.43149C11.0924 1.55894 9.59977 1 7.88084 1H0.928523C0.415514 1 0 1.41429 0 1.92578V20.3349C0 20.8464 0.415514 21 0.928523 21H7.88084C9.70655 21 11 21.5454 11 22.2999C11 22.8114 11.4858 23 11.9988 23C12.5118 23 13 22.8114 13 22.2999C13 21.5454 14.2911 21 16.1168 21H23.0692C23.5822 21 23.9977 20.8464 23.9977 20.3349V1.92578C23.9977 1.41429 23.5822 1 23.0692 1ZM11 19.5C10.1365 19.0244 9.10185 19 7.882 19H2.25C2.11193 19 2 18.8881 2 18.75V3.25C2 3.11193 2.11193 3 2.25 3H4.86894H7.88084C9.70655 3 11.0703 3.69633 11.0703 4.45084L11 12.309V19.5ZM22 18.75C22 18.8881 21.8881 19 21.75 19H16.1192C14.8982 19 13.8635 19.0244 13 19.5V12.3096V4.45084C13 3.69633 14.2935 3 16.1192 3H21.75C21.8881 3 22 3.11193 22 3.25V18.75ZM15 6C15 5.44772 15.4477 5 16 5H19C19.5523 5 20 5.44772 20 6C20 6.55228 19.5523 7 19 7H16C15.4477 7 15 6.55228 15 6ZM16 8C15.4477 8 15 8.44772 15 9C15 9.55229 15.4477 10 16 10H19C19.5523 10 20 9.55229 20 9C20 8.44772 19.5523 8 19 8H16Z"
+                                      fill={
+                                        Object {
+                                          "type": 2,
+                                        }
+                                      }
+                                      fillRule={0}
+                                      propList={
+                                        Array [
+                                          "fill",
+                                          "fillRule",
+                                        ]
+                                      }
+                                    />
+                                  </RNSVGGroup>
+                                </RNSVGSvgView>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <Text
+                                  style={
+                                    Array [
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontSize": 16,
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                        "lineHeight": 20,
+                                      },
+                                      Object {
+                                        "color": "#0073E6",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Show more data
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsFooter component should match the snapshot when the service's contact details are not defined 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY_ROUTE
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={2}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Array [
+                            Object {
+                              "paddingHorizontal": 24,
+                            },
+                            Object {
+                              "backgroundColor": "#F4F5F8",
+                              "marginBottom": "-75%",
+                              "paddingBottom": "75%",
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          style={
+                            Object {
+                              "height": 16,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="Show more data"
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          testID="show-more-data-action"
+                        >
+                          <View
+                            importantForAccessibility="no-hide-descendants"
+                            style={
+                              Array [
+                                Object {
+                                  "marginHorizontal": -24,
+                                  "paddingHorizontal": 24,
+                                  "paddingVertical": 12,
+                                },
+                                Object {
+                                  "backgroundColor": undefined,
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "space-between",
+                                  },
+                                  Object {
+                                    "transform": Array [
+                                      Object {
+                                        "scale": undefined,
+                                      },
+                                    ],
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "marginRight": 16,
+                                  }
+                                }
+                              >
+                                <RNSVGSvgView
+                                  accessibilityElementsHidden={true}
+                                  accessibilityLabel=""
+                                  accessible={false}
+                                  align="xMidYMid"
+                                  bbHeight={24}
+                                  bbWidth={24}
+                                  focusable={false}
+                                  height={24}
+                                  importantForAccessibility="no-hide-descendants"
+                                  meetOrSlice={0}
+                                  minX={0}
+                                  minY={0}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "backgroundColor": "transparent",
+                                        "borderWidth": 0,
+                                      },
+                                      Object {
+                                        "color": "#0073E6",
+                                      },
+                                      Object {
+                                        "flex": 0,
+                                        "height": 24,
+                                        "width": 24,
+                                      },
+                                    ]
+                                  }
+                                  tintColor="#0073E6"
+                                  vbHeight={24}
+                                  vbWidth={24}
+                                  width={24}
+                                >
+                                  <RNSVGGroup
+                                    fill={
+                                      Object {
+                                        "payload": 4278190080,
+                                        "type": 0,
+                                      }
+                                    }
+                                  >
+                                    <RNSVGPath
+                                      clipRule={0}
+                                      d="M23.0692 1H16.1192C14.4002 1 12.9076 1.55894 12.0012 2.43149C11.0924 1.55894 9.59977 1 7.88084 1H0.928523C0.415514 1 0 1.41429 0 1.92578V20.3349C0 20.8464 0.415514 21 0.928523 21H7.88084C9.70655 21 11 21.5454 11 22.2999C11 22.8114 11.4858 23 11.9988 23C12.5118 23 13 22.8114 13 22.2999C13 21.5454 14.2911 21 16.1168 21H23.0692C23.5822 21 23.9977 20.8464 23.9977 20.3349V1.92578C23.9977 1.41429 23.5822 1 23.0692 1ZM11 19.5C10.1365 19.0244 9.10185 19 7.882 19H2.25C2.11193 19 2 18.8881 2 18.75V3.25C2 3.11193 2.11193 3 2.25 3H4.86894H7.88084C9.70655 3 11.0703 3.69633 11.0703 4.45084L11 12.309V19.5ZM22 18.75C22 18.8881 21.8881 19 21.75 19H16.1192C14.8982 19 13.8635 19.0244 13 19.5V12.3096V4.45084C13 3.69633 14.2935 3 16.1192 3H21.75C21.8881 3 22 3.11193 22 3.25V18.75ZM15 6C15 5.44772 15.4477 5 16 5H19C19.5523 5 20 5.44772 20 6C20 6.55228 19.5523 7 19 7H16C15.4477 7 15 6.55228 15 6ZM16 8C15.4477 8 15 8.44772 15 9C15 9.55229 15.4477 10 16 10H19C19.5523 10 20 9.55229 20 9C20 8.44772 19.5523 8 19 8H16Z"
+                                      fill={
+                                        Object {
+                                          "type": 2,
+                                        }
+                                      }
+                                      fillRule={0}
+                                      propList={
+                                        Array [
+                                          "fill",
+                                          "fillRule",
+                                        ]
+                                      }
+                                    />
+                                  </RNSVGGroup>
+                                </RNSVGSvgView>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <Text
+                                  style={
+                                    Array [
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontSize": 16,
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                        "lineHeight": 20,
+                                      },
+                                      Object {
+                                        "color": "#0073E6",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Show more data
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsHeader.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsHeader.test.tsx.snap
new file mode 100644
index 00000000000..71dc6da011c
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsHeader.test.tsx.snap
@@ -0,0 +1,598 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageDetailsHeader component should match the snapshot with default props 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY_ROUTE
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "flexDirection": "row",
+                            "flexWrap": "wrap",
+                            "justifyContent": "flex-start",
+                            "marginHorizontal": -4,
+                            "marginVertical": -4,
+                          }
+                        }
+                      />
+                      <View
+                        style={
+                          Object {
+                            "height": 8,
+                          }
+                        }
+                      />
+                      <Text
+                        allowFontScaling={false}
+                        color="bluegreyDark"
+                        defaultColor="bluegreyDark"
+                        defaultWeight="SemiBold"
+                        font="TitilliumWeb"
+                        fontStyle={
+                          Object {
+                            "fontSize": 24,
+                            "lineHeight": 34,
+                          }
+                        }
+                        style={
+                          Array [
+                            Object {
+                              "fontSize": 24,
+                              "lineHeight": 34,
+                            },
+                            Object {
+                              "color": "#17324D",
+                              "fontFamily": "Titillium Web",
+                              "fontStyle": "normal",
+                              "fontWeight": "600",
+                            },
+                          ]
+                        }
+                        testID="message-header-subject"
+                        weight="SemiBold"
+                      >
+                        #### Subject ####
+                      </Text>
+                      <View
+                        style={
+                          Object {
+                            "height": 8,
+                          }
+                        }
+                      />
+                      <Text
+                        allowFontScaling={false}
+                        color="grey-700"
+                        defaultColor="blue"
+                        defaultWeight="Bold"
+                        font="TitilliumWeb"
+                        fontSize="regular"
+                        fontStyle={
+                          Object {
+                            "fontSize": 14,
+                            "lineHeight": 21,
+                          }
+                        }
+                        style={
+                          Array [
+                            Object {
+                              "fontSize": 14,
+                              "lineHeight": 21,
+                            },
+                            Object {
+                              "color": "#555C70",
+                              "fontFamily": "Titillium Web",
+                              "fontStyle": "normal",
+                              "fontWeight": "700",
+                            },
+                          ]
+                        }
+                        weight="Bold"
+                      >
+                        18 Oct 2021, 16:00
+                      </Text>
+                      <View
+                        style={
+                          Object {
+                            "height": 8,
+                          }
+                        }
+                      />
+                      <View
+                        style={
+                          Object {
+                            "backgroundColor": "#D2D6E3",
+                            "height": 0.5,
+                          }
+                        }
+                      />
+                      <View
+                        style={
+                          Object {
+                            "alignItems": "center",
+                            "flexDirection": "row",
+                            "justifyContent": "space-between",
+                            "paddingVertical": 6,
+                          }
+                        }
+                      >
+                        <View
+                          style={
+                            Object {
+                              "flex": 1,
+                            }
+                          }
+                        >
+                          <Text
+                            allowFontScaling={false}
+                            color="grey-700"
+                            defaultColor="blue"
+                            defaultWeight="Bold"
+                            font="TitilliumWeb"
+                            fontSize="regular"
+                            fontStyle={
+                              Object {
+                                "fontSize": 14,
+                                "lineHeight": 21,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "fontSize": 14,
+                                  "lineHeight": 21,
+                                },
+                                Object {
+                                  "color": "#555C70",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "700",
+                                },
+                              ]
+                            }
+                            weight="Bold"
+                          >
+                            Ċentru tas-Saħħa
+                          </Text>
+                          <Text
+                            allowFontScaling={false}
+                            color="blueIO-500"
+                            defaultColor="blue"
+                            defaultWeight="Bold"
+                            font="TitilliumWeb"
+                            fontSize="regular"
+                            fontStyle={
+                              Object {
+                                "fontSize": 14,
+                                "lineHeight": 21,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "fontSize": 14,
+                                  "lineHeight": 21,
+                                },
+                                Object {
+                                  "color": "#0B3EE3",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "700",
+                                },
+                              ]
+                            }
+                            weight="Bold"
+                          >
+                            health
+                          </Text>
+                        </View>
+                        <View
+                          style={
+                            Object {
+                              "marginLeft": 16,
+                            }
+                          }
+                        >
+                          <View
+                            accessibilityIgnoresInvertColors={true}
+                            style={
+                              Array [
+                                Object {
+                                  "borderColor": "rgba(14,15,19,0.1)",
+                                  "borderCurve": "continuous",
+                                  "borderWidth": 1,
+                                  "overflow": "hidden",
+                                },
+                                Object {
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderRadius": 8,
+                                  "height": 44,
+                                  "padding": 6,
+                                  "width": 44,
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "backgroundColor": "#FFFFFF",
+                                    "borderCurve": "continuous",
+                                    "overflow": "hidden",
+                                  },
+                                  Object {
+                                    "borderRadius": 2,
+                                  },
+                                ]
+                              }
+                            >
+                              <Image
+                                accessibilityIgnoresInvertColors={true}
+                                onError={[Function]}
+                                source={
+                                  Object {
+                                    "uri": "https://assets.cdn.io.italia.it/logos/services/service_one.png",
+                                  }
+                                }
+                                style={
+                                  Object {
+                                    "height": "100%",
+                                    "resizeMode": "contain",
+                                    "width": "100%",
+                                  }
+                                }
+                              />
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View
+                        style={
+                          Object {
+                            "backgroundColor": "#D2D6E3",
+                            "height": 0.5,
+                          }
+                        }
+                      />
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsPayment.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsPayment.test.tsx.snap
new file mode 100644
index 00000000000..a7dbf9819b3
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsPayment.test.tsx.snap
@@ -0,0 +1,953 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageDetailsPayment Should match snapshot for no payment data 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsPayment Should match snapshot when there are payment data 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={2}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "height": 16,
+                          }
+                        }
+                      />
+                      <View
+                        accessibilityLabel="pagoPA notices"
+                        accessible={true}
+                        style={
+                          Object {
+                            "marginHorizontal": -24,
+                            "paddingHorizontal": 24,
+                            "paddingVertical": 12,
+                          }
+                        }
+                      >
+                        <View
+                          importantForAccessibility="no-hide-descendants"
+                          style={
+                            Object {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "space-between",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "marginRight": 8,
+                              }
+                            }
+                          >
+                            <RNSVGSvgView
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessible={false}
+                              align="xMidYMid"
+                              bbHeight={24}
+                              bbWidth={24}
+                              focusable={false}
+                              height={24}
+                              importantForAccessibility="no-hide-descendants"
+                              meetOrSlice={0}
+                              minX={0}
+                              minY={0}
+                              style={
+                                Array [
+                                  Object {
+                                    "backgroundColor": "transparent",
+                                    "borderWidth": 0,
+                                  },
+                                  Object {
+                                    "color": "#0066CC",
+                                  },
+                                  Object {
+                                    "flex": 0,
+                                    "height": 24,
+                                    "width": 24,
+                                  },
+                                ]
+                              }
+                              tintColor="#0066CC"
+                              vbHeight={32}
+                              vbWidth={32}
+                              width={24}
+                            >
+                              <RNSVGGroup
+                                fill={
+                                  Object {
+                                    "payload": 4278190080,
+                                    "type": 0,
+                                  }
+                                }
+                              >
+                                <RNSVGPath
+                                  d="m22.551 11.358-.009 2.675h-1.956V5h3.617c1.163 0 1.753.314 1.762.941v4.41c0 .628-.563.933-1.697.933H22.56v.074h-.01ZM24 6.043h-1.467v4.189H24v-4.19ZM1.652 14.043l-.01 2.676H0V7.685h3.027c.978 0 1.467.314 1.476.941v4.41c0 .628-.47.933-1.421.933h-1.43v.074ZM2.87 8.737H1.642v4.19H2.87v-4.19ZM9.56 13.969H6.44c-.913 0-1.374-.314-1.374-.941l.009-1.837c0-.618.47-.932 1.421-.94h1.43V8.736H6.7l-.01.83H5.085v-.94c0-.619.48-.923 1.44-.923l1.605-.019c.95 0 1.43.314 1.43.932v5.352Zm-2.852-1.052h1.237l-.01-1.615H6.708v1.615ZM13.149 13.969h-1.44c-.95 0-1.42-.314-1.42-.932v-4.41c.009-.628.498-.942 1.476-.942h3.026v8.102c0 .627-.48.94-1.43.94h-1.633c-.95 0-1.43-.313-1.43-.94v-.932h1.633v.83h1.227v-1.642l-.01-.074Zm-1.227-1.052h1.227v-4.18h-1.227v4.18ZM19.848 13.028c-.01.627-.498.932-1.477.932h-1.587c-.96 0-1.44-.314-1.44-.932v-4.41c0-.628.48-.933 1.44-.933h1.634c.95 0 1.42.314 1.42.932v4.41h.01Zm-1.624-4.291h-1.237v4.19h1.228l.009-4.19Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                                <RNSVGPath
+                                  d="M31.99 5.987c0-.627-.562-.932-1.697-.932h-1.956c-1.144 0-1.716.314-1.716.932v8.065h1.956v-2.759h1.476V13.6c0 5.905-4.77 10.676-10.676 10.676a10.694 10.694 0 0 1-8.433-4.116l.978-.747-3.931-2.648.175 5.582 1.255-.996a12.614 12.614 0 0 0 9.956 4.853C26.353 26.204 32 20.548 32 13.581l-.01-7.594Zm-1.946 4.254h-1.477V6.09h1.477v4.152Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                              </RNSVGGroup>
+                            </RNSVGSvgView>
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityElementsHidden={false}
+                              accessible={true}
+                              importantForAccessibility="yes"
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="grey-700"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#555C70",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                pagoPA notices
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          accessible={false}
+                          style={
+                            Object {
+                              "alignItems": "center",
+                              "backgroundColor": "#FFFFFF",
+                              "borderColor": "#E8EBF1",
+                              "borderCurve": "continuous",
+                              "borderRadius": 8,
+                              "borderWidth": 1,
+                              "flexDirection": "row",
+                              "justifyContent": "space-between",
+                              "paddingHorizontal": 16,
+                              "paddingVertical": 16,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                              }
+                            }
+                          >
+                            <View
+                              collapsable={false}
+                              style={
+                                Object {
+                                  "opacity": 0.5,
+                                }
+                              }
+                            >
+                              <View
+                                height={16}
+                                radius={8}
+                                style={
+                                  Object {
+                                    "backgroundColor": "#efefef",
+                                    "borderRadius": 8,
+                                    "height": 16,
+                                    "width": 179,
+                                  }
+                                }
+                                width={179}
+                              />
+                            </View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 4,
+                                }
+                              }
+                            />
+                            <View
+                              collapsable={false}
+                              style={
+                                Object {
+                                  "opacity": 0.5,
+                                }
+                              }
+                            >
+                              <View
+                                height={13}
+                                radius={8}
+                                style={
+                                  Object {
+                                    "backgroundColor": "#efefef",
+                                    "borderRadius": 8,
+                                    "height": 13,
+                                    "width": 121,
+                                  }
+                                }
+                                width={121}
+                              />
+                            </View>
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "marginLeft": 16,
+                              }
+                            }
+                          >
+                            <View
+                              collapsable={false}
+                              style={
+                                Object {
+                                  "opacity": 0.5,
+                                }
+                              }
+                            >
+                              <View
+                                height={16}
+                                radius={8}
+                                style={
+                                  Object {
+                                    "backgroundColor": "#efefef",
+                                    "borderRadius": 8,
+                                    "height": 16,
+                                    "width": 62,
+                                  }
+                                }
+                                width={62}
+                              />
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsPaymentButton.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsPaymentButton.test.tsx.snap
new file mode 100644
index 00000000000..fc234e53d50
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsPaymentButton.test.tsx.snap
@@ -0,0 +1,1047 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageDetailsPaymentButton should match snapshot when loading 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={2}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityLabel="Pay"
+                        accessibilityRole="button"
+                        accessibilityState={
+                          Object {
+                            "busy": true,
+                            "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
+                          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
+                            exiting={[Function]}
+                            style={
+                              Object {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "justifyContent": "center",
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityRole="progressbar"
+                              accessible={true}
+                              importantForAccessibility="no-hide-descendants"
+                              style={
+                                Object {
+                                  "height": 24,
+                                  "width": 24,
+                                }
+                              }
+                              testID="LoadingSpinnerTestID"
+                            >
+                              <View
+                                collapsable={false}
+                                style={
+                                  Object {
+                                    "transform": Array [
+                                      Object {
+                                        "rotateZ": "0deg",
+                                      },
+                                    ],
+                                  }
+                                }
+                                testID="LoadingSpinnerAnimatedTestID"
+                              >
+                                <RNSVGSvgView
+                                  align="xMidYMid"
+                                  bbHeight={24}
+                                  bbWidth={24}
+                                  fill="none"
+                                  focusable={false}
+                                  height={24}
+                                  meetOrSlice={0}
+                                  minX={0}
+                                  minY={0}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "backgroundColor": "transparent",
+                                        "borderWidth": 0,
+                                      },
+                                      Object {
+                                        "flex": 0,
+                                        "height": 24,
+                                        "width": 24,
+                                      },
+                                    ]
+                                  }
+                                  vbHeight={24}
+                                  vbWidth={24}
+                                  width={24}
+                                >
+                                  <RNSVGGroup
+                                    fill={null}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  >
+                                    <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={
+                                        Object {
+                                          "payload": 4278190080,
+                                          "type": 0,
+                                        }
+                                      }
+                                      propList={
+                                        Array [
+                                          "strokeWidth",
+                                        ]
+                                      }
+                                      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-firstHalf",
+                                            "type": 1,
+                                          }
+                                        }
+                                      />
+                                      <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",
+                                            "strokeLinecap",
+                                          ]
+                                        }
+                                        stroke={
+                                          Object {
+                                            "payload": 4294967295,
+                                            "type": 0,
+                                          }
+                                        }
+                                        strokeLinecap={1}
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGGroup>
+                                </RNSVGSvgView>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsPaymentButton should match snapshot when not loading 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityLabel="Pay"
+                        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
+                          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
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                },
+                                false,
+                              ]
+                            }
+                          >
+                            <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"
+                            >
+                              Pay
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsReminder.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsReminder.test.tsx.snap
new file mode 100644
index 00000000000..967b238968e
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsReminder.test.tsx.snap
@@ -0,0 +1,2084 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageDetailsReminder should match snapshot when the due date is missing 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={2}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsReminder should match snapshot when the reminder is hidden 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsReminder should match snapshot when the reminder is loading 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={3}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View>
+                        <View
+                          height={84}
+                          radius={8}
+                          style={
+                            Object {
+                              "backgroundColor": "#efefef",
+                              "borderRadius": 8,
+                              "height": 84,
+                              "width": "100%",
+                            }
+                          }
+                          width="100%"
+                        />
+                        <View
+                          collapsable={false}
+                          style={
+                            Object {
+                              "backgroundColor": "#ffffff",
+                              "height": "100%",
+                              "marginLeft": "0%",
+                              "opacity": 0.4,
+                              "position": "absolute",
+                              "width": 30,
+                            }
+                          }
+                        />
+                      </View>
+                      <View
+                        style={
+                          Object {
+                            "height": 8,
+                          }
+                        }
+                      />
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsReminder should match snapshot when the reminder is visible an expiring 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={4}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityRole="button"
+                        accessible={true}
+                        collapsable={false}
+                        focusable={true}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
+                        onTouchEnd={[Function]}
+                        testID="due-date-alert"
+                      >
+                        <View
+                          style={
+                            Array [
+                              Object {
+                                "alignContent": "center",
+                                "alignItems": "flex-start",
+                                "flexDirection": "row",
+                              },
+                              Object {
+                                "borderCurve": "continuous",
+                                "borderRadius": 8,
+                                "padding": 16,
+                              },
+                              Object {
+                                "backgroundColor": "#FFF5DA",
+                              },
+                              Object {
+                                "transform": Array [
+                                  Object {
+                                    "scale": undefined,
+                                  },
+                                ],
+                              },
+                            ]
+                          }
+                        >
+                          <RNSVGSvgView
+                            accessibilityElementsHidden={true}
+                            accessibilityLabel=""
+                            accessible={false}
+                            align="xMidYMid"
+                            bbHeight={24}
+                            bbWidth={24}
+                            focusable={false}
+                            height={24}
+                            importantForAccessibility="no-hide-descendants"
+                            meetOrSlice={0}
+                            minX={0}
+                            minY={0}
+                            style={
+                              Array [
+                                Object {
+                                  "backgroundColor": "transparent",
+                                  "borderWidth": 0,
+                                },
+                                Object {
+                                  "color": "#614C15",
+                                },
+                                Object {
+                                  "flex": 0,
+                                  "height": 24,
+                                  "width": 24,
+                                },
+                              ]
+                            }
+                            tintColor="#614C15"
+                            vbHeight={24}
+                            vbWidth={24}
+                            width={24}
+                          >
+                            <RNSVGGroup
+                              fill={
+                                Object {
+                                  "payload": 4278190080,
+                                  "type": 0,
+                                }
+                              }
+                            >
+                              <RNSVGPath
+                                clipRule={0}
+                                d="m15.523 3.047 7.926 13.813c1.566 2.73-.392 6.14-3.523 6.14H4.074C.942 23-1.015 19.59.55 16.86L8.477 3.047c1.566-2.73 5.48-2.73 7.046 0Zm-3.495 13.458a1.528 1.528 0 1 1 0 3.056 1.528 1.528 0 0 1 0-3.056Zm0-1.944c.568 0 1.029-.46 1.029-1.028V5.528a1.028 1.028 0 0 0-2.057 0v8.005c0 .567.46 1.028 1.029 1.028Z"
+                                fill={
+                                  Object {
+                                    "type": 2,
+                                  }
+                                }
+                                fillRule={0}
+                                propList={
+                                  Array [
+                                    "fill",
+                                    "fillRule",
+                                  ]
+                                }
+                              />
+                            </RNSVGGroup>
+                          </RNSVGSvgView>
+                          <View
+                            style={
+                              Object {
+                                "width": 16,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                              }
+                            }
+                          >
+                            <Text
+                              accessibilityRole="text"
+                              allowFontScaling={false}
+                              color="warning-850"
+                              defaultColor="black"
+                              defaultWeight="Bold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 16,
+                                  "lineHeight": 24,
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 16,
+                                    "lineHeight": 24,
+                                  },
+                                  Object {
+                                    "color": "#614C15",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "400",
+                                  },
+                                ]
+                              }
+                              weight="Regular"
+                            >
+                              Expires on 21/03/2024 at 18:44
+                            </Text>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <Text
+                              ellipsizeMode="tail"
+                              numberOfLines={1}
+                              style={
+                                Array [
+                                  Object {
+                                    "fontFamily": "Titillium Web",
+                                    "fontSize": 16,
+                                    "fontStyle": "normal",
+                                    "fontWeight": "700",
+                                  },
+                                  Object {
+                                    "color": "#614C15",
+                                  },
+                                ]
+                              }
+                            >
+                              Add reminder
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                      <View
+                        style={
+                          Object {
+                            "height": 8,
+                          }
+                        }
+                      />
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsReminder should match snapshot when the reminder is visible and expired 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={5}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityRole="alert"
+                        accessible={false}
+                        style={
+                          Array [
+                            Object {
+                              "alignContent": "center",
+                              "alignItems": "flex-start",
+                              "flexDirection": "row",
+                            },
+                            Object {
+                              "borderCurve": "continuous",
+                              "borderRadius": 8,
+                              "padding": 16,
+                            },
+                            Object {
+                              "backgroundColor": "#FFF5DA",
+                            },
+                          ]
+                        }
+                        testID="due-date-alert"
+                      >
+                        <RNSVGSvgView
+                          accessibilityElementsHidden={true}
+                          accessibilityLabel=""
+                          accessible={false}
+                          align="xMidYMid"
+                          bbHeight={24}
+                          bbWidth={24}
+                          focusable={false}
+                          height={24}
+                          importantForAccessibility="no-hide-descendants"
+                          meetOrSlice={0}
+                          minX={0}
+                          minY={0}
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "borderWidth": 0,
+                              },
+                              Object {
+                                "color": "#614C15",
+                              },
+                              Object {
+                                "flex": 0,
+                                "height": 24,
+                                "width": 24,
+                              },
+                            ]
+                          }
+                          tintColor="#614C15"
+                          vbHeight={24}
+                          vbWidth={24}
+                          width={24}
+                        >
+                          <RNSVGGroup
+                            fill={
+                              Object {
+                                "payload": 4278190080,
+                                "type": 0,
+                              }
+                            }
+                          >
+                            <RNSVGPath
+                              clipRule={0}
+                              d="m15.523 3.047 7.926 13.813c1.566 2.73-.392 6.14-3.523 6.14H4.074C.942 23-1.015 19.59.55 16.86L8.477 3.047c1.566-2.73 5.48-2.73 7.046 0Zm-3.495 13.458a1.528 1.528 0 1 1 0 3.056 1.528 1.528 0 0 1 0-3.056Zm0-1.944c.568 0 1.029-.46 1.029-1.028V5.528a1.028 1.028 0 0 0-2.057 0v8.005c0 .567.46 1.028 1.029 1.028Z"
+                              fill={
+                                Object {
+                                  "type": 2,
+                                }
+                              }
+                              fillRule={0}
+                              propList={
+                                Array [
+                                  "fill",
+                                  "fillRule",
+                                ]
+                              }
+                            />
+                          </RNSVGGroup>
+                        </RNSVGSvgView>
+                        <View
+                          style={
+                            Object {
+                              "width": 16,
+                            }
+                          }
+                        />
+                        <View
+                          style={
+                            Object {
+                              "flex": 1,
+                            }
+                          }
+                        >
+                          <Text
+                            accessibilityRole="text"
+                            allowFontScaling={false}
+                            color="warning-850"
+                            defaultColor="black"
+                            defaultWeight="Bold"
+                            font="TitilliumWeb"
+                            fontStyle={
+                              Object {
+                                "fontSize": 16,
+                                "lineHeight": 24,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "fontSize": 16,
+                                  "lineHeight": 24,
+                                },
+                                Object {
+                                  "color": "#614C15",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "400",
+                                },
+                              ]
+                            }
+                            weight="Regular"
+                          >
+                            Expired on 21 Mar at 18:44
+                          </Text>
+                        </View>
+                      </View>
+                      <View
+                        style={
+                          Object {
+                            "height": 8,
+                          }
+                        }
+                      />
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsReminderExpired.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsReminderExpired.test.tsx.snap
new file mode 100644
index 00000000000..d1f0348020c
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsReminderExpired.test.tsx.snap
@@ -0,0 +1,850 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageDetailsReminderExpired should match snapshot when loading 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View>
+                        <View
+                          height={84}
+                          radius={8}
+                          style={
+                            Object {
+                              "backgroundColor": "#efefef",
+                              "borderRadius": 8,
+                              "height": 84,
+                              "width": "100%",
+                            }
+                          }
+                          width="100%"
+                        />
+                        <View
+                          collapsable={false}
+                          style={
+                            Object {
+                              "backgroundColor": "#ffffff",
+                              "height": "100%",
+                              "marginLeft": "0%",
+                              "opacity": 0.4,
+                              "position": "absolute",
+                              "width": 30,
+                            }
+                          }
+                        />
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsReminderExpired should match snapshot when not loading 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={2}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityRole="alert"
+                        accessible={false}
+                        style={
+                          Array [
+                            Object {
+                              "alignContent": "center",
+                              "alignItems": "flex-start",
+                              "flexDirection": "row",
+                            },
+                            Object {
+                              "borderCurve": "continuous",
+                              "borderRadius": 8,
+                              "padding": 16,
+                            },
+                            Object {
+                              "backgroundColor": "#FFF5DA",
+                            },
+                          ]
+                        }
+                        testID="due-date-alert"
+                      >
+                        <RNSVGSvgView
+                          accessibilityElementsHidden={true}
+                          accessibilityLabel=""
+                          accessible={false}
+                          align="xMidYMid"
+                          bbHeight={24}
+                          bbWidth={24}
+                          focusable={false}
+                          height={24}
+                          importantForAccessibility="no-hide-descendants"
+                          meetOrSlice={0}
+                          minX={0}
+                          minY={0}
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "borderWidth": 0,
+                              },
+                              Object {
+                                "color": "#614C15",
+                              },
+                              Object {
+                                "flex": 0,
+                                "height": 24,
+                                "width": 24,
+                              },
+                            ]
+                          }
+                          tintColor="#614C15"
+                          vbHeight={24}
+                          vbWidth={24}
+                          width={24}
+                        >
+                          <RNSVGGroup
+                            fill={
+                              Object {
+                                "payload": 4278190080,
+                                "type": 0,
+                              }
+                            }
+                          >
+                            <RNSVGPath
+                              clipRule={0}
+                              d="m15.523 3.047 7.926 13.813c1.566 2.73-.392 6.14-3.523 6.14H4.074C.942 23-1.015 19.59.55 16.86L8.477 3.047c1.566-2.73 5.48-2.73 7.046 0Zm-3.495 13.458a1.528 1.528 0 1 1 0 3.056 1.528 1.528 0 0 1 0-3.056Zm0-1.944c.568 0 1.029-.46 1.029-1.028V5.528a1.028 1.028 0 0 0-2.057 0v8.005c0 .567.46 1.028 1.029 1.028Z"
+                              fill={
+                                Object {
+                                  "type": 2,
+                                }
+                              }
+                              fillRule={0}
+                              propList={
+                                Array [
+                                  "fill",
+                                  "fillRule",
+                                ]
+                              }
+                            />
+                          </RNSVGGroup>
+                        </RNSVGSvgView>
+                        <View
+                          style={
+                            Object {
+                              "width": 16,
+                            }
+                          }
+                        />
+                        <View
+                          style={
+                            Object {
+                              "flex": 1,
+                            }
+                          }
+                        >
+                          <Text
+                            accessibilityRole="text"
+                            allowFontScaling={false}
+                            color="warning-850"
+                            defaultColor="black"
+                            defaultWeight="Bold"
+                            font="TitilliumWeb"
+                            fontStyle={
+                              Object {
+                                "fontSize": 16,
+                                "lineHeight": 24,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "fontSize": 16,
+                                  "lineHeight": 24,
+                                },
+                                Object {
+                                  "color": "#614C15",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "400",
+                                },
+                              ]
+                            }
+                            weight="Regular"
+                          >
+                            Expired on 21 Mar at 10:33
+                          </Text>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsReminderExpiring.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsReminderExpiring.test.tsx.snap
new file mode 100644
index 00000000000..5f62ac19f2f
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsReminderExpiring.test.tsx.snap
@@ -0,0 +1,524 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageDetailsReminderExpiring should match snapshot 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityRole="button"
+                        accessible={true}
+                        collapsable={false}
+                        focusable={true}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
+                        onTouchEnd={[Function]}
+                        testID="due-date-alert"
+                      >
+                        <View
+                          style={
+                            Array [
+                              Object {
+                                "alignContent": "center",
+                                "alignItems": "flex-start",
+                                "flexDirection": "row",
+                              },
+                              Object {
+                                "borderCurve": "continuous",
+                                "borderRadius": 8,
+                                "padding": 16,
+                              },
+                              Object {
+                                "backgroundColor": "#FFF5DA",
+                              },
+                              Object {
+                                "transform": Array [
+                                  Object {
+                                    "scale": undefined,
+                                  },
+                                ],
+                              },
+                            ]
+                          }
+                        >
+                          <RNSVGSvgView
+                            accessibilityElementsHidden={true}
+                            accessibilityLabel=""
+                            accessible={false}
+                            align="xMidYMid"
+                            bbHeight={24}
+                            bbWidth={24}
+                            focusable={false}
+                            height={24}
+                            importantForAccessibility="no-hide-descendants"
+                            meetOrSlice={0}
+                            minX={0}
+                            minY={0}
+                            style={
+                              Array [
+                                Object {
+                                  "backgroundColor": "transparent",
+                                  "borderWidth": 0,
+                                },
+                                Object {
+                                  "color": "#614C15",
+                                },
+                                Object {
+                                  "flex": 0,
+                                  "height": 24,
+                                  "width": 24,
+                                },
+                              ]
+                            }
+                            tintColor="#614C15"
+                            vbHeight={24}
+                            vbWidth={24}
+                            width={24}
+                          >
+                            <RNSVGGroup
+                              fill={
+                                Object {
+                                  "payload": 4278190080,
+                                  "type": 0,
+                                }
+                              }
+                            >
+                              <RNSVGPath
+                                clipRule={0}
+                                d="m15.523 3.047 7.926 13.813c1.566 2.73-.392 6.14-3.523 6.14H4.074C.942 23-1.015 19.59.55 16.86L8.477 3.047c1.566-2.73 5.48-2.73 7.046 0Zm-3.495 13.458a1.528 1.528 0 1 1 0 3.056 1.528 1.528 0 0 1 0-3.056Zm0-1.944c.568 0 1.029-.46 1.029-1.028V5.528a1.028 1.028 0 0 0-2.057 0v8.005c0 .567.46 1.028 1.029 1.028Z"
+                                fill={
+                                  Object {
+                                    "type": 2,
+                                  }
+                                }
+                                fillRule={0}
+                                propList={
+                                  Array [
+                                    "fill",
+                                    "fillRule",
+                                  ]
+                                }
+                              />
+                            </RNSVGGroup>
+                          </RNSVGSvgView>
+                          <View
+                            style={
+                              Object {
+                                "width": 16,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                              }
+                            }
+                          >
+                            <Text
+                              accessibilityRole="text"
+                              allowFontScaling={false}
+                              color="warning-850"
+                              defaultColor="black"
+                              defaultWeight="Bold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 16,
+                                  "lineHeight": 24,
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 16,
+                                    "lineHeight": 24,
+                                  },
+                                  Object {
+                                    "color": "#614C15",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "400",
+                                  },
+                                ]
+                              }
+                              weight="Regular"
+                            >
+                              Expires on 21/03/2024 at 10:33
+                            </Text>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <Text
+                              ellipsizeMode="tail"
+                              numberOfLines={1}
+                              style={
+                                Array [
+                                  Object {
+                                    "fontFamily": "Titillium Web",
+                                    "fontSize": 16,
+                                    "fontStyle": "normal",
+                                    "fontWeight": "700",
+                                  },
+                                  Object {
+                                    "color": "#614C15",
+                                  },
+                                ]
+                              }
+                            >
+                              Add reminder
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsScrollViewAdditionalSpace.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsScrollViewAdditionalSpace.test.tsx.snap
new file mode 100644
index 00000000000..8a2ce201b8b
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsScrollViewAdditionalSpace.test.tsx.snap
@@ -0,0 +1,2119 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageDetailsScrollViewAdditionalSpace Should match snapshot with button and a single CTA 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={6}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "height": 152,
+                          }
+                        }
+                      />
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsScrollViewAdditionalSpace Should match snapshot with button and both CTA 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={5}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "height": 208,
+                          }
+                        }
+                      />
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsScrollViewAdditionalSpace Should match snapshot with button and no CTAs 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={4}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "height": 96,
+                          }
+                        }
+                      />
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsScrollViewAdditionalSpace Should match snapshot with hidden button and a single CTA 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={3}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "height": 96,
+                          }
+                        }
+                      />
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsScrollViewAdditionalSpace Should match snapshot with hidden button and both CTAs 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={2}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "height": 152,
+                          }
+                        }
+                      />
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsScrollViewAdditionalSpace Should match snapshot with hidden button and no CTAs 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "height": 24,
+                          }
+                        }
+                      />
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsStickyFooter.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsStickyFooter.test.tsx.snap
new file mode 100644
index 00000000000..0bdb8ab1187
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessageDetailsStickyFooter.test.tsx.snap
@@ -0,0 +1,4138 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageDetailsStickyFooter should match snapshot with both CTAs and no payment button 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={6}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Array [
+                            Object {
+                              "backgroundColor": "#FFFFFF",
+                              "elevation": 20,
+                              "paddingBottom": 16,
+                              "paddingHorizontal": 24,
+                              "paddingTop": 16,
+                              "shadowColor": "#0E0F13",
+                              "shadowOffset": Object {
+                                "height": 50,
+                                "width": 0,
+                              },
+                              "shadowOpacity": 0.5,
+                              "shadowRadius": 37,
+                            },
+                            Object {
+                              "bottom": 0,
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "100%",
+                            },
+                            Object {
+                              "paddingBottom": 16,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          accessibilityLabel="CTA 1"
+                          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
+                            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
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                  },
+                                  false,
+                                ]
+                              }
+                            >
+                              <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"
+                              >
+                                CTA 1
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          style={
+                            Object {
+                              "alignSelf": "center",
+                              "height": 48,
+                              "justifyContent": "center",
+                            }
+                          }
+                        >
+                          <View
+                            accessibilityLabel="CTA 2"
+                            accessibilityRole="button"
+                            accessibilityState={
+                              Object {
+                                "disabled": false,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              Object {
+                                "bottom": 14,
+                                "left": 24,
+                                "right": 24,
+                                "top": 14,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            onTouchEnd={[Function]}
+                            style={
+                              Object {
+                                "alignSelf": "flex-start",
+                              }
+                            }
+                          >
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "elevation": 0,
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "textAlignVertical": "center",
+                                  },
+                                  false,
+                                  Object {},
+                                  Object {
+                                    "transform": Array [
+                                      Object {
+                                        "scale": undefined,
+                                      },
+                                    ],
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                accessibilityElementsHidden={true}
+                                accessible={false}
+                                allowFontScaling={false}
+                                ellipsizeMode="tail"
+                                importantForAccessibility="no-hide-descendants"
+                                maxFontSizeMultiplier={1.3}
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontFamily": "Titillium Web",
+                                      "fontSize": 16,
+                                      "fontStyle": "normal",
+                                      "fontWeight": "700",
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "color": undefined,
+                                    },
+                                  ]
+                                }
+                              >
+                                CTA 2
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsStickyFooter should match snapshot with both CTAs and visible payment button 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Array [
+                            Object {
+                              "backgroundColor": "#FFFFFF",
+                              "elevation": 20,
+                              "paddingBottom": 16,
+                              "paddingHorizontal": 24,
+                              "paddingTop": 16,
+                              "shadowColor": "#0E0F13",
+                              "shadowOffset": Object {
+                                "height": 50,
+                                "width": 0,
+                              },
+                              "shadowOpacity": 0.5,
+                              "shadowRadius": 37,
+                            },
+                            Object {
+                              "bottom": 0,
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "100%",
+                            },
+                            Object {
+                              "paddingBottom": 16,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          accessibilityLabel="Pay"
+                          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
+                            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
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                  },
+                                  false,
+                                ]
+                              }
+                            >
+                              <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"
+                              >
+                                Pay
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="CTA 1"
+                          accessibilityRole="button"
+                          accessibilityState={
+                            Object {
+                              "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
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "borderRadius": 4,
+                                  "elevation": 0,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "paddingHorizontal": 16,
+                                  "textAlignVertical": "center",
+                                },
+                                false,
+                                Object {
+                                  "borderWidth": 1,
+                                },
+                                Object {
+                                  "height": 40,
+                                },
+                                false,
+                                Object {
+                                  "backgroundColor": "rgba(0,115,230,0)",
+                                  "borderColor": "#0073E6",
+                                },
+                                Object {
+                                  "backgroundColor": undefined,
+                                  "borderColor": undefined,
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <Text
+                              accessibilityElementsHidden={true}
+                              accessible={false}
+                              allowFontScaling={false}
+                              ellipsizeMode="tail"
+                              importantForAccessibility="no-hide-descendants"
+                              maxFontSizeMultiplier={1.3}
+                              numberOfLines={1}
+                              style={
+                                Array [
+                                  Object {
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "700",
+                                  },
+                                  Object {
+                                    "alignSelf": "center",
+                                  },
+                                  Object {
+                                    "color": "#0073E6",
+                                  },
+                                  Object {
+                                    "color": undefined,
+                                  },
+                                ]
+                              }
+                            >
+                              CTA 1
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          style={
+                            Object {
+                              "alignSelf": "center",
+                              "height": 48,
+                              "justifyContent": "center",
+                            }
+                          }
+                        >
+                          <View
+                            accessibilityLabel="CTA 2"
+                            accessibilityRole="button"
+                            accessibilityState={
+                              Object {
+                                "disabled": false,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              Object {
+                                "bottom": 14,
+                                "left": 24,
+                                "right": 24,
+                                "top": 14,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            onTouchEnd={[Function]}
+                            style={
+                              Object {
+                                "alignSelf": "flex-start",
+                              }
+                            }
+                          >
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "elevation": 0,
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "textAlignVertical": "center",
+                                  },
+                                  false,
+                                  Object {},
+                                  Object {
+                                    "transform": Array [
+                                      Object {
+                                        "scale": undefined,
+                                      },
+                                    ],
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                accessibilityElementsHidden={true}
+                                accessible={false}
+                                allowFontScaling={false}
+                                ellipsizeMode="tail"
+                                importantForAccessibility="no-hide-descendants"
+                                maxFontSizeMultiplier={1.3}
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontFamily": "Titillium Web",
+                                      "fontSize": 16,
+                                      "fontStyle": "normal",
+                                      "fontWeight": "700",
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "color": undefined,
+                                    },
+                                  ]
+                                }
+                              >
+                                CTA 2
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsStickyFooter should match snapshot with no CTA and no payment button 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={8}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsStickyFooter should match snapshot with no CTAs and enabled payment button 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={3}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Array [
+                            Object {
+                              "backgroundColor": "#FFFFFF",
+                              "elevation": 20,
+                              "paddingBottom": 16,
+                              "paddingHorizontal": 24,
+                              "paddingTop": 16,
+                              "shadowColor": "#0E0F13",
+                              "shadowOffset": Object {
+                                "height": 50,
+                                "width": 0,
+                              },
+                              "shadowOpacity": 0.5,
+                              "shadowRadius": 37,
+                            },
+                            Object {
+                              "bottom": 0,
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "100%",
+                            },
+                            Object {
+                              "paddingBottom": 16,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          accessibilityLabel="Pay"
+                          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
+                            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
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                  },
+                                  false,
+                                ]
+                              }
+                            >
+                              <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"
+                              >
+                                Pay
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsStickyFooter should match snapshot with no CTAs and hidden payment button 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={5}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsStickyFooter should match snapshot with no CTAs and loading payment button 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={4}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Array [
+                            Object {
+                              "backgroundColor": "#FFFFFF",
+                              "elevation": 20,
+                              "paddingBottom": 16,
+                              "paddingHorizontal": 24,
+                              "paddingTop": 16,
+                              "shadowColor": "#0E0F13",
+                              "shadowOffset": Object {
+                                "height": 50,
+                                "width": 0,
+                              },
+                              "shadowOpacity": 0.5,
+                              "shadowRadius": 37,
+                            },
+                            Object {
+                              "bottom": 0,
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "100%",
+                            },
+                            Object {
+                              "paddingBottom": 16,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          accessibilityLabel="Pay"
+                          accessibilityRole="button"
+                          accessibilityState={
+                            Object {
+                              "busy": true,
+                              "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
+                            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
+                              exiting={[Function]}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                }
+                              }
+                            >
+                              <View
+                                accessibilityRole="progressbar"
+                                accessible={true}
+                                importantForAccessibility="no-hide-descendants"
+                                style={
+                                  Object {
+                                    "height": 24,
+                                    "width": 24,
+                                  }
+                                }
+                                testID="LoadingSpinnerTestID"
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "transform": Array [
+                                        Object {
+                                          "rotateZ": "0deg",
+                                        },
+                                      ],
+                                    }
+                                  }
+                                  testID="LoadingSpinnerAnimatedTestID"
+                                >
+                                  <RNSVGSvgView
+                                    align="xMidYMid"
+                                    bbHeight={24}
+                                    bbWidth={24}
+                                    fill="none"
+                                    focusable={false}
+                                    height={24}
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 24,
+                                          "width": 24,
+                                        },
+                                      ]
+                                    }
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={24}
+                                  >
+                                    <RNSVGGroup
+                                      fill={null}
+                                      propList={
+                                        Array [
+                                          "fill",
+                                        ]
+                                      }
+                                    >
+                                      <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={
+                                          Object {
+                                            "payload": 4278190080,
+                                            "type": 0,
+                                          }
+                                        }
+                                        propList={
+                                          Array [
+                                            "strokeWidth",
+                                          ]
+                                        }
+                                        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-firstHalf",
+                                              "type": 1,
+                                            }
+                                          }
+                                        />
+                                        <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",
+                                              "strokeLinecap",
+                                            ]
+                                          }
+                                          stroke={
+                                            Object {
+                                              "payload": 4294967295,
+                                              "type": 0,
+                                            }
+                                          }
+                                          strokeLinecap={1}
+                                        />
+                                      </RNSVGGroup>
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsStickyFooter should match snapshot with one CTA and no payment button 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={7}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Array [
+                            Object {
+                              "backgroundColor": "#FFFFFF",
+                              "elevation": 20,
+                              "paddingBottom": 16,
+                              "paddingHorizontal": 24,
+                              "paddingTop": 16,
+                              "shadowColor": "#0E0F13",
+                              "shadowOffset": Object {
+                                "height": 50,
+                                "width": 0,
+                              },
+                              "shadowOpacity": 0.5,
+                              "shadowRadius": 37,
+                            },
+                            Object {
+                              "bottom": 0,
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "100%",
+                            },
+                            Object {
+                              "paddingBottom": 16,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          accessibilityLabel="CTA 1"
+                          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
+                            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
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                  },
+                                  false,
+                                ]
+                              }
+                            >
+                              <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"
+                              >
+                                CTA 1
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageDetailsStickyFooter should match snapshot with one CTA and visible payment button 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={2}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Array [
+                            Object {
+                              "backgroundColor": "#FFFFFF",
+                              "elevation": 20,
+                              "paddingBottom": 16,
+                              "paddingHorizontal": 24,
+                              "paddingTop": 16,
+                              "shadowColor": "#0E0F13",
+                              "shadowOffset": Object {
+                                "height": 50,
+                                "width": 0,
+                              },
+                              "shadowOpacity": 0.5,
+                              "shadowRadius": 37,
+                            },
+                            Object {
+                              "bottom": 0,
+                              "overflow": "hidden",
+                              "position": "absolute",
+                              "width": "100%",
+                            },
+                            Object {
+                              "paddingBottom": 16,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          accessibilityLabel="Pay"
+                          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
+                            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
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                  },
+                                  false,
+                                ]
+                              }
+                            >
+                              <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"
+                              >
+                                Pay
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          style={
+                            Object {
+                              "alignSelf": "center",
+                              "height": 48,
+                              "justifyContent": "center",
+                            }
+                          }
+                        >
+                          <View
+                            accessibilityLabel="CTA 1"
+                            accessibilityRole="button"
+                            accessibilityState={
+                              Object {
+                                "disabled": false,
+                              }
+                            }
+                            accessible={true}
+                            collapsable={false}
+                            focusable={true}
+                            hitSlop={
+                              Object {
+                                "bottom": 14,
+                                "left": 24,
+                                "right": 24,
+                                "top": 14,
+                              }
+                            }
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            onResponderGrant={[Function]}
+                            onResponderMove={[Function]}
+                            onResponderRelease={[Function]}
+                            onResponderTerminate={[Function]}
+                            onResponderTerminationRequest={[Function]}
+                            onStartShouldSetResponder={[Function]}
+                            onTouchEnd={[Function]}
+                            style={
+                              Object {
+                                "alignSelf": "flex-start",
+                              }
+                            }
+                          >
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "elevation": 0,
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "textAlignVertical": "center",
+                                  },
+                                  false,
+                                  Object {},
+                                  Object {
+                                    "transform": Array [
+                                      Object {
+                                        "scale": undefined,
+                                      },
+                                    ],
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                accessibilityElementsHidden={true}
+                                accessible={false}
+                                allowFontScaling={false}
+                                ellipsizeMode="tail"
+                                importantForAccessibility="no-hide-descendants"
+                                maxFontSizeMultiplier={1.3}
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontFamily": "Titillium Web",
+                                      "fontSize": 16,
+                                      "fontStyle": "normal",
+                                      "fontWeight": "700",
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "color": undefined,
+                                    },
+                                  ]
+                                }
+                              >
+                                CTA 1
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessagePaymentItem.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessagePaymentItem.test.tsx.snap
new file mode 100644
index 00000000000..83396698630
--- /dev/null
+++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/MessagePaymentItem.test.tsx.snap
@@ -0,0 +1,1632 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessagePaymentItem component Should match the snapshot for a loading item 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 24,
+                            }
+                          }
+                        />
+                        <View
+                          accessible={false}
+                          style={
+                            Object {
+                              "alignItems": "center",
+                              "backgroundColor": "#FFFFFF",
+                              "borderColor": "#E8EBF1",
+                              "borderCurve": "continuous",
+                              "borderRadius": 8,
+                              "borderWidth": 1,
+                              "flexDirection": "row",
+                              "justifyContent": "space-between",
+                              "paddingHorizontal": 16,
+                              "paddingVertical": 16,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                              }
+                            }
+                          >
+                            <View
+                              collapsable={false}
+                              style={
+                                Object {
+                                  "opacity": 0.5,
+                                }
+                              }
+                            >
+                              <View
+                                height={16}
+                                radius={8}
+                                style={
+                                  Object {
+                                    "backgroundColor": "#efefef",
+                                    "borderRadius": 8,
+                                    "height": 16,
+                                    "width": 179,
+                                  }
+                                }
+                                width={179}
+                              />
+                            </View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 4,
+                                }
+                              }
+                            />
+                            <View
+                              collapsable={false}
+                              style={
+                                Object {
+                                  "opacity": 0.5,
+                                }
+                              }
+                            >
+                              <View
+                                height={13}
+                                radius={8}
+                                style={
+                                  Object {
+                                    "backgroundColor": "#efefef",
+                                    "borderRadius": 8,
+                                    "height": 13,
+                                    "width": 121,
+                                  }
+                                }
+                                width={121}
+                              />
+                            </View>
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "marginLeft": 16,
+                              }
+                            }
+                          >
+                            <View
+                              collapsable={false}
+                              style={
+                                Object {
+                                  "opacity": 0.5,
+                                }
+                              }
+                            >
+                              <View
+                                height={16}
+                                radius={8}
+                                style={
+                                  Object {
+                                    "backgroundColor": "#efefef",
+                                    "borderRadius": 8,
+                                    "height": 16,
+                                    "width": 62,
+                                  }
+                                }
+                                width={62}
+                              />
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessagePaymentItem component Should match the snapshot for a payable item 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={2}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 24,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Due date 23/11/2023
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                Causale
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                accessibilityLabel="0.99 €"
+                                allowFontScaling={false}
+                                color="blue"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                0.99 €
+                              </Text>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessagePaymentItem component Should match the snapshot for a processed item 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={3}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 24,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Notice code
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                n1
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#F4F5F8",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#555C70",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Revoked
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/OrganizationHeader.test.tsx.snap b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/OrganizationHeader.test.tsx.snap
index 8ccc1da6e7c..980f17f7fd2 100644
--- a/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/OrganizationHeader.test.tsx.snap
+++ b/ts/features/messages/components/MessageDetail/__tests__/__snapshots__/OrganizationHeader.test.tsx.snap
@@ -89,17 +89,18 @@ exports[`OrganizationHeader component should match the snapshot 1`] = `
     }
   >
     <View
+      accessibilityIgnoresInvertColors={true}
       style={
         Array [
           Object {
             "borderColor": "rgba(14,15,19,0.1)",
+            "borderCurve": "continuous",
             "borderWidth": 1,
             "overflow": "hidden",
-            "resizeMode": "contain",
           },
           Object {
             "backgroundColor": "#FFFFFF",
-            "borderRadius": 22,
+            "borderRadius": 8,
             "height": 44,
             "padding": 6,
             "width": 44,
@@ -107,20 +108,37 @@ exports[`OrganizationHeader component should match the snapshot 1`] = `
         ]
       }
     >
-      <Image
-        onError={[Function]}
-        source={
-          Object {
-            "testUri": "../../../img/test/logo.png",
-          }
-        }
+      <View
         style={
-          Object {
-            "height": "100%",
-            "width": "100%",
-          }
+          Array [
+            Object {
+              "backgroundColor": "#FFFFFF",
+              "borderCurve": "continuous",
+              "overflow": "hidden",
+            },
+            Object {
+              "borderRadius": 2,
+            },
+          ]
         }
-      />
+      >
+        <Image
+          accessibilityIgnoresInvertColors={true}
+          onError={[Function]}
+          source={
+            Object {
+              "testUri": "../../../img/test/logo.png",
+            }
+          }
+          style={
+            Object {
+              "height": "100%",
+              "resizeMode": "contain",
+              "width": "100%",
+            }
+          }
+        />
+      </View>
     </View>
   </View>
 </View>
diff --git a/ts/features/messages/components/MessageDetail/index.tsx b/ts/features/messages/components/MessageDetail/index.tsx
index 245dc7c0bad..ea1c19bb098 100644
--- a/ts/features/messages/components/MessageDetail/index.tsx
+++ b/ts/features/messages/components/MessageDetail/index.tsx
@@ -16,16 +16,13 @@ import I18n from "../../../../i18n";
 import { OrganizationFiscalCode } from "../../../../../definitions/backend/OrganizationFiscalCode";
 import { ServiceMetadata } from "../../../../../definitions/backend/ServiceMetadata";
 import { ThirdPartyMessageWithContent } from "../../../../../definitions/backend/ThirdPartyMessageWithContent";
-import { LegacyMessageAttachments } from "../LegacyMessageAttachments";
 import { useIOSelector } from "../../../../store/hooks";
 import {
   messageMarkdownSelector,
   messageTitleSelector,
   thirdPartyFromIdSelector
 } from "../../store/reducers/thirdPartyById";
-
-import { UIAttachment, UIMessage, UIMessageDetails } from "../../types";
-import { attachmentsFromThirdPartyMessage } from "../../store/reducers/transformers";
+import { UIMessage, UIMessageDetails, UIMessageId } from "../../types";
 import { UIService } from "../../../../store/reducers/entities/services/types";
 import variables from "../../../../theme/variables";
 import { cleanMarkdownFromCTAs } from "../../utils/messages";
@@ -38,11 +35,13 @@ import {
 } from "../../../../navigation/params/AppParamsList";
 import StatusContent from "../../../../components/SectionStatus/StatusContent";
 import { MESSAGES_ROUTES } from "../../navigation/routes";
+import { ThirdPartyAttachment } from "../../../../../definitions/backend/ThirdPartyAttachment";
+import { LegacyMessageAttachments } from "./LegacyMessageAttachments";
 import CtaBar from "./CtaBar";
 import { RemoteContentBanner } from "./RemoteContentBanner";
 import { HeaderDueDateBar } from "./HeaderDueDateBar";
 import MessageContent from "./Content";
-import MessageMarkdown from "./MessageMarkdown";
+import { MessageMarkdown } from "./MessageMarkdown";
 
 const styles = StyleSheet.create({
   webview: {
@@ -157,14 +156,13 @@ const MessageDetailsComponent = ({
 
   const serviceIdOpt = service?.id;
   const openAttachment = useCallback(
-    (attachment: UIAttachment) => {
+    (attachment: ThirdPartyAttachment) => {
       navigation.navigate(MESSAGES_ROUTES.MESSAGES_NAVIGATOR, {
         screen: MESSAGES_ROUTES.MESSAGE_DETAIL_ATTACHMENT,
         params: {
           messageId,
           serviceId: serviceIdOpt,
-          attachmentId: attachment.id,
-          isPN: false
+          attachmentId: attachment.id
         }
       });
     },
@@ -172,18 +170,21 @@ const MessageDetailsComponent = ({
   );
 
   const renderThirdPartyAttachments = useCallback(
-    (thirdPartyMessage: ThirdPartyMessageWithContent): React.ReactNode => {
+    (
+      messageId: UIMessageId,
+      thirdPartyMessage: ThirdPartyMessageWithContent
+    ): React.ReactNode => {
       // In order not to break or refactor existing PN code, the backend
       // model for third party attachments is converted into in-app
       // model for attachments when the user generates the request. This
       // is not a speed intensive operation nor a memory consuming task,
       // since the attachment count should be negligible
-      const maybeThirdPartyMessageAttachments =
-        attachmentsFromThirdPartyMessage(thirdPartyMessage);
-      return O.isSome(maybeThirdPartyMessageAttachments) ? (
+      const attachmentsOpt = thirdPartyMessage.third_party_message.attachments;
+      return attachmentsOpt ? (
         <View style={IOStyles.horizontalContentPadding}>
           <LegacyMessageAttachments
-            attachments={maybeThirdPartyMessageAttachments.value}
+            attachments={attachmentsOpt}
+            messageId={messageId}
             openPreview={openAttachment}
           />
         </View>
@@ -244,7 +245,7 @@ const MessageDetailsComponent = ({
               _ => renderThirdPartyAttachmentsLoading(),
               _ => renderThirdPartyAttachmentsError(),
               thirdPartyMessage =>
-                renderThirdPartyAttachments(thirdPartyMessage),
+                renderThirdPartyAttachments(messageId, thirdPartyMessage),
               _ => renderThirdPartyAttachmentsLoading(),
               _ => renderThirdPartyAttachmentsLoading(),
               _ => renderThirdPartyAttachmentsError()
diff --git a/ts/features/messages/components/MessageList/__tests__/__snapshots__/Item.test.tsx.snap b/ts/features/messages/components/MessageList/__tests__/__snapshots__/Item.test.tsx.snap
index 1718022c537..899338b3e38 100644
--- a/ts/features/messages/components/MessageList/__tests__/__snapshots__/Item.test.tsx.snap
+++ b/ts/features/messages/components/MessageList/__tests__/__snapshots__/Item.test.tsx.snap
@@ -471,11 +471,23 @@ exports[`MessageList Item component when \`isSelectionModeEnabled\` is true and
           }
           width={10}
         >
-          <RNSVGGroup>
+          <RNSVGGroup
+            fill={
+              Object {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
             <RNSVGCircle
               cx="50%"
               cy="50%"
-              fill={4278219750}
+              fill={
+                Object {
+                  "payload": 4278219750,
+                  "type": 0,
+                }
+              }
               propList={
                 Array [
                   "fill",
@@ -545,7 +557,6 @@ exports[`MessageList Item component when \`isSelectionModeEnabled\` is true and
         align="xMidYMid"
         bbHeight={24}
         bbWidth={24}
-        color={4278219750}
         focusable={false}
         height={24}
         importantForAccessibility="no-hide-descendants"
@@ -568,19 +579,26 @@ exports[`MessageList Item component when \`isSelectionModeEnabled\` is true and
             },
           ]
         }
-        tintColor={4278219750}
+        tintColor="#0073E6"
         vbHeight={22}
         vbWidth={22}
         width={24}
       >
-        <RNSVGGroup>
+        <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+        >
           <RNSVGPath
             clipRule={0}
             d="M19.25 0H2.75C1.23122 0 0 1.23122 0 2.75v16.5C0 20.7688 1.23122 22 2.75 22h16.5c1.5188 0 2.75-1.2312 2.75-2.75V2.75C22 1.23122 20.7688 0 19.25 0ZM1.83333 2.75c0-.50626.41041-.91667.91667-.91667h16.5c.5063 0 .9167.41041.9167.91667v16.5c0 .5063-.4104.9167-.9167.9167H2.75c-.50626 0-.91667-.4104-.91667-.9167V2.75Z"
             fill={
-              Array [
-                2,
-              ]
+              Object {
+                "type": 2,
+              }
             }
             fillRule={0}
             propList={
@@ -827,11 +845,23 @@ exports[`MessageList Item component when \`isSelectionModeEnabled\` is true and
           }
           width={10}
         >
-          <RNSVGGroup>
+          <RNSVGGroup
+            fill={
+              Object {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
             <RNSVGCircle
               cx="50%"
               cy="50%"
-              fill={4278219750}
+              fill={
+                Object {
+                  "payload": 4278219750,
+                  "type": 0,
+                }
+              }
               propList={
                 Array [
                   "fill",
@@ -901,7 +931,6 @@ exports[`MessageList Item component when \`isSelectionModeEnabled\` is true and
         align="xMidYMid"
         bbHeight={24}
         bbWidth={24}
-        color={4278219750}
         focusable={false}
         height={24}
         importantForAccessibility="no-hide-descendants"
@@ -924,18 +953,25 @@ exports[`MessageList Item component when \`isSelectionModeEnabled\` is true and
             },
           ]
         }
-        tintColor={4278219750}
+        tintColor="#0073E6"
         vbHeight={22}
         vbWidth={22}
         width={24}
       >
-        <RNSVGGroup>
+        <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+        >
           <RNSVGPath
             d="m10.8251 15.2047-.0323-.0311 7.2435-7.24342-1.7369-1.73684-7.27371 7.27376-3.50128-3.3812-1.63504 1.6931 5.30066 5.1188 1.63507-1.6931Z"
             fill={
-              Array [
-                2,
-              ]
+              Object {
+                "type": 2,
+              }
             }
             propList={
               Array [
@@ -947,9 +983,9 @@ exports[`MessageList Item component when \`isSelectionModeEnabled\` is true and
             clipRule={0}
             d="M2.75 0h16.5C20.7688 0 22 1.23122 22 2.75v16.5c0 1.5188-1.2312 2.75-2.75 2.75H2.75C1.23122 22 0 20.7688 0 19.25V2.75C0 1.23122 1.23122 0 2.75 0Zm0 1.83333c-.50626 0-.91667.41041-.91667.91667v16.5c0 .5063.41041.9167.91667.9167h16.5c.5063 0 .9167-.4104.9167-.9167V2.75c0-.50626-.4104-.91667-.9167-.91667H2.75Z"
             fill={
-              Array [
-                2,
-              ]
+              Object {
+                "type": 2,
+              }
             }
             fillRule={0}
             propList={
@@ -962,9 +998,9 @@ exports[`MessageList Item component when \`isSelectionModeEnabled\` is true and
           <RNSVGPath
             d="m10.8251 15.2047-.0323-.0311 7.2435-7.24342-1.7369-1.73684-7.27371 7.27376-3.50128-3.3812-1.63504 1.6931 5.30066 5.1188 1.63507-1.6931Z"
             fill={
-              Array [
-                2,
-              ]
+              Object {
+                "type": 2,
+              }
             }
             propList={
               Array [
@@ -976,9 +1012,9 @@ exports[`MessageList Item component when \`isSelectionModeEnabled\` is true and
             clipRule={0}
             d="M2.75 0h16.5C20.7688 0 22 1.23122 22 2.75v16.5c0 1.5188-1.2312 2.75-2.75 2.75H2.75C1.23122 22 0 20.7688 0 19.25V2.75C0 1.23122 1.23122 0 2.75 0Zm0 1.83333c-.50626 0-.91667.41041-.91667.91667v16.5c0 .5063.41041.9167.91667.9167h16.5c.5063 0 .9167-.4104.9167-.9167V2.75c0-.50626-.4104-.91667-.9167-.91667H2.75Z"
             fill={
-              Array [
-                2,
-              ]
+              Object {
+                "type": 2,
+              }
             }
             fillRule={0}
             propList={
@@ -1225,11 +1261,23 @@ exports[`MessageList Item component when category is LEGAL_MESSAGE should match
           }
           width={10}
         >
-          <RNSVGGroup>
+          <RNSVGGroup
+            fill={
+              Object {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
             <RNSVGCircle
               cx="50%"
               cy="50%"
-              fill={4278219750}
+              fill={
+                Object {
+                  "payload": 4278219750,
+                  "type": 0,
+                }
+              }
               propList={
                 Array [
                   "fill",
@@ -1514,11 +1562,23 @@ exports[`MessageList Item component when category is PN should match the snapsho
           }
           width={10}
         >
-          <RNSVGGroup>
+          <RNSVGGroup
+            fill={
+              Object {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
             <RNSVGCircle
               cx="50%"
               cy="50%"
-              fill={4278219750}
+              fill={
+                Object {
+                  "payload": 4278219750,
+                  "type": 0,
+                }
+              }
               propList={
                 Array [
                   "fill",
@@ -1807,11 +1867,23 @@ exports[`MessageList Item component when category=EU_COVID_CERT and rptId matche
           }
           width={10}
         >
-          <RNSVGGroup>
+          <RNSVGGroup
+            fill={
+              Object {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
             <RNSVGCircle
               cx="50%"
               cy="50%"
-              fill={4278219750}
+              fill={
+                Object {
+                  "payload": 4278219750,
+                  "type": 0,
+                }
+              }
               propList={
                 Array [
                   "fill",
@@ -1885,7 +1957,6 @@ exports[`MessageList Item component when category=EU_COVID_CERT and rptId matche
         align="xMidYMid"
         bbHeight={20}
         bbWidth={20}
-        color={4294967295}
         focusable={false}
         height={20}
         importantForAccessibility="no-hide-descendants"
@@ -1908,19 +1979,26 @@ exports[`MessageList Item component when category=EU_COVID_CERT and rptId matche
             },
           ]
         }
-        tintColor={4294967295}
+        tintColor="#FFFFFF"
         vbHeight={24}
         vbWidth={24}
         width={20}
       >
-        <RNSVGGroup>
+        <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+        >
           <RNSVGPath
             clipRule={0}
             d="M0 3a3 3 0 0 1 3-3h5a3 3 0 0 1 3 3v5a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3Zm3-1a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3ZM0 16a3 3 0 0 1 3-3h5a3 3 0 0 1 3 3v5a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3v-5Zm3-1a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3ZM16 0a3 3 0 0 0-3 3v5a3 3 0 0 0 3 3h5a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3h-5Zm-1 3a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-5a1 1 0 0 1-1-1V3Zm-1.5 13.681a.5.5 0 0 1-.5-.5V13.5a.5.5 0 0 1 .5-.5h2.637a.5.5 0 0 1 .5.5v3.181H13.5Zm6.819 0h-3.682v3.637H13.5a.5.5 0 0 0-.5.5V23.5a.5.5 0 0 0 .5.5h3.137v-3.681h3.681V24H23.5a.5.5 0 0 0 .5-.5v-3.181h-3.681v-3.637Zm0 0V13.5a.5.5 0 0 1 .5-.5H23.5a.5.5 0 0 1 .5.5v3.181h-3.681ZM5 4a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5ZM4 18a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1ZM18 4a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-1Z"
             fill={
-              Array [
-                2,
-              ]
+              Object {
+                "type": 2,
+              }
             }
             fillRule={0}
             propList={
@@ -2167,11 +2245,23 @@ exports[`MessageList Item component when category=GENERIC and rptId matches=fals
           }
           width={10}
         >
-          <RNSVGGroup>
+          <RNSVGGroup
+            fill={
+              Object {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
             <RNSVGCircle
               cx="50%"
               cy="50%"
-              fill={4278219750}
+              fill={
+                Object {
+                  "payload": 4278219750,
+                  "type": 0,
+                }
+              }
               propList={
                 Array [
                   "fill",
@@ -2456,11 +2546,23 @@ exports[`MessageList Item component when category=PAYMENT and rptId matches=fals
           }
           width={10}
         >
-          <RNSVGGroup>
+          <RNSVGGroup
+            fill={
+              Object {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
             <RNSVGCircle
               cx="50%"
               cy="50%"
-              fill={4278219750}
+              fill={
+                Object {
+                  "payload": 4278219750,
+                  "type": 0,
+                }
+              }
               propList={
                 Array [
                   "fill",
@@ -2745,11 +2847,23 @@ exports[`MessageList Item component when category=PAYMENT and rptId matches=true
           }
           width={10}
         >
-          <RNSVGGroup>
+          <RNSVGGroup
+            fill={
+              Object {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
             <RNSVGCircle
               cx="50%"
               cy="50%"
-              fill={4278219750}
+              fill={
+                Object {
+                  "payload": 4278219750,
+                  "type": 0,
+                }
+              }
               propList={
                 Array [
                   "fill",
@@ -3082,11 +3196,23 @@ exports[`MessageList Item component with all the flags set to false should match
           }
           width={10}
         >
-          <RNSVGGroup>
+          <RNSVGGroup
+            fill={
+              Object {
+                "payload": 4278190080,
+                "type": 0,
+              }
+            }
+          >
             <RNSVGCircle
               cx="50%"
               cy="50%"
-              fill={4278219750}
+              fill={
+                Object {
+                  "payload": 4278219750,
+                  "type": 0,
+                }
+              }
               propList={
                 Array [
                   "fill",
diff --git a/ts/features/messages/components/MessageList/helpers.tsx b/ts/features/messages/components/MessageList/helpers.tsx
index 2cd11875991..f86a29af7d2 100644
--- a/ts/features/messages/components/MessageList/helpers.tsx
+++ b/ts/features/messages/components/MessageList/helpers.tsx
@@ -37,12 +37,12 @@ type RenderEmptyListProps = {
 };
 export const renderEmptyList =
   ({ error, EmptyComponent }: RenderEmptyListProps) =>
-  () => {
+  (): EmptyComponent => {
     if (error !== undefined) {
       return <ErrorLoadingComponent />;
     }
     if (EmptyComponent) {
-      return <EmptyComponent />;
+      return EmptyComponent;
     }
     return null;
   };
diff --git a/ts/features/messages/components/MessageList/index.tsx b/ts/features/messages/components/MessageList/index.tsx
index 81c1b93d90e..19d1b6c2ce0 100644
--- a/ts/features/messages/components/MessageList/index.tsx
+++ b/ts/features/messages/components/MessageList/index.tsx
@@ -12,7 +12,7 @@ import {
   Vibration
 } from "react-native";
 import { connect } from "react-redux";
-
+import { useFocusEffect } from "@react-navigation/native";
 import { maximumItemsFromAPI, pageSize } from "../../../../config";
 import { useTabItemPressWhenScreenActive } from "../../../../hooks/useTabItemPressWhenScreenActive";
 import I18n from "../../../../i18n";
@@ -39,7 +39,6 @@ import customVariables, {
   VIBRATION_LONG_PRESS_DURATION
 } from "../../../../theme/variables";
 import { useOnFirstRender } from "../../../../utils/hooks/useOnFirstRender";
-import { useActionOnFocus } from "../../../../utils/hooks/useOnFocus";
 import { showToast } from "../../../../utils/showToast";
 import {
   EmptyComponent,
@@ -156,6 +155,7 @@ const MessageList = ({
     O.Option<number>
   >(O.none);
 
+  const [lastUpdate, setLastUpdate] = useState<Date>(new Date());
   const [isRefreshFromUser, setIsRefreshFromUser] = useState(false);
 
   const isLoadingPreviousOrAll = isLoadingPrevious || isReloadingAll;
@@ -167,26 +167,6 @@ const MessageList = ({
 
   useTabItemPressWhenScreenActive(() => scrollTo(0, true), true);
 
-  useOnFirstRender(
-    () => {
-      reloadAll();
-    },
-    () => shouldUseLoad && !didLoad
-  );
-
-  useActionOnFocus(() => {
-    // check if there are new messages when the component becomes focused
-    if (previousCursor) {
-      loadPreviousPage(previousCursor);
-    }
-  }, minimumRefreshInterval);
-
-  useEffect(() => {
-    if (error) {
-      showToast(I18n.t("global.genericError"), "warning");
-    }
-  }, [error]);
-
   const hasMessages = messages.length > 0;
   const scrollTo = (index: number, animated: boolean = false) => {
     if (flatListRef.current && hasMessages) {
@@ -256,6 +236,39 @@ const MessageList = ({
   const isLoadingOrRefreshingMessageList =
     isLoadingMore || isLoadingPreviousOrAll;
 
+  useOnFirstRender(
+    () => {
+      reloadAll();
+    },
+    () => shouldUseLoad && !didLoad
+  );
+
+  // check if there are new messages when the component becomes focused
+  useFocusEffect(
+    useCallback(() => {
+      const now = new Date();
+      const shouldRefreshDelay =
+        now.getTime() - lastUpdate.getTime() > minimumRefreshInterval;
+      if (shouldRefreshDelay && previousCursor) {
+        if (!isLoadingOrRefreshingMessageList) {
+          loadPreviousPage(previousCursor);
+        }
+        setLastUpdate(now);
+      }
+    }, [
+      isLoadingOrRefreshingMessageList,
+      lastUpdate,
+      loadPreviousPage,
+      previousCursor
+    ])
+  );
+
+  useEffect(() => {
+    if (error) {
+      showToast(I18n.t("global.genericError"), "warning");
+    }
+  }, [error]);
+
   const refreshControl = shouldUseLoad ? (
     <RefreshControl
       refreshing={shouldShowTopRefreshControl}
@@ -292,7 +305,7 @@ const MessageList = ({
         ListEmptyComponent={renderEmptyList({
           error,
           EmptyComponent: didLoad ? ListEmptyComponent : null
-        })}
+        })()}
         data={messages}
         initialNumToRender={pageSize}
         keyExtractor={(message: UIMessage): string => message.id}
@@ -314,7 +327,7 @@ const MessageList = ({
         onEndReached={onEndReached}
         onEndReachedThreshold={0.25}
         testID={testID}
-        ListFooterComponent={shouldShowFooterLoader && <Loader />}
+        ListFooterComponent={shouldShowFooterLoader ? <Loader /> : null}
       />
     </>
   );
diff --git a/ts/features/messages/components/MessageLoading.tsx b/ts/features/messages/components/MessageLoading.tsx
deleted file mode 100644
index 5f14544923d..00000000000
--- a/ts/features/messages/components/MessageLoading.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import { ActivityIndicator } from "react-native";
-import { IOColors } from "@pagopa/io-app-design-system";
-import I18n from "../../../i18n";
-import { Body } from "../../../components/core/typography/Body";
-import { InfoScreenComponent } from "../../../components/infoScreen/InfoScreenComponent";
-
-const indicator = (
-  <ActivityIndicator
-    color={IOColors.blue}
-    size={"large"}
-    accessible={false}
-    importantForAccessibility={"no-hide-descendants"}
-    accessibilityElementsHidden={true}
-  />
-);
-
-export const MessageLoading = (): React.ReactElement => (
-  <InfoScreenComponent
-    image={indicator}
-    title={I18n.t("features.messages.loading.title")}
-    body={<Body>{I18n.t("features.messages.loading.subtitle")}</Body>}
-  />
-);
diff --git a/ts/features/messages/components/PreconditionBottomSheet/PreconditionContent.tsx b/ts/features/messages/components/PreconditionBottomSheet/PreconditionContent.tsx
index 96dd89149aa..e3e2651f1c2 100644
--- a/ts/features/messages/components/PreconditionBottomSheet/PreconditionContent.tsx
+++ b/ts/features/messages/components/PreconditionBottomSheet/PreconditionContent.tsx
@@ -3,7 +3,7 @@ import { View } from "react-native";
 import Placeholder from "rn-placeholder";
 import { VSpacer } from "@pagopa/io-app-design-system";
 import customVariables from "../../../../theme/variables";
-import MessageMarkdown from "../MessageDetail/MessageMarkdown";
+import { MessageMarkdown } from "../MessageDetail/MessageMarkdown";
 
 type Props = {
   markdown: string;
diff --git a/ts/features/messages/components/__test__/__snapshots__/EmptyListComponent.test.tsx.snap b/ts/features/messages/components/__test__/__snapshots__/EmptyListComponent.test.tsx.snap
index 15098bd5d92..34d2fe8e1a6 100644
--- a/ts/features/messages/components/__test__/__snapshots__/EmptyListComponent.test.tsx.snap
+++ b/ts/features/messages/components/__test__/__snapshots__/EmptyListComponent.test.tsx.snap
@@ -65,7 +65,12 @@ exports[`EmptyListComponent matches the snapshot 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M49.903 21.105a1.93 1.93 0 0 0-2.501 1.154 41.963 41.963 0 0 0-2.678 14.563c0 1.093.87 1.98 1.943 1.98s1.942-.887 1.942-1.98a37.936 37.936 0 0 1 2.427-13.165 2.013 2.013 0 0 0-.048-1.515 1.95 1.95 0 0 0-1.085-1.037ZM52.922 11.818A30.391 30.391 0 0 0 50.826 15a2.011 2.011 0 0 0-.064 2.008 1.937 1.937 0 0 0 1.692 1.031 1.936 1.936 0 0 0 1.705-1.008 27.746 27.746 0 0 1 1.794-2.738 2.007 2.007 0 0 0-.337-2.74 1.917 1.917 0 0 0-2.694.265ZM104.938 11.076h1.942c1.073 0 1.943-.887 1.943-1.98 0-1.094-.87-1.98-1.943-1.98h-1.942c-1.073 0-1.943.886-1.943 1.98 0 1.093.87 1.98 1.943 1.98ZM116.592 7.115h-1.943c-1.072 0-1.942.887-1.942 1.981 0 1.093.87 1.98 1.942 1.98h1.943c1.072 0 1.943-.887 1.943-1.98 0-1.094-.871-1.98-1.943-1.98ZM110.765 11.076c-1.073 0-1.942.887-1.942 1.98v1.98c0 1.095.869 1.982 1.942 1.982s1.942-.887 1.942-1.981v-1.98c0-1.094-.869-1.981-1.942-1.981ZM110.765 7.115c1.073 0 1.942-.887 1.942-1.98v-1.98c0-1.095-.869-1.982-1.942-1.982s-1.942.887-1.942 1.981v1.98c0 1.094.869 1.981 1.942 1.981ZM9.763 94.254H7.82c-1.073 0-1.942.888-1.942 1.981s.87 1.98 1.942 1.98h1.943c1.072 0 1.941-.887 1.941-1.98s-.87-1.98-1.941-1.98ZM21.416 96.235c0-1.093-.869-1.98-1.942-1.98h-1.942c-1.073 0-1.943.887-1.943 1.98s.87 1.98 1.943 1.98h1.942c1.073 0 1.942-.887 1.942-1.98ZM11.704 102.177c0 1.093.87 1.98 1.943 1.98 1.072 0 1.942-.887 1.942-1.98v-1.981c0-1.093-.87-1.98-1.942-1.98-1.073 0-1.943.887-1.943 1.98v1.981ZM13.647 88.313c-1.073 0-1.943.887-1.943 1.98v1.981c0 1.094.87 1.98 1.943 1.98 1.072 0 1.942-.886 1.942-1.98v-1.98c0-1.094-.87-1.98-1.942-1.98ZM102.995 108.118h-1.942c-1.073 0-1.942.886-1.942 1.98 0 1.094.87 1.98 1.942 1.98h1.942c1.073 0 1.943-.886 1.943-1.98 0-1.094-.87-1.98-1.943-1.98ZM110.765 112.078h1.942c1.073 0 1.942-.886 1.942-1.98 0-1.094-.869-1.98-1.942-1.98h-1.942c-1.073 0-1.942.886-1.942 1.98 0 1.094.869 1.98 1.942 1.98ZM104.938 116.039c0 1.094.87 1.981 1.942 1.981 1.073 0 1.943-.887 1.943-1.981v-1.98c0-1.094-.87-1.981-1.943-1.981-1.072 0-1.942.887-1.942 1.981v1.98ZM106.88 102.177c-1.072 0-1.942.886-1.942 1.98v1.981c0 1.093.87 1.98 1.942 1.98 1.073 0 1.943-.887 1.943-1.98v-1.981c0-1.094-.87-1.98-1.943-1.98Z"
-        fill={4278240714}
+        fill={
+          Object {
+            "payload": 4278240714,
+            "type": 0,
+          }
+        }
         fillRule={0}
         propList={
           Array [
@@ -77,7 +82,12 @@ exports[`EmptyListComponent matches the snapshot 1`] = `
       <RNSVGPath
         clipRule={0}
         d="M107.445 67.968h1.498c5.367.202 9.615 4.697 9.615 10.173 0 5.475-4.248 9.97-9.615 10.172H88.185c-3.179-.039-6.066-1.894-7.47-4.803l-4.912 15.024v13.544c0 4.375-3.479 7.922-7.77 7.922h-15.54c-4.29 0-7.769-3.547-7.769-7.922V98.534L39.08 81.267C23.72 74.89 13.67 59.673 13.647 42.764c0-.682.017-1.338.046-1.981h-3.202c-4.781-.101-8.581-4.126-8.498-9.002-.048-4.116 2.665-7.735 6.573-8.77-.012-.198-.018-.396-.018-.593-.111-6.136 4.666-11.208 10.683-11.342 2.314.013 4.555.818 6.365 2.285C33.248 5.567 43.62 1.183 54.436 1.173c1.207 0 2.405.066 3.574.177a15.64 15.64 0 0 1 4.497 0c1.19-.12 2.387-.18 3.584-.177 13.994-.01 27.015 7.3 34.489 19.363 7.474 12.063 8.356 27.192 2.336 40.073a11.394 11.394 0 0 1 4.529 7.359Zm-8.054-9.019a37.545 37.545 0 0 0 3.604-16.185c-.032-18.55-13.307-34.31-31.285-37.147 8.265 6.86 13.804 20.94 13.804 37.147 0 15.878-5.366 30.16-13.794 37.145a36.056 36.056 0 0 0 8.13-2.262c.578-3.449 3.088-6.23 6.41-7.104-.012-.2-.017-.397-.017-.594-.112-6.136 4.665-11.208 10.683-11.342a9.98 9.98 0 0 1 2.465.342ZM72.46 96.235H62.206V84.2c.042-.005.084-.006.127-.007a.887.887 0 0 0 .186-.017c1.165.111 2.366.177 3.572.177a39.855 39.855 0 0 0 10.751-1.518l-4.38 13.4ZM62.251 5.301l-.103-.014a11.782 11.782 0 0 0-3.768 0c-.037.007-.073.011-.11.014-7.75 1.3-14.66 10.294-17.704 23.005a10.403 10.403 0 0 1-1.327 7.922 65.224 65.224 0 0 0-.341 6.535c0 15.23 5.421 29.241 13.509 34.949.058.032.115.067.17.105a13.875 13.875 0 0 0 5.694 2.408l.109.014c1.247.202 2.52.202 3.768 0l.118-.016a13.896 13.896 0 0 0 5.684-2.4 2.07 2.07 0 0 1 .177-.11c8.084-5.717 13.502-19.724 13.502-34.95 0-19.234-8.507-35.666-19.379-37.462ZM37.925 23.323a9.277 9.277 0 0 0-6.668-2.886h-1.497a11.638 11.638 0 0 0-1.546-4.085C33.777 10.617 41 6.857 48.819 5.626c-5.209 4.722-8.988 10.861-10.893 17.697ZM10.38 26.735c-2.597.154-4.596 2.396-4.502 5.046-.085 2.69 1.976 4.942 4.613 5.04h20.758c3.255-.114 5.806-2.891 5.706-6.21.1-3.32-2.451-6.098-5.706-6.213h-3.277c-1.073 0-1.943-.887-1.943-1.98.114-3.949-2.925-7.249-6.798-7.381-3.872.132-6.911 3.432-6.798 7.381.01.64.097 1.276.26 1.893.15.607.008 1.25-.38 1.734a1.924 1.924 0 0 1-1.59.726 5.062 5.062 0 0 1-.343-.036Zm7.152 16.029c0-.686.017-1.341.048-1.981h13.669a9.043 9.043 0 0 0 3.842-.866c-.04.95-.078 1.902-.078 2.846 0 15.88 5.366 30.159 13.804 37.146C30.84 77.073 17.565 61.31 17.532 42.763ZM58.03 84.178a35.23 35.23 0 0 1-3.593.175 39.867 39.867 0 0 1-10.75-1.513l4.379 13.395H58.32V84.2c-.047-.006-.095-.008-.142-.01-.05-.002-.1-.004-.15-.011Zm10.003 31.861h-15.54c-2.145 0-3.884-1.773-3.884-3.961v-3.96h3.885c1.073 0 1.943-.887 1.943-1.98 0-1.095-.87-1.981-1.943-1.981h-3.885v-3.961h23.309v3.961H60.264c-1.073 0-1.943.886-1.943 1.981 0 1.093.87 1.98 1.943 1.98h11.654v3.96c0 2.188-1.74 3.961-3.885 3.961Zm20.152-31.686h20.767c3.213-.212 5.713-2.93 5.713-6.212 0-3.283-2.5-6-5.713-6.212h-3.276c-1.073 0-1.943-.887-1.943-1.98.161-2.581-1.099-5.04-3.268-6.38a6.701 6.701 0 0 0-7.06 0c-2.169 1.34-3.429 3.799-3.268 6.38.01.64.097 1.276.26 1.893.147.608.003 1.25-.389 1.733a1.976 1.976 0 0 1-1.59.726 4.979 4.979 0 0 1-.344-.035c-2.574.242-4.535 2.46-4.507 5.095.03 2.636 2.038 4.807 4.618 4.992Z"
-        fill={4278240714}
+        fill={
+          Object {
+            "payload": 4278240714,
+            "type": 0,
+          }
+        }
         fillRule={0}
         propList={
           Array [
diff --git a/ts/features/messages/hooks/__tests__/useAttachmentDownload.test.ts b/ts/features/messages/hooks/__tests__/useLegacyAttachmentDownload.test.ts
similarity index 69%
rename from ts/features/messages/hooks/__tests__/useAttachmentDownload.test.ts
rename to ts/features/messages/hooks/__tests__/useLegacyAttachmentDownload.test.ts
index e244adbf5fe..0c455ee86fb 100644
--- a/ts/features/messages/hooks/__tests__/useAttachmentDownload.test.ts
+++ b/ts/features/messages/hooks/__tests__/useLegacyAttachmentDownload.test.ts
@@ -1,5 +1,9 @@
 import { mockOtherAttachment } from "../../__mocks__/attachment";
-import { testableFunctions } from "../useAttachmentDownload";
+import {
+  attachmentContentType,
+  attachmentDisplayName
+} from "../../store/reducers/transformers";
+import { testableFunctions } from "../useLegacyAttachmentDownload";
 
 const path = "/tmp/path.pdf";
 
@@ -46,14 +50,18 @@ describe("Open attachment", function () {
       Promise.resolve()
     );
 
-    await taskCopyToMediaStore(mockOtherAttachment, path)();
+    const name = attachmentDisplayName(mockOtherAttachment);
+    const mimeType = attachmentContentType(mockOtherAttachment);
+    await taskCopyToMediaStore(name, mimeType, path)();
     expect(mockMediaCollectionCopyToMediaStore).toBeCalledTimes(1);
   });
 
   it("Should add an existing file to Downloads app", async () => {
     mockAndroidAddCompleteDownload.mockImplementation(() => Promise.resolve());
 
-    await taskAddCompleteDownload(mockOtherAttachment, path)();
+    const name = attachmentDisplayName(mockOtherAttachment);
+    const mimeType = attachmentContentType(mockOtherAttachment);
+    await taskAddCompleteDownload(name, mimeType, path)();
     expect(mockAndroidAddCompleteDownload).toBeCalledTimes(1);
   });
 
@@ -64,10 +72,9 @@ describe("Open attachment", function () {
     });
 
     it("Should display an options menu", async () => {
-      await taskDownloadFileIntoAndroidPublicFolder(
-        mockOtherAttachment,
-        path
-      )();
+      const name = attachmentDisplayName(mockOtherAttachment);
+      const mimeType = attachmentContentType(mockOtherAttachment);
+      await taskDownloadFileIntoAndroidPublicFolder(name, mimeType, path)();
       expect(mockIosPresentOptionsMenu).toBeCalledTimes(1);
     });
   });
@@ -86,10 +93,9 @@ describe("Open attachment", function () {
         Promise.resolve()
       );
 
-      await taskDownloadFileIntoAndroidPublicFolder(
-        mockOtherAttachment,
-        path
-      )();
+      const name = attachmentDisplayName(mockOtherAttachment);
+      const mimeType = attachmentContentType(mockOtherAttachment);
+      await taskDownloadFileIntoAndroidPublicFolder(name, mimeType, path)();
       expect(mockMediaCollectionCopyToMediaStore).toBeCalledTimes(1);
       expect(mockAndroidAddCompleteDownload).toBeCalledTimes(1);
       expect(mockShowToast).not.toHaveBeenCalled();
@@ -100,10 +106,9 @@ describe("Open attachment", function () {
         Promise.reject(new Error("Error on reject"))
       );
 
-      await taskDownloadFileIntoAndroidPublicFolder(
-        mockOtherAttachment,
-        path
-      )();
+      const name = attachmentDisplayName(mockOtherAttachment);
+      const mimeType = attachmentContentType(mockOtherAttachment);
+      await taskDownloadFileIntoAndroidPublicFolder(name, mimeType, path)();
       expect(mockShowToast).toBeCalledTimes(1);
     });
 
@@ -115,10 +120,9 @@ describe("Open attachment", function () {
         Promise.reject(new Error("Error on reject"))
       );
 
-      await taskDownloadFileIntoAndroidPublicFolder(
-        mockOtherAttachment,
-        path
-      )();
+      const name = attachmentDisplayName(mockOtherAttachment);
+      const mimeType = attachmentContentType(mockOtherAttachment);
+      await taskDownloadFileIntoAndroidPublicFolder(name, mimeType, path)();
       expect(mockShowToast).toBeCalledTimes(1);
     });
   });
diff --git a/ts/features/messages/hooks/useAttachmentDownload.tsx b/ts/features/messages/hooks/useAttachmentDownload.tsx
index ad51a2fa9a9..4fc373eff8f 100644
--- a/ts/features/messages/hooks/useAttachmentDownload.tsx
+++ b/ts/features/messages/hooks/useAttachmentDownload.tsx
@@ -1,186 +1,153 @@
-import { useCallback, useEffect, useState } from "react";
-import * as pot from "@pagopa/ts-commons/lib/pot";
-import ReactNativeBlobUtil from "react-native-blob-util";
+import { useCallback, useEffect } from "react";
 import RNFS from "react-native-fs";
-import { identity, pipe } from "fp-ts/lib/function";
-import * as E from "fp-ts/lib/Either";
-import * as TE from "fp-ts/lib/TaskEither";
-import i18n from "../../../i18n";
-import { useIODispatch, useIOSelector } from "../../../store/hooks";
-import { ContentTypeValues } from "../types/contentType";
-import { isAndroid } from "../../../utils/platform";
-import { showToast } from "../../../utils/showToast";
+import { IOToast } from "@pagopa/io-app-design-system";
+import { useIODispatch, useIOSelector, useIOStore } from "../../../store/hooks";
+import {
+  downloadedMessageAttachmentSelector,
+  hasErrorOccourredOnRequestedDownloadSelector,
+  isDownloadingMessageAttachmentSelector,
+  isRequestedAttachmentDownloadSelector
+} from "../store/reducers/downloads";
+import { UIMessageId } from "../types";
 import {
   cancelPreviousAttachmentDownload,
+  clearRequestedAttachmentDownload,
   downloadAttachment
 } from "../store/actions";
-import { UIAttachment } from "../types";
-import { downloadPotForMessageAttachmentSelector } from "../store/reducers/downloads";
-import { isTestEnv } from "../../../utils/environment";
-import { trackPNAttachmentDownloadFailure } from "../../pn/analytics";
+import { MESSAGES_ROUTES } from "../navigation/routes";
+import { ServiceId } from "../../../../definitions/backend/ServiceId";
+import { ThirdPartyAttachment } from "../../../../definitions/backend/ThirdPartyAttachment";
+import { attachmentDisplayName } from "../store/reducers/transformers";
+import I18n from "../../../i18n";
+import {
+  trackPNAttachmentDownloadFailure,
+  trackPNAttachmentOpening
+} from "../../pn/analytics";
 import { trackThirdPartyMessageAttachmentShowPreview } from "../analytics";
+import PN_ROUTES from "../../pn/navigation/routes";
+import NavigationService from "../../../navigation/NavigationService";
 
-const taskCopyToMediaStore = (
-  { displayName, contentType }: UIAttachment,
-  path: string
-) =>
-  TE.tryCatch(
-    () =>
-      ReactNativeBlobUtil.MediaCollection.copyToMediaStore(
-        {
-          name: displayName,
-          parentFolder: "",
-          mimeType: contentType
-        },
-        "Download",
-        path
-      ),
-    E.toError
-  );
-
-const taskAddCompleteDownload = (
-  { displayName, contentType }: UIAttachment,
-  path: string
-) =>
-  TE.tryCatch(
-    () =>
-      ReactNativeBlobUtil.android.addCompleteDownload({
-        mime: contentType,
-        title: displayName,
-        showNotification: true,
-        description: displayName,
-        path
-      }),
-    E.toError
-  );
-
-const taskDownloadFileIntoAndroidPublicFolder = (
-  attachment: UIAttachment,
-  path: string
-) =>
-  pipe(
-    isAndroid,
-    TE.fromPredicate(identity, () => undefined),
-    TE.mapLeft(() => ReactNativeBlobUtil.ios.presentOptionsMenu(path)),
-    TE.chain(_ =>
-      pipe(
-        taskCopyToMediaStore(attachment, path),
-        TE.chain(downloadFilePath =>
-          taskAddCompleteDownload(attachment, downloadFilePath)
-        ),
-        TE.mapLeft(_ =>
-          showToast(i18n.t("messageDetails.attachments.failing.details"))
-        )
-      )
-    )
-  );
-
-export const testableFunctions = isTestEnv
-  ? {
-      taskCopyToMediaStore,
-      taskAddCompleteDownload,
-      taskDownloadFileIntoAndroidPublicFolder
-    }
-  : undefined;
-
-// This hook has a different behaviour if the attachment is a PN
-// one or a generic third-party attachment.
-// When selecting a PN attachment, this hook takes care of downloading
-// the attachment before going into the attachment preview component.
-// If the attachment is from a third-party message (generic attachment)
-// then the download is delegated to another part of the application
 export const useAttachmentDownload = (
-  attachment: UIAttachment,
-  downloadAttachmentBeforePreview: boolean = false,
-  openPreview: (attachment: UIAttachment) => void
+  messageId: UIMessageId,
+  attachment: ThirdPartyAttachment,
+  isPN: boolean,
+  serviceId?: ServiceId,
+  onPreNavigate?: () => void
 ) => {
-  const [isLoading, setIsLoading] = useState(false);
+  const attachmentId = attachment.id;
+
   const dispatch = useIODispatch();
+  const store = useIOStore();
 
-  const downloadPot = useIOSelector(state =>
-    downloadPotForMessageAttachmentSelector(state, attachment)
+  const download = useIOSelector(state =>
+    downloadedMessageAttachmentSelector(state, messageId, attachmentId)
+  );
+  const isFetching = useIOSelector(state =>
+    isDownloadingMessageAttachmentSelector(state, messageId, attachmentId)
   );
 
-  const openAttachment = useCallback(async () => {
-    const download = pot.toUndefined(downloadPot);
-
-    if (pot.isError(downloadPot)) {
-      trackPNAttachmentDownloadFailure(attachment.category);
-      showToast(i18n.t("messageDetails.attachments.failing.details"));
-    } else if (download) {
-      const { path, attachment } = download;
-
-      if (attachment.contentType === ContentTypeValues.applicationPdf) {
-        openPreview(attachment);
+  const attachmentCategory = attachment.category;
+  const doNavigate = useCallback(() => {
+    dispatch(clearRequestedAttachmentDownload());
+    onPreNavigate?.();
+    if (isPN) {
+      trackPNAttachmentOpening(attachmentCategory);
+      NavigationService.navigate(MESSAGES_ROUTES.MESSAGES_NAVIGATOR, {
+        screen: PN_ROUTES.MAIN,
+        params: {
+          screen: PN_ROUTES.MESSAGE_ATTACHMENT,
+          params: {
+            attachmentId,
+            messageId
+          }
+        }
+      });
+    } else {
+      NavigationService.navigate(MESSAGES_ROUTES.MESSAGES_NAVIGATOR, {
+        screen: MESSAGES_ROUTES.MESSAGE_DETAIL_ATTACHMENT,
+        params: {
+          messageId,
+          serviceId,
+          attachmentId
+        }
+      });
+    }
+  }, [
+    attachmentCategory,
+    attachmentId,
+    dispatch,
+    isPN,
+    messageId,
+    onPreNavigate,
+    serviceId
+  ]);
+  const checkPathAndNavigate = useCallback(
+    async (downloadPath: string) => {
+      if (await RNFS.exists(downloadPath)) {
+        doNavigate();
       } else {
-        await taskDownloadFileIntoAndroidPublicFolder(attachment, path)();
+        dispatch(clearRequestedAttachmentDownload());
       }
-    }
-  }, [downloadPot, openPreview, attachment.category]);
-
-  useEffect(() => {
-    const wasLoading = isLoading;
-    const isStillLoading = pot.isLoading(downloadPot);
-
-    if (wasLoading && !isStillLoading) {
-      void openAttachment();
-    }
-    setIsLoading(isStillLoading);
-  }, [downloadPot, isLoading, setIsLoading, openAttachment]);
-
-  const downloadAttachmentIfNeeded = async () => {
-    if (pot.isLoading(downloadPot)) {
+    },
+    [dispatch, doNavigate]
+  );
+  const onModuleAttachmentPress = useCallback(async () => {
+    if (isFetching) {
       return;
     }
 
-    // Do not download the attachment for generic third party message
-    if (!downloadAttachmentBeforePreview) {
+    if (!isPN) {
       trackThirdPartyMessageAttachmentShowPreview();
-      openPreview(attachment);
-      return;
     }
 
-    await pipe(
-      downloadPot,
-      pot.toOption,
-      TE.fromOption(() => undefined),
-      TE.chain(download =>
-        TE.tryCatch(
-          () => RNFS.exists(download.path),
-          () => undefined
-        )
-      ),
-      TE.filterOrElse(identity, () => undefined),
-      TE.mapLeft(() => {
-        dispatch(
-          downloadAttachment.request({
-            ...attachment,
-            skipMixpanelTrackingOnFailure: false
-          })
-        );
-      }),
-      TE.chainW(() =>
-        TE.tryCatch(
-          () => {
-            // We must dispatch this action in order to cancel any
-            // other download that may be running (since we support
-            // selecting other attachments while cancelling the
-            // previous selected attachment's download)
-            dispatch(cancelPreviousAttachmentDownload());
-            return openAttachment();
-          },
-          () => undefined
-        )
-      )
-    )();
-  };
-
-  const onAttachmentSelect = () => {
-    void downloadAttachmentIfNeeded();
-  };
+    // Make sure to cancel whatever download may already be running
+    dispatch(cancelPreviousAttachmentDownload());
+
+    if (download && (await RNFS.exists(download.path))) {
+      doNavigate();
+    } else {
+      dispatch(
+        downloadAttachment.request({
+          attachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: isPN
+        })
+      );
+    }
+  }, [attachment, dispatch, download, doNavigate, isFetching, isPN, messageId]);
 
-  return {
-    downloadPot,
-    onAttachmentSelect
-  };
+  useEffect(() => {
+    const state = store.getState();
+    if (
+      download &&
+      isRequestedAttachmentDownloadSelector(state, messageId, attachmentId)
+    ) {
+      void checkPathAndNavigate(download.path);
+    } else if (
+      hasErrorOccourredOnRequestedDownloadSelector(
+        state,
+        messageId,
+        attachmentId
+      )
+    ) {
+      dispatch(clearRequestedAttachmentDownload());
+      if (isPN) {
+        trackPNAttachmentDownloadFailure(attachmentCategory);
+      }
+      IOToast.error(I18n.t("messageDetails.attachments.failing.details"));
+    }
+  }, [
+    attachmentCategory,
+    attachmentId,
+    checkPathAndNavigate,
+    dispatch,
+    doNavigate,
+    download,
+    isPN,
+    messageId,
+    store
+  ]);
+
+  const displayName = attachmentDisplayName(attachment);
+  return { displayName, isFetching, onModuleAttachmentPress };
 };
diff --git a/ts/features/messages/hooks/useLegacyAttachmentDownload.tsx b/ts/features/messages/hooks/useLegacyAttachmentDownload.tsx
new file mode 100644
index 00000000000..b6962dd6f6c
--- /dev/null
+++ b/ts/features/messages/hooks/useLegacyAttachmentDownload.tsx
@@ -0,0 +1,194 @@
+import { useCallback, useEffect, useState } from "react";
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import ReactNativeBlobUtil from "react-native-blob-util";
+import RNFS from "react-native-fs";
+import { identity, pipe } from "fp-ts/lib/function";
+import * as E from "fp-ts/lib/Either";
+import * as TE from "fp-ts/lib/TaskEither";
+import i18n from "../../../i18n";
+import { useIODispatch, useIOSelector } from "../../../store/hooks";
+import { ContentTypeValues } from "../types/contentType";
+import { isAndroid } from "../../../utils/platform";
+import { showToast } from "../../../utils/showToast";
+import {
+  cancelPreviousAttachmentDownload,
+  downloadAttachment
+} from "../store/actions";
+import { downloadPotForMessageAttachmentSelector } from "../store/reducers/downloads";
+import { isTestEnv } from "../../../utils/environment";
+import { trackPNAttachmentDownloadFailure } from "../../pn/analytics";
+import { trackThirdPartyMessageAttachmentShowPreview } from "../analytics";
+import { ThirdPartyAttachment } from "../../../../definitions/backend/ThirdPartyAttachment";
+import { UIMessageId } from "../types";
+import {
+  attachmentContentType,
+  attachmentDisplayName
+} from "../store/reducers/transformers";
+
+const taskCopyToMediaStore = (name: string, mimeType: string, path: string) =>
+  TE.tryCatch(
+    () =>
+      ReactNativeBlobUtil.MediaCollection.copyToMediaStore(
+        {
+          name,
+          parentFolder: "",
+          mimeType
+        },
+        "Download",
+        path
+      ),
+    E.toError
+  );
+
+const taskAddCompleteDownload = (name: string, mime: string, path: string) =>
+  TE.tryCatch(
+    () =>
+      ReactNativeBlobUtil.android.addCompleteDownload({
+        mime,
+        title: name,
+        showNotification: true,
+        description: name,
+        path
+      }),
+    E.toError
+  );
+
+const taskDownloadFileIntoAndroidPublicFolder = (
+  name: string,
+  mimeType: string,
+  path: string
+) =>
+  pipe(
+    isAndroid,
+    TE.fromPredicate(identity, () => undefined),
+    TE.mapLeft(() => ReactNativeBlobUtil.ios.presentOptionsMenu(path)),
+    TE.chain(_ =>
+      pipe(
+        taskCopyToMediaStore(name, mimeType, path),
+        TE.chain(downloadFilePath =>
+          taskAddCompleteDownload(name, mimeType, downloadFilePath)
+        ),
+        TE.mapLeft(_ =>
+          showToast(i18n.t("messageDetails.attachments.failing.details"))
+        )
+      )
+    )
+  );
+
+export const testableFunctions = isTestEnv
+  ? {
+      taskCopyToMediaStore,
+      taskAddCompleteDownload,
+      taskDownloadFileIntoAndroidPublicFolder
+    }
+  : undefined;
+
+// This hook has a different behaviour if the attachment is a PN
+// one or a generic third-party attachment.
+// When selecting a PN attachment, this hook takes care of downloading
+// the attachment before going into the attachment preview component.
+// If the attachment is from a third-party message (generic attachment)
+// then the download is delegated to another part of the application
+export const useLegacyAttachmentDownload = (
+  attachment: ThirdPartyAttachment,
+  messageId: UIMessageId,
+  downloadAttachmentBeforePreview: boolean = false,
+  openPreview: (attachment: ThirdPartyAttachment) => void
+) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const dispatch = useIODispatch();
+
+  const downloadPot = useIOSelector(state =>
+    downloadPotForMessageAttachmentSelector(state, messageId, attachment.id)
+  );
+
+  const openAttachment = useCallback(async () => {
+    const download = pot.toUndefined(downloadPot);
+
+    if (pot.isError(downloadPot)) {
+      trackPNAttachmentDownloadFailure(attachment.category);
+      showToast(i18n.t("messageDetails.attachments.failing.details"));
+    } else if (download) {
+      const { path, attachment } = download;
+
+      const contentType = attachmentContentType(attachment);
+      if (contentType === ContentTypeValues.applicationPdf) {
+        openPreview(attachment);
+      } else {
+        const name = attachmentDisplayName(attachment);
+        await taskDownloadFileIntoAndroidPublicFolder(
+          name,
+          contentType,
+          path
+        )();
+      }
+    }
+  }, [downloadPot, openPreview, attachment.category]);
+
+  useEffect(() => {
+    const wasLoading = isLoading;
+    const isStillLoading = pot.isLoading(downloadPot);
+
+    if (wasLoading && !isStillLoading) {
+      void openAttachment();
+    }
+    setIsLoading(isStillLoading);
+  }, [downloadPot, isLoading, setIsLoading, openAttachment]);
+
+  const downloadAttachmentIfNeeded = async () => {
+    if (pot.isLoading(downloadPot)) {
+      return;
+    }
+
+    // Do not download the attachment for generic third party message
+    if (!downloadAttachmentBeforePreview) {
+      trackThirdPartyMessageAttachmentShowPreview();
+      openPreview(attachment);
+      return;
+    }
+
+    await pipe(
+      downloadPot,
+      pot.toOption,
+      TE.fromOption(() => undefined),
+      TE.chain(download =>
+        TE.tryCatch(
+          () => RNFS.exists(download.path),
+          () => undefined
+        )
+      ),
+      TE.filterOrElse(identity, () => undefined),
+      TE.mapLeft(() => {
+        dispatch(
+          downloadAttachment.request({
+            attachment,
+            messageId,
+            skipMixpanelTrackingOnFailure: true
+          })
+        );
+      }),
+      TE.chainW(() =>
+        TE.tryCatch(
+          () => {
+            // We must dispatch this action in order to cancel any
+            // other download that may be running (since we support
+            // selecting other attachments while cancelling the
+            // previous selected attachment's download)
+            dispatch(cancelPreviousAttachmentDownload());
+            return openAttachment();
+          },
+          () => undefined
+        )
+      )
+    )();
+  };
+
+  const onAttachmentSelect = () => {
+    void downloadAttachmentIfNeeded();
+  };
+
+  return {
+    downloadPot,
+    onAttachmentSelect
+  };
+};
diff --git a/ts/features/messages/hooks/useMessageCalendar.ts b/ts/features/messages/hooks/useMessageCalendar.ts
new file mode 100644
index 00000000000..b7ffadc5e48
--- /dev/null
+++ b/ts/features/messages/hooks/useMessageCalendar.ts
@@ -0,0 +1,156 @@
+import { useCallback } from "react";
+import { Alert } from "react-native";
+import { Calendar } from "react-native-calendar-events";
+import { pipe } from "fp-ts/lib/function";
+import * as E from "fp-ts/lib/Either";
+import * as TE from "fp-ts/lib/TaskEither";
+import { IOToast } from "@pagopa/io-app-design-system";
+import I18n from "../../../i18n";
+import {
+  searchEventInCalendar,
+  convertLocalCalendarName,
+  saveEventToDeviceCalendarTask,
+  removeEventFromDeviceCalendarTask
+} from "../../../utils/calendar";
+import { useIODispatch, useIOSelector } from "../../../store/hooks";
+import { CalendarEvent } from "../../../store/reducers/entities/calendarEvents/calendarEventsByMessageId";
+import { preferredCalendarSelector } from "../../../store/reducers/persistedPreferences";
+import {
+  AddCalendarEventPayload,
+  addCalendarEvent,
+  removeCalendarEvent
+} from "../../../store/actions/calendarEvents";
+import { preferredCalendarSaveSuccess } from "../../../store/actions/persistedPreferences";
+import { UIMessageId } from "../types";
+
+export const useMessageCalendar = (messageId: UIMessageId) => {
+  const dispatch = useIODispatch();
+
+  const preferredCalendar = useIOSelector(preferredCalendarSelector);
+
+  const handleAddEventToCalendar = useCallback(
+    (calendarEvent: AddCalendarEventPayload) =>
+      dispatch(addCalendarEvent(calendarEvent)),
+    [dispatch]
+  );
+
+  const handleRemoveEventFromCalendar = useCallback(
+    (event: CalendarEvent) =>
+      dispatch(removeCalendarEvent({ messageId: event.messageId })),
+    [dispatch]
+  );
+
+  const setPreferredCalendar = useCallback(
+    (preferredCalendar: Calendar) =>
+      dispatch(
+        preferredCalendarSaveSuccess({
+          preferredCalendar
+        })
+      ),
+    [dispatch]
+  );
+
+  const onAddEventToCalendar = (
+    calendar: Calendar,
+    dueDate: Date,
+    title: string
+  ) => {
+    void pipe(
+      saveEventToDeviceCalendarTask(calendar.id, dueDate, title),
+      TE.map(eventId => {
+        IOToast.success(
+          I18n.t("messages.cta.reminderAddSuccess", {
+            title,
+            calendarTitle: convertLocalCalendarName(calendar.title)
+          })
+        );
+
+        // add event to the store
+        handleAddEventToCalendar({ messageId, eventId });
+      }),
+      TE.mapLeft(() => IOToast.error(I18n.t("messages.cta.reminderAddFailure")))
+    )();
+  };
+
+  const handleConfirmAddEventToCalendar = (
+    dueDate: Date,
+    eventId: string,
+    calendar: Calendar,
+    title: string
+  ) => {
+    Alert.alert(
+      I18n.t("messages.cta.reminderAlertTitle"),
+      I18n.t("messages.cta.reminderAlertDescription"),
+      [
+        {
+          text: I18n.t("global.buttons.cancel"),
+          style: "cancel"
+        },
+        {
+          text: I18n.t("messages.cta.reminderAlertKeep"),
+          style: "default",
+          onPress: () => {
+            // add event to the store
+            handleAddEventToCalendar({
+              messageId,
+              eventId
+            });
+          }
+        },
+        {
+          text: I18n.t("messages.cta.reminderAlertAdd"),
+          style: "default",
+          onPress: () => onAddEventToCalendar(calendar, dueDate, title)
+        }
+      ],
+      { cancelable: false }
+    );
+  };
+
+  const addEventToCalendar = (
+    dueDate: Date,
+    eventTitle: string,
+    preferredCalendar: Calendar
+  ) => {
+    void pipe(
+      TE.tryCatch(() => searchEventInCalendar(dueDate, eventTitle), E.toError),
+      TE.chain(TE.fromOption(() => new Error("Event not found"))),
+      TE.map(eventId =>
+        handleConfirmAddEventToCalendar(
+          dueDate,
+          eventId,
+          preferredCalendar,
+          eventTitle
+        )
+      ),
+      TE.mapLeft(() =>
+        onAddEventToCalendar(preferredCalendar, dueDate, eventTitle)
+      )
+    )();
+  };
+
+  const removeEventFromCalendar = (
+    calendarEvent: CalendarEvent | undefined
+  ) => {
+    void pipe(
+      calendarEvent?.eventId,
+      TE.fromNullable(Error("calendarEvent not defined")),
+      TE.chain(removeEventFromDeviceCalendarTask),
+      TE.map(eventId => {
+        IOToast.success(I18n.t("messages.cta.reminderRemoveSuccess"));
+
+        handleRemoveEventFromCalendar({ messageId, eventId });
+      }),
+      TE.mapLeft(() =>
+        IOToast.error(I18n.t("messages.cta.reminderRemoveFailure"))
+      )
+    )();
+  };
+
+  return {
+    preferredCalendar,
+    setPreferredCalendar,
+    addEventToCalendar,
+    removeEventFromCalendar
+  };
+};
diff --git a/ts/features/messages/hooks/useMessageOpening.tsx b/ts/features/messages/hooks/useMessageOpening.tsx
index c02fab36504..15f06a4fc86 100644
--- a/ts/features/messages/hooks/useMessageOpening.tsx
+++ b/ts/features/messages/hooks/useMessageOpening.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 import { View } from "react-native";
-import { useNavigation } from "@react-navigation/native";
 import { constNull, pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import { IOColors } from "@pagopa/io-app-design-system";
@@ -33,6 +32,7 @@ import {
 } from "../components/PreconditionBottomSheet/PreconditionContent";
 import { PreconditionFooter } from "../components/PreconditionBottomSheet/PreconditionFooter";
 import { MESSAGES_ROUTES } from "../navigation/routes";
+import { useIONavigation } from "../../../navigation/params/AppParamsList";
 
 const renderPreconditionHeader = (
   content: RemoteValue<ThirdPartyMessagePrecondition, Error>
@@ -88,7 +88,7 @@ const renderPreconditionFooter = (
 };
 
 export const useMessageOpening = () => {
-  const navigation = useNavigation();
+  const navigation = useIONavigation();
   const dispatch = useIODispatch();
 
   const pnSupported = useIOSelector(isPnSupportedSelector);
diff --git a/ts/features/messages/hooks/useMessageReminder.ts b/ts/features/messages/hooks/useMessageReminder.ts
new file mode 100644
index 00000000000..b2a9cf58522
--- /dev/null
+++ b/ts/features/messages/hooks/useMessageReminder.ts
@@ -0,0 +1,117 @@
+import { useEffect, useState } from "react";
+import { Alert } from "react-native";
+import { Calendar } from "react-native-calendar-events";
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/lib/Option";
+import * as TE from "fp-ts/lib/TaskEither";
+import I18n from "../../../i18n";
+import {
+  isEventInCalendar,
+  requestCalendarPermission
+} from "../../../utils/calendar";
+import { openAppSettings } from "../../../utils/appSettings";
+import { useIOSelector } from "../../../store/hooks";
+import { calendarEventByMessageIdSelector } from "../../../store/reducers/entities/calendarEvents/calendarEventsByMessageId";
+import { UIMessageId } from "../types";
+import { useMessageCalendar } from "./useMessageCalendar";
+
+export const useMessageReminder = (
+  messageId: UIMessageId,
+  selectCalendar: () => void
+) => {
+  const [isEventInDeviceCalendar, setIsEventInDeviceCalendar] =
+    useState<boolean>(false);
+
+  const calendarEvent = useIOSelector(state =>
+    calendarEventByMessageIdSelector(state, messageId)
+  );
+
+  const { addEventToCalendar, removeEventFromCalendar } =
+    useMessageCalendar(messageId);
+
+  /**
+   * Hook that checks if the event is in the device calendar
+   */
+  useEffect(() => {
+    void pipe(
+      calendarEvent,
+      O.fromNullable,
+      TE.fromOption(() => new Error("Event not found")),
+      TE.chain(event => isEventInCalendar(event.eventId)),
+      TE.map(setIsEventInDeviceCalendar),
+      TE.mapLeft(() => setIsEventInDeviceCalendar(false))
+    )();
+  }, [calendarEvent]);
+
+  const upsertReminder = async (
+    dueDate: Date,
+    subject: string,
+    preferredCalendar: Calendar | undefined
+  ) => {
+    const permissionGranted = await requestCalendarPermission();
+
+    // Authorized is false (denied, restricted or undetermined)
+    // If the user denied permission previously (not in this session)
+    // prompt an alert to inform that his calendar permissions could have been turned off
+    if (!permissionGranted) {
+      Alert.alert(
+        I18n.t("global.genericAlert"),
+        I18n.t("messages.cta.calendarPermDenied.title"),
+        [
+          {
+            text: I18n.t("messages.cta.calendarPermDenied.cancel"),
+            style: "cancel"
+          },
+          {
+            text: I18n.t("messages.cta.calendarPermDenied.ok"),
+            style: "default",
+            onPress: openAppSettings
+          }
+        ],
+        { cancelable: true }
+      );
+
+      return;
+    }
+
+    // If the event is in the calendar prompt an alert and ask for confirmation
+    if (isEventInDeviceCalendar) {
+      Alert.alert(
+        I18n.t("messages.cta.reminderRemoveRequest.title"),
+        undefined,
+        [
+          {
+            text: I18n.t("messages.cta.reminderRemoveRequest.cancel"),
+            style: "cancel"
+          },
+          {
+            text: I18n.t("messages.cta.reminderRemoveRequest.ok"),
+            style: "destructive",
+            onPress: () => removeEventFromCalendar(calendarEvent)
+          }
+        ],
+        { cancelable: false }
+      );
+
+      return;
+    }
+
+    if (preferredCalendar) {
+      const title = I18n.t("messages.cta.reminderTitle", {
+        title: subject
+      });
+
+      addEventToCalendar(dueDate, title, preferredCalendar);
+
+      return;
+    }
+
+    // Navigate to the screen to let the user select a calendar
+    selectCalendar();
+  };
+
+  return {
+    isEventInDeviceCalendar,
+    upsertReminder
+  };
+};
diff --git a/ts/features/messages/navigation/MessagesHomeTabNavigator.tsx b/ts/features/messages/navigation/MessagesHomeTabNavigator.tsx
index 91efe43dd76..eedf1bd910f 100644
--- a/ts/features/messages/navigation/MessagesHomeTabNavigator.tsx
+++ b/ts/features/messages/navigation/MessagesHomeTabNavigator.tsx
@@ -24,16 +24,17 @@ const MessagesHomeTabNavigator = () => (
   <Tab.Navigator
     initialRouteName={MessagesHomeTabRoutes.MESSAGES_INBOX}
     tabBarPosition="top"
-    tabBarOptions={{
-      style: {
+    screenOptions={{
+      lazy: true,
+      tabBarStyle: {
         elevation: 0
       },
-      activeTintColor: IOColors.blue,
-      inactiveTintColor: IOColors.bluegrey,
-      tabStyle: {
+      tabBarActiveTintColor: IOColors.blue,
+      tabBarInactiveTintColor: IOColors.bluegrey,
+      tabBarItemStyle: {
         height: 40
       },
-      labelStyle: {
+      tabBarLabelStyle: {
         ...makeFontStyleObject("SemiBold"),
         fontSize: Platform.OS === "android" ? 16 : undefined,
         fontWeight: Platform.OS === "android" ? "normal" : "bold",
@@ -41,7 +42,6 @@ const MessagesHomeTabNavigator = () => (
         height: 34
       }
     }}
-    lazy={true}
   >
     <Tab.Screen
       name={MessagesHomeTabRoutes.MESSAGES_INBOX}
diff --git a/ts/features/messages/navigation/MessagesNavigator.tsx b/ts/features/messages/navigation/MessagesNavigator.tsx
index 56680906c65..159515cfc3d 100644
--- a/ts/features/messages/navigation/MessagesNavigator.tsx
+++ b/ts/features/messages/navigation/MessagesNavigator.tsx
@@ -1,17 +1,19 @@
 import { createStackNavigator } from "@react-navigation/stack";
 import * as React from "react";
+import { useIOSelector } from "../../../store/hooks";
+import { isPnEnabledSelector } from "../../../store/reducers/backendStatus";
+import { isDesignSystemEnabledSelector } from "../../../store/reducers/persistedPreferences";
+import { isGestureEnabled } from "../../../utils/navigation";
 import { EUCovidCertStackNavigator } from "../../euCovidCert/navigation/navigator";
 import EUCOVIDCERT_ROUTES from "../../euCovidCert/navigation/routes";
-import MessageDetailScreen from "../screens/MessageDetailScreen";
-import { MessageRouterScreen } from "../screens/MessageRouterScreen";
 import { PnStackNavigator } from "../../pn/navigation/navigator";
 import PN_ROUTES from "../../pn/navigation/routes";
-import { useIOSelector } from "../../../store/hooks";
-import { isGestureEnabled } from "../../../utils/navigation";
-import { isPnEnabledSelector } from "../../../store/reducers/backendStatus";
 import { LegacyMessageDetailAttachment } from "../screens/LegacyMessageAttachment";
-import { isDesignSystemEnabledSelector } from "../../../store/reducers/persistedPreferences";
-import { MessageAttachment } from "../screens/MessageAttachment";
+import LegacyMessageDetailScreen from "../screens/LegacyMessageDetailScreen";
+import { MessageAttachmentScreen } from "../screens/MessageAttachmentScreen";
+import { MessageCalendarScreen } from "../screens/MessageCalendarScreen";
+import { MessageDetailsScreen } from "../screens/MessageDetailsScreen";
+import { MessageRouterScreen } from "../screens/MessageRouterScreen";
 import { MessagesParamsList } from "./params";
 import { MESSAGES_ROUTES } from "./routes";
 
@@ -24,54 +26,67 @@ export const MessagesStackNavigator = () => {
   return (
     <Stack.Navigator
       initialRouteName={MESSAGES_ROUTES.MESSAGE_ROUTER}
-      headerMode={"screen"}
-      screenOptions={{ gestureEnabled: isGestureEnabled }}
+      screenOptions={{
+        gestureEnabled: isGestureEnabled,
+        headerMode: "screen",
+        headerShown: isDesignSystemEnabled
+      }}
     >
-      <Stack.Screen
-        name={MESSAGES_ROUTES.MESSAGE_ROUTER}
-        component={MessageRouterScreen}
-        options={{
-          headerShown: false
-        }}
-      />
+      <Stack.Group>
+        <Stack.Screen
+          name={MESSAGES_ROUTES.MESSAGE_ROUTER}
+          component={MessageRouterScreen}
+          options={{
+            headerShown: false
+          }}
+        />
+
+        <Stack.Screen
+          name={MESSAGES_ROUTES.MESSAGE_DETAIL}
+          component={
+            isDesignSystemEnabled
+              ? MessageDetailsScreen
+              : LegacyMessageDetailScreen
+          }
+        />
 
-      <Stack.Screen
-        name={MESSAGES_ROUTES.MESSAGE_DETAIL}
-        component={MessageDetailScreen}
-        options={{
-          headerShown: false
-        }}
-      />
+        <Stack.Screen
+          name={MESSAGES_ROUTES.MESSAGE_DETAIL_ATTACHMENT}
+          component={
+            isDesignSystemEnabled
+              ? MessageAttachmentScreen
+              : LegacyMessageDetailAttachment
+          }
+        />
 
-      <Stack.Screen
-        name={MESSAGES_ROUTES.MESSAGE_DETAIL_ATTACHMENT}
-        component={
-          isDesignSystemEnabled
-            ? MessageAttachment
-            : LegacyMessageDetailAttachment
-        }
-        options={{
-          headerShown: isDesignSystemEnabled
-        }}
-      />
+        <Stack.Screen
+          name={EUCOVIDCERT_ROUTES.MAIN}
+          component={EUCovidCertStackNavigator}
+          options={{
+            headerShown: false
+          }}
+        />
 
-      <Stack.Screen
-        name={EUCOVIDCERT_ROUTES.MAIN}
-        component={EUCovidCertStackNavigator}
-        options={{
-          headerShown: false
-        }}
-      />
+        {isPnEnabled && (
+          <Stack.Screen
+            name={PN_ROUTES.MAIN}
+            component={PnStackNavigator}
+            options={{
+              headerShown: false
+            }}
+          />
+        )}
+      </Stack.Group>
 
-      {isPnEnabled && (
+      <Stack.Group screenOptions={{ presentation: "modal" }}>
         <Stack.Screen
-          name={PN_ROUTES.MAIN}
-          component={PnStackNavigator}
+          name={MESSAGES_ROUTES.MESSAGE_DETAIL_CALENDAR}
+          component={MessageCalendarScreen}
           options={{
             headerShown: false
           }}
         />
-      )}
+      </Stack.Group>
     </Stack.Navigator>
   );
 };
diff --git a/ts/features/messages/navigation/params.ts b/ts/features/messages/navigation/params.ts
index ae6f1f95751..209bc4eff36 100644
--- a/ts/features/messages/navigation/params.ts
+++ b/ts/features/messages/navigation/params.ts
@@ -1,17 +1,19 @@
 import { NavigatorScreenParams } from "@react-navigation/native";
 import EUCOVIDCERT_ROUTES from "../../euCovidCert/navigation/routes";
 import PN_ROUTES from "../../pn/navigation/routes";
-import { MessageRouterScreenNavigationParams } from "../screens/MessageRouterScreen";
-import { MessageDetailScreenNavigationParams } from "../screens/MessageDetailScreen";
+import { MessageRouterScreenRouteParams } from "../screens/MessageRouterScreen";
+import { MessageDetailsScreenRouteParams } from "../screens/MessageDetailsScreen";
 import { EUCovidCertParamsList } from "../../euCovidCert/navigation/params";
 import { PnParamsList } from "../../pn/navigation/params";
-import { MessageAttachmentNavigationParams } from "../screens/MessageAttachment";
+import { MessageAttachmentScreenRouteParams } from "../screens/MessageAttachmentScreen";
+import { MessageCalendarScreenRouteParams } from "../screens/MessageCalendarScreen";
 import { MESSAGES_ROUTES } from "./routes";
 
 export type MessagesParamsList = {
-  [MESSAGES_ROUTES.MESSAGE_ROUTER]: MessageRouterScreenNavigationParams;
-  [MESSAGES_ROUTES.MESSAGE_DETAIL]: MessageDetailScreenNavigationParams;
-  [MESSAGES_ROUTES.MESSAGE_DETAIL_ATTACHMENT]: MessageAttachmentNavigationParams;
+  [MESSAGES_ROUTES.MESSAGE_ROUTER]: MessageRouterScreenRouteParams;
+  [MESSAGES_ROUTES.MESSAGE_DETAIL]: MessageDetailsScreenRouteParams;
+  [MESSAGES_ROUTES.MESSAGE_DETAIL_ATTACHMENT]: MessageAttachmentScreenRouteParams;
+  [MESSAGES_ROUTES.MESSAGE_DETAIL_CALENDAR]: MessageCalendarScreenRouteParams;
   [EUCOVIDCERT_ROUTES.MAIN]: NavigatorScreenParams<EUCovidCertParamsList>;
   [PN_ROUTES.MAIN]: NavigatorScreenParams<PnParamsList>;
 };
diff --git a/ts/features/messages/navigation/routes.ts b/ts/features/messages/navigation/routes.ts
index e832df06bdf..8023c7d64c1 100644
--- a/ts/features/messages/navigation/routes.ts
+++ b/ts/features/messages/navigation/routes.ts
@@ -3,5 +3,6 @@ export const MESSAGES_ROUTES = {
   MESSAGES_HOME: "MESSAGES_HOME",
   MESSAGE_ROUTER: "MESSAGE_ROUTER",
   MESSAGE_DETAIL: "MESSAGE_DETAIL",
-  MESSAGE_DETAIL_ATTACHMENT: "MESSAGE_DETAIL_ATTACHMENT"
+  MESSAGE_DETAIL_ATTACHMENT: "MESSAGE_DETAIL_ATTACHMENT",
+  MESSAGE_DETAIL_CALENDAR: "MESSAGE_DETAIL_CALENDAR"
 } as const;
diff --git a/ts/features/messages/saga/__test__/handleDownloadAttachment.test.ts b/ts/features/messages/saga/__test__/handleDownloadAttachment.test.ts
index f521707505e..69db2e31079 100644
--- a/ts/features/messages/saga/__test__/handleDownloadAttachment.test.ts
+++ b/ts/features/messages/saga/__test__/handleDownloadAttachment.test.ts
@@ -12,6 +12,7 @@ import {
   lollipopKeyTagSelector,
   lollipopPublicKeySelector
 } from "../../../lollipop/store/reducers/lollipop";
+import { messageId_1 } from "../../__mocks__/messages";
 
 const savePath = "/tmp/attachment.pdf";
 const serviceId = "service0000001" as ServiceId;
@@ -42,7 +43,8 @@ describe("downloadAttachment given an attachment", () => {
         downloadAttachmentWorker,
         "token" as SessionToken,
         downloadAttachment.request({
-          ...attachment,
+          attachment,
+          messageId: messageId_1,
           skipMixpanelTrackingOnFailure: false
         })
       )
@@ -62,6 +64,7 @@ describe("downloadAttachment given an attachment", () => {
         .put(
           downloadAttachment.success({
             attachment,
+            messageId: messageId_1,
             path: savePath
           })
         )
@@ -74,7 +77,8 @@ describe("downloadAttachment given an attachment", () => {
         downloadAttachmentWorker,
         "token" as SessionToken,
         downloadAttachment.request({
-          ...attachment,
+          attachment,
+          messageId: messageId_1,
           skipMixpanelTrackingOnFailure: false
         })
       )
@@ -93,6 +97,7 @@ describe("downloadAttachment given an attachment", () => {
         .put(
           downloadAttachment.failure({
             attachment,
+            messageId: messageId_1,
             error: new Error(
               I18n.t("messageDetails.attachments.downloadFailed")
             )
@@ -107,7 +112,8 @@ describe("downloadAttachment given an attachment", () => {
         downloadAttachmentWorker,
         "token" as SessionToken,
         downloadAttachment.request({
-          ...attachment,
+          attachment,
+          messageId: messageId_1,
           skipMixpanelTrackingOnFailure: false
         })
       )
@@ -126,6 +132,7 @@ describe("downloadAttachment given an attachment", () => {
         .put(
           downloadAttachment.failure({
             attachment,
+            messageId: messageId_1,
             error: new Error(I18n.t("messageDetails.attachments.badFormat"))
           })
         )
diff --git a/ts/features/messages/saga/__test__/handleLoadMessageData.test.ts b/ts/features/messages/saga/__test__/handleLoadMessageData.test.ts
index 239fd3cc570..8458d31c086 100644
--- a/ts/features/messages/saga/__test__/handleLoadMessageData.test.ts
+++ b/ts/features/messages/saga/__test__/handleLoadMessageData.test.ts
@@ -12,7 +12,7 @@ import {
   upsertMessageStatusAttributes
 } from "../../store/actions";
 import { ServiceId } from "../../../../../definitions/backend/ServiceId";
-import { serviceByIdSelector } from "../../../../store/reducers/entities/services/servicesById";
+import { serviceByIdPotSelector } from "../../../services/store/reducers/servicesById";
 import { loadServiceDetail } from "../../../../store/actions/services";
 import { messageDetailsByIdSelector } from "../../store/reducers/detailsById";
 import { ThirdPartyMessageWithContent } from "../../../../../definitions/backend/ThirdPartyMessageWithContent";
@@ -101,7 +101,7 @@ describe("getService", () => {
     const serviceId = "s1" as ServiceId;
     testSaga(testable!.getService, serviceId)
       .next()
-      .select(serviceByIdSelector, serviceId)
+      .select(serviceByIdPotSelector, serviceId)
       .next(pot.none)
       .put(loadServiceDetail.request(serviceId))
       .next()
@@ -111,7 +111,7 @@ describe("getService", () => {
     const serviceId = "s1" as ServiceId;
     testSaga(testable!.getService, serviceId)
       .next()
-      .select(serviceByIdSelector, serviceId)
+      .select(serviceByIdPotSelector, serviceId)
       .next(pot.noneError)
       .put(loadServiceDetail.request(serviceId))
       .next()
@@ -121,7 +121,7 @@ describe("getService", () => {
     const serviceId = "s1" as ServiceId;
     testSaga(testable!.getService, serviceId)
       .next()
-      .select(serviceByIdSelector, serviceId)
+      .select(serviceByIdPotSelector, serviceId)
       .next(pot.someError({}, new Error()))
       .put(loadServiceDetail.request(serviceId))
       .next()
@@ -131,7 +131,7 @@ describe("getService", () => {
     const serviceId = "s1" as ServiceId;
     testSaga(testable!.getService, serviceId)
       .next()
-      .select(serviceByIdSelector, serviceId)
+      .select(serviceByIdPotSelector, serviceId)
       .next(pot.some({}))
       .isDone();
   });
diff --git a/ts/features/messages/saga/__test__/handleRequestInit.test.ts b/ts/features/messages/saga/__test__/handleRequestInit.test.ts
index 65a6987e8e2..39a0763db74 100644
--- a/ts/features/messages/saga/__test__/handleRequestInit.test.ts
+++ b/ts/features/messages/saga/__test__/handleRequestInit.test.ts
@@ -5,13 +5,14 @@ import {
   handleRequestInit,
   testableHandleRequestInitFactory
 } from "../handleRequestInit";
-import { UIAttachment } from "../../types";
 import {
   lollipopKeyTagSelector,
   lollipopPublicKeySelector
 } from "../../../lollipop/store/reducers/lollipop";
 import { generateKeyInfo } from "../../../lollipop/saga";
 import { lollipopRequestInit } from "../../../lollipop/utils/fetch";
+import { ThirdPartyAttachment } from "../../../../../definitions/backend/ThirdPartyAttachment";
+import { messageId_1 } from "../../__mocks__/messages";
 
 const handleRequestInitFactory = testableHandleRequestInitFactory!;
 
@@ -29,13 +30,15 @@ describe("handleDownloadAttachment", () => {
 
   it("handleRequestInit should follow the proper flow and return the enhanced lollipop headers", () => {
     const data = fetchParametersCommonInputData();
+    const attachmentFullUrl = `undefined/api/v1/third-party-messages/${data.messageId}/attachments/${data.attachmentFullUrl}`;
     testSaga(
       handleRequestInit,
       {
-        resourceUrl: {
-          href: data.attachmentFullUrl
-        }
-      } as UIAttachment,
+        id: data.attachmentId,
+        name: data.attachmentName,
+        url: data.attachmentFullUrl
+      } as ThirdPartyAttachment,
+      data.messageId,
       data.bearerToken,
       data.nonce
     )
@@ -50,26 +53,28 @@ describe("handleDownloadAttachment", () => {
         lollipopRequestInit,
         { nonce: data.nonce },
         data.keyInfo,
-        data.attachmentFullUrl,
+        attachmentFullUrl,
         { headers: data.headers, method: "GET" }
       )
       .next({ headers: data.enhancedHeaders })
       .returns({
         method: "GET",
-        attachmentFullUrl: data.attachmentFullUrl,
+        attachmentFullUrl,
         headers: data.enhancedHeaders
       });
   });
 
   it("handleRequestInit should follow the proper flow and return standard headers when lollipopRequestInit fails", () => {
     const data = fetchParametersCommonInputData();
+    const attachmentFullUrl = `undefined/api/v1/third-party-messages/${data.messageId}/attachments/${data.attachmentFullUrl}`;
     testSaga(
       handleRequestInit,
       {
-        resourceUrl: {
-          href: data.attachmentFullUrl
-        }
-      } as UIAttachment,
+        id: data.attachmentId,
+        name: data.attachmentName,
+        url: data.attachmentFullUrl
+      } as ThirdPartyAttachment,
+      data.messageId,
       data.bearerToken,
       data.nonce
     )
@@ -84,13 +89,13 @@ describe("handleDownloadAttachment", () => {
         lollipopRequestInit,
         { nonce: data.nonce },
         data.keyInfo,
-        data.attachmentFullUrl,
+        attachmentFullUrl,
         { headers: data.headers, method: "GET" }
       )
       .next({ headers: undefined })
       .returns({
         method: "GET",
-        attachmentFullUrl: data.attachmentFullUrl,
+        attachmentFullUrl,
         headers: data.headers
       });
   });
@@ -118,6 +123,9 @@ const fetchParametersCommonInputData = () => {
       publicKey,
       publicKeyThumbprint: "thumbprint"
     },
+    messageId: messageId_1,
+    attachmentId: "1",
+    attachmentName: "1.pdf",
     attachmentFullUrl: "https://my.attachment/full/url",
     headers,
     enhancedHeaders: {
diff --git a/ts/features/messages/saga/handleDownloadAttachment.ts b/ts/features/messages/saga/handleDownloadAttachment.ts
index aaddf73c202..e485c734910 100644
--- a/ts/features/messages/saga/handleDownloadAttachment.ts
+++ b/ts/features/messages/saga/handleDownloadAttachment.ts
@@ -23,7 +23,7 @@ import {
   cancelPreviousAttachmentDownload,
   downloadAttachment
 } from "../store/actions";
-import { UIAttachment, UIMessageId } from "../types";
+import { UIMessageId } from "../types";
 import { ServiceId } from "../../../../definitions/backend/ServiceId";
 import { getServiceByMessageId } from "../store/reducers/paginatedById";
 import {
@@ -32,6 +32,7 @@ import {
   trackThirdPartyMessageAttachmentUnavailable
 } from "../analytics";
 import { getHeaderByKey } from "../utils/strings";
+import { attachmentDisplayName } from "../store/reducers/transformers";
 import { handleRequestInit } from "./handleRequestInit";
 
 export const AttachmentsDirectoryPath =
@@ -41,14 +42,8 @@ export const AttachmentsDirectoryPath =
  * Builds the save path for the given attachment
  * @param attachment
  */
-const savePath = (attachment: UIAttachment) =>
-  AttachmentsDirectoryPath +
-  "/" +
-  attachment.messageId +
-  "/" +
-  attachment.id +
-  "/" +
-  attachment.displayName;
+const savePath = (messageId: UIMessageId, attachmentId: string, name: string) =>
+  `${AttachmentsDirectoryPath}/${messageId}/${attachmentId}/${name}`;
 
 const getDelayMilliseconds = (headers: Record<string, string>) =>
   pipe(
@@ -80,20 +75,23 @@ export function* downloadAttachmentWorker(
   bearerToken: SessionToken,
   action: ActionType<typeof downloadAttachment.request>
 ): SagaIterator {
-  const { skipMixpanelTrackingOnFailure, ...attachment } = action.payload;
-  const messageId = attachment.messageId;
+  const { attachment, messageId, skipMixpanelTrackingOnFailure } =
+    action.payload;
   const serviceId = yield* select(getServiceByMessageId, messageId);
 
+  const name = attachmentDisplayName(attachment);
+
   while (true) {
     try {
       const config = yield* call(ReactNativeBlobUtil.config, {
-        path: savePath(attachment),
+        path: savePath(messageId, attachment.id, name),
         timeout: fetchTimeout
       });
 
       const { method, attachmentFullUrl, headers } = yield* call(
         handleRequestInit,
         attachment,
+        messageId,
         bearerToken,
         uuid()
       );
@@ -109,7 +107,7 @@ export function* downloadAttachmentWorker(
 
       if (status === 200) {
         const path = result.path();
-        yield* put(downloadAttachment.success({ attachment, path }));
+        yield* put(downloadAttachment.success({ attachment, messageId, path }));
       } else if (status === 503) {
         const waitingMs = getDelayMilliseconds(rest.headers);
         if (waitingMs >= 0) {
@@ -121,7 +119,7 @@ export function* downloadAttachmentWorker(
         trackFailureEvent(
           skipMixpanelTrackingOnFailure,
           status,
-          attachment.messageId,
+          messageId,
           serviceId
         );
         // In this case we produce a taking error that can be
@@ -131,18 +129,16 @@ export function* downloadAttachmentWorker(
             ? "messageDetails.attachments.badFormat"
             : "messageDetails.attachments.downloadFailed";
         const error = new Error(I18n.t(errorKey));
-        yield* put(downloadAttachment.failure({ attachment, error }));
+        yield* put(
+          downloadAttachment.failure({ attachment, messageId, error })
+        );
       }
     } catch (error) {
-      trackFailureEvent(
-        skipMixpanelTrackingOnFailure,
-        0,
-        attachment.messageId,
-        serviceId
-      );
+      trackFailureEvent(skipMixpanelTrackingOnFailure, 0, messageId, serviceId);
       yield* put(
         downloadAttachment.failure({
           attachment,
+          messageId,
           error: getError(error)
         })
       );
@@ -150,7 +146,7 @@ export function* downloadAttachmentWorker(
       // In this way, the download pot's status
       // in the reducer will be properly updated.
       if (yield* cancelled()) {
-        yield* put(downloadAttachment.cancel(attachment));
+        yield* put(downloadAttachment.cancel({ attachment, messageId }));
       }
     }
     break;
diff --git a/ts/features/messages/saga/handleLoadMessageData.ts b/ts/features/messages/saga/handleLoadMessageData.ts
index 2a0edb099eb..8b89b4e3de5 100644
--- a/ts/features/messages/saga/handleLoadMessageData.ts
+++ b/ts/features/messages/saga/handleLoadMessageData.ts
@@ -18,7 +18,7 @@ import {
 } from "../store/actions";
 import { getPaginatedMessageById } from "../store/reducers/paginatedById";
 import { UIMessage, UIMessageDetails, UIMessageId } from "../types";
-import { serviceByIdSelector } from "../../../store/reducers/entities/services/servicesById";
+import { serviceByIdPotSelector } from "../../services/store/reducers/servicesById";
 import { loadServiceDetail } from "../../../store/actions/services";
 import { messageDetailsByIdSelector } from "../store/reducers/detailsById";
 import { thirdPartyFromIdSelector } from "../store/reducers/thirdPartyById";
@@ -173,7 +173,7 @@ function* getPaginatedMessage(messageId: UIMessageId) {
 }
 
 function* getService(serviceId: ServiceId) {
-  const servicePot = yield* select(serviceByIdSelector, serviceId);
+  const servicePot = yield* select(serviceByIdPotSelector, serviceId);
   if (!pot.isSome(servicePot) || pot.isError(servicePot)) {
     yield* put(loadServiceDetail.request(serviceId));
   }
diff --git a/ts/features/pn/store/sagas/watchPaymentUpdateRequests.ts b/ts/features/messages/saga/handlePaymentUpdateRequests.ts
similarity index 86%
rename from ts/features/pn/store/sagas/watchPaymentUpdateRequests.ts
rename to ts/features/messages/saga/handlePaymentUpdateRequests.ts
index 9ee737b83f7..430823922f6 100644
--- a/ts/features/pn/store/sagas/watchPaymentUpdateRequests.ts
+++ b/ts/features/messages/saga/handlePaymentUpdateRequests.ts
@@ -3,17 +3,17 @@ import { Channel, buffers, channel } from "redux-saga";
 import { call, flush, fork, put, take } from "typed-redux-saga/macro";
 import { ActionType, isActionOf } from "typesafe-actions";
 import { RptIdFromString } from "@pagopa/io-pagopa-commons/lib/pagopa";
-import { BackendClient } from "../../../../api/backend";
+import { BackendClient } from "../../../api/backend";
+import { commonPaymentVerificationProcedure } from "../../../sagas/wallet/pagopaApis";
+import { Detail_v2Enum } from "../../../../definitions/backend/PaymentProblemJson";
 import {
-  updatePaymentForMessage,
-  cancelQueuedPaymentUpdates
-} from "../actions";
-import { commonPaymentVerificationProcedure } from "../../../../sagas/wallet/pagopaApis";
-import { Detail_v2Enum } from "../../../../../definitions/backend/PaymentProblemJson";
+  cancelQueuedPaymentUpdates,
+  updatePaymentForMessage
+} from "../store/actions";
 
 const generatePaymentUpdateWorkerCount = () => 5;
 
-export function* watchPaymentUpdateRequests(
+export function* handlePaymentUpdateRequests(
   getVerificaRpt: ReturnType<typeof BackendClient>["getVerificaRpt"]
 ) {
   // create a channel to queue incoming requests
@@ -28,7 +28,7 @@ export function* watchPaymentUpdateRequests(
   // eslint-disable-next-line functional/no-let
   for (let i = 0; i < paymentUpdateWorkerCount; i++) {
     yield* fork(
-      handlePaymentUpdateRequests,
+      paymentUpdateRequestWorker,
       paymentUpdateChannel,
       getVerificaRpt
     );
@@ -56,7 +56,7 @@ export function* watchPaymentUpdateRequests(
   }
 }
 
-function* handlePaymentUpdateRequests(
+function* paymentUpdateRequestWorker(
   paymentStatusChannel: Channel<
     ActionType<typeof updatePaymentForMessage.request>
   >,
diff --git a/ts/features/messages/saga/handleRequestInit.ts b/ts/features/messages/saga/handleRequestInit.ts
index b44062de94a..88c04054db5 100644
--- a/ts/features/messages/saga/handleRequestInit.ts
+++ b/ts/features/messages/saga/handleRequestInit.ts
@@ -1,5 +1,4 @@
 import { call, select } from "typed-redux-saga/macro";
-import { UIAttachment } from "../types";
 import {
   lollipopKeyTagSelector,
   lollipopPublicKeySelector
@@ -8,11 +7,15 @@ import { generateKeyInfo } from "../../lollipop/saga";
 import { LollipopConfig } from "../../lollipop";
 import { lollipopRequestInit } from "../../lollipop/utils/fetch";
 import { isTestEnv } from "../../../utils/environment";
+import { ThirdPartyAttachment } from "../../../../definitions/backend/ThirdPartyAttachment";
+import { attachmentDownloadUrl } from "../store/reducers/transformers";
+import { UIMessageId } from "../types";
 
 type HeaderType = Record<string, string>;
 
 export function* handleRequestInit(
-  attachment: UIAttachment,
+  attachment: ThirdPartyAttachment,
+  messageId: UIMessageId,
   bearerToken: string,
   nonce: string
 ) {
@@ -24,7 +27,7 @@ export function* handleRequestInit(
   const publicKey = yield* select(lollipopPublicKeySelector);
   const keyInfo = yield* call(generateKeyInfo, keyTag, publicKey);
 
-  const attachmentFullUrl = attachment.resourceUrl.href;
+  const attachmentFullUrl = attachmentDownloadUrl(messageId, attachment);
 
   const requestInit = {
     headers: {
diff --git a/ts/features/messages/saga/index.ts b/ts/features/messages/saga/index.ts
index ac52ba4bafa..a4cacd70da3 100644
--- a/ts/features/messages/saga/index.ts
+++ b/ts/features/messages/saga/index.ts
@@ -40,6 +40,7 @@ import { handleUpsertMessageStatusAttribues } from "./handleUpsertMessageStatusA
 import { handleMigrateToPagination } from "./handleMigrateToPagination";
 import { handleMessagePrecondition } from "./handleMessagePrecondition";
 import { handleThirdPartyMessage } from "./handleThirdPartyMessage";
+import { handlePaymentUpdateRequests } from "./handlePaymentUpdateRequests";
 
 /**
  * Handle messages requests
@@ -113,6 +114,9 @@ export function* watchMessagesSaga(
     bearerToken
   );
 
+  // handle the request for updating a message's payment
+  yield* fork(handlePaymentUpdateRequests, backendClient.getVerificaRpt);
+
   // handle the request for removing a downloaded attachment
   yield* takeEvery(removeCachedAttachment, handleClearAttachment);
 
diff --git a/ts/features/messages/screens/LegacyMessageAttachment.tsx b/ts/features/messages/screens/LegacyMessageAttachment.tsx
index d60ee13fd11..2a409ad1563 100644
--- a/ts/features/messages/screens/LegacyMessageAttachment.tsx
+++ b/ts/features/messages/screens/LegacyMessageAttachment.tsx
@@ -8,7 +8,7 @@ import { MessagesParamsList } from "../navigation/params";
 import { showToast } from "../../../utils/showToast";
 import { getServiceByMessageId } from "../store/reducers/paginatedById";
 import { useIOSelector } from "../../../store/hooks";
-import { thirdPartyMessageUIAttachment } from "../store/reducers/thirdPartyById";
+import { thirdPartyMessageAttachment } from "../store/reducers/thirdPartyById";
 import {
   trackThirdPartyMessageAttachmentCorruptedFile,
   trackThirdPartyMessageAttachmentPreviewSuccess,
@@ -32,7 +32,7 @@ export const LegacyMessageDetailAttachment = (
   );
 
   const maybeThirdPartyMessageUIAttachment = useIOSelector(state =>
-    thirdPartyMessageUIAttachment(state)(messageId)(attachmentId)
+    thirdPartyMessageAttachment(state)(messageId)(attachmentId)
   );
 
   useEffect(() => {
diff --git a/ts/features/messages/screens/MessageDetailScreen.tsx b/ts/features/messages/screens/LegacyMessageDetailScreen.tsx
similarity index 68%
rename from ts/features/messages/screens/MessageDetailScreen.tsx
rename to ts/features/messages/screens/LegacyMessageDetailScreen.tsx
index fbe0d6e1c45..fb8664993e7 100644
--- a/ts/features/messages/screens/MessageDetailScreen.tsx
+++ b/ts/features/messages/screens/LegacyMessageDetailScreen.tsx
@@ -1,48 +1,45 @@
+import { VSpacer } from "@pagopa/io-app-design-system";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { pipe } from "fp-ts/lib/function";
+import { Route, useRoute } from "@react-navigation/native";
 import * as O from "fp-ts/lib/Option";
+import { pipe } from "fp-ts/lib/function";
 import React from "react";
 import {
-  View,
   ActivityIndicator,
   SafeAreaView,
-  StyleSheet
+  StyleSheet,
+  View
 } from "react-native";
-import { connect } from "react-redux";
-import { VSpacer } from "@pagopa/io-app-design-system";
 import { ServiceId } from "../../../../definitions/backend/ServiceId";
 import { Body } from "../../../components/core/typography/Body";
 import { IOStyles } from "../../../components/core/variables/IOStyles";
 import WorkunitGenericFailure from "../../../components/error/WorkunitGenericFailure";
-import MessageDetailComponent from "../components/MessageDetail";
-import ErrorState from "../components/MessageDetail/ErrorState";
 import BaseScreenComponent, {
   ContextualHelpPropsMarkdown
 } from "../../../components/screens/BaseScreenComponent";
 import I18n from "../../../i18n";
-import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
-import { isNoticePaidSelector } from "../../../store/reducers/entities/payments";
-import {
-  loadMessageDetails,
-  resetGetMessageDataAction
-} from "../store/actions";
 import {
   navigateBack,
   navigateToServiceDetailsScreen
 } from "../../../store/actions/navigation";
 import { loadServiceDetail } from "../../../store/actions/services";
-import { Dispatch, ReduxProps } from "../../../store/actions/types";
-import { messageDetailsByIdSelector } from "../store/reducers/detailsById";
-import { getPaginatedMessageById } from "../store/reducers/paginatedById";
-import { UIMessageId } from "../types";
+import { useIODispatch, useIOSelector } from "../../../store/hooks";
+import { isNoticePaidSelector } from "../../../store/reducers/entities/payments";
 import {
-  serviceByIdSelector,
+  serviceByIdPotSelector,
   serviceMetadataByIdSelector
-} from "../../../store/reducers/entities/services/servicesById";
+} from "../../services/store/reducers/servicesById";
 import { toUIService } from "../../../store/reducers/entities/services/transformers";
-import { GlobalState } from "../../../store/reducers/types";
 import { useOnFirstRender } from "../../../utils/hooks/useOnFirstRender";
-import { MessagesParamsList } from "../navigation/params";
+import MessageDetailComponent from "../components/MessageDetail";
+import ErrorState from "../components/MessageDetail/ErrorState";
+import {
+  loadMessageDetails,
+  resetGetMessageDataAction
+} from "../store/actions";
+import { messageDetailsByIdSelector } from "../store/reducers/detailsById";
+import { getPaginatedMessageById } from "../store/reducers/paginatedById";
+import { UIMessageId } from "../types";
 
 const styles = StyleSheet.create({
   notFullStateContainer: {
@@ -57,16 +54,6 @@ export type MessageDetailScreenNavigationParams = {
   serviceId: ServiceId;
 };
 
-type OwnProps = IOStackNavigationRouteProps<
-  MessagesParamsList,
-  "MESSAGE_DETAIL"
->;
-
-type Props = OwnProps &
-  ReturnType<typeof mapStateToProps> &
-  ReturnType<typeof mapDispatchToProps> &
-  ReduxProps;
-
 const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
   title: "messageDetails.contextualHelpTitle",
   body: "messageDetails.contextualHelpContent"
@@ -80,24 +67,48 @@ const renderLoadingState = () => (
   </View>
 );
 
-const MessageDetailScreen = ({
-  goBack,
-  hasPaidBadge,
-  loadMessageDetails,
-  maybeServiceMetadata,
-  messageId,
-  serviceId,
-  message,
-  messageDetails,
-  refreshService,
-  service
-}: Props) => {
+const LegacyMessageDetailScreen = () => {
+  const { messageId, serviceId } =
+    useRoute<Route<"MESSAGE_DETAIL", MessageDetailScreenNavigationParams>>()
+      .params;
+  const dispatch = useIODispatch();
+
+  const refreshService = (serviceId: string) =>
+    dispatch(loadServiceDetail.request(serviceId));
+  const requestLoadMessageDetails = (id: UIMessageId) =>
+    dispatch(loadMessageDetails.request({ id }));
+  const goBack = () => {
+    dispatch(resetGetMessageDataAction());
+    return navigateBack();
+  };
+
+  const message = pot.toUndefined(
+    useIOSelector(state => getPaginatedMessageById(state, messageId))
+  );
+  const messageDetails = useIOSelector(state =>
+    messageDetailsByIdSelector(state, messageId)
+  );
+  const service = pipe(
+    pot.toOption(
+      useIOSelector(state => serviceByIdPotSelector(state, serviceId))
+    ),
+    O.map(toUIService),
+    O.toUndefined
+  );
+  // Map the potential message to the potential service
+  const maybeServiceMetadata = useIOSelector(state =>
+    serviceMetadataByIdSelector(state, serviceId)
+  );
+  const hasPaidBadge: boolean = useIOSelector(state =>
+    message ? isNoticePaidSelector(state, message.category) : false
+  );
+
   useOnFirstRender(() => {
     if (
       pot.isError(messageDetails) ||
       (pot.isNone(messageDetails) && !pot.isLoading(messageDetails))
     ) {
-      loadMessageDetails(messageId);
+      requestLoadMessageDetails(messageId);
     }
   });
 
@@ -112,7 +123,7 @@ const MessageDetailScreen = ({
   const onRetry = () => {
     // we try to reload both the message content and the service
     refreshService(serviceId);
-    loadMessageDetails(messageId);
+    requestLoadMessageDetails(messageId);
   };
 
   const renderErrorState = () => (
@@ -159,45 +170,4 @@ const MessageDetailScreen = ({
   );
 };
 
-const mapStateToProps = (state: GlobalState, ownProps: OwnProps) => {
-  const messageId = ownProps.route.params.messageId;
-  const serviceId = ownProps.route.params.serviceId;
-  const message = pot.toUndefined(getPaginatedMessageById(state, messageId));
-  const messageDetails = messageDetailsByIdSelector(state, messageId);
-  const service = pipe(
-    pot.toOption(serviceByIdSelector(state, serviceId)),
-    O.map(toUIService),
-    O.toUndefined
-  );
-  // Map the potential message to the potential service
-  const maybeServiceMetadata = serviceMetadataByIdSelector(serviceId)(state);
-  const hasPaidBadge: boolean = message
-    ? isNoticePaidSelector(state, message.category)
-    : false;
-
-  return {
-    messageId,
-    serviceId,
-    hasPaidBadge,
-    message,
-    messageDetails,
-    maybeServiceMetadata,
-    service
-  };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  refreshService: (serviceId: string) =>
-    dispatch(loadServiceDetail.request(serviceId)),
-  loadMessageDetails: (id: UIMessageId) =>
-    dispatch(loadMessageDetails.request({ id })),
-  goBack: () => {
-    dispatch(resetGetMessageDataAction());
-    return navigateBack();
-  }
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(MessageDetailScreen);
+export default LegacyMessageDetailScreen;
diff --git a/ts/features/messages/screens/MessageAttachmentScreen.tsx b/ts/features/messages/screens/MessageAttachmentScreen.tsx
new file mode 100644
index 00000000000..05e8f99e487
--- /dev/null
+++ b/ts/features/messages/screens/MessageAttachmentScreen.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { UIMessageId } from "../types";
+import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
+import { MessagesParamsList } from "../navigation/params";
+import { ServiceId } from "../../../../definitions/backend/ServiceId";
+import { MessageAttachment } from "../components/MessageAttachment/MessageAttachment";
+import { useHeaderSecondLevel } from "../../../hooks/useHeaderSecondLevel";
+
+export type MessageAttachmentScreenRouteParams = {
+  messageId: UIMessageId;
+  attachmentId: string;
+  serviceId?: ServiceId;
+};
+
+type MessageAttachmentScreenProps = IOStackNavigationRouteProps<
+  MessagesParamsList,
+  "MESSAGE_DETAIL_ATTACHMENT"
+>;
+
+export const MessageAttachmentScreen = (
+  props: MessageAttachmentScreenProps
+) => {
+  const { attachmentId, messageId, serviceId } = props.route.params;
+
+  useHeaderSecondLevel({
+    title: "",
+    supportRequest: true
+  });
+
+  return (
+    <MessageAttachment
+      attachmentId={attachmentId}
+      isPN={false}
+      messageId={messageId}
+      serviceId={serviceId}
+    />
+  );
+};
diff --git a/ts/features/messages/screens/MessageCalendarScreen.tsx b/ts/features/messages/screens/MessageCalendarScreen.tsx
new file mode 100644
index 00000000000..666df47dd16
--- /dev/null
+++ b/ts/features/messages/screens/MessageCalendarScreen.tsx
@@ -0,0 +1,148 @@
+import React, { ComponentProps, useCallback, useEffect, useState } from "react";
+import { ScrollView, View } from "react-native";
+import { Calendar } from "react-native-calendar-events";
+import { RouteProp, useRoute } from "@react-navigation/native";
+import {
+  FooterWithButtons,
+  H2,
+  IOStyles,
+  VSpacer
+} from "@pagopa/io-app-design-system";
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/lib/Option";
+import * as TE from "fp-ts/lib/TaskEither";
+import I18n from "../../../i18n";
+import { UIMessageId } from "../types";
+import { useIONavigation } from "../../../navigation/params/AppParamsList";
+import { MessagesParamsList } from "../navigation/params";
+import { OperationResultScreenContent } from "../../../components/screens/OperationResultScreenContent";
+import { BaseHeader } from "../../../components/screens/BaseHeader";
+import { CalendarList } from "../../../components/CalendarList";
+import { useIOSelector } from "../../../store/hooks";
+import { findDeviceCalendarsTask } from "../../../utils/calendar";
+import { messageDetailsByIdSelector } from "../store/reducers/detailsById";
+import { useMessageCalendar } from "../hooks/useMessageCalendar";
+
+export type MessageCalendarScreenRouteParams = {
+  messageId: UIMessageId;
+};
+
+type MessageCalendarRouteProps = RouteProp<
+  MessagesParamsList,
+  "MESSAGE_DETAIL_CALENDAR"
+>;
+
+export const MessageCalendarScreen = () => {
+  const [calendarsByAccount, setCalendarsByAccount] = useState<
+    pot.Pot<Array<Calendar>, Error>
+  >(pot.noneLoading);
+
+  const { params } = useRoute<MessageCalendarRouteProps>();
+  const { messageId } = params;
+
+  const navigation = useIONavigation();
+
+  const messageDetails = useIOSelector(state =>
+    messageDetailsByIdSelector(state, messageId)
+  );
+
+  const { addEventToCalendar, setPreferredCalendar } =
+    useMessageCalendar(messageId);
+
+  const handleCalendarSelected = useCallback(
+    (calendar: Calendar) => {
+      pipe(
+        messageDetails,
+        pot.toOption,
+        O.map(({ subject, dueDate }) => {
+          if (!dueDate) {
+            return;
+          }
+          addEventToCalendar(dueDate, subject, calendar);
+          setPreferredCalendar(calendar);
+          navigation.goBack();
+        })
+      );
+    },
+    [messageDetails, addEventToCalendar, setPreferredCalendar, navigation]
+  );
+
+  const fetchCalendars = useCallback(async () => {
+    setCalendarsByAccount(pot.noneLoading);
+
+    void pipe(
+      findDeviceCalendarsTask,
+      TE.map(calendars => {
+        setCalendarsByAccount(pot.some(calendars));
+      }),
+      TE.mapLeft(error => {
+        setCalendarsByAccount(pot.toError(pot.none, error));
+      })
+    )();
+  }, []);
+
+  useEffect(() => {
+    void fetchCalendars();
+  }, [fetchCalendars]);
+
+  const closeIconButton: ComponentProps<typeof BaseHeader>["customRightIcon"] =
+    {
+      iconName: "closeLarge",
+      accessibilityLabel: I18n.t("accessibility.buttons.torch.turnOff"),
+      onPress: () => navigation.goBack()
+    };
+
+  if (pot.isError(calendarsByAccount)) {
+    return (
+      <>
+        {/* FIXME: replace with new header */}
+        <BaseHeader customRightIcon={closeIconButton} />
+        <OperationResultScreenContent
+          pictogram={"umbrellaNew"}
+          title={I18n.t("messages.cta.errors.fetchCalendars")}
+          action={{
+            label: I18n.t("global.buttons.retry"),
+            accessibilityLabel: I18n.t("global.buttons.retry"),
+            onPress: fetchCalendars
+          }}
+        />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <BaseHeader customRightIcon={closeIconButton} />
+      <ScrollView>
+        {/* FIXME: replace with new header */}
+        <View style={IOStyles.horizontalContentPadding}>
+          <H2>{I18n.t("messages.cta.reminderCalendarSelect")}</H2>
+        </View>
+        <VSpacer size={16} />
+        <View style={IOStyles.flex}>
+          <CalendarList
+            calendars={pipe(
+              calendarsByAccount,
+              pot.toOption,
+              O.getOrElse<Array<Calendar>>(() => [])
+            )}
+            isLoading={pot.isLoading(calendarsByAccount)}
+            onCalendarSelected={handleCalendarSelected}
+          />
+        </View>
+      </ScrollView>
+      <FooterWithButtons
+        type="SingleButton"
+        primary={{
+          type: "Outline",
+          buttonProps: {
+            label: I18n.t("global.buttons.cancel"),
+            accessibilityLabel: I18n.t("global.buttons.cancel"),
+            onPress: () => navigation.goBack()
+          }
+        }}
+      />
+    </>
+  );
+};
diff --git a/ts/features/messages/screens/MessageDetailsScreen.tsx b/ts/features/messages/screens/MessageDetailsScreen.tsx
new file mode 100644
index 00000000000..1cab220c234
--- /dev/null
+++ b/ts/features/messages/screens/MessageDetailsScreen.tsx
@@ -0,0 +1,221 @@
+import React, { useCallback, useMemo } from "react";
+import { ScrollView, StyleSheet, View } from "react-native";
+import { ContentWrapper, Tag, VSpacer } from "@pagopa/io-app-design-system";
+import { useFocusEffect } from "@react-navigation/native";
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/lib/Option";
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { UIMessageId } from "../types";
+import { ServiceId } from "../../../../definitions/backend/ServiceId";
+import { MessagesParamsList } from "../navigation/params";
+import {
+  IOStackNavigationRouteProps,
+  useIONavigation
+} from "../../../navigation/params/AppParamsList";
+import { useHeaderSecondLevel } from "../../../hooks/useHeaderSecondLevel";
+import { useIODispatch, useIOSelector, useIOStore } from "../../../store/hooks";
+import {
+  cancelPreviousAttachmentDownload,
+  cancelQueuedPaymentUpdates,
+  updatePaymentForMessage
+} from "../store/actions";
+import { getPaginatedMessageById } from "../store/reducers/paginatedById";
+import {
+  hasAttachmentsSelector,
+  messageMarkdownSelector,
+  messageTitleSelector
+} from "../store/reducers/thirdPartyById";
+import { MessageDetailsAttachments } from "../components/MessageDetail/MessageDetailsAttachments";
+import { OperationResultScreenContent } from "../../../components/screens/OperationResultScreenContent";
+import { MessageDetailsHeader } from "../components/MessageDetail/MessageDetailsHeader";
+import I18n from "../../../i18n";
+import { messageDetailsByIdSelector } from "../store/reducers/detailsById";
+import { MessageDetailsTagBox } from "../components/MessageDetail/MessageDetailsTagBox";
+import { MessageMarkdown } from "../components/MessageDetail/MessageMarkdown";
+import { cleanMarkdownFromCTAs, getMessageCTA } from "../utils/messages";
+import { MessageDetailsReminder } from "../components/MessageDetail/MessageDetailsReminder";
+import { MessageDetailsFooter } from "../components/MessageDetail/MessageDetailsFooter";
+import { MessageDetailsPayment } from "../components/MessageDetail/MessageDetailsPayment";
+import { cancelPaymentStatusTracking } from "../../pn/store/actions";
+import { userSelectedPaymentRptIdSelector } from "../store/reducers/payments";
+import { MessageDetailsStickyFooter } from "../components/MessageDetail/MessageDetailsStickyFooter";
+import { MessageDetailsScrollViewAdditionalSpace } from "../components/MessageDetail/MessageDetailsScrollViewAdditionalSpace";
+import { serviceMetadataByIdSelector } from "../../services/store/reducers/servicesById";
+import { isPNOptInMessage } from "../../pn/utils";
+import { useOnFirstRender } from "../../../utils/hooks/useOnFirstRender";
+import {
+  trackPNOptInMessageCTADisplaySuccess,
+  trackPNOptInMessageOpened
+} from "../../pn/analytics";
+
+const styles = StyleSheet.create({
+  scrollContentContainer: {
+    flexGrow: 1
+  },
+  container: {
+    flexGrow: 1
+  }
+});
+
+export type MessageDetailsScreenRouteParams = {
+  messageId: UIMessageId;
+  serviceId: ServiceId;
+};
+
+type MessageDetailsScreenProps = IOStackNavigationRouteProps<
+  MessagesParamsList,
+  "MESSAGE_DETAIL"
+>;
+
+export const MessageDetailsScreen = (props: MessageDetailsScreenProps) => {
+  const { messageId, serviceId } = props.route.params;
+
+  const navigation = useIONavigation();
+
+  const dispatch = useIODispatch();
+
+  const message = pipe(
+    useIOSelector(state => getPaginatedMessageById(state, messageId)),
+    pot.toOption,
+    O.toUndefined
+  );
+
+  const messageDetails = pipe(
+    useIOSelector(state => messageDetailsByIdSelector(state, messageId)),
+    pot.toOption,
+    O.toUndefined
+  );
+
+  const hasAttachments = useIOSelector(state =>
+    hasAttachmentsSelector(state, messageId)
+  );
+
+  const subject =
+    useIOSelector(state => messageTitleSelector(state, messageId)) ?? "";
+
+  const goBack = useCallback(() => {
+    dispatch(cancelPreviousAttachmentDownload());
+    dispatch(cancelQueuedPaymentUpdates());
+    dispatch(cancelPaymentStatusTracking());
+    navigation.goBack();
+  }, [dispatch, navigation]);
+
+  const messageMarkdown =
+    useIOSelector(state => messageMarkdownSelector(state, messageId)) ?? "";
+  const markdownWithNoCTA = useMemo(
+    () => cleanMarkdownFromCTAs(messageMarkdown),
+    [messageMarkdown]
+  );
+  const serviceMetadata = useIOSelector(state =>
+    serviceMetadataByIdSelector(state, serviceId)
+  );
+  const maybeCTAs = useMemo(
+    () =>
+      pipe(
+        getMessageCTA(messageMarkdown, serviceMetadata, serviceId),
+        O.toUndefined
+      ),
+    [messageMarkdown, serviceId, serviceMetadata]
+  );
+
+  // Use the store since `isPNOptInMessage` is not a selector but an utility
+  // that uses a backend status configuration that is normally updated every
+  // minute. We do not want to cause a re-rendering or recompute the value
+  const store = useIOStore();
+  const state = store.getState();
+  const pnOptInMessageInfo = isPNOptInMessage(maybeCTAs, serviceId, state);
+
+  useHeaderSecondLevel({
+    title: "",
+    goBack,
+    supportRequest: true
+  });
+
+  useOnFirstRender(
+    () => {
+      trackPNOptInMessageOpened();
+      trackPNOptInMessageCTADisplaySuccess();
+    },
+    () => pnOptInMessageInfo.isPNOptInMessage
+  );
+
+  useFocusEffect(
+    useCallback(() => {
+      const globalState = store.getState();
+      const paymentToCheckRptId = userSelectedPaymentRptIdSelector(
+        globalState,
+        messageDetails
+      );
+      if (paymentToCheckRptId) {
+        dispatch(
+          updatePaymentForMessage.request({
+            messageId,
+            paymentId: paymentToCheckRptId
+          })
+        );
+      }
+    }, [dispatch, messageId, messageDetails, store])
+  );
+
+  if (message === undefined || messageDetails === undefined) {
+    return (
+      <OperationResultScreenContent
+        pictogram={"umbrellaNew"}
+        title={I18n.t("global.genericError")}
+        subtitle={I18n.t("messageDetails.submitBugText")}
+      />
+    );
+  }
+
+  return (
+    <>
+      <ScrollView contentContainerStyle={styles.scrollContentContainer}>
+        <View style={styles.container}>
+          <ContentWrapper>
+            <MessageDetailsHeader
+              serviceId={serviceId}
+              subject={subject}
+              createdAt={message.createdAt}
+            >
+              {hasAttachments && (
+                <MessageDetailsTagBox>
+                  <Tag
+                    variant="attachment"
+                    testID="attachment-tag"
+                    iconAccessibilityLabel={I18n.t(
+                      "messageDetails.accessibilityAttachmentIcon"
+                    )}
+                  />
+                </MessageDetailsTagBox>
+              )}
+            </MessageDetailsHeader>
+            <VSpacer />
+            <MessageDetailsReminder
+              dueDate={messageDetails.dueDate}
+              messageId={messageId}
+              title={subject}
+            />
+            <MessageMarkdown>{markdownWithNoCTA}</MessageMarkdown>
+            <MessageDetailsPayment messageId={messageId} />
+            <VSpacer size={16} />
+            <MessageDetailsAttachments messageId={messageId} />
+          </ContentWrapper>
+        </View>
+        <VSpacer size={24} />
+        <MessageDetailsFooter messageId={messageId} serviceId={serviceId} />
+        <MessageDetailsScrollViewAdditionalSpace
+          hasCTA1={!!maybeCTAs?.cta_1}
+          hasCTA2={!!maybeCTAs?.cta_2}
+          messageId={messageId}
+        />
+      </ScrollView>
+      <MessageDetailsStickyFooter
+        firstCTAIsPNOptInMessage={pnOptInMessageInfo.cta1LinksToPNService}
+        messageId={messageId}
+        ctas={maybeCTAs}
+        secondCTAIsPNOptInMessage={pnOptInMessageInfo.cta2LinksToPNService}
+        serviceId={serviceId}
+      />
+    </>
+  );
+};
diff --git a/ts/features/messages/screens/MessageRouterScreen.tsx b/ts/features/messages/screens/MessageRouterScreen.tsx
index 13a36486d2c..aecf36b5835 100644
--- a/ts/features/messages/screens/MessageRouterScreen.tsx
+++ b/ts/features/messages/screens/MessageRouterScreen.tsx
@@ -1,9 +1,12 @@
-import { StackActions, useNavigation } from "@react-navigation/native";
+import { StackActions } from "@react-navigation/native";
 import React, { useCallback, useEffect, useRef } from "react";
 import BaseScreenComponent from "../../../components/screens/BaseScreenComponent";
 import { LoadingErrorComponent } from "../../../components/LoadingErrorComponent";
 import I18n from "../../../i18n";
-import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
+import {
+  IOStackNavigationRouteProps,
+  useIONavigation
+} from "../../../navigation/params/AppParamsList";
 import { MessagesParamsList } from "../navigation/params";
 import ROUTES from "../../../navigation/routes";
 import { useIODispatch, useIOSelector } from "../../../store/hooks";
@@ -25,7 +28,7 @@ import EUCOVIDCERT_ROUTES from "../../euCovidCert/navigation/routes";
 import PN_ROUTES from "../../pn/navigation/routes";
 import { MESSAGES_ROUTES } from "../navigation/routes";
 
-export type MessageRouterScreenNavigationParams = {
+export type MessageRouterScreenRouteParams = {
   messageId: UIMessageId;
   fromNotification: boolean;
 };
@@ -41,7 +44,7 @@ export const MessageRouterScreen = (
   const messageId = props.route.params.messageId;
   const fromPushNotification = props.route.params.fromNotification;
   const dispatch = useIODispatch();
-  const navigation = useNavigation();
+  const navigation = useIONavigation();
   const isFirstRendering = useRef(true);
   const showSpinner = useIOSelector(showSpinnerFromMessageGetStatusSelector);
   const thirdPartyMessageDetailsError = useIOSelector(
diff --git a/ts/features/messages/screens/__tests__/MessageAttachment.test.tsx b/ts/features/messages/screens/__tests__/MessageAttachment.test.tsx
index 5531553a12f..20dcd97ccc2 100644
--- a/ts/features/messages/screens/__tests__/MessageAttachment.test.tsx
+++ b/ts/features/messages/screens/__tests__/MessageAttachment.test.tsx
@@ -1,25 +1,26 @@
 import { createStore } from "redux";
-import { UIAttachment, UIAttachmentId, UIMessageId } from "../../types";
+import { UIMessageId } from "../../types";
 import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
 import { MESSAGES_ROUTES } from "../../navigation/routes";
 import { appReducer } from "../../../../store/reducers";
 import { applicationChangeState } from "../../../../store/actions/application";
-import { MessageAttachment } from "../MessageAttachment";
+import { MessageAttachmentScreen } from "../MessageAttachmentScreen";
 import { ServiceId } from "../../../../../definitions/backend/ServiceId";
 import { downloadAttachment } from "../../store/actions";
 import { preferencesDesignSystemSetEnabled } from "../../../../store/actions/persistedPreferences";
+import { ThirdPartyAttachment } from "../../../../../definitions/backend/ThirdPartyAttachment";
 
 describe("MessageAttachment", () => {
   it("Should match the snapshot when there is an error", () => {
     const messageId = "01HMZWRG7549N76017YR8YBSG2" as UIMessageId;
-    const attachmentId = "1" as UIAttachmentId;
+    const attachmentId = "1";
     const serviceId = "01HMZXFS84T1Q1BN6GXRYT63VJ" as ServiceId;
     const screen = renderScreen(messageId, attachmentId, serviceId, "failure");
     expect(screen.toJSON()).toMatchSnapshot();
   });
   it("Should match the snapshot when everything went fine", () => {
     const messageId = "01HMZWRG7549N76017YR8YBSG2" as UIMessageId;
-    const attachmentId = "1" as UIAttachmentId;
+    const attachmentId = "1";
     const serviceId = "01HMZXFS84T1Q1BN6GXRYT63VJ" as ServiceId;
     const screen = renderScreen(messageId, attachmentId, serviceId, "success");
     expect(screen.toJSON()).toMatchSnapshot();
@@ -28,7 +29,7 @@ describe("MessageAttachment", () => {
 
 const renderScreen = (
   messageId: UIMessageId,
-  attachmentId: UIAttachmentId,
+  attachmentId: string,
   serviceId: ServiceId,
   configuration: "failure" | "success"
 ) => {
@@ -40,7 +41,8 @@ const renderScreen = (
   const withDownloadState = appReducer(
     designSystemState,
     downloadAttachment.success({
-      attachment: { id: attachmentId, messageId } as UIAttachment,
+      attachment: { id: attachmentId } as ThirdPartyAttachment,
+      messageId,
       path: "file:///fileName.pdf"
     })
   );
@@ -50,7 +52,7 @@ const renderScreen = (
   );
 
   return renderScreenWithNavigationStoreContext(
-    MessageAttachment,
+    MessageAttachmentScreen,
     MESSAGES_ROUTES.MESSAGE_DETAIL_ATTACHMENT,
     { messageId, attachmentId, isPN: false, serviceId },
     store
diff --git a/ts/features/messages/screens/__tests__/MessageDetailsScreen.test.tsx b/ts/features/messages/screens/__tests__/MessageDetailsScreen.test.tsx
new file mode 100644
index 00000000000..c9c8f6b3191
--- /dev/null
+++ b/ts/features/messages/screens/__tests__/MessageDetailsScreen.test.tsx
@@ -0,0 +1,172 @@
+import { Action, Store, createStore } from "redux";
+import { MESSAGES_ROUTES } from "../../navigation/routes";
+import { GlobalState } from "../../../../store/reducers/types";
+import { appReducer } from "../../../../store/reducers";
+import { MessageDetailsScreen } from "../MessageDetailsScreen";
+import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
+import { reproduceSequence } from "../../../../utils/tests";
+import {
+  loadMessageById,
+  loadMessageDetails,
+  loadThirdPartyMessage
+} from "../../../messages/store/actions";
+import {
+  toUIMessage,
+  toUIMessageDetails
+} from "../../../messages/store/reducers/transformers";
+import {
+  messageWithExpairedPayment,
+  messageWithValidPayment,
+  message_1
+} from "../../../messages/__mocks__/message";
+import { loadServiceDetail } from "../../../../store/actions/services";
+import { service_1 } from "../../../messages/__mocks__/messages";
+import { applicationChangeState } from "../../../../store/actions/application";
+import { ThirdPartyMessageWithContent } from "../../../../../definitions/backend/ThirdPartyMessageWithContent";
+import { ATTACHMENT_CATEGORY } from "../../types/attachmentCategory";
+import { ThirdPartyAttachment } from "../../../../../definitions/backend/ThirdPartyAttachment";
+import { UIMessageId } from "../../types";
+
+export const thirdPartyMessage: ThirdPartyMessageWithContent = {
+  ...message_1,
+  created_at: new Date("2020-01-01T00:00:00.000Z"),
+  third_party_message: {
+    attachments: [
+      {
+        id: "1",
+        name: "A First Attachment",
+        content_type: "application/pdf",
+        category: ATTACHMENT_CATEGORY.DOCUMENT,
+        url: "/resource/attachment1.pdf"
+      },
+      {
+        id: "2",
+        name: "A Second Attachment",
+        content_type: "application/pdf",
+        category: ATTACHMENT_CATEGORY.DOCUMENT,
+        url: "/resource/attachment2.pdf"
+      }
+    ] as Array<ThirdPartyAttachment>
+  }
+};
+
+describe("MessageDetailsScreen", () => {
+  it("should display the attachment tag if there are attachments", () => {
+    const sequenceOfActions: ReadonlyArray<Action> = [
+      applicationChangeState("active"),
+      loadMessageById.success(toUIMessage(message_1)),
+      loadServiceDetail.success(service_1),
+      loadMessageDetails.success(
+        toUIMessageDetails(messageWithExpairedPayment)
+      ),
+      loadThirdPartyMessage.success({
+        id: message_1.id as UIMessageId,
+        content: thirdPartyMessage
+      })
+    ];
+
+    const state: GlobalState = reproduceSequence(
+      {} as GlobalState,
+      appReducer,
+      sequenceOfActions
+    );
+    const store: Store<GlobalState> = createStore(appReducer, state as any);
+
+    const { component } = renderComponent(store);
+    expect(component.queryByTestId("attachment-tag")).not.toBeNull();
+  });
+
+  it("should NOT display the attachment tag if there are no attachments", () => {
+    const sequenceOfActions: ReadonlyArray<Action> = [
+      applicationChangeState("active"),
+      loadMessageById.success(toUIMessage(message_1)),
+      loadServiceDetail.success(service_1),
+      loadMessageDetails.success(
+        toUIMessageDetails(messageWithExpairedPayment)
+      ),
+      loadThirdPartyMessage.success({
+        id: message_1.id as UIMessageId,
+        content: {
+          ...thirdPartyMessage,
+          third_party_message: {
+            attachments: []
+          }
+        }
+      })
+    ];
+
+    const state: GlobalState = reproduceSequence(
+      {} as GlobalState,
+      appReducer,
+      sequenceOfActions
+    );
+    const store: Store<GlobalState> = createStore(appReducer, state as any);
+
+    const { component } = renderComponent(store);
+    expect(component.queryByTestId("attachment-tag")).toBeNull();
+  });
+
+  it("should display the alert banner if the payment is expiring", () => {
+    const next7Days = new Date(new Date().setDate(new Date().getDate() + 7));
+
+    const sequenceOfActions: ReadonlyArray<Action> = [
+      applicationChangeState("active"),
+      loadMessageById.success(toUIMessage(message_1)),
+      loadServiceDetail.success(service_1),
+      loadMessageDetails.success(
+        toUIMessageDetails({
+          ...messageWithValidPayment,
+          content: {
+            ...messageWithValidPayment.content,
+            due_date: next7Days
+          }
+        })
+      )
+    ];
+
+    const state: GlobalState = reproduceSequence(
+      {} as GlobalState,
+      appReducer,
+      sequenceOfActions
+    );
+    const store: Store<GlobalState> = createStore(appReducer, state as any);
+
+    const { component } = renderComponent(store);
+    expect(component.queryByTestId("due-date-alert")).toBeNull();
+  });
+
+  it("should NOT display the alert banner if the payment is NOT expiring", () => {
+    const sequenceOfActions: ReadonlyArray<Action> = [
+      applicationChangeState("active"),
+      loadMessageById.success(toUIMessage(message_1)),
+      loadServiceDetail.success(service_1),
+      loadMessageDetails.success(toUIMessageDetails(messageWithValidPayment))
+    ];
+
+    const state: Partial<GlobalState> = reproduceSequence(
+      {} as GlobalState,
+      appReducer,
+      sequenceOfActions
+    );
+    const store: Store<GlobalState> = createStore(appReducer, state as any);
+
+    const { component } = renderComponent(store);
+    expect(component.queryByTestId("due-date-alert")).toBeNull();
+  });
+});
+
+const renderComponent = (store: Store<GlobalState>) => {
+  const { id, sender_service_id } = message_1;
+
+  return {
+    component: renderScreenWithNavigationStoreContext<GlobalState>(
+      MessageDetailsScreen,
+      MESSAGES_ROUTES.MESSAGE_DETAIL,
+      {
+        messageId: id,
+        serviceId: sender_service_id
+      },
+      store
+    )
+  };
+};
diff --git a/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap b/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap
index 18daafbbdfa..1084341ee88 100644
--- a/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap
+++ b/ts/features/messages/screens/__tests__/__snapshots__/MessageAttachment.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MessageAttachment Should match the snapshot when there is an error 1`] = `
+exports[`MessageAttachment Should match the snapshot when everything went fine 1`] = `
 <View
   style={
     Object {
@@ -20,726 +20,973 @@ exports[`MessageAttachment Should match the snapshot when there is an error 1`]
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
-      <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
+      <RNSScreenContainer
         onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
-      >
-        <View
-          accessibilityRole="header"
-          style={
-            Array [
-              Object {
-                "backgroundColor": "#FFFFFF",
-              },
-              Object {
-                "borderBottomWidth": 1,
-              },
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderColor": "transparent",
-              },
-            ]
-          }
-        >
-          <View
-            style={
-              Array [
-                Object {
-                  "marginTop": 20,
-                },
-                Object {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "flexGrow": 1,
-                  "height": 56,
-                  "justifyContent": "space-between",
-                  "paddingHorizontal": 24,
-                },
-              ]
-            }
-          >
-            <View
-              accessibilityLabel="Back"
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "disabled": false,
-                }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              hitSlop={8}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-            >
-              <View
-                style={
-                  Array [
-                    Object {
-                      "height": 24,
-                      "width": 24,
-                    },
-                    Object {
-                      "alignItems": "center",
-                    },
-                    Object {
-                      "justifyContent": "center",
-                    },
-                    Object {
-                      "transform": Array [
-                        Object {
-                          "scale": undefined,
-                        },
-                      ],
-                    },
-                  ]
-                }
-              >
-                <RNSVGSvgView
-                  accessibilityElementsHidden={true}
-                  accessibilityLabel=""
-                  accessible={false}
-                  align="xMidYMid"
-                  animatedProps={
-                    Object {
-                      "color": undefined,
-                    }
-                  }
-                  bbHeight={24}
-                  bbWidth={24}
-                  color={4279111443}
-                  focusable={false}
-                  height={24}
-                  importantForAccessibility="no-hide-descendants"
-                  meetOrSlice={0}
-                  minX={0}
-                  minY={0}
-                  style={
-                    Array [
-                      Object {
-                        "backgroundColor": "transparent",
-                        "borderWidth": 0,
-                      },
-                      Object {
-                        "color": "#0E0F13",
-                      },
-                      Object {
-                        "flex": 0,
-                        "height": 24,
-                        "width": 24,
-                      },
-                    ]
-                  }
-                  tintColor={4279111443}
-                  vbHeight={24}
-                  vbWidth={24}
-                  width={24}
-                >
-                  <RNSVGGroup>
-                    <RNSVGPath
-                      clipRule={0}
-                      d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
-                      fill={
-                        Array [
-                          2,
-                        ]
-                      }
-                      fillRule={0}
-                      propList={
-                        Array [
-                          "fill",
-                          "fillRule",
-                        ]
-                      }
-                    />
-                  </RNSVGGroup>
-                </RNSVGSvgView>
-              </View>
-            </View>
-            <Text
-              numberOfLines={1}
-              style={
-                Array [
-                  Object {
-                    "flexGrow": 1,
-                    "flexShrink": 1,
-                    "fontSize": 14,
-                    "marginHorizontal": 16,
-                    "textAlign": "center",
-                  },
-                  Object {
-                    "fontFamily": "Titillium Web",
-                    "fontStyle": "normal",
-                    "fontWeight": "600",
-                  },
-                  Object {
-                    "opacity": 1,
-                  },
-                ]
-              }
-            >
-              PDF Preview
-            </Text>
-            <View
-              style={
-                Array [
-                  Object {
-                    "flexDirection": "row",
-                  },
-                  Object {
-                    "flexShrink": 0,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="Contextual Help"
-                accessibilityRole="button"
-                accessibilityState={
-                  Object {
-                    "disabled": false,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                hitSlop={8}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-              >
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "height": 24,
-                        "width": 24,
-                      },
-                      Object {
-                        "alignItems": "center",
-                      },
-                      Object {
-                        "justifyContent": "center",
-                      },
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scale": undefined,
-                          },
-                        ],
-                      },
-                    ]
-                  }
-                >
-                  <RNSVGSvgView
-                    accessibilityElementsHidden={true}
-                    accessibilityLabel=""
-                    accessible={false}
-                    align="xMidYMid"
-                    animatedProps={
-                      Object {
-                        "color": undefined,
-                      }
-                    }
-                    bbHeight={24}
-                    bbWidth={24}
-                    color={4279111443}
-                    focusable={false}
-                    height={24}
-                    importantForAccessibility="no-hide-descendants"
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      Array [
-                        Object {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        Object {
-                          "color": "#0E0F13",
-                        },
-                        Object {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    tintColor={4279111443}
-                    vbHeight={24}
-                    vbWidth={24}
-                    width={24}
-                  >
-                    <RNSVGGroup>
-                      <RNSVGPath
-                        d="M6 8c0-3.31371 2.68629-6 6-6 3.3137 0 6 2.68629 6 6 0 2.7248-1.8172 5.0278-4.3079 5.7583C12.3754 14.1446 11 15.2973 11 17v1c0 .5523.4477 1 1 1s1-.4477 1-1v-1c0-.5064.452-1.087 1.255-1.3225C17.5744 14.7039 20 11.6365 20 8c0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 .55228.44772 1 1 1s1-.44772 1-1Zm7.5 14.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z"
-                        fill={
-                          Array [
-                            2,
-                          ]
-                        }
-                        propList={
-                          Array [
-                            "fill",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "flex": 1,
           }
         }
       >
-        <View
+        <RNSModalScreen
+          activityState={2}
           collapsable={false}
-          style={
+          forwardedRef={[Function]}
+          gestureResponseDistance={
             Object {
-              "opacity": 1,
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
             }
           }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          onGestureCancel={[Function]}
           pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
           style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
             Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={1}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={3}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
-                    <RCTSafeAreaView
-                      emulateUnlessSupported={true}
+                    <View
                       style={
                         Object {
-                          "flexGrow": 1,
-                          "marginHorizontal": 24,
+                          "flex": 1,
                         }
                       }
                     >
-                      <RCTScrollView
-                        centerContent={true}
-                        collapsable={false}
-                        contentContainerStyle={
-                          Array [
-                            Object {
-                              "alignContent": "center",
-                              "alignItems": "stretch",
-                              "flex": 1,
-                              "justifyContent": "center",
-                            },
-                            false,
-                          ]
-                        }
-                        handlerTag={2}
-                        handlerType="NativeViewGestureHandler"
-                        onGestureHandlerEvent={[Function]}
-                        onGestureHandlerStateChange={[Function]}
-                        waitFor={
-                          Array [
-                            Object {
-                              "current": null,
-                            },
-                          ]
+                      <View
+                        style={
+                          Object {
+                            "flex": 1,
+                          }
                         }
+                        testID="overlayComponent"
                       >
-                        <View>
+                        <View
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "#FFFFFF",
+                                "bottom": 0,
+                                "inset": 0,
+                                "justifyContent": "center",
+                                "left": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                                "zIndex": 1,
+                              },
+                              Object {
+                                "backgroundColor": "rgba(255,255,255,0.7)",
+                                "opacity": 1,
+                              },
+                            ]
+                          }
+                        >
                           <View
                             style={
-                              Object {
-                                "alignItems": "center",
-                              }
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "flex": 1,
+                                  "height": 100,
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
                             }
                           >
-                            <RNSVGSvgView
-                              align="xMidYMid"
-                              bbHeight={120}
-                              bbWidth={120}
-                              color={4278240714}
-                              focusable={false}
-                              height={120}
-                              meetOrSlice={0}
-                              minX={0}
-                              minY={0}
+                            <View
+                              accessibilityRole="progressbar"
+                              accessible={true}
+                              importantForAccessibility="no-hide-descendants"
                               style={
-                                Array [
-                                  Object {
-                                    "backgroundColor": "transparent",
-                                    "borderWidth": 0,
-                                  },
-                                  Object {
-                                    "flex": 0,
-                                    "height": 120,
-                                    "width": 120,
-                                  },
-                                ]
+                                Object {
+                                  "height": 24,
+                                  "width": 24,
+                                }
                               }
-                              tintColor={4278240714}
-                              vbHeight={240}
-                              vbWidth={240}
-                              width={120}
+                              testID="LoadingSpinnerTestID"
                             >
-                              <RNSVGGroup>
-                                <RNSVGPath
-                                  d="M107.085-.00176c8.154 4.82452 16.613 7.64993 26.423 5.57086.846 1.7059 1.647 3.27854 2.412 4.8689 4.086 8.5651 9.458 16.0907 17.405 21.6793 6.048 4.2559 12.878 6.2728 20.51 7.339 1.008 3.6517 1.818 7.3922 3.078 10.9817 5.993 17.0858 17.144 29.2581 34.774 35.1577.855.2844 1.656.7197 2.835 1.2439-.702 18.9514 6.857 33.6914 23.786 43.3314-2.637 8.77-2.979 17.193 1.701 25.438-4.617 2.275-9.333 1.342-13.779 1.253-24.344-.462-47.364-6.095-68.225-18.792-25.352-15.424-44.395-36.455-55.222-64.0336-9.3681-23.8471-8.1172-47.641 2.457-70.95509.432-.95957 1.089-1.82141 1.863-3.10084l-.018.01777Z"
-                                  fill={4289392367}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
+                              <View
+                                collapsable={false}
+                                style={
+                                  Object {
+                                    "transform": Array [
+                                      Object {
+                                        "rotateZ": "0deg",
+                                      },
+                                    ],
                                   }
-                                />
-                                <RNSVGPath
-                                  clipRule={0}
-                                  d="M109.854 11.4438c.308-.7527 1.174-1.1168 1.936-.8134 5.193 2.0678 10.161 3.0476 15.22 3.0476.402 0 .773-.0003 1.13-.0163.594-.0266 1.147.2986 1.406.8271 5.076 10.3451 11.441 18.072 19.412 23.6721 5.074 3.5598 10.843 6.0292 17.921 7.5916.544.12.974.5301 1.115 1.0626.528 1.9974 1.092 4.0131 1.81 6.0443l.001.0035c6.628 18.908 18.825 31.837 36.306 38.6155.542.2103.91.7141.942 1.2888.921 16.9038 8.391 30.6088 21.912 40.2658.666.475.815 1.394.334 2.051-.482.658-1.412.806-2.077.33-14.018-10.012-21.89-24.212-23.082-41.5496-17.882-7.2088-30.368-20.7035-37.146-40.0383-.65-1.8408-1.176-3.6538-1.649-5.407-7.018-1.6462-12.891-4.2005-18.11-7.8623l-.001-.0006c-8.22-5.7753-14.755-13.644-19.945-23.9397-.09.0003-.178.0003-.264.0003h-.015c-5.47 0-10.815-1.0638-16.332-3.2608-.762-.3034-1.131-1.1596-.824-1.9122Z"
-                                  fill={4278240714}
-                                  fillRule={0}
-                                  propList={
+                                }
+                                testID="LoadingSpinnerAnimatedTestID"
+                              >
+                                <RNSVGSvgView
+                                  align="xMidYMid"
+                                  bbHeight={24}
+                                  bbWidth={24}
+                                  fill="none"
+                                  focusable={false}
+                                  height={24}
+                                  meetOrSlice={0}
+                                  minX={0}
+                                  minY={0}
+                                  style={
                                     Array [
-                                      "fill",
-                                      "fillRule",
+                                      Object {
+                                        "backgroundColor": "transparent",
+                                        "borderWidth": 0,
+                                      },
+                                      Object {
+                                        "flex": 0,
+                                        "height": 24,
+                                        "width": 24,
+                                      },
                                     ]
                                   }
-                                />
-                                <RNSVGPath
-                                  d="M30.7695 235.468c-6.1197-6.042-6.1197-15.869 0-21.911l17.2971-17.077 3.8158 3.768-17.2971 17.077c-4.0138 3.962-4.0138 10.413 0 14.375 4.0138 3.963 10.5474 3.963 14.5612 0l3.8158 3.768c-6.1196 6.041-16.0731 6.041-22.1928 0ZM128.876 111.262l-32.2061 31.797 3.8181 3.769 32.207-31.796-3.819-3.77Z"
-                                  fill={4289392367}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
+                                  vbHeight={24}
+                                  vbWidth={24}
+                                  width={24}
+                                >
+                                  <RNSVGGroup
+                                    fill={null}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  >
+                                    <RNSVGDefs>
+                                      <RNSVGLinearGradient
+                                        gradient={
+                                          Array [
+                                            0,
+                                            736995,
+                                            1,
+                                            -16040221,
+                                          ]
+                                        }
+                                        gradientTransform={null}
+                                        gradientUnits={0}
+                                        name="spinner-secondHalf"
+                                        x1="0%"
+                                        x2="100%"
+                                        y1="0%"
+                                        y2="0%"
+                                      />
+                                      <RNSVGLinearGradient
+                                        gradient={
+                                          Array [
+                                            0,
+                                            -16040221,
+                                            1,
+                                            -16040221,
+                                          ]
+                                        }
+                                        gradientTransform={null}
+                                        gradientUnits={0}
+                                        name="spinner-firstHalf"
+                                        x1="0%"
+                                        x2="100%"
+                                        y1="0%"
+                                        y2="0%"
+                                      />
+                                    </RNSVGDefs>
+                                    <RNSVGGroup
+                                      fill={
+                                        Object {
+                                          "payload": 4278190080,
+                                          "type": 0,
+                                        }
+                                      }
+                                      propList={
+                                        Array [
+                                          "strokeWidth",
+                                        ]
+                                      }
+                                      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-firstHalf",
+                                            "type": 1,
+                                          }
+                                        }
+                                      />
+                                      <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",
+                                            "strokeLinecap",
+                                          ]
+                                        }
+                                        stroke={
+                                          Object {
+                                            "payload": 4278927075,
+                                            "type": 0,
+                                          }
+                                        }
+                                        strokeLinecap={1}
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGGroup>
+                                </RNSVGSvgView>
+                              </View>
+                            </View>
+                            <View
+                              style={
+                                Object {
+                                  "padding": 24,
+                                }
+                              }
+                            >
+                              <Text
+                                accessible={true}
+                                color="bluegrey"
+                                defaultColor="bluegrey"
+                                defaultWeight="Regular"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 16,
+                                    "lineHeight": 24,
                                   }
-                                />
-                                <RNSVGPath
-                                  d="M3.29384 203.162 0 200.523c7.29864-8.876 71.8704-86.54 93.2353-79.565 5.8317 1.901 9.3057 4.949 10.3407 9.045 2.232 8.894-8.2168 19.636-13.2385 24.798l-.9.924-3.0778-2.888.9089-.942c4.1488-4.264 13.8504-14.242 12.1764-20.888-.6569-2.612-3.1948-4.656-7.5506-6.068-7.7126-2.515-37.6721 16.232-88.60056 78.223Z"
-                                  fill={4278927075}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "textAlign": "center",
+                                    },
+                                    Object {
+                                      "fontSize": 16,
+                                      "lineHeight": 24,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Loading document...
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            Array [
+                              Object {
+                                "flex": 1,
+                              },
+                              Object {
+                                "zIndex": 0,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="Preview of the PDF document"
+                            accessible={true}
+                            style={
+                              Object {
+                                "flex": 1,
+                              }
+                            }
+                          />
+                        </View>
+                      </View>
+                      <View
+                        pointerEvents="box-none"
+                        style={
+                          Object {
+                            "marginTop": -50,
+                            "overflow": "hidden",
+                            "paddingTop": 50,
+                            "width": "100%",
+                          }
+                        }
+                        testID="FooterWithButtons"
+                      >
+                        <View
+                          onLayout={[Function]}
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "#FFFFFF",
+                                "elevation": 20,
+                                "paddingHorizontal": 24,
+                                "shadowColor": "#0E0F13",
+                                "shadowOffset": Object {
+                                  "height": 50,
+                                  "width": 0,
+                                },
+                                "shadowOpacity": 0.5,
+                                "shadowRadius": 37,
+                              },
+                              Object {
+                                "paddingBottom": 16,
+                                "paddingTop": 16,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "flexDirection": "row",
+                              }
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "alignContent": "center",
+                                  "flex": 1,
+                                  "justifyContent": "center",
+                                }
+                              }
+                            >
+                              <View
+                                accessibilityLabel="Save or share document"
+                                accessibilityRole="button"
+                                accessibilityState={
+                                  Object {
+                                    "busy": false,
+                                    "disabled": false,
                                   }
-                                />
-                                <RNSVGPath
-                                  d="M92.4699 174.411c-9.5755 2.506-18.6921-2.95-22.8319-7.881-3.3478-3.989-2.8888-9.889 1.062-13.434 4.5627-4.096 12.5813-5.091 21.4009 4.389l-3.1228 2.835c-5.7057-6.131-11.4565-7.677-15.4163-4.123-2.2589 2.035-2.5468 5.393-.6479 7.659 4.0588 4.833 13.9133 10.324 23.1378 4.442 2.7899-1.777 4.3733-4.016 4.8413-6.85 1.251-7.623-6.0472-16.721-6.1192-16.81l3.3028-2.63c.351.426 8.5584 10.617 7.0104 20.089-.657 4.016-2.916 7.285-6.7314 9.72-1.9439 1.244-3.9148 2.079-5.8677 2.594h-.018Z"
-                                  fill={4278927075}
-                                  propList={
+                                }
+                                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 [
-                                      "fill",
+                                      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,
+                                          },
+                                        ],
+                                      },
                                     ]
                                   }
-                                />
-                                <RNSVGPath
-                                  d="M79.0336 194.02c-5.1568 1.351-10.0885.48-14.4803-2.612-4.3558-3.065-6.5517-6.726-6.5337-10.884.036-9.125 11.1415-16.935 11.6185-17.254l2.4388 3.429c-2.7178 1.893-9.7915 8.077-9.8095 13.852 0 2.754 1.548 5.189 4.7518 7.445 4.4638 3.137 9.5305 3.252 15.0742.329 8.7116-4.602 15.0563-15.06 14.9123-19.591l4.2383-.134c.207 6.531-7.2442 18.179-17.1527 23.412-1.7009.898-3.3928 1.564-5.0667 2.008h.009Z"
-                                  fill={4278927075}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
+                                >
+                                  <View
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "flexDirection": "row",
+                                          "justifyContent": "center",
+                                        },
+                                        false,
+                                      ]
+                                    }
+                                  >
+                                    <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"
+                                    >
+                                      Save or share
+                                    </Text>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                    <View
+                      collapsable={false}
+                      pointerEvents="box-none"
+                      style={Object {}}
+                    >
+                      <View
+                        accessibilityElementsHidden={false}
+                        importantForAccessibility="auto"
+                        onLayout={[Function]}
+                        pointerEvents="box-none"
+                        style={null}
+                      >
+                        <View
+                          accessibilityRole="header"
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "#FFFFFF",
+                              },
+                              Object {
+                                "borderBottomWidth": 1,
+                              },
+                              Object {
+                                "backgroundColor": "#FFFFFF",
+                                "borderColor": "transparent",
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "marginTop": 0,
+                                },
+                                Object {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "flexGrow": 1,
+                                  "height": 56,
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 24,
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              accessibilityLabel="Back"
+                              accessibilityRole="button"
+                              accessibilityState={
+                                Object {
+                                  "disabled": false,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              hitSlop={8}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                    Object {
+                                      "alignItems": "center",
+                                    },
+                                    Object {
+                                      "justifyContent": "center",
+                                    },
+                                    Object {
+                                      "transform": Array [
+                                        Object {
+                                          "scale": undefined,
+                                        },
+                                      ],
+                                    },
+                                  ]
+                                }
+                              >
+                                <RNSVGSvgView
+                                  accessibilityElementsHidden={true}
+                                  accessibilityLabel=""
+                                  accessible={false}
+                                  align="xMidYMid"
+                                  animatedProps={
+                                    Object {
+                                      "color": undefined,
+                                    }
                                   }
-                                />
-                                <RNSVGPath
-                                  d="M67.0458 207.463c-8.3696 2.185-15.1102-.391-19.169-7.437-3.1769-5.517-3.7979-10.422-1.827-14.571 3.4469-7.268 13.5624-9.125 13.9853-9.205l.747 4.123c-.072.008-8.3876 1.563-10.8894 6.868-1.35 2.843-.783 6.45 1.6739 10.715 3.5278 6.122 9.0985 7.632 17.0181 4.611 6.0477-2.301 11.3664-6.655 15.3892-12.581l3.6359-5.357 3.5278 2.327-3.6358 5.367c-4.5088 6.646-10.5205 11.541-17.3872 14.154-1.0439.399-2.0699.728-3.0688.986Z"
-                                  fill={4278927075}
-                                  propList={
+                                  bbHeight={24}
+                                  bbWidth={24}
+                                  focusable={false}
+                                  height={24}
+                                  importantForAccessibility="no-hide-descendants"
+                                  meetOrSlice={0}
+                                  minX={0}
+                                  minY={0}
+                                  style={
                                     Array [
-                                      "fill",
+                                      Object {
+                                        "backgroundColor": "transparent",
+                                        "borderWidth": 0,
+                                      },
+                                      Object {
+                                        "color": "#0E0F13",
+                                      },
+                                      Object {
+                                        "flex": 0,
+                                        "height": 24,
+                                        "width": 24,
+                                      },
                                     ]
                                   }
-                                />
-                                <RNSVGPath
-                                  d="m53.3313 224.754-3.0598-2.905c22.9668-23.501 15.4252-17.495 15.6232-17.832l3.6808 2.079c-.189.337 7.0917-5.225-16.2442 18.658Z"
-                                  fill={4278927075}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
+                                  tintColor="#0E0F13"
+                                  vbHeight={24}
+                                  vbWidth={24}
+                                  width={24}
+                                >
+                                  <RNSVGGroup
+                                    fill={
+                                      Object {
+                                        "payload": 4278190080,
+                                        "type": 0,
+                                      }
+                                    }
+                                  >
+                                    <RNSVGPath
+                                      clipRule={0}
+                                      d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
+                                      fill={
+                                        Object {
+                                          "type": 2,
+                                        }
+                                      }
+                                      fillRule={0}
+                                      propList={
+                                        Array [
+                                          "fill",
+                                          "fillRule",
+                                        ]
+                                      }
+                                    />
+                                  </RNSVGGroup>
+                                </RNSVGSvgView>
+                              </View>
+                            </View>
+                            <View
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessibilityRole="header"
+                              accessible={false}
+                              importantForAccessibility="no-hide-descendants"
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "marginHorizontal": 16,
+                                }
+                              }
+                            >
+                              <Text
+                                accessible={false}
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "textAlign": "center",
+                                    },
+                                    Object {
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                    Object {
+                                      "opacity": 1,
+                                    },
+                                  ]
+                                }
+                              />
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "flexDirection": "row",
+                                  },
+                                  Object {
+                                    "flexShrink": 0,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                accessibilityLabel="Contextual Help"
+                                accessibilityRole="button"
+                                accessibilityState={
+                                  Object {
+                                    "disabled": false,
                                   }
-                                />
-                                <RNSVGPath
-                                  clipRule={0}
-                                  d="M93.3641 80.6211c.542.6099.4808 1.5383-.1366 2.0737L59.0022 112.37c-.6174.536-1.5573.475-2.0993-.134-.542-.61-.4809-1.539.1365-2.074l34.2253-29.6758c.6175-.5353 1.5574-.4749 2.0994.1349ZM145.714 157.555c.542.61.481 1.538-.137 2.073l-34.225 29.676c-.618.535-1.558.475-2.1-.135s-.48-1.538.137-2.073l34.225-29.676c.618-.536 1.558-.475 2.1.135Z"
-                                  fill={4278240714}
-                                  fillRule={0}
-                                  propList={
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={8}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                              >
+                                <View
+                                  style={
                                     Array [
-                                      "fill",
-                                      "fillRule",
+                                      Object {
+                                        "height": 24,
+                                        "width": 24,
+                                      },
+                                      Object {
+                                        "alignItems": "center",
+                                      },
+                                      Object {
+                                        "justifyContent": "center",
+                                      },
+                                      Object {
+                                        "transform": Array [
+                                          Object {
+                                            "scale": undefined,
+                                          },
+                                        ],
+                                      },
                                     ]
                                   }
-                                />
-                              </RNSVGGroup>
-                            </RNSVGSvgView>
-                            <View
-                              style={
-                                Object {
-                                  "height": 24,
-                                }
-                              }
-                            />
+                                >
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    animatedProps={
+                                      Object {
+                                        "color": undefined,
+                                      }
+                                    }
+                                    bbHeight={24}
+                                    bbWidth={24}
+                                    focusable={false}
+                                    height={24}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "color": "#0E0F13",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 24,
+                                          "width": 24,
+                                        },
+                                      ]
+                                    }
+                                    tintColor="#0E0F13"
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={24}
+                                  >
+                                    <RNSVGGroup
+                                      fill={
+                                        Object {
+                                          "payload": 4278190080,
+                                          "type": 0,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGPath
+                                        d="M6 8c0-3.31371 2.68629-6 6-6 3.3137 0 6 2.68629 6 6 0 2.7248-1.8172 5.0278-4.3079 5.7583C12.3754 14.1446 11 15.2973 11 17v1c0 .5523.4477 1 1 1s1-.4477 1-1v-1c0-.5064.452-1.087 1.255-1.3225C17.5744 14.7039 20 11.6365 20 8c0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 .55228.44772 1 1 1s1-.44772 1-1Zm7.5 14.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z"
+                                        fill={
+                                          Object {
+                                            "type": 2,
+                                          }
+                                        }
+                                        propList={
+                                          Array [
+                                            "fill",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                              </View>
+                            </View>
                           </View>
-                          <Text
-                            allowFontScaling={false}
-                            color="bluegreyDark"
-                            defaultColor="bluegreyDark"
-                            defaultWeight="SemiBold"
-                            font="TitilliumWeb"
-                            fontStyle={
-                              Object {
-                                "fontSize": 24,
-                                "lineHeight": 34,
-                              }
-                            }
-                            style={
-                              Array [
-                                Object {
-                                  "textAlign": "center",
-                                },
-                                Object {
-                                  "fontSize": 24,
-                                  "lineHeight": 34,
-                                },
-                                Object {
-                                  "color": "#17324D",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "600",
-                                },
-                              ]
-                            }
-                            weight="SemiBold"
-                          >
-                            There is a temporary problem, please try again.
-                          </Text>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <Text
-                            color="grey-650"
-                            defaultColor="blue"
-                            defaultWeight="Bold"
-                            font="TitilliumWeb"
-                            fontStyle={
-                              Object {
-                                "fontSize": 14,
-                                "lineHeight": 21,
-                              }
-                            }
-                            style={
-                              Array [
-                                Object {
-                                  "textAlign": "center",
-                                },
-                                Object {
-                                  "fontSize": 14,
-                                  "lineHeight": 21,
-                                },
-                                Object {
-                                  "color": "#636B82",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "400",
-                                },
-                              ]
-                            }
-                            weight="Regular"
-                          >
-                            If the problem is not resolved, report it with the '?' icon at the top right, thank you!
-                          </Text>
                         </View>
-                      </RCTScrollView>
-                    </RCTSafeAreaView>
+                      </View>
+                    </View>
                   </View>
                 </View>
               </View>
             </View>
           </View>
-        </View>
-      </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "height": 44,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 1,
+          }
+        }
+      />
     </View>
   </RNCSafeAreaProvider>
 </View>
 `;
 
-exports[`MessageAttachment Should match the snapshot when everything went fine 1`] = `
+exports[`MessageAttachment Should match the snapshot when there is an error 1`] = `
 <View
   style={
     Object {
@@ -759,466 +1006,168 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
-      <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
+      <RNSScreenContainer
         onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
-      >
-        <View
-          accessibilityRole="header"
-          style={
-            Array [
-              Object {
-                "backgroundColor": "#FFFFFF",
-              },
-              Object {
-                "borderBottomWidth": 1,
-              },
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderColor": "transparent",
-              },
-            ]
-          }
-        >
-          <View
-            style={
-              Array [
-                Object {
-                  "marginTop": 20,
-                },
-                Object {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "flexGrow": 1,
-                  "height": 56,
-                  "justifyContent": "space-between",
-                  "paddingHorizontal": 24,
-                },
-              ]
-            }
-          >
-            <View
-              accessibilityLabel="Back"
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "disabled": false,
-                }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              hitSlop={8}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-            >
-              <View
-                style={
-                  Array [
-                    Object {
-                      "height": 24,
-                      "width": 24,
-                    },
-                    Object {
-                      "alignItems": "center",
-                    },
-                    Object {
-                      "justifyContent": "center",
-                    },
-                    Object {
-                      "transform": Array [
-                        Object {
-                          "scale": undefined,
-                        },
-                      ],
-                    },
-                  ]
-                }
-              >
-                <RNSVGSvgView
-                  accessibilityElementsHidden={true}
-                  accessibilityLabel=""
-                  accessible={false}
-                  align="xMidYMid"
-                  animatedProps={
-                    Object {
-                      "color": undefined,
-                    }
-                  }
-                  bbHeight={24}
-                  bbWidth={24}
-                  color={4279111443}
-                  focusable={false}
-                  height={24}
-                  importantForAccessibility="no-hide-descendants"
-                  meetOrSlice={0}
-                  minX={0}
-                  minY={0}
-                  style={
-                    Array [
-                      Object {
-                        "backgroundColor": "transparent",
-                        "borderWidth": 0,
-                      },
-                      Object {
-                        "color": "#0E0F13",
-                      },
-                      Object {
-                        "flex": 0,
-                        "height": 24,
-                        "width": 24,
-                      },
-                    ]
-                  }
-                  tintColor={4279111443}
-                  vbHeight={24}
-                  vbWidth={24}
-                  width={24}
-                >
-                  <RNSVGGroup>
-                    <RNSVGPath
-                      clipRule={0}
-                      d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
-                      fill={
-                        Array [
-                          2,
-                        ]
-                      }
-                      fillRule={0}
-                      propList={
-                        Array [
-                          "fill",
-                          "fillRule",
-                        ]
-                      }
-                    />
-                  </RNSVGGroup>
-                </RNSVGSvgView>
-              </View>
-            </View>
-            <Text
-              numberOfLines={1}
-              style={
-                Array [
-                  Object {
-                    "flexGrow": 1,
-                    "flexShrink": 1,
-                    "fontSize": 14,
-                    "marginHorizontal": 16,
-                    "textAlign": "center",
-                  },
-                  Object {
-                    "fontFamily": "Titillium Web",
-                    "fontStyle": "normal",
-                    "fontWeight": "600",
-                  },
-                  Object {
-                    "opacity": 1,
-                  },
-                ]
-              }
-            >
-              PDF Preview
-            </Text>
-            <View
-              style={
-                Array [
-                  Object {
-                    "flexDirection": "row",
-                  },
-                  Object {
-                    "flexShrink": 0,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="Contextual Help"
-                accessibilityRole="button"
-                accessibilityState={
-                  Object {
-                    "disabled": false,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                hitSlop={8}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-              >
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "height": 24,
-                        "width": 24,
-                      },
-                      Object {
-                        "alignItems": "center",
-                      },
-                      Object {
-                        "justifyContent": "center",
-                      },
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scale": undefined,
-                          },
-                        ],
-                      },
-                    ]
-                  }
-                >
-                  <RNSVGSvgView
-                    accessibilityElementsHidden={true}
-                    accessibilityLabel=""
-                    accessible={false}
-                    align="xMidYMid"
-                    animatedProps={
-                      Object {
-                        "color": undefined,
-                      }
-                    }
-                    bbHeight={24}
-                    bbWidth={24}
-                    color={4279111443}
-                    focusable={false}
-                    height={24}
-                    importantForAccessibility="no-hide-descendants"
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      Array [
-                        Object {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        Object {
-                          "color": "#0E0F13",
-                        },
-                        Object {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    tintColor={4279111443}
-                    vbHeight={24}
-                    vbWidth={24}
-                    width={24}
-                  >
-                    <RNSVGGroup>
-                      <RNSVGPath
-                        d="M6 8c0-3.31371 2.68629-6 6-6 3.3137 0 6 2.68629 6 6 0 2.7248-1.8172 5.0278-4.3079 5.7583C12.3754 14.1446 11 15.2973 11 17v1c0 .5523.4477 1 1 1s1-.4477 1-1v-1c0-.5064.452-1.087 1.255-1.3225C17.5744 14.7039 20 11.6365 20 8c0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 .55228.44772 1 1 1s1-.44772 1-1Zm7.5 14.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z"
-                        fill={
-                          Array [
-                            2,
-                          ]
-                        }
-                        propList={
-                          Array [
-                            "fill",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "flex": 1,
           }
         }
       >
-        <View
+        <RNSModalScreen
+          activityState={2}
           collapsable={false}
-          style={
+          forwardedRef={[Function]}
+          gestureResponseDistance={
             Object {
-              "opacity": 1,
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
             }
           }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          onGestureCancel={[Function]}
           pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
           style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
             Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={3}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
@@ -1228,74 +1177,56 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1
                           "flex": 1,
                         }
                       }
-                      testID="overlayComponent"
                     >
-                      <View
+                      <RNCSafeAreaView
                         style={
-                          Array [
-                            Object {
-                              "backgroundColor": "#FFFFFF",
-                              "bottom": 0,
-                              "inset": 0,
-                              "justifyContent": "center",
-                              "left": 0,
-                              "position": "absolute",
-                              "right": 0,
-                              "top": 0,
-                              "zIndex": 1,
-                            },
-                            Object {
-                              "backgroundColor": "rgba(255,255,255,0.7)",
-                              "opacity": 1,
-                            },
-                          ]
+                          Object {
+                            "flexGrow": 1,
+                            "marginHorizontal": 24,
+                          }
                         }
                       >
-                        <View
-                          style={
+                        <RCTScrollView
+                          centerContent={true}
+                          collapsable={false}
+                          contentContainerStyle={
                             Array [
                               Object {
-                                "alignItems": "center",
+                                "alignContent": "center",
+                                "alignItems": "stretch",
                                 "flex": 1,
-                                "height": 100,
                                 "justifyContent": "center",
                               },
-                              undefined,
+                              false,
                             ]
                           }
-                        >
-                          <View
-                            accessibilityRole="progressbar"
-                            accessible={true}
-                            importantForAccessibility="no-hide-descendants"
-                            style={
+                          handlerTag={2}
+                          handlerType="NativeViewGestureHandler"
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          waitFor={
+                            Array [
                               Object {
-                                "height": 24,
-                                "width": 24,
-                              }
-                            }
-                            testID="LoadingSpinnerTestID"
-                          >
+                                "current": null,
+                              },
+                            ]
+                          }
+                        >
+                          <View>
                             <View
-                              collapsable={false}
                               style={
                                 Object {
-                                  "transform": Array [
-                                    Object {
-                                      "rotateZ": "0deg",
-                                    },
-                                  ],
+                                  "alignItems": "center",
                                 }
                               }
-                              testID="LoadingSpinnerAnimatedTestID"
                             >
                               <RNSVGSvgView
                                 align="xMidYMid"
-                                bbHeight={24}
-                                bbWidth={24}
-                                fill="none"
+                                bbHeight={120}
+                                bbWidth={120}
+                                color="#00C5CA"
                                 focusable={false}
-                                height={24}
+                                height={120}
                                 meetOrSlice={0}
                                 minX={0}
                                 minY={0}
@@ -1307,120 +1238,208 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1
                                     },
                                     Object {
                                       "flex": 0,
-                                      "height": 24,
-                                      "width": 24,
+                                      "height": 120,
+                                      "width": 120,
                                     },
                                   ]
                                 }
-                                vbHeight={24}
-                                vbWidth={24}
-                                width={24}
+                                tintColor="#00C5CA"
+                                vbHeight={240}
+                                vbWidth={240}
+                                width={120}
                               >
                                 <RNSVGGroup
-                                  fill={null}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
                                   }
                                 >
-                                  <RNSVGDefs>
-                                    <RNSVGLinearGradient
-                                      gradient={
-                                        Array [
-                                          0,
-                                          736995,
-                                          1,
-                                          -16040221,
-                                        ]
+                                  <RNSVGPath
+                                    d="M107.085-.00176c8.154 4.82452 16.613 7.64993 26.423 5.57086.846 1.7059 1.647 3.27854 2.412 4.8689 4.086 8.5651 9.458 16.0907 17.405 21.6793 6.048 4.2559 12.878 6.2728 20.51 7.339 1.008 3.6517 1.818 7.3922 3.078 10.9817 5.993 17.0858 17.144 29.2581 34.774 35.1577.855.2844 1.656.7197 2.835 1.2439-.702 18.9514 6.857 33.6914 23.786 43.3314-2.637 8.77-2.979 17.193 1.701 25.438-4.617 2.275-9.333 1.342-13.779 1.253-24.344-.462-47.364-6.095-68.225-18.792-25.352-15.424-44.395-36.455-55.222-64.0336-9.3681-23.8471-8.1172-47.641 2.457-70.95509.432-.95957 1.089-1.82141 1.863-3.10084l-.018.01777Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4289392367,
+                                        "type": 0,
                                       }
-                                      gradientTransform={null}
-                                      gradientUnits={0}
-                                      name="spinner-secondHalf"
-                                      x1="0%"
-                                      x2="100%"
-                                      y1="0%"
-                                      y2="0%"
-                                    />
-                                    <RNSVGLinearGradient
-                                      gradient={
-                                        Array [
-                                          0,
-                                          -16040221,
-                                          1,
-                                          -16040221,
-                                        ]
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M109.854 11.4438c.308-.7527 1.174-1.1168 1.936-.8134 5.193 2.0678 10.161 3.0476 15.22 3.0476.402 0 .773-.0003 1.13-.0163.594-.0266 1.147.2986 1.406.8271 5.076 10.3451 11.441 18.072 19.412 23.6721 5.074 3.5598 10.843 6.0292 17.921 7.5916.544.12.974.5301 1.115 1.0626.528 1.9974 1.092 4.0131 1.81 6.0443l.001.0035c6.628 18.908 18.825 31.837 36.306 38.6155.542.2103.91.7141.942 1.2888.921 16.9038 8.391 30.6088 21.912 40.2658.666.475.815 1.394.334 2.051-.482.658-1.412.806-2.077.33-14.018-10.012-21.89-24.212-23.082-41.5496-17.882-7.2088-30.368-20.7035-37.146-40.0383-.65-1.8408-1.176-3.6538-1.649-5.407-7.018-1.6462-12.891-4.2005-18.11-7.8623l-.001-.0006c-8.22-5.7753-14.755-13.644-19.945-23.9397-.09.0003-.178.0003-.264.0003h-.015c-5.47 0-10.815-1.0638-16.332-3.2608-.762-.3034-1.131-1.1596-.824-1.9122Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278240714,
+                                        "type": 0,
                                       }
-                                      gradientTransform={null}
-                                      gradientUnits={0}
-                                      name="spinner-firstHalf"
-                                      x1="0%"
-                                      x2="100%"
-                                      y1="0%"
-                                      y2="0%"
-                                    />
-                                  </RNSVGDefs>
-                                  <RNSVGGroup
+                                    }
+                                    fillRule={0}
                                     propList={
                                       Array [
-                                        "strokeWidth",
+                                        "fill",
+                                        "fillRule",
                                       ]
                                     }
-                                    strokeWidth={3}
-                                  >
-                                    <RNSVGPath
-                                      d="M 1.5 12 A 10.5 10.5 0 0 1 22.5 12"
-                                      propList={
-                                        Array [
-                                          "stroke",
-                                        ]
+                                  />
+                                  <RNSVGPath
+                                    d="M30.7695 235.468c-6.1197-6.042-6.1197-15.869 0-21.911l17.2971-17.077 3.8158 3.768-17.2971 17.077c-4.0138 3.962-4.0138 10.413 0 14.375 4.0138 3.963 10.5474 3.963 14.5612 0l3.8158 3.768c-6.1196 6.041-16.0731 6.041-22.1928 0ZM128.876 111.262l-32.2061 31.797 3.8181 3.769 32.207-31.796-3.819-3.77Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4289392367,
+                                        "type": 0,
                                       }
-                                      stroke={
-                                        Array [
-                                          1,
-                                          "spinner-secondHalf",
-                                        ]
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M3.29384 203.162 0 200.523c7.29864-8.876 71.8704-86.54 93.2353-79.565 5.8317 1.901 9.3057 4.949 10.3407 9.045 2.232 8.894-8.2168 19.636-13.2385 24.798l-.9.924-3.0778-2.888.9089-.942c4.1488-4.264 13.8504-14.242 12.1764-20.888-.6569-2.612-3.1948-4.656-7.5506-6.068-7.7126-2.515-37.6721 16.232-88.60056 78.223Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278927075,
+                                        "type": 0,
                                       }
-                                    />
-                                    <RNSVGPath
-                                      d="M 22.5 12 A 10.5 10.5 0 0 1 1.5 12"
-                                      propList={
-                                        Array [
-                                          "stroke",
-                                        ]
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M92.4699 174.411c-9.5755 2.506-18.6921-2.95-22.8319-7.881-3.3478-3.989-2.8888-9.889 1.062-13.434 4.5627-4.096 12.5813-5.091 21.4009 4.389l-3.1228 2.835c-5.7057-6.131-11.4565-7.677-15.4163-4.123-2.2589 2.035-2.5468 5.393-.6479 7.659 4.0588 4.833 13.9133 10.324 23.1378 4.442 2.7899-1.777 4.3733-4.016 4.8413-6.85 1.251-7.623-6.0472-16.721-6.1192-16.81l3.3028-2.63c.351.426 8.5584 10.617 7.0104 20.089-.657 4.016-2.916 7.285-6.7314 9.72-1.9439 1.244-3.9148 2.079-5.8677 2.594h-.018Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278927075,
+                                        "type": 0,
                                       }
-                                      stroke={
-                                        Array [
-                                          1,
-                                          "spinner-firstHalf",
-                                        ]
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M79.0336 194.02c-5.1568 1.351-10.0885.48-14.4803-2.612-4.3558-3.065-6.5517-6.726-6.5337-10.884.036-9.125 11.1415-16.935 11.6185-17.254l2.4388 3.429c-2.7178 1.893-9.7915 8.077-9.8095 13.852 0 2.754 1.548 5.189 4.7518 7.445 4.4638 3.137 9.5305 3.252 15.0742.329 8.7116-4.602 15.0563-15.06 14.9123-19.591l4.2383-.134c.207 6.531-7.2442 18.179-17.1527 23.412-1.7009.898-3.3928 1.564-5.0667 2.008h.009Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278927075,
+                                        "type": 0,
                                       }
-                                    />
-                                    <RNSVGPath
-                                      d="M 1.5 12 A 10.5 10.5 0 0 1 1.5 11.25"
-                                      propList={
-                                        Array [
-                                          "stroke",
-                                          "strokeLinecap",
-                                        ]
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M67.0458 207.463c-8.3696 2.185-15.1102-.391-19.169-7.437-3.1769-5.517-3.7979-10.422-1.827-14.571 3.4469-7.268 13.5624-9.125 13.9853-9.205l.747 4.123c-.072.008-8.3876 1.563-10.8894 6.868-1.35 2.843-.783 6.45 1.6739 10.715 3.5278 6.122 9.0985 7.632 17.0181 4.611 6.0477-2.301 11.3664-6.655 15.3892-12.581l3.6359-5.357 3.5278 2.327-3.6358 5.367c-4.5088 6.646-10.5205 11.541-17.3872 14.154-1.0439.399-2.0699.728-3.0688.986Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278927075,
+                                        "type": 0,
                                       }
-                                      stroke={4278927075}
-                                      strokeLinecap={1}
-                                    />
-                                  </RNSVGGroup>
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="m53.3313 224.754-3.0598-2.905c22.9668-23.501 15.4252-17.495 15.6232-17.832l3.6808 2.079c-.189.337 7.0917-5.225-16.2442 18.658Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278927075,
+                                        "type": 0,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M93.3641 80.6211c.542.6099.4808 1.5383-.1366 2.0737L59.0022 112.37c-.6174.536-1.5573.475-2.0993-.134-.542-.61-.4809-1.539.1365-2.074l34.2253-29.6758c.6175-.5353 1.5574-.4749 2.0994.1349ZM145.714 157.555c.542.61.481 1.538-.137 2.073l-34.225 29.676c-.618.535-1.558.475-2.1-.135s-.48-1.538.137-2.073l34.225-29.676c.618-.536 1.558-.475 2.1.135Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278240714,
+                                        "type": 0,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
                                 </RNSVGGroup>
                               </RNSVGSvgView>
+                              <View
+                                style={
+                                  Object {
+                                    "height": 24,
+                                  }
+                                }
+                              />
                             </View>
-                          </View>
-                          <View
-                            style={
-                              Object {
-                                "padding": 24,
+                            <Text
+                              allowFontScaling={false}
+                              color="bluegreyDark"
+                              defaultColor="bluegreyDark"
+                              defaultWeight="SemiBold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 24,
+                                  "lineHeight": 34,
+                                }
                               }
-                            }
-                          >
+                              style={
+                                Array [
+                                  Object {
+                                    "textAlign": "center",
+                                  },
+                                  Object {
+                                    "fontSize": 24,
+                                    "lineHeight": 34,
+                                  },
+                                  Object {
+                                    "color": "#17324D",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
+                                  },
+                                ]
+                              }
+                              weight="SemiBold"
+                            >
+                              There is a temporary problem, please try again.
+                            </Text>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
                             <Text
-                              accessible={true}
+                              allowFontScaling={false}
                               color="bluegrey"
                               defaultColor="bluegrey"
                               defaultWeight="Regular"
@@ -1450,82 +1469,70 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1
                               }
                               weight="Regular"
                             >
-                              Loading document...
+                              If the problem is not resolved, report it with the '?' icon at the top right, thank you!
                             </Text>
                           </View>
-                        </View>
-                      </View>
-                      <View
-                        style={
-                          Array [
-                            Object {
-                              "flex": 1,
-                            },
-                            Object {
-                              "zIndex": 0,
-                            },
-                          ]
-                        }
-                      />
+                        </RCTScrollView>
+                      </RNCSafeAreaView>
                     </View>
                     <View
+                      collapsable={false}
                       pointerEvents="box-none"
-                      style={
-                        Object {
-                          "marginTop": -50,
-                          "overflow": "hidden",
-                          "paddingTop": 50,
-                          "width": "100%",
-                        }
-                      }
-                      testID="FooterWithButtons"
+                      style={Object {}}
                     >
                       <View
-                        style={
-                          Object {
-                            "backgroundColor": "#FFFFFF",
-                            "elevation": 20,
-                            "paddingBottom": 16,
-                            "paddingHorizontal": 24,
-                            "paddingTop": 16,
-                            "shadowColor": "#0E0F13",
-                            "shadowOffset": Object {
-                              "height": 50,
-                              "width": 0,
-                            },
-                            "shadowOpacity": 0.5,
-                            "shadowRadius": 37,
-                          }
-                        }
+                        accessibilityElementsHidden={false}
+                        importantForAccessibility="auto"
+                        onLayout={[Function]}
+                        pointerEvents="box-none"
+                        style={null}
                       >
                         <View
+                          accessibilityRole="header"
                           style={
-                            Object {
-                              "flexDirection": "row",
-                            }
+                            Array [
+                              Object {
+                                "backgroundColor": "#FFFFFF",
+                              },
+                              Object {
+                                "borderBottomWidth": 1,
+                              },
+                              Object {
+                                "backgroundColor": "#FFFFFF",
+                                "borderColor": "transparent",
+                              },
+                            ]
                           }
                         >
                           <View
                             style={
-                              Object {
-                                "alignContent": "center",
-                                "flex": 1,
-                                "justifyContent": "center",
-                              }
+                              Array [
+                                Object {
+                                  "marginTop": 0,
+                                },
+                                Object {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "flexGrow": 1,
+                                  "height": 56,
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 24,
+                                },
+                              ]
                             }
                           >
                             <View
-                              accessibilityLabel="Save or share"
+                              accessibilityLabel="Back"
                               accessibilityRole="button"
                               accessibilityState={
                                 Object {
-                                  "busy": false,
                                   "disabled": false,
                                 }
                               }
                               accessible={true}
                               collapsable={false}
                               focusable={true}
+                              hitSlop={8}
                               onBlur={[Function]}
                               onClick={[Function]}
                               onFocus={[Function]}
@@ -1535,32 +1542,21 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1
                               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",
+                                      "height": 24,
+                                      "width": 24,
                                     },
-                                    false,
                                     Object {
-                                      "height": 40,
+                                      "alignItems": "center",
                                     },
                                     Object {
-                                      "backgroundColor": "#0073E6",
+                                      "justifyContent": "center",
                                     },
                                     Object {
-                                      "backgroundColor": undefined,
                                       "transform": Array [
                                         Object {
                                           "scale": undefined,
@@ -1569,55 +1565,228 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1
                                     },
                                   ]
                                 }
+                              >
+                                <RNSVGSvgView
+                                  accessibilityElementsHidden={true}
+                                  accessibilityLabel=""
+                                  accessible={false}
+                                  align="xMidYMid"
+                                  animatedProps={
+                                    Object {
+                                      "color": undefined,
+                                    }
+                                  }
+                                  bbHeight={24}
+                                  bbWidth={24}
+                                  focusable={false}
+                                  height={24}
+                                  importantForAccessibility="no-hide-descendants"
+                                  meetOrSlice={0}
+                                  minX={0}
+                                  minY={0}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "backgroundColor": "transparent",
+                                        "borderWidth": 0,
+                                      },
+                                      Object {
+                                        "color": "#0E0F13",
+                                      },
+                                      Object {
+                                        "flex": 0,
+                                        "height": 24,
+                                        "width": 24,
+                                      },
+                                    ]
+                                  }
+                                  tintColor="#0E0F13"
+                                  vbHeight={24}
+                                  vbWidth={24}
+                                  width={24}
+                                >
+                                  <RNSVGGroup
+                                    fill={
+                                      Object {
+                                        "payload": 4278190080,
+                                        "type": 0,
+                                      }
+                                    }
+                                  >
+                                    <RNSVGPath
+                                      clipRule={0}
+                                      d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
+                                      fill={
+                                        Object {
+                                          "type": 2,
+                                        }
+                                      }
+                                      fillRule={0}
+                                      propList={
+                                        Array [
+                                          "fill",
+                                          "fillRule",
+                                        ]
+                                      }
+                                    />
+                                  </RNSVGGroup>
+                                </RNSVGSvgView>
+                              </View>
+                            </View>
+                            <View
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessibilityRole="header"
+                              accessible={false}
+                              importantForAccessibility="no-hide-descendants"
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "marginHorizontal": 16,
+                                }
+                              }
+                            >
+                              <Text
+                                accessible={false}
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "textAlign": "center",
+                                    },
+                                    Object {
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                    Object {
+                                      "opacity": 1,
+                                    },
+                                  ]
+                                }
+                              />
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "flexDirection": "row",
+                                  },
+                                  Object {
+                                    "flexShrink": 0,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                accessibilityLabel="Contextual Help"
+                                accessibilityRole="button"
+                                accessibilityState={
+                                  Object {
+                                    "disabled": false,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={8}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
                               >
                                 <View
-                                  entering={[Function]}
-                                  exiting={[Function]}
                                   style={
                                     Array [
+                                      Object {
+                                        "height": 24,
+                                        "width": 24,
+                                      },
                                       Object {
                                         "alignItems": "center",
-                                        "flexDirection": "row",
+                                      },
+                                      Object {
                                         "justifyContent": "center",
                                       },
-                                      false,
+                                      Object {
+                                        "transform": Array [
+                                          Object {
+                                            "scale": undefined,
+                                          },
+                                        ],
+                                      },
                                     ]
                                   }
                                 >
-                                  <Text
-                                    allowFontScaling={false}
-                                    color="white"
-                                    defaultColor="white"
-                                    defaultWeight="Bold"
-                                    ellipsizeMode="tail"
-                                    font="TitilliumWeb"
-                                    fontStyle={
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    animatedProps={
                                       Object {
-                                        "fontSize": 16,
+                                        "color": undefined,
                                       }
                                     }
-                                    maxFontSizeMultiplier={1.3}
-                                    numberOfLines={1}
+                                    bbHeight={24}
+                                    bbWidth={24}
+                                    focusable={false}
+                                    height={24}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
                                     style={
                                       Array [
                                         Object {
-                                          "alignSelf": "center",
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
                                         },
                                         Object {
-                                          "fontSize": 16,
+                                          "color": "#0E0F13",
                                         },
                                         Object {
-                                          "color": "#FFFFFF",
-                                          "fontFamily": "Titillium Web",
-                                          "fontStyle": "normal",
-                                          "fontWeight": "700",
+                                          "flex": 0,
+                                          "height": 24,
+                                          "width": 24,
                                         },
                                       ]
                                     }
-                                    weight="Bold"
+                                    tintColor="#0E0F13"
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={24}
                                   >
-                                    Save or share
-                                  </Text>
+                                    <RNSVGGroup
+                                      fill={
+                                        Object {
+                                          "payload": 4278190080,
+                                          "type": 0,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGPath
+                                        d="M6 8c0-3.31371 2.68629-6 6-6 3.3137 0 6 2.68629 6 6 0 2.7248-1.8172 5.0278-4.3079 5.7583C12.3754 14.1446 11 15.2973 11 17v1c0 .5523.4477 1 1 1s1-.4477 1-1v-1c0-.5064.452-1.087 1.255-1.3225C17.5744 14.7039 20 11.6365 20 8c0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 .55228.44772 1 1 1s1-.44772 1-1Zm7.5 14.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z"
+                                        fill={
+                                          Object {
+                                            "type": 2,
+                                          }
+                                        }
+                                        propList={
+                                          Array [
+                                            "fill",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
                                 </View>
                               </View>
                             </View>
@@ -1630,8 +1799,22 @@ exports[`MessageAttachment Should match the snapshot when everything went fine 1
               </View>
             </View>
           </View>
-        </View>
-      </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "height": 44,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 1,
+          }
+        }
+      />
     </View>
   </RNCSafeAreaProvider>
 </View>
diff --git a/ts/features/messages/screens/__tests__/__snapshots__/MessageRouterScreen.test.tsx.snap b/ts/features/messages/screens/__tests__/__snapshots__/MessageRouterScreen.test.tsx.snap
index 067edc12415..eec0d148972 100644
--- a/ts/features/messages/screens/__tests__/__snapshots__/MessageRouterScreen.test.tsx.snap
+++ b/ts/features/messages/screens/__tests__/__snapshots__/MessageRouterScreen.test.tsx.snap
@@ -20,622 +20,665 @@ exports[`MessageRouterScreen should match snapshot before starting to retrieve m
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
+        collapsable={false}
         pointerEvents="box-none"
-        style={null}
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
       >
         <View
-          collapsable={false}
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
           pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
+          style={null}
         >
           <View
             collapsable={false}
+            pointerEvents="box-none"
             style={
               Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
               }
             }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
               }
-            }
-          />
+            />
+          </View>
           <View
+            collapsable={false}
             pointerEvents="box-none"
             style={
               Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
               }
             }
           >
             <View
-              collapsable={false}
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
               pointerEvents="box-none"
               style={
                 Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
                 }
               }
             >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
                 collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
+                pointerEvents="box-none"
                 style={
                   Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
                   }
                 }
               >
-                MESSAGE_ROUTER
-              </Text>
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  MESSAGE_ROUTER
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
             </View>
           </View>
         </View>
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
+      <RNSScreenContainer
+        onLayout={[Function]}
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "flex": 1,
           }
         }
       >
-        <View
+        <RNSModalScreen
+          activityState={2}
           collapsable={false}
-          style={
+          forwardedRef={[Function]}
+          gestureResponseDistance={
             Object {
-              "opacity": 1,
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
             }
           }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          onGestureCancel={[Function]}
           pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
           style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
             Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={1}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
                     <View
                       style={
                         Object {
-                          "backgroundColor": "#fff",
                           "flex": 1,
-                          "height": 1334,
                         }
                       }
                     >
-                      <View>
+                      <View
+                        style={
+                          Object {
+                            "backgroundColor": "#fff",
+                            "flex": 1,
+                            "height": 1334,
+                          }
+                        }
+                      >
                         <View>
-                          <RCTSafeAreaView
-                            emulateUnlessSupported={true}
-                            style={
-                              Object {
-                                "backgroundColor": "#F8F8F8",
-                              }
-                            }
-                          >
-                            <View
-                              androidStatusBarColor="#FFFFFF"
-                              iosBarStyle="dark-content"
-                              noShadow={false}
+                          <View>
+                            <RCTSafeAreaView
                               style={
                                 Object {
                                   "backgroundColor": "#F8F8F8",
-                                  "borderBottomColor": "#a7a6ab",
-                                  "borderBottomWidth": 0.5,
-                                  "elevation": 3,
-                                  "flexDirection": "row",
-                                  "height": 64,
-                                  "justifyContent": "center",
-                                  "left": 0,
-                                  "paddingLeft": 6,
-                                  "paddingRight": 10,
-                                  "right": 0,
-                                  "shadowColor": undefined,
-                                  "shadowOffset": undefined,
-                                  "shadowOpacity": undefined,
-                                  "shadowRadius": undefined,
-                                  "top": 0,
                                 }
                               }
                             >
                               <View
+                                androidStatusBarColor="#FFFFFF"
+                                iosBarStyle="dark-content"
+                                noShadow={false}
                                 style={
                                   Object {
-                                    "alignItems": "flex-start",
-                                    "alignSelf": "center",
-                                    "flex": 1,
+                                    "backgroundColor": "#F8F8F8",
+                                    "borderBottomColor": "#a7a6ab",
+                                    "borderBottomWidth": 0.5,
+                                    "elevation": 3,
+                                    "flexDirection": "row",
+                                    "height": 64,
+                                    "justifyContent": "center",
+                                    "left": 0,
+                                    "paddingLeft": 6,
+                                    "paddingRight": 10,
+                                    "right": 0,
+                                    "shadowColor": undefined,
+                                    "shadowOffset": undefined,
+                                    "shadowOpacity": undefined,
+                                    "shadowRadius": undefined,
+                                    "top": 0,
                                   }
                                 }
                               >
                                 <View
-                                  accessibilityLabel="Back"
-                                  accessibilityRole="button"
-                                  accessibilityState={
+                                  style={
                                     Object {
-                                      "disabled": false,
+                                      "alignItems": "flex-start",
+                                      "alignSelf": "center",
+                                      "flex": 1,
                                     }
                                   }
-                                  accessible={true}
-                                  collapsable={false}
-                                  focusable={true}
-                                  hitSlop={8}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onResponderGrant={[Function]}
-                                  onResponderMove={[Function]}
-                                  onResponderRelease={[Function]}
-                                  onResponderTerminate={[Function]}
-                                  onResponderTerminationRequest={[Function]}
-                                  onStartShouldSetResponder={[Function]}
-                                  testID="back-button"
                                 >
                                   <View
-                                    style={
-                                      Array [
-                                        Object {
-                                          "height": 24,
-                                          "width": 24,
-                                        },
-                                        Object {
-                                          "alignItems": "center",
-                                        },
-                                        Object {
-                                          "justifyContent": "center",
-                                        },
-                                        Object {
-                                          "transform": Array [
-                                            Object {
-                                              "scale": undefined,
-                                            },
-                                          ],
-                                        },
-                                      ]
+                                    accessibilityLabel="Back"
+                                    accessibilityRole="button"
+                                    accessibilityState={
+                                      Object {
+                                        "disabled": false,
+                                      }
                                     }
+                                    accessible={true}
+                                    collapsable={false}
+                                    focusable={true}
+                                    hitSlop={8}
+                                    onBlur={[Function]}
+                                    onClick={[Function]}
+                                    onFocus={[Function]}
+                                    onResponderGrant={[Function]}
+                                    onResponderMove={[Function]}
+                                    onResponderRelease={[Function]}
+                                    onResponderTerminate={[Function]}
+                                    onResponderTerminationRequest={[Function]}
+                                    onStartShouldSetResponder={[Function]}
+                                    testID="back-button"
                                   >
-                                    <RNSVGSvgView
-                                      accessibilityElementsHidden={true}
-                                      accessibilityLabel=""
-                                      accessible={false}
-                                      align="xMidYMid"
-                                      animatedProps={
-                                        Object {
-                                          "color": undefined,
-                                        }
-                                      }
-                                      bbHeight={24}
-                                      bbWidth={24}
-                                      color={4279111443}
-                                      focusable={false}
-                                      height={24}
-                                      importantForAccessibility="no-hide-descendants"
-                                      meetOrSlice={0}
-                                      minX={0}
-                                      minY={0}
+                                    <View
                                       style={
                                         Array [
                                           Object {
-                                            "backgroundColor": "transparent",
-                                            "borderWidth": 0,
+                                            "height": 24,
+                                            "width": 24,
                                           },
                                           Object {
-                                            "color": "#0E0F13",
+                                            "alignItems": "center",
                                           },
                                           Object {
-                                            "flex": 0,
-                                            "height": 24,
-                                            "width": 24,
+                                            "justifyContent": "center",
+                                          },
+                                          Object {
+                                            "transform": Array [
+                                              Object {
+                                                "scale": undefined,
+                                              },
+                                            ],
                                           },
                                         ]
                                       }
-                                      tintColor={4279111443}
-                                      vbHeight={24}
-                                      vbWidth={24}
-                                      width={24}
                                     >
-                                      <RNSVGGroup>
-                                        <RNSVGPath
-                                          clipRule={0}
-                                          d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
-                                          fill={
-                                            Array [
-                                              2,
-                                            ]
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        animatedProps={
+                                          Object {
+                                            "color": undefined,
                                           }
-                                          fillRule={0}
-                                          propList={
-                                            Array [
-                                              "fill",
-                                              "fillRule",
-                                            ]
+                                        }
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0E0F13",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0E0F13"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
                                           }
-                                        />
-                                      </RNSVGGroup>
-                                    </RNSVGSvgView>
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
                                   </View>
                                 </View>
-                              </View>
-                              <View
-                                style={
-                                  Array [
-                                    Object {
-                                      "alignItems": "center",
-                                      "alignSelf": "center",
-                                      "flex": 1,
-                                    },
-                                    Object {
-                                      "alignItems": "center",
-                                    },
-                                  ]
-                                }
-                              >
                                 <View
-                                  accessible={true}
-                                />
-                              </View>
-                              <View
-                                style={
-                                  Object {
-                                    "alignItems": "flex-end",
-                                    "alignSelf": "center",
-                                    "flex": 1,
-                                    "flexDirection": "row",
-                                    "justifyContent": "flex-end",
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignItems": "center",
+                                        "alignSelf": "center",
+                                        "flex": 1,
+                                      },
+                                      Object {
+                                        "alignItems": "center",
+                                      },
+                                    ]
                                   }
-                                }
-                              >
+                                >
+                                  <View
+                                    accessible={true}
+                                  />
+                                </View>
                                 <View
-                                  accessibilityRole="button"
-                                  accessibilityState={
+                                  style={
                                     Object {
-                                      "disabled": undefined,
-                                    }
-                                  }
-                                  accessible={true}
-                                  collapsable={false}
-                                  focusable={false}
-                                  forwardedRef={[Function]}
-                                  hitSlop={
-                                    Object {
-                                      "bottom": 4,
-                                      "top": 4,
-                                    }
-                                  }
-                                  onClick={[Function]}
-                                  onResponderGrant={[Function]}
-                                  onResponderMove={[Function]}
-                                  onResponderRelease={[Function]}
-                                  onResponderTerminate={[Function]}
-                                  onResponderTerminationRequest={[Function]}
-                                  onStartShouldSetResponder={[Function]}
-                                  style={
-                                    Object {
-                                      "alignItems": "center",
-                                      "alignSelf": null,
-                                      "backgroundColor": "transparent",
-                                      "borderBottomWidth": null,
-                                      "borderColor": null,
-                                      "borderLeftWidth": null,
-                                      "borderRadius": 50,
-                                      "borderRightWidth": null,
-                                      "borderTopWidth": null,
-                                      "borderWidth": undefined,
-                                      "elevation": 0,
+                                      "alignItems": "flex-end",
+                                      "alignSelf": "center",
+                                      "flex": 1,
                                       "flexDirection": "row",
-                                      "height": 45,
-                                      "justifyContent": "space-between",
-                                      "marginRight": -9,
-                                      "opacity": 1,
-                                      "paddingBottom": 6,
-                                      "paddingLeft": 15,
-                                      "paddingRight": 15,
-                                      "paddingTop": 6,
-                                      "shadowColor": null,
-                                      "shadowOffset": null,
-                                      "shadowOpacity": null,
-                                      "shadowRadius": null,
+                                      "justifyContent": "flex-end",
                                     }
                                   }
-                                />
+                                >
+                                  <View
+                                    accessibilityRole="button"
+                                    accessibilityState={
+                                      Object {
+                                        "disabled": undefined,
+                                      }
+                                    }
+                                    accessible={true}
+                                    collapsable={false}
+                                    focusable={false}
+                                    forwardedRef={[Function]}
+                                    hitSlop={
+                                      Object {
+                                        "bottom": 4,
+                                        "top": 4,
+                                      }
+                                    }
+                                    onClick={[Function]}
+                                    onResponderGrant={[Function]}
+                                    onResponderMove={[Function]}
+                                    onResponderRelease={[Function]}
+                                    onResponderTerminate={[Function]}
+                                    onResponderTerminationRequest={[Function]}
+                                    onStartShouldSetResponder={[Function]}
+                                    style={
+                                      Object {
+                                        "alignItems": "center",
+                                        "alignSelf": null,
+                                        "backgroundColor": "transparent",
+                                        "borderBottomWidth": null,
+                                        "borderColor": null,
+                                        "borderLeftWidth": null,
+                                        "borderRadius": 50,
+                                        "borderRightWidth": null,
+                                        "borderTopWidth": null,
+                                        "borderWidth": undefined,
+                                        "elevation": 0,
+                                        "flexDirection": "row",
+                                        "height": 45,
+                                        "justifyContent": "space-between",
+                                        "marginRight": -9,
+                                        "opacity": 1,
+                                        "paddingBottom": 6,
+                                        "paddingLeft": 15,
+                                        "paddingRight": 15,
+                                        "paddingTop": 6,
+                                        "shadowColor": null,
+                                        "shadowOffset": null,
+                                        "shadowOpacity": null,
+                                        "shadowRadius": null,
+                                      }
+                                    }
+                                  />
+                                </View>
                               </View>
-                            </View>
-                          </RCTSafeAreaView>
+                            </RCTSafeAreaView>
+                          </View>
                         </View>
-                      </View>
-                      <RCTSafeAreaView
-                        emulateUnlessSupported={true}
-                        style={
-                          Object {
-                            "flex": 1,
-                          }
-                        }
-                      >
-                        <View
-                          accessible={true}
+                        <RCTSafeAreaView
                           style={
                             Object {
                               "flex": 1,
                             }
                           }
-                          testID="LoadingErrorComponentLoading"
                         >
                           <View
+                            accessible={true}
                             style={
                               Object {
-                                "alignItems": "center",
                                 "flex": 1,
-                                "justifyContent": "center",
-                                "padding": 24,
                               }
                             }
-                            testID="InfoScreenComponent"
+                            testID="LoadingErrorComponentLoading"
                           >
-                            <ActivityIndicator
-                              accessibilityElementsHidden={true}
-                              accessible={false}
-                              color="black"
-                              importantForAccessibility="no-hide-descendants"
-                            />
                             <View
                               style={
                                 Object {
-                                  "height": 24,
-                                }
-                              }
-                            />
-                            <Text
-                              accessible={true}
-                              color="bluegreyDark"
-                              defaultColor="bluegreyDark"
-                              defaultWeight="Bold"
-                              font="TitilliumWeb"
-                              fontStyle={
-                                Object {
-                                  "fontSize": 20,
-                                  "lineHeight": 24,
+                                  "alignItems": "center",
+                                  "flex": 1,
+                                  "justifyContent": "center",
+                                  "padding": 24,
                                 }
                               }
-                              style={
-                                Array [
+                              testID="InfoScreenComponent"
+                            >
+                              <ActivityIndicator
+                                accessibilityElementsHidden={true}
+                                accessible={false}
+                                color="black"
+                                importantForAccessibility="no-hide-descendants"
+                              />
+                              <View
+                                style={
                                   Object {
-                                    "textAlign": "center",
-                                  },
+                                    "height": 24,
+                                  }
+                                }
+                              />
+                              <Text
+                                accessible={true}
+                                color="bluegreyDark"
+                                defaultColor="bluegreyDark"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
                                     "fontSize": 20,
                                     "lineHeight": 24,
-                                  },
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "textAlign": "center",
+                                    },
+                                    Object {
+                                      "fontSize": 20,
+                                      "lineHeight": 24,
+                                    },
+                                    Object {
+                                      "color": "#17324D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "700",
+                                    },
+                                  ]
+                                }
+                                testID="infoScreenTitle"
+                                weight="Bold"
+                              >
+                                Loading message details in progress...
+                              </Text>
+                              <View
+                                style={
                                   Object {
-                                    "color": "#17324D",
-                                    "fontFamily": "Titillium Web",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "700",
-                                  },
-                                ]
-                              }
-                              testID="infoScreenTitle"
-                              weight="Bold"
-                            >
-                              Loading message details in progress...
-                            </Text>
-                            <View
-                              style={
-                                Object {
-                                  "height": 16,
+                                    "height": 16,
+                                  }
                                 }
-                              }
-                            />
+                              />
+                            </View>
                           </View>
-                        </View>
-                      </RCTSafeAreaView>
+                        </RCTSafeAreaView>
+                      </View>
                     </View>
                   </View>
                 </View>
               </View>
             </View>
           </View>
-        </View>
-      </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
     </View>
   </RNCSafeAreaProvider>
 </View>
@@ -661,622 +704,665 @@ exports[`MessageRouterScreen should match snapshot if message data retrieval was
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
+        collapsable={false}
         pointerEvents="box-none"
-        style={null}
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
       >
         <View
-          collapsable={false}
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
           pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
+          style={null}
         >
           <View
             collapsable={false}
+            pointerEvents="box-none"
             style={
               Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
               }
             }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
               }
-            }
-          />
+            />
+          </View>
           <View
+            collapsable={false}
             pointerEvents="box-none"
             style={
               Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
               }
             }
           >
             <View
-              collapsable={false}
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
               pointerEvents="box-none"
               style={
                 Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
                 }
               }
             >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
+              <View
                 collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
+                pointerEvents="box-none"
                 style={
                   Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
                   }
                 }
               >
-                MESSAGE_ROUTER
-              </Text>
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  MESSAGE_ROUTER
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
             </View>
           </View>
         </View>
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
+      <RNSScreenContainer
+        onLayout={[Function]}
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "flex": 1,
           }
         }
       >
-        <View
+        <RNSModalScreen
+          activityState={2}
           collapsable={false}
-          style={
+          forwardedRef={[Function]}
+          gestureResponseDistance={
             Object {
-              "opacity": 1,
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
             }
           }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          onGestureCancel={[Function]}
           pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
           style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
             Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={3}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={3}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
                     <View
                       style={
                         Object {
-                          "backgroundColor": "#fff",
                           "flex": 1,
-                          "height": 1334,
                         }
                       }
                     >
-                      <View>
-                        <View>
-                          <RCTSafeAreaView
-                            emulateUnlessSupported={true}
-                            style={
-                              Object {
-                                "backgroundColor": "#F8F8F8",
-                              }
-                            }
-                          >
-                            <View
-                              androidStatusBarColor="#FFFFFF"
-                              iosBarStyle="dark-content"
-                              noShadow={false}
+                      <View
+                        style={
+                          Object {
+                            "backgroundColor": "#fff",
+                            "flex": 1,
+                            "height": 1334,
+                          }
+                        }
+                      >
+                        <View>
+                          <View>
+                            <RCTSafeAreaView
                               style={
                                 Object {
                                   "backgroundColor": "#F8F8F8",
-                                  "borderBottomColor": "#a7a6ab",
-                                  "borderBottomWidth": 0.5,
-                                  "elevation": 3,
-                                  "flexDirection": "row",
-                                  "height": 64,
-                                  "justifyContent": "center",
-                                  "left": 0,
-                                  "paddingLeft": 6,
-                                  "paddingRight": 10,
-                                  "right": 0,
-                                  "shadowColor": undefined,
-                                  "shadowOffset": undefined,
-                                  "shadowOpacity": undefined,
-                                  "shadowRadius": undefined,
-                                  "top": 0,
                                 }
                               }
                             >
                               <View
+                                androidStatusBarColor="#FFFFFF"
+                                iosBarStyle="dark-content"
+                                noShadow={false}
                                 style={
                                   Object {
-                                    "alignItems": "flex-start",
-                                    "alignSelf": "center",
-                                    "flex": 1,
+                                    "backgroundColor": "#F8F8F8",
+                                    "borderBottomColor": "#a7a6ab",
+                                    "borderBottomWidth": 0.5,
+                                    "elevation": 3,
+                                    "flexDirection": "row",
+                                    "height": 64,
+                                    "justifyContent": "center",
+                                    "left": 0,
+                                    "paddingLeft": 6,
+                                    "paddingRight": 10,
+                                    "right": 0,
+                                    "shadowColor": undefined,
+                                    "shadowOffset": undefined,
+                                    "shadowOpacity": undefined,
+                                    "shadowRadius": undefined,
+                                    "top": 0,
                                   }
                                 }
                               >
                                 <View
-                                  accessibilityLabel="Back"
-                                  accessibilityRole="button"
-                                  accessibilityState={
+                                  style={
                                     Object {
-                                      "disabled": false,
+                                      "alignItems": "flex-start",
+                                      "alignSelf": "center",
+                                      "flex": 1,
                                     }
                                   }
-                                  accessible={true}
-                                  collapsable={false}
-                                  focusable={true}
-                                  hitSlop={8}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onResponderGrant={[Function]}
-                                  onResponderMove={[Function]}
-                                  onResponderRelease={[Function]}
-                                  onResponderTerminate={[Function]}
-                                  onResponderTerminationRequest={[Function]}
-                                  onStartShouldSetResponder={[Function]}
-                                  testID="back-button"
                                 >
                                   <View
-                                    style={
-                                      Array [
-                                        Object {
-                                          "height": 24,
-                                          "width": 24,
-                                        },
-                                        Object {
-                                          "alignItems": "center",
-                                        },
-                                        Object {
-                                          "justifyContent": "center",
-                                        },
-                                        Object {
-                                          "transform": Array [
-                                            Object {
-                                              "scale": undefined,
-                                            },
-                                          ],
-                                        },
-                                      ]
+                                    accessibilityLabel="Back"
+                                    accessibilityRole="button"
+                                    accessibilityState={
+                                      Object {
+                                        "disabled": false,
+                                      }
                                     }
+                                    accessible={true}
+                                    collapsable={false}
+                                    focusable={true}
+                                    hitSlop={8}
+                                    onBlur={[Function]}
+                                    onClick={[Function]}
+                                    onFocus={[Function]}
+                                    onResponderGrant={[Function]}
+                                    onResponderMove={[Function]}
+                                    onResponderRelease={[Function]}
+                                    onResponderTerminate={[Function]}
+                                    onResponderTerminationRequest={[Function]}
+                                    onStartShouldSetResponder={[Function]}
+                                    testID="back-button"
                                   >
-                                    <RNSVGSvgView
-                                      accessibilityElementsHidden={true}
-                                      accessibilityLabel=""
-                                      accessible={false}
-                                      align="xMidYMid"
-                                      animatedProps={
-                                        Object {
-                                          "color": undefined,
-                                        }
-                                      }
-                                      bbHeight={24}
-                                      bbWidth={24}
-                                      color={4279111443}
-                                      focusable={false}
-                                      height={24}
-                                      importantForAccessibility="no-hide-descendants"
-                                      meetOrSlice={0}
-                                      minX={0}
-                                      minY={0}
+                                    <View
                                       style={
                                         Array [
                                           Object {
-                                            "backgroundColor": "transparent",
-                                            "borderWidth": 0,
+                                            "height": 24,
+                                            "width": 24,
                                           },
                                           Object {
-                                            "color": "#0E0F13",
+                                            "alignItems": "center",
                                           },
                                           Object {
-                                            "flex": 0,
-                                            "height": 24,
-                                            "width": 24,
+                                            "justifyContent": "center",
+                                          },
+                                          Object {
+                                            "transform": Array [
+                                              Object {
+                                                "scale": undefined,
+                                              },
+                                            ],
                                           },
                                         ]
                                       }
-                                      tintColor={4279111443}
-                                      vbHeight={24}
-                                      vbWidth={24}
-                                      width={24}
                                     >
-                                      <RNSVGGroup>
-                                        <RNSVGPath
-                                          clipRule={0}
-                                          d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
-                                          fill={
-                                            Array [
-                                              2,
-                                            ]
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        animatedProps={
+                                          Object {
+                                            "color": undefined,
                                           }
-                                          fillRule={0}
-                                          propList={
-                                            Array [
-                                              "fill",
-                                              "fillRule",
-                                            ]
+                                        }
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0E0F13",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0E0F13"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
                                           }
-                                        />
-                                      </RNSVGGroup>
-                                    </RNSVGSvgView>
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
                                   </View>
                                 </View>
-                              </View>
-                              <View
-                                style={
-                                  Array [
-                                    Object {
-                                      "alignItems": "center",
-                                      "alignSelf": "center",
-                                      "flex": 1,
-                                    },
-                                    Object {
-                                      "alignItems": "center",
-                                    },
-                                  ]
-                                }
-                              >
                                 <View
-                                  accessible={true}
-                                />
-                              </View>
-                              <View
-                                style={
-                                  Object {
-                                    "alignItems": "flex-end",
-                                    "alignSelf": "center",
-                                    "flex": 1,
-                                    "flexDirection": "row",
-                                    "justifyContent": "flex-end",
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignItems": "center",
+                                        "alignSelf": "center",
+                                        "flex": 1,
+                                      },
+                                      Object {
+                                        "alignItems": "center",
+                                      },
+                                    ]
                                   }
-                                }
-                              >
+                                >
+                                  <View
+                                    accessible={true}
+                                  />
+                                </View>
                                 <View
-                                  accessibilityRole="button"
-                                  accessibilityState={
-                                    Object {
-                                      "disabled": undefined,
-                                    }
-                                  }
-                                  accessible={true}
-                                  collapsable={false}
-                                  focusable={false}
-                                  forwardedRef={[Function]}
-                                  hitSlop={
-                                    Object {
-                                      "bottom": 4,
-                                      "top": 4,
-                                    }
-                                  }
-                                  onClick={[Function]}
-                                  onResponderGrant={[Function]}
-                                  onResponderMove={[Function]}
-                                  onResponderRelease={[Function]}
-                                  onResponderTerminate={[Function]}
-                                  onResponderTerminationRequest={[Function]}
-                                  onStartShouldSetResponder={[Function]}
                                   style={
                                     Object {
-                                      "alignItems": "center",
-                                      "alignSelf": null,
-                                      "backgroundColor": "transparent",
-                                      "borderBottomWidth": null,
-                                      "borderColor": null,
-                                      "borderLeftWidth": null,
-                                      "borderRadius": 50,
-                                      "borderRightWidth": null,
-                                      "borderTopWidth": null,
-                                      "borderWidth": undefined,
-                                      "elevation": 0,
+                                      "alignItems": "flex-end",
+                                      "alignSelf": "center",
+                                      "flex": 1,
                                       "flexDirection": "row",
-                                      "height": 45,
-                                      "justifyContent": "space-between",
-                                      "marginRight": -9,
-                                      "opacity": 1,
-                                      "paddingBottom": 6,
-                                      "paddingLeft": 15,
-                                      "paddingRight": 15,
-                                      "paddingTop": 6,
-                                      "shadowColor": null,
-                                      "shadowOffset": null,
-                                      "shadowOpacity": null,
-                                      "shadowRadius": null,
+                                      "justifyContent": "flex-end",
                                     }
                                   }
-                                />
+                                >
+                                  <View
+                                    accessibilityRole="button"
+                                    accessibilityState={
+                                      Object {
+                                        "disabled": undefined,
+                                      }
+                                    }
+                                    accessible={true}
+                                    collapsable={false}
+                                    focusable={false}
+                                    forwardedRef={[Function]}
+                                    hitSlop={
+                                      Object {
+                                        "bottom": 4,
+                                        "top": 4,
+                                      }
+                                    }
+                                    onClick={[Function]}
+                                    onResponderGrant={[Function]}
+                                    onResponderMove={[Function]}
+                                    onResponderRelease={[Function]}
+                                    onResponderTerminate={[Function]}
+                                    onResponderTerminationRequest={[Function]}
+                                    onStartShouldSetResponder={[Function]}
+                                    style={
+                                      Object {
+                                        "alignItems": "center",
+                                        "alignSelf": null,
+                                        "backgroundColor": "transparent",
+                                        "borderBottomWidth": null,
+                                        "borderColor": null,
+                                        "borderLeftWidth": null,
+                                        "borderRadius": 50,
+                                        "borderRightWidth": null,
+                                        "borderTopWidth": null,
+                                        "borderWidth": undefined,
+                                        "elevation": 0,
+                                        "flexDirection": "row",
+                                        "height": 45,
+                                        "justifyContent": "space-between",
+                                        "marginRight": -9,
+                                        "opacity": 1,
+                                        "paddingBottom": 6,
+                                        "paddingLeft": 15,
+                                        "paddingRight": 15,
+                                        "paddingTop": 6,
+                                        "shadowColor": null,
+                                        "shadowOffset": null,
+                                        "shadowOpacity": null,
+                                        "shadowRadius": null,
+                                      }
+                                    }
+                                  />
+                                </View>
                               </View>
-                            </View>
-                          </RCTSafeAreaView>
+                            </RCTSafeAreaView>
+                          </View>
                         </View>
-                      </View>
-                      <RCTSafeAreaView
-                        emulateUnlessSupported={true}
-                        style={
-                          Object {
-                            "flex": 1,
-                          }
-                        }
-                      >
-                        <View
-                          accessible={true}
+                        <RCTSafeAreaView
                           style={
                             Object {
                               "flex": 1,
                             }
                           }
-                          testID="LoadingErrorComponentLoading"
                         >
                           <View
+                            accessible={true}
                             style={
                               Object {
-                                "alignItems": "center",
                                 "flex": 1,
-                                "justifyContent": "center",
-                                "padding": 24,
                               }
                             }
-                            testID="InfoScreenComponent"
+                            testID="LoadingErrorComponentLoading"
                           >
-                            <ActivityIndicator
-                              accessibilityElementsHidden={true}
-                              accessible={false}
-                              color="black"
-                              importantForAccessibility="no-hide-descendants"
-                            />
                             <View
                               style={
                                 Object {
-                                  "height": 24,
-                                }
-                              }
-                            />
-                            <Text
-                              accessible={true}
-                              color="bluegreyDark"
-                              defaultColor="bluegreyDark"
-                              defaultWeight="Bold"
-                              font="TitilliumWeb"
-                              fontStyle={
-                                Object {
-                                  "fontSize": 20,
-                                  "lineHeight": 24,
+                                  "alignItems": "center",
+                                  "flex": 1,
+                                  "justifyContent": "center",
+                                  "padding": 24,
                                 }
                               }
-                              style={
-                                Array [
+                              testID="InfoScreenComponent"
+                            >
+                              <ActivityIndicator
+                                accessibilityElementsHidden={true}
+                                accessible={false}
+                                color="black"
+                                importantForAccessibility="no-hide-descendants"
+                              />
+                              <View
+                                style={
                                   Object {
-                                    "textAlign": "center",
-                                  },
+                                    "height": 24,
+                                  }
+                                }
+                              />
+                              <Text
+                                accessible={true}
+                                color="bluegreyDark"
+                                defaultColor="bluegreyDark"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
                                     "fontSize": 20,
                                     "lineHeight": 24,
-                                  },
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "textAlign": "center",
+                                    },
+                                    Object {
+                                      "fontSize": 20,
+                                      "lineHeight": 24,
+                                    },
+                                    Object {
+                                      "color": "#17324D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "700",
+                                    },
+                                  ]
+                                }
+                                testID="infoScreenTitle"
+                                weight="Bold"
+                              >
+                                Loading message details in progress...
+                              </Text>
+                              <View
+                                style={
                                   Object {
-                                    "color": "#17324D",
-                                    "fontFamily": "Titillium Web",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "700",
-                                  },
-                                ]
-                              }
-                              testID="infoScreenTitle"
-                              weight="Bold"
-                            >
-                              Loading message details in progress...
-                            </Text>
-                            <View
-                              style={
-                                Object {
-                                  "height": 16,
+                                    "height": 16,
+                                  }
                                 }
-                              }
-                            />
+                              />
+                            </View>
                           </View>
-                        </View>
-                      </RCTSafeAreaView>
+                        </RCTSafeAreaView>
+                      </View>
                     </View>
                   </View>
                 </View>
               </View>
             </View>
           </View>
-        </View>
-      </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
     </View>
   </RNCSafeAreaProvider>
 </View>
@@ -1302,630 +1388,643 @@ exports[`MessageRouterScreen should match snapshot on message data retrieval fai
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
+        collapsable={false}
         pointerEvents="box-none"
-        style={null}
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
       >
         <View
-          collapsable={false}
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
           pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
+          style={null}
         >
           <View
             collapsable={false}
+            pointerEvents="box-none"
             style={
               Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
               }
             }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
               }
-            }
-          />
+            />
+          </View>
           <View
+            collapsable={false}
             pointerEvents="box-none"
             style={
               Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
               }
             }
           >
             <View
-              collapsable={false}
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
               pointerEvents="box-none"
               style={
                 Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
                 }
               }
             >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
                 collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
+                pointerEvents="box-none"
                 style={
                   Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
                   }
                 }
               >
-                MESSAGE_ROUTER
-              </Text>
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  MESSAGE_ROUTER
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
             </View>
           </View>
         </View>
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
+      <RNSScreenContainer
+        onLayout={[Function]}
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "flex": 1,
           }
         }
       >
-        <View
+        <RNSModalScreen
+          activityState={2}
           collapsable={false}
-          style={
+          forwardedRef={[Function]}
+          gestureResponseDistance={
             Object {
-              "opacity": 1,
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
             }
           }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          onGestureCancel={[Function]}
           pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
           style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
             Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={4}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={4}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
                     <View
                       style={
                         Object {
-                          "backgroundColor": "#fff",
                           "flex": 1,
-                          "height": 1334,
                         }
                       }
                     >
-                      <View>
+                      <View
+                        style={
+                          Object {
+                            "backgroundColor": "#fff",
+                            "flex": 1,
+                            "height": 1334,
+                          }
+                        }
+                      >
                         <View>
-                          <RCTSafeAreaView
-                            emulateUnlessSupported={true}
-                            style={
-                              Object {
-                                "backgroundColor": "#F8F8F8",
-                              }
-                            }
-                          >
-                            <View
-                              androidStatusBarColor="#FFFFFF"
-                              iosBarStyle="dark-content"
-                              noShadow={false}
+                          <View>
+                            <RCTSafeAreaView
                               style={
                                 Object {
                                   "backgroundColor": "#F8F8F8",
-                                  "borderBottomColor": "#a7a6ab",
-                                  "borderBottomWidth": 0.5,
-                                  "elevation": 3,
-                                  "flexDirection": "row",
-                                  "height": 64,
-                                  "justifyContent": "center",
-                                  "left": 0,
-                                  "paddingLeft": 6,
-                                  "paddingRight": 10,
-                                  "right": 0,
-                                  "shadowColor": undefined,
-                                  "shadowOffset": undefined,
-                                  "shadowOpacity": undefined,
-                                  "shadowRadius": undefined,
-                                  "top": 0,
                                 }
                               }
                             >
                               <View
+                                androidStatusBarColor="#FFFFFF"
+                                iosBarStyle="dark-content"
+                                noShadow={false}
                                 style={
                                   Object {
-                                    "alignItems": "flex-start",
-                                    "alignSelf": "center",
-                                    "flex": 1,
+                                    "backgroundColor": "#F8F8F8",
+                                    "borderBottomColor": "#a7a6ab",
+                                    "borderBottomWidth": 0.5,
+                                    "elevation": 3,
+                                    "flexDirection": "row",
+                                    "height": 64,
+                                    "justifyContent": "center",
+                                    "left": 0,
+                                    "paddingLeft": 6,
+                                    "paddingRight": 10,
+                                    "right": 0,
+                                    "shadowColor": undefined,
+                                    "shadowOffset": undefined,
+                                    "shadowOpacity": undefined,
+                                    "shadowRadius": undefined,
+                                    "top": 0,
                                   }
                                 }
                               >
                                 <View
-                                  accessibilityLabel="Back"
-                                  accessibilityRole="button"
-                                  accessibilityState={
+                                  style={
                                     Object {
-                                      "disabled": false,
+                                      "alignItems": "flex-start",
+                                      "alignSelf": "center",
+                                      "flex": 1,
                                     }
                                   }
-                                  accessible={true}
-                                  collapsable={false}
-                                  focusable={true}
-                                  hitSlop={8}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onResponderGrant={[Function]}
-                                  onResponderMove={[Function]}
-                                  onResponderRelease={[Function]}
-                                  onResponderTerminate={[Function]}
-                                  onResponderTerminationRequest={[Function]}
-                                  onStartShouldSetResponder={[Function]}
-                                  testID="back-button"
                                 >
                                   <View
-                                    style={
-                                      Array [
-                                        Object {
-                                          "height": 24,
-                                          "width": 24,
-                                        },
-                                        Object {
-                                          "alignItems": "center",
-                                        },
-                                        Object {
-                                          "justifyContent": "center",
-                                        },
-                                        Object {
-                                          "transform": Array [
-                                            Object {
-                                              "scale": undefined,
-                                            },
-                                          ],
-                                        },
-                                      ]
+                                    accessibilityLabel="Back"
+                                    accessibilityRole="button"
+                                    accessibilityState={
+                                      Object {
+                                        "disabled": false,
+                                      }
                                     }
+                                    accessible={true}
+                                    collapsable={false}
+                                    focusable={true}
+                                    hitSlop={8}
+                                    onBlur={[Function]}
+                                    onClick={[Function]}
+                                    onFocus={[Function]}
+                                    onResponderGrant={[Function]}
+                                    onResponderMove={[Function]}
+                                    onResponderRelease={[Function]}
+                                    onResponderTerminate={[Function]}
+                                    onResponderTerminationRequest={[Function]}
+                                    onStartShouldSetResponder={[Function]}
+                                    testID="back-button"
                                   >
-                                    <RNSVGSvgView
-                                      accessibilityElementsHidden={true}
-                                      accessibilityLabel=""
-                                      accessible={false}
-                                      align="xMidYMid"
-                                      animatedProps={
-                                        Object {
-                                          "color": undefined,
-                                        }
-                                      }
-                                      bbHeight={24}
-                                      bbWidth={24}
-                                      color={4279111443}
-                                      focusable={false}
-                                      height={24}
-                                      importantForAccessibility="no-hide-descendants"
-                                      meetOrSlice={0}
-                                      minX={0}
-                                      minY={0}
+                                    <View
                                       style={
                                         Array [
                                           Object {
-                                            "backgroundColor": "transparent",
-                                            "borderWidth": 0,
+                                            "height": 24,
+                                            "width": 24,
                                           },
                                           Object {
-                                            "color": "#0E0F13",
+                                            "alignItems": "center",
                                           },
                                           Object {
-                                            "flex": 0,
-                                            "height": 24,
-                                            "width": 24,
+                                            "justifyContent": "center",
+                                          },
+                                          Object {
+                                            "transform": Array [
+                                              Object {
+                                                "scale": undefined,
+                                              },
+                                            ],
                                           },
                                         ]
                                       }
-                                      tintColor={4279111443}
-                                      vbHeight={24}
-                                      vbWidth={24}
-                                      width={24}
                                     >
-                                      <RNSVGGroup>
-                                        <RNSVGPath
-                                          clipRule={0}
-                                          d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
-                                          fill={
-                                            Array [
-                                              2,
-                                            ]
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        animatedProps={
+                                          Object {
+                                            "color": undefined,
                                           }
-                                          fillRule={0}
-                                          propList={
-                                            Array [
-                                              "fill",
-                                              "fillRule",
-                                            ]
+                                        }
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0E0F13",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0E0F13"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
                                           }
-                                        />
-                                      </RNSVGGroup>
-                                    </RNSVGSvgView>
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
                                   </View>
                                 </View>
-                              </View>
-                              <View
-                                style={
-                                  Array [
-                                    Object {
-                                      "alignItems": "center",
-                                      "alignSelf": "center",
-                                      "flex": 1,
-                                    },
-                                    Object {
-                                      "alignItems": "center",
-                                    },
-                                  ]
-                                }
-                              >
                                 <View
-                                  accessible={true}
-                                />
-                              </View>
-                              <View
-                                style={
-                                  Object {
-                                    "alignItems": "flex-end",
-                                    "alignSelf": "center",
-                                    "flex": 1,
-                                    "flexDirection": "row",
-                                    "justifyContent": "flex-end",
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignItems": "center",
+                                        "alignSelf": "center",
+                                        "flex": 1,
+                                      },
+                                      Object {
+                                        "alignItems": "center",
+                                      },
+                                    ]
                                   }
-                                }
-                              >
+                                >
+                                  <View
+                                    accessible={true}
+                                  />
+                                </View>
                                 <View
-                                  accessibilityRole="button"
-                                  accessibilityState={
-                                    Object {
-                                      "disabled": undefined,
-                                    }
-                                  }
-                                  accessible={true}
-                                  collapsable={false}
-                                  focusable={false}
-                                  forwardedRef={[Function]}
-                                  hitSlop={
-                                    Object {
-                                      "bottom": 4,
-                                      "top": 4,
-                                    }
-                                  }
-                                  onClick={[Function]}
-                                  onResponderGrant={[Function]}
-                                  onResponderMove={[Function]}
-                                  onResponderRelease={[Function]}
-                                  onResponderTerminate={[Function]}
-                                  onResponderTerminationRequest={[Function]}
-                                  onStartShouldSetResponder={[Function]}
                                   style={
                                     Object {
-                                      "alignItems": "center",
-                                      "alignSelf": null,
-                                      "backgroundColor": "transparent",
-                                      "borderBottomWidth": null,
-                                      "borderColor": null,
-                                      "borderLeftWidth": null,
-                                      "borderRadius": 50,
-                                      "borderRightWidth": null,
-                                      "borderTopWidth": null,
-                                      "borderWidth": undefined,
-                                      "elevation": 0,
+                                      "alignItems": "flex-end",
+                                      "alignSelf": "center",
+                                      "flex": 1,
                                       "flexDirection": "row",
-                                      "height": 45,
-                                      "justifyContent": "space-between",
-                                      "marginRight": -9,
-                                      "opacity": 1,
-                                      "paddingBottom": 6,
-                                      "paddingLeft": 15,
-                                      "paddingRight": 15,
-                                      "paddingTop": 6,
-                                      "shadowColor": null,
-                                      "shadowOffset": null,
-                                      "shadowOpacity": null,
-                                      "shadowRadius": null,
+                                      "justifyContent": "flex-end",
                                     }
                                   }
-                                />
+                                >
+                                  <View
+                                    accessibilityRole="button"
+                                    accessibilityState={
+                                      Object {
+                                        "disabled": undefined,
+                                      }
+                                    }
+                                    accessible={true}
+                                    collapsable={false}
+                                    focusable={false}
+                                    forwardedRef={[Function]}
+                                    hitSlop={
+                                      Object {
+                                        "bottom": 4,
+                                        "top": 4,
+                                      }
+                                    }
+                                    onClick={[Function]}
+                                    onResponderGrant={[Function]}
+                                    onResponderMove={[Function]}
+                                    onResponderRelease={[Function]}
+                                    onResponderTerminate={[Function]}
+                                    onResponderTerminationRequest={[Function]}
+                                    onStartShouldSetResponder={[Function]}
+                                    style={
+                                      Object {
+                                        "alignItems": "center",
+                                        "alignSelf": null,
+                                        "backgroundColor": "transparent",
+                                        "borderBottomWidth": null,
+                                        "borderColor": null,
+                                        "borderLeftWidth": null,
+                                        "borderRadius": 50,
+                                        "borderRightWidth": null,
+                                        "borderTopWidth": null,
+                                        "borderWidth": undefined,
+                                        "elevation": 0,
+                                        "flexDirection": "row",
+                                        "height": 45,
+                                        "justifyContent": "space-between",
+                                        "marginRight": -9,
+                                        "opacity": 1,
+                                        "paddingBottom": 6,
+                                        "paddingLeft": 15,
+                                        "paddingRight": 15,
+                                        "paddingTop": 6,
+                                        "shadowColor": null,
+                                        "shadowOffset": null,
+                                        "shadowOpacity": null,
+                                        "shadowRadius": null,
+                                      }
+                                    }
+                                  />
+                                </View>
                               </View>
-                            </View>
-                          </RCTSafeAreaView>
+                            </RCTSafeAreaView>
+                          </View>
                         </View>
-                      </View>
-                      <RCTSafeAreaView
-                        emulateUnlessSupported={true}
-                        style={
-                          Object {
-                            "flex": 1,
-                          }
-                        }
-                      >
                         <RCTSafeAreaView
-                          emulateUnlessSupported={true}
                           style={
                             Object {
-                              "backgroundColor": "transparent",
                               "flex": 1,
                             }
                           }
                         >
-                          <RCTScrollView
-                            automaticallyAdjustContentInsets={false}
-                            bounces={false}
-                            contentContainerStyle={
-                              Array [
-                                Object {
-                                  "padding": undefined,
-                                },
-                                Object {
-                                  "flexGrow": 1,
-                                  "justifyContent": "center",
-                                },
-                              ]
-                            }
-                            contentInset={
-                              Object {
-                                "bottom": 0,
-                              }
-                            }
-                            enableAutomaticScroll={true}
-                            enableOnAndroid={false}
-                            enableResetScrollToCoords={true}
-                            extraHeight={75}
-                            extraScrollHeight={0}
-                            getScrollResponder={[Function]}
-                            handleOnScroll={[Function]}
-                            keyboardDismissMode="interactive"
-                            keyboardOpeningTime={250}
-                            keyboardShouldPersistTaps="handled"
-                            keyboardSpace={0}
-                            onScroll={[Function]}
-                            resetKeyboardSpace={[Function]}
-                            resetScrollToCoords={
-                              Object {
-                                "x": 0,
-                                "y": 0,
-                              }
-                            }
-                            scrollEventThrottle={1}
-                            scrollForExtraHeightOnAndroid={[Function]}
-                            scrollIntoView={[Function]}
-                            scrollToEnd={[Function]}
-                            scrollToFocusedInput={[Function]}
-                            scrollToPosition={[Function]}
-                            showsVerticalScrollIndicator={true}
+                          <RCTSafeAreaView
                             style={
                               Object {
                                 "backgroundColor": "transparent",
                                 "flex": 1,
                               }
                             }
-                            testID="LoadingErrorComponentError"
-                            update={[Function]}
-                            viewIsInsideTabBar={false}
                           >
-                            <View>
-                              <View
-                                style={
+                            <RCTScrollView
+                              automaticallyAdjustContentInsets={false}
+                              bounces={false}
+                              contentContainerStyle={
+                                Array [
                                   Object {
-                                    "alignItems": "center",
-                                  }
+                                    "padding": undefined,
+                                  },
+                                  Object {
+                                    "flexGrow": 1,
+                                    "justifyContent": "center",
+                                  },
+                                ]
+                              }
+                              contentInset={
+                                Object {
+                                  "bottom": 0,
                                 }
-                              >
-                                <View
-                                  style={
-                                    Object {
-                                      "height": 40,
-                                    }
-                                  }
-                                />
-                                <Image
-                                  source={
-                                    Object {
-                                      "testUri": "../../../img/wallet/errors/generic-error-icon.png",
-                                    }
-                                  }
-                                />
-                                <View
-                                  style={
-                                    Object {
-                                      "height": 40,
-                                    }
-                                  }
-                                />
+                              }
+                              enableAutomaticScroll={true}
+                              enableOnAndroid={false}
+                              enableResetScrollToCoords={true}
+                              extraHeight={75}
+                              extraScrollHeight={0}
+                              getScrollResponder={[Function]}
+                              handleOnScroll={[Function]}
+                              keyboardDismissMode="interactive"
+                              keyboardOpeningTime={250}
+                              keyboardShouldPersistTaps="handled"
+                              keyboardSpace={0}
+                              onScroll={[Function]}
+                              resetKeyboardSpace={[Function]}
+                              resetScrollToCoords={
+                                Object {
+                                  "x": 0,
+                                  "y": 0,
+                                }
+                              }
+                              scrollEventThrottle={1}
+                              scrollForExtraHeightOnAndroid={[Function]}
+                              scrollIntoView={[Function]}
+                              scrollToEnd={[Function]}
+                              scrollToFocusedInput={[Function]}
+                              scrollToPosition={[Function]}
+                              showsVerticalScrollIndicator={true}
+                              style={
+                                Object {
+                                  "backgroundColor": "transparent",
+                                  "flex": 1,
+                                }
+                              }
+                              testID="LoadingErrorComponentError"
+                              update={[Function]}
+                              viewIsInsideTabBar={false}
+                            >
+                              <View>
                                 <View
                                   style={
                                     Object {
@@ -1933,286 +2032,315 @@ exports[`MessageRouterScreen should match snapshot on message data retrieval fai
                                     }
                                   }
                                 >
-                                  <Text
-                                    color="bluegreyDark"
-                                    defaultColor="bluegreyDark"
-                                    defaultWeight="Bold"
-                                    font="TitilliumWeb"
-                                    fontStyle={
+                                  <View
+                                    style={
                                       Object {
-                                        "fontSize": 20,
-                                        "lineHeight": 24,
+                                        "height": 40,
                                       }
                                     }
-                                    style={
-                                      Array [
-                                        Object {
-                                          "fontSize": 20,
-                                          "lineHeight": 24,
-                                        },
-                                        Object {
-                                          "color": "#17324D",
-                                          "fontFamily": "Titillium Web",
-                                          "fontStyle": "normal",
-                                          "fontWeight": "700",
-                                        },
-                                      ]
+                                  />
+                                  <Image
+                                    source={
+                                      Object {
+                                        "testUri": "../../../img/wallet/errors/generic-error-icon.png",
+                                      }
                                     }
-                                    weight="Bold"
-                                  >
-                                    There is a temporary problem, please try again.
-                                  </Text>
+                                  />
                                   <View
                                     style={
                                       Object {
-                                        "height": 16,
+                                        "height": 40,
                                       }
                                     }
                                   />
-                                  <Text
-                                    accessible={false}
-                                    color="bluegrey"
-                                    defaultColor="bluegrey"
-                                    defaultWeight="Regular"
-                                    font="TitilliumWeb"
-                                    fontStyle={
+                                  <View
+                                    style={
                                       Object {
-                                        "fontSize": 16,
-                                        "lineHeight": 24,
+                                        "alignItems": "center",
                                       }
                                     }
-                                    style={
-                                      Array [
+                                  >
+                                    <Text
+                                      color="bluegreyDark"
+                                      defaultColor="bluegreyDark"
+                                      defaultWeight="Bold"
+                                      font="TitilliumWeb"
+                                      fontStyle={
                                         Object {
-                                          "fontSize": 16,
+                                          "fontSize": 20,
                                           "lineHeight": 24,
-                                        },
+                                        }
+                                      }
+                                      style={
+                                        Array [
+                                          Object {
+                                            "fontSize": 20,
+                                            "lineHeight": 24,
+                                          },
+                                          Object {
+                                            "color": "#17324D",
+                                            "fontFamily": "Titillium Web",
+                                            "fontStyle": "normal",
+                                            "fontWeight": "700",
+                                          },
+                                        ]
+                                      }
+                                      weight="Bold"
+                                    >
+                                      There is a temporary problem, please try again.
+                                    </Text>
+                                    <View
+                                      style={
                                         Object {
-                                          "color": "#475A6D",
-                                          "fontFamily": "Titillium Web",
-                                          "fontStyle": "normal",
-                                          "fontWeight": "400",
-                                        },
-                                      ]
+                                          "height": 16,
+                                        }
+                                      }
+                                    />
+                                    <Text
+                                      accessible={false}
+                                      color="bluegrey"
+                                      defaultColor="bluegrey"
+                                      defaultWeight="Regular"
+                                      font="TitilliumWeb"
+                                      fontStyle={
+                                        Object {
+                                          "fontSize": 16,
+                                          "lineHeight": 24,
+                                        }
+                                      }
+                                      style={
+                                        Array [
+                                          Object {
+                                            "fontSize": 16,
+                                            "lineHeight": 24,
+                                          },
+                                          Object {
+                                            "color": "#475A6D",
+                                            "fontFamily": "Titillium Web",
+                                            "fontStyle": "normal",
+                                            "fontWeight": "400",
+                                          },
+                                        ]
+                                      }
+                                      weight="Regular"
+                                    />
+                                  </View>
+                                  <View
+                                    style={
+                                      Object {
+                                        "height": 40,
+                                      }
                                     }
-                                    weight="Regular"
                                   />
                                 </View>
-                                <View
-                                  style={
-                                    Object {
-                                      "height": 40,
-                                    }
-                                  }
-                                />
                               </View>
-                            </View>
-                          </RCTScrollView>
-                        </RCTSafeAreaView>
-                        <View
-                          pointerEvents="box-none"
-                          style={
-                            Object {
-                              "marginTop": -50,
-                              "overflow": "hidden",
-                              "paddingTop": 50,
-                            }
-                          }
-                          testID="FooterWithButtons"
-                        >
+                            </RCTScrollView>
+                          </RCTSafeAreaView>
                           <View
+                            pointerEvents="box-none"
                             style={
                               Object {
-                                "backgroundColor": "#FFFFFF",
-                                "elevation": 20,
-                                "paddingBottom": 16,
-                                "paddingLeft": 24,
-                                "paddingRight": 24,
-                                "paddingTop": 16,
-                                "shadowColor": "#0E0F13",
-                                "shadowOffset": Object {
-                                  "height": 50,
-                                  "width": 0,
-                                },
-                                "shadowOpacity": 0.5,
-                                "shadowRadius": 37,
+                                "marginTop": -50,
+                                "overflow": "hidden",
+                                "paddingTop": 50,
                               }
                             }
+                            testID="FooterWithButtons"
                           >
                             <View
                               style={
                                 Object {
-                                  "flexDirection": "row",
+                                  "backgroundColor": "#FFFFFF",
+                                  "elevation": 20,
+                                  "paddingBottom": 16,
+                                  "paddingLeft": 24,
+                                  "paddingRight": 24,
+                                  "paddingTop": 16,
+                                  "shadowColor": "#0E0F13",
+                                  "shadowOffset": Object {
+                                    "height": 50,
+                                    "width": 0,
+                                  },
+                                  "shadowOpacity": 0.5,
+                                  "shadowRadius": 37,
                                 }
                               }
                             >
                               <View
-                                accessibilityRole="button"
-                                accessibilityState={
-                                  Object {
-                                    "disabled": undefined,
-                                  }
-                                }
-                                accessible={true}
-                                collapsable={false}
-                                focusable={true}
-                                forwardedRef={[Function]}
-                                hitSlop={
-                                  Object {
-                                    "bottom": 4,
-                                    "top": 4,
-                                  }
-                                }
-                                onClick={[Function]}
-                                onResponderGrant={[Function]}
-                                onResponderMove={[Function]}
-                                onResponderRelease={[Function]}
-                                onResponderTerminate={[Function]}
-                                onResponderTerminationRequest={[Function]}
-                                onStartShouldSetResponder={[Function]}
                                 style={
                                   Object {
-                                    "alignContent": "center",
-                                    "alignItems": "center",
-                                    "alignSelf": "flex-start",
-                                    "backgroundColor": "transparent",
-                                    "borderBottomWidth": 1,
-                                    "borderColor": "#007aff",
-                                    "borderLeftWidth": 1,
-                                    "borderRadius": 5,
-                                    "borderRightWidth": 1,
-                                    "borderTopWidth": 1,
-                                    "borderWidth": 1,
-                                    "elevation": null,
-                                    "flex": 1,
                                     "flexDirection": "row",
-                                    "height": 45,
-                                    "justifyContent": "center",
-                                    "opacity": 1,
-                                    "paddingBottom": 6,
-                                    "paddingTop": 6,
-                                    "shadowColor": null,
-                                    "shadowOffset": null,
-                                    "shadowOpacity": null,
-                                    "shadowRadius": null,
                                   }
                                 }
                               >
-                                <Text
-                                  style={
-                                    Array [
-                                      Object {
-                                        "backgroundColor": "transparent",
-                                        "color": "#007aff",
-                                        "fontFamily": "System",
-                                        "fontSize": 16.5,
-                                        "marginLeft": 0,
-                                        "marginRight": 0,
-                                        "paddingLeft": 16,
-                                        "paddingRight": 16,
-                                      },
-                                      undefined,
-                                      undefined,
-                                    ]
+                                <View
+                                  accessibilityRole="button"
+                                  accessibilityState={
+                                    Object {
+                                      "disabled": undefined,
+                                    }
                                   }
-                                  uppercase={false}
-                                >
-                                  Cancel
-                                </Text>
-                              </View>
-                              <View
-                                style={
-                                  Object {
-                                    "width": 16,
+                                  accessible={true}
+                                  collapsable={false}
+                                  focusable={true}
+                                  forwardedRef={[Function]}
+                                  hitSlop={
+                                    Object {
+                                      "bottom": 4,
+                                      "top": 4,
+                                    }
                                   }
-                                }
-                              />
-                              <View
-                                accessibilityRole="button"
-                                accessibilityState={
-                                  Object {
-                                    "disabled": undefined,
+                                  onClick={[Function]}
+                                  onResponderGrant={[Function]}
+                                  onResponderMove={[Function]}
+                                  onResponderRelease={[Function]}
+                                  onResponderTerminate={[Function]}
+                                  onResponderTerminationRequest={[Function]}
+                                  onStartShouldSetResponder={[Function]}
+                                  style={
+                                    Object {
+                                      "alignContent": "center",
+                                      "alignItems": "center",
+                                      "alignSelf": "flex-start",
+                                      "backgroundColor": "transparent",
+                                      "borderBottomWidth": 1,
+                                      "borderColor": "#007aff",
+                                      "borderLeftWidth": 1,
+                                      "borderRadius": 5,
+                                      "borderRightWidth": 1,
+                                      "borderTopWidth": 1,
+                                      "borderWidth": 1,
+                                      "elevation": null,
+                                      "flex": 1,
+                                      "flexDirection": "row",
+                                      "height": 45,
+                                      "justifyContent": "center",
+                                      "opacity": 1,
+                                      "paddingBottom": 6,
+                                      "paddingTop": 6,
+                                      "shadowColor": null,
+                                      "shadowOffset": null,
+                                      "shadowOpacity": null,
+                                      "shadowRadius": null,
+                                    }
                                   }
-                                }
-                                accessible={true}
-                                collapsable={false}
-                                focusable={true}
-                                forwardedRef={[Function]}
-                                hitSlop={
-                                  Object {
-                                    "bottom": 4,
-                                    "top": 4,
+                                >
+                                  <Text
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "color": "#007aff",
+                                          "fontFamily": "System",
+                                          "fontSize": 16.5,
+                                          "marginLeft": 0,
+                                          "marginRight": 0,
+                                          "paddingLeft": 16,
+                                          "paddingRight": 16,
+                                        },
+                                        undefined,
+                                        undefined,
+                                      ]
+                                    }
+                                    uppercase={false}
+                                  >
+                                    Cancel
+                                  </Text>
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "width": 16,
+                                    }
                                   }
-                                }
-                                onClick={[Function]}
-                                onResponderGrant={[Function]}
-                                onResponderMove={[Function]}
-                                onResponderRelease={[Function]}
-                                onResponderTerminate={[Function]}
-                                onResponderTerminationRequest={[Function]}
-                                onStartShouldSetResponder={[Function]}
-                                style={
-                                  Object {
-                                    "alignContent": "center",
-                                    "alignItems": "center",
-                                    "alignSelf": "flex-start",
-                                    "backgroundColor": "#007aff",
-                                    "borderBottomWidth": null,
-                                    "borderColor": "#007aff",
-                                    "borderLeftWidth": null,
-                                    "borderRadius": 5,
-                                    "borderRightWidth": null,
-                                    "borderTopWidth": null,
-                                    "borderWidth": undefined,
-                                    "elevation": 2,
-                                    "flex": 1,
-                                    "flexDirection": "row",
-                                    "height": 45,
-                                    "justifyContent": "center",
-                                    "opacity": 1,
-                                    "paddingBottom": 6,
-                                    "paddingTop": 6,
-                                    "shadowColor": undefined,
-                                    "shadowOffset": undefined,
-                                    "shadowOpacity": undefined,
-                                    "shadowRadius": undefined,
+                                />
+                                <View
+                                  accessibilityRole="button"
+                                  accessibilityState={
+                                    Object {
+                                      "disabled": undefined,
+                                    }
                                   }
-                                }
-                              >
-                                <Text
+                                  accessible={true}
+                                  collapsable={false}
+                                  focusable={true}
+                                  forwardedRef={[Function]}
+                                  hitSlop={
+                                    Object {
+                                      "bottom": 4,
+                                      "top": 4,
+                                    }
+                                  }
+                                  onClick={[Function]}
+                                  onResponderGrant={[Function]}
+                                  onResponderMove={[Function]}
+                                  onResponderRelease={[Function]}
+                                  onResponderTerminate={[Function]}
+                                  onResponderTerminationRequest={[Function]}
+                                  onStartShouldSetResponder={[Function]}
                                   style={
-                                    Array [
-                                      Object {
-                                        "backgroundColor": "transparent",
-                                        "color": "#fff",
-                                        "fontFamily": "System",
-                                        "fontSize": 16.5,
-                                        "marginLeft": 0,
-                                        "marginRight": 0,
-                                        "paddingLeft": 16,
-                                        "paddingRight": 16,
-                                      },
-                                      undefined,
-                                      undefined,
-                                    ]
+                                    Object {
+                                      "alignContent": "center",
+                                      "alignItems": "center",
+                                      "alignSelf": "flex-start",
+                                      "backgroundColor": "#007aff",
+                                      "borderBottomWidth": null,
+                                      "borderColor": "#007aff",
+                                      "borderLeftWidth": null,
+                                      "borderRadius": 5,
+                                      "borderRightWidth": null,
+                                      "borderTopWidth": null,
+                                      "borderWidth": undefined,
+                                      "elevation": 2,
+                                      "flex": 1,
+                                      "flexDirection": "row",
+                                      "height": 45,
+                                      "justifyContent": "center",
+                                      "opacity": 1,
+                                      "paddingBottom": 6,
+                                      "paddingTop": 6,
+                                      "shadowColor": undefined,
+                                      "shadowOffset": undefined,
+                                      "shadowOpacity": undefined,
+                                      "shadowRadius": undefined,
+                                    }
                                   }
-                                  uppercase={false}
                                 >
-                                  Retry
-                                </Text>
+                                  <Text
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "color": "#fff",
+                                          "fontFamily": "System",
+                                          "fontSize": 16.5,
+                                          "marginLeft": 0,
+                                          "marginRight": 0,
+                                          "paddingLeft": 16,
+                                          "paddingRight": 16,
+                                        },
+                                        undefined,
+                                        undefined,
+                                      ]
+                                    }
+                                    uppercase={false}
+                                  >
+                                    Retry
+                                  </Text>
+                                </View>
                               </View>
                             </View>
                           </View>
-                        </View>
-                      </RCTSafeAreaView>
+                        </RCTSafeAreaView>
+                      </View>
                     </View>
                   </View>
                 </View>
               </View>
             </View>
           </View>
-        </View>
-      </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
     </View>
   </RNCSafeAreaProvider>
 </View>
@@ -2238,622 +2366,665 @@ exports[`MessageRouterScreen should match snapshot on message data retrieval suc
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
+        collapsable={false}
         pointerEvents="box-none"
-        style={null}
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
       >
         <View
-          collapsable={false}
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
           pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
+          style={null}
         >
           <View
             collapsable={false}
+            pointerEvents="box-none"
             style={
               Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
               }
             }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
               }
-            }
-          />
+            />
+          </View>
           <View
+            collapsable={false}
             pointerEvents="box-none"
             style={
               Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
               }
             }
           >
             <View
-              collapsable={false}
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
               pointerEvents="box-none"
               style={
                 Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
                 }
               }
             >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
                 collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
+                pointerEvents="box-none"
                 style={
                   Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
                   }
                 }
               >
-                MESSAGE_ROUTER
-              </Text>
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  MESSAGE_ROUTER
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
             </View>
           </View>
         </View>
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
+      <RNSScreenContainer
+        onLayout={[Function]}
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "flex": 1,
           }
         }
       >
-        <View
+        <RNSModalScreen
+          activityState={2}
           collapsable={false}
-          style={
+          forwardedRef={[Function]}
+          gestureResponseDistance={
             Object {
-              "opacity": 1,
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
             }
           }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          onGestureCancel={[Function]}
           pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
           style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
             Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={5}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={5}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
                     <View
                       style={
                         Object {
-                          "backgroundColor": "#fff",
                           "flex": 1,
-                          "height": 1334,
                         }
                       }
                     >
-                      <View>
+                      <View
+                        style={
+                          Object {
+                            "backgroundColor": "#fff",
+                            "flex": 1,
+                            "height": 1334,
+                          }
+                        }
+                      >
                         <View>
-                          <RCTSafeAreaView
-                            emulateUnlessSupported={true}
-                            style={
-                              Object {
-                                "backgroundColor": "#F8F8F8",
-                              }
-                            }
-                          >
-                            <View
-                              androidStatusBarColor="#FFFFFF"
-                              iosBarStyle="dark-content"
-                              noShadow={false}
+                          <View>
+                            <RCTSafeAreaView
                               style={
                                 Object {
                                   "backgroundColor": "#F8F8F8",
-                                  "borderBottomColor": "#a7a6ab",
-                                  "borderBottomWidth": 0.5,
-                                  "elevation": 3,
-                                  "flexDirection": "row",
-                                  "height": 64,
-                                  "justifyContent": "center",
-                                  "left": 0,
-                                  "paddingLeft": 6,
-                                  "paddingRight": 10,
-                                  "right": 0,
-                                  "shadowColor": undefined,
-                                  "shadowOffset": undefined,
-                                  "shadowOpacity": undefined,
-                                  "shadowRadius": undefined,
-                                  "top": 0,
                                 }
                               }
                             >
                               <View
+                                androidStatusBarColor="#FFFFFF"
+                                iosBarStyle="dark-content"
+                                noShadow={false}
                                 style={
                                   Object {
-                                    "alignItems": "flex-start",
-                                    "alignSelf": "center",
-                                    "flex": 1,
+                                    "backgroundColor": "#F8F8F8",
+                                    "borderBottomColor": "#a7a6ab",
+                                    "borderBottomWidth": 0.5,
+                                    "elevation": 3,
+                                    "flexDirection": "row",
+                                    "height": 64,
+                                    "justifyContent": "center",
+                                    "left": 0,
+                                    "paddingLeft": 6,
+                                    "paddingRight": 10,
+                                    "right": 0,
+                                    "shadowColor": undefined,
+                                    "shadowOffset": undefined,
+                                    "shadowOpacity": undefined,
+                                    "shadowRadius": undefined,
+                                    "top": 0,
                                   }
                                 }
                               >
                                 <View
-                                  accessibilityLabel="Back"
-                                  accessibilityRole="button"
-                                  accessibilityState={
+                                  style={
                                     Object {
-                                      "disabled": false,
+                                      "alignItems": "flex-start",
+                                      "alignSelf": "center",
+                                      "flex": 1,
                                     }
                                   }
-                                  accessible={true}
-                                  collapsable={false}
-                                  focusable={true}
-                                  hitSlop={8}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onResponderGrant={[Function]}
-                                  onResponderMove={[Function]}
-                                  onResponderRelease={[Function]}
-                                  onResponderTerminate={[Function]}
-                                  onResponderTerminationRequest={[Function]}
-                                  onStartShouldSetResponder={[Function]}
-                                  testID="back-button"
                                 >
                                   <View
-                                    style={
-                                      Array [
-                                        Object {
-                                          "height": 24,
-                                          "width": 24,
-                                        },
-                                        Object {
-                                          "alignItems": "center",
-                                        },
-                                        Object {
-                                          "justifyContent": "center",
-                                        },
-                                        Object {
-                                          "transform": Array [
-                                            Object {
-                                              "scale": undefined,
-                                            },
-                                          ],
-                                        },
-                                      ]
+                                    accessibilityLabel="Back"
+                                    accessibilityRole="button"
+                                    accessibilityState={
+                                      Object {
+                                        "disabled": false,
+                                      }
                                     }
+                                    accessible={true}
+                                    collapsable={false}
+                                    focusable={true}
+                                    hitSlop={8}
+                                    onBlur={[Function]}
+                                    onClick={[Function]}
+                                    onFocus={[Function]}
+                                    onResponderGrant={[Function]}
+                                    onResponderMove={[Function]}
+                                    onResponderRelease={[Function]}
+                                    onResponderTerminate={[Function]}
+                                    onResponderTerminationRequest={[Function]}
+                                    onStartShouldSetResponder={[Function]}
+                                    testID="back-button"
                                   >
-                                    <RNSVGSvgView
-                                      accessibilityElementsHidden={true}
-                                      accessibilityLabel=""
-                                      accessible={false}
-                                      align="xMidYMid"
-                                      animatedProps={
-                                        Object {
-                                          "color": undefined,
-                                        }
-                                      }
-                                      bbHeight={24}
-                                      bbWidth={24}
-                                      color={4279111443}
-                                      focusable={false}
-                                      height={24}
-                                      importantForAccessibility="no-hide-descendants"
-                                      meetOrSlice={0}
-                                      minX={0}
-                                      minY={0}
+                                    <View
                                       style={
                                         Array [
                                           Object {
-                                            "backgroundColor": "transparent",
-                                            "borderWidth": 0,
+                                            "height": 24,
+                                            "width": 24,
+                                          },
+                                          Object {
+                                            "alignItems": "center",
                                           },
                                           Object {
-                                            "color": "#0E0F13",
+                                            "justifyContent": "center",
                                           },
                                           Object {
-                                            "flex": 0,
-                                            "height": 24,
-                                            "width": 24,
+                                            "transform": Array [
+                                              Object {
+                                                "scale": undefined,
+                                              },
+                                            ],
                                           },
                                         ]
                                       }
-                                      tintColor={4279111443}
-                                      vbHeight={24}
-                                      vbWidth={24}
-                                      width={24}
                                     >
-                                      <RNSVGGroup>
-                                        <RNSVGPath
-                                          clipRule={0}
-                                          d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
-                                          fill={
-                                            Array [
-                                              2,
-                                            ]
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        animatedProps={
+                                          Object {
+                                            "color": undefined,
                                           }
-                                          fillRule={0}
-                                          propList={
-                                            Array [
-                                              "fill",
-                                              "fillRule",
-                                            ]
+                                        }
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0E0F13",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0E0F13"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
                                           }
-                                        />
-                                      </RNSVGGroup>
-                                    </RNSVGSvgView>
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
                                   </View>
                                 </View>
-                              </View>
-                              <View
-                                style={
-                                  Array [
-                                    Object {
-                                      "alignItems": "center",
-                                      "alignSelf": "center",
-                                      "flex": 1,
-                                    },
-                                    Object {
-                                      "alignItems": "center",
-                                    },
-                                  ]
-                                }
-                              >
                                 <View
-                                  accessible={true}
-                                />
-                              </View>
-                              <View
-                                style={
-                                  Object {
-                                    "alignItems": "flex-end",
-                                    "alignSelf": "center",
-                                    "flex": 1,
-                                    "flexDirection": "row",
-                                    "justifyContent": "flex-end",
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignItems": "center",
+                                        "alignSelf": "center",
+                                        "flex": 1,
+                                      },
+                                      Object {
+                                        "alignItems": "center",
+                                      },
+                                    ]
                                   }
-                                }
-                              >
+                                >
+                                  <View
+                                    accessible={true}
+                                  />
+                                </View>
                                 <View
-                                  accessibilityRole="button"
-                                  accessibilityState={
-                                    Object {
-                                      "disabled": undefined,
-                                    }
-                                  }
-                                  accessible={true}
-                                  collapsable={false}
-                                  focusable={false}
-                                  forwardedRef={[Function]}
-                                  hitSlop={
-                                    Object {
-                                      "bottom": 4,
-                                      "top": 4,
-                                    }
-                                  }
-                                  onClick={[Function]}
-                                  onResponderGrant={[Function]}
-                                  onResponderMove={[Function]}
-                                  onResponderRelease={[Function]}
-                                  onResponderTerminate={[Function]}
-                                  onResponderTerminationRequest={[Function]}
-                                  onStartShouldSetResponder={[Function]}
                                   style={
                                     Object {
-                                      "alignItems": "center",
-                                      "alignSelf": null,
-                                      "backgroundColor": "transparent",
-                                      "borderBottomWidth": null,
-                                      "borderColor": null,
-                                      "borderLeftWidth": null,
-                                      "borderRadius": 50,
-                                      "borderRightWidth": null,
-                                      "borderTopWidth": null,
-                                      "borderWidth": undefined,
-                                      "elevation": 0,
+                                      "alignItems": "flex-end",
+                                      "alignSelf": "center",
+                                      "flex": 1,
                                       "flexDirection": "row",
-                                      "height": 45,
-                                      "justifyContent": "space-between",
-                                      "marginRight": -9,
-                                      "opacity": 1,
-                                      "paddingBottom": 6,
-                                      "paddingLeft": 15,
-                                      "paddingRight": 15,
-                                      "paddingTop": 6,
-                                      "shadowColor": null,
-                                      "shadowOffset": null,
-                                      "shadowOpacity": null,
-                                      "shadowRadius": null,
+                                      "justifyContent": "flex-end",
                                     }
                                   }
-                                />
+                                >
+                                  <View
+                                    accessibilityRole="button"
+                                    accessibilityState={
+                                      Object {
+                                        "disabled": undefined,
+                                      }
+                                    }
+                                    accessible={true}
+                                    collapsable={false}
+                                    focusable={false}
+                                    forwardedRef={[Function]}
+                                    hitSlop={
+                                      Object {
+                                        "bottom": 4,
+                                        "top": 4,
+                                      }
+                                    }
+                                    onClick={[Function]}
+                                    onResponderGrant={[Function]}
+                                    onResponderMove={[Function]}
+                                    onResponderRelease={[Function]}
+                                    onResponderTerminate={[Function]}
+                                    onResponderTerminationRequest={[Function]}
+                                    onStartShouldSetResponder={[Function]}
+                                    style={
+                                      Object {
+                                        "alignItems": "center",
+                                        "alignSelf": null,
+                                        "backgroundColor": "transparent",
+                                        "borderBottomWidth": null,
+                                        "borderColor": null,
+                                        "borderLeftWidth": null,
+                                        "borderRadius": 50,
+                                        "borderRightWidth": null,
+                                        "borderTopWidth": null,
+                                        "borderWidth": undefined,
+                                        "elevation": 0,
+                                        "flexDirection": "row",
+                                        "height": 45,
+                                        "justifyContent": "space-between",
+                                        "marginRight": -9,
+                                        "opacity": 1,
+                                        "paddingBottom": 6,
+                                        "paddingLeft": 15,
+                                        "paddingRight": 15,
+                                        "paddingTop": 6,
+                                        "shadowColor": null,
+                                        "shadowOffset": null,
+                                        "shadowOpacity": null,
+                                        "shadowRadius": null,
+                                      }
+                                    }
+                                  />
+                                </View>
                               </View>
-                            </View>
-                          </RCTSafeAreaView>
+                            </RCTSafeAreaView>
+                          </View>
                         </View>
-                      </View>
-                      <RCTSafeAreaView
-                        emulateUnlessSupported={true}
-                        style={
-                          Object {
-                            "flex": 1,
-                          }
-                        }
-                      >
-                        <View
-                          accessible={true}
+                        <RCTSafeAreaView
                           style={
                             Object {
                               "flex": 1,
                             }
                           }
-                          testID="LoadingErrorComponentLoading"
                         >
                           <View
+                            accessible={true}
                             style={
                               Object {
-                                "alignItems": "center",
                                 "flex": 1,
-                                "justifyContent": "center",
-                                "padding": 24,
                               }
                             }
-                            testID="InfoScreenComponent"
+                            testID="LoadingErrorComponentLoading"
                           >
-                            <ActivityIndicator
-                              accessibilityElementsHidden={true}
-                              accessible={false}
-                              color="black"
-                              importantForAccessibility="no-hide-descendants"
-                            />
                             <View
                               style={
                                 Object {
-                                  "height": 24,
-                                }
-                              }
-                            />
-                            <Text
-                              accessible={true}
-                              color="bluegreyDark"
-                              defaultColor="bluegreyDark"
-                              defaultWeight="Bold"
-                              font="TitilliumWeb"
-                              fontStyle={
-                                Object {
-                                  "fontSize": 20,
-                                  "lineHeight": 24,
+                                  "alignItems": "center",
+                                  "flex": 1,
+                                  "justifyContent": "center",
+                                  "padding": 24,
                                 }
                               }
-                              style={
-                                Array [
+                              testID="InfoScreenComponent"
+                            >
+                              <ActivityIndicator
+                                accessibilityElementsHidden={true}
+                                accessible={false}
+                                color="black"
+                                importantForAccessibility="no-hide-descendants"
+                              />
+                              <View
+                                style={
                                   Object {
-                                    "textAlign": "center",
-                                  },
+                                    "height": 24,
+                                  }
+                                }
+                              />
+                              <Text
+                                accessible={true}
+                                color="bluegreyDark"
+                                defaultColor="bluegreyDark"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
                                     "fontSize": 20,
                                     "lineHeight": 24,
-                                  },
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "textAlign": "center",
+                                    },
+                                    Object {
+                                      "fontSize": 20,
+                                      "lineHeight": 24,
+                                    },
+                                    Object {
+                                      "color": "#17324D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "700",
+                                    },
+                                  ]
+                                }
+                                testID="infoScreenTitle"
+                                weight="Bold"
+                              >
+                                Loading message details in progress...
+                              </Text>
+                              <View
+                                style={
                                   Object {
-                                    "color": "#17324D",
-                                    "fontFamily": "Titillium Web",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "700",
-                                  },
-                                ]
-                              }
-                              testID="infoScreenTitle"
-                              weight="Bold"
-                            >
-                              Loading message details in progress...
-                            </Text>
-                            <View
-                              style={
-                                Object {
-                                  "height": 16,
+                                    "height": 16,
+                                  }
                                 }
-                              }
-                            />
+                              />
+                            </View>
                           </View>
-                        </View>
-                      </RCTSafeAreaView>
+                        </RCTSafeAreaView>
+                      </View>
                     </View>
                   </View>
                 </View>
               </View>
             </View>
           </View>
-        </View>
-      </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
     </View>
   </RNCSafeAreaProvider>
 </View>
@@ -2879,622 +3050,665 @@ exports[`MessageRouterScreen should match snapshot while retrieving message data
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
+        collapsable={false}
         pointerEvents="box-none"
-        style={null}
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
       >
         <View
-          collapsable={false}
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
           pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
+          style={null}
         >
           <View
             collapsable={false}
+            pointerEvents="box-none"
             style={
               Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
               }
             }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
               }
-            }
-          />
+            />
+          </View>
           <View
+            collapsable={false}
             pointerEvents="box-none"
             style={
               Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
               }
             }
           >
             <View
-              collapsable={false}
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
               pointerEvents="box-none"
               style={
                 Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
                 }
               }
             >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
+              <View
                 collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
+                pointerEvents="box-none"
                 style={
                   Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
                   }
                 }
               >
-                MESSAGE_ROUTER
-              </Text>
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  MESSAGE_ROUTER
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
             </View>
           </View>
         </View>
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
+      <RNSScreenContainer
+        onLayout={[Function]}
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "flex": 1,
           }
         }
       >
-        <View
+        <RNSModalScreen
+          activityState={2}
           collapsable={false}
-          style={
+          forwardedRef={[Function]}
+          gestureResponseDistance={
             Object {
-              "opacity": 1,
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
             }
           }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          onGestureCancel={[Function]}
           pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
           style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
             Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={2}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={2}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
                     <View
                       style={
                         Object {
-                          "backgroundColor": "#fff",
                           "flex": 1,
-                          "height": 1334,
                         }
                       }
                     >
-                      <View>
+                      <View
+                        style={
+                          Object {
+                            "backgroundColor": "#fff",
+                            "flex": 1,
+                            "height": 1334,
+                          }
+                        }
+                      >
                         <View>
-                          <RCTSafeAreaView
-                            emulateUnlessSupported={true}
-                            style={
-                              Object {
-                                "backgroundColor": "#F8F8F8",
-                              }
-                            }
-                          >
-                            <View
-                              androidStatusBarColor="#FFFFFF"
-                              iosBarStyle="dark-content"
-                              noShadow={false}
+                          <View>
+                            <RCTSafeAreaView
                               style={
                                 Object {
                                   "backgroundColor": "#F8F8F8",
-                                  "borderBottomColor": "#a7a6ab",
-                                  "borderBottomWidth": 0.5,
-                                  "elevation": 3,
-                                  "flexDirection": "row",
-                                  "height": 64,
-                                  "justifyContent": "center",
-                                  "left": 0,
-                                  "paddingLeft": 6,
-                                  "paddingRight": 10,
-                                  "right": 0,
-                                  "shadowColor": undefined,
-                                  "shadowOffset": undefined,
-                                  "shadowOpacity": undefined,
-                                  "shadowRadius": undefined,
-                                  "top": 0,
                                 }
                               }
                             >
                               <View
+                                androidStatusBarColor="#FFFFFF"
+                                iosBarStyle="dark-content"
+                                noShadow={false}
                                 style={
                                   Object {
-                                    "alignItems": "flex-start",
-                                    "alignSelf": "center",
-                                    "flex": 1,
+                                    "backgroundColor": "#F8F8F8",
+                                    "borderBottomColor": "#a7a6ab",
+                                    "borderBottomWidth": 0.5,
+                                    "elevation": 3,
+                                    "flexDirection": "row",
+                                    "height": 64,
+                                    "justifyContent": "center",
+                                    "left": 0,
+                                    "paddingLeft": 6,
+                                    "paddingRight": 10,
+                                    "right": 0,
+                                    "shadowColor": undefined,
+                                    "shadowOffset": undefined,
+                                    "shadowOpacity": undefined,
+                                    "shadowRadius": undefined,
+                                    "top": 0,
                                   }
                                 }
                               >
                                 <View
-                                  accessibilityLabel="Back"
-                                  accessibilityRole="button"
-                                  accessibilityState={
+                                  style={
                                     Object {
-                                      "disabled": false,
+                                      "alignItems": "flex-start",
+                                      "alignSelf": "center",
+                                      "flex": 1,
                                     }
                                   }
-                                  accessible={true}
-                                  collapsable={false}
-                                  focusable={true}
-                                  hitSlop={8}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onResponderGrant={[Function]}
-                                  onResponderMove={[Function]}
-                                  onResponderRelease={[Function]}
-                                  onResponderTerminate={[Function]}
-                                  onResponderTerminationRequest={[Function]}
-                                  onStartShouldSetResponder={[Function]}
-                                  testID="back-button"
                                 >
                                   <View
-                                    style={
-                                      Array [
-                                        Object {
-                                          "height": 24,
-                                          "width": 24,
-                                        },
-                                        Object {
-                                          "alignItems": "center",
-                                        },
-                                        Object {
-                                          "justifyContent": "center",
-                                        },
-                                        Object {
-                                          "transform": Array [
-                                            Object {
-                                              "scale": undefined,
-                                            },
-                                          ],
-                                        },
-                                      ]
+                                    accessibilityLabel="Back"
+                                    accessibilityRole="button"
+                                    accessibilityState={
+                                      Object {
+                                        "disabled": false,
+                                      }
                                     }
+                                    accessible={true}
+                                    collapsable={false}
+                                    focusable={true}
+                                    hitSlop={8}
+                                    onBlur={[Function]}
+                                    onClick={[Function]}
+                                    onFocus={[Function]}
+                                    onResponderGrant={[Function]}
+                                    onResponderMove={[Function]}
+                                    onResponderRelease={[Function]}
+                                    onResponderTerminate={[Function]}
+                                    onResponderTerminationRequest={[Function]}
+                                    onStartShouldSetResponder={[Function]}
+                                    testID="back-button"
                                   >
-                                    <RNSVGSvgView
-                                      accessibilityElementsHidden={true}
-                                      accessibilityLabel=""
-                                      accessible={false}
-                                      align="xMidYMid"
-                                      animatedProps={
-                                        Object {
-                                          "color": undefined,
-                                        }
-                                      }
-                                      bbHeight={24}
-                                      bbWidth={24}
-                                      color={4279111443}
-                                      focusable={false}
-                                      height={24}
-                                      importantForAccessibility="no-hide-descendants"
-                                      meetOrSlice={0}
-                                      minX={0}
-                                      minY={0}
+                                    <View
                                       style={
                                         Array [
                                           Object {
-                                            "backgroundColor": "transparent",
-                                            "borderWidth": 0,
+                                            "height": 24,
+                                            "width": 24,
+                                          },
+                                          Object {
+                                            "alignItems": "center",
                                           },
                                           Object {
-                                            "color": "#0E0F13",
+                                            "justifyContent": "center",
                                           },
                                           Object {
-                                            "flex": 0,
-                                            "height": 24,
-                                            "width": 24,
+                                            "transform": Array [
+                                              Object {
+                                                "scale": undefined,
+                                              },
+                                            ],
                                           },
                                         ]
                                       }
-                                      tintColor={4279111443}
-                                      vbHeight={24}
-                                      vbWidth={24}
-                                      width={24}
                                     >
-                                      <RNSVGGroup>
-                                        <RNSVGPath
-                                          clipRule={0}
-                                          d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
-                                          fill={
-                                            Array [
-                                              2,
-                                            ]
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        animatedProps={
+                                          Object {
+                                            "color": undefined,
                                           }
-                                          fillRule={0}
-                                          propList={
-                                            Array [
-                                              "fill",
-                                              "fillRule",
-                                            ]
+                                        }
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0E0F13",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0E0F13"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
                                           }
-                                        />
-                                      </RNSVGGroup>
-                                    </RNSVGSvgView>
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
                                   </View>
                                 </View>
-                              </View>
-                              <View
-                                style={
-                                  Array [
-                                    Object {
-                                      "alignItems": "center",
-                                      "alignSelf": "center",
-                                      "flex": 1,
-                                    },
-                                    Object {
-                                      "alignItems": "center",
-                                    },
-                                  ]
-                                }
-                              >
                                 <View
-                                  accessible={true}
-                                />
-                              </View>
-                              <View
-                                style={
-                                  Object {
-                                    "alignItems": "flex-end",
-                                    "alignSelf": "center",
-                                    "flex": 1,
-                                    "flexDirection": "row",
-                                    "justifyContent": "flex-end",
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignItems": "center",
+                                        "alignSelf": "center",
+                                        "flex": 1,
+                                      },
+                                      Object {
+                                        "alignItems": "center",
+                                      },
+                                    ]
                                   }
-                                }
-                              >
+                                >
+                                  <View
+                                    accessible={true}
+                                  />
+                                </View>
                                 <View
-                                  accessibilityRole="button"
-                                  accessibilityState={
-                                    Object {
-                                      "disabled": undefined,
-                                    }
-                                  }
-                                  accessible={true}
-                                  collapsable={false}
-                                  focusable={false}
-                                  forwardedRef={[Function]}
-                                  hitSlop={
-                                    Object {
-                                      "bottom": 4,
-                                      "top": 4,
-                                    }
-                                  }
-                                  onClick={[Function]}
-                                  onResponderGrant={[Function]}
-                                  onResponderMove={[Function]}
-                                  onResponderRelease={[Function]}
-                                  onResponderTerminate={[Function]}
-                                  onResponderTerminationRequest={[Function]}
-                                  onStartShouldSetResponder={[Function]}
                                   style={
                                     Object {
-                                      "alignItems": "center",
-                                      "alignSelf": null,
-                                      "backgroundColor": "transparent",
-                                      "borderBottomWidth": null,
-                                      "borderColor": null,
-                                      "borderLeftWidth": null,
-                                      "borderRadius": 50,
-                                      "borderRightWidth": null,
-                                      "borderTopWidth": null,
-                                      "borderWidth": undefined,
-                                      "elevation": 0,
+                                      "alignItems": "flex-end",
+                                      "alignSelf": "center",
+                                      "flex": 1,
                                       "flexDirection": "row",
-                                      "height": 45,
-                                      "justifyContent": "space-between",
-                                      "marginRight": -9,
-                                      "opacity": 1,
-                                      "paddingBottom": 6,
-                                      "paddingLeft": 15,
-                                      "paddingRight": 15,
-                                      "paddingTop": 6,
-                                      "shadowColor": null,
-                                      "shadowOffset": null,
-                                      "shadowOpacity": null,
-                                      "shadowRadius": null,
+                                      "justifyContent": "flex-end",
                                     }
                                   }
-                                />
+                                >
+                                  <View
+                                    accessibilityRole="button"
+                                    accessibilityState={
+                                      Object {
+                                        "disabled": undefined,
+                                      }
+                                    }
+                                    accessible={true}
+                                    collapsable={false}
+                                    focusable={false}
+                                    forwardedRef={[Function]}
+                                    hitSlop={
+                                      Object {
+                                        "bottom": 4,
+                                        "top": 4,
+                                      }
+                                    }
+                                    onClick={[Function]}
+                                    onResponderGrant={[Function]}
+                                    onResponderMove={[Function]}
+                                    onResponderRelease={[Function]}
+                                    onResponderTerminate={[Function]}
+                                    onResponderTerminationRequest={[Function]}
+                                    onStartShouldSetResponder={[Function]}
+                                    style={
+                                      Object {
+                                        "alignItems": "center",
+                                        "alignSelf": null,
+                                        "backgroundColor": "transparent",
+                                        "borderBottomWidth": null,
+                                        "borderColor": null,
+                                        "borderLeftWidth": null,
+                                        "borderRadius": 50,
+                                        "borderRightWidth": null,
+                                        "borderTopWidth": null,
+                                        "borderWidth": undefined,
+                                        "elevation": 0,
+                                        "flexDirection": "row",
+                                        "height": 45,
+                                        "justifyContent": "space-between",
+                                        "marginRight": -9,
+                                        "opacity": 1,
+                                        "paddingBottom": 6,
+                                        "paddingLeft": 15,
+                                        "paddingRight": 15,
+                                        "paddingTop": 6,
+                                        "shadowColor": null,
+                                        "shadowOffset": null,
+                                        "shadowOpacity": null,
+                                        "shadowRadius": null,
+                                      }
+                                    }
+                                  />
+                                </View>
                               </View>
-                            </View>
-                          </RCTSafeAreaView>
+                            </RCTSafeAreaView>
+                          </View>
                         </View>
-                      </View>
-                      <RCTSafeAreaView
-                        emulateUnlessSupported={true}
-                        style={
-                          Object {
-                            "flex": 1,
-                          }
-                        }
-                      >
-                        <View
-                          accessible={true}
+                        <RCTSafeAreaView
                           style={
                             Object {
                               "flex": 1,
                             }
                           }
-                          testID="LoadingErrorComponentLoading"
                         >
                           <View
+                            accessible={true}
                             style={
                               Object {
-                                "alignItems": "center",
                                 "flex": 1,
-                                "justifyContent": "center",
-                                "padding": 24,
                               }
                             }
-                            testID="InfoScreenComponent"
+                            testID="LoadingErrorComponentLoading"
                           >
-                            <ActivityIndicator
-                              accessibilityElementsHidden={true}
-                              accessible={false}
-                              color="black"
-                              importantForAccessibility="no-hide-descendants"
-                            />
                             <View
                               style={
                                 Object {
-                                  "height": 24,
-                                }
-                              }
-                            />
-                            <Text
-                              accessible={true}
-                              color="bluegreyDark"
-                              defaultColor="bluegreyDark"
-                              defaultWeight="Bold"
-                              font="TitilliumWeb"
-                              fontStyle={
-                                Object {
-                                  "fontSize": 20,
-                                  "lineHeight": 24,
+                                  "alignItems": "center",
+                                  "flex": 1,
+                                  "justifyContent": "center",
+                                  "padding": 24,
                                 }
                               }
-                              style={
-                                Array [
+                              testID="InfoScreenComponent"
+                            >
+                              <ActivityIndicator
+                                accessibilityElementsHidden={true}
+                                accessible={false}
+                                color="black"
+                                importantForAccessibility="no-hide-descendants"
+                              />
+                              <View
+                                style={
                                   Object {
-                                    "textAlign": "center",
-                                  },
+                                    "height": 24,
+                                  }
+                                }
+                              />
+                              <Text
+                                accessible={true}
+                                color="bluegreyDark"
+                                defaultColor="bluegreyDark"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
                                     "fontSize": 20,
                                     "lineHeight": 24,
-                                  },
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "textAlign": "center",
+                                    },
+                                    Object {
+                                      "fontSize": 20,
+                                      "lineHeight": 24,
+                                    },
+                                    Object {
+                                      "color": "#17324D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "700",
+                                    },
+                                  ]
+                                }
+                                testID="infoScreenTitle"
+                                weight="Bold"
+                              >
+                                Loading message details in progress...
+                              </Text>
+                              <View
+                                style={
                                   Object {
-                                    "color": "#17324D",
-                                    "fontFamily": "Titillium Web",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "700",
-                                  },
-                                ]
-                              }
-                              testID="infoScreenTitle"
-                              weight="Bold"
-                            >
-                              Loading message details in progress...
-                            </Text>
-                            <View
-                              style={
-                                Object {
-                                  "height": 16,
+                                    "height": 16,
+                                  }
                                 }
-                              }
-                            />
+                              />
+                            </View>
                           </View>
-                        </View>
-                      </RCTSafeAreaView>
+                        </RCTSafeAreaView>
+                      </View>
                     </View>
                   </View>
                 </View>
               </View>
             </View>
           </View>
-        </View>
-      </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
     </View>
   </RNCSafeAreaProvider>
 </View>
diff --git a/ts/features/messages/store/actions/index.ts b/ts/features/messages/store/actions/index.ts
index 2b6a2c418b1..a7f52ecb680 100644
--- a/ts/features/messages/store/actions/index.ts
+++ b/ts/features/messages/store/actions/index.ts
@@ -7,18 +7,18 @@ import {
 import { ThirdPartyMessageWithContent } from "../../../../../definitions/backend/ThirdPartyMessageWithContent";
 import { ServiceId } from "../../../../../definitions/backend/ServiceId";
 import {
-  UIAttachment,
   UIMessage,
   UIMessageDetails,
   UIMessageId,
-  WithSkipMixpanelTrackingOnFailure,
   WithUIMessageId
 } from "../../types";
 import { MessageGetStatusFailurePhaseType } from "../reducers/messageGetStatus";
 import { MessageCategory } from "../../../../../definitions/backend/MessageCategory";
 import { ThirdPartyMessagePrecondition } from "../../../../../definitions/backend/ThirdPartyMessagePrecondition";
-import { Download, DownloadError } from "../reducers/downloads";
 import { MessagesStatus } from "../reducers/messagesStatus";
+import { ThirdPartyAttachment } from "../../../../../definitions/backend/ThirdPartyAttachment";
+import { PaymentRequestsGetResponse } from "../../../../../definitions/backend/PaymentRequestsGetResponse";
+import { Detail_v2Enum } from "../../../../../definitions/backend/PaymentProblemJson";
 
 export type ThirdPartyMessageActions = ActionType<typeof loadThirdPartyMessage>;
 
@@ -219,6 +219,29 @@ export const resetMigrationStatus = createAction(
   "MESSAGES_MIGRATE_TO_PAGINATED_DONE"
 );
 
+export type DownloadAttachmentRequest = {
+  attachment: ThirdPartyAttachment;
+  messageId: UIMessageId;
+  skipMixpanelTrackingOnFailure: boolean;
+};
+
+export type DownloadAttachmentSuccess = {
+  attachment: ThirdPartyAttachment;
+  messageId: UIMessageId;
+  path: string;
+};
+
+export type DownloadAttachmentError = {
+  attachment: ThirdPartyAttachment;
+  error: Error;
+  messageId: UIMessageId;
+};
+
+export type DownloadAttachmentCancel = {
+  attachment: ThirdPartyAttachment;
+  messageId: UIMessageId;
+};
+
 /**
  * The user requests an attachment download.
  */
@@ -228,22 +251,67 @@ export const downloadAttachment = createAsyncAction(
   "DOWNLOAD_ATTACHMENT_FAILURE",
   "DOWNLOAD_ATTACHMENT_CANCEL"
 )<
-  WithSkipMixpanelTrackingOnFailure<UIAttachment>,
-  Download,
-  DownloadError<Error>,
-  UIAttachment
+  DownloadAttachmentRequest,
+  DownloadAttachmentSuccess,
+  DownloadAttachmentError,
+  DownloadAttachmentCancel
 >();
 
 export const cancelPreviousAttachmentDownload = createAction(
   "CANCEL_PREVIOUS_ATTACHMENT_DOWNLOAD"
 );
 
+export const clearRequestedAttachmentDownload = createAction(
+  "CLEAR_REQUESTED_ATTACHMNET_DOWNLOAD"
+);
+
 /**
  * This action removes any cached data in order to perform another download.
  */
 export const removeCachedAttachment = createStandardAction(
   "REMOVE_CACHED_ATTACHMENT"
-)<Download>();
+)<DownloadAttachmentSuccess>();
+
+export type UpdatePaymentForMessageRequest = {
+  messageId: UIMessageId;
+  paymentId: string;
+};
+
+export type UpdatePaymentForMessageSuccess = {
+  messageId: UIMessageId;
+  paymentId: string;
+  paymentData: PaymentRequestsGetResponse;
+};
+
+export type UpdatePaymentForMessageFailure = {
+  messageId: UIMessageId;
+  paymentId: string;
+  details: Detail_v2Enum;
+};
+
+export type UpdatePaymentForMessageCancel =
+  ReadonlyArray<UpdatePaymentForMessageRequest>;
+
+export const updatePaymentForMessage = createAsyncAction(
+  "UPDATE_PAYMENT_FOR_MESSAGE_REQUEST",
+  "UPDATE_PAYMENT_FOR_MESSAGE_SUCCESS",
+  "UPDATE_PAYMENT_FOR_MESSAGE_FAILURE",
+  "UPDATE_PAYMENT_FOR_MESSAGE_CANCEL"
+)<
+  UpdatePaymentForMessageRequest,
+  UpdatePaymentForMessageSuccess,
+  UpdatePaymentForMessageFailure,
+  UpdatePaymentForMessageCancel
+>();
+
+export const cancelQueuedPaymentUpdates = createAction(
+  "CANCEL_QUEUED_PAYMENT_UPDATES"
+);
+
+export const addUserSelectedPaymentRptId = createAction(
+  "MESSAGES_ADD_USER_SELECTED_PAYMENT_RPTID",
+  resolve => (paymentId: string) => resolve({ paymentId })
+);
 
 export type MessagesActions = ActionType<
   | typeof reloadAllMessages
@@ -258,10 +326,14 @@ export type MessagesActions = ActionType<
   | typeof loadThirdPartyMessage
   | typeof downloadAttachment
   | typeof cancelPreviousAttachmentDownload
+  | typeof clearRequestedAttachmentDownload
   | typeof removeCachedAttachment
   | typeof getMessagePrecondition
   | typeof clearMessagePrecondition
   | typeof getMessageDataAction
   | typeof cancelGetMessageDataAction
   | typeof resetGetMessageDataAction
+  | typeof updatePaymentForMessage
+  | typeof cancelQueuedPaymentUpdates
+  | typeof addUserSelectedPaymentRptId
 >;
diff --git a/ts/features/messages/store/actions/navigation.ts b/ts/features/messages/store/actions/navigation.ts
index aaf9def0108..b13bcd8c2ad 100644
--- a/ts/features/messages/store/actions/navigation.ts
+++ b/ts/features/messages/store/actions/navigation.ts
@@ -1,13 +1,13 @@
 import { CommonActions } from "@react-navigation/native";
 import { MESSAGES_ROUTES } from "../../navigation/routes";
-import { MessageDetailScreenNavigationParams } from "../../screens/MessageDetailScreen";
-import { MessageRouterScreenNavigationParams } from "../../screens/MessageRouterScreen";
+import { MessageRouterScreenRouteParams } from "../../screens/MessageRouterScreen";
+import { MessageDetailsScreenRouteParams } from "../../screens/MessageDetailsScreen";
 
 /**
  * Open the Message Detail screen supporting the new UIMessage type.
  */
 export const navigateToMessageDetailScreenAction = (
-  params: MessageDetailScreenNavigationParams
+  params: MessageDetailsScreenRouteParams
 ) =>
   CommonActions.navigate(MESSAGES_ROUTES.MESSAGES_NAVIGATOR, {
     screen: MESSAGES_ROUTES.MESSAGE_DETAIL,
@@ -18,7 +18,7 @@ export const navigateToMessageDetailScreenAction = (
  * Open the Message Detail Router supporting the new UIMessage type.
  */
 export const navigateToMessageRouterAction = (
-  params: MessageRouterScreenNavigationParams
+  params: MessageRouterScreenRouteParams
 ) =>
   CommonActions.navigate(MESSAGES_ROUTES.MESSAGES_NAVIGATOR, {
     screen: MESSAGES_ROUTES.MESSAGE_ROUTER,
diff --git a/ts/features/messages/store/reducers/__tests__/detailsById.test.ts b/ts/features/messages/store/reducers/__tests__/detailsById.test.ts
index 4128a4afd77..79a0750d2f7 100644
--- a/ts/features/messages/store/reducers/__tests__/detailsById.test.ts
+++ b/ts/features/messages/store/reducers/__tests__/detailsById.test.ts
@@ -6,13 +6,17 @@ import {
 } from "../../../__mocks__/message";
 
 import { loadMessageDetails } from "../../actions";
-import reducer, {
-  detailedMessageHasThirdPartyDataSelector,
-  messageDetailsByIdSelector
-} from "../detailsById";
-import { UIMessageDetails, UIMessageId } from "../../../types";
+import { PaymentData, UIMessageDetails, UIMessageId } from "../../../types";
 import { applicationChangeState } from "../../../../../store/actions/application";
 import { appReducer } from "../../../../../store/reducers";
+import { GlobalState } from "../../../../../store/reducers/types";
+import {
+  detailedMessageHasThirdPartyDataSelector,
+  detailsByIdReducer,
+  messageDetailsByIdSelector,
+  messageDetailsExpiringInfoSelector,
+  messagePaymentDataSelector
+} from "../detailsById";
 
 const id = paymentValidInvalidAfterDueDate.id as UIMessageId;
 
@@ -20,13 +24,15 @@ describe("detailsById reducer", () => {
   describe(`when a ${getType(loadMessageDetails.request)} is sent`, () => {
     const actionRequest = loadMessageDetails.request({ id });
     it(`should add an entry for ${id} with 'noneLoading'`, () => {
-      expect(reducer(undefined, actionRequest)[id]).toEqual(pot.noneLoading);
+      expect(detailsByIdReducer(undefined, actionRequest)[id]).toEqual(
+        pot.noneLoading
+      );
     });
 
     describe(`and an entry for ${id} already exists`, () => {
       const initialState = { [id]: pot.some(successLoadMessageDetails) };
       it(`should update the entry to loading state preserving the data`, () => {
-        const entry = reducer(initialState, actionRequest)[id];
+        const entry = detailsByIdReducer(initialState, actionRequest)[id];
         expect(pot.isLoading(entry)).toBe(true);
         expect(pot.isSome(entry)).toBe(true);
         expect(pot.toUndefined(entry)).toBeDefined();
@@ -37,7 +43,7 @@ describe("detailsById reducer", () => {
   describe(`when a ${getType(loadMessageDetails.success)} is sent`, () => {
     const actionRequest = loadMessageDetails.success(successLoadMessageDetails);
     it(`should add an entry for ${id}`, () => {
-      const entry = reducer(undefined, actionRequest)[id];
+      const entry = detailsByIdReducer(undefined, actionRequest)[id];
       expect(pot.isSome(entry)).toBe(true);
       expect(pot.toUndefined(entry)).toEqual(successLoadMessageDetails);
     });
@@ -50,7 +56,7 @@ describe("detailsById reducer", () => {
       error
     });
     it(`should add an entry for ${id} with 'noneError'`, () => {
-      expect(reducer(undefined, actionRequest)[id]).toEqual(
+      expect(detailsByIdReducer(undefined, actionRequest)[id]).toEqual(
         pot.noneError(error.message)
       );
     });
@@ -58,7 +64,7 @@ describe("detailsById reducer", () => {
     describe(`and an entry for ${id} already exists`, () => {
       const initialState = { [id]: pot.some(successLoadMessageDetails) };
       it(`should update the entry to error state preserving the data`, () => {
-        const entry = reducer(initialState, actionRequest)[id];
+        const entry = detailsByIdReducer(initialState, actionRequest)[id];
         expect(pot.isError(entry)).toBe(true);
         expect(pot.isSome(entry)).toBe(true);
         expect(pot.toUndefined(entry)).toBeDefined();
@@ -121,3 +127,165 @@ describe("detailedMessageHasThirdPartyDataSelector", () => {
     expect(hasThirdPartyData).toBe(true);
   });
 });
+
+describe("messageDetailsExpiringInfoSelector", () => {
+  it("should return `does_not_expire` when `paymentData` is not defined", () => {
+    const messageId = "m1" as UIMessageId;
+    const action = loadMessageDetails.success({
+      id: messageId
+    } as UIMessageDetails);
+    const state = appReducer(undefined, action);
+
+    const expiringInfo = messageDetailsExpiringInfoSelector(
+      state,
+      messageId,
+      new Date("01/05/2023").getTime()
+    );
+    expect(expiringInfo).toBe("does_not_expire");
+  });
+
+  it("should return `does_not_expire` when `paymentData` is defined and `dueDate` is not", () => {
+    const messageId = "m1" as UIMessageId;
+    const action = loadMessageDetails.success({
+      id: messageId,
+      paymentData: {
+        amount: 99,
+        noticeNumber: "123",
+        payee: {
+          fiscalCode: "123"
+        }
+      }
+    } as UIMessageDetails);
+    const state = appReducer(undefined, action);
+
+    const expiringInfo = messageDetailsExpiringInfoSelector(
+      state,
+      messageId,
+      new Date("01/05/2023").getTime()
+    );
+    expect(expiringInfo).toBe("does_not_expire");
+  });
+
+  it("should return `expired` when there is a `paymentData` is defined and `dueDate` has passed", () => {
+    const messageId = "m1" as UIMessageId;
+    const action = loadMessageDetails.success({
+      id: messageId,
+      dueDate: new Date("01/01/2023"),
+      paymentData: {
+        amount: 99,
+        noticeNumber: "123",
+        payee: {
+          fiscalCode: "123"
+        }
+      }
+    } as UIMessageDetails);
+    const state = appReducer(undefined, action);
+
+    const expiringInfo = messageDetailsExpiringInfoSelector(
+      state,
+      messageId,
+      new Date("01/05/2023").getTime()
+    );
+    expect(expiringInfo).toBe("expired");
+  });
+
+  it("should return `expiring` when there is a `paymentData` is defined and `dueDate` has not passed", () => {
+    const messageId = "m1" as UIMessageId;
+    const action = loadMessageDetails.success({
+      id: messageId,
+      dueDate: new Date("01/05/2023"),
+      paymentData: {
+        amount: 99,
+        noticeNumber: "123",
+        payee: {
+          fiscalCode: "123"
+        }
+      }
+    } as UIMessageDetails);
+    const state = appReducer(undefined, action);
+
+    const expiringInfo = messageDetailsExpiringInfoSelector(
+      state,
+      messageId,
+      new Date("01/01/2023").getTime()
+    );
+    expect(expiringInfo).toBe("expiring");
+  });
+});
+
+describe("messagePaymentData selector", () => {
+  it("should return undefined when the state is empty", () => {
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const messageId = "01HR9ZVVKPQDGQ97TT83AN1W8C" as UIMessageId;
+    const paymentData = messagePaymentDataSelector(appState, messageId);
+    expect(paymentData).toBeUndefined();
+  });
+  it("should return undefined when there is no message match", () => {
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const finalState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            "01HRA095RSRSY7Z2DJQ0H8N3TR": pot.some({
+              paymentData: {}
+            } as UIMessageDetails)
+          }
+        }
+      }
+    } as GlobalState;
+    const paymentData = messagePaymentDataSelector(
+      finalState,
+      "01HR9ZVVKPQDGQ97TT83AN1W8C" as UIMessageId
+    );
+    expect(paymentData).toBeUndefined();
+  });
+  it("should return undefined when the message has no payment data", () => {
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const finalState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            "01HR9ZVVKPQDGQ97TT83AN1W8C": pot.some({} as UIMessageDetails)
+          }
+        }
+      }
+    } as GlobalState;
+    const paymentData = messagePaymentDataSelector(
+      finalState,
+      "01HR9ZVVKPQDGQ97TT83AN1W8C" as UIMessageId
+    );
+    expect(paymentData).toBeUndefined();
+  });
+  it("should match returned payment data", () => {
+    const paymentData = {} as PaymentData;
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const finalState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            "01HR9ZVVKPQDGQ97TT83AN1W8C": pot.some({
+              paymentData
+            } as UIMessageDetails)
+          }
+        }
+      }
+    } as GlobalState;
+    const returnedPaymentData = messagePaymentDataSelector(
+      finalState,
+      "01HR9ZVVKPQDGQ97TT83AN1W8C" as UIMessageId
+    );
+    expect(returnedPaymentData).toBe(paymentData);
+  });
+});
diff --git a/ts/features/messages/store/reducers/__tests__/downloads.test.ts b/ts/features/messages/store/reducers/__tests__/downloads.test.ts
index 49bee044cdd..14cb4db2f93 100644
--- a/ts/features/messages/store/reducers/__tests__/downloads.test.ts
+++ b/ts/features/messages/store/reducers/__tests__/downloads.test.ts
@@ -1,34 +1,42 @@
 import * as pot from "@pagopa/ts-commons/lib/pot";
 import { mockPdfAttachment } from "../../../__mocks__/attachment";
-import { downloadAttachment, removeCachedAttachment } from "../../actions";
 import {
-  Download,
-  DownloadError,
+  DownloadAttachmentCancel,
+  DownloadAttachmentError,
+  DownloadAttachmentRequest,
+  DownloadAttachmentSuccess,
+  clearRequestedAttachmentDownload,
+  downloadAttachment,
+  removeCachedAttachment
+} from "../../actions";
+import {
   Downloads,
   INITIAL_STATE,
+  downloadPotForMessageAttachmentSelector,
   downloadedMessageAttachmentSelector,
-  downloadsReducer
+  downloadsReducer,
+  hasErrorOccourredOnRequestedDownloadSelector,
+  isDownloadingMessageAttachmentSelector,
+  isRequestedAttachmentDownloadSelector
 } from "../downloads";
-import {
-  UIAttachment,
-  UIAttachmentId,
-  UIMessageId,
-  WithSkipMixpanelTrackingOnFailure
-} from "../../../types";
+import { UIMessageId } from "../../../types";
 import { GlobalState } from "../../../../../store/reducers/types";
+import { appReducer } from "../../../../../store/reducers";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { ThirdPartyAttachment } from "../../../../../../definitions/backend/ThirdPartyAttachment";
 
 const path = "/path/attachment.pdf";
 
 describe("downloadedMessageAttachmentSelector", () => {
   it("Should return undefined for an unmatching messageId", () => {
-    const attachmentId = "1" as UIAttachmentId;
+    const attachmentId = "1";
     const successDownload = {
       attachment: {
-        messageId: "01HMXFQ803Q8JGQECKQF0EX6KX" as UIMessageId,
         id: attachmentId
-      } as UIAttachment,
+      } as ThirdPartyAttachment,
+      messageId: "01HMXFQ803Q8JGQECKQF0EX6KX" as UIMessageId,
       path: "randomPath"
-    } as Download;
+    } as DownloadAttachmentSuccess;
     const downloadSuccessAction = downloadAttachment.success(successDownload);
     const downloadsState = downloadsReducer(
       INITIAL_STATE,
@@ -54,11 +62,11 @@ describe("downloadedMessageAttachmentSelector", () => {
     const unrelatedAttachmentId = "2";
     const successDownload = {
       attachment: {
-        messageId,
         id: unrelatedAttachmentId
-      } as UIAttachment,
+      } as ThirdPartyAttachment,
+      messageId,
       path: "randomPath"
-    } as Download;
+    } as DownloadAttachmentSuccess;
     const downloadSuccessAction = downloadAttachment.success(successDownload);
     const downloadsState = downloadsReducer(
       INITIAL_STATE,
@@ -71,7 +79,7 @@ describe("downloadedMessageAttachmentSelector", () => {
         }
       }
     } as GlobalState;
-    const attachmentId = "1" as UIAttachmentId;
+    const attachmentId = "1";
     const downloadedAttachment = downloadedMessageAttachmentSelector(
       globalState,
       messageId,
@@ -81,12 +89,12 @@ describe("downloadedMessageAttachmentSelector", () => {
   });
   it("Should return undefined for an attachment that is loading", () => {
     const messageId = "01HMXFE7192J01KNK02BJAPMBR" as UIMessageId;
-    const attachmentId = "1" as UIAttachmentId;
+    const attachmentId = "1";
     const uiAttachmentRequest = {
       messageId,
-      id: attachmentId,
+      attachment: { id: attachmentId } as ThirdPartyAttachment,
       skipMixpanelTrackingOnFailure: true
-    } as WithSkipMixpanelTrackingOnFailure<UIAttachment>;
+    } as DownloadAttachmentRequest;
     const downloadRequestAction =
       downloadAttachment.request(uiAttachmentRequest);
     const downloadsState = downloadsReducer(
@@ -109,14 +117,14 @@ describe("downloadedMessageAttachmentSelector", () => {
   });
   it("Should return undefined for an attachment that got an error", () => {
     const messageId = "01HMXFE7192J01KNK02BJAPMBR" as UIMessageId;
-    const attachmentId = "1" as UIAttachmentId;
+    const attachmentId = "1";
     const failedDownload = {
       attachment: {
-        messageId,
         id: attachmentId
-      } as UIAttachment,
+      } as ThirdPartyAttachment,
+      messageId,
       error: new Error("An error")
-    } as DownloadError<Error>;
+    } as DownloadAttachmentError;
     const downloadFailureAction = downloadAttachment.failure(failedDownload);
     const downloadsState = downloadsReducer(
       INITIAL_STATE,
@@ -138,11 +146,11 @@ describe("downloadedMessageAttachmentSelector", () => {
   });
   it("Should return undefined for an attachment that was cancelled before finishing the download", () => {
     const messageId = "01HMXFE7192J01KNK02BJAPMBR" as UIMessageId;
-    const attachmentId = "1" as UIAttachmentId;
+    const attachmentId = "1";
     const uiAttachmentCancelled = {
       messageId,
-      id: attachmentId
-    } as UIAttachment;
+      attachment: { id: attachmentId } as ThirdPartyAttachment
+    } as DownloadAttachmentCancel;
     const downloadCancelAction = downloadAttachment.cancel(
       uiAttachmentCancelled
     );
@@ -166,14 +174,14 @@ describe("downloadedMessageAttachmentSelector", () => {
   });
   it("Should return undefined for an attachment that was removed by a removeCachedAttachment action", () => {
     const messageId = "01HMXFE7192J01KNK02BJAPMBR" as UIMessageId;
-    const attachmentId = "1" as UIAttachmentId;
+    const attachmentId = "1";
     const successDownload = {
       attachment: {
-        messageId,
         id: attachmentId
-      } as UIAttachment,
+      } as ThirdPartyAttachment,
+      messageId,
       path: "randomPath"
-    } as Download;
+    } as DownloadAttachmentSuccess;
     const removedCachedAttachmentAction =
       removeCachedAttachment(successDownload);
     const downloadsState = downloadsReducer(
@@ -196,15 +204,15 @@ describe("downloadedMessageAttachmentSelector", () => {
   });
   it("Should return data for a matching downloaded attachment", () => {
     const messageId = "01HMXFE7192J01KNK02BJAPMBR" as UIMessageId;
-    const attachmentId = "1" as UIAttachmentId;
+    const attachmentId = "1";
     const downloadPath = "randomPath";
     const successDownload = {
       attachment: {
-        messageId,
         id: attachmentId
-      } as UIAttachment,
+      } as ThirdPartyAttachment,
+      messageId,
       path: downloadPath
-    } as Download;
+    } as DownloadAttachmentSuccess;
     const downloadSuccessAction = downloadAttachment.success(successDownload);
     const downloadsState = downloadsReducer(
       INITIAL_STATE,
@@ -224,13 +232,14 @@ describe("downloadedMessageAttachmentSelector", () => {
     );
     expect(downloadedAttachment).toBeDefined();
     expect(downloadedAttachment?.attachment).toBeDefined();
-    expect(downloadedAttachment?.attachment.messageId).toBe(messageId);
     expect(downloadedAttachment?.attachment.id).toBe(attachmentId);
     expect(downloadedAttachment?.path).toBe(downloadPath);
   });
 });
 
 describe("downloadsReducer", () => {
+  const messageId = "01HP08KKPY65CBF4TRPHGJJ1GT" as UIMessageId;
+
   describe("given no download", () => {
     const initialState = {};
 
@@ -240,7 +249,8 @@ describe("downloadsReducer", () => {
       const afterRequestState = downloadsReducer(
         initialState,
         downloadAttachment.request({
-          ...attachment,
+          attachment,
+          messageId,
           skipMixpanelTrackingOnFailure: false
         })
       );
@@ -248,9 +258,14 @@ describe("downloadsReducer", () => {
       it("then it returns pot.loading", () => {
         expect(
           pot.isLoading(
-            afterRequestState[attachment.messageId][attachment.id] ?? pot.none
+            afterRequestState[messageId]?.[attachment.id] ?? pot.none
           )
         ).toBeTruthy();
+        expect(afterRequestState.requestedDownload).toBeDefined();
+        expect(afterRequestState.requestedDownload?.messageId).toBe(messageId);
+        expect(afterRequestState.requestedDownload?.attachmentId).toBe(
+          attachment.id
+        );
       });
 
       describe("and the request succeeds", () => {
@@ -261,11 +276,19 @@ describe("downloadsReducer", () => {
                 afterRequestState,
                 downloadAttachment.success({
                   attachment,
+                  messageId,
                   path
                 })
-              )[attachment.messageId][attachment.id] ?? pot.none
+              )[messageId]?.[attachment.id] ?? pot.none
             )
           ).toBeTruthy();
+          expect(afterRequestState.requestedDownload).toBeDefined();
+          expect(afterRequestState.requestedDownload?.messageId).toBe(
+            messageId
+          );
+          expect(afterRequestState.requestedDownload?.attachmentId).toBe(
+            attachment.id
+          );
         });
       });
 
@@ -277,11 +300,19 @@ describe("downloadsReducer", () => {
                 afterRequestState,
                 downloadAttachment.failure({
                   attachment,
+                  messageId,
                   error: new Error()
                 })
-              )[attachment.messageId][attachment.id] ?? pot.none
+              )[messageId]?.[attachment.id] ?? pot.none
             )
           ).toBeTruthy();
+          expect(afterRequestState.requestedDownload).toBeDefined();
+          expect(afterRequestState.requestedDownload?.messageId).toBe(
+            messageId
+          );
+          expect(afterRequestState.requestedDownload?.attachmentId).toBe(
+            attachment.id
+          );
         });
       });
     });
@@ -290,7 +321,7 @@ describe("downloadsReducer", () => {
   describe("given a downloaded attachment", () => {
     const attachment = mockPdfAttachment;
     const initialState: Downloads = {
-      [attachment.messageId]: {
+      [messageId]: {
         [attachment.id]: pot.some({ attachment, path })
       }
     };
@@ -301,11 +332,709 @@ describe("downloadsReducer", () => {
           pot.isNone(
             downloadsReducer(
               initialState,
-              removeCachedAttachment({ attachment, path })
-            )[attachment.messageId][attachment.id] ?? pot.none
+              removeCachedAttachment({ attachment, messageId, path })
+            )[messageId]?.[attachment.id] ?? pot.none
           )
         ).toBeTruthy();
+        expect(initialState.requestedDownload).toBeUndefined();
       });
     });
   });
+
+  describe("given a downloading attachment", () => {
+    const attachment = mockPdfAttachment;
+    const initialState = downloadsReducer(
+      undefined,
+      downloadAttachment.request({
+        attachment,
+        messageId,
+        skipMixpanelTrackingOnFailure: false
+      })
+    );
+
+    expect(initialState.requestedDownload).toBeDefined();
+    expect(initialState.requestedDownload?.messageId).toBe(messageId);
+    expect(initialState.requestedDownload?.attachmentId).toBe(attachment.id);
+
+    it("Should return pot.none and clear the requestedDownload after a downloadAttachment.cancel action", () => {
+      const cancelState = downloadsReducer(
+        initialState,
+        downloadAttachment.cancel({
+          attachment,
+          messageId
+        })
+      );
+      const potNone = cancelState[messageId]?.[attachment.id];
+      expect(potNone).toBeDefined();
+      expect(pot.isNone(potNone!)).toBeTruthy();
+      expect(cancelState.requestedDownload).toBeUndefined();
+    });
+    it("Should clear the requestedDownload after a clearRequestedAttachmentDownload action", () => {
+      const cancelState = downloadsReducer(
+        initialState,
+        clearRequestedAttachmentDownload()
+      );
+      expect(cancelState.requestedDownload).toBeUndefined();
+    });
+  });
+
+  describe("isDownloadingMessageAttachmentSelector", () => {
+    it("should return false on initial state", () => {
+      const initialState = appReducer(
+        undefined,
+        applicationChangeState("active")
+      );
+      const isDownloadingMessage = isDownloadingMessageAttachmentSelector(
+        initialState,
+        messageId,
+        mockPdfAttachment.id
+      );
+      expect(isDownloadingMessage).toBeFalsy();
+    });
+    it("should return true on a matching download", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const isDownloadingMessage = isDownloadingMessageAttachmentSelector(
+        initialState,
+        messageId,
+        mockPdfAttachment.id
+      );
+      expect(isDownloadingMessage).toBeTruthy();
+    });
+    it("should return false on a messageId-unmatching download", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const isDownloadingMessage = isDownloadingMessageAttachmentSelector(
+        initialState,
+        "01HNWPGF3TY9WQYGX5JYAW816W" as UIMessageId,
+        mockPdfAttachment.id
+      );
+      expect(isDownloadingMessage).toBeFalsy();
+    });
+    it("should return false on an attachmentId-unmatching download", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const isDownloadingMessage = isDownloadingMessageAttachmentSelector(
+        initialState,
+        messageId,
+        "potato"
+      );
+      expect(isDownloadingMessage).toBeFalsy();
+    });
+    it("should return false on a successful downloaded attachment", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const successState = appReducer(
+        initialState,
+        downloadAttachment.success({
+          attachment: mockPdfAttachment,
+          messageId,
+          path: `file:///${mockPdfAttachment.id}.pdf`
+        })
+      );
+      const isDownloadingMessage = isDownloadingMessageAttachmentSelector(
+        successState,
+        messageId,
+        mockPdfAttachment.id
+      );
+      expect(isDownloadingMessage).toBeFalsy();
+    });
+    it("should return false on a failed downloaded attachment", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const failureState = appReducer(
+        initialState,
+        downloadAttachment.failure({
+          attachment: mockPdfAttachment,
+          messageId,
+          error: new Error("")
+        })
+      );
+      const isDownloadingMessage = isDownloadingMessageAttachmentSelector(
+        failureState,
+        messageId,
+        mockPdfAttachment.id
+      );
+      expect(isDownloadingMessage).toBeFalsy();
+    });
+    it("should return false on a cancelled downloaded attachment", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const cancelledState = appReducer(
+        initialState,
+        downloadAttachment.cancel({
+          attachment: mockPdfAttachment,
+          messageId
+        })
+      );
+      const isDownloadingMessage = isDownloadingMessageAttachmentSelector(
+        cancelledState,
+        messageId,
+        mockPdfAttachment.id
+      );
+      expect(isDownloadingMessage).toBeFalsy();
+    });
+    it("should return true on a cleared stated", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const clearedState = appReducer(
+        initialState,
+        clearRequestedAttachmentDownload()
+      );
+      const isDownloadingMessage = isDownloadingMessageAttachmentSelector(
+        clearedState,
+        messageId,
+        mockPdfAttachment.id
+      );
+      expect(isDownloadingMessage).toBeTruthy();
+    });
+  });
+
+  describe("hasErrorOccourredOnMessageAttachmentDownloadSelector", () => {
+    it("should return false on initial state", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const isError = hasErrorOccourredOnRequestedDownloadSelector(
+        initialState,
+        messageId,
+        mockPdfAttachment.id
+      );
+      expect(isError).toBeFalsy();
+    });
+    it("should return false on a messageId-unmatching attachment", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const failureState = appReducer(
+        initialState,
+        downloadAttachment.failure({
+          attachment: mockPdfAttachment,
+          messageId,
+          error: new Error("")
+        })
+      );
+      const isError = hasErrorOccourredOnRequestedDownloadSelector(
+        failureState,
+        "01HNWQ5YDG02JFGFH9523AC04Z" as UIMessageId,
+        mockPdfAttachment.id
+      );
+      expect(isError).toBeFalsy();
+    });
+    it("should return false on an attachmentId-unmatching attachment", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const failureState = appReducer(
+        initialState,
+        downloadAttachment.failure({
+          attachment: mockPdfAttachment,
+          messageId,
+          error: new Error("")
+        })
+      );
+      const isError = hasErrorOccourredOnRequestedDownloadSelector(
+        failureState,
+        messageId,
+        "potato"
+      );
+      expect(isError).toBeFalsy();
+    });
+    it("should return true on a failed attachment", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const failureState = appReducer(
+        initialState,
+        downloadAttachment.failure({
+          attachment: mockPdfAttachment,
+          messageId,
+          error: new Error("")
+        })
+      );
+      const isError = hasErrorOccourredOnRequestedDownloadSelector(
+        failureState,
+        messageId,
+        mockPdfAttachment.id
+      );
+      expect(isError).toBeTruthy();
+    });
+    it("should return false on a successful attachment", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const failureState = appReducer(
+        initialState,
+        downloadAttachment.success({
+          attachment: mockPdfAttachment,
+          messageId,
+          path: `file:///${mockPdfAttachment.id}.pdf`
+        })
+      );
+      const isError = hasErrorOccourredOnRequestedDownloadSelector(
+        failureState,
+        messageId,
+        mockPdfAttachment.id
+      );
+      expect(isError).toBeFalsy();
+    });
+    it("should return false on a cancelled attachment", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const failureState = appReducer(
+        initialState,
+        downloadAttachment.cancel({
+          attachment: mockPdfAttachment,
+          messageId
+        })
+      );
+      const isError = hasErrorOccourredOnRequestedDownloadSelector(
+        failureState,
+        messageId,
+        mockPdfAttachment.id
+      );
+      expect(isError).toBeFalsy();
+    });
+    it("should return false on a failed attachment after clear state", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const failureState = appReducer(
+        initialState,
+        downloadAttachment.failure({
+          attachment: mockPdfAttachment,
+          messageId,
+          error: new Error("")
+        })
+      );
+      const clearState = appReducer(
+        failureState,
+        clearRequestedAttachmentDownload()
+      );
+      const isError = hasErrorOccourredOnRequestedDownloadSelector(
+        clearState,
+        messageId,
+        mockPdfAttachment.id
+      );
+      expect(isError).toBeFalsy();
+    });
+  });
+
+  describe("downloadPotForMessageAttachmentSelector", () => {
+    it("should return pot.none on initial state", () => {
+      const initialState = appReducer(
+        undefined,
+        applicationChangeState("active")
+      );
+      const downloadPot = downloadPotForMessageAttachmentSelector(
+        initialState,
+        messageId,
+        mockPdfAttachment.id
+      );
+      expect(pot.isNone(downloadPot)).toBeTruthy();
+    });
+    it("should return pot.none on unmatching-messageId attachment", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const downloadPot = downloadPotForMessageAttachmentSelector(
+        initialState,
+        "01HNWR6BGZ3M8FN9Y61XS37K8C" as UIMessageId,
+        mockPdfAttachment.id
+      );
+      expect(pot.isNone(downloadPot)).toBeTruthy();
+    });
+    it("should return pot.none on unmatching-attachmentId attachment", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const downloadPot = downloadPotForMessageAttachmentSelector(
+        initialState,
+        messageId,
+        "potato"
+      );
+      expect(pot.isNone(downloadPot)).toBeTruthy();
+    });
+    it("should return pot.loading on a requested attachment", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const downloadPot = downloadPotForMessageAttachmentSelector(
+        initialState,
+        messageId,
+        mockPdfAttachment.id
+      );
+      expect(pot.isLoading(downloadPot)).toBeTruthy();
+    });
+    it("should return pot.some on a successful attachment", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const successfulState = appReducer(
+        initialState,
+        downloadAttachment.success({
+          attachment: mockPdfAttachment,
+          messageId,
+          path: `file:///${mockPdfAttachment.id}.pdf`
+        })
+      );
+      const downloadPot = downloadPotForMessageAttachmentSelector(
+        successfulState,
+        messageId,
+        mockPdfAttachment.id
+      );
+      expect(pot.isSome(downloadPot)).toBeTruthy();
+    });
+    it("should return pot.error on a failed attachment", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const failureState = appReducer(
+        initialState,
+        downloadAttachment.failure({
+          attachment: mockPdfAttachment,
+          messageId,
+          error: new Error("")
+        })
+      );
+      const downloadPot = downloadPotForMessageAttachmentSelector(
+        failureState,
+        messageId,
+        mockPdfAttachment.id
+      );
+      expect(pot.isError(downloadPot)).toBeTruthy();
+    });
+    it("should return pot.error on a cancelled attachment", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const cancelledState = appReducer(
+        initialState,
+        downloadAttachment.cancel({
+          attachment: mockPdfAttachment,
+          messageId
+        })
+      );
+      const downloadPot = downloadPotForMessageAttachmentSelector(
+        cancelledState,
+        messageId,
+        mockPdfAttachment.id
+      );
+      expect(pot.isNone(downloadPot)).toBeTruthy();
+    });
+    it("should return pot.error on a removed cached attachment", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const cachedState = appReducer(
+        initialState,
+        removeCachedAttachment({
+          attachment: mockPdfAttachment,
+          messageId,
+          path: `file:///${mockPdfAttachment.id}.pdf`
+        })
+      );
+      const downloadPot = downloadPotForMessageAttachmentSelector(
+        cachedState,
+        messageId,
+        mockPdfAttachment.id
+      );
+      expect(pot.isNone(downloadPot)).toBeTruthy();
+    });
+    it("should return pot.some on a downloading attachment after clear requested download", () => {
+      const initialState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const clearRequestedState = appReducer(
+        initialState,
+        clearRequestedAttachmentDownload()
+      );
+      const downloadPot = downloadPotForMessageAttachmentSelector(
+        clearRequestedState,
+        messageId,
+        mockPdfAttachment.id
+      );
+      expect(pot.isLoading(downloadPot)).toBeTruthy();
+    });
+  });
+
+  describe("isRequestedAttachmentDownloadSelector", () => {
+    it("should return false on initial state", () => {
+      const initialState = appReducer(
+        undefined,
+        applicationChangeState("active")
+      );
+      const isRequestedAttachmentDownload =
+        isRequestedAttachmentDownloadSelector(
+          initialState,
+          messageId,
+          mockPdfAttachment.id
+        );
+      expect(isRequestedAttachmentDownload).toBeFalsy();
+    });
+    it("should return true on matching downloading attachment", () => {
+      const downloadingAttachmentState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const isRequestedAttachmentDownload =
+        isRequestedAttachmentDownloadSelector(
+          downloadingAttachmentState,
+          messageId,
+          mockPdfAttachment.id
+        );
+      expect(isRequestedAttachmentDownload).toBeTruthy();
+    });
+    it("should return false on an messageId-unmatching downloading attachment", () => {
+      const downloadingAttachmentState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const isRequestedAttachmentDownload =
+        isRequestedAttachmentDownloadSelector(
+          downloadingAttachmentState,
+          "01HNWNXS6G2Y86HEFQ3AYSQA1Q" as UIMessageId,
+          mockPdfAttachment.id
+        );
+      expect(isRequestedAttachmentDownload).toBeFalsy();
+    });
+    it("should return false on an attachmentId-unmatching downloading attachment", () => {
+      const downloadingAttachmentState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const isRequestedAttachmentDownload =
+        isRequestedAttachmentDownloadSelector(
+          downloadingAttachmentState,
+          messageId,
+          "potato"
+        );
+      expect(isRequestedAttachmentDownload).toBeFalsy();
+    });
+    it("should return true on successful downloaded attachment", () => {
+      const downloadingAttachmentState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const successfulDownloadState = appReducer(
+        downloadingAttachmentState,
+        downloadAttachment.success({
+          attachment: mockPdfAttachment,
+          messageId,
+          path: `file:///${mockPdfAttachment.id}.pdf`
+        })
+      );
+      const isRequestedAttachmentDownload =
+        isRequestedAttachmentDownloadSelector(
+          successfulDownloadState,
+          messageId,
+          mockPdfAttachment.id
+        );
+      expect(isRequestedAttachmentDownload).toBeTruthy();
+    });
+    it("should return true on failed downloaded attachment", () => {
+      const downloadingAttachmentState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const failedDownloadState = appReducer(
+        downloadingAttachmentState,
+        downloadAttachment.failure({
+          attachment: mockPdfAttachment,
+          messageId,
+          error: new Error("")
+        })
+      );
+      const isRequestedAttachmentDownload =
+        isRequestedAttachmentDownloadSelector(
+          failedDownloadState,
+          messageId,
+          mockPdfAttachment.id
+        );
+      expect(isRequestedAttachmentDownload).toBeTruthy();
+    });
+    it("should return false on matching cancelled attachment download", () => {
+      const downloadingAttachmentState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const cancelledDownloadState = appReducer(
+        downloadingAttachmentState,
+        downloadAttachment.cancel({
+          attachment: mockPdfAttachment,
+          messageId
+        })
+      );
+      const isRequestedAttachmentDownload =
+        isRequestedAttachmentDownloadSelector(
+          cancelledDownloadState,
+          messageId,
+          mockPdfAttachment.id
+        );
+      expect(isRequestedAttachmentDownload).toBeFalsy();
+    });
+    it("should return false on clear requested download", () => {
+      const downloadingAttachmentState = appReducer(
+        undefined,
+        downloadAttachment.request({
+          attachment: mockPdfAttachment,
+          messageId,
+          skipMixpanelTrackingOnFailure: false
+        })
+      );
+      const clearRequestedDownloadState = appReducer(
+        downloadingAttachmentState,
+        clearRequestedAttachmentDownload()
+      );
+      const isRequestedAttachmentDownload =
+        isRequestedAttachmentDownloadSelector(
+          clearRequestedDownloadState,
+          messageId,
+          mockPdfAttachment.id
+        );
+      expect(isRequestedAttachmentDownload).toBeFalsy();
+    });
+  });
 });
diff --git a/ts/features/messages/store/reducers/__tests__/payments.test.ts b/ts/features/messages/store/reducers/__tests__/payments.test.ts
new file mode 100644
index 00000000000..53dff02e290
--- /dev/null
+++ b/ts/features/messages/store/reducers/__tests__/payments.test.ts
@@ -0,0 +1,1547 @@
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { Detail_v2Enum } from "../../../../../../definitions/backend/PaymentProblemJson";
+import { PaymentRequestsGetResponse } from "../../../../../../definitions/backend/PaymentRequestsGetResponse";
+import { reloadAllMessages } from "../../../../messages/store/actions";
+import { Action } from "../../../../../store/actions/types";
+import { appReducer } from "../../../../../store/reducers";
+import {
+  PaymentData,
+  UIMessageDetails,
+  UIMessageId
+} from "../../../../messages/types";
+import {
+  remoteError,
+  remoteLoading,
+  remoteReady,
+  remoteUndefined
+} from "../../../../../common/model/RemoteValue";
+import {
+  addUserSelectedPaymentRptId,
+  updatePaymentForMessage
+} from "../../actions";
+import {
+  initialState,
+  paymentStatusForUISelector,
+  userSelectedPaymentRptIdSelector,
+  paymentsReducer,
+  shouldUpdatePaymentSelector,
+  isUserSelectedPaymentSelector,
+  canNavigateToPaymentFromMessageSelector,
+  paymentsButtonStateSelector,
+  isPaymentsButtonVisibleSelector,
+  paymentExpirationBannerStateSelector
+} from "../payments";
+import { getRptIdStringFromPaymentData } from "../../../utils";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import * as versionInfo from "../../../../../common/versionInfo/store/reducers/versionInfo";
+import * as profile from "../../../../../store/reducers/profile";
+import { GlobalState } from "../../../../../store/reducers/types";
+
+describe("Messages payments reducer's tests", () => {
+  it("Should match initial state upon initialization", () => {
+    const firstState = paymentsReducer(undefined, {} as Action);
+    expect(firstState).toEqual(initialState);
+  });
+  it("Should have undefined value for an undefined Message Id", () => {
+    const requestAction = updatePaymentForMessage.request({
+      messageId: "m1" as UIMessageId,
+      paymentId: "p1"
+    });
+    const paymentsState = paymentsReducer(undefined, requestAction);
+    const unknownMessageId = "m2" as UIMessageId;
+    const messageState = paymentsState[unknownMessageId];
+    expect(messageState).toBeUndefined();
+  });
+  it("Should have undefined value for an unknown paymentId", () => {
+    const messageId = "m1" as UIMessageId;
+    const requestAction = updatePaymentForMessage.request({
+      messageId,
+      paymentId: "p1"
+    });
+    const paymentsState = paymentsReducer(undefined, requestAction);
+    const messageState = paymentsState[messageId];
+    expect(messageState).toBeTruthy();
+    const unknownPaymentId = "p2";
+    const paymentState = messageState?.[unknownPaymentId];
+    expect(paymentState).toBeUndefined();
+  });
+  it("Should have remoteLoading value for a updatePaymentForMessage.request", () => {
+    const messageId = "m1" as UIMessageId;
+    const paymentId = "p1";
+    const requestAction = updatePaymentForMessage.request({
+      messageId,
+      paymentId
+    });
+    const paymentsState = paymentsReducer(undefined, requestAction);
+    const messageState = paymentsState[messageId];
+    expect(messageState).toBeTruthy();
+    const paymentState = messageState?.[paymentId];
+    expect(paymentState).toBe(remoteLoading);
+  });
+  it("Should have remoteReady value for a updatePaymentForMessage.success", () => {
+    const messageId = "m1" as UIMessageId;
+    const paymentId = "p1";
+    const requestAction = updatePaymentForMessage.request({
+      messageId,
+      paymentId
+    });
+    const paymentsState = paymentsReducer(undefined, requestAction);
+    const paymentData = {
+      importoSingoloVersamento: 100,
+      codiceContestoPagamento: "a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6"
+    } as PaymentRequestsGetResponse;
+    const successAction = updatePaymentForMessage.success({
+      messageId,
+      paymentId,
+      paymentData
+    });
+    const updatedPaymentsState = paymentsReducer(paymentsState, successAction);
+    const messageState = updatedPaymentsState[messageId];
+    expect(messageState).toBeTruthy();
+    const paymentState = messageState?.[paymentId];
+    const remoteSuccessPaymentData = remoteReady(paymentData);
+    expect(paymentState).toStrictEqual(remoteSuccessPaymentData);
+  });
+  it("Should have remoteError value for a updatePaymentForMessage.failure", () => {
+    const messageId = "m1" as UIMessageId;
+    const paymentId = "p1";
+    const requestAction = updatePaymentForMessage.request({
+      messageId,
+      paymentId
+    });
+    const paymentsState = paymentsReducer(undefined, requestAction);
+    const details = Detail_v2Enum.CANALE_BUSTA_ERRATA;
+    const failureAction = updatePaymentForMessage.failure({
+      messageId,
+      paymentId,
+      details
+    });
+    const updatedPaymentsState = paymentsReducer(paymentsState, failureAction);
+    const messageState = updatedPaymentsState[messageId];
+    expect(messageState).toBeTruthy();
+    const paymentState = messageState?.[paymentId];
+    const remoteSuccessPaymentData = remoteError(details);
+    expect(paymentState).toStrictEqual(remoteSuccessPaymentData);
+  });
+  it("Should handle multiple payments for a single message", () => {
+    const messageId = "m1" as UIMessageId;
+    const paymentId1 = "p1";
+    const requestAction = updatePaymentForMessage.request({
+      messageId,
+      paymentId: paymentId1
+    });
+    const firstStateGeneration = paymentsReducer(undefined, requestAction);
+    const paymentId2 = "p2";
+    const secondPaymentData = {
+      importoSingoloVersamento: 100,
+      codiceContestoPagamento: "a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6"
+    } as PaymentRequestsGetResponse;
+    const successAction = updatePaymentForMessage.success({
+      messageId,
+      paymentId: paymentId2,
+      paymentData: secondPaymentData
+    });
+    const secondStateGeneration = paymentsReducer(
+      firstStateGeneration,
+      successAction
+    );
+    const paymentId3 = "p3";
+    const thirdPaymentDetails = Detail_v2Enum.CANALE_BUSTA_ERRATA;
+    const failureAction = updatePaymentForMessage.failure({
+      messageId,
+      paymentId: paymentId3,
+      details: thirdPaymentDetails
+    });
+    const finalStateGeneration = paymentsReducer(
+      secondStateGeneration,
+      failureAction
+    );
+    const messageState = finalStateGeneration[messageId];
+    expect(messageState).toBeTruthy();
+    const firstPaymentState = messageState?.[paymentId1];
+    expect(firstPaymentState).toBe(remoteLoading);
+    const secondPaymentState = messageState?.[paymentId2];
+    expect(secondPaymentState).toStrictEqual(remoteReady(secondPaymentData));
+    const thirdPaymentState = messageState?.[paymentId3];
+    expect(thirdPaymentState).toStrictEqual(remoteError(thirdPaymentDetails));
+  });
+  it("Should handle multiple payments for multiple messages", () => {
+    const messageId1 = "m1" as UIMessageId;
+    const paymentId1 = "p1";
+    const requestAction = updatePaymentForMessage.request({
+      messageId: messageId1,
+      paymentId: paymentId1
+    });
+    const firstStateGeneration = paymentsReducer(undefined, requestAction);
+    const messageId2 = "m2" as UIMessageId;
+    const successfulPaymentData = {
+      importoSingoloVersamento: 100,
+      codiceContestoPagamento: "a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6"
+    } as PaymentRequestsGetResponse;
+    const successAction = updatePaymentForMessage.success({
+      messageId: messageId2,
+      paymentId: paymentId1,
+      paymentData: successfulPaymentData
+    });
+    const secondStateGeneration = paymentsReducer(
+      firstStateGeneration,
+      successAction
+    );
+    const messageId3 = "m3" as UIMessageId;
+    const failedPaymentDetails = Detail_v2Enum.CANALE_BUSTA_ERRATA;
+    const failureAction = updatePaymentForMessage.failure({
+      messageId: messageId3,
+      paymentId: paymentId1,
+      details: failedPaymentDetails
+    });
+    const finalStateGeneration = paymentsReducer(
+      secondStateGeneration,
+      failureAction
+    );
+    const message1State = finalStateGeneration[messageId1];
+    expect(message1State).toBeTruthy();
+    const firstPaymentState = message1State?.[paymentId1];
+    expect(firstPaymentState).toBe(remoteLoading);
+    const message2State = finalStateGeneration[messageId2];
+    expect(message2State).toBeTruthy();
+    const secondPaymentState = message2State?.[paymentId1];
+    expect(secondPaymentState).toStrictEqual(
+      remoteReady(successfulPaymentData)
+    );
+    const message3State = finalStateGeneration[messageId3];
+    expect(message3State).toBeTruthy();
+    const thirdPaymentState = message3State?.[paymentId1];
+    expect(thirdPaymentState).toStrictEqual(remoteError(failedPaymentDetails));
+  });
+  it("Should remove payment statuses on updatePaymentForMessage.cancel", () => {
+    const messageId1 = "m1" as UIMessageId;
+    const paymentId1 = "p1";
+    const requestAction1 = updatePaymentForMessage.request({
+      messageId: messageId1,
+      paymentId: paymentId1
+    });
+    const firstStateGeneration = paymentsReducer(undefined, requestAction1);
+    const messageId2 = "m2" as UIMessageId;
+    const requestAction2 = updatePaymentForMessage.request({
+      messageId: messageId2,
+      paymentId: paymentId1
+    });
+    const secondStateGeneration = paymentsReducer(
+      firstStateGeneration,
+      requestAction2
+    );
+    const paymentId2 = "p2";
+    const requestAction3 = updatePaymentForMessage.request({
+      messageId: messageId2,
+      paymentId: paymentId2
+    });
+    const thirdStateGeneration = paymentsReducer(
+      secondStateGeneration,
+      requestAction3
+    );
+    const messageId3 = "m3" as UIMessageId;
+    const requestAction4 = updatePaymentForMessage.request({
+      messageId: messageId3,
+      paymentId: paymentId1
+    });
+    const fourthStateGeneration = paymentsReducer(
+      thirdStateGeneration,
+      requestAction4
+    );
+    const requestAction5 = updatePaymentForMessage.request({
+      messageId: messageId3,
+      paymentId: paymentId2
+    });
+    const fifthStateGeneration = paymentsReducer(
+      fourthStateGeneration,
+      requestAction5
+    );
+    const paymentId3 = "p3";
+    const requestAction6 = updatePaymentForMessage.request({
+      messageId: messageId3,
+      paymentId: paymentId3
+    });
+    const sixthStateGeneration = paymentsReducer(
+      fifthStateGeneration,
+      requestAction6
+    );
+
+    const m1S1 = sixthStateGeneration[messageId1];
+    expect(m1S1).toBeTruthy();
+    const m1p1S1 = m1S1?.[paymentId1];
+    expect(m1p1S1).toStrictEqual(remoteLoading);
+
+    const m2S1 = sixthStateGeneration[messageId2];
+    expect(m2S1).toBeTruthy();
+    const m2p1S1 = m2S1?.[paymentId1];
+    expect(m2p1S1).toStrictEqual(remoteLoading);
+    const m2p2S1 = m2S1?.[paymentId2];
+    expect(m2p2S1).toStrictEqual(remoteLoading);
+
+    const m3S1 = sixthStateGeneration[messageId3];
+    expect(m3S1).toBeTruthy();
+    const m3p1S1 = m3S1?.[paymentId1];
+    expect(m3p1S1).toStrictEqual(remoteLoading);
+    const m3p2S1 = m3S1?.[paymentId2];
+    expect(m3p2S1).toStrictEqual(remoteLoading);
+    const m3p3S1 = m3S1?.[paymentId3];
+    expect(m3p3S1).toStrictEqual(remoteLoading);
+
+    const cancelPaymentAction = updatePaymentForMessage.cancel([
+      {
+        messageId: messageId1,
+        paymentId: paymentId1
+      },
+      {
+        messageId: messageId2,
+        paymentId: paymentId2
+      },
+      {
+        messageId: messageId3,
+        paymentId: paymentId2
+      },
+      {
+        messageId: messageId3,
+        paymentId: paymentId3
+      }
+    ]);
+    const finalStateGeneration = paymentsReducer(
+      sixthStateGeneration,
+      cancelPaymentAction
+    );
+
+    const m1S2 = finalStateGeneration[messageId1];
+    expect(m1S2).toBeTruthy();
+    const m1p1S2 = m1S2?.[paymentId1];
+    expect(m1p1S2).toBeUndefined();
+
+    const m2S2 = finalStateGeneration[messageId2];
+    expect(m2S2).toBeTruthy();
+    const m2p1S2 = m2S2?.[paymentId1];
+    expect(m2p1S2).toStrictEqual(remoteLoading);
+    const m2p2S2 = m2S2?.[paymentId2];
+    expect(m2p2S2).toBeUndefined();
+
+    const m3S2 = finalStateGeneration[messageId3];
+    expect(m3S2).toBeTruthy();
+    const m3p1S2 = m3S2?.[paymentId1];
+    expect(m3p1S2).toStrictEqual(remoteLoading);
+    const m3p2S2 = m3S2?.[paymentId2];
+    expect(m3p2S2).toBeUndefined();
+    const m3p3S2 = m3S2?.[paymentId3];
+    expect(m3p3S2).toBeUndefined();
+  });
+  it("Should have the paymentId for an addUserSelectedPaymentRptId action", () => {
+    const paymentId = "p1";
+    const setSelectedPaymentAction = addUserSelectedPaymentRptId(paymentId);
+    const paymentsState = paymentsReducer(undefined, setSelectedPaymentAction);
+    const userSelectedPayments = paymentsState.userSelectedPayments;
+    const hasPaymentRptId = userSelectedPayments.has(paymentId);
+    expect(hasPaymentRptId).toBe(true);
+  });
+  it("Should clear the paymentId for a updatePaymentForMessage.request action", () => {
+    const paymentId = "p1";
+    const setSelectedPaymentAction = addUserSelectedPaymentRptId(paymentId);
+    const startingPaymentsState = paymentsReducer(
+      undefined,
+      setSelectedPaymentAction
+    );
+    const userSelectedPayments = startingPaymentsState.userSelectedPayments;
+    const hasPaymentRptId = userSelectedPayments.has(paymentId);
+    expect(hasPaymentRptId).toBe(true);
+    const endingPaymentsState = paymentsReducer(
+      startingPaymentsState,
+      updatePaymentForMessage.request({
+        messageId: "01HR9GY9GHGH5BQEJAKPWXEKV3" as UIMessageId,
+        paymentId
+      })
+    );
+    const endingUserSelectedPayments = endingPaymentsState.userSelectedPayments;
+    const endingHasPaymentRptId = endingUserSelectedPayments.has(paymentId);
+    expect(endingHasPaymentRptId).toBe(false);
+  });
+  it("Should clear the paymentId for a reloadAllMessages action", () => {
+    const paymentId = "p1";
+    const addMessagePaymentToCheckAction =
+      addUserSelectedPaymentRptId(paymentId);
+    const startingPaymentsState = paymentsReducer(
+      undefined,
+      addMessagePaymentToCheckAction
+    );
+    const startingUserSelectedPayments =
+      startingPaymentsState.userSelectedPayments;
+    const startingHasPaymentToCheck =
+      startingUserSelectedPayments.has(paymentId);
+    expect(startingHasPaymentToCheck).toBe(true);
+    const endingPaymentsState = paymentsReducer(
+      startingPaymentsState,
+      reloadAllMessages.request({ pageSize: 12, filter: {} })
+    );
+    const endingUserSelectedPayments = endingPaymentsState.userSelectedPayments;
+    const endingPaymentsToCheckSize = endingUserSelectedPayments.size;
+    expect(endingPaymentsToCheckSize).toBe(0);
+  });
+});
+
+describe("PN Payments selectors' tests", () => {
+  it("shouldUpdatePaymentSelector should return true for an unmatching message Id", () => {
+    const startingState = appReducer(undefined, {} as Action);
+    const updatePaymentForMessageAction = updatePaymentForMessage.request({
+      messageId: "m1" as UIMessageId,
+      paymentId: "p1"
+    });
+    const state = appReducer(startingState, updatePaymentForMessageAction);
+    const shouldUpdatePayment = shouldUpdatePaymentSelector(
+      state,
+      "m2" as UIMessageId,
+      "p1"
+    );
+    expect(shouldUpdatePayment).toBeTruthy();
+  });
+  it("shouldUpdatePaymentSelector should return true for a matching message Id with an unmatching payment Id", () => {
+    const startingState = appReducer(undefined, {} as Action);
+    const updatePaymentForMessageAction = updatePaymentForMessage.request({
+      messageId: "m1" as UIMessageId,
+      paymentId: "p1"
+    });
+    const state = appReducer(startingState, updatePaymentForMessageAction);
+    const shouldUpdatePayment = shouldUpdatePaymentSelector(
+      state,
+      "m1" as UIMessageId,
+      "p2"
+    );
+    expect(shouldUpdatePayment).toBeTruthy();
+  });
+  it("shouldUpdatePaymentSelector should return false for a matching <message Id, payment Id> pair", () => {
+    const startingState = appReducer(undefined, {} as Action);
+    const updatePaymentForMessageAction = updatePaymentForMessage.request({
+      messageId: "m1" as UIMessageId,
+      paymentId: "p1"
+    });
+    const state = appReducer(startingState, updatePaymentForMessageAction);
+    const shouldUpdatePayment = shouldUpdatePaymentSelector(
+      state,
+      "m1" as UIMessageId,
+      "p1"
+    );
+    expect(shouldUpdatePayment).toBeFalsy();
+  });
+  it("paymentStatusForUISelector should return remoteUndefined for an unmatching message Id", () => {
+    const startingState = appReducer(undefined, {} as Action);
+    const updatePaymentForMessageAction = updatePaymentForMessage.request({
+      messageId: "m1" as UIMessageId,
+      paymentId: "p1"
+    });
+    const state = appReducer(startingState, updatePaymentForMessageAction);
+    const paymentStatus = paymentStatusForUISelector(
+      state,
+      "m2" as UIMessageId,
+      "p1"
+    );
+    expect(paymentStatus).toBe(remoteUndefined);
+  });
+  it("paymentStatusForUISelector should return remoteUndefined for a matching message Id with an unmatching payment Id", () => {
+    const startingState = appReducer(undefined, {} as Action);
+    const updatePaymentForMessageAction = updatePaymentForMessage.request({
+      messageId: "m1" as UIMessageId,
+      paymentId: "p1"
+    });
+    const state = appReducer(startingState, updatePaymentForMessageAction);
+    const paymentStatus = paymentStatusForUISelector(
+      state,
+      "m1" as UIMessageId,
+      "p2"
+    );
+    expect(paymentStatus).toBe(remoteUndefined);
+  });
+  it("paymentStatusForUISelector should return remoteUndefined for a matching <message Id, payment Id> that is loading", () => {
+    const startingState = appReducer(undefined, {} as Action);
+    const updatePaymentForMessageAction = updatePaymentForMessage.request({
+      messageId: "m1" as UIMessageId,
+      paymentId: "p1"
+    });
+    const state = appReducer(startingState, updatePaymentForMessageAction);
+    const paymentStatusOnStore =
+      state.entities.messages.payments["m1" as UIMessageId]?.p1;
+    expect(paymentStatusOnStore).toBe(remoteLoading);
+    const paymentStatus = paymentStatusForUISelector(
+      state,
+      "m1" as UIMessageId,
+      "p1"
+    );
+    expect(paymentStatus).toBe(remoteUndefined);
+  });
+  it("paymentStatusForUISelector should return remoteReady for a matching <message Id, payment Id> that is payable", () => {
+    const paymentData = {} as PaymentRequestsGetResponse;
+    const startingState = appReducer(undefined, {} as Action);
+    const updatePaymentForMessageAction = updatePaymentForMessage.success({
+      messageId: "m1" as UIMessageId,
+      paymentId: "p1",
+      paymentData
+    });
+    const state = appReducer(startingState, updatePaymentForMessageAction);
+    const paymentStatus = paymentStatusForUISelector(
+      state,
+      "m1" as UIMessageId,
+      "p1"
+    );
+    expect(paymentStatus).toStrictEqual(remoteReady(paymentData));
+  });
+  it("paymentStatusForUISelector should return remoteError for a matching <message Id, payment Id> that is not payable anymore", () => {
+    const details = Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO;
+    const startingState = appReducer(undefined, {} as Action);
+    const updatePaymentForMessageAction = updatePaymentForMessage.failure({
+      messageId: "m1" as UIMessageId,
+      paymentId: "p1",
+      details
+    });
+    const state = appReducer(startingState, updatePaymentForMessageAction);
+    const paymentStatus = paymentStatusForUISelector(
+      state,
+      "m1" as UIMessageId,
+      "p1"
+    );
+    expect(paymentStatus).toStrictEqual(remoteError(details));
+  });
+
+  it("addUserSelectedPaymentRptId should contain added user selected payments and removed one later", () => {
+    const paymentId1 = "01234567890012345678912345610";
+    const paymentId2 = "01234567890012345678912345620";
+    const paymentId3 = "01234567890012345678912345630";
+    const addAction1 = addUserSelectedPaymentRptId(paymentId1);
+    const addAction2 = addUserSelectedPaymentRptId(paymentId2);
+    const addAction3 = addUserSelectedPaymentRptId(paymentId3);
+    const initialAppState = appReducer(undefined, addAction1);
+    const intermediateAppState = appReducer(initialAppState, addAction2);
+    const finalAppState = appReducer(intermediateAppState, addAction3);
+    const userSelectedPayments1 =
+      finalAppState.entities.messages.payments.userSelectedPayments;
+    expect(userSelectedPayments1.has(paymentId1)).toBe(true);
+    expect(userSelectedPayments1.has(paymentId2)).toBe(true);
+    expect(userSelectedPayments1.has(paymentId3)).toBe(true);
+    const firstRemovedAppState = appReducer(
+      finalAppState,
+      updatePaymentForMessage.request({
+        messageId: "" as UIMessageId,
+        paymentId: paymentId1
+      })
+    );
+    const userSelectedPayments2 =
+      firstRemovedAppState.entities.messages.payments.userSelectedPayments;
+    expect(userSelectedPayments2.has(paymentId1)).toBe(false);
+    expect(userSelectedPayments2.has(paymentId2)).toBe(true);
+    expect(userSelectedPayments2.has(paymentId3)).toBe(true);
+    const secondRemovedAppState = appReducer(
+      firstRemovedAppState,
+      updatePaymentForMessage.request({
+        messageId: "" as UIMessageId,
+        paymentId: paymentId2
+      })
+    );
+    const userSelectedPayments3 =
+      secondRemovedAppState.entities.messages.payments.userSelectedPayments;
+    expect(userSelectedPayments3.has(paymentId1)).toBe(false);
+    expect(userSelectedPayments3.has(paymentId2)).toBe(false);
+    expect(userSelectedPayments3.has(paymentId3)).toBe(true);
+    const thirdRemovedAppState = appReducer(
+      secondRemovedAppState,
+      updatePaymentForMessage.request({
+        messageId: "" as UIMessageId,
+        paymentId: paymentId3
+      })
+    );
+    const userSelectedPayments4 =
+      thirdRemovedAppState.entities.messages.payments.userSelectedPayments;
+    expect(userSelectedPayments4.has(paymentId1)).toBe(false);
+    expect(userSelectedPayments4.has(paymentId2)).toBe(false);
+    expect(userSelectedPayments4.has(paymentId3)).toBe(false);
+  });
+});
+
+describe("isUserSelectedPaymentSelector", () => {
+  it("should return false when there is no match on an empty state", () => {
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const isUserSelectedPayment = isUserSelectedPaymentSelector(
+      appState,
+      "01234567890012345678912345610"
+    );
+    expect(isUserSelectedPayment).toBe(false);
+  });
+  it("should return false when there is no match on a non-empty state", () => {
+    const initialState = appReducer(
+      undefined,
+      applicationChangeState("active")
+    );
+    const appState = appReducer(
+      initialState,
+      addUserSelectedPaymentRptId("01234567890012345678912345620")
+    );
+    const isUserSelectedPayment = isUserSelectedPaymentSelector(
+      appState,
+      "01234567890012345678912345610"
+    );
+    expect(isUserSelectedPayment).toBe(false);
+  });
+  it("should return true when there is a match", () => {
+    const initialState = appReducer(
+      undefined,
+      applicationChangeState("active")
+    );
+    const intermediateState = appReducer(
+      initialState,
+      addUserSelectedPaymentRptId("01234567890012345678912345620")
+    );
+    const rptId = "01234567890012345678912345610";
+    const appState = appReducer(
+      intermediateState,
+      addUserSelectedPaymentRptId(rptId)
+    );
+    const isUserSelectedPayment = isUserSelectedPaymentSelector(
+      appState,
+      rptId
+    );
+    expect(isUserSelectedPayment).toBe(true);
+  });
+});
+
+describe("userSelectedPaymentRptIdSelector", () => {
+  it("should return undefined when none is set", () => {
+    const appState = appReducer(undefined, {} as Action);
+    const messageDetails = {
+      paymentData: {
+        noticeNumber: "",
+        payee: {
+          fiscalCode: ""
+        }
+      }
+    } as UIMessageDetails;
+    const paymentToCheckRptId = userSelectedPaymentRptIdSelector(
+      appState,
+      messageDetails
+    );
+    expect(paymentToCheckRptId).toBeUndefined();
+  });
+  it("should return none when ids do not match", () => {
+    const paymentData = {
+      noticeNumber: "012345678912345678",
+      payee: {
+        fiscalCode: "01234567890"
+      }
+    } as PaymentData;
+    const messageDetails = {
+      paymentData: {
+        noticeNumber: "012345678912345679",
+        payee: {
+          fiscalCode: "01234567890"
+        }
+      } as PaymentData
+    } as UIMessageDetails;
+    const rtpId = getRptIdStringFromPaymentData(paymentData);
+    const appState = appReducer(undefined, addUserSelectedPaymentRptId(rtpId));
+    const paymentToCheckRptId = userSelectedPaymentRptIdSelector(
+      appState,
+      messageDetails
+    );
+    expect(paymentToCheckRptId).toBeUndefined();
+  });
+  it("should return the selected payment when it matches", () => {
+    const paymentData = {
+      noticeNumber: "012345678912345678",
+      payee: {
+        fiscalCode: "01234567890"
+      }
+    } as PaymentData;
+    const messageDetails = {
+      paymentData
+    } as UIMessageDetails;
+    const rtpId = getRptIdStringFromPaymentData(paymentData);
+    const appState = appReducer(undefined, addUserSelectedPaymentRptId(rtpId));
+    const paymentToCheckRptId = userSelectedPaymentRptIdSelector(
+      appState,
+      messageDetails
+    );
+    expect(paymentToCheckRptId).toBe(rtpId);
+  });
+  it("should return the selected payment when it matches (and there are multiple user selected payments)", () => {
+    const paymentData = {
+      noticeNumber: "012345678912345678",
+      payee: {
+        fiscalCode: "01234567890"
+      }
+    } as PaymentData;
+    const messageDetails = {
+      paymentData
+    } as UIMessageDetails;
+    const appState = appReducer(
+      undefined,
+      addUserSelectedPaymentRptId(
+        getRptIdStringFromPaymentData({
+          noticeNumber: "012345678912345677",
+          payee: {
+            fiscalCode: "01234567890"
+          }
+        } as PaymentData)
+      )
+    );
+    const appStateIntermediate = appReducer(
+      appState,
+      addUserSelectedPaymentRptId(
+        getRptIdStringFromPaymentData({
+          noticeNumber: "012345678912345676",
+          payee: {
+            fiscalCode: "01234567890"
+          }
+        } as PaymentData)
+      )
+    );
+    const rtpId = getRptIdStringFromPaymentData(paymentData);
+    const appStateFinal = appReducer(
+      appStateIntermediate,
+      addUserSelectedPaymentRptId(rtpId)
+    );
+    const paymentToCheckRptId = userSelectedPaymentRptIdSelector(
+      appStateFinal,
+      messageDetails
+    );
+    expect(paymentToCheckRptId).toBe(rtpId);
+  });
+});
+
+describe("canNavigateToPaymentFromMessageSelector", () => {
+  it("should return false if profile email is not validated and pagopa is not supported", () => {
+    jest
+      .spyOn(profile, "isProfileEmailValidatedSelector")
+      .mockReturnValueOnce(false);
+    jest
+      .spyOn(versionInfo, "isPagoPaSupportedSelector")
+      .mockReturnValueOnce(false);
+
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const canNavigateToPaymentFromMessage =
+      canNavigateToPaymentFromMessageSelector(appState);
+    expect(canNavigateToPaymentFromMessage).toBe(false);
+  });
+  it("should return false if profile email is not validated", () => {
+    jest
+      .spyOn(profile, "isProfileEmailValidatedSelector")
+      .mockReturnValueOnce(false);
+    jest
+      .spyOn(versionInfo, "isPagoPaSupportedSelector")
+      .mockReturnValueOnce(true);
+
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const canNavigateToPaymentFromMessage =
+      canNavigateToPaymentFromMessageSelector(appState);
+    expect(canNavigateToPaymentFromMessage).toBe(false);
+  });
+  it("should return false if pagopa is not supported", () => {
+    jest
+      .spyOn(profile, "isProfileEmailValidatedSelector")
+      .mockReturnValueOnce(true);
+    jest
+      .spyOn(versionInfo, "isPagoPaSupportedSelector")
+      .mockReturnValueOnce(false);
+
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const canNavigateToPaymentFromMessage =
+      canNavigateToPaymentFromMessageSelector(appState);
+    expect(canNavigateToPaymentFromMessage).toBe(false);
+  });
+  it("should return true if email si validated and pagopa is supported", () => {
+    jest
+      .spyOn(profile, "isProfileEmailValidatedSelector")
+      .mockReturnValueOnce(true);
+    jest
+      .spyOn(versionInfo, "isPagoPaSupportedSelector")
+      .mockReturnValueOnce(true);
+
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const canNavigateToPaymentFromMessage =
+      canNavigateToPaymentFromMessageSelector(appState);
+    expect(canNavigateToPaymentFromMessage).toBe(true);
+  });
+});
+
+describe("paymentsButtonStateSelector", () => {
+  it("should return hidden for a pot.none message details", () => {
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const messageId = "01HRSSD1R29DA2HJQHGYJP19T8" as UIMessageId;
+    const paymentsButtonState = paymentsButtonStateSelector(
+      appState,
+      messageId
+    );
+    expect(paymentsButtonState).toBe("hidden");
+  });
+  it("should return hidden for a message without payment data", () => {
+    const messageId = "01HRSSD1R29DA2HJQHGYJP19T8" as UIMessageId;
+    const messageDetailsPot = pot.some({
+      id: messageId
+    } as UIMessageDetails);
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const finalState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            "01HRSSD1R29DA2HJQHGYJP19T8": messageDetailsPot
+          }
+        }
+      }
+    } as GlobalState;
+    const paymentsButtonState = paymentsButtonStateSelector(
+      finalState,
+      messageId
+    );
+    expect(paymentsButtonState).toBe("hidden");
+  });
+  it("should return hidden for a payment with an error", () => {
+    const messageId = "01HRSSD1R29DA2HJQHGYJP19T8" as UIMessageId;
+    const paymentData = {
+      noticeNumber: "012345678912345610",
+      payee: {
+        fiscalCode: "01234567890"
+      }
+    } as PaymentData;
+    const messageDetailsPot = pot.some({
+      id: messageId,
+      paymentData
+    } as UIMessageDetails);
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const finalState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            "01HRSSD1R29DA2HJQHGYJP19T8": messageDetailsPot
+          },
+          payments: {
+            ...appState.entities.messages.payments,
+            "01HRSSD1R29DA2HJQHGYJP19T8": {
+              "01234567890012345678912345610": remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_ANNULLATO
+              )
+            }
+          }
+        }
+      }
+    } as GlobalState;
+    const paymentsButtonState = paymentsButtonStateSelector(
+      finalState,
+      messageId
+    );
+    expect(paymentsButtonState).toBe("hidden");
+  });
+  it("should return loading for a payment with no data (no message entry in the payment section of redux)", () => {
+    const messageId = "01HRSSD1R29DA2HJQHGYJP19T8" as UIMessageId;
+    const paymentData = {
+      noticeNumber: "012345678912345610",
+      payee: {
+        fiscalCode: "01234567890"
+      }
+    } as PaymentData;
+    const messageDetailsPot = pot.some({
+      id: messageId,
+      paymentData
+    } as UIMessageDetails);
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const finalState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            "01HRSSD1R29DA2HJQHGYJP19T8": messageDetailsPot
+          }
+        }
+      }
+    } as GlobalState;
+    const paymentsButtonState = paymentsButtonStateSelector(
+      finalState,
+      messageId
+    );
+    expect(paymentsButtonState).toBe("loading");
+  });
+  it("should return loading for a payment with no data (no payment entry in the message's payment section of redux)", () => {
+    const messageId = "01HRSSD1R29DA2HJQHGYJP19T8" as UIMessageId;
+    const paymentData = {
+      noticeNumber: "012345678912345610",
+      payee: {
+        fiscalCode: "01234567890"
+      }
+    } as PaymentData;
+    const messageDetailsPot = pot.some({
+      id: messageId,
+      paymentData
+    } as UIMessageDetails);
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const finalState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            "01HRSSD1R29DA2HJQHGYJP19T8": messageDetailsPot
+          },
+          payments: {
+            ...appState.entities.messages.payments,
+            "01HRSSD1R29DA2HJQHGYJP19T8": {}
+          }
+        }
+      }
+    } as GlobalState;
+    const paymentsButtonState = paymentsButtonStateSelector(
+      finalState,
+      messageId
+    );
+    expect(paymentsButtonState).toBe("loading");
+  });
+  it("should return loading for a payment with remoteUndefined value", () => {
+    const messageId = "01HRSSD1R29DA2HJQHGYJP19T8" as UIMessageId;
+    const paymentData = {
+      noticeNumber: "012345678912345610",
+      payee: {
+        fiscalCode: "01234567890"
+      }
+    } as PaymentData;
+    const messageDetailsPot = pot.some({
+      id: messageId,
+      paymentData
+    } as UIMessageDetails);
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const finalState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            "01HRSSD1R29DA2HJQHGYJP19T8": messageDetailsPot
+          },
+          payments: {
+            ...appState.entities.messages.payments,
+            "01HRSSD1R29DA2HJQHGYJP19T8": {
+              "01234567890012345678912345610": remoteUndefined
+            }
+          }
+        }
+      }
+    } as GlobalState;
+    const paymentsButtonState = paymentsButtonStateSelector(
+      finalState,
+      messageId
+    );
+    expect(paymentsButtonState).toBe("loading");
+  });
+  it("should return loading for a loading payment", () => {
+    const messageId = "01HRSSD1R29DA2HJQHGYJP19T8" as UIMessageId;
+    const paymentData = {
+      noticeNumber: "012345678912345610",
+      payee: {
+        fiscalCode: "01234567890"
+      }
+    } as PaymentData;
+    const messageDetailsPot = pot.some({
+      id: messageId,
+      paymentData
+    } as UIMessageDetails);
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const finalState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            "01HRSSD1R29DA2HJQHGYJP19T8": messageDetailsPot
+          },
+          payments: {
+            ...appState.entities.messages.payments,
+            "01HRSSD1R29DA2HJQHGYJP19T8": {
+              "01234567890012345678912345610": remoteLoading
+            }
+          }
+        }
+      }
+    } as GlobalState;
+    const paymentsButtonState = paymentsButtonStateSelector(
+      finalState,
+      messageId
+    );
+    expect(paymentsButtonState).toBe("loading");
+  });
+  it("should return enabled for a payable payment", () => {
+    const messageId = "01HRSSD1R29DA2HJQHGYJP19T8" as UIMessageId;
+    const paymentData = {
+      noticeNumber: "012345678912345610",
+      payee: {
+        fiscalCode: "01234567890"
+      }
+    } as PaymentData;
+    const messageDetailsPot = pot.some({
+      id: messageId,
+      paymentData
+    } as UIMessageDetails);
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const finalState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            "01HRSSD1R29DA2HJQHGYJP19T8": messageDetailsPot
+          },
+          payments: {
+            ...appState.entities.messages.payments,
+            "01HRSSD1R29DA2HJQHGYJP19T8": {
+              "01234567890012345678912345610": remoteReady({})
+            }
+          }
+        }
+      }
+    } as GlobalState;
+    const paymentsButtonState = paymentsButtonStateSelector(
+      finalState,
+      messageId
+    );
+    expect(paymentsButtonState).toBe("enabled");
+  });
+});
+
+describe("isPaymentsButtonVisibleSelector", () => {
+  it("Should return false when the button is hidden", () => {
+    const messageId = "01HRSSD1R29DA2HJQHGYJP19T8" as UIMessageId;
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const isPaymentButtonVisible = isPaymentsButtonVisibleSelector(
+      appState,
+      messageId
+    );
+    expect(isPaymentButtonVisible).toBe(false);
+  });
+  it("Should return true when the button is loading", () => {
+    const messageId = "01HRSSD1R29DA2HJQHGYJP19T8" as UIMessageId;
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const finalState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            "01HRSSD1R29DA2HJQHGYJP19T8": pot.some({
+              id: messageId,
+              paymentData: {
+                noticeNumber: "012345678912345610",
+                payee: {
+                  fiscalCode: "01234567890"
+                }
+              } as PaymentData
+            } as UIMessageDetails)
+          }
+        }
+      }
+    } as GlobalState;
+    const isPaymentButtonVisible = isPaymentsButtonVisibleSelector(
+      finalState,
+      messageId
+    );
+    expect(isPaymentButtonVisible).toBe(true);
+  });
+  it("Should return true when the button is enabled", () => {
+    const messageId = "01HRSSD1R29DA2HJQHGYJP19T8" as UIMessageId;
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const finalState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            "01HRSSD1R29DA2HJQHGYJP19T8": pot.some({
+              id: messageId,
+              paymentData: {
+                noticeNumber: "012345678912345610",
+                payee: {
+                  fiscalCode: "01234567890"
+                }
+              } as PaymentData
+            } as UIMessageDetails)
+          },
+          payments: {
+            ...appState.entities.messages.payments,
+            "01HRSSD1R29DA2HJQHGYJP19T8": {
+              "01234567890012345678912345610": remoteReady({})
+            }
+          }
+        }
+      }
+    } as GlobalState;
+    const isPaymentButtonVisible = isPaymentsButtonVisibleSelector(
+      finalState,
+      messageId
+    );
+    expect(isPaymentButtonVisible).toBe(true);
+  });
+});
+
+describe("paymentExpirationBannerStateSelector", () => {
+  it("should return hidden when there is no message (undefined)", () => {
+    const messageId = "01HSEBPZ2NW3K6ZV7ZEV8KZQC4" as UIMessageId;
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const status = paymentExpirationBannerStateSelector(appState, messageId);
+    expect(status).toBe("hidden");
+  });
+  it("should return hidden when there is no message (pot.none)", () => {
+    const messageId = "01HSEBPZ2NW3K6ZV7ZEV8KZQC4" as UIMessageId;
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const enhancedState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            [messageId]: pot.none
+          }
+        }
+      }
+    } as GlobalState;
+    const status = paymentExpirationBannerStateSelector(
+      enhancedState,
+      messageId
+    );
+    expect(status).toBe("hidden");
+  });
+  it("should return hidden when there is no message (pot.noneLoading)", () => {
+    const messageId = "01HSEBPZ2NW3K6ZV7ZEV8KZQC4" as UIMessageId;
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const enhancedState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            [messageId]: pot.noneLoading
+          }
+        }
+      }
+    } as GlobalState;
+    const status = paymentExpirationBannerStateSelector(
+      enhancedState,
+      messageId
+    );
+    expect(status).toBe("hidden");
+  });
+  it("should return hidden when there is no message (pot.noneUpdating)", () => {
+    const messageId = "01HSEBPZ2NW3K6ZV7ZEV8KZQC4" as UIMessageId;
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const enhancedState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            [messageId]: pot.noneUpdating({} as UIMessageDetails)
+          }
+        }
+      }
+    } as GlobalState;
+    const status = paymentExpirationBannerStateSelector(
+      enhancedState,
+      messageId
+    );
+    expect(status).toBe("hidden");
+  });
+  it("should return hidden when there is no message (pot.noneError)", () => {
+    const messageId = "01HSEBPZ2NW3K6ZV7ZEV8KZQC4" as UIMessageId;
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const enhancedState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            [messageId]: pot.noneError(new Error("")) as pot.Pot<
+              UIMessageDetails,
+              Error
+            >
+          }
+        }
+      }
+    } as GlobalState;
+    const status = paymentExpirationBannerStateSelector(
+      enhancedState,
+      messageId
+    );
+    expect(status).toBe("hidden");
+  });
+  it("should return hidden when there is a message without a due date (pot.some)", () => {
+    const messageId = "01HSEBPZ2NW3K6ZV7ZEV8KZQC4" as UIMessageId;
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const enhancedState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            [messageId]: pot.some({} as UIMessageDetails)
+          }
+        }
+      }
+    } as GlobalState;
+    const status = paymentExpirationBannerStateSelector(
+      enhancedState,
+      messageId
+    );
+    expect(status).toBe("hidden");
+  });
+  it("should return hidden when there is a message without a due date (pot.someLoading)", () => {
+    const messageId = "01HSEBPZ2NW3K6ZV7ZEV8KZQC4" as UIMessageId;
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const enhancedState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            [messageId]: pot.someLoading({} as UIMessageDetails)
+          }
+        }
+      }
+    } as GlobalState;
+    const status = paymentExpirationBannerStateSelector(
+      enhancedState,
+      messageId
+    );
+    expect(status).toBe("hidden");
+  });
+  it("should return hidden when there is a message without a due date (pot.someUpdating)", () => {
+    const messageId = "01HSEBPZ2NW3K6ZV7ZEV8KZQC4" as UIMessageId;
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const enhancedState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            [messageId]: pot.someUpdating(
+              {} as UIMessageDetails,
+              {} as UIMessageDetails
+            )
+          }
+        }
+      }
+    } as GlobalState;
+    const status = paymentExpirationBannerStateSelector(
+      enhancedState,
+      messageId
+    );
+    expect(status).toBe("hidden");
+  });
+  it("should return hidden when there is a message without a due date (pot.someError)", () => {
+    const messageId = "01HSEBPZ2NW3K6ZV7ZEV8KZQC4" as UIMessageId;
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const enhancedState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            [messageId]: pot.someError({}, new Error("")) as pot.Pot<
+              UIMessageDetails,
+              Error
+            >
+          }
+        }
+      }
+    } as GlobalState;
+    const status = paymentExpirationBannerStateSelector(
+      enhancedState,
+      messageId
+    );
+    expect(status).toBe("hidden");
+  });
+  it("should return hidden when there is a message with a due date but no payment data", () => {
+    const messageId = "01HSEBPZ2NW3K6ZV7ZEV8KZQC4" as UIMessageId;
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const enhancedState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            [messageId]: pot.some({
+              dueDate: new Date()
+            } as UIMessageDetails)
+          }
+        }
+      }
+    } as GlobalState;
+    const status = paymentExpirationBannerStateSelector(
+      enhancedState,
+      messageId
+    );
+    expect(status).toBe("hidden");
+  });
+  it("should return loading when there is a message (pot.some) with a due date, payment data but no entry for the updated payment", () => {
+    const messageId = "01HSEBPZ2NW3K6ZV7ZEV8KZQC4" as UIMessageId;
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const enhancedState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            [messageId]: pot.some({
+              dueDate: new Date(),
+              paymentData: {
+                amount: 199,
+                noticeNumber: "012345678912345610",
+                payee: {
+                  fiscalCode: "01234567890"
+                }
+              }
+            } as UIMessageDetails)
+          }
+        }
+      }
+    } as GlobalState;
+    const status = paymentExpirationBannerStateSelector(
+      enhancedState,
+      messageId
+    );
+    expect(status).toBe("loading");
+  });
+  it("should return loading when there is a message (pot.some) with a due date, payment data but the updated payment is remoteUndefined", () => {
+    const messageId = "01HSEBPZ2NW3K6ZV7ZEV8KZQC4" as UIMessageId;
+    const fiscalCode = "01234567890";
+    const noticeNumber = "012345678912345610";
+    const rptId = `${noticeNumber}${fiscalCode}`;
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const enhancedState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            [messageId]: pot.some({
+              dueDate: new Date(),
+              paymentData: {
+                amount: 199,
+                noticeNumber,
+                payee: {
+                  fiscalCode
+                }
+              }
+            } as UIMessageDetails)
+          },
+          payments: {
+            ...appState.entities.messages.payments,
+            [messageId]: {
+              [rptId]: remoteUndefined
+            }
+          }
+        }
+      }
+    } as GlobalState;
+    const status = paymentExpirationBannerStateSelector(
+      enhancedState,
+      messageId
+    );
+    expect(status).toBe("loading");
+  });
+  it("should return loading when there is a message (pot.some) with a due date, payment data but the updated payment is remoteLoading", () => {
+    const messageId = "01HSEBPZ2NW3K6ZV7ZEV8KZQC4" as UIMessageId;
+    const fiscalCode = "01234567890";
+    const noticeNumber = "012345678912345610";
+    const rptId = `${noticeNumber}${fiscalCode}`;
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const enhancedState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            [messageId]: pot.some({
+              dueDate: new Date(),
+              paymentData: {
+                amount: 199,
+                noticeNumber,
+                payee: {
+                  fiscalCode
+                }
+              }
+            } as UIMessageDetails)
+          },
+          payments: {
+            ...appState.entities.messages.payments,
+            [messageId]: {
+              [rptId]: remoteLoading
+            }
+          }
+        }
+      }
+    } as GlobalState;
+    const status = paymentExpirationBannerStateSelector(
+      enhancedState,
+      messageId
+    );
+    expect(status).toBe("loading");
+  });
+  it("should return visibleExpiring when there is a message (pot.some) with a due date, payment data and the updated payment is remoteReady", () => {
+    const messageId = "01HSEBPZ2NW3K6ZV7ZEV8KZQC4" as UIMessageId;
+    const fiscalCode = "01234567890";
+    const noticeNumber = "012345678912345610";
+    const rptId = `${fiscalCode}${noticeNumber}`;
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const enhancedState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            [messageId]: pot.some({
+              dueDate: new Date(),
+              paymentData: {
+                amount: 199,
+                noticeNumber,
+                payee: {
+                  fiscalCode
+                }
+              }
+            } as UIMessageDetails)
+          },
+          payments: {
+            ...appState.entities.messages.payments,
+            [messageId]: {
+              [rptId]: remoteReady({})
+            }
+          }
+        }
+      }
+    } as GlobalState;
+    const status = paymentExpirationBannerStateSelector(
+      enhancedState,
+      messageId
+    );
+    expect(status).toBe("visibleExpiring");
+  });
+  it("should return visibleExpired when there is a message (pot.some) with a due date, payment data and the updated payment is expired (remoteError(PAA_PAGAMENTO_SCADUTO))", () => {
+    const messageId = "01HSEBPZ2NW3K6ZV7ZEV8KZQC4" as UIMessageId;
+    const fiscalCode = "01234567890";
+    const noticeNumber = "012345678912345610";
+    const rptId = `${fiscalCode}${noticeNumber}`;
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const enhancedState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            [messageId]: pot.some({
+              dueDate: new Date(),
+              paymentData: {
+                amount: 199,
+                noticeNumber,
+                payee: {
+                  fiscalCode
+                }
+              }
+            } as UIMessageDetails)
+          },
+          payments: {
+            ...appState.entities.messages.payments,
+            [messageId]: {
+              [rptId]: remoteError(Detail_v2Enum.PAA_PAGAMENTO_SCADUTO)
+            }
+          }
+        }
+      }
+    } as GlobalState;
+    const status = paymentExpirationBannerStateSelector(
+      enhancedState,
+      messageId
+    );
+    expect(status).toBe("visibleExpired");
+  });
+  it("should return hidden when there is a message (pot.some) with a due date, payment data and the updated payment has an error that is not remoteError(PAA_PAGAMENTO_SCADUTO)", () => {
+    const messageId = "01HSEBPZ2NW3K6ZV7ZEV8KZQC4" as UIMessageId;
+    const fiscalCode = "01234567890";
+    const noticeNumber = "012345678912345610";
+    const rptId = `${fiscalCode}${noticeNumber}`;
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const enhancedState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          detailsById: {
+            ...appState.entities.messages.detailsById,
+            [messageId]: pot.some({
+              dueDate: new Date(),
+              paymentData: {
+                amount: 199,
+                noticeNumber,
+                payee: {
+                  fiscalCode
+                }
+              }
+            } as UIMessageDetails)
+          },
+          payments: {
+            ...appState.entities.messages.payments,
+            [messageId]: {
+              [rptId]: remoteError(Detail_v2Enum.CANALE_CONVENZIONE_NON_VALIDA)
+            }
+          }
+        }
+      }
+    } as GlobalState;
+    const status = paymentExpirationBannerStateSelector(
+      enhancedState,
+      messageId
+    );
+    expect(status).toBe("hidden");
+  });
+});
diff --git a/ts/features/messages/store/reducers/__tests__/thirdPartyById.test.ts b/ts/features/messages/store/reducers/__tests__/thirdPartyById.test.ts
index 98a572d8fc8..7e87b302461 100644
--- a/ts/features/messages/store/reducers/__tests__/thirdPartyById.test.ts
+++ b/ts/features/messages/store/reducers/__tests__/thirdPartyById.test.ts
@@ -1,17 +1,26 @@
 import * as pot from "@pagopa/ts-commons/lib/pot";
+import { Action } from "redux";
 import { appReducer } from "../../../../../store/reducers";
 import { ThirdPartyMessageWithContent } from "../../../../../../definitions/backend/ThirdPartyMessageWithContent";
 import { loadMessageDetails, loadThirdPartyMessage } from "../../actions";
 import { applicationChangeState } from "../../../../../store/actions/application";
 import {
+  hasAttachmentsSelector,
   isThirdPartyMessageSelector,
   messageMarkdownSelector,
   messageTitleSelector,
-  thirdPartyFromIdSelector
+  thirdPartyFromIdSelector,
+  thirdPartyMessageAttachments
 } from "../thirdPartyById";
 import { UIMessageDetails, UIMessageId } from "../../../types";
-import { ThirdPartyMessageDetails } from "../../../../../../definitions/backend/ThirdPartyMessage";
+import {
+  ThirdPartyMessage,
+  ThirdPartyMessageDetails
+} from "../../../../../../definitions/backend/ThirdPartyMessage";
 import { ServiceId } from "../../../../../../definitions/backend/ServiceId";
+import { ThirdPartyAttachment } from "../../../../../../definitions/backend/ThirdPartyAttachment";
+import { GlobalState } from "../../../../../store/reducers/types";
+import { reproduceSequence } from "../../../../../utils/tests";
 
 describe("thirdPartyFromIdSelector", () => {
   it("Should return pot none for an unmatching message id", () => {
@@ -168,6 +177,37 @@ describe("messageTitleSelector", () => {
     const messageTitle = messageTitleSelector(finalState, messageId);
     expect(messageTitle).toBe(thirdPartySubject);
   });
+  it("should return the message title when we have the detail and third party message with bad typed details", () => {
+    const messageId = "m1" as UIMessageId;
+    const content = {
+      id: messageId as string,
+      third_party_message: {
+        details: {
+          randomProperty: 5
+        } as ThirdPartyMessageDetails
+      }
+    } as ThirdPartyMessageWithContent;
+    const detailsSubject = "message subject";
+
+    const sequenceOfActions: ReadonlyArray<Action> = [
+      applicationChangeState("active"),
+      loadMessageDetails.success({
+        id: messageId,
+        subject: detailsSubject
+      } as UIMessageDetails),
+      loadThirdPartyMessage.success({
+        id: messageId,
+        content
+      })
+    ];
+    const state: GlobalState = reproduceSequence(
+      {} as GlobalState,
+      appReducer,
+      sequenceOfActions
+    );
+    const messageTitle = messageTitleSelector(state, messageId);
+    expect(messageTitle).toBe(detailsSubject);
+  });
 });
 
 describe("messageMarkdownSelector", () => {
@@ -228,7 +268,7 @@ describe("messageMarkdownSelector", () => {
     const messageMarkdown = messageMarkdownSelector(state, messageId);
     expect(messageMarkdown).toBeUndefined();
   });
-  it("Should return the message title for a matching loaded third party message with proper typed details", () => {
+  it("Should return the message markdown for a matching loaded third party message with proper typed details", () => {
     const messageId = "m1" as UIMessageId;
     const markdown =
       "This is a more than 80 characters message markdown length. The decoder needs this";
@@ -249,7 +289,7 @@ describe("messageMarkdownSelector", () => {
     const messageMarkdown = messageMarkdownSelector(state, messageId);
     expect(messageMarkdown).toBe(markdown);
   });
-  it("Should return the third party message title when there are both detailed and third party message", () => {
+  it("Should return the third party message markdown when there are both detailed and third party message", () => {
     const messageId = "m1" as UIMessageId;
     const thirdPartyMarkdown =
       "This is a more than 80 characters message markdown length. The decoder needs this";
@@ -276,4 +316,155 @@ describe("messageMarkdownSelector", () => {
     const messageMarkdown = messageMarkdownSelector(finalState, messageId);
     expect(messageMarkdown).toBe(thirdPartyMarkdown);
   });
+  it("should return the message markdown when we have the detail and third-party message with bad typed details", () => {
+    const messageId = "m1" as UIMessageId;
+    const content = {
+      id: messageId as string,
+      third_party_message: {
+        details: {
+          randomProperty: 5
+        } as ThirdPartyMessageDetails
+      }
+    } as ThirdPartyMessageWithContent;
+    const detailsMarkdown = "message markdown";
+
+    const sequenceOfActions: ReadonlyArray<Action> = [
+      applicationChangeState("active"),
+      loadMessageDetails.success({
+        id: messageId,
+        subject: detailsMarkdown
+      } as UIMessageDetails),
+      loadThirdPartyMessage.success({
+        id: messageId,
+        content
+      })
+    ];
+    const state: GlobalState = reproduceSequence(
+      {} as GlobalState,
+      appReducer,
+      sequenceOfActions
+    );
+    const messageTitle = messageTitleSelector(state, messageId);
+    expect(messageTitle).toBe(detailsMarkdown);
+  });
+});
+
+describe("thirdPartyMessageAttachments", () => {
+  it("should return an empty array on initial state", () => {
+    const messageId = "01HNWRS7DP721KTC3SMCJ7G82E" as UIMessageId;
+    const initialState = appReducer(
+      undefined,
+      applicationChangeState("active")
+    );
+    const attachments = thirdPartyMessageAttachments(initialState, messageId);
+    expect(attachments).toBeDefined();
+    expect(attachments.length).toBe(0);
+  });
+  it("should return an empty array on a third party message with no attachments", () => {
+    const messageId = "01HNWRS7DP721KTC3SMCJ7G82E" as UIMessageId;
+    const loadedThirdPartyMessage = appReducer(
+      undefined,
+      loadThirdPartyMessage.success({
+        id: messageId,
+        content: {
+          third_party_message: {}
+        } as ThirdPartyMessageWithContent
+      })
+    );
+    const attachments = thirdPartyMessageAttachments(
+      loadedThirdPartyMessage,
+      messageId
+    );
+    expect(attachments).toBeDefined();
+    expect(attachments.length).toBe(0);
+  });
+  it("should return an empty array on a third party message with empty attachments", () => {
+    const messageId = "01HNWRS7DP721KTC3SMCJ7G82E" as UIMessageId;
+    const loadedThirdPartyMessage = appReducer(
+      undefined,
+      loadThirdPartyMessage.success({
+        id: messageId,
+        content: {
+          third_party_message: {
+            attachments: []
+          } as ThirdPartyMessage
+        } as ThirdPartyMessageWithContent
+      })
+    );
+    const attachments = thirdPartyMessageAttachments(
+      loadedThirdPartyMessage,
+      messageId
+    );
+    expect(attachments).toBeDefined();
+    expect(attachments.length).toBe(0);
+  });
+  it("should return an empty array on a third party message with empty attachments", () => {
+    const messageId = "01HNWRS7DP721KTC3SMCJ7G82E" as UIMessageId;
+    const thirdPartyAttachment = {
+      id: "1",
+      url: "https://invalid.url"
+    } as ThirdPartyAttachment;
+    const loadedThirdPartyMessage = appReducer(
+      undefined,
+      loadThirdPartyMessage.success({
+        id: messageId,
+        content: {
+          third_party_message: {
+            attachments: [thirdPartyAttachment]
+          } as ThirdPartyMessage
+        } as ThirdPartyMessageWithContent
+      })
+    );
+    const attachments = thirdPartyMessageAttachments(
+      loadedThirdPartyMessage,
+      messageId
+    );
+    expect(attachments).toBeDefined();
+    expect(attachments.length).toBe(1);
+    expect(attachments[0]).toMatchObject(thirdPartyAttachment);
+  });
+});
+
+describe("hasAttachmentsSelector", () => {
+  it("should return false if there are no attachments", () => {
+    const messageId = "01HNWRS7DP721KTC3SMCJ7G82E" as UIMessageId;
+    const loadedThirdPartyMessage = appReducer(
+      undefined,
+      loadThirdPartyMessage.success({
+        id: messageId,
+        content: {
+          third_party_message: {}
+        } as ThirdPartyMessageWithContent
+      })
+    );
+    const hasAttachments = hasAttachmentsSelector(
+      loadedThirdPartyMessage,
+      messageId
+    );
+    expect(hasAttachments).toBe(false);
+  });
+
+  it("should return true if there are attachments", () => {
+    const messageId = "01HNWRS7DP721KTC3SMCJ7G82E" as UIMessageId;
+    const thirdPartyAttachment = {
+      id: "1",
+      url: "https://invalid.url"
+    } as ThirdPartyAttachment;
+    const loadedThirdPartyMessage = appReducer(
+      undefined,
+      loadThirdPartyMessage.success({
+        id: messageId,
+        content: {
+          third_party_message: {
+            attachments: [thirdPartyAttachment]
+          } as ThirdPartyMessage
+        } as ThirdPartyMessageWithContent
+      })
+    );
+    const hasAttachments = hasAttachmentsSelector(
+      loadedThirdPartyMessage,
+      messageId
+    );
+    expect(hasAttachments).toBe(true);
+  });
 });
diff --git a/ts/features/messages/store/reducers/__tests__/transformers.test.ts b/ts/features/messages/store/reducers/__tests__/transformers.test.ts
index 1cc5873396e..df2802db384 100644
--- a/ts/features/messages/store/reducers/__tests__/transformers.test.ts
+++ b/ts/features/messages/store/reducers/__tests__/transformers.test.ts
@@ -1,7 +1,8 @@
 import { CreatedMessageWithContentAndAttachments } from "../../../../../../definitions/backend/CreatedMessageWithContentAndAttachments";
+import { ThirdPartyAttachment } from "../../../../../../definitions/backend/ThirdPartyAttachment";
 import { message_1 } from "../../../__mocks__/message";
 
-import { toUIMessageDetails } from "../transformers";
+import { attachmentDisplayName, toUIMessageDetails } from "../transformers";
 
 const inputWithoutDueDate: CreatedMessageWithContentAndAttachments = {
   ...message_1,
@@ -18,3 +19,21 @@ describe("`toUIMessageDetails` function", () => {
     });
   });
 });
+
+describe("attachmentDisplayName", () => {
+  it("should properly convert name giving a display name source", () => {
+    const thirdPartyAttachment = {
+      id: "1",
+      name: "The name"
+    } as ThirdPartyAttachment;
+    const displayName = attachmentDisplayName(thirdPartyAttachment);
+    expect(displayName).toBe(thirdPartyAttachment.name);
+  });
+  it("should properly convert name giving an unavailable name source", () => {
+    const thirdPartyAttachment = {
+      id: "1"
+    } as ThirdPartyAttachment;
+    const displayName = attachmentDisplayName(thirdPartyAttachment);
+    expect(displayName).toBe(thirdPartyAttachment.id);
+  });
+});
diff --git a/ts/features/messages/store/reducers/detailsById.ts b/ts/features/messages/store/reducers/detailsById.ts
index 052c1fc3eba..3f14236acbc 100644
--- a/ts/features/messages/store/reducers/detailsById.ts
+++ b/ts/features/messages/store/reducers/detailsById.ts
@@ -21,7 +21,7 @@ const INITIAL_STATE: DetailsById = {};
 /**
  * A reducer to store all messages details by ID
  */
-const reducer = (
+export const detailsByIdReducer = (
   state: DetailsById = INITIAL_STATE,
   action: Action
 ): DetailsById => {
@@ -86,4 +86,28 @@ export const detailedMessageHasThirdPartyDataSelector = (
     )
   );
 
-export default reducer;
+export const messageDetailsExpiringInfoSelector = (
+  state: GlobalState,
+  id: string,
+  referenceDateMilliseconds: number
+) =>
+  pipe(
+    messageDetailsByIdSelector(state, id),
+    pot.toOption,
+    O.filter(messageDetails => !!messageDetails.paymentData),
+    O.chainNullableK(messageDetails => messageDetails.dueDate),
+    O.map(dueDate => {
+      const remainingMilliseconds =
+        dueDate.getTime() - referenceDateMilliseconds;
+      return remainingMilliseconds > 0 ? "expiring" : "expired";
+    }),
+    O.getOrElseW(() => "does_not_expire" as const)
+  );
+
+export const messagePaymentDataSelector = (state: GlobalState, id: string) =>
+  pipe(
+    messageDetailsByIdSelector(state, id),
+    pot.toOption,
+    O.chainNullableK(message => message.paymentData),
+    O.toUndefined
+  );
diff --git a/ts/features/messages/store/reducers/downloads.ts b/ts/features/messages/store/reducers/downloads.ts
index 3cf6630f74e..e3234a27905 100644
--- a/ts/features/messages/store/reducers/downloads.ts
+++ b/ts/features/messages/store/reducers/downloads.ts
@@ -1,9 +1,13 @@
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { createSelector } from "reselect";
 import { getType } from "typesafe-actions";
-import { downloadAttachment, removeCachedAttachment } from "../actions";
+import {
+  DownloadAttachmentCancel,
+  clearRequestedAttachmentDownload,
+  downloadAttachment,
+  removeCachedAttachment
+} from "../actions";
 import { Action } from "../../../../store/actions/types";
 import { IndexedById } from "../../../../store/helpers/indexer";
 import {
@@ -13,22 +17,28 @@ import {
   toSome
 } from "../../../../store/reducers/IndexedByIdPot";
 import { GlobalState } from "../../../../store/reducers/types";
-import { UIAttachment, UIMessageId, UIAttachmentId } from "../../types";
+import { UIMessageId } from "../../types";
+import { ThirdPartyAttachment } from "../../../../../definitions/backend/ThirdPartyAttachment";
 
 export type Download = {
-  attachment: UIAttachment;
+  attachment: ThirdPartyAttachment;
   path: string;
 };
 
-export type DownloadError<T> = {
-  attachment: UIAttachment;
-  error: T;
+export type DownloadError = {
+  attachment: ThirdPartyAttachment;
+  error: Error;
+};
+
+type RequestedDownload = {
+  messageId: UIMessageId;
+  attachmentId: string;
 };
 
 export type Downloads = Record<
   UIMessageId,
-  IndexedById<pot.Pot<Download, Error>>
->;
+  IndexedById<pot.Pot<Download, Error>> | undefined
+> & { requestedDownload?: RequestedDownload };
 
 export const INITIAL_STATE: Downloads = {};
 
@@ -44,16 +54,20 @@ export const downloadsReducer = (
       return {
         ...state,
         [action.payload.messageId]: toLoading(
-          action.payload.id,
+          action.payload.attachment.id,
           state[action.payload.messageId] ?? {}
-        )
+        ),
+        requestedDownload: {
+          messageId: action.payload.messageId,
+          attachmentId: action.payload.attachment.id
+        }
       };
     case getType(downloadAttachment.success):
       return {
         ...state,
-        [action.payload.attachment.messageId]: toSome(
+        [action.payload.messageId]: toSome(
           action.payload.attachment.id,
-          state[action.payload.attachment.messageId] ?? {},
+          state[action.payload.messageId] ?? {},
           {
             attachment: action.payload.attachment,
             path: action.payload.path
@@ -63,9 +77,9 @@ export const downloadsReducer = (
     case getType(downloadAttachment.failure):
       return {
         ...state,
-        [action.payload.attachment.messageId]: toError(
+        [action.payload.messageId]: toError(
           action.payload.attachment.id,
-          state[action.payload.attachment.messageId] ?? {},
+          state[action.payload.messageId] ?? {},
           action.payload.error
         )
       };
@@ -74,18 +88,27 @@ export const downloadsReducer = (
       return {
         ...state,
         [action.payload.messageId]: toNone(
-          action.payload.id,
+          action.payload.attachment.id,
           state[action.payload.messageId] ?? {}
+        ),
+        requestedDownload: requestDownloadAfterCancelledAction(
+          state,
+          action.payload
         )
       };
     case getType(removeCachedAttachment):
       return {
         ...state,
-        [action.payload.attachment.messageId]: toNone(
+        [action.payload.messageId]: toNone(
           action.payload.attachment.id,
-          state[action.payload.attachment.messageId] ?? {}
+          state[action.payload.messageId] ?? {}
         )
       };
+    case getType(clearRequestedAttachmentDownload):
+      return {
+        ...state,
+        requestedDownload: undefined
+      };
   }
   return state;
 };
@@ -93,27 +116,56 @@ export const downloadsReducer = (
 /**
  * From attachment to the download pot
  */
-export const downloadPotForMessageAttachmentSelector = createSelector(
-  [
-    (state: GlobalState) => state.entities.messages.downloads,
-    (
-      _: GlobalState,
-      attachment: { messageId: UIMessageId; id: UIAttachmentId }
-    ) => attachment
-  ],
-  (downloads, attachment): pot.Pot<Download, Error> => {
-    const download = downloads[attachment.messageId];
-    if (download) {
-      return download[attachment.id] ?? pot.none;
-    }
-    return pot.none;
-  }
-);
+export const downloadPotForMessageAttachmentSelector = (
+  state: GlobalState,
+  messageId: UIMessageId,
+  attachmentId: string
+) => state.entities.messages.downloads[messageId]?.[attachmentId] ?? pot.none;
+
+export const isRequestedAttachmentDownloadSelector = (
+  state: GlobalState,
+  messageId: UIMessageId,
+  attachmentId: string
+) =>
+  isRequestedDownloadMatch(
+    state.entities.messages.downloads.requestedDownload,
+    messageId,
+    attachmentId
+  );
+
+export const isDownloadingMessageAttachmentSelector = (
+  state: GlobalState,
+  messageId: UIMessageId,
+  attachmentId: string
+) =>
+  pipe(
+    state.entities.messages.downloads[messageId],
+    O.fromNullable,
+    O.chainNullableK(messageDownloads => messageDownloads[attachmentId]),
+    O.getOrElseW(() => pot.none),
+    pot.isLoading
+  );
+
+export const hasErrorOccourredOnRequestedDownloadSelector = (
+  state: GlobalState,
+  messageId: UIMessageId,
+  attachmentId: string
+) =>
+  pipe(
+    state.entities.messages.downloads[messageId],
+    O.fromNullable,
+    O.chainNullableK(messageDownloads => messageDownloads[attachmentId]),
+    O.filter(() =>
+      isRequestedAttachmentDownloadSelector(state, messageId, attachmentId)
+    ),
+    O.getOrElseW(() => pot.none),
+    downloadPot => pot.isError(downloadPot) && !pot.isSome(downloadPot)
+  );
 
 export const downloadedMessageAttachmentSelector = (
   state: GlobalState,
   messageId: UIMessageId,
-  attachmentId: UIAttachmentId
+  attachmentId: string
 ) =>
   pipe(
     state.entities.messages.downloads[messageId],
@@ -123,3 +175,23 @@ export const downloadedMessageAttachmentSelector = (
     O.flatten,
     O.toUndefined
   );
+
+const isRequestedDownloadMatch = (
+  requestedDownload: RequestedDownload | undefined,
+  messageId: UIMessageId,
+  attachmentId: string
+) =>
+  !!requestedDownload &&
+  requestedDownload.messageId === messageId &&
+  requestedDownload.attachmentId === attachmentId;
+const requestDownloadAfterCancelledAction = (
+  state: Downloads,
+  cancelActionPayload: DownloadAttachmentCancel
+) =>
+  isRequestedDownloadMatch(
+    state.requestedDownload,
+    cancelActionPayload.messageId,
+    cancelActionPayload.attachment.id
+  )
+    ? undefined
+    : state.requestedDownload;
diff --git a/ts/features/messages/store/reducers/index.ts b/ts/features/messages/store/reducers/index.ts
index 8c31bed74a4..bd535eb4d2d 100644
--- a/ts/features/messages/store/reducers/index.ts
+++ b/ts/features/messages/store/reducers/index.ts
@@ -7,7 +7,7 @@ import { combineReducers } from "redux";
 import { Action } from "../../../../store/actions/types";
 
 import allPaginatedReducer, { AllPaginated } from "./allPaginated";
-import detailsByIdReducer, { DetailsById } from "./detailsById";
+import { DetailsById, detailsByIdReducer } from "./detailsById";
 import paginatedByIdReducer, { PaginatedById } from "./paginatedById";
 import { thirdPartyByIdReducer, ThirdPartyById } from "./thirdPartyById";
 import { Downloads, downloadsReducer } from "./downloads";
@@ -16,6 +16,7 @@ import {
   messagePreconditionReducer
 } from "./messagePrecondition";
 import { MessageGetStatus, messageGetStatusReducer } from "./messageGetStatus";
+import { MultiplePaymentState, paymentsReducer } from "./payments";
 
 export type MessagesState = Readonly<{
   allPaginated: AllPaginated;
@@ -25,6 +26,7 @@ export type MessagesState = Readonly<{
   downloads: Downloads;
   messagePrecondition: MessagePrecondition;
   messageGetStatus: MessageGetStatus;
+  payments: MultiplePaymentState;
 }>;
 
 const reducer = combineReducers<MessagesState, Action>({
@@ -34,7 +36,8 @@ const reducer = combineReducers<MessagesState, Action>({
   thirdPartyById: thirdPartyByIdReducer,
   downloads: downloadsReducer,
   messagePrecondition: messagePreconditionReducer,
-  messageGetStatus: messageGetStatusReducer
+  messageGetStatus: messageGetStatusReducer,
+  payments: paymentsReducer
 });
 
 export default reducer;
diff --git a/ts/features/messages/store/reducers/payments.ts b/ts/features/messages/store/reducers/payments.ts
new file mode 100644
index 00000000000..3044139c9e0
--- /dev/null
+++ b/ts/features/messages/store/reducers/payments.ts
@@ -0,0 +1,233 @@
+import { pipe } from "fp-ts/lib/function";
+import * as B from "fp-ts/lib/boolean";
+import * as O from "fp-ts/lib/Option";
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { getType } from "typesafe-actions";
+import { Action } from "../../../../store/actions/types";
+import { UIMessageDetails, UIMessageId } from "../../types";
+import { GlobalState } from "../../../../store/reducers/types";
+import {
+  foldK,
+  foldKW,
+  isLoading,
+  isUndefined,
+  remoteError,
+  remoteLoading,
+  remoteReady,
+  remoteUndefined,
+  RemoteValue
+} from "../../../../common/model/RemoteValue";
+import {
+  addUserSelectedPaymentRptId,
+  reloadAllMessages,
+  updatePaymentForMessage
+} from "../actions";
+import { Detail_v2Enum } from "../../../../../definitions/backend/PaymentProblemJson";
+import { PaymentRequestsGetResponse } from "../../../../../definitions/backend/PaymentRequestsGetResponse";
+import { isProfileEmailValidatedSelector } from "../../../../store/reducers/profile";
+import { isPagoPaSupportedSelector } from "../../../../common/versionInfo/store/reducers/versionInfo";
+import {
+  duplicateSetAndAdd,
+  duplicateSetAndRemove,
+  getRptIdStringFromPaymentData
+} from "../../utils";
+import { isExpiredPaymentFromDetailV2Enum } from "../../../../utils/payment";
+import {
+  messageDetailsByIdSelector,
+  messagePaymentDataSelector
+} from "./detailsById";
+
+export type MultiplePaymentState = {
+  [key: UIMessageId]: SinglePaymentState | undefined;
+  userSelectedPayments: Set<string>;
+};
+
+export type SinglePaymentState = {
+  [key: string]:
+    | RemoteValue<PaymentRequestsGetResponse, Detail_v2Enum>
+    | undefined;
+};
+
+export const initialState: MultiplePaymentState = {
+  userSelectedPayments: new Set<string>()
+};
+
+export const paymentsReducer = (
+  state: MultiplePaymentState = initialState,
+  action: Action
+): MultiplePaymentState => {
+  switch (action.type) {
+    case getType(updatePaymentForMessage.request):
+      return {
+        ...state,
+        [action.payload.messageId]: {
+          ...state[action.payload.messageId],
+          [action.payload.paymentId]: remoteLoading
+        },
+        userSelectedPayments: duplicateSetAndRemove(
+          state.userSelectedPayments,
+          action.payload.paymentId
+        )
+      };
+    case getType(updatePaymentForMessage.success):
+      return {
+        ...state,
+        [action.payload.messageId]: {
+          ...state[action.payload.messageId],
+          [action.payload.paymentId]: remoteReady(action.payload.paymentData)
+        }
+      };
+    case getType(updatePaymentForMessage.failure):
+      return {
+        ...state,
+        [action.payload.messageId]: {
+          ...state[action.payload.messageId],
+          [action.payload.paymentId]: remoteError(action.payload.details)
+        }
+      };
+    case getType(updatePaymentForMessage.cancel):
+      return action.payload.reduce<MultiplePaymentState>(
+        (previousState, queuedUpdateActionPayload) => ({
+          ...previousState,
+          [queuedUpdateActionPayload.messageId]: {
+            ...previousState[queuedUpdateActionPayload.messageId],
+            [queuedUpdateActionPayload.paymentId]: undefined
+          }
+        }),
+        state
+      );
+    case getType(addUserSelectedPaymentRptId):
+      return {
+        ...state,
+        userSelectedPayments: duplicateSetAndAdd(
+          state.userSelectedPayments,
+          action.payload.paymentId
+        )
+      };
+    case getType(reloadAllMessages.request):
+      return initialState;
+  }
+  return state;
+};
+
+const paymentStateSelector = (
+  state: GlobalState,
+  messageId: UIMessageId,
+  paymentId: string
+) =>
+  pipe(
+    state.entities.messages.payments[messageId],
+    O.fromNullable,
+    O.chainNullableK(multiplePaymentState => multiplePaymentState[paymentId]),
+    O.getOrElse<RemoteValue<PaymentRequestsGetResponse, Detail_v2Enum>>(
+      () => remoteUndefined
+    )
+  );
+
+export const shouldUpdatePaymentSelector = (
+  state: GlobalState,
+  messageId: UIMessageId,
+  paymentId: string
+) => pipe(paymentStateSelector(state, messageId, paymentId), isUndefined);
+
+export const paymentStatusForUISelector = (
+  state: GlobalState,
+  messageId: UIMessageId,
+  paymentId: string
+): RemoteValue<PaymentRequestsGetResponse, Detail_v2Enum> =>
+  pipe(paymentStateSelector(state, messageId, paymentId), remoteValue =>
+    isLoading(remoteValue) ? remoteUndefined : remoteValue
+  );
+
+export const isUserSelectedPaymentSelector = (
+  state: GlobalState,
+  rptId: string
+) => state.entities.messages.payments.userSelectedPayments.has(rptId);
+
+export const userSelectedPaymentRptIdSelector = (
+  state: GlobalState,
+  message: UIMessageDetails | undefined
+) =>
+  pipe(
+    message,
+    O.fromNullable,
+    O.chainNullableK(message => message.paymentData),
+    O.map(getRptIdStringFromPaymentData),
+    O.filter(rptId => isUserSelectedPaymentSelector(state, rptId)),
+    O.toUndefined
+  );
+
+export const canNavigateToPaymentFromMessageSelector = (state: GlobalState) =>
+  pipe(
+    state,
+    isProfileEmailValidatedSelector,
+    B.fold(
+      () => false,
+      () => pipe(state, isPagoPaSupportedSelector)
+    )
+  );
+
+export const paymentsButtonStateSelector = (
+  state: GlobalState,
+  messageId: UIMessageId
+) =>
+  pipe(
+    messagePaymentDataSelector(state, messageId),
+    O.fromNullable,
+    O.map(getRptIdStringFromPaymentData),
+    O.map(paymentId => paymentStateSelector(state, messageId, paymentId)),
+    O.map(paymentStatus =>
+      pipe(
+        paymentStatus,
+        foldK(
+          () => "loading" as const,
+          () => "loading" as const,
+          _ => "enabled" as const,
+          _ => "hidden" as const
+        )
+      )
+    ),
+    O.getOrElseW(() => "hidden" as const)
+  );
+
+export const isPaymentsButtonVisibleSelector = (
+  state: GlobalState,
+  messageId: UIMessageId
+) =>
+  pipe(
+    paymentsButtonStateSelector(state, messageId),
+    status => status !== "hidden"
+  );
+
+export const paymentExpirationBannerStateSelector = (
+  state: GlobalState,
+  messageId: UIMessageId
+) =>
+  pipe(
+    messageDetailsByIdSelector(state, messageId),
+    pot.toOption,
+    O.filter(message => !!message.dueDate),
+    O.chainNullableK(message => message.paymentData),
+    O.map(getRptIdStringFromPaymentData),
+    O.map(paymentId => paymentStateSelector(state, messageId, paymentId)),
+    O.map(paymentState =>
+      pipe(
+        paymentState,
+        foldKW(
+          () => "loading" as const,
+          () => "loading" as const,
+          _ => "visibleExpiring" as const,
+          error =>
+            pipe(
+              error,
+              isExpiredPaymentFromDetailV2Enum,
+              B.fold(
+                () => "hidden" as const,
+                () => "visibleExpired" as const
+              )
+            )
+        )
+      )
+    ),
+    O.getOrElseW(() => "hidden" as const)
+  );
diff --git a/ts/features/messages/store/reducers/thirdPartyById.ts b/ts/features/messages/store/reducers/thirdPartyById.ts
index 8eba504dd75..c88aa3d83d4 100644
--- a/ts/features/messages/store/reducers/thirdPartyById.ts
+++ b/ts/features/messages/store/reducers/thirdPartyById.ts
@@ -3,6 +3,8 @@ import { NonEmptyString } from "@pagopa/ts-commons/lib/strings";
 import { getType } from "typesafe-actions";
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
+import * as RA from "fp-ts/lib/ReadonlyArray";
+import { ThirdPartyAttachment } from "../../../../../definitions/backend/ThirdPartyAttachment";
 import { ThirdPartyMessageWithContent } from "../../../../../definitions/backend/ThirdPartyMessageWithContent";
 import { loadThirdPartyMessage, reloadAllMessages } from "../actions";
 import { Action } from "../../../../store/actions/types";
@@ -14,8 +16,7 @@ import {
 } from "../../../../store/reducers/IndexedByIdPot";
 import { GlobalState } from "../../../../store/reducers/types";
 import { RemoteContentDetails } from "../../../../../definitions/backend/RemoteContentDetails";
-import { UIAttachmentId, UIMessageDetails, UIMessageId } from "../../types";
-import { attachmentFromThirdPartyMessage } from "./transformers";
+import { UIMessageDetails, UIMessageId } from "../../types";
 
 export type ThirdPartyById = IndexedById<
   pot.Pot<ThirdPartyMessageWithContent, Error>
@@ -84,10 +85,28 @@ export const messageMarkdownSelector = (
       messageContent.markdown
   );
 
-export const thirdPartyMessageUIAttachment =
+export const hasAttachmentsSelector = (
+  state: GlobalState,
+  ioMessageId: UIMessageId
+) => pipe(thirdPartyMessageAttachments(state, ioMessageId), RA.isNonEmpty);
+
+export const thirdPartyMessageAttachments = (
+  state: GlobalState,
+  ioMessageId: UIMessageId
+): ReadonlyArray<ThirdPartyAttachment> =>
+  pipe(
+    thirdPartyFromIdSelector(state, ioMessageId),
+    pot.toOption,
+    O.chainNullableK(
+      thirdPartyMessage => thirdPartyMessage.third_party_message.attachments
+    ),
+    O.getOrElse<ReadonlyArray<ThirdPartyAttachment>>(() => [])
+  );
+
+export const thirdPartyMessageAttachment =
   (state: GlobalState) =>
   (ioMessageId: UIMessageId) =>
-  (thirdPartyMessageAttachmentId: UIAttachmentId) =>
+  (thirdPartyMessageAttachmentId: string): O.Option<ThirdPartyAttachment> =>
     pipe(
       thirdPartyFromIdSelector(state, ioMessageId),
       pot.toOption,
@@ -100,12 +119,6 @@ export const thirdPartyMessageUIAttachment =
             thirdPartyMessageAttachment.id ===
             (thirdPartyMessageAttachmentId as string as NonEmptyString)
         )
-      ),
-      O.map(thirdPartyMessageAttachment =>
-        attachmentFromThirdPartyMessage(
-          ioMessageId,
-          thirdPartyMessageAttachment
-        )
       )
     );
 
@@ -132,5 +145,12 @@ const messageContentSelector = <T>(
         )
       )
     ),
-    O.toUndefined
+    O.getOrElse(() =>
+      pipe(
+        state.entities.messages.detailsById[ioMessageId] ?? pot.none,
+        pot.toOption,
+        O.map(extractionFunction),
+        O.toUndefined
+      )
+    )
   );
diff --git a/ts/features/messages/store/reducers/transformers.ts b/ts/features/messages/store/reducers/transformers.ts
index c6a3aaabaaf..a11141fe2c8 100644
--- a/ts/features/messages/store/reducers/transformers.ts
+++ b/ts/features/messages/store/reducers/transformers.ts
@@ -1,5 +1,3 @@
-import { pipe } from "fp-ts/lib/function";
-import * as O from "fp-ts/lib/Option";
 import { CreatedMessageWithContentAndAttachments } from "../../../../../definitions/backend/CreatedMessageWithContentAndAttachments";
 import { EnrichedMessage } from "../../../../../definitions/backend/EnrichedMessage";
 import { MessageCategory } from "../../../../../definitions/backend/MessageCategory";
@@ -7,14 +5,11 @@ import { TagEnum } from "../../../../../definitions/backend/MessageCategoryBase"
 import { MessageStatusAttributes } from "../../../../../definitions/backend/MessageStatusAttributes";
 import { PublicMessage } from "../../../../../definitions/backend/PublicMessage";
 import { ThirdPartyAttachment } from "../../../../../definitions/backend/ThirdPartyAttachment";
-import { ThirdPartyMessageWithContent } from "../../../../../definitions/backend/ThirdPartyMessageWithContent";
 import { apiUrlPrefix } from "../../../../config";
 import { ContentTypeValues } from "../../types/contentType";
 import {
   EUCovidCertificate,
   PaymentData,
-  UIAttachment,
-  UIAttachmentId,
   UIMessage,
   UIMessageDetails,
   UIMessageId
@@ -107,43 +102,15 @@ export const toUIMessageDetails = (
   };
 };
 
-const generateAttachmentUrl = (messageId: string, attachmentUrl: string) =>
-  `${apiUrlPrefix}/api/v1/third-party-messages/${messageId}/attachments/${attachmentUrl.replace(
+export const attachmentDisplayName = (attachment: ThirdPartyAttachment) =>
+  attachment.name ?? attachment.id;
+export const attachmentContentType = (attachment: ThirdPartyAttachment) =>
+  attachment.content_type ?? ContentTypeValues.applicationOctetStream;
+export const attachmentDownloadUrl = (
+  messageId: UIMessageId,
+  attachment: ThirdPartyAttachment
+) =>
+  `${apiUrlPrefix}/api/v1/third-party-messages/${messageId}/attachments/${attachment.url.replace(
     /^\//g, // note that attachmentUrl might contains a / at the beginning, so let's strip it
     ""
   )}`;
-
-export const attachmentsFromThirdPartyMessage = (
-  messageFromApi: ThirdPartyMessageWithContent
-): O.Option<Array<UIAttachment>> =>
-  pipe(
-    messageFromApi.third_party_message.attachments,
-    O.fromNullable,
-    O.map(thirdPartyMessageAttachmentArray =>
-      thirdPartyMessageAttachmentArray.map(thirdPartyMessageAttachment =>
-        attachmentFromThirdPartyMessage(
-          messageFromApi.id,
-          thirdPartyMessageAttachment
-        )
-      )
-    )
-  );
-
-export const attachmentFromThirdPartyMessage = (
-  thirdPartyMessageId: string,
-  thirPartyMessageAttachment: ThirdPartyAttachment
-): UIAttachment => ({
-  messageId: thirdPartyMessageId as UIMessageId,
-  id: thirPartyMessageAttachment.id as string as UIAttachmentId,
-  displayName: thirPartyMessageAttachment.name ?? thirPartyMessageAttachment.id,
-  contentType:
-    thirPartyMessageAttachment.content_type ??
-    ContentTypeValues.applicationOctetStream,
-  resourceUrl: {
-    href: generateAttachmentUrl(
-      thirdPartyMessageId,
-      thirPartyMessageAttachment.url
-    )
-  },
-  category: thirPartyMessageAttachment.category
-});
diff --git a/ts/features/messages/types/__tests__/digitalInformationUnit.test.ts b/ts/features/messages/types/__tests__/digitalInformationUnit.test.ts
deleted file mode 100644
index 431b437bb66..00000000000
--- a/ts/features/messages/types/__tests__/digitalInformationUnit.test.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Byte, formatByte } from "../digitalInformationUnit";
-
-describe("formatDigitalInformationUnit", () => {
-  jest.useFakeTimers();
-  describe("When formatByte is called", () => {
-    describe("And the argument is < 1024", () => {
-      it("Should format using B", () => {
-        const formatted0Bytes = formatByte(0 as Byte);
-        expect(formatted0Bytes).toBe("0.00 B");
-        const formattedBytes = formatByte(125 as Byte);
-        expect(formattedBytes).toBe("125.00 B");
-        const formatted1024Bytes = formatByte(1023 as Byte);
-        expect(formatted1024Bytes).toBe("1,023.00 B");
-      });
-    });
-    describe("And the argument is 1024 <= x < 1024*1024", () => {
-      it("Should format using kB", () => {
-        const formatted = formatByte(1024 as Byte);
-        expect(formatted).toBe("1.00 kB");
-        const formattedMax = formatByte((1024 * 1024 - 1) as Byte);
-        expect(formattedMax).toBe("1,024.00 kB");
-      });
-    });
-    describe("And the argument is 1024*1024 <= x < 1024*1024*1024", () => {
-      it("Should format using MB", () => {
-        const formatted = formatByte((1024 * 1024) as Byte);
-        expect(formatted).toBe("1.00 MB");
-        const formattedMax = formatByte((1024 * 1024 * 1024 - 1) as Byte);
-        expect(formattedMax).toBe("1,024.00 MB");
-      });
-    });
-    describe("And the argument is 1024*1024*1024 <= x < 1024*1024*1024*1024", () => {
-      it("Should format using GB", () => {
-        const formatted = formatByte((1024 * 1024 * 1024) as Byte);
-        expect(formatted).toBe("1.00 GB");
-        const formattedMax = formatByte(
-          (1024 * 1024 * 1024 * 1024 - 1) as Byte
-        );
-        expect(formattedMax).toBe("1,024.00 GB");
-      });
-    });
-    describe("And the argument is 1024*1024*1024*1024 <= x", () => {
-      it("Should format using TB", () => {
-        const formatted = formatByte((1024 * 1024 * 1024 * 1024) as Byte);
-        expect(formatted).toBe("1.00 TB");
-        const formatted1 = formatByte(
-          (1024 * 1024 * 1024 * 1024 * 1024 * 1024) as Byte
-        );
-        expect(formatted1).toBe("1,048,576.00 TB");
-
-        const formatted2 = formatByte(
-          (1024 *
-            1024 *
-            1024 *
-            1024 *
-            1024 *
-            1024 *
-            1024 *
-            1024 *
-            1024 *
-            1024 *
-            1024 *
-            1024) as Byte
-        );
-        expect(formatted2).toBe("1.2089258196146292e+24 TB");
-      });
-    });
-  });
-});
diff --git a/ts/features/messages/types/digitalInformationUnit.ts b/ts/features/messages/types/digitalInformationUnit.ts
deleted file mode 100644
index 0cd7b930030..00000000000
--- a/ts/features/messages/types/digitalInformationUnit.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { IUnitTag } from "@pagopa/ts-commons/lib/units";
-import I18n from "../../../i18n";
-
-export type Byte = number & IUnitTag<"Byte">;
-export type KiloByte = number & IUnitTag<"KiloByte">;
-export type MegaByte = number & IUnitTag<"MegaByte">;
-export type GigaByte = number & IUnitTag<"GigaByte">;
-export type TeraByte = number & IUnitTag<"TeraByte">;
-
-const unitOrder = ["B", "kB", "MB", "GB", "TB"];
-
-/**
- * Generate a textual representation for a Digital Information Unit
- * @param b
- * @param startIndex the starting Digital Information Unit
- */
-const internalFormatDigitalInformationUnit = (
-  b: number,
-  startIndex: number
-) => {
-  // eslint-disable-next-line functional/no-let
-  let acc: number = b;
-  // eslint-disable-next-line functional/no-let
-  let index = startIndex;
-  while (acc >= 1024 && index < unitOrder.length - 1) {
-    acc /= 1024;
-    index++;
-  }
-  const formatRepresentation = I18n.toNumber(acc, {
-    precision: 2,
-    delimiter: I18n.t("global.localization.delimiterSeparator"),
-    separator: I18n.t("global.localization.decimalSeparator")
-  });
-
-  return `${formatRepresentation} ${unitOrder[index]}`;
-};
-
-export const formatByte = (b: Byte) =>
-  internalFormatDigitalInformationUnit(b, 0);
-
-export const formatKiloByte = (kB: KiloByte) =>
-  internalFormatDigitalInformationUnit(kB, 1);
-export const formatMegaByte = (mB: MegaByte) =>
-  internalFormatDigitalInformationUnit(mB, 2);
-export const formatGigaByte = (gB: GigaByte) =>
-  internalFormatDigitalInformationUnit(gB, 3);
-export const formatTeraByte = (tB: TeraByte) =>
-  internalFormatDigitalInformationUnit(tB, 4);
diff --git a/ts/features/messages/types/index.ts b/ts/features/messages/types/index.ts
index 7c8fd6d587a..f90227f2b8a 100644
--- a/ts/features/messages/types/index.ts
+++ b/ts/features/messages/types/index.ts
@@ -1,5 +1,4 @@
 import { IUnitTag } from "@pagopa/ts-commons/lib/units";
-import { ValidUrl } from "@pagopa/ts-commons/lib/url";
 import { CreatedMessageWithContentAndAttachments } from "../../../../definitions/backend/CreatedMessageWithContentAndAttachments";
 import { FiscalCode } from "../../../../definitions/backend/FiscalCode";
 import { MessageBodyMarkdown } from "../../../../definitions/backend/MessageBodyMarkdown";
@@ -10,7 +9,6 @@ import { PublicMessage } from "../../../../definitions/backend/PublicMessage";
 import { ServiceId } from "../../../../definitions/backend/ServiceId";
 import { TimeToLiveSeconds } from "../../../../definitions/backend/TimeToLiveSeconds";
 import { MessageCategory } from "../../../../definitions/backend/MessageCategory";
-import { Byte } from "./digitalInformationUnit";
 
 /**
  * The unique ID of a UIMessage and UIMessageDetails, used to avoid passing the wrong ID as parameters
@@ -67,35 +65,3 @@ export type PaymentData = {
   invalidAfterDueDate?: boolean;
   noticeNumber: PaymentNoticeNumber;
 };
-
-export type Attachment = {
-  name: string;
-  content: string;
-  mimeType: string;
-};
-
-export type UIAttachmentId = string & IUnitTag<"UIAttachmentId">;
-
-export type WithSkipMixpanelTrackingOnFailure<T> = T & {
-  skipMixpanelTrackingOnFailure: boolean;
-};
-
-/**
- * Represent an attachment with the metadata and resourceUrl to retrieve the attachment
- */
-export type UIAttachment = {
-  // the message ID that contains the attachment
-  messageId: UIMessageId;
-  // the ID of the attachment (only guaranteed to be unique per message)
-  id: UIAttachmentId;
-  // a display name for the file
-  displayName: string;
-  // a generic content type for a file
-  contentType: string;
-  // size (in Byte) of the attachment, for display purpose
-  size?: Byte;
-  // The url that can be used to retrieve the resource
-  resourceUrl: ValidUrl;
-  // This category is needed to distinguish between generic and f24 attachments
-  category?: string;
-};
diff --git a/ts/features/messages/utils/__tests__/index.test.ts b/ts/features/messages/utils/__tests__/index.test.ts
new file mode 100644
index 00000000000..faf0efdc523
--- /dev/null
+++ b/ts/features/messages/utils/__tests__/index.test.ts
@@ -0,0 +1,404 @@
+import { Dispatch } from "redux";
+import {
+  duplicateSetAndAdd,
+  duplicateSetAndRemove,
+  getRptIdStringFromPaymentData,
+  initializeAndNavigateToWalletForPayment
+} from "..";
+import { PaymentData, UIMessageId } from "../../types";
+import NavigationService from "../../../../navigation/NavigationService";
+import ROUTES from "../../../../navigation/routes";
+import { addUserSelectedPaymentRptId } from "../../store/actions";
+import { paymentInitializeState } from "../../../../store/actions/wallet/payment";
+import * as pnAnalytics from "../../../pn/analytics/index";
+import { PaymentAmount } from "../../../../../definitions/backend/PaymentAmount";
+
+describe("getRptIdStringFromPaymentData", () => {
+  it("should properly format the RptID", () => {
+    const fiscalCode = "01234567890";
+    const noticeNumber = "012345678912345610";
+    const paymentData = {
+      noticeNumber,
+      payee: {
+        fiscalCode
+      }
+    } as PaymentData;
+    const rptId = getRptIdStringFromPaymentData(paymentData);
+    expect(rptId).toBe(`${fiscalCode}${noticeNumber}`);
+  });
+});
+
+describe("intializeAndNavigateToWalletForPayment", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.resetAllMocks();
+  });
+  it("should call error callback on bad rptId", () => {
+    const navigateSpy = jest.spyOn(NavigationService, "navigate");
+    const paymentId = "badRptId";
+    const decodeErrorCallback = jest.fn();
+    const prenavigationCallback = jest.fn();
+    initializeAndNavigateToWalletForPayment(
+      "01HRA60BRYF6BCHF17SMXG8PP2" as UIMessageId,
+      paymentId,
+      false,
+      undefined,
+      true,
+      {} as Dispatch<any>,
+      false,
+      decodeErrorCallback,
+      prenavigationCallback
+    );
+    expect(decodeErrorCallback).toHaveBeenCalledTimes(1);
+    expect(prenavigationCallback).not.toHaveBeenCalled();
+    expect(navigateSpy).not.toHaveBeenCalled();
+  });
+  it("should call pre navigation callback on good rptId and navigate to wallet home", () => {
+    const navigateSpy = jest.spyOn(NavigationService, "navigate");
+    const paymentId = "01234567890012345678912345610";
+    const decodeErrorCallback = jest.fn();
+    const prenavigationCallback = jest.fn();
+    initializeAndNavigateToWalletForPayment(
+      "01HRA60BRYF6BCHF17SMXG8PP2" as UIMessageId,
+      paymentId,
+      false,
+      undefined,
+      false,
+      {} as Dispatch<any>,
+      false,
+      decodeErrorCallback,
+      prenavigationCallback
+    );
+    expect(decodeErrorCallback).not.toHaveBeenCalled();
+    expect(prenavigationCallback).toHaveBeenCalledTimes(1);
+    expect(navigateSpy).toHaveBeenCalledWith(ROUTES.MAIN, {
+      screen: ROUTES.WALLET_HOME,
+      params: {
+        newMethodAdded: false
+      }
+    });
+  });
+  it("should navigate to Payment Transaction Summary with default 0-amount", () => {
+    const analyticsSpy = jest
+      .spyOn(pnAnalytics, "trackPNPaymentStart")
+      .mockImplementation(() => undefined);
+    const navigateSpy = jest.spyOn(NavigationService, "navigate");
+    const organizationFiscalCode = "11111111111";
+    const auxDigit = "0";
+    const applicationCode = "22";
+    const iuv13 = "3333333333333";
+    const checkDigit = "44";
+
+    const messageId = "01HRA60BRYF6BCHF17SMXG8PP2" as UIMessageId;
+    const paymentId = `${organizationFiscalCode}${auxDigit}${applicationCode}${iuv13}${checkDigit}`;
+
+    const dispatch = jest.fn();
+    const decodeErrorCallback = jest.fn();
+    const prenavigationCallback = jest.fn();
+
+    initializeAndNavigateToWalletForPayment(
+      messageId,
+      paymentId,
+      false,
+      undefined,
+      true,
+      dispatch,
+      false,
+      decodeErrorCallback,
+      prenavigationCallback
+    );
+    expect(decodeErrorCallback).not.toHaveBeenCalled();
+    expect(prenavigationCallback).toHaveBeenCalledTimes(1);
+    expect(dispatch.mock.calls).toHaveLength(2);
+    expect(analyticsSpy).not.toHaveBeenCalled();
+    expect(dispatch.mock.calls[0][0]).toStrictEqual(
+      addUserSelectedPaymentRptId(paymentId)
+    );
+    expect(dispatch.mock.calls[1][0]).toStrictEqual(paymentInitializeState());
+    expect(navigateSpy).toHaveBeenCalledWith(ROUTES.WALLET_NAVIGATOR, {
+      screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
+      params: {
+        rptId: {
+          organizationFiscalCode,
+          paymentNoticeNumber: {
+            applicationCode,
+            auxDigit,
+            checkDigit,
+            iuv13
+          }
+        },
+        paymentStartOrigin: "message",
+        initialAmount: "0000",
+        messageId
+      }
+    });
+  });
+  it("should navigate to Payment Transaction Summary with default 0-amount and no prenavigation callback", () => {
+    const analyticsSpy = jest
+      .spyOn(pnAnalytics, "trackPNPaymentStart")
+      .mockImplementation(() => undefined);
+    const navigateSpy = jest.spyOn(NavigationService, "navigate");
+    const organizationFiscalCode = "11111111111";
+    const auxDigit = "0";
+    const applicationCode = "22";
+    const iuv13 = "3333333333333";
+    const checkDigit = "44";
+
+    const messageId = "01HRA60BRYF6BCHF17SMXG8PP2" as UIMessageId;
+    const paymentId = `${organizationFiscalCode}${auxDigit}${applicationCode}${iuv13}${checkDigit}`;
+
+    const dispatch = jest.fn();
+    const decodeErrorCallback = jest.fn();
+
+    initializeAndNavigateToWalletForPayment(
+      messageId,
+      paymentId,
+      false,
+      undefined,
+      true,
+      dispatch,
+      false,
+      decodeErrorCallback
+    );
+    expect(decodeErrorCallback).not.toHaveBeenCalled();
+    expect(dispatch.mock.calls).toHaveLength(2);
+    expect(analyticsSpy).not.toHaveBeenCalled();
+    expect(dispatch.mock.calls[0][0]).toStrictEqual(
+      addUserSelectedPaymentRptId(paymentId)
+    );
+    expect(dispatch.mock.calls[1][0]).toStrictEqual(paymentInitializeState());
+    expect(navigateSpy).toHaveBeenCalledWith(ROUTES.WALLET_NAVIGATOR, {
+      screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
+      params: {
+        rptId: {
+          organizationFiscalCode,
+          paymentNoticeNumber: {
+            applicationCode,
+            auxDigit,
+            checkDigit,
+            iuv13
+          }
+        },
+        paymentStartOrigin: "message",
+        initialAmount: "0000",
+        messageId
+      }
+    });
+  });
+  it("should navigate to Payment Transaction Summary with given amount and track PN event", () => {
+    const analyticsSpy = jest
+      .spyOn(pnAnalytics, "trackPNPaymentStart")
+      .mockImplementation(() => undefined);
+    const navigateSpy = jest.spyOn(NavigationService, "navigate");
+    const organizationFiscalCode = "11111111111";
+    const auxDigit = "0";
+    const applicationCode = "22";
+    const iuv13 = "3333333333333";
+    const checkDigit = "44";
+
+    const messageId = "01HRA60BRYF6BCHF17SMXG8PP2" as UIMessageId;
+    const paymentId = `${organizationFiscalCode}${auxDigit}${applicationCode}${iuv13}${checkDigit}`;
+    const paymentAmount = 199 as PaymentAmount;
+
+    const dispatch = jest.fn();
+    const decodeErrorCallback = jest.fn();
+    const prenavigationCallback = jest.fn();
+
+    initializeAndNavigateToWalletForPayment(
+      messageId,
+      paymentId,
+      false,
+      paymentAmount,
+      true,
+      dispatch,
+      true,
+      decodeErrorCallback,
+      prenavigationCallback
+    );
+    expect(decodeErrorCallback).not.toHaveBeenCalled();
+    expect(prenavigationCallback).toHaveBeenCalledTimes(1);
+    expect(dispatch.mock.calls).toHaveLength(2);
+    expect(analyticsSpy).toHaveBeenCalledTimes(1);
+    expect(dispatch.mock.calls[0][0]).toStrictEqual(
+      addUserSelectedPaymentRptId(paymentId)
+    );
+    expect(dispatch.mock.calls[1][0]).toStrictEqual(paymentInitializeState());
+    expect(navigateSpy).toHaveBeenCalledWith(ROUTES.WALLET_NAVIGATOR, {
+      screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
+      params: {
+        rptId: {
+          organizationFiscalCode,
+          paymentNoticeNumber: {
+            applicationCode,
+            auxDigit,
+            checkDigit,
+            iuv13
+          }
+        },
+        paymentStartOrigin: "message",
+        initialAmount: `${paymentAmount}`,
+        messageId
+      }
+    });
+  });
+  it("should navigate to Payment Transaction Summary with given amount", () => {
+    const analyticsSpy = jest
+      .spyOn(pnAnalytics, "trackPNPaymentStart")
+      .mockImplementation(() => undefined);
+    const navigateSpy = jest.spyOn(NavigationService, "navigate");
+    const organizationFiscalCode = "11111111111";
+    const auxDigit = "0";
+    const applicationCode = "22";
+    const iuv13 = "3333333333333";
+    const checkDigit = "44";
+
+    const messageId = "01HRA60BRYF6BCHF17SMXG8PP2" as UIMessageId;
+    const paymentId = `${organizationFiscalCode}${auxDigit}${applicationCode}${iuv13}${checkDigit}`;
+    const paymentAmount = 199 as PaymentAmount;
+
+    const dispatch = jest.fn();
+    const decodeErrorCallback = jest.fn();
+    const prenavigationCallback = jest.fn();
+
+    initializeAndNavigateToWalletForPayment(
+      messageId,
+      paymentId,
+      false,
+      paymentAmount,
+      true,
+      dispatch,
+      false,
+      decodeErrorCallback,
+      prenavigationCallback
+    );
+    expect(decodeErrorCallback).not.toHaveBeenCalled();
+    expect(prenavigationCallback).toHaveBeenCalledTimes(1);
+    expect(dispatch.mock.calls).toHaveLength(2);
+    expect(analyticsSpy).not.toHaveBeenCalled();
+    expect(dispatch.mock.calls[0][0]).toStrictEqual(
+      addUserSelectedPaymentRptId(paymentId)
+    );
+    expect(dispatch.mock.calls[1][0]).toStrictEqual(paymentInitializeState());
+    expect(navigateSpy).toHaveBeenCalledWith(ROUTES.WALLET_NAVIGATOR, {
+      screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
+      params: {
+        rptId: {
+          organizationFiscalCode,
+          paymentNoticeNumber: {
+            applicationCode,
+            auxDigit,
+            checkDigit,
+            iuv13
+          }
+        },
+        paymentStartOrigin: "message",
+        initialAmount: `${paymentAmount}`,
+        messageId
+      }
+    });
+  });
+  it("should navigate to Payment Transaction Summary with given amount but not dispatch an `addUserSelectedPaymentRptId`", () => {
+    const analyticsSpy = jest
+      .spyOn(pnAnalytics, "trackPNPaymentStart")
+      .mockImplementation(() => undefined);
+    const navigateSpy = jest.spyOn(NavigationService, "navigate");
+    const organizationFiscalCode = "11111111111";
+    const auxDigit = "0";
+    const applicationCode = "22";
+    const iuv13 = "3333333333333";
+    const checkDigit = "44";
+
+    const messageId = "01HRA60BRYF6BCHF17SMXG8PP2" as UIMessageId;
+    const paymentId = `${organizationFiscalCode}${auxDigit}${applicationCode}${iuv13}${checkDigit}`;
+    const paymentAmount = 199 as PaymentAmount;
+
+    const dispatch = jest.fn();
+    const decodeErrorCallback = jest.fn();
+    const prenavigationCallback = jest.fn();
+
+    initializeAndNavigateToWalletForPayment(
+      messageId,
+      paymentId,
+      true,
+      paymentAmount,
+      true,
+      dispatch,
+      false,
+      decodeErrorCallback,
+      prenavigationCallback
+    );
+    expect(decodeErrorCallback).not.toHaveBeenCalled();
+    expect(prenavigationCallback).toHaveBeenCalledTimes(1);
+    expect(dispatch.mock.calls).toHaveLength(1);
+    expect(analyticsSpy).not.toHaveBeenCalled();
+    expect(dispatch.mock.calls[0][0]).toStrictEqual(paymentInitializeState());
+    expect(navigateSpy).toHaveBeenCalledWith(ROUTES.WALLET_NAVIGATOR, {
+      screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
+      params: {
+        rptId: {
+          organizationFiscalCode,
+          paymentNoticeNumber: {
+            applicationCode,
+            auxDigit,
+            checkDigit,
+            iuv13
+          }
+        },
+        paymentStartOrigin: "message",
+        initialAmount: `${paymentAmount}`,
+        messageId
+      }
+    });
+  });
+});
+
+describe("duplicateSetAndAdd", () => {
+  it("should duplicate input set and add new item", () => {
+    const inputSet = new Set<string>();
+    const newItem = "newItem";
+    const outputSet = duplicateSetAndAdd(inputSet, newItem);
+    expect(inputSet).not.toBe(outputSet);
+    expect(inputSet.size).toBe(outputSet.size - 1);
+    expect(inputSet.has(newItem)).toBe(false);
+    expect(outputSet.has(newItem)).toBe(true);
+  });
+  it("should duplicate input set but not add an existing item", () => {
+    const inputSet = new Set<string>();
+    const existingItem = "existingItem";
+    inputSet.add(existingItem);
+    const duplicatedItem = "existingItem";
+    const outputSet = duplicateSetAndAdd(inputSet, duplicatedItem);
+    expect(inputSet).not.toBe(outputSet);
+    expect(inputSet.size).toBe(outputSet.size);
+    expect(inputSet.has(existingItem)).toBe(true);
+    expect(outputSet.has(existingItem)).toBe(true);
+    expect(inputSet.has(duplicatedItem)).toBe(true);
+    expect(outputSet.has(duplicatedItem)).toBe(true);
+  });
+});
+
+describe("duplicateSetAndRemove", () => {
+  it("should duplicate input set and remove existing item", () => {
+    const inputSet = new Set<string>();
+    const existingItem = "newItem";
+    inputSet.add(existingItem);
+    const outputSet = duplicateSetAndRemove(inputSet, existingItem);
+    expect(inputSet).not.toBe(outputSet);
+    expect(inputSet.size).toBe(outputSet.size + 1);
+    expect(inputSet.has(existingItem)).toBe(true);
+    expect(outputSet.has(existingItem)).toBe(false);
+  });
+  it("should duplicate input set and do nothing it the item does not exist", () => {
+    const inputSet = new Set<string>();
+    const existingItem = "existingItem";
+    inputSet.add(existingItem);
+    const unmatchingItem = "unmathingItem";
+    const outputSet = duplicateSetAndRemove(inputSet, unmatchingItem);
+    expect(inputSet).not.toBe(outputSet);
+    expect(inputSet.size).toBe(outputSet.size);
+    expect(inputSet.has(existingItem)).toBe(true);
+    expect(outputSet.has(existingItem)).toBe(true);
+    expect(inputSet.has(unmatchingItem)).toBe(false);
+    expect(outputSet.has(unmatchingItem)).toBe(false);
+  });
+});
diff --git a/ts/features/messages/utils/index.ts b/ts/features/messages/utils/index.ts
index 5160e625b9e..4e29b4fb26e 100644
--- a/ts/features/messages/utils/index.ts
+++ b/ts/features/messages/utils/index.ts
@@ -1,9 +1,26 @@
 import { pipe } from "fp-ts/lib/function";
-import { NetworkError, getNetworkError } from "../../../utils/errors";
-import { UIMessageDetails } from "../types";
+import * as O from "fp-ts/lib/Option";
+import * as E from "fp-ts/lib/Either";
+import {
+  AmountInEuroCents,
+  RptIdFromString
+} from "@pagopa/io-pagopa-commons/lib/pagopa";
+import { Dispatch } from "redux";
+import NavigationService from "../../../navigation/NavigationService";
+import ROUTES from "../../../navigation/routes";
+import { paymentInitializeState } from "../../../store/actions/wallet/payment";
 import { getExpireStatus } from "../../../utils/dates";
+import { PaymentData, UIMessageDetails, UIMessageId } from "../types";
+import { NetworkError, getNetworkError } from "../../../utils/errors";
+import { PaymentAmount } from "../../../../definitions/backend/PaymentAmount";
+import { getAmountFromPaymentAmount } from "../../../utils/payment";
+import { trackPNPaymentStart } from "../../pn/analytics";
+import { addUserSelectedPaymentRptId } from "../store/actions";
+import { Action } from "../../../store/actions/types";
 import { MessagePaymentExpirationInfo } from "./messages";
 
+export const gapBetweenItemsInAGrid = 8;
+
 const networkErrorToError = (networkError: NetworkError) =>
   networkError.kind === "timeout" ? new Error("timeout") : networkError.value;
 
@@ -28,3 +45,77 @@ export const getPaymentExpirationInfo = (
     kind: "UNEXPIRABLE"
   };
 };
+
+export const getRptIdStringFromPaymentData = (
+  paymentData: PaymentData
+): string => `${paymentData.payee.fiscalCode}${paymentData.noticeNumber}`;
+
+export const initializeAndNavigateToWalletForPayment = (
+  messageId: UIMessageId,
+  paymentId: string,
+  isPaidOrHasAnError: boolean,
+  paymentAmount: PaymentAmount | undefined,
+  canNavigateToPayment: boolean,
+  dispatch: Dispatch<Action>,
+  isPNPayment: boolean,
+  decodeErrorCallback: (() => void) | undefined,
+  preNavigationCallback: (() => void) | undefined = undefined
+) => {
+  const eitherRptId = RptIdFromString.decode(paymentId);
+  if (E.isLeft(eitherRptId)) {
+    decodeErrorCallback?.();
+    return;
+  }
+
+  preNavigationCallback?.();
+
+  if (!canNavigateToPayment) {
+    // Navigating to Wallet home, having the email address is not validated,
+    // it will be displayed RemindEmailValidationOverlay
+    NavigationService.navigate(ROUTES.MAIN, {
+      screen: ROUTES.WALLET_HOME,
+      params: {
+        newMethodAdded: false
+      }
+    });
+    return;
+  }
+
+  if (isPNPayment) {
+    trackPNPaymentStart();
+  }
+
+  if (!isPaidOrHasAnError) {
+    dispatch(addUserSelectedPaymentRptId(paymentId));
+  }
+  dispatch(paymentInitializeState());
+
+  const initialAmount = pipe(
+    paymentAmount,
+    O.fromNullable,
+    O.map(getAmountFromPaymentAmount),
+    O.flatten,
+    O.getOrElse(() => "0000" as AmountInEuroCents)
+  );
+
+  NavigationService.navigate(ROUTES.WALLET_NAVIGATOR, {
+    screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
+    params: {
+      rptId: eitherRptId.right,
+      paymentStartOrigin: "message",
+      initialAmount,
+      messageId
+    }
+  });
+};
+
+export const duplicateSetAndAdd = <T>(inputSet: Set<T>, item: T) => {
+  const outputSet: Set<T> = new Set<T>(inputSet);
+  return outputSet.add(item);
+};
+
+export const duplicateSetAndRemove = <T>(inputSet: Set<T>, item: T) => {
+  const outputSet: Set<T> = new Set<T>(inputSet);
+  outputSet.delete(item);
+  return outputSet;
+};
diff --git a/ts/features/messages/utils/messages.ts b/ts/features/messages/utils/messages.ts
index 4ac4b5902aa..a757bd1abe7 100644
--- a/ts/features/messages/utils/messages.ts
+++ b/ts/features/messages/utils/messages.ts
@@ -12,7 +12,6 @@ import { CreatedMessageWithContentAndAttachments } from "../../../../definitions
 import { MessageBodyMarkdown } from "../../../../definitions/backend/MessageBodyMarkdown";
 import { ServiceId } from "../../../../definitions/backend/ServiceId";
 import { ServiceMetadata } from "../../../../definitions/backend/ServiceMetadata";
-import { ServicePublic } from "../../../../definitions/backend/ServicePublic";
 import { Locales } from "../../../../locales/locales";
 import {
   deriveCustomHandledLink,
@@ -24,7 +23,6 @@ import FIMS_ROUTES from "../../fims/navigation/routes";
 import { trackMessageCTAFrontMatterDecodingError } from "../analytics";
 import { localeFallback } from "../../../i18n";
 import NavigationService from "../../../navigation/NavigationService";
-import ROUTES from "../../../navigation/routes";
 import { CTA, CTAS, MessageCTA, MessageCTALocales } from "../types/MessageCTA";
 import { getExpireStatus } from "../../../utils/dates";
 import {
@@ -33,6 +31,7 @@ import {
 } from "../../../utils/internalLink";
 import { getLocalePrimaryWithFallback } from "../../../utils/locale";
 import { isTextIncludedCaseInsensitive } from "../../../utils/strings";
+import { SERVICES_ROUTES } from "../../services/navigation/routes";
 
 export function messageContainsText(
   message: CreatedMessageWithContentAndAttachments,
@@ -70,18 +69,16 @@ export function messageNeedsCTABar(
 export const handleCtaAction = (
   cta: CTA,
   linkTo: (path: string) => void,
-  service?: ServicePublic
+  serviceId?: ServiceId
 ) => {
   if (isIoInternalLink(cta.action)) {
     const convertedLink = getInternalRoute(cta.action);
     // the service ID is specifically required for MyPortal webview usage,
     // not required for other internal screens
-    if (cta.action.indexOf(ROUTES.SERVICE_WEBVIEW) !== -1) {
+    if (cta.action.indexOf(SERVICES_ROUTES.SERVICE_WEBVIEW) !== -1) {
       handleInternalLink(
         linkTo,
-        `${convertedLink}${
-          service ? "&serviceId=" + (service.service_id as string) : ""
-        }`
+        `${convertedLink}${serviceId ? "&serviceId=" + serviceId : ""}`
       );
       return;
     }
@@ -213,7 +210,7 @@ export const getRemoteLocale = (): Extract<Locales, MessageCTALocales> =>
     E.getOrElseW(() => localeFallback.locale)
   );
 
-const extractCTA = (
+const extractCTAs = (
   text: string,
   serviceMetadata?: ServiceMetadata,
   serviceId?: ServiceId
@@ -222,24 +219,20 @@ const extractCTA = (
     text,
     FM.test,
     O.fromPredicate(identity),
-    O.chainNullableK(() => {
-      try {
-        return FM<MessageCTA>(text).attributes;
-      } catch (e) {
-        trackMessageCTAFrontMatterDecodingError(serviceId);
-        return null;
-      }
-    }),
-    O.chain(attrs =>
+    O.chain(() =>
+      pipe(
+        E.tryCatch(() => FM<MessageCTA>(text).attributes, E.toError),
+        E.mapLeft(() => trackMessageCTAFrontMatterDecodingError(serviceId)),
+        O.fromEither
+      )
+    ),
+    O.chain(attributes =>
       pipe(
-        attrs[getRemoteLocale()],
+        attributes[getRemoteLocale()],
         CTAS.decode,
-        E.fold(
-          _ => O.none,
-          // check if the decoded actions are valid
-          cta =>
-            hasCtaValidActions(cta, serviceMetadata) ? O.some(cta) : O.none
-        )
+        O.fromEither,
+        // check if the decoded actions are valid
+        O.filter(ctas => hasCtaValidActions(ctas, serviceMetadata))
       )
     )
   );
@@ -252,10 +245,10 @@ const extractCTA = (
  * @param serviceId
  */
 export const getMessageCTA = (
-  markdown: MessageBodyMarkdown,
+  markdown: MessageBodyMarkdown | string,
   serviceMetadata?: ServiceMetadata,
   serviceId?: ServiceId
-): O.Option<CTAS> => extractCTA(markdown, serviceMetadata, serviceId);
+): O.Option<CTAS> => extractCTAs(markdown, serviceMetadata, serviceId);
 
 /**
  * extract the CTAs from a string given in serviceMetadata such as the front-matter of the message
@@ -268,7 +261,7 @@ export const getServiceCTA = (
   pipe(
     serviceMetadata?.cta,
     O.fromNullable,
-    O.chain(cta => extractCTA(cta, serviceMetadata))
+    O.chain(cta => extractCTAs(cta, serviceMetadata))
   );
 
 /**
@@ -326,7 +319,9 @@ export const hasCtaValidActions = (
  * remove the cta front-matter if it is nested inside the markdown
  * @param markdown
  */
-export const cleanMarkdownFromCTAs = (markdown: MessageBodyMarkdown): string =>
+export const cleanMarkdownFromCTAs = (
+  markdown: MessageBodyMarkdown | string
+): string =>
   pipe(
     markdown,
     FM.test,
diff --git a/ts/features/newWallet/components/WalletCardBaseComponent.tsx b/ts/features/newWallet/components/WalletCardBaseComponent.tsx
new file mode 100644
index 00000000000..20ee59e95f7
--- /dev/null
+++ b/ts/features/newWallet/components/WalletCardBaseComponent.tsx
@@ -0,0 +1,40 @@
+import { WithTestID } from "@pagopa/io-app-design-system";
+import React from "react";
+import { StyleSheet, View } from "react-native";
+
+// Wallet card base component props, which declares common props that wallet cards must have
+export type WalletCardComponentBaseProps<P> = WithTestID<{
+  isStacked: boolean;
+  cardProps: P;
+}>;
+
+export const withWalletCardBaseComponent =
+  <
+    CardProps extends object,
+    ContentProps extends WalletCardComponentBaseProps<CardProps>
+  >(
+    CardContent: React.ComponentType<CardProps>
+  ) =>
+  ({ cardProps, isStacked, testID }: ContentProps) =>
+    (
+      <View
+        testID={testID}
+        style={[styles.container, isStacked && styles.containerStacked]}
+      >
+        <CardContent {...cardProps} />
+      </View>
+    );
+
+export type WalletCardBaseComponent<
+  CardProps extends object = object,
+  ContentProps extends WalletCardComponentBaseProps<CardProps> = WalletCardComponentBaseProps<CardProps>
+> = ReturnType<typeof withWalletCardBaseComponent<CardProps, ContentProps>>;
+
+const styles = StyleSheet.create({
+  container: {
+    aspectRatio: 16 / 10
+  },
+  containerStacked: {
+    aspectRatio: 16 / 3
+  }
+});
diff --git a/ts/features/newWallet/components/WalletCardSkeleton.tsx b/ts/features/newWallet/components/WalletCardSkeleton.tsx
new file mode 100644
index 00000000000..f093e99a09e
--- /dev/null
+++ b/ts/features/newWallet/components/WalletCardSkeleton.tsx
@@ -0,0 +1,60 @@
+import { IOColors, VSpacer } from "@pagopa/io-app-design-system";
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import Placeholder, { BoxProps } from "rn-placeholder";
+
+const WalletCardSkeleton = () => (
+  <View style={styleSheet.card}>
+    <View style={styleSheet.wrapper}>
+      <View style={styleSheet.paymentInfo}>
+        <View style={{ width: "60%" }}>
+          <SkeletonPlaceholder height={24} width={"100%"} />
+        </View>
+        <View style={{ width: "20%" }}>
+          <SkeletonPlaceholder height={24} width={"100%"} />
+        </View>
+      </View>
+      <View style={styleSheet.additionalInfo}>
+        <SkeletonPlaceholder height={18} width={"55%"} />
+        <VSpacer size={8} />
+        <SkeletonPlaceholder height={18} width={"45%"} />
+      </View>
+    </View>
+  </View>
+);
+
+const SkeletonPlaceholder = (props: Pick<BoxProps, "width" | "height">) => (
+  <Placeholder.Box
+    animate="fade"
+    radius={28}
+    color={IOColors["grey-200"]}
+    {...props}
+  />
+);
+
+const borderColor = "#0000001F";
+
+const styleSheet = StyleSheet.create({
+  card: {
+    aspectRatio: 16 / 10,
+    backgroundColor: IOColors["grey-100"],
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor,
+    paddingTop: 4
+  },
+  wrapper: {
+    padding: 16,
+    flex: 1,
+    justifyContent: "space-between"
+  },
+  paymentInfo: {
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  additionalInfo: {
+    justifyContent: "space-between"
+  }
+});
+
+export { WalletCardSkeleton };
diff --git a/ts/features/newWallet/components/WalletCardsCategoryContainer.tsx b/ts/features/newWallet/components/WalletCardsCategoryContainer.tsx
new file mode 100644
index 00000000000..99d4cb5c43e
--- /dev/null
+++ b/ts/features/newWallet/components/WalletCardsCategoryContainer.tsx
@@ -0,0 +1,61 @@
+import {
+  IOIcons,
+  ListItemHeader,
+  VSpacer,
+  WithTestID
+} from "@pagopa/io-app-design-system";
+import * as React from "react";
+import { View } from "react-native";
+import { WalletCard, walletCardComponentMapper } from "../types";
+
+export type WalletCategoryStackContainerProps = WithTestID<{
+  iconName: IOIcons;
+  label: string;
+  cards: ReadonlyArray<WalletCard>;
+}>;
+
+/**
+ * This component handles the rendering of cards of a specific category.
+ * The component also handles logic behind card stacking and animations
+ */
+const WalletCardsCategoryContainer = ({
+  label,
+  iconName,
+  cards,
+  testID
+}: WalletCategoryStackContainerProps) => {
+  if (cards === undefined || cards.length === 0) {
+    // If cards are not provided or are an empty array, the component should not render
+    return null;
+  }
+
+  const isStacked = cards.length > 1;
+
+  const renderCardFn = (card: WalletCard, stacked: boolean) => {
+    const Component = walletCardComponentMapper[card.type];
+    return (
+      Component && (
+        <Component
+          testID={`walletCardTestID_${card.key}`}
+          cardProps={card}
+          isStacked={stacked}
+        />
+      )
+    );
+  };
+
+  return (
+    <View testID={testID}>
+      <ListItemHeader iconName={iconName} label={label} />
+      {cards.map((card, index) => (
+        <React.Fragment key={`wallet_card_${card.key}`}>
+          {!isStacked && index !== 0 && <VSpacer size={16} />}
+          {renderCardFn(card, isStacked && index < cards.length - 1)}
+        </React.Fragment>
+      ))}
+      <VSpacer size={16} />
+    </View>
+  );
+};
+
+export { WalletCardsCategoryContainer };
diff --git a/ts/features/newWallet/components/WalletCardsContainer.tsx b/ts/features/newWallet/components/WalletCardsContainer.tsx
new file mode 100644
index 00000000000..45b857d30fd
--- /dev/null
+++ b/ts/features/newWallet/components/WalletCardsContainer.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+import { View } from "react-native";
+import I18n from "../../../i18n";
+import { useIOSelector } from "../../../store/hooks";
+import { getWalletCardsByCategorySelector } from "../store/selectors";
+import { WalletCardCategory, walletCardCategoryIcons } from "../types";
+import { WalletCardsCategoryContainer } from "./WalletCardsCategoryContainer";
+
+const WalletCardsContainer = () => {
+  const cardsByCategory = useIOSelector(getWalletCardsByCategorySelector);
+
+  return (
+    <View testID="walletCardsContainerTestID">
+      {Object.entries(cardsByCategory).map(([categoryString, cards]) => {
+        const category = categoryString as WalletCardCategory;
+
+        return (
+          <WalletCardsCategoryContainer
+            key={`cards_category_${category}`}
+            testID={`walletCardsCategoryTestID_${category}`}
+            iconName={walletCardCategoryIcons[category]}
+            label={I18n.t(`features.wallet.cards.categories.${category}`)}
+            cards={cards}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+export { WalletCardsContainer };
diff --git a/ts/features/newWallet/components/WalletEmptyScreenContent.tsx b/ts/features/newWallet/components/WalletEmptyScreenContent.tsx
new file mode 100644
index 00000000000..21499182bf8
--- /dev/null
+++ b/ts/features/newWallet/components/WalletEmptyScreenContent.tsx
@@ -0,0 +1,53 @@
+import {
+  Body,
+  ButtonSolid,
+  IOVisualCostants,
+  Pictogram,
+  VSpacer
+} from "@pagopa/io-app-design-system";
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import I18n from "../../../i18n";
+import { useIONavigation } from "../../../navigation/params/AppParamsList";
+import { WalletRoutes } from "../navigation/routes";
+
+const WalletEmptyScreenContent = () => {
+  const navigation = useIONavigation();
+
+  const handleAddToWalletButtonPress = () => {
+    navigation.navigate(WalletRoutes.WALLET_NAVIGATOR, {
+      screen: WalletRoutes.WALLET_CARD_ONBOARDING
+    });
+  };
+
+  return (
+    <View style={styles.container} testID="walletEmptyScreenContentTestID">
+      <Pictogram name="cardAdd" />
+      <VSpacer size={16} />
+      <Body color="grey-650" weight="Regular" style={styles.text}>
+        {I18n.t("features.wallet.home.emptyMessage")}
+      </Body>
+      <VSpacer size={24} />
+      <ButtonSolid
+        label={I18n.t("features.wallet.home.cta")}
+        accessibilityLabel={I18n.t("features.wallet.home.cta")}
+        onPress={handleAddToWalletButtonPress}
+        icon="addSmall"
+        iconPosition="end"
+        fullWidth={true}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: IOVisualCostants.appMarginDefault,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  text: { textAlign: "center" }
+});
+
+export { WalletEmptyScreenContent };
diff --git a/ts/features/newWallet/components/WalletPaymentsRedirectBanner.tsx b/ts/features/newWallet/components/WalletPaymentsRedirectBanner.tsx
new file mode 100644
index 00000000000..dfb23910e72
--- /dev/null
+++ b/ts/features/newWallet/components/WalletPaymentsRedirectBanner.tsx
@@ -0,0 +1,53 @@
+import { Banner, VSpacer } from "@pagopa/io-app-design-system";
+import React from "react";
+import { View } from "react-native";
+import I18n from "../../../i18n";
+import { useIONavigation } from "../../../navigation/params/AppParamsList";
+import ROUTES from "../../../navigation/routes";
+import { useIODispatch, useIOSelector } from "../../../store/hooks";
+import { walletSetPaymentsRedirectBannerVisible } from "../store/actions/preferences";
+import { isWalletPaymentsRedirectBannerVisibleSelector } from "../store/selectors";
+
+const WalletPaymentsRedirectBanner = () => {
+  const dispatch = useIODispatch();
+  const navigation = useIONavigation();
+  const bannerRef = React.createRef<View>();
+
+  const isVisible = useIOSelector(
+    isWalletPaymentsRedirectBannerVisibleSelector
+  );
+
+  const handleOnBannerPress = () => {
+    navigation.navigate(ROUTES.MAIN, {
+      screen: ROUTES.PAYMENTS_HOME
+    });
+  };
+
+  const handleOnBannerClose = () => {
+    dispatch(walletSetPaymentsRedirectBannerVisible(false));
+  };
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <>
+      <Banner
+        testID="walletPaymentsRedirectBannerTestID"
+        title={I18n.t("features.wallet.home.paymentsBanner.title")}
+        action={I18n.t("features.wallet.home.paymentsBanner.action")}
+        labelClose={I18n.t("features.wallet.home.paymentsBanner.close")}
+        color="neutral"
+        pictogramName="payments"
+        size="small"
+        viewRef={bannerRef}
+        onPress={handleOnBannerPress}
+        onClose={handleOnBannerClose}
+      />
+      <VSpacer size={16} />
+    </>
+  );
+};
+
+export { WalletPaymentsRedirectBanner };
diff --git a/ts/features/newWallet/components/__tests__/WalletCardBaseComponent.test.tsx b/ts/features/newWallet/components/__tests__/WalletCardBaseComponent.test.tsx
new file mode 100644
index 00000000000..c7067df07bf
--- /dev/null
+++ b/ts/features/newWallet/components/__tests__/WalletCardBaseComponent.test.tsx
@@ -0,0 +1,17 @@
+import { H3 } from "@pagopa/io-app-design-system";
+import { render } from "@testing-library/react-native";
+import React from "react";
+import { withWalletCardBaseComponent } from "../WalletCardBaseComponent";
+
+describe("WalletCardBaseComponent", () => {
+  it("should render the card content correctly", () => {
+    const innerComponent = () => <H3>Hello!</H3>;
+    const { queryByText } = render(
+      withWalletCardBaseComponent(innerComponent)({
+        cardProps: {},
+        isStacked: false
+      })
+    );
+    expect(queryByText("Hello!")).not.toBeNull();
+  });
+});
diff --git a/ts/features/newWallet/components/__tests__/WalletCardsCategoryContainer.test.tsx b/ts/features/newWallet/components/__tests__/WalletCardsCategoryContainer.test.tsx
new file mode 100644
index 00000000000..06dd20fbb9c
--- /dev/null
+++ b/ts/features/newWallet/components/__tests__/WalletCardsCategoryContainer.test.tsx
@@ -0,0 +1,57 @@
+import * as React from "react";
+import configureMockStore from "redux-mock-store";
+import ROUTES from "../../../../navigation/routes";
+import { applicationChangeState } from "../../../../store/actions/application";
+import { appReducer } from "../../../../store/reducers";
+import { GlobalState } from "../../../../store/reducers/types";
+import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
+import {
+  WalletCardsCategoryContainer,
+  WalletCategoryStackContainerProps
+} from "../WalletCardsCategoryContainer";
+
+describe("WalletCardsCategoryContainer", () => {
+  const T_CATEGORY_LABEL = "Category ABC";
+  const T_KEY = "12345";
+  it("should correctly render the component", () => {
+    const {
+      component: { queryByTestId, queryByText }
+    } = renderComponent({
+      cards: [
+        { key: T_KEY, type: "payment", category: "payment", walletId: "" }
+      ],
+      iconName: "bonus",
+      label: T_CATEGORY_LABEL
+    });
+    expect(queryByText(T_CATEGORY_LABEL)).not.toBeNull();
+    expect(queryByTestId(`walletCardTestID_${T_KEY}`)).not.toBeNull();
+  });
+  it("should not render the component if no cards are provided", () => {
+    const {
+      component: { queryByTestId, queryByText }
+    } = renderComponent({
+      cards: [],
+      iconName: "bonus",
+      label: T_CATEGORY_LABEL
+    });
+    expect(queryByText(T_CATEGORY_LABEL)).toBeNull();
+    expect(queryByTestId(`walletCardTestID_${T_KEY}`)).toBeNull();
+  });
+});
+
+const renderComponent = (props: WalletCategoryStackContainerProps) => {
+  const globalState = appReducer(undefined, applicationChangeState("active"));
+
+  const mockStore = configureMockStore<GlobalState>();
+  const store: ReturnType<typeof mockStore> = mockStore(globalState);
+
+  return {
+    component: renderScreenWithNavigationStoreContext<GlobalState>(
+      () => <WalletCardsCategoryContainer {...props} />,
+      ROUTES.WALLET_HOME,
+      {},
+      store
+    ),
+    store
+  };
+};
diff --git a/ts/features/newWallet/components/__tests__/WalletCardsContainer.test.tsx b/ts/features/newWallet/components/__tests__/WalletCardsContainer.test.tsx
new file mode 100644
index 00000000000..2e2a144f215
--- /dev/null
+++ b/ts/features/newWallet/components/__tests__/WalletCardsContainer.test.tsx
@@ -0,0 +1,106 @@
+import { within } from "@testing-library/react-native";
+import _ from "lodash";
+import * as React from "react";
+import configureMockStore from "redux-mock-store";
+import I18n from "../../../../i18n";
+import ROUTES from "../../../../navigation/routes";
+import { applicationChangeState } from "../../../../store/actions/application";
+import { appReducer } from "../../../../store/reducers";
+import { GlobalState } from "../../../../store/reducers/types";
+import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
+import { WalletCardsState } from "../../store/reducers/cards";
+import { WalletCardsContainer } from "../WalletCardsContainer";
+
+const T_CARDS: WalletCardsState = {
+  "1": {
+    key: "1",
+    type: "payment",
+    category: "payment",
+    walletId: ""
+  },
+  "2": {
+    key: "2",
+    type: "payment",
+    category: "payment",
+    walletId: ""
+  },
+  "3": {
+    key: "3",
+    type: "idPay",
+    category: "bonus",
+    amount: 1234,
+    avatarSource: {
+      uri: ""
+    },
+    expireDate: new Date(),
+    initiativeId: "",
+    name: "ABC"
+  }
+};
+
+describe("WalletCardsContainer", () => {
+  it("should render the cards correctly", () => {
+    const {
+      component: { queryByText, queryByTestId }
+    } = renderComponent();
+
+    expect(
+      queryByText(I18n.t(`features.wallet.cards.categories.payment`))
+    ).not.toBeNull();
+
+    const paymentCategoryComponent = queryByTestId(
+      `walletCardsCategoryTestID_payment`
+    );
+
+    if (paymentCategoryComponent) {
+      const { queryByTestId } = within(paymentCategoryComponent);
+      expect(queryByTestId(`walletCardTestID_1`)).not.toBeNull();
+      expect(queryByTestId(`walletCardTestID_2`)).not.toBeNull();
+      expect(queryByTestId(`walletCardTestID_3`)).toBeNull();
+    }
+
+    expect(
+      queryByText(I18n.t(`features.wallet.cards.categories.bonus`))
+    ).not.toBeNull();
+
+    const bonusCategoryComponent = queryByTestId(
+      `walletCardsCategoryTestID_bonus`
+    );
+
+    if (bonusCategoryComponent) {
+      const { queryByTestId } = within(bonusCategoryComponent);
+      expect(queryByTestId(`walletCardTestID_1`)).toBeNull();
+      expect(queryByTestId(`walletCardTestID_2`)).toBeNull();
+      expect(queryByTestId(`walletCardTestID_3`)).not.toBeNull();
+    }
+
+    expect(
+      queryByText(I18n.t(`features.wallet.cards.categories.cgn`))
+    ).toBeNull();
+  });
+});
+
+const renderComponent = () => {
+  const globalState = appReducer(undefined, applicationChangeState("active"));
+
+  const mockStore = configureMockStore<GlobalState>();
+  const store: ReturnType<typeof mockStore> = mockStore(
+    _.merge(globalState, {
+      features: {
+        wallet: {
+          cards: T_CARDS
+        }
+      }
+    })
+  );
+
+  return {
+    component: renderScreenWithNavigationStoreContext<GlobalState>(
+      () => <WalletCardsContainer />,
+      ROUTES.WALLET_HOME,
+      {},
+      store
+    ),
+    store
+  };
+};
diff --git a/ts/features/newWallet/components/__tests__/WalletEmptyScreenContent.test.tsx b/ts/features/newWallet/components/__tests__/WalletEmptyScreenContent.test.tsx
new file mode 100644
index 00000000000..e84410b0d56
--- /dev/null
+++ b/ts/features/newWallet/components/__tests__/WalletEmptyScreenContent.test.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+import configureMockStore from "redux-mock-store";
+import ROUTES from "../../../../navigation/routes";
+import { applicationChangeState } from "../../../../store/actions/application";
+import { appReducer } from "../../../../store/reducers";
+import { GlobalState } from "../../../../store/reducers/types";
+import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
+import { WalletEmptyScreenContent } from "../WalletEmptyScreenContent";
+
+describe("WalletEmptyScreenContent", () => {
+  it("should match the snapshot", () => {
+    const { component } = renderComponent();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderComponent = () => {
+  const globalState = appReducer(undefined, applicationChangeState("active"));
+
+  const mockStore = configureMockStore<GlobalState>();
+  const store: ReturnType<typeof mockStore> = mockStore(globalState);
+
+  return {
+    component: renderScreenWithNavigationStoreContext<GlobalState>(
+      () => <WalletEmptyScreenContent />,
+      ROUTES.WALLET_HOME,
+      {},
+      store
+    ),
+    store
+  };
+};
diff --git a/ts/features/newWallet/components/__tests__/__snapshots__/WalletEmptyScreenContent.test.tsx.snap b/ts/features/newWallet/components/__tests__/__snapshots__/WalletEmptyScreenContent.test.tsx.snap
new file mode 100644
index 00000000000..e29f2cf4500
--- /dev/null
+++ b/ts/features/newWallet/components/__tests__/__snapshots__/WalletEmptyScreenContent.test.tsx.snap
@@ -0,0 +1,739 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WalletEmptyScreenContent should match the snapshot 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  WALLET_HOME
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "alignItems": "center",
+                            "flex": 1,
+                            "justifyContent": "center",
+                            "paddingHorizontal": 24,
+                          }
+                        }
+                        testID="walletEmptyScreenContentTestID"
+                      >
+                        <RNSVGSvgView
+                          align="xMidYMid"
+                          bbHeight={120}
+                          bbWidth={120}
+                          color="#00C5CA"
+                          focusable={false}
+                          height={120}
+                          meetOrSlice={0}
+                          minX={0}
+                          minY={0}
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "borderWidth": 0,
+                              },
+                              Object {
+                                "flex": 0,
+                                "height": 120,
+                                "width": 120,
+                              },
+                            ]
+                          }
+                          tintColor="#00C5CA"
+                          vbHeight={240}
+                          vbWidth={240}
+                          width={120}
+                        >
+                          <RNSVGGroup
+                            fill={
+                              Object {
+                                "payload": 4278190080,
+                                "type": 0,
+                              }
+                            }
+                          >
+                            <RNSVGPath
+                              clipRule={0}
+                              d="M30 120C45.464 120 58 107.464 58 92C58 86.9 56.6365 82.1184 54.2541 78H128.751L129.412 81.2325L132.448 85.7159L120.935 92.9714L109.803 101.358L104.322 107.432L104.171 112.246L108.65 115.669L118.52 112.847L127.859 106.712C127.859 106.712 133.541 101.728 133.791 101.978C134.052 102.238 134.232 107.713 134.232 107.713C134.232 107.713 135.204 112.376 135.575 112.336C135.945 112.306 141.146 114.518 141.146 114.518L143.07 122.114L149.893 128.609L159.022 129.88L163.34 127.618L165.675 122.634L164.843 116.119L183 115.188V174.964C183 179.407 179.393 183 174.954 183H17.0462C12.5972 183 9 179.397 9 174.964V110.521C9.38703 110.959 9.78759 111.386 10.201 111.799C15.268 116.866 22.268 120 30 120Z"
+                              fill={
+                                Object {
+                                  "payload": 4289392367,
+                                  "type": 0,
+                                }
+                              }
+                              fillRule={0}
+                              propList={
+                                Array [
+                                  "fill",
+                                  "fillRule",
+                                ]
+                              }
+                            />
+                            <RNSVGPath
+                              d="M32 78H28V89H17V93H28V105H32V93H44V89H32V78Z"
+                              fill={
+                                Object {
+                                  "payload": 4278240714,
+                                  "type": 0,
+                                }
+                              }
+                              propList={
+                                Array [
+                                  "fill",
+                                ]
+                              }
+                            />
+                            <RNSVGPath
+                              clipRule={0}
+                              d="M15 115.647C14.3124 115.21 13.6451 114.744 13 114.25V171.576C13 175.672 16.4318 179 20.6762 179H171.324C175.559 179 179 175.681 179 171.576V116.355L161.678 117.215L164.587 123.641L161.678 129.927H156.124L147.416 128.753L142.719 122.172L140.282 117.874C140.11 117.143 139.278 116.064 139.242 116.039L139.07 115.736C139.07 115.736 135.617 113.326 135.263 113.354C134.91 113.391 133.772 109.434 133.772 109.434C133.772 109.434 133.218 107.535 132.733 106.012L132.731 106.004C132.426 105.049 132.149 104.244 132.054 104.151C131.971 104.072 131.27 104.569 130.388 105.254L130.371 105.267C128.701 106.565 126.394 108.524 126.394 108.524L117.485 114.192L108.069 116.799L117.485 114.621L127.584 110.138L127.69 110.048L127.748 109.999L127.917 109.856C128.064 109.732 128.275 109.555 128.528 109.343C129.035 108.919 129.712 108.357 130.393 107.805C130.611 107.628 130.828 107.454 131.038 107.287C131.047 107.318 131.246 107.275 131.445 107.232C131.645 107.189 131.845 107.145 131.854 107.177C131.96 107.52 131.843 107.948 131.735 108.344C131.643 108.681 131.557 108.995 131.622 109.213C131.692 109.449 131.75 109.645 131.79 109.782L131.848 109.981L131.85 109.987L131.851 109.988L131.852 109.991L131.852 109.994L131.854 110.001L131.865 110.037L131.903 110.168C131.936 110.281 131.984 110.441 132.042 110.632C132.157 111.012 132.316 111.525 132.488 112.041C132.577 112.306 132.799 112.435 133.018 112.562C133.215 112.677 133.41 112.789 133.5 113C133.59 113.21 133.71 113.472 133.856 113.707C133.924 113.816 134.054 114.015 134.253 114.208C134.335 114.287 134.662 114.601 135.185 114.742C135.201 114.751 135.26 114.744 135.332 114.736C135.55 114.712 135.887 114.674 135.5 115C135.661 115.096 135.769 115.203 135.887 115.321C136.012 115.446 136.151 115.584 136.38 115.736C136.616 115.891 137.323 115.904 137.981 115.916C138.555 115.926 139.091 115.936 139.242 116.039L140.282 117.874C140.389 118.326 140.243 118.645 139.5 118.5L141.03 123.249L147.416 129.5L155.99 131.927L162.5 131L166.786 123.651L164.587 118L177 117.5V171.576C177 174.512 174.519 177 171.324 177H20.6762C17.4745 177 15 174.506 15 171.576V115.647ZM56.8405 84H129.046L130.5 86.5L118.694 94.1538L107.835 102.075L101.964 108.376L103.804 113.376L103.796 113.637L103.939 113.743L103.804 113.376L103.939 109.19L109.168 103.578L119.789 95.8307L131.784 88.8586L130.773 82H56.1615C56.4121 82.6552 56.6388 83.3222 56.8405 84Z"
+                              fill={
+                                Object {
+                                  "payload": 4278240714,
+                                  "type": 0,
+                                }
+                              }
+                              fillRule={0}
+                              propList={
+                                Array [
+                                  "fill",
+                                  "fillRule",
+                                ]
+                              }
+                            />
+                            <RNSVGPath
+                              d="M108.86 117.92C106.37 117.92 104.05 116.68 102.67 114.5C100.97 111.84 101.13 108.49 103.07 105.98C114.57 91.05 145.16 78.31 146.46 77.78L146.73 77.69C188.93 66.99 208.32 56.11 208.51 56L210.49 59.47C209.7 59.92 190.57 70.69 147.86 81.53C145.68 82.45 116.73 94.81 106.24 108.42C105.15 109.83 105.43 111.38 106.05 112.35C106.67 113.32 107.94 114.21 109.66 113.83C118.64 111.83 131.66 105.87 142.68 88.88L146.04 91.05C134.29 109.18 120.25 115.56 110.54 117.73C109.98 117.85 109.43 117.91 108.88 117.91L108.86 117.92Z"
+                              fill={
+                                Object {
+                                  "payload": 4278927075,
+                                  "type": 0,
+                                }
+                              }
+                              propList={
+                                Array [
+                                  "fill",
+                                ]
+                              }
+                            />
+                            <RNSVGPath
+                              d="M139.07 117.01C136.19 116.44 134.08 115.02 132.82 112.79C130.25 108.27 132.38 102.11 132.48 101.85L136.25 103.18C135.79 104.48 134.92 108.39 136.31 110.82C136.99 112 138.15 112.74 139.86 113.08L139.08 117L139.07 117.01Z"
+                              fill={
+                                Object {
+                                  "payload": 4278927075,
+                                  "type": 0,
+                                }
+                              }
+                              propList={
+                                Array [
+                                  "fill",
+                                ]
+                              }
+                            />
+                            <RNSVGPath
+                              d="M156.99 132.98C152.74 132.98 147.75 130.95 143.1 126.09C139.43 122.26 137.94 118.26 138.66 114.18C140.13 105.9 150.45 100.76 150.89 100.55L152.65 104.14C152.56 104.18 143.71 108.61 142.6 114.89C142.12 117.63 143.26 120.47 145.99 123.32C152.01 129.6 158.56 130.11 161.67 127.39C164.22 125.16 163.87 121.19 160.75 117.29L163.88 114.8C169.07 121.3 167.83 127.32 164.3 130.41C162.43 132.05 159.88 132.99 156.99 132.99V132.98Z"
+                              fill={
+                                Object {
+                                  "payload": 4278927075,
+                                  "type": 0,
+                                }
+                              }
+                              propList={
+                                Array [
+                                  "fill",
+                                ]
+                              }
+                            />
+                            <RNSVGPath
+                              d="M165.2 118.63C158.65 118.63 154.44 118.19 154.15 118.15L154.58 114.17C155.04 114.22 201.36 118.92 227.78 95.63L230.42 98.63C222.39 105.71 207.41 114.77 181.67 117.7C175.4 118.41 169.73 118.63 165.19 118.63H165.2Z"
+                              fill={
+                                Object {
+                                  "payload": 4278927075,
+                                  "type": 0,
+                                }
+                              }
+                              propList={
+                                Array [
+                                  "fill",
+                                ]
+                              }
+                            />
+                            <RNSVGPath
+                              d="M132.12 87.65C131.47 87.19 125.8 83.03 126.1 78.11C126.25 75.61 127.82 73.54 130.77 71.95C140.2 66.87 170.74 70.1 172.04 70.24L171.61 74.22C163.13 73.3 139.59 71.74 132.67 75.47C131.02 76.36 130.16 77.33 130.09 78.35C129.96 80.5 132.96 83.34 134.43 84.38L132.12 87.65Z"
+                              fill={
+                                Object {
+                                  "payload": 4278927075,
+                                  "type": 0,
+                                }
+                              }
+                              propList={
+                                Array [
+                                  "fill",
+                                ]
+                              }
+                            />
+                          </RNSVGGroup>
+                        </RNSVGSvgView>
+                        <View
+                          style={
+                            Object {
+                              "height": 16,
+                            }
+                          }
+                        />
+                        <Text
+                          allowFontScaling={false}
+                          color="grey-650"
+                          defaultColor="bluegrey"
+                          defaultWeight="Regular"
+                          font="TitilliumWeb"
+                          fontStyle={
+                            Object {
+                              "fontSize": 16,
+                              "lineHeight": 24,
+                            }
+                          }
+                          style={
+                            Array [
+                              Object {
+                                "textAlign": "center",
+                              },
+                              Object {
+                                "fontSize": 16,
+                                "lineHeight": 24,
+                              },
+                              Object {
+                                "color": "#636B82",
+                                "fontFamily": "Titillium Web",
+                                "fontStyle": "normal",
+                                "fontWeight": "400",
+                              },
+                            ]
+                          }
+                          weight="Regular"
+                        >
+                          Custodisci qui i tuoi metodi di pagamento, Carta Giovani Nazionale, bonus e sconti.
+                        </Text>
+                        <View
+                          style={
+                            Object {
+                              "height": 24,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityLabel="Aggiungi al Portafoglio"
+                          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
+                            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
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                  },
+                                  Object {
+                                    "flexDirection": "row-reverse",
+                                  },
+                                ]
+                              }
+                            >
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={20}
+                                bbWidth={20}
+                                focusable={false}
+                                height={20}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#FFFFFF",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 20,
+                                      "width": 20,
+                                    },
+                                  ]
+                                }
+                                tintColor="#FFFFFF"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={20}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M12.9999 6C12.9999 5.44772 12.5522 5 11.9999 5C11.4477 5 10.9999 5.44772 10.9999 6V11L6.00098 11C5.44869 11 5.00098 11.4477 5.00098 12C5.00098 12.5523 5.44869 13 6.00098 13L10.9999 13V18.0008C10.9999 18.553 11.4477 19.0008 11.9999 19.0008C12.5522 19.0008 12.9999 18.553 12.9999 18.0008V13L17.9998 13C18.5521 13 18.9998 12.5523 18.9998 12C18.9998 11.4477 18.5521 11 17.9998 11L12.9999 11V6Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                              <View
+                                style={
+                                  Object {
+                                    "width": 8,
+                                  }
+                                }
+                              />
+                              <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"
+                              >
+                                Aggiungi al Portafoglio
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/newWallet/navigation/index.tsx b/ts/features/newWallet/navigation/index.tsx
new file mode 100644
index 00000000000..3cff2cc2992
--- /dev/null
+++ b/ts/features/newWallet/navigation/index.tsx
@@ -0,0 +1,20 @@
+import { createStackNavigator } from "@react-navigation/stack";
+import React from "react";
+import { isGestureEnabled } from "../../../utils/navigation";
+import { WalletCardOnboardingScreen } from "../screens/WalletCardOnboardingScreen";
+import { WalletRoutes } from "./routes";
+import { WalletParamsList } from "./params";
+
+const Stack = createStackNavigator<WalletParamsList>();
+
+export const WalletNavigator = () => (
+  <Stack.Navigator
+    initialRouteName={WalletRoutes.WALLET_CARD_ONBOARDING}
+    screenOptions={{ gestureEnabled: isGestureEnabled }}
+  >
+    <Stack.Screen
+      name={WalletRoutes.WALLET_CARD_ONBOARDING}
+      component={WalletCardOnboardingScreen}
+    />
+  </Stack.Navigator>
+);
diff --git a/ts/features/newWallet/navigation/params.ts b/ts/features/newWallet/navigation/params.ts
new file mode 100644
index 00000000000..21663dab293
--- /dev/null
+++ b/ts/features/newWallet/navigation/params.ts
@@ -0,0 +1,5 @@
+import { WalletRoutes } from "./routes";
+
+export type WalletParamsList = {
+  [WalletRoutes.WALLET_CARD_ONBOARDING]: undefined;
+};
diff --git a/ts/features/newWallet/navigation/routes.ts b/ts/features/newWallet/navigation/routes.ts
new file mode 100644
index 00000000000..e44018bc7a6
--- /dev/null
+++ b/ts/features/newWallet/navigation/routes.ts
@@ -0,0 +1,6 @@
+// TODO remove `NEW_` prefix after legacy wallet removal
+// The prefix is to make the route name unique across all navigation routes
+export const WalletRoutes = {
+  WALLET_NAVIGATOR: "NEW_WALLET_NAVIGATOR",
+  WALLET_CARD_ONBOARDING: "NEW_WALLET_CARD_ONBOARDING"
+} as const;
diff --git a/ts/features/newWallet/screens/WalletCardOnboardingScreen.tsx b/ts/features/newWallet/screens/WalletCardOnboardingScreen.tsx
new file mode 100644
index 00000000000..0b9c3c2bc4a
--- /dev/null
+++ b/ts/features/newWallet/screens/WalletCardOnboardingScreen.tsx
@@ -0,0 +1,83 @@
+import {
+  ContentWrapper,
+  ModuleCredential,
+  VSpacer
+} from "@pagopa/io-app-design-system";
+import React from "react";
+import cgnLogo from "../../../../img/bonus/cgn/cgn_logo.png";
+import { RNavScreenWithLargeHeader } from "../../../components/ui/RNavScreenWithLargeHeader";
+import I18n from "../../../i18n";
+import { useIONavigation } from "../../../navigation/params/AppParamsList";
+import { useIODispatch, useIOSelector } from "../../../store/hooks";
+import { isIdPayEnabledSelector } from "../../../store/reducers/backendStatus";
+import { emptyContextualHelp } from "../../../utils/emptyContextualHelp";
+import { cgnActivationStart } from "../../bonus/cgn/store/actions/activation";
+import { isCgnInformationAvailableSelector } from "../../bonus/cgn/store/reducers/details";
+import { PaymentsOnboardingRoutes } from "../../payments/onboarding/navigation/routes";
+import { loadAvailableBonuses } from "../../bonus/common/store/actions/availableBonusesTypes";
+
+const WalletCardOnboardingScreen = () => {
+  const dispatch = useIODispatch();
+  const navigation = useIONavigation();
+
+  const isIdPayEnabled = useIOSelector(isIdPayEnabledSelector);
+  const isCgnAlreadyActive = useIOSelector(isCgnInformationAvailableSelector);
+
+  const startCgnActiviation = () => {
+    dispatch(loadAvailableBonuses.request());
+    dispatch(cgnActivationStart());
+  };
+
+  const navigateToInitiativesList = () => {
+    // TODO add navigation to welfare initiatives list
+  };
+
+  const navigateToPaymentMethodOnboarding = () => {
+    navigation.navigate(PaymentsOnboardingRoutes.PAYMENT_ONBOARDING_NAVIGATOR, {
+      screen: PaymentsOnboardingRoutes.PAYMENT_ONBOARDING_SELECT_METHOD
+    });
+  };
+
+  return (
+    <RNavScreenWithLargeHeader
+      title={{
+        label: I18n.t("features.wallet.onboarding.title")
+      }}
+      contextualHelp={emptyContextualHelp}
+      faqCategories={["wallet", "wallet_methods"]}
+      headerActionsProp={{ showHelp: true }}
+    >
+      <ContentWrapper>
+        <VSpacer size={24} />
+        <ModuleCredential
+          image={cgnLogo}
+          label={I18n.t("features.wallet.onboarding.options.cgn")}
+          onPress={!isCgnAlreadyActive ? startCgnActiviation : undefined}
+          badge={
+            isCgnAlreadyActive
+              ? { variant: "success", text: "già presente" }
+              : undefined
+          }
+        />
+        <VSpacer size={8} />
+        {isIdPayEnabled && (
+          <>
+            <ModuleCredential
+              icon="bonus"
+              label={I18n.t("features.wallet.onboarding.options.welfare")}
+              onPress={navigateToInitiativesList}
+            />
+            <VSpacer size={8} />
+          </>
+        )}
+        <ModuleCredential
+          icon="creditCard"
+          label={I18n.t("features.wallet.onboarding.options.payments")}
+          onPress={navigateToPaymentMethodOnboarding}
+        />
+      </ContentWrapper>
+    </RNavScreenWithLargeHeader>
+  );
+};
+
+export { WalletCardOnboardingScreen };
diff --git a/ts/features/newWallet/screens/WalletHomeScreen.tsx b/ts/features/newWallet/screens/WalletHomeScreen.tsx
new file mode 100644
index 00000000000..240874b761b
--- /dev/null
+++ b/ts/features/newWallet/screens/WalletHomeScreen.tsx
@@ -0,0 +1,93 @@
+import {
+  ContentWrapper,
+  GradientScrollView,
+  IOStyles,
+  IOToast
+} from "@pagopa/io-app-design-system";
+import { useFocusEffect } from "@react-navigation/native";
+import React from "react";
+import { ScrollView } from "react-native";
+import Animated, { Layout } from "react-native-reanimated";
+import I18n from "../../../i18n";
+import {
+  IOStackNavigationRouteProps,
+  useIONavigation
+} from "../../../navigation/params/AppParamsList";
+import { MainTabParamsList } from "../../../navigation/params/MainTabParamsList";
+import { useIODispatch, useIOSelector } from "../../../store/hooks";
+import { cgnDetails } from "../../bonus/cgn/store/actions/details";
+import { idPayWalletGet } from "../../idpay/wallet/store/actions";
+import { getPaymentsWalletUserMethods } from "../../payments/wallet/store/actions";
+import { WalletCardsContainer } from "../components/WalletCardsContainer";
+import { WalletEmptyScreenContent } from "../components/WalletEmptyScreenContent";
+import { WalletPaymentsRedirectBanner } from "../components/WalletPaymentsRedirectBanner";
+import { WalletRoutes } from "../navigation/routes";
+import { selectWalletCards } from "../store/selectors";
+
+type Props = IOStackNavigationRouteProps<MainTabParamsList, "WALLET_HOME">;
+
+const WalletHomeScreen = ({ route }: Props) => {
+  const dispatch = useIODispatch();
+  const navigation = useIONavigation();
+
+  const cards = useIOSelector(selectWalletCards);
+  const isNewElementAdded = React.useRef(route.params?.newMethodAdded || false);
+
+  const handleAddToWalletButtonPress = () => {
+    navigation.navigate(WalletRoutes.WALLET_NAVIGATOR, {
+      screen: WalletRoutes.WALLET_CARD_ONBOARDING
+    });
+  };
+
+  React.useEffect(() => {
+    // TODO SIW-960 Move cards request to app startup
+    dispatch(getPaymentsWalletUserMethods.request());
+    dispatch(idPayWalletGet.request());
+    dispatch(cgnDetails.request());
+  }, [dispatch]);
+
+  // Handles the "New element added" toast display once the user returns to this screen
+  useFocusEffect(
+    React.useCallback(() => {
+      if (isNewElementAdded.current) {
+        IOToast.success(I18n.t("features.wallet.home.toast.newMethod"));
+        // eslint-disable-next-line functional/immutable-data
+        isNewElementAdded.current = false;
+      }
+    }, [isNewElementAdded])
+  );
+
+  if (cards.length === 0) {
+    return (
+      <ScrollView contentContainerStyle={IOStyles.flex}>
+        <ContentWrapper>
+          <WalletPaymentsRedirectBanner />
+        </ContentWrapper>
+        <Animated.View style={IOStyles.flex} layout={Layout.duration(200)}>
+          <WalletEmptyScreenContent />
+        </Animated.View>
+      </ScrollView>
+    );
+  }
+
+  return (
+    <GradientScrollView
+      primaryActionProps={{
+        testID: "walletAddCardButtonTestID",
+        label: I18n.t("features.wallet.home.cta"),
+        accessibilityLabel: I18n.t("features.wallet.home.cta"),
+        icon: "addSmall",
+        iconPosition: "end",
+        onPress: handleAddToWalletButtonPress
+      }}
+      excludeSafeAreaMargins={true}
+    >
+      <WalletPaymentsRedirectBanner />
+      <Animated.View style={IOStyles.flex} layout={Layout.duration(200)}>
+        <WalletCardsContainer />
+      </Animated.View>
+    </GradientScrollView>
+  );
+};
+
+export { WalletHomeScreen };
diff --git a/ts/features/newWallet/screens/__tests__/WalletHomeScreen.test.tsx b/ts/features/newWallet/screens/__tests__/WalletHomeScreen.test.tsx
new file mode 100644
index 00000000000..4d6022fae37
--- /dev/null
+++ b/ts/features/newWallet/screens/__tests__/WalletHomeScreen.test.tsx
@@ -0,0 +1,125 @@
+import _ from "lodash";
+import configureMockStore from "redux-mock-store";
+import ROUTES from "../../../../navigation/routes";
+import { applicationChangeState } from "../../../../store/actions/application";
+import { appReducer } from "../../../../store/reducers";
+import { GlobalState } from "../../../../store/reducers/types";
+import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
+import { WalletCardsState } from "../../store/reducers/cards";
+import { WalletHomeScreen } from "../WalletHomeScreen";
+
+jest.mock("react-native-reanimated", () => ({
+  ...require("react-native-reanimated/mock"),
+  Layout: {
+    duration: jest.fn()
+  }
+}));
+
+const T_CARDS: WalletCardsState = {
+  "1": {
+    key: "1",
+    type: "payment",
+    category: "payment",
+    walletId: ""
+  },
+  "2": {
+    key: "2",
+    type: "payment",
+    category: "payment",
+    walletId: ""
+  },
+  "3": {
+    key: "3",
+    type: "idPay",
+    category: "bonus",
+    amount: 1234,
+    avatarSource: {
+      uri: ""
+    },
+    expireDate: new Date(),
+    initiativeId: "",
+    name: "ABC"
+  }
+};
+
+describe("WalletHomeScreen", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.runAllTimers();
+  });
+
+  it("should correctly render empty screen with redirect banner", () => {
+    const {
+      component: { queryByTestId }
+    } = renderComponent({}, true);
+
+    expect(queryByTestId("walletPaymentsRedirectBannerTestID")).not.toBeNull();
+    expect(queryByTestId("walletEmptyScreenContentTestID")).not.toBeNull();
+    expect(queryByTestId("walletCardsContainerTestID")).toBeNull();
+    expect(queryByTestId("walletAddCardButtonTestID")).toBeNull();
+  });
+
+  it("should correctly render empty screen without redirect banner", () => {
+    const {
+      component: { queryByTestId }
+    } = renderComponent({}, false);
+
+    expect(queryByTestId("walletPaymentsRedirectBannerTestID")).toBeNull();
+    expect(queryByTestId("walletEmptyScreenContentTestID")).not.toBeNull();
+    expect(queryByTestId("walletCardsContainerTestID")).toBeNull();
+    expect(queryByTestId("walletAddCardButtonTestID")).toBeNull();
+  });
+
+  it("should correctly render card list screen with redirect banner", () => {
+    const {
+      component: { queryByTestId }
+    } = renderComponent(T_CARDS, true);
+
+    expect(queryByTestId("walletPaymentsRedirectBannerTestID")).not.toBeNull();
+    expect(queryByTestId("walletEmptyScreenContentTestID")).toBeNull();
+    expect(queryByTestId("walletCardsContainerTestID")).not.toBeNull();
+    expect(queryByTestId("walletAddCardButtonTestID")).not.toBeNull();
+  });
+
+  it("should correctly render card list  screen without redirect banner", () => {
+    const {
+      component: { queryByTestId }
+    } = renderComponent(T_CARDS, false);
+
+    expect(queryByTestId("walletPaymentsRedirectBannerTestID")).toBeNull();
+    expect(queryByTestId("walletEmptyScreenContentTestID")).toBeNull();
+    expect(queryByTestId("walletCardsContainerTestID")).not.toBeNull();
+    expect(queryByTestId("walletAddCardButtonTestID")).not.toBeNull();
+  });
+});
+
+const renderComponent = (
+  cards: WalletCardsState,
+  shouldShowPaymentsRedirectBanner: boolean
+) => {
+  const globalState = appReducer(undefined, applicationChangeState("active"));
+
+  const mockStore = configureMockStore<GlobalState>();
+  const store: ReturnType<typeof mockStore> = mockStore(
+    _.merge(globalState, {
+      features: {
+        wallet: {
+          cards,
+          preferences: {
+            shouldShowPaymentsRedirectBanner
+          }
+        }
+      }
+    })
+  );
+
+  return {
+    component: renderScreenWithNavigationStoreContext<GlobalState>(
+      WalletHomeScreen,
+      ROUTES.WALLET_HOME,
+      {},
+      store
+    ),
+    store
+  };
+};
diff --git a/ts/features/newWallet/store/__tests__/cards.test.ts b/ts/features/newWallet/store/__tests__/cards.test.ts
new file mode 100644
index 00000000000..6f0e2bbf3d4
--- /dev/null
+++ b/ts/features/newWallet/store/__tests__/cards.test.ts
@@ -0,0 +1,181 @@
+import { createStore } from "redux";
+import { applicationChangeState } from "../../../../store/actions/application";
+import { appReducer } from "../../../../store/reducers";
+import { WalletCard } from "../../types";
+import {
+  walletAddCards,
+  walletRemoveCards,
+  walletUpsertCard
+} from "../actions/cards";
+import {
+  getWalletCardsCategorySelector,
+  selectWalletCards
+} from "../selectors";
+
+const T_CARD_1: WalletCard = {
+  category: "bonus",
+  key: "1234",
+  type: "idPay",
+  amount: 123,
+  avatarSource: {
+    uri: ""
+  },
+  expireDate: new Date(),
+  initiativeId: "123",
+  name: "Test"
+};
+const T_CARD_2: WalletCard = {
+  category: "payment",
+  key: "9999",
+  type: "payment",
+  walletId: ""
+};
+const T_CARD_3: WalletCard = {
+  category: "payment",
+  key: "4444",
+  type: "payment",
+  walletId: ""
+};
+
+describe("Wallet store", () => {
+  describe("reducer", () => {
+    it("should start with initial state", () => {
+      const globalState = appReducer(
+        undefined,
+        applicationChangeState("active")
+      );
+      expect(globalState.features.wallet.cards).toStrictEqual({});
+    });
+
+    it("should add cards to the store", () => {
+      const globalState = appReducer(
+        undefined,
+        applicationChangeState("active")
+      );
+      expect(globalState.features.wallet.cards).toStrictEqual({});
+
+      const store = createStore(appReducer, globalState as any);
+
+      store.dispatch(walletAddCards([T_CARD_1, T_CARD_2]));
+
+      expect(store.getState().features.wallet.cards).toEqual({
+        [T_CARD_1.key]: T_CARD_1,
+        [T_CARD_2.key]: T_CARD_2
+      });
+    });
+
+    it("should update a specific card in the store", () => {
+      const globalState = appReducer(
+        undefined,
+        applicationChangeState("active")
+      );
+      expect(globalState.features.wallet.cards).toStrictEqual({});
+
+      const store = createStore(appReducer, globalState as any);
+
+      store.dispatch(walletAddCards([T_CARD_1]));
+
+      expect(store.getState().features.wallet.cards).toStrictEqual({
+        [T_CARD_1.key]: T_CARD_1
+      });
+
+      store.dispatch(walletUpsertCard({ ...T_CARD_1, type: "cgn" }));
+
+      expect(store.getState().features.wallet.cards).toStrictEqual({
+        [T_CARD_1.key]: { ...T_CARD_1, type: "cgn" }
+      });
+    });
+
+    it("should add a card in the store if not present another with the same key", () => {
+      const globalState = appReducer(
+        undefined,
+        applicationChangeState("active")
+      );
+      expect(globalState.features.wallet.cards).toStrictEqual({});
+
+      const store = createStore(appReducer, globalState as any);
+
+      store.dispatch(walletAddCards([T_CARD_1]));
+
+      expect(store.getState().features.wallet.cards).toStrictEqual({
+        [T_CARD_1.key]: T_CARD_1
+      });
+
+      store.dispatch(walletUpsertCard(T_CARD_2));
+
+      expect(store.getState().features.wallet.cards).toStrictEqual({
+        [T_CARD_1.key]: T_CARD_1,
+        [T_CARD_2.key]: T_CARD_2
+      });
+    });
+
+    it("should remove cards from the store", () => {
+      const globalState = appReducer(
+        undefined,
+        applicationChangeState("active")
+      );
+      expect(globalState.features.wallet.cards).toStrictEqual({});
+
+      const store = createStore(appReducer, globalState as any);
+
+      store.dispatch(walletAddCards([T_CARD_1, T_CARD_2, T_CARD_3]));
+
+      expect(store.getState().features.wallet.cards).toStrictEqual({
+        [T_CARD_1.key]: T_CARD_1,
+        [T_CARD_2.key]: T_CARD_2,
+        [T_CARD_3.key]: T_CARD_3
+      });
+
+      store.dispatch(walletRemoveCards([T_CARD_1.key, T_CARD_3.key]));
+
+      expect(store.getState().features.wallet.cards).toStrictEqual({
+        [T_CARD_2.key]: T_CARD_2
+      });
+    });
+  });
+  describe("selectors", () => {
+    it("should get all the cards from the wallet", () => {
+      const globalState = appReducer(
+        undefined,
+        applicationChangeState("active")
+      );
+      expect(globalState.features.wallet.cards).toStrictEqual({});
+
+      const store = createStore(appReducer, globalState as any);
+
+      store.dispatch(walletAddCards([T_CARD_1, T_CARD_2, T_CARD_3]));
+
+      expect(store.getState().features.wallet.cards).toStrictEqual({
+        [T_CARD_1.key]: T_CARD_1,
+        [T_CARD_2.key]: T_CARD_2,
+        [T_CARD_3.key]: T_CARD_3
+      });
+
+      expect(selectWalletCards(store.getState())).toEqual(
+        expect.arrayContaining([T_CARD_1, T_CARD_2, T_CARD_3])
+      );
+    });
+
+    it("should get all wallet cards for a specific category", () => {
+      const globalState = appReducer(
+        undefined,
+        applicationChangeState("active")
+      );
+      expect(globalState.features.wallet.cards).toStrictEqual({});
+
+      const store = createStore(appReducer, globalState as any);
+
+      store.dispatch(walletAddCards([T_CARD_1, T_CARD_2, T_CARD_3]));
+
+      expect(store.getState().features.wallet.cards).toStrictEqual({
+        [T_CARD_1.key]: T_CARD_1,
+        [T_CARD_2.key]: T_CARD_2,
+        [T_CARD_3.key]: T_CARD_3
+      });
+
+      expect(
+        getWalletCardsCategorySelector("payment")(store.getState())
+      ).toStrictEqual(expect.arrayContaining([T_CARD_2, T_CARD_3]));
+    });
+  });
+});
diff --git a/ts/features/newWallet/store/actions/cards.ts b/ts/features/newWallet/store/actions/cards.ts
new file mode 100644
index 00000000000..cf35a89b1e7
--- /dev/null
+++ b/ts/features/newWallet/store/actions/cards.ts
@@ -0,0 +1,17 @@
+import { ActionType, createStandardAction } from "typesafe-actions";
+import { WalletCard } from "../../types";
+
+export const walletUpsertCard =
+  createStandardAction("WALLET_UPSERT_CARD")<WalletCard>();
+
+export const walletAddCards =
+  createStandardAction("WALLET_ADD_CARDS")<ReadonlyArray<WalletCard>>();
+
+export const walletRemoveCards = createStandardAction("WALLET_REMOVE_CARDS")<
+  ReadonlyArray<WalletCard["key"]>
+>();
+
+export type WalletCardsActions =
+  | ActionType<typeof walletUpsertCard>
+  | ActionType<typeof walletAddCards>
+  | ActionType<typeof walletRemoveCards>;
diff --git a/ts/features/newWallet/store/actions/index.ts b/ts/features/newWallet/store/actions/index.ts
new file mode 100644
index 00000000000..59b3e917924
--- /dev/null
+++ b/ts/features/newWallet/store/actions/index.ts
@@ -0,0 +1,4 @@
+import { WalletCardsActions } from "./cards";
+import { WalletPreferencesActions } from "./preferences";
+
+export type WalletActions = WalletCardsActions | WalletPreferencesActions;
diff --git a/ts/features/newWallet/store/actions/preferences.ts b/ts/features/newWallet/store/actions/preferences.ts
new file mode 100644
index 00000000000..fa138ba95c3
--- /dev/null
+++ b/ts/features/newWallet/store/actions/preferences.ts
@@ -0,0 +1,9 @@
+import { ActionType, createStandardAction } from "typesafe-actions";
+
+export const walletSetPaymentsRedirectBannerVisible = createStandardAction(
+  "WALLET_SET_PAYMENTS_REDIRECT_BANNER_VISIBLE"
+)<boolean>();
+
+export type WalletPreferencesActions = ActionType<
+  typeof walletSetPaymentsRedirectBannerVisible
+>;
diff --git a/ts/features/newWallet/store/reducers/cards.ts b/ts/features/newWallet/store/reducers/cards.ts
new file mode 100644
index 00000000000..6e7d7da2478
--- /dev/null
+++ b/ts/features/newWallet/store/reducers/cards.ts
@@ -0,0 +1,44 @@
+import { getType } from "typesafe-actions";
+import { Action } from "../../../../store/actions/types";
+import { WalletCard } from "../../types";
+import {
+  walletAddCards,
+  walletRemoveCards,
+  walletUpsertCard
+} from "../actions/cards";
+
+export type WalletCardsState = { [key: string]: WalletCard };
+
+const INITIAL_STATE: WalletCardsState = {};
+
+const reducer = (
+  state: WalletCardsState = INITIAL_STATE,
+  action: Action
+): WalletCardsState => {
+  switch (action.type) {
+    case getType(walletUpsertCard):
+      return {
+        ...state,
+        [action.payload.key]: action.payload
+      };
+
+    case getType(walletAddCards): {
+      return action.payload.reduce(
+        (obj, card) => ({
+          ...obj,
+          [card.key]: card
+        }),
+        state
+      );
+    }
+
+    case getType(walletRemoveCards): {
+      return Object.fromEntries(
+        Object.entries(state).filter(([key]) => !action.payload.includes(key))
+      );
+    }
+  }
+  return state;
+};
+
+export default reducer;
diff --git a/ts/features/newWallet/store/reducers/index.ts b/ts/features/newWallet/store/reducers/index.ts
new file mode 100644
index 00000000000..b54430b23fe
--- /dev/null
+++ b/ts/features/newWallet/store/reducers/index.ts
@@ -0,0 +1,16 @@
+import { combineReducers } from "redux";
+import { PersistPartial } from "redux-persist";
+import preferencesPersistor, { WalletPreferencesState } from "./preferences";
+import cardsReducer, { WalletCardsState } from "./cards";
+
+export type WalletState = {
+  cards: WalletCardsState;
+  preferences: WalletPreferencesState & PersistPartial;
+};
+
+const walletReducer = combineReducers({
+  cards: cardsReducer,
+  preferences: preferencesPersistor
+});
+
+export default walletReducer;
diff --git a/ts/features/newWallet/store/reducers/preferences.ts b/ts/features/newWallet/store/reducers/preferences.ts
new file mode 100644
index 00000000000..ab12cdf5f49
--- /dev/null
+++ b/ts/features/newWallet/store/reducers/preferences.ts
@@ -0,0 +1,43 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { PersistConfig, persistReducer } from "redux-persist";
+import { getType } from "typesafe-actions";
+import { Action } from "../../../../store/actions/types";
+import { walletSetPaymentsRedirectBannerVisible } from "../actions/preferences";
+
+export type WalletPreferencesState = {
+  shouldShowPaymentsRedirectBanner: boolean;
+};
+
+const INITIAL_STATE: WalletPreferencesState = {
+  shouldShowPaymentsRedirectBanner: true
+};
+
+const reducer = (
+  state: WalletPreferencesState = INITIAL_STATE,
+  action: Action
+): WalletPreferencesState => {
+  switch (action.type) {
+    case getType(walletSetPaymentsRedirectBannerVisible):
+      return {
+        ...state,
+        shouldShowPaymentsRedirectBanner: action.payload
+      };
+  }
+  return state;
+};
+
+const CURRENT_REDUX_WALLET_PREFERENCES_STORE_VERSION = -1;
+
+const persistConfig: PersistConfig = {
+  key: "walletPreferences",
+  storage: AsyncStorage,
+  version: CURRENT_REDUX_WALLET_PREFERENCES_STORE_VERSION,
+  whitelist: ["shouldShowPaymentsRedirectBanner"]
+};
+
+export const walletReducerPersistor = persistReducer<
+  WalletPreferencesState,
+  Action
+>(persistConfig, reducer);
+
+export default walletReducerPersistor;
diff --git a/ts/features/newWallet/store/selectors/index.ts b/ts/features/newWallet/store/selectors/index.ts
new file mode 100644
index 00000000000..45fdcf2c0d1
--- /dev/null
+++ b/ts/features/newWallet/store/selectors/index.ts
@@ -0,0 +1,32 @@
+import { createSelector } from "reselect";
+import { GlobalState } from "../../../../store/reducers/types";
+import { WalletCard, WalletCardCategory } from "../../types";
+
+const selectWalletFeature = (state: GlobalState) => state.features.wallet;
+
+export const isWalletPaymentsRedirectBannerVisibleSelector = createSelector(
+  selectWalletFeature,
+  wallet => wallet.preferences.shouldShowPaymentsRedirectBanner
+);
+
+export const selectWalletCards = createSelector(selectWalletFeature, wallet =>
+  Object.values(wallet.cards)
+);
+
+export const getWalletCardsByCategorySelector = createSelector(
+  selectWalletCards,
+  cards =>
+    cards.reduce(
+      (acc, card) => ({
+        ...acc,
+        [card.category]: [...(acc[card.category] || []), card]
+      }),
+      {} as { [category in WalletCardCategory]: ReadonlyArray<WalletCard> }
+    )
+);
+
+export const getWalletCardsCategorySelector = (category: WalletCardCategory) =>
+  createSelector(
+    getWalletCardsByCategorySelector,
+    cardsByCategory => cardsByCategory[category]
+  );
diff --git a/ts/features/newWallet/types/index.ts b/ts/features/newWallet/types/index.ts
new file mode 100644
index 00000000000..eb90436738d
--- /dev/null
+++ b/ts/features/newWallet/types/index.ts
@@ -0,0 +1,71 @@
+import { IOIcons } from "@pagopa/io-app-design-system";
+import {
+  IdPayWalletCard,
+  IdPayWalletCardProps
+} from "../../idpay/wallet/components/IdPayWalletCard";
+import {
+  PaymentWalletCard,
+  PaymentWalletCardProps
+} from "../../payments/wallet/components/PaymentWalletCard";
+import { WalletCardBaseComponent } from "../components/WalletCardBaseComponent";
+import {
+  CgnWalletCard,
+  CgnWalletCardProps
+} from "../../bonus/cgn/components/CgnWalletCard";
+
+// Used to group the cards in the wallet.
+export type WalletCardCategory = "itw" | "cgn" | "bonus" | "payment";
+
+// Basic type definition for a wallet card, describes the properties that
+// each card MUST have in order to be placed inside the wallet.
+type WalletCardBase = {
+  key: string;
+  category: WalletCardCategory;
+};
+
+// Specific type for ID Pay bonus cards
+export type WalletCardBonus = {
+  type: "idPay";
+} & IdPayWalletCardProps;
+
+// Specific type for CGN bonus cards
+export type WalletCardCgn = {
+  type: "cgn";
+} & CgnWalletCardProps;
+
+// Specific type for payment cards
+export type WalletCardPayment = {
+  type: "payment";
+} & PaymentWalletCardProps;
+
+// Base WalletCard type, which includes all card types
+export type WalletCard = WalletCardBase &
+  (WalletCardBonus | WalletCardCgn | WalletCardPayment);
+
+// Used to map the card to the specific component that will render the card.
+export type WalletCardType = WalletCard["type"];
+
+/**
+ * Wallet card component mapper which translates a WalletCardType to a
+ * component to be rendered inside the wallet.
+ * Component MUST be a WalletCardBaseComponent, which can be created
+ * using {@see withWalletCardBaseComponent} HOC
+ */
+export const walletCardComponentMapper: Record<
+  WalletCardType,
+  WalletCardBaseComponent<any> | undefined
+> = {
+  cgn: CgnWalletCard,
+  idPay: IdPayWalletCard,
+  payment: PaymentWalletCard
+};
+
+/**
+ * Icons used for each wallet card category
+ */
+export const walletCardCategoryIcons: Record<WalletCardCategory, IOIcons> = {
+  bonus: "bonus",
+  payment: "creditCard",
+  itw: "fiscalCodeIndividual",
+  cgn: "bonus"
+};
diff --git a/ts/features/walletV3/barcode/components/PaymentNoticeListItem.tsx b/ts/features/payments/barcode/components/PaymentNoticeListItem.tsx
similarity index 100%
rename from ts/features/walletV3/barcode/components/PaymentNoticeListItem.tsx
rename to ts/features/payments/barcode/components/PaymentNoticeListItem.tsx
diff --git a/ts/features/payments/barcode/navigation/navigator.tsx b/ts/features/payments/barcode/navigation/navigator.tsx
new file mode 100644
index 00000000000..c797d6e0556
--- /dev/null
+++ b/ts/features/payments/barcode/navigation/navigator.tsx
@@ -0,0 +1,47 @@
+import { ParamListBase } from "@react-navigation/native";
+import {
+  createStackNavigator,
+  StackNavigationProp,
+  TransitionPresets
+} from "@react-navigation/stack";
+import React from "react";
+import { isGestureEnabled } from "../../../../utils/navigation";
+import { PaymentsBarcodeChoiceScreen } from "../screens/PaymentsBarcodeChoiceScreen";
+import { PaymentsBarcodeScanScreen } from "../screens/PaymentsBarcodeScanScreen";
+import { PaymentsBarcodeParamsList } from "./params";
+import { PaymentsBarcodeRoutes } from "./routes";
+
+const Stack = createStackNavigator<PaymentsBarcodeParamsList>();
+
+export const WalletBarcodeNavigator = () => (
+  <Stack.Navigator
+    initialRouteName={PaymentsBarcodeRoutes.PAYMENT_BARCODE_SCAN}
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerShown: false }}
+  >
+    <Stack.Screen
+      name={PaymentsBarcodeRoutes.PAYMENT_BARCODE_SCAN}
+      component={PaymentsBarcodeScanScreen}
+      options={{
+        ...TransitionPresets.ModalSlideFromBottomIOS,
+        gestureEnabled: isGestureEnabled
+      }}
+    />
+    <Stack.Screen
+      name={PaymentsBarcodeRoutes.PAYMENT_BARCODE_CHOICE}
+      component={PaymentsBarcodeChoiceScreen}
+      options={{
+        gestureEnabled: isGestureEnabled
+      }}
+    />
+  </Stack.Navigator>
+);
+
+export type PaymentsBarcodeStackNavigationProp<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = string
+> = StackNavigationProp<PaymentsBarcodeParamsList & ParamList, RouteName>;
+
+export type PaymentsBarcodeStackNavigation = PaymentsBarcodeStackNavigationProp<
+  PaymentsBarcodeParamsList,
+  keyof PaymentsBarcodeParamsList
+>;
diff --git a/ts/features/payments/barcode/navigation/params.ts b/ts/features/payments/barcode/navigation/params.ts
new file mode 100644
index 00000000000..661b5629a3e
--- /dev/null
+++ b/ts/features/payments/barcode/navigation/params.ts
@@ -0,0 +1,8 @@
+import { PaymentsBarcodeChoiceScreenParams } from "../screens/PaymentsBarcodeChoiceScreen";
+import { PaymentsBarcodeRoutes } from "./routes";
+
+export type PaymentsBarcodeParamsList = {
+  [PaymentsBarcodeRoutes.PAYMENT_BARCODE_NAVIGATOR]: undefined;
+  [PaymentsBarcodeRoutes.PAYMENT_BARCODE_SCAN]: undefined;
+  [PaymentsBarcodeRoutes.PAYMENT_BARCODE_CHOICE]: PaymentsBarcodeChoiceScreenParams;
+};
diff --git a/ts/features/payments/barcode/navigation/routes.ts b/ts/features/payments/barcode/navigation/routes.ts
new file mode 100644
index 00000000000..7a415926cdd
--- /dev/null
+++ b/ts/features/payments/barcode/navigation/routes.ts
@@ -0,0 +1,5 @@
+export const PaymentsBarcodeRoutes = {
+  PAYMENT_BARCODE_NAVIGATOR: "PAYMENT_BARCODE_NAVIGATOR",
+  PAYMENT_BARCODE_SCAN: "PAYMENT_BARCODE_SCAN",
+  PAYMENT_BARCODE_CHOICE: "PAYMENT_BARCODE_CHOICE"
+} as const;
diff --git a/ts/features/walletV3/barcode/screens/WalletBarcodeChoiceScreen.tsx b/ts/features/payments/barcode/screens/PaymentsBarcodeChoiceScreen.tsx
similarity index 76%
rename from ts/features/walletV3/barcode/screens/WalletBarcodeChoiceScreen.tsx
rename to ts/features/payments/barcode/screens/PaymentsBarcodeChoiceScreen.tsx
index 46576c8b5ea..06fbd849435 100644
--- a/ts/features/walletV3/barcode/screens/WalletBarcodeChoiceScreen.tsx
+++ b/ts/features/payments/barcode/screens/PaymentsBarcodeChoiceScreen.tsx
@@ -31,10 +31,11 @@ import {
 import { useIODispatch } from "../../../../store/hooks";
 import * as analytics from "../../../barcode/analytics";
 import { PagoPaBarcode } from "../../../barcode/types/IOBarcode";
+import { usePagoPaPayment } from "../../checkout/hooks/usePagoPaPayment";
 import { PaymentNoticeListItem } from "../components/PaymentNoticeListItem";
-import { WalletBarcodeParamsList } from "../navigation/params";
+import { PaymentsBarcodeParamsList } from "../navigation/params";
 
-type WalletBarcodeChoiceScreenParams = {
+type PaymentsBarcodeChoiceScreenParams = {
   barcodes: Array<PagoPaBarcode>;
 };
 
@@ -43,10 +44,13 @@ const sortByAmount = pipe(
   contramap((p: PagoPaBarcode) => parseFloat(p.amount))
 );
 
-const WalletBarcodeChoiceScreen = () => {
+const PaymentsBarcodeChoiceScreen = () => {
   const dispatch = useIODispatch();
   const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
 
+  const { startPaymentFlowWithRptId, isNewWalletSectionEnabled } =
+    usePagoPaPayment();
+
   useFocusEffect(
     React.useCallback(() => {
       analytics.trackBarcodeMultipleCodesScreenView();
@@ -54,7 +58,7 @@ const WalletBarcodeChoiceScreen = () => {
   );
 
   const route =
-    useRoute<RouteProp<WalletBarcodeParamsList, "WALLET_BARCODE_CHOICE">>();
+    useRoute<RouteProp<PaymentsBarcodeParamsList, "PAYMENT_BARCODE_CHOICE">>();
 
   const { barcodes } = route.params;
 
@@ -65,15 +69,19 @@ const WalletBarcodeChoiceScreen = () => {
         : "qrcode_scan";
     analytics.trackBarcodeMultipleCodesSelection();
 
-    dispatch(paymentInitializeState());
-    navigation.navigate(ROUTES.WALLET_NAVIGATOR, {
-      screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
-      params: {
-        initialAmount: barcode.amount,
-        rptId: barcode.rptId,
-        paymentStartOrigin
-      }
-    });
+    if (isNewWalletSectionEnabled) {
+      startPaymentFlowWithRptId(barcode.rptId);
+    } else {
+      dispatch(paymentInitializeState());
+      navigation.navigate(ROUTES.WALLET_NAVIGATOR, {
+        screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
+        params: {
+          initialAmount: barcode.amount,
+          rptId: barcode.rptId,
+          paymentStartOrigin
+        }
+      });
+    }
   };
 
   const renderBarcodeItem = (barcode: PagoPaBarcode) => {
@@ -111,5 +119,5 @@ const WalletBarcodeChoiceScreen = () => {
   );
 };
 
-export { WalletBarcodeChoiceScreen };
-export type { WalletBarcodeChoiceScreenParams };
+export { PaymentsBarcodeChoiceScreen };
+export type { PaymentsBarcodeChoiceScreenParams };
diff --git a/ts/features/walletV3/barcode/screens/WalletBarcodeScanScreen.tsx b/ts/features/payments/barcode/screens/PaymentsBarcodeScanScreen.tsx
similarity index 71%
rename from ts/features/walletV3/barcode/screens/WalletBarcodeScanScreen.tsx
rename to ts/features/payments/barcode/screens/PaymentsBarcodeScanScreen.tsx
index 1eede4ddfe2..0b5d79d64da 100644
--- a/ts/features/walletV3/barcode/screens/WalletBarcodeScanScreen.tsx
+++ b/ts/features/payments/barcode/screens/PaymentsBarcodeScanScreen.tsx
@@ -1,3 +1,4 @@
+import { IOToast } from "@pagopa/io-app-design-system";
 import { useNavigation } from "@react-navigation/native";
 import * as A from "fp-ts/lib/Array";
 import { pipe } from "fp-ts/lib/function";
@@ -5,7 +6,6 @@ import * as React from "react";
 import ReactNativeHapticFeedback, {
   HapticFeedbackTypes
 } from "react-native-haptic-feedback";
-import { IOToast } from "../../../../components/Toast";
 import { ContextualHelpPropsMarkdown } from "../../../../components/screens/BaseScreenComponent";
 import I18n from "../../../../i18n";
 import { mixpanelTrack } from "../../../../mixpanel";
@@ -32,15 +32,16 @@ import {
   IO_BARCODE_ALL_FORMATS,
   PagoPaBarcode
 } from "../../../barcode/types/IOBarcode";
-import { WalletPaymentRoutes } from "../../payment/navigation/routes";
-import { WalletBarcodeRoutes } from "../navigation/routes";
+import { usePagoPaPayment } from "../../checkout/hooks/usePagoPaPayment";
+import { PaymentsCheckoutRoutes } from "../../checkout/navigation/routes";
+import { PaymentsBarcodeRoutes } from "../navigation/routes";
 
 const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
   title: "wallet.QRtoPay.contextualHelpTitle",
   body: "wallet.QRtoPay.contextualHelpContent"
 };
 
-const WalletBarcodeScanScreen = () => {
+const PaymentsBarcodeScanScreen = () => {
   const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
   const dispatch = useIODispatch();
   const { dataMatrixPosteEnabled } = useIOSelector(
@@ -48,6 +49,9 @@ const WalletBarcodeScanScreen = () => {
   );
   const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector);
 
+  const { startPaymentFlowWithRptId, isNewWalletSectionEnabled } =
+    usePagoPaPayment();
+
   const barcodeFormats: Array<IOBarcodeFormat> = IO_BARCODE_ALL_FORMATS.filter(
     format => (format === "DATA_MATRIX" ? dataMatrixPosteEnabled : true)
   );
@@ -77,8 +81,8 @@ const WalletBarcodeScanScreen = () => {
     }
 
     if (pagoPaBarcodes.length > 1) {
-      navigation.navigate(WalletBarcodeRoutes.WALLET_BARCODE_MAIN, {
-        screen: WalletBarcodeRoutes.WALLET_BARCODE_CHOICE,
+      navigation.navigate(PaymentsBarcodeRoutes.PAYMENT_BARCODE_NAVIGATOR, {
+        screen: PaymentsBarcodeRoutes.PAYMENT_BARCODE_CHOICE,
         params: {
           barcodes: pagoPaBarcodes
         }
@@ -89,31 +93,34 @@ const WalletBarcodeScanScreen = () => {
     const barcode = pagoPaBarcodes[0];
 
     if (barcode.type === "PAGOPA") {
-      dispatch(paymentInitializeState());
-
-      switch (barcode.format) {
-        case "QR_CODE":
-          navigation.navigate(ROUTES.WALLET_NAVIGATOR, {
-            screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
-            params: {
-              initialAmount: barcode.amount,
-              rptId: barcode.rptId,
-              paymentStartOrigin: "qrcode_scan"
-            }
-          });
-          break;
-        case "DATA_MATRIX":
-          void mixpanelTrack("WALLET_SCAN_POSTE_DATAMATRIX_SUCCESS");
-          navigation.navigate(ROUTES.WALLET_NAVIGATOR, {
-            screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
-            params: {
-              initialAmount: barcode.amount,
-              rptId: barcode.rptId,
-              paymentStartOrigin: "poste_datamatrix_scan"
-            }
-          });
-
-          break;
+      if (isNewWalletSectionEnabled) {
+        startPaymentFlowWithRptId(barcode.rptId);
+      } else {
+        dispatch(paymentInitializeState());
+        switch (barcode.format) {
+          case "QR_CODE":
+            navigation.navigate(ROUTES.WALLET_NAVIGATOR, {
+              screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
+              params: {
+                initialAmount: barcode.amount,
+                rptId: barcode.rptId,
+                paymentStartOrigin: "qrcode_scan"
+              }
+            });
+            break;
+          case "DATA_MATRIX":
+            void mixpanelTrack("WALLET_SCAN_POSTE_DATAMATRIX_SUCCESS");
+            navigation.navigate(ROUTES.WALLET_NAVIGATOR, {
+              screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
+              params: {
+                initialAmount: barcode.amount,
+                rptId: barcode.rptId,
+                paymentStartOrigin: "poste_datamatrix_scan"
+              }
+            });
+
+            break;
+        }
       }
     }
   };
@@ -133,8 +140,8 @@ const WalletBarcodeScanScreen = () => {
     analytics.trackBarcodeManualEntryPath("avviso");
 
     if (isDesignSystemEnabled) {
-      navigation.navigate(WalletPaymentRoutes.WALLET_PAYMENT_MAIN, {
-        screen: WalletPaymentRoutes.WALLET_PAYMENT_INPUT_NOTICE_NUMBER
+      navigation.navigate(PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR, {
+        screen: PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_INPUT_NOTICE_NUMBER
       });
     } else {
       navigation.navigate(ROUTES.WALLET_NAVIGATOR, {
@@ -177,4 +184,4 @@ const WalletBarcodeScanScreen = () => {
   );
 };
 
-export { WalletBarcodeScanScreen };
+export { PaymentsBarcodeScanScreen };
diff --git a/ts/features/walletV3/payment/components/WalletPaymentConfirmContent.tsx b/ts/features/payments/checkout/components/WalletPaymentConfirmContent.tsx
similarity index 75%
rename from ts/features/walletV3/payment/components/WalletPaymentConfirmContent.tsx
rename to ts/features/payments/checkout/components/WalletPaymentConfirmContent.tsx
index 456914c71e8..9c62585a7ca 100644
--- a/ts/features/walletV3/payment/components/WalletPaymentConfirmContent.tsx
+++ b/ts/features/payments/checkout/components/WalletPaymentConfirmContent.tsx
@@ -1,3 +1,4 @@
+import * as pot from "@pagopa/ts-commons/lib/pot";
 import {
   Body,
   GradientScrollView,
@@ -7,24 +8,21 @@ import {
   VSpacer
 } from "@pagopa/io-app-design-system";
 import { openAuthenticationSession } from "@pagopa/io-react-native-login-utils";
-import { useNavigation } from "@react-navigation/native";
 import React from "react";
 import { Bundle } from "../../../../../definitions/pagopa/ecommerce/Bundle";
 import { PaymentRequestsGetResponse } from "../../../../../definitions/pagopa/ecommerce/PaymentRequestsGetResponse";
 import I18n from "../../../../i18n";
-import {
-  AppParamsList,
-  IOStackNavigationProp
-} from "../../../../navigation/params/AppParamsList";
-import { format } from "../../../../utils/dates";
+import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { formatNumberCentsToAmount } from "../../../../utils/stringBuilder";
 import { capitalize } from "../../../../utils/strings";
 import {
   WALLET_PAYMENT_TERMS_AND_CONDITIONS_URL,
   getPaymentLogo
 } from "../../common/utils";
-import { UIWalletInfoDetails } from "../../details/types/UIWalletInfoDetails";
-import { WalletPaymentRoutes } from "../navigation/routes";
+import { WalletPaymentStepEnum } from "../types";
+import { UIWalletInfoDetails } from "../../common/types/UIWalletInfoDetails";
+import { walletPaymentSetCurrentStep } from "../store/actions/orchestration";
+import { walletPaymentPspListSelector } from "../store/selectors";
 import { WalletPaymentTotalAmount } from "./WalletPaymentTotalAmount";
 
 export type WalletPaymentConfirmContentProps = {
@@ -42,7 +40,11 @@ export const WalletPaymentConfirmContent = ({
   isLoading,
   onConfirm
 }: WalletPaymentConfirmContentProps) => {
-  const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
+  const dispatch = useIODispatch();
+
+  const pspListPot = useIOSelector(walletPaymentPspListSelector);
+
+  const pspList = pot.getOrElse(pspListPot, []);
 
   const taxFee = selectedPsp.taxPayerFee ?? 0;
 
@@ -77,9 +79,11 @@ export const WalletPaymentConfirmContent = ({
         title={getPaymentTitle(paymentMethodDetails)}
         subtitle={getPaymentSubtitle(paymentMethodDetails)}
         onPress={() =>
-          navigation.navigate(WalletPaymentRoutes.WALLET_PAYMENT_MAIN, {
-            screen: WalletPaymentRoutes.WALLET_PAYMENT_PICK_METHOD
-          })
+          dispatch(
+            walletPaymentSetCurrentStep(
+              WalletPaymentStepEnum.PICK_PAYMENT_METHOD
+            )
+          )
         }
       />
       <VSpacer size={24} />
@@ -89,15 +93,15 @@ export const WalletPaymentConfirmContent = ({
         iconName="psp"
       />
       <ModuleCheckout
-        ctaText={I18n.t("payment.confirm.editButton")}
+        ctaText={
+          pspList.length > 1 ? I18n.t("payment.confirm.editButton") : undefined
+        }
         title={formatNumberCentsToAmount(taxFee, true, "right")}
         subtitle={`${I18n.t("payment.confirm.feeAppliedBy")} ${
           selectedPsp.bundleName
         }`}
         onPress={() =>
-          navigation.navigate(WalletPaymentRoutes.WALLET_PAYMENT_MAIN, {
-            screen: WalletPaymentRoutes.WALLET_PAYMENT_PICK_PSP
-          })
+          dispatch(walletPaymentSetCurrentStep(WalletPaymentStepEnum.PICK_PSP))
         }
       />
       <VSpacer size={24} />
@@ -120,21 +124,20 @@ export const WalletPaymentConfirmContent = ({
   );
 };
 
-const getPaymentSubtitle = (details: UIWalletInfoDetails): string => {
-  if (details.maskedPan !== undefined) {
-    return `${format(details.expiryDate, "MM/YY")}`;
-  } else if (details.maskedEmail !== undefined) {
+const getPaymentSubtitle = (
+  details: UIWalletInfoDetails
+): string | undefined => {
+  if (details.maskedEmail !== undefined) {
     return I18n.t("wallet.onboarding.paypal.name");
   } else if (details.maskedNumber !== undefined) {
     return `${details.bankName}`;
   }
-
-  return "";
+  return undefined;
 };
 
 const getPaymentTitle = (details: UIWalletInfoDetails): string => {
-  if (details.maskedPan !== undefined) {
-    return `${capitalize(details.brand || "")} ••${details.maskedPan}`;
+  if (details.lastFourDigits !== undefined) {
+    return `${capitalize(details.brand || "")} ••${details.lastFourDigits}`;
   } else if (details.maskedEmail !== undefined) {
     return `${details.maskedEmail}`;
   } else if (details.maskedNumber !== undefined) {
diff --git a/ts/features/walletV3/payment/components/WalletPaymentFailureDetail.tsx b/ts/features/payments/checkout/components/WalletPaymentFailureDetail.tsx
similarity index 98%
rename from ts/features/walletV3/payment/components/WalletPaymentFailureDetail.tsx
rename to ts/features/payments/checkout/components/WalletPaymentFailureDetail.tsx
index 288590467c6..8e0c21a706f 100644
--- a/ts/features/walletV3/payment/components/WalletPaymentFailureDetail.tsx
+++ b/ts/features/payments/checkout/components/WalletPaymentFailureDetail.tsx
@@ -12,7 +12,7 @@ import {
   IOStackNavigationProp
 } from "../../../../navigation/params/AppParamsList";
 import { usePaymentFailureSupportModal } from "../hooks/usePaymentFailureSupportModal";
-import { WalletPaymentFailure } from "../types/failure";
+import { WalletPaymentFailure } from "../types/WalletPaymentFailure";
 
 type Props = {
   failure: WalletPaymentFailure;
diff --git a/ts/features/walletV3/payment/components/WalletPaymentFeedbackBanner.tsx b/ts/features/payments/checkout/components/WalletPaymentFeedbackBanner.tsx
similarity index 92%
rename from ts/features/walletV3/payment/components/WalletPaymentFeedbackBanner.tsx
rename to ts/features/payments/checkout/components/WalletPaymentFeedbackBanner.tsx
index 3bd7baf454f..f8e0f0f885e 100644
--- a/ts/features/walletV3/payment/components/WalletPaymentFeedbackBanner.tsx
+++ b/ts/features/payments/checkout/components/WalletPaymentFeedbackBanner.tsx
@@ -17,6 +17,9 @@ const WalletPaymentFeebackBanner = () => {
     return openAuthenticationSession(WALLET_PAYMENT_FEEDBACK_URL, "");
   };
 
+  // This banner is temporarily disabled. Remove the next line to re-enable it
+  return null;
+
   return (
     <>
       <VSpacer size={24} />
diff --git a/ts/features/payments/checkout/components/WalletPaymentHeader.tsx b/ts/features/payments/checkout/components/WalletPaymentHeader.tsx
new file mode 100644
index 00000000000..4b166ade0d1
--- /dev/null
+++ b/ts/features/payments/checkout/components/WalletPaymentHeader.tsx
@@ -0,0 +1,86 @@
+import {
+  ActionProp,
+  HeaderSecondLevel,
+  Stepper,
+  VSpacer
+} from "@pagopa/io-app-design-system";
+import * as pot from "@pagopa/ts-commons/lib/pot";
+
+import React from "react";
+import { useStartSupportRequest } from "../../../../hooks/useStartSupportRequest";
+import I18n from "../../../../i18n";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { useIODispatch, useIOSelector } from "../../../../store/hooks";
+import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
+import { useWalletPaymentGoBackHandler } from "../hooks/useWalletPaymentGoBackHandler";
+import { walletPaymentSetCurrentStep } from "../store/actions/orchestration";
+import { useHardwareBackButton } from "../../../../hooks/useHardwareBackButton";
+import { WALLET_PAYMENT_STEP_MAX } from "../store/reducers";
+import { walletPaymentPspListSelector } from "../store/selectors";
+import { paymentsResetPaymentPspList } from "../store/actions/networking";
+import { WalletPaymentStepEnum } from "../types";
+
+type WalletPaymentHeaderProps = {
+  currentStep: number;
+};
+
+const WalletPaymentHeader = ({ currentStep }: WalletPaymentHeaderProps) => {
+  const navigation = useIONavigation();
+  const dispatch = useIODispatch();
+  const goBackHandler = useWalletPaymentGoBackHandler();
+
+  const pspListPot = useIOSelector(walletPaymentPspListSelector);
+  const pspList = pot.getOrElse(pspListPot, []);
+
+  const startSupportRequest = useStartSupportRequest({
+    faqCategories: ["payment"],
+    contextualHelp: emptyContextualHelp
+  });
+
+  const handleGoBack = React.useCallback(() => {
+    if (currentStep === WalletPaymentStepEnum.PICK_PAYMENT_METHOD) {
+      // If we are in the first step, if the goBackHandler is defined (payment was started)
+      // call it, otherwise use the default navigation goBack function
+      return (goBackHandler || navigation.goBack)();
+    } else if (
+      currentStep === WalletPaymentStepEnum.CONFIRM_TRANSACTION &&
+      pspList.length === 1
+    ) {
+      // If we are in the last step, if there is one PSP go back to the method selection
+      dispatch(
+        walletPaymentSetCurrentStep(WalletPaymentStepEnum.PICK_PAYMENT_METHOD)
+      );
+      dispatch(paymentsResetPaymentPspList());
+    } else {
+      // For any other step just go back 1 step
+      dispatch(walletPaymentSetCurrentStep(currentStep - 1));
+    }
+  }, [navigation, dispatch, goBackHandler, currentStep, pspList]);
+
+  useHardwareBackButton(() => {
+    handleGoBack();
+    return true;
+  });
+
+  return (
+    <>
+      <HeaderSecondLevel
+        title=""
+        type="singleAction"
+        goBack={handleGoBack}
+        backAccessibilityLabel={I18n.t("global.buttons.back")}
+        firstAction={{
+          icon: "help" as ActionProp["icon"],
+          onPress: startSupportRequest,
+          accessibilityLabel: I18n.t(
+            "global.accessibility.contextualHelp.open.label"
+          )
+        }}
+      />
+      <Stepper steps={WALLET_PAYMENT_STEP_MAX} currentStep={currentStep} />
+      <VSpacer size={16} />
+    </>
+  );
+};
+
+export { WalletPaymentHeader };
diff --git a/ts/features/walletV3/payment/components/WalletPaymentMissingMethodsError.tsx b/ts/features/payments/checkout/components/WalletPaymentMissingMethodsError.tsx
similarity index 87%
rename from ts/features/walletV3/payment/components/WalletPaymentMissingMethodsError.tsx
rename to ts/features/payments/checkout/components/WalletPaymentMissingMethodsError.tsx
index 6d49a16aab2..05498557365 100644
--- a/ts/features/walletV3/payment/components/WalletPaymentMissingMethodsError.tsx
+++ b/ts/features/payments/checkout/components/WalletPaymentMissingMethodsError.tsx
@@ -5,8 +5,8 @@ import {
   AppParamsList,
   IOStackNavigationProp
 } from "../../../../navigation/params/AppParamsList";
-import { WalletOnboardingRoutes } from "../../onboarding/navigation/navigator";
 import I18n from "../../../../i18n";
+import { PaymentsOnboardingRoutes } from "../../onboarding/navigation/routes";
 
 const WalletPaymentMissingMethodsError = () => {
   const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
@@ -19,8 +19,8 @@ const WalletPaymentMissingMethodsError = () => {
   }, [navigation]);
 
   const handleAddMethod = () => {
-    navigation.push(WalletOnboardingRoutes.WALLET_ONBOARDING_MAIN, {
-      screen: WalletOnboardingRoutes.WALLET_ONBOARDING_SELECT_PAYMENT_METHOD
+    navigation.push(PaymentsOnboardingRoutes.PAYMENT_ONBOARDING_NAVIGATOR, {
+      screen: PaymentsOnboardingRoutes.PAYMENT_ONBOARDING_SELECT_METHOD
     });
   };
 
diff --git a/ts/features/walletV3/payment/components/WalletPaymentTotalAmount.tsx b/ts/features/payments/checkout/components/WalletPaymentTotalAmount.tsx
similarity index 100%
rename from ts/features/walletV3/payment/components/WalletPaymentTotalAmount.tsx
rename to ts/features/payments/checkout/components/WalletPaymentTotalAmount.tsx
diff --git a/ts/features/walletV3/payment/components/WalletPspListSkeleton.tsx b/ts/features/payments/checkout/components/WalletPspListSkeleton.tsx
similarity index 100%
rename from ts/features/walletV3/payment/components/WalletPspListSkeleton.tsx
rename to ts/features/payments/checkout/components/WalletPspListSkeleton.tsx
diff --git a/ts/features/walletV3/payment/hooks/useOnTransactionActivationEffect.tsx b/ts/features/payments/checkout/hooks/useOnTransactionActivationEffect.tsx
similarity index 90%
rename from ts/features/walletV3/payment/hooks/useOnTransactionActivationEffect.tsx
rename to ts/features/payments/checkout/hooks/useOnTransactionActivationEffect.tsx
index f4857eda2e4..76ff5d2df86 100644
--- a/ts/features/walletV3/payment/hooks/useOnTransactionActivationEffect.tsx
+++ b/ts/features/payments/checkout/hooks/useOnTransactionActivationEffect.tsx
@@ -3,7 +3,7 @@ import { TransactionInfo } from "../../../../../definitions/pagopa/ecommerce/Tra
 import { TransactionStatusEnum } from "../../../../../definitions/pagopa/ecommerce/TransactionStatus";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { getGenericError } from "../../../../utils/errors";
-import { walletPaymentGetTransactionInfo } from "../store/actions/networking";
+import { paymentsGetPaymentTransactionInfoAction } from "../store/actions/networking";
 import { walletPaymentTransactionSelector } from "../store/selectors";
 
 const INITIAL_DELAY = 250;
@@ -39,7 +39,7 @@ const useOnTransactionActivationEffect = (effect: EffectCallback) => {
       } else if (countRef.current > MAX_TRIES) {
         // The transaction is not yet ACTIVATED, and we exceeded the max retries
         dispatch(
-          walletPaymentGetTransactionInfo.failure(
+          paymentsGetPaymentTransactionInfoAction.failure(
             getGenericError(new Error("Max try reached"))
           )
         );
@@ -49,7 +49,9 @@ const useOnTransactionActivationEffect = (effect: EffectCallback) => {
         const timeout = setTimeout(() => {
           delayRef.current *= 2;
           countRef.current += 1;
-          dispatch(walletPaymentGetTransactionInfo.request({ transactionId }));
+          dispatch(
+            paymentsGetPaymentTransactionInfoAction.request({ transactionId })
+          );
         }, delayRef.current);
         // Clean up the timeout to avoid memory leaks
         return () => {
diff --git a/ts/features/payments/checkout/hooks/usePagoPaPayment.ts b/ts/features/payments/checkout/hooks/usePagoPaPayment.ts
new file mode 100644
index 00000000000..e3d474958a1
--- /dev/null
+++ b/ts/features/payments/checkout/hooks/usePagoPaPayment.ts
@@ -0,0 +1,137 @@
+import {
+  RptId as PagoPaRptId,
+  RptIdFromString as PagoPaRptIdFromString,
+  PaymentNoticeNumberFromString
+} from "@pagopa/io-pagopa-commons/lib/pagopa";
+import { OrganizationFiscalCode } from "@pagopa/ts-commons/lib/strings";
+import { sequenceS } from "fp-ts/lib/Apply";
+import * as E from "fp-ts/lib/Either";
+import * as O from "fp-ts/lib/Option";
+import { pipe } from "fp-ts/lib/function";
+import { RptId } from "../../../../../definitions/pagopa/ecommerce/RptId";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { useIODispatch, useIOSelector } from "../../../../store/hooks";
+import { PaymentsCheckoutRoutes } from "../navigation/routes";
+import {
+  PaymentInitStateParams,
+  initPaymentStateAction
+} from "../store/actions/orchestration";
+import { isNewWalletSectionEnabledSelector } from "../../../../store/reducers/persistedPreferences";
+
+type PagoPaPaymentParams = Omit<PaymentInitStateParams, "startRoute">;
+
+const DEFAULT_PAYMENT_PARAMS: PagoPaPaymentParams = {};
+
+type PaymentData = {
+  paymentNoticeNumber: string;
+  organizationFiscalCode: string;
+};
+
+type UsePagoPaPayment = {
+  startPaymentFlow: (rptId: RptId, params?: PagoPaPaymentParams) => void;
+  startPaymentFlowWithRptId: (
+    rptId: PagoPaRptId,
+    params?: PagoPaPaymentParams
+  ) => void;
+  startPaymentFlowWithData: (
+    data: PaymentData,
+    params?: PagoPaPaymentParams
+  ) => void;
+  // This is a temporary flag to tell that the new payment flow is enabled and can be used
+  // Will be removed once the new wallet section is released
+  isNewWalletSectionEnabled: boolean;
+};
+
+/**
+ * A hook for initiating a PagoPA payment flow.
+ * This hook provides functions to start a payment flow using various input methods.
+ * @returns An object containing functions to start different types of payment flows.
+ */
+const usePagoPaPayment = (): UsePagoPaPayment => {
+  const dispatch = useIODispatch();
+  const navigation = useIONavigation();
+
+  // Checks if the new wallet section is enabled
+  const isNewWalletSectionEnabled = useIOSelector(
+    isNewWalletSectionEnabledSelector
+  );
+
+  /**
+   * Initializes the payment state based on the provided parameters.
+   * The initialization includes the store of the current route which allows the app to
+   * return to it when the payment flow is finished.
+   * @param {PagoPaPaymentParams} params - Parameters for initializing the payment state.
+   */
+  const initPaymentState = (params: PagoPaPaymentParams) => {
+    dispatch(initPaymentStateAction(params));
+  };
+
+  /**
+   * Initiates the payment flow using the provided RptId string and additional parameters.
+   * @param {RptId} rptId - The RptId for the payment flow.
+   * @param {PagoPaPaymentParams} params - Additional parameters for the payment flow.
+   */
+  const startPaymentFlow = (
+    rptId: RptId,
+    params: PagoPaPaymentParams = DEFAULT_PAYMENT_PARAMS
+  ) => {
+    initPaymentState(params);
+    navigation.navigate(PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR, {
+      screen: PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_DETAIL,
+      params: {
+        rptId
+      }
+    });
+  };
+
+  /**
+   * Initiates the payment flow using the provided PagoPA RptId and additional parameters.
+   * @param {PagoPaRptId} rptId - The PagoPA RptId for the payment flow.
+   * @param {PagoPaPaymentParams} params - Additional parameters for the payment flow.
+   */
+  const startPaymentFlowWithRptId = (
+    rptId: PagoPaRptId,
+    params: PagoPaPaymentParams = DEFAULT_PAYMENT_PARAMS
+  ) => {
+    pipe(
+      O.fromNullable(rptId),
+      O.map(PagoPaRptIdFromString.encode),
+      O.map(RptId.decode),
+      O.chain(O.fromEither),
+      O.map(rptIdString => startPaymentFlow(rptIdString, params))
+    );
+  };
+
+  /**
+   * Initiates the payment flow using the provided payment data and additional parameters.
+   * @param {Object} data - Payment data containing the payment notice number and an organization fiscal code.
+   * @param {PagoPaPaymentParams} params - Additional parameters for the payment flow.
+   */
+  const startPaymentFlowWithData = (
+    data: PaymentData,
+    params: PagoPaPaymentParams = DEFAULT_PAYMENT_PARAMS
+  ) => {
+    pipe(
+      sequenceS(E.Monad)({
+        paymentNoticeNumber: PaymentNoticeNumberFromString.decode(
+          data.paymentNoticeNumber
+        ),
+        organizationFiscalCode: OrganizationFiscalCode.decode(
+          data.organizationFiscalCode
+        )
+      }),
+      E.map(PagoPaRptIdFromString.encode),
+      E.chain(RptId.decode),
+      E.map(rptIdString => startPaymentFlow(rptIdString, params))
+    );
+  };
+
+  return {
+    startPaymentFlow,
+    startPaymentFlowWithRptId,
+    startPaymentFlowWithData,
+    isNewWalletSectionEnabled
+  };
+};
+
+export { usePagoPaPayment };
diff --git a/ts/features/walletV3/payment/hooks/usePaymentFailureSupportModal.tsx b/ts/features/payments/checkout/hooks/usePaymentFailureSupportModal.tsx
similarity index 93%
rename from ts/features/walletV3/payment/hooks/usePaymentFailureSupportModal.tsx
rename to ts/features/payments/checkout/hooks/usePaymentFailureSupportModal.tsx
index 2dd47feab59..499e0f73a38 100644
--- a/ts/features/walletV3/payment/hooks/usePaymentFailureSupportModal.tsx
+++ b/ts/features/payments/checkout/hooks/usePaymentFailureSupportModal.tsx
@@ -22,24 +22,27 @@ import { useIOBottomSheetAutoresizableModal } from "../../../../utils/hooks/bott
 import {
   PAGOPA_SUPPORT_PHONE_NUMBER,
   addTicketCustomField,
+  appendLog,
   assistanceToolRemoteConfig,
   resetCustomFields,
   zendeskCategoryId,
   zendeskPaymentCategory,
   zendeskPaymentFailure,
   zendeskPaymentNav,
-  zendeskPaymentOrgFiscalCode
+  zendeskPaymentOrgFiscalCode,
+  zendeskPaymentStartOrigin
 } from "../../../../utils/supportAssistance";
 import {
   zendeskSelectedCategory,
   zendeskSupportStart
 } from "../../../zendesk/store/actions";
+import { selectOngoingPaymentHistory } from "../../history/store/selectors";
 import { walletPaymentRptIdSelector } from "../store/selectors";
 import {
   WalletPaymentOutcome,
   getWalletPaymentOutcomeEnumByValue
 } from "../types/PaymentOutcomeEnum";
-import { WalletPaymentFailure } from "../types/failure";
+import { WalletPaymentFailure } from "../types/WalletPaymentFailure";
 
 type PaymentFailureSupportModalParams = {
   failure?: WalletPaymentFailure;
@@ -60,6 +63,7 @@ const usePaymentFailureSupportModal = ({
   const assistanceToolConfig = useIOSelector(assistanceToolConfigSelector);
   const choosenTool = assistanceToolRemoteConfig(assistanceToolConfig);
   const rptId = useIOSelector(walletPaymentRptIdSelector);
+  const paymentHistory = useIOSelector(selectOngoingPaymentHistory);
   const dispatch = useIODispatch();
 
   const faultCodeDetail =
@@ -73,9 +77,11 @@ const usePaymentFailureSupportModal = ({
     addTicketCustomField(zendeskPaymentOrgFiscalCode, organizationFiscalCode);
     addTicketCustomField(zendeskPaymentNav, paymentNoticeNumber);
     addTicketCustomField(zendeskPaymentFailure, faultCodeDetail);
-    // TODO Add additional info for zendesk support (IOBP-484)
-    // addTicketCustomField(zendeskPaymentStartOrigin, "n/a");
-    // appendLog(getPaymentHistoryDetails(payment));
+    addTicketCustomField(
+      zendeskPaymentStartOrigin,
+      paymentHistory?.startOrigin || "n/a"
+    );
+    appendLog(JSON.stringify(paymentHistory));
     dispatch(
       zendeskSupportStart({
         startingRoute: "n/a",
diff --git a/ts/features/walletV3/payment/hooks/useSortPspBottomSheet.tsx b/ts/features/payments/checkout/hooks/useSortPspBottomSheet.tsx
similarity index 100%
rename from ts/features/walletV3/payment/hooks/useSortPspBottomSheet.tsx
rename to ts/features/payments/checkout/hooks/useSortPspBottomSheet.tsx
diff --git a/ts/features/walletV3/payment/hooks/useWalletPaymentAuthorizationModal.tsx b/ts/features/payments/checkout/hooks/useWalletPaymentAuthorizationModal.tsx
similarity index 79%
rename from ts/features/walletV3/payment/hooks/useWalletPaymentAuthorizationModal.tsx
rename to ts/features/payments/checkout/hooks/useWalletPaymentAuthorizationModal.tsx
index 347989d3e31..992335495f6 100644
--- a/ts/features/walletV3/payment/hooks/useWalletPaymentAuthorizationModal.tsx
+++ b/ts/features/payments/checkout/hooks/useWalletPaymentAuthorizationModal.tsx
@@ -7,9 +7,10 @@ import * as React from "react";
 import URLParse from "url-parse";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { WALLET_WEBVIEW_OUTCOME_SCHEMA } from "../../common/utils/const";
+import { storePaymentOutcomeToHistory } from "../../history/store/actions";
 import {
   WalletPaymentAuthorizePayload,
-  walletPaymentAuthorization
+  paymentsStartPaymentAuthorizationAction
 } from "../store/actions/networking";
 import { walletPaymentAuthorizationUrlSelector } from "../store/selectors";
 import {
@@ -19,7 +20,6 @@ import {
 
 type Props = {
   onAuthorizationOutcome: (outcome: WalletPaymentOutcome) => void;
-  onDismiss: () => void;
 };
 
 export type WalletPaymentAuthorizationModal = {
@@ -30,10 +30,10 @@ export type WalletPaymentAuthorizationModal = {
 };
 
 export const useWalletPaymentAuthorizationModal = ({
-  onAuthorizationOutcome,
-  onDismiss
+  onAuthorizationOutcome
 }: Props): WalletPaymentAuthorizationModal => {
   const dispatch = useIODispatch();
+
   const authorizationUrlPot = useIOSelector(
     walletPaymentAuthorizationUrlSelector
   );
@@ -43,6 +43,14 @@ export const useWalletPaymentAuthorizationModal = ({
   const isLoading = pot.isLoading(authorizationUrlPot);
   const isError = pot.isError(authorizationUrlPot);
 
+  const handleAuthorizationOutcome = React.useCallback(
+    (outcome: WalletPaymentOutcome) => {
+      onAuthorizationOutcome(outcome);
+      dispatch(storePaymentOutcomeToHistory(outcome));
+    },
+    [onAuthorizationOutcome, dispatch]
+  );
+
   const handleAuthorizationResult = React.useCallback(
     (resultUrl: string) => {
       const outcome = pipe(
@@ -51,9 +59,9 @@ export const useWalletPaymentAuthorizationModal = ({
         WalletPaymentOutcome.decode,
         E.getOrElse(() => WalletPaymentOutcomeEnum.GENERIC_ERROR)
       );
-      onAuthorizationOutcome(outcome);
+      handleAuthorizationOutcome(outcome);
     },
-    [onAuthorizationOutcome]
+    [handleAuthorizationOutcome]
   );
 
   React.useEffect(() => {
@@ -75,9 +83,9 @@ export const useWalletPaymentAuthorizationModal = ({
             );
           },
           () => {
-            onDismiss();
-            dispatch(walletPaymentAuthorization.cancel());
-            setIsPendingAuthorization(false);
+            handleAuthorizationOutcome(
+              WalletPaymentOutcomeEnum.CANCELED_BY_USER
+            );
           }
         )
       ),
@@ -89,21 +97,21 @@ export const useWalletPaymentAuthorizationModal = ({
     isPendingAuthorization,
     authorizationUrlPot,
     handleAuthorizationResult,
-    onDismiss,
+    handleAuthorizationOutcome,
     dispatch
   ]);
 
   React.useEffect(
     () => () => {
       setIsPendingAuthorization(false);
-      dispatch(walletPaymentAuthorization.cancel());
+      dispatch(paymentsStartPaymentAuthorizationAction.cancel());
     },
     [dispatch]
   );
 
   const startPaymentAuthorizaton = (payload: WalletPaymentAuthorizePayload) => {
     setIsPendingAuthorization(false);
-    dispatch(walletPaymentAuthorization.request(payload));
+    dispatch(paymentsStartPaymentAuthorizationAction.request(payload));
   };
 
   return {
diff --git a/ts/features/walletV3/payment/hooks/useWalletPaymentGoBackHandler.tsx b/ts/features/payments/checkout/hooks/useWalletPaymentGoBackHandler.tsx
similarity index 84%
rename from ts/features/walletV3/payment/hooks/useWalletPaymentGoBackHandler.tsx
rename to ts/features/payments/checkout/hooks/useWalletPaymentGoBackHandler.tsx
index 8101abf6fca..13fc9c328de 100644
--- a/ts/features/walletV3/payment/hooks/useWalletPaymentGoBackHandler.tsx
+++ b/ts/features/payments/checkout/hooks/useWalletPaymentGoBackHandler.tsx
@@ -7,9 +7,9 @@ import {
   IOStackNavigationProp
 } from "../../../../navigation/params/AppParamsList";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
-import { walletPaymentDeleteTransaction } from "../store/actions/networking";
+import { paymentsDeleteTransactionAction } from "../store/actions/networking";
 import { walletPaymentTransactionSelector } from "../store/selectors";
-import { WalletPaymentRoutes } from "../navigation/routes";
+import { PaymentsCheckoutRoutes } from "../navigation/routes";
 import { WalletPaymentOutcomeEnum } from "../types/PaymentOutcomeEnum";
 
 const useWalletPaymentGoBackHandler = () => {
@@ -29,9 +29,9 @@ const useWalletPaymentGoBackHandler = () => {
     const { transactionId } = transactionPot.value;
 
     const handleConfirmAbort = () => {
-      dispatch(walletPaymentDeleteTransaction.request(transactionId));
-      navigation.push(WalletPaymentRoutes.WALLET_PAYMENT_MAIN, {
-        screen: WalletPaymentRoutes.WALLET_PAYMENT_OUTCOME,
+      dispatch(paymentsDeleteTransactionAction.request(transactionId));
+      navigation.replace(PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR, {
+        screen: PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_OUTCOME,
         params: {
           outcome: WalletPaymentOutcomeEnum.CANCELED_BY_USER
         }
diff --git a/ts/features/payments/checkout/navigation/navigator.tsx b/ts/features/payments/checkout/navigation/navigator.tsx
new file mode 100644
index 00000000000..aeca8d42d82
--- /dev/null
+++ b/ts/features/payments/checkout/navigation/navigator.tsx
@@ -0,0 +1,76 @@
+import { ParamListBase } from "@react-navigation/native";
+import {
+  createStackNavigator,
+  StackNavigationProp
+} from "@react-navigation/stack";
+import React from "react";
+import { isGestureEnabled } from "../../../../utils/navigation";
+import { WalletPaymentDetailScreen } from "../screens/WalletPaymentDetailScreen";
+import { WalletPaymentInputFiscalCodeScreen } from "../screens/WalletPaymentInputFiscalCodeScreen";
+import { WalletPaymentInputNoticeNumberScreen } from "../screens/WalletPaymentInputNoticeNumberScreen";
+import { WalletPaymentMakeScreen } from "../screens/WalletPaymentMakeScreen";
+import { WalletPaymentOutcomeScreen } from "../screens/WalletPaymentOutcomeScreen";
+import { PaymentsCheckoutParamsList } from "./params";
+import { PaymentsCheckoutRoutes } from "./routes";
+
+const Stack = createStackNavigator<PaymentsCheckoutParamsList>();
+
+export const PaymentsCheckoutNavigator = () => (
+  <Stack.Navigator
+    initialRouteName={PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR}
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerMode: "screen" }}
+  >
+    <Stack.Screen
+      name={PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_INPUT_NOTICE_NUMBER}
+      component={WalletPaymentInputNoticeNumberScreen}
+      options={{
+        gestureEnabled: isGestureEnabled,
+        headerShown: false
+      }}
+    />
+    <Stack.Screen
+      name={PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_INPUT_FISCAL_CODE}
+      component={WalletPaymentInputFiscalCodeScreen}
+      options={{
+        gestureEnabled: isGestureEnabled,
+        headerShown: false
+      }}
+    />
+    <Stack.Screen
+      name={PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_DETAIL}
+      component={WalletPaymentDetailScreen}
+      options={{
+        gestureEnabled: isGestureEnabled,
+        // Should be false by default: the headerShown is set to true once the payment details are loaded
+        headerShown: false
+      }}
+    />
+    <Stack.Screen
+      name={PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_MAKE}
+      component={WalletPaymentMakeScreen}
+      options={{
+        gestureEnabled: isGestureEnabled,
+        headerShown: false
+      }}
+    />
+    <Stack.Screen
+      name={PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_OUTCOME}
+      component={WalletPaymentOutcomeScreen}
+      options={{
+        gestureEnabled: isGestureEnabled,
+        headerShown: false
+      }}
+    />
+  </Stack.Navigator>
+);
+
+export type PaymentsCheckoutStackNavigationProp<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = string
+> = StackNavigationProp<PaymentsCheckoutParamsList & ParamList, RouteName>;
+
+export type PaymentsCheckoutStackNavigation =
+  PaymentsCheckoutStackNavigationProp<
+    PaymentsCheckoutParamsList,
+    keyof PaymentsCheckoutParamsList
+  >;
diff --git a/ts/features/payments/checkout/navigation/params.ts b/ts/features/payments/checkout/navigation/params.ts
new file mode 100644
index 00000000000..6a0639873ab
--- /dev/null
+++ b/ts/features/payments/checkout/navigation/params.ts
@@ -0,0 +1,13 @@
+import { WalletPaymentDetailScreenNavigationParams } from "../screens/WalletPaymentDetailScreen";
+import { WalletPaymentInputFiscalCodeScreenNavigationParams } from "../screens/WalletPaymentInputFiscalCodeScreen";
+import { WalletPaymentOutcomeScreenNavigationParams } from "../screens/WalletPaymentOutcomeScreen";
+import { PaymentsCheckoutRoutes } from "./routes";
+
+export type PaymentsCheckoutParamsList = {
+  [PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR]: undefined;
+  [PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_INPUT_NOTICE_NUMBER]: undefined;
+  [PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_INPUT_FISCAL_CODE]: WalletPaymentInputFiscalCodeScreenNavigationParams;
+  [PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_DETAIL]: WalletPaymentDetailScreenNavigationParams;
+  [PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_MAKE]: undefined;
+  [PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_OUTCOME]: WalletPaymentOutcomeScreenNavigationParams;
+};
diff --git a/ts/features/payments/checkout/navigation/routes.ts b/ts/features/payments/checkout/navigation/routes.ts
new file mode 100644
index 00000000000..024828de2e3
--- /dev/null
+++ b/ts/features/payments/checkout/navigation/routes.ts
@@ -0,0 +1,8 @@
+export const PaymentsCheckoutRoutes = {
+  PAYMENT_CHECKOUT_NAVIGATOR: "PAYMENT_CHECKOUT_NAVIGATOR",
+  PAYMENT_CHECKOUT_INPUT_NOTICE_NUMBER: "PAYMENT_CHECKOUT_INPUT_NOTICE_NUMBER",
+  PAYMENT_CHECKOUT_INPUT_FISCAL_CODE: "PAYMENT_CHECKOUT_INPUT_FISCAL_CODE",
+  PAYMENT_CHECKOUT_DETAIL: "PAYMENT_CHECKOUT_DETAIL",
+  PAYMENT_CHECKOUT_MAKE: "PAYMENT_CHECKOUT_MAKE",
+  PAYMENT_CHECKOUT_OUTCOME: "PAYMENT_CHECKOUT_OUTCOME"
+} as const;
diff --git a/ts/features/walletV3/payment/saga/index.ts b/ts/features/payments/checkout/saga/index.ts
similarity index 68%
rename from ts/features/walletV3/payment/saga/index.ts
rename to ts/features/payments/checkout/saga/index.ts
index 450a3a8a356..3945fabdef0 100644
--- a/ts/features/walletV3/payment/saga/index.ts
+++ b/ts/features/payments/checkout/saga/index.ts
@@ -1,86 +1,84 @@
 import { SagaIterator } from "redux-saga";
 import { takeLatest } from "typed-redux-saga/macro";
-import { WalletClient } from "../../common/api/client";
-import { PaymentClient } from "../api/client";
+import { PaymentClient } from "../../common/api/client";
 import {
-  walletPaymentAuthorization,
-  walletPaymentCalculateFees,
-  walletPaymentCreateTransaction,
-  walletPaymentDeleteTransaction,
-  walletPaymentGetAllMethods,
-  walletPaymentGetDetails,
-  walletPaymentGetTransactionInfo,
-  walletPaymentGetUserWallets,
-  walletPaymentNewSessionToken
+  paymentsCalculatePaymentFeesAction,
+  paymentsCreateTransactionAction,
+  paymentsDeleteTransactionAction,
+  paymentsGetNewSessionTokenAction,
+  paymentsGetPaymentDetailsAction,
+  paymentsGetPaymentMethodsAction,
+  paymentsGetPaymentTransactionInfoAction,
+  paymentsGetPaymentUserMethodsAction,
+  paymentsStartPaymentAuthorizationAction
 } from "../store/actions/networking";
+import { handleWalletPaymentAuthorization } from "./networking/handleWalletPaymentAuthorization";
 import { handleWalletPaymentCalculateFees } from "./networking/handleWalletPaymentCalculateFees";
 import { handleWalletPaymentCreateTransaction } from "./networking/handleWalletPaymentCreateTransaction";
+import { handleWalletPaymentDeleteTransaction } from "./networking/handleWalletPaymentDeleteTransaction";
 import { handleWalletPaymentGetAllMethods } from "./networking/handleWalletPaymentGetAllMethods";
 import { handleWalletPaymentGetDetails } from "./networking/handleWalletPaymentGetDetails";
+import { handleWalletPaymentGetTransactionInfo } from "./networking/handleWalletPaymentGetTransactionInfo";
 import { handleWalletPaymentGetUserWallets } from "./networking/handleWalletPaymentGetUserWallets";
-import { handleWalletPaymentAuthorization } from "./networking/handleWalletPaymentAuthorization";
-import { handleWalletPaymentDeleteTransaction } from "./networking/handleWalletPaymentDeleteTransaction";
 import { handleWalletPaymentNewSessionToken } from "./networking/handleWalletPaymentNewSessionToken";
-import { handleWalletPaymentGetTransactionInfo } from "./networking/handleWalletPaymentGetTransactionInfo";
 
 /**
  * Handle the pagoPA payments requests
  * @param bearerToken
  */
-export function* watchWalletPaymentSaga(
-  walletClient: WalletClient,
+export function* watchPaymentsCheckoutSaga(
   paymentClient: PaymentClient
 ): SagaIterator {
   yield* takeLatest(
-    walletPaymentNewSessionToken.request,
+    paymentsGetNewSessionTokenAction.request,
     handleWalletPaymentNewSessionToken,
     paymentClient.newSessionToken
   );
 
   yield* takeLatest(
-    walletPaymentGetDetails.request,
+    paymentsGetPaymentDetailsAction.request,
     handleWalletPaymentGetDetails,
     paymentClient.getPaymentRequestInfo
   );
 
   yield* takeLatest(
-    walletPaymentGetAllMethods.request,
+    paymentsGetPaymentMethodsAction.request,
     handleWalletPaymentGetAllMethods,
-    walletClient.getAllPaymentMethods
+    paymentClient.getAllPaymentMethods
   );
 
   yield* takeLatest(
-    walletPaymentGetUserWallets.request,
+    paymentsGetPaymentUserMethodsAction.request,
     handleWalletPaymentGetUserWallets,
-    walletClient.getWalletsByIdUser
+    paymentClient.getWalletsByIdUser
   );
 
   yield* takeLatest(
-    walletPaymentCalculateFees.request,
+    paymentsCalculatePaymentFeesAction.request,
     handleWalletPaymentCalculateFees,
     paymentClient.calculateFees
   );
 
   yield* takeLatest(
-    walletPaymentCreateTransaction.request,
+    paymentsCreateTransactionAction.request,
     handleWalletPaymentCreateTransaction,
     paymentClient.newTransaction
   );
 
   yield* takeLatest(
-    walletPaymentGetTransactionInfo.request,
+    paymentsGetPaymentTransactionInfoAction.request,
     handleWalletPaymentGetTransactionInfo,
     paymentClient.getTransactionInfo
   );
 
   yield* takeLatest(
-    walletPaymentDeleteTransaction.request,
+    paymentsDeleteTransactionAction.request,
     handleWalletPaymentDeleteTransaction,
     paymentClient.requestTransactionUserCancellation
   );
 
   yield* takeLatest(
-    walletPaymentAuthorization.request,
+    paymentsStartPaymentAuthorizationAction.request,
     handleWalletPaymentAuthorization,
     paymentClient.requestTransactionAuthorization
   );
diff --git a/ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentAuthorization.test.ts b/ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentAuthorization.test.ts
similarity index 79%
rename from ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentAuthorization.test.ts
rename to ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentAuthorization.test.ts
index 1ae6c698d1b..139f2aab663 100644
--- a/ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentAuthorization.test.ts
+++ b/ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentAuthorization.test.ts
@@ -8,7 +8,7 @@ import { readablePrivacyReport } from "../../../../../../utils/reporters";
 import { withRefreshApiCall } from "../../../../../fastLogin/saga/utils";
 import {
   WalletPaymentAuthorizePayload,
-  walletPaymentAuthorization
+  paymentsStartPaymentAuthorizationAction
 } from "../../../store/actions/networking";
 import { handleWalletPaymentAuthorization } from "../handleWalletPaymentAuthorization";
 import { selectWalletPaymentSessionToken } from "../../../store/selectors";
@@ -25,7 +25,7 @@ describe("Test handleWalletPaymentAuthorization saga", () => {
   const T_SESSION_TOKEN = "ABCD";
 
   it(`should put ${getType(
-    walletPaymentAuthorization.success
+    paymentsStartPaymentAuthorizationAction.success
   )} when requestTransactionAuthorization is 200`, () => {
     const mockRequestTransactionAuthorization = jest.fn();
     const requestTransactionAuthorizationResponse: RequestAuthorizationResponse =
@@ -37,7 +37,9 @@ describe("Test handleWalletPaymentAuthorization saga", () => {
     testSaga(
       handleWalletPaymentAuthorization,
       mockRequestTransactionAuthorization,
-      walletPaymentAuthorization.request(requestTransactionAuthorizationPayload)
+      paymentsStartPaymentAuthorizationAction.request(
+        requestTransactionAuthorizationPayload
+      )
     )
       .next()
       .select(selectWalletPaymentSessionToken)
@@ -45,7 +47,7 @@ describe("Test handleWalletPaymentAuthorization saga", () => {
       .call(
         withRefreshApiCall,
         mockRequestTransactionAuthorization(),
-        walletPaymentAuthorization.request(
+        paymentsStartPaymentAuthorizationAction.request(
           requestTransactionAuthorizationPayload
         )
       )
@@ -53,7 +55,7 @@ describe("Test handleWalletPaymentAuthorization saga", () => {
         E.right({ status: 200, value: requestTransactionAuthorizationResponse })
       )
       .put(
-        walletPaymentAuthorization.success(
+        paymentsStartPaymentAuthorizationAction.success(
           requestTransactionAuthorizationResponse
         )
       )
@@ -62,14 +64,16 @@ describe("Test handleWalletPaymentAuthorization saga", () => {
   });
 
   it(`should put ${getType(
-    walletPaymentAuthorization.failure
+    paymentsStartPaymentAuthorizationAction.failure
   )} when requestTransactionAuthorization is not 200`, () => {
     const mockRequestTransactionAuthorization = jest.fn();
 
     testSaga(
       handleWalletPaymentAuthorization,
       mockRequestTransactionAuthorization,
-      walletPaymentAuthorization.request(requestTransactionAuthorizationPayload)
+      paymentsStartPaymentAuthorizationAction.request(
+        requestTransactionAuthorizationPayload
+      )
     )
       .next()
       .select(selectWalletPaymentSessionToken)
@@ -77,13 +81,13 @@ describe("Test handleWalletPaymentAuthorization saga", () => {
       .call(
         withRefreshApiCall,
         mockRequestTransactionAuthorization(),
-        walletPaymentAuthorization.request(
+        paymentsStartPaymentAuthorizationAction.request(
           requestTransactionAuthorizationPayload
         )
       )
       .next(E.right({ status: 400, value: undefined }))
       .put(
-        walletPaymentAuthorization.failure(
+        paymentsStartPaymentAuthorizationAction.failure(
           getGenericError(new Error(`Error: 400`))
         )
       )
@@ -92,14 +96,16 @@ describe("Test handleWalletPaymentAuthorization saga", () => {
   });
 
   it(`should put ${getType(
-    walletPaymentAuthorization.failure
+    paymentsStartPaymentAuthorizationAction.failure
   )} when requestTransactionAuthorization encoders returns an error`, () => {
     const mockRequestTransactionAuthorization = jest.fn();
 
     testSaga(
       handleWalletPaymentAuthorization,
       mockRequestTransactionAuthorization,
-      walletPaymentAuthorization.request(requestTransactionAuthorizationPayload)
+      paymentsStartPaymentAuthorizationAction.request(
+        requestTransactionAuthorizationPayload
+      )
     )
       .next()
       .select(selectWalletPaymentSessionToken)
@@ -107,13 +113,13 @@ describe("Test handleWalletPaymentAuthorization saga", () => {
       .call(
         withRefreshApiCall,
         mockRequestTransactionAuthorization(),
-        walletPaymentAuthorization.request(
+        paymentsStartPaymentAuthorizationAction.request(
           requestTransactionAuthorizationPayload
         )
       )
       .next(E.left([]))
       .put(
-        walletPaymentAuthorization.failure({
+        paymentsStartPaymentAuthorizationAction.failure({
           ...getGenericError(new Error(readablePrivacyReport([])))
         })
       )
diff --git a/ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentCalculateFees.test.ts b/ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentCalculateFees.test.ts
similarity index 57%
rename from ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentCalculateFees.test.ts
rename to ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentCalculateFees.test.ts
index 9488931478e..6eb80bb905d 100644
--- a/ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentCalculateFees.test.ts
+++ b/ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentCalculateFees.test.ts
@@ -6,11 +6,12 @@ import { PaymentMethodStatusEnum } from "../../../../../../../definitions/pagopa
 import { getGenericError } from "../../../../../../utils/errors";
 import { readablePrivacyReport } from "../../../../../../utils/reporters";
 import { withRefreshApiCall } from "../../../../../fastLogin/saga/utils";
-import { walletPaymentCalculateFees } from "../../../store/actions/networking";
+import { paymentsCalculatePaymentFeesAction } from "../../../store/actions/networking";
 import { handleWalletPaymentCalculateFees } from "../handleWalletPaymentCalculateFees";
 import { CalculateFeeRequest } from "../../../../../../../definitions/pagopa/ecommerce/CalculateFeeRequest";
 import { selectWalletPaymentSessionToken } from "../../../store/selectors";
 import { preferredLanguageSelector } from "../../../../../../store/reducers/persistedPreferences";
+import { selectPaymentPspAction } from "../../../store/actions/orchestration";
 
 describe("Test handleWalletPaymentCalculateFees saga", () => {
   const calculateFeesPayload: CalculateFeeRequest & {
@@ -22,15 +23,19 @@ describe("Test handleWalletPaymentCalculateFees saga", () => {
   const T_SESSION_TOKEN = "ABCD";
 
   it(`should put ${getType(
-    walletPaymentCalculateFees.success
-  )} when calculateFees is 200`, () => {
+    paymentsCalculatePaymentFeesAction.success
+  )} when calculateFees is 200 and bundles are more than one`, () => {
     const mockCalculateFees = jest.fn();
     const calculateFeesResponse: CalculateFeeResponse = {
       bundles: [
         {
           idBundle: "idBundle"
+        },
+        {
+          idBundle: "idBundle2"
         }
       ],
+      asset: "asset",
       paymentMethodDescription: "paymentMethodDescription",
       paymentMethodName: "paymentMethodName",
       paymentMethodStatus: PaymentMethodStatusEnum.ENABLED
@@ -39,7 +44,7 @@ describe("Test handleWalletPaymentCalculateFees saga", () => {
     testSaga(
       handleWalletPaymentCalculateFees,
       mockCalculateFees,
-      walletPaymentCalculateFees.request(calculateFeesPayload)
+      paymentsCalculatePaymentFeesAction.request(calculateFeesPayload)
     )
       .next()
       .select(preferredLanguageSelector)
@@ -49,24 +54,24 @@ describe("Test handleWalletPaymentCalculateFees saga", () => {
       .call(
         withRefreshApiCall,
         mockCalculateFees(),
-        walletPaymentCalculateFees.request(calculateFeesPayload)
+        paymentsCalculatePaymentFeesAction.request(calculateFeesPayload)
       )
       .next(E.right({ status: 200, value: calculateFeesResponse }))
       .next()
-      .put(walletPaymentCalculateFees.success(calculateFeesResponse))
+      .put(paymentsCalculatePaymentFeesAction.success(calculateFeesResponse))
       .next()
       .isDone();
   });
 
   it(`should put ${getType(
-    walletPaymentCalculateFees.failure
+    paymentsCalculatePaymentFeesAction.failure
   )} when calculateFees is not 200`, () => {
     const mockCalculateFees = jest.fn();
 
     testSaga(
       handleWalletPaymentCalculateFees,
       mockCalculateFees,
-      walletPaymentCalculateFees.request(calculateFeesPayload)
+      paymentsCalculatePaymentFeesAction.request(calculateFeesPayload)
     )
       .next()
       .select(preferredLanguageSelector)
@@ -76,11 +81,11 @@ describe("Test handleWalletPaymentCalculateFees saga", () => {
       .call(
         withRefreshApiCall,
         mockCalculateFees(),
-        walletPaymentCalculateFees.request(calculateFeesPayload)
+        paymentsCalculatePaymentFeesAction.request(calculateFeesPayload)
       )
       .next(E.right({ status: 400, value: undefined }))
       .put(
-        walletPaymentCalculateFees.failure(
+        paymentsCalculatePaymentFeesAction.failure(
           getGenericError(new Error(`Error: 400`))
         )
       )
@@ -89,14 +94,14 @@ describe("Test handleWalletPaymentCalculateFees saga", () => {
   });
 
   it(`should put ${getType(
-    walletPaymentCalculateFees.failure
+    paymentsCalculatePaymentFeesAction.failure
   )} when calculateFees encoders returns an error`, () => {
     const mockCalculateFees = jest.fn();
 
     testSaga(
       handleWalletPaymentCalculateFees,
       mockCalculateFees,
-      walletPaymentCalculateFees.request(calculateFeesPayload)
+      paymentsCalculatePaymentFeesAction.request(calculateFeesPayload)
     )
       .next()
       .select(preferredLanguageSelector)
@@ -106,15 +111,55 @@ describe("Test handleWalletPaymentCalculateFees saga", () => {
       .call(
         withRefreshApiCall,
         mockCalculateFees(),
-        walletPaymentCalculateFees.request(calculateFeesPayload)
+        paymentsCalculatePaymentFeesAction.request(calculateFeesPayload)
       )
       .next(E.left([]))
       .put(
-        walletPaymentCalculateFees.failure({
+        paymentsCalculatePaymentFeesAction.failure({
           ...getGenericError(new Error(readablePrivacyReport([])))
         })
       )
       .next()
       .isDone();
   });
+
+  it(`should put ${getType(
+    selectPaymentPspAction
+  )} with first psp in the list when calculateFees is 200 and bundles is only one in list`, () => {
+    const mockCalculateFees = jest.fn();
+    const calculateFeesResponse: CalculateFeeResponse = {
+      bundles: [
+        {
+          idBundle: "idBundle"
+        }
+      ],
+      asset: "asset",
+      paymentMethodDescription: "paymentMethodDescription",
+      paymentMethodName: "paymentMethodName",
+      paymentMethodStatus: PaymentMethodStatusEnum.ENABLED
+    };
+
+    testSaga(
+      handleWalletPaymentCalculateFees,
+      mockCalculateFees,
+      paymentsCalculatePaymentFeesAction.request(calculateFeesPayload)
+    )
+      .next()
+      .select(preferredLanguageSelector)
+      .next("IT")
+      .select(selectWalletPaymentSessionToken)
+      .next(T_SESSION_TOKEN)
+      .call(
+        withRefreshApiCall,
+        mockCalculateFees(),
+        paymentsCalculatePaymentFeesAction.request(calculateFeesPayload)
+      )
+      .next(E.right({ status: 200, value: calculateFeesResponse }))
+      .next()
+      .put(selectPaymentPspAction(calculateFeesResponse.bundles[0]))
+      .next()
+      .put(paymentsCalculatePaymentFeesAction.success(calculateFeesResponse))
+      .next()
+      .isDone();
+  });
 });
diff --git a/ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentCreateTransaction.test.ts b/ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentCreateTransaction.test.ts
similarity index 79%
rename from ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentCreateTransaction.test.ts
rename to ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentCreateTransaction.test.ts
index f70d052038e..97136b07f2f 100644
--- a/ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentCreateTransaction.test.ts
+++ b/ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentCreateTransaction.test.ts
@@ -9,7 +9,7 @@ import { TransactionStatusEnum } from "../../../../../../../definitions/pagopa/e
 import { getGenericError } from "../../../../../../utils/errors";
 import { readablePrivacyReport } from "../../../../../../utils/reporters";
 import { withRefreshApiCall } from "../../../../../fastLogin/saga/utils";
-import { walletPaymentCreateTransaction } from "../../../store/actions/networking";
+import { paymentsCreateTransactionAction } from "../../../store/actions/networking";
 import { handleWalletPaymentCreateTransaction } from "../handleWalletPaymentCreateTransaction";
 import { selectWalletPaymentSessionToken } from "../../../store/selectors";
 
@@ -25,7 +25,7 @@ describe("Test handleWalletPaymentCreateTransaction saga", () => {
   const T_SESSION_TOKEN = "ABCD";
 
   it(`should put ${getType(
-    walletPaymentCreateTransaction.success
+    paymentsCreateTransactionAction.success
   )} when newTransaction is 200`, () => {
     const mockNewTransaction = jest.fn();
     const newTransactionResponse: NewTransactionResponse = {
@@ -42,7 +42,7 @@ describe("Test handleWalletPaymentCreateTransaction saga", () => {
     testSaga(
       handleWalletPaymentCreateTransaction,
       mockNewTransaction,
-      walletPaymentCreateTransaction.request(newTransactionPayload)
+      paymentsCreateTransactionAction.request(newTransactionPayload)
     )
       .next()
       .select(selectWalletPaymentSessionToken)
@@ -50,23 +50,23 @@ describe("Test handleWalletPaymentCreateTransaction saga", () => {
       .call(
         withRefreshApiCall,
         mockNewTransaction(),
-        walletPaymentCreateTransaction.request(newTransactionPayload)
+        paymentsCreateTransactionAction.request(newTransactionPayload)
       )
       .next(E.right({ status: 200, value: newTransactionResponse }))
-      .put(walletPaymentCreateTransaction.success(newTransactionResponse))
+      .put(paymentsCreateTransactionAction.success(newTransactionResponse))
       .next()
       .isDone();
   });
 
   it(`should put ${getType(
-    walletPaymentCreateTransaction.failure
+    paymentsCreateTransactionAction.failure
   )} when newTransaction is not 200`, () => {
     const mockNewTransaction = jest.fn();
 
     testSaga(
       handleWalletPaymentCreateTransaction,
       mockNewTransaction,
-      walletPaymentCreateTransaction.request(newTransactionPayload)
+      paymentsCreateTransactionAction.request(newTransactionPayload)
     )
       .next()
       .select(selectWalletPaymentSessionToken)
@@ -74,11 +74,11 @@ describe("Test handleWalletPaymentCreateTransaction saga", () => {
       .call(
         withRefreshApiCall,
         mockNewTransaction(),
-        walletPaymentCreateTransaction.request(newTransactionPayload)
+        paymentsCreateTransactionAction.request(newTransactionPayload)
       )
       .next(E.right({ status: 400, value: undefined }))
       .put(
-        walletPaymentCreateTransaction.failure(
+        paymentsCreateTransactionAction.failure(
           getGenericError(new Error(`Error: 400`))
         )
       )
@@ -87,14 +87,14 @@ describe("Test handleWalletPaymentCreateTransaction saga", () => {
   });
 
   it(`should put ${getType(
-    walletPaymentCreateTransaction.failure
+    paymentsCreateTransactionAction.failure
   )} when newTransaction encoders returns an error`, () => {
     const mockNewTransaction = jest.fn();
 
     testSaga(
       handleWalletPaymentCreateTransaction,
       mockNewTransaction,
-      walletPaymentCreateTransaction.request(newTransactionPayload)
+      paymentsCreateTransactionAction.request(newTransactionPayload)
     )
       .next()
       .select(selectWalletPaymentSessionToken)
@@ -102,11 +102,11 @@ describe("Test handleWalletPaymentCreateTransaction saga", () => {
       .call(
         withRefreshApiCall,
         mockNewTransaction(),
-        walletPaymentCreateTransaction.request(newTransactionPayload)
+        paymentsCreateTransactionAction.request(newTransactionPayload)
       )
       .next(E.left([]))
       .put(
-        walletPaymentCreateTransaction.failure({
+        paymentsCreateTransactionAction.failure({
           ...getGenericError(new Error(readablePrivacyReport([])))
         })
       )
diff --git a/ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentGetAllMethods.test.ts b/ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentGetAllMethods.test.ts
similarity index 64%
rename from ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentGetAllMethods.test.ts
rename to ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentGetAllMethods.test.ts
index 6644848ac9f..f46527b7fe5 100644
--- a/ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentGetAllMethods.test.ts
+++ b/ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentGetAllMethods.test.ts
@@ -2,17 +2,21 @@ import * as E from "fp-ts/lib/Either";
 import { testSaga } from "redux-saga-test-plan";
 import { getType } from "typesafe-actions";
 import { Range } from "../../../../../../../definitions/pagopa/ecommerce/Range";
-import { PaymentMethodStatusEnum } from "../../../../../../../definitions/pagopa/walletv3/PaymentMethodStatus";
-import { PaymentMethodsResponse } from "../../../../../../../definitions/pagopa/walletv3/PaymentMethodsResponse";
+import { PaymentMethodStatusEnum } from "../../../../../../../definitions/pagopa/ecommerce/PaymentMethodStatus";
+import { PaymentMethodsResponse } from "../../../../../../../definitions/pagopa/ecommerce/PaymentMethodsResponse";
 import { getGenericError } from "../../../../../../utils/errors";
 import { readablePrivacyReport } from "../../../../../../utils/reporters";
 import { withRefreshApiCall } from "../../../../../fastLogin/saga/utils";
-import { walletPaymentGetAllMethods } from "../../../store/actions/networking";
+import { paymentsGetPaymentMethodsAction } from "../../../store/actions/networking";
 import { handleWalletPaymentGetAllMethods } from "../handleWalletPaymentGetAllMethods";
+import { PaymentMethodManagementTypeEnum } from "../../../../../../../definitions/pagopa/ecommerce/PaymentMethodManagementType";
+import { selectWalletPaymentSessionToken } from "../../../store/selectors";
 
 describe("Test handleWalletPaymentGetAllMethods saga", () => {
+  const T_SESSION_TOKEN = "ABCD";
+
   it(`should put ${getType(
-    walletPaymentGetAllMethods.success
+    paymentsGetPaymentMethodsAction.success
   )} when getAllPaymentMethods is 200`, () => {
     const mockGetAllPaymentMethods = jest.fn();
     const getAllPaymentMethodsResponse: PaymentMethodsResponse = {
@@ -28,7 +32,8 @@ describe("Test handleWalletPaymentGetAllMethods saga", () => {
               max: 10 as Range["max"]
             }
           ],
-          status: PaymentMethodStatusEnum.ENABLED
+          status: PaymentMethodStatusEnum.ENABLED,
+          methodManagement: PaymentMethodManagementTypeEnum.ONBOARDABLE
         }
       ]
     };
@@ -36,39 +41,45 @@ describe("Test handleWalletPaymentGetAllMethods saga", () => {
     testSaga(
       handleWalletPaymentGetAllMethods,
       mockGetAllPaymentMethods,
-      walletPaymentGetAllMethods.request()
+      paymentsGetPaymentMethodsAction.request()
     )
       .next()
+      .select(selectWalletPaymentSessionToken)
+      .next(T_SESSION_TOKEN)
       .call(
         withRefreshApiCall,
         mockGetAllPaymentMethods(),
-        walletPaymentGetAllMethods.request()
+        paymentsGetPaymentMethodsAction.request()
       )
       .next(E.right({ status: 200, value: getAllPaymentMethodsResponse }))
-      .put(walletPaymentGetAllMethods.success(getAllPaymentMethodsResponse))
+      .put(
+        paymentsGetPaymentMethodsAction.success(getAllPaymentMethodsResponse)
+      )
       .next()
       .isDone();
   });
 
   it(`should put ${getType(
-    walletPaymentGetAllMethods.failure
+    paymentsGetPaymentMethodsAction.failure
   )} when getAllPaymentMethods is not 200`, () => {
     const mockGetAllPaymentMethods = jest.fn();
 
     testSaga(
       handleWalletPaymentGetAllMethods,
       mockGetAllPaymentMethods,
-      walletPaymentGetAllMethods.request()
+      paymentsGetPaymentMethodsAction.request()
     )
       .next()
+      .select(selectWalletPaymentSessionToken)
+      .next(T_SESSION_TOKEN)
       .call(
         withRefreshApiCall,
         mockGetAllPaymentMethods(),
-        walletPaymentGetAllMethods.request()
+        paymentsGetPaymentMethodsAction.request()
       )
       .next(E.right({ status: 400, value: undefined }))
       .put(
-        walletPaymentGetAllMethods.failure(
+        paymentsGetPaymentMethodsAction.failure(
           getGenericError(new Error(`Error: 400`))
         )
       )
@@ -77,24 +88,26 @@ describe("Test handleWalletPaymentGetAllMethods saga", () => {
   });
 
   it(`should put ${getType(
-    walletPaymentGetAllMethods.failure
+    paymentsGetPaymentMethodsAction.failure
   )} when getAllPaymentMethods encoders returns an error`, () => {
     const mockGetAllPaymentMethods = jest.fn();
 
     testSaga(
       handleWalletPaymentGetAllMethods,
       mockGetAllPaymentMethods,
-      walletPaymentGetAllMethods.request()
+      paymentsGetPaymentMethodsAction.request()
     )
       .next()
+      .select(selectWalletPaymentSessionToken)
+      .next(T_SESSION_TOKEN)
       .call(
         withRefreshApiCall,
         mockGetAllPaymentMethods(),
-        walletPaymentGetAllMethods.request()
+        paymentsGetPaymentMethodsAction.request()
       )
       .next(E.left([]))
       .put(
-        walletPaymentGetAllMethods.failure({
+        paymentsGetPaymentMethodsAction.failure({
           ...getGenericError(new Error(readablePrivacyReport([])))
         })
       )
diff --git a/ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentGetDetails.test.ts b/ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentGetDetails.test.ts
similarity index 78%
rename from ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentGetDetails.test.ts
rename to ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentGetDetails.test.ts
index d496e799c40..32a7182b806 100644
--- a/ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentGetDetails.test.ts
+++ b/ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentGetDetails.test.ts
@@ -6,7 +6,7 @@ import { RptId } from "../../../../../../../definitions/pagopa/ecommerce/RptId";
 import { getGenericError } from "../../../../../../utils/errors";
 import { readablePrivacyReport } from "../../../../../../utils/reporters";
 import { withRefreshApiCall } from "../../../../../fastLogin/saga/utils";
-import { walletPaymentGetDetails } from "../../../store/actions/networking";
+import { paymentsGetPaymentDetailsAction } from "../../../store/actions/networking";
 import { selectWalletPaymentSessionToken } from "../../../store/selectors";
 import { handleWalletPaymentGetDetails } from "../handleWalletPaymentGetDetails";
 
@@ -15,7 +15,7 @@ describe("Test handleWalletPaymentGetDetails saga", () => {
   const T_SESSION_TOKEN = "ABCD";
 
   it(`should put ${getType(
-    walletPaymentGetDetails.success
+    paymentsGetPaymentDetailsAction.success
   )} when getPaymentRequestInfo is 200`, () => {
     const mockGetPaymentRequestInfo = jest.fn();
     const getPaymentRequestInfoResponse: PaymentRequestsGetResponse = {
@@ -25,7 +25,7 @@ describe("Test handleWalletPaymentGetDetails saga", () => {
     testSaga(
       handleWalletPaymentGetDetails,
       mockGetPaymentRequestInfo,
-      walletPaymentGetDetails.request(rptId)
+      paymentsGetPaymentDetailsAction.request(rptId)
     )
       .next()
       .select(selectWalletPaymentSessionToken)
@@ -33,23 +33,25 @@ describe("Test handleWalletPaymentGetDetails saga", () => {
       .call(
         withRefreshApiCall,
         mockGetPaymentRequestInfo(),
-        walletPaymentGetDetails.request(rptId)
+        paymentsGetPaymentDetailsAction.request(rptId)
       )
       .next(E.right({ status: 200, value: getPaymentRequestInfoResponse }))
-      .put(walletPaymentGetDetails.success(getPaymentRequestInfoResponse))
+      .put(
+        paymentsGetPaymentDetailsAction.success(getPaymentRequestInfoResponse)
+      )
       .next()
       .isDone();
   });
 
   it(`should put ${getType(
-    walletPaymentGetDetails.failure
+    paymentsGetPaymentDetailsAction.failure
   )} when getPaymentRequestInfo is not 200`, () => {
     const mockGetPaymentRequestInfo = jest.fn();
 
     testSaga(
       handleWalletPaymentGetDetails,
       mockGetPaymentRequestInfo,
-      walletPaymentGetDetails.request(rptId)
+      paymentsGetPaymentDetailsAction.request(rptId)
     )
       .next()
       .select(selectWalletPaymentSessionToken)
@@ -57,11 +59,11 @@ describe("Test handleWalletPaymentGetDetails saga", () => {
       .call(
         withRefreshApiCall,
         mockGetPaymentRequestInfo(),
-        walletPaymentGetDetails.request(rptId)
+        paymentsGetPaymentDetailsAction.request(rptId)
       )
       .next(E.right({ status: 400, value: undefined }))
       .put(
-        walletPaymentGetDetails.failure(
+        paymentsGetPaymentDetailsAction.failure(
           getGenericError(new Error(`Error: 400`))
         )
       )
@@ -70,14 +72,14 @@ describe("Test handleWalletPaymentGetDetails saga", () => {
   });
 
   it(`should put ${getType(
-    walletPaymentGetDetails.failure
+    paymentsGetPaymentDetailsAction.failure
   )} when getPaymentRequestInfo encoders returns an error`, () => {
     const mockGetPaymentRequestInfo = jest.fn();
 
     testSaga(
       handleWalletPaymentGetDetails,
       mockGetPaymentRequestInfo,
-      walletPaymentGetDetails.request(rptId)
+      paymentsGetPaymentDetailsAction.request(rptId)
     )
       .next()
       .select(selectWalletPaymentSessionToken)
@@ -85,11 +87,11 @@ describe("Test handleWalletPaymentGetDetails saga", () => {
       .call(
         withRefreshApiCall,
         mockGetPaymentRequestInfo(),
-        walletPaymentGetDetails.request(rptId)
+        paymentsGetPaymentDetailsAction.request(rptId)
       )
       .next(E.left([]))
       .put(
-        walletPaymentGetDetails.failure({
+        paymentsGetPaymentDetailsAction.failure({
           ...getGenericError(new Error(readablePrivacyReport([])))
         })
       )
diff --git a/ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentGetUserWallets.test.ts b/ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentGetUserWallets.test.ts
similarity index 66%
rename from ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentGetUserWallets.test.ts
rename to ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentGetUserWallets.test.ts
index ef5a876faf6..29b4a45dceb 100644
--- a/ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentGetUserWallets.test.ts
+++ b/ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentGetUserWallets.test.ts
@@ -2,16 +2,19 @@ import * as E from "fp-ts/lib/Either";
 import { testSaga } from "redux-saga-test-plan";
 import { getType } from "typesafe-actions";
 import { withRefreshApiCall } from "../../../../../fastLogin/saga/utils";
-import { walletPaymentGetUserWallets } from "../../../store/actions/networking";
+import { paymentsGetPaymentUserMethodsAction } from "../../../store/actions/networking";
 import { handleWalletPaymentGetUserWallets } from "../handleWalletPaymentGetUserWallets";
-import { Wallets } from "../../../../../../../definitions/pagopa/walletv3/Wallets";
+import { Wallets } from "../../../../../../../definitions/pagopa/ecommerce/Wallets";
 import { getGenericError } from "../../../../../../utils/errors";
 import { readablePrivacyReport } from "../../../../../../utils/reporters";
 import { WalletStatusEnum } from "../../../../../../../definitions/pagopa/walletv3/WalletStatus";
+import { selectWalletPaymentSessionToken } from "../../../store/selectors";
 
 describe("Test handleWalletPaymentGetUserWallets saga", () => {
+  const T_SESSION_TOKEN = "ABCD";
+
   it(`should put ${getType(
-    walletPaymentGetUserWallets.success
+    paymentsGetPaymentUserMethodsAction.success
   )} when getWalletsByIdUser is 200`, () => {
     const mockGetWalletsByIdUser = jest.fn();
     const getWalletsByIdUserResponse: Wallets = {
@@ -20,7 +23,8 @@ describe("Test handleWalletPaymentGetUserWallets saga", () => {
           walletId: "walletId",
           creationDate: new Date(),
           paymentMethodId: "paymentMethodId",
-          services: [],
+          paymentMethodAsset: "paymentMethodAsset",
+          applications: [],
           status: WalletStatusEnum.CREATED,
           updateDate: new Date()
         }
@@ -30,39 +34,45 @@ describe("Test handleWalletPaymentGetUserWallets saga", () => {
     testSaga(
       handleWalletPaymentGetUserWallets,
       mockGetWalletsByIdUser,
-      walletPaymentGetUserWallets.request()
+      paymentsGetPaymentUserMethodsAction.request()
     )
       .next()
+      .select(selectWalletPaymentSessionToken)
+      .next(T_SESSION_TOKEN)
       .call(
         withRefreshApiCall,
         mockGetWalletsByIdUser(),
-        walletPaymentGetUserWallets.request()
+        paymentsGetPaymentUserMethodsAction.request()
       )
       .next(E.right({ status: 200, value: getWalletsByIdUserResponse }))
-      .put(walletPaymentGetUserWallets.success(getWalletsByIdUserResponse))
+      .put(
+        paymentsGetPaymentUserMethodsAction.success(getWalletsByIdUserResponse)
+      )
       .next()
       .isDone();
   });
 
   it(`should put ${getType(
-    walletPaymentGetUserWallets.failure
+    paymentsGetPaymentUserMethodsAction.failure
   )} when getWalletsByIdUser is not 200`, () => {
     const mockGetWalletsByIdUser = jest.fn();
 
     testSaga(
       handleWalletPaymentGetUserWallets,
       mockGetWalletsByIdUser,
-      walletPaymentGetUserWallets.request()
+      paymentsGetPaymentUserMethodsAction.request()
     )
       .next()
+      .select(selectWalletPaymentSessionToken)
+      .next(T_SESSION_TOKEN)
       .call(
         withRefreshApiCall,
         mockGetWalletsByIdUser(),
-        walletPaymentGetUserWallets.request()
+        paymentsGetPaymentUserMethodsAction.request()
       )
       .next(E.right({ status: 400, value: undefined }))
       .put(
-        walletPaymentGetUserWallets.failure(
+        paymentsGetPaymentUserMethodsAction.failure(
           getGenericError(new Error(`Error: 400`))
         )
       )
@@ -71,24 +81,26 @@ describe("Test handleWalletPaymentGetUserWallets saga", () => {
   });
 
   it(`should put ${getType(
-    walletPaymentGetUserWallets.failure
+    paymentsGetPaymentUserMethodsAction.failure
   )} when getWalletsByIdUser encoders returns an error`, () => {
     const mockGetWalletsByIdUser = jest.fn();
 
     testSaga(
       handleWalletPaymentGetUserWallets,
       mockGetWalletsByIdUser,
-      walletPaymentGetUserWallets.request()
+      paymentsGetPaymentUserMethodsAction.request()
     )
       .next()
+      .select(selectWalletPaymentSessionToken)
+      .next(T_SESSION_TOKEN)
       .call(
         withRefreshApiCall,
         mockGetWalletsByIdUser(),
-        walletPaymentGetUserWallets.request()
+        paymentsGetPaymentUserMethodsAction.request()
       )
       .next(E.left([]))
       .put(
-        walletPaymentGetUserWallets.failure({
+        paymentsGetPaymentUserMethodsAction.failure({
           ...getGenericError(new Error(readablePrivacyReport([])))
         })
       )
diff --git a/ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentNewSessionToken.test.ts b/ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentNewSessionToken.test.ts
similarity index 75%
rename from ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentNewSessionToken.test.ts
rename to ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentNewSessionToken.test.ts
index 2e27ca3fb43..c9c804e44ff 100644
--- a/ts/features/walletV3/payment/saga/networking/__tests__/handleWalletPaymentNewSessionToken.test.ts
+++ b/ts/features/payments/checkout/saga/networking/__tests__/handleWalletPaymentNewSessionToken.test.ts
@@ -5,12 +5,12 @@ import { NewSessionTokenResponse } from "../../../../../../../definitions/pagopa
 import { getGenericError } from "../../../../../../utils/errors";
 import { readablePrivacyReport } from "../../../../../../utils/reporters";
 import { withRefreshApiCall } from "../../../../../fastLogin/saga/utils";
-import { walletPaymentNewSessionToken } from "../../../store/actions/networking";
+import { paymentsGetNewSessionTokenAction } from "../../../store/actions/networking";
 import { handleWalletPaymentNewSessionToken } from "../handleWalletPaymentNewSessionToken";
 
 describe("Test handleWalletPaymentNewSessionToken saga", () => {
   it(`should put ${getType(
-    walletPaymentNewSessionToken.success
+    paymentsGetNewSessionTokenAction.success
   )} when newSessionToken is 200`, () => {
     const T_SESSION_TOKEN = "ABCD";
     const mocknewSessionToken = jest.fn();
@@ -21,39 +21,39 @@ describe("Test handleWalletPaymentNewSessionToken saga", () => {
     testSaga(
       handleWalletPaymentNewSessionToken,
       mocknewSessionToken,
-      walletPaymentNewSessionToken.request()
+      paymentsGetNewSessionTokenAction.request()
     )
       .next()
       .call(
         withRefreshApiCall,
         mocknewSessionToken(),
-        walletPaymentNewSessionToken.request()
+        paymentsGetNewSessionTokenAction.request()
       )
       .next(E.right({ status: 200, value: newSessionTokenResponse }))
-      .put(walletPaymentNewSessionToken.success(newSessionTokenResponse))
+      .put(paymentsGetNewSessionTokenAction.success(newSessionTokenResponse))
       .next()
       .isDone();
   });
 
   it(`should put ${getType(
-    walletPaymentNewSessionToken.failure
+    paymentsGetNewSessionTokenAction.failure
   )} when newSessionToken is not 200`, () => {
     const mocknewSessionToken = jest.fn();
 
     testSaga(
       handleWalletPaymentNewSessionToken,
       mocknewSessionToken,
-      walletPaymentNewSessionToken.request()
+      paymentsGetNewSessionTokenAction.request()
     )
       .next()
       .call(
         withRefreshApiCall,
         mocknewSessionToken(),
-        walletPaymentNewSessionToken.request()
+        paymentsGetNewSessionTokenAction.request()
       )
       .next(E.right({ status: 400, value: undefined }))
       .put(
-        walletPaymentNewSessionToken.failure(
+        paymentsGetNewSessionTokenAction.failure(
           getGenericError(new Error(`Error: 400`))
         )
       )
@@ -62,24 +62,24 @@ describe("Test handleWalletPaymentNewSessionToken saga", () => {
   });
 
   it(`should put ${getType(
-    walletPaymentNewSessionToken.failure
+    paymentsGetNewSessionTokenAction.failure
   )} when newSessionToken encoders returns an error`, () => {
     const mocknewSessionToken = jest.fn();
 
     testSaga(
       handleWalletPaymentNewSessionToken,
       mocknewSessionToken,
-      walletPaymentNewSessionToken.request()
+      paymentsGetNewSessionTokenAction.request()
     )
       .next()
       .call(
         withRefreshApiCall,
         mocknewSessionToken(),
-        walletPaymentNewSessionToken.request()
+        paymentsGetNewSessionTokenAction.request()
       )
       .next(E.left([]))
       .put(
-        walletPaymentNewSessionToken.failure({
+        paymentsGetNewSessionTokenAction.failure({
           ...getGenericError(new Error(readablePrivacyReport([])))
         })
       )
diff --git a/ts/features/walletV3/payment/saga/networking/handleWalletPaymentAuthorization.ts b/ts/features/payments/checkout/saga/networking/handleWalletPaymentAuthorization.ts
similarity index 79%
rename from ts/features/walletV3/payment/saga/networking/handleWalletPaymentAuthorization.ts
rename to ts/features/payments/checkout/saga/networking/handleWalletPaymentAuthorization.ts
index d45ea8f6d29..b488f36edee 100644
--- a/ts/features/walletV3/payment/saga/networking/handleWalletPaymentAuthorization.ts
+++ b/ts/features/payments/checkout/saga/networking/handleWalletPaymentAuthorization.ts
@@ -11,20 +11,22 @@ import { SagaCallReturnType } from "../../../../../types/utils";
 import { getGenericError, getNetworkError } from "../../../../../utils/errors";
 import { readablePrivacyReport } from "../../../../../utils/reporters";
 import { withRefreshApiCall } from "../../../../fastLogin/saga/utils";
-import { PaymentClient } from "../../api/client";
-import { walletPaymentAuthorization } from "../../store/actions/networking";
+import { PaymentClient } from "../../../common/api/client";
+import { paymentsStartPaymentAuthorizationAction } from "../../store/actions/networking";
 import { getOrFetchWalletSessionToken } from "./handleWalletPaymentNewSessionToken";
 
 export function* handleWalletPaymentAuthorization(
   requestTransactionAuthorization: PaymentClient["requestTransactionAuthorization"],
-  action: ActionType<(typeof walletPaymentAuthorization)["request"]>
+  action: ActionType<
+    (typeof paymentsStartPaymentAuthorizationAction)["request"]
+  >
 ) {
   try {
     const sessionToken = yield* getOrFetchWalletSessionToken();
 
     if (sessionToken === undefined) {
       yield* put(
-        walletPaymentAuthorization.failure({
+        paymentsStartPaymentAuthorizationAction.failure({
           ...getGenericError(new Error(`Missing session token`))
         })
       );
@@ -60,15 +62,15 @@ export function* handleWalletPaymentAuthorization(
         requestTransactionAuthorizationResult,
         E.fold(
           error =>
-            walletPaymentAuthorization.failure({
+            paymentsStartPaymentAuthorizationAction.failure({
               ...getGenericError(new Error(readablePrivacyReport(error)))
             }),
 
           res => {
             if (res.status === 200) {
-              return walletPaymentAuthorization.success(res.value);
+              return paymentsStartPaymentAuthorizationAction.success(res.value);
             }
-            return walletPaymentAuthorization.failure({
+            return paymentsStartPaymentAuthorizationAction.failure({
               ...getGenericError(new Error(`Error: ${res.status}`))
             });
           }
@@ -76,6 +78,8 @@ export function* handleWalletPaymentAuthorization(
       )
     );
   } catch (e) {
-    yield* put(walletPaymentAuthorization.failure({ ...getNetworkError(e) }));
+    yield* put(
+      paymentsStartPaymentAuthorizationAction.failure({ ...getNetworkError(e) })
+    );
   }
 }
diff --git a/ts/features/walletV3/payment/saga/networking/handleWalletPaymentCalculateFees.ts b/ts/features/payments/checkout/saga/networking/handleWalletPaymentCalculateFees.ts
similarity index 71%
rename from ts/features/walletV3/payment/saga/networking/handleWalletPaymentCalculateFees.ts
rename to ts/features/payments/checkout/saga/networking/handleWalletPaymentCalculateFees.ts
index dc6450a9d6d..a394387dad3 100644
--- a/ts/features/walletV3/payment/saga/networking/handleWalletPaymentCalculateFees.ts
+++ b/ts/features/payments/checkout/saga/networking/handleWalletPaymentCalculateFees.ts
@@ -11,15 +11,15 @@ import { getGenericError, getNetworkError } from "../../../../../utils/errors";
 import { readablePrivacyReport } from "../../../../../utils/reporters";
 import { withRefreshApiCall } from "../../../../fastLogin/saga/utils";
 import { getSortedPspList } from "../../../common/utils";
-import { PaymentClient } from "../../api/client";
-import { walletPaymentCalculateFees } from "../../store/actions/networking";
-import { walletPaymentPickPsp } from "../../store/actions/orchestration";
+import { PaymentClient } from "../../../common/api/client";
+import { paymentsCalculatePaymentFeesAction } from "../../store/actions/networking";
+import { selectPaymentPspAction } from "../../store/actions/orchestration";
 import { walletPaymentPickedPspSelector } from "../../store/selectors";
 import { getOrFetchWalletSessionToken } from "./handleWalletPaymentNewSessionToken";
 
 export function* handleWalletPaymentCalculateFees(
   calculateFees: PaymentClient["calculateFees"],
-  action: ActionType<(typeof walletPaymentCalculateFees)["request"]>
+  action: ActionType<(typeof paymentsCalculatePaymentFeesAction)["request"]>
 ) {
   try {
     const preferredLanguageOption = yield* select(preferredLanguageSelector);
@@ -33,7 +33,7 @@ export function* handleWalletPaymentCalculateFees(
 
     if (sessionToken === undefined) {
       yield* put(
-        walletPaymentCalculateFees.failure({
+        paymentsCalculatePaymentFeesAction.failure({
           ...getGenericError(new Error(`Missing session token`))
         })
       );
@@ -55,7 +55,7 @@ export function* handleWalletPaymentCalculateFees(
 
     if (E.isLeft(calculateFeesResult)) {
       yield* put(
-        walletPaymentCalculateFees.failure({
+        paymentsCalculatePaymentFeesAction.failure({
           ...getGenericError(
             new Error(readablePrivacyReport(calculateFeesResult.left))
           )
@@ -71,23 +71,36 @@ export function* handleWalletPaymentCalculateFees(
         );
         const chosenPsp = yield* select(walletPaymentPickedPspSelector);
         // If the sorted psp list has the first element marked as "onUs" and the user has not already chosen a psp, we pre-select the first element
-        if (bundlesSortedByDefault[0]?.onUs && O.isNone(chosenPsp)) {
-          yield* put(walletPaymentPickPsp(bundlesSortedByDefault[0]));
+        if (
+          (bundlesSortedByDefault[0]?.onUs && O.isNone(chosenPsp)) ||
+          bundlesSortedByDefault.length === 1
+        ) {
+          yield* put(selectPaymentPspAction(bundlesSortedByDefault[0]));
+        }
+        if (bundlesSortedByDefault.length === 0) {
+          yield* put(
+            paymentsCalculatePaymentFeesAction.failure({
+              ...getGenericError(new Error(`Error: The bundles list is empty`))
+            })
+          );
+          return;
         }
         const sortedResponse: CalculateFeeResponse = {
           ...res.value,
           bundles: res.value.bundles
         };
-        yield* put(walletPaymentCalculateFees.success(sortedResponse));
+        yield* put(paymentsCalculatePaymentFeesAction.success(sortedResponse));
         return;
       }
       yield* put(
-        walletPaymentCalculateFees.failure({
+        paymentsCalculatePaymentFeesAction.failure({
           ...getGenericError(new Error(`Error: ${res.status}`))
         })
       );
     }
   } catch (e) {
-    yield* put(walletPaymentCalculateFees.failure({ ...getNetworkError(e) }));
+    yield* put(
+      paymentsCalculatePaymentFeesAction.failure({ ...getNetworkError(e) })
+    );
   }
 }
diff --git a/ts/features/walletV3/payment/saga/networking/handleWalletPaymentCreateTransaction.ts b/ts/features/payments/checkout/saga/networking/handleWalletPaymentCreateTransaction.ts
similarity index 74%
rename from ts/features/walletV3/payment/saga/networking/handleWalletPaymentCreateTransaction.ts
rename to ts/features/payments/checkout/saga/networking/handleWalletPaymentCreateTransaction.ts
index 770d24100d1..d99fc8a324f 100644
--- a/ts/features/walletV3/payment/saga/networking/handleWalletPaymentCreateTransaction.ts
+++ b/ts/features/payments/checkout/saga/networking/handleWalletPaymentCreateTransaction.ts
@@ -6,20 +6,20 @@ import { SagaCallReturnType } from "../../../../../types/utils";
 import { getGenericError, getNetworkError } from "../../../../../utils/errors";
 import { readablePrivacyReport } from "../../../../../utils/reporters";
 import { withRefreshApiCall } from "../../../../fastLogin/saga/utils";
-import { PaymentClient } from "../../api/client";
-import { walletPaymentCreateTransaction } from "../../store/actions/networking";
+import { PaymentClient } from "../../../common/api/client";
+import { paymentsCreateTransactionAction } from "../../store/actions/networking";
 import { getOrFetchWalletSessionToken } from "./handleWalletPaymentNewSessionToken";
 
 export function* handleWalletPaymentCreateTransaction(
   newTransaction: PaymentClient["newTransaction"],
-  action: ActionType<(typeof walletPaymentCreateTransaction)["request"]>
+  action: ActionType<(typeof paymentsCreateTransactionAction)["request"]>
 ) {
   try {
     const sessionToken = yield* getOrFetchWalletSessionToken();
 
     if (sessionToken === undefined) {
       yield* put(
-        walletPaymentCreateTransaction.failure({
+        paymentsCreateTransactionAction.failure({
           ...getGenericError(new Error(`Missing session token`))
         })
       );
@@ -42,18 +42,18 @@ export function* handleWalletPaymentCreateTransaction(
         newTransactionResult,
         E.fold(
           error =>
-            walletPaymentCreateTransaction.failure({
+            paymentsCreateTransactionAction.failure({
               ...getGenericError(new Error(readablePrivacyReport(error)))
             }),
           ({ status, value }) => {
             if (status === 200) {
-              return walletPaymentCreateTransaction.success(value);
+              return paymentsCreateTransactionAction.success(value);
             } else if (status === 400) {
-              return walletPaymentCreateTransaction.failure({
+              return paymentsCreateTransactionAction.failure({
                 ...getGenericError(new Error(`Error: ${status}`))
               });
             } else {
-              return walletPaymentCreateTransaction.failure(value);
+              return paymentsCreateTransactionAction.failure(value);
             }
           }
         )
@@ -61,7 +61,7 @@ export function* handleWalletPaymentCreateTransaction(
     );
   } catch (e) {
     yield* put(
-      walletPaymentCreateTransaction.failure({ ...getNetworkError(e) })
+      paymentsCreateTransactionAction.failure({ ...getNetworkError(e) })
     );
   }
 }
diff --git a/ts/features/walletV3/payment/saga/networking/handleWalletPaymentDeleteTransaction.ts b/ts/features/payments/checkout/saga/networking/handleWalletPaymentDeleteTransaction.ts
similarity index 77%
rename from ts/features/walletV3/payment/saga/networking/handleWalletPaymentDeleteTransaction.ts
rename to ts/features/payments/checkout/saga/networking/handleWalletPaymentDeleteTransaction.ts
index 60448894856..6f49a581021 100644
--- a/ts/features/walletV3/payment/saga/networking/handleWalletPaymentDeleteTransaction.ts
+++ b/ts/features/payments/checkout/saga/networking/handleWalletPaymentDeleteTransaction.ts
@@ -6,20 +6,20 @@ import { SagaCallReturnType } from "../../../../../types/utils";
 import { getGenericError, getNetworkError } from "../../../../../utils/errors";
 import { readablePrivacyReport } from "../../../../../utils/reporters";
 import { withRefreshApiCall } from "../../../../fastLogin/saga/utils";
-import { PaymentClient } from "../../api/client";
-import { walletPaymentDeleteTransaction } from "../../store/actions/networking";
+import { PaymentClient } from "../../../common/api/client";
+import { paymentsDeleteTransactionAction } from "../../store/actions/networking";
 import { getOrFetchWalletSessionToken } from "./handleWalletPaymentNewSessionToken";
 
 export function* handleWalletPaymentDeleteTransaction(
   requestTransactionUserCancellation: PaymentClient["requestTransactionUserCancellation"],
-  action: ActionType<(typeof walletPaymentDeleteTransaction)["request"]>
+  action: ActionType<(typeof paymentsDeleteTransactionAction)["request"]>
 ) {
   try {
     const sessionToken = yield* getOrFetchWalletSessionToken();
 
     if (sessionToken === undefined) {
       yield* put(
-        walletPaymentDeleteTransaction.failure({
+        paymentsDeleteTransactionAction.failure({
           ...getGenericError(new Error(`Missing session token`))
         })
       );
@@ -43,15 +43,15 @@ export function* handleWalletPaymentDeleteTransaction(
         requestTransactionUserCancellationResult,
         E.fold(
           error =>
-            walletPaymentDeleteTransaction.failure({
+            paymentsDeleteTransactionAction.failure({
               ...getGenericError(new Error(readablePrivacyReport(error)))
             }),
 
           res => {
             if (res.status === 202) {
-              return walletPaymentDeleteTransaction.success();
+              return paymentsDeleteTransactionAction.success();
             }
-            return walletPaymentDeleteTransaction.failure({
+            return paymentsDeleteTransactionAction.failure({
               ...getGenericError(new Error(`Error: ${res.status}`))
             });
           }
@@ -60,7 +60,7 @@ export function* handleWalletPaymentDeleteTransaction(
     );
   } catch (e) {
     yield* put(
-      walletPaymentDeleteTransaction.failure({ ...getNetworkError(e) })
+      paymentsDeleteTransactionAction.failure({ ...getNetworkError(e) })
     );
   }
 }
diff --git a/ts/features/walletV3/payment/saga/networking/handleWalletPaymentGetAllMethods.ts b/ts/features/payments/checkout/saga/networking/handleWalletPaymentGetAllMethods.ts
similarity index 52%
rename from ts/features/walletV3/payment/saga/networking/handleWalletPaymentGetAllMethods.ts
rename to ts/features/payments/checkout/saga/networking/handleWalletPaymentGetAllMethods.ts
index 59210a00403..aacc0f7d348 100644
--- a/ts/features/walletV3/payment/saga/networking/handleWalletPaymentGetAllMethods.ts
+++ b/ts/features/payments/checkout/saga/networking/handleWalletPaymentGetAllMethods.ts
@@ -6,14 +6,28 @@ import { SagaCallReturnType } from "../../../../../types/utils";
 import { getGenericError, getNetworkError } from "../../../../../utils/errors";
 import { readablePrivacyReport } from "../../../../../utils/reporters";
 import { withRefreshApiCall } from "../../../../fastLogin/saga/utils";
-import { WalletClient } from "../../../common/api/client";
-import { walletPaymentGetAllMethods } from "../../store/actions/networking";
+import { PaymentClient } from "../../../common/api/client";
+import { paymentsGetPaymentMethodsAction } from "../../store/actions/networking";
+import { getOrFetchWalletSessionToken } from "./handleWalletPaymentNewSessionToken";
 
 export function* handleWalletPaymentGetAllMethods(
-  getAllPaymentMethods: WalletClient["getAllPaymentMethods"],
-  action: ActionType<(typeof walletPaymentGetAllMethods)["request"]>
+  getAllPaymentMethods: PaymentClient["getAllPaymentMethods"],
+  action: ActionType<(typeof paymentsGetPaymentMethodsAction)["request"]>
 ) {
-  const getAllPaymentMethodsRequest = getAllPaymentMethods({});
+  const sessionToken = yield* getOrFetchWalletSessionToken();
+
+  if (sessionToken === undefined) {
+    yield* put(
+      paymentsGetPaymentMethodsAction.failure({
+        ...getGenericError(new Error(`Missing session token`))
+      })
+    );
+    return;
+  }
+
+  const getAllPaymentMethodsRequest = getAllPaymentMethods({
+    eCommerceSessionToken: sessionToken
+  });
 
   try {
     const getAllPaymentMethodsResult = (yield* call(
@@ -27,15 +41,15 @@ export function* handleWalletPaymentGetAllMethods(
         getAllPaymentMethodsResult,
         E.fold(
           error =>
-            walletPaymentGetAllMethods.failure({
+            paymentsGetPaymentMethodsAction.failure({
               ...getGenericError(new Error(readablePrivacyReport(error)))
             }),
 
           res => {
             if (res.status === 200) {
-              return walletPaymentGetAllMethods.success(res.value);
+              return paymentsGetPaymentMethodsAction.success(res.value);
             }
-            return walletPaymentGetAllMethods.failure({
+            return paymentsGetPaymentMethodsAction.failure({
               ...getGenericError(new Error(`Error: ${res.status}`))
             });
           }
@@ -43,6 +57,8 @@ export function* handleWalletPaymentGetAllMethods(
       )
     );
   } catch (e) {
-    yield* put(walletPaymentGetAllMethods.failure({ ...getNetworkError(e) }));
+    yield* put(
+      paymentsGetPaymentMethodsAction.failure({ ...getNetworkError(e) })
+    );
   }
 }
diff --git a/ts/features/walletV3/payment/saga/networking/handleWalletPaymentGetDetails.ts b/ts/features/payments/checkout/saga/networking/handleWalletPaymentGetDetails.ts
similarity index 73%
rename from ts/features/walletV3/payment/saga/networking/handleWalletPaymentGetDetails.ts
rename to ts/features/payments/checkout/saga/networking/handleWalletPaymentGetDetails.ts
index 9b4d35ecb89..7501d53c359 100644
--- a/ts/features/walletV3/payment/saga/networking/handleWalletPaymentGetDetails.ts
+++ b/ts/features/payments/checkout/saga/networking/handleWalletPaymentGetDetails.ts
@@ -6,20 +6,20 @@ import { SagaCallReturnType } from "../../../../../types/utils";
 import { getGenericError, getNetworkError } from "../../../../../utils/errors";
 import { readablePrivacyReport } from "../../../../../utils/reporters";
 import { withRefreshApiCall } from "../../../../fastLogin/saga/utils";
-import { PaymentClient } from "../../api/client";
-import { walletPaymentGetDetails } from "../../store/actions/networking";
+import { PaymentClient } from "../../../common/api/client";
+import { paymentsGetPaymentDetailsAction } from "../../store/actions/networking";
 import { getOrFetchWalletSessionToken } from "./handleWalletPaymentNewSessionToken";
 
 export function* handleWalletPaymentGetDetails(
   getPaymentRequestInfo: PaymentClient["getPaymentRequestInfo"],
-  action: ActionType<(typeof walletPaymentGetDetails)["request"]>
+  action: ActionType<(typeof paymentsGetPaymentDetailsAction)["request"]>
 ) {
   try {
     const sessionToken = yield* getOrFetchWalletSessionToken();
 
     if (sessionToken === undefined) {
       yield* put(
-        walletPaymentGetDetails.failure(
+        paymentsGetPaymentDetailsAction.failure(
           getGenericError(new Error(`Missing session token`))
         )
       );
@@ -42,24 +42,26 @@ export function* handleWalletPaymentGetDetails(
         getPaymentRequestInfoResult,
         E.fold(
           error =>
-            walletPaymentGetDetails.failure({
+            paymentsGetPaymentDetailsAction.failure({
               ...getGenericError(new Error(readablePrivacyReport(error)))
             }),
           ({ status, value }) => {
             if (status === 200) {
-              return walletPaymentGetDetails.success(value);
+              return paymentsGetPaymentDetailsAction.success(value);
             } else if (status === 400) {
-              return walletPaymentGetDetails.failure({
+              return paymentsGetPaymentDetailsAction.failure({
                 ...getGenericError(new Error(`Error: ${status}`))
               });
             } else {
-              return walletPaymentGetDetails.failure(value);
+              return paymentsGetPaymentDetailsAction.failure(value);
             }
           }
         )
       )
     );
   } catch (e) {
-    yield* put(walletPaymentGetDetails.failure({ ...getNetworkError(e) }));
+    yield* put(
+      paymentsGetPaymentDetailsAction.failure({ ...getNetworkError(e) })
+    );
   }
 }
diff --git a/ts/features/walletV3/payment/saga/networking/handleWalletPaymentGetTransactionInfo.ts b/ts/features/payments/checkout/saga/networking/handleWalletPaymentGetTransactionInfo.ts
similarity index 74%
rename from ts/features/walletV3/payment/saga/networking/handleWalletPaymentGetTransactionInfo.ts
rename to ts/features/payments/checkout/saga/networking/handleWalletPaymentGetTransactionInfo.ts
index be09557b229..792f2562e9f 100644
--- a/ts/features/walletV3/payment/saga/networking/handleWalletPaymentGetTransactionInfo.ts
+++ b/ts/features/payments/checkout/saga/networking/handleWalletPaymentGetTransactionInfo.ts
@@ -6,19 +6,21 @@ import { SagaCallReturnType } from "../../../../../types/utils";
 import { getGenericError, getNetworkError } from "../../../../../utils/errors";
 import { readablePrivacyReport } from "../../../../../utils/reporters";
 import { withRefreshApiCall } from "../../../../fastLogin/saga/utils";
-import { PaymentClient } from "../../api/client";
-import { walletPaymentGetTransactionInfo } from "../../store/actions/networking";
+import { PaymentClient } from "../../../common/api/client";
+import { paymentsGetPaymentTransactionInfoAction } from "../../store/actions/networking";
 import { getOrFetchWalletSessionToken } from "./handleWalletPaymentNewSessionToken";
 
 export function* handleWalletPaymentGetTransactionInfo(
   getTransactionInfo: PaymentClient["getTransactionInfo"],
-  action: ActionType<(typeof walletPaymentGetTransactionInfo)["request"]>
+  action: ActionType<
+    (typeof paymentsGetPaymentTransactionInfoAction)["request"]
+  >
 ) {
   const sessionToken = yield* getOrFetchWalletSessionToken();
 
   if (sessionToken === undefined) {
     yield* put(
-      walletPaymentGetTransactionInfo.failure({
+      paymentsGetPaymentTransactionInfoAction.failure({
         ...getGenericError(new Error(`Missing session token`))
       })
     );
@@ -42,14 +44,14 @@ export function* handleWalletPaymentGetTransactionInfo(
         getTransactionInfoResult,
         E.fold(
           error =>
-            walletPaymentGetTransactionInfo.failure({
+            paymentsGetPaymentTransactionInfoAction.failure({
               ...getGenericError(new Error(readablePrivacyReport(error)))
             }),
           ({ status, value }) => {
             if (status === 200) {
-              return walletPaymentGetTransactionInfo.success(value);
+              return paymentsGetPaymentTransactionInfoAction.success(value);
             } else {
-              return walletPaymentGetTransactionInfo.failure({
+              return paymentsGetPaymentTransactionInfoAction.failure({
                 ...getGenericError(new Error(JSON.stringify(value)))
               });
             }
@@ -59,7 +61,7 @@ export function* handleWalletPaymentGetTransactionInfo(
     );
   } catch (e) {
     yield* put(
-      walletPaymentGetTransactionInfo.failure({ ...getNetworkError(e) })
+      paymentsGetPaymentTransactionInfoAction.failure({ ...getNetworkError(e) })
     );
   }
 }
diff --git a/ts/features/payments/checkout/saga/networking/handleWalletPaymentGetUserWallets.ts b/ts/features/payments/checkout/saga/networking/handleWalletPaymentGetUserWallets.ts
new file mode 100644
index 00000000000..b4c58411096
--- /dev/null
+++ b/ts/features/payments/checkout/saga/networking/handleWalletPaymentGetUserWallets.ts
@@ -0,0 +1,68 @@
+import * as E from "fp-ts/lib/Either";
+import { pipe } from "fp-ts/lib/function";
+import { call, put } from "typed-redux-saga/macro";
+import { ActionType } from "typesafe-actions";
+import { SagaCallReturnType } from "../../../../../types/utils";
+import { getGenericError, getNetworkError } from "../../../../../utils/errors";
+import { readablePrivacyReport } from "../../../../../utils/reporters";
+import { withRefreshApiCall } from "../../../../fastLogin/saga/utils";
+import { PaymentClient } from "../../../common/api/client";
+import { paymentsGetPaymentUserMethodsAction } from "../../store/actions/networking";
+import { getOrFetchWalletSessionToken } from "./handleWalletPaymentNewSessionToken";
+
+export function* handleWalletPaymentGetUserWallets(
+  getWalletsByIdUser: PaymentClient["getWalletsByIdUser"],
+  action: ActionType<(typeof paymentsGetPaymentUserMethodsAction)["request"]>
+) {
+  const sessionToken = yield* getOrFetchWalletSessionToken();
+
+  if (sessionToken === undefined) {
+    yield* put(
+      paymentsGetPaymentUserMethodsAction.failure({
+        ...getGenericError(new Error(`Missing session token`))
+      })
+    );
+    return;
+  }
+
+  const getWalletsByIdUserRequest = getWalletsByIdUser({
+    eCommerceSessionToken: sessionToken
+  });
+
+  try {
+    const getWalletsByIdUserResult = (yield* call(
+      withRefreshApiCall,
+      getWalletsByIdUserRequest,
+      action
+    )) as SagaCallReturnType<typeof getWalletsByIdUser>;
+
+    yield* put(
+      pipe(
+        getWalletsByIdUserResult,
+        E.fold(
+          error =>
+            paymentsGetPaymentUserMethodsAction.failure(
+              getGenericError(new Error(readablePrivacyReport(error)))
+            ),
+          res => {
+            if (res.status === 200) {
+              return paymentsGetPaymentUserMethodsAction.success(res.value);
+            }
+            if (res.status === 404) {
+              return paymentsGetPaymentUserMethodsAction.success({
+                wallets: []
+              });
+            }
+            return paymentsGetPaymentUserMethodsAction.failure({
+              ...getGenericError(new Error(`Error: ${res.status}`))
+            });
+          }
+        )
+      )
+    );
+  } catch (e) {
+    yield* put(
+      paymentsGetPaymentUserMethodsAction.failure({ ...getNetworkError(e) })
+    );
+  }
+}
diff --git a/ts/features/walletV3/payment/saga/networking/handleWalletPaymentNewSessionToken.ts b/ts/features/payments/checkout/saga/networking/handleWalletPaymentNewSessionToken.ts
similarity index 78%
rename from ts/features/walletV3/payment/saga/networking/handleWalletPaymentNewSessionToken.ts
rename to ts/features/payments/checkout/saga/networking/handleWalletPaymentNewSessionToken.ts
index e3f8e1ac084..32119d66b68 100644
--- a/ts/features/walletV3/payment/saga/networking/handleWalletPaymentNewSessionToken.ts
+++ b/ts/features/payments/checkout/saga/networking/handleWalletPaymentNewSessionToken.ts
@@ -6,8 +6,8 @@ import { SagaCallReturnType } from "../../../../../types/utils";
 import { getGenericError, getNetworkError } from "../../../../../utils/errors";
 import { readablePrivacyReport } from "../../../../../utils/reporters";
 import { withRefreshApiCall } from "../../../../fastLogin/saga/utils";
-import { PaymentClient } from "../../api/client";
-import { walletPaymentNewSessionToken } from "../../store/actions/networking";
+import { PaymentClient } from "../../../common/api/client";
+import { paymentsGetNewSessionTokenAction } from "../../store/actions/networking";
 import { selectWalletPaymentSessionToken } from "../../store/selectors";
 
 /**
@@ -30,12 +30,12 @@ export function* getOrFetchWalletSessionToken(timeoutMs: number = 3000) {
   }
 
   // If the session token is not present, dispatch a new request action
-  yield* put(walletPaymentNewSessionToken.request());
+  yield* put(paymentsGetNewSessionTokenAction.request());
 
   // Wait for the request to end, either in success or failure, with a timeout
   const { data } = yield* race({
-    data: take(walletPaymentNewSessionToken.success),
-    failure: take(walletPaymentNewSessionToken.failure),
+    data: take(paymentsGetNewSessionTokenAction.success),
+    failure: take(paymentsGetNewSessionTokenAction.failure),
     timeout: delay(timeoutMs)
   });
 
@@ -45,7 +45,7 @@ export function* getOrFetchWalletSessionToken(timeoutMs: number = 3000) {
 
 export function* handleWalletPaymentNewSessionToken(
   newSessionToken: PaymentClient["newSessionToken"],
-  action: ActionType<(typeof walletPaymentNewSessionToken)["request"]>
+  action: ActionType<(typeof paymentsGetNewSessionTokenAction)["request"]>
 ) {
   const newSessionTokenRequest = newSessionToken({});
 
@@ -61,14 +61,14 @@ export function* handleWalletPaymentNewSessionToken(
         newSessionTokenResult,
         E.fold(
           error =>
-            walletPaymentNewSessionToken.failure({
+            paymentsGetNewSessionTokenAction.failure({
               ...getGenericError(new Error(readablePrivacyReport(error)))
             }),
           ({ status, value }) => {
             if (status === 200) {
-              return walletPaymentNewSessionToken.success(value);
+              return paymentsGetNewSessionTokenAction.success(value);
             } else {
-              return walletPaymentNewSessionToken.failure({
+              return paymentsGetNewSessionTokenAction.failure({
                 ...getGenericError(new Error(`Error: ${status}`))
               });
             }
@@ -77,6 +77,8 @@ export function* handleWalletPaymentNewSessionToken(
       )
     );
   } catch (e) {
-    yield* put(walletPaymentNewSessionToken.failure({ ...getNetworkError(e) }));
+    yield* put(
+      paymentsGetNewSessionTokenAction.failure({ ...getNetworkError(e) })
+    );
   }
 }
diff --git a/ts/features/walletV3/payment/screens/WalletPaymentConfirmScreen.tsx b/ts/features/payments/checkout/screens/WalletPaymentConfirmScreen.tsx
similarity index 81%
rename from ts/features/walletV3/payment/screens/WalletPaymentConfirmScreen.tsx
rename to ts/features/payments/checkout/screens/WalletPaymentConfirmScreen.tsx
index 7306b4f6750..6deea893463 100644
--- a/ts/features/walletV3/payment/screens/WalletPaymentConfirmScreen.tsx
+++ b/ts/features/payments/checkout/screens/WalletPaymentConfirmScreen.tsx
@@ -5,24 +5,18 @@ import {
   VSpacer
 } from "@pagopa/io-app-design-system";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { useNavigation } from "@react-navigation/native";
 import { sequenceS } from "fp-ts/lib/Apply";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import React from "react";
 import { SafeAreaView, StyleSheet } from "react-native";
 import { AmountEuroCents } from "../../../../../definitions/pagopa/ecommerce/AmountEuroCents";
-import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 import I18n from "../../../../i18n";
-import {
-  AppParamsList,
-  IOStackNavigationProp
-} from "../../../../navigation/params/AppParamsList";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 import { useIOSelector } from "../../../../store/hooks";
-import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
 import { WalletPaymentConfirmContent } from "../components/WalletPaymentConfirmContent";
 import { useWalletPaymentAuthorizationModal } from "../hooks/useWalletPaymentAuthorizationModal";
-import { WalletPaymentRoutes } from "../navigation/routes";
+import { PaymentsCheckoutRoutes } from "../navigation/routes";
 import {
   walletPaymentDetailsSelector,
   walletPaymentPickedPaymentMethodSelector,
@@ -35,7 +29,7 @@ import {
 } from "../types/PaymentOutcomeEnum";
 
 const WalletPaymentConfirmScreen = () => {
-  const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
+  const navigation = useIONavigation();
 
   const paymentDetailsPot = useIOSelector(walletPaymentDetailsSelector);
   const transactionPot = useIOSelector(walletPaymentTransactionSelector);
@@ -44,13 +38,6 @@ const WalletPaymentConfirmScreen = () => {
   );
   const selectedPspOption = useIOSelector(walletPaymentPickedPspSelector);
 
-  useHeaderSecondLevel({
-    title: "",
-    contextualHelp: emptyContextualHelp,
-    faqCategories: ["payment"],
-    supportRequest: true
-  });
-
   const handleStartPaymentAuthorization = () =>
     pipe(
       sequenceS(O.Monad)({
@@ -72,8 +59,8 @@ const WalletPaymentConfirmScreen = () => {
 
   const handleAuthorizationOutcome = React.useCallback(
     (outcome: WalletPaymentOutcome) => {
-      navigation.navigate(WalletPaymentRoutes.WALLET_PAYMENT_MAIN, {
-        screen: WalletPaymentRoutes.WALLET_PAYMENT_OUTCOME,
+      navigation.replace(PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR, {
+        screen: PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_OUTCOME,
         params: {
           outcome
         }
@@ -88,9 +75,7 @@ const WalletPaymentConfirmScreen = () => {
     isPendingAuthorization,
     startPaymentAuthorizaton
   } = useWalletPaymentAuthorizationModal({
-    onAuthorizationOutcome: handleAuthorizationOutcome,
-    onDismiss: () =>
-      handleAuthorizationOutcome(WalletPaymentOutcomeEnum.CANCELED_BY_USER)
+    onAuthorizationOutcome: handleAuthorizationOutcome
   });
 
   const isLoading = isAuthUrlLoading || isPendingAuthorization;
diff --git a/ts/features/walletV3/payment/screens/WalletPaymentDetailScreen.tsx b/ts/features/payments/checkout/screens/WalletPaymentDetailScreen.tsx
similarity index 90%
rename from ts/features/walletV3/payment/screens/WalletPaymentDetailScreen.tsx
rename to ts/features/payments/checkout/screens/WalletPaymentDetailScreen.tsx
index 7969f2c538d..cd6a435a15a 100644
--- a/ts/features/walletV3/payment/screens/WalletPaymentDetailScreen.tsx
+++ b/ts/features/payments/checkout/screens/WalletPaymentDetailScreen.tsx
@@ -46,19 +46,20 @@ import {
   formatNumberAmount
 } from "../../../../utils/stringBuilder";
 import { WalletPaymentFailureDetail } from "../components/WalletPaymentFailureDetail";
-import { WalletPaymentParamsList } from "../navigation/params";
-import { WalletPaymentRoutes } from "../navigation/routes";
-import { walletPaymentGetDetails } from "../store/actions/networking";
+import { PaymentsCheckoutParamsList } from "../navigation/params";
+import { PaymentsCheckoutRoutes } from "../navigation/routes";
+import { paymentsGetPaymentDetailsAction } from "../store/actions/networking";
 import { walletPaymentDetailsSelector } from "../store/selectors";
-import { WalletPaymentFailure } from "../types/failure";
+import { WalletPaymentFailure } from "../types/WalletPaymentFailure";
+import { storeNewPaymentAttemptAction } from "../../history/store/actions";
 
 type WalletPaymentDetailScreenNavigationParams = {
   rptId: RptId;
 };
 
 type WalletPaymentDetailRouteProps = RouteProp<
-  WalletPaymentParamsList,
-  "WALLET_PAYMENT_DETAIL"
+  PaymentsCheckoutParamsList,
+  "PAYMENT_CHECKOUT_DETAIL"
 >;
 
 const WalletPaymentDetailScreen = () => {
@@ -70,7 +71,7 @@ const WalletPaymentDetailScreen = () => {
 
   useFocusEffect(
     React.useCallback(() => {
-      dispatch(walletPaymentGetDetails.request(rptId));
+      dispatch(paymentsGetPaymentDetailsAction.request(rptId));
     }, [dispatch, rptId])
   );
 
@@ -117,6 +118,7 @@ const WalletPaymentDetailContent = ({
   rptId,
   payment
 }: WalletPaymentDetailContentProps) => {
+  const dispatch = useIODispatch();
   const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
 
   useLayoutEffect(() => {
@@ -131,9 +133,10 @@ const WalletPaymentDetailContent = ({
     contextualHelp: emptyContextualHelp
   });
 
-  const navigateToMethodSelection = () => {
-    navigation.push(WalletPaymentRoutes.WALLET_PAYMENT_MAIN, {
-      screen: WalletPaymentRoutes.WALLET_PAYMENT_PICK_METHOD
+  const navigateToMakePaymentScreen = () => {
+    dispatch(storeNewPaymentAttemptAction(rptId));
+    navigation.navigate(PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR, {
+      screen: PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_MAKE
     });
   };
 
@@ -157,7 +160,7 @@ const WalletPaymentDetailContent = ({
   );
 
   const amount = pipe(payment.amount, centsToAmount, amount =>
-    formatNumberAmount(amount, true)
+    formatNumberAmount(amount, true, "right")
   );
 
   const dueDate = pipe(
@@ -200,7 +203,7 @@ const WalletPaymentDetailContent = ({
       primaryActionProps={{
         label: "Vai al pagamento",
         accessibilityLabel: "Vai al pagmento",
-        onPress: navigateToMethodSelection
+        onPress: navigateToMakePaymentScreen
       }}
     >
       <ListItemInfo
diff --git a/ts/features/walletV3/payment/screens/WalletPaymentInputFiscalCodeScreen.tsx b/ts/features/payments/checkout/screens/WalletPaymentInputFiscalCodeScreen.tsx
similarity index 56%
rename from ts/features/walletV3/payment/screens/WalletPaymentInputFiscalCodeScreen.tsx
rename to ts/features/payments/checkout/screens/WalletPaymentInputFiscalCodeScreen.tsx
index 8c4925f0909..03580b0834e 100644
--- a/ts/features/walletV3/payment/screens/WalletPaymentInputFiscalCodeScreen.tsx
+++ b/ts/features/payments/checkout/screens/WalletPaymentInputFiscalCodeScreen.tsx
@@ -19,10 +19,13 @@ import * as O from "fp-ts/lib/Option";
 import { flow, pipe } from "fp-ts/lib/function";
 import React from "react";
 import {
+  AccessibilityInfo,
+  Keyboard,
   KeyboardAvoidingView,
   Platform,
   SafeAreaView,
-  View
+  View,
+  findNodeHandle
 } from "react-native";
 import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
 import I18n from "../../../../i18n";
@@ -39,15 +42,16 @@ import {
   decodeOrganizationFiscalCode,
   validateOrganizationFiscalCode
 } from "../../common/utils/validation";
-import { WalletPaymentParamsList } from "../navigation/params";
+import { usePagoPaPayment } from "../hooks/usePagoPaPayment";
+import { PaymentsCheckoutParamsList } from "../navigation/params";
 
 export type WalletPaymentInputFiscalCodeScreenNavigationParams = {
   paymentNoticeNumber: O.Option<PaymentNoticeNumberFromString>;
 };
 
 type WalletPaymentInputFiscalCodeRouteProps = RouteProp<
-  WalletPaymentParamsList,
-  "WALLET_PAYMENT_INPUT_FISCAL_CODE"
+  PaymentsCheckoutParamsList,
+  "PAYMENT_CHECKOUT_INPUT_FISCAL_CODE"
 >;
 
 type InputState = {
@@ -59,11 +63,23 @@ const WalletPaymentInputFiscalCodeScreen = () => {
   const { params } = useRoute<WalletPaymentInputFiscalCodeRouteProps>();
   const dispatch = useIODispatch();
   const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
+
+  const { startPaymentFlowWithRptId, isNewWalletSectionEnabled } =
+    usePagoPaPayment();
+
   const [inputState, setInputState] = React.useState<InputState>({
     fiscalCodeText: "",
     fiscalCode: O.none
   });
 
+  const textInputWrappperRef = React.useRef<View>(null);
+  const focusTextInput = () => {
+    const textInputA11yWrapper = findNodeHandle(textInputWrappperRef.current);
+    if (textInputA11yWrapper) {
+      AccessibilityInfo.setAccessibilityFocus(textInputA11yWrapper);
+    }
+  };
+
   const navigateToTransactionSummary = () => {
     pipe(
       sequenceS(O.Monad)({
@@ -72,20 +88,37 @@ const WalletPaymentInputFiscalCodeScreen = () => {
       }),
       O.chain(flow(RptId.decode, O.fromEither)),
       O.map(rptId => {
-        dispatch(paymentInitializeState());
-        navigation.navigate(ROUTES.WALLET_NAVIGATOR, {
-          screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
-          params: {
-            // Set the initial amount to a fixed value (1) because it is not used
-            initialAmount: "1" as AmountInEuroCents,
-            rptId,
-            paymentStartOrigin: "manual_insertion"
-          }
-        });
+        // Removes the manual input screen from the stack
+        navigation.popToTop();
+        navigation.pop();
+        // Navigate to the payment details screen (payment verification)
+        if (isNewWalletSectionEnabled) {
+          startPaymentFlowWithRptId(rptId);
+        } else {
+          dispatch(paymentInitializeState());
+          navigation.navigate(ROUTES.WALLET_NAVIGATOR, {
+            screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
+            params: {
+              // Set the initial amount to a fixed value (1) because it is not used
+              initialAmount: "1" as AmountInEuroCents,
+              rptId,
+              paymentStartOrigin: "manual_insertion"
+            }
+          });
+        }
       })
     );
   };
 
+  const handleContinueClick = () =>
+    pipe(
+      inputState.fiscalCode,
+      O.fold(() => {
+        Keyboard.dismiss();
+        focusTextInput();
+      }, navigateToTransactionSummary)
+    );
+
   return (
     <BaseScreenComponent goBack={true} contextualHelp={emptyContextualHelp}>
       <SafeAreaView style={IOStyles.flex}>
@@ -95,29 +128,32 @@ const WalletPaymentInputFiscalCodeScreen = () => {
             <VSpacer size={16} />
             <Body>{I18n.t("wallet.payment.manual.fiscalCode.subtitle")}</Body>
             <VSpacer size={16} />
-            <TextInputValidation
-              placeholder={I18n.t(
-                "wallet.payment.manual.fiscalCode.placeholder"
-              )}
-              accessibilityLabel={I18n.t(
-                "wallet.payment.manual.fiscalCode.placeholder"
-              )}
-              value={inputState.fiscalCodeText}
-              icon="fiscalCodeIndividual"
-              onChangeText={value =>
-                setInputState({
-                  fiscalCodeText: value,
-                  fiscalCode: decodeOrganizationFiscalCode(value)
-                })
-              }
-              onValidate={validateOrganizationFiscalCode}
-              counterLimit={11}
-              textInputProps={{
-                keyboardType: "number-pad",
-                inputMode: "numeric",
-                returnKeyType: "done"
-              }}
-            />
+            <View ref={textInputWrappperRef}>
+              <TextInputValidation
+                placeholder={I18n.t(
+                  "wallet.payment.manual.fiscalCode.placeholder"
+                )}
+                accessibilityLabel={I18n.t(
+                  "wallet.payment.manual.fiscalCode.placeholder"
+                )}
+                value={inputState.fiscalCodeText}
+                icon="fiscalCodeIndividual"
+                onChangeText={value =>
+                  setInputState({
+                    fiscalCodeText: value,
+                    fiscalCode: decodeOrganizationFiscalCode(value)
+                  })
+                }
+                onValidate={validateOrganizationFiscalCode}
+                counterLimit={11}
+                textInputProps={{
+                  keyboardType: "number-pad",
+                  inputMode: "numeric",
+                  returnKeyType: "done"
+                }}
+                autoFocus
+              />
+            </View>
           </ContentWrapper>
         </View>
         <KeyboardAvoidingView
@@ -131,9 +167,8 @@ const WalletPaymentInputFiscalCodeScreen = () => {
             <ButtonSolid
               label="Continua"
               accessibilityLabel="Continua"
-              onPress={navigateToTransactionSummary}
+              onPress={handleContinueClick}
               fullWidth={true}
-              disabled={O.isNone(inputState.fiscalCode)}
             />
             <VSpacer size={16} />
           </ContentWrapper>
diff --git a/ts/features/walletV3/payment/screens/WalletPaymentInputNoticeNumberScreen.tsx b/ts/features/payments/checkout/screens/WalletPaymentInputNoticeNumberScreen.tsx
similarity index 57%
rename from ts/features/walletV3/payment/screens/WalletPaymentInputNoticeNumberScreen.tsx
rename to ts/features/payments/checkout/screens/WalletPaymentInputNoticeNumberScreen.tsx
index 41b1b664331..7d9e108a62b 100644
--- a/ts/features/walletV3/payment/screens/WalletPaymentInputNoticeNumberScreen.tsx
+++ b/ts/features/payments/checkout/screens/WalletPaymentInputNoticeNumberScreen.tsx
@@ -10,12 +10,16 @@ import {
 import { PaymentNoticeNumberFromString } from "@pagopa/io-pagopa-commons/lib/pagopa";
 import { useNavigation } from "@react-navigation/native";
 import * as O from "fp-ts/lib/Option";
+import { pipe } from "fp-ts/lib/function";
 import React from "react";
 import {
+  AccessibilityInfo,
+  Keyboard,
   KeyboardAvoidingView,
   Platform,
   SafeAreaView,
-  View
+  View,
+  findNodeHandle
 } from "react-native";
 import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
 import {
@@ -28,7 +32,7 @@ import {
   decodePaymentNoticeNumber,
   validatePaymentNoticeNumber
 } from "../../common/utils/validation";
-import { WalletPaymentRoutes } from "../navigation/routes";
+import { PaymentsCheckoutRoutes } from "../navigation/routes";
 import I18n from "../../../../i18n";
 
 type InputState = {
@@ -44,14 +48,32 @@ const WalletPaymentInputNoticeNumberScreen = () => {
   });
 
   const navigateToFiscalCodeInput = () => {
-    navigation.navigate(WalletPaymentRoutes.WALLET_PAYMENT_MAIN, {
-      screen: WalletPaymentRoutes.WALLET_PAYMENT_INPUT_FISCAL_CODE,
+    navigation.navigate(PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR, {
+      screen: PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_INPUT_FISCAL_CODE,
       params: {
         paymentNoticeNumber: inputState.noticeNumber
       }
     });
   };
 
+  const handleContinueClick = () =>
+    pipe(
+      inputState.noticeNumber,
+      O.fold(() => {
+        Keyboard.dismiss();
+        focusTextInput();
+      }, navigateToFiscalCodeInput)
+    );
+
+  const focusTextInput = () => {
+    const textInputA11yWrapper = findNodeHandle(textInputWrappperRef.current);
+    if (textInputA11yWrapper && O.isNone(inputState.noticeNumber)) {
+      AccessibilityInfo.setAccessibilityFocus(textInputA11yWrapper);
+    }
+  };
+
+  const textInputWrappperRef = React.useRef<View>(null);
+
   return (
     <BaseScreenComponent goBack={true} contextualHelp={emptyContextualHelp}>
       <SafeAreaView style={IOStyles.flex}>
@@ -61,29 +83,32 @@ const WalletPaymentInputNoticeNumberScreen = () => {
             <VSpacer size={16} />
             <Body>{I18n.t("wallet.payment.manual.noticeNumber.subtitle")}</Body>
             <VSpacer size={16} />
-            <TextInputValidation
-              placeholder={I18n.t(
-                "wallet.payment.manual.noticeNumber.placeholder"
-              )}
-              accessibilityLabel={I18n.t(
-                "wallet.payment.manual.noticeNumber.placeholder"
-              )}
-              value={inputState.noticeNumberText}
-              icon="docPaymentCode"
-              onChangeText={value =>
-                setInputState({
-                  noticeNumberText: value,
-                  noticeNumber: decodePaymentNoticeNumber(value)
-                })
-              }
-              onValidate={validatePaymentNoticeNumber}
-              counterLimit={18}
-              textInputProps={{
-                keyboardType: "number-pad",
-                inputMode: "numeric",
-                returnKeyType: "done"
-              }}
-            />
+            <View ref={textInputWrappperRef}>
+              <TextInputValidation
+                placeholder={I18n.t(
+                  "wallet.payment.manual.noticeNumber.placeholder"
+                )}
+                accessibilityLabel={I18n.t(
+                  "wallet.payment.manual.noticeNumber.placeholder"
+                )}
+                value={inputState.noticeNumberText}
+                icon="docPaymentCode"
+                onChangeText={value =>
+                  setInputState({
+                    noticeNumberText: value,
+                    noticeNumber: decodePaymentNoticeNumber(value)
+                  })
+                }
+                onValidate={validatePaymentNoticeNumber}
+                counterLimit={18}
+                textInputProps={{
+                  keyboardType: "number-pad",
+                  inputMode: "numeric",
+                  returnKeyType: "done"
+                }}
+                autoFocus
+              />
+            </View>
           </ContentWrapper>
         </View>
         <KeyboardAvoidingView
@@ -97,9 +122,8 @@ const WalletPaymentInputNoticeNumberScreen = () => {
             <ButtonSolid
               label="Continua"
               accessibilityLabel="Continua"
-              onPress={navigateToFiscalCodeInput}
+              onPress={handleContinueClick}
               fullWidth={true}
-              disabled={O.isNone(inputState.noticeNumber)}
             />
             <VSpacer size={16} />
           </ContentWrapper>
diff --git a/ts/features/payments/checkout/screens/WalletPaymentMakeScreen.tsx b/ts/features/payments/checkout/screens/WalletPaymentMakeScreen.tsx
new file mode 100644
index 00000000000..e3ca4ab3ee0
--- /dev/null
+++ b/ts/features/payments/checkout/screens/WalletPaymentMakeScreen.tsx
@@ -0,0 +1,49 @@
+import { IOStyles } from "@pagopa/io-app-design-system";
+import React, { useLayoutEffect } from "react";
+import { View } from "react-native";
+import PagerView from "react-native-pager-view";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { useIOSelector } from "../../../../store/hooks";
+import { WalletPaymentHeader } from "../components/WalletPaymentHeader";
+import { selectWalletPaymentCurrentStep } from "../store/selectors";
+import { WalletPaymentConfirmScreen } from "./WalletPaymentConfirmScreen";
+import { WalletPaymentPickMethodScreen } from "./WalletPaymentPickMethodScreen";
+import { WalletPaymentPickPspScreen } from "./WalletPaymentPickPspScreen";
+
+const WalletPaymentMakeScreen = () => {
+  const navigation = useIONavigation();
+  const ref = React.useRef<PagerView>(null);
+  const currentStep = useIOSelector(selectWalletPaymentCurrentStep);
+
+  React.useEffect(() => {
+    ref.current?.setPage(currentStep - 1);
+  }, [ref, currentStep]);
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      header: () => <WalletPaymentHeader currentStep={currentStep} />,
+      headerShown: true
+    });
+  }, [navigation, currentStep]);
+
+  return (
+    <PagerView
+      style={IOStyles.flex}
+      initialPage={0}
+      ref={ref}
+      scrollEnabled={false}
+    >
+      <View key="1">
+        <WalletPaymentPickMethodScreen />
+      </View>
+      <View key="2">
+        <WalletPaymentPickPspScreen />
+      </View>
+      <View key="3">
+        <WalletPaymentConfirmScreen />
+      </View>
+    </PagerView>
+  );
+};
+
+export { WalletPaymentMakeScreen };
diff --git a/ts/features/walletV3/payment/screens/WalletPaymentOutcomeScreen.tsx b/ts/features/payments/checkout/screens/WalletPaymentOutcomeScreen.tsx
similarity index 76%
rename from ts/features/walletV3/payment/screens/WalletPaymentOutcomeScreen.tsx
rename to ts/features/payments/checkout/screens/WalletPaymentOutcomeScreen.tsx
index 2019e066ea5..6f82e4141dc 100644
--- a/ts/features/walletV3/payment/screens/WalletPaymentOutcomeScreen.tsx
+++ b/ts/features/payments/checkout/screens/WalletPaymentOutcomeScreen.tsx
@@ -1,5 +1,5 @@
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { RouteProp, useNavigation, useRoute } from "@react-navigation/native";
+import { RouteProp, useRoute } from "@react-navigation/native";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import React from "react";
@@ -8,32 +8,31 @@ import {
   OperationResultScreenContentProps
 } from "../../../../components/screens/OperationResultScreenContent";
 import I18n from "../../../../i18n";
-import {
-  AppParamsList,
-  IOStackNavigationProp
-} from "../../../../navigation/params/AppParamsList";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 import { useIOSelector } from "../../../../store/hooks";
+import { profileEmailSelector } from "../../../../store/reducers/profile";
 import { formatNumberCentsToAmount } from "../../../../utils/stringBuilder";
+import { useAvoidHardwareBackButton } from "../../../../utils/useAvoidHardwareBackButton";
 import { WalletPaymentFeebackBanner } from "../components/WalletPaymentFeedbackBanner";
 import { usePaymentFailureSupportModal } from "../hooks/usePaymentFailureSupportModal";
-import { WalletPaymentParamsList } from "../navigation/params";
+import { PaymentsCheckoutParamsList } from "../navigation/params";
 import {
   walletPaymentDetailsSelector,
-  walletPaymentStartRouteSelector
+  walletPaymentOnSuccessActionSelector
 } from "../store/selectors";
 import {
   WalletPaymentOutcome,
   WalletPaymentOutcomeEnum
 } from "../types/PaymentOutcomeEnum";
-import { useAvoidHardwareBackButton } from "../../../../utils/useAvoidHardwareBackButton";
+import ROUTES from "../../../../navigation/routes";
 
 type WalletPaymentOutcomeScreenNavigationParams = {
   outcome: WalletPaymentOutcome;
 };
 
 type WalletPaymentOutcomeRouteProps = RouteProp<
-  WalletPaymentParamsList,
-  "WALLET_PAYMENT_OUTCOME"
+  PaymentsCheckoutParamsList,
+  "PAYMENT_CHECKOUT_OUTCOME"
 >;
 
 const WalletPaymentOutcomeScreen = () => {
@@ -42,9 +41,10 @@ const WalletPaymentOutcomeScreen = () => {
   const { params } = useRoute<WalletPaymentOutcomeRouteProps>();
   const { outcome } = params;
 
-  const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
+  const navigation = useIONavigation();
   const paymentDetailsPot = useIOSelector(walletPaymentDetailsSelector);
-  const paymentStartRoute = useIOSelector(walletPaymentStartRouteSelector);
+  const onSuccessAction = useIOSelector(walletPaymentOnSuccessActionSelector);
+  const profileEmailOption = useIOSelector(profileEmailSelector);
 
   const supportModal = usePaymentFailureSupportModal({
     outcome
@@ -74,13 +74,19 @@ const WalletPaymentOutcomeScreen = () => {
   };
 
   const handleClose = () => {
-    if (paymentStartRoute) {
-      navigation.navigate(paymentStartRoute.routeName, {
-        screen: paymentStartRoute.routeKey
+    if (
+      onSuccessAction === "showHome" ||
+      onSuccessAction === "showTransaction"
+    ) {
+      // Currently we do support only navigation to the wallet
+      // TODO navigate to the transaction details if payment outcome is success
+      navigation.popToTop();
+      navigation.navigate(ROUTES.MAIN, {
+        screen: ROUTES.PAYMENTS_HOME
       });
       return;
     }
-    navigation.popToTop();
+
     navigation.pop();
   };
 
@@ -183,6 +189,37 @@ const WalletPaymentOutcomeScreen = () => {
           action: contactSupportAction,
           secondaryAction: closeFailureAction
         };
+      case WalletPaymentOutcomeEnum.WAITING_CONFIRMATION_EMAIL:
+        return {
+          pictogram: "timing",
+          title: I18n.t(
+            "wallet.payment.outcome.WAITING_CONFIRMATION_EMAIL.title"
+          ),
+          subtitle: pipe(
+            profileEmailOption,
+            O.map(email =>
+              I18n.t(
+                "wallet.payment.outcome.WAITING_CONFIRMATION_EMAIL.subtitle",
+                { email }
+              )
+            ),
+            O.getOrElse(() =>
+              I18n.t(
+                "wallet.payment.outcome.WAITING_CONFIRMATION_EMAIL.defaultSubtitle"
+              )
+            )
+          ),
+          action: closeFailureAction
+        };
+      case WalletPaymentOutcomeEnum.METHOD_NOT_ENABLED:
+        return {
+          pictogram: "activate",
+          title: I18n.t("wallet.payment.outcome.METHOD_NOT_ENABLED.title"),
+          subtitle: I18n.t(
+            "wallet.payment.outcome.METHOD_NOT_ENABLED.subtitle"
+          ),
+          action: closeFailureAction
+        };
     }
   };
 
diff --git a/ts/features/walletV3/payment/screens/WalletPaymentPickMethodScreen.tsx b/ts/features/payments/checkout/screens/WalletPaymentPickMethodScreen.tsx
similarity index 73%
rename from ts/features/walletV3/payment/screens/WalletPaymentPickMethodScreen.tsx
rename to ts/features/payments/checkout/screens/WalletPaymentPickMethodScreen.tsx
index 74c73aab212..2bc9183b7b7 100644
--- a/ts/features/walletV3/payment/screens/WalletPaymentPickMethodScreen.tsx
+++ b/ts/features/payments/checkout/screens/WalletPaymentPickMethodScreen.tsx
@@ -10,7 +10,7 @@ import {
   VSpacer
 } from "@pagopa/io-app-design-system";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { useFocusEffect, useNavigation } from "@react-navigation/native";
+import { useFocusEffect } from "@react-navigation/native";
 import { sequenceS, sequenceT } from "fp-ts/lib/Apply";
 import * as A from "fp-ts/lib/Array";
 import * as O from "fp-ts/lib/Option";
@@ -18,37 +18,40 @@ import { pipe } from "fp-ts/lib/function";
 import { capitalize } from "lodash";
 import React, { useEffect, useMemo } from "react";
 import { View } from "react-native";
+import { Transfer } from "../../../../../definitions/pagopa/ecommerce/Transfer";
+import { WalletInfo } from "../../../../../definitions/pagopa/ecommerce/WalletInfo";
 import { PaymentMethodResponse } from "../../../../../definitions/pagopa/walletv3/PaymentMethodResponse";
-import { WalletInfo } from "../../../../../definitions/pagopa/walletv3/WalletInfo";
-import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 import I18n from "../../../../i18n";
-import {
-  AppParamsList,
-  IOStackNavigationProp
-} from "../../../../navigation/params/AppParamsList";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { ComponentProps } from "../../../../types/react";
-import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
 import { findFirstCaseInsensitive } from "../../../../utils/object";
-import { UIWalletInfoDetails } from "../../details/types/UIWalletInfoDetails";
+import { UIWalletInfoDetails } from "../../common/types/UIWalletInfoDetails";
 import { WalletPaymentMissingMethodsError } from "../components/WalletPaymentMissingMethodsError";
-import { useWalletPaymentGoBackHandler } from "../hooks/useWalletPaymentGoBackHandler";
 import { useOnTransactionActivationEffect } from "../hooks/useOnTransactionActivationEffect";
-import { WalletPaymentRoutes } from "../navigation/routes";
+import { PaymentsCheckoutRoutes } from "../navigation/routes";
 import {
-  walletPaymentCreateTransaction,
-  walletPaymentGetUserWallets
+  paymentsCalculatePaymentFeesAction,
+  paymentsCreateTransactionAction,
+  paymentsGetPaymentUserMethodsAction,
+  paymentsResetPaymentPspList
 } from "../store/actions/networking";
-import { walletPaymentPickPaymentMethod } from "../store/actions/orchestration";
+import {
+  selectPaymentMethodAction,
+  walletPaymentSetCurrentStep
+} from "../store/actions/orchestration";
 import {
   walletPaymentAllMethodsSelector,
   walletPaymentAmountSelector,
   walletPaymentDetailsSelector,
+  walletPaymentPickedPaymentMethodSelector,
+  walletPaymentPspListSelector,
   walletPaymentSavedMethodByIdSelector,
   walletPaymentTransactionSelector,
   walletPaymentUserWalletsSelector
 } from "../store/selectors";
 import { WalletPaymentOutcomeEnum } from "../types/PaymentOutcomeEnum";
+import { WalletPaymentStepEnum } from "../types";
 
 type SavedMethodState = {
   kind: "saved";
@@ -66,17 +69,7 @@ type SelectedMethodState = SavedMethodState | NotSavedMethodState | undefined;
 
 const WalletPaymentPickMethodScreen = () => {
   const dispatch = useIODispatch();
-  const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
-  const handleGoBack = useWalletPaymentGoBackHandler();
-
-  useHeaderSecondLevel({
-    title: "",
-    backAccessibilityLabel: I18n.t("global.buttons.back"),
-    goBack: handleGoBack,
-    contextualHelp: emptyContextualHelp,
-    faqCategories: ["payment"],
-    supportRequest: true
-  });
+  const navigation = useIONavigation();
 
   const paymentDetailsPot = useIOSelector(walletPaymentDetailsSelector);
   const getSavedtMethodById = useIOSelector(
@@ -86,6 +79,10 @@ const WalletPaymentPickMethodScreen = () => {
   const paymentMethodsPot = useIOSelector(walletPaymentAllMethodsSelector);
   const userWalletsPots = useIOSelector(walletPaymentUserWalletsSelector);
   const transactionPot = useIOSelector(walletPaymentTransactionSelector);
+  const selectedWalletOption = useIOSelector(
+    walletPaymentPickedPaymentMethodSelector
+  );
+  const pspListPot = useIOSelector(walletPaymentPspListSelector);
   // const getGenericMethodById = useIOSelector(walletPaymentGenericMethodByIdSelector);
 
   const [waitingTransactionActivation, setWaitingTransactionActivation] =
@@ -95,24 +92,66 @@ const WalletPaymentPickMethodScreen = () => {
   // only when the transaction status becomes ACTIVATED.
   useOnTransactionActivationEffect(
     React.useCallback(() => {
-      navigation.navigate(WalletPaymentRoutes.WALLET_PAYMENT_MAIN, {
-        screen: WalletPaymentRoutes.WALLET_PAYMENT_PICK_PSP
-      });
+      pipe(
+        sequenceT(O.Monad)(
+          pot.toOption(paymentAmountPot),
+          pot.toOption(transactionPot),
+          selectedWalletOption
+        ),
+        O.map(([paymentAmountInCents, transaction, selectedWallet]) => {
+          const transferList = transaction.payments.reduce(
+            (a, p) => [...a, ...(p.transferList ?? [])],
+            [] as ReadonlyArray<Transfer>
+          );
+          const paymentToken = transaction.payments[0]?.paymentToken;
+
+          dispatch(
+            paymentsCalculatePaymentFeesAction.request({
+              paymentToken,
+              paymentMethodId: selectedWallet.paymentMethodId,
+              walletId: selectedWallet.walletId,
+              paymentAmount: paymentAmountInCents,
+              transferList
+            })
+          );
+        })
+      );
       setWaitingTransactionActivation(false);
-    }, [navigation])
+    }, [dispatch, paymentAmountPot, selectedWalletOption, transactionPot])
   );
 
+  React.useEffect(() => {
+    pipe(
+      pspListPot,
+      pot.toOption,
+      O.map(pspList => {
+        if (pspList.length > 1) {
+          dispatch(walletPaymentSetCurrentStep(WalletPaymentStepEnum.PICK_PSP));
+        } else if (pspList.length >= 1) {
+          dispatch(
+            walletPaymentSetCurrentStep(
+              WalletPaymentStepEnum.CONFIRM_TRANSACTION
+            )
+          );
+        }
+      })
+    );
+  }, [pspListPot, dispatch]);
+
   const alertRef = React.useRef<View>(null);
 
   const isLoading =
     pot.isLoading(paymentMethodsPot) || pot.isLoading(userWalletsPots);
   const isLoadingTransaction =
-    pot.isLoading(transactionPot) || waitingTransactionActivation;
+    pot.isLoading(transactionPot) ||
+    waitingTransactionActivation ||
+    pot.isLoading(pspListPot);
 
   const isError =
     pot.isError(transactionPot) ||
     pot.isError(paymentMethodsPot) ||
-    pot.isError(userWalletsPots);
+    pot.isError(userWalletsPots) ||
+    pot.isError(pspListPot);
 
   const [shouldShowWarningBanner, setShouldShowWarningBanner] =
     React.useState<boolean>(false);
@@ -123,14 +162,15 @@ const WalletPaymentPickMethodScreen = () => {
     React.useCallback(() => {
       // currently we do not allow onboarding new methods in payment flow
       // dispatch(walletPaymentGetAllMethods.request());
-      dispatch(walletPaymentGetUserWallets.request());
+      dispatch(paymentsGetPaymentUserMethodsAction.request());
+      dispatch(paymentsResetPaymentPspList());
     }, [dispatch])
   );
 
   React.useEffect(() => {
     if (isError) {
-      navigation.navigate(WalletPaymentRoutes.WALLET_PAYMENT_MAIN, {
-        screen: WalletPaymentRoutes.WALLET_PAYMENT_OUTCOME,
+      navigation.replace(PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR, {
+        screen: PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_OUTCOME,
         params: {
           outcome: WalletPaymentOutcomeEnum.GENERIC_ERROR
         }
@@ -184,9 +224,9 @@ const WalletPaymentPickMethodScreen = () => {
           pot.toOption(paymentDetailsPot)
         ),
         O.map(([method, paymentDetails]) => {
-          dispatch(walletPaymentPickPaymentMethod(method));
+          dispatch(selectPaymentMethodAction(method));
           dispatch(
-            walletPaymentCreateTransaction.request({
+            paymentsCreateTransactionAction.request({
               paymentNotices: [
                 { rptId: paymentDetails.rptId, amount: paymentDetails.amount }
               ]
@@ -208,7 +248,7 @@ const WalletPaymentPickMethodScreen = () => {
     }
   }, [isLoading, genericMethodsListItems, savedMethodsListItems]);
 
-  if (!isLoading && savedMethodsListItems.length === 0) {
+  if (pot.isSome(userWalletsPots) && userWalletsPots.value.length === 0) {
     return <WalletPaymentMissingMethodsError />;
   }
 
@@ -300,23 +340,29 @@ const mapSavedToRadioItem = (
 ): RadioItem<string> | undefined => {
   const details = method.details as UIWalletInfoDetails;
 
-  if (details.maskedPan !== undefined) {
+  if (details.lastFourDigits !== undefined) {
     return {
       id: method.walletId,
-      value: `${capitalize(details.brand)} ••${details.maskedPan}`,
-      startImage: getIconWithFallback(details.brand)
+      value: `${capitalize(details.brand)} ••${details.lastFourDigits}`,
+      startImage: {
+        uri: method.paymentMethodAsset
+      }
     };
   } else if (details.maskedEmail !== undefined) {
     return {
       id: method.walletId,
       value: "PayPal",
-      startImage: getIconWithFallback("paypal")
+      startImage: {
+        uri: method.paymentMethodAsset
+      }
     };
   } else if (details.maskedNumber !== undefined) {
     return {
       id: method.walletId,
       value: "BANCOMAT Pay",
-      startImage: getIconWithFallback("bancomatpay")
+      startImage: {
+        uri: method.paymentMethodAsset
+      }
     };
   }
 
diff --git a/ts/features/walletV3/payment/screens/WalletPaymentPickPspScreen.tsx b/ts/features/payments/checkout/screens/WalletPaymentPickPspScreen.tsx
similarity index 66%
rename from ts/features/walletV3/payment/screens/WalletPaymentPickPspScreen.tsx
rename to ts/features/payments/checkout/screens/WalletPaymentPickPspScreen.tsx
index a6802e37265..7d643d5e237 100644
--- a/ts/features/walletV3/payment/screens/WalletPaymentPickPspScreen.tsx
+++ b/ts/features/payments/checkout/screens/WalletPaymentPickPspScreen.tsx
@@ -8,53 +8,38 @@ import {
   VSpacer
 } from "@pagopa/io-app-design-system";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { useFocusEffect, useNavigation } from "@react-navigation/native";
-import { sequenceT } from "fp-ts/lib/Apply";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import React from "react";
 import { Bundle } from "../../../../../definitions/pagopa/ecommerce/Bundle";
-import { Transfer } from "../../../../../definitions/pagopa/ecommerce/Transfer";
-import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 import I18n from "../../../../i18n";
-import {
-  AppParamsList,
-  IOStackNavigationProp
-} from "../../../../navigation/params/AppParamsList";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
-import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
 import { formatNumberCentsToAmount } from "../../../../utils/stringBuilder";
 import { getSortedPspList } from "../../common/utils";
 import { WalletPspListSkeleton } from "../components/WalletPspListSkeleton";
 import { useSortPspBottomSheet } from "../hooks/useSortPspBottomSheet";
-import { WalletPaymentRoutes } from "../navigation/routes";
-import { walletPaymentCalculateFees } from "../store/actions/networking";
+import { PaymentsCheckoutRoutes } from "../navigation/routes";
 import {
-  walletPaymentPickPsp,
-  walletPaymentResetPickedPsp
+  selectPaymentPspAction,
+  resetPaymentPspAction,
+  walletPaymentSetCurrentStep
 } from "../store/actions/orchestration";
 import {
-  walletPaymentAmountSelector,
-  walletPaymentPickedPaymentMethodSelector,
   walletPaymentPickedPspSelector,
-  walletPaymentPspListSelector,
-  walletPaymentTransactionSelector
+  walletPaymentPspListSelector
 } from "../store/selectors";
-import { WalletPaymentPspSortType } from "../types";
+import { WalletPaymentPspSortType, WalletPaymentStepEnum } from "../types";
 import { WalletPaymentOutcomeEnum } from "../types/PaymentOutcomeEnum";
 
 const WalletPaymentPickPspScreen = () => {
-  const paymentAmountPot = useIOSelector(walletPaymentAmountSelector);
-  const selectedWalletOption = useIOSelector(
-    walletPaymentPickedPaymentMethodSelector
-  );
   const dispatch = useIODispatch();
-  const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
+  const navigation = useIONavigation();
+
   const [showFeaturedPsp, setShowFeaturedPsp] = React.useState(true);
   const [sortType, setSortType] =
     React.useState<WalletPaymentPspSortType>("default");
 
-  const transactionPot = useIOSelector(walletPaymentTransactionSelector);
   const pspListPot = useIOSelector(walletPaymentPspListSelector);
   const selectedPspOption = useIOSelector(walletPaymentPickedPspSelector);
 
@@ -71,8 +56,8 @@ const WalletPaymentPickPspScreen = () => {
 
   React.useEffect(() => {
     if (isError) {
-      navigation.navigate(WalletPaymentRoutes.WALLET_PAYMENT_MAIN, {
-        screen: WalletPaymentRoutes.WALLET_PAYMENT_OUTCOME,
+      navigation.replace(PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR, {
+        screen: PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_OUTCOME,
         params: {
           outcome: WalletPaymentOutcomeEnum.GENERIC_ERROR
         }
@@ -80,45 +65,9 @@ const WalletPaymentPickPspScreen = () => {
     }
   }, [isError, navigation]);
 
-  useHeaderSecondLevel({
-    title: "",
-    contextualHelp: emptyContextualHelp,
-    faqCategories: ["payment"],
-    supportRequest: true
-  });
-
-  useFocusEffect(
-    React.useCallback(() => {
-      pipe(
-        sequenceT(O.Monad)(
-          pot.toOption(paymentAmountPot),
-          pot.toOption(transactionPot),
-          selectedWalletOption
-        ),
-        O.map(([paymentAmountInCents, transaction, selectedWallet]) => {
-          const transferList = transaction.payments.reduce(
-            (a, p) => [...a, ...(p.transferList ?? [])],
-            [] as ReadonlyArray<Transfer>
-          );
-          const paymentToken = transaction.payments[0]?.paymentToken;
-
-          dispatch(
-            walletPaymentCalculateFees.request({
-              paymentToken,
-              paymentMethodId: selectedWallet.paymentMethodId,
-              walletId: selectedWallet.walletId,
-              paymentAmount: paymentAmountInCents,
-              transferList
-            })
-          );
-        })
-      );
-    }, [dispatch, paymentAmountPot, selectedWalletOption, transactionPot])
-  );
-
   React.useEffect(
     () => () => {
-      dispatch(walletPaymentResetPickedPsp());
+      dispatch(resetPaymentPspAction());
     },
     [dispatch]
   );
@@ -147,16 +96,16 @@ const WalletPaymentPickPspScreen = () => {
       );
 
       if (selectedBundle) {
-        dispatch(walletPaymentPickPsp(selectedBundle));
+        dispatch(selectPaymentPspAction(selectedBundle));
       }
     },
     [dispatch, sortedPspList]
   );
 
   const handleContinue = () => {
-    navigation.navigate(WalletPaymentRoutes.WALLET_PAYMENT_MAIN, {
-      screen: WalletPaymentRoutes.WALLET_PAYMENT_CONFIRM
-    });
+    dispatch(
+      walletPaymentSetCurrentStep(WalletPaymentStepEnum.CONFIRM_TRANSACTION)
+    );
   };
 
   const sortButtonProps: ListItemHeader["endElement"] = React.useMemo(
diff --git a/ts/features/payments/checkout/store/__tests__/store.test.ts b/ts/features/payments/checkout/store/__tests__/store.test.ts
new file mode 100644
index 00000000000..c299b9c6f5c
--- /dev/null
+++ b/ts/features/payments/checkout/store/__tests__/store.test.ts
@@ -0,0 +1,40 @@
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import * as O from "fp-ts/lib/Option";
+import { createStore } from "redux";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { appReducer } from "../../../../../store/reducers";
+import { walletPaymentSetCurrentStep } from "../actions/orchestration";
+import { PaymentsCheckoutState } from "../reducers";
+
+const INITIAL_STATE: PaymentsCheckoutState = {
+  currentStep: 1,
+  sessionToken: pot.none,
+  paymentDetails: pot.none,
+  userWallets: pot.none,
+  allPaymentMethods: pot.none,
+  pspList: pot.none,
+  chosenPaymentMethod: O.none,
+  chosenPsp: O.none,
+  transaction: pot.none,
+  authorizationUrl: pot.none
+};
+
+describe("Test Payment reducer", () => {
+  it("should have initial state at startup", () => {
+    const globalState = appReducer(undefined, applicationChangeState("active"));
+    expect(globalState.features.payments.checkout).toStrictEqual(INITIAL_STATE);
+  });
+
+  it("should correctly update payment step, also when trying to overflow the steps, it should set the steps to WALLET_PAYMENT_STEP_MAX, and in case zero is passed it should set the step to 1", () => {
+    const globalState = appReducer(undefined, applicationChangeState("active"));
+    expect(globalState.features.payments.checkout).toStrictEqual(INITIAL_STATE);
+
+    const store = createStore(appReducer, globalState as any);
+
+    store.dispatch(walletPaymentSetCurrentStep(2));
+    expect(store.getState().features.payments.checkout.currentStep).toBe(2);
+
+    store.dispatch(walletPaymentSetCurrentStep(0));
+    expect(store.getState().features.payments.checkout.currentStep).toBe(1);
+  });
+});
diff --git a/ts/features/payments/checkout/store/actions/index.ts b/ts/features/payments/checkout/store/actions/index.ts
new file mode 100644
index 00000000000..beee5bf4333
--- /dev/null
+++ b/ts/features/payments/checkout/store/actions/index.ts
@@ -0,0 +1,6 @@
+import { PaymentsCheckoutNetworkingActions } from "./networking";
+import { PaymentsCheckoutOrchestrationActions } from "./orchestration";
+
+export type PaymentsCheckoutActions =
+  | PaymentsCheckoutNetworkingActions
+  | PaymentsCheckoutOrchestrationActions;
diff --git a/ts/features/payments/checkout/store/actions/networking.ts b/ts/features/payments/checkout/store/actions/networking.ts
new file mode 100644
index 00000000000..a12ae9596d9
--- /dev/null
+++ b/ts/features/payments/checkout/store/actions/networking.ts
@@ -0,0 +1,111 @@
+import {
+  ActionType,
+  createAsyncAction,
+  createStandardAction
+} from "typesafe-actions";
+import { AmountEuroCents } from "../../../../../../definitions/pagopa/ecommerce/AmountEuroCents";
+import { CalculateFeeRequest } from "../../../../../../definitions/pagopa/ecommerce/CalculateFeeRequest";
+import { CalculateFeeResponse } from "../../../../../../definitions/pagopa/ecommerce/CalculateFeeResponse";
+import { NewSessionTokenResponse } from "../../../../../../definitions/pagopa/ecommerce/NewSessionTokenResponse";
+import { NewTransactionRequest } from "../../../../../../definitions/pagopa/ecommerce/NewTransactionRequest";
+import { NewTransactionResponse } from "../../../../../../definitions/pagopa/ecommerce/NewTransactionResponse";
+import { PaymentRequestsGetResponse } from "../../../../../../definitions/pagopa/ecommerce/PaymentRequestsGetResponse";
+import { RequestAuthorizationResponse } from "../../../../../../definitions/pagopa/ecommerce/RequestAuthorizationResponse";
+import { RptId } from "../../../../../../definitions/pagopa/ecommerce/RptId";
+import { TransactionInfo } from "../../../../../../definitions/pagopa/ecommerce/TransactionInfo";
+import { Wallets } from "../../../../../../definitions/pagopa/ecommerce/Wallets";
+import { PaymentMethodsResponse } from "../../../../../../definitions/pagopa/ecommerce/PaymentMethodsResponse";
+import { NetworkError } from "../../../../../utils/errors";
+import { WalletPaymentFailure } from "../../types/WalletPaymentFailure";
+
+export const paymentsGetNewSessionTokenAction = createAsyncAction(
+  "PAYMENTS_GET_NEW_SESSION_TOKEN_REQUEST",
+  "PAYMENTS_GET_NEW_SESSION_TOKEN_SUCCESS",
+  "PAYMENTS_GET_NEW_SESSION_TOKEN_FAILURE"
+)<undefined, NewSessionTokenResponse, NetworkError>();
+
+export const paymentsGetPaymentDetailsAction = createAsyncAction(
+  "PAYMENTS_GET_PAYMENT_DETAILS_REQUEST",
+  "PAYMENTS_GET_PAYMENT_DETAILS_SUCCESS",
+  "PAYMENTS_GET_PAYMENT_DETAILS_FAILURE"
+)<RptId, PaymentRequestsGetResponse, NetworkError | WalletPaymentFailure>();
+
+export const paymentsGetPaymentMethodsAction = createAsyncAction(
+  "PAYMENTS_GET_PAYMENT_METHODS_REQUEST",
+  "PAYMENTS_GET_PAYMENT_METHODS_SUCCESS",
+  "PAYMENTS_GET_PAYMENT_METHODS_FAILURE"
+)<undefined, PaymentMethodsResponse, NetworkError>();
+
+export const paymentsGetPaymentUserMethodsAction = createAsyncAction(
+  "PAYMENTS_GET_PAYMENT_USER_METHODS_REQUEST",
+  "PAYMENTS_GET_PAYMENT_USER_METHODS_SUCCESS",
+  "PAYMENTS_GET_PAYMENT_USER_METHODS_FAILURE"
+)<undefined, Wallets, NetworkError>();
+
+export const paymentsCalculatePaymentFeesAction = createAsyncAction(
+  "PAYMENTS_CALCULATE_PAYMENT_FEES_REQUEST",
+  "PAYMENTS_CALCULATE_PAYMENT_FEES_SUCCESS",
+  "PAYMENTS_CALCULATE_PAYMENT_FEES_FAILURE"
+)<
+  CalculateFeeRequest & { paymentMethodId: string },
+  CalculateFeeResponse,
+  NetworkError
+>();
+
+export const paymentsCreateTransactionAction = createAsyncAction(
+  "PAYMENTS_CREATE_TRANSACTION_REQUEST",
+  "PAYMENTS_CREATE_TRANSACTION_SUCCESS",
+  "PAYMENTS_CREATE_TRANSACTION_FAILURE"
+)<
+  NewTransactionRequest,
+  NewTransactionResponse,
+  NetworkError | WalletPaymentFailure
+>();
+
+export const paymentsGetPaymentTransactionInfoAction = createAsyncAction(
+  "PAYMENTS_GET_PAYMENT_TRANSACTION_INFO_REQUEST",
+  "PAYMENTS_GET_PAYMENT_TRANSACTION_INFO_SUCCESS",
+  "PAYMENTS_GET_PAYMENT_TRANSACTION_INFO_FAILURE"
+)<{ transactionId: string }, TransactionInfo, NetworkError>();
+
+export const paymentsDeleteTransactionAction = createAsyncAction(
+  "PAYMENTS_DELETE_TRANSACTION_REQUEST",
+  "PAYMENTS_DELETE_TRANSACTION_SUCCESS",
+  "PAYMENTS_DELETE_TRANSACTION_FAILURE"
+)<string, undefined, NetworkError>();
+
+export type WalletPaymentAuthorizePayload = {
+  transactionId: string;
+  walletId: string;
+  pspId: string;
+  paymentAmount: AmountEuroCents;
+  paymentFees: AmountEuroCents;
+};
+
+export const paymentsStartPaymentAuthorizationAction = createAsyncAction(
+  "PAYMENTS_START_PAYMENT_AUTH_REQUEST",
+  "PAYMENTS_START_PAYMENT_AUTH_SUCCESS",
+  "PAYMENTS_START_PAYMENT_AUTH_FAILURE",
+  "PAYMENTS_START_PAYMENT_AUTH_CANCEL"
+)<
+  WalletPaymentAuthorizePayload,
+  RequestAuthorizationResponse,
+  NetworkError,
+  undefined
+>();
+
+export const paymentsResetPaymentPspList = createStandardAction(
+  "PAYMENTS_RESET_PAYMENT_PSP_LIST"
+)();
+
+export type PaymentsCheckoutNetworkingActions =
+  | ActionType<typeof paymentsGetNewSessionTokenAction>
+  | ActionType<typeof paymentsGetPaymentDetailsAction>
+  | ActionType<typeof paymentsGetPaymentMethodsAction>
+  | ActionType<typeof paymentsGetPaymentUserMethodsAction>
+  | ActionType<typeof paymentsCalculatePaymentFeesAction>
+  | ActionType<typeof paymentsCreateTransactionAction>
+  | ActionType<typeof paymentsGetPaymentTransactionInfoAction>
+  | ActionType<typeof paymentsDeleteTransactionAction>
+  | ActionType<typeof paymentsStartPaymentAuthorizationAction>
+  | ActionType<typeof paymentsResetPaymentPspList>;
diff --git a/ts/features/payments/checkout/store/actions/orchestration.ts b/ts/features/payments/checkout/store/actions/orchestration.ts
new file mode 100644
index 00000000000..339b0d7d890
--- /dev/null
+++ b/ts/features/payments/checkout/store/actions/orchestration.ts
@@ -0,0 +1,42 @@
+import { ActionType, createStandardAction } from "typesafe-actions";
+import { Bundle } from "../../../../../../definitions/pagopa/ecommerce/Bundle";
+import { WalletInfo } from "../../../../../../definitions/pagopa/ecommerce/WalletInfo";
+import { PaymentStartOrigin, WalletPaymentStepEnum } from "../../types";
+
+export const walletPaymentSetCurrentStep = createStandardAction(
+  "WALLET_PAYMENT_SET_CURRENT_STEP"
+)<WalletPaymentStepEnum>();
+
+export type OnPaymentSuccessAction = "showHome" | "showTransaction";
+
+export type PaymentInitStateParams = {
+  startOrigin?: PaymentStartOrigin;
+  onSuccess?: OnPaymentSuccessAction;
+};
+
+/**
+ * Action to initialize the state of a payment, optionally you can specify the route to go back to
+ * after the payment is completed or cancelled (default is the popToTop route)
+ */
+export const initPaymentStateAction = createStandardAction(
+  "PAYMENTS_INIT_PAYMENT_STATE"
+)<PaymentInitStateParams>();
+
+export const selectPaymentMethodAction = createStandardAction(
+  "PAYMENTS_SELECT_PAYMENT_METHOD"
+)<WalletInfo>();
+
+export const selectPaymentPspAction = createStandardAction(
+  "PAYMENTS_SELECT_PAYMENT_PSP"
+)<Bundle>();
+
+export const resetPaymentPspAction = createStandardAction(
+  "PAYMENTS_RESET_PAYMENT_PSP"
+)();
+
+export type PaymentsCheckoutOrchestrationActions =
+  | ActionType<typeof walletPaymentSetCurrentStep>
+  | ActionType<typeof initPaymentStateAction>
+  | ActionType<typeof selectPaymentMethodAction>
+  | ActionType<typeof selectPaymentPspAction>
+  | ActionType<typeof resetPaymentPspAction>;
diff --git a/ts/features/walletV3/payment/store/reducers/index.ts b/ts/features/payments/checkout/store/reducers/index.ts
similarity index 57%
rename from ts/features/walletV3/payment/store/reducers/index.ts
rename to ts/features/payments/checkout/store/reducers/index.ts
index 0e9302a0ebd..60e14dcb2ee 100644
--- a/ts/features/walletV3/payment/store/reducers/index.ts
+++ b/ts/features/payments/checkout/store/reducers/index.ts
@@ -1,40 +1,43 @@
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { NavigatorScreenParams } from "@react-navigation/native";
-import { sequenceS } from "fp-ts/lib/Apply";
 import * as O from "fp-ts/lib/Option";
-import { pipe } from "fp-ts/lib/function";
+import _ from "lodash";
 import { getType } from "typesafe-actions";
 import { Bundle } from "../../../../../../definitions/pagopa/ecommerce/Bundle";
+import { PaymentMethodsResponse } from "../../../../../../definitions/pagopa/ecommerce/PaymentMethodsResponse";
 import { PaymentRequestsGetResponse } from "../../../../../../definitions/pagopa/ecommerce/PaymentRequestsGetResponse";
 import { RptId } from "../../../../../../definitions/pagopa/ecommerce/RptId";
 import { TransactionInfo } from "../../../../../../definitions/pagopa/ecommerce/TransactionInfo";
-import { PaymentMethodsResponse } from "../../../../../../definitions/pagopa/walletv3/PaymentMethodsResponse";
-import { WalletInfo } from "../../../../../../definitions/pagopa/walletv3/WalletInfo";
-import { Wallets } from "../../../../../../definitions/pagopa/walletv3/Wallets";
-import NavigationService from "../../../../../navigation/NavigationService";
-import { AppParamsList } from "../../../../../navigation/params/AppParamsList";
+import { WalletInfo } from "../../../../../../definitions/pagopa/ecommerce/WalletInfo";
+import { Wallets } from "../../../../../../definitions/pagopa/ecommerce/Wallets";
 import { Action } from "../../../../../store/actions/types";
 import { NetworkError } from "../../../../../utils/errors";
-import { WalletPaymentFailure } from "../../types/failure";
+import { WalletPaymentStepEnum } from "../../types";
+import { WalletPaymentFailure } from "../../types/WalletPaymentFailure";
 import {
-  walletPaymentAuthorization,
-  walletPaymentCalculateFees,
-  walletPaymentCreateTransaction,
-  walletPaymentDeleteTransaction,
-  walletPaymentGetAllMethods,
-  walletPaymentGetDetails,
-  walletPaymentGetTransactionInfo,
-  walletPaymentGetUserWallets,
-  walletPaymentNewSessionToken
+  paymentsCalculatePaymentFeesAction,
+  paymentsCreateTransactionAction,
+  paymentsDeleteTransactionAction,
+  paymentsGetNewSessionTokenAction,
+  paymentsGetPaymentDetailsAction,
+  paymentsGetPaymentMethodsAction,
+  paymentsGetPaymentTransactionInfoAction,
+  paymentsGetPaymentUserMethodsAction,
+  paymentsResetPaymentPspList,
+  paymentsStartPaymentAuthorizationAction
 } from "../actions/networking";
 import {
-  walletPaymentInitState,
-  walletPaymentPickPaymentMethod,
-  walletPaymentPickPsp,
-  walletPaymentResetPickedPsp
+  OnPaymentSuccessAction,
+  initPaymentStateAction,
+  resetPaymentPspAction,
+  selectPaymentMethodAction,
+  selectPaymentPspAction,
+  walletPaymentSetCurrentStep
 } from "../actions/orchestration";
 
-export type WalletPaymentState = {
+export const WALLET_PAYMENT_STEP_MAX = 4;
+
+export type PaymentsCheckoutState = {
+  currentStep: WalletPaymentStepEnum;
   rptId?: RptId;
   sessionToken: pot.Pot<string, NetworkError>;
   paymentDetails: pot.Pot<
@@ -48,13 +51,11 @@ export type WalletPaymentState = {
   chosenPsp: O.Option<Bundle>;
   transaction: pot.Pot<TransactionInfo, NetworkError | WalletPaymentFailure>;
   authorizationUrl: pot.Pot<string, NetworkError>;
-  startRoute?: {
-    routeName: keyof AppParamsList;
-    routeKey: keyof NavigatorScreenParams<AppParamsList>["screen"];
-  };
+  onSuccess?: OnPaymentSuccessAction;
 };
 
-const INITIAL_STATE: WalletPaymentState = {
+const INITIAL_STATE: PaymentsCheckoutState = {
+  currentStep: WalletPaymentStepEnum.PICK_PAYMENT_METHOD,
   sessionToken: pot.none,
   paymentDetails: pot.none,
   userWallets: pot.none,
@@ -68,175 +69,176 @@ const INITIAL_STATE: WalletPaymentState = {
 
 // eslint-disable-next-line complexity
 const reducer = (
-  state: WalletPaymentState = INITIAL_STATE,
+  state: PaymentsCheckoutState = INITIAL_STATE,
   action: Action
-): WalletPaymentState => {
+): PaymentsCheckoutState => {
   switch (action.type) {
-    case getType(walletPaymentInitState):
-      const startRoute = pipe(
-        sequenceS(O.Monad)({
-          routeName: O.fromNullable(
-            NavigationService.getCurrentRouteName() as keyof AppParamsList
-          ),
-          routeKey: O.fromNullable(
-            NavigationService.getCurrentRouteKey() as keyof NavigatorScreenParams<AppParamsList>["screen"]
-          )
-        }),
-        O.toUndefined
-      );
+    case getType(initPaymentStateAction):
       return {
         ...INITIAL_STATE,
-        startRoute
+        onSuccess: action.payload.onSuccess
+      };
+
+    case getType(walletPaymentSetCurrentStep):
+      return {
+        ...state,
+        currentStep: _.clamp(action.payload, 1, WALLET_PAYMENT_STEP_MAX)
       };
 
     // eCommerce Session token
-    case getType(walletPaymentNewSessionToken.request):
+    case getType(paymentsGetNewSessionTokenAction.request):
       return {
         ...state,
         sessionToken: pot.toLoading(state.sessionToken)
       };
-    case getType(walletPaymentNewSessionToken.success):
+    case getType(paymentsGetNewSessionTokenAction.success):
       return {
         ...state,
         sessionToken: pot.some(action.payload.sessionToken)
       };
-    case getType(walletPaymentNewSessionToken.failure):
+    case getType(paymentsGetNewSessionTokenAction.failure):
       return {
         ...state,
         sessionToken: pot.toError(state.sessionToken, action.payload)
       };
 
     // Payment verification and details
-    case getType(walletPaymentGetDetails.request):
+    case getType(paymentsGetPaymentDetailsAction.request):
       return {
         ...state,
         rptId: action.payload,
         paymentDetails: pot.toLoading(state.paymentDetails)
       };
-    case getType(walletPaymentGetDetails.success):
+    case getType(paymentsGetPaymentDetailsAction.success):
       return {
         ...state,
         paymentDetails: pot.some(action.payload)
       };
-    case getType(walletPaymentGetDetails.failure):
+    case getType(paymentsGetPaymentDetailsAction.failure):
       return {
         ...state,
         paymentDetails: pot.toError(state.paymentDetails, action.payload)
       };
 
     // User payment methods
-    case getType(walletPaymentGetUserWallets.request):
+    case getType(paymentsGetPaymentUserMethodsAction.request):
       return {
         ...state,
         userWallets: pot.toLoading(state.userWallets)
       };
-    case getType(walletPaymentGetUserWallets.success):
+    case getType(paymentsGetPaymentUserMethodsAction.success):
       return {
         ...state,
         userWallets: pot.some(action.payload)
       };
-    case getType(walletPaymentGetUserWallets.failure):
+    case getType(paymentsGetPaymentUserMethodsAction.failure):
       return {
         ...state,
         userWallets: pot.toError(state.userWallets, action.payload)
       };
 
     // Available payment method
-    case getType(walletPaymentGetAllMethods.request):
+    case getType(paymentsGetPaymentMethodsAction.request):
       return {
         ...state,
         allPaymentMethods: pot.toLoading(state.allPaymentMethods)
       };
-    case getType(walletPaymentGetAllMethods.success):
+    case getType(paymentsGetPaymentMethodsAction.success):
       return {
         ...state,
         allPaymentMethods: pot.some(action.payload)
       };
-    case getType(walletPaymentGetAllMethods.failure):
+    case getType(paymentsGetPaymentMethodsAction.failure):
       return {
         ...state,
         allPaymentMethods: pot.toError(state.allPaymentMethods, action.payload)
       };
 
-    case getType(walletPaymentPickPaymentMethod):
+    case getType(selectPaymentMethodAction):
       return {
         ...state,
         chosenPaymentMethod: O.some(action.payload)
       };
 
     // PSP list
-    case getType(walletPaymentCalculateFees.request):
+    case getType(paymentsCalculatePaymentFeesAction.request):
       return {
         ...state,
         pspList: pot.toLoading(state.pspList)
       };
-    case getType(walletPaymentCalculateFees.success):
+    case getType(paymentsCalculatePaymentFeesAction.success):
       return {
         ...state,
         pspList: pot.some(action.payload.bundles)
       };
-    case getType(walletPaymentCalculateFees.failure):
+    case getType(paymentsCalculatePaymentFeesAction.failure):
       return {
         ...state,
         pspList: pot.toError(state.pspList, action.payload)
       };
 
-    case getType(walletPaymentPickPsp):
+    case getType(selectPaymentPspAction):
       return {
         ...state,
         chosenPsp: O.some(action.payload)
       };
 
-    case getType(walletPaymentResetPickedPsp):
+    case getType(resetPaymentPspAction):
       return {
         ...state,
         chosenPsp: O.none
       };
 
+    case getType(paymentsResetPaymentPspList):
+      return {
+        ...state,
+        pspList: pot.none
+      };
+
     // Transaction
-    case getType(walletPaymentCreateTransaction.request):
-    case getType(walletPaymentGetTransactionInfo.request):
-    case getType(walletPaymentDeleteTransaction.request):
+    case getType(paymentsCreateTransactionAction.request):
+    case getType(paymentsGetPaymentTransactionInfoAction.request):
+    case getType(paymentsDeleteTransactionAction.request):
       return {
         ...state,
         transaction: pot.toLoading(state.transaction)
       };
-    case getType(walletPaymentCreateTransaction.success):
-    case getType(walletPaymentGetTransactionInfo.success):
+    case getType(paymentsCreateTransactionAction.success):
+    case getType(paymentsGetPaymentTransactionInfoAction.success):
       return {
         ...state,
         transaction: pot.some(action.payload)
       };
-    case getType(walletPaymentDeleteTransaction.success):
+    case getType(paymentsDeleteTransactionAction.success):
       return {
         ...state,
         transaction: pot.none
       };
-    case getType(walletPaymentCreateTransaction.failure):
-    case getType(walletPaymentGetTransactionInfo.failure):
-    case getType(walletPaymentDeleteTransaction.failure):
+    case getType(paymentsCreateTransactionAction.failure):
+    case getType(paymentsGetPaymentTransactionInfoAction.failure):
+    case getType(paymentsDeleteTransactionAction.failure):
       return {
         ...state,
         transaction: pot.toError(state.transaction, action.payload)
       };
 
     // Authorization url
-    case getType(walletPaymentAuthorization.request):
+    case getType(paymentsStartPaymentAuthorizationAction.request):
       return {
         ...state,
         authorizationUrl: pot.toLoading(state.authorizationUrl)
       };
-    case getType(walletPaymentAuthorization.success):
+    case getType(paymentsStartPaymentAuthorizationAction.success):
       return {
         ...state,
         authorizationUrl: pot.some(action.payload.authorizationUrl)
       };
-    case getType(walletPaymentAuthorization.failure):
+    case getType(paymentsStartPaymentAuthorizationAction.failure):
       return {
         ...state,
         authorizationUrl: pot.toError(state.authorizationUrl, action.payload)
       };
-    case getType(walletPaymentAuthorization.cancel):
+    case getType(paymentsStartPaymentAuthorizationAction.cancel):
       return {
         ...state,
         authorizationUrl: pot.none
diff --git a/ts/features/walletV3/payment/store/selectors/index.ts b/ts/features/payments/checkout/store/selectors/index.ts
similarity index 51%
rename from ts/features/walletV3/payment/store/selectors/index.ts
rename to ts/features/payments/checkout/store/selectors/index.ts
index bd05aa66f9d..a99e423d871 100644
--- a/ts/features/walletV3/payment/store/selectors/index.ts
+++ b/ts/features/payments/checkout/store/selectors/index.ts
@@ -4,24 +4,23 @@ import { pipe } from "fp-ts/lib/function";
 import { createSelector } from "reselect";
 import { GlobalState } from "../../../../../store/reducers/types";
 
-const selectWalletPayment = (state: GlobalState) =>
-  state.features.wallet.payment;
+const selectPaymentsCheckoutState = (state: GlobalState) =>
+  state.features.payments.checkout;
+
+export const selectWalletPaymentCurrentStep = (state: GlobalState) =>
+  selectPaymentsCheckoutState(state).currentStep;
 
 export const selectWalletPaymentSessionTokenPot = (state: GlobalState) =>
-  selectWalletPayment(state).sessionToken;
+  selectPaymentsCheckoutState(state).sessionToken;
 
 export const selectWalletPaymentSessionToken = (state: GlobalState) =>
   pot.toUndefined(selectWalletPaymentSessionTokenPot(state));
 
-export const walletPaymentRptIdSelector = createSelector(
-  selectWalletPayment,
-  state => state.rptId
-);
+export const walletPaymentRptIdSelector = (state: GlobalState) =>
+  selectPaymentsCheckoutState(state).rptId;
 
-export const walletPaymentDetailsSelector = createSelector(
-  selectWalletPayment,
-  state => state.paymentDetails
-);
+export const walletPaymentDetailsSelector = (state: GlobalState) =>
+  selectPaymentsCheckoutState(state).paymentDetails;
 
 export const walletPaymentAmountSelector = createSelector(
   walletPaymentDetailsSelector,
@@ -29,7 +28,7 @@ export const walletPaymentAmountSelector = createSelector(
 );
 
 export const walletPaymentAllMethodsSelector = createSelector(
-  selectWalletPayment,
+  selectPaymentsCheckoutState,
   state => pot.map(state.allPaymentMethods, _ => _.paymentMethods ?? [])
 );
 
@@ -44,7 +43,7 @@ export const walletPaymentGenericMethodByIdSelector = createSelector(
 );
 
 export const walletPaymentUserWalletsSelector = createSelector(
-  selectWalletPayment,
+  selectPaymentsCheckoutState,
   state => pot.map(state.userWallets, _ => _.wallets ?? [])
 );
 
@@ -58,32 +57,20 @@ export const walletPaymentSavedMethodByIdSelector = createSelector(
     )
 );
 
-export const walletPaymentPickedPaymentMethodSelector = createSelector(
-  selectWalletPayment,
-  state => state.chosenPaymentMethod
-);
+export const walletPaymentPickedPaymentMethodSelector = (state: GlobalState) =>
+  selectPaymentsCheckoutState(state).chosenPaymentMethod;
 
-export const walletPaymentPspListSelector = createSelector(
-  selectWalletPayment,
-  state => state.pspList
-);
+export const walletPaymentPspListSelector = (state: GlobalState) =>
+  selectPaymentsCheckoutState(state).pspList;
 
-export const walletPaymentPickedPspSelector = createSelector(
-  selectWalletPayment,
-  state => state.chosenPsp
-);
+export const walletPaymentPickedPspSelector = (state: GlobalState) =>
+  selectPaymentsCheckoutState(state).chosenPsp;
 
-export const walletPaymentTransactionSelector = createSelector(
-  selectWalletPayment,
-  state => state.transaction
-);
+export const walletPaymentTransactionSelector = (state: GlobalState) =>
+  selectPaymentsCheckoutState(state).transaction;
 
-export const walletPaymentAuthorizationUrlSelector = createSelector(
-  selectWalletPayment,
-  state => state.authorizationUrl
-);
+export const walletPaymentAuthorizationUrlSelector = (state: GlobalState) =>
+  selectPaymentsCheckoutState(state).authorizationUrl;
 
-export const walletPaymentStartRouteSelector = createSelector(
-  selectWalletPayment,
-  state => state.startRoute
-);
+export const walletPaymentOnSuccessActionSelector = (state: GlobalState) =>
+  selectPaymentsCheckoutState(state).onSuccess;
diff --git a/ts/features/payments/checkout/types/PaymentHistory.ts b/ts/features/payments/checkout/types/PaymentHistory.ts
new file mode 100644
index 00000000000..e72b6466a35
--- /dev/null
+++ b/ts/features/payments/checkout/types/PaymentHistory.ts
@@ -0,0 +1,10 @@
+export type PaymentStartOrigin =
+  | "message"
+  | "qrcode_scan"
+  | "poste_datamatrix_scan"
+  | "manual_insertion"
+  | "donation";
+
+export type PaymentHistory = {
+  startOrigin?: PaymentStartOrigin;
+};
diff --git a/ts/features/walletV3/payment/types/PaymentOutcomeEnum.ts b/ts/features/payments/checkout/types/PaymentOutcomeEnum.ts
similarity index 87%
rename from ts/features/walletV3/payment/types/PaymentOutcomeEnum.ts
rename to ts/features/payments/checkout/types/PaymentOutcomeEnum.ts
index dd1ff939ff8..394564ce5f5 100644
--- a/ts/features/walletV3/payment/types/PaymentOutcomeEnum.ts
+++ b/ts/features/payments/checkout/types/PaymentOutcomeEnum.ts
@@ -16,7 +16,9 @@ export enum WalletPaymentOutcomeEnum {
   ORDER_NOT_PRESENT = "11", // (should never happen)
   INVALID_METHOD = "12", // (should never happen)
   KO_RETRIABLE = "13", // transaction failed
-  INVALID_SESSION = "14" // transaction failed
+  INVALID_SESSION = "14", // transaction failed
+  METHOD_NOT_ENABLED = "15", // payment method not enabled
+  WAITING_CONFIRMATION_EMAIL = "17" // waiting for confirmation email
 }
 
 export type WalletPaymentOutcome = t.TypeOf<typeof WalletPaymentOutcome>;
diff --git a/ts/features/walletV3/payment/types/failure.ts b/ts/features/payments/checkout/types/WalletPaymentFailure.ts
similarity index 100%
rename from ts/features/walletV3/payment/types/failure.ts
rename to ts/features/payments/checkout/types/WalletPaymentFailure.ts
diff --git a/ts/features/walletV3/payment/types/index.ts b/ts/features/payments/checkout/types/WalletPaymentPspSortType.ts
similarity index 100%
rename from ts/features/walletV3/payment/types/index.ts
rename to ts/features/payments/checkout/types/WalletPaymentPspSortType.ts
diff --git a/ts/features/payments/checkout/types/index.ts b/ts/features/payments/checkout/types/index.ts
new file mode 100644
index 00000000000..0e9d6fb26fa
--- /dev/null
+++ b/ts/features/payments/checkout/types/index.ts
@@ -0,0 +1,15 @@
+export type WalletPaymentPspSortType = "default" | "name" | "amount";
+
+export type PaymentStartOrigin =
+  | "message"
+  | "qrcode_scan"
+  | "poste_datamatrix_scan"
+  | "manual_insertion"
+  | "donation";
+
+export enum WalletPaymentStepEnum {
+  NONE = 0,
+  PICK_PAYMENT_METHOD = 1,
+  PICK_PSP = 2,
+  CONFIRM_TRANSACTION = 3
+}
diff --git a/ts/features/walletV3/payment/utils/index.ts b/ts/features/payments/checkout/utils/index.ts
similarity index 100%
rename from ts/features/walletV3/payment/utils/index.ts
rename to ts/features/payments/checkout/utils/index.ts
diff --git a/ts/features/payments/common/api/client.ts b/ts/features/payments/common/api/client.ts
new file mode 100644
index 00000000000..353050b65cc
--- /dev/null
+++ b/ts/features/payments/common/api/client.ts
@@ -0,0 +1,36 @@
+import { createClient } from "../../../../../definitions/pagopa/walletv3/client";
+import { createClient as createECommerceClient } from "../../../../../definitions/pagopa/ecommerce/client";
+import { defaultRetryingFetch } from "../../../../utils/fetch";
+
+export const createWalletClient = (baseUrl: string, bearerAuth: string) =>
+  createClient<"bearerAuth">({
+    baseUrl,
+    basePath: "/payment-wallet/v1",
+    fetchApi: defaultRetryingFetch(),
+    withDefaults: op => params => {
+      const paramsWithDefaults = {
+        ...params,
+        bearerAuth
+      } as Parameters<typeof op>[0];
+
+      return op(paramsWithDefaults);
+    }
+  });
+
+export const createPaymentClient = (baseUrl: string, token: string) =>
+  createECommerceClient<"walletToken">({
+    baseUrl,
+    basePath: "/ecommerce/io/v1",
+    fetchApi: defaultRetryingFetch(),
+    withDefaults: op => params => {
+      const paramsWithDefaults = {
+        ...params,
+        walletToken: token
+      } as Parameters<typeof op>[0];
+
+      return op(paramsWithDefaults);
+    }
+  });
+
+export type PaymentClient = ReturnType<typeof createPaymentClient>;
+export type WalletClient = ReturnType<typeof createWalletClient>;
diff --git a/ts/features/payments/common/components/PaymentCard.tsx b/ts/features/payments/common/components/PaymentCard.tsx
new file mode 100644
index 00000000000..accb68953f3
--- /dev/null
+++ b/ts/features/payments/common/components/PaymentCard.tsx
@@ -0,0 +1,221 @@
+import {
+  H6,
+  IOColors,
+  LabelSmallAlt,
+  VSpacer,
+  WithTestID
+} from "@pagopa/io-app-design-system";
+import { format } from "date-fns";
+import { capitalize } from "lodash";
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import Placeholder, { BoxProps } from "rn-placeholder";
+import BPayLogo from "../../../../../img/wallet/payment-methods/bpay_logo_full.svg";
+import PayPalLogo from "../../../../../img/wallet/payment-methods/paypal/paypal_logo_ext.svg";
+import { LogoPaymentWithFallback } from "../../../../components/ui/utils/components/LogoPaymentWithFallback";
+import I18n from "../../../../i18n";
+import { PaymentCardBankLogo } from "./PaymentCardBankLogo";
+
+export type PaymentCardProps = {
+  brand?: string;
+  abiCode?: string;
+  hpan?: string;
+  expireDate?: Date;
+  holderName?: string;
+  holderPhone?: string;
+  holderEmail?: string;
+};
+
+export type PaymentCardComponentProps = WithTestID<
+  | ({
+      isLoading?: false;
+    } & PaymentCardProps)
+  | {
+      isLoading: true;
+    }
+>;
+
+const PaymentCard = (props: PaymentCardComponentProps) => {
+  if (props.isLoading) {
+    return <PaymentCardSkeleton />;
+  }
+
+  const cardIcon = props.brand && (
+    <LogoPaymentWithFallback brand={props.brand} isExtended />
+  );
+
+  const holderNameText = props.holderName && (
+    <LabelSmallAlt
+      accessibilityLabel={I18n.t("wallet.methodDetails.a11y.bpay.owner", {
+        fullOwnerName: props.holderName
+      })}
+    >
+      {props.holderName}
+    </LabelSmallAlt>
+  );
+
+  const expireDateText = props.expireDate && (
+    <LabelSmallAlt>
+      {I18n.t("wallet.creditCard.validUntil", {
+        expDate: format(props.expireDate, "MM/YY")
+      })}
+    </LabelSmallAlt>
+  );
+
+  const maskedEmailText = props.holderEmail && (
+    <LabelSmallAlt
+      accessibilityLabel={I18n.t("wallet.methodDetails.a11y.paypal.owner", {
+        email: props.holderEmail
+      })}
+    >
+      {props.holderEmail}
+    </LabelSmallAlt>
+  );
+
+  const maskedPhoneText = props.holderPhone && (
+    <LabelSmallAlt
+      accessibilityLabel={I18n.t("wallet.methodDetails.a11y.bpay.phone", {
+        // we do this to make the screen reader read the number digit by digit,
+        phoneNumber: props.holderPhone.split("").join(" ")
+      })}
+    >
+      {props.holderPhone}
+    </LabelSmallAlt>
+  );
+
+  const renderBankLogo = () => {
+    if (props.holderEmail) {
+      return (
+        <View style={styleSheet.bankInfo}>
+          <PayPalLogo
+            testID="paymentCardPayPalLogoTestId"
+            accessible={true}
+            accessibilityLabel="PayPal"
+            height={32}
+            width={113}
+          />
+        </View>
+      );
+    }
+
+    if (props.holderPhone) {
+      return (
+        <View style={styleSheet.bankInfo}>
+          <BPayLogo
+            testID="paymentCardBPayLogoTestId"
+            accessible={true}
+            accessibilityLabel="BANCOMAT Pay"
+            height={24}
+            width={136}
+          />
+        </View>
+      );
+    }
+
+    if (props.abiCode) {
+      return (
+        <View style={styleSheet.bankInfo}>
+          <PaymentCardBankLogo
+            testID="paymentCardBankLogoTestId"
+            abiCode={props.abiCode}
+            height={24}
+          />
+        </View>
+      );
+    }
+
+    if (props.hpan) {
+      const circuitName =
+        props.brand || I18n.t("wallet.methodDetails.cardGeneric");
+
+      return (
+        <H6
+          accessibilityLabel={I18n.t("wallet.methodDetails.a11y.credit.hpan", {
+            circuit: circuitName,
+            // we space the hpan to make the screen reader read it digit by digit
+            spacedHpan: props.hpan.split("").join(" ")
+          })}
+          style={styleSheet.bankInfo}
+        >
+          {capitalize(circuitName)} •••• {props.hpan}
+        </H6>
+      );
+    }
+
+    return undefined;
+  };
+
+  return (
+    <View style={styleSheet.card}>
+      <View style={styleSheet.wrapper}>
+        <View style={styleSheet.paymentInfo}>
+          {renderBankLogo()}
+          {cardIcon}
+        </View>
+        <View style={styleSheet.additionalInfo}>
+          {holderNameText}
+          {maskedEmailText}
+          {maskedPhoneText}
+          {expireDateText}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const PaymentCardSkeleton = () => (
+  <View style={styleSheet.card}>
+    <View style={styleSheet.wrapper}>
+      <View style={[styleSheet.paymentInfo, { paddingTop: 8 }]}>
+        <View style={{ width: "60%" }}>
+          <SkeletonPlaceholder height={24} width={"100%"} />
+        </View>
+        <View style={{ width: "20%" }}>
+          <SkeletonPlaceholder height={24} width={"100%"} />
+        </View>
+      </View>
+      <View style={styleSheet.additionalInfo}>
+        <SkeletonPlaceholder height={18} width={"55%"} />
+        <VSpacer size={8} />
+        <SkeletonPlaceholder height={18} width={"45%"} />
+      </View>
+    </View>
+  </View>
+);
+
+const SkeletonPlaceholder = (props: Pick<BoxProps, "width" | "height">) => (
+  <Placeholder.Box
+    animate="fade"
+    radius={28}
+    color={IOColors["grey-200"]}
+    {...props}
+  />
+);
+
+const styleSheet = StyleSheet.create({
+  card: {
+    aspectRatio: 16 / 10,
+    backgroundColor: IOColors["grey-100"],
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: IOColors["grey-200"]
+  },
+  wrapper: {
+    padding: 16,
+    paddingTop: 8,
+    flex: 1,
+    justifyContent: "space-between"
+  },
+  bankInfo: {
+    paddingTop: 12
+  },
+  paymentInfo: {
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  additionalInfo: {
+    justifyContent: "space-between"
+  }
+});
+
+export { PaymentCard };
diff --git a/ts/features/payments/common/components/PaymentCardBankLogo.tsx b/ts/features/payments/common/components/PaymentCardBankLogo.tsx
new file mode 100644
index 00000000000..17aee8ed5ba
--- /dev/null
+++ b/ts/features/payments/common/components/PaymentCardBankLogo.tsx
@@ -0,0 +1,51 @@
+import { IOColors, WithTestID } from "@pagopa/io-app-design-system";
+import * as React from "react";
+import { Image, View } from "react-native";
+import Placeholder from "rn-placeholder";
+import { getBankLogosCdnUri } from "../../../../components/ui/utils/strings";
+
+type PaymentCardBankLogoProps = {
+  abiCode: string;
+  height: number;
+  accessibilityLabel?: string;
+};
+
+export const PaymentCardBankLogo = ({
+  abiCode,
+  height,
+  accessibilityLabel,
+  testID
+}: WithTestID<PaymentCardBankLogoProps>) => {
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [imageWidth, setImageWidth] = React.useState<number>(50);
+  return (
+    <View testID={testID}>
+      <Image
+        accessible={true}
+        accessibilityLabel={accessibilityLabel}
+        source={{ uri: getBankLogosCdnUri(abiCode) }}
+        style={{
+          height,
+          width: imageWidth,
+          resizeMode: "contain"
+        }}
+        onLoad={({ nativeEvent }) => {
+          const scale = height / nativeEvent.source.height;
+          setImageWidth(nativeEvent.source.width * scale);
+        }}
+        onLoadEnd={() => setIsLoading(false)}
+      />
+      {isLoading && (
+        <View style={{ position: "absolute" }}>
+          <Placeholder.Box
+            color={IOColors["grey-200"]}
+            animate="fade"
+            radius={8}
+            height={height}
+            width={200}
+          />
+        </View>
+      )}
+    </View>
+  );
+};
diff --git a/ts/components/ui/cards/payment/PaymentCardBig.tsx b/ts/features/payments/common/components/PaymentCardBig.tsx
similarity index 92%
rename from ts/components/ui/cards/payment/PaymentCardBig.tsx
rename to ts/features/payments/common/components/PaymentCardBig.tsx
index ea6d19dc64c..c7eab3d4f63 100644
--- a/ts/components/ui/cards/payment/PaymentCardBig.tsx
+++ b/ts/features/payments/common/components/PaymentCardBig.tsx
@@ -4,19 +4,19 @@ import {
   IOColors,
   IOLogoPaymentExtType,
   IOStyles,
+  LabelSmall,
   LogoPaymentExt,
   VSpacer
 } from "@pagopa/io-app-design-system";
 import React from "react";
 import { StyleSheet, View } from "react-native";
 import Placeholder from "rn-placeholder";
+import { LogoPaymentExtended } from "../../../../components/ui/LogoPaymentExtended";
 import I18n from "../../../../i18n";
 import { WithTestID } from "../../../../types/WithTestID";
 import { format } from "../../../../utils/dates";
 import { capitalize } from "../../../../utils/strings";
-import { LabelSmall } from "../../../core/typography/LabelSmall";
-import { LogoPaymentExtended } from "../../LogoPaymentExtended";
-import { LogoPaymentWithFallback } from "../../utils/components/LogoPaymentWithFallback";
+import { LogoPaymentWithFallback } from "../../../../components/ui/utils/components/LogoPaymentWithFallback";
 
 export const PaymentCardBig = (props: PaymentCardBigProps) => {
   if (props.isLoading) {
@@ -182,16 +182,22 @@ const BottomSectionText = (props: { string: string; a11yLabel: string }) => (
     {props.string}
   </H6>
 );
-const ExpDateComponent = ({ expDate }: { expDate: Date }) => (
-  <>
-    <VSpacer size={8} />
-    <LabelSmall color="grey-650" weight="Regular">
-      {I18n.t("wallet.creditCard.validUntil", {
-        expDate: format(expDate, "MM/YY")
-      })}
-    </LabelSmall>
-  </>
-);
+const ExpDateComponent = ({ expDate }: { expDate?: Date }) => {
+  if (expDate) {
+    return (
+      <>
+        <VSpacer size={8} />
+        <LabelSmall color="grey-650" weight="Regular">
+          {I18n.t("wallet.creditCard.validUntil", {
+            expDate: format(expDate, "MM/YY")
+          })}
+        </LabelSmall>
+      </>
+    );
+  }
+
+  return null;
+};
 
 // ------------- skeleton
 const CardSkeleton = ({ testID }: { testID?: string }) => (
@@ -259,14 +265,14 @@ type PaymentCardStandardProps =
     }
   | {
       cardType: "PAGOBANCOMAT";
-      expirationDate: Date;
+      expirationDate?: Date;
       abiCode?: string;
       holderName: string;
       bankName?: string;
     }
   | {
       cardType: "COBADGE";
-      expirationDate: Date;
+      expirationDate?: Date;
       abiCode?: string;
       bankName?: string;
       holderName: string;
@@ -274,7 +280,7 @@ type PaymentCardStandardProps =
     }
   | {
       cardType: "CREDIT";
-      expirationDate: Date;
+      expirationDate?: Date;
       holderName: string;
       hpan: string;
       cardIcon?: IOLogoPaymentExtType;
@@ -292,6 +298,7 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     height: 207,
     borderRadius: 16,
+    borderCurve: "continuous",
     backgroundColor: IOColors["grey-100"],
     padding: 24,
     width: "100%" // required for consistent skeleton sizing
diff --git a/ts/components/ui/cards/payment/PaymentCardSmall.tsx b/ts/features/payments/common/components/PaymentCardSmall.tsx
similarity index 89%
rename from ts/components/ui/cards/payment/PaymentCardSmall.tsx
rename to ts/features/payments/common/components/PaymentCardSmall.tsx
index 2ae405f73c9..914e231d689 100644
--- a/ts/components/ui/cards/payment/PaymentCardSmall.tsx
+++ b/ts/features/payments/common/components/PaymentCardSmall.tsx
@@ -1,20 +1,21 @@
-import * as React from "react";
-import { Pressable, StyleSheet, View } from "react-native";
-import Animated from "react-native-reanimated";
-import Placeholder from "rn-placeholder";
 import {
+  H6,
   IOColors,
-  Icon,
-  VSpacer,
   IOLogoPaymentType,
-  H6
+  Icon,
+  VSpacer
 } from "@pagopa/io-app-design-system";
+import * as React from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import Animated from "react-native-reanimated";
+import Placeholder from "rn-placeholder";
+import { BrandEnum } from "../../../../../definitions/pagopa/ecommerce/WalletInfoDetails";
+import { useSpringPressScaleAnimation } from "../../../../components/ui/utils/hooks/useSpringPressScaleAnimation";
 import { WithTestID } from "../../../../types/WithTestID";
-import { LogoPaymentWithFallback } from "../../utils/components/LogoPaymentWithFallback";
-import { useSpringPressScaleAnimation } from "../../utils/hooks/useSpringPressScaleAnimation";
+import { LogoPaymentWithFallback } from "../../../../components/ui/utils/components/LogoPaymentWithFallback";
 
 type RenderData = {
-  iconName: IOLogoPaymentType | undefined;
+  iconName: IOLogoPaymentType | BrandEnum | undefined;
   bottomText: string;
 };
 const getRenderData = (props: CardDataType): RenderData => {
@@ -50,7 +51,7 @@ type CardDataType =
   | {
       cardType: "CREDIT";
       hpan: string;
-      cardIcon?: IOLogoPaymentType;
+      cardIcon?: IOLogoPaymentType | BrandEnum;
     }
   | {
       cardType: "PAGOBANCOMAT";
@@ -62,7 +63,7 @@ type CardDataType =
   | {
       cardType: "COBADGE";
       providerName: string;
-      cardIcon?: IOLogoPaymentType;
+      cardIcon?: IOLogoPaymentType | BrandEnum;
     };
 
 export type PaymentCardSmallProps = WithTestID<
@@ -189,6 +190,7 @@ const styles = StyleSheet.create({
     flexBasis: PAYMENT_CARD_SMALL_WIDTH,
     flexGrow: 0,
     borderRadius: 8,
+    borderCurve: "continuous",
     padding: 16
   },
   logoRow: {
diff --git a/ts/components/ui/cards/payment/PaymentCardsCarousel.tsx b/ts/features/payments/common/components/PaymentCardsCarousel.tsx
similarity index 92%
rename from ts/components/ui/cards/payment/PaymentCardsCarousel.tsx
rename to ts/features/payments/common/components/PaymentCardsCarousel.tsx
index 7ad7534c66e..c11f47941d7 100644
--- a/ts/components/ui/cards/payment/PaymentCardsCarousel.tsx
+++ b/ts/features/payments/common/components/PaymentCardsCarousel.tsx
@@ -1,9 +1,9 @@
+import { HSpacer, IOVisualCostants } from "@pagopa/io-app-design-system";
 import * as React from "react";
 import { StyleSheet } from "react-native";
 import { FlatList } from "react-native-gesture-handler";
-import { HSpacer, IOVisualCostants } from "@pagopa/io-app-design-system";
+import { generateFlatListItemLayout } from "../../../../components/ui/utils/generateFlatListItemLayout";
 import { WithTestID } from "../../../../types/WithTestID";
-import { generateFlatListItemLayout } from "../../utils/generateFlatListItemLayout";
 import {
   PAYMENT_CARD_SMALL_WIDTH,
   PaymentCardSmall,
@@ -26,6 +26,7 @@ const generateCardsLayout = generateFlatListItemLayout(
   PAYMENT_CARD_SMALL_WIDTH,
   DIVIDER_WIDTH
 );
+
 export const PaymentCardsCarousel = ({
   cards,
   testID
diff --git a/ts/features/payments/common/components/__tests__/PaymentCard.test.tsx b/ts/features/payments/common/components/__tests__/PaymentCard.test.tsx
new file mode 100644
index 00000000000..50adb0d3721
--- /dev/null
+++ b/ts/features/payments/common/components/__tests__/PaymentCard.test.tsx
@@ -0,0 +1,59 @@
+import { render } from "@testing-library/react-native";
+import { format } from "date-fns";
+import { default as React } from "react";
+import I18n from "../../../../../i18n";
+import { PaymentCard } from "../PaymentCard";
+
+describe("PaymentCard", () => {
+  jest.useFakeTimers();
+  it(`should match snapshot for loading`, () => {
+    const component = render(<PaymentCard isLoading={true} />);
+    expect(component).toMatchSnapshot();
+  });
+  it(`should render credit card data`, () => {
+    const tDate = new Date();
+    const { queryByText } = render(
+      <PaymentCard brand="mastercard" hpan="1234" expireDate={tDate} />
+    );
+
+    expect(queryByText("Mastercard •••• 1234")).not.toBeNull();
+    expect(
+      queryByText(
+        I18n.t("wallet.creditCard.validUntil", {
+          expDate: format(tDate, "MM/YY")
+        })
+      )
+    ).not.toBeNull();
+  });
+  it(`should render bancomat data`, () => {
+    const tDate = new Date();
+    const { queryByTestId, queryByText } = render(
+      <PaymentCard abiCode="1234" expireDate={tDate} holderName="Anna Verdi" />
+    );
+
+    expect(queryByTestId("paymentCardBankLogoTestId")).not.toBeNull();
+    expect(queryByText("Mastercard •••• 1234")).toBeNull();
+    expect(queryByText("Anna Verdi")).not.toBeNull();
+    expect(
+      queryByText(
+        I18n.t("wallet.creditCard.validUntil", {
+          expDate: format(tDate, "MM/YY")
+        })
+      )
+    ).not.toBeNull();
+  });
+  it(`should render BPay data`, () => {
+    const { queryByTestId, queryByText } = render(
+      <PaymentCard holderPhone="123456789" />
+    );
+    expect(queryByTestId("paymentCardBPayLogoTestId")).not.toBeNull();
+    expect(queryByText("123456789")).not.toBeNull();
+  });
+  it(`should render PayPal data`, () => {
+    const { queryByTestId, queryByText } = render(
+      <PaymentCard holderEmail="abc@abc.it" />
+    );
+    expect(queryByTestId("paymentCardPayPalLogoTestId")).not.toBeNull();
+    expect(queryByText("abc@abc.it")).not.toBeNull();
+  });
+});
diff --git a/ts/features/payments/common/components/__tests__/PaymentCardBig.test.tsx b/ts/features/payments/common/components/__tests__/PaymentCardBig.test.tsx
new file mode 100644
index 00000000000..6ab8e29da3c
--- /dev/null
+++ b/ts/features/payments/common/components/__tests__/PaymentCardBig.test.tsx
@@ -0,0 +1,53 @@
+import { default as React } from "react";
+import { createStore } from "redux";
+import ROUTES from "../../../../../navigation/routes";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { appReducer } from "../../../../../store/reducers";
+import { GlobalState } from "../../../../../store/reducers/types";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
+import { PaymentCardBig, PaymentCardBigProps } from "../PaymentCardBig";
+
+describe("PaymentCardBig component", () => {
+  const testID = "PaymentCardBigTestID";
+  jest.useFakeTimers();
+  it(`matches snapshot for loading`, () => {
+    const component = renderCardBig({ isLoading: true });
+    expect(component).toMatchSnapshot();
+  });
+  it(`matches snapshot for paypal`, () => {
+    const component = renderCardBig({
+      cardType: "PAYPAL",
+      holderEmail: "someEmail@test.com"
+    });
+    expect(component).toMatchSnapshot();
+  });
+
+  it(`should render a phone number in case of BancomatPay`, () => {
+    const component = renderCardBig({
+      cardType: "BANCOMATPAY",
+      phoneNumber: "1234567890",
+      holderName: "holderName",
+      testID
+    });
+    expect(component).not.toBeNull();
+    expect(component.queryByText("1234567890")).not.toBeNull();
+  });
+  it(`should render a skeleton when loading`, () => {
+    const component = renderCardBig({
+      isLoading: true,
+      testID
+    });
+    expect(component).not.toBeNull();
+    expect(component.queryByTestId(`${testID}-skeleton`)).not.toBeNull();
+  });
+});
+
+function renderCardBig(props: PaymentCardBigProps) {
+  const globalState = appReducer(undefined, applicationChangeState("active"));
+  return renderScreenWithNavigationStoreContext<GlobalState>(
+    () => <PaymentCardBig {...props} />,
+    ROUTES.WALLET_HOME,
+    {},
+    createStore(appReducer, globalState as any)
+  );
+}
diff --git a/ts/components/ui/cards/payment/__test__/PaymentCards.test.tsx b/ts/features/payments/common/components/__tests__/PaymentCardSmall.test.tsx
similarity index 61%
rename from ts/components/ui/cards/payment/__test__/PaymentCards.test.tsx
rename to ts/features/payments/common/components/__tests__/PaymentCardSmall.test.tsx
index 2d711bcf39f..fcf5118c7da 100644
--- a/ts/components/ui/cards/payment/__test__/PaymentCards.test.tsx
+++ b/ts/features/payments/common/components/__tests__/PaymentCardSmall.test.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { default as React } from "react";
 import { createStore } from "redux";
 import ROUTES from "../../../../../navigation/routes";
 import { applicationChangeState } from "../../../../../store/actions/application";
@@ -6,7 +6,6 @@ import { appReducer } from "../../../../../store/reducers";
 import { GlobalState } from "../../../../../store/reducers/types";
 import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
 import { PaymentCardSmall, PaymentCardSmallProps } from "../PaymentCardSmall";
-import { PaymentCardBig, PaymentCardBigProps } from "../PaymentCardBig";
 
 describe("PaymentCardSmall component", () => {
   const testID = "PaymentCardSmallTestID";
@@ -57,51 +56,6 @@ describe("PaymentCardSmall component", () => {
   });
 });
 
-describe("PaymentCardBig component", () => {
-  const testID = "PaymentCardBigTestID";
-  jest.useFakeTimers();
-  it(`matches snapshot for loading`, () => {
-    const component = renderCardBig({ isLoading: true });
-    expect(component).toMatchSnapshot();
-  });
-  it(`matches snapshot for paypal`, () => {
-    const component = renderCardBig({
-      cardType: "PAYPAL",
-      holderEmail: "someEmail@test.com"
-    });
-    expect(component).toMatchSnapshot();
-  });
-
-  it(`should render a phone number in case of BancomatPay`, () => {
-    const component = renderCardBig({
-      cardType: "BANCOMATPAY",
-      phoneNumber: "1234567890",
-      holderName: "holderName",
-      testID
-    });
-    expect(component).not.toBeNull();
-    expect(component.queryByText("1234567890")).not.toBeNull();
-  });
-  it(`should render a skeleton when loading`, () => {
-    const component = renderCardBig({
-      isLoading: true,
-      testID
-    });
-    expect(component).not.toBeNull();
-    expect(component.queryByTestId(`${testID}-skeleton`)).not.toBeNull();
-  });
-});
-
-function renderCardBig(props: PaymentCardBigProps) {
-  const globalState = appReducer(undefined, applicationChangeState("active"));
-  return renderScreenWithNavigationStoreContext<GlobalState>(
-    () => <PaymentCardBig {...props} />,
-    ROUTES.WALLET_HOME,
-    {},
-    createStore(appReducer, globalState as any)
-  );
-}
-
 function renderCardSmall(props: PaymentCardSmallProps) {
   const globalState = appReducer(undefined, applicationChangeState("active"));
   return renderScreenWithNavigationStoreContext<GlobalState>(
diff --git a/ts/features/payments/common/components/__tests__/__snapshots__/PaymentCard.test.tsx.snap b/ts/features/payments/common/components/__tests__/__snapshots__/PaymentCard.test.tsx.snap
new file mode 100644
index 00000000000..8a74210a395
--- /dev/null
+++ b/ts/features/payments/common/components/__tests__/__snapshots__/PaymentCard.test.tsx.snap
@@ -0,0 +1,164 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PaymentCard should match snapshot for loading 1`] = `
+<View
+  style={
+    Object {
+      "aspectRatio": 1.6,
+      "backgroundColor": "#E8EBF1",
+      "borderColor": "#D2D6E3",
+      "borderRadius": 16,
+      "borderWidth": 1,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "flex": 1,
+        "justifyContent": "space-between",
+        "padding": 16,
+        "paddingTop": 8,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          Object {
+            "paddingTop": 8,
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          Object {
+            "width": "60%",
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "opacity": 0.5,
+            }
+          }
+        >
+          <View
+            color="#D2D6E3"
+            height={24}
+            radius={28}
+            style={
+              Object {
+                "backgroundColor": "#D2D6E3",
+                "borderRadius": 28,
+                "height": 24,
+                "width": "100%",
+              }
+            }
+            width="100%"
+          />
+        </View>
+      </View>
+      <View
+        style={
+          Object {
+            "width": "20%",
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "opacity": 0.5,
+            }
+          }
+        >
+          <View
+            color="#D2D6E3"
+            height={24}
+            radius={28}
+            style={
+              Object {
+                "backgroundColor": "#D2D6E3",
+                "borderRadius": 28,
+                "height": 24,
+                "width": "100%",
+              }
+            }
+            width="100%"
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Object {
+          "justifyContent": "space-between",
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "opacity": 0.5,
+          }
+        }
+      >
+        <View
+          color="#D2D6E3"
+          height={18}
+          radius={28}
+          style={
+            Object {
+              "backgroundColor": "#D2D6E3",
+              "borderRadius": 28,
+              "height": 18,
+              "width": "55%",
+            }
+          }
+          width="55%"
+        />
+      </View>
+      <View
+        style={
+          Object {
+            "height": 8,
+          }
+        }
+      />
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "opacity": 0.5,
+          }
+        }
+      >
+        <View
+          color="#D2D6E3"
+          height={18}
+          radius={28}
+          style={
+            Object {
+              "backgroundColor": "#D2D6E3",
+              "borderRadius": 28,
+              "height": 18,
+              "width": "45%",
+            }
+          }
+          width="45%"
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;
diff --git a/ts/features/payments/common/components/__tests__/__snapshots__/PaymentCardBig.test.tsx.snap b/ts/features/payments/common/components/__tests__/__snapshots__/PaymentCardBig.test.tsx.snap
new file mode 100644
index 00000000000..b28621aed7b
--- /dev/null
+++ b/ts/features/payments/common/components/__tests__/__snapshots__/PaymentCardBig.test.tsx.snap
@@ -0,0 +1,898 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PaymentCardBig component matches snapshot for loading 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  WALLET_HOME
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "alignContent": "space-between",
+                            "alignItems": "flex-start",
+                            "backgroundColor": "#E8EBF1",
+                            "borderCurve": "continuous",
+                            "borderRadius": 16,
+                            "flex": 1,
+                            "height": 207,
+                            "justifyContent": "space-between",
+                            "padding": 24,
+                            "width": "100%",
+                          }
+                        }
+                        testID="undefined-skeleton"
+                      >
+                        <View>
+                          <View
+                            collapsable={false}
+                            style={
+                              Object {
+                                "opacity": 0.5,
+                              }
+                            }
+                          >
+                            <View
+                              color="#D2D6E3"
+                              height={24}
+                              radius={8}
+                              style={
+                                Object {
+                                  "backgroundColor": "#D2D6E3",
+                                  "borderRadius": 8,
+                                  "height": 24,
+                                  "width": 164,
+                                }
+                              }
+                              width={164}
+                            />
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "height": 16,
+                              }
+                            }
+                          />
+                          <View
+                            collapsable={false}
+                            style={
+                              Object {
+                                "opacity": 0.5,
+                              }
+                            }
+                          >
+                            <View
+                              color="#D2D6E3"
+                              height={16}
+                              radius={8}
+                              style={
+                                Object {
+                                  "backgroundColor": "#D2D6E3",
+                                  "borderRadius": 8,
+                                  "height": 16,
+                                  "width": 117,
+                                }
+                              }
+                              width={117}
+                            />
+                          </View>
+                        </View>
+                        <View>
+                          <View
+                            collapsable={false}
+                            style={
+                              Object {
+                                "opacity": 0.5,
+                              }
+                            }
+                          >
+                            <View
+                              color="#D2D6E3"
+                              height={16}
+                              radius={8}
+                              style={
+                                Object {
+                                  "backgroundColor": "#D2D6E3",
+                                  "borderRadius": 8,
+                                  "height": 16,
+                                  "width": 97,
+                                }
+                              }
+                              width={97}
+                            />
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "height": 4,
+                              }
+                            }
+                          />
+                          <View
+                            collapsable={false}
+                            style={
+                              Object {
+                                "opacity": 0.5,
+                              }
+                            }
+                          >
+                            <View
+                              color="#D2D6E3"
+                              height={24}
+                              radius={8}
+                              style={
+                                Object {
+                                  "backgroundColor": "#D2D6E3",
+                                  "borderRadius": 8,
+                                  "height": 24,
+                                  "width": 164,
+                                }
+                              }
+                              width={164}
+                            />
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`PaymentCardBig component matches snapshot for paypal 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  WALLET_HOME
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={2}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "alignContent": "space-between",
+                            "alignItems": "flex-start",
+                            "backgroundColor": "#E8EBF1",
+                            "borderCurve": "continuous",
+                            "borderRadius": 16,
+                            "flex": 1,
+                            "height": 207,
+                            "justifyContent": "space-between",
+                            "padding": 24,
+                            "width": "100%",
+                          }
+                        }
+                      >
+                        <Image
+                          accessibilityLabel="PayPal"
+                          accessible={true}
+                          resizeMode="contain"
+                          source={
+                            Object {
+                              "testUri": "../../../img/wallet/payment-methods/paypal-logo.png",
+                            }
+                          }
+                          style={
+                            Object {
+                              "height": 32,
+                              "width": 114,
+                            }
+                          }
+                        />
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <Text
+                          accessibilityLabel="account: someEmail@test.com"
+                          accessible={true}
+                          allowFontScaling={false}
+                          color="black"
+                          defaultColor="black"
+                          defaultWeight="SemiBold"
+                          ellipsizeMode="tail"
+                          font="TitilliumWeb"
+                          fontStyle={
+                            Object {
+                              "fontSize": 18,
+                              "lineHeight": 25,
+                            }
+                          }
+                          numberOfLines={1}
+                          style={
+                            Array [
+                              Object {
+                                "width": "75%",
+                              },
+                              Object {
+                                "fontSize": 18,
+                                "lineHeight": 25,
+                              },
+                              Object {
+                                "color": "#0E0F13",
+                                "fontFamily": "Titillium Web",
+                                "fontStyle": "normal",
+                                "fontWeight": "600",
+                              },
+                            ]
+                          }
+                          weight="SemiBold"
+                        >
+                          someEmail@test.com
+                        </Text>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/payments/common/components/__tests__/__snapshots__/PaymentCardSmall.test.tsx.snap b/ts/features/payments/common/components/__tests__/__snapshots__/PaymentCardSmall.test.tsx.snap
new file mode 100644
index 00000000000..817dc8922fc
--- /dev/null
+++ b/ts/features/payments/common/components/__tests__/__snapshots__/PaymentCardSmall.test.tsx.snap
@@ -0,0 +1,916 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PaymentCardSmall component matches snapshot for loading 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  WALLET_HOME
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Array [
+                            Object {
+                              "alignContent": "center",
+                              "alignItems": "flex-start",
+                              "borderCurve": "continuous",
+                              "borderRadius": 8,
+                              "flex": 1,
+                              "flexBasis": 160,
+                              "flexGrow": 0,
+                              "justifyContent": "center",
+                              "padding": 16,
+                              "width": 160,
+                            },
+                            Object {
+                              "backgroundColor": "#E8EBF1",
+                            },
+                          ]
+                        }
+                        testID="undefined-skeleton"
+                      >
+                        <View
+                          collapsable={false}
+                          style={
+                            Object {
+                              "opacity": 0.5,
+                            }
+                          }
+                        >
+                          <View
+                            color="#D2D6E3"
+                            height={24}
+                            radius={8}
+                            style={
+                              Object {
+                                "backgroundColor": "#D2D6E3",
+                                "borderRadius": 8,
+                                "height": 24,
+                                "width": 24,
+                              }
+                            }
+                            width={24}
+                          />
+                        </View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          collapsable={false}
+                          style={
+                            Object {
+                              "opacity": 0.5,
+                            }
+                          }
+                        >
+                          <View
+                            color="#D2D6E3"
+                            height={16}
+                            radius={8}
+                            style={
+                              Object {
+                                "backgroundColor": "#D2D6E3",
+                                "borderRadius": 8,
+                                "height": 16,
+                                "width": 125,
+                              }
+                            }
+                            width={125}
+                          />
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`PaymentCardSmall component matches snapshot for paypal 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  WALLET_HOME
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={2}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "alignContent": "center",
+                            "alignItems": "flex-start",
+                            "backgroundColor": "#E8EBF1",
+                            "borderCurve": "continuous",
+                            "borderRadius": 8,
+                            "flex": 1,
+                            "flexBasis": 160,
+                            "flexGrow": 0,
+                            "justifyContent": "center",
+                            "padding": 16,
+                            "width": 160,
+                          }
+                        }
+                      >
+                        <View
+                          style={
+                            Object {
+                              "alignItems": "center",
+                              "flex": 1,
+                              "flexDirection": "row",
+                              "justifyContent": "space-between",
+                              "width": "100%",
+                            }
+                          }
+                        >
+                          <RNSVGSvgView
+                            align="xMidYMid"
+                            bbHeight={24}
+                            bbWidth={24}
+                            focusable={false}
+                            height={24}
+                            meetOrSlice={0}
+                            minX={0}
+                            minY={0}
+                            style={
+                              Array [
+                                Object {
+                                  "backgroundColor": "transparent",
+                                  "borderWidth": 0,
+                                },
+                                Object {
+                                  "flex": 0,
+                                  "height": 24,
+                                  "width": 24,
+                                },
+                              ]
+                            }
+                            vbHeight={24}
+                            vbWidth={24}
+                            width={24}
+                          >
+                            <RNSVGGroup
+                              fill={
+                                Object {
+                                  "payload": 4278190080,
+                                  "type": 0,
+                                }
+                              }
+                            >
+                              <RNSVGPath
+                                d="M19.2206 8.31688c.2592-1.63369 0-2.74569-.8944-3.7513-.9846-1.10858-2.7618-1.5845-5.0354-1.5845H6.68879c-.22503.00029-.44257.07995-.61351.22464-.17095.1447-.28408.34495-.31906.56475L3.0071 21.0043a.55436.55436 0 0 0 .01458.2396.55941.55941 0 0 0 .11462.2117.56714.56714 0 0 0 .19365.1448.57183.57183 0 0 0 .23716.0514h4.07508l-.28116 1.7641a.4841.4841 0 0 0 .01218.2085.48744.48744 0 0 0 .09894.1845.49417.49417 0 0 0 .16771.127.49976.49976 0 0 0 .20597.0463h3.43527c.1952-.0013.3837-.071.532-.1966.1483-.1257.2467-.2992.2779-.4898l.0347-.1728.6468-4.0567.0416-.2288c.0316-.1915.1309-.3657.2804-.4914.1494-.1257.3391-.1949.5353-.1951h.5138c3.3276 0 5.9332-1.3362 6.6946-5.203.3182-1.6154.1539-2.96311-.6873-3.91152-.2664-.29417-.5852-.53733-.9407-.71731"
+                                fill={
+                                  Object {
+                                    "payload": 4278218976,
+                                    "type": 0,
+                                  }
+                                }
+                                propList={
+                                  Array [
+                                    "fill",
+                                  ]
+                                }
+                              />
+                              <RNSVGPath
+                                d="M19.2206 8.31688c.2592-1.63369 0-2.74569-.8944-3.7513-.9846-1.10858-2.7618-1.5845-5.0354-1.5845H6.68879c-.22503.00029-.44257.07995-.61351.22464-.17095.1447-.28408.34495-.31906.56475L3.0071 21.0043a.55436.55436 0 0 0 .01458.2396.55941.55941 0 0 0 .11462.2117.56714.56714 0 0 0 .19365.1448.57183.57183 0 0 0 .23716.0514h4.07508l1.02397-6.4181-.03124.2014c.03393-.2189.14585-.4187.31557-.5632.16972-.1445.38608-.2243.61006-.225h1.93685c3.8044 0 6.7826-1.5285 7.6527-5.94905.0254-.13042.0474-.25741.0671-.38211"
+                                fill={
+                                  Object {
+                                    "payload": 4278197348,
+                                    "type": 0,
+                                  }
+                                }
+                                propList={
+                                  Array [
+                                    "fill",
+                                  ]
+                                }
+                              />
+                              <RNSVGPath
+                                d="M9.76535 8.33862a.81197.81197 0 0 1 .15504-.36155c.08061-.10626.18631-.19146.30781-.24823a.82557.82557 0 0 1 .3563-.08008h5.1743a10.85686 10.85686 0 0 1 1.7066.12356c.1493.02288.2951.05034.4362.08123.1412.03089.2777.06635.4108.1041l.1955.06064c.2463.07968.4855.17956.715.29859.2592-1.63369.0001-2.74569-.8943-3.7513-.9847-1.10858-2.7619-1.5845-5.0355-1.5845H6.68879c-.22503.00029-.44257.07995-.61351.22464-.17095.1447-.28408.34495-.31906.56475L3.0071 21.0043a.55436.55436 0 0 0 .01458.2396.55941.55941 0 0 0 .11462.2117.56714.56714 0 0 0 .19365.1448.57183.57183 0 0 0 .23716.0514h4.07508l1.02397-6.4181 1.09919-6.89508Z"
+                                fill={
+                                  Object {
+                                    "payload": 4278202503,
+                                    "type": 0,
+                                  }
+                                }
+                                propList={
+                                  Array [
+                                    "fill",
+                                  ]
+                                }
+                              />
+                            </RNSVGGroup>
+                          </RNSVGSvgView>
+                        </View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <Text
+                          allowFontScaling={false}
+                          color="grey-700"
+                          defaultColor="black"
+                          defaultWeight="SemiBold"
+                          ellipsizeMode="tail"
+                          font="TitilliumWeb"
+                          fontStyle={
+                            Object {
+                              "fontSize": 18,
+                              "lineHeight": 25,
+                            }
+                          }
+                          numberOfLines={1}
+                          style={
+                            Array [
+                              Object {
+                                "fontSize": 18,
+                                "lineHeight": 25,
+                              },
+                              Object {
+                                "color": "#555C70",
+                                "fontFamily": "Titillium Web",
+                                "fontStyle": "normal",
+                                "fontWeight": "400",
+                              },
+                            ]
+                          }
+                          weight="Regular"
+                        >
+                          PayPal
+                        </Text>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/components/ui/utils/components/BankLogoOrLoadingSkeleton.tsx b/ts/features/payments/common/components/utils/BankLogoOrLoadingSkeleton.tsx
similarity index 96%
rename from ts/components/ui/utils/components/BankLogoOrLoadingSkeleton.tsx
rename to ts/features/payments/common/components/utils/BankLogoOrLoadingSkeleton.tsx
index 1eef3efc585..06826e87fd0 100644
--- a/ts/components/ui/utils/components/BankLogoOrLoadingSkeleton.tsx
+++ b/ts/features/payments/common/components/utils/BankLogoOrLoadingSkeleton.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { Image } from "react-native";
 import Placeholder from "rn-placeholder";
 import { IOColors } from "@pagopa/io-app-design-system";
-import { getBankLogosCdnUri } from "../strings";
+import { getBankLogosCdnUri } from "../../../../../components/ui/utils/strings";
 
 type BankLogoOrSkeletonProps = {
   abiCode?: string;
diff --git a/ts/features/payments/common/saga/index.ts b/ts/features/payments/common/saga/index.ts
new file mode 100644
index 00000000000..c68b76f3a6a
--- /dev/null
+++ b/ts/features/payments/common/saga/index.ts
@@ -0,0 +1,27 @@
+import { SagaIterator } from "redux-saga";
+import { fork, select } from "typed-redux-saga/macro";
+import { isPagoPATestEnabledSelector } from "../../../../store/reducers/persistedPreferences";
+import { watchPaymentsOnboardingSaga } from "../../onboarding/saga";
+import { watchPaymentsCheckoutSaga } from "../../checkout/saga";
+import { createPaymentClient, createWalletClient } from "../api/client";
+import { walletApiBaseUrl, walletApiUatBaseUrl } from "../../../../config";
+import { watchPaymentsMethodDetailsSaga } from "../../details/saga";
+import { watchPaymentsTransactionSaga } from "../../transaction/saga";
+import { watchPaymentsWalletSaga } from "../../wallet/saga";
+
+export function* watchPaymentsSaga(walletToken: string): SagaIterator {
+  const isPagoPATestEnabled = yield* select(isPagoPATestEnabledSelector);
+
+  const walletBaseUrl = isPagoPATestEnabled
+    ? walletApiUatBaseUrl
+    : walletApiBaseUrl;
+
+  const walletClient = createWalletClient(walletBaseUrl, walletToken);
+  const paymentClient = createPaymentClient(walletBaseUrl, walletToken);
+
+  yield* fork(watchPaymentsWalletSaga, walletClient);
+  yield* fork(watchPaymentsOnboardingSaga, walletClient);
+  yield* fork(watchPaymentsMethodDetailsSaga, walletClient);
+  yield* fork(watchPaymentsTransactionSaga, walletClient);
+  yield* fork(watchPaymentsCheckoutSaga, paymentClient);
+}
diff --git a/ts/features/payments/common/store/actions/index.ts b/ts/features/payments/common/store/actions/index.ts
new file mode 100644
index 00000000000..5a30d06b2b2
--- /dev/null
+++ b/ts/features/payments/common/store/actions/index.ts
@@ -0,0 +1,14 @@
+import { PaymentsMethodDetailsActions } from "../../../details/store/actions";
+import { PaymentsHistoryActions } from "../../../history/store/actions";
+import { PaymentsOnboardingActions } from "../../../onboarding/store/actions";
+import { PaymentsCheckoutActions } from "../../../checkout/store/actions";
+import { PaymentsTransactionActions } from "../../../transaction/store/actions";
+import { PaymentsWalletActions } from "../../../wallet/store/actions";
+
+export type PaymentsActions =
+  | PaymentsOnboardingActions
+  | PaymentsMethodDetailsActions
+  | PaymentsCheckoutActions
+  | PaymentsTransactionActions
+  | PaymentsHistoryActions
+  | PaymentsWalletActions;
diff --git a/ts/features/payments/common/store/reducers/index.ts b/ts/features/payments/common/store/reducers/index.ts
new file mode 100644
index 00000000000..44845a5e129
--- /dev/null
+++ b/ts/features/payments/common/store/reducers/index.ts
@@ -0,0 +1,40 @@
+import { combineReducers } from "redux";
+import { PersistPartial } from "redux-persist";
+import paymentReducer, {
+  PaymentsCheckoutState
+} from "../../../checkout/store/reducers";
+import detailsReducer, {
+  PaymentsMethodDetailsState
+} from "../../../details/store/reducers";
+import historyReducer, {
+  PaymentsHistoryState
+} from "../../../history/store/reducers";
+import onboardingReducer, {
+  PaymentsOnboardingState
+} from "../../../onboarding/store/reducers";
+import transactionReducer, {
+  PaymentsTransactionState
+} from "../../../transaction/store/reducers";
+import paymentsWalletReducer, {
+  PaymentsWalletState
+} from "../../../wallet/store/reducers";
+
+export type PaymentsState = {
+  onboarding: PaymentsOnboardingState;
+  details: PaymentsMethodDetailsState;
+  checkout: PaymentsCheckoutState;
+  transaction: PaymentsTransactionState;
+  history: PaymentsHistoryState & PersistPartial;
+  wallet: PaymentsWalletState;
+};
+
+const paymentsReducer = combineReducers({
+  onboarding: onboardingReducer,
+  details: detailsReducer,
+  checkout: paymentReducer,
+  transaction: transactionReducer,
+  history: historyReducer,
+  wallet: paymentsWalletReducer
+});
+
+export default paymentsReducer;
diff --git a/ts/features/walletV3/details/types/UIWalletInfoDetails.ts b/ts/features/payments/common/types/UIWalletInfoDetails.ts
similarity index 93%
rename from ts/features/walletV3/details/types/UIWalletInfoDetails.ts
rename to ts/features/payments/common/types/UIWalletInfoDetails.ts
index 56f40ccbd47..5ba809c575e 100644
--- a/ts/features/walletV3/details/types/UIWalletInfoDetails.ts
+++ b/ts/features/payments/common/types/UIWalletInfoDetails.ts
@@ -3,7 +3,7 @@ import {
   WalletInfoDetails1,
   WalletInfoDetails2,
   WalletInfoDetails3
-} from "../../../../../definitions/pagopa/walletv3/WalletInfoDetails";
+} from "../../../../../definitions/pagopa/ecommerce/WalletInfoDetails";
 
 /**
  * Transforms all required props from WalletInfoDetails1 to partial
diff --git a/ts/features/walletV3/common/utils/const.ts b/ts/features/payments/common/utils/const.ts
similarity index 100%
rename from ts/features/walletV3/common/utils/const.ts
rename to ts/features/payments/common/utils/const.ts
diff --git a/ts/features/walletV3/common/utils/index.ts b/ts/features/payments/common/utils/index.ts
similarity index 85%
rename from ts/features/walletV3/common/utils/index.ts
rename to ts/features/payments/common/utils/index.ts
index 812c3a3b7b6..61d88efd94e 100644
--- a/ts/features/walletV3/common/utils/index.ts
+++ b/ts/features/payments/common/utils/index.ts
@@ -8,14 +8,13 @@ import { pipe } from "fp-ts/lib/function";
 import I18n from "i18n-js";
 import _ from "lodash";
 import { Bundle } from "../../../../../definitions/pagopa/ecommerce/Bundle";
-import { ServiceNameEnum } from "../../../../../definitions/pagopa/walletv3/ServiceName";
-import { ServiceStatusEnum } from "../../../../../definitions/pagopa/walletv3/ServiceStatus";
+import { WalletApplicationStatusEnum } from "../../../../../definitions/pagopa/walletv3/WalletApplicationStatus";
 import { WalletInfo } from "../../../../../definitions/pagopa/walletv3/WalletInfo";
 import { PaymentSupportStatus } from "../../../../types/paymentMethodCapabilities";
 import { isExpiredDate } from "../../../../utils/dates";
 import { findFirstCaseInsensitive } from "../../../../utils/object";
-import { UIWalletInfoDetails } from "../../details/types/UIWalletInfoDetails";
-import { WalletPaymentPspSortType } from "../../payment/types";
+import { WalletPaymentPspSortType } from "../../checkout/types";
+import { UIWalletInfoDetails } from "../types/UIWalletInfoDetails";
 
 /**
  * A simple function to get the corresponding translated badge text,
@@ -60,21 +59,21 @@ export const isPaymentMethodExpired = (
  * @param paymentMethod
  * @param walletFunction
  */
-export const hasServiceEnabled = (
+export const hasApplicationEnabled = (
   paymentMethod: WalletInfo | undefined,
-  walletService: ServiceNameEnum
+  walletApplication: string
 ): boolean =>
   paymentMethod !== undefined &&
-  paymentMethod.services.some(
-    service =>
-      service.name === walletService &&
-      service.status === ServiceStatusEnum.ENABLED
+  paymentMethod.applications.some(
+    application =>
+      application.name === walletApplication &&
+      application.status === WalletApplicationStatusEnum.ENABLED
   );
 /**
  * return true if the payment method has the payment feature
  */
 export const hasPaymentFeature = (paymentMethod: WalletInfo): boolean =>
-  hasServiceEnabled(paymentMethod, ServiceNameEnum.PAGOPA);
+  hasApplicationEnabled(paymentMethod, "PAGOPA");
 
 /**
  * Check if a payment method is supported or not
@@ -111,7 +110,7 @@ export const getPaymentLogo = (
     return "payPal";
   } else if (details.maskedNumber !== undefined) {
     return "bancomatPay";
-  } else if (details.maskedPan !== undefined) {
+  } else if (details.lastFourDigits !== undefined) {
     return pipe(
       details.brand,
       O.fromNullable,
diff --git a/ts/features/walletV3/common/utils/validation.ts b/ts/features/payments/common/utils/validation.ts
similarity index 100%
rename from ts/features/walletV3/common/utils/validation.ts
rename to ts/features/payments/common/utils/validation.ts
diff --git a/ts/features/payments/common/utils/wallet.ts b/ts/features/payments/common/utils/wallet.ts
new file mode 100644
index 00000000000..33e4a1dea21
--- /dev/null
+++ b/ts/features/payments/common/utils/wallet.ts
@@ -0,0 +1,26 @@
+import { WalletInfo } from "../../../../../definitions/pagopa/walletv3/WalletInfo";
+import { getDateFromExpiryDate } from "../../../../utils/dates";
+import { WalletCard } from "../../../newWallet/types";
+import { UIWalletInfoDetails } from "../types/UIWalletInfoDetails";
+
+export const mapWalletIdToCardKey = (walletId: string) => `method_${walletId}`;
+
+export const mapWalletsToCards = (
+  wallets: ReadonlyArray<WalletInfo>
+): ReadonlyArray<WalletCard> =>
+  wallets.map<WalletCard>(wallet => {
+    const details = wallet.details as UIWalletInfoDetails;
+
+    return {
+      key: mapWalletIdToCardKey(wallet.walletId),
+      type: "payment",
+      category: "payment",
+      walletId: wallet.walletId,
+      hpan: details.lastFourDigits,
+      abiCode: details.abi,
+      brand: details.brand,
+      expireDate: getDateFromExpiryDate(details.expiryDate),
+      holderEmail: details.maskedEmail,
+      holderPhone: details.maskedNumber
+    };
+  });
diff --git a/ts/features/payments/details/components/PaymentsMethodDetailsBaseScreenComponent.tsx b/ts/features/payments/details/components/PaymentsMethodDetailsBaseScreenComponent.tsx
new file mode 100644
index 00000000000..4eb96c4628d
--- /dev/null
+++ b/ts/features/payments/details/components/PaymentsMethodDetailsBaseScreenComponent.tsx
@@ -0,0 +1,81 @@
+import {
+  ContentWrapper,
+  IOColors,
+  IOSpacingScale,
+  VSpacer
+} from "@pagopa/io-app-design-system";
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
+import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
+import FocusAwareStatusBar from "../../../../components/ui/FocusAwareStatusBar";
+import { useIOSelector } from "../../../../store/hooks";
+import { isDesignSystemEnabledSelector } from "../../../../store/reducers/persistedPreferences";
+import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
+import {
+  PaymentCard,
+  PaymentCardComponentProps
+} from "../../common/components/PaymentCard";
+
+type Props = {
+  card: PaymentCardComponentProps;
+  headerTitle?: string;
+};
+
+/**
+ * Base layout for payment methods screen & legacy delete handling
+ */
+const PaymentsMethodDetailsBaseScreenComponent = ({
+  card,
+  headerTitle = "",
+  children
+}: React.PropsWithChildren<Props>) => {
+  const isDSenabled = useIOSelector(isDesignSystemEnabledSelector);
+  const blueHeaderColor = isDSenabled ? IOColors["blueIO-600"] : IOColors.blue;
+
+  return (
+    <BaseScreenComponent
+      contextualHelp={emptyContextualHelp}
+      headerTitle={headerTitle}
+      faqCategories={["wallet_methods"]}
+      goBack={true}
+      titleColor="white"
+      dark={true}
+      headerBackgroundColor={blueHeaderColor}
+    >
+      <FocusAwareStatusBar
+        backgroundColor={blueHeaderColor}
+        barStyle="light-content"
+      />
+      <ScrollView>
+        <View style={[styles.blueHeader, { backgroundColor: blueHeaderColor }]}>
+          <View style={styles.cardContainer}>
+            <PaymentCard {...card} />
+          </View>
+        </View>
+        <VSpacer size={24} />
+        <ContentWrapper>{children}</ContentWrapper>
+        <VSpacer size={40} />
+      </ScrollView>
+    </BaseScreenComponent>
+  );
+};
+
+const cardContainerHorizontalSpacing: IOSpacingScale = 16;
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    paddingHorizontal: cardContainerHorizontalSpacing,
+    alignSelf: "center",
+    marginBottom: "-15%",
+    aspectRatio: 1.7,
+    width: "100%"
+  },
+  blueHeader: {
+    paddingTop: "75%",
+    marginTop: "-75%",
+    marginBottom: "15%"
+  }
+});
+
+export { PaymentsMethodDetailsBaseScreenComponent };
diff --git a/ts/features/payments/details/components/PaymentsMethodDetailsDeleteButton.tsx b/ts/features/payments/details/components/PaymentsMethodDetailsDeleteButton.tsx
new file mode 100644
index 00000000000..d92d4dcf950
--- /dev/null
+++ b/ts/features/payments/details/components/PaymentsMethodDetailsDeleteButton.tsx
@@ -0,0 +1,77 @@
+import { IOToast, ListItemAction } from "@pagopa/io-app-design-system";
+import * as React from "react";
+import { Alert, Platform } from "react-native";
+import { WalletInfo } from "../../../../../definitions/pagopa/walletv3/WalletInfo";
+import I18n from "../../../../i18n";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { useIODispatch } from "../../../../store/hooks";
+import { paymentsDeleteMethodAction } from "../store/actions";
+
+type PaymentsDetailsDeleteMethodButtonProps = {
+  paymentMethod?: WalletInfo;
+};
+
+const PaymentsMethodDetailsDeleteButton = ({
+  paymentMethod
+}: PaymentsDetailsDeleteMethodButtonProps) => {
+  const navigation = useIONavigation();
+  const dispatch = useIODispatch();
+
+  const deleteWallet = (walletId: string) => {
+    dispatch(
+      paymentsDeleteMethodAction.request({
+        walletId,
+        onSuccess: () => {
+          IOToast.success(I18n.t("wallet.delete.successful"));
+        },
+        onFailure: () => {
+          IOToast.error(I18n.t("wallet.delete.failed"));
+        }
+      })
+    );
+    navigation.goBack();
+  };
+
+  if (paymentMethod === undefined) {
+    return null;
+  }
+
+  const onDeleteMethod = () => {
+    // Create a native Alert to confirm or cancel the delete action
+    Alert.alert(
+      I18n.t("wallet.newRemove.title"),
+      I18n.t("wallet.newRemove.body"),
+      [
+        {
+          text:
+            Platform.OS === "ios"
+              ? I18n.t(`wallet.delete.ios.confirm`)
+              : I18n.t(`wallet.delete.android.confirm`),
+          style: "destructive",
+          onPress: () => {
+            if (paymentMethod) {
+              deleteWallet(paymentMethod.walletId);
+            }
+          }
+        },
+        {
+          text: I18n.t("global.buttons.cancel"),
+          style: "default"
+        }
+      ],
+      { cancelable: false }
+    );
+  };
+
+  return (
+    <ListItemAction
+      label={I18n.t("cardComponent.removeCta")}
+      onPress={onDeleteMethod}
+      accessibilityLabel={I18n.t("cardComponent.removeCta")}
+      icon="trashcan"
+      variant="danger"
+    />
+  );
+};
+
+export { PaymentsMethodDetailsDeleteButton };
diff --git a/ts/features/payments/details/components/PaymentsMethodDetailsErrorContent.tsx b/ts/features/payments/details/components/PaymentsMethodDetailsErrorContent.tsx
new file mode 100644
index 00000000000..61cc1f7d76e
--- /dev/null
+++ b/ts/features/payments/details/components/PaymentsMethodDetailsErrorContent.tsx
@@ -0,0 +1,47 @@
+import * as React from "react";
+import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
+import I18n from "../../../../i18n";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { useIODispatch } from "../../../../store/hooks";
+import { paymentsGetMethodDetailsAction } from "../store/actions";
+
+type Props = {
+  walletId: string;
+};
+
+const PaymentsMethodDetailsErrorContent = ({ walletId }: Props) => {
+  const navigation = useIONavigation();
+  const dispatch = useIODispatch();
+
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      header: undefined
+    });
+  }, [navigation]);
+
+  const handleOnRetry = () => {
+    dispatch(paymentsGetMethodDetailsAction.request({ walletId }));
+  };
+
+  return (
+    <OperationResultScreenContent
+      title={I18n.t("wallet.methodDetails.error.title")}
+      subtitle={I18n.t("wallet.methodDetails.error.subtitle")}
+      pictogram="umbrellaNew"
+      action={{
+        label: I18n.t("wallet.methodDetails.error.primaryButton"),
+        accessibilityLabel: I18n.t("wallet.methodDetails.error.primaryButton"),
+        onPress: () => navigation.pop()
+      }}
+      secondaryAction={{
+        label: I18n.t("wallet.methodDetails.error.secondaryButton"),
+        accessibilityLabel: I18n.t(
+          "wallet.methodDetails.error.secondaryButton"
+        ),
+        onPress: handleOnRetry
+      }}
+    />
+  );
+};
+
+export { PaymentsMethodDetailsErrorContent };
diff --git a/ts/features/walletV3/common/components/WalletDetailsPagoPaPaymentCapability.tsx b/ts/features/payments/details/components/WalletDetailsPagoPaPaymentCapability.tsx
similarity index 82%
rename from ts/features/walletV3/common/components/WalletDetailsPagoPaPaymentCapability.tsx
rename to ts/features/payments/details/components/WalletDetailsPagoPaPaymentCapability.tsx
index 7150259d5ed..d404890d0b7 100644
--- a/ts/features/walletV3/common/components/WalletDetailsPagoPaPaymentCapability.tsx
+++ b/ts/features/payments/details/components/WalletDetailsPagoPaPaymentCapability.tsx
@@ -1,12 +1,10 @@
+import { IOToast, ListItemSwitch } from "@pagopa/io-app-design-system";
 import * as React from "react";
-import { ListItemSwitch } from "@pagopa/io-app-design-system";
-
-import { hasPaymentFeature } from "../utils";
 import { WalletInfo } from "../../../../../definitions/pagopa/walletv3/WalletInfo";
 import I18n from "../../../../i18n";
 import { useIODispatch } from "../../../../store/hooks";
-import { walletDetailsPagoPaCapabilityToggle } from "../../details/store/actions";
-import { IOToast } from "../../../../components/Toast";
+import { hasPaymentFeature } from "../../common/utils";
+import { paymentsTogglePagoPaCapabilityAction } from "../../details/store/actions";
 
 type Props = { paymentMethod: WalletInfo };
 
@@ -35,7 +33,7 @@ const WalletDetailsPagoPaPaymentCapability: React.FC<Props> = props => {
   const handleSwitchPagoPaCapability = () => {
     setLoading(true);
     dispatch(
-      walletDetailsPagoPaCapabilityToggle.request({
+      paymentsTogglePagoPaCapabilityAction.request({
         walletId: props.paymentMethod.walletId,
         onSuccess: handleSwitchSuccess,
         onFailure: handleSwitchError
diff --git a/ts/features/walletV3/common/components/WalletDetailsPaymentMethodFeatures.tsx b/ts/features/payments/details/components/WalletDetailsPaymentMethodFeatures.tsx
similarity index 95%
rename from ts/features/walletV3/common/components/WalletDetailsPaymentMethodFeatures.tsx
rename to ts/features/payments/details/components/WalletDetailsPaymentMethodFeatures.tsx
index b3799b6f200..5a7f3e3b7c7 100644
--- a/ts/features/walletV3/common/components/WalletDetailsPaymentMethodFeatures.tsx
+++ b/ts/features/payments/details/components/WalletDetailsPaymentMethodFeatures.tsx
@@ -1,13 +1,11 @@
 import { Alert } from "@pagopa/io-app-design-system";
 import * as React from "react";
 import { View } from "react-native";
-
-import I18n from "../../../../i18n";
-import { isIdPayEnabledSelector } from "../../../../store/reducers/backendStatus";
 import { WalletInfo } from "../../../../../definitions/pagopa/walletv3/WalletInfo";
-
-import { isPaymentMethodExpired } from "../utils";
+import I18n from "../../../../i18n";
 import { useIOSelector } from "../../../../store/hooks";
+import { isIdPayEnabledSelector } from "../../../../store/reducers/backendStatus";
+import { isPaymentMethodExpired } from "../../common/utils";
 import PaymentMethodInitiatives from "./WalletDetailsPaymentMethodInitiatives";
 import PaymentMethodSettings from "./WalletDetailsPaymentMethodSettings";
 
diff --git a/ts/features/walletV3/common/components/WalletDetailsPaymentMethodInitiatives.tsx b/ts/features/payments/details/components/WalletDetailsPaymentMethodInitiatives.tsx
similarity index 94%
rename from ts/features/walletV3/common/components/WalletDetailsPaymentMethodInitiatives.tsx
rename to ts/features/payments/details/components/WalletDetailsPaymentMethodInitiatives.tsx
index 652a98bebfe..1fef37d47b2 100644
--- a/ts/features/walletV3/common/components/WalletDetailsPaymentMethodInitiatives.tsx
+++ b/ts/features/payments/details/components/WalletDetailsPaymentMethodInitiatives.tsx
@@ -2,6 +2,7 @@ import { Body, H6, IOStyles, VSpacer } from "@pagopa/io-app-design-system";
 import { useFocusEffect, useNavigation } from "@react-navigation/native";
 import * as React from "react";
 import { View } from "react-native";
+import { WalletInfo } from "../../../../../definitions/pagopa/walletv3/WalletInfo";
 import I18n from "../../../../i18n";
 import { IOStackNavigationProp } from "../../../../navigation/params/AppParamsList";
 import { WalletParamsList } from "../../../../navigation/params/WalletParamsList";
@@ -9,12 +10,10 @@ import ROUTES from "../../../../navigation/routes";
 import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { IdPayInstrumentInitiativesList } from "../../../idpay/wallet/components/IdPayInstrumentInitiativesList";
 import {
-  idPayInitiativesFromInstrumentGet,
   idPayInitiativesFromInstrumentRefreshStart,
   idPayInitiativesFromInstrumentRefreshStop
 } from "../../../idpay/wallet/store/actions";
 import { idPayEnabledInitiativesFromInstrumentSelector } from "../../../idpay/wallet/store/reducers";
-import { WalletInfo } from "../../../../../definitions/pagopa/walletv3/WalletInfo";
 
 type Props = {
   paymentMethod: WalletInfo;
@@ -34,11 +33,6 @@ const WalletDetailsPaymentMethodInitiatives = (
   const dispatch = useIODispatch();
 
   const startInitiativeRefreshPolling = React.useCallback(() => {
-    dispatch(
-      idPayInitiativesFromInstrumentGet.request({
-        idWallet: idWalletString
-      })
-    );
     dispatch(
       idPayInitiativesFromInstrumentRefreshStart({
         idWallet: idWalletString
diff --git a/ts/features/walletV3/common/components/WalletDetailsPaymentMethodSettings.tsx b/ts/features/payments/details/components/WalletDetailsPaymentMethodSettings.tsx
similarity index 99%
rename from ts/features/walletV3/common/components/WalletDetailsPaymentMethodSettings.tsx
rename to ts/features/payments/details/components/WalletDetailsPaymentMethodSettings.tsx
index 6916a71958d..587e335baee 100644
--- a/ts/features/walletV3/common/components/WalletDetailsPaymentMethodSettings.tsx
+++ b/ts/features/payments/details/components/WalletDetailsPaymentMethodSettings.tsx
@@ -1,10 +1,9 @@
-import * as React from "react";
 import { H6, IOSpacingScale } from "@pagopa/io-app-design-system";
-
+import * as React from "react";
+import { WalletInfo } from "../../../../../definitions/pagopa/walletv3/WalletInfo";
 import ItemSeparatorComponent from "../../../../components/ItemSeparatorComponent";
 import FavoritePaymentMethodSwitch from "../../../../components/wallet/FavoriteMethodSwitch";
 import I18n from "../../../../i18n";
-import { WalletInfo } from "../../../../../definitions/pagopa/walletv3/WalletInfo";
 import WalletDetailsPagoPaPaymentCapability from "./WalletDetailsPagoPaPaymentCapability";
 
 type Props = { paymentMethod: WalletInfo };
diff --git a/ts/features/payments/details/navigation/navigator.tsx b/ts/features/payments/details/navigation/navigator.tsx
new file mode 100644
index 00000000000..95660ec0116
--- /dev/null
+++ b/ts/features/payments/details/navigation/navigator.tsx
@@ -0,0 +1,36 @@
+import { ParamListBase } from "@react-navigation/native";
+import {
+  createStackNavigator,
+  StackNavigationProp
+} from "@react-navigation/stack";
+import React from "react";
+import { isGestureEnabled } from "../../../../utils/navigation";
+import PaymentsMethodDetailsScreen from "../screens/PaymentsMethodDetailsScreen";
+import { PaymentsMethodDetailsParamsList } from "./params";
+import { PaymentsMethodDetailsRoutes } from "./routes";
+
+const Stack = createStackNavigator<PaymentsMethodDetailsParamsList>();
+
+export const PaymentsMethodDetailsNavigator = () => (
+  <Stack.Navigator
+    initialRouteName={PaymentsMethodDetailsRoutes.PAYMENT_METHOD_DETAILS_SCREEN}
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerShown: false }}
+  >
+    <Stack.Screen
+      name={PaymentsMethodDetailsRoutes.PAYMENT_METHOD_DETAILS_SCREEN}
+      component={PaymentsMethodDetailsScreen}
+      options={{ gestureEnabled: isGestureEnabled }}
+    />
+  </Stack.Navigator>
+);
+
+export type PaymentsMethodDetailsStackNavigationProp<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = string
+> = StackNavigationProp<PaymentsMethodDetailsParamsList & ParamList, RouteName>;
+
+export type PaymentsMethodDetailsStackNavigation =
+  PaymentsMethodDetailsStackNavigationProp<
+    PaymentsMethodDetailsParamsList,
+    keyof PaymentsMethodDetailsParamsList
+  >;
diff --git a/ts/features/payments/details/navigation/params.ts b/ts/features/payments/details/navigation/params.ts
new file mode 100644
index 00000000000..329415e93aa
--- /dev/null
+++ b/ts/features/payments/details/navigation/params.ts
@@ -0,0 +1,7 @@
+import { PaymentsMethodDetailsScreenNavigationParams } from "../screens/PaymentsMethodDetailsScreen";
+import { PaymentsMethodDetailsRoutes } from "./routes";
+
+export type PaymentsMethodDetailsParamsList = {
+  [PaymentsMethodDetailsRoutes.PAYMENT_METHOD_DETAILS_NAVIGATOR]: undefined;
+  [PaymentsMethodDetailsRoutes.PAYMENT_METHOD_DETAILS_SCREEN]: PaymentsMethodDetailsScreenNavigationParams;
+};
diff --git a/ts/features/payments/details/navigation/routes.ts b/ts/features/payments/details/navigation/routes.ts
new file mode 100644
index 00000000000..9553f81c833
--- /dev/null
+++ b/ts/features/payments/details/navigation/routes.ts
@@ -0,0 +1,4 @@
+export const PaymentsMethodDetailsRoutes = {
+  PAYMENT_METHOD_DETAILS_NAVIGATOR: "PAYMENT_METHOD_DETAILS_NAVIGATOR",
+  PAYMENT_METHOD_DETAILS_SCREEN: "PAYMENT_METHOD_DETAILS_SCREEN"
+} as const;
diff --git a/ts/features/walletV3/details/saga/handleDeleteWalletDetails.ts b/ts/features/payments/details/saga/handleDeleteWalletDetails.ts
similarity index 69%
rename from ts/features/walletV3/details/saga/handleDeleteWalletDetails.ts
rename to ts/features/payments/details/saga/handleDeleteWalletDetails.ts
index 3cc41ff8576..bf68cf9bdae 100644
--- a/ts/features/walletV3/details/saga/handleDeleteWalletDetails.ts
+++ b/ts/features/payments/details/saga/handleDeleteWalletDetails.ts
@@ -3,13 +3,15 @@ import * as E from "fp-ts/lib/Either";
 import { ActionType } from "typesafe-actions";
 import { SagaCallReturnType } from "../../../../types/utils";
 import {
-  walletDetailsDeleteInstrument,
-  walletDetailsGetInstrument
+  paymentsDeleteMethodAction,
+  paymentsGetMethodDetailsAction
 } from "../store/actions";
 import { readablePrivacyReport } from "../../../../utils/reporters";
 import { getGenericError, getNetworkError } from "../../../../utils/errors";
 import { WalletClient } from "../../common/api/client";
 import { withRefreshApiCall } from "../../../fastLogin/saga/utils";
+import { walletRemoveCards } from "../../../newWallet/store/actions/cards";
+import { mapWalletIdToCardKey } from "../../common/utils/wallet";
 
 /**
  * Handle the remote call to start Wallet onboarding payment methods list
@@ -18,7 +20,7 @@ import { withRefreshApiCall } from "../../../fastLogin/saga/utils";
  */
 export function* handleDeleteWalletDetails(
   deleteWalletById: WalletClient["deleteWalletById"],
-  action: ActionType<(typeof walletDetailsDeleteInstrument)["request"]>
+  action: ActionType<(typeof paymentsDeleteMethodAction)["request"]>
 ) {
   try {
     const deleteWalletRequest = deleteWalletById({
@@ -31,37 +33,43 @@ export function* handleDeleteWalletDetails(
     )) as unknown as SagaCallReturnType<typeof deleteWalletById>;
     if (E.isRight(deleteWalletResult)) {
       if (deleteWalletResult.right.status === 204) {
+        yield* put(
+          walletRemoveCards([mapWalletIdToCardKey(action.payload.walletId)])
+        );
+
         // handled success
-        const successAction = walletDetailsDeleteInstrument.success();
+        const successAction = paymentsDeleteMethodAction.success();
         yield* put(successAction);
         if (action.payload.onSuccess) {
-          action.payload.onSuccess(successAction);
+          action.payload.onSuccess();
         }
         return;
       }
       // not handled error codes
-      const failureAction = walletDetailsDeleteInstrument.failure({
+      const failureAction = paymentsDeleteMethodAction.failure({
         ...getGenericError(
           new Error(`response status code ${deleteWalletResult.right.status}`)
         )
       });
       yield* put(failureAction);
       if (action.payload.onFailure) {
-        action.payload.onFailure(failureAction);
+        action.payload.onFailure();
       }
     } else {
       // cannot decode response
-      const failureAction = walletDetailsDeleteInstrument.failure({
+      const failureAction = paymentsDeleteMethodAction.failure({
         ...getGenericError(
           new Error(readablePrivacyReport(deleteWalletResult.left))
         )
       });
       yield* put(failureAction);
       if (action.payload.onFailure) {
-        action.payload.onFailure(failureAction);
+        action.payload.onFailure();
       }
     }
   } catch (e) {
-    yield* put(walletDetailsGetInstrument.failure({ ...getNetworkError(e) }));
+    yield* put(
+      paymentsGetMethodDetailsAction.failure({ ...getNetworkError(e) })
+    );
   }
 }
diff --git a/ts/features/walletV3/details/saga/handleGetWalletDetails.ts b/ts/features/payments/details/saga/handleGetWalletDetails.ts
similarity index 68%
rename from ts/features/walletV3/details/saga/handleGetWalletDetails.ts
rename to ts/features/payments/details/saga/handleGetWalletDetails.ts
index d6780933f2d..4020dd2abac 100644
--- a/ts/features/walletV3/details/saga/handleGetWalletDetails.ts
+++ b/ts/features/payments/details/saga/handleGetWalletDetails.ts
@@ -2,11 +2,13 @@ import { call, put } from "typed-redux-saga/macro";
 import * as E from "fp-ts/lib/Either";
 import { ActionType } from "typesafe-actions";
 import { SagaCallReturnType } from "../../../../types/utils";
-import { walletDetailsGetInstrument } from "../store/actions";
+import { paymentsGetMethodDetailsAction } from "../store/actions";
 import { readablePrivacyReport } from "../../../../utils/reporters";
 import { getGenericError, getNetworkError } from "../../../../utils/errors";
 import { WalletClient } from "../../common/api/client";
 import { withRefreshApiCall } from "../../../fastLogin/saga/utils";
+import { walletAddCards } from "../../../newWallet/store/actions/cards";
+import { mapWalletsToCards } from "../../common/utils/wallet";
 
 /**
  * Handle the remote call to start Wallet onboarding payment methods list
@@ -15,7 +17,7 @@ import { withRefreshApiCall } from "../../../fastLogin/saga/utils";
  */
 export function* handleGetWalletDetails(
   getWalletById: WalletClient["getWalletById"],
-  action: ActionType<(typeof walletDetailsGetInstrument)["request"]>
+  action: ActionType<(typeof paymentsGetMethodDetailsAction)["request"]>
 ) {
   try {
     const getwalletDetailsRequest = getWalletById({
@@ -28,15 +30,24 @@ export function* handleGetWalletDetails(
     )) as unknown as SagaCallReturnType<typeof getWalletById>;
     if (E.isRight(getWalletDetailsResult)) {
       if (getWalletDetailsResult.right.status === 200) {
+        // Upsert the card in the wallet
+        yield* put(
+          walletAddCards(
+            mapWalletsToCards([getWalletDetailsResult.right.value])
+          )
+        );
+
         // handled success
         yield* put(
-          walletDetailsGetInstrument.success(getWalletDetailsResult.right.value)
+          paymentsGetMethodDetailsAction.success(
+            getWalletDetailsResult.right.value
+          )
         );
         return;
       }
       // not handled error codes
       yield* put(
-        walletDetailsGetInstrument.failure({
+        paymentsGetMethodDetailsAction.failure({
           ...getGenericError(
             new Error(
               `response status code ${getWalletDetailsResult.right.status}`
@@ -47,7 +58,7 @@ export function* handleGetWalletDetails(
     } else {
       // cannot decode response
       yield* put(
-        walletDetailsGetInstrument.failure({
+        paymentsGetMethodDetailsAction.failure({
           ...getGenericError(
             new Error(readablePrivacyReport(getWalletDetailsResult.left))
           )
@@ -55,6 +66,8 @@ export function* handleGetWalletDetails(
       );
     }
   } catch (e) {
-    yield* put(walletDetailsGetInstrument.failure({ ...getNetworkError(e) }));
+    yield* put(
+      paymentsGetMethodDetailsAction.failure({ ...getNetworkError(e) })
+    );
   }
 }
diff --git a/ts/features/payments/details/saga/handleTogglePagoPaCapability.ts b/ts/features/payments/details/saga/handleTogglePagoPaCapability.ts
new file mode 100644
index 00000000000..5255ff7c1fe
--- /dev/null
+++ b/ts/features/payments/details/saga/handleTogglePagoPaCapability.ts
@@ -0,0 +1,96 @@
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import * as E from "fp-ts/lib/Either";
+import { call, put, select } from "typed-redux-saga/macro";
+import { ActionType } from "typesafe-actions";
+import { WalletApplication } from "../../../../../definitions/pagopa/walletv3/WalletApplication";
+import { WalletApplicationStatusEnum } from "../../../../../definitions/pagopa/walletv3/WalletApplicationStatus";
+import { SagaCallReturnType } from "../../../../types/utils";
+import { getGenericError, getNetworkError } from "../../../../utils/errors";
+import { readablePrivacyReport } from "../../../../utils/reporters";
+import { withRefreshApiCall } from "../../../fastLogin/saga/utils";
+import { WalletClient } from "../../common/api/client";
+import {
+  paymentsGetMethodDetailsAction,
+  paymentsTogglePagoPaCapabilityAction
+} from "../store/actions";
+import { selectPaymentMethodDetails } from "../store/selectors";
+
+/**
+ * Handle the remote call to toggle the Wallet pagopa capability
+ */
+export function* handleTogglePagoPaCapability(
+  updateWalletApplicationsById: WalletClient["updateWalletApplicationsById"],
+  action: ActionType<(typeof paymentsTogglePagoPaCapabilityAction)["request"]>
+) {
+  try {
+    const methodDetailsPot = yield* select(selectPaymentMethodDetails);
+    const methodDetails = pot.toUndefined(methodDetailsPot);
+
+    if (!methodDetails) {
+      throw new Error("walletDetails is undefined");
+    }
+    const updatedApplications = methodDetails.applications.map(application => ({
+      ...application,
+      status: updatePagoPaApplicationStatus(application)
+    }));
+
+    const updateWalletPagoPaApplicationRequest = updateWalletApplicationsById({
+      walletId: action.payload.walletId,
+      body: {
+        applications: updatedApplications as Array<WalletApplication>
+      }
+    });
+    const updateWalletResult = (yield* call(
+      withRefreshApiCall,
+      updateWalletPagoPaApplicationRequest,
+      action
+    )) as unknown as SagaCallReturnType<typeof updateWalletApplicationsById>;
+    if (E.isRight(updateWalletResult)) {
+      if (updateWalletResult.right.status === 204) {
+        // handled success
+        const successAction = paymentsTogglePagoPaCapabilityAction.success();
+        yield* put(successAction);
+        if (action.payload.onSuccess) {
+          action.payload.onSuccess();
+        }
+        return;
+      }
+      // not handled error codes
+      const failureAction = paymentsTogglePagoPaCapabilityAction.failure({
+        ...getGenericError(
+          new Error(`response status code ${updateWalletResult.right.status}`)
+        )
+      });
+      yield* put(failureAction);
+      if (action.payload.onFailure) {
+        action.payload.onFailure();
+      }
+    } else {
+      // cannot decode response
+      const failureAction = paymentsTogglePagoPaCapabilityAction.failure({
+        ...getGenericError(
+          new Error(readablePrivacyReport(updateWalletResult.left))
+        )
+      });
+      yield* put(failureAction);
+      if (action.payload.onFailure) {
+        action.payload.onFailure();
+      }
+    }
+  } catch (e) {
+    yield* put(
+      paymentsGetMethodDetailsAction.failure({ ...getNetworkError(e) })
+    );
+  }
+}
+
+const updatePagoPaApplicationStatus = (
+  application: WalletApplication
+): WalletApplicationStatusEnum | undefined => {
+  if (application.name === "PAGOPA") {
+    return application.status === WalletApplicationStatusEnum.DISABLED
+      ? WalletApplicationStatusEnum.ENABLED
+      : WalletApplicationStatusEnum.DISABLED;
+  }
+  return application.status;
+};
diff --git a/ts/features/walletV3/details/saga/index.ts b/ts/features/payments/details/saga/index.ts
similarity index 66%
rename from ts/features/walletV3/details/saga/index.ts
rename to ts/features/payments/details/saga/index.ts
index 13562e3dab9..b26ffdfc353 100644
--- a/ts/features/walletV3/details/saga/index.ts
+++ b/ts/features/payments/details/saga/index.ts
@@ -1,41 +1,40 @@
 import { SagaIterator } from "redux-saga";
 import { takeLatest } from "typed-redux-saga/macro";
-
 import { WalletClient } from "../../common/api/client";
 import {
-  walletDetailsDeleteInstrument,
-  walletDetailsGetInstrument,
-  walletDetailsPagoPaCapabilityToggle
+  paymentsDeleteMethodAction,
+  paymentsGetMethodDetailsAction,
+  paymentsTogglePagoPaCapabilityAction
 } from "../store/actions";
-import { handleGetWalletDetails } from "./handleGetWalletDetails";
 import { handleDeleteWalletDetails } from "./handleDeleteWalletDetails";
+import { handleGetWalletDetails } from "./handleGetWalletDetails";
 import { handleTogglePagoPaCapability } from "./handleTogglePagoPaCapability";
 
 /**
- * Handle Wallet onboarding requests
- * @param bearerToken
+ * Handle payment method onboarding requests
+ * @param walletClient wallet client
  */
-export function* watchWalletDetailsSaga(
+export function* watchPaymentsMethodDetailsSaga(
   walletClient: WalletClient
 ): SagaIterator {
   // handle the request of get wallet details
   yield* takeLatest(
-    walletDetailsGetInstrument.request,
+    paymentsGetMethodDetailsAction.request,
     handleGetWalletDetails,
     walletClient.getWalletById
   );
 
   // handle the request of delete a wallet
   yield* takeLatest(
-    walletDetailsDeleteInstrument.request,
+    paymentsDeleteMethodAction.request,
     handleDeleteWalletDetails,
     walletClient.deleteWalletById
   );
 
   // handle request to a wallet
   yield* takeLatest(
-    walletDetailsPagoPaCapabilityToggle.request,
+    paymentsTogglePagoPaCapabilityAction.request,
     handleTogglePagoPaCapability,
-    walletClient.updateWalletServicesById
+    walletClient.updateWalletApplicationsById
   );
 }
diff --git a/ts/features/payments/details/screens/PaymentsMethodDetailsScreen.tsx b/ts/features/payments/details/screens/PaymentsMethodDetailsScreen.tsx
new file mode 100644
index 00000000000..ef2b65f0327
--- /dev/null
+++ b/ts/features/payments/details/screens/PaymentsMethodDetailsScreen.tsx
@@ -0,0 +1,113 @@
+import { VSpacer } from "@pagopa/io-app-design-system";
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { RouteProp, useRoute } from "@react-navigation/native";
+import * as React from "react";
+import { WalletInfo } from "../../../../../definitions/pagopa/walletv3/WalletInfo";
+import { useIODispatch, useIOSelector } from "../../../../store/hooks";
+import { isIdPayEnabledSelector } from "../../../../store/reducers/backendStatus";
+import { getDateFromExpiryDate } from "../../../../utils/dates";
+import { capitalize } from "../../../../utils/strings";
+import { idPayInitiativesFromInstrumentGet } from "../../../idpay/wallet/store/actions";
+import { idPayAreInitiativesFromInstrumentLoadingSelector } from "../../../idpay/wallet/store/reducers";
+import { PaymentCardProps } from "../../common/components/PaymentCard";
+import { UIWalletInfoDetails } from "../../common/types/UIWalletInfoDetails";
+import { PaymentsMethodDetailsBaseScreenComponent } from "../components/PaymentsMethodDetailsBaseScreenComponent";
+import { PaymentsMethodDetailsDeleteButton } from "../components/PaymentsMethodDetailsDeleteButton";
+import { PaymentsMethodDetailsErrorContent } from "../components/PaymentsMethodDetailsErrorContent";
+import WalletDetailsPaymentMethodFeatures from "../components/WalletDetailsPaymentMethodFeatures";
+import { PaymentsMethodDetailsParamsList } from "../navigation/params";
+import { paymentsGetMethodDetailsAction } from "../store/actions";
+import { selectPaymentMethodDetails } from "../store/selectors";
+
+export type PaymentsMethodDetailsScreenNavigationParams = Readonly<{
+  walletId: string;
+}>;
+
+export type PaymentsMethodDetailsScreenRouteProps = RouteProp<
+  PaymentsMethodDetailsParamsList,
+  "PAYMENT_METHOD_DETAILS_SCREEN"
+>;
+
+const PaymentsMethodDetailsScreen = () => {
+  const route = useRoute<PaymentsMethodDetailsScreenRouteProps>();
+  const dispatch = useIODispatch();
+
+  const { walletId } = route.params;
+
+  const isIdpayEnabled = useIOSelector(isIdPayEnabledSelector);
+  const walletDetailsPot = useIOSelector(selectPaymentMethodDetails);
+  const areIdpayInitiativesLoading = useIOSelector(
+    idPayAreInitiativesFromInstrumentLoadingSelector
+  );
+
+  const isLoading =
+    pot.isLoading(walletDetailsPot) ||
+    pot.isUpdating(walletDetailsPot) ||
+    areIdpayInitiativesLoading;
+
+  React.useEffect(() => {
+    dispatch(paymentsGetMethodDetailsAction.request({ walletId }));
+    if (isIdpayEnabled) {
+      dispatch(
+        idPayInitiativesFromInstrumentGet.request({
+          idWallet: walletId
+        })
+      );
+    }
+  }, [walletId, dispatch, isIdpayEnabled]);
+
+  if (isLoading) {
+    return (
+      <PaymentsMethodDetailsBaseScreenComponent
+        card={{ testID: "CreditCardComponent", isLoading: true }}
+      />
+    );
+  }
+
+  if (pot.isSome(walletDetailsPot) && !isLoading) {
+    const paymentMethod = walletDetailsPot.value;
+    const cardProps = getPaymentCardPropsFromWallet(paymentMethod);
+    const headerTitle = getCardHeaderTitle(paymentMethod.details);
+
+    return (
+      <PaymentsMethodDetailsBaseScreenComponent
+        card={cardProps}
+        headerTitle={headerTitle}
+      >
+        <WalletDetailsPaymentMethodFeatures paymentMethod={paymentMethod} />
+        <VSpacer size={24} />
+        <PaymentsMethodDetailsDeleteButton paymentMethod={paymentMethod} />
+      </PaymentsMethodDetailsBaseScreenComponent>
+    );
+  }
+
+  return <PaymentsMethodDetailsErrorContent walletId={walletId} />;
+};
+
+const getCardHeaderTitle = (details?: UIWalletInfoDetails) => {
+  if (details?.lastFourDigits !== undefined) {
+    const capitalizedCardCircuit = capitalize(
+      details.brand?.toLowerCase() ?? ""
+    );
+    return `${capitalizedCardCircuit} ••${details.lastFourDigits}`;
+  }
+
+  return "";
+};
+
+const getPaymentCardPropsFromWallet = (
+  wallet: WalletInfo
+): PaymentCardProps => {
+  const details = wallet.details as UIWalletInfoDetails;
+
+  return {
+    hpan: details.lastFourDigits,
+    abiCode: details.abi,
+    brand: details.brand,
+    expireDate: getDateFromExpiryDate(details.expiryDate),
+    holderEmail: details.maskedEmail,
+    holderPhone: details.maskedNumber
+  };
+};
+
+export default PaymentsMethodDetailsScreen;
diff --git a/ts/features/payments/details/store/actions/index.ts b/ts/features/payments/details/store/actions/index.ts
new file mode 100644
index 00000000000..334cca5658a
--- /dev/null
+++ b/ts/features/payments/details/store/actions/index.ts
@@ -0,0 +1,41 @@
+import { ActionType, createAsyncAction } from "typesafe-actions";
+import { NetworkError } from "../../../../../utils/errors";
+import { WalletInfo } from "../../../../../../definitions/pagopa/walletv3/WalletInfo";
+
+export const paymentsGetMethodDetailsAction = createAsyncAction(
+  "PAYMENTS_GET_METHOD_DETAILS_REQUEST",
+  "PAYMENTS_GET_METHOD_DETAILS_SUCCESS",
+  "PAYMENTS_GET_METHOD_DETAILS_FAILURE",
+  "PAYMENTS_GET_METHOD_DETAILS_CANCEL"
+)<{ walletId: string }, WalletInfo, NetworkError, void>();
+
+type DeleteMethodPayload = {
+  walletId: string;
+  onSuccess?: () => void;
+  onFailure?: () => void;
+};
+
+export const paymentsDeleteMethodAction = createAsyncAction(
+  "PAYMENTS_DELETE_METHOD_REQUEST",
+  "PAYMENTS_DELETE_METHOD_SUCCESS",
+  "PAYMENTS_DELETE_METHOD_FAILURE",
+  "PAYMENTS_DELETE_METHOD_CANCEL"
+)<DeleteMethodPayload, void, NetworkError, void>();
+
+type TogglePagoPaCapabilityPayload = {
+  walletId: string;
+  onSuccess?: () => void;
+  onFailure?: () => void;
+};
+
+export const paymentsTogglePagoPaCapabilityAction = createAsyncAction(
+  "PAYMENTS_TOGGLE_PAGOPA_CAPABILITY_REQUEST",
+  "PAYMENTS_TOGGLE_PAGOPA_CAPABILITY_SUCCESS",
+  "PAYMENTS_TOGGLE_PAGOPA_CAPABILITY_FAILURE",
+  "PAYMENTS_TOGGLE_PAGOPA_CAPABILITY_CANCEL"
+)<TogglePagoPaCapabilityPayload, void, NetworkError, void>();
+
+export type PaymentsMethodDetailsActions =
+  | ActionType<typeof paymentsGetMethodDetailsAction>
+  | ActionType<typeof paymentsDeleteMethodAction>
+  | ActionType<typeof paymentsTogglePagoPaCapabilityAction>;
diff --git a/ts/features/payments/details/store/reducers/index.ts b/ts/features/payments/details/store/reducers/index.ts
new file mode 100644
index 00000000000..3b51c3dbd72
--- /dev/null
+++ b/ts/features/payments/details/store/reducers/index.ts
@@ -0,0 +1,79 @@
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { getType } from "typesafe-actions";
+import { Action } from "../../../../../store/actions/types";
+import { NetworkError } from "../../../../../utils/errors";
+
+import { WalletApplicationStatusEnum } from "../../../../../../definitions/pagopa/walletv3/WalletApplicationStatus";
+import { WalletInfo } from "../../../../../../definitions/pagopa/walletv3/WalletInfo";
+import {
+  paymentsGetMethodDetailsAction,
+  paymentsTogglePagoPaCapabilityAction
+} from "../actions";
+
+export type PaymentsMethodDetailsState = {
+  walletDetails: pot.Pot<WalletInfo, NetworkError>;
+};
+
+const INITIAL_STATE: PaymentsMethodDetailsState = {
+  walletDetails: pot.noneLoading
+};
+
+const reducer = (
+  state: PaymentsMethodDetailsState = INITIAL_STATE,
+  action: Action
+): PaymentsMethodDetailsState => {
+  switch (action.type) {
+    // GET METHOD DETAILS
+    case getType(paymentsGetMethodDetailsAction.request):
+      return {
+        ...state,
+        walletDetails: pot.toLoading(pot.none)
+      };
+    case getType(paymentsGetMethodDetailsAction.success):
+      return {
+        ...state,
+        walletDetails: pot.some(action.payload)
+      };
+    case getType(paymentsGetMethodDetailsAction.failure):
+      return {
+        ...state,
+        walletDetails: pot.toError(state.walletDetails, action.payload)
+      };
+    case getType(paymentsGetMethodDetailsAction.cancel):
+      return {
+        ...state,
+        walletDetails: pot.none
+      };
+
+    // TOGGLE PAGOPA CAPABILITY
+    case getType(paymentsTogglePagoPaCapabilityAction.success):
+      const walletDetails = pot.getOrElse(
+        state.walletDetails,
+        {} as WalletInfo
+      );
+      const updatedApplications = walletDetails.applications.map(
+        application => {
+          if (application.name === "PAGOPA") {
+            return {
+              ...application,
+              status:
+                application.status === WalletApplicationStatusEnum.ENABLED
+                  ? WalletApplicationStatusEnum.DISABLED
+                  : WalletApplicationStatusEnum.ENABLED
+            };
+          }
+          return application;
+        }
+      );
+      return {
+        ...state,
+        walletDetails: pot.some({
+          ...walletDetails,
+          applications: updatedApplications
+        })
+      };
+  }
+  return state;
+};
+
+export default reducer;
diff --git a/ts/features/payments/details/store/selectors/index.ts b/ts/features/payments/details/store/selectors/index.ts
new file mode 100644
index 00000000000..e846309394c
--- /dev/null
+++ b/ts/features/payments/details/store/selectors/index.ts
@@ -0,0 +1,4 @@
+import { GlobalState } from "../../../../../store/reducers/types";
+
+export const selectPaymentMethodDetails = (state: GlobalState) =>
+  state.features.payments.details.walletDetails;
diff --git a/ts/features/payments/history/store/__tests__/store.test.ts b/ts/features/payments/history/store/__tests__/store.test.ts
new file mode 100644
index 00000000000..b63a97fa5da
--- /dev/null
+++ b/ts/features/payments/history/store/__tests__/store.test.ts
@@ -0,0 +1,86 @@
+import MockDate from "mockdate";
+import { createStore } from "redux";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { appReducer } from "../../../../../store/reducers";
+import { initPaymentStateAction } from "../../../checkout/store/actions/orchestration";
+import { PaymentStartOrigin } from "../../../checkout/types";
+import {
+  selectOngoingPaymentHistory,
+  selectPaymentsHistoryArchive
+} from "../selectors";
+import { storePaymentOutcomeToHistory } from "../actions";
+import { WalletPaymentOutcomeEnum } from "../../../checkout/types/PaymentOutcomeEnum";
+
+const MOCKED_LOOKUP_ID = "123456";
+const MOCKED_DATE = new Date();
+
+jest.mock("../../../../../utils/pmLookUpId", () => ({
+  getLookUpId: () => MOCKED_LOOKUP_ID
+}));
+
+describe("Test Wallet payment history reducers and selectors", () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+    MockDate.set(MOCKED_DATE);
+  });
+
+  it("should have INITIAL_STATE before any dispatched action", () => {
+    const globalState = appReducer(undefined, applicationChangeState("active"));
+    expect(globalState.features.payments.history).toStrictEqual({
+      archive: []
+    });
+    expect(selectPaymentsHistoryArchive(globalState)).toStrictEqual([]);
+    expect(selectOngoingPaymentHistory(globalState)).toBeUndefined();
+  });
+
+  it("should correctly update ongoing payment history", () => {
+    const T_START_ORIGIN: PaymentStartOrigin = "manual_insertion";
+
+    const globalState = appReducer(undefined, applicationChangeState("active"));
+    const store = createStore(appReducer, globalState as any);
+    store.dispatch(
+      initPaymentStateAction({
+        startOrigin: T_START_ORIGIN
+      })
+    );
+
+    expect(
+      store.getState().features.payments.history.ongoingPayment
+    ).toStrictEqual({
+      startOrigin: T_START_ORIGIN,
+      lookupId: MOCKED_LOOKUP_ID,
+      startedAt: MOCKED_DATE
+    });
+    expect(store.getState().features.payments.history.archive).toStrictEqual(
+      []
+    );
+  });
+
+  it("should correctly update payment outcome on SUCCESS", () => {
+    const globalState = appReducer(undefined, applicationChangeState("active"));
+    const store = createStore(appReducer, globalState as any);
+    store.dispatch(
+      storePaymentOutcomeToHistory(WalletPaymentOutcomeEnum.SUCCESS)
+    );
+    expect(
+      store.getState().features.payments.history.ongoingPayment?.outcome
+    ).toBe(WalletPaymentOutcomeEnum.SUCCESS);
+    expect(
+      store.getState().features.payments.history.ongoingPayment?.success
+    ).toBe(true);
+  });
+
+  it("should correctly update payment outcome on failure", () => {
+    const globalState = appReducer(undefined, applicationChangeState("active"));
+    const store = createStore(appReducer, globalState as any);
+    store.dispatch(
+      storePaymentOutcomeToHistory(WalletPaymentOutcomeEnum.CANCELED_BY_USER)
+    );
+    expect(
+      store.getState().features.payments.history.ongoingPayment?.outcome
+    ).toBe(WalletPaymentOutcomeEnum.CANCELED_BY_USER);
+    expect(
+      store.getState().features.payments.history.ongoingPayment?.success
+    ).toBeUndefined();
+  });
+});
diff --git a/ts/features/payments/history/store/actions/index.ts b/ts/features/payments/history/store/actions/index.ts
new file mode 100644
index 00000000000..149f95151db
--- /dev/null
+++ b/ts/features/payments/history/store/actions/index.ts
@@ -0,0 +1,15 @@
+import { ActionType, createStandardAction } from "typesafe-actions";
+import { WalletPaymentOutcome } from "../../../checkout/types/PaymentOutcomeEnum";
+import { RptId } from "../../../../../../definitions/pagopa/ecommerce/RptId";
+
+export const storeNewPaymentAttemptAction = createStandardAction(
+  "PAYMENTS_STORE_NEW_PAYMENT_ATTEMPT"
+)<RptId>();
+
+export const storePaymentOutcomeToHistory = createStandardAction(
+  "PAYMENTS_STORE_OUTCMOE_TO_HISTORY"
+)<WalletPaymentOutcome>();
+
+export type PaymentsHistoryActions =
+  | ActionType<typeof storeNewPaymentAttemptAction>
+  | ActionType<typeof storePaymentOutcomeToHistory>;
diff --git a/ts/features/payments/history/store/reducers/index.ts b/ts/features/payments/history/store/reducers/index.ts
new file mode 100644
index 00000000000..b1fb7aa47cf
--- /dev/null
+++ b/ts/features/payments/history/store/reducers/index.ts
@@ -0,0 +1,158 @@
+import * as O from "fp-ts/lib/Option";
+import * as A from "fp-ts/lib/Array";
+import { pipe } from "fp-ts/lib/function";
+import _ from "lodash";
+import { AsyncStorage } from "react-native";
+import { PersistConfig, persistReducer } from "redux-persist";
+import { getType } from "typesafe-actions";
+import { differentProfileLoggedIn } from "../../../../../store/actions/crossSessions";
+import { clearCache } from "../../../../../store/actions/profile";
+import { Action } from "../../../../../store/actions/types";
+import { getLookUpId } from "../../../../../utils/pmLookUpId";
+import {
+  paymentsCreateTransactionAction,
+  paymentsGetPaymentDetailsAction,
+  paymentsGetPaymentTransactionInfoAction
+} from "../../../checkout/store/actions/networking";
+import { initPaymentStateAction } from "../../../checkout/store/actions/orchestration";
+import { WalletPaymentFailure } from "../../../checkout/types/WalletPaymentFailure";
+import { PaymentHistory } from "../../types";
+import {
+  storeNewPaymentAttemptAction,
+  storePaymentOutcomeToHistory
+} from "../actions";
+import { RptId } from "../../../../../../definitions/pagopa/ecommerce/RptId";
+
+export type PaymentsHistoryState = {
+  ongoingPayment?: PaymentHistory;
+  archive: ReadonlyArray<PaymentHistory>;
+};
+
+const INITIAL_STATE: PaymentsHistoryState = {
+  archive: []
+};
+
+export const ARCHIVE_SIZE = 15;
+
+const reducer = (
+  state: PaymentsHistoryState = INITIAL_STATE,
+  action: Action
+): PaymentsHistoryState => {
+  switch (action.type) {
+    case getType(initPaymentStateAction):
+      return {
+        ...state,
+        ongoingPayment: {
+          startOrigin: action.payload.startOrigin,
+          startedAt: new Date(),
+          lookupId: getLookUpId()
+        }
+      };
+    case getType(paymentsGetPaymentDetailsAction.request):
+      return {
+        ...state,
+        ongoingPayment: {
+          ...state.ongoingPayment,
+          rptId: action.payload,
+          attempt: getPaymentAttemptByRptId(state, action.payload)
+        }
+      };
+    case getType(paymentsGetPaymentDetailsAction.success):
+      return {
+        ...state,
+        ongoingPayment: {
+          ...state.ongoingPayment,
+          verifiedData: action.payload
+        }
+      };
+    case getType(storeNewPaymentAttemptAction):
+      return updatePaymentHistory(state, {}, true);
+    case getType(paymentsCreateTransactionAction.success):
+    case getType(paymentsGetPaymentTransactionInfoAction.success):
+      return updatePaymentHistory(state, {
+        transaction: action.payload
+      });
+    case getType(storePaymentOutcomeToHistory):
+      return updatePaymentHistory(state, {
+        outcome: action.payload,
+        ...(action.payload === "0" ? { success: true } : {})
+      });
+    case getType(paymentsGetPaymentDetailsAction.failure):
+    case getType(paymentsCreateTransactionAction.failure):
+    case getType(paymentsGetPaymentTransactionInfoAction.failure):
+      return updatePaymentHistory(state, {
+        failure: pipe(
+          WalletPaymentFailure.decode(action.payload),
+          O.fromEither,
+          O.toUndefined
+        )
+      });
+    case getType(differentProfileLoggedIn):
+    case getType(clearCache):
+      return INITIAL_STATE;
+  }
+  return state;
+};
+
+const getPaymentAttemptByRptId = (state: PaymentsHistoryState, rptId: RptId) =>
+  pipe(
+    state.archive as Array<PaymentHistory>,
+    A.findFirst(h => h.rptId === rptId),
+    O.chainNullableK(h => h.attempt),
+    O.getOrElse(() => 0)
+  );
+
+const appendItemToArchive = (
+  archive: ReadonlyArray<PaymentHistory>,
+  item: PaymentHistory
+): ReadonlyArray<PaymentHistory> =>
+  pipe(
+    archive,
+    // Remove previous entry if already exists
+    a => a.filter(({ rptId }) => !_.isEqual(rptId, item.rptId)),
+    // Keep only the latest ARCHIVE_SIZE - 1 entries
+    a => a.slice(-ARCHIVE_SIZE + 1),
+    // Add the new entry to the archive
+    a => [...a, item]
+  );
+
+const updatePaymentHistory = (
+  state: PaymentsHistoryState,
+  data: PaymentHistory,
+  newAttempt: boolean = false
+): PaymentsHistoryState => {
+  const currentAttempt = state.ongoingPayment?.attempt || 0;
+  const updatedOngoingPaymentHistory: PaymentHistory = {
+    ...state.ongoingPayment,
+    ...data,
+    attempt: newAttempt ? currentAttempt + 1 : currentAttempt
+  };
+
+  if (newAttempt) {
+    return {
+      ongoingPayment: updatedOngoingPaymentHistory,
+      archive: appendItemToArchive(state.archive, updatedOngoingPaymentHistory)
+    };
+  }
+
+  return {
+    ongoingPayment: updatedOngoingPaymentHistory,
+    archive: [..._.dropRight(state.archive), updatedOngoingPaymentHistory]
+  };
+};
+
+const CURRENT_REDUX_PAYMENT_HISTORY_STORE_VERSION = -1;
+
+const persistConfig: PersistConfig = {
+  key: "paymentHistory",
+  storage: AsyncStorage,
+  version: CURRENT_REDUX_PAYMENT_HISTORY_STORE_VERSION,
+  whitelist: ["archive"]
+};
+
+export const walletPaymentHistoryPersistor = persistReducer<
+  PaymentsHistoryState,
+  Action
+>(persistConfig, reducer);
+
+export default walletPaymentHistoryPersistor;
diff --git a/ts/features/payments/history/store/selectors/index.ts b/ts/features/payments/history/store/selectors/index.ts
new file mode 100644
index 00000000000..5e2198a64b0
--- /dev/null
+++ b/ts/features/payments/history/store/selectors/index.ts
@@ -0,0 +1,30 @@
+import * as O from "fp-ts/lib/Option";
+import { pipe } from "fp-ts/lib/function";
+import { createSelector } from "reselect";
+import { RptId } from "../../../../../../definitions/pagopa/ecommerce/RptId";
+import { GlobalState } from "../../../../../store/reducers/types";
+
+export const selectPaymentsHistoryArchive = (state: GlobalState) =>
+  state.features.payments.history.archive;
+
+export const selectOngoingPaymentHistory = (state: GlobalState) =>
+  state.features.payments.history.ongoingPayment;
+
+export const selectPymentAttemptByRptId = (rptId: RptId) =>
+  createSelector(selectPaymentsHistoryArchive, archive =>
+    pipe(
+      O.fromNullable(archive.find(h => h.rptId === rptId)),
+      O.chainNullableK(h => h.attempt),
+      O.getOrElse(() => 0)
+    )
+  );
+
+export const selectOngoingPaymentAttempt = createSelector(
+  selectOngoingPaymentHistory,
+  paymentHistory =>
+    pipe(
+      O.fromNullable(paymentHistory),
+      O.chainNullableK(h => h.attempt),
+      O.getOrElse(() => 0)
+    )
+);
diff --git a/ts/features/payments/history/types/index.ts b/ts/features/payments/history/types/index.ts
new file mode 100644
index 00000000000..6be5689d01e
--- /dev/null
+++ b/ts/features/payments/history/types/index.ts
@@ -0,0 +1,19 @@
+import { NewTransactionResponse } from "../../../../../definitions/pagopa/ecommerce/NewTransactionResponse";
+import { PaymentRequestsGetResponse } from "../../../../../definitions/pagopa/ecommerce/PaymentRequestsGetResponse";
+import { RptId } from "../../../../../definitions/pagopa/ecommerce/RptId";
+import { PaymentStartOrigin } from "../../checkout/types";
+import { WalletPaymentOutcomeEnum } from "../../checkout/types/PaymentOutcomeEnum";
+import { WalletPaymentFailure } from "../../checkout/types/WalletPaymentFailure";
+
+export type PaymentHistory = {
+  startOrigin?: PaymentStartOrigin;
+  rptId?: RptId;
+  startedAt?: Date;
+  lookupId?: string;
+  verifiedData?: PaymentRequestsGetResponse;
+  transaction?: NewTransactionResponse;
+  outcome?: WalletPaymentOutcomeEnum;
+  failure?: WalletPaymentFailure;
+  success?: true;
+  attempt?: number;
+};
diff --git a/ts/features/payments/home/components/PaymentsHomeListItemTransaction.tsx b/ts/features/payments/home/components/PaymentsHomeListItemTransaction.tsx
new file mode 100644
index 00000000000..53cd770c78a
--- /dev/null
+++ b/ts/features/payments/home/components/PaymentsHomeListItemTransaction.tsx
@@ -0,0 +1,44 @@
+import { ListItemTransaction } from "@pagopa/io-app-design-system";
+import React from "react";
+import I18n from "../../../../i18n";
+import { Transaction, isSuccessTransaction } from "../../../../types/pagopa";
+import { getAccessibleAmountText } from "../../../../utils/accessibility";
+import { format } from "../../../../utils/dates";
+import { formatNumberCurrencyCents } from "../../../idpay/common/utils/strings";
+
+type Props = {
+  transaction: Transaction;
+};
+
+const PaymentsHomeListItemTransaction = ({ transaction }: Props) => {
+  const recipient = transaction.merchant;
+
+  const amountText = formatNumberCurrencyCents(transaction.amount.amount);
+  const datetime: string = format(transaction.created, "DD MMM YYYY, HH:mm");
+
+  const accessibleDatetime: string = format(
+    transaction.created,
+    "DD MMMM YYYY, HH:mm"
+  );
+  const accessibleAmountText = getAccessibleAmountText(amountText);
+  const accessibilityLabel = `${recipient}; ${accessibleDatetime}; ${accessibleAmountText}`;
+
+  const transactionStatus =
+    isSuccessTransaction(transaction) === true ? "success" : "failure";
+
+  return (
+    <ListItemTransaction
+      accessible={true}
+      title={recipient}
+      subtitle={datetime}
+      transactionAmount={amountText}
+      accessibilityLabel={accessibilityLabel}
+      badgeText={I18n.t(
+        `payment.homeScreen.historySection.transactionStatusBadges.${transactionStatus}`
+      )}
+      transactionStatus={transactionStatus}
+    />
+  );
+};
+
+export { PaymentsHomeListItemTransaction };
diff --git a/ts/features/payments/home/components/PaymentsHomeTransactionList.tsx b/ts/features/payments/home/components/PaymentsHomeTransactionList.tsx
new file mode 100644
index 00000000000..666ff2d9f2a
--- /dev/null
+++ b/ts/features/payments/home/components/PaymentsHomeTransactionList.tsx
@@ -0,0 +1,79 @@
+import {
+  ListItemHeader,
+  ListItemTransaction
+} from "@pagopa/io-app-design-system";
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { useFocusEffect } from "@react-navigation/native";
+import * as _ from "lodash";
+import * as React from "react";
+import { default as I18n } from "../../../../i18n";
+import { fetchTransactionsRequestWithExpBackoff } from "../../../../store/actions/wallet/transactions";
+import { useIODispatch, useIOSelector } from "../../../../store/hooks";
+import { GlobalState } from "../../../../store/reducers/types";
+import { Transaction } from "../../../../types/pagopa";
+import { PaymentsHomeListItemTransaction } from "./PaymentsHomeListItemTransaction";
+
+const PaymentsHomeTransactionList = () => {
+  const dispatch = useIODispatch();
+
+  const transactionsPot = useIOSelector(
+    (state: GlobalState) => state.wallet.transactions.transactions
+  );
+
+  const isLoading = pot.isLoading(transactionsPot);
+
+  useFocusEffect(
+    React.useCallback(() => {
+      dispatch(fetchTransactionsRequestWithExpBackoff({ start: 0 }));
+    }, [dispatch])
+  );
+
+  const renderItems = () => {
+    if (!isLoading && pot.isSome(transactionsPot)) {
+      const toArray = _.values(transactionsPot.value);
+      const sortedByCreationDate = _.orderBy(toArray, item => item?.created, [
+        "desc"
+      ]);
+
+      return sortedByCreationDate
+        .filter((item): item is Transaction => item !== undefined)
+        .map(transaction => (
+          <PaymentsHomeListItemTransaction
+            key={`transaction_${transaction.id}`}
+            transaction={transaction}
+          />
+        ));
+    }
+
+    return Array.from({ length: 5 }).map((_, index) => (
+      <ListItemTransaction
+        isLoading={true}
+        key={index}
+        transactionStatus="success"
+        transactionAmount=""
+        title=""
+        subtitle=""
+      />
+    ));
+  };
+
+  return (
+    // full pages history loading will be handled by history details page
+    <>
+      <ListItemHeader
+        label={I18n.t("payment.homeScreen.historySection.header")}
+        accessibilityLabel={I18n.t("payment.homeScreen.historySection.header")}
+        endElement={{
+          type: "buttonLink",
+          componentProps: {
+            label: I18n.t("payment.homeScreen.historySection.headerCTA"),
+            onPress: () => null
+          }
+        }}
+      />
+      {renderItems()}
+    </>
+  );
+};
+
+export { PaymentsHomeTransactionList };
diff --git a/ts/features/payments/home/components/PaymentsHomeUserMethodsList.tsx b/ts/features/payments/home/components/PaymentsHomeUserMethodsList.tsx
new file mode 100644
index 00000000000..bd421c1c657
--- /dev/null
+++ b/ts/features/payments/home/components/PaymentsHomeUserMethodsList.tsx
@@ -0,0 +1,105 @@
+import { ListItemHeader } from "@pagopa/io-app-design-system";
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { useFocusEffect } from "@react-navigation/native";
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+import { WalletInfo } from "../../../../../definitions/pagopa/ecommerce/WalletInfo";
+import I18n from "../../../../i18n";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { useIODispatch, useIOSelector } from "../../../../store/hooks";
+import { paymentsGetPaymentUserMethodsAction } from "../../checkout/store/actions/networking";
+import { PaymentCardSmallProps } from "../../common/components/PaymentCardSmall";
+import { PaymentCardsCarousel } from "../../common/components/PaymentCardsCarousel";
+import { UIWalletInfoDetails } from "../../common/types/UIWalletInfoDetails";
+import { PaymentsOnboardingRoutes } from "../../onboarding/navigation/routes";
+import { walletPaymentUserWalletsSelector } from "../../checkout/store/selectors";
+const loadingCards: Array<PaymentCardSmallProps> = Array.from({
+  length: 3
+}).map(() => ({
+  isLoading: true
+}));
+
+type PaymentMethodsSectionProps = {
+  isLoading?: boolean;
+};
+
+const PaymentsHomeUserMethodsList = ({
+  isLoading
+}: PaymentMethodsSectionProps) => {
+  const navigation = useIONavigation();
+  const dispatch = useIODispatch();
+  const paymentMethodsPot = useIOSelector(walletPaymentUserWalletsSelector);
+  const isLoadingSection = isLoading || pot.isLoading(paymentMethodsPot);
+  const methods = pot.getOrElse(paymentMethodsPot, []);
+
+  useFocusEffect(
+    React.useCallback(() => {
+      dispatch(paymentsGetPaymentUserMethodsAction.request());
+    }, [dispatch])
+  );
+
+  const mapMethods = (
+    // this function is here to allow future navigation usage
+    method: NonNullable<WalletInfo>
+  ): PaymentCardSmallProps | undefined => {
+    const details = method.details as UIWalletInfoDetails;
+
+    if (details.lastFourDigits !== undefined) {
+      return {
+        cardType: "CREDIT",
+        hpan: details.lastFourDigits,
+        cardIcon: details.brand,
+        isLoading: false
+      };
+    }
+    if (details.maskedEmail !== undefined) {
+      return {
+        cardType: "PAYPAL"
+      };
+    }
+    if (details.maskedNumber !== undefined) {
+      return {
+        cardType: "BANCOMATPAY"
+      };
+    }
+    return undefined;
+  };
+
+  const renderMethods = isLoadingSection
+    ? loadingCards
+    : methods
+        .map(mapMethods)
+        .filter((item): item is PaymentCardSmallProps => item !== undefined) ??
+      loadingCards;
+
+  const handleOnAddMethodPress = () => {
+    navigation.navigate(PaymentsOnboardingRoutes.PAYMENT_ONBOARDING_NAVIGATOR, {
+      screen: PaymentsOnboardingRoutes.PAYMENT_ONBOARDING_SELECT_METHOD
+    });
+  };
+
+  return (
+    <>
+      <ListItemHeader
+        label={I18n.t("payment.homeScreen.methodsSection.header")}
+        accessibilityLabel={I18n.t("payment.homeScreen.methodsSection.header")}
+        endElement={{
+          type: "buttonLink",
+          componentProps: {
+            label: I18n.t("payment.homeScreen.methodsSection.headerCTA"),
+            onPress: handleOnAddMethodPress
+          }
+        }}
+      />
+      <View style={styles.fixedCardsHeight}>
+        <PaymentCardsCarousel cards={renderMethods} />
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  fixedCardsHeight: { height: 96 }
+});
+
+export { PaymentsHomeUserMethodsList };
diff --git a/ts/features/payments/home/screens/PaymentsHomeScreen.tsx b/ts/features/payments/home/screens/PaymentsHomeScreen.tsx
new file mode 100644
index 00000000000..738994d3324
--- /dev/null
+++ b/ts/features/payments/home/screens/PaymentsHomeScreen.tsx
@@ -0,0 +1,34 @@
+import { GradientScrollView, VSpacer } from "@pagopa/io-app-design-system";
+import * as React from "react";
+import I18n from "../../../../i18n";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { PaymentsBarcodeRoutes } from "../../barcode/navigation/routes";
+import { PaymentsHomeTransactionList } from "../components/PaymentsHomeTransactionList";
+import { PaymentsHomeUserMethodsList } from "../components/PaymentsHomeUserMethodsList";
+
+export const PaymentsHomeScreen = () => {
+  const navigation = useIONavigation();
+
+  const handleOnPayNoticedPress = () => {
+    navigation.navigate(PaymentsBarcodeRoutes.PAYMENT_BARCODE_NAVIGATOR, {
+      screen: PaymentsBarcodeRoutes.PAYMENT_BARCODE_SCAN
+    });
+  };
+
+  return (
+    <GradientScrollView
+      primaryActionProps={{
+        accessibilityLabel: I18n.t("payment.homeScreen.CTA"),
+        label: I18n.t("payment.homeScreen.CTA"),
+        onPress: handleOnPayNoticedPress,
+        icon: "qrCode",
+        iconPosition: "end"
+      }}
+      excludeSafeAreaMargins={true}
+    >
+      <PaymentsHomeUserMethodsList />
+      <VSpacer size={24} />
+      <PaymentsHomeTransactionList />
+    </GradientScrollView>
+  );
+};
diff --git a/ts/features/walletV3/onboarding/components/WalletOnboardingPaymentMethodsList.tsx b/ts/features/payments/onboarding/components/WalletOnboardingPaymentMethodsList.tsx
similarity index 59%
rename from ts/features/walletV3/onboarding/components/WalletOnboardingPaymentMethodsList.tsx
rename to ts/features/payments/onboarding/components/WalletOnboardingPaymentMethodsList.tsx
index c6596e727a3..d79c4df7091 100644
--- a/ts/features/walletV3/onboarding/components/WalletOnboardingPaymentMethodsList.tsx
+++ b/ts/features/payments/onboarding/components/WalletOnboardingPaymentMethodsList.tsx
@@ -2,56 +2,53 @@
  * This component will display the payment methods that can be registered
  * on the app
  */
-import * as React from "react";
-import { pipe } from "fp-ts/lib/function";
-import * as O from "fp-ts/lib/Option";
 import {
   Divider,
-  IOLogoPaymentType,
-  IOPaymentLogos,
   IOStyles,
   ListItemNav,
   VSpacer
 } from "@pagopa/io-app-design-system";
+import * as O from "fp-ts/lib/Option";
+import { pipe } from "fp-ts/lib/function";
+import * as React from "react";
 import { FlatList } from "react-native";
-import { WalletPaymentMethodItemSkeleton } from "../../common/components/WalletPaymentMethodItemSkeleton";
 import { PaymentMethodResponse } from "../../../../../definitions/pagopa/walletv3/PaymentMethodResponse";
-import { findFirstCaseInsensitive } from "../../../../utils/object";
+import { useIOSelector } from "../../../../store/hooks";
+import { selectPaymentOnboardingSelectedMethod } from "../store/selectors";
+import { WalletPaymentMethodItemSkeleton } from "./WalletPaymentMethodItemSkeleton";
 
 type OwnProps = Readonly<{
   paymentMethods: ReadonlyArray<PaymentMethodResponse>;
   onSelectPaymentMethod: (paymentMethod: PaymentMethodResponse) => void;
-  isLoading?: boolean;
-  header?: React.ReactElement;
+  isLoadingMethods?: boolean;
+  isLoadingWebView?: boolean;
 }>;
 
 type PaymentMethodItemProps = {
   paymentMethod: PaymentMethodResponse;
+  isLoading?: boolean;
   onPress: () => void;
 };
 
 const PaymentMethodItem = ({
   paymentMethod,
+  isLoading,
   onPress
 }: PaymentMethodItemProps) => {
   const listItemNavCommonProps: ListItemNav = {
     accessibilityLabel: paymentMethod.description,
     onPress,
+    loading: isLoading,
     value: paymentMethod.description
   };
 
   return pipe(
     paymentMethod.asset,
     O.fromNullable,
-    O.chain(findFirstCaseInsensitive(IOPaymentLogos)),
-    O.map(([brand]) => brand),
     O.fold(
       () => <ListItemNav {...listItemNavCommonProps} icon="creditCard" />,
       brand => (
-        <ListItemNav
-          {...listItemNavCommonProps}
-          paymentLogo={brand as IOLogoPaymentType}
-        />
+        <ListItemNav {...listItemNavCommonProps} paymentLogoUri={brand} />
       )
     )
   );
@@ -63,25 +60,34 @@ const PaymentMethodItem = ({
 const WalletOnboardingPaymentMethodsList = ({
   paymentMethods,
   onSelectPaymentMethod,
-  isLoading,
-  header
-}: OwnProps) => (
-  <FlatList
-    removeClippedSubviews={false}
-    contentContainerStyle={IOStyles.horizontalContentPadding}
-    data={paymentMethods}
-    keyExtractor={item => item.name}
-    ListHeaderComponent={header}
-    ListFooterComponent={renderListFooter(isLoading)}
-    ItemSeparatorComponent={() => <Divider />}
-    renderItem={({ item }) => (
-      <PaymentMethodItem
-        paymentMethod={item}
-        onPress={() => onSelectPaymentMethod(item)}
-      />
-    )}
-  />
-);
+  isLoadingMethods,
+  isLoadingWebView
+}: OwnProps) => {
+  const selectedPaymentMethodId = useIOSelector(
+    selectPaymentOnboardingSelectedMethod
+  );
+  const isMethodLoading = (itemId: string) =>
+    isLoadingWebView && itemId === selectedPaymentMethodId;
+  const ListFooter = () => renderListFooter(isLoadingMethods);
+
+  return (
+    <FlatList
+      removeClippedSubviews={false}
+      contentContainerStyle={IOStyles.horizontalContentPadding}
+      data={paymentMethods}
+      keyExtractor={item => item.id}
+      ListFooterComponent={<ListFooter />}
+      ItemSeparatorComponent={() => <Divider />}
+      renderItem={({ item }) => (
+        <PaymentMethodItem
+          paymentMethod={item}
+          isLoading={isMethodLoading(item.id)}
+          onPress={() => onSelectPaymentMethod(item)}
+        />
+      )}
+    />
+  );
+};
 
 const renderListFooter = (isLoading?: boolean) => {
   if (isLoading) {
diff --git a/ts/features/walletV3/common/components/WalletPaymentMethodItemSkeleton.tsx b/ts/features/payments/onboarding/components/WalletPaymentMethodItemSkeleton.tsx
similarity index 100%
rename from ts/features/walletV3/common/components/WalletPaymentMethodItemSkeleton.tsx
rename to ts/features/payments/onboarding/components/WalletPaymentMethodItemSkeleton.tsx
diff --git a/ts/features/payments/onboarding/hooks/useWalletOnboardingWebView.tsx b/ts/features/payments/onboarding/hooks/useWalletOnboardingWebView.tsx
new file mode 100644
index 00000000000..db7cdaf2993
--- /dev/null
+++ b/ts/features/payments/onboarding/hooks/useWalletOnboardingWebView.tsx
@@ -0,0 +1,116 @@
+import { openAuthenticationSession } from "@pagopa/io-react-native-login-utils";
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import * as E from "fp-ts/lib/Either";
+import * as TE from "fp-ts/lib/TaskEither";
+import { pipe } from "fp-ts/lib/function";
+import * as React from "react";
+import URLParse from "url-parse";
+import { useIODispatch, useIOSelector } from "../../../../store/hooks";
+import { selectPaymentOnboardingRequestResult } from "../store/selectors";
+import { paymentsStartOnboardingAction } from "../store/actions";
+import {
+  WalletOnboardingOutcome,
+  WalletOnboardingOutcomeEnum
+} from "../types/OnboardingOutcomeEnum";
+import { ONBOARDING_CALLBACK_URL_SCHEMA } from "../utils";
+
+type WalletOnboardingWebViewProps = {
+  onOnboardingOutcome: (
+    outcome: WalletOnboardingOutcome,
+    walletId?: string
+  ) => void;
+};
+
+export type WalletOnboardingWebView = {
+  isLoading: boolean;
+  isError: boolean;
+  isPendingOnboarding: boolean;
+  startOnboarding: (paymentMethodId: string) => void;
+};
+
+/**
+ * This hook handles the onboarding webview flow and returns a function to start the onboarding
+ * @param onOnboardingOutcome callback called when the onboarding flow is completed
+ */
+export const useWalletOnboardingWebView = ({
+  onOnboardingOutcome
+}: WalletOnboardingWebViewProps): WalletOnboardingWebView => {
+  const dispatch = useIODispatch();
+
+  const onboardingUrlPot = useIOSelector(selectPaymentOnboardingRequestResult);
+
+  const [isPendingOnboarding, setIsPendingOnboarding] =
+    React.useState<boolean>(false);
+  const isLoading = pot.isLoading(onboardingUrlPot);
+  const isError = pot.isError(onboardingUrlPot);
+
+  const handleOnboardingResult = React.useCallback(
+    (resultUrl: string) => {
+      const url = new URLParse(resultUrl, true);
+
+      const outcome = pipe(
+        url.query.outcome,
+        WalletOnboardingOutcome.decode,
+        E.getOrElse(() => WalletOnboardingOutcomeEnum.GENERIC_ERROR)
+      );
+
+      onOnboardingOutcome(outcome, url.query.walletId);
+    },
+    [onOnboardingOutcome]
+  );
+
+  React.useEffect(() => {
+    if (isPendingOnboarding) {
+      return;
+    }
+
+    void pipe(
+      onboardingUrlPot,
+      pot.toOption,
+      TE.fromOption(() => undefined),
+      TE.chain(({ redirectUrl }) =>
+        TE.tryCatch(
+          () => {
+            setIsPendingOnboarding(true);
+            return openAuthenticationSession(
+              redirectUrl,
+              ONBOARDING_CALLBACK_URL_SCHEMA
+            );
+          },
+          () => {
+            onOnboardingOutcome(WalletOnboardingOutcomeEnum.CANCELED_BY_USER);
+          }
+        )
+      ),
+      TE.map(handleOnboardingResult)
+    )();
+  }, [
+    isError,
+    isLoading,
+    isPendingOnboarding,
+    onboardingUrlPot,
+    handleOnboardingResult,
+    onOnboardingOutcome,
+    dispatch
+  ]);
+
+  React.useEffect(
+    () => () => {
+      setIsPendingOnboarding(false);
+      dispatch(paymentsStartOnboardingAction.cancel());
+    },
+    [dispatch]
+  );
+
+  const startOnboarding = (paymentMethodId: string) => {
+    setIsPendingOnboarding(false);
+    dispatch(paymentsStartOnboardingAction.request({ paymentMethodId }));
+  };
+
+  return {
+    startOnboarding,
+    isLoading,
+    isError,
+    isPendingOnboarding
+  };
+};
diff --git a/ts/features/payments/onboarding/navigation/navigator.tsx b/ts/features/payments/onboarding/navigation/navigator.tsx
new file mode 100644
index 00000000000..a752dc9cb02
--- /dev/null
+++ b/ts/features/payments/onboarding/navigation/navigator.tsx
@@ -0,0 +1,44 @@
+import { ParamListBase } from "@react-navigation/native";
+import {
+  createStackNavigator,
+  StackNavigationProp
+} from "@react-navigation/stack";
+import React from "react";
+import { isGestureEnabled } from "../../../../utils/navigation";
+import { PaymentsOnboardingFeedbackScreen } from "../screens/PaymentsOnboardingFeedbackScreen";
+import { PaymentsOnboardingSelectMethodScreen } from "../screens/PaymentsOnboardingSelectMethodScreen";
+import { PaymentsOnboardingParamsList } from "./params";
+import { PaymentsOnboardingRoutes } from "./routes";
+
+const Stack = createStackNavigator<PaymentsOnboardingParamsList>();
+
+export const PaymentsOnboardingNavigator = () => (
+  <Stack.Navigator
+    initialRouteName={
+      PaymentsOnboardingRoutes.PAYMENT_ONBOARDING_RESULT_FEEDBACK
+    }
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerShown: false }}
+  >
+    <Stack.Screen
+      name={PaymentsOnboardingRoutes.PAYMENT_ONBOARDING_SELECT_METHOD}
+      component={PaymentsOnboardingSelectMethodScreen}
+      options={{ gestureEnabled: false, headerShown: true }}
+    />
+    <Stack.Screen
+      name={PaymentsOnboardingRoutes.PAYMENT_ONBOARDING_RESULT_FEEDBACK}
+      component={PaymentsOnboardingFeedbackScreen}
+      options={{ gestureEnabled: false }}
+    />
+  </Stack.Navigator>
+);
+
+export type PaymentsOnboardingStackNavigationProp<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = string
+> = StackNavigationProp<PaymentsOnboardingParamsList & ParamList, RouteName>;
+
+export type PaymentsOnboardingStackNavigation =
+  PaymentsOnboardingStackNavigationProp<
+    PaymentsOnboardingParamsList,
+    keyof PaymentsOnboardingParamsList
+  >;
diff --git a/ts/features/payments/onboarding/navigation/params.ts b/ts/features/payments/onboarding/navigation/params.ts
new file mode 100644
index 00000000000..674aae1fb09
--- /dev/null
+++ b/ts/features/payments/onboarding/navigation/params.ts
@@ -0,0 +1,8 @@
+import { PaymentsOnboardingFeedbackScreenParams } from "../screens/PaymentsOnboardingFeedbackScreen";
+import { PaymentsOnboardingRoutes } from "./routes";
+
+export type PaymentsOnboardingParamsList = {
+  [PaymentsOnboardingRoutes.PAYMENT_ONBOARDING_NAVIGATOR]: undefined;
+  [PaymentsOnboardingRoutes.PAYMENT_ONBOARDING_RESULT_FEEDBACK]: PaymentsOnboardingFeedbackScreenParams;
+  [PaymentsOnboardingRoutes.PAYMENT_ONBOARDING_SELECT_METHOD]: undefined;
+};
diff --git a/ts/features/payments/onboarding/navigation/routes.ts b/ts/features/payments/onboarding/navigation/routes.ts
new file mode 100644
index 00000000000..15f672d110e
--- /dev/null
+++ b/ts/features/payments/onboarding/navigation/routes.ts
@@ -0,0 +1,5 @@
+export const PaymentsOnboardingRoutes = {
+  PAYMENT_ONBOARDING_NAVIGATOR: "PAYMENT_ONBOARDING_NAVIGATOR",
+  PAYMENT_ONBOARDING_SELECT_METHOD: "PAYMENT_ONBOARDING_SELECT_METHOD",
+  PAYMENT_ONBOARDING_RESULT_FEEDBACK: "PAYMENT_ONBOARDING_RESULT_FEEDBACK"
+} as const;
diff --git a/ts/features/walletV3/onboarding/saga/handleGetPaymentMethods.ts b/ts/features/payments/onboarding/saga/handleGetPaymentMethods.ts
similarity index 77%
rename from ts/features/walletV3/onboarding/saga/handleGetPaymentMethods.ts
rename to ts/features/payments/onboarding/saga/handleGetPaymentMethods.ts
index c44bbb2875d..dd0f1b62d2e 100644
--- a/ts/features/walletV3/onboarding/saga/handleGetPaymentMethods.ts
+++ b/ts/features/payments/onboarding/saga/handleGetPaymentMethods.ts
@@ -2,7 +2,7 @@ import { ActionType } from "typesafe-actions";
 import { call, put } from "typed-redux-saga/macro";
 import * as E from "fp-ts/lib/Either";
 import { SagaCallReturnType } from "../../../../types/utils";
-import { walletGetPaymentMethods } from "../store/actions";
+import { paymentsOnboardingGetMethodsAction } from "../store/actions";
 import { readablePrivacyReport } from "../../../../utils/reporters";
 import { getGenericError, getNetworkError } from "../../../../utils/errors";
 import { WalletClient } from "../../common/api/client";
@@ -15,7 +15,7 @@ import { withRefreshApiCall } from "../../../fastLogin/saga/utils";
  */
 export function* handleGetPaymentMethods(
   getPaymentMethods: WalletClient["getAllPaymentMethods"],
-  action: ActionType<(typeof walletGetPaymentMethods)["request"]>
+  action: ActionType<(typeof paymentsOnboardingGetMethodsAction)["request"]>
 ) {
   const getPaymentMethodsRequest = getPaymentMethods({});
   try {
@@ -28,13 +28,15 @@ export function* handleGetPaymentMethods(
       if (getPaymentMethodsResult.right.status === 200) {
         // handled success
         yield* put(
-          walletGetPaymentMethods.success(getPaymentMethodsResult.right.value)
+          paymentsOnboardingGetMethodsAction.success(
+            getPaymentMethodsResult.right.value
+          )
         );
         return;
       }
       // not handled error codes
       yield* put(
-        walletGetPaymentMethods.failure({
+        paymentsOnboardingGetMethodsAction.failure({
           ...getGenericError(
             new Error(
               `response status code ${getPaymentMethodsResult.right.status}`
@@ -45,7 +47,7 @@ export function* handleGetPaymentMethods(
     } else {
       // cannot decode response
       yield* put(
-        walletGetPaymentMethods.failure({
+        paymentsOnboardingGetMethodsAction.failure({
           ...getGenericError(
             new Error(readablePrivacyReport(getPaymentMethodsResult.left))
           )
@@ -53,6 +55,8 @@ export function* handleGetPaymentMethods(
       );
     }
   } catch (e) {
-    yield* put(walletGetPaymentMethods.failure({ ...getNetworkError(e) }));
+    yield* put(
+      paymentsOnboardingGetMethodsAction.failure({ ...getNetworkError(e) })
+    );
   }
 }
diff --git a/ts/features/walletV3/onboarding/saga/handleStartWalletOnboarding.ts b/ts/features/payments/onboarding/saga/handleStartWalletOnboarding.ts
similarity index 77%
rename from ts/features/walletV3/onboarding/saga/handleStartWalletOnboarding.ts
rename to ts/features/payments/onboarding/saga/handleStartWalletOnboarding.ts
index ec5df9e6383..bdb35959ed9 100644
--- a/ts/features/walletV3/onboarding/saga/handleStartWalletOnboarding.ts
+++ b/ts/features/payments/onboarding/saga/handleStartWalletOnboarding.ts
@@ -2,11 +2,10 @@ import { call, put } from "typed-redux-saga/macro";
 import { ActionType } from "typesafe-actions";
 import * as E from "fp-ts/lib/Either";
 import { SagaCallReturnType } from "../../../../types/utils";
-import { walletStartOnboarding } from "../store/actions";
+import { paymentsStartOnboardingAction } from "../store/actions";
 import { readablePrivacyReport } from "../../../../utils/reporters";
 import { getGenericError, getNetworkError } from "../../../../utils/errors";
 import { WalletClient } from "../../common/api/client";
-import { ServiceNameEnum } from "../../../../../definitions/pagopa/walletv3/ServiceName";
 import { withRefreshApiCall } from "../../../fastLogin/saga/utils";
 
 /**
@@ -16,13 +15,13 @@ import { withRefreshApiCall } from "../../../fastLogin/saga/utils";
  */
 export function* handleStartWalletOnboarding(
   startOnboarding: WalletClient["createWallet"],
-  action: ActionType<(typeof walletStartOnboarding)["request"]>
+  action: ActionType<(typeof paymentsStartOnboardingAction)["request"]>
 ) {
   try {
     const { paymentMethodId } = action.payload;
     const startOnboardingRequest = startOnboarding({
       body: {
-        services: [ServiceNameEnum.PAGOPA],
+        applications: ["PAGOPA"],
         useDiagnosticTracing: true,
         paymentMethodId
       }
@@ -36,13 +35,15 @@ export function* handleStartWalletOnboarding(
       if (startOnboardingResult.right.status === 201) {
         // handled success
         yield* put(
-          walletStartOnboarding.success(startOnboardingResult.right.value)
+          paymentsStartOnboardingAction.success(
+            startOnboardingResult.right.value
+          )
         );
         return;
       }
       // not handled error codes
       yield* put(
-        walletStartOnboarding.failure({
+        paymentsStartOnboardingAction.failure({
           ...getGenericError(
             new Error(
               `response status code ${startOnboardingResult.right.status}`
@@ -53,7 +54,7 @@ export function* handleStartWalletOnboarding(
     } else {
       // cannot decode response
       yield* put(
-        walletStartOnboarding.failure({
+        paymentsStartOnboardingAction.failure({
           ...getGenericError(
             new Error(readablePrivacyReport(startOnboardingResult.left))
           )
@@ -61,6 +62,8 @@ export function* handleStartWalletOnboarding(
       );
     }
   } catch (e) {
-    yield* put(walletStartOnboarding.failure({ ...getNetworkError(e) }));
+    yield* put(
+      paymentsStartOnboardingAction.failure({ ...getNetworkError(e) })
+    );
   }
 }
diff --git a/ts/features/walletV3/onboarding/saga/index.ts b/ts/features/payments/onboarding/saga/index.ts
similarity index 78%
rename from ts/features/walletV3/onboarding/saga/index.ts
rename to ts/features/payments/onboarding/saga/index.ts
index ef577067eca..d3b24d1ef25 100644
--- a/ts/features/walletV3/onboarding/saga/index.ts
+++ b/ts/features/payments/onboarding/saga/index.ts
@@ -3,8 +3,8 @@ import { takeLatest } from "typed-redux-saga/macro";
 
 import { WalletClient } from "../../common/api/client";
 import {
-  walletGetPaymentMethods,
-  walletStartOnboarding
+  paymentsOnboardingGetMethodsAction,
+  paymentsStartOnboardingAction
 } from "../store/actions";
 import { handleStartWalletOnboarding } from "./handleStartWalletOnboarding";
 import { handleGetPaymentMethods } from "./handleGetPaymentMethods";
@@ -13,19 +13,19 @@ import { handleGetPaymentMethods } from "./handleGetPaymentMethods";
  * Handle Wallet onboarding requests
  * @param bearerToken
  */
-export function* watchWalletOnboardingSaga(
+export function* watchPaymentsOnboardingSaga(
   walletClient: WalletClient
 ): SagaIterator {
   // handle the request of starting wallet onboarding
   yield* takeLatest(
-    walletStartOnboarding.request,
+    paymentsStartOnboardingAction.request,
     handleStartWalletOnboarding,
     walletClient.createWallet
   );
 
   // handle the request of get list of payment methods available into onboarding
   yield* takeLatest(
-    walletGetPaymentMethods.request,
+    paymentsOnboardingGetMethodsAction.request,
     handleGetPaymentMethods,
     walletClient.getAllPaymentMethods
   );
diff --git a/ts/features/payments/onboarding/screens/PaymentsOnboardingFeedbackScreen.tsx b/ts/features/payments/onboarding/screens/PaymentsOnboardingFeedbackScreen.tsx
new file mode 100644
index 00000000000..47afabd45c5
--- /dev/null
+++ b/ts/features/payments/onboarding/screens/PaymentsOnboardingFeedbackScreen.tsx
@@ -0,0 +1,121 @@
+import { IOPictograms } from "@pagopa/io-app-design-system";
+import { RouteProp, useNavigation, useRoute } from "@react-navigation/native";
+import * as React from "react";
+import { View } from "react-native";
+import { IOStyles } from "../../../../components/core/variables/IOStyles";
+import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
+import I18n from "../../../../i18n";
+import {
+  AppParamsList,
+  IOStackNavigationProp
+} from "../../../../navigation/params/AppParamsList";
+import ROUTES from "../../../../navigation/routes";
+import { openWebUrl } from "../../../../utils/url";
+import { PaymentsMethodDetailsRoutes } from "../../details/navigation/routes";
+import { PaymentsOnboardingParamsList } from "../navigation/params";
+import {
+  WalletOnboardingOutcome,
+  WalletOnboardingOutcomeEnum
+} from "../types/OnboardingOutcomeEnum";
+import { ONBOARDING_FAQ_ENABLE_3DS } from "../utils";
+
+export type PaymentsOnboardingFeedbackScreenParams = {
+  outcome: WalletOnboardingOutcome;
+  walletId?: string;
+};
+
+type PaymentsOnboardingFeedbackScreenRouteProps = RouteProp<
+  PaymentsOnboardingParamsList,
+  "PAYMENT_ONBOARDING_RESULT_FEEDBACK"
+>;
+
+export const pictogramByOutcome: Record<WalletOnboardingOutcome, IOPictograms> =
+  {
+    [WalletOnboardingOutcomeEnum.SUCCESS]: "success",
+    [WalletOnboardingOutcomeEnum.GENERIC_ERROR]: "umbrellaNew",
+    [WalletOnboardingOutcomeEnum.AUTH_ERROR]: "accessDenied",
+    [WalletOnboardingOutcomeEnum.TIMEOUT]: "time",
+    [WalletOnboardingOutcomeEnum.CANCELED_BY_USER]: "trash",
+    [WalletOnboardingOutcomeEnum.INVALID_SESSION]: "umbrellaNew",
+    [WalletOnboardingOutcomeEnum.ALREADY_ONBOARDED]: "success",
+    [WalletOnboardingOutcomeEnum.BPAY_NOT_FOUND]: "attention"
+  };
+
+const PaymentsOnboardingFeedbackScreen = () => {
+  const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
+  const route = useRoute<PaymentsOnboardingFeedbackScreenRouteProps>();
+  const { outcome, walletId } = route.params;
+
+  const outcomeEnumKey = Object.keys(WalletOnboardingOutcomeEnum)[
+    Object.values(WalletOnboardingOutcomeEnum).indexOf(outcome)
+  ] as keyof typeof WalletOnboardingOutcomeEnum;
+
+  const handleContinueButton = () => {
+    navigation.popToTop();
+    if (outcome === WalletOnboardingOutcomeEnum.SUCCESS && walletId) {
+      navigation.reset({
+        index: 1,
+        routes: [
+          {
+            name: ROUTES.MAIN,
+            params: {
+              screen: ROUTES.WALLET_HOME,
+              params: {
+                newMethodAdded: true
+              }
+            }
+          },
+          {
+            name: PaymentsMethodDetailsRoutes.PAYMENT_METHOD_DETAILS_NAVIGATOR,
+            params: {
+              screen: PaymentsMethodDetailsRoutes.PAYMENT_METHOD_DETAILS_SCREEN,
+              params: {
+                walletId
+              }
+            }
+          }
+        ]
+      });
+    } else {
+      navigation.popToTop();
+    }
+  };
+
+  const renderSecondaryAction = () => {
+    switch (outcome) {
+      case WalletOnboardingOutcomeEnum.AUTH_ERROR:
+        return {
+          label: I18n.t(`wallet.onboarding.outcome.AUTH_ERROR.secondaryAction`),
+          accessibilityLabel: I18n.t(
+            `wallet.onboarding.outcome.AUTH_ERROR.secondaryAction`
+          ),
+          onPress: () => openWebUrl(ONBOARDING_FAQ_ENABLE_3DS)
+        };
+    }
+    return undefined;
+  };
+
+  return (
+    <View style={IOStyles.flex}>
+      <OperationResultScreenContent
+        title={I18n.t(`wallet.onboarding.outcome.${outcomeEnumKey}.title`)}
+        subtitle={I18n.t(
+          `wallet.onboarding.outcome.${outcomeEnumKey}.subtitle`
+        )}
+        pictogram={pictogramByOutcome[outcome]}
+        action={{
+          label: I18n.t(
+            `wallet.onboarding.outcome.${outcomeEnumKey}.primaryAction`
+          ),
+          accessibilityLabel: I18n.t(
+            `wallet.onboarding.outcome.${outcomeEnumKey}.primaryAction`
+          ),
+          onPress: handleContinueButton
+        }}
+        secondaryAction={renderSecondaryAction()}
+      />
+    </View>
+  );
+};
+
+export { PaymentsOnboardingFeedbackScreen };
diff --git a/ts/features/payments/onboarding/screens/PaymentsOnboardingSelectMethodScreen.tsx b/ts/features/payments/onboarding/screens/PaymentsOnboardingSelectMethodScreen.tsx
new file mode 100644
index 00000000000..37da80d9db9
--- /dev/null
+++ b/ts/features/payments/onboarding/screens/PaymentsOnboardingSelectMethodScreen.tsx
@@ -0,0 +1,95 @@
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import * as O from "fp-ts/lib/Option";
+import { pipe } from "fp-ts/lib/function";
+import * as React from "react";
+import { PaymentMethodResponse } from "../../../../../definitions/pagopa/walletv3/PaymentMethodResponse";
+import { PaymentMethodStatusEnum } from "../../../../../definitions/pagopa/walletv3/PaymentMethodStatus";
+import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
+import { RNavScreenWithLargeHeader } from "../../../../components/ui/RNavScreenWithLargeHeader";
+import I18n from "../../../../i18n";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { useIODispatch, useIOSelector } from "../../../../store/hooks";
+import { useOnFirstRender } from "../../../../utils/hooks/useOnFirstRender";
+import WalletOnboardingPaymentMethodsList from "../components/WalletOnboardingPaymentMethodsList";
+import { useWalletOnboardingWebView } from "../hooks/useWalletOnboardingWebView";
+import { PaymentsOnboardingRoutes } from "../navigation/routes";
+import { paymentsOnboardingGetMethodsAction } from "../store/actions";
+import { selectPaymentOnboardingMethods } from "../store/selectors";
+
+const PaymentsOnboardingSelectMethodScreen = () => {
+  const navigation = useIONavigation();
+  const dispatch = useIODispatch();
+
+  const paymentMethodsPot = useIOSelector(selectPaymentOnboardingMethods);
+  const isLoadingPaymentMethods = pot.isLoading(paymentMethodsPot);
+
+  const availablePaymentMethods = pipe(
+    pot.getOrElse(
+      pot.map(paymentMethodsPot, el => el.paymentMethods),
+      null
+    ),
+    O.fromNullable,
+    O.map(el => el.filter(el => el.status === PaymentMethodStatusEnum.ENABLED)),
+    O.getOrElseW(() => [])
+  );
+
+  const { startOnboarding, isLoading, isPendingOnboarding } =
+    useWalletOnboardingWebView({
+      onOnboardingOutcome: (outcome, walletId) => {
+        navigation.replace(
+          PaymentsOnboardingRoutes.PAYMENT_ONBOARDING_NAVIGATOR,
+          {
+            screen: PaymentsOnboardingRoutes.PAYMENT_ONBOARDING_RESULT_FEEDBACK,
+            params: {
+              outcome,
+              walletId
+            }
+          }
+        );
+      }
+    });
+
+  useOnFirstRender(() => {
+    dispatch(paymentsOnboardingGetMethodsAction.request());
+  });
+
+  const handleSelectedPaymentMethod = (
+    selectedPaymentMethod: PaymentMethodResponse
+  ) => {
+    startOnboarding(selectedPaymentMethod.id);
+  };
+
+  if (pot.isError(paymentMethodsPot)) {
+    return (
+      <OperationResultScreenContent
+        pictogram="umbrellaNew"
+        title={I18n.t("genericError")}
+        subtitle={I18n.t("global.genericError")}
+        action={{
+          label: I18n.t("global.genericRetry"),
+          accessibilityLabel: I18n.t("global.genericRetry"),
+          onPress: () => dispatch(paymentsOnboardingGetMethodsAction.request())
+        }}
+      />
+    );
+  }
+  return (
+    <RNavScreenWithLargeHeader
+      title={{
+        label: I18n.t("wallet.onboarding.paymentMethodsList.header.title")
+      }}
+      description={I18n.t(
+        "wallet.onboarding.paymentMethodsList.header.subtitle"
+      )}
+    >
+      <WalletOnboardingPaymentMethodsList
+        isLoadingMethods={isLoadingPaymentMethods}
+        onSelectPaymentMethod={handleSelectedPaymentMethod}
+        paymentMethods={availablePaymentMethods}
+        isLoadingWebView={isLoading || isPendingOnboarding}
+      />
+    </RNavScreenWithLargeHeader>
+  );
+};
+
+export { PaymentsOnboardingSelectMethodScreen };
diff --git a/ts/features/payments/onboarding/store/actions/index.ts b/ts/features/payments/onboarding/store/actions/index.ts
new file mode 100644
index 00000000000..7d07e4f83ed
--- /dev/null
+++ b/ts/features/payments/onboarding/store/actions/index.ts
@@ -0,0 +1,22 @@
+import { ActionType, createAsyncAction } from "typesafe-actions";
+import { NetworkError } from "../../../../../utils/errors";
+import { WalletCreateResponse } from "../../../../../../definitions/pagopa/walletv3/WalletCreateResponse";
+import { PaymentMethodsResponse } from "../../../../../../definitions/pagopa/walletv3/PaymentMethodsResponse";
+
+export const paymentsOnboardingGetMethodsAction = createAsyncAction(
+  "PAYMENTS_GET_ONBOARDING_METHODS_REQUEST",
+  "PAYMENTS_GET_ONBOARDING_METHODS_SUCCESS",
+  "PAYMENTS_GET_ONBOARDING_METHODS_FAILURE",
+  "PAYMENTS_GET_ONBOARDING_METHODS_CANCEL"
+)<void, PaymentMethodsResponse, NetworkError, void>();
+
+export const paymentsStartOnboardingAction = createAsyncAction(
+  "PAYMENTS_START_ONBOARDING_REQUEST",
+  "PAYMENTS_START_ONBOARDING_SUCCESS",
+  "PAYMENTS_START_ONBOARDING_FAILURE",
+  "PAYMENTS_START_ONBOARDING_CANCEL"
+)<{ paymentMethodId: string }, WalletCreateResponse, NetworkError, void>();
+
+export type PaymentsOnboardingActions =
+  | ActionType<typeof paymentsStartOnboardingAction>
+  | ActionType<typeof paymentsOnboardingGetMethodsAction>;
diff --git a/ts/features/payments/onboarding/store/reducers/index.ts b/ts/features/payments/onboarding/store/reducers/index.ts
new file mode 100644
index 00000000000..007658c8ae4
--- /dev/null
+++ b/ts/features/payments/onboarding/store/reducers/index.ts
@@ -0,0 +1,78 @@
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { getType } from "typesafe-actions";
+import { PaymentMethodsResponse } from "../../../../../../definitions/pagopa/walletv3/PaymentMethodsResponse";
+import { WalletCreateResponse } from "../../../../../../definitions/pagopa/walletv3/WalletCreateResponse";
+import { Action } from "../../../../../store/actions/types";
+import { NetworkError } from "../../../../../utils/errors";
+
+import {
+  paymentsOnboardingGetMethodsAction,
+  paymentsStartOnboardingAction
+} from "../actions";
+
+export type PaymentsOnboardingState = {
+  result: pot.Pot<WalletCreateResponse, NetworkError>;
+  paymentMethods: pot.Pot<PaymentMethodsResponse, NetworkError>;
+  selectedPaymentMethodId?: string;
+};
+
+const INITIAL_STATE: PaymentsOnboardingState = {
+  result: pot.none,
+  paymentMethods: pot.noneLoading,
+  selectedPaymentMethodId: undefined
+};
+
+const reducer = (
+  state: PaymentsOnboardingState = INITIAL_STATE,
+  action: Action
+): PaymentsOnboardingState => {
+  switch (action.type) {
+    // START ONBOARDING ACTIONS
+    case getType(paymentsStartOnboardingAction.request):
+      return {
+        ...state,
+        selectedPaymentMethodId: action.payload.paymentMethodId,
+        result: pot.toLoading(pot.none)
+      };
+    case getType(paymentsStartOnboardingAction.success):
+      return {
+        ...state,
+        result: pot.some(action.payload as WalletCreateResponse)
+      };
+    case getType(paymentsStartOnboardingAction.failure):
+      return {
+        ...state,
+        result: pot.toError(state.result, action.payload)
+      };
+    case getType(paymentsStartOnboardingAction.cancel):
+      return {
+        ...state,
+        selectedPaymentMethodId: undefined,
+        result: pot.none
+      };
+    // GET ONBOARDABLE PAYMENT METHODS LIST
+    case getType(paymentsOnboardingGetMethodsAction.request):
+      return {
+        ...state,
+        paymentMethods: pot.toLoading(pot.none)
+      };
+    case getType(paymentsOnboardingGetMethodsAction.success):
+      return {
+        ...state,
+        paymentMethods: pot.some(action.payload)
+      };
+    case getType(paymentsOnboardingGetMethodsAction.failure):
+      return {
+        ...state,
+        paymentMethods: pot.toError(state.paymentMethods, action.payload)
+      };
+    case getType(paymentsOnboardingGetMethodsAction.cancel):
+      return {
+        ...state,
+        paymentMethods: pot.none
+      };
+  }
+  return state;
+};
+
+export default reducer;
diff --git a/ts/features/payments/onboarding/store/selectors/index.ts b/ts/features/payments/onboarding/store/selectors/index.ts
new file mode 100644
index 00000000000..3f019525f91
--- /dev/null
+++ b/ts/features/payments/onboarding/store/selectors/index.ts
@@ -0,0 +1,13 @@
+import { GlobalState } from "../../../../../store/reducers/types";
+
+const walletOnboardingSelector = (state: GlobalState) =>
+  state.features.payments.onboarding;
+
+export const selectPaymentOnboardingRequestResult = (state: GlobalState) =>
+  walletOnboardingSelector(state).result;
+
+export const selectPaymentOnboardingMethods = (state: GlobalState) =>
+  walletOnboardingSelector(state).paymentMethods;
+
+export const selectPaymentOnboardingSelectedMethod = (state: GlobalState) =>
+  walletOnboardingSelector(state).selectedPaymentMethodId;
diff --git a/ts/features/payments/onboarding/types/OnboardingOutcomeEnum.ts b/ts/features/payments/onboarding/types/OnboardingOutcomeEnum.ts
new file mode 100644
index 00000000000..12bcf64190c
--- /dev/null
+++ b/ts/features/payments/onboarding/types/OnboardingOutcomeEnum.ts
@@ -0,0 +1,19 @@
+import { enumType } from "@pagopa/ts-commons/lib/types";
+import * as t from "io-ts";
+
+export enum WalletOnboardingOutcomeEnum {
+  SUCCESS = "0",
+  GENERIC_ERROR = "1",
+  AUTH_ERROR = "2",
+  TIMEOUT = "4",
+  CANCELED_BY_USER = "8",
+  INVALID_SESSION = "14",
+  ALREADY_ONBOARDED = "15",
+  BPAY_NOT_FOUND = "16"
+}
+
+export type WalletOnboardingOutcome = t.TypeOf<typeof WalletOnboardingOutcome>;
+export const WalletOnboardingOutcome = enumType<WalletOnboardingOutcomeEnum>(
+  WalletOnboardingOutcomeEnum,
+  "WalletOnboardingOutcome"
+);
diff --git a/ts/features/payments/onboarding/utils/index.ts b/ts/features/payments/onboarding/utils/index.ts
new file mode 100644
index 00000000000..b5e3a46516d
--- /dev/null
+++ b/ts/features/payments/onboarding/utils/index.ts
@@ -0,0 +1,3 @@
+export const ONBOARDING_FAQ_ENABLE_3DS = "https://io.italia.it/faq/#n3_3";
+export const ONBOARDING_CALLBACK_URL_SCHEMA = "iowallet";
+export const ONBOARDING_OUTCOME_PATH = "/wallets/outcomes";
diff --git a/ts/features/walletV3/transaction/components/WalletTransactionDetailsList.tsx b/ts/features/payments/transaction/components/WalletTransactionDetailsList.tsx
similarity index 100%
rename from ts/features/walletV3/transaction/components/WalletTransactionDetailsList.tsx
rename to ts/features/payments/transaction/components/WalletTransactionDetailsList.tsx
diff --git a/ts/features/walletV3/transaction/components/WalletTransactionHeadingSection.tsx b/ts/features/payments/transaction/components/WalletTransactionHeadingSection.tsx
similarity index 89%
rename from ts/features/walletV3/transaction/components/WalletTransactionHeadingSection.tsx
rename to ts/features/payments/transaction/components/WalletTransactionHeadingSection.tsx
index a9cf9459284..45a6a47e237 100644
--- a/ts/features/walletV3/transaction/components/WalletTransactionHeadingSection.tsx
+++ b/ts/features/payments/transaction/components/WalletTransactionHeadingSection.tsx
@@ -1,19 +1,16 @@
+import { Body, IOStyles, VSpacer } from "@pagopa/io-app-design-system";
 import { useNavigation } from "@react-navigation/native";
-import Placeholder from "rn-placeholder";
 import React from "react";
 import { View } from "react-native";
-import { Body, IOStyles, VSpacer } from "@pagopa/io-app-design-system";
-import { Psp, Transaction } from "../../../../types/pagopa";
+import Placeholder from "rn-placeholder";
 import { Dettaglio } from "../../../../../definitions/pagopa/Dettaglio";
-import { formatNumberCentsToAmount } from "../../../../utils/stringBuilder";
 import I18n from "../../../../i18n";
-import {
-  WalletTransactionRoutes,
-  WalletTransactionStackNavigation
-} from "../navigation/navigator";
-
-import { WalletTransactionTotalAmount } from "./WalletTransactionTotalAmount";
+import { Psp, Transaction } from "../../../../types/pagopa";
+import { formatNumberCentsToAmount } from "../../../../utils/stringBuilder";
+import { PaymentsTransactionStackNavigation } from "../navigation/navigator";
+import { PaymentsTransactionRoutes } from "../navigation/routes";
 import { WalletTransactionDetailsList } from "./WalletTransactionDetailsList";
+import { WalletTransactionTotalAmount } from "./WalletTransactionTotalAmount";
 
 type Props = {
   transaction?: Transaction;
@@ -26,12 +23,12 @@ export const WalletTransactionHeadingSection = ({
   psp,
   isLoading
 }: Props) => {
-  const navigation = useNavigation<WalletTransactionStackNavigation>();
+  const navigation = useNavigation<PaymentsTransactionStackNavigation>();
 
   const handlePressTransactionDetails = (operationDetails: Dettaglio) => {
     if (transaction) {
       navigation.navigate(
-        WalletTransactionRoutes.WALLET_TRANSACTION_OPERATION_DETAILS,
+        PaymentsTransactionRoutes.PAYMENT_TRANSACTION_OPERATION_DETAILS,
         {
           operationDetails,
           operationSubject: transaction.description,
diff --git a/ts/features/walletV3/transaction/components/WalletTransactionInfoSection.tsx b/ts/features/payments/transaction/components/WalletTransactionInfoSection.tsx
similarity index 91%
rename from ts/features/walletV3/transaction/components/WalletTransactionInfoSection.tsx
rename to ts/features/payments/transaction/components/WalletTransactionInfoSection.tsx
index b437782e97a..4d24aa3628f 100644
--- a/ts/features/walletV3/transaction/components/WalletTransactionInfoSection.tsx
+++ b/ts/features/payments/transaction/components/WalletTransactionInfoSection.tsx
@@ -72,9 +72,6 @@ const WalletTransactionInfoSection = ({
             {psp?.businessName && (
               <>
                 <ListItemInfo
-                  accessibilityLabel={I18n.t(
-                    "transaction.details.info.pspName"
-                  )}
                   label={I18n.t("transaction.details.info.pspName")}
                   value={psp.businessName}
                 />
@@ -82,9 +79,6 @@ const WalletTransactionInfoSection = ({
               </>
             )}
             <ListItemInfo
-              accessibilityLabel={I18n.t(
-                "transaction.details.info.dateAndHour"
-              )}
               label={I18n.t("transaction.details.info.dateAndHour")}
               value={format(transaction.created, "DD MMMM YYYY, HH:mm:ss")}
             />
@@ -93,9 +87,9 @@ const WalletTransactionInfoSection = ({
               onPress={() =>
                 clipboardSetStringWithFeedback(transaction.id.toString())
               }
-              accessibilityLabel={I18n.t(
+              accessibilityLabel={`${I18n.t(
                 "transaction.details.info.transactionId"
-              )}
+              )}: ${transaction.id.toString()}`}
               label={I18n.t("transaction.details.info.transactionId")}
               value={transaction.id.toString()}
             />
diff --git a/ts/features/walletV3/transaction/components/WalletTransactionTotalAmount.tsx b/ts/features/payments/transaction/components/WalletTransactionTotalAmount.tsx
similarity index 100%
rename from ts/features/walletV3/transaction/components/WalletTransactionTotalAmount.tsx
rename to ts/features/payments/transaction/components/WalletTransactionTotalAmount.tsx
diff --git a/ts/features/payments/transaction/navigation/navigator.tsx b/ts/features/payments/transaction/navigation/navigator.tsx
new file mode 100644
index 00000000000..c91c24e4b1a
--- /dev/null
+++ b/ts/features/payments/transaction/navigation/navigator.tsx
@@ -0,0 +1,42 @@
+import { ParamListBase } from "@react-navigation/native";
+import {
+  createStackNavigator,
+  StackNavigationProp
+} from "@react-navigation/stack";
+import React from "react";
+import { isGestureEnabled } from "../../../../utils/navigation";
+import { PaymentsTransactionDetailsScreen } from "../screens/PaymentsTransactionDetailsScreen";
+import WalletTransactionOperationDetailsScreen from "../screens/PaymentsTransactionOperationDetails";
+import { PaymentsTransactionParamsList } from "./params";
+import { PaymentsTransactionRoutes } from "./routes";
+
+const Stack = createStackNavigator<PaymentsTransactionParamsList>();
+
+export const PaymentsTransactionNavigator = () => (
+  <Stack.Navigator
+    initialRouteName={PaymentsTransactionRoutes.PAYMENT_TRANSACTION_DETAILS}
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerShown: true }}
+  >
+    <Stack.Screen
+      name={PaymentsTransactionRoutes.PAYMENT_TRANSACTION_DETAILS}
+      component={PaymentsTransactionDetailsScreen}
+      options={{ gestureEnabled: isGestureEnabled }}
+    />
+    <Stack.Screen
+      name={PaymentsTransactionRoutes.PAYMENT_TRANSACTION_OPERATION_DETAILS}
+      component={WalletTransactionOperationDetailsScreen}
+      options={{ gestureEnabled: isGestureEnabled }}
+    />
+  </Stack.Navigator>
+);
+
+export type PaymentsTransactionStackNavigationProp<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = string
+> = StackNavigationProp<PaymentsTransactionParamsList & ParamList, RouteName>;
+
+export type PaymentsTransactionStackNavigation =
+  PaymentsTransactionStackNavigationProp<
+    PaymentsTransactionParamsList,
+    keyof PaymentsTransactionParamsList
+  >;
diff --git a/ts/features/payments/transaction/navigation/params.ts b/ts/features/payments/transaction/navigation/params.ts
new file mode 100644
index 00000000000..2449c47b441
--- /dev/null
+++ b/ts/features/payments/transaction/navigation/params.ts
@@ -0,0 +1,9 @@
+import { PaymentsTransactionDetailsScreenParams } from "../screens/PaymentsTransactionDetailsScreen";
+import { PaymentsTransactionOperationDetailsScreenParams } from "../screens/PaymentsTransactionOperationDetails";
+import { PaymentsTransactionRoutes } from "./routes";
+
+export type PaymentsTransactionParamsList = {
+  [PaymentsTransactionRoutes.PAYMENT_TRANSACTION_NAVIGATOR]: undefined;
+  [PaymentsTransactionRoutes.PAYMENT_TRANSACTION_DETAILS]: PaymentsTransactionDetailsScreenParams;
+  [PaymentsTransactionRoutes.PAYMENT_TRANSACTION_OPERATION_DETAILS]: PaymentsTransactionOperationDetailsScreenParams;
+};
diff --git a/ts/features/payments/transaction/navigation/routes.ts b/ts/features/payments/transaction/navigation/routes.ts
new file mode 100644
index 00000000000..d4b113de118
--- /dev/null
+++ b/ts/features/payments/transaction/navigation/routes.ts
@@ -0,0 +1,5 @@
+export const PaymentsTransactionRoutes = {
+  PAYMENT_TRANSACTION_NAVIGATOR: "PAYMENT_TRANSACTION_NAVIGATOR",
+  PAYMENT_TRANSACTION_DETAILS: "PAYMENT_TRANSACTION_DETAILS",
+  PAYMENT_TRANSACTION_OPERATION_DETAILS: "PAYMENT_TRANSACTION_OPERATION_DETAILS"
+} as const;
diff --git a/ts/features/walletV3/transaction/saga/handleGetTransactionDetails.ts b/ts/features/payments/transaction/saga/handleGetTransactionDetails.ts
similarity index 82%
rename from ts/features/walletV3/transaction/saga/handleGetTransactionDetails.ts
rename to ts/features/payments/transaction/saga/handleGetTransactionDetails.ts
index 1d5408275d8..8ded1471ddf 100644
--- a/ts/features/walletV3/transaction/saga/handleGetTransactionDetails.ts
+++ b/ts/features/payments/transaction/saga/handleGetTransactionDetails.ts
@@ -1,7 +1,7 @@
 import * as pot from "@pagopa/ts-commons/lib/pot";
 import { put, select } from "typed-redux-saga/macro";
 import { ActionType } from "typesafe-actions";
-import { walletTransactionDetailsGet } from "../store/actions";
+import { getPaymentsTransactionDetailsAction } from "../store/actions";
 import { getTransactions } from "../../../../store/reducers/wallet/transactions";
 import { getGenericError } from "../../../../utils/errors";
 
@@ -13,7 +13,7 @@ import { getGenericError } from "../../../../utils/errors";
  */
 export function* handleGetTransactionDetails(
   _getTransactionDetails: any, // TODO: Replace with the real type when the BIZ Event API will be available
-  action: ActionType<(typeof walletTransactionDetailsGet)["request"]>
+  action: ActionType<(typeof getPaymentsTransactionDetailsAction)["request"]>
 ) {
   // TODO: Add the whole logic here to call the BIZ Event API as soon as it will be available and replace the following code
   const transactions = yield* select(getTransactions);
@@ -23,11 +23,11 @@ export function* handleGetTransactionDetails(
     )
   );
   if (transactionDetails) {
-    yield* put(walletTransactionDetailsGet.success(transactionDetails));
+    yield* put(getPaymentsTransactionDetailsAction.success(transactionDetails));
     return;
   }
   yield* put(
-    walletTransactionDetailsGet.failure({
+    getPaymentsTransactionDetailsAction.failure({
       ...getGenericError(
         new Error(
           `Transaction details not found for transaction id ${action.payload.transactionId}`
diff --git a/ts/features/walletV3/transaction/saga/index.ts b/ts/features/payments/transaction/saga/index.ts
similarity index 79%
rename from ts/features/walletV3/transaction/saga/index.ts
rename to ts/features/payments/transaction/saga/index.ts
index a9d60b20539..5a31a99cde5 100644
--- a/ts/features/walletV3/transaction/saga/index.ts
+++ b/ts/features/payments/transaction/saga/index.ts
@@ -2,19 +2,19 @@ import { SagaIterator } from "redux-saga";
 import { takeLatest } from "typed-redux-saga/macro";
 
 import { WalletClient } from "../../common/api/client";
-import { walletTransactionDetailsGet } from "../store/actions";
+import { getPaymentsTransactionDetailsAction } from "../store/actions";
 import { handleGetTransactionDetails } from "./handleGetTransactionDetails";
 
 /**
  * Handle Wallet transaction requests
  * @param bearerToken
  */
-export function* watchWalletTransactionSaga(
+export function* watchPaymentsTransactionSaga(
   walletClient: WalletClient
 ): SagaIterator {
   // TODO: Connect the saga code here to the BIZ Event API as asoon as it will be available (https://pagopa.atlassian.net/browse/IOBP-440)
   yield* takeLatest(
-    walletTransactionDetailsGet.request,
+    getPaymentsTransactionDetailsAction.request,
     handleGetTransactionDetails,
     walletClient.getWalletById // TODO: Add the get transaction details API call here when BIZ Event API will be available
   );
diff --git a/ts/features/walletV3/transaction/screens/WalletTransactionDetailsScreen.tsx b/ts/features/payments/transaction/screens/PaymentsTransactionDetailsScreen.tsx
similarity index 80%
rename from ts/features/walletV3/transaction/screens/WalletTransactionDetailsScreen.tsx
rename to ts/features/payments/transaction/screens/PaymentsTransactionDetailsScreen.tsx
index bbf9c922b7b..721dd3dbf01 100644
--- a/ts/features/walletV3/transaction/screens/WalletTransactionDetailsScreen.tsx
+++ b/ts/features/payments/transaction/screens/PaymentsTransactionDetailsScreen.tsx
@@ -1,30 +1,29 @@
-import * as React from "react";
-import * as pot from "@pagopa/ts-commons/lib/pot";
-import { Dimensions, StyleSheet, View } from "react-native";
 import { IOColors } from "@pagopa/io-app-design-system";
+import * as pot from "@pagopa/ts-commons/lib/pot";
 import { RouteProp, useRoute } from "@react-navigation/native";
-
-import { WalletTransactionParamsList } from "../navigation/navigator";
-import { useIODispatch, useIOSelector } from "../../../../store/hooks";
+import * as React from "react";
+import { Dimensions, StyleSheet, View } from "react-native";
 import FocusAwareStatusBar from "../../../../components/ui/FocusAwareStatusBar";
-import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
-import { useOnFirstRender } from "../../../../utils/hooks/useOnFirstRender";
-import { walletTransactionDetailsGet } from "../store/actions";
-import { walletTransactionDetailsPotSelector } from "../store";
+import { RNavScreenWithLargeHeader } from "../../../../components/ui/RNavScreenWithLargeHeader";
+import I18n from "../../../../i18n";
 import { fetchPsp } from "../../../../store/actions/wallet/transactions";
+import { useIODispatch, useIOSelector } from "../../../../store/hooks";
 import { Psp } from "../../../../types/pagopa";
-import WalletTransactionInfoSection from "../components/WalletTransactionInfoSection";
+import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
+import { useOnFirstRender } from "../../../../utils/hooks/useOnFirstRender";
 import { WalletTransactionHeadingSection } from "../components/WalletTransactionHeadingSection";
-import { RNavScreenWithLargeHeader } from "../../../../components/ui/RNavScreenWithLargeHeader";
-import I18n from "../../../../i18n";
+import WalletTransactionInfoSection from "../components/WalletTransactionInfoSection";
+import { PaymentsTransactionParamsList } from "../navigation/params";
+import { getPaymentsTransactionDetailsAction } from "../store/actions";
+import { walletTransactionDetailsPotSelector } from "../store/selectors";
 
-export type WalletTransactionDetailsScreenParams = {
+export type PaymentsTransactionDetailsScreenParams = {
   transactionId: number;
 };
 
-export type WalletTransactionDetailsScreenProps = RouteProp<
-  WalletTransactionParamsList,
-  "WALLET_TRANSACTION_DETAILS"
+export type PaymentsTransactionDetailsScreenProps = RouteProp<
+  PaymentsTransactionParamsList,
+  "PAYMENT_TRANSACTION_DETAILS"
 >;
 
 const windowHeight = Dimensions.get("window").height;
@@ -45,10 +44,10 @@ const styles = StyleSheet.create({
   }
 });
 
-const WalletTransactionDetailsScreen = () => {
+const PaymentsTransactionDetailsScreen = () => {
   const [transactionPsp, setTransactionPsp] = React.useState<Psp | undefined>();
   const dispatch = useIODispatch();
-  const route = useRoute<WalletTransactionDetailsScreenProps>();
+  const route = useRoute<PaymentsTransactionDetailsScreenProps>();
   const { transactionId } = route.params;
   const transactionDetailsPot = useIOSelector(
     walletTransactionDetailsPotSelector
@@ -58,7 +57,7 @@ const WalletTransactionDetailsScreen = () => {
   const transactionDetails = pot.toUndefined(transactionDetailsPot);
 
   useOnFirstRender(() => {
-    dispatch(walletTransactionDetailsGet.request({ transactionId }));
+    dispatch(getPaymentsTransactionDetailsAction.request({ transactionId }));
   });
 
   React.useEffect(() => {
@@ -76,7 +75,9 @@ const WalletTransactionDetailsScreen = () => {
 
   return (
     <RNavScreenWithLargeHeader
-      title={I18n.t("transaction.details.title")}
+      title={{
+        label: I18n.t("transaction.details.title")
+      }}
       contextualHelp={emptyContextualHelp}
       faqCategories={["wallet_transaction"]}
       headerActionsProp={{ showHelp: true }}
@@ -100,4 +101,4 @@ const WalletTransactionDetailsScreen = () => {
   );
 };
 
-export default WalletTransactionDetailsScreen;
+export { PaymentsTransactionDetailsScreen };
diff --git a/ts/features/walletV3/transaction/screens/WalletTransactionOperationDetails.tsx b/ts/features/payments/transaction/screens/PaymentsTransactionOperationDetails.tsx
similarity index 92%
rename from ts/features/walletV3/transaction/screens/WalletTransactionOperationDetails.tsx
rename to ts/features/payments/transaction/screens/PaymentsTransactionOperationDetails.tsx
index 92a1db7ab6d..9bb413b92c2 100644
--- a/ts/features/walletV3/transaction/screens/WalletTransactionOperationDetails.tsx
+++ b/ts/features/payments/transaction/screens/PaymentsTransactionOperationDetails.tsx
@@ -7,8 +7,7 @@ import {
   ListItemInfo
 } from "@pagopa/io-app-design-system";
 import { RouteProp, useRoute } from "@react-navigation/native";
-
-import { WalletTransactionParamsList } from "../navigation/navigator";
+import { PaymentsTransactionParamsList } from "../navigation/params";
 import { Dettaglio } from "../../../../../definitions/pagopa/Dettaglio";
 import { formatNumberCentsToAmount } from "../../../../utils/stringBuilder";
 import { cleanTransactionDescription } from "../../../../utils/payment";
@@ -22,15 +21,15 @@ const styles = StyleSheet.create({
   }
 });
 
-export type WalletTransactionOperationDetailsScreenParams = {
+export type PaymentsTransactionOperationDetailsScreenParams = {
   operationName: string;
   operationSubject: string;
   operationDetails: Dettaglio;
 };
 
 export type WalletTransactionOperationDetailsScreenProps = RouteProp<
-  WalletTransactionParamsList,
-  "WALLET_TRANSACTION_OPERATION_DETAILS"
+  PaymentsTransactionParamsList,
+  "PAYMENT_TRANSACTION_OPERATION_DETAILS"
 >;
 
 const WalletTransactionOperationDetailsScreen = () => {
@@ -58,7 +57,9 @@ const WalletTransactionOperationDetailsScreen = () => {
 
   return (
     <RNavScreenWithLargeHeader
-      title={cleanTransactionDescription(operationName)}
+      title={{
+        label: cleanTransactionDescription(operationName)
+      }}
     >
       <ScrollView style={styles.scrollViewContainer}>
         {operationDetails.importo && (
diff --git a/ts/features/payments/transaction/store/actions/index.ts b/ts/features/payments/transaction/store/actions/index.ts
new file mode 100644
index 00000000000..ec338ef40c5
--- /dev/null
+++ b/ts/features/payments/transaction/store/actions/index.ts
@@ -0,0 +1,14 @@
+import { ActionType, createAsyncAction } from "typesafe-actions";
+import { NetworkError } from "../../../../../utils/errors";
+import { Transaction } from "../../../../../types/pagopa";
+
+export const getPaymentsTransactionDetailsAction = createAsyncAction(
+  "PAYMENTS_TRANSACTION_DETAILS_REQUEST",
+  "PAYMENTS_TRANSACTION_DETAILS_SUCCESS",
+  "PAYMENTS_TRANSACTION_DETAILS_FAILURE",
+  "PAYMENTS_TRANSACTION_DETAILS_CANCEL"
+)<{ transactionId: number }, Transaction, NetworkError, void>();
+
+export type PaymentsTransactionActions = ActionType<
+  typeof getPaymentsTransactionDetailsAction
+>;
diff --git a/ts/features/payments/transaction/store/reducers/index.ts b/ts/features/payments/transaction/store/reducers/index.ts
new file mode 100644
index 00000000000..df3b422f959
--- /dev/null
+++ b/ts/features/payments/transaction/store/reducers/index.ts
@@ -0,0 +1,47 @@
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { getType } from "typesafe-actions";
+import { Action } from "../../../../../store/actions/types";
+import { NetworkError } from "../../../../../utils/errors";
+
+import { Transaction } from "../../../../../types/pagopa";
+import { getPaymentsTransactionDetailsAction } from "../actions";
+
+export type PaymentsTransactionState = {
+  details: pot.Pot<Transaction, NetworkError>;
+};
+
+const INITIAL_STATE: PaymentsTransactionState = {
+  details: pot.noneLoading
+};
+
+const reducer = (
+  state: PaymentsTransactionState = INITIAL_STATE,
+  action: Action
+): PaymentsTransactionState => {
+  switch (action.type) {
+    // GET TRANSACTION DETAILS
+    case getType(getPaymentsTransactionDetailsAction.request):
+      return {
+        ...state,
+        details: pot.toLoading(pot.none)
+      };
+    case getType(getPaymentsTransactionDetailsAction.success):
+      return {
+        ...state,
+        details: pot.some(action.payload)
+      };
+    case getType(getPaymentsTransactionDetailsAction.failure):
+      return {
+        ...state,
+        details: pot.toError(state.details, action.payload)
+      };
+    case getType(getPaymentsTransactionDetailsAction.cancel):
+      return {
+        ...state,
+        details: pot.none
+      };
+  }
+  return state;
+};
+
+export default reducer;
diff --git a/ts/features/payments/transaction/store/selectors/index.ts b/ts/features/payments/transaction/store/selectors/index.ts
new file mode 100644
index 00000000000..a1876232910
--- /dev/null
+++ b/ts/features/payments/transaction/store/selectors/index.ts
@@ -0,0 +1,7 @@
+import { GlobalState } from "../../../../../store/reducers/types";
+
+const walletTransactionSelector = (state: GlobalState) =>
+  state.features.payments.transaction;
+
+export const walletTransactionDetailsPotSelector = (state: GlobalState) =>
+  walletTransactionSelector(state).details;
diff --git a/ts/features/payments/wallet/components/PaymentWalletCard.tsx b/ts/features/payments/wallet/components/PaymentWalletCard.tsx
new file mode 100644
index 00000000000..0e827d01fff
--- /dev/null
+++ b/ts/features/payments/wallet/components/PaymentWalletCard.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { Pressable } from "react-native";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import { withWalletCardBaseComponent } from "../../../newWallet/components/WalletCardBaseComponent";
+import {
+  PaymentCard,
+  PaymentCardProps
+} from "../../common/components/PaymentCard";
+import { PaymentsMethodDetailsRoutes } from "../../details/navigation/routes";
+
+export type PaymentWalletCardProps = PaymentCardProps & {
+  walletId: string;
+};
+
+const WrappedPaymentCard = (props: PaymentWalletCardProps) => {
+  const navigation = useIONavigation();
+
+  const { walletId, ...cardProps } = props;
+
+  const handleOnPress = () => {
+    navigation.navigate(
+      PaymentsMethodDetailsRoutes.PAYMENT_METHOD_DETAILS_NAVIGATOR,
+      {
+        screen: PaymentsMethodDetailsRoutes.PAYMENT_METHOD_DETAILS_SCREEN,
+        params: {
+          walletId
+        }
+      }
+    );
+  };
+
+  return (
+    <Pressable onPress={handleOnPress}>
+      <PaymentCard {...cardProps} />
+    </Pressable>
+  );
+};
+
+/**
+ * Wrapper component which adds wallet capabilites to the PaymentCard component
+ */
+export const PaymentWalletCard =
+  withWalletCardBaseComponent(WrappedPaymentCard);
diff --git a/ts/features/payments/wallet/saga/__tests__/handleGetPaymentsWalletUserMethods.test.ts b/ts/features/payments/wallet/saga/__tests__/handleGetPaymentsWalletUserMethods.test.ts
new file mode 100644
index 00000000000..fa0950c8904
--- /dev/null
+++ b/ts/features/payments/wallet/saga/__tests__/handleGetPaymentsWalletUserMethods.test.ts
@@ -0,0 +1,128 @@
+import * as E from "fp-ts/lib/Either";
+import { testSaga } from "redux-saga-test-plan";
+import { getType } from "typesafe-actions";
+import { WalletStatusEnum } from "../../../../../../definitions/pagopa/walletv3/WalletStatus";
+import { Wallets } from "../../../../../../definitions/pagopa/walletv3/Wallets";
+import { withRefreshApiCall } from "../../../../fastLogin/saga/utils";
+import { getPaymentsWalletUserMethods } from "../../store/actions";
+import { handleGetPaymentsWalletUserMethods } from "../handleGetPaymentsWalletUserMethods";
+import { BrandEnum } from "../../../../../../definitions/pagopa/walletv3/WalletInfoDetails";
+import { WalletCard } from "../../../../newWallet/types";
+import { walletAddCards } from "../../../../newWallet/store/actions/cards";
+import { getGenericError } from "../../../../../utils/errors";
+import { readablePrivacyReport } from "../../../../../utils/reporters";
+import { getDateFromExpiryDate } from "../../../../../utils/dates";
+
+describe("handleGetPaymentsWalletUserMethods", () => {
+  it(`should put ${getType(getPaymentsWalletUserMethods.success)} and ${getType(
+    walletAddCards
+  )} when response is success`, () => {
+    const T_WALLETID = "1234";
+    const T_HPAN = "0001";
+    const T_EXPIRE_DATE = new Date(2027, 10, 1).toDateString();
+    const mockGetWalletsByIdUser = jest.fn();
+    const getWalletsByIdUserResponse: Wallets = {
+      wallets: [
+        {
+          walletId: T_WALLETID,
+          creationDate: new Date(),
+          paymentMethodId: "paymentMethodId",
+          paymentMethodAsset: "paymentMethodAsset",
+          applications: [],
+          status: WalletStatusEnum.CREATED,
+          updateDate: new Date(),
+          details: {
+            type: "CREDITCARD",
+            lastFourDigits: T_HPAN,
+            expiryDate: T_EXPIRE_DATE,
+            brand: BrandEnum.VISA
+          }
+        }
+      ]
+    };
+    const cards: ReadonlyArray<WalletCard> = [
+      {
+        key: `method_${T_WALLETID}`,
+        type: "payment",
+        category: "payment",
+        walletId: T_WALLETID,
+        hpan: T_HPAN,
+        brand: BrandEnum.VISA,
+        expireDate: getDateFromExpiryDate(T_EXPIRE_DATE),
+        abiCode: undefined,
+        holderEmail: undefined,
+        holderPhone: undefined
+      }
+    ];
+
+    testSaga(
+      handleGetPaymentsWalletUserMethods,
+      mockGetWalletsByIdUser,
+      getPaymentsWalletUserMethods.request()
+    )
+      .next()
+      .call(
+        withRefreshApiCall,
+        mockGetWalletsByIdUser(),
+        getPaymentsWalletUserMethods.request()
+      )
+      .next(E.right({ status: 200, value: getWalletsByIdUserResponse }))
+      .put(walletAddCards(cards))
+      .next()
+      .put(getPaymentsWalletUserMethods.success(getWalletsByIdUserResponse))
+      .next()
+      .isDone();
+  });
+
+  it(`should put ${getType(
+    getPaymentsWalletUserMethods.failure
+  )} when response is not success`, () => {
+    const mockGetWalletsByIdUser = jest.fn();
+
+    testSaga(
+      handleGetPaymentsWalletUserMethods,
+      mockGetWalletsByIdUser,
+      getPaymentsWalletUserMethods.request()
+    )
+      .next()
+      .call(
+        withRefreshApiCall,
+        mockGetWalletsByIdUser(),
+        getPaymentsWalletUserMethods.request()
+      )
+      .next(E.right({ status: 400, value: undefined }))
+      .put(
+        getPaymentsWalletUserMethods.failure(
+          getGenericError(new Error(`Error: 400`))
+        )
+      )
+      .next()
+      .isDone();
+  });
+
+  it(`should put ${getType(
+    getPaymentsWalletUserMethods.failure
+  )} when getWalletsByIdUser encoders returns an error`, () => {
+    const mockGetWalletsByIdUser = jest.fn();
+
+    testSaga(
+      handleGetPaymentsWalletUserMethods,
+      mockGetWalletsByIdUser,
+      getPaymentsWalletUserMethods.request()
+    )
+      .next()
+      .call(
+        withRefreshApiCall,
+        mockGetWalletsByIdUser(),
+        getPaymentsWalletUserMethods.request()
+      )
+      .next(E.left([]))
+      .put(
+        getPaymentsWalletUserMethods.failure({
+          ...getGenericError(new Error(readablePrivacyReport([])))
+        })
+      )
+      .next()
+      .isDone();
+  });
+});
diff --git a/ts/features/payments/wallet/saga/handleGetPaymentsWalletUserMethods.ts b/ts/features/payments/wallet/saga/handleGetPaymentsWalletUserMethods.ts
new file mode 100644
index 00000000000..01490abcc5a
--- /dev/null
+++ b/ts/features/payments/wallet/saga/handleGetPaymentsWalletUserMethods.ts
@@ -0,0 +1,58 @@
+import * as E from "fp-ts/lib/Either";
+import { pipe } from "fp-ts/lib/function";
+import { call, put } from "typed-redux-saga/macro";
+import { ActionType } from "typesafe-actions";
+import { SagaCallReturnType } from "../../../../types/utils";
+import { getGenericError, getNetworkError } from "../../../../utils/errors";
+import { readablePrivacyReport } from "../../../../utils/reporters";
+import { withRefreshApiCall } from "../../../fastLogin/saga/utils";
+import { walletAddCards } from "../../../newWallet/store/actions/cards";
+import { WalletClient } from "../../common/api/client";
+import { mapWalletsToCards } from "../../common/utils/wallet";
+import { getPaymentsWalletUserMethods } from "../store/actions";
+
+export function* handleGetPaymentsWalletUserMethods(
+  getWalletsByIdUser: WalletClient["getWalletsByIdUser"],
+  action: ActionType<(typeof getPaymentsWalletUserMethods)["request"]>
+) {
+  const getWalletsByIdUserRequest = getWalletsByIdUser({});
+
+  try {
+    const getWalletsByIdUserResult = (yield* call(
+      withRefreshApiCall,
+      getWalletsByIdUserRequest,
+      action
+    )) as SagaCallReturnType<typeof getWalletsByIdUser>;
+
+    yield* pipe(
+      getWalletsByIdUserResult,
+      E.fold(
+        function* (error) {
+          yield* put(
+            getPaymentsWalletUserMethods.failure(
+              getGenericError(new Error(readablePrivacyReport(error)))
+            )
+          );
+        },
+        function* (res) {
+          if (res.status === 200) {
+            yield* put(
+              walletAddCards(mapWalletsToCards(res.value?.wallets || []))
+            );
+            yield* put(getPaymentsWalletUserMethods.success(res.value));
+          } else if (res.status === 404) {
+            yield* put(getPaymentsWalletUserMethods.success({ wallets: [] }));
+          } else {
+            yield* put(
+              getPaymentsWalletUserMethods.failure({
+                ...getGenericError(new Error(`Error: ${res.status}`))
+              })
+            );
+          }
+        }
+      )
+    );
+  } catch (e) {
+    yield* put(getPaymentsWalletUserMethods.failure({ ...getNetworkError(e) }));
+  }
+}
diff --git a/ts/features/payments/wallet/saga/index.ts b/ts/features/payments/wallet/saga/index.ts
new file mode 100644
index 00000000000..df0b90a7190
--- /dev/null
+++ b/ts/features/payments/wallet/saga/index.ts
@@ -0,0 +1,19 @@
+import { SagaIterator } from "redux-saga";
+import { takeLatest } from "typed-redux-saga/macro";
+import { WalletClient } from "../../common/api/client";
+import { getPaymentsWalletUserMethods } from "../store/actions";
+import { handleGetPaymentsWalletUserMethods } from "./handleGetPaymentsWalletUserMethods";
+
+/**
+ * Handle Wallet onboarding requests
+ * @param bearerToken
+ */
+export function* watchPaymentsWalletSaga(
+  walletClient: WalletClient
+): SagaIterator {
+  yield* takeLatest(
+    getPaymentsWalletUserMethods.request,
+    handleGetPaymentsWalletUserMethods,
+    walletClient.getWalletsByIdUser
+  );
+}
diff --git a/ts/features/payments/wallet/store/actions/index.ts b/ts/features/payments/wallet/store/actions/index.ts
new file mode 100644
index 00000000000..39f2c4e519f
--- /dev/null
+++ b/ts/features/payments/wallet/store/actions/index.ts
@@ -0,0 +1,13 @@
+import { ActionType, createAsyncAction } from "typesafe-actions";
+import { Wallets } from "../../../../../../definitions/pagopa/walletv3/Wallets";
+import { NetworkError } from "../../../../../utils/errors";
+
+export const getPaymentsWalletUserMethods = createAsyncAction(
+  "PAYMENTS_WALLET_GET_USER_METHODS_REQUEST",
+  "PAYMENTS_WALLET_GET_USER_METHODS_SUCCESS",
+  "PAYMENTS_WALLET_GET_USER_METHODS_FAILURE"
+)<void, Wallets, NetworkError>();
+
+export type PaymentsWalletActions = ActionType<
+  typeof getPaymentsWalletUserMethods
+>;
diff --git a/ts/features/payments/wallet/store/reducers/index.ts b/ts/features/payments/wallet/store/reducers/index.ts
new file mode 100644
index 00000000000..0271e196e58
--- /dev/null
+++ b/ts/features/payments/wallet/store/reducers/index.ts
@@ -0,0 +1,40 @@
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { getType } from "typesafe-actions";
+import { Action } from "../../../../../store/actions/types";
+import { NetworkError } from "../../../../../utils/errors";
+import { getPaymentsWalletUserMethods } from "../actions";
+import { Wallets } from "../../../../../../definitions/pagopa/walletv3/Wallets";
+
+export type PaymentsWalletState = {
+  userMethods: pot.Pot<Wallets, NetworkError>;
+};
+
+const INITIAL_STATE: PaymentsWalletState = {
+  userMethods: pot.none
+};
+
+const paymentsWalletReducer = (
+  state: PaymentsWalletState = INITIAL_STATE,
+  action: Action
+): PaymentsWalletState => {
+  switch (action.type) {
+    case getType(getPaymentsWalletUserMethods.request):
+      return {
+        ...state,
+        userMethods: pot.toLoading(pot.none)
+      };
+    case getType(getPaymentsWalletUserMethods.success):
+      return {
+        ...state,
+        userMethods: pot.some(action.payload)
+      };
+    case getType(getPaymentsWalletUserMethods.failure):
+      return {
+        ...state,
+        userMethods: pot.toError(state.userMethods, action.payload)
+      };
+  }
+  return state;
+};
+
+export default paymentsWalletReducer;
diff --git a/ts/features/pn/analytics/index.ts b/ts/features/pn/analytics/index.ts
index b3a1c4ccaa6..e8fbfbfe2dc 100644
--- a/ts/features/pn/analytics/index.ts
+++ b/ts/features/pn/analytics/index.ts
@@ -4,12 +4,12 @@ import * as O from "fp-ts/lib/Option";
 import { mixpanelTrack } from "../../../mixpanel";
 import { PNMessage } from "../../pn/store/types/types";
 import { NotificationStatusHistoryElement } from "../../../../definitions/pn/NotificationStatusHistoryElement";
-import { UIAttachment } from "../../messages/types";
 import {
   booleanToYesNo,
   buildEventProperties,
   numberToYesNoOnThreshold
 } from "../../../utils/analytics";
+import { ThirdPartyAttachment } from "../../../../definitions/backend/ThirdPartyAttachment";
 
 export interface TrackPNPaymentStatus {
   paymentCount: number;
@@ -180,7 +180,7 @@ export function trackPNNotificationLoadSuccess(pnMessage: PNMessage) {
           buildEventProperties("TECH", undefined, {
             NOTIFICATION_LAST_STATUS: status,
             HAS_ATTACHMENTS: pipe(
-              pnMessage.attachments as Array<UIAttachment>,
+              pnMessage.attachments as Array<ThirdPartyAttachment>,
               O.fromNullable,
               O.map(A.isNonEmpty),
               O.getOrElse(() => false)
diff --git a/ts/features/pn/components/F24ListBottomSheetLink.tsx b/ts/features/pn/components/F24ListBottomSheetLink.tsx
new file mode 100644
index 00000000000..408fb84a712
--- /dev/null
+++ b/ts/features/pn/components/F24ListBottomSheetLink.tsx
@@ -0,0 +1,70 @@
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+import { ButtonLink } from "@pagopa/io-app-design-system";
+import { ThirdPartyAttachment } from "../../../../definitions/backend/ThirdPartyAttachment";
+import { useIOBottomSheetAutoresizableModal } from "../../../utils/hooks/bottomSheet";
+import I18n from "../../../i18n";
+import { MessageDetailsAttachmentItem } from "../../messages/components/MessageDetail/MessageDetailsAttachmentItem";
+import { UIMessageId } from "../../messages/types";
+import { trackPNShowF24 } from "../analytics";
+import { useIODispatch } from "../../../store/hooks";
+import { cancelPreviousAttachmentDownload } from "../../messages/store/actions";
+
+const styles = StyleSheet.create({
+  buttonLinkContainer: {
+    justifyContent: "center",
+    alignSelf: "center"
+  }
+});
+
+type F24ListBottomSheetLinkProps = {
+  f24List: ReadonlyArray<ThirdPartyAttachment>;
+  messageId: UIMessageId;
+};
+
+export const F24ListBottomSheetLink = ({
+  f24List,
+  messageId
+}: F24ListBottomSheetLinkProps) => {
+  // The empty footer is needed in order for the internal scroll view to properly compute
+  // its bottom space when the bottom sheet opens filling the entire view. Without it, the
+  // scroll bottom stops at the device bottom border, not respecting any safe area margins
+  const dispatch = useIODispatch();
+  const { present, bottomSheet, dismiss } = useIOBottomSheetAutoresizableModal(
+    {
+      component: (
+        <>
+          {f24List.map((f24Attachment, index) => (
+            <MessageDetailsAttachmentItem
+              attachment={f24Attachment}
+              bottomSpacer={index + 1 < f24List.length}
+              isPN
+              key={`MessageF24_${index}`}
+              messageId={messageId}
+              onPreNavigate={() => {
+                dismiss();
+              }}
+            />
+          ))}
+        </>
+      ),
+      title: I18n.t("features.pn.details.f24Section.bottomSheet.title"),
+      footer: <View></View>,
+      onDismiss: () => dispatch(cancelPreviousAttachmentDownload())
+    },
+    100
+  );
+  return (
+    <View style={styles.buttonLinkContainer}>
+      <ButtonLink
+        onPress={() => {
+          trackPNShowF24();
+          present();
+        }}
+        label={I18n.t("features.pn.details.f24Section.showAll")}
+        accessibilityLabel={I18n.t("features.pn.details.f24Section.showAll")}
+      />
+      {bottomSheet}
+    </View>
+  );
+};
diff --git a/ts/features/pn/components/F24Section.tsx b/ts/features/pn/components/F24Section.tsx
new file mode 100644
index 00000000000..27327d7accf
--- /dev/null
+++ b/ts/features/pn/components/F24Section.tsx
@@ -0,0 +1,58 @@
+import * as React from "react";
+import { Body, ListItemHeader, VSpacer } from "@pagopa/io-app-design-system";
+import I18n from "../../../i18n";
+import { UIMessageId } from "../../messages/types";
+import { useIOSelector } from "../../../store/hooks";
+import { thirdPartyMessageAttachments } from "../../messages/store/reducers/thirdPartyById";
+import { ATTACHMENT_CATEGORY } from "../../messages/types/attachmentCategory";
+import { MessageDetailsAttachmentItem } from "../../messages/components/MessageDetail/MessageDetailsAttachmentItem";
+import { ServiceId } from "../../../../definitions/backend/ServiceId";
+import { F24ListBottomSheetLink } from "./F24ListBottomSheetLink";
+
+type F24SectionProps = {
+  isCancelled?: boolean;
+  messageId: UIMessageId;
+  serviceId: ServiceId;
+};
+
+export const F24Section = ({
+  isCancelled = false,
+  messageId,
+  serviceId
+}: F24SectionProps) => {
+  const attachments = useIOSelector(state =>
+    thirdPartyMessageAttachments(state, messageId)
+  );
+  const f24s = attachments.filter(
+    attachment => attachment.category === ATTACHMENT_CATEGORY.F24
+  );
+  const f24Count = f24s.length;
+  if (isCancelled || f24Count === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <ListItemHeader
+        label={I18n.t("features.pn.details.f24Section.title")}
+        iconName={"folder"}
+      />
+      <Body color="grey-850">
+        {I18n.t("features.pn.details.f24Section.description")}
+      </Body>
+      <VSpacer size={24} />
+      {f24Count === 1 && (
+        <MessageDetailsAttachmentItem
+          attachment={f24s[0]}
+          messageId={messageId}
+          serviceId={serviceId}
+          isPN
+        />
+      )}
+      {f24Count > 1 && (
+        <F24ListBottomSheetLink f24List={f24s} messageId={messageId} />
+      )}
+      <VSpacer size={16} />
+    </>
+  );
+};
diff --git a/ts/features/pn/components/LegacyMessageAttachments.tsx b/ts/features/pn/components/LegacyMessageAttachments.tsx
new file mode 100644
index 00000000000..ef401eccc0b
--- /dev/null
+++ b/ts/features/pn/components/LegacyMessageAttachments.tsx
@@ -0,0 +1,85 @@
+import React from "react";
+import { View } from "react-native";
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { VSpacer, WithTestID } from "@pagopa/io-app-design-system";
+import { ContentTypeValues } from "../../messages/types/contentType";
+import {
+  LegacyModuleAttachment,
+  LegacyModuleAttachmentProps
+} from "../../messages/components/MessageDetail/LegacyModuleAttachment";
+import { useLegacyAttachmentDownload } from "../../messages/hooks/useLegacyAttachmentDownload";
+import { ThirdPartyAttachment } from "../../../../definitions/backend/ThirdPartyAttachment";
+import { UIMessageId } from "../../messages/types";
+import {
+  attachmentContentType,
+  attachmentDisplayName
+} from "../../messages/store/reducers/transformers";
+
+type PartialProps = {
+  downloadAttachmentBeforePreview?: boolean;
+  openPreview: (attachment: ThirdPartyAttachment) => void;
+};
+
+type LegacyMessageAttachmentProps = {
+  attachment: ThirdPartyAttachment;
+  messageId: UIMessageId;
+} & PartialProps;
+
+type LegacyMessageAttachmentsProps = WithTestID<
+  {
+    attachments: ReadonlyArray<ThirdPartyAttachment>;
+    messageId: UIMessageId;
+  } & PartialProps
+>;
+
+const getFormatByContentType = (
+  contentType: string
+): LegacyModuleAttachmentProps["format"] => {
+  switch (contentType) {
+    case ContentTypeValues.applicationPdf:
+      return "pdf";
+    default:
+      return "doc";
+  }
+};
+
+const LegacyAttachmentItem = ({
+  attachment,
+  openPreview,
+  downloadAttachmentBeforePreview,
+  messageId
+}: LegacyMessageAttachmentProps) => {
+  const { downloadPot, onAttachmentSelect } = useLegacyAttachmentDownload(
+    attachment,
+    messageId,
+    downloadAttachmentBeforePreview,
+    openPreview
+  );
+
+  const name = attachmentDisplayName(attachment);
+  const mimeType = attachmentContentType(attachment);
+  return (
+    <LegacyModuleAttachment
+      testID="message-attachment"
+      format={getFormatByContentType(mimeType)}
+      title={name}
+      isFetching={pot.isLoading(downloadPot)}
+      onPress={onAttachmentSelect}
+    />
+  );
+};
+
+export const LegacyMessageAttachments = ({
+  attachments = [],
+  testID,
+  ...rest
+}: LegacyMessageAttachmentsProps) => (
+  <View testID={testID}>
+    {attachments.map((attachment, index) => (
+      <React.Fragment key={index}>
+        <LegacyAttachmentItem {...rest} attachment={attachment} />
+        {index < attachments.length - 1 && <VSpacer size={8} />}
+      </React.Fragment>
+    ))}
+  </View>
+);
diff --git a/ts/features/pn/components/LegacyMessageDetails.tsx b/ts/features/pn/components/LegacyMessageDetails.tsx
index 78d59087e5e..063aea1d982 100644
--- a/ts/features/pn/components/LegacyMessageDetails.tsx
+++ b/ts/features/pn/components/LegacyMessageDetails.tsx
@@ -15,10 +15,9 @@ import { H5 } from "../../../components/core/typography/H5";
 import I18n from "../../../i18n";
 import { useIOSelector } from "../../../store/hooks";
 import { pnFrontendUrlSelector } from "../../../store/reducers/backendStatus";
-import { UIAttachment, UIMessageId } from "../../messages/types";
+import { UIMessageId } from "../../messages/types";
 import { clipboardSetStringWithFeedback } from "../../../utils/clipboard";
-import { LegacyMessageAttachments } from "../../messages/components/LegacyMessageAttachments";
-import NavigationService from "../../../navigation/NavigationService";
+import { LegacyMessageAttachments } from "../../messages/components/MessageDetail/LegacyMessageAttachments";
 import PN_ROUTES from "../navigation/routes";
 import { PNMessage } from "../store/types/types";
 import { NotificationPaymentInfo } from "../../../../definitions/pn/NotificationPaymentInfo";
@@ -33,14 +32,17 @@ import {
 import { LevelEnum } from "../../../../definitions/content/SectionStatus";
 import { ATTACHMENT_CATEGORY } from "../../messages/types/attachmentCategory";
 import { maxVisiblePaymentCountGenerator } from "../utils";
+import { ThirdPartyAttachment } from "../../../../definitions/backend/ThirdPartyAttachment";
+import { MESSAGES_ROUTES } from "../../messages/navigation/routes";
+import { useIONavigation } from "../../../navigation/params/AppParamsList";
 import { LegacyMessageDetailsContent } from "./LegacyMessageDetailsContent";
 import { MessageDetailsHeader } from "./MessageDetailsHeader";
 import { MessageDetailsSection } from "./MessageDetailsSection";
 import { MessageTimeline } from "./MessageTimeline";
 import { MessageTimelineCTA } from "./MessageTimelineCTA";
-import { MessageF24 } from "./MessageF24";
-import { MessagePayments } from "./MessagePayments";
-import { MessageFooter } from "./MessageFooter";
+import { LegacyMessageF24 } from "./LegacyMessageF24";
+import { LegacyMessageFooter } from "./LegacyMessageFooter";
+import { LegacyMessagePayments } from "./LegacyMessagePayments";
 import { MessagePaymentBottomSheet } from "./MessagePaymentBottomSheet";
 
 type Props = Readonly<{
@@ -59,11 +61,12 @@ export const LegacyMessageDetails = ({
   const viewRef = createRef<View>();
   const presentPaymentsBottomSheetRef = useRef<() => void>();
   const frontendUrl = useIOSelector(pnFrontendUrlSelector);
+  const navigation = useIONavigation();
 
   const partitionedAttachments = pipe(
     message.attachments,
     O.fromNullable,
-    O.getOrElse<ReadonlyArray<UIAttachment>>(() => []),
+    O.getOrElse<ReadonlyArray<ThirdPartyAttachment>>(() => []),
     RA.partition(attachment => attachment.category === ATTACHMENT_CATEGORY.F24)
   );
 
@@ -76,15 +79,20 @@ export const LegacyMessageDetails = ({
     : undefined;
 
   const openAttachment = useCallback(
-    (attachment: UIAttachment) => {
+    (attachment: ThirdPartyAttachment) => {
       trackPNAttachmentOpening(attachment.category);
-      NavigationService.navigate(PN_ROUTES.MESSAGE_ATTACHMENT, {
-        messageId,
-        attachmentId: attachment.id,
-        category: attachment.category
+      navigation.navigate(MESSAGES_ROUTES.MESSAGES_NAVIGATOR, {
+        screen: PN_ROUTES.MAIN,
+        params: {
+          screen: PN_ROUTES.MESSAGE_ATTACHMENT,
+          params: {
+            attachmentId: attachment.id,
+            messageId
+          }
+        }
       });
     },
-    [messageId]
+    [messageId, navigation]
   );
 
   const maxVisiblePaymentCount = maxVisiblePaymentCountGenerator();
@@ -100,11 +108,11 @@ export const LegacyMessageDetails = ({
         ref={scrollViewRef}
       >
         {service && <MessageDetailsHeader service={service} />}
-        <VSpacer />
+        <VSpacer size={16} />
         <LegacyMessageDetailsContent message={message} />
         {isCancelled && (
           <>
-            <VSpacer />
+            <VSpacer size={16} />
             <DSFullWidthComponent>
               <StatusContent
                 accessibilityLabel={I18n.t(
@@ -129,12 +137,13 @@ export const LegacyMessageDetails = ({
             <LegacyMessageAttachments
               disabled={isCancelled}
               attachments={attachmentList}
+              messageId={messageId}
               downloadAttachmentBeforePreview={true}
               openPreview={openAttachment}
             />
           </MessageDetailsSection>
         )}
-        <MessagePayments
+        <LegacyMessagePayments
           messageId={messageId}
           isCancelled={isCancelled}
           payments={payments}
@@ -145,7 +154,11 @@ export const LegacyMessageDetails = ({
 
         {!isCancelled && RA.isNonEmpty(f24List) ? (
           <>
-            <MessageF24 attachments={f24List} openPreview={openAttachment} />
+            <LegacyMessageF24
+              attachments={f24List}
+              messageId={messageId}
+              openPreview={openAttachment}
+            />
             <VSpacer size={24} />
           </>
         ) : null}
@@ -181,7 +194,7 @@ export const LegacyMessageDetails = ({
         />
       )}
 
-      <MessageFooter
+      <LegacyMessageFooter
         messageId={messageId}
         payments={payments}
         maxVisiblePaymentCount={maxVisiblePaymentCount}
diff --git a/ts/features/pn/components/MessageF24.tsx b/ts/features/pn/components/LegacyMessageF24.tsx
similarity index 64%
rename from ts/features/pn/components/MessageF24.tsx
rename to ts/features/pn/components/LegacyMessageF24.tsx
index 04a5b07a71a..9dffc479a34 100644
--- a/ts/features/pn/components/MessageF24.tsx
+++ b/ts/features/pn/components/LegacyMessageF24.tsx
@@ -8,25 +8,32 @@ import {
 } from "@pagopa/io-app-design-system";
 import I18n from "../../../i18n";
 import { trackPNShowF24 } from "../analytics";
-import { UIAttachment } from "../../messages/types";
 import { useF24BottomSheet } from "../hooks/useF24BottomSheet";
-import { MessageAttachments } from "../../messages/components/MessageAttachments";
+import { ThirdPartyAttachment } from "../../../../definitions/backend/ThirdPartyAttachment";
+import { UIMessageId } from "../../messages/types";
+import { LegacyMessageAttachments } from "./LegacyMessageAttachments";
 import { MessageDetailsSection } from "./MessageDetailsSection";
 
 type Props = {
-  attachments: ReadonlyArray<UIAttachment>;
-  openPreview: (attachment: UIAttachment) => void;
+  attachments: ReadonlyArray<ThirdPartyAttachment>;
+  messageId: UIMessageId;
+  openPreview: (attachment: ThirdPartyAttachment) => void;
 };
 
-const MessageF24Content = ({ attachments, openPreview }: Props) => {
-  const { present, bottomSheet } = useF24BottomSheet(attachments, openPreview);
+const MessageF24Content = ({ attachments, messageId, openPreview }: Props) => {
+  const { present, bottomSheet } = useF24BottomSheet(
+    attachments,
+    messageId,
+    openPreview
+  );
 
   if (attachments.length === 1) {
     return (
-      <MessageAttachments
+      <LegacyMessageAttachments
         testID="f24-list-container"
         attachments={attachments.slice(0, 1)}
         downloadAttachmentBeforePreview={true}
+        messageId={messageId}
         openPreview={openPreview}
       />
     );
@@ -51,16 +58,16 @@ const MessageF24Content = ({ attachments, openPreview }: Props) => {
   );
 };
 
-export const MessageF24 = (props: Props) => (
+export const LegacyMessageF24 = (props: Props) => (
   <MessageDetailsSection
     title={I18n.t("features.pn.details.f24Section.title")}
     testID={"pn-f24-section"}
   >
-    <VSpacer />
+    <VSpacer size={16} />
     <Body color="bluegreyDark">
       {I18n.t("features.pn.details.f24Section.description")}
     </Body>
-    <VSpacer />
+    <VSpacer size={16} />
     <MessageF24Content {...props} />
   </MessageDetailsSection>
 );
diff --git a/ts/features/pn/components/LegacyMessageFooter.tsx b/ts/features/pn/components/LegacyMessageFooter.tsx
new file mode 100644
index 00000000000..87dae5d005a
--- /dev/null
+++ b/ts/features/pn/components/LegacyMessageFooter.tsx
@@ -0,0 +1,101 @@
+import React, { MutableRefObject, useCallback } from "react";
+import { StyleSheet, View } from "react-native";
+import {
+  ButtonSolid,
+  IOStyles,
+  useIOToast
+} from "@pagopa/io-app-design-system";
+import I18n from "i18n-js";
+import { useDispatch } from "react-redux";
+import { NotificationPaymentInfo } from "../../../../definitions/pn/NotificationPaymentInfo";
+import { useIOSelector } from "../../../store/hooks";
+import { UIMessageId } from "../../messages/types";
+import { canNavigateToPaymentFromMessageSelector } from "../../messages/store/reducers/payments";
+import variables from "../../../theme/variables";
+import { getRptIdStringFromPayment } from "../utils/rptId";
+import { trackPNShowAllPayments } from "../analytics";
+import { initializeAndNavigateToWalletForPayment } from "../../messages/utils";
+import { paymentsButtonStateSelector } from "../store/reducers/payments";
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "hidden",
+    marginTop: -variables.footerShadowOffsetHeight,
+    paddingTop: variables.footerShadowOffsetHeight
+  }
+});
+
+type LegacyMessageFooterProps = {
+  messageId: UIMessageId;
+  payments: ReadonlyArray<NotificationPaymentInfo> | undefined;
+  maxVisiblePaymentCount: number;
+  isCancelled: boolean;
+  presentPaymentsBottomSheetRef: MutableRefObject<(() => void) | undefined>;
+};
+
+export const LegacyMessageFooter = ({
+  messageId,
+  payments,
+  maxVisiblePaymentCount,
+  isCancelled,
+  presentPaymentsBottomSheetRef
+}: LegacyMessageFooterProps) => {
+  const buttonState = useIOSelector(state =>
+    paymentsButtonStateSelector(
+      state,
+      messageId,
+      payments,
+      maxVisiblePaymentCount
+    )
+  );
+  const dispatch = useDispatch();
+  const toast = useIOToast();
+  const canNavigateToPayment = useIOSelector(state =>
+    canNavigateToPaymentFromMessageSelector(state)
+  );
+  const onFooterPressCallback = useCallback(() => {
+    if (payments?.length === 1) {
+      const firstPayment = payments[0];
+      const paymentId = getRptIdStringFromPayment(firstPayment);
+      initializeAndNavigateToWalletForPayment(
+        messageId,
+        paymentId,
+        false,
+        undefined,
+        canNavigateToPayment,
+        dispatch,
+        true,
+        () => toast.error(I18n.t("genericError"))
+      );
+    } else {
+      trackPNShowAllPayments();
+      presentPaymentsBottomSheetRef.current?.();
+    }
+  }, [
+    canNavigateToPayment,
+    dispatch,
+    messageId,
+    payments,
+    presentPaymentsBottomSheetRef,
+    toast
+  ]);
+  if (isCancelled || buttonState === "hidden") {
+    return null;
+  }
+  const isLoading = buttonState === "visibleLoading";
+  return (
+    <View style={styles.container}>
+      <View style={IOStyles.footer}>
+        <ButtonSolid
+          disabled={isLoading}
+          fullWidth={true}
+          loading={isLoading}
+          color="primary"
+          label={I18n.t("wallet.continue")}
+          onPress={onFooterPressCallback}
+          accessibilityLabel={I18n.t("wallet.continue")}
+        />
+      </View>
+    </View>
+  );
+};
diff --git a/ts/features/pn/components/LegacyMessagePayments.tsx b/ts/features/pn/components/LegacyMessagePayments.tsx
new file mode 100644
index 00000000000..8d4d0283d78
--- /dev/null
+++ b/ts/features/pn/components/LegacyMessagePayments.tsx
@@ -0,0 +1,224 @@
+import { pipe } from "fp-ts/lib/function";
+import * as RA from "fp-ts/lib/ReadonlyArray";
+import * as O from "fp-ts/lib/Option";
+import React, { MutableRefObject } from "react";
+import { StyleSheet, View } from "react-native";
+import I18n from "i18n-js";
+import {
+  ButtonLink,
+  ModulePaymentNotice,
+  VSpacer
+} from "@pagopa/io-app-design-system";
+import { CommonActions, useNavigation } from "@react-navigation/native";
+import Placeholder from "rn-placeholder";
+import { getBadgeTextByPaymentNoticeStatus } from "../../messages/utils/strings";
+import { NotificationPaymentInfo } from "../../../../definitions/pn/NotificationPaymentInfo";
+import { InfoBox } from "../../../components/box/InfoBox";
+import { H5 } from "../../../components/core/typography/H5";
+import { UIMessageId } from "../../messages/types";
+import { useIOSelector } from "../../../store/hooks";
+import { paymentsButtonStateSelector } from "../store/reducers/payments";
+import { trackPNShowAllPayments } from "../analytics";
+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 { MessageDetailsSection } from "./MessageDetailsSection";
+
+const styles = StyleSheet.create({
+  morePaymentsSkeletonContainer: {
+    flex: 1,
+    alignItems: "center"
+  },
+  morePaymentsLinkContainer: {
+    alignSelf: "center"
+  }
+});
+
+type LegacyMessagePaymentsProps = {
+  messageId: UIMessageId;
+  isCancelled: boolean;
+  payments: ReadonlyArray<NotificationPaymentInfo> | undefined;
+  completedPaymentNoticeCodes: ReadonlyArray<string> | undefined;
+  maxVisiblePaymentCount: number;
+  presentPaymentsBottomSheetRef: MutableRefObject<(() => void) | undefined>;
+};
+
+const readonlyArrayHasNoData = <T,>(maybeArray: ReadonlyArray<T> | undefined) =>
+  !maybeArray || RA.isEmpty(maybeArray);
+
+/*
+ * Skip the payment section when the notification is not cancelled but there are no payments to show
+ * or
+ * Skip the payment section when the notification is cancelled and there are no payments nor completed payments to show
+ */
+const paymentSectionShouldRenderNothing = (
+  isCancelled: boolean,
+  payments: ReadonlyArray<NotificationPaymentInfo> | undefined,
+  completedPaymentNoticeCodes: ReadonlyArray<string> | undefined
+) =>
+  (!isCancelled && readonlyArrayHasNoData(payments)) ||
+  (isCancelled &&
+    readonlyArrayHasNoData(payments) &&
+    readonlyArrayHasNoData(completedPaymentNoticeCodes));
+
+const generateNavigationToPaidPaymentScreenAction = (
+  noticeCode: string,
+  maybePayments: ReadonlyArray<NotificationPaymentInfo> | undefined
+) =>
+  pipe(
+    maybePayments,
+    O.fromNullable,
+    O.chain(payments =>
+      pipe(
+        payments,
+        RA.findFirst(payment => noticeCode === payment.noticeCode)
+      )
+    ),
+    O.fold(
+      () => undefined,
+      payment => payment.creditorTaxId
+    ),
+    maybeCreditorTaxId =>
+      CommonActions.navigate(MESSAGES_ROUTES.MESSAGES_NAVIGATOR, {
+        screen: PN_ROUTES.MAIN,
+        params: {
+          screen: PN_ROUTES.CANCELLED_MESSAGE_PAID_PAYMENT,
+          params: {
+            noticeCode,
+            creditorTaxId: maybeCreditorTaxId
+          }
+        }
+      })
+  );
+
+export const LegacyMessagePayments = ({
+  messageId,
+  isCancelled,
+  payments,
+  completedPaymentNoticeCodes,
+  maxVisiblePaymentCount,
+  presentPaymentsBottomSheetRef
+}: LegacyMessagePaymentsProps) => {
+  const navigation = useNavigation();
+  const morePaymentsLinkState = useIOSelector(state =>
+    paymentsButtonStateSelector(
+      state,
+      messageId,
+      payments,
+      maxVisiblePaymentCount
+    )
+  );
+  if (
+    paymentSectionShouldRenderNothing(
+      isCancelled,
+      payments,
+      completedPaymentNoticeCodes
+    )
+  ) {
+    return null;
+  }
+  if (isCancelled) {
+    return (
+      <MessageDetailsSection
+        title={I18n.t("features.pn.details.cancelledMessage.payments")}
+        testID={"PnCancelledPaymentSectionTitle"}
+      >
+        <VSpacer size={24} />
+        <InfoBox
+          alignedCentral={true}
+          iconSize={24}
+          iconColor={"bluegrey"}
+          testID={"PnCancelledPaymentInfoBox"}
+        >
+          <H5 weight={"Regular"}>
+            {I18n.t("features.pn.details.cancelledMessage.unpaidPayments")}
+          </H5>
+        </InfoBox>
+        {completedPaymentNoticeCodes &&
+          completedPaymentNoticeCodes.map(
+            (completedPaymentNoticeCode, index) => (
+              <View key={`MPN_${index}`}>
+                <VSpacer size={index > 0 ? 8 : 24} />
+                <ModulePaymentNotice
+                  title={I18n.t("features.pn.details.noticeCode")}
+                  subtitle={completedPaymentNoticeCode}
+                  onPress={() =>
+                    navigation.dispatch(
+                      generateNavigationToPaidPaymentScreenAction(
+                        completedPaymentNoticeCode,
+                        payments
+                      )
+                    )
+                  }
+                  paymentNoticeStatus={"paid"}
+                  badgeText={getBadgeTextByPaymentNoticeStatus("paid")}
+                  testID={"PnCancelledPaymentModulePaymentNotice"}
+                />
+              </View>
+            )
+          )}
+      </MessageDetailsSection>
+    );
+  }
+
+  const showMorePaymentsLink =
+    payments && payments.length > maxVisiblePaymentCount;
+  const morePaymentsLabel = payments
+    ? `${I18n.t("features.pn.details.paymentSection.morePayments")} (${
+        payments.length
+      })`
+    : "";
+  return (
+    <MessageDetailsSection
+      title={I18n.t("features.pn.details.paymentSection.title")}
+      iconName={"productPagoPA"}
+      testID={"PnPaymentSectionTitle"}
+    >
+      {payments && (
+        <>
+          {payments.slice(0, maxVisiblePaymentCount).map((payment, index) => {
+            const rptId = getRptIdStringFromPayment(payment);
+            return (
+              <MessagePaymentItem
+                index={index}
+                isPNPayment
+                key={`PM_${index}`}
+                messageId={messageId}
+                rptId={rptId}
+                noticeNumber={payment.noticeCode}
+              />
+            );
+          })}
+          {showMorePaymentsLink && (
+            <>
+              <VSpacer size={16} />
+              {morePaymentsLinkState === "visibleLoading" && (
+                <View style={styles.morePaymentsSkeletonContainer}>
+                  <Placeholder.Box
+                    animate="fade"
+                    radius={8}
+                    width={172}
+                    height={16}
+                  />
+                </View>
+              )}
+              {morePaymentsLinkState === "visibleEnabled" && (
+                <View style={styles.morePaymentsLinkContainer}>
+                  <ButtonLink
+                    accessibilityLabel={morePaymentsLabel}
+                    label={morePaymentsLabel}
+                    onPress={() => {
+                      trackPNShowAllPayments();
+                      presentPaymentsBottomSheetRef.current?.();
+                    }}
+                  />
+                </View>
+              )}
+            </>
+          )}
+        </>
+      )}
+    </MessageDetailsSection>
+  );
+};
diff --git a/ts/features/pn/components/MessageDetails.tsx b/ts/features/pn/components/MessageDetails.tsx
index bb5ce071485..90878cb9e82 100644
--- a/ts/features/pn/components/MessageDetails.tsx
+++ b/ts/features/pn/components/MessageDetails.tsx
@@ -1,59 +1,120 @@
-import React from "react";
-import { ScrollView, View } from "react-native";
-import { pipe } from "fp-ts/lib/function";
+import {
+  ContentWrapper,
+  IOStyles,
+  Tag,
+  VSpacer
+} from "@pagopa/io-app-design-system";
 import * as O from "fp-ts/lib/Option";
 import * as RA from "fp-ts/lib/ReadonlyArray";
 import * as SEP from "fp-ts/lib/Separated";
-import { HSpacer, IOStyles, Tag, VSpacer } from "@pagopa/io-app-design-system";
-import { ServicePublic } from "../../../../definitions/backend/ServicePublic";
-import { UIAttachment, UIMessageId } from "../../messages/types";
-import { PNMessage } from "../store/types/types";
+import { pipe } from "fp-ts/lib/function";
+import React, { useRef } from "react";
+import { ScrollView } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ServiceId } from "../../../../definitions/backend/ServiceId";
+import { ThirdPartyAttachment } from "../../../../definitions/backend/ThirdPartyAttachment";
 import { NotificationPaymentInfo } from "../../../../definitions/pn/NotificationPaymentInfo";
-import { MessageDetailHeader } from "../../messages/components/MessageDetail/MessageDetailHeader";
-import { ATTACHMENT_CATEGORY } from "../../messages/types/attachmentCategory";
 import I18n from "../../../i18n";
+import { MessageDetailsAttachments } from "../../messages/components/MessageDetail/MessageDetailsAttachments";
+import { MessageDetailsHeader } from "../../messages/components/MessageDetail/MessageDetailsHeader";
+import { MessageDetailsTagBox } from "../../messages/components/MessageDetail/MessageDetailsTagBox";
+import { UIMessageId } from "../../messages/types";
+import { ATTACHMENT_CATEGORY } from "../../messages/types/attachmentCategory";
+import { PNMessage } from "../store/types/types";
+import { maxVisiblePaymentCountGenerator } from "../utils";
+import { F24Section } from "./F24Section";
 import { MessageDetailsContent } from "./MessageDetailsContent";
+import { MessageFooter } from "./MessageFooter";
+import { MessageInfo } from "./MessageInfo";
+import { MessagePayments } from "./MessagePayments";
 
 type MessageDetailsProps = {
   message: PNMessage;
   messageId: UIMessageId;
-  service?: ServicePublic;
+  serviceId: ServiceId;
   payments?: ReadonlyArray<NotificationPaymentInfo>;
 };
 
-export const MessageDetails = ({ message, service }: MessageDetailsProps) => {
+export const MessageDetails = ({
+  message,
+  messageId,
+  payments,
+  serviceId
+}: MessageDetailsProps) => {
+  const presentPaymentsBottomSheetRef = useRef<() => void>();
+  const safeAreaInsets = useSafeAreaInsets();
   const partitionedAttachments = pipe(
     message.attachments,
     O.fromNullable,
-    O.getOrElse<ReadonlyArray<UIAttachment>>(() => []),
+    O.getOrElse<ReadonlyArray<ThirdPartyAttachment>>(() => []),
     RA.partition(attachment => attachment.category === ATTACHMENT_CATEGORY.F24)
   );
 
   const attachmentList = SEP.left(partitionedAttachments);
+  const maxVisiblePaymentCount = maxVisiblePaymentCountGenerator();
+
+  const isCancelled = message.isCancelled ?? false;
+  const completedPaymentNoticeCodes = isCancelled
+    ? message.completedPayments
+    : undefined;
 
   return (
-    <ScrollView>
-      <MessageDetailHeader
-        service={service}
-        sender={message.senderDenomination}
-        subject={message.subject}
-        createdAt={message.created_at}
-      >
-        <View style={IOStyles.row}>
-          <Tag
-            text={I18n.t("features.pn.details.badge.legalValue")}
-            variant="legalMessage"
-          />
+    <ScrollView
+      contentContainerStyle={{
+        paddingBottom: IOStyles.footer.paddingBottom + safeAreaInsets.bottom
+      }}
+    >
+      <ContentWrapper>
+        <MessageDetailsHeader
+          serviceId={serviceId}
+          subject={message.subject}
+          createdAt={message.created_at}
+        >
+          <MessageDetailsTagBox>
+            <Tag
+              text={I18n.t("features.pn.details.badge.legalValue")}
+              variant="legalMessage"
+            />
+          </MessageDetailsTagBox>
           {attachmentList.length > 0 && (
-            <>
-              <HSpacer size={8} />
-              <Tag variant="attachment" testID="attachment-tag" />
-            </>
+            <MessageDetailsTagBox>
+              <Tag
+                variant="attachment"
+                testID="attachment-tag"
+                iconAccessibilityLabel={I18n.t(
+                  "messageDetails.accessibilityAttachmentIcon"
+                )}
+              />
+            </MessageDetailsTagBox>
           )}
-        </View>
-        <VSpacer size={8} />
-      </MessageDetailHeader>
-      <MessageDetailsContent abstract={message.abstract} />
+          <VSpacer size={8} />
+        </MessageDetailsHeader>
+        <MessageDetailsContent abstract={message.abstract} />
+        <VSpacer size={16} />
+        <MessageDetailsAttachments
+          disabled={message.isCancelled}
+          messageId={messageId}
+          isPN
+        />
+        <VSpacer size={16} />
+        <MessagePayments
+          messageId={messageId}
+          isCancelled={isCancelled}
+          payments={payments}
+          completedPaymentNoticeCodes={completedPaymentNoticeCodes}
+          maxVisiblePaymentCount={maxVisiblePaymentCount}
+          presentPaymentsBottomSheetRef={presentPaymentsBottomSheetRef}
+        />
+        <VSpacer size={16} />
+        <F24Section
+          messageId={messageId}
+          isCancelled={message.isCancelled}
+          serviceId={serviceId}
+        />
+        <VSpacer size={16} />
+        <MessageInfo iun={message.iun} />
+      </ContentWrapper>
+      <MessageFooter serviceId={serviceId} />
     </ScrollView>
   );
 };
diff --git a/ts/features/pn/components/MessageDetailsContent.tsx b/ts/features/pn/components/MessageDetailsContent.tsx
index 96cbdbbe3ad..0237cc013b8 100644
--- a/ts/features/pn/components/MessageDetailsContent.tsx
+++ b/ts/features/pn/components/MessageDetailsContent.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Body, ContentWrapper, VSpacer } from "@pagopa/io-app-design-system";
+import { Body, VSpacer } from "@pagopa/io-app-design-system";
 
 type MessageDetailsContentProps = {
   abstract?: string;
@@ -13,9 +13,9 @@ export const MessageDetailsContent = ({
   }
 
   return (
-    <ContentWrapper>
+    <>
       <VSpacer size={16} />
       <Body color="grey-850">{abstract}</Body>
-    </ContentWrapper>
+    </>
   );
 };
diff --git a/ts/features/pn/components/MessageFooter.tsx b/ts/features/pn/components/MessageFooter.tsx
index 6c1c0555c04..02944f80361 100644
--- a/ts/features/pn/components/MessageFooter.tsx
+++ b/ts/features/pn/components/MessageFooter.tsx
@@ -1,80 +1,38 @@
-import React, { MutableRefObject, useCallback } from "react";
+import { IOColors, IOStyles, VSpacer } from "@pagopa/io-app-design-system";
+import React from "react";
 import { StyleSheet, View } from "react-native";
-import { ButtonSolid, IOStyles } from "@pagopa/io-app-design-system";
-import I18n from "i18n-js";
-import { useDispatch } from "react-redux";
-import { NotificationPaymentInfo } from "../../../../definitions/pn/NotificationPaymentInfo";
+import { ContactsListItem } from "../../messages/components/MessageDetail/ContactsListItem";
 import { useIOSelector } from "../../../store/hooks";
-import { UIMessageId } from "../../messages/types";
-import { paymentsButtonStateSelector } from "../store/reducers/payments";
-import variables from "../../../theme/variables";
-import { initializeAndNavigateToWalletForPayment } from "../utils";
-import { getRptIdStringFromPayment } from "../utils/rptId";
-import { useIOToast } from "../../../components/Toast";
-import { trackPNShowAllPayments } from "../analytics";
+import { serviceMetadataByIdSelector } from "../../services/store/reducers/servicesById";
+import { ServiceId } from "../../../../definitions/backend/ServiceId";
 
 const styles = StyleSheet.create({
   container: {
-    overflow: "hidden",
-    marginTop: -variables.footerShadowOffsetHeight,
-    paddingTop: variables.footerShadowOffsetHeight
+    backgroundColor: IOColors["grey-50"],
+    paddingBottom: "95%",
+    marginBottom: "-95%",
+    paddingHorizontal: IOStyles.horizontalContentPadding.paddingHorizontal,
+    paddingTop: IOStyles.footer.paddingTop
   }
 });
 
 type MessageFooterProps = {
-  messageId: UIMessageId;
-  payments: ReadonlyArray<NotificationPaymentInfo> | undefined;
-  maxVisiblePaymentCount: number;
-  isCancelled: boolean;
-  presentPaymentsBottomSheetRef: MutableRefObject<(() => void) | undefined>;
+  serviceId: ServiceId;
 };
 
-export const MessageFooter = ({
-  messageId,
-  payments,
-  maxVisiblePaymentCount,
-  isCancelled,
-  presentPaymentsBottomSheetRef
-}: MessageFooterProps) => {
-  const buttonState = useIOSelector(state =>
-    paymentsButtonStateSelector(
-      state,
-      messageId,
-      payments,
-      maxVisiblePaymentCount
-    )
+export const MessageFooter = ({ serviceId }: MessageFooterProps) => {
+  const serviceMetadata = useIOSelector(state =>
+    serviceMetadataByIdSelector(state, serviceId)
   );
-  const dispatch = useDispatch();
-  const toast = useIOToast();
-  const onFooterPressCallback = useCallback(() => {
-    if (payments?.length === 1) {
-      const firstPayment = payments[0];
-      const paymentId = getRptIdStringFromPayment(firstPayment);
-      initializeAndNavigateToWalletForPayment(paymentId, dispatch, () =>
-        toast.error(I18n.t("genericError"))
-      );
-    } else {
-      trackPNShowAllPayments();
-      presentPaymentsBottomSheetRef.current?.();
-    }
-  }, [dispatch, payments, presentPaymentsBottomSheetRef, toast]);
-  if (isCancelled || buttonState === "hidden") {
-    return null;
-  }
-  const isLoading = buttonState === "visibleLoading";
   return (
     <View style={styles.container}>
-      <View style={IOStyles.footer}>
-        <ButtonSolid
-          disabled={isLoading}
-          fullWidth={true}
-          loading={isLoading}
-          color="primary"
-          label={I18n.t("wallet.continue")}
-          onPress={onFooterPressCallback}
-          accessibilityLabel={I18n.t("wallet.continue")}
+      {(serviceMetadata?.email || serviceMetadata?.phone) && (
+        <ContactsListItem
+          email={serviceMetadata.email}
+          phone={serviceMetadata.phone}
         />
-      </View>
+      )}
+      <VSpacer size={16} />
     </View>
   );
 };
diff --git a/ts/features/pn/components/MessageInfo.tsx b/ts/features/pn/components/MessageInfo.tsx
new file mode 100644
index 00000000000..62eb0d1462a
--- /dev/null
+++ b/ts/features/pn/components/MessageInfo.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { ListItemHeader, ListItemInfoCopy } from "@pagopa/io-app-design-system";
+import I18n from "../../../i18n";
+import { clipboardSetStringWithFeedback } from "../../../utils/clipboard";
+
+type MessageInfoProps = {
+  iun: string;
+};
+
+export const MessageInfo = ({ iun }: MessageInfoProps) => (
+  <>
+    <ListItemHeader
+      iconName="info"
+      label={I18n.t("features.pn.details.infoSection.title")}
+    />
+    <ListItemInfoCopy
+      accessibilityLabel={`${I18n.t(
+        "features.pn.details.infoSection.iun"
+      )} ${I18n.t("clipboard.copyIntoClipboard")}`}
+      label={I18n.t("features.pn.details.infoSection.iun")}
+      value={iun}
+      onPress={() => clipboardSetStringWithFeedback(iun)}
+    />
+  </>
+);
diff --git a/ts/features/pn/components/MessagePaymentBottomSheet.tsx b/ts/features/pn/components/MessagePaymentBottomSheet.tsx
index fd81a904d01..9a1a7dc1b7a 100644
--- a/ts/features/pn/components/MessagePaymentBottomSheet.tsx
+++ b/ts/features/pn/components/MessagePaymentBottomSheet.tsx
@@ -5,8 +5,9 @@ import { useDispatch } from "react-redux";
 import { NotificationPaymentInfo } from "../../../../definitions/pn/NotificationPaymentInfo";
 import { UIMessageId } from "../../messages/types";
 import { useIOBottomSheetModal } from "../../../utils/hooks/bottomSheet";
-import { cancelQueuedPaymentUpdates } from "../store/actions";
-import { MessagePaymentItem } from "./MessagePaymentItem";
+import { cancelQueuedPaymentUpdates } from "../../messages/store/actions";
+import { MessagePaymentItem } from "../../messages/components/MessageDetail/MessagePaymentItem";
+import { getRptIdStringFromPayment } from "../utils/rptId";
 
 export type MessagePaymentBottomSheetProps = {
   messageId: UIMessageId;
@@ -26,16 +27,21 @@ export const MessagePaymentBottomSheet = ({
   const { present, dismiss, bottomSheet } = useIOBottomSheetModal({
     component: (
       <>
-        {payments.map((payment, index) => (
-          <MessagePaymentItem
-            index={index}
-            key={`LI_${index}`}
-            messageId={messageId}
-            payment={payment}
-            noSpaceOnTop={index === 0}
-            willNavigateToPayment={() => dismiss()}
-          />
-        ))}
+        {payments.map((payment, index) => {
+          const rptId = getRptIdStringFromPayment(payment);
+          return (
+            <MessagePaymentItem
+              index={index}
+              isPNPayment
+              key={`LI_${index}`}
+              messageId={messageId}
+              rptId={rptId}
+              noticeNumber={payment.noticeCode}
+              noSpaceOnTop={index === 0}
+              willNavigateToPayment={() => dismiss()}
+            />
+          );
+        })}
       </>
     ),
     title: I18n.t("features.pn.details.paymentSection.bottomSheetTitle"),
diff --git a/ts/features/pn/components/MessagePayments.tsx b/ts/features/pn/components/MessagePayments.tsx
index 2bccac60d63..d2629b01096 100644
--- a/ts/features/pn/components/MessagePayments.tsx
+++ b/ts/features/pn/components/MessagePayments.tsx
@@ -6,6 +6,8 @@ import { StyleSheet, View } from "react-native";
 import I18n from "i18n-js";
 import {
   ButtonLink,
+  FeatureInfo,
+  ListItemHeader,
   ModulePaymentNotice,
   VSpacer
 } from "@pagopa/io-app-design-system";
@@ -13,21 +15,19 @@ import { CommonActions, useNavigation } from "@react-navigation/native";
 import Placeholder from "rn-placeholder";
 import { getBadgeTextByPaymentNoticeStatus } from "../../messages/utils/strings";
 import { NotificationPaymentInfo } from "../../../../definitions/pn/NotificationPaymentInfo";
-import { InfoBox } from "../../../components/box/InfoBox";
-import { H5 } from "../../../components/core/typography/H5";
 import { UIMessageId } from "../../messages/types";
 import { useIOSelector } from "../../../store/hooks";
 import { paymentsButtonStateSelector } from "../store/reducers/payments";
 import { trackPNShowAllPayments } from "../analytics";
 import PN_ROUTES from "../navigation/routes";
 import { MESSAGES_ROUTES } from "../../messages/navigation/routes";
-import { MessageDetailsSection } from "./MessageDetailsSection";
-import { MessagePaymentItem } from "./MessagePaymentItem";
+import { MessagePaymentItem } from "../../messages/components/MessageDetail/MessagePaymentItem";
+import { getRptIdStringFromPayment } from "../utils/rptId";
 
 const styles = StyleSheet.create({
   morePaymentsSkeletonContainer: {
     flex: 1,
-    alignItems: "center"
+    alignItems: "flex-start"
   },
   morePaymentsLinkContainer: {
     alignSelf: "center"
@@ -119,21 +119,14 @@ export const MessagePayments = ({
   }
   if (isCancelled) {
     return (
-      <MessageDetailsSection
-        title={I18n.t("features.pn.details.cancelledMessage.payments")}
-        testID={"PnCancelledPaymentSectionTitle"}
-      >
-        <VSpacer size={24} />
-        <InfoBox
-          alignedCentral={true}
-          iconSize={24}
-          iconColor={"bluegrey"}
-          testID={"PnCancelledPaymentInfoBox"}
-        >
-          <H5 weight={"Regular"}>
-            {I18n.t("features.pn.details.cancelledMessage.unpaidPayments")}
-          </H5>
-        </InfoBox>
+      <>
+        <ListItemHeader
+          label={I18n.t("features.pn.details.cancelledMessage.payments")}
+        />
+        <FeatureInfo
+          body={I18n.t("features.pn.details.cancelledMessage.unpaidPayments")}
+          iconName="info"
+        />
         {completedPaymentNoticeCodes &&
           completedPaymentNoticeCodes.map(
             (completedPaymentNoticeCode, index) => (
@@ -157,7 +150,7 @@ export const MessagePayments = ({
               </View>
             )
           )}
-      </MessageDetailsSection>
+      </>
     );
   }
 
@@ -169,24 +162,31 @@ export const MessagePayments = ({
       })`
     : "";
   return (
-    <MessageDetailsSection
-      title={I18n.t("features.pn.details.paymentSection.title")}
-      iconName={"productPagoPA"}
-      testID={"PnPaymentSectionTitle"}
-    >
+    <>
+      <ListItemHeader
+        label={I18n.t("features.pn.details.paymentSection.title")}
+        iconName={"productPagoPA"}
+        iconColor={"blueIO-500"}
+      />
       {payments && (
         <>
-          {payments.slice(0, maxVisiblePaymentCount).map((payment, index) => (
-            <MessagePaymentItem
-              index={index}
-              key={`PM_${index}`}
-              messageId={messageId}
-              payment={payment}
-            />
-          ))}
+          {payments.slice(0, maxVisiblePaymentCount).map((payment, index) => {
+            const rptId = getRptIdStringFromPayment(payment);
+            return (
+              <MessagePaymentItem
+                noSpaceOnTop={index === 0}
+                index={index}
+                isPNPayment
+                key={`PM_${index}`}
+                messageId={messageId}
+                rptId={rptId}
+                noticeNumber={payment.noticeCode}
+              />
+            );
+          })}
           {showMorePaymentsLink && (
             <>
-              <VSpacer size={16} />
+              <VSpacer size={32} />
               {morePaymentsLinkState === "visibleLoading" && (
                 <View style={styles.morePaymentsSkeletonContainer}>
                   <Placeholder.Box
@@ -209,10 +209,11 @@ export const MessagePayments = ({
                   />
                 </View>
               )}
+              <VSpacer size={8} />
             </>
           )}
         </>
       )}
-    </MessageDetailsSection>
+    </>
   );
 };
diff --git a/ts/features/pn/components/ServiceCTA.tsx b/ts/features/pn/components/ServiceCTA.tsx
index e2665f3936f..70101020779 100644
--- a/ts/features/pn/components/ServiceCTA.tsx
+++ b/ts/features/pn/components/ServiceCTA.tsx
@@ -9,15 +9,15 @@ import ButtonDefaultOpacity from "../../../components/ButtonDefaultOpacity";
 import { Label } from "../../../components/core/typography/Label";
 import I18n from "../../../i18n";
 import { useIODispatch, useIOSelector } from "../../../store/hooks";
-import { servicePreferenceSelector } from "../../../store/reducers/entities/services/servicePreference";
-import { isServicePreferenceResponseSuccess } from "../../../types/services/ServicePreferenceResponse";
+import { servicePreferenceSelector } from "../../services/store/reducers/servicePreference";
+import { isServicePreferenceResponseSuccess } from "../../services/types/ServicePreferenceResponse";
 import { AppDispatch } from "../../../App";
 import { pnActivationUpsert } from "../store/actions";
 import { pnActivationSelector } from "../store/reducers/activation";
 import { showToast } from "../../../utils/showToast";
 import { Link } from "../../../components/core/typography/Link";
 import { useOnFirstRender } from "../../../utils/hooks/useOnFirstRender";
-import { loadServicePreference } from "../../../store/actions/services/servicePreference";
+import { loadServicePreference } from "../../services/store/actions";
 import {
   trackPNServiceActivated,
   trackPNServiceDeactivated,
diff --git a/ts/features/pn/components/__test__/F24ListBottomSheetLink.test.tsx b/ts/features/pn/components/__test__/F24ListBottomSheetLink.test.tsx
new file mode 100644
index 00000000000..a022d99d125
--- /dev/null
+++ b/ts/features/pn/components/__test__/F24ListBottomSheetLink.test.tsx
@@ -0,0 +1,54 @@
+import * as React from "react";
+import { createStore } from "redux";
+import { applicationChangeState } from "../../../../store/actions/application";
+import { preferencesDesignSystemSetEnabled } from "../../../../store/actions/persistedPreferences";
+import { appReducer } from "../../../../store/reducers";
+import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
+import { F24ListBottomSheetLink } from "../F24ListBottomSheetLink";
+import { UIMessageId } from "../../../messages/types";
+import { ThirdPartyAttachment } from "../../../../../definitions/backend/ThirdPartyAttachment";
+
+const numberToThirdPartyAttachment = (index: number) =>
+  ({
+    id: `${index}`,
+    url: `https://domain.url/doc${index}.pdf`
+  } as ThirdPartyAttachment);
+
+describe("F24ListBottomSheetLink", () => {
+  it("should be snapshot for an 0 items F24 list", () => {
+    const zeroF24List = [] as ReadonlyArray<ThirdPartyAttachment>;
+    const component = renderComponent(zeroF24List);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should be snapshot for an 1 item F24 list", () => {
+    const oneF24List = [...Array(1).keys()].map(numberToThirdPartyAttachment);
+    const component = renderComponent(oneF24List);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should be snapshot for a 10 items F24 list", () => {
+    const oneF24List = [...Array(10).keys()].map(numberToThirdPartyAttachment);
+    const component = renderComponent(oneF24List);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderComponent = (f24List: ReadonlyArray<ThirdPartyAttachment>) => {
+  const initialState = appReducer(undefined, applicationChangeState("active"));
+  const designSystemState = appReducer(
+    initialState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+  const store = createStore(appReducer, designSystemState as any);
+
+  return renderScreenWithNavigationStoreContext(
+    () => (
+      <F24ListBottomSheetLink
+        f24List={f24List}
+        messageId={"01HS94671EXDWDESDJB3NCBYPM" as UIMessageId}
+      />
+    ),
+    "DUMMY",
+    {},
+    store
+  );
+};
diff --git a/ts/features/pn/components/__test__/F24Section.test.tsx b/ts/features/pn/components/__test__/F24Section.test.tsx
new file mode 100644
index 00000000000..aa9a847c73d
--- /dev/null
+++ b/ts/features/pn/components/__test__/F24Section.test.tsx
@@ -0,0 +1,133 @@
+import * as React from "react";
+import { createStore } from "redux";
+import { F24Section } from "../F24Section";
+import { appReducer } from "../../../../store/reducers";
+import { applicationChangeState } from "../../../../store/actions/application";
+import { UIMessageId } from "../../../messages/types";
+import { preferencesDesignSystemSetEnabled } from "../../../../store/actions/persistedPreferences";
+import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
+import { ServiceId } from "../../../../../definitions/backend/ServiceId";
+import * as thirdPartyById from "../../../messages/store/reducers/thirdPartyById";
+import { ThirdPartyAttachment } from "../../../../../definitions/backend/ThirdPartyAttachment";
+import { ATTACHMENT_CATEGORY } from "../../../messages/types/attachmentCategory";
+
+const generateOneAttachmentArray = () => [
+  {
+    id: "1",
+    url: "https://no.url/doc.pdf"
+  } as ThirdPartyAttachment
+];
+const generateThreeAttachmentArray = () => [
+  {
+    id: "1",
+    url: "https://no.url/doc.pdf"
+  } as ThirdPartyAttachment,
+  {
+    id: "2",
+    url: "https://no.url/docF24.pdf",
+    category: ATTACHMENT_CATEGORY.F24
+  } as ThirdPartyAttachment,
+  {
+    id: "3",
+    url: "https://no.url/cod.pdf"
+  } as ThirdPartyAttachment
+];
+const generateFourAttachmentArray = () => [
+  {
+    id: "1",
+    url: "https://no.url/doc.pdf"
+  } as ThirdPartyAttachment,
+  {
+    id: "2",
+    url: "https://no.url/docF24.pdf",
+    category: ATTACHMENT_CATEGORY.F24
+  } as ThirdPartyAttachment,
+  {
+    id: "3",
+    url: "https://no.url/cod.pdf"
+  } as ThirdPartyAttachment,
+  {
+    id: "4",
+    url: "https://no.url/f24Doc.pdf",
+    category: ATTACHMENT_CATEGORY.F24
+  } as ThirdPartyAttachment
+];
+
+describe("F24Section", () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+    jest.restoreAllMocks();
+  });
+  it("should match snapshot when there are no F24", () => {
+    jest
+      .spyOn(thirdPartyById, "thirdPartyMessageAttachments")
+      .mockImplementation((_state, _messageId) => generateOneAttachmentArray());
+    const component = renderComponent();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when there are no F24 and the message is cancelled", () => {
+    jest
+      .spyOn(thirdPartyById, "thirdPartyMessageAttachments")
+      .mockImplementation((_state, _messageId) => generateOneAttachmentArray());
+    const component = renderComponent(true);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when there is a single F24", () => {
+    jest
+      .spyOn(thirdPartyById, "thirdPartyMessageAttachments")
+      .mockImplementation((_state, _messageId) =>
+        generateThreeAttachmentArray()
+      );
+    const component = renderComponent();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when there is a single F24 and the message is cancelled", () => {
+    jest
+      .spyOn(thirdPartyById, "thirdPartyMessageAttachments")
+      .mockImplementation((_state, _messageId) =>
+        generateThreeAttachmentArray()
+      );
+    const component = renderComponent(true);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when there are more than one F24", () => {
+    jest
+      .spyOn(thirdPartyById, "thirdPartyMessageAttachments")
+      .mockImplementation((_state, _messageId) =>
+        generateFourAttachmentArray()
+      );
+    const component = renderComponent();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when there are more than one F24 and the message is cancelled", () => {
+    jest
+      .spyOn(thirdPartyById, "thirdPartyMessageAttachments")
+      .mockImplementation((_state, _messageId) =>
+        generateFourAttachmentArray()
+      );
+    const component = renderComponent(true);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderComponent = (isCancelled: boolean = false) => {
+  const initialState = appReducer(undefined, applicationChangeState("active"));
+  const designSystemState = appReducer(
+    initialState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+  const store = createStore(appReducer, designSystemState as any);
+
+  return renderScreenWithNavigationStoreContext(
+    () => (
+      <F24Section
+        messageId={"01HS1ANR1SDPN3BP51X3G74T64" as UIMessageId}
+        serviceId={"01HS1ANWT4N83QGATCXYMXDP8M" as ServiceId}
+        isCancelled={isCancelled}
+      />
+    ),
+    "DUMMY",
+    {},
+    store
+  );
+};
diff --git a/ts/features/messages/components/__test__/MessageAttachments.test.tsx b/ts/features/pn/components/__test__/LegacyMessageAttachments.test.tsx
similarity index 82%
rename from ts/features/messages/components/__test__/MessageAttachments.test.tsx
rename to ts/features/pn/components/__test__/LegacyMessageAttachments.test.tsx
index fae4747db93..9d85e4d5424 100644
--- a/ts/features/messages/components/__test__/MessageAttachments.test.tsx
+++ b/ts/features/pn/components/__test__/LegacyMessageAttachments.test.tsx
@@ -6,11 +6,12 @@ import { applicationChangeState } from "../../../../store/actions/application";
 import { appReducer } from "../../../../store/reducers";
 import { GlobalState } from "../../../../store/reducers/types";
 import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
-import { MessageAttachments } from "../MessageAttachments";
-import { Downloads } from "../../store/reducers/downloads";
-import { mockPdfAttachment } from "../../__mocks__/attachment";
-import { downloadAttachment } from "../../store/actions";
+import { LegacyMessageAttachments } from "../LegacyMessageAttachments";
+import { Downloads } from "../../../messages/store/reducers/downloads";
+import { mockPdfAttachment } from "../../../messages/__mocks__/attachment";
+import { downloadAttachment } from "../../../messages/store/actions";
 import I18n from "../../../../i18n";
+import { messageId_1 } from "../../../messages/__mocks__/messages";
 
 const mockOpenPreview = jest.fn();
 const mockShowToast = jest.fn();
@@ -19,7 +20,7 @@ jest.mock("../../../../utils/showToast", () => ({
   showToast: () => mockShowToast()
 }));
 
-describe("MessageAttachments", () => {
+describe("LegacyMessageAttachments", () => {
   beforeEach(() => {
     mockShowToast.mockReset();
     mockOpenPreview.mockReset();
@@ -35,10 +36,11 @@ describe("MessageAttachments", () => {
           const { component } = renderComponent(
             {
               attachments: [mockPdfAttachment],
+              messageId: messageId_1,
               openPreview: jest.fn()
             },
             {
-              [mockPdfAttachment.messageId]: {
+              [messageId_1]: {
                 [mockPdfAttachment.id]: loadingPot
               }
             }
@@ -66,10 +68,11 @@ describe("MessageAttachments", () => {
           const { component } = renderComponent(
             {
               attachments: [mockPdfAttachment],
+              messageId: messageId_1,
               openPreview: jest.fn()
             },
             {
-              [mockPdfAttachment.messageId]: {
+              [messageId_1]: {
                 [mockPdfAttachment.id]: notLoadingPot
               }
             }
@@ -88,10 +91,11 @@ describe("MessageAttachments", () => {
         const { store } = renderComponent(
           {
             attachments: [mockPdfAttachment],
+            messageId: messageId_1,
             openPreview: jest.fn()
           },
           {
-            [mockPdfAttachment.messageId]: {
+            [messageId_1]: {
               [mockPdfAttachment.id]: pot.noneLoading
             }
           }
@@ -101,6 +105,7 @@ describe("MessageAttachments", () => {
           store.dispatch(
             downloadAttachment.failure({
               attachment: mockPdfAttachment,
+              messageId: messageId_1,
               error: new Error()
             })
           )
@@ -114,10 +119,11 @@ describe("MessageAttachments", () => {
         const { store } = renderComponent(
           {
             attachments: [mockPdfAttachment],
+            messageId: messageId_1,
             openPreview: mockOpenPreview()
           },
           {
-            [mockPdfAttachment.messageId]: {
+            [messageId_1]: {
               [mockPdfAttachment.id]: pot.noneLoading
             }
           }
@@ -127,6 +133,7 @@ describe("MessageAttachments", () => {
           store.dispatch(
             downloadAttachment.success({
               path: "path",
+              messageId: messageId_1,
               attachment: mockPdfAttachment
             })
           )
@@ -138,7 +145,7 @@ describe("MessageAttachments", () => {
 });
 
 const renderComponent = (
-  props: React.ComponentProps<typeof MessageAttachments>,
+  props: React.ComponentProps<typeof LegacyMessageAttachments>,
   downloads: Downloads = {}
 ) => {
   const globalState = appReducer(undefined, applicationChangeState("active"));
@@ -155,7 +162,7 @@ const renderComponent = (
 
   return {
     component: renderScreenWithNavigationStoreContext<GlobalState>(
-      () => <MessageAttachments {...props} />,
+      () => <LegacyMessageAttachments {...props} />,
       "DUMMY",
       {},
       store
diff --git a/ts/features/pn/components/__test__/LegacyMessageDetails.test.tsx b/ts/features/pn/components/__test__/LegacyMessageDetails.test.tsx
index a7ec40d4d30..402fa3aa99e 100644
--- a/ts/features/pn/components/__test__/LegacyMessageDetails.test.tsx
+++ b/ts/features/pn/components/__test__/LegacyMessageDetails.test.tsx
@@ -8,18 +8,19 @@ import { LegacyMessageDetails } from "../LegacyMessageDetails";
 import { GlobalState } from "../../../../store/reducers/types";
 import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
 import PN_ROUTES from "../../navigation/routes";
-import { UIAttachment, UIMessageId } from "../../../messages/types";
+import { UIMessageId } from "../../../messages/types";
 import { PNMessage } from "../../store/types/types";
 import { Download } from "../../../messages/store/reducers/downloads";
 import { NotificationRecipient } from "../../../../../definitions/pn/NotificationRecipient";
 import { ATTACHMENT_CATEGORY } from "../../../messages/types/attachmentCategory";
+import { ThirdPartyAttachment } from "../../../../../definitions/backend/ThirdPartyAttachment";
 
 const mockedOnAttachmentSelect = jest.fn();
 
-jest.mock("../../../messages/hooks/useAttachmentDownload", () => ({
-  useAttachmentDownload: (
-    _attachment: UIAttachment,
-    _openPreview: (attachment: UIAttachment) => void
+jest.mock("../../../messages/hooks/useLegacyAttachmentDownload", () => ({
+  useLegacyAttachmentDownload: (
+    _attachment: ThirdPartyAttachment,
+    _openPreview: (attachment: ThirdPartyAttachment) => void
   ) => ({
     onAttachmentSelect: mockedOnAttachmentSelect,
     downloadPot: { kind: "PotNone" } as pot.Pot<Download, Error>
@@ -146,22 +147,20 @@ const generatePnMessage = (): PNMessage => ({
   ] as Array<NotificationRecipient>,
   attachments: [
     {
-      messageId: generateTestMessageId(),
       id: "1",
-      displayName: "A First Attachment",
-      contentType: "application/pdf",
+      name: "A First Attachment",
+      content_type: "application/pdf",
       category: ATTACHMENT_CATEGORY.DOCUMENT,
-      resourceUrl: { href: "/resource/attachment1.pdf" }
+      url: "/resource/attachment1.pdf"
     },
     {
-      messageId: generateTestMessageId(),
       id: "2",
-      displayName: "A Second Attachment",
-      contentType: "application/pdf",
+      name: "A Second Attachment",
+      content_type: "application/pdf",
       category: ATTACHMENT_CATEGORY.DOCUMENT,
-      resourceUrl: { href: "/resource/attachment2.pdf" }
+      url: "/resource/attachment2.pdf"
     }
-  ] as Array<UIAttachment>
+  ] as Array<ThirdPartyAttachment>
 });
 const generateComponentProperties = (pnMessage: PNMessage) => ({
   payments: undefined,
diff --git a/ts/features/pn/components/__test__/MessageF24.test.tsx b/ts/features/pn/components/__test__/LegacyMessageF24.test.tsx
similarity index 83%
rename from ts/features/pn/components/__test__/MessageF24.test.tsx
rename to ts/features/pn/components/__test__/LegacyMessageF24.test.tsx
index 688d10fc5bc..c2e1ee55c0a 100644
--- a/ts/features/pn/components/__test__/MessageF24.test.tsx
+++ b/ts/features/pn/components/__test__/LegacyMessageF24.test.tsx
@@ -2,8 +2,7 @@ import React from "react";
 import { createStore } from "redux";
 import { act, fireEvent, within } from "@testing-library/react-native";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { UIAttachment } from "../../../messages/types";
-import { MessageF24 } from "../MessageF24";
+import { LegacyMessageF24 } from "../LegacyMessageF24";
 import I18n from "../../../../i18n";
 import {
   mockOtherAttachment,
@@ -13,13 +12,15 @@ import { appReducer } from "../../../../store/reducers";
 import { applicationChangeState } from "../../../../store/actions/application";
 import { Download } from "../../../messages/store/reducers/downloads";
 import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
+import { ThirdPartyAttachment } from "../../../../../definitions/backend/ThirdPartyAttachment";
+import { messageId_1 } from "../../../messages/__mocks__/messages";
 
 const mockOpenPreview = jest.fn();
 
-jest.mock("../../../messages/hooks/useAttachmentDownload", () => ({
-  useAttachmentDownload: (
-    _attachment: UIAttachment,
-    _openPreview: (attachment: UIAttachment) => void
+jest.mock("../../../messages/hooks/useLegacyAttachmentDownload", () => ({
+  useLegacyAttachmentDownload: (
+    _attachment: ThirdPartyAttachment,
+    _openPreview: (attachment: ThirdPartyAttachment) => void
   ) => ({
     onAttachmentSelect: mockOpenPreview,
     downloadPot: { kind: "PotNone" } as pot.Pot<Download, Error>
@@ -110,14 +111,20 @@ describe("MessageF24 component", () => {
 });
 
 const renderComponent = (
-  attachments: ReadonlyArray<UIAttachment>,
-  openPreview: (attachment: UIAttachment) => void
+  attachments: ReadonlyArray<ThirdPartyAttachment>,
+  openPreview: (attachment: ThirdPartyAttachment) => void
 ) => {
   const globalState = appReducer(undefined, applicationChangeState("active"));
   const store = createStore(appReducer, globalState as any);
 
   return renderScreenWithNavigationStoreContext(
-    () => <MessageF24 attachments={attachments} openPreview={openPreview} />,
+    () => (
+      <LegacyMessageF24
+        attachments={attachments}
+        messageId={messageId_1}
+        openPreview={openPreview}
+      />
+    ),
     "DUMMY",
     {},
     store
diff --git a/ts/features/pn/components/__test__/LegacyMessageFooter.test.tsx b/ts/features/pn/components/__test__/LegacyMessageFooter.test.tsx
new file mode 100644
index 00000000000..c69e9f3d332
--- /dev/null
+++ b/ts/features/pn/components/__test__/LegacyMessageFooter.test.tsx
@@ -0,0 +1,79 @@
+import * as React from "react";
+import { createStore } from "redux";
+import { applicationChangeState } from "../../../../store/actions/application";
+import { preferencesDesignSystemSetEnabled } from "../../../../store/actions/persistedPreferences";
+import { appReducer } from "../../../../store/reducers";
+import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
+import { UIMessageId } from "../../../messages/types";
+import { LegacyMessageFooter } from "../LegacyMessageFooter";
+import * as standardPayments from "../../../messages/store/reducers/payments";
+import * as payments from "../../store/reducers/payments";
+
+describe("LegacyMessageFooter", () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+    jest.clearAllMocks();
+    jest
+      .spyOn(standardPayments, "canNavigateToPaymentFromMessageSelector")
+      .mockReturnValue(true);
+  });
+  it("should match snapshot for cancelled PN notification", () => {
+    jest
+      .spyOn(payments, "paymentsButtonStateSelector")
+      .mockReturnValue("visibleEnabled");
+    const component = renderScreen(true);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot for hidden button", () => {
+    jest
+      .spyOn(payments, "paymentsButtonStateSelector")
+      .mockReturnValue("hidden");
+    const component = renderScreen();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot for visibleLoading button", () => {
+    jest
+      .spyOn(payments, "paymentsButtonStateSelector")
+      .mockReturnValue("visibleLoading");
+    const component = renderScreen();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot for visibleEnabled button", () => {
+    jest
+      .spyOn(payments, "paymentsButtonStateSelector")
+      .mockReturnValue("visibleEnabled");
+    const component = renderScreen();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderScreen = (
+  isCancelled: boolean = false,
+  messageId: UIMessageId = "01HRAAFS3VJAAKWKV8NM8Z6CPQ" as UIMessageId,
+  maxVisiblePaymentCount: number = 5
+) => {
+  const initialState = appReducer(undefined, applicationChangeState("active"));
+  const designSystemState = appReducer(
+    initialState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+  const store = createStore(appReducer, designSystemState as any);
+  const mockRef = {
+    current: jest.fn()
+  };
+
+  return renderScreenWithNavigationStoreContext(
+    () => (
+      <LegacyMessageFooter
+        messageId={messageId}
+        maxVisiblePaymentCount={maxVisiblePaymentCount}
+        isCancelled={isCancelled}
+        payments={undefined}
+        presentPaymentsBottomSheetRef={mockRef}
+      />
+    ),
+    "DUMMY",
+    {},
+    store
+  );
+};
diff --git a/ts/features/pn/components/__test__/LegacyMessagePayments.test.tsx b/ts/features/pn/components/__test__/LegacyMessagePayments.test.tsx
new file mode 100644
index 00000000000..280625f807f
--- /dev/null
+++ b/ts/features/pn/components/__test__/LegacyMessagePayments.test.tsx
@@ -0,0 +1,247 @@
+import React from "react";
+import { createStore } from "redux";
+import { applicationChangeState } from "../../../../store/actions/application";
+import { appReducer } from "../../../../store/reducers";
+import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
+import { UIMessageId } from "../../../messages/types";
+import { NotificationPaymentInfo } from "../../../../../definitions/pn/NotificationPaymentInfo";
+import { PaymentRequestsGetResponse } from "../../../../../definitions/backend/PaymentRequestsGetResponse";
+import { Detail_v2Enum } from "../../../../../definitions/backend/PaymentProblemJson";
+import { LegacyMessagePayments } from "../LegacyMessagePayments";
+import { updatePaymentForMessage } from "../../../messages/store/actions";
+
+describe("LegacyMessagePayments component", () => {
+  it("Should match the snapshot for a single loading payment", () => {
+    const messageId = "m1" as UIMessageId;
+    const payments = [
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n1"
+      }
+    ] as Array<NotificationPaymentInfo>;
+    const component = renderComponent(
+      messageId,
+      false,
+      payments,
+      undefined,
+      undefined
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match the snapshot for five loading payments", () => {
+    const messageId = "m1" as UIMessageId;
+    const payments = [
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n1"
+      },
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n2"
+      },
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n3"
+      },
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n4"
+      },
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n5"
+      }
+    ] as Array<NotificationPaymentInfo>;
+    const component = renderComponent(
+      messageId,
+      false,
+      payments,
+      undefined,
+      undefined
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match the snapshot for more than five loading payments", () => {
+    const messageId = "m1" as UIMessageId;
+    const payments = [
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n1"
+      },
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n2"
+      },
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n3"
+      },
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n4"
+      },
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n5"
+      },
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n6"
+      }
+    ] as Array<NotificationPaymentInfo>;
+    const component = renderComponent(
+      messageId,
+      false,
+      payments,
+      undefined,
+      undefined
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match the snapshot for five payable payments", () => {
+    const messageId = "m1" as UIMessageId;
+    const payments = [
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n1"
+      },
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n2"
+      },
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n3"
+      },
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n4"
+      },
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n5"
+      }
+    ] as Array<NotificationPaymentInfo>;
+    const component = renderComponent(
+      messageId,
+      false,
+      payments,
+      "payable",
+      undefined
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match the snapshot for five processed payments", () => {
+    const messageId = "m1" as UIMessageId;
+    const payments = [
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n1"
+      },
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n2"
+      },
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n3"
+      },
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n4"
+      },
+      {
+        creditorTaxId: "c1",
+        noticeCode: "n5"
+      }
+    ] as Array<NotificationPaymentInfo>;
+    const component = renderComponent(
+      messageId,
+      false,
+      payments,
+      "processed",
+      undefined
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match the snapshot for a cancelled message with no completed payments", () => {
+    const messageId = "m1" as UIMessageId;
+    const component = renderComponent(
+      messageId,
+      true,
+      undefined,
+      undefined,
+      undefined
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match the snapshot for a cancelled message with three completed payments", () => {
+    const messageId = "m1" as UIMessageId;
+    const component = renderComponent(messageId, true, undefined, undefined, [
+      "n1",
+      "n2",
+      "n3"
+    ]);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderComponent = (
+  messageId: UIMessageId,
+  isCancelled: boolean,
+  payments: ReadonlyArray<NotificationPaymentInfo> | undefined,
+  paymentsStatus: "payable" | "processed" | undefined,
+  completedPaymentNoticeCodes: ReadonlyArray<string> | undefined
+) => {
+  const globalState = appReducer(undefined, applicationChangeState("active"));
+  const modifiedState =
+    payments?.reduce(
+      (previousState, payment) =>
+        paymentsStatus === "payable"
+          ? appReducer(
+              previousState,
+              updatePaymentForMessage.success({
+                messageId,
+                paymentId: ``,
+                paymentData: {
+                  codiceContestoPagamento: `${payment.noticeCode}`,
+                  importoSingoloVersamento: 99,
+                  causaleVersamento: "Causale",
+                  dueDate: new Date(2023, 10, 23, 10, 30)
+                } as PaymentRequestsGetResponse
+              })
+            )
+          : paymentsStatus === "processed"
+          ? appReducer(
+              previousState,
+              updatePaymentForMessage.failure({
+                messageId,
+                paymentId: ``,
+                details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
+              })
+            )
+          : previousState,
+      globalState
+    ) ?? globalState;
+  const store = createStore(appReducer, modifiedState as any);
+
+  const mockPresentPaymentsBottomSheetRef = {
+    current: () => undefined
+  };
+
+  return renderScreenWithNavigationStoreContext(
+    () => (
+      <LegacyMessagePayments
+        messageId={messageId}
+        isCancelled={isCancelled}
+        payments={payments}
+        completedPaymentNoticeCodes={completedPaymentNoticeCodes}
+        maxVisiblePaymentCount={5}
+        presentPaymentsBottomSheetRef={mockPresentPaymentsBottomSheetRef}
+      />
+    ),
+    "DUMMY",
+    {},
+    store
+  );
+};
diff --git a/ts/features/pn/components/__test__/MessageDetails.test.tsx b/ts/features/pn/components/__test__/MessageDetails.test.tsx
index a87f86291be..89d21deef44 100644
--- a/ts/features/pn/components/__test__/MessageDetails.test.tsx
+++ b/ts/features/pn/components/__test__/MessageDetails.test.tsx
@@ -10,28 +10,23 @@ import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWr
 import { PNMessage } from "../../store/types/types";
 import { thirdPartyMessage } from "../../__mocks__/message";
 import { toPNMessage } from "../../store/types/transformers";
-import { UIMessageId } from "../../../messages/types";
 import I18n from "../../../../i18n";
+import { serviceId_1 } from "../../../messages/__mocks__/messages";
+import { UIMessageId } from "../../../messages/types";
 
 const pnMessage = pipe(thirdPartyMessage, toPNMessage, O.toUndefined)!;
 
 describe("MessageDetails component", () => {
   it("should match the snapshot with default props", () => {
     const { component } = renderComponent(
-      generateComponentProperties(
-        thirdPartyMessage.id as UIMessageId,
-        pnMessage
-      )
+      generateComponentProperties(pnMessage)
     );
     expect(component).toMatchSnapshot();
   });
 
   it("should display the legalMessage tag", () => {
     const { component } = renderComponent(
-      generateComponentProperties(
-        thirdPartyMessage.id as UIMessageId,
-        pnMessage
-      )
+      generateComponentProperties(pnMessage)
     );
     expect(
       component.queryByText(I18n.t("features.pn.details.badge.legalValue"))
@@ -40,17 +35,14 @@ describe("MessageDetails component", () => {
 
   it("should display the attachment tag if there are attachments", () => {
     const { component } = renderComponent(
-      generateComponentProperties(
-        thirdPartyMessage.id as UIMessageId,
-        pnMessage
-      )
+      generateComponentProperties(pnMessage)
     );
     expect(component.queryByTestId("attachment-tag")).not.toBeNull();
   });
 
   it("should NOT display the attachment tag if there are no attachments", () => {
     const { component } = renderComponent(
-      generateComponentProperties(thirdPartyMessage.id as UIMessageId, {
+      generateComponentProperties({
         ...pnMessage,
         attachments: []
       })
@@ -59,14 +51,11 @@ describe("MessageDetails component", () => {
   });
 });
 
-const generateComponentProperties = (
-  messageId: UIMessageId,
-  message: PNMessage
-) => ({
-  messageId,
+const generateComponentProperties = (message: PNMessage) => ({
+  messageId: "01HRYR6C761DGH3S84HBBXMMKT" as UIMessageId,
   message,
   payments: undefined,
-  service: undefined
+  serviceId: serviceId_1
 });
 
 const renderComponent = (
diff --git a/ts/features/pn/components/__test__/MessageFooter.test.tsx b/ts/features/pn/components/__test__/MessageFooter.test.tsx
new file mode 100644
index 00000000000..d923366787e
--- /dev/null
+++ b/ts/features/pn/components/__test__/MessageFooter.test.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { createStore } from "redux";
+import { applicationChangeState } from "../../../../store/actions/application";
+import { preferencesDesignSystemSetEnabled } from "../../../../store/actions/persistedPreferences";
+import { appReducer } from "../../../../store/reducers";
+import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
+import PN_ROUTES from "../../navigation/routes";
+import { MessageFooter } from "../MessageFooter";
+import { ServiceId } from "../../../../../definitions/backend/ServiceId";
+
+describe("MessageFooter", () => {
+  it("should match snapshot", () => {
+    const component = renderComponent();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderComponent = () => {
+  const initialState = appReducer(undefined, applicationChangeState("active"));
+  const designSystemState = appReducer(
+    initialState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+  const store = createStore(appReducer, designSystemState as any);
+
+  return renderScreenWithNavigationStoreContext(
+    () => (
+      <MessageFooter serviceId={"01HT25YR72A8N42AJ0TEKAB2V7" as ServiceId} />
+    ),
+    PN_ROUTES.MESSAGE_DETAILS,
+    {},
+    store
+  );
+};
diff --git a/ts/features/pn/components/__test__/MessageInfo.test.tsx b/ts/features/pn/components/__test__/MessageInfo.test.tsx
new file mode 100644
index 00000000000..48cbc02f0a3
--- /dev/null
+++ b/ts/features/pn/components/__test__/MessageInfo.test.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { createStore } from "redux";
+import { appReducer } from "../../../../store/reducers";
+import { applicationChangeState } from "../../../../store/actions/application";
+import { preferencesDesignSystemSetEnabled } from "../../../../store/actions/persistedPreferences";
+import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
+import { MessageInfo } from "../MessageInfo";
+import PN_ROUTES from "../../navigation/routes";
+
+describe("MessageInfo", () => {
+  it("should match snapshot", () => {
+    const component = renderComponent();
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderComponent = () => {
+  const globalState = appReducer(undefined, applicationChangeState("active"));
+  const newDesignSystemState = appReducer(
+    globalState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+  const store = createStore(appReducer, newDesignSystemState as any);
+
+  return renderScreenWithNavigationStoreContext(
+    () => <MessageInfo iun={"YYYYMM-1-ABCD-EFGH-X"} />,
+    PN_ROUTES.MESSAGE_DETAILS,
+    {},
+    store
+  );
+};
diff --git a/ts/features/pn/components/__test__/MessagePayments.test.tsx b/ts/features/pn/components/__test__/MessagePayments.test.tsx
index fc4a7bb7f6d..e7800c243a9 100644
--- a/ts/features/pn/components/__test__/MessagePayments.test.tsx
+++ b/ts/features/pn/components/__test__/MessagePayments.test.tsx
@@ -1,230 +1,483 @@
 import React from "react";
 import { createStore } from "redux";
-import { applicationChangeState } from "../../../../store/actions/application";
 import { appReducer } from "../../../../store/reducers";
+import { applicationChangeState } from "../../../../store/actions/application";
+import { preferencesDesignSystemSetEnabled } from "../../../../store/actions/persistedPreferences";
 import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
+import PN_ROUTES from "../../navigation/routes";
+import { MessagePayments } from "../MessagePayments";
 import { UIMessageId } from "../../../messages/types";
 import { NotificationPaymentInfo } from "../../../../../definitions/pn/NotificationPaymentInfo";
-import { updatePaymentForMessage } from "../../store/actions";
+import { GlobalState } from "../../../../store/reducers/types";
+import { remoteError, remoteReady } from "../../../../common/model/RemoteValue";
 import { PaymentRequestsGetResponse } from "../../../../../definitions/backend/PaymentRequestsGetResponse";
 import { Detail_v2Enum } from "../../../../../definitions/backend/PaymentProblemJson";
-import { MessagePayments } from "../MessagePayments";
 
-describe("MessagePayments component", () => {
-  it("Should match the snapshot for a single loading payment", () => {
-    const messageId = "m1" as UIMessageId;
-    const payments = [
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n1"
+const globalMessageId = "01HTFFDYS8VQ779EA4M5WB9YWA" as UIMessageId;
+const globalMaxVisiblePaymentCount = 5;
+const globalDueDate = new Date(2099, 4, 2, 1, 1, 1);
+const generatePayablePayment = (
+  codiceContestoPagamento: string,
+  amount: number
+) =>
+  ({
+    codiceContestoPagamento,
+    importoSingoloVersamento: amount,
+    dueDate: globalDueDate,
+    causaleVersamento: "hendrerit orci id dolor consectetur"
+  } as PaymentRequestsGetResponse);
+const notificationPaymentInfosFromPaymentIds = (paymentIds: Array<string>) =>
+  paymentIds.map(
+    payment =>
+      ({
+        creditorTaxId: payment.substring(0, 11),
+        noticeCode: payment.substring(11)
+      } as NotificationPaymentInfo)
+  );
+
+describe("MessagePayments", () => {
+  it("should match snapshot when cancelled, without payments, without cancelled-completed-payments", () => {
+    const initialState = dsEnabledGlobalState();
+    const component = renderComponent(
+      globalMessageId,
+      true,
+      [],
+      [],
+      initialState
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when cancelled with payments without completed payments", () => {
+    const initialState = dsEnabledGlobalState();
+    const paymentIds = [
+      "01234567890012345678912345610",
+      "01234567890012345678912345620",
+      "01234567890012345678912345630",
+      "01234567890012345678912345640",
+      "01234567890012345678912345650",
+      "01234567890012345678912345660",
+      "01234567890012345678912345670"
+    ];
+    const paymentsState: GlobalState = {
+      ...initialState,
+      entities: {
+        ...initialState.entities,
+        messages: {
+          ...initialState.entities.messages,
+          payments: {
+            ...initialState.entities.messages.payments,
+            [globalMessageId]: {
+              [paymentIds[0]]: remoteReady(
+                generatePayablePayment(paymentIds[0], 199)
+              ),
+              [paymentIds[1]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_ANNULLATO
+              ),
+              [paymentIds[2]]: remoteError(Detail_v2Enum.PAA_PAGAMENTO_SCADUTO),
+              [paymentIds[3]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_IN_CORSO
+              ),
+              [paymentIds[4]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_DUPLICATO
+              ),
+              [paymentIds[5]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_SCONOSCIUTO
+              ),
+              [paymentIds[6]]: remoteError(Detail_v2Enum.GENERIC_ERROR)
+            }
+          }
+        }
       }
-    ] as Array<NotificationPaymentInfo>;
+    };
+    const payments = notificationPaymentInfosFromPaymentIds(paymentIds);
     const component = renderComponent(
-      messageId,
-      false,
+      globalMessageId,
+      true,
+      payments,
+      [],
+      paymentsState
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when cancelled, without payments, with cancelled-completed-payments", () => {
+    const initialState = dsEnabledGlobalState();
+    const paymentIds = [
+      "01234567890012345678912345610",
+      "01234567890012345678912345620",
+      "01234567890012345678912345630",
+      "01234567890012345678912345640",
+      "01234567890012345678912345650",
+      "01234567890012345678912345660",
+      "01234567890012345678912345670"
+    ];
+    const component = renderComponent(
+      globalMessageId,
+      true,
+      [],
+      paymentIds,
+      initialState
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when cancelled, with payments, with cancelled-completed-payments", () => {
+    const messageId = "01HTFFDYS8VQ779EA4M5WB9YWA" as UIMessageId;
+    const initialState = dsEnabledGlobalState();
+    const paymentIds = [
+      "01234567890012345678912345610",
+      "01234567890012345678912345620",
+      "01234567890012345678912345630",
+      "01234567890012345678912345640",
+      "01234567890012345678912345650",
+      "01234567890012345678912345660",
+      "01234567890012345678912345670"
+    ];
+    const paymentsState: GlobalState = {
+      ...initialState,
+      entities: {
+        ...initialState.entities,
+        messages: {
+          ...initialState.entities.messages,
+          payments: {
+            ...initialState.entities.messages.payments,
+            [messageId]: {
+              [paymentIds[0]]: remoteReady(
+                generatePayablePayment(paymentIds[0], 199)
+              ),
+              [paymentIds[1]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_ANNULLATO
+              ),
+              [paymentIds[2]]: remoteError(Detail_v2Enum.PAA_PAGAMENTO_SCADUTO),
+              [paymentIds[3]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_IN_CORSO
+              ),
+              [paymentIds[4]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_DUPLICATO
+              ),
+              [paymentIds[5]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_SCONOSCIUTO
+              ),
+              [paymentIds[6]]: remoteError(Detail_v2Enum.GENERIC_ERROR)
+            }
+          }
+        }
+      }
+    };
+    const payments = notificationPaymentInfosFromPaymentIds(paymentIds);
+    const component = renderComponent(
+      globalMessageId,
+      true,
       payments,
-      undefined,
-      undefined
+      paymentIds,
+      paymentsState
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
-  it("Should match the snapshot for five loading payments", () => {
-    const messageId = "m1" as UIMessageId;
-    const payments = [
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n1"
-      },
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n2"
-      },
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n3"
-      },
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n4"
-      },
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n5"
+  it("should match snapshot when not cancelled, without payments, without cancelled-completed-payments", () => {
+    const initialState = dsEnabledGlobalState();
+    const component = renderComponent(
+      globalMessageId,
+      false,
+      [],
+      [],
+      initialState
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when not cancelled, without payments, with cancelled-completed-payments", () => {
+    const initialState = dsEnabledGlobalState();
+    const paymentIds = [
+      "01234567890012345678912345610",
+      "01234567890012345678912345620",
+      "01234567890012345678912345630",
+      "01234567890012345678912345640",
+      "01234567890012345678912345650",
+      "01234567890012345678912345660",
+      "01234567890012345678912345670"
+    ];
+    const component = renderComponent(
+      globalMessageId,
+      false,
+      [],
+      paymentIds,
+      initialState
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when not cancelled, with one payable payment, with cancelled-completed-payments", () => {
+    const initialState = dsEnabledGlobalState();
+    const paymentIds = ["01234567890012345678912345610"];
+    const paymentsState: GlobalState = {
+      ...initialState,
+      entities: {
+        ...initialState.entities,
+        messages: {
+          ...initialState.entities.messages,
+          payments: {
+            ...initialState.entities.messages.payments,
+            [globalMessageId]: {
+              [paymentIds[0]]: remoteReady(
+                generatePayablePayment(paymentIds[0], 199)
+              )
+            }
+          }
+        }
       }
-    ] as Array<NotificationPaymentInfo>;
+    };
+    const payments = notificationPaymentInfosFromPaymentIds(paymentIds);
     const component = renderComponent(
-      messageId,
+      globalMessageId,
       false,
       payments,
-      undefined,
-      undefined
+      paymentIds,
+      paymentsState
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
-  it("Should match the snapshot for more than five loading payments", () => {
-    const messageId = "m1" as UIMessageId;
-    const payments = [
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n1"
-      },
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n2"
-      },
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n3"
-      },
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n4"
-      },
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n5"
-      },
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n6"
+  it("should match snapshot when not cancelled, with one payable payment, without cancelled-completed-payments", () => {
+    const initialState = dsEnabledGlobalState();
+    const paymentIds = ["01234567890012345678912345610"];
+    const paymentsState: GlobalState = {
+      ...initialState,
+      entities: {
+        ...initialState.entities,
+        messages: {
+          ...initialState.entities.messages,
+          payments: {
+            ...initialState.entities.messages.payments,
+            [globalMessageId]: {
+              [paymentIds[0]]: remoteReady(
+                generatePayablePayment(paymentIds[0], 199)
+              )
+            }
+          }
+        }
       }
-    ] as Array<NotificationPaymentInfo>;
+    };
+    const payments = notificationPaymentInfosFromPaymentIds(paymentIds);
     const component = renderComponent(
-      messageId,
+      globalMessageId,
       false,
       payments,
-      undefined,
-      undefined
+      [],
+      paymentsState
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
-  it("Should match the snapshot for five payable payments", () => {
-    const messageId = "m1" as UIMessageId;
-    const payments = [
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n1"
-      },
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n2"
-      },
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n3"
-      },
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n4"
-      },
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n5"
+  it("should match snapshot when not cancelled, with five (max-visible-payments) payable payments, with cancelled-completed-payments", () => {
+    const initialState = dsEnabledGlobalState();
+    const paymentIds = [
+      "01234567890012345678912345610",
+      "01234567890012345678912345620",
+      "01234567890012345678912345630",
+      "01234567890012345678912345640",
+      "01234567890012345678912345650"
+    ];
+    const paymentsState: GlobalState = {
+      ...initialState,
+      entities: {
+        ...initialState.entities,
+        messages: {
+          ...initialState.entities.messages,
+          payments: {
+            ...initialState.entities.messages.payments,
+            [globalMessageId]: {
+              [paymentIds[0]]: remoteReady(
+                generatePayablePayment(paymentIds[0], 199)
+              ),
+              [paymentIds[1]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_ANNULLATO
+              ),
+              [paymentIds[2]]: remoteError(Detail_v2Enum.PAA_PAGAMENTO_SCADUTO),
+              [paymentIds[3]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_IN_CORSO
+              ),
+              [paymentIds[4]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_DUPLICATO
+              )
+            }
+          }
+        }
       }
-    ] as Array<NotificationPaymentInfo>;
+    };
+    const payments = notificationPaymentInfosFromPaymentIds(paymentIds);
     const component = renderComponent(
-      messageId,
+      globalMessageId,
       false,
       payments,
-      "payable",
-      undefined
+      paymentIds,
+      paymentsState
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
-  it("Should match the snapshot for five processed payments", () => {
-    const messageId = "m1" as UIMessageId;
-    const payments = [
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n1"
-      },
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n2"
-      },
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n3"
-      },
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n4"
-      },
-      {
-        creditorTaxId: "c1",
-        noticeCode: "n5"
+  it("should match snapshot when not cancelled, with five (max-visible-payments) payable payments, without cancelled-completed-payments", () => {
+    const initialState = dsEnabledGlobalState();
+    const paymentIds = [
+      "01234567890012345678912345610",
+      "01234567890012345678912345620",
+      "01234567890012345678912345630",
+      "01234567890012345678912345640",
+      "01234567890012345678912345650"
+    ];
+    const paymentsState: GlobalState = {
+      ...initialState,
+      entities: {
+        ...initialState.entities,
+        messages: {
+          ...initialState.entities.messages,
+          payments: {
+            ...initialState.entities.messages.payments,
+            [globalMessageId]: {
+              [paymentIds[0]]: remoteReady(
+                generatePayablePayment(paymentIds[0], 199)
+              ),
+              [paymentIds[1]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_ANNULLATO
+              ),
+              [paymentIds[2]]: remoteError(Detail_v2Enum.PAA_PAGAMENTO_SCADUTO),
+              [paymentIds[3]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_IN_CORSO
+              ),
+              [paymentIds[4]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_DUPLICATO
+              )
+            }
+          }
+        }
       }
-    ] as Array<NotificationPaymentInfo>;
+    };
+    const payments = notificationPaymentInfosFromPaymentIds(paymentIds);
     const component = renderComponent(
-      messageId,
+      globalMessageId,
       false,
       payments,
-      "processed",
-      undefined
+      [],
+      paymentsState
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
-  it("Should match the snapshot for a cancelled message with no completed payments", () => {
-    const messageId = "m1" as UIMessageId;
+  it("should match snapshot when not cancelled, with more-than-five (max-visible-payments) payable payments, with cancelled-completed-payments", () => {
+    const initialState = dsEnabledGlobalState();
+    const paymentIds = [
+      "01234567890012345678912345610",
+      "01234567890012345678912345620",
+      "01234567890012345678912345630",
+      "01234567890012345678912345640",
+      "01234567890012345678912345650",
+      "01234567890012345678912345660",
+      "01234567890012345678912345670"
+    ];
+    const paymentsState: GlobalState = {
+      ...initialState,
+      entities: {
+        ...initialState.entities,
+        messages: {
+          ...initialState.entities.messages,
+          payments: {
+            ...initialState.entities.messages.payments,
+            [globalMessageId]: {
+              [paymentIds[0]]: remoteReady(
+                generatePayablePayment(paymentIds[0], 199)
+              ),
+              [paymentIds[1]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_ANNULLATO
+              ),
+              [paymentIds[2]]: remoteError(Detail_v2Enum.PAA_PAGAMENTO_SCADUTO),
+              [paymentIds[3]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_IN_CORSO
+              ),
+              [paymentIds[4]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_DUPLICATO
+              ),
+              [paymentIds[5]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_SCONOSCIUTO
+              ),
+              [paymentIds[6]]: remoteError(Detail_v2Enum.GENERIC_ERROR)
+            }
+          }
+        }
+      }
+    };
+    const payments = notificationPaymentInfosFromPaymentIds(paymentIds);
     const component = renderComponent(
-      messageId,
-      true,
-      undefined,
-      undefined,
-      undefined
+      globalMessageId,
+      false,
+      payments,
+      paymentIds,
+      paymentsState
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
-  it("Should match the snapshot for a cancelled message with three completed payments", () => {
-    const messageId = "m1" as UIMessageId;
-    const component = renderComponent(messageId, true, undefined, undefined, [
-      "n1",
-      "n2",
-      "n3"
-    ]);
+  it("should match snapshot when not cancelled, with more-than-five (max-visible-payments) payable payments, without cancelled-completed-payments", () => {
+    const initialState = dsEnabledGlobalState();
+    const paymentIds = [
+      "01234567890012345678912345610",
+      "01234567890012345678912345620",
+      "01234567890012345678912345630",
+      "01234567890012345678912345640",
+      "01234567890012345678912345650",
+      "01234567890012345678912345660",
+      "01234567890012345678912345670"
+    ];
+    const paymentsState: GlobalState = {
+      ...initialState,
+      entities: {
+        ...initialState.entities,
+        messages: {
+          ...initialState.entities.messages,
+          payments: {
+            ...initialState.entities.messages.payments,
+            [globalMessageId]: {
+              [paymentIds[0]]: remoteReady(
+                generatePayablePayment(paymentIds[0], 199)
+              ),
+              [paymentIds[1]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_ANNULLATO
+              ),
+              [paymentIds[2]]: remoteError(Detail_v2Enum.PAA_PAGAMENTO_SCADUTO),
+              [paymentIds[3]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_IN_CORSO
+              ),
+              [paymentIds[4]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_DUPLICATO
+              ),
+              [paymentIds[5]]: remoteError(
+                Detail_v2Enum.PAA_PAGAMENTO_SCONOSCIUTO
+              ),
+              [paymentIds[6]]: remoteError(Detail_v2Enum.GENERIC_ERROR)
+            }
+          }
+        }
+      }
+    };
+    const payments = notificationPaymentInfosFromPaymentIds(paymentIds);
+    const component = renderComponent(
+      globalMessageId,
+      false,
+      payments,
+      [],
+      paymentsState
+    );
     expect(component.toJSON()).toMatchSnapshot();
   });
 });
 
+const dsEnabledGlobalState = (): GlobalState => {
+  const initialState = appReducer(undefined, applicationChangeState("active"));
+  return appReducer(
+    initialState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+};
+
 const renderComponent = (
   messageId: UIMessageId,
   isCancelled: boolean,
-  payments: ReadonlyArray<NotificationPaymentInfo> | undefined,
-  paymentsStatus: "payable" | "processed" | undefined,
-  completedPaymentNoticeCodes: ReadonlyArray<string> | undefined
+  payments: Array<NotificationPaymentInfo>,
+  completedPayments: Array<string>,
+  initialState: GlobalState,
+  maxVisiblePaymentCount: number = globalMaxVisiblePaymentCount
 ) => {
-  const globalState = appReducer(undefined, applicationChangeState("active"));
-  const modifiedState =
-    payments?.reduce(
-      (previousState, payment) =>
-        paymentsStatus === "payable"
-          ? appReducer(
-              previousState,
-              updatePaymentForMessage.success({
-                messageId,
-                paymentId: ``,
-                paymentData: {
-                  codiceContestoPagamento: `${payment.noticeCode}`,
-                  importoSingoloVersamento: 99,
-                  causaleVersamento: "Causale",
-                  dueDate: new Date(2023, 10, 23, 10, 30)
-                } as PaymentRequestsGetResponse
-              })
-            )
-          : paymentsStatus === "processed"
-          ? appReducer(
-              previousState,
-              updatePaymentForMessage.failure({
-                messageId,
-                paymentId: ``,
-                details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
-              })
-            )
-          : previousState,
-      globalState
-    ) ?? globalState;
-  const store = createStore(appReducer, modifiedState as any);
-
+  const store = createStore(appReducer, initialState as any);
   const mockPresentPaymentsBottomSheetRef = {
     current: () => undefined
   };
@@ -232,15 +485,15 @@ const renderComponent = (
   return renderScreenWithNavigationStoreContext(
     () => (
       <MessagePayments
-        messageId={messageId}
+        completedPaymentNoticeCodes={completedPayments}
         isCancelled={isCancelled}
+        maxVisiblePaymentCount={maxVisiblePaymentCount}
+        messageId={messageId}
         payments={payments}
-        completedPaymentNoticeCodes={completedPaymentNoticeCodes}
-        maxVisiblePaymentCount={5}
         presentPaymentsBottomSheetRef={mockPresentPaymentsBottomSheetRef}
       />
     ),
-    "DUMMY",
+    PN_ROUTES.MESSAGE_DETAILS,
     {},
     store
   );
diff --git a/ts/features/pn/components/__test__/__snapshots__/F24ListBottomSheetLink.test.tsx.snap b/ts/features/pn/components/__test__/__snapshots__/F24ListBottomSheetLink.test.tsx.snap
new file mode 100644
index 00000000000..aa3ab17c2dd
--- /dev/null
+++ b/ts/features/pn/components/__test__/__snapshots__/F24ListBottomSheetLink.test.tsx.snap
@@ -0,0 +1,3955 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`F24ListBottomSheetLink should be snapshot for a 10 items F24 list 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={3}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "alignSelf": "center",
+                            "justifyContent": "center",
+                          }
+                        }
+                      >
+                        <View
+                          accessibilityLabel="Vedi modelli F24"
+                          accessibilityRole="button"
+                          accessibilityState={
+                            Object {
+                              "disabled": false,
+                            }
+                          }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          hitSlop={
+                            Object {
+                              "bottom": 14,
+                              "left": 24,
+                              "right": 24,
+                              "top": 14,
+                            }
+                          }
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          style={
+                            Object {
+                              "alignSelf": "flex-start",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "elevation": 0,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "textAlignVertical": "center",
+                                },
+                                false,
+                                Object {},
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <Text
+                              accessibilityElementsHidden={true}
+                              accessible={false}
+                              allowFontScaling={false}
+                              ellipsizeMode="tail"
+                              importantForAccessibility="no-hide-descendants"
+                              maxFontSizeMultiplier={1.3}
+                              numberOfLines={1}
+                              style={
+                                Array [
+                                  Object {
+                                    "fontFamily": "Titillium Web",
+                                    "fontSize": 16,
+                                    "fontStyle": "normal",
+                                    "fontWeight": "700",
+                                  },
+                                  Object {
+                                    "color": "#0073E6",
+                                  },
+                                  Object {
+                                    "color": undefined,
+                                  },
+                                ]
+                              }
+                            >
+                              Vedi modelli F24
+                            </Text>
+                          </View>
+                        </View>
+                        <Modal
+                          accessibilityPositionChangeAnnouncement=""
+                          accessible={false}
+                          backdropComponent={[Function]}
+                          enableDismissOnClose={true}
+                          footerComponent={[Function]}
+                          handleComponent={[Function]}
+                          handleComponentAccessibility={
+                            Object {
+                              "accessible": false,
+                            }
+                          }
+                          hardwareAccelerated={false}
+                          importantForAccessibility="yes"
+                          onDismiss={[Function]}
+                          snapPoints={
+                            Array [
+                              1,
+                            ]
+                          }
+                          style={
+                            Object {
+                              "borderCurve": "continuous",
+                              "borderTopLeftRadius": 24,
+                              "borderTopRightRadius": 24,
+                              "overflow": "hidden",
+                            }
+                          }
+                          visible={true}
+                        >
+                          <RCTScrollView
+                            style={
+                              Object {
+                                "flex": 1,
+                                "paddingHorizontal": 24,
+                              }
+                            }
+                          >
+                            <View>
+                              <View
+                                onLayout={[Function]}
+                              >
+                                <View
+                                  accessibilityHint="pdf"
+                                  accessibilityLabel="0"
+                                  accessibilityRole="button"
+                                  accessibilityState={
+                                    Object {
+                                      "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]}
+                                >
+                                  <View
+                                    accessibilityElementsHidden={true}
+                                    importantForAccessibility="no-hide-descendants"
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "backgroundColor": "#FFFFFF",
+                                          "borderColor": "#CCD4DC",
+                                          "borderRadius": 8,
+                                          "borderStyle": "solid",
+                                          "borderWidth": 1,
+                                          "flexDirection": "row",
+                                          "paddingHorizontal": 16,
+                                          "paddingVertical": 16,
+                                        },
+                                        Object {
+                                          "transform": Array [
+                                            Object {
+                                              "scale": undefined,
+                                            },
+                                          ],
+                                        },
+                                        Object {
+                                          "opacity": 1,
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        Object {
+                                          "flex": 1,
+                                          "flexDirection": "column",
+                                        }
+                                      }
+                                    >
+                                      <Text
+                                        allowFontScaling={false}
+                                        color="blueIO-500"
+                                        defaultColor="blue"
+                                        defaultWeight="Bold"
+                                        font="TitilliumWeb"
+                                        fontStyle={
+                                          Object {
+                                            "fontSize": 14,
+                                            "lineHeight": 21,
+                                          }
+                                        }
+                                        numberOfLines={1}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "fontSize": 14,
+                                              "lineHeight": 21,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                            },
+                                          ]
+                                        }
+                                        weight="SemiBold"
+                                      >
+                                        0
+                                      </Text>
+                                      <View
+                                        style={
+                                          Object {
+                                            "height": 4,
+                                          }
+                                        }
+                                      />
+                                      <View
+                                        style={
+                                          Object {
+                                            "width": 44,
+                                          }
+                                        }
+                                      >
+                                        <View
+                                          style={
+                                            Array [
+                                              Object {
+                                                "alignItems": "center",
+                                                "borderCurve": "continuous",
+                                                "borderRadius": 24,
+                                                "flexDirection": "row",
+                                                "justifyContent": "center",
+                                                "paddingHorizontal": 8,
+                                                "paddingVertical": 4,
+                                              },
+                                              Object {
+                                                "backgroundColor": "#F4F5F8",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            ellipsizeMode="tail"
+                                            numberOfLines={1}
+                                            style={
+                                              Array [
+                                                Object {
+                                                  "alignSelf": "center",
+                                                  "flexShrink": 1,
+                                                  "fontSize": 12,
+                                                  "lineHeight": 16,
+                                                  "textTransform": "uppercase",
+                                                },
+                                                Object {
+                                                  "fontFamily": "Titillium Web",
+                                                  "fontStyle": "normal",
+                                                  "fontWeight": "600",
+                                                },
+                                                Object {
+                                                  "color": "#555C70",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            PDF
+                                          </Text>
+                                        </View>
+                                      </View>
+                                    </View>
+                                    <View
+                                      style={
+                                        Object {
+                                          "alignItems": "center",
+                                          "marginLeft": 16,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0B3EE3"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
+                                          }
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
+                                  </View>
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 8,
+                                    }
+                                  }
+                                />
+                                <View
+                                  accessibilityHint="pdf"
+                                  accessibilityLabel="1"
+                                  accessibilityRole="button"
+                                  accessibilityState={
+                                    Object {
+                                      "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]}
+                                >
+                                  <View
+                                    accessibilityElementsHidden={true}
+                                    importantForAccessibility="no-hide-descendants"
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "backgroundColor": "#FFFFFF",
+                                          "borderColor": "#CCD4DC",
+                                          "borderRadius": 8,
+                                          "borderStyle": "solid",
+                                          "borderWidth": 1,
+                                          "flexDirection": "row",
+                                          "paddingHorizontal": 16,
+                                          "paddingVertical": 16,
+                                        },
+                                        Object {
+                                          "transform": Array [
+                                            Object {
+                                              "scale": undefined,
+                                            },
+                                          ],
+                                        },
+                                        Object {
+                                          "opacity": 1,
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        Object {
+                                          "flex": 1,
+                                          "flexDirection": "column",
+                                        }
+                                      }
+                                    >
+                                      <Text
+                                        allowFontScaling={false}
+                                        color="blueIO-500"
+                                        defaultColor="blue"
+                                        defaultWeight="Bold"
+                                        font="TitilliumWeb"
+                                        fontStyle={
+                                          Object {
+                                            "fontSize": 14,
+                                            "lineHeight": 21,
+                                          }
+                                        }
+                                        numberOfLines={1}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "fontSize": 14,
+                                              "lineHeight": 21,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                            },
+                                          ]
+                                        }
+                                        weight="SemiBold"
+                                      >
+                                        1
+                                      </Text>
+                                      <View
+                                        style={
+                                          Object {
+                                            "height": 4,
+                                          }
+                                        }
+                                      />
+                                      <View
+                                        style={
+                                          Object {
+                                            "width": 44,
+                                          }
+                                        }
+                                      >
+                                        <View
+                                          style={
+                                            Array [
+                                              Object {
+                                                "alignItems": "center",
+                                                "borderCurve": "continuous",
+                                                "borderRadius": 24,
+                                                "flexDirection": "row",
+                                                "justifyContent": "center",
+                                                "paddingHorizontal": 8,
+                                                "paddingVertical": 4,
+                                              },
+                                              Object {
+                                                "backgroundColor": "#F4F5F8",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            ellipsizeMode="tail"
+                                            numberOfLines={1}
+                                            style={
+                                              Array [
+                                                Object {
+                                                  "alignSelf": "center",
+                                                  "flexShrink": 1,
+                                                  "fontSize": 12,
+                                                  "lineHeight": 16,
+                                                  "textTransform": "uppercase",
+                                                },
+                                                Object {
+                                                  "fontFamily": "Titillium Web",
+                                                  "fontStyle": "normal",
+                                                  "fontWeight": "600",
+                                                },
+                                                Object {
+                                                  "color": "#555C70",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            PDF
+                                          </Text>
+                                        </View>
+                                      </View>
+                                    </View>
+                                    <View
+                                      style={
+                                        Object {
+                                          "alignItems": "center",
+                                          "marginLeft": 16,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0B3EE3"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
+                                          }
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
+                                  </View>
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 8,
+                                    }
+                                  }
+                                />
+                                <View
+                                  accessibilityHint="pdf"
+                                  accessibilityLabel="2"
+                                  accessibilityRole="button"
+                                  accessibilityState={
+                                    Object {
+                                      "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]}
+                                >
+                                  <View
+                                    accessibilityElementsHidden={true}
+                                    importantForAccessibility="no-hide-descendants"
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "backgroundColor": "#FFFFFF",
+                                          "borderColor": "#CCD4DC",
+                                          "borderRadius": 8,
+                                          "borderStyle": "solid",
+                                          "borderWidth": 1,
+                                          "flexDirection": "row",
+                                          "paddingHorizontal": 16,
+                                          "paddingVertical": 16,
+                                        },
+                                        Object {
+                                          "transform": Array [
+                                            Object {
+                                              "scale": undefined,
+                                            },
+                                          ],
+                                        },
+                                        Object {
+                                          "opacity": 1,
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        Object {
+                                          "flex": 1,
+                                          "flexDirection": "column",
+                                        }
+                                      }
+                                    >
+                                      <Text
+                                        allowFontScaling={false}
+                                        color="blueIO-500"
+                                        defaultColor="blue"
+                                        defaultWeight="Bold"
+                                        font="TitilliumWeb"
+                                        fontStyle={
+                                          Object {
+                                            "fontSize": 14,
+                                            "lineHeight": 21,
+                                          }
+                                        }
+                                        numberOfLines={1}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "fontSize": 14,
+                                              "lineHeight": 21,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                            },
+                                          ]
+                                        }
+                                        weight="SemiBold"
+                                      >
+                                        2
+                                      </Text>
+                                      <View
+                                        style={
+                                          Object {
+                                            "height": 4,
+                                          }
+                                        }
+                                      />
+                                      <View
+                                        style={
+                                          Object {
+                                            "width": 44,
+                                          }
+                                        }
+                                      >
+                                        <View
+                                          style={
+                                            Array [
+                                              Object {
+                                                "alignItems": "center",
+                                                "borderCurve": "continuous",
+                                                "borderRadius": 24,
+                                                "flexDirection": "row",
+                                                "justifyContent": "center",
+                                                "paddingHorizontal": 8,
+                                                "paddingVertical": 4,
+                                              },
+                                              Object {
+                                                "backgroundColor": "#F4F5F8",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            ellipsizeMode="tail"
+                                            numberOfLines={1}
+                                            style={
+                                              Array [
+                                                Object {
+                                                  "alignSelf": "center",
+                                                  "flexShrink": 1,
+                                                  "fontSize": 12,
+                                                  "lineHeight": 16,
+                                                  "textTransform": "uppercase",
+                                                },
+                                                Object {
+                                                  "fontFamily": "Titillium Web",
+                                                  "fontStyle": "normal",
+                                                  "fontWeight": "600",
+                                                },
+                                                Object {
+                                                  "color": "#555C70",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            PDF
+                                          </Text>
+                                        </View>
+                                      </View>
+                                    </View>
+                                    <View
+                                      style={
+                                        Object {
+                                          "alignItems": "center",
+                                          "marginLeft": 16,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0B3EE3"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
+                                          }
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
+                                  </View>
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 8,
+                                    }
+                                  }
+                                />
+                                <View
+                                  accessibilityHint="pdf"
+                                  accessibilityLabel="3"
+                                  accessibilityRole="button"
+                                  accessibilityState={
+                                    Object {
+                                      "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]}
+                                >
+                                  <View
+                                    accessibilityElementsHidden={true}
+                                    importantForAccessibility="no-hide-descendants"
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "backgroundColor": "#FFFFFF",
+                                          "borderColor": "#CCD4DC",
+                                          "borderRadius": 8,
+                                          "borderStyle": "solid",
+                                          "borderWidth": 1,
+                                          "flexDirection": "row",
+                                          "paddingHorizontal": 16,
+                                          "paddingVertical": 16,
+                                        },
+                                        Object {
+                                          "transform": Array [
+                                            Object {
+                                              "scale": undefined,
+                                            },
+                                          ],
+                                        },
+                                        Object {
+                                          "opacity": 1,
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        Object {
+                                          "flex": 1,
+                                          "flexDirection": "column",
+                                        }
+                                      }
+                                    >
+                                      <Text
+                                        allowFontScaling={false}
+                                        color="blueIO-500"
+                                        defaultColor="blue"
+                                        defaultWeight="Bold"
+                                        font="TitilliumWeb"
+                                        fontStyle={
+                                          Object {
+                                            "fontSize": 14,
+                                            "lineHeight": 21,
+                                          }
+                                        }
+                                        numberOfLines={1}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "fontSize": 14,
+                                              "lineHeight": 21,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                            },
+                                          ]
+                                        }
+                                        weight="SemiBold"
+                                      >
+                                        3
+                                      </Text>
+                                      <View
+                                        style={
+                                          Object {
+                                            "height": 4,
+                                          }
+                                        }
+                                      />
+                                      <View
+                                        style={
+                                          Object {
+                                            "width": 44,
+                                          }
+                                        }
+                                      >
+                                        <View
+                                          style={
+                                            Array [
+                                              Object {
+                                                "alignItems": "center",
+                                                "borderCurve": "continuous",
+                                                "borderRadius": 24,
+                                                "flexDirection": "row",
+                                                "justifyContent": "center",
+                                                "paddingHorizontal": 8,
+                                                "paddingVertical": 4,
+                                              },
+                                              Object {
+                                                "backgroundColor": "#F4F5F8",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            ellipsizeMode="tail"
+                                            numberOfLines={1}
+                                            style={
+                                              Array [
+                                                Object {
+                                                  "alignSelf": "center",
+                                                  "flexShrink": 1,
+                                                  "fontSize": 12,
+                                                  "lineHeight": 16,
+                                                  "textTransform": "uppercase",
+                                                },
+                                                Object {
+                                                  "fontFamily": "Titillium Web",
+                                                  "fontStyle": "normal",
+                                                  "fontWeight": "600",
+                                                },
+                                                Object {
+                                                  "color": "#555C70",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            PDF
+                                          </Text>
+                                        </View>
+                                      </View>
+                                    </View>
+                                    <View
+                                      style={
+                                        Object {
+                                          "alignItems": "center",
+                                          "marginLeft": 16,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0B3EE3"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
+                                          }
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
+                                  </View>
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 8,
+                                    }
+                                  }
+                                />
+                                <View
+                                  accessibilityHint="pdf"
+                                  accessibilityLabel="4"
+                                  accessibilityRole="button"
+                                  accessibilityState={
+                                    Object {
+                                      "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]}
+                                >
+                                  <View
+                                    accessibilityElementsHidden={true}
+                                    importantForAccessibility="no-hide-descendants"
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "backgroundColor": "#FFFFFF",
+                                          "borderColor": "#CCD4DC",
+                                          "borderRadius": 8,
+                                          "borderStyle": "solid",
+                                          "borderWidth": 1,
+                                          "flexDirection": "row",
+                                          "paddingHorizontal": 16,
+                                          "paddingVertical": 16,
+                                        },
+                                        Object {
+                                          "transform": Array [
+                                            Object {
+                                              "scale": undefined,
+                                            },
+                                          ],
+                                        },
+                                        Object {
+                                          "opacity": 1,
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        Object {
+                                          "flex": 1,
+                                          "flexDirection": "column",
+                                        }
+                                      }
+                                    >
+                                      <Text
+                                        allowFontScaling={false}
+                                        color="blueIO-500"
+                                        defaultColor="blue"
+                                        defaultWeight="Bold"
+                                        font="TitilliumWeb"
+                                        fontStyle={
+                                          Object {
+                                            "fontSize": 14,
+                                            "lineHeight": 21,
+                                          }
+                                        }
+                                        numberOfLines={1}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "fontSize": 14,
+                                              "lineHeight": 21,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                            },
+                                          ]
+                                        }
+                                        weight="SemiBold"
+                                      >
+                                        4
+                                      </Text>
+                                      <View
+                                        style={
+                                          Object {
+                                            "height": 4,
+                                          }
+                                        }
+                                      />
+                                      <View
+                                        style={
+                                          Object {
+                                            "width": 44,
+                                          }
+                                        }
+                                      >
+                                        <View
+                                          style={
+                                            Array [
+                                              Object {
+                                                "alignItems": "center",
+                                                "borderCurve": "continuous",
+                                                "borderRadius": 24,
+                                                "flexDirection": "row",
+                                                "justifyContent": "center",
+                                                "paddingHorizontal": 8,
+                                                "paddingVertical": 4,
+                                              },
+                                              Object {
+                                                "backgroundColor": "#F4F5F8",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            ellipsizeMode="tail"
+                                            numberOfLines={1}
+                                            style={
+                                              Array [
+                                                Object {
+                                                  "alignSelf": "center",
+                                                  "flexShrink": 1,
+                                                  "fontSize": 12,
+                                                  "lineHeight": 16,
+                                                  "textTransform": "uppercase",
+                                                },
+                                                Object {
+                                                  "fontFamily": "Titillium Web",
+                                                  "fontStyle": "normal",
+                                                  "fontWeight": "600",
+                                                },
+                                                Object {
+                                                  "color": "#555C70",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            PDF
+                                          </Text>
+                                        </View>
+                                      </View>
+                                    </View>
+                                    <View
+                                      style={
+                                        Object {
+                                          "alignItems": "center",
+                                          "marginLeft": 16,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0B3EE3"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
+                                          }
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
+                                  </View>
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 8,
+                                    }
+                                  }
+                                />
+                                <View
+                                  accessibilityHint="pdf"
+                                  accessibilityLabel="5"
+                                  accessibilityRole="button"
+                                  accessibilityState={
+                                    Object {
+                                      "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]}
+                                >
+                                  <View
+                                    accessibilityElementsHidden={true}
+                                    importantForAccessibility="no-hide-descendants"
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "backgroundColor": "#FFFFFF",
+                                          "borderColor": "#CCD4DC",
+                                          "borderRadius": 8,
+                                          "borderStyle": "solid",
+                                          "borderWidth": 1,
+                                          "flexDirection": "row",
+                                          "paddingHorizontal": 16,
+                                          "paddingVertical": 16,
+                                        },
+                                        Object {
+                                          "transform": Array [
+                                            Object {
+                                              "scale": undefined,
+                                            },
+                                          ],
+                                        },
+                                        Object {
+                                          "opacity": 1,
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        Object {
+                                          "flex": 1,
+                                          "flexDirection": "column",
+                                        }
+                                      }
+                                    >
+                                      <Text
+                                        allowFontScaling={false}
+                                        color="blueIO-500"
+                                        defaultColor="blue"
+                                        defaultWeight="Bold"
+                                        font="TitilliumWeb"
+                                        fontStyle={
+                                          Object {
+                                            "fontSize": 14,
+                                            "lineHeight": 21,
+                                          }
+                                        }
+                                        numberOfLines={1}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "fontSize": 14,
+                                              "lineHeight": 21,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                            },
+                                          ]
+                                        }
+                                        weight="SemiBold"
+                                      >
+                                        5
+                                      </Text>
+                                      <View
+                                        style={
+                                          Object {
+                                            "height": 4,
+                                          }
+                                        }
+                                      />
+                                      <View
+                                        style={
+                                          Object {
+                                            "width": 44,
+                                          }
+                                        }
+                                      >
+                                        <View
+                                          style={
+                                            Array [
+                                              Object {
+                                                "alignItems": "center",
+                                                "borderCurve": "continuous",
+                                                "borderRadius": 24,
+                                                "flexDirection": "row",
+                                                "justifyContent": "center",
+                                                "paddingHorizontal": 8,
+                                                "paddingVertical": 4,
+                                              },
+                                              Object {
+                                                "backgroundColor": "#F4F5F8",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            ellipsizeMode="tail"
+                                            numberOfLines={1}
+                                            style={
+                                              Array [
+                                                Object {
+                                                  "alignSelf": "center",
+                                                  "flexShrink": 1,
+                                                  "fontSize": 12,
+                                                  "lineHeight": 16,
+                                                  "textTransform": "uppercase",
+                                                },
+                                                Object {
+                                                  "fontFamily": "Titillium Web",
+                                                  "fontStyle": "normal",
+                                                  "fontWeight": "600",
+                                                },
+                                                Object {
+                                                  "color": "#555C70",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            PDF
+                                          </Text>
+                                        </View>
+                                      </View>
+                                    </View>
+                                    <View
+                                      style={
+                                        Object {
+                                          "alignItems": "center",
+                                          "marginLeft": 16,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0B3EE3"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
+                                          }
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
+                                  </View>
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 8,
+                                    }
+                                  }
+                                />
+                                <View
+                                  accessibilityHint="pdf"
+                                  accessibilityLabel="6"
+                                  accessibilityRole="button"
+                                  accessibilityState={
+                                    Object {
+                                      "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]}
+                                >
+                                  <View
+                                    accessibilityElementsHidden={true}
+                                    importantForAccessibility="no-hide-descendants"
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "backgroundColor": "#FFFFFF",
+                                          "borderColor": "#CCD4DC",
+                                          "borderRadius": 8,
+                                          "borderStyle": "solid",
+                                          "borderWidth": 1,
+                                          "flexDirection": "row",
+                                          "paddingHorizontal": 16,
+                                          "paddingVertical": 16,
+                                        },
+                                        Object {
+                                          "transform": Array [
+                                            Object {
+                                              "scale": undefined,
+                                            },
+                                          ],
+                                        },
+                                        Object {
+                                          "opacity": 1,
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        Object {
+                                          "flex": 1,
+                                          "flexDirection": "column",
+                                        }
+                                      }
+                                    >
+                                      <Text
+                                        allowFontScaling={false}
+                                        color="blueIO-500"
+                                        defaultColor="blue"
+                                        defaultWeight="Bold"
+                                        font="TitilliumWeb"
+                                        fontStyle={
+                                          Object {
+                                            "fontSize": 14,
+                                            "lineHeight": 21,
+                                          }
+                                        }
+                                        numberOfLines={1}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "fontSize": 14,
+                                              "lineHeight": 21,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                            },
+                                          ]
+                                        }
+                                        weight="SemiBold"
+                                      >
+                                        6
+                                      </Text>
+                                      <View
+                                        style={
+                                          Object {
+                                            "height": 4,
+                                          }
+                                        }
+                                      />
+                                      <View
+                                        style={
+                                          Object {
+                                            "width": 44,
+                                          }
+                                        }
+                                      >
+                                        <View
+                                          style={
+                                            Array [
+                                              Object {
+                                                "alignItems": "center",
+                                                "borderCurve": "continuous",
+                                                "borderRadius": 24,
+                                                "flexDirection": "row",
+                                                "justifyContent": "center",
+                                                "paddingHorizontal": 8,
+                                                "paddingVertical": 4,
+                                              },
+                                              Object {
+                                                "backgroundColor": "#F4F5F8",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            ellipsizeMode="tail"
+                                            numberOfLines={1}
+                                            style={
+                                              Array [
+                                                Object {
+                                                  "alignSelf": "center",
+                                                  "flexShrink": 1,
+                                                  "fontSize": 12,
+                                                  "lineHeight": 16,
+                                                  "textTransform": "uppercase",
+                                                },
+                                                Object {
+                                                  "fontFamily": "Titillium Web",
+                                                  "fontStyle": "normal",
+                                                  "fontWeight": "600",
+                                                },
+                                                Object {
+                                                  "color": "#555C70",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            PDF
+                                          </Text>
+                                        </View>
+                                      </View>
+                                    </View>
+                                    <View
+                                      style={
+                                        Object {
+                                          "alignItems": "center",
+                                          "marginLeft": 16,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0B3EE3"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
+                                          }
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
+                                  </View>
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 8,
+                                    }
+                                  }
+                                />
+                                <View
+                                  accessibilityHint="pdf"
+                                  accessibilityLabel="7"
+                                  accessibilityRole="button"
+                                  accessibilityState={
+                                    Object {
+                                      "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]}
+                                >
+                                  <View
+                                    accessibilityElementsHidden={true}
+                                    importantForAccessibility="no-hide-descendants"
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "backgroundColor": "#FFFFFF",
+                                          "borderColor": "#CCD4DC",
+                                          "borderRadius": 8,
+                                          "borderStyle": "solid",
+                                          "borderWidth": 1,
+                                          "flexDirection": "row",
+                                          "paddingHorizontal": 16,
+                                          "paddingVertical": 16,
+                                        },
+                                        Object {
+                                          "transform": Array [
+                                            Object {
+                                              "scale": undefined,
+                                            },
+                                          ],
+                                        },
+                                        Object {
+                                          "opacity": 1,
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        Object {
+                                          "flex": 1,
+                                          "flexDirection": "column",
+                                        }
+                                      }
+                                    >
+                                      <Text
+                                        allowFontScaling={false}
+                                        color="blueIO-500"
+                                        defaultColor="blue"
+                                        defaultWeight="Bold"
+                                        font="TitilliumWeb"
+                                        fontStyle={
+                                          Object {
+                                            "fontSize": 14,
+                                            "lineHeight": 21,
+                                          }
+                                        }
+                                        numberOfLines={1}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "fontSize": 14,
+                                              "lineHeight": 21,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                            },
+                                          ]
+                                        }
+                                        weight="SemiBold"
+                                      >
+                                        7
+                                      </Text>
+                                      <View
+                                        style={
+                                          Object {
+                                            "height": 4,
+                                          }
+                                        }
+                                      />
+                                      <View
+                                        style={
+                                          Object {
+                                            "width": 44,
+                                          }
+                                        }
+                                      >
+                                        <View
+                                          style={
+                                            Array [
+                                              Object {
+                                                "alignItems": "center",
+                                                "borderCurve": "continuous",
+                                                "borderRadius": 24,
+                                                "flexDirection": "row",
+                                                "justifyContent": "center",
+                                                "paddingHorizontal": 8,
+                                                "paddingVertical": 4,
+                                              },
+                                              Object {
+                                                "backgroundColor": "#F4F5F8",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            ellipsizeMode="tail"
+                                            numberOfLines={1}
+                                            style={
+                                              Array [
+                                                Object {
+                                                  "alignSelf": "center",
+                                                  "flexShrink": 1,
+                                                  "fontSize": 12,
+                                                  "lineHeight": 16,
+                                                  "textTransform": "uppercase",
+                                                },
+                                                Object {
+                                                  "fontFamily": "Titillium Web",
+                                                  "fontStyle": "normal",
+                                                  "fontWeight": "600",
+                                                },
+                                                Object {
+                                                  "color": "#555C70",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            PDF
+                                          </Text>
+                                        </View>
+                                      </View>
+                                    </View>
+                                    <View
+                                      style={
+                                        Object {
+                                          "alignItems": "center",
+                                          "marginLeft": 16,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0B3EE3"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
+                                          }
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
+                                  </View>
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 8,
+                                    }
+                                  }
+                                />
+                                <View
+                                  accessibilityHint="pdf"
+                                  accessibilityLabel="8"
+                                  accessibilityRole="button"
+                                  accessibilityState={
+                                    Object {
+                                      "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]}
+                                >
+                                  <View
+                                    accessibilityElementsHidden={true}
+                                    importantForAccessibility="no-hide-descendants"
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "backgroundColor": "#FFFFFF",
+                                          "borderColor": "#CCD4DC",
+                                          "borderRadius": 8,
+                                          "borderStyle": "solid",
+                                          "borderWidth": 1,
+                                          "flexDirection": "row",
+                                          "paddingHorizontal": 16,
+                                          "paddingVertical": 16,
+                                        },
+                                        Object {
+                                          "transform": Array [
+                                            Object {
+                                              "scale": undefined,
+                                            },
+                                          ],
+                                        },
+                                        Object {
+                                          "opacity": 1,
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        Object {
+                                          "flex": 1,
+                                          "flexDirection": "column",
+                                        }
+                                      }
+                                    >
+                                      <Text
+                                        allowFontScaling={false}
+                                        color="blueIO-500"
+                                        defaultColor="blue"
+                                        defaultWeight="Bold"
+                                        font="TitilliumWeb"
+                                        fontStyle={
+                                          Object {
+                                            "fontSize": 14,
+                                            "lineHeight": 21,
+                                          }
+                                        }
+                                        numberOfLines={1}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "fontSize": 14,
+                                              "lineHeight": 21,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                            },
+                                          ]
+                                        }
+                                        weight="SemiBold"
+                                      >
+                                        8
+                                      </Text>
+                                      <View
+                                        style={
+                                          Object {
+                                            "height": 4,
+                                          }
+                                        }
+                                      />
+                                      <View
+                                        style={
+                                          Object {
+                                            "width": 44,
+                                          }
+                                        }
+                                      >
+                                        <View
+                                          style={
+                                            Array [
+                                              Object {
+                                                "alignItems": "center",
+                                                "borderCurve": "continuous",
+                                                "borderRadius": 24,
+                                                "flexDirection": "row",
+                                                "justifyContent": "center",
+                                                "paddingHorizontal": 8,
+                                                "paddingVertical": 4,
+                                              },
+                                              Object {
+                                                "backgroundColor": "#F4F5F8",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            ellipsizeMode="tail"
+                                            numberOfLines={1}
+                                            style={
+                                              Array [
+                                                Object {
+                                                  "alignSelf": "center",
+                                                  "flexShrink": 1,
+                                                  "fontSize": 12,
+                                                  "lineHeight": 16,
+                                                  "textTransform": "uppercase",
+                                                },
+                                                Object {
+                                                  "fontFamily": "Titillium Web",
+                                                  "fontStyle": "normal",
+                                                  "fontWeight": "600",
+                                                },
+                                                Object {
+                                                  "color": "#555C70",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            PDF
+                                          </Text>
+                                        </View>
+                                      </View>
+                                    </View>
+                                    <View
+                                      style={
+                                        Object {
+                                          "alignItems": "center",
+                                          "marginLeft": 16,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0B3EE3"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
+                                          }
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
+                                  </View>
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 8,
+                                    }
+                                  }
+                                />
+                                <View
+                                  accessibilityHint="pdf"
+                                  accessibilityLabel="9"
+                                  accessibilityRole="button"
+                                  accessibilityState={
+                                    Object {
+                                      "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]}
+                                >
+                                  <View
+                                    accessibilityElementsHidden={true}
+                                    importantForAccessibility="no-hide-descendants"
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "backgroundColor": "#FFFFFF",
+                                          "borderColor": "#CCD4DC",
+                                          "borderRadius": 8,
+                                          "borderStyle": "solid",
+                                          "borderWidth": 1,
+                                          "flexDirection": "row",
+                                          "paddingHorizontal": 16,
+                                          "paddingVertical": 16,
+                                        },
+                                        Object {
+                                          "transform": Array [
+                                            Object {
+                                              "scale": undefined,
+                                            },
+                                          ],
+                                        },
+                                        Object {
+                                          "opacity": 1,
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        Object {
+                                          "flex": 1,
+                                          "flexDirection": "column",
+                                        }
+                                      }
+                                    >
+                                      <Text
+                                        allowFontScaling={false}
+                                        color="blueIO-500"
+                                        defaultColor="blue"
+                                        defaultWeight="Bold"
+                                        font="TitilliumWeb"
+                                        fontStyle={
+                                          Object {
+                                            "fontSize": 14,
+                                            "lineHeight": 21,
+                                          }
+                                        }
+                                        numberOfLines={1}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "fontSize": 14,
+                                              "lineHeight": 21,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                            },
+                                          ]
+                                        }
+                                        weight="SemiBold"
+                                      >
+                                        9
+                                      </Text>
+                                      <View
+                                        style={
+                                          Object {
+                                            "height": 4,
+                                          }
+                                        }
+                                      />
+                                      <View
+                                        style={
+                                          Object {
+                                            "width": 44,
+                                          }
+                                        }
+                                      >
+                                        <View
+                                          style={
+                                            Array [
+                                              Object {
+                                                "alignItems": "center",
+                                                "borderCurve": "continuous",
+                                                "borderRadius": 24,
+                                                "flexDirection": "row",
+                                                "justifyContent": "center",
+                                                "paddingHorizontal": 8,
+                                                "paddingVertical": 4,
+                                              },
+                                              Object {
+                                                "backgroundColor": "#F4F5F8",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            ellipsizeMode="tail"
+                                            numberOfLines={1}
+                                            style={
+                                              Array [
+                                                Object {
+                                                  "alignSelf": "center",
+                                                  "flexShrink": 1,
+                                                  "fontSize": 12,
+                                                  "lineHeight": 16,
+                                                  "textTransform": "uppercase",
+                                                },
+                                                Object {
+                                                  "fontFamily": "Titillium Web",
+                                                  "fontStyle": "normal",
+                                                  "fontWeight": "600",
+                                                },
+                                                Object {
+                                                  "color": "#555C70",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            PDF
+                                          </Text>
+                                        </View>
+                                      </View>
+                                    </View>
+                                    <View
+                                      style={
+                                        Object {
+                                          "alignItems": "center",
+                                          "marginLeft": 16,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0B3EE3"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
+                                          }
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                          </RCTScrollView>
+                        </Modal>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`F24ListBottomSheetLink should be snapshot for an 0 items F24 list 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "alignSelf": "center",
+                            "justifyContent": "center",
+                          }
+                        }
+                      >
+                        <View
+                          accessibilityLabel="Vedi modelli F24"
+                          accessibilityRole="button"
+                          accessibilityState={
+                            Object {
+                              "disabled": false,
+                            }
+                          }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          hitSlop={
+                            Object {
+                              "bottom": 14,
+                              "left": 24,
+                              "right": 24,
+                              "top": 14,
+                            }
+                          }
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          style={
+                            Object {
+                              "alignSelf": "flex-start",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "elevation": 0,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "textAlignVertical": "center",
+                                },
+                                false,
+                                Object {},
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <Text
+                              accessibilityElementsHidden={true}
+                              accessible={false}
+                              allowFontScaling={false}
+                              ellipsizeMode="tail"
+                              importantForAccessibility="no-hide-descendants"
+                              maxFontSizeMultiplier={1.3}
+                              numberOfLines={1}
+                              style={
+                                Array [
+                                  Object {
+                                    "fontFamily": "Titillium Web",
+                                    "fontSize": 16,
+                                    "fontStyle": "normal",
+                                    "fontWeight": "700",
+                                  },
+                                  Object {
+                                    "color": "#0073E6",
+                                  },
+                                  Object {
+                                    "color": undefined,
+                                  },
+                                ]
+                              }
+                            >
+                              Vedi modelli F24
+                            </Text>
+                          </View>
+                        </View>
+                        <Modal
+                          accessibilityPositionChangeAnnouncement=""
+                          accessible={false}
+                          backdropComponent={[Function]}
+                          enableDismissOnClose={true}
+                          footerComponent={[Function]}
+                          handleComponent={[Function]}
+                          handleComponentAccessibility={
+                            Object {
+                              "accessible": false,
+                            }
+                          }
+                          hardwareAccelerated={false}
+                          importantForAccessibility="yes"
+                          onDismiss={[Function]}
+                          snapPoints={
+                            Array [
+                              1,
+                            ]
+                          }
+                          style={
+                            Object {
+                              "borderCurve": "continuous",
+                              "borderTopLeftRadius": 24,
+                              "borderTopRightRadius": 24,
+                              "overflow": "hidden",
+                            }
+                          }
+                          visible={true}
+                        >
+                          <RCTScrollView
+                            style={
+                              Object {
+                                "flex": 1,
+                                "paddingHorizontal": 24,
+                              }
+                            }
+                          >
+                            <View>
+                              <View
+                                onLayout={[Function]}
+                              />
+                            </View>
+                          </RCTScrollView>
+                        </Modal>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`F24ListBottomSheetLink should be snapshot for an 1 item F24 list 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={2}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "alignSelf": "center",
+                            "justifyContent": "center",
+                          }
+                        }
+                      >
+                        <View
+                          accessibilityLabel="Vedi modelli F24"
+                          accessibilityRole="button"
+                          accessibilityState={
+                            Object {
+                              "disabled": false,
+                            }
+                          }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          hitSlop={
+                            Object {
+                              "bottom": 14,
+                              "left": 24,
+                              "right": 24,
+                              "top": 14,
+                            }
+                          }
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          style={
+                            Object {
+                              "alignSelf": "flex-start",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "elevation": 0,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "textAlignVertical": "center",
+                                },
+                                false,
+                                Object {},
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <Text
+                              accessibilityElementsHidden={true}
+                              accessible={false}
+                              allowFontScaling={false}
+                              ellipsizeMode="tail"
+                              importantForAccessibility="no-hide-descendants"
+                              maxFontSizeMultiplier={1.3}
+                              numberOfLines={1}
+                              style={
+                                Array [
+                                  Object {
+                                    "fontFamily": "Titillium Web",
+                                    "fontSize": 16,
+                                    "fontStyle": "normal",
+                                    "fontWeight": "700",
+                                  },
+                                  Object {
+                                    "color": "#0073E6",
+                                  },
+                                  Object {
+                                    "color": undefined,
+                                  },
+                                ]
+                              }
+                            >
+                              Vedi modelli F24
+                            </Text>
+                          </View>
+                        </View>
+                        <Modal
+                          accessibilityPositionChangeAnnouncement=""
+                          accessible={false}
+                          backdropComponent={[Function]}
+                          enableDismissOnClose={true}
+                          footerComponent={[Function]}
+                          handleComponent={[Function]}
+                          handleComponentAccessibility={
+                            Object {
+                              "accessible": false,
+                            }
+                          }
+                          hardwareAccelerated={false}
+                          importantForAccessibility="yes"
+                          onDismiss={[Function]}
+                          snapPoints={
+                            Array [
+                              1,
+                            ]
+                          }
+                          style={
+                            Object {
+                              "borderCurve": "continuous",
+                              "borderTopLeftRadius": 24,
+                              "borderTopRightRadius": 24,
+                              "overflow": "hidden",
+                            }
+                          }
+                          visible={true}
+                        >
+                          <RCTScrollView
+                            style={
+                              Object {
+                                "flex": 1,
+                                "paddingHorizontal": 24,
+                              }
+                            }
+                          >
+                            <View>
+                              <View
+                                onLayout={[Function]}
+                              >
+                                <View
+                                  accessibilityHint="pdf"
+                                  accessibilityLabel="0"
+                                  accessibilityRole="button"
+                                  accessibilityState={
+                                    Object {
+                                      "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]}
+                                >
+                                  <View
+                                    accessibilityElementsHidden={true}
+                                    importantForAccessibility="no-hide-descendants"
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "backgroundColor": "#FFFFFF",
+                                          "borderColor": "#CCD4DC",
+                                          "borderRadius": 8,
+                                          "borderStyle": "solid",
+                                          "borderWidth": 1,
+                                          "flexDirection": "row",
+                                          "paddingHorizontal": 16,
+                                          "paddingVertical": 16,
+                                        },
+                                        Object {
+                                          "transform": Array [
+                                            Object {
+                                              "scale": undefined,
+                                            },
+                                          ],
+                                        },
+                                        Object {
+                                          "opacity": 1,
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        Object {
+                                          "flex": 1,
+                                          "flexDirection": "column",
+                                        }
+                                      }
+                                    >
+                                      <Text
+                                        allowFontScaling={false}
+                                        color="blueIO-500"
+                                        defaultColor="blue"
+                                        defaultWeight="Bold"
+                                        font="TitilliumWeb"
+                                        fontStyle={
+                                          Object {
+                                            "fontSize": 14,
+                                            "lineHeight": 21,
+                                          }
+                                        }
+                                        numberOfLines={1}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "fontSize": 14,
+                                              "lineHeight": 21,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                            },
+                                          ]
+                                        }
+                                        weight="SemiBold"
+                                      >
+                                        0
+                                      </Text>
+                                      <View
+                                        style={
+                                          Object {
+                                            "height": 4,
+                                          }
+                                        }
+                                      />
+                                      <View
+                                        style={
+                                          Object {
+                                            "width": 44,
+                                          }
+                                        }
+                                      >
+                                        <View
+                                          style={
+                                            Array [
+                                              Object {
+                                                "alignItems": "center",
+                                                "borderCurve": "continuous",
+                                                "borderRadius": 24,
+                                                "flexDirection": "row",
+                                                "justifyContent": "center",
+                                                "paddingHorizontal": 8,
+                                                "paddingVertical": 4,
+                                              },
+                                              Object {
+                                                "backgroundColor": "#F4F5F8",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            ellipsizeMode="tail"
+                                            numberOfLines={1}
+                                            style={
+                                              Array [
+                                                Object {
+                                                  "alignSelf": "center",
+                                                  "flexShrink": 1,
+                                                  "fontSize": 12,
+                                                  "lineHeight": 16,
+                                                  "textTransform": "uppercase",
+                                                },
+                                                Object {
+                                                  "fontFamily": "Titillium Web",
+                                                  "fontStyle": "normal",
+                                                  "fontWeight": "600",
+                                                },
+                                                Object {
+                                                  "color": "#555C70",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            PDF
+                                          </Text>
+                                        </View>
+                                      </View>
+                                    </View>
+                                    <View
+                                      style={
+                                        Object {
+                                          "alignItems": "center",
+                                          "marginLeft": 16,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0B3EE3"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
+                                          }
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                          </RCTScrollView>
+                        </Modal>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/pn/components/__test__/__snapshots__/F24Section.test.tsx.snap b/ts/features/pn/components/__test__/__snapshots__/F24Section.test.tsx.snap
new file mode 100644
index 00000000000..290dbb64d72
--- /dev/null
+++ b/ts/features/pn/components/__test__/__snapshots__/F24Section.test.tsx.snap
@@ -0,0 +1,3242 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`F24Section should match snapshot when there are more than one F24 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={5}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityLabel="Modelli F24"
+                        accessible={true}
+                        style={
+                          Object {
+                            "marginHorizontal": -24,
+                            "paddingHorizontal": 24,
+                            "paddingVertical": 12,
+                          }
+                        }
+                      >
+                        <View
+                          importantForAccessibility="no-hide-descendants"
+                          style={
+                            Object {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "space-between",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "marginRight": 8,
+                              }
+                            }
+                          >
+                            <RNSVGSvgView
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessible={false}
+                              align="xMidYMid"
+                              bbHeight={24}
+                              bbWidth={24}
+                              focusable={false}
+                              height={24}
+                              importantForAccessibility="no-hide-descendants"
+                              meetOrSlice={0}
+                              minX={0}
+                              minY={0}
+                              style={
+                                Array [
+                                  Object {
+                                    "backgroundColor": "transparent",
+                                    "borderWidth": 0,
+                                  },
+                                  Object {
+                                    "color": "#BBC2D6",
+                                  },
+                                  Object {
+                                    "flex": 0,
+                                    "height": 24,
+                                    "width": 24,
+                                  },
+                                ]
+                              }
+                              tintColor="#BBC2D6"
+                              vbHeight={24}
+                              vbWidth={24}
+                              width={24}
+                            >
+                              <RNSVGGroup
+                                fill={
+                                  Object {
+                                    "payload": 4278190080,
+                                    "type": 0,
+                                  }
+                                }
+                              >
+                                <RNSVGPath
+                                  clipRule={0}
+                                  d="M22 6.96129V19.5684C22 20.9481 20.913 22 19.6535 22H4.34646C3.08696 22 2 20.9481 2 19.5684V3C2 2.44772 2.44771 2 3 2H6.33457C6.67726 2 6.99609 2.17548 7.17942 2.46501L7.92109 3.63624C8.83777 5.08388 10.4319 5.96129 12.1454 5.96129H21C21.5523 5.96129 22 6.40901 22 6.96129ZM12.1454 3.96129C11.1173 3.96129 10.1608 3.43485 9.6108 2.56626L8.86914 1.39503C8.31913 0.526447 7.36265 0 6.33457 0H3C1.34315 0 0 1.34314 0 3V19.5684C0 22.0159 1.94598 24 4.34646 24H19.6535C22.054 24 24 22.0159 24 19.5684V6.96129C24 5.30444 22.6569 3.96129 21 3.96129H12.1454ZM7 17C6.44772 17 6 17.4477 6 18C6 18.5523 6.44772 19 7 19H17C17.5523 19 18 18.5523 18 18C18 17.4477 17.5523 17 17 17H7Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  fillRule={0}
+                                  propList={
+                                    Array [
+                                      "fill",
+                                      "fillRule",
+                                    ]
+                                  }
+                                />
+                              </RNSVGGroup>
+                            </RNSVGSvgView>
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityElementsHidden={false}
+                              accessible={true}
+                              importantForAccessibility="yes"
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="grey-700"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#555C70",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Modelli F24
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <Text
+                        allowFontScaling={false}
+                        color="grey-850"
+                        defaultColor="bluegrey"
+                        defaultWeight="Regular"
+                        font="TitilliumWeb"
+                        fontStyle={
+                          Object {
+                            "fontSize": 16,
+                            "lineHeight": 24,
+                          }
+                        }
+                        style={
+                          Array [
+                            Object {
+                              "fontSize": 16,
+                              "lineHeight": 24,
+                            },
+                            Object {
+                              "color": "#2B2E38",
+                              "fontFamily": "Titillium Web",
+                              "fontStyle": "normal",
+                              "fontWeight": "400",
+                            },
+                          ]
+                        }
+                        weight="Regular"
+                      >
+                        Se preferisci, puoi pagare questa notifica tramite F24.
+                      </Text>
+                      <View
+                        style={
+                          Object {
+                            "height": 24,
+                          }
+                        }
+                      />
+                      <View
+                        style={
+                          Object {
+                            "alignSelf": "center",
+                            "justifyContent": "center",
+                          }
+                        }
+                      >
+                        <View
+                          accessibilityLabel="Vedi modelli F24"
+                          accessibilityRole="button"
+                          accessibilityState={
+                            Object {
+                              "disabled": false,
+                            }
+                          }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          hitSlop={
+                            Object {
+                              "bottom": 14,
+                              "left": 24,
+                              "right": 24,
+                              "top": 14,
+                            }
+                          }
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          style={
+                            Object {
+                              "alignSelf": "flex-start",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "elevation": 0,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "textAlignVertical": "center",
+                                },
+                                false,
+                                Object {},
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <Text
+                              accessibilityElementsHidden={true}
+                              accessible={false}
+                              allowFontScaling={false}
+                              ellipsizeMode="tail"
+                              importantForAccessibility="no-hide-descendants"
+                              maxFontSizeMultiplier={1.3}
+                              numberOfLines={1}
+                              style={
+                                Array [
+                                  Object {
+                                    "fontFamily": "Titillium Web",
+                                    "fontSize": 16,
+                                    "fontStyle": "normal",
+                                    "fontWeight": "700",
+                                  },
+                                  Object {
+                                    "color": "#0073E6",
+                                  },
+                                  Object {
+                                    "color": undefined,
+                                  },
+                                ]
+                              }
+                            >
+                              Vedi modelli F24
+                            </Text>
+                          </View>
+                        </View>
+                        <Modal
+                          accessibilityPositionChangeAnnouncement=""
+                          accessible={false}
+                          backdropComponent={[Function]}
+                          enableDismissOnClose={true}
+                          footerComponent={[Function]}
+                          handleComponent={[Function]}
+                          handleComponentAccessibility={
+                            Object {
+                              "accessible": false,
+                            }
+                          }
+                          hardwareAccelerated={false}
+                          importantForAccessibility="yes"
+                          onDismiss={[Function]}
+                          snapPoints={
+                            Array [
+                              1,
+                            ]
+                          }
+                          style={
+                            Object {
+                              "borderCurve": "continuous",
+                              "borderTopLeftRadius": 24,
+                              "borderTopRightRadius": 24,
+                              "overflow": "hidden",
+                            }
+                          }
+                          visible={true}
+                        >
+                          <RCTScrollView
+                            style={
+                              Object {
+                                "flex": 1,
+                                "paddingHorizontal": 24,
+                              }
+                            }
+                          >
+                            <View>
+                              <View
+                                onLayout={[Function]}
+                              >
+                                <View
+                                  accessibilityHint="pdf"
+                                  accessibilityLabel="2"
+                                  accessibilityRole="button"
+                                  accessibilityState={
+                                    Object {
+                                      "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]}
+                                >
+                                  <View
+                                    accessibilityElementsHidden={true}
+                                    importantForAccessibility="no-hide-descendants"
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "backgroundColor": "#FFFFFF",
+                                          "borderColor": "#CCD4DC",
+                                          "borderRadius": 8,
+                                          "borderStyle": "solid",
+                                          "borderWidth": 1,
+                                          "flexDirection": "row",
+                                          "paddingHorizontal": 16,
+                                          "paddingVertical": 16,
+                                        },
+                                        Object {
+                                          "transform": Array [
+                                            Object {
+                                              "scale": undefined,
+                                            },
+                                          ],
+                                        },
+                                        Object {
+                                          "opacity": 1,
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        Object {
+                                          "flex": 1,
+                                          "flexDirection": "column",
+                                        }
+                                      }
+                                    >
+                                      <Text
+                                        allowFontScaling={false}
+                                        color="blueIO-500"
+                                        defaultColor="blue"
+                                        defaultWeight="Bold"
+                                        font="TitilliumWeb"
+                                        fontStyle={
+                                          Object {
+                                            "fontSize": 14,
+                                            "lineHeight": 21,
+                                          }
+                                        }
+                                        numberOfLines={1}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "fontSize": 14,
+                                              "lineHeight": 21,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                            },
+                                          ]
+                                        }
+                                        weight="SemiBold"
+                                      >
+                                        2
+                                      </Text>
+                                      <View
+                                        style={
+                                          Object {
+                                            "height": 4,
+                                          }
+                                        }
+                                      />
+                                      <View
+                                        style={
+                                          Object {
+                                            "width": 44,
+                                          }
+                                        }
+                                      >
+                                        <View
+                                          style={
+                                            Array [
+                                              Object {
+                                                "alignItems": "center",
+                                                "borderCurve": "continuous",
+                                                "borderRadius": 24,
+                                                "flexDirection": "row",
+                                                "justifyContent": "center",
+                                                "paddingHorizontal": 8,
+                                                "paddingVertical": 4,
+                                              },
+                                              Object {
+                                                "backgroundColor": "#F4F5F8",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            ellipsizeMode="tail"
+                                            numberOfLines={1}
+                                            style={
+                                              Array [
+                                                Object {
+                                                  "alignSelf": "center",
+                                                  "flexShrink": 1,
+                                                  "fontSize": 12,
+                                                  "lineHeight": 16,
+                                                  "textTransform": "uppercase",
+                                                },
+                                                Object {
+                                                  "fontFamily": "Titillium Web",
+                                                  "fontStyle": "normal",
+                                                  "fontWeight": "600",
+                                                },
+                                                Object {
+                                                  "color": "#555C70",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            PDF
+                                          </Text>
+                                        </View>
+                                      </View>
+                                    </View>
+                                    <View
+                                      style={
+                                        Object {
+                                          "alignItems": "center",
+                                          "marginLeft": 16,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0B3EE3"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
+                                          }
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
+                                  </View>
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 8,
+                                    }
+                                  }
+                                />
+                                <View
+                                  accessibilityHint="pdf"
+                                  accessibilityLabel="4"
+                                  accessibilityRole="button"
+                                  accessibilityState={
+                                    Object {
+                                      "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]}
+                                >
+                                  <View
+                                    accessibilityElementsHidden={true}
+                                    importantForAccessibility="no-hide-descendants"
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "backgroundColor": "#FFFFFF",
+                                          "borderColor": "#CCD4DC",
+                                          "borderRadius": 8,
+                                          "borderStyle": "solid",
+                                          "borderWidth": 1,
+                                          "flexDirection": "row",
+                                          "paddingHorizontal": 16,
+                                          "paddingVertical": 16,
+                                        },
+                                        Object {
+                                          "transform": Array [
+                                            Object {
+                                              "scale": undefined,
+                                            },
+                                          ],
+                                        },
+                                        Object {
+                                          "opacity": 1,
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        Object {
+                                          "flex": 1,
+                                          "flexDirection": "column",
+                                        }
+                                      }
+                                    >
+                                      <Text
+                                        allowFontScaling={false}
+                                        color="blueIO-500"
+                                        defaultColor="blue"
+                                        defaultWeight="Bold"
+                                        font="TitilliumWeb"
+                                        fontStyle={
+                                          Object {
+                                            "fontSize": 14,
+                                            "lineHeight": 21,
+                                          }
+                                        }
+                                        numberOfLines={1}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "fontSize": 14,
+                                              "lineHeight": 21,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                            },
+                                          ]
+                                        }
+                                        weight="SemiBold"
+                                      >
+                                        4
+                                      </Text>
+                                      <View
+                                        style={
+                                          Object {
+                                            "height": 4,
+                                          }
+                                        }
+                                      />
+                                      <View
+                                        style={
+                                          Object {
+                                            "width": 44,
+                                          }
+                                        }
+                                      >
+                                        <View
+                                          style={
+                                            Array [
+                                              Object {
+                                                "alignItems": "center",
+                                                "borderCurve": "continuous",
+                                                "borderRadius": 24,
+                                                "flexDirection": "row",
+                                                "justifyContent": "center",
+                                                "paddingHorizontal": 8,
+                                                "paddingVertical": 4,
+                                              },
+                                              Object {
+                                                "backgroundColor": "#F4F5F8",
+                                              },
+                                            ]
+                                          }
+                                        >
+                                          <Text
+                                            ellipsizeMode="tail"
+                                            numberOfLines={1}
+                                            style={
+                                              Array [
+                                                Object {
+                                                  "alignSelf": "center",
+                                                  "flexShrink": 1,
+                                                  "fontSize": 12,
+                                                  "lineHeight": 16,
+                                                  "textTransform": "uppercase",
+                                                },
+                                                Object {
+                                                  "fontFamily": "Titillium Web",
+                                                  "fontStyle": "normal",
+                                                  "fontWeight": "600",
+                                                },
+                                                Object {
+                                                  "color": "#555C70",
+                                                },
+                                              ]
+                                            }
+                                          >
+                                            PDF
+                                          </Text>
+                                        </View>
+                                      </View>
+                                    </View>
+                                    <View
+                                      style={
+                                        Object {
+                                          "alignItems": "center",
+                                          "marginLeft": 16,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0B3EE3",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0B3EE3"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
+                                          }
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                          </RCTScrollView>
+                        </Modal>
+                      </View>
+                      <View
+                        style={
+                          Object {
+                            "height": 16,
+                          }
+                        }
+                      />
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`F24Section should match snapshot when there are more than one F24 and the message is cancelled 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={6}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`F24Section should match snapshot when there are no F24 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`F24Section should match snapshot when there are no F24 and the message is cancelled 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={2}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`F24Section should match snapshot when there is a single F24 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={3}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityLabel="Modelli F24"
+                        accessible={true}
+                        style={
+                          Object {
+                            "marginHorizontal": -24,
+                            "paddingHorizontal": 24,
+                            "paddingVertical": 12,
+                          }
+                        }
+                      >
+                        <View
+                          importantForAccessibility="no-hide-descendants"
+                          style={
+                            Object {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "space-between",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "marginRight": 8,
+                              }
+                            }
+                          >
+                            <RNSVGSvgView
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessible={false}
+                              align="xMidYMid"
+                              bbHeight={24}
+                              bbWidth={24}
+                              focusable={false}
+                              height={24}
+                              importantForAccessibility="no-hide-descendants"
+                              meetOrSlice={0}
+                              minX={0}
+                              minY={0}
+                              style={
+                                Array [
+                                  Object {
+                                    "backgroundColor": "transparent",
+                                    "borderWidth": 0,
+                                  },
+                                  Object {
+                                    "color": "#BBC2D6",
+                                  },
+                                  Object {
+                                    "flex": 0,
+                                    "height": 24,
+                                    "width": 24,
+                                  },
+                                ]
+                              }
+                              tintColor="#BBC2D6"
+                              vbHeight={24}
+                              vbWidth={24}
+                              width={24}
+                            >
+                              <RNSVGGroup
+                                fill={
+                                  Object {
+                                    "payload": 4278190080,
+                                    "type": 0,
+                                  }
+                                }
+                              >
+                                <RNSVGPath
+                                  clipRule={0}
+                                  d="M22 6.96129V19.5684C22 20.9481 20.913 22 19.6535 22H4.34646C3.08696 22 2 20.9481 2 19.5684V3C2 2.44772 2.44771 2 3 2H6.33457C6.67726 2 6.99609 2.17548 7.17942 2.46501L7.92109 3.63624C8.83777 5.08388 10.4319 5.96129 12.1454 5.96129H21C21.5523 5.96129 22 6.40901 22 6.96129ZM12.1454 3.96129C11.1173 3.96129 10.1608 3.43485 9.6108 2.56626L8.86914 1.39503C8.31913 0.526447 7.36265 0 6.33457 0H3C1.34315 0 0 1.34314 0 3V19.5684C0 22.0159 1.94598 24 4.34646 24H19.6535C22.054 24 24 22.0159 24 19.5684V6.96129C24 5.30444 22.6569 3.96129 21 3.96129H12.1454ZM7 17C6.44772 17 6 17.4477 6 18C6 18.5523 6.44772 19 7 19H17C17.5523 19 18 18.5523 18 18C18 17.4477 17.5523 17 17 17H7Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  fillRule={0}
+                                  propList={
+                                    Array [
+                                      "fill",
+                                      "fillRule",
+                                    ]
+                                  }
+                                />
+                              </RNSVGGroup>
+                            </RNSVGSvgView>
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityElementsHidden={false}
+                              accessible={true}
+                              importantForAccessibility="yes"
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="grey-700"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#555C70",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Modelli F24
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <Text
+                        allowFontScaling={false}
+                        color="grey-850"
+                        defaultColor="bluegrey"
+                        defaultWeight="Regular"
+                        font="TitilliumWeb"
+                        fontStyle={
+                          Object {
+                            "fontSize": 16,
+                            "lineHeight": 24,
+                          }
+                        }
+                        style={
+                          Array [
+                            Object {
+                              "fontSize": 16,
+                              "lineHeight": 24,
+                            },
+                            Object {
+                              "color": "#2B2E38",
+                              "fontFamily": "Titillium Web",
+                              "fontStyle": "normal",
+                              "fontWeight": "400",
+                            },
+                          ]
+                        }
+                        weight="Regular"
+                      >
+                        Se preferisci, puoi pagare questa notifica tramite F24.
+                      </Text>
+                      <View
+                        style={
+                          Object {
+                            "height": 24,
+                          }
+                        }
+                      />
+                      <View
+                        accessibilityHint="pdf"
+                        accessibilityLabel="2"
+                        accessibilityRole="button"
+                        accessibilityState={
+                          Object {
+                            "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]}
+                      >
+                        <View
+                          accessibilityElementsHidden={true}
+                          importantForAccessibility="no-hide-descendants"
+                          style={
+                            Array [
+                              Object {
+                                "alignItems": "center",
+                                "backgroundColor": "#FFFFFF",
+                                "borderColor": "#CCD4DC",
+                                "borderRadius": 8,
+                                "borderStyle": "solid",
+                                "borderWidth": 1,
+                                "flexDirection": "row",
+                                "paddingHorizontal": 16,
+                                "paddingVertical": 16,
+                              },
+                              Object {
+                                "transform": Array [
+                                  Object {
+                                    "scale": undefined,
+                                  },
+                                ],
+                              },
+                              Object {
+                                "opacity": 1,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                                "flexDirection": "column",
+                              }
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              color="blueIO-500"
+                              defaultColor="blue"
+                              defaultWeight="Bold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 14,
+                                  "lineHeight": 21,
+                                }
+                              }
+                              numberOfLines={1}
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  },
+                                  Object {
+                                    "color": "#0B3EE3",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
+                                  },
+                                ]
+                              }
+                              weight="SemiBold"
+                            >
+                              2
+                            </Text>
+                            <View
+                              style={
+                                Object {
+                                  "height": 4,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "width": 44,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#F4F5F8",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#555C70",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  PDF
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "alignItems": "center",
+                                "marginLeft": 16,
+                              }
+                            }
+                          >
+                            <RNSVGSvgView
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessible={false}
+                              align="xMidYMid"
+                              bbHeight={24}
+                              bbWidth={24}
+                              focusable={false}
+                              height={24}
+                              importantForAccessibility="no-hide-descendants"
+                              meetOrSlice={0}
+                              minX={0}
+                              minY={0}
+                              style={
+                                Array [
+                                  Object {
+                                    "backgroundColor": "transparent",
+                                    "borderWidth": 0,
+                                  },
+                                  Object {
+                                    "color": "#0B3EE3",
+                                  },
+                                  Object {
+                                    "flex": 0,
+                                    "height": 24,
+                                    "width": 24,
+                                  },
+                                ]
+                              }
+                              tintColor="#0B3EE3"
+                              vbHeight={24}
+                              vbWidth={24}
+                              width={24}
+                            >
+                              <RNSVGGroup
+                                fill={
+                                  Object {
+                                    "payload": 4278190080,
+                                    "type": 0,
+                                  }
+                                }
+                              >
+                                <RNSVGPath
+                                  clipRule={0}
+                                  d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  fillRule={0}
+                                  propList={
+                                    Array [
+                                      "fill",
+                                      "fillRule",
+                                    ]
+                                  }
+                                />
+                              </RNSVGGroup>
+                            </RNSVGSvgView>
+                          </View>
+                        </View>
+                      </View>
+                      <View
+                        style={
+                          Object {
+                            "height": 16,
+                          }
+                        }
+                      />
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`F24Section should match snapshot when there is a single F24 and the message is cancelled 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={4}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/pn/components/__test__/__snapshots__/LegacyMessageF24.test.tsx.snap b/ts/features/pn/components/__test__/__snapshots__/LegacyMessageF24.test.tsx.snap
new file mode 100644
index 00000000000..84c0914f01c
--- /dev/null
+++ b/ts/features/pn/components/__test__/__snapshots__/LegacyMessageF24.test.tsx.snap
@@ -0,0 +1,1213 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageF24 component when there are multiple F24 should match the snapshot 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={4}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "marginTop": 40,
+                          }
+                        }
+                        testID="pn-f24-section"
+                      >
+                        <View
+                          style={
+                            Object {
+                              "flex": 1,
+                              "flexDirection": "row",
+                            }
+                          }
+                        >
+                          <Text
+                            color="bluegrey"
+                            defaultColor="bluegreyDark"
+                            defaultWeight="Bold"
+                            font="TitilliumWeb"
+                            fontStyle={
+                              Object {
+                                "fontSize": 20,
+                                "lineHeight": 24,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "flex": 1,
+                                },
+                                Object {
+                                  "fontSize": 20,
+                                  "lineHeight": 24,
+                                },
+                                Object {
+                                  "color": "#475A6D",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "700",
+                                },
+                              ]
+                            }
+                            weight="Bold"
+                          >
+                            Modelli F24
+                          </Text>
+                        </View>
+                        <View>
+                          <View
+                            style={
+                              Object {
+                                "height": 16,
+                              }
+                            }
+                          />
+                          <Text
+                            allowFontScaling={false}
+                            color="bluegreyDark"
+                            defaultColor="bluegrey"
+                            defaultWeight="Regular"
+                            font="TitilliumWeb"
+                            fontStyle={
+                              Object {
+                                "fontSize": 16,
+                                "lineHeight": 24,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "fontSize": 16,
+                                  "lineHeight": 24,
+                                },
+                                Object {
+                                  "color": "#17324D",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "400",
+                                },
+                              ]
+                            }
+                            weight="Regular"
+                          >
+                            Se preferisci, puoi pagare questa notifica tramite F24.
+                          </Text>
+                          <View
+                            style={
+                              Object {
+                                "height": 16,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              Object {
+                                "alignSelf": "center",
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityLabel="Vedi modelli F24"
+                              accessibilityRole="button"
+                              accessibilityState={
+                                Object {
+                                  "disabled": false,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              hitSlop={
+                                Object {
+                                  "bottom": 14,
+                                  "left": 24,
+                                  "right": 24,
+                                  "top": 14,
+                                }
+                              }
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              onTouchEnd={[Function]}
+                              style={
+                                Object {
+                                  "alignSelf": "flex-start",
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "elevation": 0,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "textAlignVertical": "center",
+                                    },
+                                    false,
+                                    Object {},
+                                    Object {
+                                      "transform": Array [
+                                        Object {
+                                          "scale": undefined,
+                                        },
+                                      ],
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  accessibilityElementsHidden={true}
+                                  accessible={false}
+                                  allowFontScaling={false}
+                                  ellipsizeMode="tail"
+                                  importantForAccessibility="no-hide-descendants"
+                                  maxFontSizeMultiplier={1.3}
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontSize": 16,
+                                        "fontStyle": "normal",
+                                        "fontWeight": "700",
+                                      },
+                                      Object {
+                                        "color": "#0073E6",
+                                      },
+                                      Object {
+                                        "color": undefined,
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Vedi modelli F24
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessageF24 component when there is only one F24 should match the snapshot 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "marginTop": 40,
+                          }
+                        }
+                        testID="pn-f24-section"
+                      >
+                        <View
+                          style={
+                            Object {
+                              "flex": 1,
+                              "flexDirection": "row",
+                            }
+                          }
+                        >
+                          <Text
+                            color="bluegrey"
+                            defaultColor="bluegreyDark"
+                            defaultWeight="Bold"
+                            font="TitilliumWeb"
+                            fontStyle={
+                              Object {
+                                "fontSize": 20,
+                                "lineHeight": 24,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "flex": 1,
+                                },
+                                Object {
+                                  "fontSize": 20,
+                                  "lineHeight": 24,
+                                },
+                                Object {
+                                  "color": "#475A6D",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "700",
+                                },
+                              ]
+                            }
+                            weight="Bold"
+                          >
+                            Modelli F24
+                          </Text>
+                        </View>
+                        <View>
+                          <View
+                            style={
+                              Object {
+                                "height": 16,
+                              }
+                            }
+                          />
+                          <Text
+                            allowFontScaling={false}
+                            color="bluegreyDark"
+                            defaultColor="bluegrey"
+                            defaultWeight="Regular"
+                            font="TitilliumWeb"
+                            fontStyle={
+                              Object {
+                                "fontSize": 16,
+                                "lineHeight": 24,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "fontSize": 16,
+                                  "lineHeight": 24,
+                                },
+                                Object {
+                                  "color": "#17324D",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "400",
+                                },
+                              ]
+                            }
+                            weight="Regular"
+                          >
+                            Se preferisci, puoi pagare questa notifica tramite F24.
+                          </Text>
+                          <View
+                            style={
+                              Object {
+                                "height": 16,
+                              }
+                            }
+                          />
+                          <View
+                            testID="f24-list-container"
+                          >
+                            <View
+                              accessibilityRole="button"
+                              accessibilityState={
+                                Object {
+                                  "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]}
+                              testID="message-attachment"
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "backgroundColor": "#FFFFFF",
+                                      "borderColor": "#CCD4DC",
+                                      "borderRadius": 8,
+                                      "borderStyle": "solid",
+                                      "borderWidth": 1,
+                                      "flex": 1,
+                                      "flexDirection": "row",
+                                      "justifyContent": "space-between",
+                                      "paddingHorizontal": 16,
+                                      "paddingVertical": 16,
+                                    },
+                                    Object {
+                                      "transform": Array [
+                                        Object {
+                                          "scale": undefined,
+                                        },
+                                      ],
+                                    },
+                                    Object {
+                                      "opacity": 1,
+                                    },
+                                  ]
+                                }
+                              >
+                                <View
+                                  style={
+                                    Object {
+                                      "marginRight": 16,
+                                    }
+                                  }
+                                >
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    bbHeight={32}
+                                    bbWidth={32}
+                                    focusable={false}
+                                    height={32}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "color": "#0073E6",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 32,
+                                          "width": 32,
+                                        },
+                                      ]
+                                    }
+                                    tintColor="#0073E6"
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={32}
+                                  >
+                                    <RNSVGGroup
+                                      fill={
+                                        Object {
+                                          "payload": 4278190080,
+                                          "type": 0,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGPath
+                                        clipRule={0}
+                                        d="M22.002 5c0-1.65685-1.3432-3-3-3H5.00195c-1.65685 0-3 1.34315-3 3v14c0 1.6569 1.34315 3 3 3H14.002v-5c0-1.6569 1.3431-3 3-3h5V5Zm-5.5356 16.1213a2.99926 2.99926 0 0 1-.4644.3797V17c0-.5523.4477-1 1-1h4.5009a3.00406 3.00406 0 0 1-.3796.4645l-4.6569 4.6568ZM19.002 0c2.7614 0 5 2.23858 5 5v9.3431c0 1.3261-.5268 2.5979-1.4645 3.5356l-4.6569 4.6568A4.99988 4.99988 0 0 1 14.3451 24H5.00195c-2.76142 0-5-2.2386-5-5V5c0-2.76142 2.23858-5 5-5H19.002ZM4.60938 11.0001v-4.9h2.121c.30799 0 .58333.07.826.21.24266.14.434.33133.57399.574.14001.238.21.511.21.819 0 .31266-.06999.595-.21.847-.13999.252-.33133.45033-.57399.595-.24267.14466-.51801.217-.826.217h-.924v1.638h-1.197Zm1.183-2.695h.777c.10266 0 .19366-.02334.27299-.07.08401-.05134.15167-.12134.20301-.21.05133-.08867.077-.189.077-.301 0-.11667-.02567-.217-.077-.301-.05134-.084-.119-.14934-.20301-.196-.07933-.04667-.17033-.07-.27299-.07h-.777v1.148Zm3.45176 2.695v-4.9h2.06496c.3594 0 .6884.06066.987.182.2987.11666.5554.28466.77.504.2147.21466.3804.47366.497.777.1167.29866.175.62766.175.987 0 .364-.0583.69533-.175.994-.1166.29866-.2823.5577-.497.777-.2146.2147-.4713.3827-.77.504-.294.1167-.623.175-.987.175H9.24414Zm2.02996-1.057h-.833v-2.786h.833c.1914 0 .364.03266.518.098.154.06533.2847.161.392.287.112.12133.196.26833.252.441.0607.168.091.357.091.567 0 .21-.0303.40133-.091.574-.056.168-.14.315-.252.441-.1073.12133-.238.21466-.392.28-.154.06533-.3266.098-.518.098Zm3.3773-3.843v4.9h1.197v-1.876h1.911v-1.001h-1.911v-.966h2.191v-1.057h-3.388Z"
+                                        fill={
+                                          Object {
+                                            "type": 2,
+                                          }
+                                        }
+                                        fillRule={0}
+                                        propList={
+                                          Array [
+                                            "fill",
+                                            "fillRule",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "flex": 1,
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    allowFontScaling={false}
+                                    color="bluegrey"
+                                    defaultColor="blue"
+                                    defaultWeight="Bold"
+                                    font="TitilliumWeb"
+                                    fontStyle={
+                                      Object {
+                                        "fontSize": 14,
+                                        "lineHeight": 21,
+                                      }
+                                    }
+                                    numberOfLines={1}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "fontSize": 14,
+                                          "lineHeight": 21,
+                                        },
+                                        Object {
+                                          "color": "#475A6D",
+                                          "fontFamily": "Titillium Web",
+                                          "fontStyle": "normal",
+                                          "fontWeight": "600",
+                                        },
+                                      ]
+                                    }
+                                    weight="SemiBold"
+                                  >
+                                    invoice.pdf
+                                  </Text>
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "alignItems": "center",
+                                      "flexDirection": "row",
+                                      "justifyContent": "flex-end",
+                                      "marginLeft": 16,
+                                    }
+                                  }
+                                >
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    bbHeight={24}
+                                    bbWidth={24}
+                                    focusable={false}
+                                    height={24}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "color": "#0073E6",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 24,
+                                          "width": 24,
+                                        },
+                                      ]
+                                    }
+                                    tintColor="#0073E6"
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={24}
+                                  >
+                                    <RNSVGGroup
+                                      fill={
+                                        Object {
+                                          "payload": 4278190080,
+                                          "type": 0,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGPath
+                                        clipRule={0}
+                                        d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                        fill={
+                                          Object {
+                                            "type": 2,
+                                          }
+                                        }
+                                        fillRule={0}
+                                        propList={
+                                          Array [
+                                            "fill",
+                                            "fillRule",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/pn/components/__test__/__snapshots__/LegacyMessageFooter.test.tsx.snap b/ts/features/pn/components/__test__/__snapshots__/LegacyMessageFooter.test.tsx.snap
new file mode 100644
index 00000000000..b90a546a1a2
--- /dev/null
+++ b/ts/features/pn/components/__test__/__snapshots__/LegacyMessageFooter.test.tsx.snap
@@ -0,0 +1,1788 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LegacyMessageFooter should match snapshot for cancelled PN notification 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`LegacyMessageFooter should match snapshot for hidden button 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={2}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`LegacyMessageFooter should match snapshot for visibleEnabled button 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={4}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "marginTop": -50,
+                            "overflow": "hidden",
+                            "paddingTop": 50,
+                          }
+                        }
+                      >
+                        <View
+                          style={
+                            Object {
+                              "backgroundColor": "#FFFFFF",
+                              "elevation": 20,
+                              "paddingBottom": 16,
+                              "paddingHorizontal": 24,
+                              "paddingTop": 16,
+                              "shadowColor": "#0E0F13",
+                              "shadowOffset": Object {
+                                "height": 50,
+                                "width": 0,
+                              },
+                              "shadowOpacity": 0.5,
+                              "shadowRadius": 37,
+                            }
+                          }
+                        >
+                          <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
+                              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
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                    },
+                                    false,
+                                  ]
+                                }
+                              >
+                                <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>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`LegacyMessageFooter should match snapshot for visibleLoading button 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={3}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "marginTop": -50,
+                            "overflow": "hidden",
+                            "paddingTop": 50,
+                          }
+                        }
+                      >
+                        <View
+                          style={
+                            Object {
+                              "backgroundColor": "#FFFFFF",
+                              "elevation": 20,
+                              "paddingBottom": 16,
+                              "paddingHorizontal": 24,
+                              "paddingTop": 16,
+                              "shadowColor": "#0E0F13",
+                              "shadowOffset": Object {
+                                "height": 50,
+                                "width": 0,
+                              },
+                              "shadowOpacity": 0.5,
+                              "shadowRadius": 37,
+                            }
+                          }
+                        >
+                          <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
+                              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,
+                                ]
+                              }
+                            >
+                              <View
+                                exiting={[Function]}
+                                style={
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                  }
+                                }
+                              >
+                                <View
+                                  accessibilityRole="progressbar"
+                                  accessible={true}
+                                  importantForAccessibility="no-hide-descendants"
+                                  style={
+                                    Object {
+                                      "height": 24,
+                                      "width": 24,
+                                    }
+                                  }
+                                  testID="LoadingSpinnerTestID"
+                                >
+                                  <View
+                                    collapsable={false}
+                                    style={
+                                      Object {
+                                        "transform": Array [
+                                          Object {
+                                            "rotateZ": "0deg",
+                                          },
+                                        ],
+                                      }
+                                    }
+                                    testID="LoadingSpinnerAnimatedTestID"
+                                  >
+                                    <RNSVGSvgView
+                                      align="xMidYMid"
+                                      bbHeight={24}
+                                      bbWidth={24}
+                                      fill="none"
+                                      focusable={false}
+                                      height={24}
+                                      meetOrSlice={0}
+                                      minX={0}
+                                      minY={0}
+                                      style={
+                                        Array [
+                                          Object {
+                                            "backgroundColor": "transparent",
+                                            "borderWidth": 0,
+                                          },
+                                          Object {
+                                            "flex": 0,
+                                            "height": 24,
+                                            "width": 24,
+                                          },
+                                        ]
+                                      }
+                                      vbHeight={24}
+                                      vbWidth={24}
+                                      width={24}
+                                    >
+                                      <RNSVGGroup
+                                        fill={null}
+                                        propList={
+                                          Array [
+                                            "fill",
+                                          ]
+                                        }
+                                      >
+                                        <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={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
+                                          }
+                                          propList={
+                                            Array [
+                                              "strokeWidth",
+                                            ]
+                                          }
+                                          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-firstHalf",
+                                                "type": 1,
+                                              }
+                                            }
+                                          />
+                                          <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",
+                                                "strokeLinecap",
+                                              ]
+                                            }
+                                            stroke={
+                                              Object {
+                                                "payload": 4294967295,
+                                                "type": 0,
+                                              }
+                                            }
+                                            strokeLinecap={1}
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGGroup>
+                                    </RNSVGSvgView>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/pn/components/__test__/__snapshots__/LegacyMessagePayments.test.tsx.snap b/ts/features/pn/components/__test__/__snapshots__/LegacyMessagePayments.test.tsx.snap
new file mode 100644
index 00000000000..c6b7026b617
--- /dev/null
+++ b/ts/features/pn/components/__test__/__snapshots__/LegacyMessagePayments.test.tsx.snap
@@ -0,0 +1,6428 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LegacyMessagePayments component Should match the snapshot for a cancelled message with no completed payments 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={6}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`LegacyMessagePayments component Should match the snapshot for a cancelled message with three completed payments 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={7}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "marginTop": 40,
+                          }
+                        }
+                        testID="PnCancelledPaymentSectionTitle"
+                      >
+                        <View
+                          style={
+                            Object {
+                              "flex": 1,
+                              "flexDirection": "row",
+                            }
+                          }
+                        >
+                          <Text
+                            color="bluegrey"
+                            defaultColor="bluegreyDark"
+                            defaultWeight="Bold"
+                            font="TitilliumWeb"
+                            fontStyle={
+                              Object {
+                                "fontSize": 20,
+                                "lineHeight": 24,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "flex": 1,
+                                },
+                                Object {
+                                  "fontSize": 20,
+                                  "lineHeight": 24,
+                                },
+                                Object {
+                                  "color": "#475A6D",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "700",
+                                },
+                              ]
+                            }
+                            weight="Bold"
+                          >
+                            Pagamenti
+                          </Text>
+                        </View>
+                        <View>
+                          <View
+                            style={
+                              Object {
+                                "height": 24,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "flexDirection": "row",
+                                },
+                                Object {
+                                  "alignItems": "center",
+                                },
+                              ]
+                            }
+                            testID="PnCancelledPaymentInfoBox"
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "alignSelf": "flex-start",
+                                  "marginTop": 4,
+                                }
+                              }
+                            >
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#475A6D"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M0 12C0 5.3726 5.3726 0 12 0s12 5.3726 12 12-5.3726 12-12 12S0 18.6274 0 12Zm2 0C2 6.47717 6.47717 2 12 2c5.5228 0 10 4.47717 10 10 0 5.5228-4.4772 10-10 10-5.52283 0-10-4.4772-10-10Zm10.0281 7.5c.8439 0 1.5281-.6842 1.5281-1.5281s-.6842-1.5281-1.5281-1.5281c-.844 0-1.5281.6842-1.5281 1.5281S11.1841 19.5 12.0281 19.5Zm0-15.05618h.0005c.5678 0 1.0281.46029 1.0281 1.02808v8.0046c0 .5678-.4603 1.028-1.0281 1.028h-.0005c-.5678 0-1.0281-.4602-1.0281-1.028V5.4719c0-.56779.4603-1.02808 1.0281-1.02808Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                            <View
+                              style={
+                                Object {
+                                  "width": 16,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "flexShrink": 1,
+                                }
+                              }
+                            >
+                              <Text
+                                color="bluegreyDark"
+                                defaultColor="bluegreyDark"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                    },
+                                    Object {
+                                      "color": "#17324D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Per l'eventuale rimborso di pagamenti legati a questa notifica, contatta l'ente mittente.
+                              </Text>
+                            </View>
+                          </View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 24,
+                                }
+                              }
+                            />
+                            <View
+                              accessibilityRole="button"
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              onTouchEnd={[Function]}
+                              testID="PnCancelledPaymentModulePaymentNotice"
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "backgroundColor": "#FFFFFF",
+                                      "borderColor": "#E8EBF1",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 8,
+                                      "borderWidth": 1,
+                                      "flexDirection": "row",
+                                      "justifyContent": "space-between",
+                                      "paddingHorizontal": 16,
+                                      "paddingVertical": 16,
+                                    },
+                                    false,
+                                    Object {
+                                      "transform": Array [
+                                        Object {
+                                          "scale": undefined,
+                                        },
+                                      ],
+                                    },
+                                  ]
+                                }
+                              >
+                                <View
+                                  style={
+                                    Object {
+                                      "flexGrow": 1,
+                                      "flexShrink": 1,
+                                      "paddingEnd": 8,
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    allowFontScaling={false}
+                                    color="bluegrey"
+                                    defaultColor="blue"
+                                    defaultWeight="Bold"
+                                    font="TitilliumWeb"
+                                    fontStyle={
+                                      Object {
+                                        "fontSize": 14,
+                                        "lineHeight": 21,
+                                      }
+                                    }
+                                    numberOfLines={1}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "fontSize": 14,
+                                          "lineHeight": 21,
+                                        },
+                                        Object {
+                                          "color": "#475A6D",
+                                          "fontFamily": "Titillium Web",
+                                          "fontStyle": "normal",
+                                          "fontWeight": "400",
+                                        },
+                                      ]
+                                    }
+                                    weight="Regular"
+                                  >
+                                    Codice avviso
+                                  </Text>
+                                  <Text
+                                    allowFontScaling={false}
+                                    color="bluegrey"
+                                    defaultColor="blue"
+                                    defaultWeight="Bold"
+                                    font="TitilliumWeb"
+                                    fontStyle={
+                                      Object {
+                                        "fontSize": 14,
+                                        "lineHeight": 21,
+                                      }
+                                    }
+                                    numberOfLines={2}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "fontSize": 14,
+                                          "lineHeight": 21,
+                                        },
+                                        Object {
+                                          "color": "#475A6D",
+                                          "fontFamily": "Titillium Web",
+                                          "fontStyle": "normal",
+                                          "fontWeight": "600",
+                                        },
+                                      ]
+                                    }
+                                    weight="SemiBold"
+                                  >
+                                    n1
+                                  </Text>
+                                </View>
+                                <View
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignItems": "center",
+                                        "flexDirection": "row",
+                                        "justifyContent": "flex-end",
+                                        "marginLeft": 16,
+                                      },
+                                      Object {
+                                        "flexShrink": 1,
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "borderCurve": "continuous",
+                                          "borderRadius": 24,
+                                          "flexDirection": "row",
+                                          "justifyContent": "center",
+                                          "paddingHorizontal": 8,
+                                          "paddingVertical": 4,
+                                        },
+                                        Object {
+                                          "backgroundColor": "#E1F4E1",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <Text
+                                      ellipsizeMode="tail"
+                                      numberOfLines={1}
+                                      style={
+                                        Array [
+                                          Object {
+                                            "alignSelf": "center",
+                                            "flexShrink": 1,
+                                            "fontSize": 12,
+                                            "lineHeight": 16,
+                                            "textTransform": "uppercase",
+                                          },
+                                          Object {
+                                            "fontFamily": "Titillium Web",
+                                            "fontStyle": "normal",
+                                            "fontWeight": "600",
+                                          },
+                                          Object {
+                                            "color": "#224021",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Paid
+                                    </Text>
+                                  </View>
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    bbHeight={24}
+                                    bbWidth={24}
+                                    focusable={false}
+                                    height={24}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "color": "#0073E6",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 24,
+                                          "width": 24,
+                                        },
+                                      ]
+                                    }
+                                    tintColor="#0073E6"
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={24}
+                                  >
+                                    <RNSVGGroup
+                                      fill={
+                                        Object {
+                                          "payload": 4278190080,
+                                          "type": 0,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGPath
+                                        clipRule={0}
+                                        d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                        fill={
+                                          Object {
+                                            "type": 2,
+                                          }
+                                        }
+                                        fillRule={0}
+                                        propList={
+                                          Array [
+                                            "fill",
+                                            "fillRule",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessibilityRole="button"
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              onTouchEnd={[Function]}
+                              testID="PnCancelledPaymentModulePaymentNotice"
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "backgroundColor": "#FFFFFF",
+                                      "borderColor": "#E8EBF1",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 8,
+                                      "borderWidth": 1,
+                                      "flexDirection": "row",
+                                      "justifyContent": "space-between",
+                                      "paddingHorizontal": 16,
+                                      "paddingVertical": 16,
+                                    },
+                                    false,
+                                    Object {
+                                      "transform": Array [
+                                        Object {
+                                          "scale": undefined,
+                                        },
+                                      ],
+                                    },
+                                  ]
+                                }
+                              >
+                                <View
+                                  style={
+                                    Object {
+                                      "flexGrow": 1,
+                                      "flexShrink": 1,
+                                      "paddingEnd": 8,
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    allowFontScaling={false}
+                                    color="bluegrey"
+                                    defaultColor="blue"
+                                    defaultWeight="Bold"
+                                    font="TitilliumWeb"
+                                    fontStyle={
+                                      Object {
+                                        "fontSize": 14,
+                                        "lineHeight": 21,
+                                      }
+                                    }
+                                    numberOfLines={1}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "fontSize": 14,
+                                          "lineHeight": 21,
+                                        },
+                                        Object {
+                                          "color": "#475A6D",
+                                          "fontFamily": "Titillium Web",
+                                          "fontStyle": "normal",
+                                          "fontWeight": "400",
+                                        },
+                                      ]
+                                    }
+                                    weight="Regular"
+                                  >
+                                    Codice avviso
+                                  </Text>
+                                  <Text
+                                    allowFontScaling={false}
+                                    color="bluegrey"
+                                    defaultColor="blue"
+                                    defaultWeight="Bold"
+                                    font="TitilliumWeb"
+                                    fontStyle={
+                                      Object {
+                                        "fontSize": 14,
+                                        "lineHeight": 21,
+                                      }
+                                    }
+                                    numberOfLines={2}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "fontSize": 14,
+                                          "lineHeight": 21,
+                                        },
+                                        Object {
+                                          "color": "#475A6D",
+                                          "fontFamily": "Titillium Web",
+                                          "fontStyle": "normal",
+                                          "fontWeight": "600",
+                                        },
+                                      ]
+                                    }
+                                    weight="SemiBold"
+                                  >
+                                    n2
+                                  </Text>
+                                </View>
+                                <View
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignItems": "center",
+                                        "flexDirection": "row",
+                                        "justifyContent": "flex-end",
+                                        "marginLeft": 16,
+                                      },
+                                      Object {
+                                        "flexShrink": 1,
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "borderCurve": "continuous",
+                                          "borderRadius": 24,
+                                          "flexDirection": "row",
+                                          "justifyContent": "center",
+                                          "paddingHorizontal": 8,
+                                          "paddingVertical": 4,
+                                        },
+                                        Object {
+                                          "backgroundColor": "#E1F4E1",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <Text
+                                      ellipsizeMode="tail"
+                                      numberOfLines={1}
+                                      style={
+                                        Array [
+                                          Object {
+                                            "alignSelf": "center",
+                                            "flexShrink": 1,
+                                            "fontSize": 12,
+                                            "lineHeight": 16,
+                                            "textTransform": "uppercase",
+                                          },
+                                          Object {
+                                            "fontFamily": "Titillium Web",
+                                            "fontStyle": "normal",
+                                            "fontWeight": "600",
+                                          },
+                                          Object {
+                                            "color": "#224021",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Paid
+                                    </Text>
+                                  </View>
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    bbHeight={24}
+                                    bbWidth={24}
+                                    focusable={false}
+                                    height={24}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "color": "#0073E6",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 24,
+                                          "width": 24,
+                                        },
+                                      ]
+                                    }
+                                    tintColor="#0073E6"
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={24}
+                                  >
+                                    <RNSVGGroup
+                                      fill={
+                                        Object {
+                                          "payload": 4278190080,
+                                          "type": 0,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGPath
+                                        clipRule={0}
+                                        d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                        fill={
+                                          Object {
+                                            "type": 2,
+                                          }
+                                        }
+                                        fillRule={0}
+                                        propList={
+                                          Array [
+                                            "fill",
+                                            "fillRule",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessibilityRole="button"
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                              onTouchEnd={[Function]}
+                              testID="PnCancelledPaymentModulePaymentNotice"
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "backgroundColor": "#FFFFFF",
+                                      "borderColor": "#E8EBF1",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 8,
+                                      "borderWidth": 1,
+                                      "flexDirection": "row",
+                                      "justifyContent": "space-between",
+                                      "paddingHorizontal": 16,
+                                      "paddingVertical": 16,
+                                    },
+                                    false,
+                                    Object {
+                                      "transform": Array [
+                                        Object {
+                                          "scale": undefined,
+                                        },
+                                      ],
+                                    },
+                                  ]
+                                }
+                              >
+                                <View
+                                  style={
+                                    Object {
+                                      "flexGrow": 1,
+                                      "flexShrink": 1,
+                                      "paddingEnd": 8,
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    allowFontScaling={false}
+                                    color="bluegrey"
+                                    defaultColor="blue"
+                                    defaultWeight="Bold"
+                                    font="TitilliumWeb"
+                                    fontStyle={
+                                      Object {
+                                        "fontSize": 14,
+                                        "lineHeight": 21,
+                                      }
+                                    }
+                                    numberOfLines={1}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "fontSize": 14,
+                                          "lineHeight": 21,
+                                        },
+                                        Object {
+                                          "color": "#475A6D",
+                                          "fontFamily": "Titillium Web",
+                                          "fontStyle": "normal",
+                                          "fontWeight": "400",
+                                        },
+                                      ]
+                                    }
+                                    weight="Regular"
+                                  >
+                                    Codice avviso
+                                  </Text>
+                                  <Text
+                                    allowFontScaling={false}
+                                    color="bluegrey"
+                                    defaultColor="blue"
+                                    defaultWeight="Bold"
+                                    font="TitilliumWeb"
+                                    fontStyle={
+                                      Object {
+                                        "fontSize": 14,
+                                        "lineHeight": 21,
+                                      }
+                                    }
+                                    numberOfLines={2}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "fontSize": 14,
+                                          "lineHeight": 21,
+                                        },
+                                        Object {
+                                          "color": "#475A6D",
+                                          "fontFamily": "Titillium Web",
+                                          "fontStyle": "normal",
+                                          "fontWeight": "600",
+                                        },
+                                      ]
+                                    }
+                                    weight="SemiBold"
+                                  >
+                                    n3
+                                  </Text>
+                                </View>
+                                <View
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignItems": "center",
+                                        "flexDirection": "row",
+                                        "justifyContent": "flex-end",
+                                        "marginLeft": 16,
+                                      },
+                                      Object {
+                                        "flexShrink": 1,
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "borderCurve": "continuous",
+                                          "borderRadius": 24,
+                                          "flexDirection": "row",
+                                          "justifyContent": "center",
+                                          "paddingHorizontal": 8,
+                                          "paddingVertical": 4,
+                                        },
+                                        Object {
+                                          "backgroundColor": "#E1F4E1",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <Text
+                                      ellipsizeMode="tail"
+                                      numberOfLines={1}
+                                      style={
+                                        Array [
+                                          Object {
+                                            "alignSelf": "center",
+                                            "flexShrink": 1,
+                                            "fontSize": 12,
+                                            "lineHeight": 16,
+                                            "textTransform": "uppercase",
+                                          },
+                                          Object {
+                                            "fontFamily": "Titillium Web",
+                                            "fontStyle": "normal",
+                                            "fontWeight": "600",
+                                          },
+                                          Object {
+                                            "color": "#224021",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      Paid
+                                    </Text>
+                                  </View>
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    bbHeight={24}
+                                    bbWidth={24}
+                                    focusable={false}
+                                    height={24}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "color": "#0073E6",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 24,
+                                          "width": 24,
+                                        },
+                                      ]
+                                    }
+                                    tintColor="#0073E6"
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={24}
+                                  >
+                                    <RNSVGGroup
+                                      fill={
+                                        Object {
+                                          "payload": 4278190080,
+                                          "type": 0,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGPath
+                                        clipRule={0}
+                                        d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                        fill={
+                                          Object {
+                                            "type": 2,
+                                          }
+                                        }
+                                        fillRule={0}
+                                        propList={
+                                          Array [
+                                            "fill",
+                                            "fillRule",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`LegacyMessagePayments component Should match the snapshot for a single loading payment 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "marginTop": 40,
+                          }
+                        }
+                        testID="PnPaymentSectionTitle"
+                      >
+                        <View
+                          style={
+                            Object {
+                              "flex": 1,
+                              "flexDirection": "row",
+                            }
+                          }
+                        >
+                          <Text
+                            color="bluegrey"
+                            defaultColor="bluegreyDark"
+                            defaultWeight="Bold"
+                            font="TitilliumWeb"
+                            fontStyle={
+                              Object {
+                                "fontSize": 20,
+                                "lineHeight": 24,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "flex": 1,
+                                },
+                                Object {
+                                  "fontSize": 20,
+                                  "lineHeight": 24,
+                                },
+                                Object {
+                                  "color": "#475A6D",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "700",
+                                },
+                              ]
+                            }
+                            weight="Bold"
+                          >
+                            Avvisi pagoPA
+                          </Text>
+                          <RNSVGSvgView
+                            accessibilityElementsHidden={true}
+                            accessibilityLabel=""
+                            accessible={false}
+                            align="xMidYMid"
+                            bbHeight={32}
+                            bbWidth={32}
+                            focusable={false}
+                            height={32}
+                            importantForAccessibility="no-hide-descendants"
+                            meetOrSlice={0}
+                            minX={0}
+                            minY={0}
+                            style={
+                              Array [
+                                Object {
+                                  "backgroundColor": "transparent",
+                                  "borderWidth": 0,
+                                },
+                                Object {
+                                  "color": "#D2D6E3",
+                                },
+                                Object {
+                                  "flex": 0,
+                                  "height": 32,
+                                  "width": 32,
+                                },
+                              ]
+                            }
+                            tintColor="#D2D6E3"
+                            vbHeight={32}
+                            vbWidth={32}
+                            width={32}
+                          >
+                            <RNSVGGroup
+                              fill={
+                                Object {
+                                  "payload": 4278190080,
+                                  "type": 0,
+                                }
+                              }
+                            >
+                              <RNSVGPath
+                                d="m22.551 11.358-.009 2.675h-1.956V5h3.617c1.163 0 1.753.314 1.762.941v4.41c0 .628-.563.933-1.697.933H22.56v.074h-.01ZM24 6.043h-1.467v4.189H24v-4.19ZM1.652 14.043l-.01 2.676H0V7.685h3.027c.978 0 1.467.314 1.476.941v4.41c0 .628-.47.933-1.421.933h-1.43v.074ZM2.87 8.737H1.642v4.19H2.87v-4.19ZM9.56 13.969H6.44c-.913 0-1.374-.314-1.374-.941l.009-1.837c0-.618.47-.932 1.421-.94h1.43V8.736H6.7l-.01.83H5.085v-.94c0-.619.48-.923 1.44-.923l1.605-.019c.95 0 1.43.314 1.43.932v5.352Zm-2.852-1.052h1.237l-.01-1.615H6.708v1.615ZM13.149 13.969h-1.44c-.95 0-1.42-.314-1.42-.932v-4.41c.009-.628.498-.942 1.476-.942h3.026v8.102c0 .627-.48.94-1.43.94h-1.633c-.95 0-1.43-.313-1.43-.94v-.932h1.633v.83h1.227v-1.642l-.01-.074Zm-1.227-1.052h1.227v-4.18h-1.227v4.18ZM19.848 13.028c-.01.627-.498.932-1.477.932h-1.587c-.96 0-1.44-.314-1.44-.932v-4.41c0-.628.48-.933 1.44-.933h1.634c.95 0 1.42.314 1.42.932v4.41h.01Zm-1.624-4.291h-1.237v4.19h1.228l.009-4.19Z"
+                                fill={
+                                  Object {
+                                    "type": 2,
+                                  }
+                                }
+                                propList={
+                                  Array [
+                                    "fill",
+                                  ]
+                                }
+                              />
+                              <RNSVGPath
+                                d="M31.99 5.987c0-.627-.562-.932-1.697-.932h-1.956c-1.144 0-1.716.314-1.716.932v8.065h1.956v-2.759h1.476V13.6c0 5.905-4.77 10.676-10.676 10.676a10.694 10.694 0 0 1-8.433-4.116l.978-.747-3.931-2.648.175 5.582 1.255-.996a12.614 12.614 0 0 0 9.956 4.853C26.353 26.204 32 20.548 32 13.581l-.01-7.594Zm-1.946 4.254h-1.477V6.09h1.477v4.152Z"
+                                fill={
+                                  Object {
+                                    "type": 2,
+                                  }
+                                }
+                                propList={
+                                  Array [
+                                    "fill",
+                                  ]
+                                }
+                              />
+                            </RNSVGGroup>
+                          </RNSVGSvgView>
+                        </View>
+                        <View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 24,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`LegacyMessagePayments component Should match the snapshot for five loading payments 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={2}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "marginTop": 40,
+                          }
+                        }
+                        testID="PnPaymentSectionTitle"
+                      >
+                        <View
+                          style={
+                            Object {
+                              "flex": 1,
+                              "flexDirection": "row",
+                            }
+                          }
+                        >
+                          <Text
+                            color="bluegrey"
+                            defaultColor="bluegreyDark"
+                            defaultWeight="Bold"
+                            font="TitilliumWeb"
+                            fontStyle={
+                              Object {
+                                "fontSize": 20,
+                                "lineHeight": 24,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "flex": 1,
+                                },
+                                Object {
+                                  "fontSize": 20,
+                                  "lineHeight": 24,
+                                },
+                                Object {
+                                  "color": "#475A6D",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "700",
+                                },
+                              ]
+                            }
+                            weight="Bold"
+                          >
+                            Avvisi pagoPA
+                          </Text>
+                          <RNSVGSvgView
+                            accessibilityElementsHidden={true}
+                            accessibilityLabel=""
+                            accessible={false}
+                            align="xMidYMid"
+                            bbHeight={32}
+                            bbWidth={32}
+                            focusable={false}
+                            height={32}
+                            importantForAccessibility="no-hide-descendants"
+                            meetOrSlice={0}
+                            minX={0}
+                            minY={0}
+                            style={
+                              Array [
+                                Object {
+                                  "backgroundColor": "transparent",
+                                  "borderWidth": 0,
+                                },
+                                Object {
+                                  "color": "#D2D6E3",
+                                },
+                                Object {
+                                  "flex": 0,
+                                  "height": 32,
+                                  "width": 32,
+                                },
+                              ]
+                            }
+                            tintColor="#D2D6E3"
+                            vbHeight={32}
+                            vbWidth={32}
+                            width={32}
+                          >
+                            <RNSVGGroup
+                              fill={
+                                Object {
+                                  "payload": 4278190080,
+                                  "type": 0,
+                                }
+                              }
+                            >
+                              <RNSVGPath
+                                d="m22.551 11.358-.009 2.675h-1.956V5h3.617c1.163 0 1.753.314 1.762.941v4.41c0 .628-.563.933-1.697.933H22.56v.074h-.01ZM24 6.043h-1.467v4.189H24v-4.19ZM1.652 14.043l-.01 2.676H0V7.685h3.027c.978 0 1.467.314 1.476.941v4.41c0 .628-.47.933-1.421.933h-1.43v.074ZM2.87 8.737H1.642v4.19H2.87v-4.19ZM9.56 13.969H6.44c-.913 0-1.374-.314-1.374-.941l.009-1.837c0-.618.47-.932 1.421-.94h1.43V8.736H6.7l-.01.83H5.085v-.94c0-.619.48-.923 1.44-.923l1.605-.019c.95 0 1.43.314 1.43.932v5.352Zm-2.852-1.052h1.237l-.01-1.615H6.708v1.615ZM13.149 13.969h-1.44c-.95 0-1.42-.314-1.42-.932v-4.41c.009-.628.498-.942 1.476-.942h3.026v8.102c0 .627-.48.94-1.43.94h-1.633c-.95 0-1.43-.313-1.43-.94v-.932h1.633v.83h1.227v-1.642l-.01-.074Zm-1.227-1.052h1.227v-4.18h-1.227v4.18ZM19.848 13.028c-.01.627-.498.932-1.477.932h-1.587c-.96 0-1.44-.314-1.44-.932v-4.41c0-.628.48-.933 1.44-.933h1.634c.95 0 1.42.314 1.42.932v4.41h.01Zm-1.624-4.291h-1.237v4.19h1.228l.009-4.19Z"
+                                fill={
+                                  Object {
+                                    "type": 2,
+                                  }
+                                }
+                                propList={
+                                  Array [
+                                    "fill",
+                                  ]
+                                }
+                              />
+                              <RNSVGPath
+                                d="M31.99 5.987c0-.627-.562-.932-1.697-.932h-1.956c-1.144 0-1.716.314-1.716.932v8.065h1.956v-2.759h1.476V13.6c0 5.905-4.77 10.676-10.676 10.676a10.694 10.694 0 0 1-8.433-4.116l.978-.747-3.931-2.648.175 5.582 1.255-.996a12.614 12.614 0 0 0 9.956 4.853C26.353 26.204 32 20.548 32 13.581l-.01-7.594Zm-1.946 4.254h-1.477V6.09h1.477v4.152Z"
+                                fill={
+                                  Object {
+                                    "type": 2,
+                                  }
+                                }
+                                propList={
+                                  Array [
+                                    "fill",
+                                  ]
+                                }
+                              />
+                            </RNSVGGroup>
+                          </RNSVGSvgView>
+                        </View>
+                        <View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 24,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`LegacyMessagePayments component Should match the snapshot for five payable payments 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={4}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "marginTop": 40,
+                          }
+                        }
+                        testID="PnPaymentSectionTitle"
+                      >
+                        <View
+                          style={
+                            Object {
+                              "flex": 1,
+                              "flexDirection": "row",
+                            }
+                          }
+                        >
+                          <Text
+                            color="bluegrey"
+                            defaultColor="bluegreyDark"
+                            defaultWeight="Bold"
+                            font="TitilliumWeb"
+                            fontStyle={
+                              Object {
+                                "fontSize": 20,
+                                "lineHeight": 24,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "flex": 1,
+                                },
+                                Object {
+                                  "fontSize": 20,
+                                  "lineHeight": 24,
+                                },
+                                Object {
+                                  "color": "#475A6D",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "700",
+                                },
+                              ]
+                            }
+                            weight="Bold"
+                          >
+                            Avvisi pagoPA
+                          </Text>
+                          <RNSVGSvgView
+                            accessibilityElementsHidden={true}
+                            accessibilityLabel=""
+                            accessible={false}
+                            align="xMidYMid"
+                            bbHeight={32}
+                            bbWidth={32}
+                            focusable={false}
+                            height={32}
+                            importantForAccessibility="no-hide-descendants"
+                            meetOrSlice={0}
+                            minX={0}
+                            minY={0}
+                            style={
+                              Array [
+                                Object {
+                                  "backgroundColor": "transparent",
+                                  "borderWidth": 0,
+                                },
+                                Object {
+                                  "color": "#D2D6E3",
+                                },
+                                Object {
+                                  "flex": 0,
+                                  "height": 32,
+                                  "width": 32,
+                                },
+                              ]
+                            }
+                            tintColor="#D2D6E3"
+                            vbHeight={32}
+                            vbWidth={32}
+                            width={32}
+                          >
+                            <RNSVGGroup
+                              fill={
+                                Object {
+                                  "payload": 4278190080,
+                                  "type": 0,
+                                }
+                              }
+                            >
+                              <RNSVGPath
+                                d="m22.551 11.358-.009 2.675h-1.956V5h3.617c1.163 0 1.753.314 1.762.941v4.41c0 .628-.563.933-1.697.933H22.56v.074h-.01ZM24 6.043h-1.467v4.189H24v-4.19ZM1.652 14.043l-.01 2.676H0V7.685h3.027c.978 0 1.467.314 1.476.941v4.41c0 .628-.47.933-1.421.933h-1.43v.074ZM2.87 8.737H1.642v4.19H2.87v-4.19ZM9.56 13.969H6.44c-.913 0-1.374-.314-1.374-.941l.009-1.837c0-.618.47-.932 1.421-.94h1.43V8.736H6.7l-.01.83H5.085v-.94c0-.619.48-.923 1.44-.923l1.605-.019c.95 0 1.43.314 1.43.932v5.352Zm-2.852-1.052h1.237l-.01-1.615H6.708v1.615ZM13.149 13.969h-1.44c-.95 0-1.42-.314-1.42-.932v-4.41c.009-.628.498-.942 1.476-.942h3.026v8.102c0 .627-.48.94-1.43.94h-1.633c-.95 0-1.43-.313-1.43-.94v-.932h1.633v.83h1.227v-1.642l-.01-.074Zm-1.227-1.052h1.227v-4.18h-1.227v4.18ZM19.848 13.028c-.01.627-.498.932-1.477.932h-1.587c-.96 0-1.44-.314-1.44-.932v-4.41c0-.628.48-.933 1.44-.933h1.634c.95 0 1.42.314 1.42.932v4.41h.01Zm-1.624-4.291h-1.237v4.19h1.228l.009-4.19Z"
+                                fill={
+                                  Object {
+                                    "type": 2,
+                                  }
+                                }
+                                propList={
+                                  Array [
+                                    "fill",
+                                  ]
+                                }
+                              />
+                              <RNSVGPath
+                                d="M31.99 5.987c0-.627-.562-.932-1.697-.932h-1.956c-1.144 0-1.716.314-1.716.932v8.065h1.956v-2.759h1.476V13.6c0 5.905-4.77 10.676-10.676 10.676a10.694 10.694 0 0 1-8.433-4.116l.978-.747-3.931-2.648.175 5.582 1.255-.996a12.614 12.614 0 0 0 9.956 4.853C26.353 26.204 32 20.548 32 13.581l-.01-7.594Zm-1.946 4.254h-1.477V6.09h1.477v4.152Z"
+                                fill={
+                                  Object {
+                                    "type": 2,
+                                  }
+                                }
+                                propList={
+                                  Array [
+                                    "fill",
+                                  ]
+                                }
+                              />
+                            </RNSVGGroup>
+                          </RNSVGSvgView>
+                        </View>
+                        <View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 24,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`LegacyMessagePayments component Should match the snapshot for five processed payments 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={5}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "marginTop": 40,
+                          }
+                        }
+                        testID="PnPaymentSectionTitle"
+                      >
+                        <View
+                          style={
+                            Object {
+                              "flex": 1,
+                              "flexDirection": "row",
+                            }
+                          }
+                        >
+                          <Text
+                            color="bluegrey"
+                            defaultColor="bluegreyDark"
+                            defaultWeight="Bold"
+                            font="TitilliumWeb"
+                            fontStyle={
+                              Object {
+                                "fontSize": 20,
+                                "lineHeight": 24,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "flex": 1,
+                                },
+                                Object {
+                                  "fontSize": 20,
+                                  "lineHeight": 24,
+                                },
+                                Object {
+                                  "color": "#475A6D",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "700",
+                                },
+                              ]
+                            }
+                            weight="Bold"
+                          >
+                            Avvisi pagoPA
+                          </Text>
+                          <RNSVGSvgView
+                            accessibilityElementsHidden={true}
+                            accessibilityLabel=""
+                            accessible={false}
+                            align="xMidYMid"
+                            bbHeight={32}
+                            bbWidth={32}
+                            focusable={false}
+                            height={32}
+                            importantForAccessibility="no-hide-descendants"
+                            meetOrSlice={0}
+                            minX={0}
+                            minY={0}
+                            style={
+                              Array [
+                                Object {
+                                  "backgroundColor": "transparent",
+                                  "borderWidth": 0,
+                                },
+                                Object {
+                                  "color": "#D2D6E3",
+                                },
+                                Object {
+                                  "flex": 0,
+                                  "height": 32,
+                                  "width": 32,
+                                },
+                              ]
+                            }
+                            tintColor="#D2D6E3"
+                            vbHeight={32}
+                            vbWidth={32}
+                            width={32}
+                          >
+                            <RNSVGGroup
+                              fill={
+                                Object {
+                                  "payload": 4278190080,
+                                  "type": 0,
+                                }
+                              }
+                            >
+                              <RNSVGPath
+                                d="m22.551 11.358-.009 2.675h-1.956V5h3.617c1.163 0 1.753.314 1.762.941v4.41c0 .628-.563.933-1.697.933H22.56v.074h-.01ZM24 6.043h-1.467v4.189H24v-4.19ZM1.652 14.043l-.01 2.676H0V7.685h3.027c.978 0 1.467.314 1.476.941v4.41c0 .628-.47.933-1.421.933h-1.43v.074ZM2.87 8.737H1.642v4.19H2.87v-4.19ZM9.56 13.969H6.44c-.913 0-1.374-.314-1.374-.941l.009-1.837c0-.618.47-.932 1.421-.94h1.43V8.736H6.7l-.01.83H5.085v-.94c0-.619.48-.923 1.44-.923l1.605-.019c.95 0 1.43.314 1.43.932v5.352Zm-2.852-1.052h1.237l-.01-1.615H6.708v1.615ZM13.149 13.969h-1.44c-.95 0-1.42-.314-1.42-.932v-4.41c.009-.628.498-.942 1.476-.942h3.026v8.102c0 .627-.48.94-1.43.94h-1.633c-.95 0-1.43-.313-1.43-.94v-.932h1.633v.83h1.227v-1.642l-.01-.074Zm-1.227-1.052h1.227v-4.18h-1.227v4.18ZM19.848 13.028c-.01.627-.498.932-1.477.932h-1.587c-.96 0-1.44-.314-1.44-.932v-4.41c0-.628.48-.933 1.44-.933h1.634c.95 0 1.42.314 1.42.932v4.41h.01Zm-1.624-4.291h-1.237v4.19h1.228l.009-4.19Z"
+                                fill={
+                                  Object {
+                                    "type": 2,
+                                  }
+                                }
+                                propList={
+                                  Array [
+                                    "fill",
+                                  ]
+                                }
+                              />
+                              <RNSVGPath
+                                d="M31.99 5.987c0-.627-.562-.932-1.697-.932h-1.956c-1.144 0-1.716.314-1.716.932v8.065h1.956v-2.759h1.476V13.6c0 5.905-4.77 10.676-10.676 10.676a10.694 10.694 0 0 1-8.433-4.116l.978-.747-3.931-2.648.175 5.582 1.255-.996a12.614 12.614 0 0 0 9.956 4.853C26.353 26.204 32 20.548 32 13.581l-.01-7.594Zm-1.946 4.254h-1.477V6.09h1.477v4.152Z"
+                                fill={
+                                  Object {
+                                    "type": 2,
+                                  }
+                                }
+                                propList={
+                                  Array [
+                                    "fill",
+                                  ]
+                                }
+                              />
+                            </RNSVGGroup>
+                          </RNSVGSvgView>
+                        </View>
+                        <View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 24,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`LegacyMessagePayments component Should match the snapshot for more than five loading payments 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={3}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "marginTop": 40,
+                          }
+                        }
+                        testID="PnPaymentSectionTitle"
+                      >
+                        <View
+                          style={
+                            Object {
+                              "flex": 1,
+                              "flexDirection": "row",
+                            }
+                          }
+                        >
+                          <Text
+                            color="bluegrey"
+                            defaultColor="bluegreyDark"
+                            defaultWeight="Bold"
+                            font="TitilliumWeb"
+                            fontStyle={
+                              Object {
+                                "fontSize": 20,
+                                "lineHeight": 24,
+                              }
+                            }
+                            style={
+                              Array [
+                                Object {
+                                  "flex": 1,
+                                },
+                                Object {
+                                  "fontSize": 20,
+                                  "lineHeight": 24,
+                                },
+                                Object {
+                                  "color": "#475A6D",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "700",
+                                },
+                              ]
+                            }
+                            weight="Bold"
+                          >
+                            Avvisi pagoPA
+                          </Text>
+                          <RNSVGSvgView
+                            accessibilityElementsHidden={true}
+                            accessibilityLabel=""
+                            accessible={false}
+                            align="xMidYMid"
+                            bbHeight={32}
+                            bbWidth={32}
+                            focusable={false}
+                            height={32}
+                            importantForAccessibility="no-hide-descendants"
+                            meetOrSlice={0}
+                            minX={0}
+                            minY={0}
+                            style={
+                              Array [
+                                Object {
+                                  "backgroundColor": "transparent",
+                                  "borderWidth": 0,
+                                },
+                                Object {
+                                  "color": "#D2D6E3",
+                                },
+                                Object {
+                                  "flex": 0,
+                                  "height": 32,
+                                  "width": 32,
+                                },
+                              ]
+                            }
+                            tintColor="#D2D6E3"
+                            vbHeight={32}
+                            vbWidth={32}
+                            width={32}
+                          >
+                            <RNSVGGroup
+                              fill={
+                                Object {
+                                  "payload": 4278190080,
+                                  "type": 0,
+                                }
+                              }
+                            >
+                              <RNSVGPath
+                                d="m22.551 11.358-.009 2.675h-1.956V5h3.617c1.163 0 1.753.314 1.762.941v4.41c0 .628-.563.933-1.697.933H22.56v.074h-.01ZM24 6.043h-1.467v4.189H24v-4.19ZM1.652 14.043l-.01 2.676H0V7.685h3.027c.978 0 1.467.314 1.476.941v4.41c0 .628-.47.933-1.421.933h-1.43v.074ZM2.87 8.737H1.642v4.19H2.87v-4.19ZM9.56 13.969H6.44c-.913 0-1.374-.314-1.374-.941l.009-1.837c0-.618.47-.932 1.421-.94h1.43V8.736H6.7l-.01.83H5.085v-.94c0-.619.48-.923 1.44-.923l1.605-.019c.95 0 1.43.314 1.43.932v5.352Zm-2.852-1.052h1.237l-.01-1.615H6.708v1.615ZM13.149 13.969h-1.44c-.95 0-1.42-.314-1.42-.932v-4.41c.009-.628.498-.942 1.476-.942h3.026v8.102c0 .627-.48.94-1.43.94h-1.633c-.95 0-1.43-.313-1.43-.94v-.932h1.633v.83h1.227v-1.642l-.01-.074Zm-1.227-1.052h1.227v-4.18h-1.227v4.18ZM19.848 13.028c-.01.627-.498.932-1.477.932h-1.587c-.96 0-1.44-.314-1.44-.932v-4.41c0-.628.48-.933 1.44-.933h1.634c.95 0 1.42.314 1.42.932v4.41h.01Zm-1.624-4.291h-1.237v4.19h1.228l.009-4.19Z"
+                                fill={
+                                  Object {
+                                    "type": 2,
+                                  }
+                                }
+                                propList={
+                                  Array [
+                                    "fill",
+                                  ]
+                                }
+                              />
+                              <RNSVGPath
+                                d="M31.99 5.987c0-.627-.562-.932-1.697-.932h-1.956c-1.144 0-1.716.314-1.716.932v8.065h1.956v-2.759h1.476V13.6c0 5.905-4.77 10.676-10.676 10.676a10.694 10.694 0 0 1-8.433-4.116l.978-.747-3.931-2.648.175 5.582 1.255-.996a12.614 12.614 0 0 0 9.956 4.853C26.353 26.204 32 20.548 32 13.581l-.01-7.594Zm-1.946 4.254h-1.477V6.09h1.477v4.152Z"
+                                fill={
+                                  Object {
+                                    "type": 2,
+                                  }
+                                }
+                                propList={
+                                  Array [
+                                    "fill",
+                                  ]
+                                }
+                              />
+                            </RNSVGGroup>
+                          </RNSVGSvgView>
+                        </View>
+                        <View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 24,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessible={false}
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                }
+                              }
+                            >
+                              <View
+                                style={
+                                  Object {
+                                    "flex": 1,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 179,
+                                      }
+                                    }
+                                    width={179}
+                                  />
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "height": 4,
+                                    }
+                                  }
+                                />
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={13}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 13,
+                                        "width": 121,
+                                      }
+                                    }
+                                    width={121}
+                                  />
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  collapsable={false}
+                                  style={
+                                    Object {
+                                      "opacity": 0.5,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    height={16}
+                                    radius={8}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#efefef",
+                                        "borderRadius": 8,
+                                        "height": 16,
+                                        "width": 62,
+                                      }
+                                    }
+                                    width={62}
+                                  />
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "height": 16,
+                              }
+                            }
+                          />
+                          <View
+                            style={
+                              Object {
+                                "alignItems": "center",
+                                "flex": 1,
+                              }
+                            }
+                          >
+                            <View
+                              collapsable={false}
+                              style={
+                                Object {
+                                  "opacity": 0.5,
+                                }
+                              }
+                            >
+                              <View
+                                height={16}
+                                radius={8}
+                                style={
+                                  Object {
+                                    "backgroundColor": "#efefef",
+                                    "borderRadius": 8,
+                                    "height": 16,
+                                    "width": 172,
+                                  }
+                                }
+                                width={172}
+                              />
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/pn/components/__test__/__snapshots__/MessageDetails.test.tsx.snap b/ts/features/pn/components/__test__/__snapshots__/MessageDetails.test.tsx.snap
index ec8a030d60f..6f069dee2a8 100644
--- a/ts/features/pn/components/__test__/__snapshots__/MessageDetails.test.tsx.snap
+++ b/ts/features/pn/components/__test__/__snapshots__/MessageDetails.test.tsx.snap
@@ -20,637 +20,1081 @@ exports[`MessageDetails component should match the snapshot with default props 1
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
+        collapsable={false}
         pointerEvents="box-none"
-        style={null}
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
       >
         <View
-          collapsable={false}
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
           pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
+          style={null}
         >
           <View
             collapsable={false}
+            pointerEvents="box-none"
             style={
               Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
               }
             }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
               }
-            }
-          />
+            />
+          </View>
           <View
+            collapsable={false}
             pointerEvents="box-none"
             style={
               Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
               }
             }
           >
             <View
-              collapsable={false}
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
               pointerEvents="box-none"
               style={
                 Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
                 }
               }
             >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
+              <View
                 collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
+                pointerEvents="box-none"
                 style={
                   Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
                   }
                 }
               >
-                DUMMY_ROUTE
-              </Text>
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  DUMMY_ROUTE
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
             </View>
           </View>
         </View>
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
+      <RNSScreenContainer
+        onLayout={[Function]}
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "flex": 1,
           }
         }
       >
-        <View
+        <RNSModalScreen
+          activityState={2}
           collapsable={false}
-          style={
+          forwardedRef={[Function]}
+          gestureResponseDistance={
             Object {
-              "opacity": 1,
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
             }
           }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          onGestureCancel={[Function]}
           pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
           style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
             Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={1}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
-                    <RCTScrollView>
-                      <View>
-                        <View
-                          style={
-                            Object {
-                              "paddingHorizontal": 24,
-                            }
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <RCTScrollView
+                        contentContainerStyle={
+                          Object {
+                            "paddingBottom": 16,
                           }
-                        >
+                        }
+                      >
+                        <View>
                           <View
                             style={
                               Object {
-                                "flexDirection": "row",
+                                "paddingHorizontal": 24,
                               }
                             }
                           >
                             <View
                               style={
                                 Object {
-                                  "alignItems": "center",
-                                  "alignSelf": "flex-start",
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#E8EBF1",
-                                  "borderRadius": 6,
-                                  "borderWidth": 1,
                                   "flexDirection": "row",
-                                  "justifyContent": "center",
-                                  "paddingHorizontal": 8,
-                                  "paddingVertical": 6,
+                                  "flexWrap": "wrap",
+                                  "justifyContent": "flex-start",
+                                  "marginHorizontal": -4,
+                                  "marginVertical": -4,
                                 }
                               }
                             >
                               <View
                                 style={
                                   Object {
-                                    "flexShrink": 1,
+                                    "marginHorizontal": 4,
+                                    "marginVertical": 4,
                                   }
                                 }
                               >
-                                <RNSVGSvgView
-                                  accessibilityElementsHidden={true}
-                                  accessibilityLabel=""
-                                  accessible={false}
-                                  align="xMidYMid"
-                                  bbHeight={16}
-                                  bbWidth={16}
-                                  color={4278927075}
-                                  focusable={false}
-                                  height={16}
-                                  importantForAccessibility="no-hide-descendants"
-                                  meetOrSlice={0}
-                                  minX={0}
-                                  minY={0}
+                                <View
                                   style={
-                                    Array [
-                                      Object {
-                                        "backgroundColor": "transparent",
-                                        "borderWidth": 0,
-                                      },
-                                      Object {
-                                        "color": "#0B3EE3",
-                                      },
-                                      Object {
-                                        "flex": 0,
-                                        "height": 16,
-                                        "width": 16,
-                                      },
-                                    ]
+                                    Object {
+                                      "alignItems": "center",
+                                      "alignSelf": "flex-start",
+                                      "backgroundColor": "#FFFFFF",
+                                      "borderColor": "#E8EBF1",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 6,
+                                      "borderWidth": 1,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 6,
+                                    }
                                   }
-                                  tintColor={4278927075}
-                                  vbHeight={24}
-                                  vbWidth={24}
-                                  width={16}
                                 >
-                                  <RNSVGGroup>
-                                    <RNSVGPath
-                                      clipRule={0}
-                                      d="M23.3953 14.8922c.4031-.7125.6047-1.4906.6047-2.3297 0-.8906-.225-1.7109-.6703-2.4562-.4453-.74067-1.0453-1.28911-1.7953-1.64536.1781-.48281.2672-1.01719.2672-1.60782 0-1.26562-.4219-2.34374-1.2704-3.23906-.8484-.89531-1.8703-1.34062-3.0656-1.34062-.539 0-1.0453.09844-1.5281.29531-.375-.76875-.9188-1.3875-1.6219-1.86094C13.6125.23906 12.8391 0 12 0s-1.6125.23906-2.31562.7125c-.70782.47344-1.24688 1.09219-1.62188 1.86094-.48281-.19688-.99375-.29532-1.52813-.29532-1.19531 0-2.22187.45-3.07968 1.34063-.85782.89062-1.28438 1.97344-1.28438 3.23906 0 .53438.09844 1.07344.29531 1.60782-.75.35625-1.34999.90468-1.7953 1.64527C.225 10.8516 0 11.6719 0 12.5625c0 .8391.20156 1.6172.6 2.3297.40313.7125.94219 1.2656 1.62188 1.6594-.03282.2531-.05157.45-.05157.5906 0 1.2656.42656 2.3484 1.28438 3.239.85781.8954 1.88437 1.3407 3.07968 1.3407.53907 0 1.04532-.0985 1.52813-.2953.375.7875.90938 1.4109 1.60781 1.875C10.3641 23.7703 11.1422 24 12 24c.8391 0 1.6125-.2344 2.3156-.7125.7078-.4734 1.2469-1.0922 1.6219-1.8609.4828.1968.9937.2953 1.5281.2953 1.1953 0 2.2172-.4453 3.0656-1.3407.8438-.8906 1.2704-1.9687 1.2704-3.239 0-.2672-.0094-.4641-.0282-.5906.6797-.3891 1.2188-.9469 1.6219-1.6594Zm-5.6882-4.1851c.3905-.3905.3905-1.02368 0-1.41421-.3905-.39052-1.0237-.39052-1.4142 0L10 15.5858l-3.29289-3.2929c-.39053-.3905-1.02369-.3905-1.41422 0-.39052.3905-.39052 1.0237 0 1.4142L8.58579 17c.78105.7811 2.04741.781 2.82841 0l6.2929-6.2929Z"
-                                      fill={
+                                  <View
+                                    style={
+                                      Object {
+                                        "flexShrink": 1,
+                                      }
+                                    }
+                                  >
+                                    <RNSVGSvgView
+                                      accessibilityElementsHidden={true}
+                                      accessibilityLabel=""
+                                      accessible={false}
+                                      align="xMidYMid"
+                                      bbHeight={16}
+                                      bbWidth={16}
+                                      focusable={false}
+                                      height={16}
+                                      importantForAccessibility="no-hide-descendants"
+                                      meetOrSlice={0}
+                                      minX={0}
+                                      minY={0}
+                                      style={
                                         Array [
-                                          2,
+                                          Object {
+                                            "backgroundColor": "transparent",
+                                            "borderWidth": 0,
+                                          },
+                                          Object {
+                                            "color": "#0B3EE3",
+                                          },
+                                          Object {
+                                            "flex": 0,
+                                            "height": 16,
+                                            "width": 16,
+                                          },
                                         ]
                                       }
-                                      fillRule={0}
-                                      propList={
+                                      tintColor="#0B3EE3"
+                                      vbHeight={24}
+                                      vbWidth={24}
+                                      width={16}
+                                    >
+                                      <RNSVGGroup
+                                        fill={
+                                          Object {
+                                            "payload": 4278190080,
+                                            "type": 0,
+                                          }
+                                        }
+                                      >
+                                        <RNSVGPath
+                                          clipRule={0}
+                                          d="M23.3953 14.8922c.4031-.7125.6047-1.4906.6047-2.3297 0-.8906-.225-1.7109-.6703-2.4562-.4453-.74067-1.0453-1.28911-1.7953-1.64536.1781-.48281.2672-1.01719.2672-1.60782 0-1.26562-.4219-2.34374-1.2704-3.23906-.8484-.89531-1.8703-1.34062-3.0656-1.34062-.539 0-1.0453.09844-1.5281.29531-.375-.76875-.9188-1.3875-1.6219-1.86094C13.6125.23906 12.8391 0 12 0s-1.6125.23906-2.31562.7125c-.70782.47344-1.24688 1.09219-1.62188 1.86094-.48281-.19688-.99375-.29532-1.52813-.29532-1.19531 0-2.22187.45-3.07968 1.34063-.85782.89062-1.28438 1.97344-1.28438 3.23906 0 .53438.09844 1.07344.29531 1.60782-.75.35625-1.34999.90468-1.7953 1.64527C.225 10.8516 0 11.6719 0 12.5625c0 .8391.20156 1.6172.6 2.3297.40313.7125.94219 1.2656 1.62188 1.6594-.03282.2531-.05157.45-.05157.5906 0 1.2656.42656 2.3484 1.28438 3.239.85781.8954 1.88437 1.3407 3.07968 1.3407.53907 0 1.04532-.0985 1.52813-.2953.375.7875.90938 1.4109 1.60781 1.875C10.3641 23.7703 11.1422 24 12 24c.8391 0 1.6125-.2344 2.3156-.7125.7078-.4734 1.2469-1.0922 1.6219-1.8609.4828.1968.9937.2953 1.5281.2953 1.1953 0 2.2172-.4453 3.0656-1.3407.8438-.8906 1.2704-1.9687 1.2704-3.239 0-.2672-.0094-.4641-.0282-.5906.6797-.3891 1.2188-.9469 1.6219-1.6594Zm-5.6882-4.1851c.3905-.3905.3905-1.02368 0-1.41421-.3905-.39052-1.0237-.39052-1.4142 0L10 15.5858l-3.29289-3.2929c-.39053-.3905-1.02369-.3905-1.41422 0-.39052.3905-.39052 1.0237 0 1.4142L8.58579 17c.78105.7811 2.04741.781 2.82841 0l6.2929-6.2929Z"
+                                          fill={
+                                            Object {
+                                              "type": 2,
+                                            }
+                                          }
+                                          fillRule={0}
+                                          propList={
+                                            Array [
+                                              "fill",
+                                              "fillRule",
+                                            ]
+                                          }
+                                        />
+                                      </RNSVGGroup>
+                                    </RNSVGSvgView>
+                                  </View>
+                                  <View
+                                    style={
+                                      Object {
+                                        "width": 6,
+                                      }
+                                    }
+                                  />
+                                  <Text
+                                    ellipsizeMode="tail"
+                                    numberOfLines={1}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignSelf": "center",
+                                          "color": "#555C70",
+                                          "flexShrink": 1,
+                                          "fontSize": 12,
+                                          "lineHeight": 16,
+                                          "textTransform": "uppercase",
+                                        },
+                                        Object {
+                                          "fontFamily": "Titillium Web",
+                                          "fontStyle": "normal",
+                                          "fontWeight": "600",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    Legal value
+                                  </Text>
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginHorizontal": 4,
+                                    "marginVertical": 4,
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
+                                    Object {
+                                      "alignItems": "center",
+                                      "alignSelf": "flex-start",
+                                      "backgroundColor": "#FFFFFF",
+                                      "borderColor": "#E8EBF1",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 6,
+                                      "borderWidth": 1,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 6,
+                                    }
+                                  }
+                                  testID="attachment-tag"
+                                >
+                                  <View
+                                    style={
+                                      Object {
+                                        "flexShrink": 1,
+                                      }
+                                    }
+                                  >
+                                    <RNSVGSvgView
+                                      accessibilityElementsHidden={false}
+                                      accessibilityLabel="Includes attachments"
+                                      accessible={true}
+                                      align="xMidYMid"
+                                      bbHeight={16}
+                                      bbWidth={16}
+                                      focusable={false}
+                                      height={16}
+                                      importantForAccessibility="auto"
+                                      meetOrSlice={0}
+                                      minX={0}
+                                      minY={0}
+                                      style={
                                         Array [
-                                          "fill",
-                                          "fillRule",
+                                          Object {
+                                            "backgroundColor": "transparent",
+                                            "borderWidth": 0,
+                                          },
+                                          Object {
+                                            "color": "#555C70",
+                                          },
+                                          Object {
+                                            "flex": 0,
+                                            "height": 16,
+                                            "width": 16,
+                                          },
                                         ]
                                       }
-                                    />
-                                  </RNSVGGroup>
-                                </RNSVGSvgView>
+                                      tintColor="#555C70"
+                                      vbHeight={24}
+                                      vbWidth={24}
+                                      width={16}
+                                    >
+                                      <RNSVGGroup
+                                        fill={
+                                          Object {
+                                            "payload": 4278190080,
+                                            "type": 0,
+                                          }
+                                        }
+                                      >
+                                        <RNSVGPath
+                                          d="M22.95 9.5997a.9999.9999 0 0 0-.707-.29279c-.2651 0-.5195.10532-.707.29279l-10.892 10.939a4.99896 4.99896 0 0 1-1.62212 1.084 4.99813 4.99813 0 0 1-1.9135.3808 5.00017 5.00017 0 0 1-3.53586-1.4643 5.00042 5.00042 0 0 1-1.4648-3.5357 5.00026 5.00026 0 0 1 1.4643-3.5358L14.121 2.8757a3.00005 3.00005 0 0 1 4.2253.0167 2.99985 2.99985 0 0 1 .8789 2.109 2.99996 2.99996 0 0 1-.8612 2.1163L7.81502 17.7097a1.0218 1.0218 0 0 1-.707.284 1.02182 1.02182 0 0 1-.707-.284.99989.99989 0 0 1-.29278-.707c0-.2652.10531-.5195.29278-.707l9.39198-9.435a.99975.99975 0 0 0 .2807-.7034 1.00018 1.00018 0 0 0-.2929-.69842.99994.99994 0 0 0-1.4018-.01218l-9.39198 9.435a3.00022 3.00022 0 0 0-.65045.9733 3.00027 3.00027 0 0 0 0 2.2964c.1508.364.37182.6947.65045.9733a3.07287 3.07287 0 0 0 2.1215.8498 3.07287 3.07287 0 0 0 2.1215-.8498L19.778 8.5317a5.0001 5.0001 0 0 0 1.4196-3.52223 4.99983 4.99983 0 0 0-1.4646-3.50375A5.0001 5.0001 0 0 0 16.229.0416a5.00012 5.00012 0 0 0-3.522 1.4201L2.15802 12.0537C.8452 13.3665.10767 15.1471.10767 17.0037c0 1.8566.73753 3.6372 2.05035 4.95 1.31282 1.3128 3.09339 2.0504 4.95 2.0504 1.85661 0 3.63718-.7376 4.94998-2.0504l10.892-10.936a.99968.99968 0 0 0 .2948-.709c0-.1318-.026-.2623-.0766-.38392a.999.999 0 0 0-.2182-.32508Z"
+                                          fill={
+                                            Object {
+                                              "type": 2,
+                                            }
+                                          }
+                                          propList={
+                                            Array [
+                                              "fill",
+                                            ]
+                                          }
+                                        />
+                                      </RNSVGGroup>
+                                    </RNSVGSvgView>
+                                  </View>
+                                </View>
                               </View>
                               <View
                                 style={
                                   Object {
-                                    "width": 6,
+                                    "height": 8,
                                   }
                                 }
                               />
-                              <Text
-                                ellipsizeMode="tail"
-                                numberOfLines={1}
-                                style={
-                                  Array [
-                                    Object {
-                                      "alignSelf": "center",
-                                      "color": "#555C70",
-                                      "flexShrink": 1,
-                                      "fontSize": 12,
-                                      "lineHeight": 16,
-                                      "textTransform": "uppercase",
-                                    },
-                                    Object {
-                                      "fontFamily": "Titillium Web",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "600",
-                                    },
-                                  ]
-                                }
-                              >
-                                Legal value
-                              </Text>
                             </View>
                             <View
                               style={
                                 Object {
-                                  "width": 8,
+                                  "height": 8,
                                 }
                               }
                             />
+                            <Text
+                              allowFontScaling={false}
+                              color="bluegreyDark"
+                              defaultColor="bluegreyDark"
+                              defaultWeight="SemiBold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 24,
+                                  "lineHeight": 34,
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 24,
+                                    "lineHeight": 34,
+                                  },
+                                  Object {
+                                    "color": "#17324D",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
+                                  },
+                                ]
+                              }
+                              testID="message-header-subject"
+                              weight="SemiBold"
+                            >
+                              ######## subject ########
+                            </Text>
                             <View
                               style={
                                 Object {
-                                  "alignItems": "center",
-                                  "alignSelf": "flex-start",
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#E8EBF1",
-                                  "borderRadius": 6,
-                                  "borderWidth": 1,
-                                  "flexDirection": "row",
-                                  "justifyContent": "center",
-                                  "paddingHorizontal": 8,
-                                  "paddingVertical": 6,
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <Text
+                              allowFontScaling={false}
+                              color="grey-700"
+                              defaultColor="blue"
+                              defaultWeight="Bold"
+                              font="TitilliumWeb"
+                              fontSize="regular"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 14,
+                                  "lineHeight": 21,
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  },
+                                  Object {
+                                    "color": "#555C70",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "700",
+                                  },
+                                ]
+                              }
+                              weight="Bold"
+                            >
+                              01 Jan 2020, 00:00
+                            </Text>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#D2D6E3",
+                                  "height": 0.5,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "height": 16,
+                                }
+                              }
+                            />
+                            <Text
+                              allowFontScaling={false}
+                              color="grey-850"
+                              defaultColor="bluegrey"
+                              defaultWeight="Regular"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 16,
+                                  "lineHeight": 24,
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 16,
+                                    "lineHeight": 24,
+                                  },
+                                  Object {
+                                    "color": "#2B2E38",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "400",
+                                  },
+                                ]
+                              }
+                              weight="Regular"
+                            >
+                              ######## abstract ########
+                            </Text>
+                            <View
+                              style={
+                                Object {
+                                  "height": 16,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "height": 16,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "height": 16,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "height": 16,
+                                }
+                              }
+                            />
+                            <View
+                              accessibilityLabel="Informazioni sulla notifica"
+                              accessible={true}
+                              style={
+                                Object {
+                                  "marginHorizontal": -24,
+                                  "paddingHorizontal": 24,
+                                  "paddingVertical": 12,
                                 }
                               }
-                              testID="attachment-tag"
                             >
                               <View
+                                importantForAccessibility="no-hide-descendants"
                                 style={
                                   Object {
-                                    "flexShrink": 1,
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "space-between",
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
+                                    Object {
+                                      "marginRight": 8,
+                                    }
+                                  }
+                                >
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    bbHeight={24}
+                                    bbWidth={24}
+                                    focusable={false}
+                                    height={24}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "color": "#BBC2D6",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 24,
+                                          "width": 24,
+                                        },
+                                      ]
+                                    }
+                                    tintColor="#BBC2D6"
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={24}
+                                  >
+                                    <RNSVGGroup
+                                      fill={
+                                        Object {
+                                          "payload": 4278190080,
+                                          "type": 0,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGPath
+                                        clipRule={0}
+                                        d="M0 12C0 5.3726 5.3726 0 12 0s12 5.3726 12 12-5.3726 12-12 12S0 18.6274 0 12Zm2 0C2 6.47717 6.47717 2 12 2c5.5228 0 10 4.47717 10 10 0 5.5228-4.4772 10-10 10-5.52283 0-10-4.4772-10-10Zm10.0281-4.50455c.8439 0 1.5281-.68415 1.5281-1.52809 0-.84394-.6842-1.52809-1.5281-1.52809-.844 0-1.5281.68415-1.5281 1.52809 0 .84394.6841 1.52809 1.5281 1.52809Zm0 1.94382h.0005c.5678 0 1.0281.46029 1.0281 1.02813v8.0045c0 .5678-.4603 1.0281-1.0281 1.0281h-.0005C11.4603 19.5 11 19.0397 11 18.4719v-8.0045c0-.56784.4603-1.02813 1.0281-1.02813Z"
+                                        fill={
+                                          Object {
+                                            "type": 2,
+                                          }
+                                        }
+                                        fillRule={0}
+                                        propList={
+                                          Array [
+                                            "fill",
+                                            "fillRule",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "flex": 1,
+                                    }
                                   }
+                                >
+                                  <View
+                                    accessibilityElementsHidden={false}
+                                    accessible={true}
+                                    importantForAccessibility="yes"
+                                  >
+                                    <Text
+                                      allowFontScaling={false}
+                                      color="grey-700"
+                                      defaultColor="black"
+                                      defaultWeight="SemiBold"
+                                      font="TitilliumWeb"
+                                      fontStyle={
+                                        Object {
+                                          "fontSize": 18,
+                                          "lineHeight": 25,
+                                        }
+                                      }
+                                      style={
+                                        Array [
+                                          Object {
+                                            "fontSize": 18,
+                                            "lineHeight": 25,
+                                          },
+                                          Object {
+                                            "color": "#555C70",
+                                            "fontFamily": "Titillium Web",
+                                            "fontStyle": "normal",
+                                            "fontWeight": "400",
+                                          },
+                                        ]
+                                      }
+                                      weight="Regular"
+                                    >
+                                      Informazioni sulla notifica
+                                    </Text>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                            <View
+                              accessibilityLabel="Codice IUN copy to clipboard"
+                              accessibilityRole="button"
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                            >
+                              <View
+                                importantForAccessibility="no-hide-descendants"
+                                style={
+                                  Array [
+                                    Object {
+                                      "marginHorizontal": -24,
+                                      "paddingHorizontal": 24,
+                                      "paddingVertical": 12,
+                                    },
+                                    Object {
+                                      "backgroundColor": undefined,
+                                    },
+                                  ]
                                 }
                               >
-                                <RNSVGSvgView
-                                  accessibilityElementsHidden={true}
-                                  accessibilityLabel=""
-                                  accessible={false}
-                                  align="xMidYMid"
-                                  bbHeight={16}
-                                  bbWidth={16}
-                                  color={4283784304}
-                                  focusable={false}
-                                  height={16}
-                                  importantForAccessibility="no-hide-descendants"
-                                  meetOrSlice={0}
-                                  minX={0}
-                                  minY={0}
+                                <View
                                   style={
                                     Array [
                                       Object {
-                                        "backgroundColor": "transparent",
-                                        "borderWidth": 0,
+                                        "alignItems": "center",
+                                        "flexDirection": "row",
+                                        "justifyContent": "space-between",
                                       },
                                       Object {
-                                        "color": "#555C70",
-                                      },
-                                      Object {
-                                        "flex": 0,
-                                        "height": 16,
-                                        "width": 16,
+                                        "transform": Array [
+                                          Object {
+                                            "scale": undefined,
+                                          },
+                                        ],
                                       },
                                     ]
                                   }
-                                  tintColor={4283784304}
-                                  vbHeight={24}
-                                  vbWidth={24}
-                                  width={16}
                                 >
-                                  <RNSVGGroup>
-                                    <RNSVGPath
-                                      d="M22.95 9.5997a.9999.9999 0 0 0-.707-.29279c-.2651 0-.5195.10532-.707.29279l-10.892 10.939a4.99896 4.99896 0 0 1-1.62212 1.084 4.99813 4.99813 0 0 1-1.9135.3808 5.00017 5.00017 0 0 1-3.53586-1.4643 5.00042 5.00042 0 0 1-1.4648-3.5357 5.00026 5.00026 0 0 1 1.4643-3.5358L14.121 2.8757a3.00005 3.00005 0 0 1 4.2253.0167 2.99985 2.99985 0 0 1 .8789 2.109 2.99996 2.99996 0 0 1-.8612 2.1163L7.81502 17.7097a1.0218 1.0218 0 0 1-.707.284 1.02182 1.02182 0 0 1-.707-.284.99989.99989 0 0 1-.29278-.707c0-.2652.10531-.5195.29278-.707l9.39198-9.435a.99975.99975 0 0 0 .2807-.7034 1.00018 1.00018 0 0 0-.2929-.69842.99994.99994 0 0 0-1.4018-.01218l-9.39198 9.435a3.00022 3.00022 0 0 0-.65045.9733 3.00027 3.00027 0 0 0 0 2.2964c.1508.364.37182.6947.65045.9733a3.07287 3.07287 0 0 0 2.1215.8498 3.07287 3.07287 0 0 0 2.1215-.8498L19.778 8.5317a5.0001 5.0001 0 0 0 1.4196-3.52223 4.99983 4.99983 0 0 0-1.4646-3.50375A5.0001 5.0001 0 0 0 16.229.0416a5.00012 5.00012 0 0 0-3.522 1.4201L2.15802 12.0537C.8452 13.3665.10767 15.1471.10767 17.0037c0 1.8566.73753 3.6372 2.05035 4.95 1.31282 1.3128 3.09339 2.0504 4.95 2.0504 1.85661 0 3.63718-.7376 4.94998-2.0504l10.892-10.936a.99968.99968 0 0 0 .2948-.709c0-.1318-.026-.2623-.0766-.38392a.999.999 0 0 0-.2182-.32508Z"
-                                      fill={
+                                  <View
+                                    style={
+                                      Object {
+                                        "flex": 1,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      allowFontScaling={false}
+                                      color="grey-700"
+                                      defaultColor="blue"
+                                      defaultWeight="Bold"
+                                      font="TitilliumWeb"
+                                      fontStyle={
+                                        Object {
+                                          "fontSize": 14,
+                                          "lineHeight": 21,
+                                        }
+                                      }
+                                      style={
                                         Array [
-                                          2,
+                                          Object {
+                                            "fontSize": 14,
+                                            "lineHeight": 21,
+                                          },
+                                          Object {
+                                            "color": "#555C70",
+                                            "fontFamily": "Titillium Web",
+                                            "fontStyle": "normal",
+                                            "fontWeight": "400",
+                                          },
                                         ]
                                       }
-                                      propList={
+                                      weight="Regular"
+                                    >
+                                      Codice IUN
+                                    </Text>
+                                    <Text
+                                      allowFontScaling={false}
+                                      color="blue"
+                                      defaultColor="black"
+                                      defaultWeight="SemiBold"
+                                      font="TitilliumWeb"
+                                      fontStyle={
+                                        Object {
+                                          "fontSize": 18,
+                                          "lineHeight": 25,
+                                        }
+                                      }
+                                      numberOfLines={2}
+                                      style={
                                         Array [
-                                          "fill",
+                                          Object {
+                                            "fontSize": 18,
+                                            "lineHeight": 25,
+                                          },
+                                          Object {
+                                            "color": "#0073E6",
+                                            "fontFamily": "Titillium Web",
+                                            "fontStyle": "normal",
+                                            "fontWeight": "600",
+                                          },
                                         ]
                                       }
-                                    />
-                                  </RNSVGGroup>
-                                </RNSVGSvgView>
+                                      weight="SemiBold"
+                                    >
+                                      731143-7-0317-8200-0
+                                    </Text>
+                                  </View>
+                                  <View
+                                    style={
+                                      Object {
+                                        "marginLeft": 16,
+                                      }
+                                    }
+                                  >
+                                    <RNSVGSvgView
+                                      accessibilityElementsHidden={true}
+                                      accessibilityLabel=""
+                                      accessible={false}
+                                      align="xMidYMid"
+                                      bbHeight={24}
+                                      bbWidth={24}
+                                      focusable={false}
+                                      height={24}
+                                      importantForAccessibility="no-hide-descendants"
+                                      meetOrSlice={0}
+                                      minX={0}
+                                      minY={0}
+                                      style={
+                                        Array [
+                                          Object {
+                                            "backgroundColor": "transparent",
+                                            "borderWidth": 0,
+                                          },
+                                          Object {
+                                            "color": "#0073E6",
+                                          },
+                                          Object {
+                                            "flex": 0,
+                                            "height": 24,
+                                            "width": 24,
+                                          },
+                                        ]
+                                      }
+                                      tintColor="#0073E6"
+                                      vbHeight={24}
+                                      vbWidth={24}
+                                      width={24}
+                                    >
+                                      <RNSVGGroup
+                                        fill={
+                                          Object {
+                                            "payload": 4278190080,
+                                            "type": 0,
+                                          }
+                                        }
+                                      >
+                                        <RNSVGPath
+                                          clipRule={0}
+                                          d="M12 18h8a2 2 0 0 0 2-2V9h-4a3 3 0 0 1-3-3V2h-3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Zm9.332-11.987a2 2 0 0 1 .603.987H18a1 1 0 0 1-1-1V2.227a2 2 0 0 1 .406.281l3.926 3.505ZM14 20h-2a4 4 0 0 1-4-4V6H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2Zm2 0h4a4 4 0 0 0 4-4V7.505a4 4 0 0 0-1.336-2.984l-3.926-3.505A4 4 0 0 0 16.074 0H12a4 4 0 0 0-4 4H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4Z"
+                                          fill={
+                                            Object {
+                                              "type": 2,
+                                            }
+                                          }
+                                          fillRule={0}
+                                          propList={
+                                            Array [
+                                              "fill",
+                                              "fillRule",
+                                            ]
+                                          }
+                                        />
+                                      </RNSVGGroup>
+                                    </RNSVGSvgView>
+                                  </View>
+                                </View>
                               </View>
                             </View>
                           </View>
                           <View
                             style={
                               Object {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <Text
-                            allowFontScaling={false}
-                            color="bluegreyDark"
-                            defaultColor="bluegreyDark"
-                            defaultWeight="SemiBold"
-                            font="TitilliumWeb"
-                            fontStyle={
-                              Object {
-                                "fontSize": 24,
-                                "lineHeight": 34,
+                                "backgroundColor": "#F4F5F8",
+                                "marginBottom": "-95%",
+                                "paddingBottom": "95%",
+                                "paddingHorizontal": 24,
+                                "paddingTop": 16,
                               }
                             }
-                            style={
-                              Array [
-                                Object {
-                                  "fontSize": 24,
-                                  "lineHeight": 34,
-                                },
-                                Object {
-                                  "color": "#17324D",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "600",
-                                },
-                              ]
-                            }
-                            testID="message-header-subject"
-                            weight="SemiBold"
                           >
-                            ######## subject ########
-                          </Text>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <Text
-                            allowFontScaling={false}
-                            color="grey-700"
-                            defaultColor="blue"
-                            defaultWeight="Bold"
-                            font="TitilliumWeb"
-                            fontSize="regular"
-                            fontStyle={
-                              Object {
-                                "fontSize": 14,
-                                "lineHeight": 21,
-                              }
-                            }
-                            style={
-                              Array [
-                                Object {
-                                  "fontSize": 14,
-                                  "lineHeight": 21,
-                                },
+                            <View
+                              style={
                                 Object {
-                                  "color": "#555C70",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "700",
-                                },
-                              ]
-                            }
-                            weight="Bold"
-                          >
-                            01 Jan 2020, 00:00
-                          </Text>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <View
-                            style={
-                              Object {
-                                "backgroundColor": "#D2D6E3",
-                                "height": 0.5,
-                              }
-                            }
-                          />
-                        </View>
-                        <View
-                          style={
-                            Object {
-                              "paddingHorizontal": 24,
-                            }
-                          }
-                        >
-                          <View
-                            style={
-                              Object {
-                                "height": 16,
-                              }
-                            }
-                          />
-                          <Text
-                            allowFontScaling={false}
-                            color="grey-850"
-                            defaultColor="bluegrey"
-                            defaultWeight="Regular"
-                            font="TitilliumWeb"
-                            fontStyle={
-                              Object {
-                                "fontSize": 16,
-                                "lineHeight": 24,
+                                  "height": 16,
+                                }
                               }
-                            }
-                            style={
-                              Array [
-                                Object {
-                                  "fontSize": 16,
-                                  "lineHeight": 24,
-                                },
-                                Object {
-                                  "color": "#2B2E38",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "400",
-                                },
-                              ]
-                            }
-                            weight="Regular"
-                          >
-                            ######## abstract ########
-                          </Text>
+                            />
+                          </View>
                         </View>
-                      </View>
-                    </RCTScrollView>
+                      </RCTScrollView>
+                    </View>
                   </View>
                 </View>
               </View>
             </View>
           </View>
-        </View>
-      </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
     </View>
   </RNCSafeAreaProvider>
 </View>
diff --git a/ts/features/pn/components/__test__/__snapshots__/MessageDetailsContent.test.tsx.snap b/ts/features/pn/components/__test__/__snapshots__/MessageDetailsContent.test.tsx.snap
index 19f593ad32a..9b81a6c19e4 100644
--- a/ts/features/pn/components/__test__/__snapshots__/MessageDetailsContent.test.tsx.snap
+++ b/ts/features/pn/components/__test__/__snapshots__/MessageDetailsContent.test.tsx.snap
@@ -1,20 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MessageDetailsContent component should match the snapshot when abstract is defined 1`] = `
-<View
-  style={
-    Object {
-      "paddingHorizontal": 24,
-    }
-  }
->
+Array [
   <View
     style={
       Object {
         "height": 16,
       }
     }
-  />
+  />,
   <Text
     allowFontScaling={false}
     color="grey-850"
@@ -44,8 +38,8 @@ exports[`MessageDetailsContent component should match the snapshot when abstract
     weight="Regular"
   >
     abstract
-  </Text>
-</View>
+  </Text>,
+]
 `;
 
 exports[`MessageDetailsContent component should match the snapshot when abstract is not defined 1`] = `null`;
diff --git a/ts/features/pn/components/__test__/__snapshots__/MessageF24.test.tsx.snap b/ts/features/pn/components/__test__/__snapshots__/MessageF24.test.tsx.snap
deleted file mode 100644
index b044f551d36..00000000000
--- a/ts/features/pn/components/__test__/__snapshots__/MessageF24.test.tsx.snap
+++ /dev/null
@@ -1,1120 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MessageF24 component when there are multiple F24 should match the snapshot 1`] = `
-<View
-  style={
-    Object {
-      "flex": 1,
-    }
-  }
->
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
-    style={
-      Array [
-        Object {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
-        Object {
-          "zIndex": 1,
-        }
-      }
-    >
-      <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
-      >
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
-              }
-            }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
-              }
-            }
-          />
-          <View
-            pointerEvents="box-none"
-            style={
-              Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              pointerEvents="box-none"
-              style={
-                Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
-                collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
-                  }
-                }
-              >
-                DUMMY
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
-          pointerEvents="box-none"
-          style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
-            Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            needsOffscreenAlphaCompositing={false}
-            pointerEvents="box-none"
-            style={
-              Object {
-                "flex": 1,
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={4}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              style={
-                Object {
-                  "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                pointerEvents="none"
-                style={
-                  Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
-                      Object {
-                        "backgroundColor": "#FFFFFF",
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-              >
-                <View
-                  style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      Object {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Object {
-                          "marginTop": 40,
-                        }
-                      }
-                      testID="pn-f24-section"
-                    >
-                      <View
-                        style={
-                          Object {
-                            "flex": 1,
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <Text
-                          color="bluegrey"
-                          defaultColor="bluegreyDark"
-                          defaultWeight="Bold"
-                          font="TitilliumWeb"
-                          fontStyle={
-                            Object {
-                              "fontSize": 20,
-                              "lineHeight": 24,
-                            }
-                          }
-                          style={
-                            Array [
-                              Object {
-                                "flex": 1,
-                              },
-                              Object {
-                                "fontSize": 20,
-                                "lineHeight": 24,
-                              },
-                              Object {
-                                "color": "#475A6D",
-                                "fontFamily": "Titillium Web",
-                                "fontStyle": "normal",
-                                "fontWeight": "700",
-                              },
-                            ]
-                          }
-                          weight="Bold"
-                        >
-                          Modelli F24
-                        </Text>
-                      </View>
-                      <View>
-                        <View
-                          style={
-                            Object {
-                              "height": 16,
-                            }
-                          }
-                        />
-                        <Text
-                          allowFontScaling={false}
-                          color="bluegreyDark"
-                          defaultColor="bluegrey"
-                          defaultWeight="Regular"
-                          font="TitilliumWeb"
-                          fontStyle={
-                            Object {
-                              "fontSize": 16,
-                              "lineHeight": 24,
-                            }
-                          }
-                          style={
-                            Array [
-                              Object {
-                                "fontSize": 16,
-                                "lineHeight": 24,
-                              },
-                              Object {
-                                "color": "#17324D",
-                                "fontFamily": "Titillium Web",
-                                "fontStyle": "normal",
-                                "fontWeight": "400",
-                              },
-                            ]
-                          }
-                          weight="Regular"
-                        >
-                          Se preferisci, puoi pagare questa notifica tramite F24.
-                        </Text>
-                        <View
-                          style={
-                            Object {
-                              "height": 16,
-                            }
-                          }
-                        />
-                        <View
-                          style={
-                            Object {
-                              "alignSelf": "center",
-                            }
-                          }
-                        >
-                          <View
-                            accessibilityLabel="Vedi modelli F24"
-                            accessibilityRole="button"
-                            accessibilityState={
-                              Object {
-                                "disabled": false,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            hitSlop={
-                              Object {
-                                "bottom": 14,
-                                "left": 24,
-                                "right": 24,
-                                "top": 14,
-                              }
-                            }
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            onTouchEnd={[Function]}
-                            style={
-                              Object {
-                                "alignSelf": "flex-start",
-                              }
-                            }
-                          >
-                            <View
-                              style={
-                                Array [
-                                  Object {
-                                    "alignItems": "center",
-                                    "elevation": 0,
-                                    "flexDirection": "row",
-                                    "justifyContent": "center",
-                                    "textAlignVertical": "center",
-                                  },
-                                  false,
-                                  Object {},
-                                  Object {
-                                    "transform": Array [
-                                      Object {
-                                        "scale": undefined,
-                                      },
-                                    ],
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                allowFontScaling={false}
-                                ellipsizeMode="tail"
-                                maxFontSizeMultiplier={1.3}
-                                numberOfLines={1}
-                                style={
-                                  Array [
-                                    Object {
-                                      "fontFamily": "Titillium Web",
-                                      "fontSize": 16,
-                                      "fontStyle": "normal",
-                                      "fontWeight": "700",
-                                    },
-                                    Object {
-                                      "color": "#0073E6",
-                                    },
-                                    Object {
-                                      "color": undefined,
-                                    },
-                                  ]
-                                }
-                              >
-                                Vedi modelli F24
-                              </Text>
-                            </View>
-                          </View>
-                        </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </RNCSafeAreaProvider>
-</View>
-`;
-
-exports[`MessageF24 component when there is only one F24 should match the snapshot 1`] = `
-<View
-  style={
-    Object {
-      "flex": 1,
-    }
-  }
->
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
-    style={
-      Array [
-        Object {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
-        Object {
-          "zIndex": 1,
-        }
-      }
-    >
-      <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
-      >
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
-              }
-            }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
-              }
-            }
-          />
-          <View
-            pointerEvents="box-none"
-            style={
-              Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              pointerEvents="box-none"
-              style={
-                Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
-                collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
-                  }
-                }
-              >
-                DUMMY
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
-          pointerEvents="box-none"
-          style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
-            Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            needsOffscreenAlphaCompositing={false}
-            pointerEvents="box-none"
-            style={
-              Object {
-                "flex": 1,
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={1}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              style={
-                Object {
-                  "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                pointerEvents="none"
-                style={
-                  Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
-                      Object {
-                        "backgroundColor": "#FFFFFF",
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-              >
-                <View
-                  style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      Object {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Object {
-                          "marginTop": 40,
-                        }
-                      }
-                      testID="pn-f24-section"
-                    >
-                      <View
-                        style={
-                          Object {
-                            "flex": 1,
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <Text
-                          color="bluegrey"
-                          defaultColor="bluegreyDark"
-                          defaultWeight="Bold"
-                          font="TitilliumWeb"
-                          fontStyle={
-                            Object {
-                              "fontSize": 20,
-                              "lineHeight": 24,
-                            }
-                          }
-                          style={
-                            Array [
-                              Object {
-                                "flex": 1,
-                              },
-                              Object {
-                                "fontSize": 20,
-                                "lineHeight": 24,
-                              },
-                              Object {
-                                "color": "#475A6D",
-                                "fontFamily": "Titillium Web",
-                                "fontStyle": "normal",
-                                "fontWeight": "700",
-                              },
-                            ]
-                          }
-                          weight="Bold"
-                        >
-                          Modelli F24
-                        </Text>
-                      </View>
-                      <View>
-                        <View
-                          style={
-                            Object {
-                              "height": 16,
-                            }
-                          }
-                        />
-                        <Text
-                          allowFontScaling={false}
-                          color="bluegreyDark"
-                          defaultColor="bluegrey"
-                          defaultWeight="Regular"
-                          font="TitilliumWeb"
-                          fontStyle={
-                            Object {
-                              "fontSize": 16,
-                              "lineHeight": 24,
-                            }
-                          }
-                          style={
-                            Array [
-                              Object {
-                                "fontSize": 16,
-                                "lineHeight": 24,
-                              },
-                              Object {
-                                "color": "#17324D",
-                                "fontFamily": "Titillium Web",
-                                "fontStyle": "normal",
-                                "fontWeight": "400",
-                              },
-                            ]
-                          }
-                          weight="Regular"
-                        >
-                          Se preferisci, puoi pagare questa notifica tramite F24.
-                        </Text>
-                        <View
-                          style={
-                            Object {
-                              "height": 16,
-                            }
-                          }
-                        />
-                        <View
-                          testID="f24-list-container"
-                        >
-                          <View
-                            accessibilityRole="button"
-                            accessibilityState={
-                              Object {
-                                "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]}
-                            testID="message-attachment"
-                          >
-                            <View
-                              style={
-                                Array [
-                                  Object {
-                                    "alignItems": "center",
-                                    "backgroundColor": "#FFFFFF",
-                                    "borderColor": "#CCD4DC",
-                                    "borderRadius": 8,
-                                    "borderStyle": "solid",
-                                    "borderWidth": 1,
-                                    "flex": 1,
-                                    "flexDirection": "row",
-                                    "justifyContent": "space-between",
-                                    "paddingHorizontal": 16,
-                                    "paddingVertical": 16,
-                                  },
-                                  Object {
-                                    "transform": Array [
-                                      Object {
-                                        "scale": undefined,
-                                      },
-                                    ],
-                                  },
-                                  Object {
-                                    "opacity": 1,
-                                  },
-                                ]
-                              }
-                            >
-                              <View
-                                style={
-                                  Object {
-                                    "marginRight": 16,
-                                  }
-                                }
-                              >
-                                <RNSVGSvgView
-                                  accessibilityElementsHidden={true}
-                                  accessibilityLabel=""
-                                  accessible={false}
-                                  align="xMidYMid"
-                                  bbHeight={32}
-                                  bbWidth={32}
-                                  color={4278219750}
-                                  focusable={false}
-                                  height={32}
-                                  importantForAccessibility="no-hide-descendants"
-                                  meetOrSlice={0}
-                                  minX={0}
-                                  minY={0}
-                                  style={
-                                    Array [
-                                      Object {
-                                        "backgroundColor": "transparent",
-                                        "borderWidth": 0,
-                                      },
-                                      Object {
-                                        "color": "#0073E6",
-                                      },
-                                      Object {
-                                        "flex": 0,
-                                        "height": 32,
-                                        "width": 32,
-                                      },
-                                    ]
-                                  }
-                                  tintColor={4278219750}
-                                  vbHeight={24}
-                                  vbWidth={24}
-                                  width={32}
-                                >
-                                  <RNSVGGroup>
-                                    <RNSVGPath
-                                      clipRule={0}
-                                      d="M22.002 5c0-1.65685-1.3432-3-3-3H5.00195c-1.65685 0-3 1.34315-3 3v14c0 1.6569 1.34315 3 3 3H14.002v-5c0-1.6569 1.3431-3 3-3h5V5Zm-5.5356 16.1213a2.99926 2.99926 0 0 1-.4644.3797V17c0-.5523.4477-1 1-1h4.5009a3.00406 3.00406 0 0 1-.3796.4645l-4.6569 4.6568ZM19.002 0c2.7614 0 5 2.23858 5 5v9.3431c0 1.3261-.5268 2.5979-1.4645 3.5356l-4.6569 4.6568A4.99988 4.99988 0 0 1 14.3451 24H5.00195c-2.76142 0-5-2.2386-5-5V5c0-2.76142 2.23858-5 5-5H19.002ZM4.60938 11.0001v-4.9h2.121c.30799 0 .58333.07.826.21.24266.14.434.33133.57399.574.14001.238.21.511.21.819 0 .31266-.06999.595-.21.847-.13999.252-.33133.45033-.57399.595-.24267.14466-.51801.217-.826.217h-.924v1.638h-1.197Zm1.183-2.695h.777c.10266 0 .19366-.02334.27299-.07.08401-.05134.15167-.12134.20301-.21.05133-.08867.077-.189.077-.301 0-.11667-.02567-.217-.077-.301-.05134-.084-.119-.14934-.20301-.196-.07933-.04667-.17033-.07-.27299-.07h-.777v1.148Zm3.45176 2.695v-4.9h2.06496c.3594 0 .6884.06066.987.182.2987.11666.5554.28466.77.504.2147.21466.3804.47366.497.777.1167.29866.175.62766.175.987 0 .364-.0583.69533-.175.994-.1166.29866-.2823.5577-.497.777-.2146.2147-.4713.3827-.77.504-.294.1167-.623.175-.987.175H9.24414Zm2.02996-1.057h-.833v-2.786h.833c.1914 0 .364.03266.518.098.154.06533.2847.161.392.287.112.12133.196.26833.252.441.0607.168.091.357.091.567 0 .21-.0303.40133-.091.574-.056.168-.14.315-.252.441-.1073.12133-.238.21466-.392.28-.154.06533-.3266.098-.518.098Zm3.3773-3.843v4.9h1.197v-1.876h1.911v-1.001h-1.911v-.966h2.191v-1.057h-3.388Z"
-                                      fill={
-                                        Array [
-                                          2,
-                                        ]
-                                      }
-                                      fillRule={0}
-                                      propList={
-                                        Array [
-                                          "fill",
-                                          "fillRule",
-                                        ]
-                                      }
-                                    />
-                                  </RNSVGGroup>
-                                </RNSVGSvgView>
-                              </View>
-                              <View
-                                style={
-                                  Object {
-                                    "flex": 1,
-                                  }
-                                }
-                              >
-                                <Text
-                                  allowFontScaling={false}
-                                  color="bluegrey"
-                                  defaultColor="blue"
-                                  defaultWeight="Bold"
-                                  font="TitilliumWeb"
-                                  fontStyle={
-                                    Object {
-                                      "fontSize": 14,
-                                      "lineHeight": 21,
-                                    }
-                                  }
-                                  numberOfLines={1}
-                                  style={
-                                    Array [
-                                      Object {
-                                        "fontSize": 14,
-                                        "lineHeight": 21,
-                                      },
-                                      Object {
-                                        "color": "#475A6D",
-                                        "fontFamily": "Titillium Web",
-                                        "fontStyle": "normal",
-                                        "fontWeight": "600",
-                                      },
-                                    ]
-                                  }
-                                  weight="SemiBold"
-                                >
-                                  invoice.pdf
-                                </Text>
-                              </View>
-                              <View
-                                style={
-                                  Object {
-                                    "alignItems": "center",
-                                    "flexDirection": "row",
-                                    "justifyContent": "flex-end",
-                                    "marginLeft": 16,
-                                  }
-                                }
-                              >
-                                <RNSVGSvgView
-                                  accessibilityElementsHidden={true}
-                                  accessibilityLabel=""
-                                  accessible={false}
-                                  align="xMidYMid"
-                                  bbHeight={24}
-                                  bbWidth={24}
-                                  color={4278219750}
-                                  focusable={false}
-                                  height={24}
-                                  importantForAccessibility="no-hide-descendants"
-                                  meetOrSlice={0}
-                                  minX={0}
-                                  minY={0}
-                                  style={
-                                    Array [
-                                      Object {
-                                        "backgroundColor": "transparent",
-                                        "borderWidth": 0,
-                                      },
-                                      Object {
-                                        "color": "#0073E6",
-                                      },
-                                      Object {
-                                        "flex": 0,
-                                        "height": 24,
-                                        "width": 24,
-                                      },
-                                    ]
-                                  }
-                                  tintColor={4278219750}
-                                  vbHeight={24}
-                                  vbWidth={24}
-                                  width={24}
-                                >
-                                  <RNSVGGroup>
-                                    <RNSVGPath
-                                      clipRule={0}
-                                      d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
-                                      fill={
-                                        Array [
-                                          2,
-                                        ]
-                                      }
-                                      fillRule={0}
-                                      propList={
-                                        Array [
-                                          "fill",
-                                          "fillRule",
-                                        ]
-                                      }
-                                    />
-                                  </RNSVGGroup>
-                                </RNSVGSvgView>
-                              </View>
-                            </View>
-                          </View>
-                        </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </RNCSafeAreaProvider>
-</View>
-`;
diff --git a/ts/features/pn/components/__test__/__snapshots__/MessageFooter.test.tsx.snap b/ts/features/pn/components/__test__/__snapshots__/MessageFooter.test.tsx.snap
new file mode 100644
index 00000000000..524d260a84b
--- /dev/null
+++ b/ts/features/pn/components/__test__/__snapshots__/MessageFooter.test.tsx.snap
@@ -0,0 +1,366 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageFooter should match snapshot 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  PN_ROUTES_MESSAGE_DETAILS
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "backgroundColor": "#F4F5F8",
+                            "marginBottom": "-95%",
+                            "paddingBottom": "95%",
+                            "paddingHorizontal": 24,
+                            "paddingTop": 16,
+                          }
+                        }
+                      >
+                        <View
+                          style={
+                            Object {
+                              "height": 16,
+                            }
+                          }
+                        />
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/pn/components/__test__/__snapshots__/MessageInfo.test.tsx.snap b/ts/features/pn/components/__test__/__snapshots__/MessageInfo.test.tsx.snap
new file mode 100644
index 00000000000..02098919913
--- /dev/null
+++ b/ts/features/pn/components/__test__/__snapshots__/MessageInfo.test.tsx.snap
@@ -0,0 +1,671 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageInfo should match snapshot 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  PN_ROUTES_MESSAGE_DETAILS
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityLabel="Informazioni sulla notifica"
+                        accessible={true}
+                        style={
+                          Object {
+                            "marginHorizontal": -24,
+                            "paddingHorizontal": 24,
+                            "paddingVertical": 12,
+                          }
+                        }
+                      >
+                        <View
+                          importantForAccessibility="no-hide-descendants"
+                          style={
+                            Object {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "space-between",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "marginRight": 8,
+                              }
+                            }
+                          >
+                            <RNSVGSvgView
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessible={false}
+                              align="xMidYMid"
+                              bbHeight={24}
+                              bbWidth={24}
+                              focusable={false}
+                              height={24}
+                              importantForAccessibility="no-hide-descendants"
+                              meetOrSlice={0}
+                              minX={0}
+                              minY={0}
+                              style={
+                                Array [
+                                  Object {
+                                    "backgroundColor": "transparent",
+                                    "borderWidth": 0,
+                                  },
+                                  Object {
+                                    "color": "#BBC2D6",
+                                  },
+                                  Object {
+                                    "flex": 0,
+                                    "height": 24,
+                                    "width": 24,
+                                  },
+                                ]
+                              }
+                              tintColor="#BBC2D6"
+                              vbHeight={24}
+                              vbWidth={24}
+                              width={24}
+                            >
+                              <RNSVGGroup
+                                fill={
+                                  Object {
+                                    "payload": 4278190080,
+                                    "type": 0,
+                                  }
+                                }
+                              >
+                                <RNSVGPath
+                                  clipRule={0}
+                                  d="M0 12C0 5.3726 5.3726 0 12 0s12 5.3726 12 12-5.3726 12-12 12S0 18.6274 0 12Zm2 0C2 6.47717 6.47717 2 12 2c5.5228 0 10 4.47717 10 10 0 5.5228-4.4772 10-10 10-5.52283 0-10-4.4772-10-10Zm10.0281-4.50455c.8439 0 1.5281-.68415 1.5281-1.52809 0-.84394-.6842-1.52809-1.5281-1.52809-.844 0-1.5281.68415-1.5281 1.52809 0 .84394.6841 1.52809 1.5281 1.52809Zm0 1.94382h.0005c.5678 0 1.0281.46029 1.0281 1.02813v8.0045c0 .5678-.4603 1.0281-1.0281 1.0281h-.0005C11.4603 19.5 11 19.0397 11 18.4719v-8.0045c0-.56784.4603-1.02813 1.0281-1.02813Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  fillRule={0}
+                                  propList={
+                                    Array [
+                                      "fill",
+                                      "fillRule",
+                                    ]
+                                  }
+                                />
+                              </RNSVGGroup>
+                            </RNSVGSvgView>
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityElementsHidden={false}
+                              accessible={true}
+                              importantForAccessibility="yes"
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="grey-700"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#555C70",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Informazioni sulla notifica
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View
+                        accessibilityLabel="Codice IUN copy to clipboard"
+                        accessibilityRole="button"
+                        accessible={true}
+                        collapsable={false}
+                        focusable={true}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
+                      >
+                        <View
+                          importantForAccessibility="no-hide-descendants"
+                          style={
+                            Array [
+                              Object {
+                                "marginHorizontal": -24,
+                                "paddingHorizontal": 24,
+                                "paddingVertical": 12,
+                              },
+                              Object {
+                                "backgroundColor": undefined,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                },
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flex": 1,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="grey-700"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#555C70",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Codice IUN
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="blue"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                YYYYMM-1-ABCD-EFGH-X
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Object {
+                                  "marginLeft": 16,
+                                }
+                              }
+                            >
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M12 18h8a2 2 0 0 0 2-2V9h-4a3 3 0 0 1-3-3V2h-3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Zm9.332-11.987a2 2 0 0 1 .603.987H18a1 1 0 0 1-1-1V2.227a2 2 0 0 1 .406.281l3.926 3.505ZM14 20h-2a4 4 0 0 1-4-4V6H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2Zm2 0h4a4 4 0 0 0 4-4V7.505a4 4 0 0 0-1.336-2.984l-3.926-3.505A4 4 0 0 0 16.074 0H12a4 4 0 0 0-4 4H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/pn/components/__test__/__snapshots__/MessagePaymentItem.test.tsx.snap b/ts/features/pn/components/__test__/__snapshots__/MessagePaymentItem.test.tsx.snap
deleted file mode 100644
index 0256890a477..00000000000
--- a/ts/features/pn/components/__test__/__snapshots__/MessagePaymentItem.test.tsx.snap
+++ /dev/null
@@ -1,1499 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MessagePaymentItem component Should match the snapshot for a loading item 1`] = `
-<View
-  style={
-    Object {
-      "flex": 1,
-    }
-  }
->
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
-    style={
-      Array [
-        Object {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
-        Object {
-          "zIndex": 1,
-        }
-      }
-    >
-      <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
-      >
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
-              }
-            }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
-              }
-            }
-          />
-          <View
-            pointerEvents="box-none"
-            style={
-              Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              pointerEvents="box-none"
-              style={
-                Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
-                collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
-                  }
-                }
-              >
-                DUMMY
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
-          pointerEvents="box-none"
-          style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
-            Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            needsOffscreenAlphaCompositing={false}
-            pointerEvents="box-none"
-            style={
-              Object {
-                "flex": 1,
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={1}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              style={
-                Object {
-                  "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                pointerEvents="none"
-                style={
-                  Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
-                      Object {
-                        "backgroundColor": "#FFFFFF",
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-              >
-                <View
-                  style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      Object {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View>
-                      <View
-                        style={
-                          Object {
-                            "height": 24,
-                          }
-                        }
-                      />
-                      <View
-                        accessible={false}
-                        style={
-                          Object {
-                            "alignItems": "center",
-                            "backgroundColor": "#FFFFFF",
-                            "borderColor": "#E8EBF1",
-                            "borderRadius": 8,
-                            "borderWidth": 1,
-                            "flexDirection": "row",
-                            "justifyContent": "space-between",
-                            "paddingHorizontal": 16,
-                            "paddingVertical": 16,
-                          }
-                        }
-                      >
-                        <View
-                          style={
-                            Object {
-                              "flex": 1,
-                            }
-                          }
-                        >
-                          <View
-                            collapsable={false}
-                            style={
-                              Object {
-                                "opacity": 0.5,
-                              }
-                            }
-                          >
-                            <View
-                              height={16}
-                              radius={8}
-                              style={
-                                Object {
-                                  "backgroundColor": "#efefef",
-                                  "borderRadius": 8,
-                                  "height": 16,
-                                  "width": 179,
-                                }
-                              }
-                              width={179}
-                            />
-                          </View>
-                          <View
-                            style={
-                              Object {
-                                "height": 4,
-                              }
-                            }
-                          />
-                          <View
-                            collapsable={false}
-                            style={
-                              Object {
-                                "opacity": 0.5,
-                              }
-                            }
-                          >
-                            <View
-                              height={13}
-                              radius={8}
-                              style={
-                                Object {
-                                  "backgroundColor": "#efefef",
-                                  "borderRadius": 8,
-                                  "height": 13,
-                                  "width": 121,
-                                }
-                              }
-                              width={121}
-                            />
-                          </View>
-                        </View>
-                        <View
-                          style={
-                            Object {
-                              "marginLeft": 16,
-                            }
-                          }
-                        >
-                          <View
-                            collapsable={false}
-                            style={
-                              Object {
-                                "opacity": 0.5,
-                              }
-                            }
-                          >
-                            <View
-                              height={16}
-                              radius={8}
-                              style={
-                                Object {
-                                  "backgroundColor": "#efefef",
-                                  "borderRadius": 8,
-                                  "height": 16,
-                                  "width": 62,
-                                }
-                              }
-                              width={62}
-                            />
-                          </View>
-                        </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </RNCSafeAreaProvider>
-</View>
-`;
-
-exports[`MessagePaymentItem component Should match the snapshot for a payable item 1`] = `
-<View
-  style={
-    Object {
-      "flex": 1,
-    }
-  }
->
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
-    style={
-      Array [
-        Object {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
-        Object {
-          "zIndex": 1,
-        }
-      }
-    >
-      <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
-      >
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
-              }
-            }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
-              }
-            }
-          />
-          <View
-            pointerEvents="box-none"
-            style={
-              Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              pointerEvents="box-none"
-              style={
-                Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
-                collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
-                  }
-                }
-              >
-                DUMMY
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
-          pointerEvents="box-none"
-          style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
-            Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            needsOffscreenAlphaCompositing={false}
-            pointerEvents="box-none"
-            style={
-              Object {
-                "flex": 1,
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={2}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              style={
-                Object {
-                  "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                pointerEvents="none"
-                style={
-                  Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
-                      Object {
-                        "backgroundColor": "#FFFFFF",
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-              >
-                <View
-                  style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      Object {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View>
-                      <View
-                        style={
-                          Object {
-                            "height": 24,
-                          }
-                        }
-                      />
-                      <View
-                        accessibilityRole="button"
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        onTouchEnd={[Function]}
-                      >
-                        <View
-                          style={
-                            Array [
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
-                              },
-                              false,
-                              Object {
-                                "transform": Array [
-                                  Object {
-                                    "scale": undefined,
-                                  },
-                                ],
-                              },
-                            ]
-                          }
-                        >
-                          <View
-                            style={
-                              Object {
-                                "flexGrow": 1,
-                                "flexShrink": 1,
-                                "paddingEnd": 8,
-                              }
-                            }
-                          >
-                            <Text
-                              allowFontScaling={false}
-                              color="bluegrey"
-                              defaultColor="blue"
-                              defaultWeight="Bold"
-                              font="TitilliumWeb"
-                              fontStyle={
-                                Object {
-                                  "fontSize": 14,
-                                  "lineHeight": 21,
-                                }
-                              }
-                              numberOfLines={1}
-                              style={
-                                Array [
-                                  Object {
-                                    "fontSize": 14,
-                                    "lineHeight": 21,
-                                  },
-                                  Object {
-                                    "color": "#475A6D",
-                                    "fontFamily": "Titillium Web",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "400",
-                                  },
-                                ]
-                              }
-                              weight="Regular"
-                            >
-                              Due date 23/11/2023
-                            </Text>
-                            <Text
-                              allowFontScaling={false}
-                              color="bluegrey"
-                              defaultColor="blue"
-                              defaultWeight="Bold"
-                              font="TitilliumWeb"
-                              fontStyle={
-                                Object {
-                                  "fontSize": 14,
-                                  "lineHeight": 21,
-                                }
-                              }
-                              numberOfLines={2}
-                              style={
-                                Array [
-                                  Object {
-                                    "fontSize": 14,
-                                    "lineHeight": 21,
-                                  },
-                                  Object {
-                                    "color": "#475A6D",
-                                    "fontFamily": "Titillium Web",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "600",
-                                  },
-                                ]
-                              }
-                              weight="SemiBold"
-                            >
-                              Causale
-                            </Text>
-                          </View>
-                          <View
-                            style={
-                              Array [
-                                Object {
-                                  "alignItems": "center",
-                                  "flexDirection": "row",
-                                  "justifyContent": "flex-end",
-                                  "marginLeft": 16,
-                                },
-                                Object {
-                                  "flexShrink": 1,
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="0.99 €"
-                              allowFontScaling={false}
-                              color="blue"
-                              defaultColor="black"
-                              defaultWeight="SemiBold"
-                              font="TitilliumWeb"
-                              fontStyle={
-                                Object {
-                                  "fontSize": 18,
-                                  "lineHeight": 25,
-                                }
-                              }
-                              style={
-                                Array [
-                                  Object {
-                                    "fontSize": 18,
-                                    "lineHeight": 25,
-                                  },
-                                  Object {
-                                    "color": "#0073E6",
-                                    "fontFamily": "Titillium Web",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "600",
-                                  },
-                                ]
-                              }
-                              weight="SemiBold"
-                            >
-                              0.99 €
-                            </Text>
-                            <RNSVGSvgView
-                              accessibilityElementsHidden={true}
-                              accessibilityLabel=""
-                              accessible={false}
-                              align="xMidYMid"
-                              bbHeight={24}
-                              bbWidth={24}
-                              color={4278219750}
-                              focusable={false}
-                              height={24}
-                              importantForAccessibility="no-hide-descendants"
-                              meetOrSlice={0}
-                              minX={0}
-                              minY={0}
-                              style={
-                                Array [
-                                  Object {
-                                    "backgroundColor": "transparent",
-                                    "borderWidth": 0,
-                                  },
-                                  Object {
-                                    "color": "#0073E6",
-                                  },
-                                  Object {
-                                    "flex": 0,
-                                    "height": 24,
-                                    "width": 24,
-                                  },
-                                ]
-                              }
-                              tintColor={4278219750}
-                              vbHeight={24}
-                              vbWidth={24}
-                              width={24}
-                            >
-                              <RNSVGGroup>
-                                <RNSVGPath
-                                  clipRule={0}
-                                  d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
-                                  fill={
-                                    Array [
-                                      2,
-                                    ]
-                                  }
-                                  fillRule={0}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                      "fillRule",
-                                    ]
-                                  }
-                                />
-                              </RNSVGGroup>
-                            </RNSVGSvgView>
-                          </View>
-                        </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </RNCSafeAreaProvider>
-</View>
-`;
-
-exports[`MessagePaymentItem component Should match the snapshot for a processed item 1`] = `
-<View
-  style={
-    Object {
-      "flex": 1,
-    }
-  }
->
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
-    style={
-      Array [
-        Object {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
-        Object {
-          "zIndex": 1,
-        }
-      }
-    >
-      <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
-      >
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
-              }
-            }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
-              }
-            }
-          />
-          <View
-            pointerEvents="box-none"
-            style={
-              Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              pointerEvents="box-none"
-              style={
-                Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
-                collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
-                  }
-                }
-              >
-                DUMMY
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
-          pointerEvents="box-none"
-          style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
-            Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            needsOffscreenAlphaCompositing={false}
-            pointerEvents="box-none"
-            style={
-              Object {
-                "flex": 1,
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={3}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              style={
-                Object {
-                  "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                pointerEvents="none"
-                style={
-                  Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
-                      Object {
-                        "backgroundColor": "#FFFFFF",
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-              >
-                <View
-                  style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      Object {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View>
-                      <View
-                        style={
-                          Object {
-                            "height": 24,
-                          }
-                        }
-                      />
-                      <View
-                        accessibilityRole="button"
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        onTouchEnd={[Function]}
-                      >
-                        <View
-                          style={
-                            Array [
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
-                              },
-                              false,
-                              Object {
-                                "transform": Array [
-                                  Object {
-                                    "scale": undefined,
-                                  },
-                                ],
-                              },
-                            ]
-                          }
-                        >
-                          <View
-                            style={
-                              Object {
-                                "flexGrow": 1,
-                                "flexShrink": 1,
-                                "paddingEnd": 8,
-                              }
-                            }
-                          >
-                            <Text
-                              allowFontScaling={false}
-                              color="bluegrey"
-                              defaultColor="blue"
-                              defaultWeight="Bold"
-                              font="TitilliumWeb"
-                              fontStyle={
-                                Object {
-                                  "fontSize": 14,
-                                  "lineHeight": 21,
-                                }
-                              }
-                              numberOfLines={1}
-                              style={
-                                Array [
-                                  Object {
-                                    "fontSize": 14,
-                                    "lineHeight": 21,
-                                  },
-                                  Object {
-                                    "color": "#475A6D",
-                                    "fontFamily": "Titillium Web",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "400",
-                                  },
-                                ]
-                              }
-                              weight="Regular"
-                            >
-                              Codice avviso
-                            </Text>
-                            <Text
-                              allowFontScaling={false}
-                              color="bluegrey"
-                              defaultColor="blue"
-                              defaultWeight="Bold"
-                              font="TitilliumWeb"
-                              fontStyle={
-                                Object {
-                                  "fontSize": 14,
-                                  "lineHeight": 21,
-                                }
-                              }
-                              numberOfLines={2}
-                              style={
-                                Array [
-                                  Object {
-                                    "fontSize": 14,
-                                    "lineHeight": 21,
-                                  },
-                                  Object {
-                                    "color": "#475A6D",
-                                    "fontFamily": "Titillium Web",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "600",
-                                  },
-                                ]
-                              }
-                              weight="SemiBold"
-                            >
-                              n1
-                            </Text>
-                          </View>
-                          <View
-                            style={
-                              Array [
-                                Object {
-                                  "alignItems": "center",
-                                  "flexDirection": "row",
-                                  "justifyContent": "flex-end",
-                                  "marginLeft": 16,
-                                },
-                                Object {
-                                  "flexShrink": 1,
-                                },
-                              ]
-                            }
-                          >
-                            <View
-                              style={
-                                Array [
-                                  Object {
-                                    "alignItems": "center",
-                                    "borderRadius": 24,
-                                    "flexDirection": "row",
-                                    "justifyContent": "center",
-                                    "paddingHorizontal": 8,
-                                    "paddingVertical": 4,
-                                  },
-                                  Object {
-                                    "backgroundColor": "#F4F5F8",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                ellipsizeMode="tail"
-                                numberOfLines={1}
-                                style={
-                                  Array [
-                                    Object {
-                                      "alignSelf": "center",
-                                      "flexShrink": 1,
-                                      "fontSize": 12,
-                                      "lineHeight": 16,
-                                      "textTransform": "uppercase",
-                                    },
-                                    Object {
-                                      "fontFamily": "Titillium Web",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "600",
-                                    },
-                                    Object {
-                                      "color": "#555C70",
-                                    },
-                                  ]
-                                }
-                              >
-                                Revoked
-                              </Text>
-                            </View>
-                            <RNSVGSvgView
-                              accessibilityElementsHidden={true}
-                              accessibilityLabel=""
-                              accessible={false}
-                              align="xMidYMid"
-                              bbHeight={24}
-                              bbWidth={24}
-                              color={4278219750}
-                              focusable={false}
-                              height={24}
-                              importantForAccessibility="no-hide-descendants"
-                              meetOrSlice={0}
-                              minX={0}
-                              minY={0}
-                              style={
-                                Array [
-                                  Object {
-                                    "backgroundColor": "transparent",
-                                    "borderWidth": 0,
-                                  },
-                                  Object {
-                                    "color": "#0073E6",
-                                  },
-                                  Object {
-                                    "flex": 0,
-                                    "height": 24,
-                                    "width": 24,
-                                  },
-                                ]
-                              }
-                              tintColor={4278219750}
-                              vbHeight={24}
-                              vbWidth={24}
-                              width={24}
-                            >
-                              <RNSVGGroup>
-                                <RNSVGPath
-                                  clipRule={0}
-                                  d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
-                                  fill={
-                                    Array [
-                                      2,
-                                    ]
-                                  }
-                                  fillRule={0}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                      "fillRule",
-                                    ]
-                                  }
-                                />
-                              </RNSVGGroup>
-                            </RNSVGSvgView>
-                          </View>
-                        </View>
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </RNCSafeAreaProvider>
-</View>
-`;
diff --git a/ts/features/pn/components/__test__/__snapshots__/MessagePayments.test.tsx.snap b/ts/features/pn/components/__test__/__snapshots__/MessagePayments.test.tsx.snap
index acea4d2038d..edad042843f 100644
--- a/ts/features/pn/components/__test__/__snapshots__/MessagePayments.test.tsx.snap
+++ b/ts/features/pn/components/__test__/__snapshots__/MessagePayments.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MessagePayments component Should match the snapshot for a cancelled message with no completed payments 1`] = `
+exports[`MessagePayments should match snapshot when cancelled with payments without completed payments 1`] = `
 <View
   style={
     Object {
@@ -20,339 +20,191 @@ exports[`MessagePayments component Should match the snapshot for a cancelled mes
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
+        collapsable={false}
         pointerEvents="box-none"
-        style={null}
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
       >
         <View
-          collapsable={false}
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
           pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
+          style={null}
         >
           <View
             collapsable={false}
-            style={
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
-              }
-            }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
-              }
-            }
-          />
-          <View
             pointerEvents="box-none"
             style={
               Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
               }
             }
           >
             <View
               collapsable={false}
-              pointerEvents="box-none"
               style={
                 Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
                 }
               }
-            >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
-                collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
-                  }
-                }
-              >
-                DUMMY
-              </Text>
-            </View>
+            />
           </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
-          pointerEvents="box-none"
-          style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
-            Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-            }
-          }
-        >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
             pointerEvents="box-none"
             style={
               Object {
-                "flex": 1,
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
               }
             }
           >
             <View
-              collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={6}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
               style={
                 Object {
+                  "alignItems": "stretch",
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
+                  "flexDirection": "row",
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                pointerEvents="box-none"
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
                   }
                 }
               />
               <View
+                collapsable={false}
+                pointerEvents="box-none"
                 style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
-                      Object {
-                        "backgroundColor": "#FFFFFF",
-                      },
-                      undefined,
-                    ],
-                  ]
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
                 }
               >
-                <View
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
                   style={
                     Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
                     }
                   }
                 >
-                  <View
-                    style={
-                      Object {
-                        "flex": 1,
-                      }
-                    }
-                  />
-                </View>
+                  PN_ROUTES_MESSAGE_DETAILS
+                </Text>
               </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
             </View>
           </View>
         </View>
       </View>
-    </View>
-  </RNCSafeAreaProvider>
-</View>
-`;
-
-exports[`MessagePayments component Should match the snapshot for a cancelled message with three completed payments 1`] = `
-<View
-  style={
-    Object {
-      "flex": 1,
-    }
-  }
->
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
-    style={
-      Array [
-        Object {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
-        Object {
-          "zIndex": 1,
-        }
-      }
-    >
-      <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
+      <RNSScreenContainer
         onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
       >
-        <View
+        <RNSModalScreen
+          activityState={2}
           collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
           pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
           style={
             Object {
               "bottom": 0,
               "left": 0,
-              "opacity": 1,
               "position": "absolute",
               "right": 0,
               "top": 0,
-              "zIndex": 0,
             }
           }
         >
@@ -360,1136 +212,314 @@ exports[`MessagePayments component Should match the snapshot for a cancelled mes
             collapsable={false}
             style={
               Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
-              }
-            }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
+                "opacity": 1,
               }
             }
           />
           <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
-              Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              pointerEvents="box-none"
-              style={
+              Array [
                 Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
-                collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
-                  }
-                }
-              >
-                DUMMY
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
-          pointerEvents="box-none"
-          style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
-            Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
+                  "display": "flex",
+                  "overflow": undefined,
                 },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 },
-              },
+              ]
             }
-          }
-        >
-          <View
-            collapsable={false}
-            needsOffscreenAlphaCompositing={false}
-            pointerEvents="box-none"
-            style={
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={7}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={2}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
                     <View
                       style={
                         Object {
-                          "marginTop": 40,
+                          "flex": 1,
                         }
                       }
-                      testID="PnCancelledPaymentSectionTitle"
                     >
                       <View
+                        accessibilityLabel="Pagamenti"
+                        accessible={true}
                         style={
                           Object {
-                            "flex": 1,
-                            "flexDirection": "row",
+                            "marginHorizontal": -24,
+                            "paddingHorizontal": 24,
+                            "paddingVertical": 12,
                           }
                         }
                       >
-                        <Text
-                          color="bluegrey"
-                          defaultColor="bluegreyDark"
-                          defaultWeight="Bold"
-                          font="TitilliumWeb"
-                          fontStyle={
-                            Object {
-                              "fontSize": 20,
-                              "lineHeight": 24,
-                            }
-                          }
-                          style={
-                            Array [
-                              Object {
-                                "flex": 1,
-                              },
-                              Object {
-                                "fontSize": 20,
-                                "lineHeight": 24,
-                              },
-                              Object {
-                                "color": "#475A6D",
-                                "fontFamily": "Titillium Web",
-                                "fontStyle": "normal",
-                                "fontWeight": "700",
-                              },
-                            ]
-                          }
-                          weight="Bold"
-                        >
-                          Pagamenti
-                        </Text>
-                      </View>
-                      <View>
                         <View
+                          importantForAccessibility="no-hide-descendants"
                           style={
                             Object {
-                              "height": 24,
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "space-between",
                             }
                           }
-                        />
-                        <View
-                          style={
-                            Array [
-                              Object {
-                                "flexDirection": "row",
-                              },
-                              Object {
-                                "alignItems": "center",
-                              },
-                            ]
-                          }
-                          testID="PnCancelledPaymentInfoBox"
                         >
                           <View
                             style={
                               Object {
-                                "alignSelf": "flex-start",
-                                "marginTop": 4,
-                              }
-                            }
-                          >
-                            <RNSVGSvgView
-                              accessibilityElementsHidden={true}
-                              accessibilityLabel=""
-                              accessible={false}
-                              align="xMidYMid"
-                              bbHeight={24}
-                              bbWidth={24}
-                              color={4282866285}
-                              focusable={false}
-                              height={24}
-                              importantForAccessibility="no-hide-descendants"
-                              meetOrSlice={0}
-                              minX={0}
-                              minY={0}
-                              style={
-                                Array [
-                                  Object {
-                                    "backgroundColor": "transparent",
-                                    "borderWidth": 0,
-                                  },
-                                  Object {
-                                    "color": "#475A6D",
-                                  },
-                                  Object {
-                                    "flex": 0,
-                                    "height": 24,
-                                    "width": 24,
-                                  },
-                                ]
-                              }
-                              tintColor={4282866285}
-                              vbHeight={24}
-                              vbWidth={24}
-                              width={24}
-                            >
-                              <RNSVGGroup>
-                                <RNSVGPath
-                                  clipRule={0}
-                                  d="M0 12C0 5.3726 5.3726 0 12 0s12 5.3726 12 12-5.3726 12-12 12S0 18.6274 0 12Zm2 0C2 6.47717 6.47717 2 12 2c5.5228 0 10 4.47717 10 10 0 5.5228-4.4772 10-10 10-5.52283 0-10-4.4772-10-10Zm10.0281 7.5c.8439 0 1.5281-.6842 1.5281-1.5281s-.6842-1.5281-1.5281-1.5281c-.844 0-1.5281.6842-1.5281 1.5281S11.1841 19.5 12.0281 19.5Zm0-15.05618h.0005c.5678 0 1.0281.46029 1.0281 1.02808v8.0046c0 .5678-.4603 1.028-1.0281 1.028h-.0005c-.5678 0-1.0281-.4602-1.0281-1.028V5.4719c0-.56779.4603-1.02808 1.0281-1.02808Z"
-                                  fill={
-                                    Array [
-                                      2,
-                                    ]
-                                  }
-                                  fillRule={0}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                      "fillRule",
-                                    ]
-                                  }
-                                />
-                              </RNSVGGroup>
-                            </RNSVGSvgView>
-                          </View>
-                          <View
-                            style={
-                              Object {
-                                "width": 16,
-                              }
-                            }
-                          />
-                          <View
-                            style={
-                              Object {
-                                "flexShrink": 1,
-                              }
-                            }
-                          >
-                            <Text
-                              color="bluegreyDark"
-                              defaultColor="bluegreyDark"
-                              defaultWeight="SemiBold"
-                              font="TitilliumWeb"
-                              fontStyle={
-                                Object {
-                                  "fontSize": 14,
-                                }
-                              }
-                              style={
-                                Array [
-                                  Object {
-                                    "fontSize": 14,
-                                  },
-                                  Object {
-                                    "color": "#17324D",
-                                    "fontFamily": "Titillium Web",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "400",
-                                  },
-                                ]
-                              }
-                              weight="Regular"
-                            >
-                              Per l'eventuale rimborso di pagamenti legati a questa notifica, contatta l'ente mittente.
-                            </Text>
-                          </View>
-                        </View>
-                        <View>
-                          <View
-                            style={
-                              Object {
-                                "height": 24,
+                                "flex": 1,
                               }
                             }
-                          />
-                          <View
-                            accessibilityRole="button"
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            onTouchEnd={[Function]}
-                            testID="PnCancelledPaymentModulePaymentNotice"
                           >
                             <View
-                              style={
-                                Array [
-                                  Object {
-                                    "alignItems": "center",
-                                    "backgroundColor": "#FFFFFF",
-                                    "borderColor": "#E8EBF1",
-                                    "borderRadius": 8,
-                                    "borderWidth": 1,
-                                    "flexDirection": "row",
-                                    "justifyContent": "space-between",
-                                    "paddingHorizontal": 16,
-                                    "paddingVertical": 16,
-                                  },
-                                  false,
-                                  Object {
-                                    "transform": Array [
-                                      Object {
-                                        "scale": undefined,
-                                      },
-                                    ],
-                                  },
-                                ]
-                              }
+                              accessibilityElementsHidden={false}
+                              accessible={true}
+                              importantForAccessibility="yes"
                             >
-                              <View
-                                style={
+                              <Text
+                                allowFontScaling={false}
+                                color="grey-700"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "flexGrow": 1,
-                                    "flexShrink": 1,
-                                    "paddingEnd": 8,
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
                                   }
                                 }
-                              >
-                                <Text
-                                  allowFontScaling={false}
-                                  color="bluegrey"
-                                  defaultColor="blue"
-                                  defaultWeight="Bold"
-                                  font="TitilliumWeb"
-                                  fontStyle={
-                                    Object {
-                                      "fontSize": 14,
-                                      "lineHeight": 21,
-                                    }
-                                  }
-                                  numberOfLines={1}
-                                  style={
-                                    Array [
-                                      Object {
-                                        "fontSize": 14,
-                                        "lineHeight": 21,
-                                      },
-                                      Object {
-                                        "color": "#475A6D",
-                                        "fontFamily": "Titillium Web",
-                                        "fontStyle": "normal",
-                                        "fontWeight": "400",
-                                      },
-                                    ]
-                                  }
-                                  weight="Regular"
-                                >
-                                  Codice avviso
-                                </Text>
-                                <Text
-                                  allowFontScaling={false}
-                                  color="bluegrey"
-                                  defaultColor="blue"
-                                  defaultWeight="Bold"
-                                  font="TitilliumWeb"
-                                  fontStyle={
-                                    Object {
-                                      "fontSize": 14,
-                                      "lineHeight": 21,
-                                    }
-                                  }
-                                  numberOfLines={2}
-                                  style={
-                                    Array [
-                                      Object {
-                                        "fontSize": 14,
-                                        "lineHeight": 21,
-                                      },
-                                      Object {
-                                        "color": "#475A6D",
-                                        "fontFamily": "Titillium Web",
-                                        "fontStyle": "normal",
-                                        "fontWeight": "600",
-                                      },
-                                    ]
-                                  }
-                                  weight="SemiBold"
-                                >
-                                  n1
-                                </Text>
-                              </View>
-                              <View
                                 style={
                                   Array [
                                     Object {
-                                      "alignItems": "center",
-                                      "flexDirection": "row",
-                                      "justifyContent": "flex-end",
-                                      "marginLeft": 16,
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
                                     },
                                     Object {
-                                      "flexShrink": 1,
+                                      "color": "#555C70",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
                                     },
                                   ]
                                 }
+                                weight="Regular"
                               >
-                                <View
-                                  style={
-                                    Array [
-                                      Object {
-                                        "alignItems": "center",
-                                        "borderRadius": 24,
-                                        "flexDirection": "row",
-                                        "justifyContent": "center",
-                                        "paddingHorizontal": 8,
-                                        "paddingVertical": 4,
-                                      },
-                                      Object {
-                                        "backgroundColor": "#E1F4E1",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <Text
-                                    ellipsizeMode="tail"
-                                    numberOfLines={1}
-                                    style={
-                                      Array [
-                                        Object {
-                                          "alignSelf": "center",
-                                          "flexShrink": 1,
-                                          "fontSize": 12,
-                                          "lineHeight": 16,
-                                          "textTransform": "uppercase",
-                                        },
-                                        Object {
-                                          "fontFamily": "Titillium Web",
-                                          "fontStyle": "normal",
-                                          "fontWeight": "600",
-                                        },
-                                        Object {
-                                          "color": "#224021",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    Paid
-                                  </Text>
-                                </View>
-                                <RNSVGSvgView
-                                  accessibilityElementsHidden={true}
-                                  accessibilityLabel=""
-                                  accessible={false}
-                                  align="xMidYMid"
-                                  bbHeight={24}
-                                  bbWidth={24}
-                                  color={4278219750}
-                                  focusable={false}
-                                  height={24}
-                                  importantForAccessibility="no-hide-descendants"
-                                  meetOrSlice={0}
-                                  minX={0}
-                                  minY={0}
-                                  style={
-                                    Array [
-                                      Object {
-                                        "backgroundColor": "transparent",
-                                        "borderWidth": 0,
-                                      },
-                                      Object {
-                                        "color": "#0073E6",
-                                      },
-                                      Object {
-                                        "flex": 0,
-                                        "height": 24,
-                                        "width": 24,
-                                      },
-                                    ]
-                                  }
-                                  tintColor={4278219750}
-                                  vbHeight={24}
-                                  vbWidth={24}
-                                  width={24}
-                                >
-                                  <RNSVGGroup>
-                                    <RNSVGPath
-                                      clipRule={0}
-                                      d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
-                                      fill={
-                                        Array [
-                                          2,
-                                        ]
-                                      }
-                                      fillRule={0}
-                                      propList={
-                                        Array [
-                                          "fill",
-                                          "fillRule",
-                                        ]
-                                      }
-                                    />
-                                  </RNSVGGroup>
-                                </RNSVGSvgView>
-                              </View>
+                                Pagamenti
+                              </Text>
                             </View>
                           </View>
                         </View>
-                        <View>
-                          <View
-                            style={
+                      </View>
+                      <View
+                        style={
+                          Array [
+                            Object {
+                              "flex": 1,
+                            },
+                            Object {
+                              "flexDirection": "row",
+                            },
+                            Object {
+                              "alignItems": "center",
+                            },
+                          ]
+                        }
+                      >
+                        <RNSVGSvgView
+                          accessibilityElementsHidden={true}
+                          accessibilityLabel=""
+                          accessible={false}
+                          align="xMidYMid"
+                          bbHeight={24}
+                          bbWidth={24}
+                          focusable={false}
+                          height={24}
+                          importantForAccessibility="no-hide-descendants"
+                          meetOrSlice={0}
+                          minX={0}
+                          minY={0}
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "borderWidth": 0,
+                              },
+                              Object {
+                                "color": "#BBC2D6",
+                              },
+                              Object {
+                                "flex": 0,
+                                "height": 24,
+                                "width": 24,
+                              },
+                            ]
+                          }
+                          tintColor="#BBC2D6"
+                          vbHeight={24}
+                          vbWidth={24}
+                          width={24}
+                        >
+                          <RNSVGGroup
+                            fill={
                               Object {
-                                "height": 8,
+                                "payload": 4278190080,
+                                "type": 0,
                               }
                             }
-                          />
-                          <View
-                            accessibilityRole="button"
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            onTouchEnd={[Function]}
-                            testID="PnCancelledPaymentModulePaymentNotice"
                           >
-                            <View
-                              style={
-                                Array [
-                                  Object {
-                                    "alignItems": "center",
-                                    "backgroundColor": "#FFFFFF",
-                                    "borderColor": "#E8EBF1",
-                                    "borderRadius": 8,
-                                    "borderWidth": 1,
-                                    "flexDirection": "row",
-                                    "justifyContent": "space-between",
-                                    "paddingHorizontal": 16,
-                                    "paddingVertical": 16,
-                                  },
-                                  false,
-                                  Object {
-                                    "transform": Array [
-                                      Object {
-                                        "scale": undefined,
-                                      },
-                                    ],
-                                  },
+                            <RNSVGPath
+                              clipRule={0}
+                              d="M0 12C0 5.3726 5.3726 0 12 0s12 5.3726 12 12-5.3726 12-12 12S0 18.6274 0 12Zm2 0C2 6.47717 6.47717 2 12 2c5.5228 0 10 4.47717 10 10 0 5.5228-4.4772 10-10 10-5.52283 0-10-4.4772-10-10Zm10.0281-4.50455c.8439 0 1.5281-.68415 1.5281-1.52809 0-.84394-.6842-1.52809-1.5281-1.52809-.844 0-1.5281.68415-1.5281 1.52809 0 .84394.6841 1.52809 1.5281 1.52809Zm0 1.94382h.0005c.5678 0 1.0281.46029 1.0281 1.02813v8.0045c0 .5678-.4603 1.0281-1.0281 1.0281h-.0005C11.4603 19.5 11 19.0397 11 18.4719v-8.0045c0-.56784.4603-1.02813 1.0281-1.02813Z"
+                              fill={
+                                Object {
+                                  "type": 2,
+                                }
+                              }
+                              fillRule={0}
+                              propList={
+                                Array [
+                                  "fill",
+                                  "fillRule",
                                 ]
                               }
-                            >
-                              <View
-                                style={
-                                  Object {
-                                    "flexGrow": 1,
-                                    "flexShrink": 1,
-                                    "paddingEnd": 8,
-                                  }
-                                }
-                              >
-                                <Text
-                                  allowFontScaling={false}
-                                  color="bluegrey"
-                                  defaultColor="blue"
-                                  defaultWeight="Bold"
-                                  font="TitilliumWeb"
-                                  fontStyle={
-                                    Object {
-                                      "fontSize": 14,
-                                      "lineHeight": 21,
-                                    }
-                                  }
-                                  numberOfLines={1}
-                                  style={
-                                    Array [
-                                      Object {
-                                        "fontSize": 14,
-                                        "lineHeight": 21,
-                                      },
-                                      Object {
-                                        "color": "#475A6D",
-                                        "fontFamily": "Titillium Web",
-                                        "fontStyle": "normal",
-                                        "fontWeight": "400",
-                                      },
-                                    ]
-                                  }
-                                  weight="Regular"
-                                >
-                                  Codice avviso
-                                </Text>
-                                <Text
-                                  allowFontScaling={false}
-                                  color="bluegrey"
-                                  defaultColor="blue"
-                                  defaultWeight="Bold"
-                                  font="TitilliumWeb"
-                                  fontStyle={
-                                    Object {
-                                      "fontSize": 14,
-                                      "lineHeight": 21,
-                                    }
-                                  }
-                                  numberOfLines={2}
-                                  style={
-                                    Array [
-                                      Object {
-                                        "fontSize": 14,
-                                        "lineHeight": 21,
-                                      },
-                                      Object {
-                                        "color": "#475A6D",
-                                        "fontFamily": "Titillium Web",
-                                        "fontStyle": "normal",
-                                        "fontWeight": "600",
-                                      },
-                                    ]
-                                  }
-                                  weight="SemiBold"
-                                >
-                                  n2
-                                </Text>
-                              </View>
-                              <View
-                                style={
-                                  Array [
-                                    Object {
-                                      "alignItems": "center",
-                                      "flexDirection": "row",
-                                      "justifyContent": "flex-end",
-                                      "marginLeft": 16,
-                                    },
-                                    Object {
-                                      "flexShrink": 1,
-                                    },
-                                  ]
-                                }
-                              >
-                                <View
-                                  style={
-                                    Array [
-                                      Object {
-                                        "alignItems": "center",
-                                        "borderRadius": 24,
-                                        "flexDirection": "row",
-                                        "justifyContent": "center",
-                                        "paddingHorizontal": 8,
-                                        "paddingVertical": 4,
-                                      },
-                                      Object {
-                                        "backgroundColor": "#E1F4E1",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <Text
-                                    ellipsizeMode="tail"
-                                    numberOfLines={1}
-                                    style={
-                                      Array [
-                                        Object {
-                                          "alignSelf": "center",
-                                          "flexShrink": 1,
-                                          "fontSize": 12,
-                                          "lineHeight": 16,
-                                          "textTransform": "uppercase",
-                                        },
-                                        Object {
-                                          "fontFamily": "Titillium Web",
-                                          "fontStyle": "normal",
-                                          "fontWeight": "600",
-                                        },
-                                        Object {
-                                          "color": "#224021",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    Paid
-                                  </Text>
-                                </View>
-                                <RNSVGSvgView
-                                  accessibilityElementsHidden={true}
-                                  accessibilityLabel=""
-                                  accessible={false}
-                                  align="xMidYMid"
-                                  bbHeight={24}
-                                  bbWidth={24}
-                                  color={4278219750}
-                                  focusable={false}
-                                  height={24}
-                                  importantForAccessibility="no-hide-descendants"
-                                  meetOrSlice={0}
-                                  minX={0}
-                                  minY={0}
-                                  style={
-                                    Array [
-                                      Object {
-                                        "backgroundColor": "transparent",
-                                        "borderWidth": 0,
-                                      },
-                                      Object {
-                                        "color": "#0073E6",
-                                      },
-                                      Object {
-                                        "flex": 0,
-                                        "height": 24,
-                                        "width": 24,
-                                      },
-                                    ]
-                                  }
-                                  tintColor={4278219750}
-                                  vbHeight={24}
-                                  vbWidth={24}
-                                  width={24}
-                                >
-                                  <RNSVGGroup>
-                                    <RNSVGPath
-                                      clipRule={0}
-                                      d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
-                                      fill={
-                                        Array [
-                                          2,
-                                        ]
-                                      }
-                                      fillRule={0}
-                                      propList={
-                                        Array [
-                                          "fill",
-                                          "fillRule",
-                                        ]
-                                      }
-                                    />
-                                  </RNSVGGroup>
-                                </RNSVGSvgView>
-                              </View>
-                            </View>
-                          </View>
-                        </View>
-                        <View>
-                          <View
-                            style={
+                            />
+                          </RNSVGGroup>
+                        </RNSVGSvgView>
+                        <View
+                          style={
+                            Object {
+                              "width": 24,
+                            }
+                          }
+                        />
+                        <View
+                          style={
+                            Object {
+                              "flexShrink": 1,
+                            }
+                          }
+                        >
+                          <Text
+                            allowFontScaling={false}
+                            color="grey-700"
+                            defaultColor="bluegrey"
+                            defaultWeight="Regular"
+                            font="TitilliumWeb"
+                            fontStyle={
                               Object {
-                                "height": 8,
+                                "fontSize": 16,
+                                "lineHeight": 24,
                               }
                             }
-                          />
-                          <View
-                            accessibilityRole="button"
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            onTouchEnd={[Function]}
-                            testID="PnCancelledPaymentModulePaymentNotice"
+                            style={
+                              Array [
+                                Object {
+                                  "fontSize": 16,
+                                  "lineHeight": 24,
+                                },
+                                Object {
+                                  "color": "#555C70",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "400",
+                                },
+                              ]
+                            }
+                            testID="infoScreenBody"
+                            weight="Regular"
                           >
-                            <View
-                              style={
-                                Array [
-                                  Object {
-                                    "alignItems": "center",
-                                    "backgroundColor": "#FFFFFF",
-                                    "borderColor": "#E8EBF1",
-                                    "borderRadius": 8,
-                                    "borderWidth": 1,
-                                    "flexDirection": "row",
-                                    "justifyContent": "space-between",
-                                    "paddingHorizontal": 16,
-                                    "paddingVertical": 16,
-                                  },
-                                  false,
-                                  Object {
-                                    "transform": Array [
-                                      Object {
-                                        "scale": undefined,
-                                      },
-                                    ],
-                                  },
-                                ]
-                              }
-                            >
-                              <View
-                                style={
-                                  Object {
-                                    "flexGrow": 1,
-                                    "flexShrink": 1,
-                                    "paddingEnd": 8,
-                                  }
-                                }
-                              >
-                                <Text
-                                  allowFontScaling={false}
-                                  color="bluegrey"
-                                  defaultColor="blue"
-                                  defaultWeight="Bold"
-                                  font="TitilliumWeb"
-                                  fontStyle={
-                                    Object {
-                                      "fontSize": 14,
-                                      "lineHeight": 21,
-                                    }
-                                  }
-                                  numberOfLines={1}
-                                  style={
-                                    Array [
-                                      Object {
-                                        "fontSize": 14,
-                                        "lineHeight": 21,
-                                      },
-                                      Object {
-                                        "color": "#475A6D",
-                                        "fontFamily": "Titillium Web",
-                                        "fontStyle": "normal",
-                                        "fontWeight": "400",
-                                      },
-                                    ]
-                                  }
-                                  weight="Regular"
-                                >
-                                  Codice avviso
-                                </Text>
-                                <Text
-                                  allowFontScaling={false}
-                                  color="bluegrey"
-                                  defaultColor="blue"
-                                  defaultWeight="Bold"
-                                  font="TitilliumWeb"
-                                  fontStyle={
-                                    Object {
-                                      "fontSize": 14,
-                                      "lineHeight": 21,
-                                    }
-                                  }
-                                  numberOfLines={2}
-                                  style={
-                                    Array [
-                                      Object {
-                                        "fontSize": 14,
-                                        "lineHeight": 21,
-                                      },
-                                      Object {
-                                        "color": "#475A6D",
-                                        "fontFamily": "Titillium Web",
-                                        "fontStyle": "normal",
-                                        "fontWeight": "600",
-                                      },
-                                    ]
-                                  }
-                                  weight="SemiBold"
-                                >
-                                  n3
-                                </Text>
-                              </View>
-                              <View
-                                style={
-                                  Array [
-                                    Object {
-                                      "alignItems": "center",
-                                      "flexDirection": "row",
-                                      "justifyContent": "flex-end",
-                                      "marginLeft": 16,
-                                    },
-                                    Object {
-                                      "flexShrink": 1,
-                                    },
-                                  ]
-                                }
-                              >
-                                <View
-                                  style={
-                                    Array [
-                                      Object {
-                                        "alignItems": "center",
-                                        "borderRadius": 24,
-                                        "flexDirection": "row",
-                                        "justifyContent": "center",
-                                        "paddingHorizontal": 8,
-                                        "paddingVertical": 4,
-                                      },
-                                      Object {
-                                        "backgroundColor": "#E1F4E1",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <Text
-                                    ellipsizeMode="tail"
-                                    numberOfLines={1}
-                                    style={
-                                      Array [
-                                        Object {
-                                          "alignSelf": "center",
-                                          "flexShrink": 1,
-                                          "fontSize": 12,
-                                          "lineHeight": 16,
-                                          "textTransform": "uppercase",
-                                        },
-                                        Object {
-                                          "fontFamily": "Titillium Web",
-                                          "fontStyle": "normal",
-                                          "fontWeight": "600",
-                                        },
-                                        Object {
-                                          "color": "#224021",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    Paid
-                                  </Text>
-                                </View>
-                                <RNSVGSvgView
-                                  accessibilityElementsHidden={true}
-                                  accessibilityLabel=""
-                                  accessible={false}
-                                  align="xMidYMid"
-                                  bbHeight={24}
-                                  bbWidth={24}
-                                  color={4278219750}
-                                  focusable={false}
-                                  height={24}
-                                  importantForAccessibility="no-hide-descendants"
-                                  meetOrSlice={0}
-                                  minX={0}
-                                  minY={0}
-                                  style={
-                                    Array [
-                                      Object {
-                                        "backgroundColor": "transparent",
-                                        "borderWidth": 0,
-                                      },
-                                      Object {
-                                        "color": "#0073E6",
-                                      },
-                                      Object {
-                                        "flex": 0,
-                                        "height": 24,
-                                        "width": 24,
-                                      },
-                                    ]
-                                  }
-                                  tintColor={4278219750}
-                                  vbHeight={24}
-                                  vbWidth={24}
-                                  width={24}
-                                >
-                                  <RNSVGGroup>
-                                    <RNSVGPath
-                                      clipRule={0}
-                                      d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
-                                      fill={
-                                        Array [
-                                          2,
-                                        ]
-                                      }
-                                      fillRule={0}
-                                      propList={
-                                        Array [
-                                          "fill",
-                                          "fillRule",
-                                        ]
-                                      }
-                                    />
-                                  </RNSVGGroup>
-                                </RNSVGSvgView>
-                              </View>
-                            </View>
-                          </View>
+                            Per l'eventuale rimborso di pagamenti legati a questa notifica, contatta l'ente mittente.
+                          </Text>
                         </View>
                       </View>
                     </View>
@@ -1498,14 +528,14 @@ exports[`MessagePayments component Should match the snapshot for a cancelled mes
               </View>
             </View>
           </View>
-        </View>
-      </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
     </View>
   </RNCSafeAreaProvider>
 </View>
 `;
 
-exports[`MessagePayments component Should match the snapshot for a single loading payment 1`] = `
+exports[`MessagePayments should match snapshot when cancelled, with payments, with cancelled-completed-payments 1`] = `
 <View
   style={
     Object {
@@ -1525,339 +555,410 @@ exports[`MessagePayments component Should match the snapshot for a single loadin
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
+        collapsable={false}
         pointerEvents="box-none"
-        style={null}
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
       >
         <View
-          collapsable={false}
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
           pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
+          style={null}
         >
           <View
             collapsable={false}
+            pointerEvents="box-none"
             style={
               Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
               }
             }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
               }
-            }
-          />
+            />
+          </View>
           <View
+            collapsable={false}
             pointerEvents="box-none"
             style={
               Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
               }
             }
           >
             <View
-              collapsable={false}
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
               pointerEvents="box-none"
               style={
                 Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
                 }
               }
             >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
                 collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
+                pointerEvents="box-none"
                 style={
                   Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
                   }
                 }
               >
-                DUMMY
-              </Text>
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  PN_ROUTES_MESSAGE_DETAILS
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
             </View>
           </View>
         </View>
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
+      <RNSScreenContainer
+        onLayout={[Function]}
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "flex": 1,
           }
         }
       >
-        <View
+        <RNSModalScreen
+          activityState={2}
           collapsable={false}
-          style={
+          forwardedRef={[Function]}
+          gestureResponseDistance={
             Object {
-              "opacity": 1,
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
             }
           }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          onGestureCancel={[Function]}
           pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
           style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
             Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={1}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={4}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
                     <View
                       style={
                         Object {
-                          "marginTop": 40,
+                          "flex": 1,
                         }
                       }
-                      testID="PnPaymentSectionTitle"
                     >
                       <View
+                        accessibilityLabel="Pagamenti"
+                        accessible={true}
                         style={
                           Object {
-                            "flex": 1,
-                            "flexDirection": "row",
+                            "marginHorizontal": -24,
+                            "paddingHorizontal": 24,
+                            "paddingVertical": 12,
                           }
                         }
                       >
-                        <Text
-                          color="bluegrey"
-                          defaultColor="bluegreyDark"
-                          defaultWeight="Bold"
-                          font="TitilliumWeb"
-                          fontStyle={
+                        <View
+                          importantForAccessibility="no-hide-descendants"
+                          style={
                             Object {
-                              "fontSize": 20,
-                              "lineHeight": 24,
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "space-between",
                             }
                           }
-                          style={
-                            Array [
+                        >
+                          <View
+                            style={
                               Object {
                                 "flex": 1,
-                              },
-                              Object {
-                                "fontSize": 20,
-                                "lineHeight": 24,
-                              },
-                              Object {
-                                "color": "#475A6D",
-                                "fontFamily": "Titillium Web",
-                                "fontStyle": "normal",
-                                "fontWeight": "700",
-                              },
-                            ]
-                          }
-                          weight="Bold"
-                        >
-                          Avvisi pagoPA
-                        </Text>
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityElementsHidden={false}
+                              accessible={true}
+                              importantForAccessibility="yes"
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="grey-700"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#555C70",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Pagamenti
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View
+                        style={
+                          Array [
+                            Object {
+                              "flex": 1,
+                            },
+                            Object {
+                              "flexDirection": "row",
+                            },
+                            Object {
+                              "alignItems": "center",
+                            },
+                          ]
+                        }
+                      >
                         <RNSVGSvgView
                           accessibilityElementsHidden={true}
                           accessibilityLabel=""
                           accessible={false}
                           align="xMidYMid"
-                          bbHeight={32}
-                          bbWidth={32}
-                          color={4292007651}
+                          bbHeight={24}
+                          bbWidth={24}
                           focusable={false}
-                          height={32}
+                          height={24}
                           importantForAccessibility="no-hide-descendants"
                           meetOrSlice={0}
                           minX={0}
@@ -1869,1162 +970,1812 @@ exports[`MessagePayments component Should match the snapshot for a single loadin
                                 "borderWidth": 0,
                               },
                               Object {
-                                "color": "#D2D6E3",
+                                "color": "#BBC2D6",
                               },
                               Object {
                                 "flex": 0,
-                                "height": 32,
-                                "width": 32,
+                                "height": 24,
+                                "width": 24,
                               },
                             ]
                           }
-                          tintColor={4292007651}
-                          vbHeight={32}
-                          vbWidth={32}
-                          width={32}
+                          tintColor="#BBC2D6"
+                          vbHeight={24}
+                          vbWidth={24}
+                          width={24}
                         >
-                          <RNSVGGroup>
-                            <RNSVGPath
-                              d="m22.551 11.358-.009 2.675h-1.956V5h3.617c1.163 0 1.753.314 1.762.941v4.41c0 .628-.563.933-1.697.933H22.56v.074h-.01ZM24 6.043h-1.467v4.189H24v-4.19ZM1.652 14.043l-.01 2.676H0V7.685h3.027c.978 0 1.467.314 1.476.941v4.41c0 .628-.47.933-1.421.933h-1.43v.074ZM2.87 8.737H1.642v4.19H2.87v-4.19ZM9.56 13.969H6.44c-.913 0-1.374-.314-1.374-.941l.009-1.837c0-.618.47-.932 1.421-.94h1.43V8.736H6.7l-.01.83H5.085v-.94c0-.619.48-.923 1.44-.923l1.605-.019c.95 0 1.43.314 1.43.932v5.352Zm-2.852-1.052h1.237l-.01-1.615H6.708v1.615ZM13.149 13.969h-1.44c-.95 0-1.42-.314-1.42-.932v-4.41c.009-.628.498-.942 1.476-.942h3.026v8.102c0 .627-.48.94-1.43.94h-1.633c-.95 0-1.43-.313-1.43-.94v-.932h1.633v.83h1.227v-1.642l-.01-.074Zm-1.227-1.052h1.227v-4.18h-1.227v4.18ZM19.848 13.028c-.01.627-.498.932-1.477.932h-1.587c-.96 0-1.44-.314-1.44-.932v-4.41c0-.628.48-.933 1.44-.933h1.634c.95 0 1.42.314 1.42.932v4.41h.01Zm-1.624-4.291h-1.237v4.19h1.228l.009-4.19Z"
-                              fill={
-                                Array [
-                                  2,
-                                ]
-                              }
-                              propList={
-                                Array [
-                                  "fill",
-                                ]
+                          <RNSVGGroup
+                            fill={
+                              Object {
+                                "payload": 4278190080,
+                                "type": 0,
                               }
-                            />
+                            }
+                          >
                             <RNSVGPath
-                              d="M31.99 5.987c0-.627-.562-.932-1.697-.932h-1.956c-1.144 0-1.716.314-1.716.932v8.065h1.956v-2.759h1.476V13.6c0 5.905-4.77 10.676-10.676 10.676a10.694 10.694 0 0 1-8.433-4.116l.978-.747-3.931-2.648.175 5.582 1.255-.996a12.614 12.614 0 0 0 9.956 4.853C26.353 26.204 32 20.548 32 13.581l-.01-7.594Zm-1.946 4.254h-1.477V6.09h1.477v4.152Z"
+                              clipRule={0}
+                              d="M0 12C0 5.3726 5.3726 0 12 0s12 5.3726 12 12-5.3726 12-12 12S0 18.6274 0 12Zm2 0C2 6.47717 6.47717 2 12 2c5.5228 0 10 4.47717 10 10 0 5.5228-4.4772 10-10 10-5.52283 0-10-4.4772-10-10Zm10.0281-4.50455c.8439 0 1.5281-.68415 1.5281-1.52809 0-.84394-.6842-1.52809-1.5281-1.52809-.844 0-1.5281.68415-1.5281 1.52809 0 .84394.6841 1.52809 1.5281 1.52809Zm0 1.94382h.0005c.5678 0 1.0281.46029 1.0281 1.02813v8.0045c0 .5678-.4603 1.0281-1.0281 1.0281h-.0005C11.4603 19.5 11 19.0397 11 18.4719v-8.0045c0-.56784.4603-1.02813 1.0281-1.02813Z"
                               fill={
-                                Array [
-                                  2,
-                                ]
+                                Object {
+                                  "type": 2,
+                                }
                               }
+                              fillRule={0}
                               propList={
                                 Array [
                                   "fill",
+                                  "fillRule",
                                 ]
                               }
                             />
                           </RNSVGGroup>
                         </RNSVGSvgView>
-                      </View>
-                      <View>
-                        <View>
-                          <View
-                            style={
+                        <View
+                          style={
+                            Object {
+                              "width": 24,
+                            }
+                          }
+                        />
+                        <View
+                          style={
+                            Object {
+                              "flexShrink": 1,
+                            }
+                          }
+                        >
+                          <Text
+                            allowFontScaling={false}
+                            color="grey-700"
+                            defaultColor="bluegrey"
+                            defaultWeight="Regular"
+                            font="TitilliumWeb"
+                            fontStyle={
                               Object {
-                                "height": 24,
+                                "fontSize": 16,
+                                "lineHeight": 24,
                               }
                             }
-                          />
+                            style={
+                              Array [
+                                Object {
+                                  "fontSize": 16,
+                                  "lineHeight": 24,
+                                },
+                                Object {
+                                  "color": "#555C70",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "400",
+                                },
+                              ]
+                            }
+                            testID="infoScreenBody"
+                            weight="Regular"
+                          >
+                            Per l'eventuale rimborso di pagamenti legati a questa notifica, contatta l'ente mittente.
+                          </Text>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 24,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          testID="PnCancelledPaymentModulePaymentNotice"
+                        >
                           <View
-                            accessible={false}
                             style={
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
-                              }
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
                             }
                           >
                             <View
                               style={
                                 Object {
-                                  "flex": 1,
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
                                 }
                               }
                             >
-                              <View
-                                collapsable={false}
-                                style={
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "opacity": 0.5,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
-                                    }
-                                  }
-                                  width={179}
-                                />
-                              </View>
-                              <View
+                                numberOfLines={1}
                                 style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Codice avviso
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "height": 4,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              />
-                              <View
-                                collapsable={false}
+                                numberOfLines={2}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
                                 }
+                                weight="SemiBold"
                               >
-                                <View
-                                  height={13}
-                                  radius={8}
-                                  style={
+                                01234567890012345678912345610
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
                                     Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
-                                    }
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F4E1",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#224021",
+                                      },
+                                    ]
                                   }
-                                  width={121}
-                                />
+                                >
+                                  Paid
+                                </Text>
                               </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
                             </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          testID="PnCancelledPaymentModulePaymentNotice"
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
                             <View
                               style={
                                 Object {
-                                  "marginLeft": 16,
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
                                 }
                               }
                             >
-                              <View
-                                collapsable={false}
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
                                 style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Codice avviso
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "opacity": 0.5,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                01234567890012345678912345620
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F4E1",
+                                    },
+                                  ]
+                                }
                               >
-                                <View
-                                  height={16}
-                                  radius={8}
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
                                   style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#224021",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Paid
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
                                     Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
+                                      "payload": 4278190080,
+                                      "type": 0,
                                     }
                                   }
-                                  width={62}
-                                />
-                              </View>
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
                             </View>
                           </View>
                         </View>
                       </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </RNCSafeAreaProvider>
-</View>
-`;
-
-exports[`MessagePayments component Should match the snapshot for five loading payments 1`] = `
-<View
-  style={
-    Object {
-      "flex": 1,
-    }
-  }
->
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
-    style={
-      Array [
-        Object {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
-        Object {
-          "zIndex": 1,
-        }
-      }
-    >
-      <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
-      >
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
-              }
-            }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
-              }
-            }
-          />
-          <View
-            pointerEvents="box-none"
-            style={
-              Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              pointerEvents="box-none"
-              style={
-                Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
-                collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
-                  }
-                }
-              >
-                DUMMY
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
-          pointerEvents="box-none"
-          style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
-            Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            needsOffscreenAlphaCompositing={false}
-            pointerEvents="box-none"
-            style={
-              Object {
-                "flex": 1,
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={2}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              style={
-                Object {
-                  "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                pointerEvents="none"
-                style={
-                  Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
-                      Object {
-                        "backgroundColor": "#FFFFFF",
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-              >
-                <View
-                  style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      Object {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Object {
-                          "marginTop": 40,
-                        }
-                      }
-                      testID="PnPaymentSectionTitle"
-                    >
-                      <View
-                        style={
-                          Object {
-                            "flex": 1,
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <Text
-                          color="bluegrey"
-                          defaultColor="bluegreyDark"
-                          defaultWeight="Bold"
-                          font="TitilliumWeb"
-                          fontStyle={
+                      <View>
+                        <View
+                          style={
                             Object {
-                              "fontSize": 20,
-                              "lineHeight": 24,
+                              "height": 8,
                             }
                           }
-                          style={
-                            Array [
-                              Object {
-                                "flex": 1,
-                              },
-                              Object {
-                                "fontSize": 20,
-                                "lineHeight": 24,
-                              },
-                              Object {
-                                "color": "#475A6D",
-                                "fontFamily": "Titillium Web",
-                                "fontStyle": "normal",
-                                "fontWeight": "700",
-                              },
-                            ]
-                          }
-                          weight="Bold"
-                        >
-                          Avvisi pagoPA
-                        </Text>
-                        <RNSVGSvgView
-                          accessibilityElementsHidden={true}
-                          accessibilityLabel=""
-                          accessible={false}
-                          align="xMidYMid"
-                          bbHeight={32}
-                          bbWidth={32}
-                          color={4292007651}
-                          focusable={false}
-                          height={32}
-                          importantForAccessibility="no-hide-descendants"
-                          meetOrSlice={0}
-                          minX={0}
-                          minY={0}
-                          style={
-                            Array [
-                              Object {
-                                "backgroundColor": "transparent",
-                                "borderWidth": 0,
-                              },
-                              Object {
-                                "color": "#D2D6E3",
-                              },
-                              Object {
-                                "flex": 0,
-                                "height": 32,
-                                "width": 32,
-                              },
-                            ]
-                          }
-                          tintColor={4292007651}
-                          vbHeight={32}
-                          vbWidth={32}
-                          width={32}
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          testID="PnCancelledPaymentModulePaymentNotice"
                         >
-                          <RNSVGGroup>
-                            <RNSVGPath
-                              d="m22.551 11.358-.009 2.675h-1.956V5h3.617c1.163 0 1.753.314 1.762.941v4.41c0 .628-.563.933-1.697.933H22.56v.074h-.01ZM24 6.043h-1.467v4.189H24v-4.19ZM1.652 14.043l-.01 2.676H0V7.685h3.027c.978 0 1.467.314 1.476.941v4.41c0 .628-.47.933-1.421.933h-1.43v.074ZM2.87 8.737H1.642v4.19H2.87v-4.19ZM9.56 13.969H6.44c-.913 0-1.374-.314-1.374-.941l.009-1.837c0-.618.47-.932 1.421-.94h1.43V8.736H6.7l-.01.83H5.085v-.94c0-.619.48-.923 1.44-.923l1.605-.019c.95 0 1.43.314 1.43.932v5.352Zm-2.852-1.052h1.237l-.01-1.615H6.708v1.615ZM13.149 13.969h-1.44c-.95 0-1.42-.314-1.42-.932v-4.41c.009-.628.498-.942 1.476-.942h3.026v8.102c0 .627-.48.94-1.43.94h-1.633c-.95 0-1.43-.313-1.43-.94v-.932h1.633v.83h1.227v-1.642l-.01-.074Zm-1.227-1.052h1.227v-4.18h-1.227v4.18ZM19.848 13.028c-.01.627-.498.932-1.477.932h-1.587c-.96 0-1.44-.314-1.44-.932v-4.41c0-.628.48-.933 1.44-.933h1.634c.95 0 1.42.314 1.42.932v4.41h.01Zm-1.624-4.291h-1.237v4.19h1.228l.009-4.19Z"
-                              fill={
-                                Array [
-                                  2,
-                                ]
-                              }
-                              propList={
-                                Array [
-                                  "fill",
-                                ]
-                              }
-                            />
-                            <RNSVGPath
-                              d="M31.99 5.987c0-.627-.562-.932-1.697-.932h-1.956c-1.144 0-1.716.314-1.716.932v8.065h1.956v-2.759h1.476V13.6c0 5.905-4.77 10.676-10.676 10.676a10.694 10.694 0 0 1-8.433-4.116l.978-.747-3.931-2.648.175 5.582 1.255-.996a12.614 12.614 0 0 0 9.956 4.853C26.353 26.204 32 20.548 32 13.581l-.01-7.594Zm-1.946 4.254h-1.477V6.09h1.477v4.152Z"
-                              fill={
-                                Array [
-                                  2,
-                                ]
-                              }
-                              propList={
-                                Array [
-                                  "fill",
-                                ]
-                              }
-                            />
-                          </RNSVGGroup>
-                        </RNSVGSvgView>
-                      </View>
-                      <View>
-                        <View>
-                          <View
-                            style={
-                              Object {
-                                "height": 24,
-                              }
-                            }
-                          />
                           <View
-                            accessible={false}
                             style={
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
-                              }
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
                             }
                           >
                             <View
                               style={
                                 Object {
-                                  "flex": 1,
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
                                 }
                               }
                             >
-                              <View
-                                collapsable={false}
-                                style={
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "opacity": 0.5,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
-                                    }
-                                  }
-                                  width={179}
-                                />
-                              </View>
-                              <View
+                                numberOfLines={1}
                                 style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Codice avviso
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "height": 4,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              />
-                              <View
-                                collapsable={false}
+                                numberOfLines={2}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
                                 }
+                                weight="SemiBold"
                               >
-                                <View
-                                  height={13}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
-                                    }
-                                  }
-                                  width={121}
-                                />
-                              </View>
+                                01234567890012345678912345630
+                              </Text>
                             </View>
                             <View
                               style={
-                                Object {
-                                  "marginLeft": 16,
-                                }
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
                               }
                             >
                               <View
-                                collapsable={false}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
+                                  Array [
                                     Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
-                                    }
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F4E1",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#224021",
+                                      },
+                                    ]
                                   }
-                                  width={62}
-                                />
+                                >
+                                  Paid
+                                </Text>
                               </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
                             </View>
                           </View>
                         </View>
-                        <View>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
                             }
-                          />
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          testID="PnCancelledPaymentModulePaymentNotice"
+                        >
                           <View
-                            accessible={false}
                             style={
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
-                              }
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
                             }
                           >
                             <View
                               style={
                                 Object {
-                                  "flex": 1,
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
                                 }
                               }
                             >
-                              <View
-                                collapsable={false}
-                                style={
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "opacity": 0.5,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
-                                    }
-                                  }
-                                  width={179}
-                                />
-                              </View>
-                              <View
+                                numberOfLines={1}
                                 style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Codice avviso
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "height": 4,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              />
-                              <View
-                                collapsable={false}
+                                numberOfLines={2}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
                                 }
+                                weight="SemiBold"
                               >
-                                <View
-                                  height={13}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
-                                    }
-                                  }
-                                  width={121}
-                                />
-                              </View>
+                                01234567890012345678912345640
+                              </Text>
                             </View>
                             <View
                               style={
-                                Object {
-                                  "marginLeft": 16,
-                                }
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
                               }
                             >
                               <View
-                                collapsable={false}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F4E1",
+                                    },
+                                  ]
                                 }
                               >
-                                <View
-                                  height={16}
-                                  radius={8}
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
                                   style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#224021",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Paid
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
                                     Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
                                     }
                                   }
-                                  width={62}
-                                />
-                              </View>
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
                             </View>
                           </View>
                         </View>
-                        <View>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
                             }
-                          />
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          testID="PnCancelledPaymentModulePaymentNotice"
+                        >
                           <View
-                            accessible={false}
                             style={
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
-                              }
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
                             }
                           >
                             <View
                               style={
                                 Object {
-                                  "flex": 1,
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
                                 }
                               }
                             >
-                              <View
-                                collapsable={false}
-                                style={
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "opacity": 0.5,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
-                                    }
-                                  }
-                                  width={179}
-                                />
-                              </View>
-                              <View
+                                numberOfLines={1}
                                 style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Codice avviso
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "height": 4,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              />
-                              <View
-                                collapsable={false}
+                                numberOfLines={2}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
                                 }
+                                weight="SemiBold"
                               >
-                                <View
-                                  height={13}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
-                                    }
-                                  }
-                                  width={121}
-                                />
-                              </View>
+                                01234567890012345678912345650
+                              </Text>
                             </View>
                             <View
                               style={
-                                Object {
-                                  "marginLeft": 16,
-                                }
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
                               }
                             >
                               <View
-                                collapsable={false}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F4E1",
+                                    },
+                                  ]
                                 }
                               >
-                                <View
-                                  height={16}
-                                  radius={8}
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
                                   style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
-                                    }
-                                  }
-                                  width={62}
-                                />
-                              </View>
-                            </View>
-                          </View>
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#224021",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Paid
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
                         </View>
-                        <View>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
                             }
-                          />
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          testID="PnCancelledPaymentModulePaymentNotice"
+                        >
                           <View
-                            accessible={false}
                             style={
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
-                              }
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
                             }
                           >
                             <View
                               style={
                                 Object {
-                                  "flex": 1,
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
                                 }
                               }
                             >
-                              <View
-                                collapsable={false}
-                                style={
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "opacity": 0.5,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
-                                    }
-                                  }
-                                  width={179}
-                                />
-                              </View>
-                              <View
+                                numberOfLines={1}
                                 style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Codice avviso
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "height": 4,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              />
-                              <View
-                                collapsable={false}
+                                numberOfLines={2}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
                                 }
+                                weight="SemiBold"
                               >
-                                <View
-                                  height={13}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
-                                    }
-                                  }
-                                  width={121}
-                                />
-                              </View>
+                                01234567890012345678912345660
+                              </Text>
                             </View>
                             <View
                               style={
-                                Object {
-                                  "marginLeft": 16,
-                                }
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
                               }
                             >
                               <View
-                                collapsable={false}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F4E1",
+                                    },
+                                  ]
                                 }
                               >
-                                <View
-                                  height={16}
-                                  radius={8}
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
                                   style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#224021",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Paid
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
                                     Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
+                                      "payload": 4278190080,
+                                      "type": 0,
                                     }
                                   }
-                                  width={62}
-                                />
-                              </View>
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
                             </View>
                           </View>
                         </View>
-                        <View>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
                             }
-                          />
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          testID="PnCancelledPaymentModulePaymentNotice"
+                        >
                           <View
-                            accessible={false}
                             style={
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
-                              }
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
                             }
                           >
                             <View
                               style={
                                 Object {
-                                  "flex": 1,
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
                                 }
                               }
                             >
-                              <View
-                                collapsable={false}
-                                style={
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "opacity": 0.5,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
-                                    }
-                                  }
-                                  width={179}
-                                />
-                              </View>
-                              <View
+                                numberOfLines={1}
                                 style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Codice avviso
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "height": 4,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              />
-                              <View
-                                collapsable={false}
+                                numberOfLines={2}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
                                 }
+                                weight="SemiBold"
                               >
-                                <View
-                                  height={13}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
-                                    }
-                                  }
-                                  width={121}
-                                />
-                              </View>
+                                01234567890012345678912345670
+                              </Text>
                             </View>
                             <View
                               style={
-                                Object {
-                                  "marginLeft": 16,
-                                }
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
                               }
                             >
                               <View
-                                collapsable={false}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F4E1",
+                                    },
+                                  ]
                                 }
                               >
-                                <View
-                                  height={16}
-                                  radius={8}
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
                                   style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
-                                    }
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#224021",
+                                      },
+                                    ]
                                   }
-                                  width={62}
-                                />
+                                >
+                                  Paid
+                                </Text>
                               </View>
-                            </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
                           </View>
                         </View>
                       </View>
@@ -3034,14 +2785,14 @@ exports[`MessagePayments component Should match the snapshot for five loading pa
               </View>
             </View>
           </View>
-        </View>
-      </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
     </View>
   </RNCSafeAreaProvider>
 </View>
 `;
 
-exports[`MessagePayments component Should match the snapshot for five payable payments 1`] = `
+exports[`MessagePayments should match snapshot when cancelled, without payments, with cancelled-completed-payments 1`] = `
 <View
   style={
     Object {
@@ -3061,339 +2812,410 @@ exports[`MessagePayments component Should match the snapshot for five payable pa
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
+        collapsable={false}
         pointerEvents="box-none"
-        style={null}
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
       >
         <View
-          collapsable={false}
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
           pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
+          style={null}
         >
           <View
             collapsable={false}
+            pointerEvents="box-none"
             style={
               Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
               }
             }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
               }
-            }
-          />
+            />
+          </View>
           <View
+            collapsable={false}
             pointerEvents="box-none"
             style={
               Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
               }
             }
           >
             <View
-              collapsable={false}
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
               pointerEvents="box-none"
               style={
                 Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
                 }
               }
             >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
                 collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
+                pointerEvents="box-none"
                 style={
                   Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
                   }
                 }
               >
-                DUMMY
-              </Text>
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  PN_ROUTES_MESSAGE_DETAILS
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
             </View>
           </View>
         </View>
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
+      <RNSScreenContainer
+        onLayout={[Function]}
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "flex": 1,
           }
         }
       >
-        <View
+        <RNSModalScreen
+          activityState={2}
           collapsable={false}
-          style={
+          forwardedRef={[Function]}
+          gestureResponseDistance={
             Object {
-              "opacity": 1,
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
             }
           }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          onGestureCancel={[Function]}
           pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
           style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
             Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={4}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={3}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
                     <View
                       style={
                         Object {
-                          "marginTop": 40,
+                          "flex": 1,
                         }
                       }
-                      testID="PnPaymentSectionTitle"
                     >
                       <View
+                        accessibilityLabel="Pagamenti"
+                        accessible={true}
                         style={
                           Object {
-                            "flex": 1,
-                            "flexDirection": "row",
+                            "marginHorizontal": -24,
+                            "paddingHorizontal": 24,
+                            "paddingVertical": 12,
                           }
                         }
                       >
-                        <Text
-                          color="bluegrey"
-                          defaultColor="bluegreyDark"
-                          defaultWeight="Bold"
-                          font="TitilliumWeb"
-                          fontStyle={
+                        <View
+                          importantForAccessibility="no-hide-descendants"
+                          style={
                             Object {
-                              "fontSize": 20,
-                              "lineHeight": 24,
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "space-between",
                             }
                           }
-                          style={
-                            Array [
+                        >
+                          <View
+                            style={
                               Object {
                                 "flex": 1,
-                              },
-                              Object {
-                                "fontSize": 20,
-                                "lineHeight": 24,
-                              },
-                              Object {
-                                "color": "#475A6D",
-                                "fontFamily": "Titillium Web",
-                                "fontStyle": "normal",
-                                "fontWeight": "700",
-                              },
-                            ]
-                          }
-                          weight="Bold"
-                        >
-                          Avvisi pagoPA
-                        </Text>
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityElementsHidden={false}
+                              accessible={true}
+                              importantForAccessibility="yes"
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="grey-700"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#555C70",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Pagamenti
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View
+                        style={
+                          Array [
+                            Object {
+                              "flex": 1,
+                            },
+                            Object {
+                              "flexDirection": "row",
+                            },
+                            Object {
+                              "alignItems": "center",
+                            },
+                          ]
+                        }
+                      >
                         <RNSVGSvgView
                           accessibilityElementsHidden={true}
                           accessibilityLabel=""
                           accessible={false}
                           align="xMidYMid"
-                          bbHeight={32}
-                          bbWidth={32}
-                          color={4292007651}
+                          bbHeight={24}
+                          bbWidth={24}
                           focusable={false}
-                          height={32}
+                          height={24}
                           importantForAccessibility="no-hide-descendants"
                           meetOrSlice={0}
                           minX={0}
@@ -3405,1621 +3227,9872 @@ exports[`MessagePayments component Should match the snapshot for five payable pa
                                 "borderWidth": 0,
                               },
                               Object {
-                                "color": "#D2D6E3",
+                                "color": "#BBC2D6",
                               },
                               Object {
                                 "flex": 0,
-                                "height": 32,
-                                "width": 32,
+                                "height": 24,
+                                "width": 24,
                               },
                             ]
                           }
-                          tintColor={4292007651}
-                          vbHeight={32}
-                          vbWidth={32}
-                          width={32}
+                          tintColor="#BBC2D6"
+                          vbHeight={24}
+                          vbWidth={24}
+                          width={24}
                         >
-                          <RNSVGGroup>
-                            <RNSVGPath
-                              d="m22.551 11.358-.009 2.675h-1.956V5h3.617c1.163 0 1.753.314 1.762.941v4.41c0 .628-.563.933-1.697.933H22.56v.074h-.01ZM24 6.043h-1.467v4.189H24v-4.19ZM1.652 14.043l-.01 2.676H0V7.685h3.027c.978 0 1.467.314 1.476.941v4.41c0 .628-.47.933-1.421.933h-1.43v.074ZM2.87 8.737H1.642v4.19H2.87v-4.19ZM9.56 13.969H6.44c-.913 0-1.374-.314-1.374-.941l.009-1.837c0-.618.47-.932 1.421-.94h1.43V8.736H6.7l-.01.83H5.085v-.94c0-.619.48-.923 1.44-.923l1.605-.019c.95 0 1.43.314 1.43.932v5.352Zm-2.852-1.052h1.237l-.01-1.615H6.708v1.615ZM13.149 13.969h-1.44c-.95 0-1.42-.314-1.42-.932v-4.41c.009-.628.498-.942 1.476-.942h3.026v8.102c0 .627-.48.94-1.43.94h-1.633c-.95 0-1.43-.313-1.43-.94v-.932h1.633v.83h1.227v-1.642l-.01-.074Zm-1.227-1.052h1.227v-4.18h-1.227v4.18ZM19.848 13.028c-.01.627-.498.932-1.477.932h-1.587c-.96 0-1.44-.314-1.44-.932v-4.41c0-.628.48-.933 1.44-.933h1.634c.95 0 1.42.314 1.42.932v4.41h.01Zm-1.624-4.291h-1.237v4.19h1.228l.009-4.19Z"
-                              fill={
-                                Array [
-                                  2,
-                                ]
-                              }
-                              propList={
-                                Array [
-                                  "fill",
-                                ]
+                          <RNSVGGroup
+                            fill={
+                              Object {
+                                "payload": 4278190080,
+                                "type": 0,
                               }
-                            />
+                            }
+                          >
                             <RNSVGPath
-                              d="M31.99 5.987c0-.627-.562-.932-1.697-.932h-1.956c-1.144 0-1.716.314-1.716.932v8.065h1.956v-2.759h1.476V13.6c0 5.905-4.77 10.676-10.676 10.676a10.694 10.694 0 0 1-8.433-4.116l.978-.747-3.931-2.648.175 5.582 1.255-.996a12.614 12.614 0 0 0 9.956 4.853C26.353 26.204 32 20.548 32 13.581l-.01-7.594Zm-1.946 4.254h-1.477V6.09h1.477v4.152Z"
+                              clipRule={0}
+                              d="M0 12C0 5.3726 5.3726 0 12 0s12 5.3726 12 12-5.3726 12-12 12S0 18.6274 0 12Zm2 0C2 6.47717 6.47717 2 12 2c5.5228 0 10 4.47717 10 10 0 5.5228-4.4772 10-10 10-5.52283 0-10-4.4772-10-10Zm10.0281-4.50455c.8439 0 1.5281-.68415 1.5281-1.52809 0-.84394-.6842-1.52809-1.5281-1.52809-.844 0-1.5281.68415-1.5281 1.52809 0 .84394.6841 1.52809 1.5281 1.52809Zm0 1.94382h.0005c.5678 0 1.0281.46029 1.0281 1.02813v8.0045c0 .5678-.4603 1.0281-1.0281 1.0281h-.0005C11.4603 19.5 11 19.0397 11 18.4719v-8.0045c0-.56784.4603-1.02813 1.0281-1.02813Z"
                               fill={
-                                Array [
-                                  2,
-                                ]
+                                Object {
+                                  "type": 2,
+                                }
                               }
+                              fillRule={0}
                               propList={
                                 Array [
                                   "fill",
+                                  "fillRule",
                                 ]
                               }
                             />
                           </RNSVGGroup>
                         </RNSVGSvgView>
-                      </View>
-                      <View>
-                        <View>
-                          <View
-                            style={
-                              Object {
-                                "height": 24,
-                              }
+                        <View
+                          style={
+                            Object {
+                              "width": 24,
                             }
-                          />
-                          <View
-                            accessible={false}
-                            style={
+                          }
+                        />
+                        <View
+                          style={
+                            Object {
+                              "flexShrink": 1,
+                            }
+                          }
+                        >
+                          <Text
+                            allowFontScaling={false}
+                            color="grey-700"
+                            defaultColor="bluegrey"
+                            defaultWeight="Regular"
+                            font="TitilliumWeb"
+                            fontStyle={
                               Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
+                                "fontSize": 16,
+                                "lineHeight": 24,
                               }
                             }
-                          >
+                            style={
+                              Array [
+                                Object {
+                                  "fontSize": 16,
+                                  "lineHeight": 24,
+                                },
+                                Object {
+                                  "color": "#555C70",
+                                  "fontFamily": "Titillium Web",
+                                  "fontStyle": "normal",
+                                  "fontWeight": "400",
+                                },
+                              ]
+                            }
+                            testID="infoScreenBody"
+                            weight="Regular"
+                          >
+                            Per l'eventuale rimborso di pagamenti legati a questa notifica, contatta l'ente mittente.
+                          </Text>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 24,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          testID="PnCancelledPaymentModulePaymentNotice"
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
                             <View
                               style={
                                 Object {
-                                  "flex": 1,
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
                                 }
                               }
                             >
-                              <View
-                                collapsable={false}
-                                style={
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "opacity": 0.5,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
-                                    }
-                                  }
-                                  width={179}
-                                />
-                              </View>
-                              <View
+                                numberOfLines={1}
                                 style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Codice avviso
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "height": 4,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              />
-                              <View
-                                collapsable={false}
+                                numberOfLines={2}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
                                 }
+                                weight="SemiBold"
                               >
-                                <View
-                                  height={13}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
-                                    }
-                                  }
-                                  width={121}
-                                />
-                              </View>
+                                01234567890012345678912345610
+                              </Text>
                             </View>
                             <View
                               style={
-                                Object {
-                                  "marginLeft": 16,
-                                }
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
                               }
                             >
                               <View
-                                collapsable={false}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F4E1",
+                                    },
+                                  ]
                                 }
                               >
-                                <View
-                                  height={16}
-                                  radius={8}
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
                                   style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#224021",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Paid
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
                                     Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
+                                      "payload": 4278190080,
+                                      "type": 0,
                                     }
                                   }
-                                  width={62}
-                                />
-                              </View>
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
                             </View>
                           </View>
                         </View>
-                        <View>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
                             }
-                          />
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          testID="PnCancelledPaymentModulePaymentNotice"
+                        >
                           <View
-                            accessible={false}
                             style={
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
-                              }
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
                             }
                           >
                             <View
                               style={
                                 Object {
-                                  "flex": 1,
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
                                 }
                               }
                             >
-                              <View
-                                collapsable={false}
-                                style={
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "opacity": 0.5,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
-                                    }
-                                  }
-                                  width={179}
-                                />
-                              </View>
-                              <View
+                                numberOfLines={1}
                                 style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Codice avviso
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "height": 4,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              />
-                              <View
-                                collapsable={false}
+                                numberOfLines={2}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
                                 }
+                                weight="SemiBold"
                               >
-                                <View
-                                  height={13}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
-                                    }
-                                  }
-                                  width={121}
-                                />
-                              </View>
+                                01234567890012345678912345620
+                              </Text>
                             </View>
                             <View
                               style={
-                                Object {
-                                  "marginLeft": 16,
-                                }
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
                               }
                             >
                               <View
-                                collapsable={false}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F4E1",
+                                    },
+                                  ]
                                 }
                               >
-                                <View
-                                  height={16}
-                                  radius={8}
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
                                   style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#224021",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Paid
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
                                     Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
+                                      "payload": 4278190080,
+                                      "type": 0,
                                     }
                                   }
-                                  width={62}
-                                />
-                              </View>
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
                             </View>
                           </View>
                         </View>
-                        <View>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
                             }
-                          />
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          testID="PnCancelledPaymentModulePaymentNotice"
+                        >
                           <View
-                            accessible={false}
                             style={
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
-                              }
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
                             }
                           >
                             <View
                               style={
                                 Object {
-                                  "flex": 1,
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
                                 }
                               }
                             >
-                              <View
-                                collapsable={false}
-                                style={
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "opacity": 0.5,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
-                                    }
-                                  }
-                                  width={179}
-                                />
-                              </View>
-                              <View
+                                numberOfLines={1}
                                 style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Codice avviso
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "height": 4,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              />
-                              <View
-                                collapsable={false}
+                                numberOfLines={2}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
                                 }
+                                weight="SemiBold"
                               >
-                                <View
-                                  height={13}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
-                                    }
-                                  }
-                                  width={121}
-                                />
-                              </View>
+                                01234567890012345678912345630
+                              </Text>
                             </View>
                             <View
                               style={
-                                Object {
-                                  "marginLeft": 16,
-                                }
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
                               }
                             >
                               <View
-                                collapsable={false}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F4E1",
+                                    },
+                                  ]
                                 }
                               >
-                                <View
-                                  height={16}
-                                  radius={8}
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
                                   style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#224021",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Paid
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
                                     Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
+                                      "payload": 4278190080,
+                                      "type": 0,
                                     }
                                   }
-                                  width={62}
-                                />
-                              </View>
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
                             </View>
                           </View>
                         </View>
-                        <View>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
                             }
-                          />
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          testID="PnCancelledPaymentModulePaymentNotice"
+                        >
                           <View
-                            accessible={false}
                             style={
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
-                              }
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
                             }
                           >
                             <View
                               style={
                                 Object {
-                                  "flex": 1,
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
                                 }
                               }
                             >
-                              <View
-                                collapsable={false}
-                                style={
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "opacity": 0.5,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
-                                    }
-                                  }
-                                  width={179}
-                                />
-                              </View>
-                              <View
+                                numberOfLines={1}
                                 style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Codice avviso
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "height": 4,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              />
-                              <View
-                                collapsable={false}
+                                numberOfLines={2}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
                                 }
+                                weight="SemiBold"
                               >
-                                <View
-                                  height={13}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
-                                    }
-                                  }
-                                  width={121}
-                                />
-                              </View>
+                                01234567890012345678912345640
+                              </Text>
                             </View>
                             <View
                               style={
-                                Object {
-                                  "marginLeft": 16,
-                                }
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
                               }
                             >
                               <View
-                                collapsable={false}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F4E1",
+                                    },
+                                  ]
                                 }
                               >
-                                <View
-                                  height={16}
-                                  radius={8}
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
                                   style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#224021",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Paid
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
                                     Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
+                                      "payload": 4278190080,
+                                      "type": 0,
                                     }
                                   }
-                                  width={62}
-                                />
-                              </View>
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
                             </View>
                           </View>
                         </View>
-                        <View>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
                             }
-                          />
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          testID="PnCancelledPaymentModulePaymentNotice"
+                        >
                           <View
-                            accessible={false}
                             style={
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
-                              }
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
                             }
                           >
                             <View
                               style={
                                 Object {
-                                  "flex": 1,
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
                                 }
                               }
                             >
-                              <View
-                                collapsable={false}
-                                style={
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "opacity": 0.5,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
-                                    }
-                                  }
-                                  width={179}
-                                />
-                              </View>
-                              <View
-                                style={
-                                  Object {
-                                    "height": 4,
-                                  }
-                                }
-                              />
-                              <View
-                                collapsable={false}
+                                numberOfLines={1}
                                 style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Codice avviso
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "opacity": 0.5,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                01234567890012345678912345650
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F4E1",
+                                    },
+                                  ]
+                                }
                               >
-                                <View
-                                  height={13}
-                                  radius={8}
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
                                   style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#224021",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Paid
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
                                     Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
                                     }
                                   }
-                                  width={121}
-                                />
-                              </View>
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
                             </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          testID="PnCancelledPaymentModulePaymentNotice"
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
                             <View
                               style={
                                 Object {
-                                  "marginLeft": 16,
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
                                 }
                               }
                             >
-                              <View
-                                collapsable={false}
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
                                 style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Codice avviso
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "opacity": 0.5,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                01234567890012345678912345660
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F4E1",
+                                    },
+                                  ]
+                                }
                               >
-                                <View
-                                  height={16}
-                                  radius={8}
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
                                   style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#224021",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Paid
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
                                     Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
+                                      "payload": 4278190080,
+                                      "type": 0,
                                     }
                                   }
-                                  width={62}
-                                />
-                              </View>
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
                             </View>
                           </View>
                         </View>
                       </View>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </RNCSafeAreaProvider>
-</View>
-`;
-
-exports[`MessagePayments component Should match the snapshot for five processed payments 1`] = `
-<View
-  style={
-    Object {
-      "flex": 1,
-    }
-  }
->
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
-    style={
-      Array [
-        Object {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
-        Object {
-          "zIndex": 1,
-        }
-      }
-    >
-      <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
-      >
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
-              }
-            }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
-              }
-            }
-          />
-          <View
-            pointerEvents="box-none"
-            style={
-              Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              pointerEvents="box-none"
-              style={
-                Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
-                collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
-                  }
-                }
-              >
-                DUMMY
-              </Text>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          testID="PnCancelledPaymentModulePaymentNotice"
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Codice avviso
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                01234567890012345678912345670
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F4E1",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#224021",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Paid
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
             </View>
           </View>
-        </View>
-      </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
     </View>
-    <View
-      onLayout={[Function]}
-      style={
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessagePayments should match snapshot when cancelled, without payments, without cancelled-completed-payments 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
         Object {
           "flex": 1,
-        }
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
+        collapsable={false}
         pointerEvents="box-none"
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "zIndex": 1,
           }
         }
       >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-        />
         <View
           accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
           importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          onLayout={[Function]}
           pointerEvents="box-none"
-          style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
               Object {
                 "bottom": 0,
                 "left": 0,
+                "opacity": 1,
                 "position": "absolute",
                 "right": 0,
                 "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
-            Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+                "zIndex": 0,
+              }
             }
-          }
-        >
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
             pointerEvents="box-none"
             style={
               Object {
-                "flex": 1,
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
               }
             }
           >
             <View
-              collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={5}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
               style={
                 Object {
+                  "alignItems": "stretch",
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
+                  "flexDirection": "row",
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                pointerEvents="box-none"
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
                   }
                 }
               />
               <View
+                collapsable={false}
+                pointerEvents="box-none"
                 style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
-                      Object {
-                        "backgroundColor": "#FFFFFF",
-                      },
-                      undefined,
-                    ],
-                  ]
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
                 }
               >
-                <View
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
                   style={
                     Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
                     }
                   }
                 >
-                  <View
-                    style={
-                      Object {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Object {
-                          "marginTop": 40,
-                        }
-                      }
-                      testID="PnPaymentSectionTitle"
-                    >
+                  PN_ROUTES_MESSAGE_DETAILS
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessagePayments should match snapshot when not cancelled, with five (max-visible-payments) payable payments, with cancelled-completed-payments 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  PN_ROUTES_MESSAGE_DETAILS
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={9}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityLabel="Avvisi pagoPA"
+                        accessible={true}
+                        style={
+                          Object {
+                            "marginHorizontal": -24,
+                            "paddingHorizontal": 24,
+                            "paddingVertical": 12,
+                          }
+                        }
+                      >
+                        <View
+                          importantForAccessibility="no-hide-descendants"
+                          style={
+                            Object {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "space-between",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "marginRight": 8,
+                              }
+                            }
+                          >
+                            <RNSVGSvgView
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessible={false}
+                              align="xMidYMid"
+                              bbHeight={24}
+                              bbWidth={24}
+                              focusable={false}
+                              height={24}
+                              importantForAccessibility="no-hide-descendants"
+                              meetOrSlice={0}
+                              minX={0}
+                              minY={0}
+                              style={
+                                Array [
+                                  Object {
+                                    "backgroundColor": "transparent",
+                                    "borderWidth": 0,
+                                  },
+                                  Object {
+                                    "color": "#0B3EE3",
+                                  },
+                                  Object {
+                                    "flex": 0,
+                                    "height": 24,
+                                    "width": 24,
+                                  },
+                                ]
+                              }
+                              tintColor="#0B3EE3"
+                              vbHeight={32}
+                              vbWidth={32}
+                              width={24}
+                            >
+                              <RNSVGGroup
+                                fill={
+                                  Object {
+                                    "payload": 4278190080,
+                                    "type": 0,
+                                  }
+                                }
+                              >
+                                <RNSVGPath
+                                  d="m22.551 11.358-.009 2.675h-1.956V5h3.617c1.163 0 1.753.314 1.762.941v4.41c0 .628-.563.933-1.697.933H22.56v.074h-.01ZM24 6.043h-1.467v4.189H24v-4.19ZM1.652 14.043l-.01 2.676H0V7.685h3.027c.978 0 1.467.314 1.476.941v4.41c0 .628-.47.933-1.421.933h-1.43v.074ZM2.87 8.737H1.642v4.19H2.87v-4.19ZM9.56 13.969H6.44c-.913 0-1.374-.314-1.374-.941l.009-1.837c0-.618.47-.932 1.421-.94h1.43V8.736H6.7l-.01.83H5.085v-.94c0-.619.48-.923 1.44-.923l1.605-.019c.95 0 1.43.314 1.43.932v5.352Zm-2.852-1.052h1.237l-.01-1.615H6.708v1.615ZM13.149 13.969h-1.44c-.95 0-1.42-.314-1.42-.932v-4.41c.009-.628.498-.942 1.476-.942h3.026v8.102c0 .627-.48.94-1.43.94h-1.633c-.95 0-1.43-.313-1.43-.94v-.932h1.633v.83h1.227v-1.642l-.01-.074Zm-1.227-1.052h1.227v-4.18h-1.227v4.18ZM19.848 13.028c-.01.627-.498.932-1.477.932h-1.587c-.96 0-1.44-.314-1.44-.932v-4.41c0-.628.48-.933 1.44-.933h1.634c.95 0 1.42.314 1.42.932v4.41h.01Zm-1.624-4.291h-1.237v4.19h1.228l.009-4.19Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                                <RNSVGPath
+                                  d="M31.99 5.987c0-.627-.562-.932-1.697-.932h-1.956c-1.144 0-1.716.314-1.716.932v8.065h1.956v-2.759h1.476V13.6c0 5.905-4.77 10.676-10.676 10.676a10.694 10.694 0 0 1-8.433-4.116l.978-.747-3.931-2.648.175 5.582 1.255-.996a12.614 12.614 0 0 0 9.956 4.853C26.353 26.204 32 20.548 32 13.581l-.01-7.594Zm-1.946 4.254h-1.477V6.09h1.477v4.152Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                              </RNSVGGroup>
+                            </RNSVGSvgView>
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityElementsHidden={false}
+                              accessible={true}
+                              importantForAccessibility="yes"
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="grey-700"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#555C70",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Avvisi pagoPA
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Due date 02/05/2099
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                hendrerit orci id dolor consectetur
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                accessibilityLabel="1.99 €"
+                                allowFontScaling={false}
+                                color="blue"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                1.99 €
+                              </Text>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Notice code
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                0123  4567  8912  3456  20
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#F4F5F8",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#555C70",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Revoked
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Notice code
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                0123  4567  8912  3456  30
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#F4F5F8",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#555C70",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Expired
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Notice code
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                0123  4567  8912  3456  40
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F5FE",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#215C76",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Ongoing
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Notice code
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                0123  4567  8912  3456  50
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F4E1",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#224021",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Paid
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessagePayments should match snapshot when not cancelled, with five (max-visible-payments) payable payments, without cancelled-completed-payments 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  PN_ROUTES_MESSAGE_DETAILS
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={10}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityLabel="Avvisi pagoPA"
+                        accessible={true}
+                        style={
+                          Object {
+                            "marginHorizontal": -24,
+                            "paddingHorizontal": 24,
+                            "paddingVertical": 12,
+                          }
+                        }
+                      >
+                        <View
+                          importantForAccessibility="no-hide-descendants"
+                          style={
+                            Object {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "space-between",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "marginRight": 8,
+                              }
+                            }
+                          >
+                            <RNSVGSvgView
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessible={false}
+                              align="xMidYMid"
+                              bbHeight={24}
+                              bbWidth={24}
+                              focusable={false}
+                              height={24}
+                              importantForAccessibility="no-hide-descendants"
+                              meetOrSlice={0}
+                              minX={0}
+                              minY={0}
+                              style={
+                                Array [
+                                  Object {
+                                    "backgroundColor": "transparent",
+                                    "borderWidth": 0,
+                                  },
+                                  Object {
+                                    "color": "#0B3EE3",
+                                  },
+                                  Object {
+                                    "flex": 0,
+                                    "height": 24,
+                                    "width": 24,
+                                  },
+                                ]
+                              }
+                              tintColor="#0B3EE3"
+                              vbHeight={32}
+                              vbWidth={32}
+                              width={24}
+                            >
+                              <RNSVGGroup
+                                fill={
+                                  Object {
+                                    "payload": 4278190080,
+                                    "type": 0,
+                                  }
+                                }
+                              >
+                                <RNSVGPath
+                                  d="m22.551 11.358-.009 2.675h-1.956V5h3.617c1.163 0 1.753.314 1.762.941v4.41c0 .628-.563.933-1.697.933H22.56v.074h-.01ZM24 6.043h-1.467v4.189H24v-4.19ZM1.652 14.043l-.01 2.676H0V7.685h3.027c.978 0 1.467.314 1.476.941v4.41c0 .628-.47.933-1.421.933h-1.43v.074ZM2.87 8.737H1.642v4.19H2.87v-4.19ZM9.56 13.969H6.44c-.913 0-1.374-.314-1.374-.941l.009-1.837c0-.618.47-.932 1.421-.94h1.43V8.736H6.7l-.01.83H5.085v-.94c0-.619.48-.923 1.44-.923l1.605-.019c.95 0 1.43.314 1.43.932v5.352Zm-2.852-1.052h1.237l-.01-1.615H6.708v1.615ZM13.149 13.969h-1.44c-.95 0-1.42-.314-1.42-.932v-4.41c.009-.628.498-.942 1.476-.942h3.026v8.102c0 .627-.48.94-1.43.94h-1.633c-.95 0-1.43-.313-1.43-.94v-.932h1.633v.83h1.227v-1.642l-.01-.074Zm-1.227-1.052h1.227v-4.18h-1.227v4.18ZM19.848 13.028c-.01.627-.498.932-1.477.932h-1.587c-.96 0-1.44-.314-1.44-.932v-4.41c0-.628.48-.933 1.44-.933h1.634c.95 0 1.42.314 1.42.932v4.41h.01Zm-1.624-4.291h-1.237v4.19h1.228l.009-4.19Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                                <RNSVGPath
+                                  d="M31.99 5.987c0-.627-.562-.932-1.697-.932h-1.956c-1.144 0-1.716.314-1.716.932v8.065h1.956v-2.759h1.476V13.6c0 5.905-4.77 10.676-10.676 10.676a10.694 10.694 0 0 1-8.433-4.116l.978-.747-3.931-2.648.175 5.582 1.255-.996a12.614 12.614 0 0 0 9.956 4.853C26.353 26.204 32 20.548 32 13.581l-.01-7.594Zm-1.946 4.254h-1.477V6.09h1.477v4.152Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                              </RNSVGGroup>
+                            </RNSVGSvgView>
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityElementsHidden={false}
+                              accessible={true}
+                              importantForAccessibility="yes"
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="grey-700"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#555C70",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Avvisi pagoPA
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Due date 02/05/2099
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                hendrerit orci id dolor consectetur
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                accessibilityLabel="1.99 €"
+                                allowFontScaling={false}
+                                color="blue"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                1.99 €
+                              </Text>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Notice code
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                0123  4567  8912  3456  20
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#F4F5F8",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#555C70",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Revoked
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Notice code
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                0123  4567  8912  3456  30
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#F4F5F8",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#555C70",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Expired
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Notice code
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                0123  4567  8912  3456  40
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F5FE",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#215C76",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Ongoing
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Notice code
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                0123  4567  8912  3456  50
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F4E1",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#224021",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Paid
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessagePayments should match snapshot when not cancelled, with more-than-five (max-visible-payments) payable payments, with cancelled-completed-payments 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  PN_ROUTES_MESSAGE_DETAILS
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={11}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityLabel="Avvisi pagoPA"
+                        accessible={true}
+                        style={
+                          Object {
+                            "marginHorizontal": -24,
+                            "paddingHorizontal": 24,
+                            "paddingVertical": 12,
+                          }
+                        }
+                      >
+                        <View
+                          importantForAccessibility="no-hide-descendants"
+                          style={
+                            Object {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "space-between",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "marginRight": 8,
+                              }
+                            }
+                          >
+                            <RNSVGSvgView
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessible={false}
+                              align="xMidYMid"
+                              bbHeight={24}
+                              bbWidth={24}
+                              focusable={false}
+                              height={24}
+                              importantForAccessibility="no-hide-descendants"
+                              meetOrSlice={0}
+                              minX={0}
+                              minY={0}
+                              style={
+                                Array [
+                                  Object {
+                                    "backgroundColor": "transparent",
+                                    "borderWidth": 0,
+                                  },
+                                  Object {
+                                    "color": "#0B3EE3",
+                                  },
+                                  Object {
+                                    "flex": 0,
+                                    "height": 24,
+                                    "width": 24,
+                                  },
+                                ]
+                              }
+                              tintColor="#0B3EE3"
+                              vbHeight={32}
+                              vbWidth={32}
+                              width={24}
+                            >
+                              <RNSVGGroup
+                                fill={
+                                  Object {
+                                    "payload": 4278190080,
+                                    "type": 0,
+                                  }
+                                }
+                              >
+                                <RNSVGPath
+                                  d="m22.551 11.358-.009 2.675h-1.956V5h3.617c1.163 0 1.753.314 1.762.941v4.41c0 .628-.563.933-1.697.933H22.56v.074h-.01ZM24 6.043h-1.467v4.189H24v-4.19ZM1.652 14.043l-.01 2.676H0V7.685h3.027c.978 0 1.467.314 1.476.941v4.41c0 .628-.47.933-1.421.933h-1.43v.074ZM2.87 8.737H1.642v4.19H2.87v-4.19ZM9.56 13.969H6.44c-.913 0-1.374-.314-1.374-.941l.009-1.837c0-.618.47-.932 1.421-.94h1.43V8.736H6.7l-.01.83H5.085v-.94c0-.619.48-.923 1.44-.923l1.605-.019c.95 0 1.43.314 1.43.932v5.352Zm-2.852-1.052h1.237l-.01-1.615H6.708v1.615ZM13.149 13.969h-1.44c-.95 0-1.42-.314-1.42-.932v-4.41c.009-.628.498-.942 1.476-.942h3.026v8.102c0 .627-.48.94-1.43.94h-1.633c-.95 0-1.43-.313-1.43-.94v-.932h1.633v.83h1.227v-1.642l-.01-.074Zm-1.227-1.052h1.227v-4.18h-1.227v4.18ZM19.848 13.028c-.01.627-.498.932-1.477.932h-1.587c-.96 0-1.44-.314-1.44-.932v-4.41c0-.628.48-.933 1.44-.933h1.634c.95 0 1.42.314 1.42.932v4.41h.01Zm-1.624-4.291h-1.237v4.19h1.228l.009-4.19Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                                <RNSVGPath
+                                  d="M31.99 5.987c0-.627-.562-.932-1.697-.932h-1.956c-1.144 0-1.716.314-1.716.932v8.065h1.956v-2.759h1.476V13.6c0 5.905-4.77 10.676-10.676 10.676a10.694 10.694 0 0 1-8.433-4.116l.978-.747-3.931-2.648.175 5.582 1.255-.996a12.614 12.614 0 0 0 9.956 4.853C26.353 26.204 32 20.548 32 13.581l-.01-7.594Zm-1.946 4.254h-1.477V6.09h1.477v4.152Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                              </RNSVGGroup>
+                            </RNSVGSvgView>
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityElementsHidden={false}
+                              accessible={true}
+                              importantForAccessibility="yes"
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="grey-700"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#555C70",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Avvisi pagoPA
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Due date 02/05/2099
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                hendrerit orci id dolor consectetur
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                accessibilityLabel="1.99 €"
+                                allowFontScaling={false}
+                                color="blue"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                1.99 €
+                              </Text>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Notice code
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                0123  4567  8912  3456  20
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#F4F5F8",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#555C70",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Revoked
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Notice code
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                0123  4567  8912  3456  30
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#F4F5F8",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#555C70",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Expired
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Notice code
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                0123  4567  8912  3456  40
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F5FE",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#215C76",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Ongoing
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Notice code
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                0123  4567  8912  3456  50
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F4E1",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#224021",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Paid
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View
+                        style={
+                          Object {
+                            "height": 32,
+                          }
+                        }
+                      />
+                      <View
+                        style={
+                          Object {
+                            "alignSelf": "center",
+                          }
+                        }
+                      >
+                        <View
+                          accessibilityLabel="Vedi tutti gli avvisi (7)"
+                          accessibilityRole="button"
+                          accessibilityState={
+                            Object {
+                              "disabled": false,
+                            }
+                          }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          hitSlop={
+                            Object {
+                              "bottom": 14,
+                              "left": 24,
+                              "right": 24,
+                              "top": 14,
+                            }
+                          }
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          style={
+                            Object {
+                              "alignSelf": "flex-start",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "elevation": 0,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "textAlignVertical": "center",
+                                },
+                                false,
+                                Object {},
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <Text
+                              accessibilityElementsHidden={true}
+                              accessible={false}
+                              allowFontScaling={false}
+                              ellipsizeMode="tail"
+                              importantForAccessibility="no-hide-descendants"
+                              maxFontSizeMultiplier={1.3}
+                              numberOfLines={1}
+                              style={
+                                Array [
+                                  Object {
+                                    "fontFamily": "Titillium Web",
+                                    "fontSize": 16,
+                                    "fontStyle": "normal",
+                                    "fontWeight": "700",
+                                  },
+                                  Object {
+                                    "color": "#0073E6",
+                                  },
+                                  Object {
+                                    "color": undefined,
+                                  },
+                                ]
+                              }
+                            >
+                              Vedi tutti gli avvisi (7)
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                      <View
+                        style={
+                          Object {
+                            "height": 8,
+                          }
+                        }
+                      />
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessagePayments should match snapshot when not cancelled, with more-than-five (max-visible-payments) payable payments, without cancelled-completed-payments 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  PN_ROUTES_MESSAGE_DETAILS
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={12}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityLabel="Avvisi pagoPA"
+                        accessible={true}
+                        style={
+                          Object {
+                            "marginHorizontal": -24,
+                            "paddingHorizontal": 24,
+                            "paddingVertical": 12,
+                          }
+                        }
+                      >
+                        <View
+                          importantForAccessibility="no-hide-descendants"
+                          style={
+                            Object {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "space-between",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Object {
+                                "marginRight": 8,
+                              }
+                            }
+                          >
+                            <RNSVGSvgView
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessible={false}
+                              align="xMidYMid"
+                              bbHeight={24}
+                              bbWidth={24}
+                              focusable={false}
+                              height={24}
+                              importantForAccessibility="no-hide-descendants"
+                              meetOrSlice={0}
+                              minX={0}
+                              minY={0}
+                              style={
+                                Array [
+                                  Object {
+                                    "backgroundColor": "transparent",
+                                    "borderWidth": 0,
+                                  },
+                                  Object {
+                                    "color": "#0B3EE3",
+                                  },
+                                  Object {
+                                    "flex": 0,
+                                    "height": 24,
+                                    "width": 24,
+                                  },
+                                ]
+                              }
+                              tintColor="#0B3EE3"
+                              vbHeight={32}
+                              vbWidth={32}
+                              width={24}
+                            >
+                              <RNSVGGroup
+                                fill={
+                                  Object {
+                                    "payload": 4278190080,
+                                    "type": 0,
+                                  }
+                                }
+                              >
+                                <RNSVGPath
+                                  d="m22.551 11.358-.009 2.675h-1.956V5h3.617c1.163 0 1.753.314 1.762.941v4.41c0 .628-.563.933-1.697.933H22.56v.074h-.01ZM24 6.043h-1.467v4.189H24v-4.19ZM1.652 14.043l-.01 2.676H0V7.685h3.027c.978 0 1.467.314 1.476.941v4.41c0 .628-.47.933-1.421.933h-1.43v.074ZM2.87 8.737H1.642v4.19H2.87v-4.19ZM9.56 13.969H6.44c-.913 0-1.374-.314-1.374-.941l.009-1.837c0-.618.47-.932 1.421-.94h1.43V8.736H6.7l-.01.83H5.085v-.94c0-.619.48-.923 1.44-.923l1.605-.019c.95 0 1.43.314 1.43.932v5.352Zm-2.852-1.052h1.237l-.01-1.615H6.708v1.615ZM13.149 13.969h-1.44c-.95 0-1.42-.314-1.42-.932v-4.41c.009-.628.498-.942 1.476-.942h3.026v8.102c0 .627-.48.94-1.43.94h-1.633c-.95 0-1.43-.313-1.43-.94v-.932h1.633v.83h1.227v-1.642l-.01-.074Zm-1.227-1.052h1.227v-4.18h-1.227v4.18ZM19.848 13.028c-.01.627-.498.932-1.477.932h-1.587c-.96 0-1.44-.314-1.44-.932v-4.41c0-.628.48-.933 1.44-.933h1.634c.95 0 1.42.314 1.42.932v4.41h.01Zm-1.624-4.291h-1.237v4.19h1.228l.009-4.19Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                                <RNSVGPath
+                                  d="M31.99 5.987c0-.627-.562-.932-1.697-.932h-1.956c-1.144 0-1.716.314-1.716.932v8.065h1.956v-2.759h1.476V13.6c0 5.905-4.77 10.676-10.676 10.676a10.694 10.694 0 0 1-8.433-4.116l.978-.747-3.931-2.648.175 5.582 1.255-.996a12.614 12.614 0 0 0 9.956 4.853C26.353 26.204 32 20.548 32 13.581l-.01-7.594Zm-1.946 4.254h-1.477V6.09h1.477v4.152Z"
+                                  fill={
+                                    Object {
+                                      "type": 2,
+                                    }
+                                  }
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
+                                />
+                              </RNSVGGroup>
+                            </RNSVGSvgView>
+                          </View>
+                          <View
+                            style={
+                              Object {
+                                "flex": 1,
+                              }
+                            }
+                          >
+                            <View
+                              accessibilityElementsHidden={false}
+                              accessible={true}
+                              importantForAccessibility="yes"
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="grey-700"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#555C70",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Avvisi pagoPA
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Due date 02/05/2099
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                hendrerit orci id dolor consectetur
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                accessibilityLabel="1.99 €"
+                                allowFontScaling={false}
+                                color="blue"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                1.99 €
+                              </Text>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Notice code
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                0123  4567  8912  3456  20
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#F4F5F8",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#555C70",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Revoked
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Notice code
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                0123  4567  8912  3456  30
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#F4F5F8",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#555C70",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Expired
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Notice code
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                0123  4567  8912  3456  40
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F5FE",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#215C76",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Ongoing
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View>
+                        <View
+                          style={
+                            Object {
+                              "height": 8,
+                            }
+                          }
+                        />
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Notice code
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                numberOfLines={2}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
+                              >
+                                0123  4567  8912  3456  50
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 24,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 4,
+                                    },
+                                    Object {
+                                      "backgroundColor": "#E1F4E1",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignSelf": "center",
+                                        "flexShrink": 1,
+                                        "fontSize": 12,
+                                        "lineHeight": 16,
+                                        "textTransform": "uppercase",
+                                      },
+                                      Object {
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "600",
+                                      },
+                                      Object {
+                                        "color": "#224021",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Paid
+                                </Text>
+                              </View>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                      <View
+                        style={
+                          Object {
+                            "height": 32,
+                          }
+                        }
+                      />
+                      <View
+                        style={
+                          Object {
+                            "alignSelf": "center",
+                          }
+                        }
+                      >
+                        <View
+                          accessibilityLabel="Vedi tutti gli avvisi (7)"
+                          accessibilityRole="button"
+                          accessibilityState={
+                            Object {
+                              "disabled": false,
+                            }
+                          }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          hitSlop={
+                            Object {
+                              "bottom": 14,
+                              "left": 24,
+                              "right": 24,
+                              "top": 14,
+                            }
+                          }
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                          style={
+                            Object {
+                              "alignSelf": "flex-start",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "elevation": 0,
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "textAlignVertical": "center",
+                                },
+                                false,
+                                Object {},
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
+                            }
+                          >
+                            <Text
+                              accessibilityElementsHidden={true}
+                              accessible={false}
+                              allowFontScaling={false}
+                              ellipsizeMode="tail"
+                              importantForAccessibility="no-hide-descendants"
+                              maxFontSizeMultiplier={1.3}
+                              numberOfLines={1}
+                              style={
+                                Array [
+                                  Object {
+                                    "fontFamily": "Titillium Web",
+                                    "fontSize": 16,
+                                    "fontStyle": "normal",
+                                    "fontWeight": "700",
+                                  },
+                                  Object {
+                                    "color": "#0073E6",
+                                  },
+                                  Object {
+                                    "color": undefined,
+                                  },
+                                ]
+                              }
+                            >
+                              Vedi tutti gli avvisi (7)
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                      <View
+                        style={
+                          Object {
+                            "height": 8,
+                          }
+                        }
+                      />
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessagePayments should match snapshot when not cancelled, with one payable payment, with cancelled-completed-payments 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  PN_ROUTES_MESSAGE_DETAILS
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={7}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
                       <View
+                        accessibilityLabel="Avvisi pagoPA"
+                        accessible={true}
                         style={
                           Object {
-                            "flex": 1,
-                            "flexDirection": "row",
+                            "marginHorizontal": -24,
+                            "paddingHorizontal": 24,
+                            "paddingVertical": 12,
                           }
                         }
                       >
-                        <Text
-                          color="bluegrey"
-                          defaultColor="bluegreyDark"
-                          defaultWeight="Bold"
-                          font="TitilliumWeb"
-                          fontStyle={
-                            Object {
-                              "fontSize": 20,
-                              "lineHeight": 24,
-                            }
-                          }
-                          style={
-                            Array [
-                              Object {
-                                "flex": 1,
-                              },
-                              Object {
-                                "fontSize": 20,
-                                "lineHeight": 24,
-                              },
-                              Object {
-                                "color": "#475A6D",
-                                "fontFamily": "Titillium Web",
-                                "fontStyle": "normal",
-                                "fontWeight": "700",
-                              },
-                            ]
-                          }
-                          weight="Bold"
-                        >
-                          Avvisi pagoPA
-                        </Text>
-                        <RNSVGSvgView
-                          accessibilityElementsHidden={true}
-                          accessibilityLabel=""
-                          accessible={false}
-                          align="xMidYMid"
-                          bbHeight={32}
-                          bbWidth={32}
-                          color={4292007651}
-                          focusable={false}
-                          height={32}
+                        <View
                           importantForAccessibility="no-hide-descendants"
-                          meetOrSlice={0}
-                          minX={0}
-                          minY={0}
                           style={
-                            Array [
-                              Object {
-                                "backgroundColor": "transparent",
-                                "borderWidth": 0,
-                              },
-                              Object {
-                                "color": "#D2D6E3",
-                              },
-                              Object {
-                                "flex": 0,
-                                "height": 32,
-                                "width": 32,
-                              },
-                            ]
+                            Object {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "space-between",
+                            }
                           }
-                          tintColor={4292007651}
-                          vbHeight={32}
-                          vbWidth={32}
-                          width={32}
                         >
-                          <RNSVGGroup>
-                            <RNSVGPath
-                              d="m22.551 11.358-.009 2.675h-1.956V5h3.617c1.163 0 1.753.314 1.762.941v4.41c0 .628-.563.933-1.697.933H22.56v.074h-.01ZM24 6.043h-1.467v4.189H24v-4.19ZM1.652 14.043l-.01 2.676H0V7.685h3.027c.978 0 1.467.314 1.476.941v4.41c0 .628-.47.933-1.421.933h-1.43v.074ZM2.87 8.737H1.642v4.19H2.87v-4.19ZM9.56 13.969H6.44c-.913 0-1.374-.314-1.374-.941l.009-1.837c0-.618.47-.932 1.421-.94h1.43V8.736H6.7l-.01.83H5.085v-.94c0-.619.48-.923 1.44-.923l1.605-.019c.95 0 1.43.314 1.43.932v5.352Zm-2.852-1.052h1.237l-.01-1.615H6.708v1.615ZM13.149 13.969h-1.44c-.95 0-1.42-.314-1.42-.932v-4.41c.009-.628.498-.942 1.476-.942h3.026v8.102c0 .627-.48.94-1.43.94h-1.633c-.95 0-1.43-.313-1.43-.94v-.932h1.633v.83h1.227v-1.642l-.01-.074Zm-1.227-1.052h1.227v-4.18h-1.227v4.18ZM19.848 13.028c-.01.627-.498.932-1.477.932h-1.587c-.96 0-1.44-.314-1.44-.932v-4.41c0-.628.48-.933 1.44-.933h1.634c.95 0 1.42.314 1.42.932v4.41h.01Zm-1.624-4.291h-1.237v4.19h1.228l.009-4.19Z"
-                              fill={
-                                Array [
-                                  2,
-                                ]
-                              }
-                              propList={
-                                Array [
-                                  "fill",
-                                ]
-                              }
-                            />
-                            <RNSVGPath
-                              d="M31.99 5.987c0-.627-.562-.932-1.697-.932h-1.956c-1.144 0-1.716.314-1.716.932v8.065h1.956v-2.759h1.476V13.6c0 5.905-4.77 10.676-10.676 10.676a10.694 10.694 0 0 1-8.433-4.116l.978-.747-3.931-2.648.175 5.582 1.255-.996a12.614 12.614 0 0 0 9.956 4.853C26.353 26.204 32 20.548 32 13.581l-.01-7.594Zm-1.946 4.254h-1.477V6.09h1.477v4.152Z"
-                              fill={
-                                Array [
-                                  2,
-                                ]
-                              }
-                              propList={
-                                Array [
-                                  "fill",
-                                ]
-                              }
-                            />
-                          </RNSVGGroup>
-                        </RNSVGSvgView>
-                      </View>
-                      <View>
-                        <View>
-                          <View
-                            style={
-                              Object {
-                                "height": 24,
-                              }
-                            }
-                          />
-                          <View
-                            accessible={false}
-                            style={
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
-                              }
-                            }
-                          >
-                            <View
-                              style={
-                                Object {
-                                  "flex": 1,
-                                }
-                              }
-                            >
-                              <View
-                                collapsable={false}
-                                style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
-                                    }
-                                  }
-                                  width={179}
-                                />
-                              </View>
-                              <View
-                                style={
-                                  Object {
-                                    "height": 4,
-                                  }
-                                }
-                              />
-                              <View
-                                collapsable={false}
-                                style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={13}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
-                                    }
-                                  }
-                                  width={121}
-                                />
-                              </View>
-                            </View>
-                            <View
-                              style={
-                                Object {
-                                  "marginLeft": 16,
-                                }
-                              }
-                            >
-                              <View
-                                collapsable={false}
-                                style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
-                                    }
-                                  }
-                                  width={62}
-                                />
-                              </View>
-                            </View>
-                          </View>
-                        </View>
-                        <View>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
-                            }
-                          />
                           <View
-                            accessible={false}
                             style={
                               Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
+                                "marginRight": 8,
                               }
                             }
                           >
-                            <View
+                            <RNSVGSvgView
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessible={false}
+                              align="xMidYMid"
+                              bbHeight={24}
+                              bbWidth={24}
+                              focusable={false}
+                              height={24}
+                              importantForAccessibility="no-hide-descendants"
+                              meetOrSlice={0}
+                              minX={0}
+                              minY={0}
                               style={
-                                Object {
-                                  "flex": 1,
-                                }
-                              }
-                            >
-                              <View
-                                collapsable={false}
-                                style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
-                                    }
-                                  }
-                                  width={179}
-                                />
-                              </View>
-                              <View
-                                style={
+                                Array [
                                   Object {
-                                    "height": 4,
-                                  }
-                                }
-                              />
-                              <View
-                                collapsable={false}
-                                style={
+                                    "backgroundColor": "transparent",
+                                    "borderWidth": 0,
+                                  },
                                   Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={13}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
-                                    }
-                                  }
-                                  width={121}
-                                />
-                              </View>
-                            </View>
-                            <View
-                              style={
-                                Object {
-                                  "marginLeft": 16,
-                                }
-                              }
-                            >
-                              <View
-                                collapsable={false}
-                                style={
+                                    "color": "#0B3EE3",
+                                  },
                                   Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
-                                    }
-                                  }
-                                  width={62}
-                                />
-                              </View>
-                            </View>
-                          </View>
-                        </View>
-                        <View>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <View
-                            accessible={false}
-                            style={
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
-                              }
-                            }
-                          >
-                            <View
-                              style={
-                                Object {
-                                  "flex": 1,
-                                }
+                                    "flex": 0,
+                                    "height": 24,
+                                    "width": 24,
+                                  },
+                                ]
                               }
+                              tintColor="#0B3EE3"
+                              vbHeight={32}
+                              vbWidth={32}
+                              width={24}
                             >
-                              <View
-                                collapsable={false}
-                                style={
+                              <RNSVGGroup
+                                fill={
                                   Object {
-                                    "opacity": 0.5,
+                                    "payload": 4278190080,
+                                    "type": 0,
                                   }
                                 }
                               >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
+                                <RNSVGPath
+                                  d="m22.551 11.358-.009 2.675h-1.956V5h3.617c1.163 0 1.753.314 1.762.941v4.41c0 .628-.563.933-1.697.933H22.56v.074h-.01ZM24 6.043h-1.467v4.189H24v-4.19ZM1.652 14.043l-.01 2.676H0V7.685h3.027c.978 0 1.467.314 1.476.941v4.41c0 .628-.47.933-1.421.933h-1.43v.074ZM2.87 8.737H1.642v4.19H2.87v-4.19ZM9.56 13.969H6.44c-.913 0-1.374-.314-1.374-.941l.009-1.837c0-.618.47-.932 1.421-.94h1.43V8.736H6.7l-.01.83H5.085v-.94c0-.619.48-.923 1.44-.923l1.605-.019c.95 0 1.43.314 1.43.932v5.352Zm-2.852-1.052h1.237l-.01-1.615H6.708v1.615ZM13.149 13.969h-1.44c-.95 0-1.42-.314-1.42-.932v-4.41c.009-.628.498-.942 1.476-.942h3.026v8.102c0 .627-.48.94-1.43.94h-1.633c-.95 0-1.43-.313-1.43-.94v-.932h1.633v.83h1.227v-1.642l-.01-.074Zm-1.227-1.052h1.227v-4.18h-1.227v4.18ZM19.848 13.028c-.01.627-.498.932-1.477.932h-1.587c-.96 0-1.44-.314-1.44-.932v-4.41c0-.628.48-.933 1.44-.933h1.634c.95 0 1.42.314 1.42.932v4.41h.01Zm-1.624-4.291h-1.237v4.19h1.228l.009-4.19Z"
+                                  fill={
                                     Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
+                                      "type": 2,
                                     }
                                   }
-                                  width={179}
-                                />
-                              </View>
-                              <View
-                                style={
-                                  Object {
-                                    "height": 4,
-                                  }
-                                }
-                              />
-                              <View
-                                collapsable={false}
-                                style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={13}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
-                                    }
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
                                   }
-                                  width={121}
                                 />
-                              </View>
-                            </View>
-                            <View
-                              style={
-                                Object {
-                                  "marginLeft": 16,
-                                }
-                              }
-                            >
-                              <View
-                                collapsable={false}
-                                style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
+                                <RNSVGPath
+                                  d="M31.99 5.987c0-.627-.562-.932-1.697-.932h-1.956c-1.144 0-1.716.314-1.716.932v8.065h1.956v-2.759h1.476V13.6c0 5.905-4.77 10.676-10.676 10.676a10.694 10.694 0 0 1-8.433-4.116l.978-.747-3.931-2.648.175 5.582 1.255-.996a12.614 12.614 0 0 0 9.956 4.853C26.353 26.204 32 20.548 32 13.581l-.01-7.594Zm-1.946 4.254h-1.477V6.09h1.477v4.152Z"
+                                  fill={
                                     Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
+                                      "type": 2,
                                     }
                                   }
-                                  width={62}
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
+                                  }
                                 />
-                              </View>
-                            </View>
+                              </RNSVGGroup>
+                            </RNSVGSvgView>
                           </View>
-                        </View>
-                        <View>
                           <View
                             style={
                               Object {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <View
-                            accessible={false}
-                            style={
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
+                                "flex": 1,
                               }
                             }
                           >
                             <View
-                              style={
-                                Object {
-                                  "flex": 1,
-                                }
-                              }
+                              accessibilityElementsHidden={false}
+                              accessible={true}
+                              importantForAccessibility="yes"
                             >
-                              <View
-                                collapsable={false}
-                                style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
-                                    }
-                                  }
-                                  width={179}
-                                />
-                              </View>
-                              <View
-                                style={
+                              <Text
+                                allowFontScaling={false}
+                                color="grey-700"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "height": 4,
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
                                   }
                                 }
-                              />
-                              <View
-                                collapsable={false}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={13}
-                                  radius={8}
-                                  style={
+                                  Array [
                                     Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
-                                    }
-                                  }
-                                  width={121}
-                                />
-                              </View>
-                            </View>
-                            <View
-                              style={
-                                Object {
-                                  "marginLeft": 16,
-                                }
-                              }
-                            >
-                              <View
-                                collapsable={false}
-                                style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#555C70",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
                                 }
+                                weight="Regular"
                               >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
-                                    }
-                                  }
-                                  width={62}
-                                />
-                              </View>
+                                Avvisi pagoPA
+                              </Text>
                             </View>
                           </View>
                         </View>
-                        <View>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
-                            }
-                          />
+                      </View>
+                      <View>
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
                           <View
-                            accessible={false}
                             style={
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
-                              }
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
                             }
                           >
                             <View
                               style={
                                 Object {
-                                  "flex": 1,
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
                                 }
                               }
                             >
-                              <View
-                                collapsable={false}
-                                style={
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "opacity": 0.5,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
-                                    }
-                                  }
-                                  width={179}
-                                />
-                              </View>
-                              <View
+                                numberOfLines={1}
                                 style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Due date 02/05/2099
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "height": 4,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              />
-                              <View
-                                collapsable={false}
+                                numberOfLines={2}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
                                 }
+                                weight="SemiBold"
                               >
-                                <View
-                                  height={13}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
-                                    }
-                                  }
-                                  width={121}
-                                />
-                              </View>
+                                hendrerit orci id dolor consectetur
+                              </Text>
                             </View>
                             <View
                               style={
-                                Object {
-                                  "marginLeft": 16,
-                                }
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
                               }
                             >
-                              <View
-                                collapsable={false}
-                                style={
+                              <Text
+                                accessibilityLabel="1.99 €"
+                                allowFontScaling={false}
+                                color="blue"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "opacity": 0.5,
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
                                   }
                                 }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
                               >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
+                                1.99 €
+                              </Text>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
                                     Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
+                                      "payload": 4278190080,
+                                      "type": 0,
                                     }
                                   }
-                                  width={62}
-                                />
-                              </View>
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
                             </View>
                           </View>
                         </View>
@@ -5030,14 +13103,14 @@ exports[`MessagePayments component Should match the snapshot for five processed
               </View>
             </View>
           </View>
-        </View>
-      </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
     </View>
   </RNCSafeAreaProvider>
 </View>
 `;
 
-exports[`MessagePayments component Should match the snapshot for more than five loading payments 1`] = `
+exports[`MessagePayments should match snapshot when not cancelled, with one payable payment, without cancelled-completed-payments 1`] = `
 <View
   style={
     Object {
@@ -5057,1008 +13130,688 @@ exports[`MessagePayments component Should match the snapshot for more than five
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
+        collapsable={false}
         pointerEvents="box-none"
-        style={null}
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
       >
         <View
-          collapsable={false}
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
           pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
+          style={null}
         >
           <View
             collapsable={false}
+            pointerEvents="box-none"
             style={
               Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
               }
             }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
               }
-            }
-          />
+            />
+          </View>
           <View
+            collapsable={false}
             pointerEvents="box-none"
             style={
               Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
               }
             }
           >
             <View
-              collapsable={false}
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
               pointerEvents="box-none"
               style={
                 Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
                 }
               }
             >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
                 collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
+                pointerEvents="box-none"
                 style={
                   Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
                   }
                 }
               >
-                DUMMY
-              </Text>
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  PN_ROUTES_MESSAGE_DETAILS
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
             </View>
           </View>
         </View>
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
+      <RNSScreenContainer
+        onLayout={[Function]}
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "flex": 1,
           }
         }
       >
-        <View
+        <RNSModalScreen
+          activityState={2}
           collapsable={false}
-          style={
+          forwardedRef={[Function]}
+          gestureResponseDistance={
             Object {
-              "opacity": 1,
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
             }
           }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          onGestureCancel={[Function]}
           pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
           style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
             Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={3}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={8}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
                       },
-                      undefined,
-                    ],
-                  ]
-                }
-              >
-                <View
-                  style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
-                  }
-                >
-                  <View
-                    style={
                       Object {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Object {
-                          "marginTop": 40,
-                        }
-                      }
-                      testID="PnPaymentSectionTitle"
-                    >
-                      <View
-                        style={
-                          Object {
-                            "flex": 1,
-                            "flexDirection": "row",
-                          }
-                        }
-                      >
-                        <Text
-                          color="bluegrey"
-                          defaultColor="bluegreyDark"
-                          defaultWeight="Bold"
-                          font="TitilliumWeb"
-                          fontStyle={
-                            Object {
-                              "fontSize": 20,
-                              "lineHeight": 24,
-                            }
-                          }
-                          style={
-                            Array [
-                              Object {
-                                "flex": 1,
-                              },
-                              Object {
-                                "fontSize": 20,
-                                "lineHeight": 24,
-                              },
-                              Object {
-                                "color": "#475A6D",
-                                "fontFamily": "Titillium Web",
-                                "fontStyle": "normal",
-                                "fontWeight": "700",
-                              },
-                            ]
-                          }
-                          weight="Bold"
-                        >
-                          Avvisi pagoPA
-                        </Text>
-                        <RNSVGSvgView
-                          accessibilityElementsHidden={true}
-                          accessibilityLabel=""
-                          accessible={false}
-                          align="xMidYMid"
-                          bbHeight={32}
-                          bbWidth={32}
-                          color={4292007651}
-                          focusable={false}
-                          height={32}
-                          importantForAccessibility="no-hide-descendants"
-                          meetOrSlice={0}
-                          minX={0}
-                          minY={0}
-                          style={
-                            Array [
-                              Object {
-                                "backgroundColor": "transparent",
-                                "borderWidth": 0,
-                              },
-                              Object {
-                                "color": "#D2D6E3",
-                              },
-                              Object {
-                                "flex": 0,
-                                "height": 32,
-                                "width": 32,
-                              },
-                            ]
-                          }
-                          tintColor={4292007651}
-                          vbHeight={32}
-                          vbWidth={32}
-                          width={32}
-                        >
-                          <RNSVGGroup>
-                            <RNSVGPath
-                              d="m22.551 11.358-.009 2.675h-1.956V5h3.617c1.163 0 1.753.314 1.762.941v4.41c0 .628-.563.933-1.697.933H22.56v.074h-.01ZM24 6.043h-1.467v4.189H24v-4.19ZM1.652 14.043l-.01 2.676H0V7.685h3.027c.978 0 1.467.314 1.476.941v4.41c0 .628-.47.933-1.421.933h-1.43v.074ZM2.87 8.737H1.642v4.19H2.87v-4.19ZM9.56 13.969H6.44c-.913 0-1.374-.314-1.374-.941l.009-1.837c0-.618.47-.932 1.421-.94h1.43V8.736H6.7l-.01.83H5.085v-.94c0-.619.48-.923 1.44-.923l1.605-.019c.95 0 1.43.314 1.43.932v5.352Zm-2.852-1.052h1.237l-.01-1.615H6.708v1.615ZM13.149 13.969h-1.44c-.95 0-1.42-.314-1.42-.932v-4.41c.009-.628.498-.942 1.476-.942h3.026v8.102c0 .627-.48.94-1.43.94h-1.633c-.95 0-1.43-.313-1.43-.94v-.932h1.633v.83h1.227v-1.642l-.01-.074Zm-1.227-1.052h1.227v-4.18h-1.227v4.18ZM19.848 13.028c-.01.627-.498.932-1.477.932h-1.587c-.96 0-1.44-.314-1.44-.932v-4.41c0-.628.48-.933 1.44-.933h1.634c.95 0 1.42.314 1.42.932v4.41h.01Zm-1.624-4.291h-1.237v4.19h1.228l.009-4.19Z"
-                              fill={
-                                Array [
-                                  2,
-                                ]
-                              }
-                              propList={
-                                Array [
-                                  "fill",
-                                ]
-                              }
-                            />
-                            <RNSVGPath
-                              d="M31.99 5.987c0-.627-.562-.932-1.697-.932h-1.956c-1.144 0-1.716.314-1.716.932v8.065h1.956v-2.759h1.476V13.6c0 5.905-4.77 10.676-10.676 10.676a10.694 10.694 0 0 1-8.433-4.116l.978-.747-3.931-2.648.175 5.582 1.255-.996a12.614 12.614 0 0 0 9.956 4.853C26.353 26.204 32 20.548 32 13.581l-.01-7.594Zm-1.946 4.254h-1.477V6.09h1.477v4.152Z"
-                              fill={
-                                Array [
-                                  2,
-                                ]
-                              }
-                              propList={
-                                Array [
-                                  "fill",
-                                ]
-                              }
-                            />
-                          </RNSVGGroup>
-                        </RNSVGSvgView>
-                      </View>
-                      <View>
-                        <View>
-                          <View
-                            style={
-                              Object {
-                                "height": 24,
-                              }
-                            }
-                          />
-                          <View
-                            accessible={false}
-                            style={
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
-                              }
-                            }
-                          >
-                            <View
-                              style={
-                                Object {
-                                  "flex": 1,
-                                }
-                              }
-                            >
-                              <View
-                                collapsable={false}
-                                style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
-                                    }
-                                  }
-                                  width={179}
-                                />
-                              </View>
-                              <View
-                                style={
-                                  Object {
-                                    "height": 4,
-                                  }
-                                }
-                              />
-                              <View
-                                collapsable={false}
-                                style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={13}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
-                                    }
-                                  }
-                                  width={121}
-                                />
-                              </View>
-                            </View>
-                            <View
-                              style={
-                                Object {
-                                  "marginLeft": 16,
-                                }
-                              }
-                            >
-                              <View
-                                collapsable={false}
-                                style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
-                                    }
-                                  }
-                                  width={62}
-                                />
-                              </View>
-                            </View>
-                          </View>
-                        </View>
-                        <View>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        accessibilityLabel="Avvisi pagoPA"
+                        accessible={true}
+                        style={
+                          Object {
+                            "marginHorizontal": -24,
+                            "paddingHorizontal": 24,
+                            "paddingVertical": 12,
+                          }
+                        }
+                      >
+                        <View
+                          importantForAccessibility="no-hide-descendants"
+                          style={
+                            Object {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "space-between",
                             }
-                          />
+                          }
+                        >
                           <View
-                            accessible={false}
                             style={
                               Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
+                                "marginRight": 8,
                               }
                             }
                           >
-                            <View
+                            <RNSVGSvgView
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessible={false}
+                              align="xMidYMid"
+                              bbHeight={24}
+                              bbWidth={24}
+                              focusable={false}
+                              height={24}
+                              importantForAccessibility="no-hide-descendants"
+                              meetOrSlice={0}
+                              minX={0}
+                              minY={0}
                               style={
-                                Object {
-                                  "flex": 1,
-                                }
-                              }
-                            >
-                              <View
-                                collapsable={false}
-                                style={
+                                Array [
                                   Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
-                                    }
-                                  }
-                                  width={179}
-                                />
-                              </View>
-                              <View
-                                style={
+                                    "backgroundColor": "transparent",
+                                    "borderWidth": 0,
+                                  },
                                   Object {
-                                    "height": 4,
-                                  }
-                                }
-                              />
-                              <View
-                                collapsable={false}
-                                style={
+                                    "color": "#0B3EE3",
+                                  },
                                   Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={13}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
-                                    }
-                                  }
-                                  width={121}
-                                />
-                              </View>
-                            </View>
-                            <View
-                              style={
-                                Object {
-                                  "marginLeft": 16,
-                                }
+                                    "flex": 0,
+                                    "height": 24,
+                                    "width": 24,
+                                  },
+                                ]
                               }
+                              tintColor="#0B3EE3"
+                              vbHeight={32}
+                              vbWidth={32}
+                              width={24}
                             >
-                              <View
-                                collapsable={false}
-                                style={
+                              <RNSVGGroup
+                                fill={
                                   Object {
-                                    "opacity": 0.5,
+                                    "payload": 4278190080,
+                                    "type": 0,
                                   }
                                 }
                               >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
+                                <RNSVGPath
+                                  d="m22.551 11.358-.009 2.675h-1.956V5h3.617c1.163 0 1.753.314 1.762.941v4.41c0 .628-.563.933-1.697.933H22.56v.074h-.01ZM24 6.043h-1.467v4.189H24v-4.19ZM1.652 14.043l-.01 2.676H0V7.685h3.027c.978 0 1.467.314 1.476.941v4.41c0 .628-.47.933-1.421.933h-1.43v.074ZM2.87 8.737H1.642v4.19H2.87v-4.19ZM9.56 13.969H6.44c-.913 0-1.374-.314-1.374-.941l.009-1.837c0-.618.47-.932 1.421-.94h1.43V8.736H6.7l-.01.83H5.085v-.94c0-.619.48-.923 1.44-.923l1.605-.019c.95 0 1.43.314 1.43.932v5.352Zm-2.852-1.052h1.237l-.01-1.615H6.708v1.615ZM13.149 13.969h-1.44c-.95 0-1.42-.314-1.42-.932v-4.41c.009-.628.498-.942 1.476-.942h3.026v8.102c0 .627-.48.94-1.43.94h-1.633c-.95 0-1.43-.313-1.43-.94v-.932h1.633v.83h1.227v-1.642l-.01-.074Zm-1.227-1.052h1.227v-4.18h-1.227v4.18ZM19.848 13.028c-.01.627-.498.932-1.477.932h-1.587c-.96 0-1.44-.314-1.44-.932v-4.41c0-.628.48-.933 1.44-.933h1.634c.95 0 1.42.314 1.42.932v4.41h.01Zm-1.624-4.291h-1.237v4.19h1.228l.009-4.19Z"
+                                  fill={
                                     Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
+                                      "type": 2,
                                     }
                                   }
-                                  width={62}
-                                />
-                              </View>
-                            </View>
-                          </View>
-                        </View>
-                        <View>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <View
-                            accessible={false}
-                            style={
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
-                              }
-                            }
-                          >
-                            <View
-                              style={
-                                Object {
-                                  "flex": 1,
-                                }
-                              }
-                            >
-                              <View
-                                collapsable={false}
-                                style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
-                                    }
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
                                   }
-                                  width={179}
                                 />
-                              </View>
-                              <View
-                                style={
-                                  Object {
-                                    "height": 4,
-                                  }
-                                }
-                              />
-                              <View
-                                collapsable={false}
-                                style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={13}
-                                  radius={8}
-                                  style={
+                                <RNSVGPath
+                                  d="M31.99 5.987c0-.627-.562-.932-1.697-.932h-1.956c-1.144 0-1.716.314-1.716.932v8.065h1.956v-2.759h1.476V13.6c0 5.905-4.77 10.676-10.676 10.676a10.694 10.694 0 0 1-8.433-4.116l.978-.747-3.931-2.648.175 5.582 1.255-.996a12.614 12.614 0 0 0 9.956 4.853C26.353 26.204 32 20.548 32 13.581l-.01-7.594Zm-1.946 4.254h-1.477V6.09h1.477v4.152Z"
+                                  fill={
                                     Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
+                                      "type": 2,
                                     }
                                   }
-                                  width={121}
-                                />
-                              </View>
-                            </View>
-                            <View
-                              style={
-                                Object {
-                                  "marginLeft": 16,
-                                }
-                              }
-                            >
-                              <View
-                                collapsable={false}
-                                style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
-                                    }
+                                  propList={
+                                    Array [
+                                      "fill",
+                                    ]
                                   }
-                                  width={62}
                                 />
-                              </View>
-                            </View>
+                              </RNSVGGroup>
+                            </RNSVGSvgView>
                           </View>
-                        </View>
-                        <View>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
-                            }
-                          />
                           <View
-                            accessible={false}
                             style={
                               Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
+                                "flex": 1,
                               }
                             }
                           >
                             <View
-                              style={
-                                Object {
-                                  "flex": 1,
-                                }
-                              }
+                              accessibilityElementsHidden={false}
+                              accessible={true}
+                              importantForAccessibility="yes"
                             >
-                              <View
-                                collapsable={false}
-                                style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
-                                    }
-                                  }
-                                  width={179}
-                                />
-                              </View>
-                              <View
-                                style={
+                              <Text
+                                allowFontScaling={false}
+                                color="grey-700"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "height": 4,
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
                                   }
                                 }
-                              />
-                              <View
-                                collapsable={false}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
-                                }
-                              >
-                                <View
-                                  height={13}
-                                  radius={8}
-                                  style={
+                                  Array [
                                     Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
-                                    }
-                                  }
-                                  width={121}
-                                />
-                              </View>
-                            </View>
-                            <View
-                              style={
-                                Object {
-                                  "marginLeft": 16,
-                                }
-                              }
-                            >
-                              <View
-                                collapsable={false}
-                                style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#555C70",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
                                 }
+                                weight="Regular"
                               >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
-                                    }
-                                  }
-                                  width={62}
-                                />
-                              </View>
+                                Avvisi pagoPA
+                              </Text>
                             </View>
                           </View>
                         </View>
-                        <View>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
-                            }
-                          />
+                      </View>
+                      <View>
+                        <View
+                          accessibilityRole="button"
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          onTouchEnd={[Function]}
+                        >
                           <View
-                            accessible={false}
                             style={
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "#FFFFFF",
-                                "borderColor": "#E8EBF1",
-                                "borderRadius": 8,
-                                "borderWidth": 1,
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingHorizontal": 16,
-                                "paddingVertical": 16,
-                              }
+                              Array [
+                                Object {
+                                  "alignItems": "center",
+                                  "backgroundColor": "#FFFFFF",
+                                  "borderColor": "#E8EBF1",
+                                  "borderCurve": "continuous",
+                                  "borderRadius": 8,
+                                  "borderWidth": 1,
+                                  "flexDirection": "row",
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 16,
+                                  "paddingVertical": 16,
+                                },
+                                false,
+                                Object {
+                                  "transform": Array [
+                                    Object {
+                                      "scale": undefined,
+                                    },
+                                  ],
+                                },
+                              ]
                             }
                           >
                             <View
                               style={
                                 Object {
-                                  "flex": 1,
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "paddingEnd": 8,
                                 }
                               }
-                            >
-                              <View
-                                collapsable={false}
-                                style={
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "opacity": 0.5,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 179,
-                                    }
-                                  }
-                                  width={179}
-                                />
-                              </View>
-                              <View
+                                numberOfLines={1}
                                 style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                Due date 02/05/2099
+                              </Text>
+                              <Text
+                                allowFontScaling={false}
+                                color="bluegrey"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "height": 4,
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
                                   }
                                 }
-                              />
-                              <View
-                                collapsable={false}
+                                numberOfLines={2}
                                 style={
-                                  Object {
-                                    "opacity": 0.5,
-                                  }
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#475A6D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
                                 }
+                                weight="SemiBold"
                               >
-                                <View
-                                  height={13}
-                                  radius={8}
-                                  style={
-                                    Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 13,
-                                      "width": 121,
-                                    }
-                                  }
-                                  width={121}
-                                />
-                              </View>
+                                hendrerit orci id dolor consectetur
+                              </Text>
                             </View>
                             <View
                               style={
-                                Object {
-                                  "marginLeft": 16,
-                                }
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "flex-end",
+                                    "marginLeft": 16,
+                                  },
+                                  Object {
+                                    "flexShrink": 1,
+                                  },
+                                ]
                               }
                             >
-                              <View
-                                collapsable={false}
-                                style={
+                              <Text
+                                accessibilityLabel="1.99 €"
+                                allowFontScaling={false}
+                                color="blue"
+                                defaultColor="black"
+                                defaultWeight="SemiBold"
+                                font="TitilliumWeb"
+                                fontStyle={
                                   Object {
-                                    "opacity": 0.5,
+                                    "fontSize": 18,
+                                    "lineHeight": 25,
                                   }
                                 }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 18,
+                                      "lineHeight": 25,
+                                    },
+                                    Object {
+                                      "color": "#0073E6",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                  ]
+                                }
+                                weight="SemiBold"
                               >
-                                <View
-                                  height={16}
-                                  radius={8}
-                                  style={
+                                1.99 €
+                              </Text>
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
                                     Object {
-                                      "backgroundColor": "#efefef",
-                                      "borderRadius": 8,
-                                      "height": 16,
-                                      "width": 62,
+                                      "color": "#0073E6",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#0073E6"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
                                     }
                                   }
-                                  width={62}
-                                />
-                              </View>
+                                >
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
                             </View>
                           </View>
                         </View>
-                        <View
-                          style={
-                            Object {
-                              "height": 16,
-                            }
-                          }
-                        />
-                        <View
-                          style={
-                            Object {
-                              "alignItems": "center",
-                              "flex": 1,
-                            }
-                          }
-                        >
-                          <View
-                            collapsable={false}
-                            style={
-                              Object {
-                                "opacity": 0.5,
-                              }
-                            }
-                          >
-                            <View
-                              height={16}
-                              radius={8}
-                              style={
-                                Object {
-                                  "backgroundColor": "#efefef",
-                                  "borderRadius": 8,
-                                  "height": 16,
-                                  "width": 172,
-                                }
-                              }
-                              width={172}
-                            />
-                          </View>
-                        </View>
                       </View>
                     </View>
                   </View>
@@ -6066,8 +13819,698 @@ exports[`MessagePayments component Should match the snapshot for more than five
               </View>
             </View>
           </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessagePayments should match snapshot when not cancelled, without payments, with cancelled-completed-payments 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  PN_ROUTES_MESSAGE_DETAILS
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={6}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`MessagePayments should match snapshot when not cancelled, without payments, without cancelled-completed-payments 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  PN_ROUTES_MESSAGE_DETAILS
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
         </View>
       </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={5}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
     </View>
   </RNCSafeAreaProvider>
 </View>
diff --git a/ts/features/pn/hooks/useF24BottomSheet.tsx b/ts/features/pn/hooks/useF24BottomSheet.tsx
index dc0f4d8befc..5c1bcbf61e9 100644
--- a/ts/features/pn/hooks/useF24BottomSheet.tsx
+++ b/ts/features/pn/hooks/useF24BottomSheet.tsx
@@ -1,21 +1,24 @@
 import React from "react";
-import { MessageAttachments } from "../../messages/components/MessageAttachments";
-import { UIAttachment } from "../../messages/types";
+import { LegacyMessageAttachments } from "../components/LegacyMessageAttachments";
 import { useIOBottomSheetAutoresizableModal } from "../../../utils/hooks/bottomSheet";
 import I18n from "../../../i18n";
+import { ThirdPartyAttachment } from "../../../../definitions/backend/ThirdPartyAttachment";
+import { UIMessageId } from "../../messages/types";
 
 export const useF24BottomSheet = (
-  attachments: ReadonlyArray<UIAttachment>,
-  openPreview: (attachment: UIAttachment) => void
+  attachments: ReadonlyArray<ThirdPartyAttachment>,
+  messageId: UIMessageId,
+  openPreview: (attachment: ThirdPartyAttachment) => void
 ) => {
   const { present, bottomSheet, dismiss } = useIOBottomSheetAutoresizableModal(
     {
       component: (
-        <MessageAttachments
+        <LegacyMessageAttachments
           testID="f24-list-container-bs"
           attachments={attachments}
           downloadAttachmentBeforePreview={true}
-          openPreview={(attachment: UIAttachment) => {
+          messageId={messageId}
+          openPreview={(attachment: ThirdPartyAttachment) => {
             dismiss();
             openPreview(attachment);
           }}
diff --git a/ts/features/pn/navigation/navigator.tsx b/ts/features/pn/navigation/navigator.tsx
index d837d801971..b3ca54af98c 100644
--- a/ts/features/pn/navigation/navigator.tsx
+++ b/ts/features/pn/navigation/navigator.tsx
@@ -1,12 +1,14 @@
-import * as React from "react";
 import { createStackNavigator } from "@react-navigation/stack";
+import * as React from "react";
+import { useIOSelector } from "../../../store/hooks";
+import { isDesignSystemEnabledSelector } from "../../../store/reducers/persistedPreferences";
 import { isGestureEnabled } from "../../../utils/navigation";
-import { MessageDetailsScreen } from "../screens/MessageDetailsScreen";
+import { LegacyAttachmentPreviewScreen } from "../screens/LegacyAttachmentPreviewScreen";
 import { LegacyMessageDetailsScreen } from "../screens/LegacyMessageDetailsScreen";
-import { AttachmentPreviewScreen } from "../screens/AttachmentPreviewScreen";
+import { MessageAttachmentScreen } from "../screens/MessageAttachmentScreen";
+import { MessageDetailsScreen } from "../screens/MessageDetailsScreen";
 import { PaidPaymentScreen } from "../screens/PaidPaymentScreen";
-import { useIOSelector } from "../../../store/hooks";
-import { isDesignSystemEnabledSelector } from "../../../store/reducers/persistedPreferences";
+import { LegacyPaidPaymentScreen } from "../screens/LegacyPaidPaymentScreen";
 import { PnParamsList } from "./params";
 import PN_ROUTES from "./routes";
 
@@ -18,8 +20,11 @@ export const PnStackNavigator = () => {
   return (
     <Stack.Navigator
       initialRouteName={PN_ROUTES.MESSAGE_DETAILS}
-      headerMode="screen"
-      screenOptions={{ gestureEnabled: isGestureEnabled }}
+      screenOptions={{
+        gestureEnabled: isGestureEnabled,
+        headerMode: "screen",
+        headerShown: isDesignSystemEnabled
+      }}
     >
       <Stack.Screen
         name={PN_ROUTES.MESSAGE_DETAILS}
@@ -28,23 +33,20 @@ export const PnStackNavigator = () => {
             ? MessageDetailsScreen
             : LegacyMessageDetailsScreen
         }
-        options={{
-          headerShown: isDesignSystemEnabled
-        }}
       />
       <Stack.Screen
         name={PN_ROUTES.MESSAGE_ATTACHMENT}
-        component={AttachmentPreviewScreen}
-        options={{
-          headerShown: false
-        }}
+        component={
+          isDesignSystemEnabled
+            ? MessageAttachmentScreen
+            : LegacyAttachmentPreviewScreen
+        }
       />
       <Stack.Screen
         name={PN_ROUTES.CANCELLED_MESSAGE_PAID_PAYMENT}
-        component={PaidPaymentScreen}
-        options={{
-          headerShown: false
-        }}
+        component={
+          isDesignSystemEnabled ? PaidPaymentScreen : LegacyPaidPaymentScreen
+        }
       />
     </Stack.Navigator>
   );
diff --git a/ts/features/pn/navigation/params.ts b/ts/features/pn/navigation/params.ts
index 02f0d6b39f0..a3c027d46d1 100644
--- a/ts/features/pn/navigation/params.ts
+++ b/ts/features/pn/navigation/params.ts
@@ -1,10 +1,10 @@
-import { AttachmentPreviewScreenNavigationParams } from "../screens/AttachmentPreviewScreen";
-import { MessageDetailsScreenNavigationParams } from "../screens/MessageDetailsScreen";
-import { PaidPaymentScreenNavigationParams } from "../screens/PaidPaymentScreen";
+import { MessageAttachmentScreenRouteParams } from "../screens/MessageAttachmentScreen";
+import { MessageDetailsScreenRouteParams } from "../screens/MessageDetailsScreen";
+import { PaidPaymentScreenRouteParams } from "../screens/PaidPaymentScreen";
 import PN_ROUTES from "./routes";
 
 export type PnParamsList = {
-  [PN_ROUTES.MESSAGE_DETAILS]: MessageDetailsScreenNavigationParams;
-  [PN_ROUTES.MESSAGE_ATTACHMENT]: AttachmentPreviewScreenNavigationParams;
-  [PN_ROUTES.CANCELLED_MESSAGE_PAID_PAYMENT]: PaidPaymentScreenNavigationParams;
+  [PN_ROUTES.MESSAGE_DETAILS]: MessageDetailsScreenRouteParams;
+  [PN_ROUTES.MESSAGE_ATTACHMENT]: MessageAttachmentScreenRouteParams;
+  [PN_ROUTES.CANCELLED_MESSAGE_PAID_PAYMENT]: PaidPaymentScreenRouteParams;
 };
diff --git a/ts/features/pn/screens/AttachmentPreviewScreen.tsx b/ts/features/pn/screens/LegacyAttachmentPreviewScreen.tsx
similarity index 68%
rename from ts/features/pn/screens/AttachmentPreviewScreen.tsx
rename to ts/features/pn/screens/LegacyAttachmentPreviewScreen.tsx
index e516603718a..98611b7ce96 100644
--- a/ts/features/pn/screens/AttachmentPreviewScreen.tsx
+++ b/ts/features/pn/screens/LegacyAttachmentPreviewScreen.tsx
@@ -3,7 +3,6 @@ import { pipe } from "fp-ts/lib/function";
 import * as B from "fp-ts/lib/boolean";
 import * as O from "fp-ts/lib/Option";
 import { PnParamsList } from "../navigation/params";
-import { UIMessageId, UIAttachmentId } from "../../messages/types";
 import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
 import { useIOSelector } from "../../../store/hooks";
 import { pnMessageAttachmentSelector } from "../store/reducers";
@@ -17,22 +16,16 @@ import {
 import { isIos } from "../../../utils/platform";
 import { LegacyMessageAttachmentPreview } from "../../messages/components/MessageAttachment/LegacyMessageAttachmentPreview";
 
-export type AttachmentPreviewScreenNavigationParams = Readonly<{
-  messageId: UIMessageId;
-  attachmentId: UIAttachmentId;
-  category?: string;
-}>;
-
-type AttachmentPreviewScreenProps = IOStackNavigationRouteProps<
+type LegacyAttachmentPreviewScreenProps = IOStackNavigationRouteProps<
   PnParamsList,
   "PN_ROUTES_MESSAGE_ATTACHMENT"
 >;
 
-export const AttachmentPreviewScreen = ({
+export const LegacyAttachmentPreviewScreen = ({
   navigation,
   route
-}: AttachmentPreviewScreenProps) => {
-  const { messageId, attachmentId, category } = route.params;
+}: LegacyAttachmentPreviewScreenProps) => {
+  const { messageId, attachmentId } = route.params;
   // This ref is needed otherwise the auto back on the useEffect will fire multiple
   // times, since its dependencies change during the back navigation
   const autoBackOnErrorHandled = useRef(false);
@@ -55,21 +48,37 @@ export const AttachmentPreviewScreen = ({
       messageId={messageId}
       enableDownloadAttachment={false}
       attachment={maybePnMessageAttachment.value}
-      onOpen={() => trackPNAttachmentOpen(category)}
+      onOpen={() =>
+        trackPNAttachmentOpen(maybePnMessageAttachment.value.category)
+      }
       onShare={() =>
         pipe(
           isIos,
           B.fold(
-            () => trackPNAttachmentShare(category),
-            () => trackPNAttachmentSaveShare(category)
+            () =>
+              trackPNAttachmentShare(maybePnMessageAttachment.value.category),
+            () =>
+              trackPNAttachmentSaveShare(
+                maybePnMessageAttachment.value.category
+              )
           )
         )
       }
-      onDownload={() => trackPNAttachmentSave(category)}
+      onDownload={() =>
+        trackPNAttachmentSave(maybePnMessageAttachment.value.category)
+      }
       onLoadComplete={() =>
-        trackPNAttachmentOpeningSuccess("displayer", category)
+        trackPNAttachmentOpeningSuccess(
+          "displayer",
+          maybePnMessageAttachment.value.category
+        )
+      }
+      onPDFError={() =>
+        trackPNAttachmentOpeningSuccess(
+          "error",
+          maybePnMessageAttachment.value.category
+        )
       }
-      onPDFError={() => trackPNAttachmentOpeningSuccess("error", category)}
     />
   ) : (
     <></>
diff --git a/ts/features/pn/screens/LegacyMessageDetailsScreen.tsx b/ts/features/pn/screens/LegacyMessageDetailsScreen.tsx
index 7d2ad7d08a2..8343d077bb3 100644
--- a/ts/features/pn/screens/LegacyMessageDetailsScreen.tsx
+++ b/ts/features/pn/screens/LegacyMessageDetailsScreen.tsx
@@ -4,19 +4,25 @@ import * as O from "fp-ts/lib/Option";
 import React from "react";
 import { SafeAreaView } from "react-native";
 import { useFocusEffect, useNavigation } from "@react-navigation/native";
-import { useStore } from "react-redux";
 import { IOStyles } from "../../../components/core/variables/IOStyles";
 import BaseScreenComponent from "../../../components/screens/BaseScreenComponent";
 import I18n from "../../../i18n";
 import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
-import { useIODispatch, useIOSelector } from "../../../store/hooks";
-import { serviceByIdSelector } from "../../../store/reducers/entities/services/servicesById";
+import { useIODispatch, useIOSelector, useIOStore } from "../../../store/hooks";
+import { serviceByIdPotSelector } from "../../services/store/reducers/servicesById";
 import { emptyContextualHelp } from "../../../utils/emptyContextualHelp";
 import { useOnFirstRender } from "../../../utils/hooks/useOnFirstRender";
 import { LegacyMessageDetails } from "../components/LegacyMessageDetails";
 import { PnParamsList } from "../navigation/params";
-import { pnMessageFromIdSelector } from "../store/reducers";
-import { cancelPreviousAttachmentDownload } from "../../messages/store/actions";
+import {
+  pnMessageFromIdSelector,
+  pnUserSelectedPaymentRptIdSelector
+} from "../store/reducers";
+import {
+  cancelPreviousAttachmentDownload,
+  cancelQueuedPaymentUpdates,
+  updatePaymentForMessage
+} from "../../messages/store/actions";
 import { profileFiscalCodeSelector } from "../../../store/reducers/profile";
 import {
   containsF24FromPNMessagePot,
@@ -27,13 +33,8 @@ import { trackPNUxSuccess } from "../analytics";
 import { isStrictSome } from "../../../utils/pot";
 import {
   cancelPaymentStatusTracking,
-  cancelQueuedPaymentUpdates,
-  clearSelectedPayment,
-  startPaymentStatusTracking,
-  updatePaymentForMessage
+  startPaymentStatusTracking
 } from "../store/actions";
-import { GlobalState } from "../../../store/reducers/types";
-import { selectedPaymentIdSelector } from "../store/reducers/payments";
 import { InfoScreenComponent } from "../../../components/infoScreen/InfoScreenComponent";
 import { renderInfoRasterImage } from "../../../components/infoScreen/imageRendering";
 import genericErrorIcon from "../../../../img/wallet/errors/generic-error-icon.png";
@@ -47,7 +48,7 @@ export const LegacyMessageDetailsScreen = (
   const navigation = useNavigation();
 
   const service = pot.toUndefined(
-    useIOSelector(state => serviceByIdSelector(state, serviceId))
+    useIOSelector(state => serviceByIdPotSelector(state, serviceId))
   );
 
   const currentFiscalCode = useIOSelector(profileFiscalCodeSelector);
@@ -80,21 +81,23 @@ export const LegacyMessageDetailsScreen = (
     }
   });
 
-  const store = useStore();
+  const store = useIOStore();
   useFocusEffect(
     React.useCallback(() => {
-      const globalState = store.getState() as GlobalState;
-      const selectedPaymentId = selectedPaymentIdSelector(globalState);
-      if (selectedPaymentId) {
-        dispatch(clearSelectedPayment());
+      const globalState = store.getState();
+      const paymentToCheckRptId = pnUserSelectedPaymentRptIdSelector(
+        globalState,
+        messagePot
+      );
+      if (paymentToCheckRptId) {
         dispatch(
           updatePaymentForMessage.request({
             messageId,
-            paymentId: selectedPaymentId
+            paymentId: paymentToCheckRptId
           })
         );
       }
-    }, [dispatch, messageId, store])
+    }, [dispatch, messageId, messagePot, store])
   );
 
   return (
diff --git a/ts/features/pn/screens/LegacyPaidPaymentScreen.tsx b/ts/features/pn/screens/LegacyPaidPaymentScreen.tsx
new file mode 100644
index 00000000000..0a77d85d876
--- /dev/null
+++ b/ts/features/pn/screens/LegacyPaidPaymentScreen.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import { SafeAreaView, ScrollView } from "react-native";
+import { ListItemInfoCopy } from "@pagopa/io-app-design-system";
+import * as O from "fp-ts/lib/Option";
+import I18n from "../../../i18n";
+import { IOStyles } from "../../../components/core/variables/IOStyles";
+import BaseScreenComponent from "../../../components/screens/BaseScreenComponent";
+import { TransactionSummaryStatus } from "../../../screens/wallet/payment/components/TransactionSummaryStatus";
+import { clipboardSetStringWithFeedback } from "../../../utils/clipboard";
+import { emptyContextualHelp } from "../../../utils/emptyContextualHelp";
+import { TransactionSummaryError } from "../../../screens/wallet/payment/TransactionSummaryScreen";
+import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
+import { PnParamsList } from "../navigation/params";
+
+type LegacyPaidPaymentScreenProps = IOStackNavigationRouteProps<
+  PnParamsList,
+  "PN_CANCELLED_MESSAGE_PAID_PAYMENT"
+>;
+
+const paidPaymentError = O.some(
+  "PPT_PAGAMENTO_DUPLICATO"
+) as TransactionSummaryError;
+
+export const LegacyPaidPaymentScreen = ({
+  route
+}: LegacyPaidPaymentScreenProps) => {
+  const { noticeCode, creditorTaxId } = route.params;
+  const formattedPaymentNoticeNumber = noticeCode
+    .replace(/(\d{4})/g, "$1  ")
+    .trim();
+
+  return (
+    <BaseScreenComponent
+      goBack={true}
+      headerTitle={I18n.t("wallet.ConfirmPayment.paymentInformations")}
+      contextualHelp={emptyContextualHelp}
+    >
+      <SafeAreaView style={IOStyles.flex}>
+        <TransactionSummaryStatus error={paidPaymentError} />
+        <ScrollView style={IOStyles.horizontalContentPadding}>
+          <ListItemInfoCopy
+            label={I18n.t("payment.noticeCode")}
+            accessibilityLabel={I18n.t("payment.noticeCode")}
+            value={formattedPaymentNoticeNumber}
+            onPress={() => clipboardSetStringWithFeedback(noticeCode)}
+          />
+          {creditorTaxId && (
+            <ListItemInfoCopy
+              label={I18n.t("wallet.firstTransactionSummary.entityCode")}
+              accessibilityLabel={I18n.t(
+                "wallet.firstTransactionSummary.entityCode"
+              )}
+              value={creditorTaxId}
+              onPress={() => clipboardSetStringWithFeedback(creditorTaxId)}
+            />
+          )}
+        </ScrollView>
+      </SafeAreaView>
+    </BaseScreenComponent>
+  );
+};
diff --git a/ts/features/pn/screens/MessageAttachmentScreen.tsx b/ts/features/pn/screens/MessageAttachmentScreen.tsx
new file mode 100644
index 00000000000..7e1e4ce10b1
--- /dev/null
+++ b/ts/features/pn/screens/MessageAttachmentScreen.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { UIMessageId } from "../../messages/types";
+import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
+import { PnParamsList } from "../navigation/params";
+import { MessageAttachment } from "../../messages/components/MessageAttachment/MessageAttachment";
+import { useHeaderSecondLevel } from "../../../hooks/useHeaderSecondLevel";
+
+export type MessageAttachmentScreenRouteParams = Readonly<{
+  messageId: UIMessageId;
+  attachmentId: string;
+}>;
+
+type MessageAttachmentScreenProps = IOStackNavigationRouteProps<
+  PnParamsList,
+  "PN_ROUTES_MESSAGE_ATTACHMENT"
+>;
+
+export const MessageAttachmentScreen = (
+  props: MessageAttachmentScreenProps
+) => {
+  const { attachmentId, messageId } = props.route.params;
+
+  useHeaderSecondLevel({
+    title: "",
+    supportRequest: true
+  });
+
+  return (
+    <MessageAttachment
+      attachmentId={attachmentId}
+      isPN={true}
+      messageId={messageId}
+    />
+  );
+};
diff --git a/ts/features/pn/screens/MessageDetailsScreen.tsx b/ts/features/pn/screens/MessageDetailsScreen.tsx
index dc68816b0b1..419fb72b572 100644
--- a/ts/features/pn/screens/MessageDetailsScreen.tsx
+++ b/ts/features/pn/screens/MessageDetailsScreen.tsx
@@ -5,20 +5,25 @@ import {
   useNavigation,
   useRoute
 } from "@react-navigation/native";
-import { useStore } from "react-redux";
 import * as pot from "@pagopa/ts-commons/lib/pot";
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import { ServiceId } from "../../../../definitions/backend/ServiceId";
 import I18n from "../../../i18n";
-import { useIODispatch, useIOSelector } from "../../../store/hooks";
+import { useIODispatch, useIOSelector, useIOStore } from "../../../store/hooks";
 import { UIMessageId } from "../../messages/types";
-import { serviceByIdSelector } from "../../../store/reducers/entities/services/servicesById";
 import { useOnFirstRender } from "../../../utils/hooks/useOnFirstRender";
 import { MessageDetails } from "../components/MessageDetails";
 import { PnParamsList } from "../navigation/params";
-import { pnMessageFromIdSelector } from "../store/reducers";
-import { cancelPreviousAttachmentDownload } from "../../messages/store/actions";
+import {
+  pnMessageFromIdSelector,
+  pnUserSelectedPaymentRptIdSelector
+} from "../store/reducers";
+import {
+  cancelPreviousAttachmentDownload,
+  cancelQueuedPaymentUpdates,
+  updatePaymentForMessage
+} from "../../messages/store/actions";
 import { profileFiscalCodeSelector } from "../../../store/reducers/profile";
 import {
   containsF24FromPNMessagePot,
@@ -29,17 +34,12 @@ import { trackPNUxSuccess } from "../analytics";
 import { isStrictSome } from "../../../utils/pot";
 import {
   cancelPaymentStatusTracking,
-  cancelQueuedPaymentUpdates,
-  clearSelectedPayment,
-  startPaymentStatusTracking,
-  updatePaymentForMessage
+  startPaymentStatusTracking
 } from "../store/actions";
-import { GlobalState } from "../../../store/reducers/types";
-import { selectedPaymentIdSelector } from "../store/reducers/payments";
 import { useHeaderSecondLevel } from "../../../hooks/useHeaderSecondLevel";
 import { OperationResultScreenContent } from "../../../components/screens/OperationResultScreenContent";
 
-export type MessageDetailsScreenNavigationParams = {
+export type MessageDetailsScreenRouteParams = {
   messageId: UIMessageId;
   serviceId: ServiceId;
   firstTimeOpening: boolean;
@@ -57,9 +57,6 @@ export const MessageDetailsScreen = () => {
 
   const { messageId, serviceId, firstTimeOpening } = route.params;
 
-  const service = pot.toUndefined(
-    useIOSelector(state => serviceByIdSelector(state, serviceId))
-  );
   const currentFiscalCode = useIOSelector(profileFiscalCodeSelector);
   const messagePot = useIOSelector(state =>
     pnMessageFromIdSelector(state, messageId)
@@ -96,21 +93,23 @@ export const MessageDetailsScreen = () => {
     }
   });
 
-  const store = useStore();
+  const store = useIOStore();
   useFocusEffect(
     useCallback(() => {
-      const globalState = store.getState() as GlobalState;
-      const selectedPaymentId = selectedPaymentIdSelector(globalState);
-      if (selectedPaymentId) {
-        dispatch(clearSelectedPayment());
+      const globalState = store.getState();
+      const paymentToCheckRptId = pnUserSelectedPaymentRptIdSelector(
+        globalState,
+        messagePot
+      );
+      if (paymentToCheckRptId) {
         dispatch(
           updatePaymentForMessage.request({
             messageId,
-            paymentId: selectedPaymentId
+            paymentId: paymentToCheckRptId
           })
         );
       }
-    }, [dispatch, messageId, store])
+    }, [dispatch, messageId, messagePot, store])
   );
 
   return (
@@ -129,9 +128,9 @@ export const MessageDetailsScreen = () => {
           ),
           message => (
             <MessageDetails
-              messageId={messageId}
               message={message}
-              service={service}
+              messageId={messageId}
+              serviceId={serviceId}
               payments={payments}
             />
           )
diff --git a/ts/features/pn/screens/PaidPaymentScreen.tsx b/ts/features/pn/screens/PaidPaymentScreen.tsx
index e65c6afbcbc..a23e5ae4d6f 100644
--- a/ts/features/pn/screens/PaidPaymentScreen.tsx
+++ b/ts/features/pn/screens/PaidPaymentScreen.tsx
@@ -1,71 +1,38 @@
 import React from "react";
-import * as O from "fp-ts/lib/Option";
-import I18n from "i18n-js";
-import { SafeAreaView, ScrollView, StyleSheet } from "react-native";
-import { ListItemInfoCopy } from "@pagopa/io-app-design-system";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
-import BaseScreenComponent from "../../../components/screens/BaseScreenComponent";
-import { TransactionSummaryStatus } from "../../../screens/wallet/payment/components/TransactionSummaryStatus";
-import { clipboardSetStringWithFeedback } from "../../../utils/clipboard";
-import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
 import { PnParamsList } from "../navigation/params";
-import customVariables from "../../../theme/variables";
-import { emptyContextualHelp } from "../../../utils/emptyContextualHelp";
-import { TransactionSummaryError } from "../../../screens/wallet/payment/TransactionSummaryScreen";
+import {
+  IOStackNavigationRouteProps,
+  useIONavigation
+} from "../../../navigation/params/AppParamsList";
+import { useHeaderSecondLevel } from "../../../hooks/useHeaderSecondLevel";
+import { OperationResultScreenContent } from "../../../components/screens/OperationResultScreenContent";
+import I18n from "../../../i18n";
 
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: customVariables.contentPadding
-  }
-});
-
-export type PaidPaymentScreenNavigationParams = Readonly<{
+export type PaidPaymentScreenRouteParams = {
   noticeCode: string;
   creditorTaxId?: string;
-}>;
-
-const paidPaymentError = O.some(
-  "PPT_PAGAMENTO_DUPLICATO"
-) as TransactionSummaryError;
+};
 
-export const PaidPaymentScreen = (
-  props: IOStackNavigationRouteProps<
-    PnParamsList,
-    "PN_CANCELLED_MESSAGE_PAID_PAYMENT"
-  >
-): React.ReactElement => {
-  const { noticeCode, creditorTaxId: maybeCreditorTaxId } = props.route.params;
-  const formattedPaymentNoticeNumber = noticeCode
-    .replace(/(\d{4})/g, "$1  ")
-    .trim();
+type PaidPaymentScreenProps = IOStackNavigationRouteProps<
+  PnParamsList,
+  "PN_CANCELLED_MESSAGE_PAID_PAYMENT"
+>;
 
+export const PaidPaymentScreen = (_: PaidPaymentScreenProps) => {
+  const navigation = useIONavigation();
+  useHeaderSecondLevel({
+    title: "",
+    supportRequest: true
+  });
   return (
-    <BaseScreenComponent
-      goBack={true}
-      headerTitle={I18n.t("wallet.ConfirmPayment.paymentInformations")}
-      contextualHelp={emptyContextualHelp}
-    >
-      <SafeAreaView style={IOStyles.flex}>
-        <TransactionSummaryStatus error={paidPaymentError} />
-        <ScrollView style={styles.container}>
-          <ListItemInfoCopy
-            label={I18n.t("payment.noticeCode")}
-            accessibilityLabel={I18n.t("payment.noticeCode")}
-            value={formattedPaymentNoticeNumber}
-            onPress={() => clipboardSetStringWithFeedback(noticeCode)}
-          />
-          {maybeCreditorTaxId && (
-            <ListItemInfoCopy
-              label={I18n.t("wallet.firstTransactionSummary.entityCode")}
-              accessibilityLabel={I18n.t(
-                "wallet.firstTransactionSummary.entityCode"
-              )}
-              value={maybeCreditorTaxId}
-              onPress={() => clipboardSetStringWithFeedback(maybeCreditorTaxId)}
-            />
-          )}
-        </ScrollView>
-      </SafeAreaView>
-    </BaseScreenComponent>
+    <OperationResultScreenContent
+      title={I18n.t("wallet.payment.failure.PAYMENT_DUPLICATED.title")}
+      pictogram={"moneyCheck"}
+      action={{
+        label: I18n.t("global.buttons.close"),
+        accessibilityLabel: I18n.t("global.buttons.close"),
+        onPress: () => navigation.pop()
+      }}
+    />
   );
 };
diff --git a/ts/features/pn/screens/__test__/LegacyPaidPaymentScreen.test.tsx b/ts/features/pn/screens/__test__/LegacyPaidPaymentScreen.test.tsx
new file mode 100644
index 00000000000..0d16f445ecd
--- /dev/null
+++ b/ts/features/pn/screens/__test__/LegacyPaidPaymentScreen.test.tsx
@@ -0,0 +1,39 @@
+import { cleanup } from "@testing-library/react-native";
+import configureMockStore from "redux-mock-store";
+import { LegacyPaidPaymentScreen } from "../LegacyPaidPaymentScreen";
+import PN_ROUTES from "../../navigation/routes";
+import { GlobalState } from "../../../../store/reducers/types";
+import { applicationChangeState } from "../../../../store/actions/application";
+import { appReducer } from "../../../../store/reducers";
+import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
+
+describe("LegacyPaidPaymentScreen", () => {
+  // Needed to avoid `ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.`
+  afterEach(cleanup);
+  it("should render with back button, title, help button, paid banner, notice code and creditor tax id", () => {
+    const component = generateComponent(
+      generateNoticeCode(),
+      generateCreditorTaxId()
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should render with back button, title, help button, paid banner and notice code but no creditor tax id", () => {
+    const component = generateComponent(generateNoticeCode());
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const generateNoticeCode = () => "018011988086479497";
+const generateCreditorTaxId = () => "00000000009";
+
+const generateComponent = (noticeCode: string, creditorTaxId?: string) => {
+  const globalState = appReducer(undefined, applicationChangeState("active"));
+  const store = configureMockStore<GlobalState>()(globalState);
+
+  return renderScreenWithNavigationStoreContext<GlobalState>(
+    LegacyPaidPaymentScreen,
+    PN_ROUTES.CANCELLED_MESSAGE_PAID_PAYMENT,
+    { noticeCode, creditorTaxId },
+    store
+  );
+};
diff --git a/ts/features/pn/screens/__test__/PaidPaymentScreen.test.tsx b/ts/features/pn/screens/__test__/PaidPaymentScreen.test.tsx
index 89eabe93e55..064f5efd260 100644
--- a/ts/features/pn/screens/__test__/PaidPaymentScreen.test.tsx
+++ b/ts/features/pn/screens/__test__/PaidPaymentScreen.test.tsx
@@ -1,54 +1,31 @@
-import * as React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
-import renderer from "react-test-renderer";
-import { cleanup } from "@testing-library/react-native";
-import { NavigationContainer } from "@react-navigation/native";
-import configureMockStore from "redux-mock-store";
-import { Provider } from "react-redux";
-import { PaidPaymentScreen } from "../PaidPaymentScreen";
+import { createStore } from "redux";
+import { appReducer } from "../../../../store/reducers";
+import { applicationChangeState } from "../../../../store/actions/application";
+import { preferencesDesignSystemSetEnabled } from "../../../../store/actions/persistedPreferences";
+import { renderScreenWithNavigationStoreContext } from "../../../../utils/testWrapper";
 import PN_ROUTES from "../../navigation/routes";
+import { PaidPaymentScreen } from "../PaidPaymentScreen";
 import { GlobalState } from "../../../../store/reducers/types";
-import { applicationChangeState } from "../../../../store/actions/application";
-import { appReducer } from "../../../../store/reducers";
 
 describe("PaidPaymentScreen", () => {
-  // Needed to avoid `ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.`
-  afterEach(cleanup);
-  it("should render with back button, title, help button, paid banner, notice code and creditor tax id", () => {
-    const tree = renderer
-      .create(generateComponent(generateNoticeCode(), generateCreditorTaxId()))
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-  it("should render with back button, title, help button, paid banner and notice code but no creditor tax id", () => {
-    const tree = renderer
-      .create(generateComponent(generateNoticeCode()))
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+  it("should match snapshot", () => {
+    const screen = renderScreen();
+    expect(screen.toJSON()).toMatchSnapshot();
   });
 });
 
-const generateNoticeCode = () => "018011988086479497";
-const generateCreditorTaxId = () => "00000000009";
+const renderScreen = () => {
+  const initialState = appReducer(undefined, applicationChangeState("active"));
+  const designSystemState = appReducer(
+    initialState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+  const store = createStore(appReducer, designSystemState as any);
 
-const generateComponent = (noticeCode: string, creditorTaxId?: string) => {
-  const globalState = appReducer(undefined, applicationChangeState("active"));
-  const store = configureMockStore<GlobalState>()(globalState);
-  const Stack = createStackNavigator();
-  return (
-    <Provider store={store}>
-      <NavigationContainer>
-        <Stack.Navigator>
-          <Stack.Screen
-            name={PN_ROUTES.CANCELLED_MESSAGE_PAID_PAYMENT}
-            component={PaidPaymentScreen}
-            initialParams={{
-              noticeCode,
-              creditorTaxId
-            }}
-          />
-        </Stack.Navigator>
-      </NavigationContainer>
-    </Provider>
+  return renderScreenWithNavigationStoreContext<GlobalState>(
+    PaidPaymentScreen,
+    PN_ROUTES.CANCELLED_MESSAGE_PAID_PAYMENT,
+    { noticeCode: "012345678912345670", creditorTaxId: "01234567890" },
+    store
   );
 };
diff --git a/ts/features/pn/screens/__test__/__snapshots__/LegacyPaidPaymentScreen.test.tsx.snap b/ts/features/pn/screens/__test__/__snapshots__/LegacyPaidPaymentScreen.test.tsx.snap
new file mode 100644
index 00000000000..3042d1789d4
--- /dev/null
+++ b/ts/features/pn/screens/__test__/__snapshots__/LegacyPaidPaymentScreen.test.tsx.snap
@@ -0,0 +1,2266 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LegacyPaidPaymentScreen should render with back button, title, help button, paid banner and notice code but no creditor tax id 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  PN_CANCELLED_MESSAGE_PAID_PAYMENT
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={2}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "backgroundColor": "#fff",
+                            "flex": 1,
+                            "height": 1334,
+                          }
+                        }
+                      >
+                        <View>
+                          <View>
+                            <RCTSafeAreaView
+                              style={
+                                Object {
+                                  "backgroundColor": "#F8F8F8",
+                                }
+                              }
+                            >
+                              <View
+                                androidStatusBarColor="#FFFFFF"
+                                iosBarStyle="dark-content"
+                                noShadow={false}
+                                style={
+                                  Object {
+                                    "backgroundColor": "#F8F8F8",
+                                    "borderBottomColor": "#a7a6ab",
+                                    "borderBottomWidth": 0.5,
+                                    "elevation": 3,
+                                    "flexDirection": "row",
+                                    "height": 64,
+                                    "justifyContent": "center",
+                                    "left": 0,
+                                    "paddingLeft": 6,
+                                    "paddingRight": 10,
+                                    "right": 0,
+                                    "shadowColor": undefined,
+                                    "shadowOffset": undefined,
+                                    "shadowOpacity": undefined,
+                                    "shadowRadius": undefined,
+                                    "top": 0,
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
+                                    Object {
+                                      "alignItems": "flex-start",
+                                      "alignSelf": "center",
+                                      "flex": 1,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    accessibilityLabel="Back"
+                                    accessibilityRole="button"
+                                    accessibilityState={
+                                      Object {
+                                        "disabled": false,
+                                      }
+                                    }
+                                    accessible={true}
+                                    collapsable={false}
+                                    focusable={true}
+                                    hitSlop={8}
+                                    onBlur={[Function]}
+                                    onClick={[Function]}
+                                    onFocus={[Function]}
+                                    onResponderGrant={[Function]}
+                                    onResponderMove={[Function]}
+                                    onResponderRelease={[Function]}
+                                    onResponderTerminate={[Function]}
+                                    onResponderTerminationRequest={[Function]}
+                                    onStartShouldSetResponder={[Function]}
+                                    testID="back-button"
+                                  >
+                                    <View
+                                      style={
+                                        Array [
+                                          Object {
+                                            "height": 24,
+                                            "width": 24,
+                                          },
+                                          Object {
+                                            "alignItems": "center",
+                                          },
+                                          Object {
+                                            "justifyContent": "center",
+                                          },
+                                          Object {
+                                            "transform": Array [
+                                              Object {
+                                                "scale": undefined,
+                                              },
+                                            ],
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        animatedProps={
+                                          Object {
+                                            "color": undefined,
+                                          }
+                                        }
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0E0F13",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0E0F13"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
+                                          }
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
+                                  </View>
+                                </View>
+                                <View
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignItems": "center",
+                                        "alignSelf": "center",
+                                        "flex": 1,
+                                      },
+                                      Object {
+                                        "alignItems": "center",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <View
+                                    accessible={true}
+                                  >
+                                    <Text
+                                      accessibilityRole="header"
+                                      accessible={true}
+                                      color="bluegrey"
+                                      defaultColor="bluegrey"
+                                      defaultWeight="Regular"
+                                      font="TitilliumWeb"
+                                      fontStyle={
+                                        Object {
+                                          "fontSize": 16,
+                                          "lineHeight": 24,
+                                        }
+                                      }
+                                      numberOfLines={1}
+                                      style={
+                                        Array [
+                                          Object {
+                                            "fontSize": 16,
+                                            "lineHeight": 24,
+                                          },
+                                          Object {
+                                            "color": "#475A6D",
+                                            "fontFamily": "Titillium Web",
+                                            "fontStyle": "normal",
+                                            "fontWeight": "400",
+                                          },
+                                        ]
+                                      }
+                                      testID="bodyLabel"
+                                      weight="Regular"
+                                    >
+                                      Payment informations
+                                    </Text>
+                                  </View>
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "alignItems": "flex-end",
+                                      "alignSelf": "center",
+                                      "flex": 1,
+                                      "flexDirection": "row",
+                                      "justifyContent": "flex-end",
+                                    }
+                                  }
+                                >
+                                  <View
+                                    accessibilityRole="button"
+                                    accessibilityState={
+                                      Object {
+                                        "disabled": undefined,
+                                      }
+                                    }
+                                    accessible={true}
+                                    collapsable={false}
+                                    focusable={false}
+                                    forwardedRef={[Function]}
+                                    hitSlop={
+                                      Object {
+                                        "bottom": 4,
+                                        "top": 4,
+                                      }
+                                    }
+                                    onClick={[Function]}
+                                    onResponderGrant={[Function]}
+                                    onResponderMove={[Function]}
+                                    onResponderRelease={[Function]}
+                                    onResponderTerminate={[Function]}
+                                    onResponderTerminationRequest={[Function]}
+                                    onStartShouldSetResponder={[Function]}
+                                    style={
+                                      Object {
+                                        "alignItems": "center",
+                                        "alignSelf": null,
+                                        "backgroundColor": "transparent",
+                                        "borderBottomWidth": null,
+                                        "borderColor": null,
+                                        "borderLeftWidth": null,
+                                        "borderRadius": 50,
+                                        "borderRightWidth": null,
+                                        "borderTopWidth": null,
+                                        "borderWidth": undefined,
+                                        "elevation": 0,
+                                        "flexDirection": "row",
+                                        "height": 45,
+                                        "justifyContent": "space-between",
+                                        "marginRight": -9,
+                                        "opacity": 1,
+                                        "paddingBottom": 6,
+                                        "paddingLeft": 15,
+                                        "paddingRight": 15,
+                                        "paddingTop": 6,
+                                        "shadowColor": null,
+                                        "shadowOffset": null,
+                                        "shadowOpacity": null,
+                                        "shadowRadius": null,
+                                      }
+                                    }
+                                  />
+                                </View>
+                              </View>
+                            </RCTSafeAreaView>
+                          </View>
+                        </View>
+                        <RCTSafeAreaView
+                          style={
+                            Object {
+                              "flex": 1,
+                            }
+                          }
+                        >
+                          <View
+                            accessibilityRole="alert"
+                            accessible={true}
+                            style={
+                              Array [
+                                Object {
+                                  "alignContent": "center",
+                                  "alignItems": "flex-start",
+                                  "flexDirection": "row",
+                                  "paddingBottom": 8,
+                                  "paddingLeft": 24,
+                                  "paddingRight": 24,
+                                  "paddingTop": 8,
+                                  "width": "100%",
+                                },
+                                Object {
+                                  "backgroundColor": "#00C5CA",
+                                },
+                              ]
+                            }
+                            testID="SectionStatusContent"
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "alignSelf": "center",
+                                }
+                              }
+                            >
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#17324D",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#17324D"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    d="M17.752 8.22a1.083 1.083 0 0 0-1.531.028l-5.974 6.192-2.468-2.558-.093-.086a1.083 1.083 0 0 0-1.465 1.589l3.248 3.367.095.087c.43.352 1.068.322 1.463-.087l6.752-7 .083-.096c.328-.431.29-1.05-.11-1.435Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M17.752 8.22a1.083 1.083 0 0 0-1.531.028l-5.974 6.192-2.468-2.558-.093-.086a1.083 1.083 0 0 0-1.465 1.589l3.248 3.367.095.087c.43.352 1.068.322 1.463-.087l6.752-7 .083-.096c.328-.431.29-1.05-.11-1.435Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                            <Text
+                              color="bluegreyDark"
+                              defaultColor="blue"
+                              defaultWeight="Bold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 16,
+                                }
+                              }
+                              style={
+                                Array [
+                                  Array [
+                                    Object {
+                                      "flex": 1,
+                                      "marginLeft": 16,
+                                    },
+                                    Object {
+                                      "paddingVertical": 14,
+                                    },
+                                  ],
+                                  Object {
+                                    "fontSize": 16,
+                                  },
+                                  Object {
+                                    "color": "#17324D",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "400",
+                                  },
+                                ]
+                              }
+                              weight="Regular"
+                            >
+                              <Text
+                                color="bluegreyDark"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#17324D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                This notice has been already paid!
+                              </Text>
+                            </Text>
+                          </View>
+                          <RCTScrollView
+                            style={
+                              Object {
+                                "paddingHorizontal": 24,
+                              }
+                            }
+                          >
+                            <View>
+                              <View
+                                accessibilityLabel="Notice code"
+                                accessibilityRole="button"
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                              >
+                                <View
+                                  importantForAccessibility="no-hide-descendants"
+                                  style={
+                                    Array [
+                                      Object {
+                                        "marginHorizontal": -24,
+                                        "paddingHorizontal": 24,
+                                        "paddingVertical": 12,
+                                      },
+                                      Object {
+                                        "backgroundColor": undefined,
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "flexDirection": "row",
+                                          "justifyContent": "space-between",
+                                        },
+                                        Object {
+                                          "transform": Array [
+                                            Object {
+                                              "scale": undefined,
+                                            },
+                                          ],
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        Object {
+                                          "flex": 1,
+                                        }
+                                      }
+                                    >
+                                      <Text
+                                        allowFontScaling={false}
+                                        color="grey-700"
+                                        defaultColor="blue"
+                                        defaultWeight="Bold"
+                                        font="TitilliumWeb"
+                                        fontStyle={
+                                          Object {
+                                            "fontSize": 14,
+                                            "lineHeight": 21,
+                                          }
+                                        }
+                                        style={
+                                          Array [
+                                            Object {
+                                              "fontSize": 14,
+                                              "lineHeight": 21,
+                                            },
+                                            Object {
+                                              "color": "#555C70",
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "400",
+                                            },
+                                          ]
+                                        }
+                                        weight="Regular"
+                                      >
+                                        Notice code
+                                      </Text>
+                                      <Text
+                                        allowFontScaling={false}
+                                        color="blue"
+                                        defaultColor="black"
+                                        defaultWeight="SemiBold"
+                                        font="TitilliumWeb"
+                                        fontStyle={
+                                          Object {
+                                            "fontSize": 18,
+                                            "lineHeight": 25,
+                                          }
+                                        }
+                                        numberOfLines={2}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "fontSize": 18,
+                                              "lineHeight": 25,
+                                            },
+                                            Object {
+                                              "color": "#0073E6",
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                            },
+                                          ]
+                                        }
+                                        weight="SemiBold"
+                                      >
+                                        0180  1198  8086  4794  97
+                                      </Text>
+                                    </View>
+                                    <View
+                                      style={
+                                        Object {
+                                          "marginLeft": 16,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0073E6",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0073E6"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
+                                          }
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M12 18h8a2 2 0 0 0 2-2V9h-4a3 3 0 0 1-3-3V2h-3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Zm9.332-11.987a2 2 0 0 1 .603.987H18a1 1 0 0 1-1-1V2.227a2 2 0 0 1 .406.281l3.926 3.505ZM14 20h-2a4 4 0 0 1-4-4V6H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2Zm2 0h4a4 4 0 0 0 4-4V7.505a4 4 0 0 0-1.336-2.984l-3.926-3.505A4 4 0 0 0 16.074 0H12a4 4 0 0 0-4 4H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                          </RCTScrollView>
+                        </RCTSafeAreaView>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
+
+exports[`LegacyPaidPaymentScreen should render with back button, title, help button, paid banner, notice code and creditor tax id 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <RNCSafeAreaProvider
+    onInsetsChange={[Function]}
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
+          pointerEvents="box-none"
+          style={null}
+        >
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
+              }
+            />
+          </View>
+          <View
+            collapsable={false}
+            pointerEvents="box-none"
+            style={
+              Object {
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
+              }
+            }
+          >
+            <View
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  PN_CANCELLED_MESSAGE_PAID_PAYMENT
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <RNSScreenContainer
+        onLayout={[Function]}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <RNSModalScreen
+          activityState={2}
+          collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
+          pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
+            pointerEvents="box-none"
+            style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              pointerEvents="box-none"
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
+                style={
+                  Object {
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
+                      },
+                    ],
+                  }
+                }
+              >
+                <View
+                  pointerEvents="box-none"
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <View
+                        style={
+                          Object {
+                            "backgroundColor": "#fff",
+                            "flex": 1,
+                            "height": 1334,
+                          }
+                        }
+                      >
+                        <View>
+                          <View>
+                            <RCTSafeAreaView
+                              style={
+                                Object {
+                                  "backgroundColor": "#F8F8F8",
+                                }
+                              }
+                            >
+                              <View
+                                androidStatusBarColor="#FFFFFF"
+                                iosBarStyle="dark-content"
+                                noShadow={false}
+                                style={
+                                  Object {
+                                    "backgroundColor": "#F8F8F8",
+                                    "borderBottomColor": "#a7a6ab",
+                                    "borderBottomWidth": 0.5,
+                                    "elevation": 3,
+                                    "flexDirection": "row",
+                                    "height": 64,
+                                    "justifyContent": "center",
+                                    "left": 0,
+                                    "paddingLeft": 6,
+                                    "paddingRight": 10,
+                                    "right": 0,
+                                    "shadowColor": undefined,
+                                    "shadowOffset": undefined,
+                                    "shadowOpacity": undefined,
+                                    "shadowRadius": undefined,
+                                    "top": 0,
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
+                                    Object {
+                                      "alignItems": "flex-start",
+                                      "alignSelf": "center",
+                                      "flex": 1,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    accessibilityLabel="Back"
+                                    accessibilityRole="button"
+                                    accessibilityState={
+                                      Object {
+                                        "disabled": false,
+                                      }
+                                    }
+                                    accessible={true}
+                                    collapsable={false}
+                                    focusable={true}
+                                    hitSlop={8}
+                                    onBlur={[Function]}
+                                    onClick={[Function]}
+                                    onFocus={[Function]}
+                                    onResponderGrant={[Function]}
+                                    onResponderMove={[Function]}
+                                    onResponderRelease={[Function]}
+                                    onResponderTerminate={[Function]}
+                                    onResponderTerminationRequest={[Function]}
+                                    onStartShouldSetResponder={[Function]}
+                                    testID="back-button"
+                                  >
+                                    <View
+                                      style={
+                                        Array [
+                                          Object {
+                                            "height": 24,
+                                            "width": 24,
+                                          },
+                                          Object {
+                                            "alignItems": "center",
+                                          },
+                                          Object {
+                                            "justifyContent": "center",
+                                          },
+                                          Object {
+                                            "transform": Array [
+                                              Object {
+                                                "scale": undefined,
+                                              },
+                                            ],
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        animatedProps={
+                                          Object {
+                                            "color": undefined,
+                                          }
+                                        }
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0E0F13",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0E0F13"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
+                                          }
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
+                                  </View>
+                                </View>
+                                <View
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignItems": "center",
+                                        "alignSelf": "center",
+                                        "flex": 1,
+                                      },
+                                      Object {
+                                        "alignItems": "center",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <View
+                                    accessible={true}
+                                  >
+                                    <Text
+                                      accessibilityRole="header"
+                                      accessible={true}
+                                      color="bluegrey"
+                                      defaultColor="bluegrey"
+                                      defaultWeight="Regular"
+                                      font="TitilliumWeb"
+                                      fontStyle={
+                                        Object {
+                                          "fontSize": 16,
+                                          "lineHeight": 24,
+                                        }
+                                      }
+                                      numberOfLines={1}
+                                      style={
+                                        Array [
+                                          Object {
+                                            "fontSize": 16,
+                                            "lineHeight": 24,
+                                          },
+                                          Object {
+                                            "color": "#475A6D",
+                                            "fontFamily": "Titillium Web",
+                                            "fontStyle": "normal",
+                                            "fontWeight": "400",
+                                          },
+                                        ]
+                                      }
+                                      testID="bodyLabel"
+                                      weight="Regular"
+                                    >
+                                      Payment informations
+                                    </Text>
+                                  </View>
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "alignItems": "flex-end",
+                                      "alignSelf": "center",
+                                      "flex": 1,
+                                      "flexDirection": "row",
+                                      "justifyContent": "flex-end",
+                                    }
+                                  }
+                                >
+                                  <View
+                                    accessibilityRole="button"
+                                    accessibilityState={
+                                      Object {
+                                        "disabled": undefined,
+                                      }
+                                    }
+                                    accessible={true}
+                                    collapsable={false}
+                                    focusable={false}
+                                    forwardedRef={[Function]}
+                                    hitSlop={
+                                      Object {
+                                        "bottom": 4,
+                                        "top": 4,
+                                      }
+                                    }
+                                    onClick={[Function]}
+                                    onResponderGrant={[Function]}
+                                    onResponderMove={[Function]}
+                                    onResponderRelease={[Function]}
+                                    onResponderTerminate={[Function]}
+                                    onResponderTerminationRequest={[Function]}
+                                    onStartShouldSetResponder={[Function]}
+                                    style={
+                                      Object {
+                                        "alignItems": "center",
+                                        "alignSelf": null,
+                                        "backgroundColor": "transparent",
+                                        "borderBottomWidth": null,
+                                        "borderColor": null,
+                                        "borderLeftWidth": null,
+                                        "borderRadius": 50,
+                                        "borderRightWidth": null,
+                                        "borderTopWidth": null,
+                                        "borderWidth": undefined,
+                                        "elevation": 0,
+                                        "flexDirection": "row",
+                                        "height": 45,
+                                        "justifyContent": "space-between",
+                                        "marginRight": -9,
+                                        "opacity": 1,
+                                        "paddingBottom": 6,
+                                        "paddingLeft": 15,
+                                        "paddingRight": 15,
+                                        "paddingTop": 6,
+                                        "shadowColor": null,
+                                        "shadowOffset": null,
+                                        "shadowOpacity": null,
+                                        "shadowRadius": null,
+                                      }
+                                    }
+                                  />
+                                </View>
+                              </View>
+                            </RCTSafeAreaView>
+                          </View>
+                        </View>
+                        <RCTSafeAreaView
+                          style={
+                            Object {
+                              "flex": 1,
+                            }
+                          }
+                        >
+                          <View
+                            accessibilityRole="alert"
+                            accessible={true}
+                            style={
+                              Array [
+                                Object {
+                                  "alignContent": "center",
+                                  "alignItems": "flex-start",
+                                  "flexDirection": "row",
+                                  "paddingBottom": 8,
+                                  "paddingLeft": 24,
+                                  "paddingRight": 24,
+                                  "paddingTop": 8,
+                                  "width": "100%",
+                                },
+                                Object {
+                                  "backgroundColor": "#00C5CA",
+                                },
+                              ]
+                            }
+                            testID="SectionStatusContent"
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "alignSelf": "center",
+                                }
+                              }
+                            >
+                              <RNSVGSvgView
+                                accessibilityElementsHidden={true}
+                                accessibilityLabel=""
+                                accessible={false}
+                                align="xMidYMid"
+                                bbHeight={24}
+                                bbWidth={24}
+                                focusable={false}
+                                height={24}
+                                importantForAccessibility="no-hide-descendants"
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "color": "#17324D",
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                  ]
+                                }
+                                tintColor="#17324D"
+                                vbHeight={24}
+                                vbWidth={24}
+                                width={24}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    d="M17.752 8.22a1.083 1.083 0 0 0-1.531.028l-5.974 6.192-2.468-2.558-.093-.086a1.083 1.083 0 0 0-1.465 1.589l3.248 3.367.095.087c.43.352 1.068.322 1.463-.087l6.752-7 .083-.096c.328-.431.29-1.05-.11-1.435Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M17.752 8.22a1.083 1.083 0 0 0-1.531.028l-5.974 6.192-2.468-2.558-.093-.086a1.083 1.083 0 0 0-1.465 1.589l3.248 3.367.095.087c.43.352 1.068.322 1.463-.087l6.752-7 .083-.096c.328-.431.29-1.05-.11-1.435Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Z"
+                                    fill={
+                                      Object {
+                                        "type": 2,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                            </View>
+                            <Text
+                              color="bluegreyDark"
+                              defaultColor="blue"
+                              defaultWeight="Bold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 16,
+                                }
+                              }
+                              style={
+                                Array [
+                                  Array [
+                                    Object {
+                                      "flex": 1,
+                                      "marginLeft": 16,
+                                    },
+                                    Object {
+                                      "paddingVertical": 14,
+                                    },
+                                  ],
+                                  Object {
+                                    "fontSize": 16,
+                                  },
+                                  Object {
+                                    "color": "#17324D",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "400",
+                                  },
+                                ]
+                              }
+                              weight="Regular"
+                            >
+                              <Text
+                                color="bluegreyDark"
+                                defaultColor="blue"
+                                defaultWeight="Bold"
+                                font="TitilliumWeb"
+                                fontStyle={
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  }
+                                }
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    },
+                                    Object {
+                                      "color": "#17324D",
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "400",
+                                    },
+                                  ]
+                                }
+                                weight="Regular"
+                              >
+                                This notice has been already paid!
+                              </Text>
+                            </Text>
+                          </View>
+                          <RCTScrollView
+                            style={
+                              Object {
+                                "paddingHorizontal": 24,
+                              }
+                            }
+                          >
+                            <View>
+                              <View
+                                accessibilityLabel="Notice code"
+                                accessibilityRole="button"
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                              >
+                                <View
+                                  importantForAccessibility="no-hide-descendants"
+                                  style={
+                                    Array [
+                                      Object {
+                                        "marginHorizontal": -24,
+                                        "paddingHorizontal": 24,
+                                        "paddingVertical": 12,
+                                      },
+                                      Object {
+                                        "backgroundColor": undefined,
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "flexDirection": "row",
+                                          "justifyContent": "space-between",
+                                        },
+                                        Object {
+                                          "transform": Array [
+                                            Object {
+                                              "scale": undefined,
+                                            },
+                                          ],
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        Object {
+                                          "flex": 1,
+                                        }
+                                      }
+                                    >
+                                      <Text
+                                        allowFontScaling={false}
+                                        color="grey-700"
+                                        defaultColor="blue"
+                                        defaultWeight="Bold"
+                                        font="TitilliumWeb"
+                                        fontStyle={
+                                          Object {
+                                            "fontSize": 14,
+                                            "lineHeight": 21,
+                                          }
+                                        }
+                                        style={
+                                          Array [
+                                            Object {
+                                              "fontSize": 14,
+                                              "lineHeight": 21,
+                                            },
+                                            Object {
+                                              "color": "#555C70",
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "400",
+                                            },
+                                          ]
+                                        }
+                                        weight="Regular"
+                                      >
+                                        Notice code
+                                      </Text>
+                                      <Text
+                                        allowFontScaling={false}
+                                        color="blue"
+                                        defaultColor="black"
+                                        defaultWeight="SemiBold"
+                                        font="TitilliumWeb"
+                                        fontStyle={
+                                          Object {
+                                            "fontSize": 18,
+                                            "lineHeight": 25,
+                                          }
+                                        }
+                                        numberOfLines={2}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "fontSize": 18,
+                                              "lineHeight": 25,
+                                            },
+                                            Object {
+                                              "color": "#0073E6",
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                            },
+                                          ]
+                                        }
+                                        weight="SemiBold"
+                                      >
+                                        0180  1198  8086  4794  97
+                                      </Text>
+                                    </View>
+                                    <View
+                                      style={
+                                        Object {
+                                          "marginLeft": 16,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0073E6",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0073E6"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
+                                          }
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M12 18h8a2 2 0 0 0 2-2V9h-4a3 3 0 0 1-3-3V2h-3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Zm9.332-11.987a2 2 0 0 1 .603.987H18a1 1 0 0 1-1-1V2.227a2 2 0 0 1 .406.281l3.926 3.505ZM14 20h-2a4 4 0 0 1-4-4V6H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2Zm2 0h4a4 4 0 0 0 4-4V7.505a4 4 0 0 0-1.336-2.984l-3.926-3.505A4 4 0 0 0 16.074 0H12a4 4 0 0 0-4 4H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
+                                  </View>
+                                </View>
+                              </View>
+                              <View
+                                accessibilityLabel="Payee Fiscal Code"
+                                accessibilityRole="button"
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                              >
+                                <View
+                                  importantForAccessibility="no-hide-descendants"
+                                  style={
+                                    Array [
+                                      Object {
+                                        "marginHorizontal": -24,
+                                        "paddingHorizontal": 24,
+                                        "paddingVertical": 12,
+                                      },
+                                      Object {
+                                        "backgroundColor": undefined,
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignItems": "center",
+                                          "flexDirection": "row",
+                                          "justifyContent": "space-between",
+                                        },
+                                        Object {
+                                          "transform": Array [
+                                            Object {
+                                              "scale": undefined,
+                                            },
+                                          ],
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        Object {
+                                          "flex": 1,
+                                        }
+                                      }
+                                    >
+                                      <Text
+                                        allowFontScaling={false}
+                                        color="grey-700"
+                                        defaultColor="blue"
+                                        defaultWeight="Bold"
+                                        font="TitilliumWeb"
+                                        fontStyle={
+                                          Object {
+                                            "fontSize": 14,
+                                            "lineHeight": 21,
+                                          }
+                                        }
+                                        style={
+                                          Array [
+                                            Object {
+                                              "fontSize": 14,
+                                              "lineHeight": 21,
+                                            },
+                                            Object {
+                                              "color": "#555C70",
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "400",
+                                            },
+                                          ]
+                                        }
+                                        weight="Regular"
+                                      >
+                                        Payee Fiscal Code
+                                      </Text>
+                                      <Text
+                                        allowFontScaling={false}
+                                        color="blue"
+                                        defaultColor="black"
+                                        defaultWeight="SemiBold"
+                                        font="TitilliumWeb"
+                                        fontStyle={
+                                          Object {
+                                            "fontSize": 18,
+                                            "lineHeight": 25,
+                                          }
+                                        }
+                                        numberOfLines={2}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "fontSize": 18,
+                                              "lineHeight": 25,
+                                            },
+                                            Object {
+                                              "color": "#0073E6",
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                            },
+                                          ]
+                                        }
+                                        weight="SemiBold"
+                                      >
+                                        00000000009
+                                      </Text>
+                                    </View>
+                                    <View
+                                      style={
+                                        Object {
+                                          "marginLeft": 16,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGSvgView
+                                        accessibilityElementsHidden={true}
+                                        accessibilityLabel=""
+                                        accessible={false}
+                                        align="xMidYMid"
+                                        bbHeight={24}
+                                        bbWidth={24}
+                                        focusable={false}
+                                        height={24}
+                                        importantForAccessibility="no-hide-descendants"
+                                        meetOrSlice={0}
+                                        minX={0}
+                                        minY={0}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "backgroundColor": "transparent",
+                                              "borderWidth": 0,
+                                            },
+                                            Object {
+                                              "color": "#0073E6",
+                                            },
+                                            Object {
+                                              "flex": 0,
+                                              "height": 24,
+                                              "width": 24,
+                                            },
+                                          ]
+                                        }
+                                        tintColor="#0073E6"
+                                        vbHeight={24}
+                                        vbWidth={24}
+                                        width={24}
+                                      >
+                                        <RNSVGGroup
+                                          fill={
+                                            Object {
+                                              "payload": 4278190080,
+                                              "type": 0,
+                                            }
+                                          }
+                                        >
+                                          <RNSVGPath
+                                            clipRule={0}
+                                            d="M12 18h8a2 2 0 0 0 2-2V9h-4a3 3 0 0 1-3-3V2h-3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Zm9.332-11.987a2 2 0 0 1 .603.987H18a1 1 0 0 1-1-1V2.227a2 2 0 0 1 .406.281l3.926 3.505ZM14 20h-2a4 4 0 0 1-4-4V6H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2Zm2 0h4a4 4 0 0 0 4-4V7.505a4 4 0 0 0-1.336-2.984l-3.926-3.505A4 4 0 0 0 16.074 0H12a4 4 0 0 0-4 4H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4Z"
+                                            fill={
+                                              Object {
+                                                "type": 2,
+                                              }
+                                            }
+                                            fillRule={0}
+                                            propList={
+                                              Array [
+                                                "fill",
+                                                "fillRule",
+                                              ]
+                                            }
+                                          />
+                                        </RNSVGGroup>
+                                      </RNSVGSvgView>
+                                    </View>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                          </RCTScrollView>
+                        </RCTSafeAreaView>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+    </View>
+  </RNCSafeAreaProvider>
+</View>
+`;
diff --git a/ts/features/pn/screens/__test__/__snapshots__/MessageDetailsScreen.test.tsx.snap b/ts/features/pn/screens/__test__/__snapshots__/MessageDetailsScreen.test.tsx.snap
index 4323d0c8345..eae5108fcd2 100644
--- a/ts/features/pn/screens/__test__/__snapshots__/MessageDetailsScreen.test.tsx.snap
+++ b/ts/features/pn/screens/__test__/__snapshots__/MessageDetailsScreen.test.tsx.snap
@@ -20,954 +20,2003 @@ exports[`MessageDetailsScreen should match the snapshot when everything went fin
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
-      <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
+      <RNSScreenContainer
         onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
-      >
-        <View
-          accessibilityRole="header"
-          style={
-            Array [
-              Object {
-                "backgroundColor": "#FFFFFF",
-              },
-              Object {
-                "borderBottomWidth": 1,
-              },
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderColor": "transparent",
-              },
-            ]
-          }
-        >
-          <View
-            style={
-              Array [
-                Object {
-                  "marginTop": 20,
-                },
-                Object {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "flexGrow": 1,
-                  "height": 56,
-                  "justifyContent": "space-between",
-                  "paddingHorizontal": 24,
-                },
-              ]
-            }
-          >
-            <View
-              accessibilityLabel="Back"
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "disabled": false,
-                }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              hitSlop={8}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-            >
-              <View
-                style={
-                  Array [
-                    Object {
-                      "height": 24,
-                      "width": 24,
-                    },
-                    Object {
-                      "alignItems": "center",
-                    },
-                    Object {
-                      "justifyContent": "center",
-                    },
-                    Object {
-                      "transform": Array [
-                        Object {
-                          "scale": undefined,
-                        },
-                      ],
-                    },
-                  ]
-                }
-              >
-                <RNSVGSvgView
-                  accessibilityElementsHidden={true}
-                  accessibilityLabel=""
-                  accessible={false}
-                  align="xMidYMid"
-                  animatedProps={
-                    Object {
-                      "color": undefined,
-                    }
-                  }
-                  bbHeight={24}
-                  bbWidth={24}
-                  color={4279111443}
-                  focusable={false}
-                  height={24}
-                  importantForAccessibility="no-hide-descendants"
-                  meetOrSlice={0}
-                  minX={0}
-                  minY={0}
-                  style={
-                    Array [
-                      Object {
-                        "backgroundColor": "transparent",
-                        "borderWidth": 0,
-                      },
-                      Object {
-                        "color": "#0E0F13",
-                      },
-                      Object {
-                        "flex": 0,
-                        "height": 24,
-                        "width": 24,
-                      },
-                    ]
-                  }
-                  tintColor={4279111443}
-                  vbHeight={24}
-                  vbWidth={24}
-                  width={24}
-                >
-                  <RNSVGGroup>
-                    <RNSVGPath
-                      clipRule={0}
-                      d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
-                      fill={
-                        Array [
-                          2,
-                        ]
-                      }
-                      fillRule={0}
-                      propList={
-                        Array [
-                          "fill",
-                          "fillRule",
-                        ]
-                      }
-                    />
-                  </RNSVGGroup>
-                </RNSVGSvgView>
-              </View>
-            </View>
-            <Text
-              numberOfLines={1}
-              style={
-                Array [
-                  Object {
-                    "flexGrow": 1,
-                    "flexShrink": 1,
-                    "fontSize": 14,
-                    "marginHorizontal": 16,
-                    "textAlign": "center",
-                  },
-                  Object {
-                    "fontFamily": "Titillium Web",
-                    "fontStyle": "normal",
-                    "fontWeight": "600",
-                  },
-                  Object {
-                    "opacity": 1,
-                  },
-                ]
-              }
-            />
-            <View
-              style={
-                Array [
-                  Object {
-                    "flexDirection": "row",
-                  },
-                  Object {
-                    "flexShrink": 0,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="Contextual Help"
-                accessibilityRole="button"
-                accessibilityState={
-                  Object {
-                    "disabled": false,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                hitSlop={8}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-              >
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "height": 24,
-                        "width": 24,
-                      },
-                      Object {
-                        "alignItems": "center",
-                      },
-                      Object {
-                        "justifyContent": "center",
-                      },
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scale": undefined,
-                          },
-                        ],
-                      },
-                    ]
-                  }
-                >
-                  <RNSVGSvgView
-                    accessibilityElementsHidden={true}
-                    accessibilityLabel=""
-                    accessible={false}
-                    align="xMidYMid"
-                    animatedProps={
-                      Object {
-                        "color": undefined,
-                      }
-                    }
-                    bbHeight={24}
-                    bbWidth={24}
-                    color={4279111443}
-                    focusable={false}
-                    height={24}
-                    importantForAccessibility="no-hide-descendants"
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      Array [
-                        Object {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        Object {
-                          "color": "#0E0F13",
-                        },
-                        Object {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    tintColor={4279111443}
-                    vbHeight={24}
-                    vbWidth={24}
-                    width={24}
-                  >
-                    <RNSVGGroup>
-                      <RNSVGPath
-                        d="M6 8c0-3.31371 2.68629-6 6-6 3.3137 0 6 2.68629 6 6 0 2.7248-1.8172 5.0278-4.3079 5.7583C12.3754 14.1446 11 15.2973 11 17v1c0 .5523.4477 1 1 1s1-.4477 1-1v-1c0-.5064.452-1.087 1.255-1.3225C17.5744 14.7039 20 11.6365 20 8c0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 .55228.44772 1 1 1s1-.44772 1-1Zm7.5 14.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z"
-                        fill={
-                          Array [
-                            2,
-                          ]
-                        }
-                        propList={
-                          Array [
-                            "fill",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "flex": 1,
           }
         }
       >
-        <View
+        <RNSModalScreen
+          activityState={2}
           collapsable={false}
-          style={
+          forwardedRef={[Function]}
+          gestureResponseDistance={
             Object {
-              "opacity": 1,
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
             }
           }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          onGestureCancel={[Function]}
           pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
           style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
             Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={3}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={3}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
-                    <RCTScrollView>
-                      <View>
-                        <View
-                          style={
-                            Object {
-                              "paddingHorizontal": 24,
-                            }
+                    <View
+                      style={
+                        Object {
+                          "flex": 1,
+                        }
+                      }
+                    >
+                      <RCTScrollView
+                        contentContainerStyle={
+                          Object {
+                            "paddingBottom": 16,
                           }
-                        >
+                        }
+                      >
+                        <View>
                           <View
                             style={
                               Object {
-                                "flexDirection": "row",
+                                "paddingHorizontal": 24,
                               }
                             }
                           >
                             <View
                               style={
                                 Object {
-                                  "alignItems": "center",
-                                  "alignSelf": "flex-start",
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#E8EBF1",
-                                  "borderRadius": 6,
-                                  "borderWidth": 1,
                                   "flexDirection": "row",
-                                  "justifyContent": "center",
-                                  "paddingHorizontal": 8,
-                                  "paddingVertical": 6,
+                                  "flexWrap": "wrap",
+                                  "justifyContent": "flex-start",
+                                  "marginHorizontal": -4,
+                                  "marginVertical": -4,
                                 }
                               }
                             >
                               <View
                                 style={
                                   Object {
-                                    "flexShrink": 1,
+                                    "marginHorizontal": 4,
+                                    "marginVertical": 4,
                                   }
                                 }
                               >
-                                <RNSVGSvgView
-                                  accessibilityElementsHidden={true}
-                                  accessibilityLabel=""
-                                  accessible={false}
-                                  align="xMidYMid"
-                                  bbHeight={16}
-                                  bbWidth={16}
-                                  color={4278927075}
-                                  focusable={false}
-                                  height={16}
-                                  importantForAccessibility="no-hide-descendants"
-                                  meetOrSlice={0}
-                                  minX={0}
-                                  minY={0}
+                                <View
                                   style={
-                                    Array [
-                                      Object {
-                                        "backgroundColor": "transparent",
-                                        "borderWidth": 0,
-                                      },
-                                      Object {
-                                        "color": "#0B3EE3",
-                                      },
-                                      Object {
-                                        "flex": 0,
-                                        "height": 16,
-                                        "width": 16,
-                                      },
-                                    ]
+                                    Object {
+                                      "alignItems": "center",
+                                      "alignSelf": "flex-start",
+                                      "backgroundColor": "#FFFFFF",
+                                      "borderColor": "#E8EBF1",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 6,
+                                      "borderWidth": 1,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 6,
+                                    }
                                   }
-                                  tintColor={4278927075}
-                                  vbHeight={24}
-                                  vbWidth={24}
-                                  width={16}
                                 >
-                                  <RNSVGGroup>
-                                    <RNSVGPath
-                                      clipRule={0}
-                                      d="M23.3953 14.8922c.4031-.7125.6047-1.4906.6047-2.3297 0-.8906-.225-1.7109-.6703-2.4562-.4453-.74067-1.0453-1.28911-1.7953-1.64536.1781-.48281.2672-1.01719.2672-1.60782 0-1.26562-.4219-2.34374-1.2704-3.23906-.8484-.89531-1.8703-1.34062-3.0656-1.34062-.539 0-1.0453.09844-1.5281.29531-.375-.76875-.9188-1.3875-1.6219-1.86094C13.6125.23906 12.8391 0 12 0s-1.6125.23906-2.31562.7125c-.70782.47344-1.24688 1.09219-1.62188 1.86094-.48281-.19688-.99375-.29532-1.52813-.29532-1.19531 0-2.22187.45-3.07968 1.34063-.85782.89062-1.28438 1.97344-1.28438 3.23906 0 .53438.09844 1.07344.29531 1.60782-.75.35625-1.34999.90468-1.7953 1.64527C.225 10.8516 0 11.6719 0 12.5625c0 .8391.20156 1.6172.6 2.3297.40313.7125.94219 1.2656 1.62188 1.6594-.03282.2531-.05157.45-.05157.5906 0 1.2656.42656 2.3484 1.28438 3.239.85781.8954 1.88437 1.3407 3.07968 1.3407.53907 0 1.04532-.0985 1.52813-.2953.375.7875.90938 1.4109 1.60781 1.875C10.3641 23.7703 11.1422 24 12 24c.8391 0 1.6125-.2344 2.3156-.7125.7078-.4734 1.2469-1.0922 1.6219-1.8609.4828.1968.9937.2953 1.5281.2953 1.1953 0 2.2172-.4453 3.0656-1.3407.8438-.8906 1.2704-1.9687 1.2704-3.239 0-.2672-.0094-.4641-.0282-.5906.6797-.3891 1.2188-.9469 1.6219-1.6594Zm-5.6882-4.1851c.3905-.3905.3905-1.02368 0-1.41421-.3905-.39052-1.0237-.39052-1.4142 0L10 15.5858l-3.29289-3.2929c-.39053-.3905-1.02369-.3905-1.41422 0-.39052.3905-.39052 1.0237 0 1.4142L8.58579 17c.78105.7811 2.04741.781 2.82841 0l6.2929-6.2929Z"
-                                      fill={
+                                  <View
+                                    style={
+                                      Object {
+                                        "flexShrink": 1,
+                                      }
+                                    }
+                                  >
+                                    <RNSVGSvgView
+                                      accessibilityElementsHidden={true}
+                                      accessibilityLabel=""
+                                      accessible={false}
+                                      align="xMidYMid"
+                                      bbHeight={16}
+                                      bbWidth={16}
+                                      focusable={false}
+                                      height={16}
+                                      importantForAccessibility="no-hide-descendants"
+                                      meetOrSlice={0}
+                                      minX={0}
+                                      minY={0}
+                                      style={
                                         Array [
-                                          2,
+                                          Object {
+                                            "backgroundColor": "transparent",
+                                            "borderWidth": 0,
+                                          },
+                                          Object {
+                                            "color": "#0B3EE3",
+                                          },
+                                          Object {
+                                            "flex": 0,
+                                            "height": 16,
+                                            "width": 16,
+                                          },
                                         ]
                                       }
-                                      fillRule={0}
-                                      propList={
+                                      tintColor="#0B3EE3"
+                                      vbHeight={24}
+                                      vbWidth={24}
+                                      width={16}
+                                    >
+                                      <RNSVGGroup
+                                        fill={
+                                          Object {
+                                            "payload": 4278190080,
+                                            "type": 0,
+                                          }
+                                        }
+                                      >
+                                        <RNSVGPath
+                                          clipRule={0}
+                                          d="M23.3953 14.8922c.4031-.7125.6047-1.4906.6047-2.3297 0-.8906-.225-1.7109-.6703-2.4562-.4453-.74067-1.0453-1.28911-1.7953-1.64536.1781-.48281.2672-1.01719.2672-1.60782 0-1.26562-.4219-2.34374-1.2704-3.23906-.8484-.89531-1.8703-1.34062-3.0656-1.34062-.539 0-1.0453.09844-1.5281.29531-.375-.76875-.9188-1.3875-1.6219-1.86094C13.6125.23906 12.8391 0 12 0s-1.6125.23906-2.31562.7125c-.70782.47344-1.24688 1.09219-1.62188 1.86094-.48281-.19688-.99375-.29532-1.52813-.29532-1.19531 0-2.22187.45-3.07968 1.34063-.85782.89062-1.28438 1.97344-1.28438 3.23906 0 .53438.09844 1.07344.29531 1.60782-.75.35625-1.34999.90468-1.7953 1.64527C.225 10.8516 0 11.6719 0 12.5625c0 .8391.20156 1.6172.6 2.3297.40313.7125.94219 1.2656 1.62188 1.6594-.03282.2531-.05157.45-.05157.5906 0 1.2656.42656 2.3484 1.28438 3.239.85781.8954 1.88437 1.3407 3.07968 1.3407.53907 0 1.04532-.0985 1.52813-.2953.375.7875.90938 1.4109 1.60781 1.875C10.3641 23.7703 11.1422 24 12 24c.8391 0 1.6125-.2344 2.3156-.7125.7078-.4734 1.2469-1.0922 1.6219-1.8609.4828.1968.9937.2953 1.5281.2953 1.1953 0 2.2172-.4453 3.0656-1.3407.8438-.8906 1.2704-1.9687 1.2704-3.239 0-.2672-.0094-.4641-.0282-.5906.6797-.3891 1.2188-.9469 1.6219-1.6594Zm-5.6882-4.1851c.3905-.3905.3905-1.02368 0-1.41421-.3905-.39052-1.0237-.39052-1.4142 0L10 15.5858l-3.29289-3.2929c-.39053-.3905-1.02369-.3905-1.41422 0-.39052.3905-.39052 1.0237 0 1.4142L8.58579 17c.78105.7811 2.04741.781 2.82841 0l6.2929-6.2929Z"
+                                          fill={
+                                            Object {
+                                              "type": 2,
+                                            }
+                                          }
+                                          fillRule={0}
+                                          propList={
+                                            Array [
+                                              "fill",
+                                              "fillRule",
+                                            ]
+                                          }
+                                        />
+                                      </RNSVGGroup>
+                                    </RNSVGSvgView>
+                                  </View>
+                                  <View
+                                    style={
+                                      Object {
+                                        "width": 6,
+                                      }
+                                    }
+                                  />
+                                  <Text
+                                    ellipsizeMode="tail"
+                                    numberOfLines={1}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "alignSelf": "center",
+                                          "color": "#555C70",
+                                          "flexShrink": 1,
+                                          "fontSize": 12,
+                                          "lineHeight": 16,
+                                          "textTransform": "uppercase",
+                                        },
+                                        Object {
+                                          "fontFamily": "Titillium Web",
+                                          "fontStyle": "normal",
+                                          "fontWeight": "600",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    Legal value
+                                  </Text>
+                                </View>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginHorizontal": 4,
+                                    "marginVertical": 4,
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
+                                    Object {
+                                      "alignItems": "center",
+                                      "alignSelf": "flex-start",
+                                      "backgroundColor": "#FFFFFF",
+                                      "borderColor": "#E8EBF1",
+                                      "borderCurve": "continuous",
+                                      "borderRadius": 6,
+                                      "borderWidth": 1,
+                                      "flexDirection": "row",
+                                      "justifyContent": "center",
+                                      "paddingHorizontal": 8,
+                                      "paddingVertical": 6,
+                                    }
+                                  }
+                                  testID="attachment-tag"
+                                >
+                                  <View
+                                    style={
+                                      Object {
+                                        "flexShrink": 1,
+                                      }
+                                    }
+                                  >
+                                    <RNSVGSvgView
+                                      accessibilityElementsHidden={false}
+                                      accessibilityLabel="Includes attachments"
+                                      accessible={true}
+                                      align="xMidYMid"
+                                      bbHeight={16}
+                                      bbWidth={16}
+                                      focusable={false}
+                                      height={16}
+                                      importantForAccessibility="auto"
+                                      meetOrSlice={0}
+                                      minX={0}
+                                      minY={0}
+                                      style={
                                         Array [
-                                          "fill",
-                                          "fillRule",
+                                          Object {
+                                            "backgroundColor": "transparent",
+                                            "borderWidth": 0,
+                                          },
+                                          Object {
+                                            "color": "#555C70",
+                                          },
+                                          Object {
+                                            "flex": 0,
+                                            "height": 16,
+                                            "width": 16,
+                                          },
                                         ]
                                       }
-                                    />
-                                  </RNSVGGroup>
-                                </RNSVGSvgView>
+                                      tintColor="#555C70"
+                                      vbHeight={24}
+                                      vbWidth={24}
+                                      width={16}
+                                    >
+                                      <RNSVGGroup
+                                        fill={
+                                          Object {
+                                            "payload": 4278190080,
+                                            "type": 0,
+                                          }
+                                        }
+                                      >
+                                        <RNSVGPath
+                                          d="M22.95 9.5997a.9999.9999 0 0 0-.707-.29279c-.2651 0-.5195.10532-.707.29279l-10.892 10.939a4.99896 4.99896 0 0 1-1.62212 1.084 4.99813 4.99813 0 0 1-1.9135.3808 5.00017 5.00017 0 0 1-3.53586-1.4643 5.00042 5.00042 0 0 1-1.4648-3.5357 5.00026 5.00026 0 0 1 1.4643-3.5358L14.121 2.8757a3.00005 3.00005 0 0 1 4.2253.0167 2.99985 2.99985 0 0 1 .8789 2.109 2.99996 2.99996 0 0 1-.8612 2.1163L7.81502 17.7097a1.0218 1.0218 0 0 1-.707.284 1.02182 1.02182 0 0 1-.707-.284.99989.99989 0 0 1-.29278-.707c0-.2652.10531-.5195.29278-.707l9.39198-9.435a.99975.99975 0 0 0 .2807-.7034 1.00018 1.00018 0 0 0-.2929-.69842.99994.99994 0 0 0-1.4018-.01218l-9.39198 9.435a3.00022 3.00022 0 0 0-.65045.9733 3.00027 3.00027 0 0 0 0 2.2964c.1508.364.37182.6947.65045.9733a3.07287 3.07287 0 0 0 2.1215.8498 3.07287 3.07287 0 0 0 2.1215-.8498L19.778 8.5317a5.0001 5.0001 0 0 0 1.4196-3.52223 4.99983 4.99983 0 0 0-1.4646-3.50375A5.0001 5.0001 0 0 0 16.229.0416a5.00012 5.00012 0 0 0-3.522 1.4201L2.15802 12.0537C.8452 13.3665.10767 15.1471.10767 17.0037c0 1.8566.73753 3.6372 2.05035 4.95 1.31282 1.3128 3.09339 2.0504 4.95 2.0504 1.85661 0 3.63718-.7376 4.94998-2.0504l10.892-10.936a.99968.99968 0 0 0 .2948-.709c0-.1318-.026-.2623-.0766-.38392a.999.999 0 0 0-.2182-.32508Z"
+                                          fill={
+                                            Object {
+                                              "type": 2,
+                                            }
+                                          }
+                                          propList={
+                                            Array [
+                                              "fill",
+                                            ]
+                                          }
+                                        />
+                                      </RNSVGGroup>
+                                    </RNSVGSvgView>
+                                  </View>
+                                </View>
                               </View>
                               <View
                                 style={
                                   Object {
-                                    "width": 6,
+                                    "height": 8,
                                   }
                                 }
                               />
-                              <Text
-                                ellipsizeMode="tail"
-                                numberOfLines={1}
-                                style={
-                                  Array [
-                                    Object {
-                                      "alignSelf": "center",
-                                      "color": "#555C70",
-                                      "flexShrink": 1,
-                                      "fontSize": 12,
-                                      "lineHeight": 16,
-                                      "textTransform": "uppercase",
-                                    },
-                                    Object {
-                                      "fontFamily": "Titillium Web",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "600",
-                                    },
-                                  ]
-                                }
-                              >
-                                Legal value
-                              </Text>
                             </View>
                             <View
                               style={
                                 Object {
-                                  "width": 8,
+                                  "height": 8,
                                 }
                               }
                             />
-                            <View
+                            <Text
+                              allowFontScaling={false}
+                              color="bluegreyDark"
+                              defaultColor="bluegreyDark"
+                              defaultWeight="SemiBold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 24,
+                                  "lineHeight": 34,
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 24,
+                                    "lineHeight": 34,
+                                  },
+                                  Object {
+                                    "color": "#17324D",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
+                                  },
+                                ]
+                              }
+                              testID="message-header-subject"
+                              weight="SemiBold"
+                            >
+                              ######## subject ########
+                            </Text>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <Text
+                              allowFontScaling={false}
+                              color="grey-700"
+                              defaultColor="blue"
+                              defaultWeight="Bold"
+                              font="TitilliumWeb"
+                              fontSize="regular"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 14,
+                                  "lineHeight": 21,
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 14,
+                                    "lineHeight": 21,
+                                  },
+                                  Object {
+                                    "color": "#555C70",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "700",
+                                  },
+                                ]
+                              }
+                              weight="Bold"
+                            >
+                              01 Jan 2020, 00:00
+                            </Text>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#D2D6E3",
+                                  "height": 0.5,
+                                }
+                              }
+                            />
+                            <View
                               style={
                                 Object {
                                   "alignItems": "center",
-                                  "alignSelf": "flex-start",
-                                  "backgroundColor": "#FFFFFF",
-                                  "borderColor": "#E8EBF1",
-                                  "borderRadius": 6,
-                                  "borderWidth": 1,
                                   "flexDirection": "row",
-                                  "justifyContent": "center",
-                                  "paddingHorizontal": 8,
+                                  "justifyContent": "space-between",
                                   "paddingVertical": 6,
                                 }
                               }
-                              testID="attachment-tag"
                             >
                               <View
                                 style={
                                   Object {
-                                    "flexShrink": 1,
+                                    "flex": 1,
                                   }
                                 }
                               >
-                                <RNSVGSvgView
-                                  accessibilityElementsHidden={true}
-                                  accessibilityLabel=""
-                                  accessible={false}
-                                  align="xMidYMid"
-                                  bbHeight={16}
-                                  bbWidth={16}
-                                  color={4283784304}
-                                  focusable={false}
-                                  height={16}
-                                  importantForAccessibility="no-hide-descendants"
-                                  meetOrSlice={0}
-                                  minX={0}
-                                  minY={0}
+                                <Text
+                                  allowFontScaling={false}
+                                  color="grey-700"
+                                  defaultColor="blue"
+                                  defaultWeight="Bold"
+                                  font="TitilliumWeb"
+                                  fontSize="regular"
+                                  fontStyle={
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    }
+                                  }
                                   style={
                                     Array [
                                       Object {
-                                        "backgroundColor": "transparent",
-                                        "borderWidth": 0,
+                                        "fontSize": 14,
+                                        "lineHeight": 21,
                                       },
                                       Object {
                                         "color": "#555C70",
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "700",
+                                      },
+                                    ]
+                                  }
+                                  weight="Bold"
+                                >
+                                  Ċentru tas-Saħħa
+                                </Text>
+                                <Text
+                                  allowFontScaling={false}
+                                  color="blueIO-500"
+                                  defaultColor="blue"
+                                  defaultWeight="Bold"
+                                  font="TitilliumWeb"
+                                  fontSize="regular"
+                                  fontStyle={
+                                    Object {
+                                      "fontSize": 14,
+                                      "lineHeight": 21,
+                                    }
+                                  }
+                                  style={
+                                    Array [
+                                      Object {
+                                        "fontSize": 14,
+                                        "lineHeight": 21,
                                       },
                                       Object {
-                                        "flex": 0,
-                                        "height": 16,
-                                        "width": 16,
+                                        "color": "#0B3EE3",
+                                        "fontFamily": "Titillium Web",
+                                        "fontStyle": "normal",
+                                        "fontWeight": "700",
                                       },
                                     ]
                                   }
-                                  tintColor={4283784304}
-                                  vbHeight={24}
-                                  vbWidth={24}
-                                  width={16}
+                                  weight="Bold"
                                 >
-                                  <RNSVGGroup>
-                                    <RNSVGPath
-                                      d="M22.95 9.5997a.9999.9999 0 0 0-.707-.29279c-.2651 0-.5195.10532-.707.29279l-10.892 10.939a4.99896 4.99896 0 0 1-1.62212 1.084 4.99813 4.99813 0 0 1-1.9135.3808 5.00017 5.00017 0 0 1-3.53586-1.4643 5.00042 5.00042 0 0 1-1.4648-3.5357 5.00026 5.00026 0 0 1 1.4643-3.5358L14.121 2.8757a3.00005 3.00005 0 0 1 4.2253.0167 2.99985 2.99985 0 0 1 .8789 2.109 2.99996 2.99996 0 0 1-.8612 2.1163L7.81502 17.7097a1.0218 1.0218 0 0 1-.707.284 1.02182 1.02182 0 0 1-.707-.284.99989.99989 0 0 1-.29278-.707c0-.2652.10531-.5195.29278-.707l9.39198-9.435a.99975.99975 0 0 0 .2807-.7034 1.00018 1.00018 0 0 0-.2929-.69842.99994.99994 0 0 0-1.4018-.01218l-9.39198 9.435a3.00022 3.00022 0 0 0-.65045.9733 3.00027 3.00027 0 0 0 0 2.2964c.1508.364.37182.6947.65045.9733a3.07287 3.07287 0 0 0 2.1215.8498 3.07287 3.07287 0 0 0 2.1215-.8498L19.778 8.5317a5.0001 5.0001 0 0 0 1.4196-3.52223 4.99983 4.99983 0 0 0-1.4646-3.50375A5.0001 5.0001 0 0 0 16.229.0416a5.00012 5.00012 0 0 0-3.522 1.4201L2.15802 12.0537C.8452 13.3665.10767 15.1471.10767 17.0037c0 1.8566.73753 3.6372 2.05035 4.95 1.31282 1.3128 3.09339 2.0504 4.95 2.0504 1.85661 0 3.63718-.7376 4.94998-2.0504l10.892-10.936a.99968.99968 0 0 0 .2948-.709c0-.1318-.026-.2623-.0766-.38392a.999.999 0 0 0-.2182-.32508Z"
-                                      fill={
-                                        Array [
-                                          2,
-                                        ]
+                                  health
+                                </Text>
+                              </View>
+                              <View
+                                style={
+                                  Object {
+                                    "marginLeft": 16,
+                                  }
+                                }
+                              >
+                                <View
+                                  accessibilityIgnoresInvertColors={true}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "borderColor": "rgba(14,15,19,0.1)",
+                                        "borderCurve": "continuous",
+                                        "borderWidth": 1,
+                                        "overflow": "hidden",
+                                      },
+                                      Object {
+                                        "backgroundColor": "#FFFFFF",
+                                        "borderRadius": 8,
+                                        "height": 44,
+                                        "padding": 6,
+                                        "width": 44,
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "#FFFFFF",
+                                          "borderCurve": "continuous",
+                                          "overflow": "hidden",
+                                        },
+                                        Object {
+                                          "borderRadius": 2,
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    <Image
+                                      accessibilityIgnoresInvertColors={true}
+                                      onError={[Function]}
+                                      source={
+                                        Object {
+                                          "uri": "https://assets.cdn.io.italia.it/logos/services/service_one.png",
+                                        }
                                       }
-                                      propList={
-                                        Array [
-                                          "fill",
-                                        ]
+                                      style={
+                                        Object {
+                                          "height": "100%",
+                                          "resizeMode": "contain",
+                                          "width": "100%",
+                                        }
                                       }
                                     />
-                                  </RNSVGGroup>
-                                </RNSVGSvgView>
+                                  </View>
+                                </View>
                               </View>
                             </View>
-                          </View>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <Text
-                            allowFontScaling={false}
-                            color="bluegreyDark"
-                            defaultColor="bluegreyDark"
-                            defaultWeight="SemiBold"
-                            font="TitilliumWeb"
-                            fontStyle={
-                              Object {
-                                "fontSize": 24,
-                                "lineHeight": 34,
-                              }
-                            }
-                            style={
-                              Array [
-                                Object {
-                                  "fontSize": 24,
-                                  "lineHeight": 34,
-                                },
+                            <View
+                              style={
                                 Object {
-                                  "color": "#17324D",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "600",
-                                },
-                              ]
-                            }
-                            testID="message-header-subject"
-                            weight="SemiBold"
-                          >
-                            ######## subject ########
-                          </Text>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <Text
-                            allowFontScaling={false}
-                            color="grey-700"
-                            defaultColor="blue"
-                            defaultWeight="Bold"
-                            font="TitilliumWeb"
-                            fontSize="regular"
-                            fontStyle={
-                              Object {
-                                "fontSize": 14,
-                                "lineHeight": 21,
+                                  "backgroundColor": "#D2D6E3",
+                                  "height": 0.5,
+                                }
                               }
-                            }
-                            style={
-                              Array [
+                            />
+                            <View
+                              style={
                                 Object {
-                                  "fontSize": 14,
-                                  "lineHeight": 21,
-                                },
+                                  "height": 16,
+                                }
+                              }
+                            />
+                            <Text
+                              allowFontScaling={false}
+                              color="grey-850"
+                              defaultColor="bluegrey"
+                              defaultWeight="Regular"
+                              font="TitilliumWeb"
+                              fontStyle={
                                 Object {
-                                  "color": "#555C70",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "700",
-                                },
-                              ]
-                            }
-                            weight="Bold"
-                          >
-                            01 Jan 2020, 00:00
-                          </Text>
-                          <View
-                            style={
-                              Object {
-                                "height": 8,
+                                  "fontSize": 16,
+                                  "lineHeight": 24,
+                                }
                               }
-                            }
-                          />
-                          <View
-                            style={
-                              Object {
-                                "backgroundColor": "#D2D6E3",
-                                "height": 0.5,
+                              style={
+                                Array [
+                                  Object {
+                                    "fontSize": 16,
+                                    "lineHeight": 24,
+                                  },
+                                  Object {
+                                    "color": "#2B2E38",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "400",
+                                  },
+                                ]
                               }
-                            }
-                          />
-                          <View
-                            style={
-                              Object {
-                                "alignItems": "center",
-                                "flexDirection": "row",
-                                "justifyContent": "space-between",
-                                "paddingVertical": 6,
+                              weight="Regular"
+                            >
+                              ######## abstract ########
+                            </Text>
+                            <View
+                              style={
+                                Object {
+                                  "height": 16,
+                                }
                               }
-                            }
-                          >
+                            />
                             <View
+                              accessibilityLabel="Attachments"
+                              accessible={true}
                               style={
                                 Object {
-                                  "flex": 1,
+                                  "marginHorizontal": -24,
+                                  "paddingHorizontal": 24,
+                                  "paddingVertical": 12,
                                 }
                               }
                             >
-                              <Text
-                                allowFontScaling={false}
-                                color="grey-700"
-                                defaultColor="blue"
-                                defaultWeight="Bold"
-                                font="TitilliumWeb"
-                                fontSize="regular"
-                                fontStyle={
-                                  Object {
-                                    "fontSize": 14,
-                                    "lineHeight": 21,
-                                  }
-                                }
+                              <View
+                                importantForAccessibility="no-hide-descendants"
                                 style={
-                                  Array [
-                                    Object {
-                                      "fontSize": 14,
-                                      "lineHeight": 21,
-                                    },
-                                    Object {
-                                      "color": "#555C70",
-                                      "fontFamily": "Titillium Web",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "700",
-                                    },
-                                  ]
-                                }
-                                weight="Bold"
-                              >
-                                Ċentru tas-Saħħa
-                              </Text>
-                              <Text
-                                allowFontScaling={false}
-                                color="blueIO-500"
-                                defaultColor="blue"
-                                defaultWeight="Bold"
-                                font="TitilliumWeb"
-                                fontSize="regular"
-                                fontStyle={
                                   Object {
-                                    "fontSize": 14,
-                                    "lineHeight": 21,
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "space-between",
                                   }
                                 }
-                                style={
-                                  Array [
+                              >
+                                <View
+                                  style={
                                     Object {
-                                      "fontSize": 14,
-                                      "lineHeight": 21,
-                                    },
+                                      "marginRight": 8,
+                                    }
+                                  }
+                                >
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    bbHeight={24}
+                                    bbWidth={24}
+                                    focusable={false}
+                                    height={24}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "color": "#BBC2D6",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 24,
+                                          "width": 24,
+                                        },
+                                      ]
+                                    }
+                                    tintColor="#BBC2D6"
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={24}
+                                  >
+                                    <RNSVGGroup
+                                      fill={
+                                        Object {
+                                          "payload": 4278190080,
+                                          "type": 0,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGPath
+                                        d="M22.95 9.5997a.9999.9999 0 0 0-.707-.29279c-.2651 0-.5195.10532-.707.29279l-10.892 10.939a4.99896 4.99896 0 0 1-1.62212 1.084 4.99813 4.99813 0 0 1-1.9135.3808 5.00017 5.00017 0 0 1-3.53586-1.4643 5.00042 5.00042 0 0 1-1.4648-3.5357 5.00026 5.00026 0 0 1 1.4643-3.5358L14.121 2.8757a3.00005 3.00005 0 0 1 4.2253.0167 2.99985 2.99985 0 0 1 .8789 2.109 2.99996 2.99996 0 0 1-.8612 2.1163L7.81502 17.7097a1.0218 1.0218 0 0 1-.707.284 1.02182 1.02182 0 0 1-.707-.284.99989.99989 0 0 1-.29278-.707c0-.2652.10531-.5195.29278-.707l9.39198-9.435a.99975.99975 0 0 0 .2807-.7034 1.00018 1.00018 0 0 0-.2929-.69842.99994.99994 0 0 0-1.4018-.01218l-9.39198 9.435a3.00022 3.00022 0 0 0-.65045.9733 3.00027 3.00027 0 0 0 0 2.2964c.1508.364.37182.6947.65045.9733a3.07287 3.07287 0 0 0 2.1215.8498 3.07287 3.07287 0 0 0 2.1215-.8498L19.778 8.5317a5.0001 5.0001 0 0 0 1.4196-3.52223 4.99983 4.99983 0 0 0-1.4646-3.50375A5.0001 5.0001 0 0 0 16.229.0416a5.00012 5.00012 0 0 0-3.522 1.4201L2.15802 12.0537C.8452 13.3665.10767 15.1471.10767 17.0037c0 1.8566.73753 3.6372 2.05035 4.95 1.31282 1.3128 3.09339 2.0504 4.95 2.0504 1.85661 0 3.63718-.7376 4.94998-2.0504l10.892-10.936a.99968.99968 0 0 0 .2948-.709c0-.1318-.026-.2623-.0766-.38392a.999.999 0 0 0-.2182-.32508Z"
+                                        fill={
+                                          Object {
+                                            "type": 2,
+                                          }
+                                        }
+                                        propList={
+                                          Array [
+                                            "fill",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                                <View
+                                  style={
                                     Object {
-                                      "color": "#0B3EE3",
-                                      "fontFamily": "Titillium Web",
-                                      "fontStyle": "normal",
-                                      "fontWeight": "700",
-                                    },
-                                  ]
-                                }
-                                weight="Bold"
-                              >
-                                health
-                              </Text>
+                                      "flex": 1,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    accessibilityElementsHidden={false}
+                                    accessible={true}
+                                    importantForAccessibility="yes"
+                                  >
+                                    <Text
+                                      allowFontScaling={false}
+                                      color="grey-700"
+                                      defaultColor="black"
+                                      defaultWeight="SemiBold"
+                                      font="TitilliumWeb"
+                                      fontStyle={
+                                        Object {
+                                          "fontSize": 18,
+                                          "lineHeight": 25,
+                                        }
+                                      }
+                                      style={
+                                        Array [
+                                          Object {
+                                            "fontSize": 18,
+                                            "lineHeight": 25,
+                                          },
+                                          Object {
+                                            "color": "#555C70",
+                                            "fontFamily": "Titillium Web",
+                                            "fontStyle": "normal",
+                                            "fontWeight": "400",
+                                          },
+                                        ]
+                                      }
+                                      weight="Regular"
+                                    >
+                                      Attachments
+                                    </Text>
+                                  </View>
+                                </View>
+                              </View>
                             </View>
                             <View
-                              style={
+                              accessibilityHint="pdf"
+                              accessibilityLabel="A First Attachment"
+                              accessibilityRole="button"
+                              accessibilityState={
                                 Object {
-                                  "marginLeft": 16,
+                                  "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]}
                             >
                               <View
+                                accessibilityElementsHidden={true}
+                                importantForAccessibility="no-hide-descendants"
                                 style={
                                   Array [
                                     Object {
-                                      "borderColor": "rgba(14,15,19,0.1)",
+                                      "alignItems": "center",
+                                      "backgroundColor": "#FFFFFF",
+                                      "borderColor": "#CCD4DC",
+                                      "borderRadius": 8,
+                                      "borderStyle": "solid",
                                       "borderWidth": 1,
-                                      "overflow": "hidden",
-                                      "resizeMode": "contain",
+                                      "flexDirection": "row",
+                                      "paddingHorizontal": 16,
+                                      "paddingVertical": 16,
                                     },
                                     Object {
-                                      "backgroundColor": "#FFFFFF",
-                                      "borderRadius": 22,
-                                      "height": 44,
-                                      "padding": 6,
-                                      "width": 44,
+                                      "transform": Array [
+                                        Object {
+                                          "scale": undefined,
+                                        },
+                                      ],
+                                    },
+                                    Object {
+                                      "opacity": 1,
                                     },
                                   ]
                                 }
                               >
-                                <Image
-                                  onError={[Function]}
-                                  source={
+                                <View
+                                  style={
                                     Object {
-                                      "uri": "https://assets.cdn.io.italia.it/logos/services/service_one.png",
+                                      "flex": 1,
+                                      "flexDirection": "column",
                                     }
                                   }
+                                >
+                                  <Text
+                                    allowFontScaling={false}
+                                    color="blueIO-500"
+                                    defaultColor="blue"
+                                    defaultWeight="Bold"
+                                    font="TitilliumWeb"
+                                    fontStyle={
+                                      Object {
+                                        "fontSize": 14,
+                                        "lineHeight": 21,
+                                      }
+                                    }
+                                    numberOfLines={1}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "fontSize": 14,
+                                          "lineHeight": 21,
+                                        },
+                                        Object {
+                                          "color": "#0B3EE3",
+                                          "fontFamily": "Titillium Web",
+                                          "fontStyle": "normal",
+                                          "fontWeight": "600",
+                                        },
+                                      ]
+                                    }
+                                    weight="SemiBold"
+                                  >
+                                    A First Attachment
+                                  </Text>
+                                  <View
+                                    style={
+                                      Object {
+                                        "height": 4,
+                                      }
+                                    }
+                                  />
+                                  <View
+                                    style={
+                                      Object {
+                                        "width": 44,
+                                      }
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        Array [
+                                          Object {
+                                            "alignItems": "center",
+                                            "borderCurve": "continuous",
+                                            "borderRadius": 24,
+                                            "flexDirection": "row",
+                                            "justifyContent": "center",
+                                            "paddingHorizontal": 8,
+                                            "paddingVertical": 4,
+                                          },
+                                          Object {
+                                            "backgroundColor": "#F4F5F8",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      <Text
+                                        ellipsizeMode="tail"
+                                        numberOfLines={1}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "alignSelf": "center",
+                                              "flexShrink": 1,
+                                              "fontSize": 12,
+                                              "lineHeight": 16,
+                                              "textTransform": "uppercase",
+                                            },
+                                            Object {
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                            },
+                                            Object {
+                                              "color": "#555C70",
+                                            },
+                                          ]
+                                        }
+                                      >
+                                        PDF
+                                      </Text>
+                                    </View>
+                                  </View>
+                                </View>
+                                <View
                                   style={
                                     Object {
-                                      "height": "100%",
-                                      "width": "100%",
+                                      "alignItems": "center",
+                                      "marginLeft": 16,
                                     }
                                   }
-                                />
+                                >
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    bbHeight={24}
+                                    bbWidth={24}
+                                    focusable={false}
+                                    height={24}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "color": "#0B3EE3",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 24,
+                                          "width": 24,
+                                        },
+                                      ]
+                                    }
+                                    tintColor="#0B3EE3"
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={24}
+                                  >
+                                    <RNSVGGroup
+                                      fill={
+                                        Object {
+                                          "payload": 4278190080,
+                                          "type": 0,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGPath
+                                        clipRule={0}
+                                        d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                        fill={
+                                          Object {
+                                            "type": 2,
+                                          }
+                                        }
+                                        fillRule={0}
+                                        propList={
+                                          Array [
+                                            "fill",
+                                            "fillRule",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                              </View>
+                            </View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 8,
+                                }
+                              }
+                            />
+                            <View
+                              accessibilityHint="pdf"
+                              accessibilityLabel="A Second Attachment"
+                              accessibilityRole="button"
+                              accessibilityState={
+                                Object {
+                                  "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]}
+                            >
+                              <View
+                                accessibilityElementsHidden={true}
+                                importantForAccessibility="no-hide-descendants"
+                                style={
+                                  Array [
+                                    Object {
+                                      "alignItems": "center",
+                                      "backgroundColor": "#FFFFFF",
+                                      "borderColor": "#CCD4DC",
+                                      "borderRadius": 8,
+                                      "borderStyle": "solid",
+                                      "borderWidth": 1,
+                                      "flexDirection": "row",
+                                      "paddingHorizontal": 16,
+                                      "paddingVertical": 16,
+                                    },
+                                    Object {
+                                      "transform": Array [
+                                        Object {
+                                          "scale": undefined,
+                                        },
+                                      ],
+                                    },
+                                    Object {
+                                      "opacity": 1,
+                                    },
+                                  ]
+                                }
+                              >
+                                <View
+                                  style={
+                                    Object {
+                                      "flex": 1,
+                                      "flexDirection": "column",
+                                    }
+                                  }
+                                >
+                                  <Text
+                                    allowFontScaling={false}
+                                    color="blueIO-500"
+                                    defaultColor="blue"
+                                    defaultWeight="Bold"
+                                    font="TitilliumWeb"
+                                    fontStyle={
+                                      Object {
+                                        "fontSize": 14,
+                                        "lineHeight": 21,
+                                      }
+                                    }
+                                    numberOfLines={1}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "fontSize": 14,
+                                          "lineHeight": 21,
+                                        },
+                                        Object {
+                                          "color": "#0B3EE3",
+                                          "fontFamily": "Titillium Web",
+                                          "fontStyle": "normal",
+                                          "fontWeight": "600",
+                                        },
+                                      ]
+                                    }
+                                    weight="SemiBold"
+                                  >
+                                    A Second Attachment
+                                  </Text>
+                                  <View
+                                    style={
+                                      Object {
+                                        "height": 4,
+                                      }
+                                    }
+                                  />
+                                  <View
+                                    style={
+                                      Object {
+                                        "width": 44,
+                                      }
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        Array [
+                                          Object {
+                                            "alignItems": "center",
+                                            "borderCurve": "continuous",
+                                            "borderRadius": 24,
+                                            "flexDirection": "row",
+                                            "justifyContent": "center",
+                                            "paddingHorizontal": 8,
+                                            "paddingVertical": 4,
+                                          },
+                                          Object {
+                                            "backgroundColor": "#F4F5F8",
+                                          },
+                                        ]
+                                      }
+                                    >
+                                      <Text
+                                        ellipsizeMode="tail"
+                                        numberOfLines={1}
+                                        style={
+                                          Array [
+                                            Object {
+                                              "alignSelf": "center",
+                                              "flexShrink": 1,
+                                              "fontSize": 12,
+                                              "lineHeight": 16,
+                                              "textTransform": "uppercase",
+                                            },
+                                            Object {
+                                              "fontFamily": "Titillium Web",
+                                              "fontStyle": "normal",
+                                              "fontWeight": "600",
+                                            },
+                                            Object {
+                                              "color": "#555C70",
+                                            },
+                                          ]
+                                        }
+                                      >
+                                        PDF
+                                      </Text>
+                                    </View>
+                                  </View>
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "alignItems": "center",
+                                      "marginLeft": 16,
+                                    }
+                                  }
+                                >
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    bbHeight={24}
+                                    bbWidth={24}
+                                    focusable={false}
+                                    height={24}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "color": "#0B3EE3",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 24,
+                                          "width": 24,
+                                        },
+                                      ]
+                                    }
+                                    tintColor="#0B3EE3"
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={24}
+                                  >
+                                    <RNSVGGroup
+                                      fill={
+                                        Object {
+                                          "payload": 4278190080,
+                                          "type": 0,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGPath
+                                        clipRule={0}
+                                        d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
+                                        fill={
+                                          Object {
+                                            "type": 2,
+                                          }
+                                        }
+                                        fillRule={0}
+                                        propList={
+                                          Array [
+                                            "fill",
+                                            "fillRule",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                              </View>
+                            </View>
+                            <View
+                              style={
+                                Object {
+                                  "height": 16,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "height": 16,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "height": 16,
+                                }
+                              }
+                            />
+                            <View
+                              accessibilityLabel="Informazioni sulla notifica"
+                              accessible={true}
+                              style={
+                                Object {
+                                  "marginHorizontal": -24,
+                                  "paddingHorizontal": 24,
+                                  "paddingVertical": 12,
+                                }
+                              }
+                            >
+                              <View
+                                importantForAccessibility="no-hide-descendants"
+                                style={
+                                  Object {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "space-between",
+                                  }
+                                }
+                              >
+                                <View
+                                  style={
+                                    Object {
+                                      "marginRight": 8,
+                                    }
+                                  }
+                                >
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    bbHeight={24}
+                                    bbWidth={24}
+                                    focusable={false}
+                                    height={24}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "color": "#BBC2D6",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 24,
+                                          "width": 24,
+                                        },
+                                      ]
+                                    }
+                                    tintColor="#BBC2D6"
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={24}
+                                  >
+                                    <RNSVGGroup
+                                      fill={
+                                        Object {
+                                          "payload": 4278190080,
+                                          "type": 0,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGPath
+                                        clipRule={0}
+                                        d="M0 12C0 5.3726 5.3726 0 12 0s12 5.3726 12 12-5.3726 12-12 12S0 18.6274 0 12Zm2 0C2 6.47717 6.47717 2 12 2c5.5228 0 10 4.47717 10 10 0 5.5228-4.4772 10-10 10-5.52283 0-10-4.4772-10-10Zm10.0281-4.50455c.8439 0 1.5281-.68415 1.5281-1.52809 0-.84394-.6842-1.52809-1.5281-1.52809-.844 0-1.5281.68415-1.5281 1.52809 0 .84394.6841 1.52809 1.5281 1.52809Zm0 1.94382h.0005c.5678 0 1.0281.46029 1.0281 1.02813v8.0045c0 .5678-.4603 1.0281-1.0281 1.0281h-.0005C11.4603 19.5 11 19.0397 11 18.4719v-8.0045c0-.56784.4603-1.02813 1.0281-1.02813Z"
+                                        fill={
+                                          Object {
+                                            "type": 2,
+                                          }
+                                        }
+                                        fillRule={0}
+                                        propList={
+                                          Array [
+                                            "fill",
+                                            "fillRule",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                                <View
+                                  style={
+                                    Object {
+                                      "flex": 1,
+                                    }
+                                  }
+                                >
+                                  <View
+                                    accessibilityElementsHidden={false}
+                                    accessible={true}
+                                    importantForAccessibility="yes"
+                                  >
+                                    <Text
+                                      allowFontScaling={false}
+                                      color="grey-700"
+                                      defaultColor="black"
+                                      defaultWeight="SemiBold"
+                                      font="TitilliumWeb"
+                                      fontStyle={
+                                        Object {
+                                          "fontSize": 18,
+                                          "lineHeight": 25,
+                                        }
+                                      }
+                                      style={
+                                        Array [
+                                          Object {
+                                            "fontSize": 18,
+                                            "lineHeight": 25,
+                                          },
+                                          Object {
+                                            "color": "#555C70",
+                                            "fontFamily": "Titillium Web",
+                                            "fontStyle": "normal",
+                                            "fontWeight": "400",
+                                          },
+                                        ]
+                                      }
+                                      weight="Regular"
+                                    >
+                                      Informazioni sulla notifica
+                                    </Text>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
+                            <View
+                              accessibilityLabel="Codice IUN copy to clipboard"
+                              accessibilityRole="button"
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                            >
+                              <View
+                                importantForAccessibility="no-hide-descendants"
+                                style={
+                                  Array [
+                                    Object {
+                                      "marginHorizontal": -24,
+                                      "paddingHorizontal": 24,
+                                      "paddingVertical": 12,
+                                    },
+                                    Object {
+                                      "backgroundColor": undefined,
+                                    },
+                                  ]
+                                }
+                              >
+                                <View
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignItems": "center",
+                                        "flexDirection": "row",
+                                        "justifyContent": "space-between",
+                                      },
+                                      Object {
+                                        "transform": Array [
+                                          Object {
+                                            "scale": undefined,
+                                          },
+                                        ],
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      Object {
+                                        "flex": 1,
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      allowFontScaling={false}
+                                      color="grey-700"
+                                      defaultColor="blue"
+                                      defaultWeight="Bold"
+                                      font="TitilliumWeb"
+                                      fontStyle={
+                                        Object {
+                                          "fontSize": 14,
+                                          "lineHeight": 21,
+                                        }
+                                      }
+                                      style={
+                                        Array [
+                                          Object {
+                                            "fontSize": 14,
+                                            "lineHeight": 21,
+                                          },
+                                          Object {
+                                            "color": "#555C70",
+                                            "fontFamily": "Titillium Web",
+                                            "fontStyle": "normal",
+                                            "fontWeight": "400",
+                                          },
+                                        ]
+                                      }
+                                      weight="Regular"
+                                    >
+                                      Codice IUN
+                                    </Text>
+                                    <Text
+                                      allowFontScaling={false}
+                                      color="blue"
+                                      defaultColor="black"
+                                      defaultWeight="SemiBold"
+                                      font="TitilliumWeb"
+                                      fontStyle={
+                                        Object {
+                                          "fontSize": 18,
+                                          "lineHeight": 25,
+                                        }
+                                      }
+                                      numberOfLines={2}
+                                      style={
+                                        Array [
+                                          Object {
+                                            "fontSize": 18,
+                                            "lineHeight": 25,
+                                          },
+                                          Object {
+                                            "color": "#0073E6",
+                                            "fontFamily": "Titillium Web",
+                                            "fontStyle": "normal",
+                                            "fontWeight": "600",
+                                          },
+                                        ]
+                                      }
+                                      weight="SemiBold"
+                                    >
+                                      731143-7-0317-8200-0
+                                    </Text>
+                                  </View>
+                                  <View
+                                    style={
+                                      Object {
+                                        "marginLeft": 16,
+                                      }
+                                    }
+                                  >
+                                    <RNSVGSvgView
+                                      accessibilityElementsHidden={true}
+                                      accessibilityLabel=""
+                                      accessible={false}
+                                      align="xMidYMid"
+                                      bbHeight={24}
+                                      bbWidth={24}
+                                      focusable={false}
+                                      height={24}
+                                      importantForAccessibility="no-hide-descendants"
+                                      meetOrSlice={0}
+                                      minX={0}
+                                      minY={0}
+                                      style={
+                                        Array [
+                                          Object {
+                                            "backgroundColor": "transparent",
+                                            "borderWidth": 0,
+                                          },
+                                          Object {
+                                            "color": "#0073E6",
+                                          },
+                                          Object {
+                                            "flex": 0,
+                                            "height": 24,
+                                            "width": 24,
+                                          },
+                                        ]
+                                      }
+                                      tintColor="#0073E6"
+                                      vbHeight={24}
+                                      vbWidth={24}
+                                      width={24}
+                                    >
+                                      <RNSVGGroup
+                                        fill={
+                                          Object {
+                                            "payload": 4278190080,
+                                            "type": 0,
+                                          }
+                                        }
+                                      >
+                                        <RNSVGPath
+                                          clipRule={0}
+                                          d="M12 18h8a2 2 0 0 0 2-2V9h-4a3 3 0 0 1-3-3V2h-3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Zm9.332-11.987a2 2 0 0 1 .603.987H18a1 1 0 0 1-1-1V2.227a2 2 0 0 1 .406.281l3.926 3.505ZM14 20h-2a4 4 0 0 1-4-4V6H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2Zm2 0h4a4 4 0 0 0 4-4V7.505a4 4 0 0 0-1.336-2.984l-3.926-3.505A4 4 0 0 0 16.074 0H12a4 4 0 0 0-4 4H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4Z"
+                                          fill={
+                                            Object {
+                                              "type": 2,
+                                            }
+                                          }
+                                          fillRule={0}
+                                          propList={
+                                            Array [
+                                              "fill",
+                                              "fillRule",
+                                            ]
+                                          }
+                                        />
+                                      </RNSVGGroup>
+                                    </RNSVGSvgView>
+                                  </View>
+                                </View>
                               </View>
                             </View>
                           </View>
                           <View
                             style={
                               Object {
-                                "backgroundColor": "#D2D6E3",
-                                "height": 0.5,
+                                "backgroundColor": "#F4F5F8",
+                                "marginBottom": "-95%",
+                                "paddingBottom": "95%",
+                                "paddingHorizontal": 24,
+                                "paddingTop": 16,
                               }
                             }
-                          />
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "height": 16,
+                                }
+                              }
+                            />
+                          </View>
                         </View>
+                      </RCTScrollView>
+                    </View>
+                    <View
+                      collapsable={false}
+                      pointerEvents="box-none"
+                      style={Object {}}
+                    >
+                      <View
+                        accessibilityElementsHidden={false}
+                        importantForAccessibility="auto"
+                        onLayout={[Function]}
+                        pointerEvents="box-none"
+                        style={null}
+                      >
                         <View
+                          accessibilityRole="header"
                           style={
-                            Object {
-                              "paddingHorizontal": 24,
-                            }
+                            Array [
+                              Object {
+                                "backgroundColor": "#FFFFFF",
+                              },
+                              Object {
+                                "borderBottomWidth": 1,
+                              },
+                              Object {
+                                "backgroundColor": "#FFFFFF",
+                                "borderColor": "transparent",
+                              },
+                            ]
                           }
                         >
                           <View
-                            style={
-                              Object {
-                                "height": 16,
-                              }
-                            }
-                          />
-                          <Text
-                            allowFontScaling={false}
-                            color="grey-850"
-                            defaultColor="bluegrey"
-                            defaultWeight="Regular"
-                            font="TitilliumWeb"
-                            fontStyle={
-                              Object {
-                                "fontSize": 16,
-                                "lineHeight": 24,
-                              }
-                            }
                             style={
                               Array [
                                 Object {
-                                  "fontSize": 16,
-                                  "lineHeight": 24,
+                                  "marginTop": 0,
                                 },
                                 Object {
-                                  "color": "#2B2E38",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "400",
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "flexGrow": 1,
+                                  "height": 56,
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 24,
                                 },
                               ]
                             }
-                            weight="Regular"
                           >
-                            ######## abstract ########
-                          </Text>
+                            <View
+                              accessibilityLabel="Back"
+                              accessibilityRole="button"
+                              accessibilityState={
+                                Object {
+                                  "disabled": false,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              hitSlop={8}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                    Object {
+                                      "alignItems": "center",
+                                    },
+                                    Object {
+                                      "justifyContent": "center",
+                                    },
+                                    Object {
+                                      "transform": Array [
+                                        Object {
+                                          "scale": undefined,
+                                        },
+                                      ],
+                                    },
+                                  ]
+                                }
+                              >
+                                <RNSVGSvgView
+                                  accessibilityElementsHidden={true}
+                                  accessibilityLabel=""
+                                  accessible={false}
+                                  align="xMidYMid"
+                                  animatedProps={
+                                    Object {
+                                      "color": undefined,
+                                    }
+                                  }
+                                  bbHeight={24}
+                                  bbWidth={24}
+                                  focusable={false}
+                                  height={24}
+                                  importantForAccessibility="no-hide-descendants"
+                                  meetOrSlice={0}
+                                  minX={0}
+                                  minY={0}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "backgroundColor": "transparent",
+                                        "borderWidth": 0,
+                                      },
+                                      Object {
+                                        "color": "#0E0F13",
+                                      },
+                                      Object {
+                                        "flex": 0,
+                                        "height": 24,
+                                        "width": 24,
+                                      },
+                                    ]
+                                  }
+                                  tintColor="#0E0F13"
+                                  vbHeight={24}
+                                  vbWidth={24}
+                                  width={24}
+                                >
+                                  <RNSVGGroup
+                                    fill={
+                                      Object {
+                                        "payload": 4278190080,
+                                        "type": 0,
+                                      }
+                                    }
+                                  >
+                                    <RNSVGPath
+                                      clipRule={0}
+                                      d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
+                                      fill={
+                                        Object {
+                                          "type": 2,
+                                        }
+                                      }
+                                      fillRule={0}
+                                      propList={
+                                        Array [
+                                          "fill",
+                                          "fillRule",
+                                        ]
+                                      }
+                                    />
+                                  </RNSVGGroup>
+                                </RNSVGSvgView>
+                              </View>
+                            </View>
+                            <View
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessibilityRole="header"
+                              accessible={false}
+                              importantForAccessibility="no-hide-descendants"
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "marginHorizontal": 16,
+                                }
+                              }
+                            >
+                              <Text
+                                accessible={false}
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "textAlign": "center",
+                                    },
+                                    Object {
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                    Object {
+                                      "opacity": 1,
+                                    },
+                                  ]
+                                }
+                              />
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "flexDirection": "row",
+                                  },
+                                  Object {
+                                    "flexShrink": 0,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                accessibilityLabel="Contextual Help"
+                                accessibilityRole="button"
+                                accessibilityState={
+                                  Object {
+                                    "disabled": false,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={8}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                              >
+                                <View
+                                  style={
+                                    Array [
+                                      Object {
+                                        "height": 24,
+                                        "width": 24,
+                                      },
+                                      Object {
+                                        "alignItems": "center",
+                                      },
+                                      Object {
+                                        "justifyContent": "center",
+                                      },
+                                      Object {
+                                        "transform": Array [
+                                          Object {
+                                            "scale": undefined,
+                                          },
+                                        ],
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    animatedProps={
+                                      Object {
+                                        "color": undefined,
+                                      }
+                                    }
+                                    bbHeight={24}
+                                    bbWidth={24}
+                                    focusable={false}
+                                    height={24}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "color": "#0E0F13",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 24,
+                                          "width": 24,
+                                        },
+                                      ]
+                                    }
+                                    tintColor="#0E0F13"
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={24}
+                                  >
+                                    <RNSVGGroup
+                                      fill={
+                                        Object {
+                                          "payload": 4278190080,
+                                          "type": 0,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGPath
+                                        d="M6 8c0-3.31371 2.68629-6 6-6 3.3137 0 6 2.68629 6 6 0 2.7248-1.8172 5.0278-4.3079 5.7583C12.3754 14.1446 11 15.2973 11 17v1c0 .5523.4477 1 1 1s1-.4477 1-1v-1c0-.5064.452-1.087 1.255-1.3225C17.5744 14.7039 20 11.6365 20 8c0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 .55228.44772 1 1 1s1-.44772 1-1Zm7.5 14.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z"
+                                        fill={
+                                          Object {
+                                            "type": 2,
+                                          }
+                                        }
+                                        propList={
+                                          Array [
+                                            "fill",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
                         </View>
                       </View>
-                    </RCTScrollView>
+                    </View>
                   </View>
                 </View>
               </View>
             </View>
           </View>
-        </View>
-      </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "height": 44,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 1,
+          }
+        }
+      />
     </View>
   </RNCSafeAreaProvider>
 </View>
@@ -993,718 +2042,815 @@ exports[`MessageDetailsScreen should match the snapshot when there is an error 1
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
-      <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
+      <RNSScreenContainer
         onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
-      >
-        <View
-          accessibilityRole="header"
-          style={
-            Array [
-              Object {
-                "backgroundColor": "#FFFFFF",
-              },
-              Object {
-                "borderBottomWidth": 1,
-              },
-              Object {
-                "backgroundColor": "#FFFFFF",
-                "borderColor": "transparent",
-              },
-            ]
-          }
-        >
-          <View
-            style={
-              Array [
-                Object {
-                  "marginTop": 20,
-                },
-                Object {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "flexGrow": 1,
-                  "height": 56,
-                  "justifyContent": "space-between",
-                  "paddingHorizontal": 24,
-                },
-              ]
-            }
-          >
-            <View
-              accessibilityLabel="Back"
-              accessibilityRole="button"
-              accessibilityState={
-                Object {
-                  "disabled": false,
-                }
-              }
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              hitSlop={8}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-            >
-              <View
-                style={
-                  Array [
-                    Object {
-                      "height": 24,
-                      "width": 24,
-                    },
-                    Object {
-                      "alignItems": "center",
-                    },
-                    Object {
-                      "justifyContent": "center",
-                    },
-                    Object {
-                      "transform": Array [
-                        Object {
-                          "scale": undefined,
-                        },
-                      ],
-                    },
-                  ]
-                }
-              >
-                <RNSVGSvgView
-                  accessibilityElementsHidden={true}
-                  accessibilityLabel=""
-                  accessible={false}
-                  align="xMidYMid"
-                  animatedProps={
-                    Object {
-                      "color": undefined,
-                    }
-                  }
-                  bbHeight={24}
-                  bbWidth={24}
-                  color={4279111443}
-                  focusable={false}
-                  height={24}
-                  importantForAccessibility="no-hide-descendants"
-                  meetOrSlice={0}
-                  minX={0}
-                  minY={0}
-                  style={
-                    Array [
-                      Object {
-                        "backgroundColor": "transparent",
-                        "borderWidth": 0,
-                      },
-                      Object {
-                        "color": "#0E0F13",
-                      },
-                      Object {
-                        "flex": 0,
-                        "height": 24,
-                        "width": 24,
-                      },
-                    ]
-                  }
-                  tintColor={4279111443}
-                  vbHeight={24}
-                  vbWidth={24}
-                  width={24}
-                >
-                  <RNSVGGroup>
-                    <RNSVGPath
-                      clipRule={0}
-                      d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
-                      fill={
-                        Array [
-                          2,
-                        ]
-                      }
-                      fillRule={0}
-                      propList={
-                        Array [
-                          "fill",
-                          "fillRule",
-                        ]
-                      }
-                    />
-                  </RNSVGGroup>
-                </RNSVGSvgView>
-              </View>
-            </View>
-            <Text
-              numberOfLines={1}
-              style={
-                Array [
-                  Object {
-                    "flexGrow": 1,
-                    "flexShrink": 1,
-                    "fontSize": 14,
-                    "marginHorizontal": 16,
-                    "textAlign": "center",
-                  },
-                  Object {
-                    "fontFamily": "Titillium Web",
-                    "fontStyle": "normal",
-                    "fontWeight": "600",
-                  },
-                  Object {
-                    "opacity": 1,
-                  },
-                ]
-              }
-            />
-            <View
-              style={
-                Array [
-                  Object {
-                    "flexDirection": "row",
-                  },
-                  Object {
-                    "flexShrink": 0,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="Contextual Help"
-                accessibilityRole="button"
-                accessibilityState={
-                  Object {
-                    "disabled": false,
-                  }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                hitSlop={8}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-              >
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "height": 24,
-                        "width": 24,
-                      },
-                      Object {
-                        "alignItems": "center",
-                      },
-                      Object {
-                        "justifyContent": "center",
-                      },
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "scale": undefined,
-                          },
-                        ],
-                      },
-                    ]
-                  }
-                >
-                  <RNSVGSvgView
-                    accessibilityElementsHidden={true}
-                    accessibilityLabel=""
-                    accessible={false}
-                    align="xMidYMid"
-                    animatedProps={
-                      Object {
-                        "color": undefined,
-                      }
-                    }
-                    bbHeight={24}
-                    bbWidth={24}
-                    color={4279111443}
-                    focusable={false}
-                    height={24}
-                    importantForAccessibility="no-hide-descendants"
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      Array [
-                        Object {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        Object {
-                          "color": "#0E0F13",
-                        },
-                        Object {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    tintColor={4279111443}
-                    vbHeight={24}
-                    vbWidth={24}
-                    width={24}
-                  >
-                    <RNSVGGroup>
-                      <RNSVGPath
-                        d="M6 8c0-3.31371 2.68629-6 6-6 3.3137 0 6 2.68629 6 6 0 2.7248-1.8172 5.0278-4.3079 5.7583C12.3754 14.1446 11 15.2973 11 17v1c0 .5523.4477 1 1 1s1-.4477 1-1v-1c0-.5064.452-1.087 1.255-1.3225C17.5744 14.7039 20 11.6365 20 8c0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 .55228.44772 1 1 1s1-.44772 1-1Zm7.5 14.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z"
-                        fill={
-                          Array [
-                            2,
-                          ]
-                        }
-                        propList={
-                          Array [
-                            "fill",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "flex": 1,
           }
         }
       >
-        <View
+        <RNSModalScreen
+          activityState={2}
           collapsable={false}
-          style={
+          forwardedRef={[Function]}
+          gestureResponseDistance={
             Object {
-              "opacity": 1,
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
             }
           }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          onGestureCancel={[Function]}
           pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
           style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
             Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={1}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
-                    <RCTSafeAreaView
-                      emulateUnlessSupported={true}
+                    <View
                       style={
                         Object {
-                          "flexGrow": 1,
-                          "marginHorizontal": 24,
+                          "flex": 1,
                         }
                       }
                     >
-                      <RCTScrollView
-                        centerContent={true}
-                        collapsable={false}
-                        contentContainerStyle={
-                          Array [
-                            Object {
-                              "alignContent": "center",
-                              "alignItems": "stretch",
-                              "flex": 1,
-                              "justifyContent": "center",
-                            },
-                            false,
-                          ]
-                        }
-                        handlerTag={2}
-                        handlerType="NativeViewGestureHandler"
-                        onGestureHandlerEvent={[Function]}
-                        onGestureHandlerStateChange={[Function]}
-                        waitFor={
-                          Array [
-                            Object {
-                              "current": null,
-                            },
-                          ]
+                      <RNCSafeAreaView
+                        style={
+                          Object {
+                            "flexGrow": 1,
+                            "marginHorizontal": 24,
+                          }
                         }
                       >
-                        <View>
-                          <View
-                            style={
+                        <RCTScrollView
+                          centerContent={true}
+                          collapsable={false}
+                          contentContainerStyle={
+                            Array [
                               Object {
-                                "alignItems": "center",
+                                "alignContent": "center",
+                                "alignItems": "stretch",
+                                "flex": 1,
+                                "justifyContent": "center",
+                              },
+                              false,
+                            ]
+                          }
+                          handlerTag={2}
+                          handlerType="NativeViewGestureHandler"
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          waitFor={
+                            Array [
+                              Object {
+                                "current": null,
+                              },
+                            ]
+                          }
+                        >
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                }
+                              }
+                            >
+                              <RNSVGSvgView
+                                align="xMidYMid"
+                                bbHeight={120}
+                                bbWidth={120}
+                                color="#00C5CA"
+                                focusable={false}
+                                height={120}
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 120,
+                                      "width": 120,
+                                    },
+                                  ]
+                                }
+                                tintColor="#00C5CA"
+                                vbHeight={240}
+                                vbWidth={240}
+                                width={120}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    d="M107.085-.00176c8.154 4.82452 16.613 7.64993 26.423 5.57086.846 1.7059 1.647 3.27854 2.412 4.8689 4.086 8.5651 9.458 16.0907 17.405 21.6793 6.048 4.2559 12.878 6.2728 20.51 7.339 1.008 3.6517 1.818 7.3922 3.078 10.9817 5.993 17.0858 17.144 29.2581 34.774 35.1577.855.2844 1.656.7197 2.835 1.2439-.702 18.9514 6.857 33.6914 23.786 43.3314-2.637 8.77-2.979 17.193 1.701 25.438-4.617 2.275-9.333 1.342-13.779 1.253-24.344-.462-47.364-6.095-68.225-18.792-25.352-15.424-44.395-36.455-55.222-64.0336-9.3681-23.8471-8.1172-47.641 2.457-70.95509.432-.95957 1.089-1.82141 1.863-3.10084l-.018.01777Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4289392367,
+                                        "type": 0,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M109.854 11.4438c.308-.7527 1.174-1.1168 1.936-.8134 5.193 2.0678 10.161 3.0476 15.22 3.0476.402 0 .773-.0003 1.13-.0163.594-.0266 1.147.2986 1.406.8271 5.076 10.3451 11.441 18.072 19.412 23.6721 5.074 3.5598 10.843 6.0292 17.921 7.5916.544.12.974.5301 1.115 1.0626.528 1.9974 1.092 4.0131 1.81 6.0443l.001.0035c6.628 18.908 18.825 31.837 36.306 38.6155.542.2103.91.7141.942 1.2888.921 16.9038 8.391 30.6088 21.912 40.2658.666.475.815 1.394.334 2.051-.482.658-1.412.806-2.077.33-14.018-10.012-21.89-24.212-23.082-41.5496-17.882-7.2088-30.368-20.7035-37.146-40.0383-.65-1.8408-1.176-3.6538-1.649-5.407-7.018-1.6462-12.891-4.2005-18.11-7.8623l-.001-.0006c-8.22-5.7753-14.755-13.644-19.945-23.9397-.09.0003-.178.0003-.264.0003h-.015c-5.47 0-10.815-1.0638-16.332-3.2608-.762-.3034-1.131-1.1596-.824-1.9122Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278240714,
+                                        "type": 0,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M30.7695 235.468c-6.1197-6.042-6.1197-15.869 0-21.911l17.2971-17.077 3.8158 3.768-17.2971 17.077c-4.0138 3.962-4.0138 10.413 0 14.375 4.0138 3.963 10.5474 3.963 14.5612 0l3.8158 3.768c-6.1196 6.041-16.0731 6.041-22.1928 0ZM128.876 111.262l-32.2061 31.797 3.8181 3.769 32.207-31.796-3.819-3.77Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4289392367,
+                                        "type": 0,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M3.29384 203.162 0 200.523c7.29864-8.876 71.8704-86.54 93.2353-79.565 5.8317 1.901 9.3057 4.949 10.3407 9.045 2.232 8.894-8.2168 19.636-13.2385 24.798l-.9.924-3.0778-2.888.9089-.942c4.1488-4.264 13.8504-14.242 12.1764-20.888-.6569-2.612-3.1948-4.656-7.5506-6.068-7.7126-2.515-37.6721 16.232-88.60056 78.223Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278927075,
+                                        "type": 0,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M92.4699 174.411c-9.5755 2.506-18.6921-2.95-22.8319-7.881-3.3478-3.989-2.8888-9.889 1.062-13.434 4.5627-4.096 12.5813-5.091 21.4009 4.389l-3.1228 2.835c-5.7057-6.131-11.4565-7.677-15.4163-4.123-2.2589 2.035-2.5468 5.393-.6479 7.659 4.0588 4.833 13.9133 10.324 23.1378 4.442 2.7899-1.777 4.3733-4.016 4.8413-6.85 1.251-7.623-6.0472-16.721-6.1192-16.81l3.3028-2.63c.351.426 8.5584 10.617 7.0104 20.089-.657 4.016-2.916 7.285-6.7314 9.72-1.9439 1.244-3.9148 2.079-5.8677 2.594h-.018Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278927075,
+                                        "type": 0,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M79.0336 194.02c-5.1568 1.351-10.0885.48-14.4803-2.612-4.3558-3.065-6.5517-6.726-6.5337-10.884.036-9.125 11.1415-16.935 11.6185-17.254l2.4388 3.429c-2.7178 1.893-9.7915 8.077-9.8095 13.852 0 2.754 1.548 5.189 4.7518 7.445 4.4638 3.137 9.5305 3.252 15.0742.329 8.7116-4.602 15.0563-15.06 14.9123-19.591l4.2383-.134c.207 6.531-7.2442 18.179-17.1527 23.412-1.7009.898-3.3928 1.564-5.0667 2.008h.009Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278927075,
+                                        "type": 0,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M67.0458 207.463c-8.3696 2.185-15.1102-.391-19.169-7.437-3.1769-5.517-3.7979-10.422-1.827-14.571 3.4469-7.268 13.5624-9.125 13.9853-9.205l.747 4.123c-.072.008-8.3876 1.563-10.8894 6.868-1.35 2.843-.783 6.45 1.6739 10.715 3.5278 6.122 9.0985 7.632 17.0181 4.611 6.0477-2.301 11.3664-6.655 15.3892-12.581l3.6359-5.357 3.5278 2.327-3.6358 5.367c-4.5088 6.646-10.5205 11.541-17.3872 14.154-1.0439.399-2.0699.728-3.0688.986Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278927075,
+                                        "type": 0,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="m53.3313 224.754-3.0598-2.905c22.9668-23.501 15.4252-17.495 15.6232-17.832l3.6808 2.079c-.189.337 7.0917-5.225-16.2442 18.658Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278927075,
+                                        "type": 0,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    clipRule={0}
+                                    d="M93.3641 80.6211c.542.6099.4808 1.5383-.1366 2.0737L59.0022 112.37c-.6174.536-1.5573.475-2.0993-.134-.542-.61-.4809-1.539.1365-2.074l34.2253-29.6758c.6175-.5353 1.5574-.4749 2.0994.1349ZM145.714 157.555c.542.61.481 1.538-.137 2.073l-34.225 29.676c-.618.535-1.558.475-2.1-.135s-.48-1.538.137-2.073l34.225-29.676c.618-.536 1.558-.475 2.1.135Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278240714,
+                                        "type": 0,
+                                      }
+                                    }
+                                    fillRule={0}
+                                    propList={
+                                      Array [
+                                        "fill",
+                                        "fillRule",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                              <View
+                                style={
+                                  Object {
+                                    "height": 24,
+                                  }
+                                }
+                              />
+                            </View>
+                            <Text
+                              allowFontScaling={false}
+                              color="bluegreyDark"
+                              defaultColor="bluegreyDark"
+                              defaultWeight="SemiBold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 24,
+                                  "lineHeight": 34,
+                                }
                               }
-                            }
-                          >
-                            <RNSVGSvgView
-                              align="xMidYMid"
-                              bbHeight={120}
-                              bbWidth={120}
-                              color={4278240714}
-                              focusable={false}
-                              height={120}
-                              meetOrSlice={0}
-                              minX={0}
-                              minY={0}
                               style={
                                 Array [
                                   Object {
-                                    "backgroundColor": "transparent",
-                                    "borderWidth": 0,
+                                    "textAlign": "center",
+                                  },
+                                  Object {
+                                    "fontSize": 24,
+                                    "lineHeight": 34,
                                   },
                                   Object {
-                                    "flex": 0,
-                                    "height": 120,
-                                    "width": 120,
+                                    "color": "#17324D",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
                                   },
                                 ]
                               }
-                              tintColor={4278240714}
-                              vbHeight={240}
-                              vbWidth={240}
-                              width={120}
+                              weight="SemiBold"
                             >
-                              <RNSVGGroup>
-                                <RNSVGPath
-                                  d="M107.085-.00176c8.154 4.82452 16.613 7.64993 26.423 5.57086.846 1.7059 1.647 3.27854 2.412 4.8689 4.086 8.5651 9.458 16.0907 17.405 21.6793 6.048 4.2559 12.878 6.2728 20.51 7.339 1.008 3.6517 1.818 7.3922 3.078 10.9817 5.993 17.0858 17.144 29.2581 34.774 35.1577.855.2844 1.656.7197 2.835 1.2439-.702 18.9514 6.857 33.6914 23.786 43.3314-2.637 8.77-2.979 17.193 1.701 25.438-4.617 2.275-9.333 1.342-13.779 1.253-24.344-.462-47.364-6.095-68.225-18.792-25.352-15.424-44.395-36.455-55.222-64.0336-9.3681-23.8471-8.1172-47.641 2.457-70.95509.432-.95957 1.089-1.82141 1.863-3.10084l-.018.01777Z"
-                                  fill={4289392367}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  clipRule={0}
-                                  d="M109.854 11.4438c.308-.7527 1.174-1.1168 1.936-.8134 5.193 2.0678 10.161 3.0476 15.22 3.0476.402 0 .773-.0003 1.13-.0163.594-.0266 1.147.2986 1.406.8271 5.076 10.3451 11.441 18.072 19.412 23.6721 5.074 3.5598 10.843 6.0292 17.921 7.5916.544.12.974.5301 1.115 1.0626.528 1.9974 1.092 4.0131 1.81 6.0443l.001.0035c6.628 18.908 18.825 31.837 36.306 38.6155.542.2103.91.7141.942 1.2888.921 16.9038 8.391 30.6088 21.912 40.2658.666.475.815 1.394.334 2.051-.482.658-1.412.806-2.077.33-14.018-10.012-21.89-24.212-23.082-41.5496-17.882-7.2088-30.368-20.7035-37.146-40.0383-.65-1.8408-1.176-3.6538-1.649-5.407-7.018-1.6462-12.891-4.2005-18.11-7.8623l-.001-.0006c-8.22-5.7753-14.755-13.644-19.945-23.9397-.09.0003-.178.0003-.264.0003h-.015c-5.47 0-10.815-1.0638-16.332-3.2608-.762-.3034-1.131-1.1596-.824-1.9122Z"
-                                  fill={4278240714}
-                                  fillRule={0}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                      "fillRule",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  d="M30.7695 235.468c-6.1197-6.042-6.1197-15.869 0-21.911l17.2971-17.077 3.8158 3.768-17.2971 17.077c-4.0138 3.962-4.0138 10.413 0 14.375 4.0138 3.963 10.5474 3.963 14.5612 0l3.8158 3.768c-6.1196 6.041-16.0731 6.041-22.1928 0ZM128.876 111.262l-32.2061 31.797 3.8181 3.769 32.207-31.796-3.819-3.77Z"
-                                  fill={4289392367}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  d="M3.29384 203.162 0 200.523c7.29864-8.876 71.8704-86.54 93.2353-79.565 5.8317 1.901 9.3057 4.949 10.3407 9.045 2.232 8.894-8.2168 19.636-13.2385 24.798l-.9.924-3.0778-2.888.9089-.942c4.1488-4.264 13.8504-14.242 12.1764-20.888-.6569-2.612-3.1948-4.656-7.5506-6.068-7.7126-2.515-37.6721 16.232-88.60056 78.223Z"
-                                  fill={4278927075}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  d="M92.4699 174.411c-9.5755 2.506-18.6921-2.95-22.8319-7.881-3.3478-3.989-2.8888-9.889 1.062-13.434 4.5627-4.096 12.5813-5.091 21.4009 4.389l-3.1228 2.835c-5.7057-6.131-11.4565-7.677-15.4163-4.123-2.2589 2.035-2.5468 5.393-.6479 7.659 4.0588 4.833 13.9133 10.324 23.1378 4.442 2.7899-1.777 4.3733-4.016 4.8413-6.85 1.251-7.623-6.0472-16.721-6.1192-16.81l3.3028-2.63c.351.426 8.5584 10.617 7.0104 20.089-.657 4.016-2.916 7.285-6.7314 9.72-1.9439 1.244-3.9148 2.079-5.8677 2.594h-.018Z"
-                                  fill={4278927075}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  d="M79.0336 194.02c-5.1568 1.351-10.0885.48-14.4803-2.612-4.3558-3.065-6.5517-6.726-6.5337-10.884.036-9.125 11.1415-16.935 11.6185-17.254l2.4388 3.429c-2.7178 1.893-9.7915 8.077-9.8095 13.852 0 2.754 1.548 5.189 4.7518 7.445 4.4638 3.137 9.5305 3.252 15.0742.329 8.7116-4.602 15.0563-15.06 14.9123-19.591l4.2383-.134c.207 6.531-7.2442 18.179-17.1527 23.412-1.7009.898-3.3928 1.564-5.0667 2.008h.009Z"
-                                  fill={4278927075}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  d="M67.0458 207.463c-8.3696 2.185-15.1102-.391-19.169-7.437-3.1769-5.517-3.7979-10.422-1.827-14.571 3.4469-7.268 13.5624-9.125 13.9853-9.205l.747 4.123c-.072.008-8.3876 1.563-10.8894 6.868-1.35 2.843-.783 6.45 1.6739 10.715 3.5278 6.122 9.0985 7.632 17.0181 4.611 6.0477-2.301 11.3664-6.655 15.3892-12.581l3.6359-5.357 3.5278 2.327-3.6358 5.367c-4.5088 6.646-10.5205 11.541-17.3872 14.154-1.0439.399-2.0699.728-3.0688.986Z"
-                                  fill={4278927075}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  d="m53.3313 224.754-3.0598-2.905c22.9668-23.501 15.4252-17.495 15.6232-17.832l3.6808 2.079c-.189.337 7.0917-5.225-16.2442 18.658Z"
-                                  fill={4278927075}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  clipRule={0}
-                                  d="M93.3641 80.6211c.542.6099.4808 1.5383-.1366 2.0737L59.0022 112.37c-.6174.536-1.5573.475-2.0993-.134-.542-.61-.4809-1.539.1365-2.074l34.2253-29.6758c.6175-.5353 1.5574-.4749 2.0994.1349ZM145.714 157.555c.542.61.481 1.538-.137 2.073l-34.225 29.676c-.618.535-1.558.475-2.1-.135s-.48-1.538.137-2.073l34.225-29.676c.618-.536 1.558-.475 2.1.135Z"
-                                  fill={4278240714}
-                                  fillRule={0}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                      "fillRule",
-                                    ]
-                                  }
-                                />
-                              </RNSVGGroup>
-                            </RNSVGSvgView>
+                              Qualcosa è andato storto
+                            </Text>
                             <View
                               style={
                                 Object {
-                                  "height": 24,
+                                  "height": 8,
                                 }
                               }
                             />
+                            <Text
+                              allowFontScaling={false}
+                              color="bluegrey"
+                              defaultColor="bluegrey"
+                              defaultWeight="Regular"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 16,
+                                  "lineHeight": 24,
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "textAlign": "center",
+                                  },
+                                  Object {
+                                    "fontSize": 16,
+                                    "lineHeight": 24,
+                                  },
+                                  Object {
+                                    "color": "#475A6D",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "400",
+                                  },
+                                ]
+                              }
+                              weight="Regular"
+                            >
+                              Non è stato possibile recuperare i dettagli del tuo messaggio. Riprova per favore
+                            </Text>
                           </View>
-                          <Text
-                            allowFontScaling={false}
-                            color="bluegreyDark"
-                            defaultColor="bluegreyDark"
-                            defaultWeight="SemiBold"
-                            font="TitilliumWeb"
-                            fontStyle={
+                        </RCTScrollView>
+                      </RNCSafeAreaView>
+                    </View>
+                    <View
+                      collapsable={false}
+                      pointerEvents="box-none"
+                      style={Object {}}
+                    >
+                      <View
+                        accessibilityElementsHidden={false}
+                        importantForAccessibility="auto"
+                        onLayout={[Function]}
+                        pointerEvents="box-none"
+                        style={null}
+                      >
+                        <View
+                          accessibilityRole="header"
+                          style={
+                            Array [
                               Object {
-                                "fontSize": 24,
-                                "lineHeight": 34,
-                              }
-                            }
-                            style={
-                              Array [
-                                Object {
-                                  "textAlign": "center",
-                                },
-                                Object {
-                                  "fontSize": 24,
-                                  "lineHeight": 34,
-                                },
-                                Object {
-                                  "color": "#17324D",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "600",
-                                },
-                              ]
-                            }
-                            weight="SemiBold"
-                          >
-                            Qualcosa è andato storto
-                          </Text>
-                          <View
-                            style={
+                                "backgroundColor": "#FFFFFF",
+                              },
                               Object {
-                                "height": 8,
-                              }
-                            }
-                          />
-                          <Text
-                            color="grey-650"
-                            defaultColor="blue"
-                            defaultWeight="Bold"
-                            font="TitilliumWeb"
-                            fontStyle={
+                                "borderBottomWidth": 1,
+                              },
                               Object {
-                                "fontSize": 14,
-                                "lineHeight": 21,
-                              }
-                            }
+                                "backgroundColor": "#FFFFFF",
+                                "borderColor": "transparent",
+                              },
+                            ]
+                          }
+                        >
+                          <View
                             style={
                               Array [
                                 Object {
-                                  "textAlign": "center",
-                                },
-                                Object {
-                                  "fontSize": 14,
-                                  "lineHeight": 21,
+                                  "marginTop": 0,
                                 },
                                 Object {
-                                  "color": "#636B82",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "400",
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "flexGrow": 1,
+                                  "height": 56,
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 24,
                                 },
                               ]
                             }
-                            weight="Regular"
                           >
-                            Non è stato possibile recuperare i dettagli del tuo messaggio. Riprova per favore
-                          </Text>
+                            <View
+                              accessibilityLabel="Back"
+                              accessibilityRole="button"
+                              accessibilityState={
+                                Object {
+                                  "disabled": false,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              hitSlop={8}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
+                            >
+                              <View
+                                style={
+                                  Array [
+                                    Object {
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                    Object {
+                                      "alignItems": "center",
+                                    },
+                                    Object {
+                                      "justifyContent": "center",
+                                    },
+                                    Object {
+                                      "transform": Array [
+                                        Object {
+                                          "scale": undefined,
+                                        },
+                                      ],
+                                    },
+                                  ]
+                                }
+                              >
+                                <RNSVGSvgView
+                                  accessibilityElementsHidden={true}
+                                  accessibilityLabel=""
+                                  accessible={false}
+                                  align="xMidYMid"
+                                  animatedProps={
+                                    Object {
+                                      "color": undefined,
+                                    }
+                                  }
+                                  bbHeight={24}
+                                  bbWidth={24}
+                                  focusable={false}
+                                  height={24}
+                                  importantForAccessibility="no-hide-descendants"
+                                  meetOrSlice={0}
+                                  minX={0}
+                                  minY={0}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "backgroundColor": "transparent",
+                                        "borderWidth": 0,
+                                      },
+                                      Object {
+                                        "color": "#0E0F13",
+                                      },
+                                      Object {
+                                        "flex": 0,
+                                        "height": 24,
+                                        "width": 24,
+                                      },
+                                    ]
+                                  }
+                                  tintColor="#0E0F13"
+                                  vbHeight={24}
+                                  vbWidth={24}
+                                  width={24}
+                                >
+                                  <RNSVGGroup
+                                    fill={
+                                      Object {
+                                        "payload": 4278190080,
+                                        "type": 0,
+                                      }
+                                    }
+                                  >
+                                    <RNSVGPath
+                                      clipRule={0}
+                                      d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
+                                      fill={
+                                        Object {
+                                          "type": 2,
+                                        }
+                                      }
+                                      fillRule={0}
+                                      propList={
+                                        Array [
+                                          "fill",
+                                          "fillRule",
+                                        ]
+                                      }
+                                    />
+                                  </RNSVGGroup>
+                                </RNSVGSvgView>
+                              </View>
+                            </View>
+                            <View
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessibilityRole="header"
+                              accessible={false}
+                              importantForAccessibility="no-hide-descendants"
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "marginHorizontal": 16,
+                                }
+                              }
+                            >
+                              <Text
+                                accessible={false}
+                                numberOfLines={1}
+                                style={
+                                  Array [
+                                    Object {
+                                      "fontSize": 14,
+                                      "textAlign": "center",
+                                    },
+                                    Object {
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
+                                    },
+                                    Object {
+                                      "opacity": 1,
+                                    },
+                                  ]
+                                }
+                              />
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "flexDirection": "row",
+                                  },
+                                  Object {
+                                    "flexShrink": 0,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                accessibilityLabel="Contextual Help"
+                                accessibilityRole="button"
+                                accessibilityState={
+                                  Object {
+                                    "disabled": false,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={8}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                              >
+                                <View
+                                  style={
+                                    Array [
+                                      Object {
+                                        "height": 24,
+                                        "width": 24,
+                                      },
+                                      Object {
+                                        "alignItems": "center",
+                                      },
+                                      Object {
+                                        "justifyContent": "center",
+                                      },
+                                      Object {
+                                        "transform": Array [
+                                          Object {
+                                            "scale": undefined,
+                                          },
+                                        ],
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    animatedProps={
+                                      Object {
+                                        "color": undefined,
+                                      }
+                                    }
+                                    bbHeight={24}
+                                    bbWidth={24}
+                                    focusable={false}
+                                    height={24}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
+                                        Object {
+                                          "color": "#0E0F13",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 24,
+                                          "width": 24,
+                                        },
+                                      ]
+                                    }
+                                    tintColor="#0E0F13"
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={24}
+                                  >
+                                    <RNSVGGroup
+                                      fill={
+                                        Object {
+                                          "payload": 4278190080,
+                                          "type": 0,
+                                        }
+                                      }
+                                    >
+                                      <RNSVGPath
+                                        d="M6 8c0-3.31371 2.68629-6 6-6 3.3137 0 6 2.68629 6 6 0 2.7248-1.8172 5.0278-4.3079 5.7583C12.3754 14.1446 11 15.2973 11 17v1c0 .5523.4477 1 1 1s1-.4477 1-1v-1c0-.5064.452-1.087 1.255-1.3225C17.5744 14.7039 20 11.6365 20 8c0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 .55228.44772 1 1 1s1-.44772 1-1Zm7.5 14.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z"
+                                        fill={
+                                          Object {
+                                            "type": 2,
+                                          }
+                                        }
+                                        propList={
+                                          Array [
+                                            "fill",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
                         </View>
-                      </RCTScrollView>
-                    </RCTSafeAreaView>
+                      </View>
+                    </View>
                   </View>
                 </View>
               </View>
             </View>
           </View>
-        </View>
-      </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "height": 44,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 1,
+          }
+        }
+      />
     </View>
   </RNCSafeAreaProvider>
 </View>
diff --git a/ts/features/pn/screens/__test__/__snapshots__/PaidPaymentScreen.test.tsx.snap b/ts/features/pn/screens/__test__/__snapshots__/PaidPaymentScreen.test.tsx.snap
index 8af2ce68b75..032cdb73248 100644
--- a/ts/features/pn/screens/__test__/__snapshots__/PaidPaymentScreen.test.tsx.snap
+++ b/ts/features/pn/screens/__test__/__snapshots__/PaidPaymentScreen.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PaidPaymentScreen should render with back button, title, help button, paid banner and notice code but no creditor tax id 1`] = `
+exports[`PaidPaymentScreen should match snapshot 1`] = `
 <View
   style={
     Object {
@@ -20,33 +20,50 @@ exports[`PaidPaymentScreen should render with back button, title, help button, p
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
-      <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
+      <RNSScreenContainer
         onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
       >
-        <View
+        <RNSModalScreen
+          activityState={2}
           collapsable={false}
+          forwardedRef={[Function]}
+          gestureResponseDistance={
+            Object {
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
+            }
+          }
+          onGestureCancel={[Function]}
           pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
           style={
             Object {
               "bottom": 0,
               "left": 0,
-              "opacity": 1,
               "position": "absolute",
               "right": 0,
               "top": 0,
-              "zIndex": 0,
             }
           }
         >
@@ -54,312 +71,415 @@ exports[`PaidPaymentScreen should render with back button, title, help button, p
             collapsable={false}
             style={
               Object {
-                "backgroundColor": "rgb(255, 255, 255)",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
-              }
-            }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
+                "opacity": 1,
               }
             }
           />
           <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
-              Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              pointerEvents="box-none"
-              style={
+              Array [
                 Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
-                collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
-                  }
-                }
-              >
-                PN_CANCELLED_MESSAGE_PAID_PAYMENT
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
-          pointerEvents="box-none"
-          style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
-            Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
+                  "display": "flex",
+                  "overflow": undefined,
                 },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 },
-              },
+              ]
             }
-          }
-        >
-          <View
-            collapsable={false}
-            needsOffscreenAlphaCompositing={false}
-            pointerEvents="box-none"
-            style={
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={2}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "rgb(242, 242, 242)",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
                       Object {
-                        "backgroundColor": "rgb(242, 242, 242)",
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
                     <View
                       style={
                         Object {
-                          "backgroundColor": "#fff",
                           "flex": 1,
-                          "height": 1334,
                         }
                       }
                     >
-                      <View>
-                        <View>
-                          <RCTSafeAreaView
-                            emulateUnlessSupported={true}
-                            style={
+                      <RNCSafeAreaView
+                        style={
+                          Object {
+                            "flexGrow": 1,
+                            "marginHorizontal": 24,
+                          }
+                        }
+                      >
+                        <RCTScrollView
+                          centerContent={true}
+                          collapsable={false}
+                          contentContainerStyle={
+                            Array [
+                              Object {
+                                "alignContent": "center",
+                                "alignItems": "stretch",
+                                "flex": 1,
+                                "justifyContent": "center",
+                              },
+                              false,
+                            ]
+                          }
+                          handlerTag={2}
+                          handlerType="NativeViewGestureHandler"
+                          onGestureHandlerEvent={[Function]}
+                          onGestureHandlerStateChange={[Function]}
+                          waitFor={
+                            Array [
                               Object {
-                                "backgroundColor": "#F8F8F8",
+                                "current": null,
+                              },
+                            ]
+                          }
+                        >
+                          <View>
+                            <View
+                              style={
+                                Object {
+                                  "alignItems": "center",
+                                }
                               }
-                            }
-                          >
+                            >
+                              <RNSVGSvgView
+                                align="xMidYMid"
+                                bbHeight={120}
+                                bbWidth={120}
+                                color="#00C5CA"
+                                focusable={false}
+                                height={120}
+                                meetOrSlice={0}
+                                minX={0}
+                                minY={0}
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "borderWidth": 0,
+                                    },
+                                    Object {
+                                      "flex": 0,
+                                      "height": 120,
+                                      "width": 120,
+                                    },
+                                  ]
+                                }
+                                tintColor="#00C5CA"
+                                vbHeight={240}
+                                vbWidth={240}
+                                width={120}
+                              >
+                                <RNSVGGroup
+                                  fill={
+                                    Object {
+                                      "payload": 4278190080,
+                                      "type": 0,
+                                    }
+                                  }
+                                >
+                                  <RNSVGPath
+                                    d="M107.201 57.83C135.031 57.83 157.591 80.39 157.591 108.22C157.591 110.02 157.491 111.8 157.311 113.55L153.681 110.92L149.711 109.08C149.711 109.08 144.131 109.77 143.221 109.08C142.311 108.39 139.861 109.15 139.541 109.33C139.221 109.51 136.321 112.4 136.321 112.4L135.041 115.94V119.88L136.321 122.78V124.67L130.761 123.29C130.761 123.29 129.951 123.1 128.051 122.66C126.161 122.22 120.281 122.64 120.091 121.79C119.901 120.94 119.991 120.87 118.561 120.69C117.131 120.52 113.611 119.88 113.611 119.88L110.841 119.53L108.121 119.29C108.121 119.29 104.711 120.12 104.491 120.27C104.261 120.42 101.821 126.59 101.821 126.59V128.57L100.891 130.11L98.4505 131.47L95.1005 135.2L95.5305 143.32L99.5506 148.05L95.5305 153.63L96.5205 157.45C73.8205 152.55 56.8105 132.37 56.8105 108.2C56.8105 80.37 79.3705 57.81 107.201 57.81V57.83Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4289392367,
+                                        "type": 0,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M97.8199 152.92C97.7099 152.92 97.6099 152.91 97.4999 152.89C76.5999 148.38 61.4199 129.56 61.4199 108.15C61.4199 82.91 81.9599 62.37 107.2 62.37C132.44 62.37 152.98 82.9 152.98 108.15C152.98 108.98 152.31 109.65 151.48 109.65C150.65 109.65 149.98 108.98 149.98 108.15C149.98 84.56 130.79 65.37 107.2 65.37C83.6099 65.37 64.4199 84.56 64.4199 108.15C64.4199 128.16 78.5999 145.74 98.1299 149.95C98.9399 150.12 99.4499 150.92 99.2799 151.73C99.1299 152.43 98.5099 152.91 97.8199 152.91V152.92Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278240714,
+                                        "type": 0,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M50.1008 65.38C49.7008 65.38 49.3108 65.22 49.0308 64.93L30.4308 45.95C29.8508 45.36 29.8608 44.41 30.4508 43.83C31.0408 43.25 31.9908 43.26 32.5708 43.85L50.0708 61.7L81.0208 28.48C81.5808 27.87 82.5408 27.84 83.1408 28.4C83.7508 28.96 83.7808 29.91 83.2208 30.52L51.2008 64.9C50.9208 65.2 50.5308 65.37 50.1208 65.38H50.1008Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278240714,
+                                        "type": 0,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M103.12 130.5L104.83 130.14L102.76 126.43L101.82 122.63C100.28 121.37 99.0202 119.79 98.0502 117.88C97.9302 117.65 97.8202 117.41 97.7202 117.17L110.76 117.2V111.22L96.2002 111.15C96.1302 110.42 96.1002 109.68 96.1002 108.91C96.1002 108.53 96.1102 108.15 96.1302 107.78L110.77 107.82V101.84L97.3902 101.81C97.6002 101.28 97.8302 100.77 98.1002 100.27C99.4302 97.76 101.25 95.79 103.57 94.35C105.89 92.91 108.54 92.2 111.55 92.2C112.79 92.2 114.04 92.38 115.28 92.75C116.52 93.12 117.68 93.66 118.75 94.39L121.9 89.05C120.4 88.06 118.76 87.31 116.98 86.8C115.2 86.29 113.39 86.03 111.55 86.03C108.46 86.03 105.6 86.6 102.96 87.73C100.32 88.87 98.0202 90.47 96.0402 92.55C94.0702 94.63 92.5402 97.05 91.4702 99.82C91.2202 100.46 91.0102 101.12 90.8202 101.8H84.9102V107.77H89.9102C89.9002 108.16 89.8602 108.54 89.8602 108.93C89.8602 109.68 89.9002 110.42 89.9502 111.14L84.9102 111.11V117.16L91.0802 117.18C91.2102 117.58 91.3202 118 91.4702 118.39C92.5402 121.22 94.0402 123.65 95.9702 125.69C97.9002 127.73 100.19 129.3 102.85 130.42C102.94 130.46 103.04 130.48 103.13 130.52L103.12 130.5Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278240714,
+                                        "type": 0,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M207.09 167.37C206.98 167.24 196.11 154.16 183.5 140.69C162.66 118.43 153.31 112.26 149.14 111C143.84 109.41 139.89 110.3 138 113.51C136.04 116.86 136.87 121.58 138.92 123.57C139.58 124.2 139.72 125.2 139.27 125.99C138.82 126.78 137.89 127.17 137.01 126.93C136.83 126.88 118.47 121.96 108 121.3C106.95 121.24 105.94 121.59 105.15 122.29C104.34 123.01 103.87 124.01 103.83 125.1C103.74 127.17 105.22 128.93 107.26 129.21C117.1 130.54 129.72 132.66 134.01 135.24L131.95 138.67C129.11 136.96 119.92 134.96 106.73 133.18C102.62 132.63 99.65 129.08 99.83 124.93C99.93 122.76 100.87 120.77 102.48 119.32C104.07 117.89 106.12 117.18 108.25 117.31C115.92 117.79 127.22 120.36 133.48 121.9C132.46 118.53 132.76 114.53 134.55 111.48C135.91 109.17 140.16 104.11 150.29 107.17C166.16 111.95 208.38 162.65 210.17 164.81L207.09 167.36V167.37Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278927075,
+                                        "type": 0,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M126.851 153.13C124.541 151.4 115.951 150.14 103.861 149.76C98.0207 149.58 93.3907 144.67 93.5407 138.82C93.6507 134.34 96.5807 130.38 100.821 128.95L102.931 128.24L104.201 132.03L102.091 132.74C99.4306 133.63 97.6007 136.11 97.5407 138.91C97.4507 142.57 100.341 145.64 103.991 145.76C117.641 146.19 126.151 147.59 129.261 149.93L126.861 153.13H126.851Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278927075,
+                                        "type": 0,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M166.941 212.31C149.951 187.19 127.941 171.18 101.521 164.71L101.021 164.59C98.1711 163.89 95.8712 161.82 94.8712 159.06C93.8312 156.2 94.3711 152.94 96.2711 150.56L99.5611 146.46L102.681 148.96L99.3912 153.06C98.3512 154.36 98.0611 156.13 98.6311 157.7C99.1811 159.21 100.431 160.33 101.981 160.72L102.481 160.84C129.891 167.55 152.701 184.12 170.261 210.09L166.951 212.33L166.941 212.31Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278927075,
+                                        "type": 0,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M146.78 129.881L144.195 132.934L152.216 139.726L154.801 136.673L146.78 129.881Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278927075,
+                                        "type": 0,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M155.04 158.57C149.03 148.15 152.86 130.98 153.03 130.25L156.93 131.14C156.89 131.3 153.28 147.52 158.51 156.57L155.05 158.57H155.04Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278927075,
+                                        "type": 0,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                  <RNSVGPath
+                                    d="M134.514 130.669L121.939 157.895L125.571 159.573L138.145 132.346L134.514 130.669Z"
+                                    fill={
+                                      Object {
+                                        "payload": 4278927075,
+                                        "type": 0,
+                                      }
+                                    }
+                                    propList={
+                                      Array [
+                                        "fill",
+                                      ]
+                                    }
+                                  />
+                                </RNSVGGroup>
+                              </RNSVGSvgView>
+                              <View
+                                style={
+                                  Object {
+                                    "height": 24,
+                                  }
+                                }
+                              />
+                            </View>
+                            <Text
+                              allowFontScaling={false}
+                              color="bluegreyDark"
+                              defaultColor="bluegreyDark"
+                              defaultWeight="SemiBold"
+                              font="TitilliumWeb"
+                              fontStyle={
+                                Object {
+                                  "fontSize": 24,
+                                  "lineHeight": 34,
+                                }
+                              }
+                              style={
+                                Array [
+                                  Object {
+                                    "textAlign": "center",
+                                  },
+                                  Object {
+                                    "fontSize": 24,
+                                    "lineHeight": 34,
+                                  },
+                                  Object {
+                                    "color": "#17324D",
+                                    "fontFamily": "Titillium Web",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "600",
+                                  },
+                                ]
+                              }
+                              weight="SemiBold"
+                            >
+                              Questo avviso è stato già pagato!
+                            </Text>
                             <View
-                              androidStatusBarColor="#FFFFFF"
-                              iosBarStyle="dark-content"
-                              noShadow={false}
                               style={
                                 Object {
-                                  "backgroundColor": "#F8F8F8",
-                                  "borderBottomColor": "#a7a6ab",
-                                  "borderBottomWidth": 0.5,
-                                  "elevation": 3,
-                                  "flexDirection": "row",
-                                  "height": 64,
-                                  "justifyContent": "center",
-                                  "left": 0,
-                                  "paddingLeft": 6,
-                                  "paddingRight": 10,
-                                  "right": 0,
-                                  "shadowColor": undefined,
-                                  "shadowOffset": undefined,
-                                  "shadowOpacity": undefined,
-                                  "shadowRadius": undefined,
-                                  "top": 0,
+                                  "alignItems": "center",
                                 }
                               }
                             >
                               <View
                                 style={
                                   Object {
-                                    "alignItems": "flex-start",
-                                    "alignSelf": "center",
-                                    "flex": 1,
+                                    "height": 24,
                                   }
                                 }
-                              >
+                              />
+                              <View>
                                 <View
-                                  accessibilityLabel="Back"
+                                  accessibilityLabel="Close"
                                   accessibilityRole="button"
                                   accessibilityState={
                                     Object {
+                                      "busy": false,
                                       "disabled": false,
                                     }
                                   }
                                   accessible={true}
                                   collapsable={false}
                                   focusable={true}
-                                  hitSlop={8}
                                   onBlur={[Function]}
                                   onClick={[Function]}
                                   onFocus={[Function]}
@@ -369,22 +489,36 @@ exports[`PaidPaymentScreen should render with back button, title, help button, p
                                   onResponderTerminate={[Function]}
                                   onResponderTerminationRequest={[Function]}
                                   onStartShouldSetResponder={[Function]}
-                                  testID="back-button"
+                                  style={
+                                    Object {
+                                      "alignSelf": "flex-start",
+                                    }
+                                  }
                                 >
                                   <View
                                     style={
                                       Array [
                                         Object {
-                                          "height": 24,
-                                          "width": 24,
+                                          "alignItems": "center",
+                                          "borderRadius": 4,
+                                          "elevation": 0,
+                                          "flexDirection": "row",
+                                          "justifyContent": "center",
+                                          "paddingHorizontal": 16,
+                                          "textAlignVertical": "center",
                                         },
                                         Object {
-                                          "alignItems": "center",
+                                          "overflow": "hidden",
                                         },
+                                        false,
                                         Object {
-                                          "justifyContent": "center",
+                                          "height": 40,
+                                        },
+                                        Object {
+                                          "backgroundColor": "#0073E6",
                                         },
                                         Object {
+                                          "backgroundColor": undefined,
                                           "transform": Array [
                                             Object {
                                               "scale": undefined,
@@ -394,1384 +528,122 @@ exports[`PaidPaymentScreen should render with back button, title, help button, p
                                       ]
                                     }
                                   >
-                                    <RNSVGSvgView
-                                      accessibilityElementsHidden={true}
-                                      accessibilityLabel=""
-                                      accessible={false}
-                                      align="xMidYMid"
-                                      animatedProps={
-                                        Object {
-                                          "color": undefined,
-                                        }
-                                      }
-                                      bbHeight={24}
-                                      bbWidth={24}
-                                      color={4279111443}
-                                      focusable={false}
-                                      height={24}
-                                      importantForAccessibility="no-hide-descendants"
-                                      meetOrSlice={0}
-                                      minX={0}
-                                      minY={0}
+                                    <View
                                       style={
                                         Array [
                                           Object {
-                                            "backgroundColor": "transparent",
-                                            "borderWidth": 0,
-                                          },
-                                          Object {
-                                            "color": "#0E0F13",
-                                          },
-                                          Object {
-                                            "flex": 0,
-                                            "height": 24,
-                                            "width": 24,
+                                            "alignItems": "center",
+                                            "flexDirection": "row",
+                                            "justifyContent": "center",
                                           },
+                                          false,
                                         ]
                                       }
-                                      tintColor={4279111443}
-                                      vbHeight={24}
-                                      vbWidth={24}
-                                      width={24}
                                     >
-                                      <RNSVGGroup>
-                                        <RNSVGPath
-                                          clipRule={0}
-                                          d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
-                                          fill={
-                                            Array [
-                                              2,
-                                            ]
-                                          }
-                                          fillRule={0}
-                                          propList={
-                                            Array [
-                                              "fill",
-                                              "fillRule",
-                                            ]
+                                      <Text
+                                        accessibilityElementsHidden={true}
+                                        accessible={false}
+                                        allowFontScaling={false}
+                                        color="white"
+                                        defaultColor="white"
+                                        defaultWeight="Bold"
+                                        ellipsizeMode="tail"
+                                        font="TitilliumWeb"
+                                        fontStyle={
+                                          Object {
+                                            "fontSize": 16,
                                           }
-                                        />
-                                      </RNSVGGroup>
-                                    </RNSVGSvgView>
-                                  </View>
-                                </View>
-                              </View>
-                              <View
-                                style={
-                                  Array [
-                                    Object {
-                                      "alignItems": "center",
-                                      "alignSelf": "center",
-                                      "flex": 1,
-                                    },
-                                    Object {
-                                      "alignItems": "center",
-                                    },
-                                  ]
-                                }
-                              >
-                                <View
-                                  accessible={true}
-                                >
-                                  <Text
-                                    accessibilityRole="header"
-                                    accessible={true}
-                                    color="bluegrey"
-                                    defaultColor="bluegrey"
-                                    defaultWeight="Regular"
-                                    font="TitilliumWeb"
-                                    fontStyle={
-                                      Object {
-                                        "fontSize": 16,
-                                        "lineHeight": 24,
-                                      }
-                                    }
-                                    numberOfLines={1}
-                                    style={
-                                      Array [
-                                        Object {
-                                          "fontSize": 16,
-                                          "lineHeight": 24,
-                                        },
-                                        Object {
-                                          "color": "#475A6D",
-                                          "fontFamily": "Titillium Web",
-                                          "fontStyle": "normal",
-                                          "fontWeight": "400",
-                                        },
-                                      ]
-                                    }
-                                    testID="bodyLabel"
-                                    weight="Regular"
-                                  >
-                                    Payment informations
-                                  </Text>
-                                </View>
-                              </View>
-                              <View
-                                style={
-                                  Object {
-                                    "alignItems": "flex-end",
-                                    "alignSelf": "center",
-                                    "flex": 1,
-                                    "flexDirection": "row",
-                                    "justifyContent": "flex-end",
-                                  }
-                                }
-                              >
-                                <View
-                                  accessibilityRole="button"
-                                  accessibilityState={
-                                    Object {
-                                      "disabled": undefined,
-                                    }
-                                  }
-                                  accessible={true}
-                                  collapsable={false}
-                                  focusable={false}
-                                  forwardedRef={[Function]}
-                                  hitSlop={
-                                    Object {
-                                      "bottom": 4,
-                                      "top": 4,
-                                    }
-                                  }
-                                  onClick={[Function]}
-                                  onResponderGrant={[Function]}
-                                  onResponderMove={[Function]}
-                                  onResponderRelease={[Function]}
-                                  onResponderTerminate={[Function]}
-                                  onResponderTerminationRequest={[Function]}
-                                  onStartShouldSetResponder={[Function]}
-                                  style={
-                                    Object {
-                                      "alignItems": "center",
-                                      "alignSelf": null,
-                                      "backgroundColor": "transparent",
-                                      "borderBottomWidth": null,
-                                      "borderColor": null,
-                                      "borderLeftWidth": null,
-                                      "borderRadius": 50,
-                                      "borderRightWidth": null,
-                                      "borderTopWidth": null,
-                                      "borderWidth": undefined,
-                                      "elevation": 0,
-                                      "flexDirection": "row",
-                                      "height": 45,
-                                      "justifyContent": "space-between",
-                                      "marginRight": -9,
-                                      "opacity": 1,
-                                      "paddingBottom": 6,
-                                      "paddingLeft": 15,
-                                      "paddingRight": 15,
-                                      "paddingTop": 6,
-                                      "shadowColor": null,
-                                      "shadowOffset": null,
-                                      "shadowOpacity": null,
-                                      "shadowRadius": null,
-                                    }
-                                  }
-                                />
-                              </View>
-                            </View>
-                          </RCTSafeAreaView>
-                        </View>
-                      </View>
-                      <RCTSafeAreaView
-                        emulateUnlessSupported={true}
-                        style={
-                          Object {
-                            "flex": 1,
-                          }
-                        }
-                      >
-                        <View
-                          accessibilityRole="alert"
-                          accessible={true}
-                          style={
-                            Array [
-                              Object {
-                                "alignContent": "center",
-                                "alignItems": "flex-start",
-                                "flexDirection": "row",
-                                "paddingBottom": 8,
-                                "paddingLeft": 24,
-                                "paddingRight": 24,
-                                "paddingTop": 8,
-                                "width": "100%",
-                              },
-                              Object {
-                                "backgroundColor": "#00C5CA",
-                              },
-                            ]
-                          }
-                          testID="SectionStatusContent"
-                        >
-                          <View
-                            style={
-                              Object {
-                                "alignSelf": "center",
-                              }
-                            }
-                          >
-                            <RNSVGSvgView
-                              accessibilityElementsHidden={true}
-                              accessibilityLabel=""
-                              accessible={false}
-                              align="xMidYMid"
-                              bbHeight={24}
-                              bbWidth={24}
-                              color={4279710285}
-                              focusable={false}
-                              height={24}
-                              importantForAccessibility="no-hide-descendants"
-                              meetOrSlice={0}
-                              minX={0}
-                              minY={0}
-                              style={
-                                Array [
-                                  Object {
-                                    "backgroundColor": "transparent",
-                                    "borderWidth": 0,
-                                  },
-                                  Object {
-                                    "color": "#17324D",
-                                  },
-                                  Object {
-                                    "flex": 0,
-                                    "height": 24,
-                                    "width": 24,
-                                  },
-                                ]
-                              }
-                              tintColor={4279710285}
-                              vbHeight={24}
-                              vbWidth={24}
-                              width={24}
-                            >
-                              <RNSVGGroup>
-                                <RNSVGPath
-                                  d="M17.752 8.22a1.083 1.083 0 0 0-1.531.028l-5.974 6.192-2.468-2.558-.093-.086a1.083 1.083 0 0 0-1.465 1.589l3.248 3.367.095.087c.43.352 1.068.322 1.463-.087l6.752-7 .083-.096c.328-.431.29-1.05-.11-1.435Z"
-                                  fill={
-                                    Array [
-                                      2,
-                                    ]
-                                  }
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  clipRule={0}
-                                  d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Z"
-                                  fill={
-                                    Array [
-                                      2,
-                                    ]
-                                  }
-                                  fillRule={0}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                      "fillRule",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  d="M17.752 8.22a1.083 1.083 0 0 0-1.531.028l-5.974 6.192-2.468-2.558-.093-.086a1.083 1.083 0 0 0-1.465 1.589l3.248 3.367.095.087c.43.352 1.068.322 1.463-.087l6.752-7 .083-.096c.328-.431.29-1.05-.11-1.435Z"
-                                  fill={
-                                    Array [
-                                      2,
-                                    ]
-                                  }
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  clipRule={0}
-                                  d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Z"
-                                  fill={
-                                    Array [
-                                      2,
-                                    ]
-                                  }
-                                  fillRule={0}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                      "fillRule",
-                                    ]
-                                  }
-                                />
-                              </RNSVGGroup>
-                            </RNSVGSvgView>
-                          </View>
-                          <Text
-                            color="bluegreyDark"
-                            defaultColor="blue"
-                            defaultWeight="Bold"
-                            font="TitilliumWeb"
-                            fontStyle={
-                              Object {
-                                "fontSize": 16,
-                              }
-                            }
-                            style={
-                              Array [
-                                Array [
-                                  Object {
-                                    "flex": 1,
-                                    "marginLeft": 16,
-                                  },
-                                  Object {
-                                    "paddingVertical": 14,
-                                  },
-                                ],
-                                Object {
-                                  "fontSize": 16,
-                                },
-                                Object {
-                                  "color": "#17324D",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "400",
-                                },
-                              ]
-                            }
-                            weight="Regular"
-                          >
-                            <Text
-                              color="bluegreyDark"
-                              defaultColor="blue"
-                              defaultWeight="Bold"
-                              font="TitilliumWeb"
-                              fontStyle={
-                                Object {
-                                  "fontSize": 14,
-                                  "lineHeight": 21,
-                                }
-                              }
-                              style={
-                                Array [
-                                  Object {
-                                    "fontSize": 14,
-                                    "lineHeight": 21,
-                                  },
-                                  Object {
-                                    "color": "#17324D",
-                                    "fontFamily": "Titillium Web",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "400",
-                                  },
-                                ]
-                              }
-                              weight="Regular"
-                            >
-                              This notice has been already paid!
-                            </Text>
-                          </Text>
-                        </View>
-                        <RCTScrollView
-                          style={
-                            Object {
-                              "paddingHorizontal": 24,
-                            }
-                          }
-                        >
-                          <View>
-                            <View
-                              accessibilityLabel="Notice code"
-                              accessibilityRole="button"
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
-                            >
-                              <View
-                                style={
-                                  Array [
-                                    Object {
-                                      "marginHorizontal": -24,
-                                      "paddingHorizontal": 24,
-                                      "paddingVertical": 12,
-                                    },
-                                    Object {
-                                      "backgroundColor": undefined,
-                                    },
-                                  ]
-                                }
-                              >
-                                <View
-                                  style={
-                                    Array [
-                                      Object {
-                                        "alignItems": "center",
-                                        "flexDirection": "row",
-                                        "justifyContent": "space-between",
-                                      },
-                                      Object {
-                                        "transform": Array [
-                                          Object {
-                                            "scale": undefined,
-                                          },
-                                        ],
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <View
-                                    style={
-                                      Object {
-                                        "flex": 1,
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      allowFontScaling={false}
-                                      color="grey-700"
-                                      defaultColor="blue"
-                                      defaultWeight="Bold"
-                                      font="TitilliumWeb"
-                                      fontStyle={
-                                        Object {
-                                          "fontSize": 14,
-                                          "lineHeight": 21,
-                                        }
-                                      }
-                                      style={
-                                        Array [
-                                          Object {
-                                            "fontSize": 14,
-                                            "lineHeight": 21,
-                                          },
-                                          Object {
-                                            "color": "#555C70",
-                                            "fontFamily": "Titillium Web",
-                                            "fontStyle": "normal",
-                                            "fontWeight": "400",
-                                          },
-                                        ]
-                                      }
-                                      weight="Regular"
-                                    >
-                                      Notice code
-                                    </Text>
-                                    <Text
-                                      allowFontScaling={false}
-                                      color="blue"
-                                      defaultColor="black"
-                                      defaultWeight="SemiBold"
-                                      font="TitilliumWeb"
-                                      fontStyle={
-                                        Object {
-                                          "fontSize": 18,
-                                          "lineHeight": 25,
-                                        }
-                                      }
-                                      numberOfLines={2}
-                                      style={
-                                        Array [
-                                          Object {
-                                            "fontSize": 18,
-                                            "lineHeight": 25,
-                                          },
-                                          Object {
-                                            "color": "#0073E6",
-                                            "fontFamily": "Titillium Web",
-                                            "fontStyle": "normal",
-                                            "fontWeight": "600",
-                                          },
-                                        ]
-                                      }
-                                      weight="SemiBold"
-                                    >
-                                      0180  1198  8086  4794  97
-                                    </Text>
-                                  </View>
-                                  <View
-                                    style={
-                                      Object {
-                                        "marginLeft": 16,
-                                      }
-                                    }
-                                  >
-                                    <RNSVGSvgView
-                                      accessibilityElementsHidden={true}
-                                      accessibilityLabel=""
-                                      accessible={false}
-                                      align="xMidYMid"
-                                      bbHeight={24}
-                                      bbWidth={24}
-                                      color={4278219750}
-                                      focusable={false}
-                                      height={24}
-                                      importantForAccessibility="no-hide-descendants"
-                                      meetOrSlice={0}
-                                      minX={0}
-                                      minY={0}
-                                      style={
-                                        Array [
-                                          Object {
-                                            "backgroundColor": "transparent",
-                                            "borderWidth": 0,
-                                          },
-                                          Object {
-                                            "color": "#0073E6",
-                                          },
-                                          Object {
-                                            "flex": 0,
-                                            "height": 24,
-                                            "width": 24,
-                                          },
-                                        ]
-                                      }
-                                      tintColor={4278219750}
-                                      vbHeight={24}
-                                      vbWidth={24}
-                                      width={24}
-                                    >
-                                      <RNSVGGroup>
-                                        <RNSVGPath
-                                          clipRule={0}
-                                          d="M12 18h8a2 2 0 0 0 2-2V9h-4a3 3 0 0 1-3-3V2h-3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Zm9.332-11.987a2 2 0 0 1 .603.987H18a1 1 0 0 1-1-1V2.227a2 2 0 0 1 .406.281l3.926 3.505ZM14 20h-2a4 4 0 0 1-4-4V6H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2Zm2 0h4a4 4 0 0 0 4-4V7.505a4 4 0 0 0-1.336-2.984l-3.926-3.505A4 4 0 0 0 16.074 0H12a4 4 0 0 0-4 4H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4Z"
-                                          fill={
-                                            Array [
-                                              2,
-                                            ]
-                                          }
-                                          fillRule={0}
-                                          propList={
-                                            Array [
-                                              "fill",
-                                              "fillRule",
-                                            ]
-                                          }
-                                        />
-                                      </RNSVGGroup>
-                                    </RNSVGSvgView>
-                                  </View>
-                                </View>
-                              </View>
-                            </View>
-                          </View>
-                        </RCTScrollView>
-                      </RCTSafeAreaView>
-                    </View>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </RNCSafeAreaProvider>
-</View>
-`;
-
-exports[`PaidPaymentScreen should render with back button, title, help button, paid banner, notice code and creditor tax id 1`] = `
-<View
-  style={
-    Object {
-      "flex": 1,
-    }
-  }
->
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
-    style={
-      Array [
-        Object {
-          "flex": 1,
-        },
-        undefined,
-      ]
-    }
-  >
-    <View
-      collapsable={false}
-      pointerEvents="box-none"
-      style={
-        Object {
-          "zIndex": 1,
-        }
-      }
-    >
-      <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
-        pointerEvents="box-none"
-        style={null}
-      >
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              Object {
-                "backgroundColor": "rgb(255, 255, 255)",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
-              }
-            }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
-              }
-            }
-          />
-          <View
-            pointerEvents="box-none"
-            style={
-              Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              pointerEvents="box-none"
-              style={
-                Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
-                }
-              }
-            >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
-                collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
-                style={
-                  Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
-                  }
-                }
-              >
-                PN_CANCELLED_MESSAGE_PAID_PAYMENT
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "opacity": 1,
-            }
-          }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
-          pointerEvents="box-none"
-          style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
-            Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            needsOffscreenAlphaCompositing={false}
-            pointerEvents="box-none"
-            style={
-              Object {
-                "flex": 1,
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={1}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              style={
-                Object {
-                  "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                pointerEvents="none"
-                style={
-                  Object {
-                    "backgroundColor": "rgb(242, 242, 242)",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
-                      Object {
-                        "backgroundColor": "rgb(242, 242, 242)",
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-              >
-                <View
-                  style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      Object {
-                        "flex": 1,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Object {
-                          "backgroundColor": "#fff",
-                          "flex": 1,
-                          "height": 1334,
-                        }
-                      }
-                    >
-                      <View>
-                        <View>
-                          <RCTSafeAreaView
-                            emulateUnlessSupported={true}
-                            style={
-                              Object {
-                                "backgroundColor": "#F8F8F8",
-                              }
-                            }
-                          >
-                            <View
-                              androidStatusBarColor="#FFFFFF"
-                              iosBarStyle="dark-content"
-                              noShadow={false}
-                              style={
-                                Object {
-                                  "backgroundColor": "#F8F8F8",
-                                  "borderBottomColor": "#a7a6ab",
-                                  "borderBottomWidth": 0.5,
-                                  "elevation": 3,
-                                  "flexDirection": "row",
-                                  "height": 64,
-                                  "justifyContent": "center",
-                                  "left": 0,
-                                  "paddingLeft": 6,
-                                  "paddingRight": 10,
-                                  "right": 0,
-                                  "shadowColor": undefined,
-                                  "shadowOffset": undefined,
-                                  "shadowOpacity": undefined,
-                                  "shadowRadius": undefined,
-                                  "top": 0,
-                                }
-                              }
-                            >
-                              <View
-                                style={
-                                  Object {
-                                    "alignItems": "flex-start",
-                                    "alignSelf": "center",
-                                    "flex": 1,
-                                  }
-                                }
-                              >
-                                <View
-                                  accessibilityLabel="Back"
-                                  accessibilityRole="button"
-                                  accessibilityState={
-                                    Object {
-                                      "disabled": false,
-                                    }
-                                  }
-                                  accessible={true}
-                                  collapsable={false}
-                                  focusable={true}
-                                  hitSlop={8}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onResponderGrant={[Function]}
-                                  onResponderMove={[Function]}
-                                  onResponderRelease={[Function]}
-                                  onResponderTerminate={[Function]}
-                                  onResponderTerminationRequest={[Function]}
-                                  onStartShouldSetResponder={[Function]}
-                                  testID="back-button"
-                                >
-                                  <View
-                                    style={
-                                      Array [
-                                        Object {
-                                          "height": 24,
-                                          "width": 24,
-                                        },
-                                        Object {
-                                          "alignItems": "center",
-                                        },
-                                        Object {
-                                          "justifyContent": "center",
-                                        },
-                                        Object {
-                                          "transform": Array [
-                                            Object {
-                                              "scale": undefined,
-                                            },
-                                          ],
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <RNSVGSvgView
-                                      accessibilityElementsHidden={true}
-                                      accessibilityLabel=""
-                                      accessible={false}
-                                      align="xMidYMid"
-                                      animatedProps={
-                                        Object {
-                                          "color": undefined,
-                                        }
-                                      }
-                                      bbHeight={24}
-                                      bbWidth={24}
-                                      color={4279111443}
-                                      focusable={false}
-                                      height={24}
-                                      importantForAccessibility="no-hide-descendants"
-                                      meetOrSlice={0}
-                                      minX={0}
-                                      minY={0}
-                                      style={
-                                        Array [
-                                          Object {
-                                            "backgroundColor": "transparent",
-                                            "borderWidth": 0,
-                                          },
-                                          Object {
-                                            "color": "#0E0F13",
-                                          },
-                                          Object {
-                                            "flex": 0,
-                                            "height": 24,
-                                            "width": 24,
-                                          },
-                                        ]
-                                      }
-                                      tintColor={4279111443}
-                                      vbHeight={24}
-                                      vbWidth={24}
-                                      width={24}
-                                    >
-                                      <RNSVGGroup>
-                                        <RNSVGPath
-                                          clipRule={0}
-                                          d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
-                                          fill={
-                                            Array [
-                                              2,
-                                            ]
-                                          }
-                                          fillRule={0}
-                                          propList={
-                                            Array [
-                                              "fill",
-                                              "fillRule",
-                                            ]
-                                          }
-                                        />
-                                      </RNSVGGroup>
-                                    </RNSVGSvgView>
-                                  </View>
-                                </View>
-                              </View>
-                              <View
-                                style={
-                                  Array [
-                                    Object {
-                                      "alignItems": "center",
-                                      "alignSelf": "center",
-                                      "flex": 1,
-                                    },
-                                    Object {
-                                      "alignItems": "center",
-                                    },
-                                  ]
-                                }
-                              >
-                                <View
-                                  accessible={true}
-                                >
-                                  <Text
-                                    accessibilityRole="header"
-                                    accessible={true}
-                                    color="bluegrey"
-                                    defaultColor="bluegrey"
-                                    defaultWeight="Regular"
-                                    font="TitilliumWeb"
-                                    fontStyle={
-                                      Object {
-                                        "fontSize": 16,
-                                        "lineHeight": 24,
-                                      }
-                                    }
-                                    numberOfLines={1}
-                                    style={
-                                      Array [
-                                        Object {
-                                          "fontSize": 16,
-                                          "lineHeight": 24,
-                                        },
-                                        Object {
-                                          "color": "#475A6D",
-                                          "fontFamily": "Titillium Web",
-                                          "fontStyle": "normal",
-                                          "fontWeight": "400",
-                                        },
-                                      ]
-                                    }
-                                    testID="bodyLabel"
-                                    weight="Regular"
-                                  >
-                                    Payment informations
-                                  </Text>
-                                </View>
-                              </View>
-                              <View
-                                style={
-                                  Object {
-                                    "alignItems": "flex-end",
-                                    "alignSelf": "center",
-                                    "flex": 1,
-                                    "flexDirection": "row",
-                                    "justifyContent": "flex-end",
-                                  }
-                                }
-                              >
-                                <View
-                                  accessibilityRole="button"
-                                  accessibilityState={
-                                    Object {
-                                      "disabled": undefined,
-                                    }
-                                  }
-                                  accessible={true}
-                                  collapsable={false}
-                                  focusable={false}
-                                  forwardedRef={[Function]}
-                                  hitSlop={
-                                    Object {
-                                      "bottom": 4,
-                                      "top": 4,
-                                    }
-                                  }
-                                  onClick={[Function]}
-                                  onResponderGrant={[Function]}
-                                  onResponderMove={[Function]}
-                                  onResponderRelease={[Function]}
-                                  onResponderTerminate={[Function]}
-                                  onResponderTerminationRequest={[Function]}
-                                  onStartShouldSetResponder={[Function]}
-                                  style={
-                                    Object {
-                                      "alignItems": "center",
-                                      "alignSelf": null,
-                                      "backgroundColor": "transparent",
-                                      "borderBottomWidth": null,
-                                      "borderColor": null,
-                                      "borderLeftWidth": null,
-                                      "borderRadius": 50,
-                                      "borderRightWidth": null,
-                                      "borderTopWidth": null,
-                                      "borderWidth": undefined,
-                                      "elevation": 0,
-                                      "flexDirection": "row",
-                                      "height": 45,
-                                      "justifyContent": "space-between",
-                                      "marginRight": -9,
-                                      "opacity": 1,
-                                      "paddingBottom": 6,
-                                      "paddingLeft": 15,
-                                      "paddingRight": 15,
-                                      "paddingTop": 6,
-                                      "shadowColor": null,
-                                      "shadowOffset": null,
-                                      "shadowOpacity": null,
-                                      "shadowRadius": null,
-                                    }
-                                  }
-                                />
-                              </View>
-                            </View>
-                          </RCTSafeAreaView>
-                        </View>
-                      </View>
-                      <RCTSafeAreaView
-                        emulateUnlessSupported={true}
-                        style={
-                          Object {
-                            "flex": 1,
-                          }
-                        }
-                      >
-                        <View
-                          accessibilityRole="alert"
-                          accessible={true}
-                          style={
-                            Array [
-                              Object {
-                                "alignContent": "center",
-                                "alignItems": "flex-start",
-                                "flexDirection": "row",
-                                "paddingBottom": 8,
-                                "paddingLeft": 24,
-                                "paddingRight": 24,
-                                "paddingTop": 8,
-                                "width": "100%",
-                              },
-                              Object {
-                                "backgroundColor": "#00C5CA",
-                              },
-                            ]
-                          }
-                          testID="SectionStatusContent"
-                        >
-                          <View
-                            style={
-                              Object {
-                                "alignSelf": "center",
-                              }
-                            }
-                          >
-                            <RNSVGSvgView
-                              accessibilityElementsHidden={true}
-                              accessibilityLabel=""
-                              accessible={false}
-                              align="xMidYMid"
-                              bbHeight={24}
-                              bbWidth={24}
-                              color={4279710285}
-                              focusable={false}
-                              height={24}
-                              importantForAccessibility="no-hide-descendants"
-                              meetOrSlice={0}
-                              minX={0}
-                              minY={0}
-                              style={
-                                Array [
-                                  Object {
-                                    "backgroundColor": "transparent",
-                                    "borderWidth": 0,
-                                  },
-                                  Object {
-                                    "color": "#17324D",
-                                  },
-                                  Object {
-                                    "flex": 0,
-                                    "height": 24,
-                                    "width": 24,
-                                  },
-                                ]
-                              }
-                              tintColor={4279710285}
-                              vbHeight={24}
-                              vbWidth={24}
-                              width={24}
-                            >
-                              <RNSVGGroup>
-                                <RNSVGPath
-                                  d="M17.752 8.22a1.083 1.083 0 0 0-1.531.028l-5.974 6.192-2.468-2.558-.093-.086a1.083 1.083 0 0 0-1.465 1.589l3.248 3.367.095.087c.43.352 1.068.322 1.463-.087l6.752-7 .083-.096c.328-.431.29-1.05-.11-1.435Z"
-                                  fill={
-                                    Array [
-                                      2,
-                                    ]
-                                  }
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  clipRule={0}
-                                  d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Z"
-                                  fill={
-                                    Array [
-                                      2,
-                                    ]
-                                  }
-                                  fillRule={0}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                      "fillRule",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  d="M17.752 8.22a1.083 1.083 0 0 0-1.531.028l-5.974 6.192-2.468-2.558-.093-.086a1.083 1.083 0 0 0-1.465 1.589l3.248 3.367.095.087c.43.352 1.068.322 1.463-.087l6.752-7 .083-.096c.328-.431.29-1.05-.11-1.435Z"
-                                  fill={
-                                    Array [
-                                      2,
-                                    ]
-                                  }
-                                  propList={
-                                    Array [
-                                      "fill",
-                                    ]
-                                  }
-                                />
-                                <RNSVGPath
-                                  clipRule={0}
-                                  d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0Zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Z"
-                                  fill={
-                                    Array [
-                                      2,
-                                    ]
-                                  }
-                                  fillRule={0}
-                                  propList={
-                                    Array [
-                                      "fill",
-                                      "fillRule",
-                                    ]
-                                  }
-                                />
-                              </RNSVGGroup>
-                            </RNSVGSvgView>
+                                        }
+                                        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"
+                                      >
+                                        Close
+                                      </Text>
+                                    </View>
+                                  </View>
+                                </View>
+                              </View>
+                            </View>
                           </View>
-                          <Text
-                            color="bluegreyDark"
-                            defaultColor="blue"
-                            defaultWeight="Bold"
-                            font="TitilliumWeb"
-                            fontStyle={
+                        </RCTScrollView>
+                      </RNCSafeAreaView>
+                    </View>
+                    <View
+                      collapsable={false}
+                      pointerEvents="box-none"
+                      style={Object {}}
+                    >
+                      <View
+                        accessibilityElementsHidden={false}
+                        importantForAccessibility="auto"
+                        onLayout={[Function]}
+                        pointerEvents="box-none"
+                        style={null}
+                      >
+                        <View
+                          accessibilityRole="header"
+                          style={
+                            Array [
                               Object {
-                                "fontSize": 16,
-                              }
-                            }
+                                "backgroundColor": "#FFFFFF",
+                              },
+                              Object {
+                                "borderBottomWidth": 1,
+                              },
+                              Object {
+                                "backgroundColor": "#FFFFFF",
+                                "borderColor": "transparent",
+                              },
+                            ]
+                          }
+                        >
+                          <View
                             style={
                               Array [
-                                Array [
-                                  Object {
-                                    "flex": 1,
-                                    "marginLeft": 16,
-                                  },
-                                  Object {
-                                    "paddingVertical": 14,
-                                  },
-                                ],
                                 Object {
-                                  "fontSize": 16,
+                                  "marginTop": 0,
                                 },
                                 Object {
-                                  "color": "#17324D",
-                                  "fontFamily": "Titillium Web",
-                                  "fontStyle": "normal",
-                                  "fontWeight": "400",
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "flexGrow": 1,
+                                  "height": 56,
+                                  "justifyContent": "space-between",
+                                  "paddingHorizontal": 24,
                                 },
                               ]
                             }
-                            weight="Regular"
                           >
-                            <Text
-                              color="bluegreyDark"
-                              defaultColor="blue"
-                              defaultWeight="Bold"
-                              font="TitilliumWeb"
-                              fontStyle={
+                            <View
+                              accessibilityLabel="Back"
+                              accessibilityRole="button"
+                              accessibilityState={
                                 Object {
-                                  "fontSize": 14,
-                                  "lineHeight": 21,
+                                  "disabled": false,
                                 }
                               }
-                              style={
-                                Array [
-                                  Object {
-                                    "fontSize": 14,
-                                    "lineHeight": 21,
-                                  },
-                                  Object {
-                                    "color": "#17324D",
-                                    "fontFamily": "Titillium Web",
-                                    "fontStyle": "normal",
-                                    "fontWeight": "400",
-                                  },
-                                ]
-                              }
-                              weight="Regular"
-                            >
-                              This notice has been already paid!
-                            </Text>
-                          </Text>
-                        </View>
-                        <RCTScrollView
-                          style={
-                            Object {
-                              "paddingHorizontal": 24,
-                            }
-                          }
-                        >
-                          <View>
-                            <View
-                              accessibilityLabel="Notice code"
-                              accessibilityRole="button"
                               accessible={true}
                               collapsable={false}
                               focusable={true}
+                              hitSlop={8}
                               onBlur={[Function]}
                               onClick={[Function]}
                               onFocus={[Function]}
@@ -1786,205 +658,173 @@ exports[`PaidPaymentScreen should render with back button, title, help button, p
                                 style={
                                   Array [
                                     Object {
-                                      "marginHorizontal": -24,
-                                      "paddingHorizontal": 24,
-                                      "paddingVertical": 12,
+                                      "height": 24,
+                                      "width": 24,
+                                    },
+                                    Object {
+                                      "alignItems": "center",
+                                    },
+                                    Object {
+                                      "justifyContent": "center",
                                     },
                                     Object {
-                                      "backgroundColor": undefined,
+                                      "transform": Array [
+                                        Object {
+                                          "scale": undefined,
+                                        },
+                                      ],
                                     },
                                   ]
                                 }
                               >
-                                <View
+                                <RNSVGSvgView
+                                  accessibilityElementsHidden={true}
+                                  accessibilityLabel=""
+                                  accessible={false}
+                                  align="xMidYMid"
+                                  animatedProps={
+                                    Object {
+                                      "color": undefined,
+                                    }
+                                  }
+                                  bbHeight={24}
+                                  bbWidth={24}
+                                  focusable={false}
+                                  height={24}
+                                  importantForAccessibility="no-hide-descendants"
+                                  meetOrSlice={0}
+                                  minX={0}
+                                  minY={0}
                                   style={
                                     Array [
                                       Object {
-                                        "alignItems": "center",
-                                        "flexDirection": "row",
-                                        "justifyContent": "space-between",
+                                        "backgroundColor": "transparent",
+                                        "borderWidth": 0,
                                       },
                                       Object {
-                                        "transform": Array [
-                                          Object {
-                                            "scale": undefined,
-                                          },
-                                        ],
+                                        "color": "#0E0F13",
+                                      },
+                                      Object {
+                                        "flex": 0,
+                                        "height": 24,
+                                        "width": 24,
                                       },
                                     ]
                                   }
+                                  tintColor="#0E0F13"
+                                  vbHeight={24}
+                                  vbWidth={24}
+                                  width={24}
                                 >
-                                  <View
-                                    style={
+                                  <RNSVGGroup
+                                    fill={
                                       Object {
-                                        "flex": 1,
+                                        "payload": 4278190080,
+                                        "type": 0,
                                       }
                                     }
                                   >
-                                    <Text
-                                      allowFontScaling={false}
-                                      color="grey-700"
-                                      defaultColor="blue"
-                                      defaultWeight="Bold"
-                                      font="TitilliumWeb"
-                                      fontStyle={
-                                        Object {
-                                          "fontSize": 14,
-                                          "lineHeight": 21,
-                                        }
-                                      }
-                                      style={
-                                        Array [
-                                          Object {
-                                            "fontSize": 14,
-                                            "lineHeight": 21,
-                                          },
-                                          Object {
-                                            "color": "#555C70",
-                                            "fontFamily": "Titillium Web",
-                                            "fontStyle": "normal",
-                                            "fontWeight": "400",
-                                          },
-                                        ]
-                                      }
-                                      weight="Regular"
-                                    >
-                                      Notice code
-                                    </Text>
-                                    <Text
-                                      allowFontScaling={false}
-                                      color="blue"
-                                      defaultColor="black"
-                                      defaultWeight="SemiBold"
-                                      font="TitilliumWeb"
-                                      fontStyle={
+                                    <RNSVGPath
+                                      clipRule={0}
+                                      d="M12.7071.2929c-.3905-.39053-1.0237-.39053-1.4142 0l-11 11c-.39053.3905-.39053 1.0237 0 1.4142l11 11c.3905.3905 1.0237.3905 1.4142 0 .3905-.3905.3905-1.0237 0-1.4142L2.41421 12 12.7071 1.70711c.3905-.39053.3905-1.0237 0-1.41422Z"
+                                      fill={
                                         Object {
-                                          "fontSize": 18,
-                                          "lineHeight": 25,
+                                          "type": 2,
                                         }
                                       }
-                                      numberOfLines={2}
-                                      style={
-                                        Array [
-                                          Object {
-                                            "fontSize": 18,
-                                            "lineHeight": 25,
-                                          },
-                                          Object {
-                                            "color": "#0073E6",
-                                            "fontFamily": "Titillium Web",
-                                            "fontStyle": "normal",
-                                            "fontWeight": "600",
-                                          },
-                                        ]
-                                      }
-                                      weight="SemiBold"
-                                    >
-                                      0180  1198  8086  4794  97
-                                    </Text>
-                                  </View>
-                                  <View
-                                    style={
-                                      Object {
-                                        "marginLeft": 16,
-                                      }
-                                    }
-                                  >
-                                    <RNSVGSvgView
-                                      accessibilityElementsHidden={true}
-                                      accessibilityLabel=""
-                                      accessible={false}
-                                      align="xMidYMid"
-                                      bbHeight={24}
-                                      bbWidth={24}
-                                      color={4278219750}
-                                      focusable={false}
-                                      height={24}
-                                      importantForAccessibility="no-hide-descendants"
-                                      meetOrSlice={0}
-                                      minX={0}
-                                      minY={0}
-                                      style={
+                                      fillRule={0}
+                                      propList={
                                         Array [
-                                          Object {
-                                            "backgroundColor": "transparent",
-                                            "borderWidth": 0,
-                                          },
-                                          Object {
-                                            "color": "#0073E6",
-                                          },
-                                          Object {
-                                            "flex": 0,
-                                            "height": 24,
-                                            "width": 24,
-                                          },
+                                          "fill",
+                                          "fillRule",
                                         ]
                                       }
-                                      tintColor={4278219750}
-                                      vbHeight={24}
-                                      vbWidth={24}
-                                      width={24}
-                                    >
-                                      <RNSVGGroup>
-                                        <RNSVGPath
-                                          clipRule={0}
-                                          d="M12 18h8a2 2 0 0 0 2-2V9h-4a3 3 0 0 1-3-3V2h-3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Zm9.332-11.987a2 2 0 0 1 .603.987H18a1 1 0 0 1-1-1V2.227a2 2 0 0 1 .406.281l3.926 3.505ZM14 20h-2a4 4 0 0 1-4-4V6H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2Zm2 0h4a4 4 0 0 0 4-4V7.505a4 4 0 0 0-1.336-2.984l-3.926-3.505A4 4 0 0 0 16.074 0H12a4 4 0 0 0-4 4H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4Z"
-                                          fill={
-                                            Array [
-                                              2,
-                                            ]
-                                          }
-                                          fillRule={0}
-                                          propList={
-                                            Array [
-                                              "fill",
-                                              "fillRule",
-                                            ]
-                                          }
-                                        />
-                                      </RNSVGGroup>
-                                    </RNSVGSvgView>
-                                  </View>
-                                </View>
+                                    />
+                                  </RNSVGGroup>
+                                </RNSVGSvgView>
                               </View>
                             </View>
                             <View
-                              accessibilityLabel="Payee Fiscal Code"
-                              accessibilityRole="button"
-                              accessible={true}
-                              collapsable={false}
-                              focusable={true}
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onResponderGrant={[Function]}
-                              onResponderMove={[Function]}
-                              onResponderRelease={[Function]}
-                              onResponderTerminate={[Function]}
-                              onResponderTerminationRequest={[Function]}
-                              onStartShouldSetResponder={[Function]}
+                              accessibilityElementsHidden={true}
+                              accessibilityLabel=""
+                              accessibilityRole="header"
+                              accessible={false}
+                              importantForAccessibility="no-hide-descendants"
+                              style={
+                                Object {
+                                  "flexGrow": 1,
+                                  "flexShrink": 1,
+                                  "marginHorizontal": 16,
+                                }
+                              }
                             >
-                              <View
+                              <Text
+                                accessible={false}
+                                numberOfLines={1}
                                 style={
                                   Array [
                                     Object {
-                                      "marginHorizontal": -24,
-                                      "paddingHorizontal": 24,
-                                      "paddingVertical": 12,
+                                      "fontSize": 14,
+                                      "textAlign": "center",
+                                    },
+                                    Object {
+                                      "fontFamily": "Titillium Web",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "600",
                                     },
                                     Object {
-                                      "backgroundColor": undefined,
+                                      "opacity": 1,
                                     },
                                   ]
                                 }
+                              />
+                            </View>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "flexDirection": "row",
+                                  },
+                                  Object {
+                                    "flexShrink": 0,
+                                  },
+                                ]
+                              }
+                            >
+                              <View
+                                accessibilityLabel="Contextual Help"
+                                accessibilityRole="button"
+                                accessibilityState={
+                                  Object {
+                                    "disabled": false,
+                                  }
+                                }
+                                accessible={true}
+                                collapsable={false}
+                                focusable={true}
+                                hitSlop={8}
+                                onBlur={[Function]}
+                                onClick={[Function]}
+                                onFocus={[Function]}
+                                onResponderGrant={[Function]}
+                                onResponderMove={[Function]}
+                                onResponderRelease={[Function]}
+                                onResponderTerminate={[Function]}
+                                onResponderTerminationRequest={[Function]}
+                                onStartShouldSetResponder={[Function]}
                               >
                                 <View
                                   style={
                                     Array [
+                                      Object {
+                                        "height": 24,
+                                        "width": 24,
+                                      },
                                       Object {
                                         "alignItems": "center",
-                                        "flexDirection": "row",
-                                        "justifyContent": "space-between",
+                                      },
+                                      Object {
+                                        "justifyContent": "center",
                                       },
                                       Object {
                                         "transform": Array [
@@ -1996,151 +836,96 @@ exports[`PaidPaymentScreen should render with back button, title, help button, p
                                     ]
                                   }
                                 >
-                                  <View
-                                    style={
+                                  <RNSVGSvgView
+                                    accessibilityElementsHidden={true}
+                                    accessibilityLabel=""
+                                    accessible={false}
+                                    align="xMidYMid"
+                                    animatedProps={
                                       Object {
-                                        "flex": 1,
+                                        "color": undefined,
                                       }
                                     }
-                                  >
-                                    <Text
-                                      allowFontScaling={false}
-                                      color="grey-700"
-                                      defaultColor="blue"
-                                      defaultWeight="Bold"
-                                      font="TitilliumWeb"
-                                      fontStyle={
+                                    bbHeight={24}
+                                    bbWidth={24}
+                                    focusable={false}
+                                    height={24}
+                                    importantForAccessibility="no-hide-descendants"
+                                    meetOrSlice={0}
+                                    minX={0}
+                                    minY={0}
+                                    style={
+                                      Array [
                                         Object {
-                                          "fontSize": 14,
-                                          "lineHeight": 21,
-                                        }
-                                      }
-                                      style={
-                                        Array [
-                                          Object {
-                                            "fontSize": 14,
-                                            "lineHeight": 21,
-                                          },
-                                          Object {
-                                            "color": "#555C70",
-                                            "fontFamily": "Titillium Web",
-                                            "fontStyle": "normal",
-                                            "fontWeight": "400",
-                                          },
-                                        ]
-                                      }
-                                      weight="Regular"
-                                    >
-                                      Payee Fiscal Code
-                                    </Text>
-                                    <Text
-                                      allowFontScaling={false}
-                                      color="blue"
-                                      defaultColor="black"
-                                      defaultWeight="SemiBold"
-                                      font="TitilliumWeb"
-                                      fontStyle={
+                                          "backgroundColor": "transparent",
+                                          "borderWidth": 0,
+                                        },
                                         Object {
-                                          "fontSize": 18,
-                                          "lineHeight": 25,
-                                        }
-                                      }
-                                      numberOfLines={2}
-                                      style={
-                                        Array [
-                                          Object {
-                                            "fontSize": 18,
-                                            "lineHeight": 25,
-                                          },
-                                          Object {
-                                            "color": "#0073E6",
-                                            "fontFamily": "Titillium Web",
-                                            "fontStyle": "normal",
-                                            "fontWeight": "600",
-                                          },
-                                        ]
-                                      }
-                                      weight="SemiBold"
-                                    >
-                                      00000000009
-                                    </Text>
-                                  </View>
-                                  <View
-                                    style={
-                                      Object {
-                                        "marginLeft": 16,
-                                      }
+                                          "color": "#0E0F13",
+                                        },
+                                        Object {
+                                          "flex": 0,
+                                          "height": 24,
+                                          "width": 24,
+                                        },
+                                      ]
                                     }
+                                    tintColor="#0E0F13"
+                                    vbHeight={24}
+                                    vbWidth={24}
+                                    width={24}
                                   >
-                                    <RNSVGSvgView
-                                      accessibilityElementsHidden={true}
-                                      accessibilityLabel=""
-                                      accessible={false}
-                                      align="xMidYMid"
-                                      bbHeight={24}
-                                      bbWidth={24}
-                                      color={4278219750}
-                                      focusable={false}
-                                      height={24}
-                                      importantForAccessibility="no-hide-descendants"
-                                      meetOrSlice={0}
-                                      minX={0}
-                                      minY={0}
-                                      style={
-                                        Array [
-                                          Object {
-                                            "backgroundColor": "transparent",
-                                            "borderWidth": 0,
-                                          },
-                                          Object {
-                                            "color": "#0073E6",
-                                          },
-                                          Object {
-                                            "flex": 0,
-                                            "height": 24,
-                                            "width": 24,
-                                          },
-                                        ]
+                                    <RNSVGGroup
+                                      fill={
+                                        Object {
+                                          "payload": 4278190080,
+                                          "type": 0,
+                                        }
                                       }
-                                      tintColor={4278219750}
-                                      vbHeight={24}
-                                      vbWidth={24}
-                                      width={24}
                                     >
-                                      <RNSVGGroup>
-                                        <RNSVGPath
-                                          clipRule={0}
-                                          d="M12 18h8a2 2 0 0 0 2-2V9h-4a3 3 0 0 1-3-3V2h-3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Zm9.332-11.987a2 2 0 0 1 .603.987H18a1 1 0 0 1-1-1V2.227a2 2 0 0 1 .406.281l3.926 3.505ZM14 20h-2a4 4 0 0 1-4-4V6H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2Zm2 0h4a4 4 0 0 0 4-4V7.505a4 4 0 0 0-1.336-2.984l-3.926-3.505A4 4 0 0 0 16.074 0H12a4 4 0 0 0-4 4H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4Z"
-                                          fill={
-                                            Array [
-                                              2,
-                                            ]
-                                          }
-                                          fillRule={0}
-                                          propList={
-                                            Array [
-                                              "fill",
-                                              "fillRule",
-                                            ]
+                                      <RNSVGPath
+                                        d="M6 8c0-3.31371 2.68629-6 6-6 3.3137 0 6 2.68629 6 6 0 2.7248-1.8172 5.0278-4.3079 5.7583C12.3754 14.1446 11 15.2973 11 17v1c0 .5523.4477 1 1 1s1-.4477 1-1v-1c0-.5064.452-1.087 1.255-1.3225C17.5744 14.7039 20 11.6365 20 8c0-4.41828-3.5817-8-8-8-4.41828 0-8 3.58172-8 8 0 .55228.44772 1 1 1s1-.44772 1-1Zm7.5 14.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Z"
+                                        fill={
+                                          Object {
+                                            "type": 2,
                                           }
-                                        />
-                                      </RNSVGGroup>
-                                    </RNSVGSvgView>
-                                  </View>
+                                        }
+                                        propList={
+                                          Array [
+                                            "fill",
+                                          ]
+                                        }
+                                      />
+                                    </RNSVGGroup>
+                                  </RNSVGSvgView>
                                 </View>
                               </View>
                             </View>
                           </View>
-                        </RCTScrollView>
-                      </RCTSafeAreaView>
+                        </View>
+                      </View>
                     </View>
                   </View>
                 </View>
               </View>
             </View>
           </View>
-        </View>
-      </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
+      <View
+        collapsable={false}
+        pointerEvents="box-none"
+        style={
+          Object {
+            "height": 44,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "zIndex": 1,
+          }
+        }
+      />
     </View>
   </RNCSafeAreaProvider>
 </View>
diff --git a/ts/features/pn/store/actions/index.ts b/ts/features/pn/store/actions/index.ts
index 76d2415b795..7d4a6f6a774 100644
--- a/ts/features/pn/store/actions/index.ts
+++ b/ts/features/pn/store/actions/index.ts
@@ -1,27 +1,5 @@
 import { ActionType, createAction, createAsyncAction } from "typesafe-actions";
 import { UIMessageId } from "../../../messages/types";
-import { PaymentRequestsGetResponse } from "../../../../../definitions/backend/PaymentRequestsGetResponse";
-import { Detail_v2Enum } from "../../../../../definitions/backend/PaymentProblemJson";
-
-export type UpdatePaymentForMessageRequest = {
-  messageId: UIMessageId;
-  paymentId: string;
-};
-
-export type UpdatePaymentForMessageSuccess = {
-  messageId: UIMessageId;
-  paymentId: string;
-  paymentData: PaymentRequestsGetResponse;
-};
-
-export type UpdatePaymentForMessageFailure = {
-  messageId: UIMessageId;
-  paymentId: string;
-  details: Detail_v2Enum;
-};
-
-export type UpdatePaymentForMessageCancel =
-  ReadonlyArray<UpdatePaymentForMessageRequest>;
 
 export const pnActivationUpsert = createAsyncAction(
   "PN_ACTIVATION_UPSERT_REQUEST",
@@ -29,42 +7,15 @@ export const pnActivationUpsert = createAsyncAction(
   "PN_ACTIVATION_UPSERT_FAILURE"
 )<boolean, boolean, Error>();
 
-export const updatePaymentForMessage = createAsyncAction(
-  "UPDATE_PAYMENT_FOR_MESSAGE_REQUEST",
-  "UPDATE_PAYMENT_FOR_MESSAGE_SUCCESS",
-  "UPDATE_PAYMENT_FOR_MESSAGE_FAILURE",
-  "UPDATE_PAYMENT_FOR_MESSAGE_CANCEL"
-)<
-  UpdatePaymentForMessageRequest,
-  UpdatePaymentForMessageSuccess,
-  UpdatePaymentForMessageFailure,
-  UpdatePaymentForMessageCancel
->();
-
-export const cancelQueuedPaymentUpdates = createAction(
-  "CANCEL_QUEUED_PAYMENT_UPDATES"
-);
-
-export const setSelectedPayment = createAction(
-  "PN_SET_SELECTED_PAYMENT",
-  resolve => (paymentId: string) => resolve({ paymentId })
-);
-
-export const clearSelectedPayment = createAction("PN_CLEAR_SELECTED_PAYMENT");
-
 export const startPaymentStatusTracking = createAction(
-  "PN_START_TRACKING_PAYMENT_STATUS",
+  "MESSAGES_START_TRACKING_PAYMENT_STATUS",
   resolve => (messageId: UIMessageId) => resolve({ messageId })
 );
 export const cancelPaymentStatusTracking = createAction(
-  "PN_CANCEL_PAYMENT_STATUS_TRACKING"
+  "MESSAGES_CANCEL_PAYMENT_STATUS_TRACKING"
 );
 
 export type PnActions =
   | ActionType<typeof pnActivationUpsert>
-  | ActionType<typeof updatePaymentForMessage>
-  | ActionType<typeof cancelQueuedPaymentUpdates>
-  | ActionType<typeof setSelectedPayment>
-  | ActionType<typeof clearSelectedPayment>
   | ActionType<typeof startPaymentStatusTracking>
   | ActionType<typeof cancelPaymentStatusTracking>;
diff --git a/ts/features/pn/store/reducers/__test__/index.test.ts b/ts/features/pn/store/reducers/__test__/index.test.ts
new file mode 100644
index 00000000000..65d243df753
--- /dev/null
+++ b/ts/features/pn/store/reducers/__test__/index.test.ts
@@ -0,0 +1,143 @@
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import * as O from "fp-ts/lib/Option";
+import { pnUserSelectedPaymentRptIdSelector } from "..";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { appReducer } from "../../../../../store/reducers";
+import { PNMessage } from "../../types/types";
+import { GlobalState } from "../../../../../store/reducers/types";
+
+describe("pnUserSelectedPaymentRptIdSelector", () => {
+  const p3CreditorTaxId = "01234567890";
+  const p3NoticeCode = "012345678912345630";
+  const pnMessage = {
+    recipients: [
+      {
+        payment: {
+          noticeCode: "012345678912345610",
+          creditorTaxId: "01234567890"
+        }
+      },
+      {
+        payment: {
+          noticeCode: "012345678912345620",
+          creditorTaxId: "01234567890"
+        }
+      },
+      {
+        payment: {
+          noticeCode: p3NoticeCode,
+          creditorTaxId: p3CreditorTaxId
+        }
+      }
+    ]
+  };
+  const maybePNMessage = O.some(pnMessage) as O.Option<PNMessage>;
+  const pnMessagePot = pot.some(maybePNMessage) as pot.Pot<
+    O.Option<PNMessage>,
+    Error
+  >;
+  it("should return undefined when the pot is none", () => {
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const internalPNMessagePot = pot.none;
+    const pnUserSelectedPaymentRptId = pnUserSelectedPaymentRptIdSelector(
+      appState,
+      internalPNMessagePot
+    );
+    expect(pnUserSelectedPaymentRptId).toBeUndefined();
+  });
+  it("should return undefined when the pot is noneLoading", () => {
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const internalPNMessagePot = pot.noneLoading;
+    const pnUserSelectedPaymentRptId = pnUserSelectedPaymentRptIdSelector(
+      appState,
+      internalPNMessagePot
+    );
+    expect(pnUserSelectedPaymentRptId).toBeUndefined();
+  });
+  it("should return undefined when the pot is noneUpdating", () => {
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const internalPNMessagePot = pot.noneUpdating(maybePNMessage);
+    const pnUserSelectedPaymentRptId = pnUserSelectedPaymentRptIdSelector(
+      appState,
+      internalPNMessagePot
+    );
+    expect(pnUserSelectedPaymentRptId).toBeUndefined();
+  });
+  it("should return undefined when the pot is noneError", () => {
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const internalPNMessagePot = pot.noneError(new Error());
+    const pnUserSelectedPaymentRptId = pnUserSelectedPaymentRptIdSelector(
+      appState,
+      internalPNMessagePot
+    );
+    expect(pnUserSelectedPaymentRptId).toBeUndefined();
+  });
+  it("should return undefined when the pot some with Option.None", () => {
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const internalPNMessagePot = pot.some(O.none);
+    const pnUserSelectedPaymentRptId = pnUserSelectedPaymentRptIdSelector(
+      appState,
+      internalPNMessagePot
+    );
+    expect(pnUserSelectedPaymentRptId).toBeUndefined();
+  });
+  it("should return undefined when recipients are empty", () => {
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const internalPNMessagePot = pot.some(
+      O.some({
+        recipients: []
+      })
+    ) as pot.Pot<O.Option<PNMessage>, Error>;
+    const pnUserSelectedPaymentRptId = pnUserSelectedPaymentRptIdSelector(
+      appState,
+      internalPNMessagePot
+    );
+    expect(pnUserSelectedPaymentRptId).toBeUndefined();
+  });
+  it("should return undefined when recipients do not have a payment", () => {
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const internalPNMessagePot = pot.some(
+      O.some({
+        recipients: [{}, {}, {}]
+      })
+    ) as pot.Pot<O.Option<PNMessage>, Error>;
+    const pnUserSelectedPaymentRptId = pnUserSelectedPaymentRptIdSelector(
+      appState,
+      internalPNMessagePot
+    );
+    expect(pnUserSelectedPaymentRptId).toBeUndefined();
+  });
+  it("should return undefined when user selected payments do not match", () => {
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const pnUserSelectedPaymentRptId = pnUserSelectedPaymentRptIdSelector(
+      appState,
+      pnMessagePot
+    );
+    expect(pnUserSelectedPaymentRptId).toBeUndefined();
+  });
+  it("should return undefined when user selected payments do not match", () => {
+    const appState = appReducer(undefined, applicationChangeState("active"));
+    const rptId = `${p3CreditorTaxId}${p3NoticeCode}`;
+    const userSelectedPayments =
+      appState.entities.messages.payments.userSelectedPayments;
+    userSelectedPayments.add(rptId);
+    const finalState = {
+      ...appState,
+      entities: {
+        ...appState.entities,
+        messages: {
+          ...appState.entities.messages,
+          payments: {
+            ...appState.entities.messages.payments,
+            userSelectedPayments
+          }
+        }
+      }
+    } as GlobalState;
+    const pnUserSelectedPaymentRptId = pnUserSelectedPaymentRptIdSelector(
+      finalState,
+      pnMessagePot
+    );
+    expect(pnUserSelectedPaymentRptId).toBe(rptId);
+  });
+});
diff --git a/ts/features/pn/store/reducers/__test__/payments.test.ts b/ts/features/pn/store/reducers/__test__/payments.test.ts
new file mode 100644
index 00000000000..1643ee00c8c
--- /dev/null
+++ b/ts/features/pn/store/reducers/__test__/payments.test.ts
@@ -0,0 +1,215 @@
+import { appReducer } from "../../../../../store/reducers";
+import { updatePaymentForMessage } from "../../../../messages/store/actions";
+import { UIMessageId } from "../../../../messages/types";
+import { paymentsButtonStateSelector } from "../payments";
+import { Detail_v2Enum } from "../../../../../../definitions/backend/PaymentProblemJson";
+import { reproduceSequence } from "../../../../../utils/tests";
+import { GlobalState } from "../../../../../store/reducers/types";
+import { Action } from "../../../../../store/actions/types";
+import { NotificationPaymentInfo } from "../../../../../../definitions/pn/NotificationPaymentInfo";
+
+describe("paymentsButtonStateSelector", () => {
+  it("should return hidden for an unmatching message Id on store", () => {
+    const updatePaymentForMessageAction = updatePaymentForMessage.request({
+      messageId: "m1" as UIMessageId,
+      paymentId: "p1"
+    });
+    const startingState = appReducer(undefined, updatePaymentForMessageAction);
+    const buttonState = paymentsButtonStateSelector(
+      startingState,
+      "m2" as UIMessageId,
+      undefined,
+      5
+    );
+    expect(buttonState).toBe("hidden");
+  });
+  it("should return hidden when all visible payments are processed", () => {
+    const sequenceOfActions: ReadonlyArray<Action> = [
+      updatePaymentForMessage.failure({
+        messageId: "m1" as UIMessageId,
+        paymentId: "c1n1",
+        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
+      }),
+      updatePaymentForMessage.failure({
+        messageId: "m1" as UIMessageId,
+        paymentId: "c1n2",
+        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
+      }),
+      updatePaymentForMessage.failure({
+        messageId: "m1" as UIMessageId,
+        paymentId: "c1n3",
+        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
+      }),
+      updatePaymentForMessage.failure({
+        messageId: "m1" as UIMessageId,
+        paymentId: "c1n4",
+        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
+      }),
+      updatePaymentForMessage.failure({
+        messageId: "m1" as UIMessageId,
+        paymentId: "c1n5",
+        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
+      })
+    ];
+    const appState = reproduceSequence(
+      {} as GlobalState,
+      appReducer,
+      sequenceOfActions
+    );
+    const payments = [
+      {
+        noticeCode: "n1",
+        creditorTaxId: "c1"
+      },
+      {
+        noticeCode: "n2",
+        creditorTaxId: "c1"
+      },
+      {
+        noticeCode: "n3",
+        creditorTaxId: "c1"
+      },
+      {
+        noticeCode: "n4",
+        creditorTaxId: "c1"
+      },
+      {
+        noticeCode: "n5",
+        creditorTaxId: "c1"
+      }
+    ] as Array<NotificationPaymentInfo>;
+    const buttonState = paymentsButtonStateSelector(
+      appState,
+      "m1" as UIMessageId,
+      payments,
+      5
+    );
+    expect(buttonState).toBe("hidden");
+  });
+  it("should return visibleLoading when all visible payments are processing", () => {
+    const sequenceOfActions: ReadonlyArray<Action> = [
+      updatePaymentForMessage.failure({
+        messageId: "m1" as UIMessageId,
+        paymentId: "c1n6",
+        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
+      }),
+      updatePaymentForMessage.failure({
+        messageId: "m1" as UIMessageId,
+        paymentId: "c1n7",
+        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
+      }),
+      updatePaymentForMessage.failure({
+        messageId: "m1" as UIMessageId,
+        paymentId: "c1n8",
+        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
+      }),
+      updatePaymentForMessage.failure({
+        messageId: "m1" as UIMessageId,
+        paymentId: "c1n9",
+        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
+      }),
+      updatePaymentForMessage.failure({
+        messageId: "m1" as UIMessageId,
+        paymentId: "c1n10",
+        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
+      })
+    ];
+    const appState = reproduceSequence(
+      {} as GlobalState,
+      appReducer,
+      sequenceOfActions
+    );
+    const payments = [
+      {
+        noticeCode: "n1",
+        creditorTaxId: "c1"
+      },
+      {
+        noticeCode: "n2",
+        creditorTaxId: "c1"
+      },
+      {
+        noticeCode: "n3",
+        creditorTaxId: "c1"
+      },
+      {
+        noticeCode: "n4",
+        creditorTaxId: "c1"
+      },
+      {
+        noticeCode: "n5",
+        creditorTaxId: "c1"
+      }
+    ] as Array<NotificationPaymentInfo>;
+    const buttonState = paymentsButtonStateSelector(
+      appState,
+      "m1" as UIMessageId,
+      payments,
+      5
+    );
+    expect(buttonState).toBe("visibleLoading");
+  });
+  it("should return visibleEnabled when at least one visible payment has completed processing", () => {
+    const sequenceOfActions: ReadonlyArray<Action> = [
+      updatePaymentForMessage.failure({
+        messageId: "m1" as UIMessageId,
+        paymentId: "c1n5",
+        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
+      }),
+      updatePaymentForMessage.failure({
+        messageId: "m1" as UIMessageId,
+        paymentId: "c1n7",
+        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
+      }),
+      updatePaymentForMessage.failure({
+        messageId: "m1" as UIMessageId,
+        paymentId: "c1n8",
+        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
+      }),
+      updatePaymentForMessage.failure({
+        messageId: "m1" as UIMessageId,
+        paymentId: "c1n9",
+        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
+      }),
+      updatePaymentForMessage.failure({
+        messageId: "m1" as UIMessageId,
+        paymentId: "c1n10",
+        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
+      })
+    ];
+    const appState = reproduceSequence(
+      {} as GlobalState,
+      appReducer,
+      sequenceOfActions
+    );
+    const payments = [
+      {
+        noticeCode: "n1",
+        creditorTaxId: "c1"
+      },
+      {
+        noticeCode: "n2",
+        creditorTaxId: "c1"
+      },
+      {
+        noticeCode: "n3",
+        creditorTaxId: "c1"
+      },
+      {
+        noticeCode: "n4",
+        creditorTaxId: "c1"
+      },
+      {
+        noticeCode: "n5",
+        creditorTaxId: "c1"
+      }
+    ] as Array<NotificationPaymentInfo>;
+    const buttonState = paymentsButtonStateSelector(
+      appState,
+      "m1" as UIMessageId,
+      payments,
+      5
+    );
+    expect(buttonState).toBe("visibleEnabled");
+  });
+});
diff --git a/ts/features/pn/store/reducers/__tests__/payments.test.ts b/ts/features/pn/store/reducers/__tests__/payments.test.ts
deleted file mode 100644
index 5fad349bfd9..00000000000
--- a/ts/features/pn/store/reducers/__tests__/payments.test.ts
+++ /dev/null
@@ -1,698 +0,0 @@
-import { Detail_v2Enum } from "../../../../../../definitions/backend/PaymentProblemJson";
-import { PaymentRequestsGetResponse } from "../../../../../../definitions/backend/PaymentRequestsGetResponse";
-import { NotificationPaymentInfo } from "../../../../../../definitions/pn/NotificationPaymentInfo";
-import { reloadAllMessages } from "../../../../messages/store/actions";
-import { Action } from "../../../../../store/actions/types";
-import { appReducer } from "../../../../../store/reducers";
-import { UIMessageId } from "../../../../messages/types";
-import { GlobalState } from "../../../../../store/reducers/types";
-import { reproduceSequence } from "../../../../../utils/tests";
-import {
-  remoteError,
-  remoteLoading,
-  remoteReady,
-  remoteUndefined
-} from "../../../../../common/model/RemoteValue";
-import {
-  clearSelectedPayment,
-  setSelectedPayment,
-  updatePaymentForMessage
-} from "../../actions";
-import {
-  initialState,
-  paymentStatusForUISelector,
-  paymentsButtonStateSelector,
-  paymentsReducer,
-  selectedPaymentIdSelector,
-  shouldUpdatePaymentSelector
-} from "../payments";
-
-describe("PN Payments reducer's tests", () => {
-  it("Should match initial state upon initialization", () => {
-    const firstState = paymentsReducer(undefined, {} as Action);
-    expect(firstState).toEqual(initialState);
-  });
-  it("Should have undefined value for an undefined Message Id", () => {
-    const requestAction = updatePaymentForMessage.request({
-      messageId: "m1" as UIMessageId,
-      paymentId: "p1"
-    });
-    const paymentsState = paymentsReducer(undefined, requestAction);
-    const unknownMessageId = "m2" as UIMessageId;
-    const messageState = paymentsState[unknownMessageId];
-    expect(messageState).toBeUndefined();
-  });
-  it("Should have undefined value for an unknown paymentId", () => {
-    const messageId = "m1" as UIMessageId;
-    const requestAction = updatePaymentForMessage.request({
-      messageId,
-      paymentId: "p1"
-    });
-    const paymentsState = paymentsReducer(undefined, requestAction);
-    const messageState = paymentsState[messageId];
-    expect(messageState).toBeTruthy();
-    const unknownPaymentId = "p2";
-    const paymentState = messageState?.[unknownPaymentId];
-    expect(paymentState).toBeUndefined();
-  });
-  it("Should have remoteLoading value for a updatePaymentForMessage.request", () => {
-    const messageId = "m1" as UIMessageId;
-    const paymentId = "p1";
-    const requestAction = updatePaymentForMessage.request({
-      messageId,
-      paymentId
-    });
-    const paymentsState = paymentsReducer(undefined, requestAction);
-    const messageState = paymentsState[messageId];
-    expect(messageState).toBeTruthy();
-    const paymentState = messageState?.[paymentId];
-    expect(paymentState).toBe(remoteLoading);
-  });
-  it("Should have remoteReady value for a updatePaymentForMessage.success", () => {
-    const messageId = "m1" as UIMessageId;
-    const paymentId = "p1";
-    const requestAction = updatePaymentForMessage.request({
-      messageId,
-      paymentId
-    });
-    const paymentsState = paymentsReducer(undefined, requestAction);
-    const paymentData = {
-      importoSingoloVersamento: 100,
-      codiceContestoPagamento: "a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6"
-    } as PaymentRequestsGetResponse;
-    const successAction = updatePaymentForMessage.success({
-      messageId,
-      paymentId,
-      paymentData
-    });
-    const updatedPaymentsState = paymentsReducer(paymentsState, successAction);
-    const messageState = updatedPaymentsState[messageId];
-    expect(messageState).toBeTruthy();
-    const paymentState = messageState?.[paymentId];
-    const remoteSuccessPaymentData = remoteReady(paymentData);
-    expect(paymentState).toStrictEqual(remoteSuccessPaymentData);
-  });
-  it("Should have remoteError value for a updatePaymentForMessage.failure", () => {
-    const messageId = "m1" as UIMessageId;
-    const paymentId = "p1";
-    const requestAction = updatePaymentForMessage.request({
-      messageId,
-      paymentId
-    });
-    const paymentsState = paymentsReducer(undefined, requestAction);
-    const details = Detail_v2Enum.CANALE_BUSTA_ERRATA;
-    const failureAction = updatePaymentForMessage.failure({
-      messageId,
-      paymentId,
-      details
-    });
-    const updatedPaymentsState = paymentsReducer(paymentsState, failureAction);
-    const messageState = updatedPaymentsState[messageId];
-    expect(messageState).toBeTruthy();
-    const paymentState = messageState?.[paymentId];
-    const remoteSuccessPaymentData = remoteError(details);
-    expect(paymentState).toStrictEqual(remoteSuccessPaymentData);
-  });
-  it("Should handle multiple payments for a single message", () => {
-    const messageId = "m1" as UIMessageId;
-    const paymentId1 = "p1";
-    const requestAction = updatePaymentForMessage.request({
-      messageId,
-      paymentId: paymentId1
-    });
-    const firstStateGeneration = paymentsReducer(undefined, requestAction);
-    const paymentId2 = "p2";
-    const secondPaymentData = {
-      importoSingoloVersamento: 100,
-      codiceContestoPagamento: "a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6"
-    } as PaymentRequestsGetResponse;
-    const successAction = updatePaymentForMessage.success({
-      messageId,
-      paymentId: paymentId2,
-      paymentData: secondPaymentData
-    });
-    const secondStateGeneration = paymentsReducer(
-      firstStateGeneration,
-      successAction
-    );
-    const paymentId3 = "p3";
-    const thirdPaymentDetails = Detail_v2Enum.CANALE_BUSTA_ERRATA;
-    const failureAction = updatePaymentForMessage.failure({
-      messageId,
-      paymentId: paymentId3,
-      details: thirdPaymentDetails
-    });
-    const finalStateGeneration = paymentsReducer(
-      secondStateGeneration,
-      failureAction
-    );
-    const messageState = finalStateGeneration[messageId];
-    expect(messageState).toBeTruthy();
-    const firstPaymentState = messageState?.[paymentId1];
-    expect(firstPaymentState).toBe(remoteLoading);
-    const secondPaymentState = messageState?.[paymentId2];
-    expect(secondPaymentState).toStrictEqual(remoteReady(secondPaymentData));
-    const thirdPaymentState = messageState?.[paymentId3];
-    expect(thirdPaymentState).toStrictEqual(remoteError(thirdPaymentDetails));
-  });
-  it("Should handle multiple payments for multiple messages", () => {
-    const messageId1 = "m1" as UIMessageId;
-    const paymentId1 = "p1";
-    const requestAction = updatePaymentForMessage.request({
-      messageId: messageId1,
-      paymentId: paymentId1
-    });
-    const firstStateGeneration = paymentsReducer(undefined, requestAction);
-    const messageId2 = "m2" as UIMessageId;
-    const successfulPaymentData = {
-      importoSingoloVersamento: 100,
-      codiceContestoPagamento: "a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6"
-    } as PaymentRequestsGetResponse;
-    const successAction = updatePaymentForMessage.success({
-      messageId: messageId2,
-      paymentId: paymentId1,
-      paymentData: successfulPaymentData
-    });
-    const secondStateGeneration = paymentsReducer(
-      firstStateGeneration,
-      successAction
-    );
-    const messageId3 = "m3" as UIMessageId;
-    const failedPaymentDetails = Detail_v2Enum.CANALE_BUSTA_ERRATA;
-    const failureAction = updatePaymentForMessage.failure({
-      messageId: messageId3,
-      paymentId: paymentId1,
-      details: failedPaymentDetails
-    });
-    const finalStateGeneration = paymentsReducer(
-      secondStateGeneration,
-      failureAction
-    );
-    const message1State = finalStateGeneration[messageId1];
-    expect(message1State).toBeTruthy();
-    const firstPaymentState = message1State?.[paymentId1];
-    expect(firstPaymentState).toBe(remoteLoading);
-    const message2State = finalStateGeneration[messageId2];
-    expect(message2State).toBeTruthy();
-    const secondPaymentState = message2State?.[paymentId1];
-    expect(secondPaymentState).toStrictEqual(
-      remoteReady(successfulPaymentData)
-    );
-    const message3State = finalStateGeneration[messageId3];
-    expect(message3State).toBeTruthy();
-    const thirdPaymentState = message3State?.[paymentId1];
-    expect(thirdPaymentState).toStrictEqual(remoteError(failedPaymentDetails));
-  });
-  it("Should remove payment statuses on updatePaymentForMessage.cancel", () => {
-    const messageId1 = "m1" as UIMessageId;
-    const paymentId1 = "p1";
-    const requestAction1 = updatePaymentForMessage.request({
-      messageId: messageId1,
-      paymentId: paymentId1
-    });
-    const firstStateGeneration = paymentsReducer(undefined, requestAction1);
-    const messageId2 = "m2" as UIMessageId;
-    const requestAction2 = updatePaymentForMessage.request({
-      messageId: messageId2,
-      paymentId: paymentId1
-    });
-    const secondStateGeneration = paymentsReducer(
-      firstStateGeneration,
-      requestAction2
-    );
-    const paymentId2 = "p2";
-    const requestAction3 = updatePaymentForMessage.request({
-      messageId: messageId2,
-      paymentId: paymentId2
-    });
-    const thirdStateGeneration = paymentsReducer(
-      secondStateGeneration,
-      requestAction3
-    );
-    const messageId3 = "m3" as UIMessageId;
-    const requestAction4 = updatePaymentForMessage.request({
-      messageId: messageId3,
-      paymentId: paymentId1
-    });
-    const fourthStateGeneration = paymentsReducer(
-      thirdStateGeneration,
-      requestAction4
-    );
-    const requestAction5 = updatePaymentForMessage.request({
-      messageId: messageId3,
-      paymentId: paymentId2
-    });
-    const fifthStateGeneration = paymentsReducer(
-      fourthStateGeneration,
-      requestAction5
-    );
-    const paymentId3 = "p3";
-    const requestAction6 = updatePaymentForMessage.request({
-      messageId: messageId3,
-      paymentId: paymentId3
-    });
-    const sixthStateGeneration = paymentsReducer(
-      fifthStateGeneration,
-      requestAction6
-    );
-
-    const m1S1 = sixthStateGeneration[messageId1];
-    expect(m1S1).toBeTruthy();
-    const m1p1S1 = m1S1?.[paymentId1];
-    expect(m1p1S1).toStrictEqual(remoteLoading);
-
-    const m2S1 = sixthStateGeneration[messageId2];
-    expect(m2S1).toBeTruthy();
-    const m2p1S1 = m2S1?.[paymentId1];
-    expect(m2p1S1).toStrictEqual(remoteLoading);
-    const m2p2S1 = m2S1?.[paymentId2];
-    expect(m2p2S1).toStrictEqual(remoteLoading);
-
-    const m3S1 = sixthStateGeneration[messageId3];
-    expect(m3S1).toBeTruthy();
-    const m3p1S1 = m3S1?.[paymentId1];
-    expect(m3p1S1).toStrictEqual(remoteLoading);
-    const m3p2S1 = m3S1?.[paymentId2];
-    expect(m3p2S1).toStrictEqual(remoteLoading);
-    const m3p3S1 = m3S1?.[paymentId3];
-    expect(m3p3S1).toStrictEqual(remoteLoading);
-
-    const cancelPaymentAction = updatePaymentForMessage.cancel([
-      {
-        messageId: messageId1,
-        paymentId: paymentId1
-      },
-      {
-        messageId: messageId2,
-        paymentId: paymentId2
-      },
-      {
-        messageId: messageId3,
-        paymentId: paymentId2
-      },
-      {
-        messageId: messageId3,
-        paymentId: paymentId3
-      }
-    ]);
-    const finalStateGeneration = paymentsReducer(
-      sixthStateGeneration,
-      cancelPaymentAction
-    );
-
-    const m1S2 = finalStateGeneration[messageId1];
-    expect(m1S2).toBeTruthy();
-    const m1p1S2 = m1S2?.[paymentId1];
-    expect(m1p1S2).toBeUndefined();
-
-    const m2S2 = finalStateGeneration[messageId2];
-    expect(m2S2).toBeTruthy();
-    const m2p1S2 = m2S2?.[paymentId1];
-    expect(m2p1S2).toStrictEqual(remoteLoading);
-    const m2p2S2 = m2S2?.[paymentId2];
-    expect(m2p2S2).toBeUndefined();
-
-    const m3S2 = finalStateGeneration[messageId3];
-    expect(m3S2).toBeTruthy();
-    const m3p1S2 = m3S2?.[paymentId1];
-    expect(m3p1S2).toStrictEqual(remoteLoading);
-    const m3p2S2 = m3S2?.[paymentId2];
-    expect(m3p2S2).toBeUndefined();
-    const m3p3S2 = m3S2?.[paymentId3];
-    expect(m3p3S2).toBeUndefined();
-  });
-  it("Should have the paymentId for a setSelectedPayment action", () => {
-    const paymentId = "p1";
-    const setSelectedPaymentAction = setSelectedPayment(paymentId);
-    const paymentsState = paymentsReducer(undefined, setSelectedPaymentAction);
-    const selectedPaymentId = paymentsState.selectedPayment;
-    expect(selectedPaymentId).toBe(paymentId);
-  });
-  it("Should clear the paymentId for a clearSelectedPayment action", () => {
-    const paymentId = "p1";
-    const setSelectedPaymentAction = setSelectedPayment(paymentId);
-    const startingPaymentsState = paymentsReducer(
-      undefined,
-      setSelectedPaymentAction
-    );
-    const startingSelectedPaymentId = startingPaymentsState.selectedPayment;
-    expect(startingSelectedPaymentId).toBe(paymentId);
-    const endingPaymentsState = paymentsReducer(
-      startingPaymentsState,
-      clearSelectedPayment()
-    );
-    const endingSelectedPaymentId = endingPaymentsState.selectedPayment;
-    expect(endingSelectedPaymentId).toBeUndefined();
-  });
-  it("Should clear the paymentId for a reloadAllMessages action", () => {
-    const paymentId = "p1";
-    const setSelectedPaymentAction = setSelectedPayment(paymentId);
-    const startingPaymentsState = paymentsReducer(
-      undefined,
-      setSelectedPaymentAction
-    );
-    const startingSelectedPaymentId = startingPaymentsState.selectedPayment;
-    expect(startingSelectedPaymentId).toBe(paymentId);
-    const endingPaymentsState = paymentsReducer(
-      startingPaymentsState,
-      reloadAllMessages.request({ pageSize: 12, filter: {} })
-    );
-    const endingSelectedPaymentId = endingPaymentsState.selectedPayment;
-    expect(endingSelectedPaymentId).toBeUndefined();
-  });
-});
-
-describe("PN Payments selectors' tests", () => {
-  it("shouldUpdatePaymentSelector should return true for an unmatching message Id", () => {
-    const startingState = appReducer(undefined, {} as Action);
-    const updatePaymentForMessageAction = updatePaymentForMessage.request({
-      messageId: "m1" as UIMessageId,
-      paymentId: "p1"
-    });
-    const state = appReducer(startingState, updatePaymentForMessageAction);
-    const shouldUpdatePayment = shouldUpdatePaymentSelector(
-      state,
-      "m2" as UIMessageId,
-      "p1"
-    );
-    expect(shouldUpdatePayment).toBeTruthy();
-  });
-  it("shouldUpdatePaymentSelector should return true for a matching message Id with an unmatching payment Id", () => {
-    const startingState = appReducer(undefined, {} as Action);
-    const updatePaymentForMessageAction = updatePaymentForMessage.request({
-      messageId: "m1" as UIMessageId,
-      paymentId: "p1"
-    });
-    const state = appReducer(startingState, updatePaymentForMessageAction);
-    const shouldUpdatePayment = shouldUpdatePaymentSelector(
-      state,
-      "m1" as UIMessageId,
-      "p2"
-    );
-    expect(shouldUpdatePayment).toBeTruthy();
-  });
-  it("shouldUpdatePaymentSelector should return false for a matching <message Id, payment Id> pair", () => {
-    const startingState = appReducer(undefined, {} as Action);
-    const updatePaymentForMessageAction = updatePaymentForMessage.request({
-      messageId: "m1" as UIMessageId,
-      paymentId: "p1"
-    });
-    const state = appReducer(startingState, updatePaymentForMessageAction);
-    const shouldUpdatePayment = shouldUpdatePaymentSelector(
-      state,
-      "m1" as UIMessageId,
-      "p1"
-    );
-    expect(shouldUpdatePayment).toBeFalsy();
-  });
-  it("paymentStatusForUISelector should return remoteUndefined for an unmatching message Id", () => {
-    const startingState = appReducer(undefined, {} as Action);
-    const updatePaymentForMessageAction = updatePaymentForMessage.request({
-      messageId: "m1" as UIMessageId,
-      paymentId: "p1"
-    });
-    const state = appReducer(startingState, updatePaymentForMessageAction);
-    const paymentStatus = paymentStatusForUISelector(
-      state,
-      "m2" as UIMessageId,
-      "p1"
-    );
-    expect(paymentStatus).toBe(remoteUndefined);
-  });
-  it("paymentStatusForUISelector should return remoteUndefined for a matching message Id with an unmatching payment Id", () => {
-    const startingState = appReducer(undefined, {} as Action);
-    const updatePaymentForMessageAction = updatePaymentForMessage.request({
-      messageId: "m1" as UIMessageId,
-      paymentId: "p1"
-    });
-    const state = appReducer(startingState, updatePaymentForMessageAction);
-    const paymentStatus = paymentStatusForUISelector(
-      state,
-      "m1" as UIMessageId,
-      "p2"
-    );
-    expect(paymentStatus).toBe(remoteUndefined);
-  });
-  it("paymentStatusForUISelector should return remoteUndefined for a matching <message Id, payment Id> that is loading", () => {
-    const startingState = appReducer(undefined, {} as Action);
-    const updatePaymentForMessageAction = updatePaymentForMessage.request({
-      messageId: "m1" as UIMessageId,
-      paymentId: "p1"
-    });
-    const state = appReducer(startingState, updatePaymentForMessageAction);
-    const paymentStatusOnStore =
-      state.features.pn.payments["m1" as UIMessageId]?.p1;
-    expect(paymentStatusOnStore).toBe(remoteLoading);
-    const paymentStatus = paymentStatusForUISelector(
-      state,
-      "m1" as UIMessageId,
-      "p1"
-    );
-    expect(paymentStatus).toBe(remoteUndefined);
-  });
-  it("paymentStatusForUISelector should return remoteReady for a matching <message Id, payment Id> that is payable", () => {
-    const paymentData = {} as PaymentRequestsGetResponse;
-    const startingState = appReducer(undefined, {} as Action);
-    const updatePaymentForMessageAction = updatePaymentForMessage.success({
-      messageId: "m1" as UIMessageId,
-      paymentId: "p1",
-      paymentData
-    });
-    const state = appReducer(startingState, updatePaymentForMessageAction);
-    const paymentStatus = paymentStatusForUISelector(
-      state,
-      "m1" as UIMessageId,
-      "p1"
-    );
-    expect(paymentStatus).toStrictEqual(remoteReady(paymentData));
-  });
-  it("paymentStatusForUISelector should return remoteError for a matching <message Id, payment Id> that is not payable anymore", () => {
-    const details = Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO;
-    const startingState = appReducer(undefined, {} as Action);
-    const updatePaymentForMessageAction = updatePaymentForMessage.failure({
-      messageId: "m1" as UIMessageId,
-      paymentId: "p1",
-      details
-    });
-    const state = appReducer(startingState, updatePaymentForMessageAction);
-    const paymentStatus = paymentStatusForUISelector(
-      state,
-      "m1" as UIMessageId,
-      "p1"
-    );
-    expect(paymentStatus).toStrictEqual(remoteError(details));
-  });
-  it("paymentsButtonStateSelector should return hidden for an unmatching message Id on store", () => {
-    const updatePaymentForMessageAction = updatePaymentForMessage.request({
-      messageId: "m1" as UIMessageId,
-      paymentId: "p1"
-    });
-    const startingState = appReducer(undefined, updatePaymentForMessageAction);
-    const buttonState = paymentsButtonStateSelector(
-      startingState,
-      "m2" as UIMessageId,
-      undefined,
-      5
-    );
-    expect(buttonState).toBe("hidden");
-  });
-  it("paymentsButtonStateSelector should return hidden when all visible payments are processed", () => {
-    const sequenceOfActions: ReadonlyArray<Action> = [
-      updatePaymentForMessage.failure({
-        messageId: "m1" as UIMessageId,
-        paymentId: "c1n1",
-        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
-      }),
-      updatePaymentForMessage.failure({
-        messageId: "m1" as UIMessageId,
-        paymentId: "c1n2",
-        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
-      }),
-      updatePaymentForMessage.failure({
-        messageId: "m1" as UIMessageId,
-        paymentId: "c1n3",
-        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
-      }),
-      updatePaymentForMessage.failure({
-        messageId: "m1" as UIMessageId,
-        paymentId: "c1n4",
-        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
-      }),
-      updatePaymentForMessage.failure({
-        messageId: "m1" as UIMessageId,
-        paymentId: "c1n5",
-        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
-      })
-    ];
-    const appState = reproduceSequence(
-      {} as GlobalState,
-      appReducer,
-      sequenceOfActions
-    );
-    const payments = [
-      {
-        noticeCode: "n1",
-        creditorTaxId: "c1"
-      },
-      {
-        noticeCode: "n2",
-        creditorTaxId: "c1"
-      },
-      {
-        noticeCode: "n3",
-        creditorTaxId: "c1"
-      },
-      {
-        noticeCode: "n4",
-        creditorTaxId: "c1"
-      },
-      {
-        noticeCode: "n5",
-        creditorTaxId: "c1"
-      }
-    ] as Array<NotificationPaymentInfo>;
-    const buttonState = paymentsButtonStateSelector(
-      appState,
-      "m1" as UIMessageId,
-      payments,
-      5
-    );
-    expect(buttonState).toBe("hidden");
-  });
-  it("paymentsButtonStateSelector should return visibleLoading when all visible payments are processing", () => {
-    const sequenceOfActions: ReadonlyArray<Action> = [
-      updatePaymentForMessage.failure({
-        messageId: "m1" as UIMessageId,
-        paymentId: "c1n6",
-        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
-      }),
-      updatePaymentForMessage.failure({
-        messageId: "m1" as UIMessageId,
-        paymentId: "c1n7",
-        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
-      }),
-      updatePaymentForMessage.failure({
-        messageId: "m1" as UIMessageId,
-        paymentId: "c1n8",
-        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
-      }),
-      updatePaymentForMessage.failure({
-        messageId: "m1" as UIMessageId,
-        paymentId: "c1n9",
-        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
-      }),
-      updatePaymentForMessage.failure({
-        messageId: "m1" as UIMessageId,
-        paymentId: "c1n10",
-        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
-      })
-    ];
-    const appState = reproduceSequence(
-      {} as GlobalState,
-      appReducer,
-      sequenceOfActions
-    );
-    const payments = [
-      {
-        noticeCode: "n1",
-        creditorTaxId: "c1"
-      },
-      {
-        noticeCode: "n2",
-        creditorTaxId: "c1"
-      },
-      {
-        noticeCode: "n3",
-        creditorTaxId: "c1"
-      },
-      {
-        noticeCode: "n4",
-        creditorTaxId: "c1"
-      },
-      {
-        noticeCode: "n5",
-        creditorTaxId: "c1"
-      }
-    ] as Array<NotificationPaymentInfo>;
-    const buttonState = paymentsButtonStateSelector(
-      appState,
-      "m1" as UIMessageId,
-      payments,
-      5
-    );
-    expect(buttonState).toBe("visibleLoading");
-  });
-  it("paymentsButtonStateSelector should return visibleEnabled when at least one visible payment has completed processing", () => {
-    const sequenceOfActions: ReadonlyArray<Action> = [
-      updatePaymentForMessage.failure({
-        messageId: "m1" as UIMessageId,
-        paymentId: "c1n5",
-        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
-      }),
-      updatePaymentForMessage.failure({
-        messageId: "m1" as UIMessageId,
-        paymentId: "c1n7",
-        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
-      }),
-      updatePaymentForMessage.failure({
-        messageId: "m1" as UIMessageId,
-        paymentId: "c1n8",
-        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
-      }),
-      updatePaymentForMessage.failure({
-        messageId: "m1" as UIMessageId,
-        paymentId: "c1n9",
-        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
-      }),
-      updatePaymentForMessage.failure({
-        messageId: "m1" as UIMessageId,
-        paymentId: "c1n10",
-        details: Detail_v2Enum.PPT_PAGAMENTO_DUPLICATO
-      })
-    ];
-    const appState = reproduceSequence(
-      {} as GlobalState,
-      appReducer,
-      sequenceOfActions
-    );
-    const payments = [
-      {
-        noticeCode: "n1",
-        creditorTaxId: "c1"
-      },
-      {
-        noticeCode: "n2",
-        creditorTaxId: "c1"
-      },
-      {
-        noticeCode: "n3",
-        creditorTaxId: "c1"
-      },
-      {
-        noticeCode: "n4",
-        creditorTaxId: "c1"
-      },
-      {
-        noticeCode: "n5",
-        creditorTaxId: "c1"
-      }
-    ] as Array<NotificationPaymentInfo>;
-    const buttonState = paymentsButtonStateSelector(
-      appState,
-      "m1" as UIMessageId,
-      payments,
-      5
-    );
-    expect(buttonState).toBe("visibleEnabled");
-  });
-  it("selectedPaymentIdSelector should return undefined when none is set", () => {
-    const appState = appReducer(undefined, {} as Action);
-    const selectedPaymentId = selectedPaymentIdSelector(appState);
-    expect(selectedPaymentId).toBeUndefined();
-  });
-  it("selectedPaymentIdSelector should return the selected payment", () => {
-    const appState = appReducer(undefined, setSelectedPayment("p1"));
-    const selectedPaymentId = selectedPaymentIdSelector(appState);
-    expect(selectedPaymentId).toBe("p1");
-  });
-});
diff --git a/ts/features/pn/store/reducers/activation.ts b/ts/features/pn/store/reducers/activation.ts
index 62c3333a155..d172c68b4c6 100644
--- a/ts/features/pn/store/reducers/activation.ts
+++ b/ts/features/pn/store/reducers/activation.ts
@@ -1,7 +1,7 @@
 import * as pot from "@pagopa/ts-commons/lib/pot";
 import { createSelector } from "reselect";
 import { getType } from "typesafe-actions";
-import { loadServicePreference } from "../../../../store/actions/services/servicePreference";
+import { loadServicePreference } from "../../../services/store/actions";
 import { Action } from "../../../../store/actions/types";
 import { GlobalState } from "../../../../store/reducers/types";
 import { pnActivationUpsert } from "../actions";
diff --git a/ts/features/pn/store/reducers/index.ts b/ts/features/pn/store/reducers/index.ts
index fb602d51ee6..59fc3d3f97f 100644
--- a/ts/features/pn/store/reducers/index.ts
+++ b/ts/features/pn/store/reducers/index.ts
@@ -1,24 +1,25 @@
 import * as pot from "@pagopa/ts-commons/lib/pot";
+import * as O from "fp-ts/lib/Option";
+import * as RA from "fp-ts/lib/ReadonlyArray";
 import { combineReducers } from "redux";
 import { createSelector } from "reselect";
 import { pipe } from "fp-ts/lib/function";
-import * as O from "fp-ts/lib/Option";
 import { Action } from "../../../../store/actions/types";
 import { thirdPartyFromIdSelector } from "../../../messages/store/reducers/thirdPartyById";
 import { toPNMessage } from "../types/transformers";
-import { UIAttachmentId, UIMessageId } from "../../../messages/types";
+import { UIMessageId } from "../../../messages/types";
 import { GlobalState } from "../../../../store/reducers/types";
+import { PNMessage } from "../types/types";
+import { getRptIdStringFromPayment } from "../../utils/rptId";
+import { isUserSelectedPaymentSelector } from "../../../messages/store/reducers/payments";
 import { pnActivationReducer, PnActivationState } from "./activation";
-import { MultiplePaymentState, paymentsReducer } from "./payments";
 
 export type PnState = {
   activation: PnActivationState;
-  payments: MultiplePaymentState;
 };
 
 export const pnReducer = combineReducers<PnState, Action>({
-  activation: pnActivationReducer,
-  payments: paymentsReducer
+  activation: pnActivationReducer
 });
 
 export const pnMessageFromIdSelector = createSelector(
@@ -29,7 +30,7 @@ export const pnMessageFromIdSelector = createSelector(
 export const pnMessageAttachmentSelector =
   (state: GlobalState) =>
   (ioMessageId: UIMessageId) =>
-  (pnMessageAttachmentId: UIAttachmentId) =>
+  (pnMessageAttachmentId: string) =>
     pipe(
       pnMessageFromIdSelector(state, ioMessageId),
       pot.toOption,
@@ -42,3 +43,32 @@ export const pnMessageAttachmentSelector =
         )
       )
     );
+
+export const pnUserSelectedPaymentRptIdSelector = (
+  state: GlobalState,
+  pnMessagePot: pot.Pot<O.Option<PNMessage>, Error>
+) =>
+  pipe(
+    pnMessagePot,
+    pot.toOption,
+    O.flatten,
+    O.map(message => message.recipients),
+    O.chain(recipients =>
+      pipe(
+        recipients,
+        RA.findFirstMap(recipient =>
+          pipe(
+            recipient.payment,
+            O.fromNullable,
+            O.map(getRptIdStringFromPayment),
+            O.map(rptId => isUserSelectedPaymentSelector(state, rptId)),
+            O.getOrElse(() => false)
+          )
+            ? O.fromNullable(recipient.payment)
+            : O.none
+        )
+      )
+    ),
+    O.map(getRptIdStringFromPayment),
+    O.toUndefined
+  );
diff --git a/ts/features/pn/store/reducers/payments.ts b/ts/features/pn/store/reducers/payments.ts
index 86a73f167cd..cb941c1006c 100644
--- a/ts/features/pn/store/reducers/payments.ts
+++ b/ts/features/pn/store/reducers/payments.ts
@@ -2,130 +2,18 @@ import { pipe } from "fp-ts/lib/function";
 import * as B from "fp-ts/lib/boolean";
 import * as RA from "fp-ts/lib/ReadonlyArray";
 import * as O from "fp-ts/lib/Option";
-import { getType } from "typesafe-actions";
-import { Action } from "../../../../store/actions/types";
 import { UIMessageId } from "../../../messages/types";
 import { GlobalState } from "../../../../store/reducers/types";
 import {
   isError,
-  isLoading,
   isReady,
-  isUndefined,
-  remoteError,
-  remoteLoading,
-  remoteReady,
-  remoteUndefined,
   RemoteValue
 } from "../../../../common/model/RemoteValue";
-import {
-  clearSelectedPayment,
-  setSelectedPayment,
-  updatePaymentForMessage
-} from "../actions";
 import { Detail_v2Enum } from "../../../../../definitions/backend/PaymentProblemJson";
 import { PaymentRequestsGetResponse } from "../../../../../definitions/backend/PaymentRequestsGetResponse";
 import { NotificationPaymentInfo } from "../../../../../definitions/pn/NotificationPaymentInfo";
-import { getRptIdStringFromPayment } from "../../utils/rptId";
-import { reloadAllMessages } from "../../../messages/store/actions";
-
-export type MultiplePaymentState = {
-  [key: UIMessageId]: SinglePaymentState | undefined;
-  selectedPayment?: string;
-};
-
-export type SinglePaymentState = {
-  [key: string]:
-    | RemoteValue<PaymentRequestsGetResponse, Detail_v2Enum>
-    | undefined;
-};
-
-export const initialState: MultiplePaymentState = {};
-
-export const paymentsReducer = (
-  state: MultiplePaymentState = initialState,
-  action: Action
-): MultiplePaymentState => {
-  switch (action.type) {
-    case getType(updatePaymentForMessage.request):
-      return {
-        ...state,
-        [action.payload.messageId]: {
-          ...state[action.payload.messageId],
-          [action.payload.paymentId]: remoteLoading
-        }
-      };
-    case getType(updatePaymentForMessage.success):
-      return {
-        ...state,
-        [action.payload.messageId]: {
-          ...state[action.payload.messageId],
-          [action.payload.paymentId]: remoteReady(action.payload.paymentData)
-        }
-      };
-    case getType(updatePaymentForMessage.failure):
-      return {
-        ...state,
-        [action.payload.messageId]: {
-          ...state[action.payload.messageId],
-          [action.payload.paymentId]: remoteError(action.payload.details)
-        }
-      };
-    case getType(updatePaymentForMessage.cancel):
-      return action.payload.reduce<MultiplePaymentState>(
-        (previousState, queuedUpdateActionPayload) => ({
-          ...previousState,
-          [queuedUpdateActionPayload.messageId]: {
-            ...previousState[queuedUpdateActionPayload.messageId],
-            [queuedUpdateActionPayload.paymentId]: undefined
-          }
-        }),
-        state
-      );
-    case getType(setSelectedPayment):
-      return {
-        ...state,
-        selectedPayment: action.payload.paymentId
-      };
-    case getType(clearSelectedPayment):
-      return {
-        ...state,
-        selectedPayment: undefined
-      };
-    case getType(reloadAllMessages.request):
-      return initialState;
-  }
-  return state;
-};
-
-export const shouldUpdatePaymentSelector = (
-  state: GlobalState,
-  messageId: UIMessageId,
-  paymentId: string
-) =>
-  pipe(
-    state.features.pn.payments[messageId],
-    O.fromNullable,
-    O.chainNullableK(multiplePaymentState => multiplePaymentState[paymentId]),
-    O.getOrElse<RemoteValue<PaymentRequestsGetResponse, Detail_v2Enum>>(
-      () => remoteUndefined
-    ),
-    isUndefined
-  );
-
-export const paymentStatusForUISelector = (
-  state: GlobalState,
-  messageId: UIMessageId,
-  paymentId: string
-): RemoteValue<PaymentRequestsGetResponse, Detail_v2Enum> =>
-  pipe(
-    state.features.pn.payments[messageId],
-    O.fromNullable,
-    O.chainNullableK(multiplePaymentState => multiplePaymentState[paymentId]),
-    O.getOrElse<RemoteValue<PaymentRequestsGetResponse, Detail_v2Enum>>(
-      () => remoteUndefined
-    ),
-    remoteValue => (isLoading(remoteValue) ? remoteUndefined : remoteValue)
-  );
+import { getRptIdStringFromPayment } from "../../../pn/utils/rptId";
+import { SinglePaymentState } from "../../../messages/store/reducers/payments";
 
 export const paymentsButtonStateSelector = (
   state: GlobalState,
@@ -134,7 +22,7 @@ export const paymentsButtonStateSelector = (
   maxVisiblePaymentCount: number
 ) =>
   pipe(
-    state.features.pn.payments[messageId],
+    state.entities.messages.payments[messageId],
     O.fromNullable,
     computeUpdatedPaymentCount(payments, maxVisiblePaymentCount),
     buttonStateFromUpdatedPaymentCount(payments, maxVisiblePaymentCount)
@@ -236,6 +124,3 @@ const buttonStateFromUpdatedPaymentCount =
         )
       )
     );
-
-export const selectedPaymentIdSelector = (state: GlobalState) =>
-  state.features.pn.payments.selectedPayment;
diff --git a/ts/features/pn/store/sagas/watchPaymentStatusSaga.ts b/ts/features/pn/store/sagas/watchPaymentStatusSaga.ts
index 81ad66e9d0d..9fef0d163c9 100644
--- a/ts/features/pn/store/sagas/watchPaymentStatusSaga.ts
+++ b/ts/features/pn/store/sagas/watchPaymentStatusSaga.ts
@@ -2,10 +2,10 @@ import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import { call, race, select, take } from "typed-redux-saga/macro";
 import { ActionType, isActionOf } from "typesafe-actions";
+import { updatePaymentForMessage } from "../../../messages/store/actions";
 import {
   cancelPaymentStatusTracking,
-  startPaymentStatusTracking,
-  updatePaymentForMessage
+  startPaymentStatusTracking
 } from "../actions";
 import {
   maxVisiblePaymentCountGenerator,
diff --git a/ts/features/pn/store/sagas/watchPnSaga.ts b/ts/features/pn/store/sagas/watchPnSaga.ts
index 4e79cf929be..b4bafab9ad4 100644
--- a/ts/features/pn/store/sagas/watchPnSaga.ts
+++ b/ts/features/pn/store/sagas/watchPnSaga.ts
@@ -4,7 +4,7 @@ import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import * as E from "fp-ts/lib/Either";
 import { SagaIterator } from "redux-saga";
-import { call, fork, put, select, takeLatest } from "typed-redux-saga/macro";
+import { call, put, select, takeLatest } from "typed-redux-saga/macro";
 import { ActionType } from "typesafe-actions";
 import { apiUrlPrefix } from "../../../../config";
 import { isPnTestEnabledSelector } from "../../../../store/reducers/persistedPreferences";
@@ -16,10 +16,8 @@ import {
   trackPNServiceStatusChangeError,
   trackPNServiceStatusChangeSuccess
 } from "../../analytics";
-import { servicePreferenceSelector } from "../../../../store/reducers/entities/services/servicePreference";
-import { isServicePreferenceResponseSuccess } from "../../../../types/services/ServicePreferenceResponse";
-import { BackendClient } from "../../../../api/backend";
-import { watchPaymentUpdateRequests } from "./watchPaymentUpdateRequests";
+import { servicePreferenceSelector } from "../../../services/store/reducers/servicePreference";
+import { isServicePreferenceResponseSuccess } from "../../../services/types/ServicePreferenceResponse";
 import { watchPaymentStatusForMixpanelTracking } from "./watchPaymentStatusSaga";
 
 function* handlePnActivation(
@@ -75,10 +73,7 @@ function* reportPNServiceStatusOnFailure(predictedValue: boolean) {
   trackPNServiceStatusChangeError(isServiceActive);
 }
 
-export function* watchPnSaga(
-  bearerToken: SessionToken,
-  getVerificaRpt: BackendClient["getVerificaRpt"]
-): SagaIterator {
+export function* watchPnSaga(bearerToken: SessionToken): SagaIterator {
   const pnClient = createPnClient(apiUrlPrefix, bearerToken);
 
   yield* takeLatest(
@@ -87,8 +82,6 @@ export function* watchPnSaga(
     pnClient.upsertPNActivation
   );
 
-  yield* fork(watchPaymentUpdateRequests, getVerificaRpt);
-
   yield* takeLatest(
     startPaymentStatusTracking,
     watchPaymentStatusForMixpanelTracking
diff --git a/ts/features/pn/store/types/transformers.ts b/ts/features/pn/store/types/transformers.ts
index 3b0c5269074..c9beacf92aa 100644
--- a/ts/features/pn/store/types/transformers.ts
+++ b/ts/features/pn/store/types/transformers.ts
@@ -2,7 +2,6 @@ import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import { ThirdPartyMessageWithContent } from "../../../../../definitions/backend/ThirdPartyMessageWithContent";
 import { ThirdPartyMessage } from "../../../../../definitions/pn/ThirdPartyMessage";
-import { attachmentsFromThirdPartyMessage } from "../../../messages/store/reducers/transformers";
 import { PNMessage } from "./types";
 
 export const toPNMessage = (
@@ -16,9 +15,6 @@ export const toPNMessage = (
     O.map(details => ({
       ...details,
       created_at: messageFromApi.created_at,
-      attachments: pipe(
-        attachmentsFromThirdPartyMessage(messageFromApi),
-        O.toUndefined
-      )
+      attachments: messageFromApi.third_party_message.attachments
     }))
   );
diff --git a/ts/features/pn/store/types/types.ts b/ts/features/pn/store/types/types.ts
index 192e7d9652a..f8151d19877 100644
--- a/ts/features/pn/store/types/types.ts
+++ b/ts/features/pn/store/types/types.ts
@@ -1,7 +1,7 @@
+import { ThirdPartyAttachment } from "../../../../../definitions/backend/ThirdPartyAttachment";
 import { IOReceivedNotification } from "../../../../../definitions/pn/IOReceivedNotification";
-import { UIAttachment } from "../../../messages/types";
 
 export type PNMessage = IOReceivedNotification & {
   created_at: Date;
-  attachments?: ReadonlyArray<UIAttachment>;
+  attachments?: ReadonlyArray<ThirdPartyAttachment>;
 };
diff --git a/ts/features/pn/utils/__tests__/index.test.ts b/ts/features/pn/utils/__tests__/index.test.ts
index f16d3b7a63a..9877ffdf70e 100644
--- a/ts/features/pn/utils/__tests__/index.test.ts
+++ b/ts/features/pn/utils/__tests__/index.test.ts
@@ -1,18 +1,13 @@
 import * as O from "fp-ts/lib/Option";
 import { isPNOptInMessage } from "..";
-import { UIService } from "../../../../store/reducers/entities/services/types";
 import { GlobalState } from "../../../../store/reducers/types";
 import { CTAS } from "../../../messages/types/MessageCTA";
 import { ServiceId } from "../../../../../definitions/backend/ServiceId";
 
-const pnOptInServiceId = () => "optInServiceId";
 const navigateToServiceLink = () =>
   "ioit://services/service-detail?serviceId=optInServiceId&activate=true";
 
-const getMockService = () =>
-  ({
-    id: pnOptInServiceId()
-  } as UIService);
+const getMockPnOptInServiceId = () => "optInServiceId" as ServiceId;
 
 const getMockState = () =>
   ({
@@ -20,7 +15,7 @@ const getMockState = () =>
       status: O.some({
         config: {
           pn: {
-            optInServiceId: pnOptInServiceId()
+            optInServiceId: getMockPnOptInServiceId()
           }
         }
       })
@@ -39,19 +34,17 @@ const getMockCTAs = () =>
     }
   } as CTAS);
 
-const getMaybeCTAs = () => O.some(getMockCTAs());
-
 type IsPNOptInMessageTestInputType = {
   testDescription: string;
   input: {
-    CTAs: O.Option<CTAS>;
-    service: UIService | undefined;
+    CTAs: CTAS | undefined;
+    serviceId: ServiceId | undefined;
     state: GlobalState;
   };
   output: {
     isPNOptInMessage: boolean;
-    cta1HasServiceNavigationLink: boolean;
-    cta2HasServiceNavigationLink: boolean;
+    cta1LinksToPNService: boolean;
+    cta2LinksToPNService: boolean;
   };
 };
 
@@ -59,97 +52,97 @@ const isPNOptInMessageTestInput: Array<IsPNOptInMessageTestInputType> = [
   {
     testDescription: "should detect the OptIn format and both CTAs",
     input: {
-      CTAs: getMaybeCTAs(),
-      service: getMockService(),
+      CTAs: getMockCTAs(),
+      serviceId: getMockPnOptInServiceId(),
       state: getMockState()
     },
     output: {
       isPNOptInMessage: true,
-      cta1HasServiceNavigationLink: true,
-      cta2HasServiceNavigationLink: true
+      cta1LinksToPNService: true,
+      cta2LinksToPNService: true
     }
   },
   {
     testDescription:
       "should detect the OptIn format, the first CTA but not the second (when its input is undefined)",
     input: {
-      CTAs: O.some({
+      CTAs: {
         ...getMockCTAs(),
         cta_2: undefined
-      }),
-      service: getMockService(),
+      },
+      serviceId: getMockPnOptInServiceId(),
       state: getMockState()
     },
     output: {
       isPNOptInMessage: true,
-      cta1HasServiceNavigationLink: true,
-      cta2HasServiceNavigationLink: false
+      cta1LinksToPNService: true,
+      cta2LinksToPNService: false
     }
   },
   {
     testDescription:
       "should detect the OptIn format, the first CTA but not the second (when its action does not contain a service navigation link)",
     input: {
-      CTAs: O.some({
+      CTAs: {
         ...getMockCTAs(),
         cta_2: {
           text: "Attiva il servizio",
           action: "ioit://main/messages"
         }
-      }),
-      service: getMockService(),
+      },
+      serviceId: getMockPnOptInServiceId(),
       state: getMockState()
     },
     output: {
       isPNOptInMessage: true,
-      cta1HasServiceNavigationLink: true,
-      cta2HasServiceNavigationLink: false
+      cta1LinksToPNService: true,
+      cta2LinksToPNService: false
     }
   },
   {
     testDescription:
       "should detect the OptIn format, the second CTA but not the fist (when its action does not contain a service navigation link)",
     input: {
-      CTAs: O.some({
+      CTAs: {
         ...getMockCTAs(),
         cta_1: {
           text: "Attiva il servizio",
           action: "ioit://main/messages"
         }
-      }),
-      service: getMockService(),
+      },
+      serviceId: getMockPnOptInServiceId(),
       state: getMockState()
     },
     output: {
       isPNOptInMessage: true,
-      cta1HasServiceNavigationLink: false,
-      cta2HasServiceNavigationLink: true
+      cta1LinksToPNService: false,
+      cta2LinksToPNService: true
     }
   },
   {
     testDescription:
       "should not recognize the OptIn format, when the first CTA does not contain a service navigation link and the second is undefined",
     input: {
-      CTAs: O.some({
+      CTAs: {
         cta_1: {
           text: "Attiva il servizio",
           action: "ioit://main/messages"
         }
-      }),
-      service: getMockService(),
+      },
+      serviceId: getMockPnOptInServiceId(),
       state: getMockState()
     },
     output: {
       isPNOptInMessage: false,
-      cta1HasServiceNavigationLink: false,
-      cta2HasServiceNavigationLink: false
+      cta1LinksToPNService: false,
+      cta2LinksToPNService: false
     }
   },
   {
     testDescription:
       "should not recognize the OptIn format, when both CTAs do not contain a service navigation link",
     input: {
-      CTAs: O.some({
+      CTAs: {
         cta_1: {
           text: "Attiva il servizio",
           action: "ioit://main/messages"
@@ -158,67 +151,64 @@ const isPNOptInMessageTestInput: Array<IsPNOptInMessageTestInputType> = [
           text: "Attiva il servizio",
           action: "ioit://main/services"
         }
-      }),
-      service: getMockService(),
+      },
+      serviceId: getMockPnOptInServiceId(),
       state: getMockState()
     },
     output: {
       isPNOptInMessage: false,
-      cta1HasServiceNavigationLink: false,
-      cta2HasServiceNavigationLink: false
+      cta1LinksToPNService: false,
+      cta2LinksToPNService: false
     }
   },
   {
     testDescription:
-      "should not recognize the OptIn format, when CTAs are O.none",
+      "should not recognize the OptIn format, when CTAs are not defined",
     input: {
-      CTAs: O.none,
-      service: getMockService(),
+      CTAs: undefined,
+      serviceId: getMockPnOptInServiceId(),
       state: getMockState()
     },
     output: {
       isPNOptInMessage: false,
-      cta1HasServiceNavigationLink: false,
-      cta2HasServiceNavigationLink: false
+      cta1LinksToPNService: false,
+      cta2LinksToPNService: false
     }
   },
   {
     testDescription:
       "should not recognize the OptIn format, when the service's id is not the OptIn one",
     input: {
-      CTAs: getMaybeCTAs(),
-      service: {
-        ...getMockService(),
-        id: "NotTheOptInOne" as ServiceId
-      },
+      CTAs: getMockCTAs(),
+      serviceId: "NotTheOptInOne" as ServiceId,
       state: getMockState()
     },
     output: {
       isPNOptInMessage: false,
-      cta1HasServiceNavigationLink: false,
-      cta2HasServiceNavigationLink: false
+      cta1LinksToPNService: false,
+      cta2LinksToPNService: false
     }
   },
   {
     testDescription:
       "should not recognize the OptIn format, when the service is undefined",
     input: {
-      CTAs: getMaybeCTAs(),
-      service: undefined,
+      CTAs: getMockCTAs(),
+      serviceId: undefined,
       state: getMockState()
     },
     output: {
       isPNOptInMessage: false,
-      cta1HasServiceNavigationLink: false,
-      cta2HasServiceNavigationLink: false
+      cta1LinksToPNService: false,
+      cta2LinksToPNService: false
     }
   },
   {
     testDescription:
       "should not recognize the OptIn format, when state.backendStatus.status.config.pn.optInServiceId does not match service.id",
     input: {
-      CTAs: getMaybeCTAs(),
-      service: getMockService(),
+      CTAs: getMockCTAs(),
+      serviceId: getMockPnOptInServiceId(),
       state: {
         ...getMockState(),
         backendStatus: {
@@ -234,16 +224,16 @@ const isPNOptInMessageTestInput: Array<IsPNOptInMessageTestInputType> = [
     },
     output: {
       isPNOptInMessage: false,
-      cta1HasServiceNavigationLink: false,
-      cta2HasServiceNavigationLink: false
+      cta1LinksToPNService: false,
+      cta2LinksToPNService: false
     }
   },
   {
     testDescription:
       "should not recognize the OptIn format, when state.backendStatus.status is O.none",
     input: {
-      CTAs: getMaybeCTAs(),
-      service: getMockService(),
+      CTAs: getMockCTAs(),
+      serviceId: getMockPnOptInServiceId(),
       state: {
         ...getMockState(),
         backendStatus: {
@@ -253,8 +243,8 @@ const isPNOptInMessageTestInput: Array<IsPNOptInMessageTestInputType> = [
     },
     output: {
       isPNOptInMessage: false,
-      cta1HasServiceNavigationLink: false,
-      cta2HasServiceNavigationLink: false
+      cta1LinksToPNService: false,
+      cta2LinksToPNService: false
     }
   }
 ];
@@ -264,7 +254,7 @@ describe("isPNOptInMessage", () => {
     it(testData.testDescription, () => {
       const isPNOptInMessageInfo = isPNOptInMessage(
         testData.input.CTAs,
-        testData.input.service,
+        testData.input.serviceId,
         testData.input.state
       );
       expect(isPNOptInMessageInfo).toEqual(testData.output);
diff --git a/ts/features/pn/utils/index.ts b/ts/features/pn/utils/index.ts
index a7d4ef91778..48fea153997 100644
--- a/ts/features/pn/utils/index.ts
+++ b/ts/features/pn/utils/index.ts
@@ -1,12 +1,8 @@
 import * as pot from "@pagopa/ts-commons/lib/pot";
 import { identity, pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
-import * as E from "fp-ts/lib/Either";
 import * as RA from "fp-ts/lib/ReadonlyArray";
-import { RptIdFromString } from "@pagopa/io-pagopa-commons/lib/pagopa";
-import { Dispatch } from "redux";
 import I18n from "../../../i18n";
-import { UIService } from "../../../store/reducers/entities/services/types";
 import { PNMessage } from "../store/types/types";
 import { NotificationStatus } from "../../../../definitions/pn/NotificationStatus";
 import { CTAS } from "../../messages/types/MessageCTA";
@@ -14,13 +10,9 @@ import { isServiceDetailNavigationLink } from "../../../utils/internalLink";
 import { GlobalState } from "../../../store/reducers/types";
 import { NotificationRecipient } from "../../../../definitions/pn/NotificationRecipient";
 import { NotificationPaymentInfo } from "../../../../definitions/pn/NotificationPaymentInfo";
-import { paymentInitializeState } from "../../../store/actions/wallet/payment";
-import NavigationService from "../../../navigation/NavigationService";
-import ROUTES from "../../../navigation/routes";
-import { setSelectedPayment } from "../store/actions";
-import { trackPNPaymentStart } from "../analytics";
 import { ATTACHMENT_CATEGORY } from "../../messages/types/attachmentCategory";
-import { UIAttachment } from "../../messages/types";
+import { ThirdPartyAttachment } from "../../../../definitions/backend/ThirdPartyAttachment";
+import { ServiceId } from "../../../../definitions/backend/ServiceId";
 
 export const maxVisiblePaymentCountGenerator = () => 5;
 
@@ -32,56 +24,51 @@ export function getNotificationStatusInfo(status: NotificationStatus) {
 
 export type PNOptInMessageInfo = {
   isPNOptInMessage: boolean;
-  cta1HasServiceNavigationLink: boolean;
-  cta2HasServiceNavigationLink: boolean;
+  cta1LinksToPNService: boolean;
+  cta2LinksToPNService: boolean;
 };
 
 export const isPNOptInMessage = (
-  maybeCtas: O.Option<CTAS>,
-  service: UIService | undefined,
+  ctas: CTAS | undefined,
+  serviceId: ServiceId | undefined,
   state: GlobalState
 ) =>
   pipe(
-    service,
+    serviceId,
     O.fromNullable,
-    O.chain(service =>
+    O.chain(serviceId =>
       pipe(
         state.backendStatus.status,
         O.map(
-          backendStatus => backendStatus.config.pn.optInServiceId === service.id
+          backendStatus => backendStatus.config.pn.optInServiceId === serviceId
         )
       )
     ),
     O.filter(identity),
-    O.chain(_ =>
+    O.chain(() =>
       pipe(
-        maybeCtas,
+        ctas,
+        O.fromNullable,
         O.map(ctas => ({
-          cta1HasServiceNavigationLink: isServiceDetailNavigationLink(
+          cta1LinksToPNService: isServiceDetailNavigationLink(
             ctas.cta_1.action
           ),
-          cta2HasServiceNavigationLink:
+          cta2LinksToPNService:
             !!ctas.cta_2 && isServiceDetailNavigationLink(ctas.cta_2.action)
         })),
-        O.map(
-          ctaNavigationLinkInfo =>
-            ({
-              isPNOptInMessage:
-                ctaNavigationLinkInfo.cta1HasServiceNavigationLink ||
-                ctaNavigationLinkInfo.cta2HasServiceNavigationLink,
-              ...ctaNavigationLinkInfo
-            } as PNOptInMessageInfo)
-        )
+        O.map(ctaNavigationLinkInfo => ({
+          isPNOptInMessage:
+            ctaNavigationLinkInfo.cta1LinksToPNService ||
+            ctaNavigationLinkInfo.cta2LinksToPNService,
+          ...ctaNavigationLinkInfo
+        }))
       )
     ),
-    O.getOrElse(
-      () =>
-        ({
-          isPNOptInMessage: false,
-          cta1HasServiceNavigationLink: false,
-          cta2HasServiceNavigationLink: false
-        } as PNOptInMessageInfo)
-    )
+    O.getOrElse<PNOptInMessageInfo>(() => ({
+      isPNOptInMessage: false,
+      cta1LinksToPNService: false,
+      cta2LinksToPNService: false
+    }))
   );
 
 export const paymentsFromPNMessagePot = (
@@ -125,31 +112,6 @@ export const containsF24FromPNMessagePot = (
   pipe(
     pot.getOrElse(potMessage, O.none),
     O.chainNullableK(message => message.attachments),
-    O.getOrElse<ReadonlyArray<UIAttachment>>(() => []),
+    O.getOrElse<ReadonlyArray<ThirdPartyAttachment>>(() => []),
     RA.some(attachment => attachment.category === ATTACHMENT_CATEGORY.F24)
   );
-
-export const initializeAndNavigateToWalletForPayment = (
-  paymentId: string,
-  dispatch: Dispatch<any>,
-  decodeErrorCallback: (() => void) | undefined,
-  preNavigationCallback: (() => void) | undefined = undefined
-) => {
-  const eitherRptId = RptIdFromString.decode(paymentId);
-  if (E.isLeft(eitherRptId)) {
-    decodeErrorCallback?.();
-    return;
-  }
-
-  preNavigationCallback?.();
-
-  trackPNPaymentStart();
-
-  dispatch(setSelectedPayment(paymentId));
-  dispatch(paymentInitializeState());
-
-  NavigationService.navigate(ROUTES.WALLET_NAVIGATOR, {
-    screen: ROUTES.PAYMENT_TRANSACTION_SUMMARY,
-    params: { rptId: eitherRptId.right, startOrigin: "message" }
-  });
-};
diff --git a/ts/features/services/common/hooks/useFirstEffect.ts b/ts/features/services/common/hooks/useFirstEffect.ts
new file mode 100644
index 00000000000..15e7db14021
--- /dev/null
+++ b/ts/features/services/common/hooks/useFirstEffect.ts
@@ -0,0 +1,17 @@
+import { useRef } from "react";
+
+/**
+ * custom hook that returns true only on the first render
+ */
+export const useFirstEffect = () => {
+  const isFirstRender = useRef(true);
+
+  if (isFirstRender.current) {
+    // eslint-disable-next-line functional/immutable-data
+    isFirstRender.current = false;
+
+    return true;
+  }
+
+  return isFirstRender.current;
+};
diff --git a/ts/features/services/components/CardWithMarkdownContent.tsx b/ts/features/services/components/CardWithMarkdownContent.tsx
new file mode 100644
index 00000000000..c61e48be5da
--- /dev/null
+++ b/ts/features/services/components/CardWithMarkdownContent.tsx
@@ -0,0 +1,34 @@
+import React, { memo } from "react";
+import { StyleSheet, View } from "react-native";
+import { IOColors } from "@pagopa/io-app-design-system";
+import { Markdown } from "../../../components/ui/Markdown/Markdown";
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: IOColors.white,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: IOColors["grey-100"],
+    padding: 24
+  }
+});
+
+export type CardWithMarkdownContentProps = {
+  content: string;
+};
+
+const CSS_STYLE = `
+  body {
+    line-height: 1.5;
+  }
+`;
+
+const CardWithMarkdownContent = memo(
+  ({ content }: CardWithMarkdownContentProps) => (
+    <View style={styles.card}>
+      <Markdown cssStyle={CSS_STYLE}>{content}</Markdown>
+    </View>
+  )
+);
+
+export { CardWithMarkdownContent };
diff --git a/ts/features/services/components/ServiceDetailsFailure.tsx b/ts/features/services/components/ServiceDetailsFailure.tsx
new file mode 100644
index 00000000000..199a8cc1219
--- /dev/null
+++ b/ts/features/services/components/ServiceDetailsFailure.tsx
@@ -0,0 +1,49 @@
+import React, { useCallback, useLayoutEffect } from "react";
+import { OperationResultScreenContent } from "../../../components/screens/OperationResultScreenContent";
+import { useIONavigation } from "../../../navigation/params/AppParamsList";
+import { useIODispatch } from "../../../store/hooks";
+import { loadServiceDetail } from "../../../store/actions/services";
+import I18n from "../../../i18n";
+
+export type ServiceDetailsFailureProps = {
+  serviceId: string;
+};
+
+export const ServiceDetailsFailure = ({
+  serviceId
+}: ServiceDetailsFailureProps) => {
+  const dispatch = useIODispatch();
+  const navigation = useIONavigation();
+
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerShown: false
+    });
+  }, [navigation]);
+
+  const handleBack = () => navigation.goBack();
+
+  const handleRetry = useCallback(() => {
+    dispatch(loadServiceDetail.request(serviceId));
+  }, [dispatch, serviceId]);
+
+  return (
+    <OperationResultScreenContent
+      pictogram="umbrellaNew"
+      title={I18n.t("services.details.failure.title")}
+      subtitle={I18n.t("services.details.failure.subtitle")}
+      action={{
+        label: I18n.t("services.details.failure.back"),
+        accessibilityLabel: I18n.t("services.details.failure.back"),
+        onPress: handleBack,
+        testID: "service-details-failure-back"
+      }}
+      secondaryAction={{
+        label: I18n.t("services.details.failure.retry"),
+        accessibilityLabel: I18n.t("services.details.failure.retry"),
+        onPress: handleRetry,
+        testID: "service-details-failure-retry"
+      }}
+    />
+  );
+};
diff --git a/ts/features/services/components/ServiceDetailsHeader.tsx b/ts/features/services/components/ServiceDetailsHeader.tsx
new file mode 100644
index 00000000000..80c1bd39fc5
--- /dev/null
+++ b/ts/features/services/components/ServiceDetailsHeader.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { ImageURISource, StyleSheet, View } from "react-native";
+import {
+  Avatar,
+  H3,
+  IOSpacingScale,
+  IOStyles,
+  LabelSmall
+} from "@pagopa/io-app-design-system";
+
+const ITEM_PADDING_VERTICAL: IOSpacingScale = 6;
+const AVATAR_MARGIN_RIGHT: IOSpacingScale = 16;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: ITEM_PADDING_VERTICAL
+  },
+  itemAvatar: {
+    marginRight: AVATAR_MARGIN_RIGHT
+  }
+});
+
+export type ServiceDetailsHeaderProps = {
+  logoUri: ReadonlyArray<ImageURISource>;
+  organizationName: string;
+  serviceName: string;
+};
+
+export const ServiceDetailsHeader = ({
+  logoUri,
+  organizationName,
+  serviceName
+}: ServiceDetailsHeaderProps) => (
+  <View style={styles.container}>
+    <View style={styles.itemAvatar}>
+      <Avatar logoUri={logoUri} size="medium" />
+    </View>
+    <View style={IOStyles.flex}>
+      <H3>{serviceName}</H3>
+      <LabelSmall fontSize="regular" color="grey-700">
+        {organizationName}
+      </LabelSmall>
+    </View>
+  </View>
+);
diff --git a/ts/features/services/components/ServiceDetailsPreferences.tsx b/ts/features/services/components/ServiceDetailsPreferences.tsx
new file mode 100644
index 00000000000..35767a54364
--- /dev/null
+++ b/ts/features/services/components/ServiceDetailsPreferences.tsx
@@ -0,0 +1,162 @@
+import React, { ComponentProps, useCallback, useEffect } from "react";
+import { FlatList, ListRenderItemInfo } from "react-native";
+import {
+  Divider,
+  IOToast,
+  ListItemHeader,
+  ListItemSwitch
+} from "@pagopa/io-app-design-system";
+import * as O from "fp-ts/lib/Option";
+import * as RA from "fp-ts/lib/ReadonlyArray";
+import { pipe } from "fp-ts/lib/function";
+import { NotificationChannelEnum } from "../../../../definitions/backend/NotificationChannel";
+import { ServiceId } from "../../../../definitions/backend/ServiceId";
+import I18n from "../../../i18n";
+import { useIODispatch, useIOSelector } from "../../../store/hooks";
+import { isPremiumMessagesOptInOutEnabledSelector } from "../../../store/reducers/backendStatus";
+import { EnabledChannels } from "../../../utils/profile";
+import { useFirstEffect } from "../common/hooks/useFirstEffect";
+import { upsertServicePreference } from "../store/actions";
+import {
+  isErrorServicePreferenceSelector,
+  isLoadingServicePreferenceSelector,
+  servicePreferenceResponseSuccessSelector
+} from "../store/reducers/servicePreference";
+import { serviceMetadataInfoSelector } from "../store/reducers/servicesById";
+
+const hasChannel = (
+  notificationChannel: NotificationChannelEnum,
+  channels: ReadonlyArray<NotificationChannelEnum> = []
+) =>
+  pipe(
+    channels,
+    RA.findFirst(channel => channel === notificationChannel),
+    O.isSome
+  );
+
+type PreferenceSwitchListItem = {
+  condition?: boolean;
+} & ComponentProps<typeof ListItemSwitch>;
+
+export type ServiceDetailsPreferencesProps = {
+  serviceId: ServiceId;
+  availableChannels?: ReadonlyArray<NotificationChannelEnum>;
+};
+
+export const ServiceDetailsPreferences = ({
+  serviceId,
+  availableChannels = []
+}: ServiceDetailsPreferencesProps) => {
+  const isFirstRender = useFirstEffect();
+
+  const dispatch = useIODispatch();
+
+  const servicePreferenceResponseSuccess = useIOSelector(
+    servicePreferenceResponseSuccessSelector
+  );
+
+  const isLoadingServicePreference = useIOSelector(
+    isLoadingServicePreferenceSelector
+  );
+
+  const isErrorServicePreference = useIOSelector(
+    isErrorServicePreferenceSelector
+  );
+
+  const isPremiumMessagesOptInOutEnabled = useIOSelector(
+    isPremiumMessagesOptInOutEnabledSelector
+  );
+
+  const serviceMetadataInfo = useIOSelector(state =>
+    serviceMetadataInfoSelector(state, serviceId)
+  );
+
+  const isInboxPreferenceEnabled = pipe(
+    servicePreferenceResponseSuccess,
+    O.fromNullable,
+    O.map(servicePreference => servicePreference.value.inbox),
+    O.getOrElse(() => false)
+  );
+
+  useEffect(() => {
+    if (!isFirstRender && isErrorServicePreference) {
+      IOToast.error(I18n.t("global.genericError"));
+    }
+  }, [isFirstRender, isErrorServicePreference]);
+
+  const handleSwitchValueChange = useCallback(
+    (channel: keyof EnabledChannels, value: boolean) => {
+      if (servicePreferenceResponseSuccess) {
+        dispatch(
+          upsertServicePreference.request({
+            id: serviceId,
+            ...servicePreferenceResponseSuccess.value,
+            [channel]: value
+          })
+        );
+      }
+    },
+    [dispatch, serviceId, servicePreferenceResponseSuccess]
+  );
+
+  const preferenceListItems: ReadonlyArray<PreferenceSwitchListItem> = [
+    // this switch is disabled if the current service is a special service.
+    // the user can enable the service only using the proper special service flow.
+    {
+      disabled: serviceMetadataInfo?.isSpecialService,
+      icon: "message",
+      isLoading: isLoadingServicePreference,
+      label: I18n.t("services.details.preferences.inbox"),
+      onSwitchValueChange: (value: boolean) =>
+        handleSwitchValueChange("inbox", value),
+      value: servicePreferenceResponseSuccess?.value.inbox
+    },
+    {
+      condition:
+        isInboxPreferenceEnabled &&
+        hasChannel(NotificationChannelEnum.WEBHOOK, availableChannels),
+      icon: "bell",
+      isLoading: isLoadingServicePreference,
+      label: I18n.t("services.details.preferences.pushNotifications"),
+      onSwitchValueChange: (value: boolean) =>
+        handleSwitchValueChange("push", value),
+      value: servicePreferenceResponseSuccess?.value.push
+    },
+    {
+      condition: isInboxPreferenceEnabled && isPremiumMessagesOptInOutEnabled,
+      icon: "read",
+      isLoading: isLoadingServicePreference,
+      label: I18n.t("services.details.preferences.messageReadStatus"),
+      onSwitchValueChange: (value: boolean) =>
+        handleSwitchValueChange("can_access_message_read_status", value),
+      value:
+        servicePreferenceResponseSuccess?.value.can_access_message_read_status
+    }
+  ];
+
+  const filteredPreferenceListItems = preferenceListItems.filter(
+    item => item.condition !== false
+  );
+
+  const renderItem = useCallback(
+    ({
+      item: { condition, ...rest }
+    }: ListRenderItemInfo<PreferenceSwitchListItem>) => (
+      <ListItemSwitch {...rest} />
+    ),
+    []
+  );
+
+  return (
+    <FlatList
+      ListHeaderComponent={
+        <ListItemHeader label={I18n.t("services.details.preferences.title")} />
+      }
+      ItemSeparatorComponent={() => <Divider />}
+      data={filteredPreferenceListItems}
+      keyExtractor={item => item.label}
+      renderItem={renderItem}
+      scrollEnabled={false}
+    />
+  );
+};
diff --git a/ts/features/services/components/__tests__/ServiceDetailsHeader.test.tsx b/ts/features/services/components/__tests__/ServiceDetailsHeader.test.tsx
new file mode 100644
index 00000000000..3eb8775606b
--- /dev/null
+++ b/ts/features/services/components/__tests__/ServiceDetailsHeader.test.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ServiceDetailsHeader } from "../ServiceDetailsHeader";
+
+describe("ServiceDetailsHeader component", () => {
+  it("should match the snapshot", () => {
+    const component = render(
+      <ServiceDetailsHeader
+        logoUri={require("../../../../../img/test/logo.png")}
+        organizationName={"#### organization_name ####"}
+        serviceName={"#### service name ####"}
+      />
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
diff --git a/ts/features/services/components/__tests__/__snapshots__/ServiceDetailsHeader.test.tsx.snap b/ts/features/services/components/__tests__/__snapshots__/ServiceDetailsHeader.test.tsx.snap
new file mode 100644
index 00000000000..644c9aef7c1
--- /dev/null
+++ b/ts/features/services/components/__tests__/__snapshots__/ServiceDetailsHeader.test.tsx.snap
@@ -0,0 +1,144 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ServiceDetailsHeader component should match the snapshot 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "flexDirection": "row",
+      "justifyContent": "space-between",
+      "paddingVertical": 6,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "marginRight": 16,
+      }
+    }
+  >
+    <View
+      accessibilityIgnoresInvertColors={true}
+      style={
+        Array [
+          Object {
+            "borderColor": "rgba(14,15,19,0.1)",
+            "borderCurve": "continuous",
+            "borderWidth": 1,
+            "overflow": "hidden",
+          },
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": 12,
+            "height": 66,
+            "padding": 9,
+            "width": 66,
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#FFFFFF",
+              "borderCurve": "continuous",
+              "overflow": "hidden",
+            },
+            Object {
+              "borderRadius": 3,
+            },
+          ]
+        }
+      >
+        <Image
+          accessibilityIgnoresInvertColors={true}
+          onError={[Function]}
+          source={
+            Object {
+              "testUri": "../../../img/test/logo.png",
+            }
+          }
+          style={
+            Object {
+              "height": "100%",
+              "resizeMode": "contain",
+              "width": "100%",
+            }
+          }
+        />
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <Text
+      allowFontScaling={false}
+      color="bluegreyDark"
+      defaultColor="bluegreyDark"
+      defaultWeight="SemiBold"
+      font="TitilliumWeb"
+      fontStyle={
+        Object {
+          "fontSize": 24,
+          "lineHeight": 34,
+        }
+      }
+      style={
+        Array [
+          Object {
+            "fontSize": 24,
+            "lineHeight": 34,
+          },
+          Object {
+            "color": "#17324D",
+            "fontFamily": "Titillium Web",
+            "fontStyle": "normal",
+            "fontWeight": "600",
+          },
+        ]
+      }
+      weight="SemiBold"
+    >
+      #### service name ####
+    </Text>
+    <Text
+      allowFontScaling={false}
+      color="grey-700"
+      defaultColor="blue"
+      defaultWeight="Bold"
+      font="TitilliumWeb"
+      fontSize="regular"
+      fontStyle={
+        Object {
+          "fontSize": 14,
+          "lineHeight": 21,
+        }
+      }
+      style={
+        Array [
+          Object {
+            "fontSize": 14,
+            "lineHeight": 21,
+          },
+          Object {
+            "color": "#555C70",
+            "fontFamily": "Titillium Web",
+            "fontStyle": "normal",
+            "fontWeight": "700",
+          },
+        ]
+      }
+      weight="Bold"
+    >
+      #### organization_name ####
+    </Text>
+  </View>
+</View>
+`;
diff --git a/ts/features/services/navigation/navigator.tsx b/ts/features/services/navigation/navigator.tsx
new file mode 100644
index 00000000000..406fd332431
--- /dev/null
+++ b/ts/features/services/navigation/navigator.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { createStackNavigator } from "@react-navigation/stack";
+import { isGestureEnabled } from "../../../utils/navigation";
+import { isNewServicesEnabled, myPortalEnabled } from "../../../config";
+import { ServiceDetailsScreen } from "../screens/ServiceDetailsScreen";
+import ServicesWebviewScreen from "../../../screens/services/ServicesWebviewScreen";
+import LegacyServiceDetailsScreen from "../../../screens/services/LegacyServiceDetailsScreen";
+import { ServicesParamsList } from "./params";
+import { SERVICES_ROUTES } from "./routes";
+
+const Stack = createStackNavigator<ServicesParamsList>();
+
+const ServicesNavigator = () => (
+  <Stack.Navigator
+    initialRouteName={SERVICES_ROUTES.SERVICE_DETAIL}
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerShown: false }}
+  >
+    <Stack.Screen
+      name={SERVICES_ROUTES.SERVICE_DETAIL}
+      component={
+        isNewServicesEnabled ? ServiceDetailsScreen : LegacyServiceDetailsScreen
+      }
+      options={{
+        headerShown: isNewServicesEnabled
+      }}
+    />
+    {myPortalEnabled && (
+      <Stack.Screen
+        name={SERVICES_ROUTES.SERVICE_WEBVIEW}
+        component={ServicesWebviewScreen}
+      />
+    )}
+  </Stack.Navigator>
+);
+
+export default ServicesNavigator;
diff --git a/ts/features/services/navigation/params.ts b/ts/features/services/navigation/params.ts
new file mode 100644
index 00000000000..e5c39aebe86
--- /dev/null
+++ b/ts/features/services/navigation/params.ts
@@ -0,0 +1,8 @@
+import { ServiceDetailsScreenNavigationParams } from "../screens/ServiceDetailsScreen";
+import { ServiceWebviewScreenNavigationParams } from "../../../screens/services/ServicesWebviewScreen";
+import { SERVICES_ROUTES } from "./routes";
+
+export type ServicesParamsList = {
+  [SERVICES_ROUTES.SERVICE_DETAIL]: ServiceDetailsScreenNavigationParams;
+  [SERVICES_ROUTES.SERVICE_WEBVIEW]: ServiceWebviewScreenNavigationParams;
+};
diff --git a/ts/features/services/navigation/routes.ts b/ts/features/services/navigation/routes.ts
new file mode 100644
index 00000000000..ac7a753757a
--- /dev/null
+++ b/ts/features/services/navigation/routes.ts
@@ -0,0 +1,6 @@
+export const SERVICES_ROUTES = {
+  SERVICES_NAVIGATOR: "SERVICES_NAVIGATOR",
+  SERVICES_HOME: "SERVICES_HOME",
+  SERVICE_DETAIL: "SERVICE_DETAIL",
+  SERVICE_WEBVIEW: "SERVICE_WEBVIEW"
+} as const;
diff --git a/ts/sagas/services/servicePreference/handleGetServicePreferenceSaga.ts b/ts/features/services/saga/handleGetServicePreference.ts
similarity index 75%
rename from ts/sagas/services/servicePreference/handleGetServicePreferenceSaga.ts
rename to ts/features/services/saga/handleGetServicePreference.ts
index c8311e88d7c..5c025c282a7 100644
--- a/ts/sagas/services/servicePreference/handleGetServicePreferenceSaga.ts
+++ b/ts/features/services/saga/handleGetServicePreference.ts
@@ -1,12 +1,14 @@
 import * as E from "fp-ts/lib/Either";
-import { call, put } from "typed-redux-saga/macro";
+import { call, put, select } from "typed-redux-saga/macro";
 import { ActionType } from "typesafe-actions";
 import { BackendClient } from "../../../api/backend";
-import { loadServicePreference } from "../../../store/actions/services/servicePreference";
-import { ServicePreferenceResponseFailure } from "../../../types/services/ServicePreferenceResponse";
+import { loadServicePreference } from "../store/actions";
+import { ServicePreferenceResponseFailure } from "../types/ServicePreferenceResponse";
 import { SagaCallReturnType } from "../../../types/utils";
 import { getGenericError, getNetworkError } from "../../../utils/errors";
 import { readablePrivacyReport } from "../../../utils/reporters";
+import { withRefreshApiCall } from "../../fastLogin/saga/utils";
+import { isFastLoginEnabledSelector } from "../../fastLogin/store/selectors";
 
 export const mapKinds: Record<
   number,
@@ -23,16 +25,25 @@ export const mapKinds: Record<
  * @param action
  */
 export function* handleGetServicePreference(
-  getServicePreference: ReturnType<
-    typeof BackendClient
-  >["getServicePreference"],
+  getServicePreference: BackendClient["getServicePreference"],
   action: ActionType<typeof loadServicePreference.request>
 ) {
   try {
     const response: SagaCallReturnType<typeof getServicePreference> =
-      yield* call(getServicePreference, { service_id: action.payload });
+      (yield* call(
+        withRefreshApiCall,
+        getServicePreference({ service_id: action.payload }),
+        action
+      )) as unknown as SagaCallReturnType<typeof getServicePreference>;
 
     if (E.isRight(response)) {
+      if (response.right.status === 401) {
+        const isFastLoginEnabled = yield* select(isFastLoginEnabledSelector);
+        if (isFastLoginEnabled) {
+          return;
+        }
+      }
+
       if (response.right.status === 200) {
         yield* put(
           loadServicePreference.success({
diff --git a/ts/sagas/services/servicePreference/handleUpsertServicePreferenceSaga.ts b/ts/features/services/saga/handleUpsertServicePreference.ts
similarity index 68%
rename from ts/sagas/services/servicePreference/handleUpsertServicePreferenceSaga.ts
rename to ts/features/services/saga/handleUpsertServicePreference.ts
index a6d54d8bf0d..eb3542f4923 100644
--- a/ts/sagas/services/servicePreference/handleUpsertServicePreferenceSaga.ts
+++ b/ts/features/services/saga/handleUpsertServicePreference.ts
@@ -1,20 +1,26 @@
 import * as pot from "@pagopa/ts-commons/lib/pot";
 import * as E from "fp-ts/lib/Either";
+import * as O from "fp-ts/lib/Option";
+import { pipe } from "fp-ts/lib/function";
 import { call, put, select } from "typed-redux-saga/macro";
 import { ActionType } from "typesafe-actions";
-import { ServicePreference } from "../../../../definitions/backend/ServicePreference";
 import { PathTraversalSafePathParam } from "../../../../definitions/backend/PathTraversalSafePathParam";
+import { ServicePreference } from "../../../../definitions/backend/ServicePreference";
 import { BackendClient } from "../../../api/backend";
-import { upsertServicePreference } from "../../../store/actions/services/servicePreference";
-import {
-  servicePreferenceSelector,
-  ServicePreferenceState
-} from "../../../store/reducers/entities/services/servicePreference";
-import { isServicePreferenceResponseSuccess } from "../../../types/services/ServicePreferenceResponse";
 import { SagaCallReturnType } from "../../../types/utils";
 import { getGenericError, getNetworkError } from "../../../utils/errors";
 import { readablePrivacyReport } from "../../../utils/reporters";
-import { mapKinds } from "./handleGetServicePreferenceSaga";
+import { withRefreshApiCall } from "../../fastLogin/saga/utils";
+import { isFastLoginEnabledSelector } from "../../fastLogin/store/selectors";
+import { trackPNPushSettings } from "../../pn/analytics";
+import { upsertServicePreference } from "../store/actions";
+import {
+  ServicePreferenceState,
+  servicePreferenceSelector
+} from "../store/reducers/servicePreference";
+import { serviceMetadataInfoSelector } from "../store/reducers/servicesById";
+import { isServicePreferenceResponseSuccess } from "../types/ServicePreferenceResponse";
+import { mapKinds } from "./handleGetServicePreference";
 
 /**
  * Generates the payload for the updating preferences request, if a users disables the inbox flag than the other flags
@@ -47,6 +53,7 @@ const calculateUpdatingPreference = (
         .settings_version as ServicePreference["settings_version"]
     };
   }
+
   return {
     is_inbox_enabled: action.payload.inbox,
     is_webhook_enabled: action.payload.inbox ? action.payload.push : false,
@@ -59,17 +66,37 @@ const calculateUpdatingPreference = (
   };
 };
 
+export function* trackPNPushNotificationSettings(
+  action: ActionType<typeof upsertServicePreference.request>
+) {
+  const serviceMetadataInfo = yield* select(
+    serviceMetadataInfoSelector,
+    action.payload.id
+  );
+
+  pipe(
+    serviceMetadataInfo,
+    O.fromNullable,
+    O.chainNullableK(metadata => metadata.customSpecialFlow),
+    O.filter(customSpecialFlow => customSpecialFlow === "pn"),
+    O.fold(
+      () => undefined,
+      _ => trackPNPushSettings(action.payload.push)
+    )
+  );
+}
+
 /**
  * saga to handle the update of service preferences after a user specific action
  * @param upsertServicePreferences
  * @param action
  */
 export function* handleUpsertServicePreference(
-  upsertServicePreferences: ReturnType<
-    typeof BackendClient
-  >["upsertServicePreference"],
+  upsertServicePreferences: BackendClient["upsertServicePreference"],
   action: ActionType<typeof upsertServicePreference.request>
 ) {
+  yield* call(trackPNPushNotificationSettings, action);
+
   const currentPreferences: ReturnType<typeof servicePreferenceSelector> =
     yield* select(servicePreferenceSelector);
 
@@ -79,21 +106,38 @@ export function* handleUpsertServicePreference(
   );
 
   try {
-    const serviceIdEither = PathTraversalSafePathParam.decode(
-      action.payload.id
-    );
-
-    if (E.isLeft(serviceIdEither)) {
-      throw Error("Unable to decode ServiceId to PathTraversalSafePathParam");
+    if (!PathTraversalSafePathParam.is(action.payload.id)) {
+      yield* put(
+        upsertServicePreference.failure({
+          id: action.payload.id,
+          ...getGenericError(
+            new Error(
+              "Unable to decode ServiceId to PathTraversalSafePathParam"
+            )
+          )
+        })
+      );
+      return;
     }
 
     const response: SagaCallReturnType<typeof upsertServicePreferences> =
-      yield* call(upsertServicePreferences, {
-        service_id: serviceIdEither.right,
-        body: updatingPreference
-      });
+      (yield* call(
+        withRefreshApiCall,
+        upsertServicePreferences({
+          service_id: action.payload.id,
+          body: updatingPreference
+        }),
+        action
+      )) as unknown as SagaCallReturnType<typeof upsertServicePreferences>;
 
     if (E.isRight(response)) {
+      if (response.right.status === 401) {
+        const isFastLoginEnabled = yield* select(isFastLoginEnabledSelector);
+        if (isFastLoginEnabled) {
+          return;
+        }
+      }
+
       if (response.right.status === 200) {
         yield* put(
           upsertServicePreference.success({
diff --git a/ts/features/services/screens/ServiceDetailsScreen.tsx b/ts/features/services/screens/ServiceDetailsScreen.tsx
new file mode 100644
index 00000000000..dbea568bed8
--- /dev/null
+++ b/ts/features/services/screens/ServiceDetailsScreen.tsx
@@ -0,0 +1,192 @@
+import React, { useEffect, useMemo } from "react";
+import { Dimensions, StyleSheet, View } from "react-native";
+import { useHeaderHeight } from "@react-navigation/elements";
+import {
+  ContentWrapper,
+  IOColors,
+  IOVisualCostants,
+  VSpacer
+} from "@pagopa/io-app-design-system";
+import Animated, {
+  useAnimatedScrollHandler,
+  useSharedValue
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ServiceId } from "../../../../definitions/backend/ServiceId";
+import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
+import { ServicesParamsList } from "../navigation/params";
+import { useIODispatch, useIOSelector } from "../../../store/hooks";
+import {
+  isErrorServiceByIdSelector,
+  isLoadingServiceByIdSelector,
+  serviceByIdSelector
+} from "../store/reducers/servicesById";
+import { loadServiceDetail } from "../../../store/actions/services";
+import { ServicePublic } from "../../../../definitions/backend/ServicePublic";
+import { useHeaderSecondLevel } from "../../../hooks/useHeaderSecondLevel";
+import { ServiceDetailsHeader } from "../components/ServiceDetailsHeader";
+import { logosForService } from "../../../utils/services";
+import { CardWithMarkdownContent } from "../components/CardWithMarkdownContent";
+import { ServiceDetailsFailure } from "../components/ServiceDetailsFailure";
+import { ServiceDetailsPreferences } from "../components/ServiceDetailsPreferences";
+import { loadServicePreference } from "../store/actions";
+
+export type ServiceDetailsScreenNavigationParams = Readonly<{
+  serviceId: ServiceId;
+  // if true the service should be activated automatically
+  // as soon as the screen is shown (used for custom activation
+  // flows like PN)
+  activate?: boolean;
+}>;
+
+type ServiceDetailsScreenProps = IOStackNavigationRouteProps<
+  ServicesParamsList,
+  "SERVICE_DETAIL"
+>;
+
+const headerPaddingBottom = 138;
+
+const styles = StyleSheet.create({
+  scrollContentContainer: {
+    flexGrow: 1
+  },
+  headerContainer: {
+    backgroundColor: IOColors["grey-50"],
+    paddingBottom: headerPaddingBottom
+  },
+  cardContainer: {
+    marginTop: -headerPaddingBottom,
+    minHeight: headerPaddingBottom
+  }
+});
+
+export const ServiceDetailsScreen = ({ route }: ServiceDetailsScreenProps) => {
+  const { serviceId } = route.params;
+
+  const dispatch = useIODispatch();
+
+  useEffect(() => {
+    dispatch(loadServiceDetail.request(serviceId));
+    dispatch(loadServicePreference.request(serviceId));
+  }, [dispatch, serviceId]);
+
+  const serviceById = useIOSelector(state =>
+    serviceByIdSelector(state, serviceId)
+  );
+
+  const isLoadingServiceById = useIOSelector(state =>
+    isLoadingServiceByIdSelector(state, serviceId)
+  );
+
+  const isErrorServiceById = useIOSelector(state =>
+    isErrorServiceByIdSelector(state, serviceId)
+  );
+
+  if (!serviceById) {
+    return null;
+  }
+
+  if (isErrorServiceById) {
+    return <ServiceDetailsFailure serviceId={serviceId} />;
+  }
+
+  if (isLoadingServiceById) {
+    // TODO: add a loading screen
+  }
+
+  return <ServiceDetailsContent service={serviceById} />;
+};
+
+const scrollTriggerOffsetValue: number = 88;
+const windowHeight = Dimensions.get("window").height;
+
+type ServiceDetailsContentProps = {
+  service: ServicePublic;
+};
+
+const ServiceDetailsContent = ({ service }: ServiceDetailsContentProps) => {
+  const safeAreaInsets = useSafeAreaInsets();
+
+  const headerHeight = useHeaderHeight();
+  const scrollTranslationY = useSharedValue(0);
+
+  const safeBottomAreaHeight: number = useMemo(
+    () =>
+      safeAreaInsets.bottom === 0
+        ? IOVisualCostants.appMarginDefault
+        : safeAreaInsets.bottom,
+    [safeAreaInsets]
+  );
+
+  const {
+    organization_name,
+    service_id,
+    service_name,
+    available_notification_channels,
+    service_metadata
+  } = service;
+
+  useHeaderSecondLevel({
+    title: service_name,
+    supportRequest: true,
+    transparent: true,
+    scrollValues: {
+      triggerOffset: scrollTriggerOffsetValue,
+      contentOffsetY: scrollTranslationY
+    }
+  });
+
+  const scrollHandler = useAnimatedScrollHandler(({ contentOffset }) => {
+    // eslint-disable-next-line functional/immutable-data
+    scrollTranslationY.value = contentOffset.y;
+  });
+
+  return (
+    <Animated.ScrollView
+      contentContainerStyle={[
+        styles.scrollContentContainer,
+        {
+          paddingBottom: safeBottomAreaHeight
+        }
+      ]}
+      onScroll={scrollHandler}
+      scrollEventThrottle={16}
+      snapToOffsets={[0, scrollTriggerOffsetValue]}
+      snapToEnd={false}
+      decelerationRate="normal"
+    >
+      <View
+        style={[
+          styles.headerContainer,
+          {
+            paddingTop: windowHeight + headerHeight,
+            marginTop: -windowHeight
+          }
+        ]}
+      >
+        <ContentWrapper>
+          <ServiceDetailsHeader
+            logoUri={logosForService(service)}
+            organizationName={organization_name}
+            serviceName={service_name}
+          />
+          <VSpacer size={16} />
+        </ContentWrapper>
+      </View>
+
+      <ContentWrapper>
+        {service_metadata?.description && (
+          <View style={styles.cardContainer}>
+            <CardWithMarkdownContent content={service_metadata.description} />
+          </View>
+        )}
+
+        <VSpacer size={40} />
+        <ServiceDetailsPreferences
+          serviceId={service_id}
+          availableChannels={available_notification_channels}
+        />
+      </ContentWrapper>
+    </Animated.ScrollView>
+  );
+};
diff --git a/ts/store/actions/services/servicePreference.ts b/ts/features/services/store/actions/index.ts
similarity index 81%
rename from ts/store/actions/services/servicePreference.ts
rename to ts/features/services/store/actions/index.ts
index 6dff87d49d9..6582981c613 100644
--- a/ts/store/actions/services/servicePreference.ts
+++ b/ts/features/services/store/actions/index.ts
@@ -3,9 +3,9 @@ import {
   ServicePreference,
   ServicePreferenceResponse,
   WithServiceID
-} from "../../../types/services/ServicePreferenceResponse";
-import { NetworkError } from "../../../utils/errors";
-import { ServiceId } from "../../../../definitions/backend/ServiceId";
+} from "../../types/ServicePreferenceResponse";
+import { NetworkError } from "../../../../utils/errors";
+import { ServiceId } from "../../../../../definitions/backend/ServiceId";
 
 /**
  * Actions to load the specified preferences for a given ServiceID
diff --git a/ts/features/services/store/reducers/__tests__/servicePreference.test.ts b/ts/features/services/store/reducers/__tests__/servicePreference.test.ts
new file mode 100644
index 00000000000..a8c4158b059
--- /dev/null
+++ b/ts/features/services/store/reducers/__tests__/servicePreference.test.ts
@@ -0,0 +1,215 @@
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import { Action, createStore } from "redux";
+import { ServiceId } from "../../../../../../definitions/backend/ServiceId";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { appReducer } from "../../../../../store/reducers";
+import { NetworkError, getNetworkError } from "../../../../../utils/errors";
+import {
+  ServicePreference,
+  ServicePreferenceResponse,
+  WithServiceID
+} from "../../../types/ServicePreferenceResponse";
+import { loadServicePreference, upsertServicePreference } from "../../actions";
+import {
+  isErrorServicePreferenceSelector,
+  isLoadingServicePreferenceSelector,
+  servicePreferenceResponseSuccessSelector
+} from "../servicePreference";
+import { GlobalState } from "../../../../../store/reducers/types";
+
+const serviceId = "serviceId" as ServiceId;
+
+const servicePreferenceResponseSuccess: ServicePreferenceResponse = {
+  id: serviceId,
+  kind: "success",
+  value: {
+    inbox: true,
+    push: true,
+    email: false,
+    can_access_message_read_status: false,
+    settings_version: 0
+  }
+};
+
+const servicePreferenceResponseFailure: ServicePreferenceResponse = {
+  id: serviceId,
+  kind: "notFound"
+};
+
+const servicePreferenceError: WithServiceID<NetworkError> = {
+  id: serviceId,
+  ...getNetworkError(new Error("GenericError"))
+};
+
+const updatingResponse: WithServiceID<ServicePreference> = {
+  id: serviceId,
+  inbox: true,
+  push: true,
+  email: true,
+  can_access_message_read_status: true,
+  settings_version: 0
+};
+
+describe("servicePreference reducer", () => {
+  it("should have initial state", () => {
+    const state = appReducer(undefined, applicationChangeState("active"));
+
+    expect(state.entities.services.servicePreference).toStrictEqual(pot.none);
+  });
+
+  it("should handle loadServicePreference action", () => {
+    const state = appReducer(undefined, applicationChangeState("active"));
+    const store = createStore(appReducer, state as any);
+
+    store.dispatch(loadServicePreference.request(serviceId));
+
+    expect(store.getState().entities.services.servicePreference).toStrictEqual(
+      pot.noneLoading
+    );
+
+    store.dispatch(
+      loadServicePreference.success(servicePreferenceResponseSuccess)
+    );
+    expect(store.getState().entities.services.servicePreference).toStrictEqual(
+      pot.some(servicePreferenceResponseSuccess)
+    );
+
+    store.dispatch(loadServicePreference.failure(servicePreferenceError));
+    expect(store.getState().entities.services.servicePreference).toStrictEqual(
+      pot.someError(servicePreferenceResponseSuccess, servicePreferenceError)
+    );
+  });
+
+  it("should handle upsertServicePreference action", () => {
+    const state = appReducer(undefined, applicationChangeState("active"));
+    const finalState: GlobalState = {
+      ...state,
+      entities: {
+        ...state.entities,
+        services: {
+          ...state.entities.services,
+          servicePreference: pot.some(servicePreferenceResponseSuccess)
+        }
+      }
+    };
+    const store = createStore(appReducer, finalState as any);
+
+    store.dispatch(upsertServicePreference.request(updatingResponse));
+
+    expect(store.getState().entities.services.servicePreference).toStrictEqual(
+      pot.someUpdating(servicePreferenceResponseSuccess, {
+        id: serviceId,
+        kind: "success",
+        value: {
+          inbox: true,
+          push: true,
+          email: true,
+          can_access_message_read_status: true,
+          settings_version: 0
+        }
+      })
+    );
+
+    store.dispatch(upsertServicePreference.failure(servicePreferenceError));
+    expect(store.getState().entities.services.servicePreference).toStrictEqual(
+      pot.someError(servicePreferenceResponseSuccess, servicePreferenceError)
+    );
+  });
+});
+
+describe("servicePreference selectors", () => {
+  describe("servicePreferenceResponseSuccessSelector", () => {
+    it("should return servicePreferenceResponseSuccess when pot.some and the service preference is successfully loaded", () => {
+      const state = appReducer(
+        {} as GlobalState,
+        loadServicePreference.success(servicePreferenceResponseSuccess)
+      );
+      const servicePreferenceResponse =
+        servicePreferenceResponseSuccessSelector(state);
+      expect(servicePreferenceResponse).toStrictEqual(
+        servicePreferenceResponseSuccess
+      );
+    });
+
+    it("should return undefined when pot.some and the service preference is NOT successfully loaded", () => {
+      const state = appReducer(
+        {} as GlobalState,
+        loadServicePreference.success(servicePreferenceResponseFailure)
+      );
+      const servicePreferenceResponse =
+        servicePreferenceResponseSuccessSelector(state);
+      expect(servicePreferenceResponse).toBeUndefined();
+    });
+  });
+
+  describe("isLoadingServicePreferenceSelector", () => {
+    it("should return true when pot.loading", () => {
+      const state = appReducer(
+        {} as GlobalState,
+        loadServicePreference.request(serviceId)
+      );
+
+      const isLoadingServicePreference =
+        isLoadingServicePreferenceSelector(state);
+      expect(isLoadingServicePreference).toStrictEqual(true);
+    });
+
+    it("should return true when pot.updating", () => {
+      const state = appReducer(
+        {} as GlobalState,
+        upsertServicePreference.request(updatingResponse)
+      );
+
+      const isLoadingServicePreference =
+        isLoadingServicePreferenceSelector(state);
+      expect(isLoadingServicePreference).toStrictEqual(true);
+    });
+
+    it("should return false when not pot.some", () => {
+      expect(
+        isLoadingServicePreferenceSelector(appReducer(undefined, {} as Action))
+      ).toStrictEqual(false);
+
+      expect(
+        isLoadingServicePreferenceSelector(
+          appReducer(
+            {} as GlobalState,
+            loadServicePreference.failure(servicePreferenceError)
+          )
+        )
+      ).toStrictEqual(false);
+    });
+  });
+
+  describe("isErrorServicePreferenceSelector", () => {
+    it("should return true when pot.error", () => {
+      const state = appReducer(
+        {} as GlobalState,
+        loadServicePreference.failure(servicePreferenceError)
+      );
+
+      const isErrorServicePreference = isErrorServicePreferenceSelector(state);
+      expect(isErrorServicePreference).toStrictEqual(true);
+    });
+
+    it("should return true when pot.some and service is not successfully loaded", () => {
+      const state = appReducer(
+        {} as GlobalState,
+        loadServicePreference.success(servicePreferenceResponseFailure)
+      );
+
+      const isErrorServicePreference = isErrorServicePreferenceSelector(state);
+      expect(isErrorServicePreference).toStrictEqual(true);
+    });
+
+    it("should return false when pot.some and service is successfully loaded", () => {
+      const state = appReducer(
+        {} as GlobalState,
+        loadServicePreference.success(servicePreferenceResponseSuccess)
+      );
+
+      const isErrorServicePreference = isErrorServicePreferenceSelector(state);
+      expect(isErrorServicePreference).toStrictEqual(false);
+    });
+  });
+});
diff --git a/ts/features/services/store/reducers/__tests__/servicesById.test.ts b/ts/features/services/store/reducers/__tests__/servicesById.test.ts
new file mode 100644
index 00000000000..f24fd6834b4
--- /dev/null
+++ b/ts/features/services/store/reducers/__tests__/servicesById.test.ts
@@ -0,0 +1,317 @@
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import {
+  NonEmptyString,
+  OrganizationFiscalCode
+} from "@pagopa/ts-commons/lib/strings";
+import { Tuple2 } from "@pagopa/ts-commons/lib/tuples";
+import { Action, createStore } from "redux";
+import { ServiceId } from "../../../../../../definitions/backend/ServiceId";
+import { ServicePublic } from "../../../../../../definitions/backend/ServicePublic";
+import { ServiceScopeEnum } from "../../../../../../definitions/backend/ServiceScope";
+import { SpecialServiceCategoryEnum } from "../../../../../../definitions/backend/SpecialServiceCategory";
+import { StandardServiceCategoryEnum } from "../../../../../../definitions/backend/StandardServiceCategory";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import {
+  logoutSuccess,
+  sessionExpired
+} from "../../../../../store/actions/authentication";
+import {
+  loadServiceDetail,
+  removeServiceTuples
+} from "../../../../../store/actions/services";
+import { appReducer } from "../../../../../store/reducers";
+import { GlobalState } from "../../../../../store/reducers/types";
+import { reproduceSequence } from "../../../../../utils/tests";
+import {
+  isErrorServiceByIdSelector,
+  isLoadingServiceByIdSelector,
+  serviceByIdSelector,
+  serviceMetadataByIdSelector,
+  serviceMetadataInfoSelector
+} from "../servicesById";
+
+const serviceId = "serviceId" as ServiceId;
+
+const service = {
+  service_id: serviceId,
+  service_name: "health",
+  organization_name: "Ċentru tas-Saħħa",
+  department_name: "covid-19",
+  organization_fiscal_code: "FSCLCD" as OrganizationFiscalCode
+} as ServicePublic;
+
+describe("serviceById reducer", () => {
+  it("should have initial state", () => {
+    const state = appReducer(undefined, applicationChangeState("active"));
+
+    expect(state.entities.services.byId).toStrictEqual({});
+  });
+
+  it("should handle loadServiceDetail action", () => {
+    const state = appReducer(undefined, applicationChangeState("active"));
+    const store = createStore(appReducer, state as any);
+
+    store.dispatch(loadServiceDetail.request(serviceId));
+
+    expect(store.getState().entities.services.byId).toStrictEqual({
+      serviceId: pot.noneLoading
+    });
+
+    store.dispatch(loadServiceDetail.success(service));
+    expect(store.getState().entities.services.byId).toStrictEqual({
+      serviceId: pot.some(service)
+    });
+
+    const tError = {
+      error: new Error("load failed"),
+      service_id: serviceId
+    };
+
+    store.dispatch(loadServiceDetail.failure(tError));
+    expect(store.getState().entities.services.byId).toStrictEqual({
+      serviceId: pot.someError(service, new Error("load failed"))
+    });
+  });
+
+  it("should handle logoutSuccess action", () => {
+    const sequenceOfActions: ReadonlyArray<Action> = [
+      applicationChangeState("active"),
+      loadServiceDetail.success(service),
+      logoutSuccess()
+    ];
+
+    const state: GlobalState = reproduceSequence(
+      {} as GlobalState,
+      appReducer,
+      sequenceOfActions
+    );
+    expect(state.entities.services.byId).toEqual({});
+  });
+
+  it("should handle sessionExpired action", () => {
+    const sequenceOfActions: ReadonlyArray<Action> = [
+      applicationChangeState("active"),
+      loadServiceDetail.success(service),
+      sessionExpired()
+    ];
+
+    const state: GlobalState = reproduceSequence(
+      {} as GlobalState,
+      appReducer,
+      sequenceOfActions
+    );
+    expect(state.entities.services.byId).toEqual({});
+  });
+
+  it("should handle removeServiceTuples action", () => {
+    const sequenceOfActions: ReadonlyArray<Action> = [
+      applicationChangeState("active"),
+      loadServiceDetail.success({ ...service, service_id: "s1" as ServiceId }),
+      loadServiceDetail.success({ ...service, service_id: "s2" as ServiceId }),
+      loadServiceDetail.success({ ...service, service_id: "s3" as ServiceId }),
+      loadServiceDetail.success({ ...service, service_id: "s4" as ServiceId }),
+      loadServiceDetail.success({ ...service, service_id: "s5" as ServiceId }),
+      removeServiceTuples([
+        Tuple2("s2", "FSCLCD"),
+        Tuple2("s3", "FSCLCD"),
+        // Not existing serviceId
+        Tuple2("s6", "FSCLCD")
+      ])
+    ];
+
+    const state: GlobalState = reproduceSequence(
+      {} as GlobalState,
+      appReducer,
+      sequenceOfActions
+    );
+
+    expect(state.entities.services.byId).toEqual({
+      s1: pot.some({ ...service, service_id: "s1" as ServiceId }),
+      s4: pot.some({ ...service, service_id: "s4" as ServiceId }),
+      s5: pot.some({ ...service, service_id: "s5" as ServiceId })
+    });
+  });
+});
+
+describe("serviceById selectors", () => {
+  describe("serviceByIdSelector", () => {
+    it("should return the ServicePublic when pot.some", () => {
+      const serviceById = serviceByIdSelector(
+        appReducer({} as GlobalState, loadServiceDetail.success(service)),
+        serviceId
+      );
+      expect(serviceById).toStrictEqual(service);
+    });
+
+    it("should return undefined when not pot.some", () => {
+      expect(
+        serviceByIdSelector(appReducer(undefined, {} as Action), serviceId)
+      ).toBeUndefined();
+
+      expect(
+        serviceByIdSelector(
+          appReducer({} as GlobalState, loadServiceDetail.request(serviceId)),
+          serviceId
+        )
+      ).toBeUndefined();
+
+      const tError = {
+        error: new Error("error"),
+        service_id: serviceId
+      };
+
+      expect(
+        serviceByIdSelector(
+          appReducer({} as GlobalState, loadServiceDetail.failure(tError)),
+          serviceId
+        )
+      ).toBeUndefined();
+    });
+  });
+
+  describe("isLoadingServiceByIdSelector", () => {
+    it("should return true when pot.loading", () => {
+      const isLoadingServiceById = isLoadingServiceByIdSelector(
+        appReducer({} as GlobalState, loadServiceDetail.request(serviceId)),
+        serviceId
+      );
+      expect(isLoadingServiceById).toStrictEqual(true);
+    });
+
+    it("should return false when not pot.some", () => {
+      expect(
+        isLoadingServiceByIdSelector(
+          appReducer(undefined, {} as Action),
+          serviceId
+        )
+      ).toStrictEqual(false);
+
+      expect(
+        isLoadingServiceByIdSelector(
+          appReducer({} as GlobalState, loadServiceDetail.success(service)),
+          serviceId
+        )
+      ).toStrictEqual(false);
+    });
+  });
+
+  describe("isErrorServiceByIdSelector", () => {
+    it("should return true when pot.error", () => {
+      const tError = {
+        error: new Error("error"),
+        service_id: serviceId
+      };
+
+      const isErrorServiceById = isErrorServiceByIdSelector(
+        appReducer({} as GlobalState, loadServiceDetail.failure(tError)),
+        serviceId
+      );
+      expect(isErrorServiceById).toStrictEqual(true);
+    });
+
+    it("should return false when not pot.error", () => {
+      expect(
+        isErrorServiceByIdSelector(
+          appReducer(undefined, {} as Action),
+          serviceId
+        )
+      ).toStrictEqual(false);
+
+      expect(
+        isErrorServiceByIdSelector(
+          appReducer({} as GlobalState, loadServiceDetail.success(service)),
+          serviceId
+        )
+      ).toStrictEqual(false);
+    });
+  });
+
+  describe("serviceMetadataByIdSelector", () => {
+    it("should return ServiceMetadata when pot.some and service_metadata defined", () => {
+      const serviceById = serviceMetadataByIdSelector(
+        appReducer(
+          {} as GlobalState,
+          loadServiceDetail.success({
+            ...service,
+            service_metadata: {
+              category: StandardServiceCategoryEnum.STANDARD,
+              scope: ServiceScopeEnum.LOCAL
+            }
+          })
+        ),
+        serviceId
+      );
+      expect(serviceById).toStrictEqual({
+        category: StandardServiceCategoryEnum.STANDARD,
+        scope: ServiceScopeEnum.LOCAL
+      });
+    });
+
+    it("should return undefined when pot.some and service_metadata not defined", () => {
+      const serviceById = serviceMetadataByIdSelector(
+        appReducer({} as GlobalState, loadServiceDetail.success(service)),
+        serviceId
+      );
+      expect(serviceById).toBeUndefined();
+    });
+
+    it("should return undefined when not pot.some", () => {
+      expect(
+        serviceMetadataByIdSelector(
+          appReducer(undefined, {} as Action),
+          serviceId
+        )
+      ).toBeUndefined();
+
+      expect(
+        serviceMetadataByIdSelector(
+          appReducer({} as GlobalState, loadServiceDetail.request(serviceId)),
+          serviceId
+        )
+      ).toBeUndefined();
+
+      const tError = {
+        error: new Error("error"),
+        service_id: serviceId
+      };
+
+      expect(
+        serviceMetadataByIdSelector(
+          appReducer({} as GlobalState, loadServiceDetail.failure(tError)),
+          serviceId
+        )
+      ).toBeUndefined();
+    });
+  });
+
+  describe("serviceMetadataInfoSelector", () => {
+    it("should return serviceMetadataInfo when pot.some and it is a special service", () => {
+      const serviceById = serviceMetadataInfoSelector(
+        appReducer(
+          {} as GlobalState,
+          loadServiceDetail.success({
+            ...service,
+            service_metadata: {
+              category: SpecialServiceCategoryEnum.SPECIAL,
+              scope: ServiceScopeEnum.NATIONAL,
+              custom_special_flow: "custom_special_flow" as NonEmptyString
+            }
+          })
+        ),
+        serviceId
+      );
+      expect(serviceById).toStrictEqual({
+        isSpecialService: true,
+        customSpecialFlow: "custom_special_flow"
+      });
+    });
+
+    it("should return undefined when not pot.some and it is not a special service", () => {
+      const serviceById = serviceMetadataInfoSelector(
+        appReducer({} as GlobalState, loadServiceDetail.success(service)),
+        serviceId
+      );
+      expect(serviceById).toBeUndefined();
+    });
+  });
+});
diff --git a/ts/features/services/store/reducers/servicePreference.ts b/ts/features/services/store/reducers/servicePreference.ts
new file mode 100644
index 00000000000..69151eb48dd
--- /dev/null
+++ b/ts/features/services/store/reducers/servicePreference.ts
@@ -0,0 +1,82 @@
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import * as O from "fp-ts/lib/Option";
+import { pipe } from "fp-ts/lib/function";
+import { getType } from "typesafe-actions";
+import {
+  ServicePreferenceResponse,
+  WithServiceID,
+  isServicePreferenceResponseSuccess
+} from "../../types/ServicePreferenceResponse";
+import { NetworkError } from "../../../../utils/errors";
+import { isStrictSome } from "../../../../utils/pot";
+import { loadServicePreference, upsertServicePreference } from "../actions";
+import { Action } from "../../../../store/actions/types";
+import { GlobalState } from "../../../../store/reducers/types";
+
+export type ServicePreferenceState = pot.Pot<
+  ServicePreferenceResponse,
+  WithServiceID<NetworkError>
+>;
+
+const INITIAL_STATE: ServicePreferenceState = pot.none;
+
+// Reducer to handle specific service contact preferences (inbox, push, emails)
+const servicePreferenceReducer = (
+  state: ServicePreferenceState = INITIAL_STATE,
+  action: Action
+): ServicePreferenceState => {
+  switch (action.type) {
+    case getType(loadServicePreference.request):
+      return pot.toLoading(state);
+    case getType(upsertServicePreference.request):
+      const { id, ...payload } = action.payload;
+
+      return pot.toUpdating(state, {
+        id,
+        kind: "success",
+        value: payload
+      });
+    case getType(loadServicePreference.success):
+    case getType(upsertServicePreference.success):
+      return pot.some(action.payload);
+    case getType(loadServicePreference.failure):
+    case getType(upsertServicePreference.failure):
+      return pot.toError(state, action.payload);
+  }
+  return state;
+};
+
+export default servicePreferenceReducer;
+
+// Selectors
+export const servicePreferenceSelector = (
+  state: GlobalState
+): ServicePreferenceState => state.entities.services.servicePreference;
+
+export const servicePreferenceResponseSuccessSelector = (state: GlobalState) =>
+  pipe(
+    state,
+    servicePreferenceSelector,
+    pot.toOption,
+    O.filter(isServicePreferenceResponseSuccess),
+    O.toUndefined
+  );
+
+export const isLoadingServicePreferenceSelector = (state: GlobalState) =>
+  pipe(
+    state,
+    servicePreferenceSelector,
+    servicePreferencePot =>
+      pot.isLoading(servicePreferencePot) ||
+      pot.isUpdating(servicePreferencePot)
+  );
+
+export const isErrorServicePreferenceSelector = (state: GlobalState) =>
+  pipe(
+    state,
+    servicePreferenceSelector,
+    servicePreferencePot =>
+      pot.isError(servicePreferencePot) ||
+      (isStrictSome(servicePreferencePot) &&
+        !isServicePreferenceResponseSuccess(servicePreferencePot.value))
+  );
diff --git a/ts/store/reducers/entities/services/servicesById.ts b/ts/features/services/store/reducers/servicesById.ts
similarity index 51%
rename from ts/store/reducers/entities/services/servicesById.ts
rename to ts/features/services/store/reducers/servicesById.ts
index 3eefa95bdae..730db0d1328 100644
--- a/ts/store/reducers/entities/services/servicesById.ts
+++ b/ts/features/services/store/reducers/servicesById.ts
@@ -3,18 +3,24 @@
  * It only manages SUCCESS actions because all UI state properties (like * loading/error)
  * are managed by different global reducers.
  */
-import * as pot from "@pagopa/ts-commons/lib/pot";
 import { getType } from "typesafe-actions";
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/lib/Option";
+import * as pot from "@pagopa/ts-commons/lib/pot";
 import { ServicePublic } from "../../../../../definitions/backend/ServicePublic";
-import { logoutSuccess, sessionExpired } from "../../../actions/authentication";
+import {
+  logoutSuccess,
+  sessionExpired
+} from "../../../../store/actions/authentication";
 import {
   loadServiceDetail,
   removeServiceTuples
-} from "../../../actions/services";
-import { Action } from "../../../actions/types";
-import { GlobalState } from "../../types";
+} from "../../../../store/actions/services";
+import { Action } from "../../../../store/actions/types";
+import { GlobalState } from "../../../../store/reducers/types";
 import { ServiceId } from "../../../../../definitions/backend/ServiceId";
 import { ServiceMetadata } from "../../../../../definitions/backend/ServiceMetadata";
+import { SpecialServiceMetadata } from "../../../../../definitions/backend/SpecialServiceMetadata";
 
 export type ServicesByIdState = Readonly<{
   [key: string]: pot.Pot<ServicePublic, Error> | undefined;
@@ -22,7 +28,7 @@ export type ServicesByIdState = Readonly<{
 
 const INITIAL_STATE: ServicesByIdState = {};
 
-const reducer = (
+const serviceByIdReducer = (
   state: ServicesByIdState = INITIAL_STATE,
   action: Action
 ): ServicesByIdState => {
@@ -30,15 +36,13 @@ const reducer = (
     case getType(loadServiceDetail.request):
       // When a previously loaded service detail is loaded again, its state
       // is updated with a someLoading pot, otherwise its state is updated with a noneLoading pot
-      const cachedValue = state[action.payload];
-      const prevServiceRequest =
-        cachedValue && pot.isSome(cachedValue) && !pot.isLoading(cachedValue)
-          ? pot.someLoading(cachedValue.value)
-          : pot.noneLoading;
-
       return {
         ...state,
-        [action.payload]: prevServiceRequest
+        [action.payload]: pipe(
+          state[action.payload],
+          O.fromNullable,
+          O.fold(() => pot.noneLoading, pot.toLoading)
+        )
       };
 
     case getType(loadServiceDetail.success):
@@ -47,22 +51,20 @@ const reducer = (
         ...state,
         [action.payload.service_id]: pot.some(action.payload)
       };
-    case getType(logoutSuccess):
-    case getType(sessionExpired):
-      return INITIAL_STATE;
 
     case getType(loadServiceDetail.failure):
       // when a request to load a previously loaded service detail fails its state is updated
       // with a someError pot, otherwise its state is updated with a noneError pot
-      const { service_id, error } = action.payload;
-      const prevServiceFailure = state[service_id];
-      const nextServiceFailure =
-        prevServiceFailure !== undefined && pot.isSome(prevServiceFailure)
-          ? pot.someError(prevServiceFailure.value, error)
-          : pot.noneError(error);
       return {
         ...state,
-        [service_id]: nextServiceFailure
+        [action.payload.service_id]: pipe(
+          state[action.payload.service_id],
+          O.fromNullable,
+          O.fold(
+            () => pot.noneError(action.payload.error),
+            servicePot => pot.toError(servicePot, action.payload.error)
+          )
+        )
       };
 
     case getType(removeServiceTuples): {
@@ -73,25 +75,67 @@ const reducer = (
       return newState;
     }
 
+    case getType(logoutSuccess):
+    case getType(sessionExpired):
+      return INITIAL_STATE;
+
     default:
       return state;
   }
 };
 
+export default serviceByIdReducer;
+
 // Selectors
 export const servicesByIdSelector = (state: GlobalState): ServicesByIdState =>
   state.entities.services.byId;
 
-export const serviceByIdSelector = (
+export const serviceByIdPotSelector = (
   state: GlobalState,
   id: ServiceId
 ): pot.Pot<ServicePublic, Error> =>
   state.entities.services.byId[id] ?? pot.none;
 
-export const serviceMetadataByIdSelector =
-  (id: ServiceId) =>
-  (state: GlobalState): ServiceMetadata | undefined => {
-    const maybeServiceById = serviceByIdSelector(state, id);
-    return pot.toUndefined(maybeServiceById)?.service_metadata;
-  };
-export default reducer;
+export const serviceByIdSelector = (
+  state: GlobalState,
+  id: ServiceId
+): ServicePublic | undefined =>
+  pipe(serviceByIdPotSelector(state, id), pot.toUndefined);
+
+export const isLoadingServiceByIdSelector = (
+  state: GlobalState,
+  id: ServiceId
+) => pipe(serviceByIdPotSelector(state, id), pot.isLoading);
+
+export const isErrorServiceByIdSelector = (state: GlobalState, id: ServiceId) =>
+  pipe(serviceByIdPotSelector(state, id), pot.isError);
+
+export const serviceMetadataByIdSelector = (
+  state: GlobalState,
+  id: ServiceId
+): ServiceMetadata | undefined =>
+  pipe(
+    serviceByIdPotSelector(state, id),
+    pot.toOption,
+    O.chainNullableK(service => service.service_metadata),
+    O.toUndefined
+  );
+
+export const serviceMetadataInfoSelector = (
+  state: GlobalState,
+  id: ServiceId
+) =>
+  pipe(
+    serviceMetadataByIdSelector(state, id),
+    O.fromNullable,
+    O.chain(serviceMetadata => {
+      if (SpecialServiceMetadata.is(serviceMetadata)) {
+        return O.some({
+          isSpecialService: true,
+          customSpecialFlow: serviceMetadata.custom_special_flow
+        });
+      }
+      return O.none;
+    }),
+    O.toUndefined
+  );
diff --git a/ts/types/services/ServicePreferenceResponse.ts b/ts/features/services/types/ServicePreferenceResponse.ts
similarity index 91%
rename from ts/types/services/ServicePreferenceResponse.ts
rename to ts/features/services/types/ServicePreferenceResponse.ts
index 3d6f87527ff..dd324861c56 100644
--- a/ts/types/services/ServicePreferenceResponse.ts
+++ b/ts/features/services/types/ServicePreferenceResponse.ts
@@ -1,5 +1,5 @@
-import { EnabledChannels } from "../../utils/profile";
-import { ServiceId } from "../../../definitions/backend/ServiceId";
+import { EnabledChannels } from "../../../utils/profile";
+import { ServiceId } from "../../../../definitions/backend/ServiceId";
 
 export type ServicePreference = { settings_version: number } & EnabledChannels;
 
diff --git a/ts/features/wallet/bancomat/component/bancomatCard/BancomatCard.tsx b/ts/features/wallet/bancomat/component/bancomatCard/BancomatCard.tsx
deleted file mode 100644
index 95318dd52b0..00000000000
--- a/ts/features/wallet/bancomat/component/bancomatCard/BancomatCard.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as E from "fp-ts/lib/Either";
-import { pipe } from "fp-ts/lib/function";
-import * as React from "react";
-import { connect } from "react-redux";
-import { Dispatch } from "redux";
-import { profileNameSurnameSelector } from "../../../../../store/reducers/profile";
-import { GlobalState } from "../../../../../store/reducers/types";
-import { BancomatPaymentMethod } from "../../../../../types/pagopa";
-import { isPaymentMethodExpired } from "../../../../../utils/paymentMethod";
-import BaseBancomatCard from "./BaseBancomatCard";
-
-type OwnProps = { enhancedBancomat: BancomatPaymentMethod };
-
-type Props = ReturnType<typeof mapDispatchToProps> &
-  ReturnType<typeof mapStateToProps> &
-  OwnProps;
-
-const getExpireDate = (fullYear?: string, month?: string): Date | undefined => {
-  if (!fullYear || !month) {
-    return undefined;
-  }
-  const year = parseInt(fullYear, 10);
-  const indexedMonth = parseInt(month, 10);
-  if (isNaN(year) || isNaN(indexedMonth)) {
-    return undefined;
-  }
-  return new Date(year, indexedMonth - 1);
-};
-
-/**
- * Render a bancomat already added to the wallet
- * @param props
- * @constructor
- */
-const BancomatCard: React.FunctionComponent<Props> = props => (
-  <BaseBancomatCard
-    abi={props.enhancedBancomat.abiInfo ?? {}}
-    isExpired={pipe(
-      isPaymentMethodExpired(props.enhancedBancomat),
-      E.getOrElse(() => false)
-    )}
-    expiringDate={getExpireDate(
-      props.enhancedBancomat.info.expireYear,
-      props.enhancedBancomat.info.expireMonth
-    )}
-    user={props.nameSurname ?? ""}
-  />
-);
-
-const mapDispatchToProps = (_: Dispatch) => ({});
-
-const mapStateToProps = (state: GlobalState) => ({
-  nameSurname: profileNameSurnameSelector(state)
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(BancomatCard);
diff --git a/ts/features/wallet/bancomat/component/bancomatCard/BaseBancomatCard.tsx b/ts/features/wallet/bancomat/component/bancomatCard/BaseBancomatCard.tsx
deleted file mode 100644
index 36f578f88b6..00000000000
--- a/ts/features/wallet/bancomat/component/bancomatCard/BaseBancomatCard.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import { pipe } from "fp-ts/lib/function";
-import * as O from "fp-ts/lib/Option";
-import * as React from "react";
-import {
-  View,
-  Image,
-  ImageStyle,
-  Platform,
-  StyleProp,
-  StyleSheet
-} from "react-native";
-import { widthPercentageToDP } from "react-native-responsive-screen";
-import { IOColors, hexToRgba, VSpacer } from "@pagopa/io-app-design-system";
-import { Abi } from "../../../../../../definitions/pagopa/walletv2/Abi";
-import pagoBancomatLogo from "../../../../../../img/wallet/cards-icons/pagobancomat.png";
-import { IOBadge } from "../../../../../components/core/IOBadge";
-import { Body } from "../../../../../components/core/typography/Body";
-import { H5 } from "../../../../../components/core/typography/H5";
-import I18n from "../../../../../i18n";
-import customVariables from "../../../../../theme/variables";
-import { localeDateFormat } from "../../../../../utils/locale";
-import { BrandImage } from "../../../component/card/BrandImage";
-import { useImageResize } from "../../../onboarding/bancomat/hooks/useImageResize";
-
-type Props = {
-  abi: Abi;
-  expiringDate?: Date;
-  isExpired?: boolean;
-  user: string;
-  blocked?: boolean;
-  accessibilityLabel?: string;
-};
-
-const BASE_IMG_W = 160;
-const BASE_IMG_H = 40;
-const opaqueBorderColor = hexToRgba(IOColors.black, 0.1);
-
-const styles = StyleSheet.create({
-  cardBox: {
-    height: 192,
-    width: widthPercentageToDP("90%"),
-    maxWidth: 343,
-    paddingHorizontal: customVariables.contentPadding,
-    paddingTop: 20,
-    paddingBottom: 22,
-    flexDirection: "column",
-    justifyContent: "space-between",
-    backgroundColor: IOColors.greyUltraLight,
-    borderRadius: 8,
-    shadowColor: IOColors.black,
-    shadowOffset: {
-      width: 0,
-      height: 3
-    },
-    shadowOpacity: 0.18,
-    shadowRadius: 4.65,
-    zIndex: 7,
-    elevation: 7
-  },
-  shadowBox: {
-    marginBottom: -13,
-    borderRadius: 8,
-    borderTopWidth: 10,
-    borderTopColor: opaqueBorderColor,
-    height: 15,
-    width: widthPercentageToDP("90%"),
-    maxWidth: 343
-  },
-  bottomRow: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "baseline"
-  }
-});
-
-/**
- * Generate the accessibility label for the card.
- */
-const getAccessibilityRepresentation = (
-  bankName: string,
-  expiringDate?: Date,
-  holder?: string
-) => {
-  const cardRepresentation = I18n.t("wallet.accessibility.folded.bancomat", {
-    bankName
-  });
-
-  const computedValidity =
-    expiringDate !== undefined
-      ? `, ${I18n.t("cardComponent.validUntil")} ${localeDateFormat(
-          expiringDate,
-          I18n.t("global.dateFormats.numericMonthYear")
-        )}`
-      : "";
-
-  const computedHolder =
-    holder !== undefined
-      ? `, ${I18n.t("wallet.accessibility.cardHolder")} ${holder}`
-      : "";
-
-  return `${cardRepresentation}${computedValidity}${computedHolder}`;
-};
-
-/**
- * Render the image (if available) or the bank name (if available)
- * or the generic bancomat string (final fallback).
- * @param abi
- * @param size
- * TODO: refactor with {@link BancomatWalletPreview}
- */
-const renderBankLogo = (abi: Abi, size: O.Option<[number, number]>) =>
-  pipe(
-    size,
-    O.fold(
-      () => (
-        <Body numberOfLines={1}>
-          {abi.name ?? I18n.t("wallet.methods.bancomat.name")}
-        </Body>
-      ),
-      imgDim => {
-        const imageUrl = abi.logoUrl;
-        const imageStyle: StyleProp<ImageStyle> = {
-          width: imgDim[0],
-          height: imgDim[1],
-          resizeMode: "contain"
-        };
-        return imageUrl ? (
-          <Image source={{ uri: imageUrl }} style={imageStyle} />
-        ) : null;
-      }
-    )
-  );
-
-/**
- * The base component that represents a full bancomat card
- * @param props
- * @constructor
- */
-const BaseBancomatCard: React.FunctionComponent<Props> = (props: Props) => {
-  const imgDimensions = useImageResize(
-    BASE_IMG_W,
-    BASE_IMG_H,
-    props.abi?.logoUrl
-  );
-  return (
-    <>
-      {Platform.OS === "android" && <View style={styles.shadowBox} />}
-      <View
-        style={styles.cardBox}
-        accessibilityLabel={getAccessibilityRepresentation(
-          props.abi.name ?? "",
-          props.expiringDate,
-          props.user
-        )}
-        accessible
-      >
-        <View>
-          <View
-            style={{
-              flexDirection: "row",
-              alignItems: "center",
-              justifyContent: "space-between"
-            }}
-          >
-            {renderBankLogo(props.abi, imgDimensions)}
-            {props.blocked && (
-              <IOBadge
-                variant="outline"
-                color="red"
-                text={I18n.t("global.badges.blocked")}
-              />
-            )}
-          </View>
-          <VSpacer size={16} />
-          {props.expiringDate && (
-            <H5
-              color={props.isExpired ? "red" : "bluegreyDark"}
-              weight={"SemiBold"}
-            >{`${I18n.t("cardComponent.validUntil")} ${localeDateFormat(
-              props.expiringDate,
-              I18n.t("global.dateFormats.numericMonthYear")
-            )}`}</H5>
-          )}
-        </View>
-        <View style={styles.bottomRow}>
-          <Body>{props.user.toLocaleUpperCase()}</Body>
-          <BrandImage image={pagoBancomatLogo} />
-        </View>
-      </View>
-    </>
-  );
-};
-
-export default BaseBancomatCard;
diff --git a/ts/features/wallet/bancomat/component/bancomatCard/PreviewBancomatCard.tsx b/ts/features/wallet/bancomat/component/bancomatCard/PreviewBancomatCard.tsx
deleted file mode 100644
index 74991c073bc..00000000000
--- a/ts/features/wallet/bancomat/component/bancomatCard/PreviewBancomatCard.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from "react";
-import { connect } from "react-redux";
-import { Dispatch } from "redux";
-import { Card } from "../../../../../../definitions/pagopa/walletv2/Card";
-import { profileNameSurnameSelector } from "../../../../../store/reducers/profile";
-import { GlobalState } from "../../../../../store/reducers/types";
-import { Abi } from "../../../../../../definitions/pagopa/walletv2/Abi";
-import { isBancomatBlocked } from "../../../../../utils/paymentMethod";
-import BaseBancomatCard from "./BaseBancomatCard";
-
-type OnboardingData = { bancomat: Card; abi: Abi };
-
-type Props = ReturnType<typeof mapDispatchToProps> &
-  ReturnType<typeof mapStateToProps> &
-  OnboardingData;
-
-/**
- * Display a preview of a bancomat that the user could add to the wallet
- * @constructor
- */
-const PreviewBancomatCard: React.FunctionComponent<Props> = props => (
-  <BaseBancomatCard
-    abi={props.abi}
-    expiringDate={props.bancomat.expiringDate}
-    user={props.nameSurname ?? ""}
-    blocked={isBancomatBlocked(props.bancomat)}
-  />
-);
-
-const mapDispatchToProps = (_: Dispatch) => ({});
-
-const mapStateToProps = (state: GlobalState) => ({
-  nameSurname: profileNameSurnameSelector(state)
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(PreviewBancomatCard);
diff --git a/ts/features/wallet/bancomat/screen/BancomatDetailScreen.tsx b/ts/features/wallet/bancomat/screen/BancomatDetailScreen.tsx
index 3b60b9efad1..9a1e3730fe0 100644
--- a/ts/features/wallet/bancomat/screen/BancomatDetailScreen.tsx
+++ b/ts/features/wallet/bancomat/screen/BancomatDetailScreen.tsx
@@ -4,35 +4,33 @@ import { sequenceS } from "fp-ts/lib/Apply";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import * as React from "react";
+import { Route, useRoute } from "@react-navigation/native";
 import WorkunitGenericFailure from "../../../../components/error/WorkunitGenericFailure";
-import { PaymentCardBig } from "../../../../components/ui/cards/payment/PaymentCardBig";
 import I18n from "../../../../i18n";
-import { IOStackNavigationRouteProps } from "../../../../navigation/params/AppParamsList";
-import { WalletParamsList } from "../../../../navigation/params/WalletParamsList";
 import { useIOSelector } from "../../../../store/hooks";
 import { profileNameSurnameSelector } from "../../../../store/reducers/profile";
 import { paymentMethodByIdSelector } from "../../../../store/reducers/wallet/wallets";
 import { BancomatPaymentMethod, isBancomat } from "../../../../types/pagopa";
 import BasePaymentMethodScreen from "../../common/BasePaymentMethodScreen";
 import { acceptedPaymentMethodsFaqUrl } from "../../../../urls";
+import { PaymentCardBig } from "../../../payments/common/components/PaymentCardBig";
 
 export type BancomatDetailScreenNavigationParams = Readonly<{
   // TODO: we should use only the id and retrieve it from the store, otherwise we lose all the updates
   bancomat: BancomatPaymentMethod;
 }>;
 
-type Props = IOStackNavigationRouteProps<
-  WalletParamsList,
-  "WALLET_BANCOMAT_DETAIL"
->;
-
 /**
  * Detail screen for a bancomat
  * @constructor
  */
-const BancomatDetailScreen = ({ route }: Props) => {
+const BancomatDetailScreen = () => {
+  const { idWallet } =
+    useRoute<
+      Route<"WALLET_BANCOMAT_DETAIL", BancomatDetailScreenNavigationParams>
+    >().params.bancomat;
   const bancomat = useIOSelector(state =>
-    paymentMethodByIdSelector(state, route.params.bancomat.idWallet)
+    paymentMethodByIdSelector(state, idWallet)
   );
   const bannerViewRef = React.useRef(null);
   const nameSurname = useIOSelector(profileNameSurnameSelector);
diff --git a/ts/features/wallet/bancomatpay/screen/BPayDetailScreen.tsx b/ts/features/wallet/bancomatpay/screen/BPayDetailScreen.tsx
index 302390dfaec..3aba20d6c08 100644
--- a/ts/features/wallet/bancomatpay/screen/BPayDetailScreen.tsx
+++ b/ts/features/wallet/bancomatpay/screen/BPayDetailScreen.tsx
@@ -4,16 +4,16 @@ import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import * as React from "react";
 import WorkunitGenericFailure from "../../../../components/error/WorkunitGenericFailure";
-import {
-  PaymentCardBig,
-  PaymentCardBigProps
-} from "../../../../components/ui/cards/payment/PaymentCardBig";
 import { useIOSelector } from "../../../../store/hooks";
 import { paymentMethodByIdSelector } from "../../../../store/reducers/wallet/wallets";
 import { BPayPaymentMethod, isBPay } from "../../../../types/pagopa";
 import BasePaymentMethodScreen from "../../common/BasePaymentMethodScreen";
 import PaymentMethodFeatures from "../../component/features/PaymentMethodFeatures";
 import { profileNameSurnameSelector } from "../../../../store/reducers/profile";
+import {
+  PaymentCardBig,
+  PaymentCardBigProps
+} from "../../../payments/common/components/PaymentCardBig";
 
 export type BPayDetailScreenNavigationParams = Readonly<{
   // TODO: we should use only the id and retrieve it from the store, otherwise we lose all the updates
diff --git a/ts/features/wallet/cobadge/screen/CobadgeDetailScreen.tsx b/ts/features/wallet/cobadge/screen/CobadgeDetailScreen.tsx
index 05b226a6dd2..4da614806bc 100644
--- a/ts/features/wallet/cobadge/screen/CobadgeDetailScreen.tsx
+++ b/ts/features/wallet/cobadge/screen/CobadgeDetailScreen.tsx
@@ -4,34 +4,31 @@ import { sequenceS } from "fp-ts/lib/Apply";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import * as React from "react";
+import { Route, useRoute } from "@react-navigation/native";
 import WorkunitGenericFailure from "../../../../components/error/WorkunitGenericFailure";
-import { PaymentCardBig } from "../../../../components/ui/cards/payment/PaymentCardBig";
 import I18n from "../../../../i18n";
-import { IOStackNavigationRouteProps } from "../../../../navigation/params/AppParamsList";
-import { WalletParamsList } from "../../../../navigation/params/WalletParamsList";
 import { useIOSelector } from "../../../../store/hooks";
 import { creditCardByIdSelector } from "../../../../store/reducers/wallet/wallets";
 import { CreditCardPaymentMethod } from "../../../../types/pagopa";
 import { acceptedPaymentMethodsFaqUrl } from "../../../../urls";
 import { isCobadge } from "../../../../utils/paymentMethodCapabilities";
 import BasePaymentMethodScreen from "../../common/BasePaymentMethodScreen";
+import { PaymentCardBig } from "../../../payments/common/components/PaymentCardBig";
 
 export type CobadgeDetailScreenNavigationParams = Readonly<{
   // TODO: we should use only the id and retrieve it from the store, otherwise we lose all the updates
   cobadge: CreditCardPaymentMethod;
 }>;
 
-type Props = IOStackNavigationRouteProps<
-  WalletParamsList,
-  "WALLET_COBADGE_DETAIL"
->;
-
 /**
  * Detail screen for a cobadge card
  * @constructor
  */
-const CobadgeDetailScreen = (props: Props) => {
-  const { cobadge } = props.route.params;
+const CobadgeDetailScreen = () => {
+  const { cobadge } =
+    useRoute<
+      Route<"WALLET_COBADGE_DETAIL", CobadgeDetailScreenNavigationParams>
+    >().params;
   const card = useIOSelector(state =>
     creditCardByIdSelector(state, cobadge.idWallet)
   );
diff --git a/ts/features/wallet/common/BasePaymentMethodScreen.tsx b/ts/features/wallet/common/BasePaymentMethodScreen.tsx
index b238fe09ce1..eb5909857e8 100644
--- a/ts/features/wallet/common/BasePaymentMethodScreen.tsx
+++ b/ts/features/wallet/common/BasePaymentMethodScreen.tsx
@@ -13,10 +13,10 @@ import {
   IOColors,
   VSpacer,
   IOSpacingScale,
-  ListItemAction
+  ListItemAction,
+  useIOToast
 } from "@pagopa/io-app-design-system";
 import LoadingSpinnerOverlay from "../../../components/LoadingSpinnerOverlay";
-import { useIOToast } from "../../../components/Toast";
 import { IOStyles } from "../../../components/core/variables/IOStyles";
 import BaseScreenComponent from "../../../components/screens/BaseScreenComponent";
 import FocusAwareStatusBar from "../../../components/ui/FocusAwareStatusBar";
@@ -115,7 +115,10 @@ const BasePaymentMethodScreen = (props: Props) => {
       dark={true}
       headerBackgroundColor={blueHeaderColor}
     >
-      <FocusAwareStatusBar barStyle="light-content" />
+      <FocusAwareStatusBar
+        backgroundColor={blueHeaderColor}
+        barStyle="light-content"
+      />
       <ScrollView>
         <View style={[styles.blueHeader, { backgroundColor: blueHeaderColor }]}>
           <View style={styles.cardContainer}>{card}</View>
diff --git a/ts/features/wallet/component/card/FeaturedCardCarousel.tsx b/ts/features/wallet/component/card/FeaturedCardCarousel.tsx
index d8ccc7c1fb4..60e3a5cc39c 100644
--- a/ts/features/wallet/component/card/FeaturedCardCarousel.tsx
+++ b/ts/features/wallet/component/card/FeaturedCardCarousel.tsx
@@ -16,7 +16,6 @@ import {
   AppParamsList,
   IOStackNavigationProp
 } from "../../../../navigation/params/AppParamsList";
-import ROUTES from "../../../../navigation/routes";
 import {
   loadServiceDetail,
   showServiceDetails
@@ -38,6 +37,7 @@ import {
   serviceFromAvailableBonusSelector
 } from "../../../bonus/common/store/selectors";
 import { getRemoteLocale } from "../../../messages/utils/messages";
+import { SERVICES_ROUTES } from "../../../services/navigation/routes";
 import FeaturedCard from "./FeaturedCard";
 
 type Props = ReturnType<typeof mapStateToProps> &
@@ -105,8 +105,8 @@ const FeaturedCardCarousel: React.FunctionComponent<Props> = (props: Props) => {
             },
             s => () => {
               dispatch(showServiceDetails(s));
-              navigation.navigate(ROUTES.SERVICES_NAVIGATOR, {
-                screen: ROUTES.SERVICE_DETAIL,
+              navigation.navigate(SERVICES_ROUTES.SERVICES_NAVIGATOR, {
+                screen: SERVICES_ROUTES.SERVICE_DETAIL,
                 params: { serviceId: s.service_id }
               });
             }
diff --git a/ts/features/wallet/component/features/PagoPaPaymentCapability.tsx b/ts/features/wallet/component/features/PagoPaPaymentCapability.tsx
index 95d59c5cf2d..48305f64520 100644
--- a/ts/features/wallet/component/features/PagoPaPaymentCapability.tsx
+++ b/ts/features/wallet/component/features/PagoPaPaymentCapability.tsx
@@ -6,7 +6,7 @@ import { PreferencesListItem } from "../../../../components/PreferencesListItem"
 import TouchableDefaultOpacity from "../../../../components/TouchableDefaultOpacity";
 import { IOBadge } from "../../../../components/core/IOBadge";
 import { Link } from "../../../../components/core/typography/Link";
-import Markdown from "../../../../components/ui/Markdown";
+import LegacyMarkdown from "../../../../components/ui/Markdown/LegacyMarkdown";
 import Switch from "../../../../components/ui/Switch";
 import I18n from "../../../../i18n";
 import { PaymentMethod } from "../../../../types/pagopa";
@@ -69,9 +69,9 @@ const PagoPaPaymentCapability: React.FC<Props> = props => {
     {
       component: (
         <View>
-          <Markdown>
+          <LegacyMarkdown>
             {I18n.t("wallet.methods.card.pagoPaCapability.bottomSheetBody")}
-          </Markdown>
+          </LegacyMarkdown>
           <ButtonDefaultOpacity
             onPress={onOpenLearnMoreAboutInAppPayments}
             style={styles.bottomSheetCTA}
diff --git a/ts/features/wallet/component/features/PaymentStatusSwitch.tsx b/ts/features/wallet/component/features/PaymentStatusSwitch.tsx
index 31576416a95..b923c64ee86 100644
--- a/ts/features/wallet/component/features/PaymentStatusSwitch.tsx
+++ b/ts/features/wallet/component/features/PaymentStatusSwitch.tsx
@@ -6,7 +6,7 @@ import * as React from "react";
 import { useEffect, useRef } from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
-import { Icon } from "@pagopa/io-app-design-system";
+import { Icon, IOToast } from "@pagopa/io-app-design-system";
 import { RemoteSwitch } from "../../../../components/core/selection/RemoteSwitch";
 import { IOStyleVariables } from "../../../../components/core/variables/IOStyleVariables";
 import I18n from "../../../../i18n";
@@ -19,7 +19,6 @@ import {
 import { GlobalState } from "../../../../store/reducers/types";
 import { getPaymentStatusById } from "../../../../store/reducers/wallet/wallets";
 import { PaymentMethod } from "../../../../types/pagopa";
-import { IOToast } from "../../../../components/Toast";
 
 type OwnProps = {
   paymentMethod: PaymentMethod;
diff --git a/ts/features/wallet/creditCard/screen/CreditCardDetailScreen.tsx b/ts/features/wallet/creditCard/screen/CreditCardDetailScreen.tsx
index e734d2ec256..6aeea54b2c8 100644
--- a/ts/features/wallet/creditCard/screen/CreditCardDetailScreen.tsx
+++ b/ts/features/wallet/creditCard/screen/CreditCardDetailScreen.tsx
@@ -4,11 +4,9 @@ import { sequenceS } from "fp-ts/lib/Apply";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import { IOLogoPaymentExtType } from "@pagopa/io-app-design-system";
+import { Route, useRoute } from "@react-navigation/native";
 import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay";
 import WorkunitGenericFailure from "../../../../components/error/WorkunitGenericFailure";
-import { PaymentCardBig } from "../../../../components/ui/cards/payment/PaymentCardBig";
-import { IOStackNavigationRouteProps } from "../../../../navigation/params/AppParamsList";
-import { WalletParamsList } from "../../../../navigation/params/WalletParamsList";
 import { useIOSelector } from "../../../../store/hooks";
 import { creditCardByIdSelector } from "../../../../store/reducers/wallet/wallets";
 import { CreditCardPaymentMethod } from "../../../../types/pagopa";
@@ -16,23 +14,22 @@ import { idPayAreInitiativesFromInstrumentLoadingSelector } from "../../../idpay
 import BasePaymentMethodScreen from "../../common/BasePaymentMethodScreen";
 import PaymentMethodFeatures from "../../component/features/PaymentMethodFeatures";
 import { capitalize } from "../../../../utils/strings";
+import { PaymentCardBig } from "../../../payments/common/components/PaymentCardBig";
 
 export type CreditCardDetailScreenNavigationParams = Readonly<{
   // Since we don't have a typed ID for the payment methods, we keep the creditCard as param even if it is then read by the store
   creditCard: CreditCardPaymentMethod;
 }>;
 
-type Props = IOStackNavigationRouteProps<
-  WalletParamsList,
-  "WALLET_CREDIT_CARD_DETAIL"
->;
-
 /**
  * Detail screen for a credit card
  */
-const CreditCardDetailScreen = ({ route }: Props) => {
+const CreditCardDetailScreen = () => {
   const [walletExisted, setWalletExisted] = React.useState(false);
-  const paramCreditCard: CreditCardPaymentMethod = route.params.creditCard;
+  const { creditCard: paramCreditCard } =
+    useRoute<
+      Route<"WALLET_CREDIT_CARD_DETAIL", CreditCardDetailScreenNavigationParams>
+    >().params;
   // We need to read the card from the store to receive the updates
   // TODO: to avoid this we need a store refactoring for the wallet section (all the component should receive the id and not the wallet, in order to update when needed)
   const storeCreditCard = useIOSelector(state =>
diff --git a/ts/features/wallet/creditCard/screen/__tests__/CreditCardDetailScreen.test.tsx b/ts/features/wallet/creditCard/screen/__tests__/CreditCardDetailScreen.test.tsx
index 58bfeeb6cb9..f7898d87a47 100644
--- a/ts/features/wallet/creditCard/screen/__tests__/CreditCardDetailScreen.test.tsx
+++ b/ts/features/wallet/creditCard/screen/__tests__/CreditCardDetailScreen.test.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import { waitFor } from "@testing-library/react-native";
-import * as React from "react";
 import { Store, createStore } from "redux";
 import { StatusEnum } from "../../../../../../definitions/idpay/InitiativeDTO";
 import { EnableableFunctionsEnum } from "../../../../../../definitions/pagopa/EnableableFunctions";
@@ -166,16 +165,12 @@ describe("Test CreditCardDetailScreen", () => {
   );
 });
 
-const CreditCardWrapper = (
-  props: React.ComponentProps<typeof CreditCardDetailScreen>
-) => <CreditCardDetailScreen {...props} />;
-
 const renderDetailScreen = (
   store: Store,
   creditCard: CreditCardPaymentMethod
 ) =>
   renderScreenWithNavigationStoreContext<GlobalState>(
-    CreditCardWrapper,
+    CreditCardDetailScreen,
     ROUTES.WALLET_CREDIT_CARD_DETAIL,
     { creditCard },
     store
diff --git a/ts/features/wallet/onboarding/__e2e__/creditCardOnboarding.e2e.ts b/ts/features/wallet/onboarding/__e2e__/creditCardOnboarding.e2e.ts
index 195c5d6cffa..60f248c7cdf 100644
--- a/ts/features/wallet/onboarding/__e2e__/creditCardOnboarding.e2e.ts
+++ b/ts/features/wallet/onboarding/__e2e__/creditCardOnboarding.e2e.ts
@@ -8,75 +8,73 @@ describe("Credit Card onboarding", () => {
     await ensureLoggedIn();
   });
 
-  describe("when the user inserts all the required valid data", () => {
-    it("should add successfully the credit card to the wallet", async () => {
-      await waitFor(element(by.text(I18n.t("global.navigator.wallet"))))
-        .toBeVisible()
-        .withTimeout(e2eWaitRenderTimeout);
+  it("when the user inserts all the required valid data, it should add successfully the credit card to the wallet", async () => {
+    await waitFor(element(by.text(I18n.t("global.navigator.wallet"))))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
 
-      // Footer, Wallet icon
-      await element(by.text(I18n.t("global.navigator.wallet"))).tap();
+    // Footer, Wallet icon
+    await element(by.text(I18n.t("global.navigator.wallet"))).tap();
 
-      await waitFor(element(by.id("walletAddNewPaymentMethodTestId")))
-        .toBeVisible()
-        .withTimeout(e2eWaitRenderTimeout);
+    await waitFor(element(by.id("walletAddNewPaymentMethodTestId")))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
 
-      // Button "+ Add"
-      await element(by.id("walletAddNewPaymentMethodTestId")).tap();
+    // Button "+ Add"
+    await element(by.id("walletAddNewPaymentMethodTestId")).tap();
 
-      await waitFor(element(by.id("wallet.paymentMethod")))
-        .toBeVisible()
-        .withTimeout(e2eWaitRenderTimeout);
+    await waitFor(element(by.id("wallet.paymentMethod")))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
 
-      // Add payment method listItem in bottomSheet
-      await element(by.id("wallet.paymentMethod")).tap();
+    // Add payment method listItem in bottomSheet
+    await element(by.id("wallet.paymentMethod")).tap();
 
-      await waitFor(element(by.text(I18n.t("wallet.methods.card.name"))))
-        .toBeVisible()
-        .withTimeout(e2eWaitRenderTimeout);
-      // Add Credit Card List Item
-      await element(by.text(I18n.t("wallet.methods.card.name"))).tap();
+    await waitFor(element(by.text(I18n.t("wallet.methods.card.name"))))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+    // Add Credit Card List Item
+    await element(by.text(I18n.t("wallet.methods.card.name"))).tap();
 
-      await waitFor(element(by.id("cardHolderInput")))
-        .toBeVisible()
-        .withTimeout(e2eWaitRenderTimeout);
+    await waitFor(element(by.id("cardHolderInput")))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
 
-      // Fill the credit card data
-      await element(by.id("cardHolderInput")).typeText("Gian Maria Mario");
+    // Fill the credit card data
+    await element(by.id("cardHolderInput")).typeText("Gian Maria Mario");
 
-      await element(by.id("panInputMask")).typeText("4444333322221111");
+    await element(by.id("panInputMask")).typeText("4444333322221111");
 
-      await element(by.id("expirationDateInputMask")).typeText("1299");
+    await element(by.id("expirationDateInputMask")).typeText("1299");
 
-      await element(by.id("securityCodeInputMask")).typeText("123");
+    await element(by.id("securityCodeInputMask")).typeText("123");
 
-      // Close the keyboard
-      await closeKeyboard();
-      await element(by.text(I18n.t("global.buttons.continue"))).tap();
+    // Close the keyboard
+    await closeKeyboard();
+    await element(by.text(I18n.t("global.buttons.continue"))).tap();
 
-      await waitFor(element(by.id("saveOrContinueButton")))
-        .toBeVisible()
-        .withTimeout(e2eWaitRenderTimeout);
-      await element(by.id("saveOrContinueButton")).tap();
+    await waitFor(element(by.id("saveOrContinueButton")))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+    await element(by.id("saveOrContinueButton")).tap();
 
-      // Wait for 3ds webview
-      await waitFor(element(by.text(I18n.t("wallet.challenge3ds.description"))))
-        .toBeVisible()
-        .withTimeout(e2eWaitRenderTimeout);
+    // Wait for 3ds webview
+    await waitFor(element(by.text(I18n.t("wallet.challenge3ds.description"))))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
 
-      // Wait for success screen
-      await waitFor(
-        element(
-          by.text(I18n.t("wallet.outcomeMessage.addCreditCard.success.title"))
-        )
+    // Wait for success screen
+    await waitFor(
+      element(
+        by.text(I18n.t("wallet.outcomeMessage.addCreditCard.success.title"))
       )
-        .toBeVisible()
-        .withTimeout(e2eWaitRenderTimeout);
-
-      // Wait for return to wallet
-      await waitFor(element(by.id("wallet-home-header-title")))
-        .toBeVisible()
-        .withTimeout(e2eWaitRenderTimeout);
-    });
+    )
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
+
+    // Wait for return to wallet
+    await waitFor(element(by.id("wallet-home-header-title")))
+      .toBeVisible()
+      .withTimeout(e2eWaitRenderTimeout);
   });
 });
diff --git a/ts/features/wallet/onboarding/bancomatPay/analytics/index.ts b/ts/features/wallet/onboarding/bancomatPay/analytics/index.ts
index 02d709bae49..67f2349b089 100644
--- a/ts/features/wallet/onboarding/bancomatPay/analytics/index.ts
+++ b/ts/features/wallet/onboarding/bancomatPay/analytics/index.ts
@@ -17,7 +17,7 @@ import {
 
 export const trackBPayAction =
   (mp: NonNullable<typeof mixpanel>) =>
-  (action: Action): Promise<void> => {
+  (action: Action): void => {
     switch (action.type) {
       case getType(walletAddBPayStart):
       case getType(walletAddBPayCompleted):
@@ -52,5 +52,4 @@ export const trackBPayAction =
           reason: action.payload
         });
     }
-    return Promise.resolve();
   };
diff --git a/ts/features/wallet/onboarding/bancomatPay/navigation/navigator.tsx b/ts/features/wallet/onboarding/bancomatPay/navigation/navigator.tsx
index cb1353d0cbc..5992ae302db 100644
--- a/ts/features/wallet/onboarding/bancomatPay/navigation/navigator.tsx
+++ b/ts/features/wallet/onboarding/bancomatPay/navigation/navigator.tsx
@@ -12,8 +12,7 @@ const Stack = createStackNavigator<PaymentMethodOnboardingBPayParamsList>();
 const PaymentMethodOnboardingBPayNavigator = () => (
   <Stack.Navigator
     initialRouteName={WALLET_ONBOARDING_BPAY_ROUTES.MAIN}
-    headerMode={"none"}
-    screenOptions={{ gestureEnabled: isGestureEnabled }}
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerShown: false }}
   >
     <Stack.Screen
       name={WALLET_ONBOARDING_BPAY_ROUTES.START}
diff --git a/ts/features/wallet/onboarding/cobadge/analytics/index.ts b/ts/features/wallet/onboarding/cobadge/analytics/index.ts
index 04b2e3443fa..6e90f71606b 100644
--- a/ts/features/wallet/onboarding/cobadge/analytics/index.ts
+++ b/ts/features/wallet/onboarding/cobadge/analytics/index.ts
@@ -19,7 +19,7 @@ import {
 
 export const trackCoBadgeAction =
   (mp: NonNullable<typeof mixpanel>) =>
-  (action: Action): Promise<void> => {
+  (action: Action): void => {
     switch (action.type) {
       case getType(walletAddCoBadgeStart):
         return mp.track(action.type, {
@@ -55,7 +55,6 @@ export const trackCoBadgeAction =
       case getType(sendAddCobadgeMessage):
         return mp.track(action.type, { canAdd: action.payload });
     }
-    return Promise.resolve();
   };
 
 /**
diff --git a/ts/features/wallet/onboarding/cobadge/navigation/navigator.tsx b/ts/features/wallet/onboarding/cobadge/navigation/navigator.tsx
index 32ac532a1a0..7777e13c577 100644
--- a/ts/features/wallet/onboarding/cobadge/navigation/navigator.tsx
+++ b/ts/features/wallet/onboarding/cobadge/navigation/navigator.tsx
@@ -12,8 +12,7 @@ const Stack = createStackNavigator<PaymentMethodOnboardingCoBadgeParamsList>();
 const PaymentMethodOnboardingCoBadgeNavigator = () => (
   <Stack.Navigator
     initialRouteName={WALLET_ONBOARDING_COBADGE_ROUTES.MAIN}
-    headerMode={"none"}
-    screenOptions={{ gestureEnabled: isGestureEnabled }}
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerShown: false }}
   >
     <Stack.Screen
       name={WALLET_ONBOARDING_COBADGE_ROUTES.CHOOSE_TYPE}
diff --git a/ts/features/wallet/onboarding/paypal/analytics/index.ts b/ts/features/wallet/onboarding/paypal/analytics/index.ts
index 9199ad2e075..902693cb50e 100644
--- a/ts/features/wallet/onboarding/paypal/analytics/index.ts
+++ b/ts/features/wallet/onboarding/paypal/analytics/index.ts
@@ -17,7 +17,7 @@ import {
 
 const trackPaypalOnboarding =
   (mp: NonNullable<typeof mixpanel>) =>
-  (action: Action): Promise<void> => {
+  (action: Action): void => {
     switch (action.type) {
       case getType(walletAddPaypalFailure):
       case getType(walletAddPaypalCancel):
@@ -49,7 +49,6 @@ const trackPaypalOnboarding =
           reason: getNetworkErrorMessage(action.payload)
         });
     }
-    return Promise.resolve();
   };
 
 export default trackPaypalOnboarding;
diff --git a/ts/features/wallet/onboarding/paypal/navigation/navigator.tsx b/ts/features/wallet/onboarding/paypal/navigation/navigator.tsx
index d27f50db30a..8c4c07a231d 100644
--- a/ts/features/wallet/onboarding/paypal/navigation/navigator.tsx
+++ b/ts/features/wallet/onboarding/paypal/navigation/navigator.tsx
@@ -13,8 +13,7 @@ const Stack = createStackNavigator<PaymentMethodOnboardingPayPalParamsList>();
 export const PaymentMethodOnboardingPayPalOnboardingNavigator = () => (
   <Stack.Navigator
     initialRouteName={PAYPAL_ROUTES.ONBOARDING.MAIN}
-    headerMode={"none"}
-    screenOptions={{ gestureEnabled: isGestureEnabled }}
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerShown: false }}
   >
     <Stack.Screen
       name={PAYPAL_ROUTES.ONBOARDING.START}
diff --git a/ts/features/wallet/onboarding/paypal/screen/PayPalOnboardingCheckoutScreen.tsx b/ts/features/wallet/onboarding/paypal/screen/PayPalOnboardingCheckoutScreen.tsx
index 359f44a5de4..ff20f2acdc1 100644
--- a/ts/features/wallet/onboarding/paypal/screen/PayPalOnboardingCheckoutScreen.tsx
+++ b/ts/features/wallet/onboarding/paypal/screen/PayPalOnboardingCheckoutScreen.tsx
@@ -1,4 +1,3 @@
-import { useNavigation } from "@react-navigation/native";
 import * as O from "fp-ts/lib/Option";
 import React, { useEffect, useState } from "react";
 import { Alert } from "react-native";
@@ -27,6 +26,8 @@ import {
 } from "../store/actions";
 import { paypalOnboardingSelectedPsp } from "../store/reducers/selectedPsp";
 import PAYPAL_ROUTES from "../navigation/routes";
+import { useIONavigation } from "../../../../../navigation/params/AppParamsList";
+import ROUTES from "../../../../../navigation/routes";
 
 type Props = ReturnType<typeof mapDispatchToProps> &
   ReturnType<typeof mapStateToProps>;
@@ -104,7 +105,7 @@ const CheckoutContent = (
  * 4. navigate to the checkout completed screen
  */
 const PayPalOnboardingCheckoutScreen = (props: Props) => {
-  const navigation = useNavigation();
+  const navigation = useIONavigation();
   const { refreshPMtoken } = props;
   // refresh the PM at the startup
   useEffect(() => {
@@ -113,8 +114,11 @@ const PayPalOnboardingCheckoutScreen = (props: Props) => {
 
   const handleCheckoutCompleted = (outcomeCode: O.Option<string>) => {
     props.setOutcomeCode(outcomeCode);
-    navigation.navigate(PAYPAL_ROUTES.ONBOARDING.MAIN, {
-      screen: PAYPAL_ROUTES.ONBOARDING.CHECKOUT_COMPLETED
+    navigation.navigate(ROUTES.WALLET_NAVIGATOR, {
+      screen: PAYPAL_ROUTES.ONBOARDING.MAIN,
+      params: {
+        screen: PAYPAL_ROUTES.ONBOARDING.CHECKOUT_COMPLETED
+      }
     });
   };
 
diff --git a/ts/features/wallet/onboarding/paypal/screen/PayPalPspSelectionScreen.tsx b/ts/features/wallet/onboarding/paypal/screen/PayPalPspSelectionScreen.tsx
index 3973cc68a16..b63938e9d40 100644
--- a/ts/features/wallet/onboarding/paypal/screen/PayPalPspSelectionScreen.tsx
+++ b/ts/features/wallet/onboarding/paypal/screen/PayPalPspSelectionScreen.tsx
@@ -1,4 +1,3 @@
-import { useNavigation } from "@react-navigation/native";
 import React, { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
 import { connect, useDispatch } from "react-redux";
@@ -35,6 +34,8 @@ import {
 import { payPalPspSelector } from "../store/reducers/searchPsp";
 import { IOPayPalPsp } from "../types";
 import PAYPAL_ROUTES from "../navigation/routes";
+import { useIONavigation } from "../../../../../navigation/params/AppParamsList";
+import ROUTES from "../../../../../navigation/routes";
 
 type Props = ReturnType<typeof mapDispatchToProps> &
   ReturnType<typeof mapStateToProps>;
@@ -112,7 +113,7 @@ const PayPalPspSelectionScreen = (props: Props): React.ReactElement | null => {
   const pspList = getValueOrElse(props.pspList, []);
   const [selectedPsp, setSelectedPsp] = useState<IOPayPalPsp | undefined>();
   const dispatch = useDispatch();
-  const navigation = useNavigation();
+  const navigation = useIONavigation();
   const searchPaypalPsp = () => {
     dispatch(searchPaypalPspAction.request());
   };
@@ -136,8 +137,11 @@ const PayPalPspSelectionScreen = (props: Props): React.ReactElement | null => {
       onPress: () => {
         if (selectedPsp) {
           props.setPspSelected(selectedPsp);
-          navigation.navigate(PAYPAL_ROUTES.ONBOARDING.MAIN, {
-            screen: PAYPAL_ROUTES.ONBOARDING.CHECKOUT
+          navigation.navigate(ROUTES.WALLET_NAVIGATOR, {
+            screen: PAYPAL_ROUTES.ONBOARDING.MAIN,
+            params: {
+              screen: PAYPAL_ROUTES.ONBOARDING.CHECKOUT
+            }
           });
         }
       },
diff --git a/ts/features/wallet/onboarding/paypal/screen/PayPalStartOnboardingScreen.tsx b/ts/features/wallet/onboarding/paypal/screen/PayPalStartOnboardingScreen.tsx
index cc2d267bc92..163db8d270f 100644
--- a/ts/features/wallet/onboarding/paypal/screen/PayPalStartOnboardingScreen.tsx
+++ b/ts/features/wallet/onboarding/paypal/screen/PayPalStartOnboardingScreen.tsx
@@ -1,4 +1,3 @@
-import { useNavigation } from "@react-navigation/native";
 import React from "react";
 import { Dimensions, SafeAreaView, View } from "react-native";
 import { connect } from "react-redux";
@@ -16,6 +15,8 @@ import { GlobalState } from "../../../../../store/reducers/types";
 import { emptyContextualHelp } from "../../../../../utils/emptyContextualHelp";
 import { walletAddPaypalBack, walletAddPaypalCancel } from "../store/actions";
 import PAYPAL_ROUTES from "../navigation/routes";
+import { useIONavigation } from "../../../../../navigation/params/AppParamsList";
+import ROUTES from "../../../../../navigation/routes";
 
 type Props = ReturnType<typeof mapDispatchToProps> &
   ReturnType<typeof mapStateToProps>;
@@ -50,11 +51,14 @@ const PayPalLogo = () => (
 const PayPalStartOnboardingScreen = (
   props: Props
 ): React.ReactElement | null => {
-  const navigationContext = useNavigation();
+  const navigationContext = useIONavigation();
 
   const navigateToSearchPsp = () =>
-    navigationContext.navigate(PAYPAL_ROUTES.ONBOARDING.MAIN, {
-      screen: PAYPAL_ROUTES.ONBOARDING.SEARCH_PSP
+    navigationContext.navigate(ROUTES.WALLET_NAVIGATOR, {
+      screen: PAYPAL_ROUTES.ONBOARDING.MAIN,
+      params: {
+        screen: PAYPAL_ROUTES.ONBOARDING.SEARCH_PSP
+      }
     });
 
   const cancelButtonProps = {
diff --git a/ts/features/wallet/onboarding/paypal/screen/__tests__/__snapshots__/PayPalOnboardingCompletedSuccessComponent.test.tsx.snap b/ts/features/wallet/onboarding/paypal/screen/__tests__/__snapshots__/PayPalOnboardingCompletedSuccessComponent.test.tsx.snap
index 4b0346d338d..bd5b030390c 100644
--- a/ts/features/wallet/onboarding/paypal/screen/__tests__/__snapshots__/PayPalOnboardingCompletedSuccessComponent.test.tsx.snap
+++ b/ts/features/wallet/onboarding/paypal/screen/__tests__/__snapshots__/PayPalOnboardingCompletedSuccessComponent.test.tsx.snap
@@ -20,502 +20,541 @@ exports[`PayPalOnboardingCompletedSuccessComponent should match the snapshot 1`]
     }
   >
     <View
-      collapsable={false}
-      pointerEvents="box-none"
       style={
-        Object {
-          "zIndex": 1,
-        }
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "flex": 1,
+          },
+          undefined,
+        ]
       }
     >
       <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
-        onLayout={[Function]}
+        collapsable={false}
         pointerEvents="box-none"
-        style={null}
+        style={
+          Object {
+            "zIndex": 1,
+          }
+        }
       >
         <View
-          collapsable={false}
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          onLayout={[Function]}
           pointerEvents="box-none"
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "opacity": 1,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-              "zIndex": 0,
-            }
-          }
+          style={null}
         >
           <View
             collapsable={false}
+            pointerEvents="box-none"
             style={
               Object {
-                "backgroundColor": "#FFFFFF",
-                "borderBottomColor": "rgb(216, 216, 216)",
-                "flex": 1,
-                "shadowColor": "rgb(216, 216, 216)",
-                "shadowOffset": Object {
-                  "height": 0.5,
-                  "width": 0,
-                },
-                "shadowOpacity": 0.85,
-                "shadowRadius": 0,
+                "bottom": 0,
+                "left": 0,
+                "opacity": 1,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "zIndex": 0,
               }
             }
-          />
-        </View>
-        <View
-          collapsable={false}
-          pointerEvents="box-none"
-          style={
-            Object {
-              "height": 64,
-              "maxHeight": undefined,
-              "minHeight": undefined,
-              "opacity": undefined,
-              "transform": undefined,
-            }
-          }
-        >
-          <View
-            pointerEvents="none"
-            style={
-              Object {
-                "height": 20,
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "borderBottomColor": "rgb(216, 216, 216)",
+                  "flex": 1,
+                  "shadowColor": "rgb(216, 216, 216)",
+                  "shadowOffset": Object {
+                    "height": 0.5,
+                    "width": 0,
+                  },
+                  "shadowOpacity": 0.85,
+                  "shadowRadius": 0,
+                }
               }
-            }
-          />
+            />
+          </View>
           <View
+            collapsable={false}
             pointerEvents="box-none"
             style={
               Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
+                "height": 44,
+                "maxHeight": undefined,
+                "minHeight": undefined,
+                "opacity": undefined,
+                "transform": undefined,
               }
             }
           >
             <View
-              collapsable={false}
+              pointerEvents="none"
+              style={
+                Object {
+                  "height": 0,
+                }
+              }
+            />
+            <View
               pointerEvents="box-none"
               style={
                 Object {
-                  "marginHorizontal": 16,
-                  "opacity": 1,
+                  "alignItems": "stretch",
+                  "flex": 1,
+                  "flexDirection": "row",
                 }
               }
             >
-              <Text
-                accessibilityRole="header"
-                aria-level="1"
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-start",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginStart": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
+              <View
                 collapsable={false}
-                numberOfLines={1}
-                onLayout={[Function]}
+                pointerEvents="box-none"
                 style={
                   Object {
-                    "color": "rgb(28, 28, 30)",
-                    "fontSize": 17,
-                    "fontWeight": "600",
+                    "justifyContent": "center",
+                    "marginHorizontal": 16,
+                    "maxWidth": 718,
+                    "opacity": 1,
                   }
                 }
               >
-                N/A
-              </Text>
+                <Text
+                  accessibilityRole="header"
+                  aria-level="1"
+                  collapsable={false}
+                  numberOfLines={1}
+                  onLayout={[Function]}
+                  style={
+                    Object {
+                      "color": "rgb(28, 28, 30)",
+                      "fontSize": 17,
+                      "fontWeight": "600",
+                    }
+                  }
+                >
+                  N/A
+                </Text>
+              </View>
+              <View
+                collapsable={false}
+                pointerEvents="box-none"
+                style={
+                  Object {
+                    "alignItems": "flex-end",
+                    "flexBasis": 0,
+                    "flexGrow": 1,
+                    "justifyContent": "center",
+                    "marginEnd": 0,
+                    "opacity": 1,
+                  }
+                }
+              />
             </View>
           </View>
         </View>
       </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="box-none"
+      <RNSScreenContainer
+        onLayout={[Function]}
         style={
           Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
+            "flex": 1,
           }
         }
       >
-        <View
+        <RNSModalScreen
+          activityState={2}
           collapsable={false}
-          style={
+          forwardedRef={[Function]}
+          gestureResponseDistance={
             Object {
-              "opacity": 1,
+              "bottom": -1,
+              "end": -1,
+              "start": -1,
+              "top": -1,
             }
           }
-        />
-        <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
-          onClose={[Function]}
-          onGestureBegin={[Function]}
-          onGestureCanceled={[Function]}
-          onGestureEnd={[Function]}
-          onOpen={[Function]}
-          onTransition={[Function]}
+          onGestureCancel={[Function]}
           pointerEvents="box-none"
+          sheetAllowedDetents="large"
+          sheetCornerRadius={-1}
+          sheetExpandsWhenScrolledToEdge={true}
+          sheetGrabberVisible={false}
+          sheetLargestUndimmedDetent="all"
           style={
-            Array [
-              Object {
-                "overflow": undefined,
-              },
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-            ]
-          }
-          transitionSpec={
             Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 10,
-                  "restSpeedThreshold": 10,
-                  "stiffness": 1000,
-                },
-              },
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
             }
           }
         >
           <View
             collapsable={false}
-            needsOffscreenAlphaCompositing={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          />
+          <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
+            onClose={[Function]}
+            onGestureBegin={[Function]}
+            onGestureCanceled={[Function]}
+            onGestureEnd={[Function]}
+            onOpen={[Function]}
+            onTransition={[Function]}
             pointerEvents="box-none"
             style={
+              Array [
+                Object {
+                  "display": "flex",
+                  "overflow": undefined,
+                },
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                },
+              ]
+            }
+            transitionSpec={
               Object {
-                "flex": 1,
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 10,
+                    "restSpeedThreshold": 10,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
               collapsable={false}
-              forwardedRef={[Function]}
-              handlerTag={1}
-              handlerType="PanGestureHandler"
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
                 collapsable={false}
-                pointerEvents="none"
+                forwardedRef={[Function]}
+                handlerTag={1}
+                handlerType="PanGestureHandler"
+                needsOffscreenAlphaCompositing={false}
+                onGestureHandlerEvent={[Function]}
+                onGestureHandlerStateChange={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#FFFFFF",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
                       Object {
-                        "backgroundColor": "#FFFFFF",
+                        "translateX": 0,
+                      },
+                      Object {
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="box-none"
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    }
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "#FFFFFF",
+                        },
+                        undefined,
+                      ],
+                    ]
                   }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
                     <View
                       style={
                         Object {
-                          "alignItems": "center",
                           "flex": 1,
-                          "justifyContent": "center",
-                          "padding": 24,
                         }
                       }
-                      testID="InfoScreenComponent"
                     >
-                      <Image
-                        resizeMode="contain"
-                        source={
-                          Object {
-                            "testUri": "../../../img/pictograms/payment-completed.png",
-                          }
-                        }
-                        style={
-                          Object {
-                            "height": 102,
-                            "width": 102,
-                          }
-                        }
-                        testID="rasterImage"
-                      />
                       <View
                         style={
                           Object {
-                            "height": 24,
+                            "alignItems": "center",
+                            "flex": 1,
+                            "justifyContent": "center",
+                            "padding": 24,
                           }
                         }
-                      />
-                      <Text
-                        accessible={true}
-                        color="bluegreyDark"
-                        defaultColor="bluegreyDark"
-                        defaultWeight="Bold"
-                        font="TitilliumWeb"
-                        fontStyle={
-                          Object {
-                            "fontSize": 20,
-                            "lineHeight": 24,
+                        testID="InfoScreenComponent"
+                      >
+                        <Image
+                          resizeMode="contain"
+                          source={
+                            Object {
+                              "testUri": "../../../img/pictograms/payment-completed.png",
+                            }
                           }
-                        }
-                        style={
-                          Array [
+                          style={
+                            Object {
+                              "height": 102,
+                              "width": 102,
+                            }
+                          }
+                          testID="rasterImage"
+                        />
+                        <View
+                          style={
                             Object {
-                              "textAlign": "center",
-                            },
+                              "height": 24,
+                            }
+                          }
+                        />
+                        <Text
+                          accessible={true}
+                          color="bluegreyDark"
+                          defaultColor="bluegreyDark"
+                          defaultWeight="Bold"
+                          font="TitilliumWeb"
+                          fontStyle={
                             Object {
                               "fontSize": 20,
                               "lineHeight": 24,
-                            },
-                            Object {
-                              "color": "#17324D",
-                              "fontFamily": "Titillium Web",
-                              "fontStyle": "normal",
-                              "fontWeight": "700",
-                            },
-                          ]
-                        }
-                        testID="infoScreenTitle"
-                        weight="Bold"
-                      >
-                        Fatto!
-                      </Text>
-                      <View
-                        style={
-                          Object {
-                            "height": 16,
+                            }
                           }
-                        }
-                      />
-                      <Text
-                        color="bluegrey"
-                        defaultColor="bluegrey"
-                        defaultWeight="Regular"
-                        font="TitilliumWeb"
-                        fontStyle={
-                          Object {
-                            "fontSize": 16,
-                            "lineHeight": 24,
+                          style={
+                            Array [
+                              Object {
+                                "textAlign": "center",
+                              },
+                              Object {
+                                "fontSize": 20,
+                                "lineHeight": 24,
+                              },
+                              Object {
+                                "color": "#17324D",
+                                "fontFamily": "Titillium Web",
+                                "fontStyle": "normal",
+                                "fontWeight": "700",
+                              },
+                            ]
                           }
-                        }
-                        style={
-                          Array [
+                          testID="infoScreenTitle"
+                          weight="Bold"
+                        >
+                          Fatto!
+                        </Text>
+                        <View
+                          style={
                             Object {
-                              "textAlign": "center",
-                            },
+                              "height": 16,
+                            }
+                          }
+                        />
+                        <Text
+                          color="bluegrey"
+                          defaultColor="bluegrey"
+                          defaultWeight="Regular"
+                          font="TitilliumWeb"
+                          fontStyle={
                             Object {
                               "fontSize": 16,
                               "lineHeight": 24,
-                            },
-                            Object {
-                              "color": "#475A6D",
-                              "fontFamily": "Titillium Web",
-                              "fontStyle": "normal",
-                              "fontWeight": "400",
-                            },
-                          ]
-                        }
-                        testID="infoScreenBody"
-                        weight="Regular"
-                      >
-                        Ora puoi continuare con il pagamento.
-                      </Text>
-                    </View>
-                    <View
-                      pointerEvents="box-none"
-                      style={
-                        Object {
-                          "marginTop": -50,
-                          "overflow": "hidden",
-                          "paddingTop": 50,
-                        }
-                      }
-                      testID="FooterWithButtons"
-                    >
+                            }
+                          }
+                          style={
+                            Array [
+                              Object {
+                                "textAlign": "center",
+                              },
+                              Object {
+                                "fontSize": 16,
+                                "lineHeight": 24,
+                              },
+                              Object {
+                                "color": "#475A6D",
+                                "fontFamily": "Titillium Web",
+                                "fontStyle": "normal",
+                                "fontWeight": "400",
+                              },
+                            ]
+                          }
+                          testID="infoScreenBody"
+                          weight="Regular"
+                        >
+                          Ora puoi continuare con il pagamento.
+                        </Text>
+                      </View>
                       <View
+                        pointerEvents="box-none"
                         style={
                           Object {
-                            "backgroundColor": "#FFFFFF",
-                            "elevation": 20,
-                            "paddingBottom": 16,
-                            "paddingLeft": 24,
-                            "paddingRight": 24,
-                            "paddingTop": 16,
-                            "shadowColor": "#0E0F13",
-                            "shadowOffset": Object {
-                              "height": 50,
-                              "width": 0,
-                            },
-                            "shadowOpacity": 0.5,
-                            "shadowRadius": 37,
+                            "marginTop": -50,
+                            "overflow": "hidden",
+                            "paddingTop": 50,
                           }
                         }
+                        testID="FooterWithButtons"
                       >
                         <View
                           style={
                             Object {
-                              "flexDirection": "row",
+                              "backgroundColor": "#FFFFFF",
+                              "elevation": 20,
+                              "paddingBottom": 16,
+                              "paddingLeft": 24,
+                              "paddingRight": 24,
+                              "paddingTop": 16,
+                              "shadowColor": "#0E0F13",
+                              "shadowOffset": Object {
+                                "height": 50,
+                                "width": 0,
+                              },
+                              "shadowOpacity": 0.5,
+                              "shadowRadius": 37,
                             }
                           }
                         >
                           <View
-                            accessibilityRole="button"
-                            accessibilityState={
-                              Object {
-                                "disabled": undefined,
-                              }
-                            }
-                            accessible={true}
-                            collapsable={false}
-                            focusable={true}
-                            forwardedRef={[Function]}
-                            hitSlop={
-                              Object {
-                                "bottom": 4,
-                                "top": 4,
-                              }
-                            }
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               Object {
-                                "alignContent": "center",
-                                "alignItems": "center",
-                                "alignSelf": "flex-start",
-                                "backgroundColor": "#007aff",
-                                "borderBottomWidth": null,
-                                "borderColor": "#007aff",
-                                "borderLeftWidth": null,
-                                "borderRadius": 5,
-                                "borderRightWidth": null,
-                                "borderTopWidth": null,
-                                "borderWidth": undefined,
-                                "elevation": 2,
-                                "flex": 1,
                                 "flexDirection": "row",
-                                "height": 45,
-                                "justifyContent": "center",
-                                "opacity": 1,
-                                "paddingBottom": 6,
-                                "paddingTop": 6,
-                                "shadowColor": undefined,
-                                "shadowOffset": undefined,
-                                "shadowOpacity": undefined,
-                                "shadowRadius": undefined,
                               }
                             }
-                            testID="primaryButtonId"
                           >
-                            <Text
+                            <View
+                              accessibilityRole="button"
+                              accessibilityState={
+                                Object {
+                                  "disabled": undefined,
+                                }
+                              }
+                              accessible={true}
+                              collapsable={false}
+                              focusable={true}
+                              forwardedRef={[Function]}
+                              hitSlop={
+                                Object {
+                                  "bottom": 4,
+                                  "top": 4,
+                                }
+                              }
+                              onClick={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
                               style={
-                                Array [
-                                  Object {
-                                    "backgroundColor": "transparent",
-                                    "color": "#fff",
-                                    "fontFamily": "System",
-                                    "fontSize": 16.5,
-                                    "marginLeft": 0,
-                                    "marginRight": 0,
-                                    "paddingLeft": 16,
-                                    "paddingRight": 16,
-                                  },
-                                  undefined,
-                                  Object {
-                                    "color": "#FFFFFF",
-                                  },
-                                ]
+                                Object {
+                                  "alignContent": "center",
+                                  "alignItems": "center",
+                                  "alignSelf": "flex-start",
+                                  "backgroundColor": "#007aff",
+                                  "borderBottomWidth": null,
+                                  "borderColor": "#007aff",
+                                  "borderLeftWidth": null,
+                                  "borderRadius": 5,
+                                  "borderRightWidth": null,
+                                  "borderTopWidth": null,
+                                  "borderWidth": undefined,
+                                  "elevation": 2,
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                  "height": 45,
+                                  "justifyContent": "center",
+                                  "opacity": 1,
+                                  "paddingBottom": 6,
+                                  "paddingTop": 6,
+                                  "shadowColor": undefined,
+                                  "shadowOffset": undefined,
+                                  "shadowOpacity": undefined,
+                                  "shadowRadius": undefined,
+                                }
                               }
-                              uppercase={false}
+                              testID="primaryButtonId"
                             >
-                              Continua
-                            </Text>
+                              <Text
+                                style={
+                                  Array [
+                                    Object {
+                                      "backgroundColor": "transparent",
+                                      "color": "#fff",
+                                      "fontFamily": "System",
+                                      "fontSize": 16.5,
+                                      "marginLeft": 0,
+                                      "marginRight": 0,
+                                      "paddingLeft": 16,
+                                      "paddingRight": 16,
+                                    },
+                                    undefined,
+                                    Object {
+                                      "color": "#FFFFFF",
+                                    },
+                                  ]
+                                }
+                                uppercase={false}
+                              >
+                                Continua
+                              </Text>
+                            </View>
                           </View>
                         </View>
                       </View>
@@ -525,8 +564,8 @@ exports[`PayPalOnboardingCompletedSuccessComponent should match the snapshot 1`]
               </View>
             </View>
           </View>
-        </View>
-      </View>
+        </RNSModalScreen>
+      </RNSScreenContainer>
     </View>
   </RNCSafeAreaProvider>
 </View>
diff --git a/ts/features/wallet/onboarding/paypal/screen/__tests__/__snapshots__/PspRadioItem.test.tsx.snap b/ts/features/wallet/onboarding/paypal/screen/__tests__/__snapshots__/PspRadioItem.test.tsx.snap
index d4e689fcca3..6a34c5ff3dd 100644
--- a/ts/features/wallet/onboarding/paypal/screen/__tests__/__snapshots__/PspRadioItem.test.tsx.snap
+++ b/ts/features/wallet/onboarding/paypal/screen/__tests__/__snapshots__/PspRadioItem.test.tsx.snap
@@ -73,7 +73,6 @@ exports[`PspRadioItem match snapshot 1`] = `
         align="xMidYMid"
         bbHeight={24}
         bbWidth={24}
-        color={4278219750}
         focusable={false}
         height={24}
         importantForAccessibility="no-hide-descendants"
@@ -96,19 +95,26 @@ exports[`PspRadioItem match snapshot 1`] = `
             },
           ]
         }
-        tintColor={4278219750}
+        tintColor="#0073E6"
         vbHeight={24}
         vbWidth={24}
         width={24}
       >
-        <RNSVGGroup>
+        <RNSVGGroup
+          fill={
+            Object {
+              "payload": 4278190080,
+              "type": 0,
+            }
+          }
+        >
           <RNSVGPath
             clipRule={0}
             d="M0 12C0 5.3726 5.3726 0 12 0s12 5.3726 12 12-5.3726 12-12 12S0 18.6274 0 12Zm2 0C2 6.47717 6.47717 2 12 2c5.5228 0 10 4.47717 10 10 0 5.5228-4.4772 10-10 10-5.52283 0-10-4.4772-10-10Zm10.0281-4.50455c.8439 0 1.5281-.68415 1.5281-1.52809 0-.84394-.6842-1.52809-1.5281-1.52809-.844 0-1.5281.68415-1.5281 1.52809 0 .84394.6841 1.52809 1.5281 1.52809Zm0 1.94382h.0005c.5678 0 1.0281.46029 1.0281 1.02813v8.0045c0 .5678-.4603 1.0281-1.0281 1.0281h-.0005C11.4603 19.5 11 19.0397 11 18.4719v-8.0045c0-.56784.4603-1.02813 1.0281-1.02813Z"
             fill={
-              Array [
-                2,
-              ]
+              Object {
+                "type": 2,
+              }
             }
             fillRule={0}
             propList={
@@ -143,6 +149,7 @@ exports[`PspRadioItem match snapshot 1`] = `
     }
     style={
       Object {
+        "borderCurve": "continuous",
         "borderTopLeftRadius": 24,
         "borderTopRightRadius": 24,
         "overflow": "hidden",
@@ -189,7 +196,6 @@ exports[`PspRadioItem match snapshot 1`] = `
                   align="xMidYMid"
                   bbHeight={24}
                   bbWidth={24}
-                  color={4278219750}
                   focusable={false}
                   height={24}
                   importantForAccessibility="no-hide-descendants"
@@ -212,19 +218,26 @@ exports[`PspRadioItem match snapshot 1`] = `
                       },
                     ]
                   }
-                  tintColor={4278219750}
+                  tintColor="#0073E6"
                   vbHeight={24}
                   vbWidth={24}
                   width={24}
                 >
-                  <RNSVGGroup>
+                  <RNSVGGroup
+                    fill={
+                      Object {
+                        "payload": 4278190080,
+                        "type": 0,
+                      }
+                    }
+                  >
                     <RNSVGPath
                       clipRule={0}
                       d="M.9995 12.9945C.44722 12.9943-.00027 12.5463 0 11.994a12.00002 12.00002 0 0 1 20.5-8.46455v-1.0295c0-.55228.4477-1 1-1s1 .44772 1 1v3.5a.99997.99997 0 0 1-1 1H18c-.5523 0-1-.44772-1-1s.4477-1 1-1h1.1414A10 10 0 0 0 2 11.995c-.00027.5523-.44821.9998-1.0005.9995ZM24 12.006c.0003-.5523-.4472-1.0003-.9995-1.0005-.5523-.0003-1.0002.4472-1.0005.9995a10.00034 10.00034 0 0 1-1.9878 5.9787 10.0006 10.0006 0 0 1-5.1683 3.6034 9.99992 9.99992 0 0 1-6.29728-.2023A10.00062 10.00062 0 0 1 4.85861 19H6c.55228 0 1-.4477 1-1 0-.5522-.44772-1-1-1H2.5c-.26522 0-.51957.1054-.70711.2929A1.0001 1.0001 0 0 0 1.5 18v3.5c0 .5523.44771 1 1 1 .55228 0 1-.4477 1-1v-1.0295a11.99855 11.99855 0 0 0 4.35595 2.7912 11.9998 11.9998 0 0 0 7.55665.2428c2.4793-.7354 4.6546-2.2521 6.2021-4.3241A12.00001 12.00001 0 0 0 24 12.006ZM12.8057 8.411a3.74994 3.74994 0 0 0-4.13036 1.39806 3.7515 3.7515 0 0 0-.39353.69094h3.43689c.4143 0 .75.3358.75.75s-.3357.75-.75.75H7.96875c0 .2532.02563.5044.07576.75h3.67419c.4143 0 .75.3358.75.75s-.3357.75-.75.75H8.71875a3.75036 3.75036 0 0 0 1.77295 1.2936 3.75037 3.75037 0 0 0 2.289.0529 3.75045 3.75045 0 0 0 1.8931-1.2878c.255-.3264.7263-.3842 1.0527-.1292s.3843.7263.1293 1.0527a5.25005 5.25005 0 0 1-2.6504 1.8029 5.24931 5.24931 0 0 1-3.2045-.0741 5.2501 5.2501 0 0 1-3.02557-2.711h-.50658c-.41422 0-.75-.3358-.75-.75s.33578-.75.75-.75h.05384a5.25096 5.25096 0 0 1-.05384-.75c-.41422 0-.75-.3358-.75-.75s.33578-.75.75-.75h.21884a5.25011 5.25011 0 0 1 3.34791-3.47286 5.24998 5.24998 0 0 1 3.205-.05174 5.24994 5.24994 0 0 1 2.6378 1.82134c.2527.32817.1915.79909-.1366 1.05182-.3282.25274-.7991.19154-1.0519-.13661A3.74976 3.74976 0 0 0 12.8057 8.411Z"
                       fill={
-                        Array [
-                          2,
-                        ]
+                        Object {
+                          "type": 2,
+                        }
                       }
                       fillRule={0}
                       propList={
@@ -299,7 +312,6 @@ exports[`PspRadioItem match snapshot 1`] = `
                   align="xMidYMid"
                   bbHeight={24}
                   bbWidth={24}
-                  color={4278219750}
                   focusable={false}
                   height={24}
                   importantForAccessibility="no-hide-descendants"
@@ -322,18 +334,25 @@ exports[`PspRadioItem match snapshot 1`] = `
                       },
                     ]
                   }
-                  tintColor={4278219750}
+                  tintColor="#0073E6"
                   vbHeight={24}
                   vbWidth={24}
                   width={24}
                 >
-                  <RNSVGGroup>
+                  <RNSVGGroup
+                    fill={
+                      Object {
+                        "payload": 4278190080,
+                        "type": 0,
+                      }
+                    }
+                  >
                     <RNSVGPath
                       d="M12.8287 1.41417A4.99995 4.99995 0 0 0 9.29318-.05029H5.05054c-2.76143 0-5 2.23857-5 5v4.24264A5.00013 5.00013 0 0 0 1.515 12.7279l9.6066 9.6066c1.9526 1.9526 5.1185 1.9526 7.0711 0l4.2426-4.2427c1.9526-1.9526 1.9526-5.1184 0-7.071l-9.6066-9.60663Zm-3.53552.53554a3.00003 3.00003 0 0 1 2.12132.87868l9.6066 9.60661c1.1716 1.1716 1.1716 3.0711 0 4.2426l-4.2426 4.2427c-1.1716 1.1715-3.0711 1.1715-4.2427 0l-9.60658-9.6066a3.00005 3.00005 0 0 1-.87868-2.12135V4.94971c0-1.65686 1.34314-3 3-3h4.24264Zm-1.2932 4.05028c0 1.10457-.89543 2-2 2s-2-.89543-2-2 .89543-2 2-2 2 .89543 2 2Z"
                       fill={
-                        Array [
-                          2,
-                        ]
+                        Object {
+                          "type": 2,
+                        }
                       }
                       propList={
                         Array [
@@ -434,7 +453,6 @@ exports[`PspRadioItem match snapshot 1`] = `
                   align="xMidYMid"
                   bbHeight={24}
                   bbWidth={24}
-                  color={4278219750}
                   focusable={false}
                   height={24}
                   importantForAccessibility="no-hide-descendants"
@@ -457,19 +475,26 @@ exports[`PspRadioItem match snapshot 1`] = `
                       },
                     ]
                   }
-                  tintColor={4278219750}
+                  tintColor="#0073E6"
                   vbHeight={24}
                   vbWidth={24}
                   width={24}
                 >
-                  <RNSVGGroup>
+                  <RNSVGGroup
+                    fill={
+                      Object {
+                        "payload": 4278190080,
+                        "type": 0,
+                      }
+                    }
+                  >
                     <RNSVGPath
                       clipRule={0}
                       d="m12.316.05173 6.265 2.089a4.99323 4.99323 0 0 1 2.4764 1.81871A4.9932 4.9932 0 0 1 22 6.88373v5.11697c0 7.563-9.2 11.74-9.594 11.914a.99966.99966 0 0 1-.406.0862.99966.99966 0 0 1-.406-.0862C11.2 23.7407 2 19.5637 2 12.0007V6.88373a4.99297 4.99297 0 0 1 3.419-4.743l6.265-2.089a1 1 0 0 1 .632 0ZM12 21.8897c1.681-.856 8-4.434 8-9.889V6.88373a3.00028 3.00028 0 0 0-.5666-1.75426 2.99978 2.99978 0 0 0-1.4854-1.09174L12 2.05473l-5.948 1.983A3.00003 3.00003 0 0 0 4 6.88373v5.11697c0 5.469 6.317 9.036 8 9.889Zm4.7071-11.1826c.3905-.3905.3905-1.02368 0-1.41421-.3905-.39052-1.0237-.39052-1.4142 0L11 13.5858l-2.29289-2.2929c-.39053-.3905-1.02369-.3905-1.41422 0-.39052.3905-.39052 1.0237 0 1.4142L9.58579 15c.78101.7811 2.04741.781 2.82841 0l4.2929-4.2929Z"
                       fill={
-                        Array [
-                          2,
-                        ]
+                        Object {
+                          "type": 2,
+                        }
                       }
                       fillRule={0}
                       propList={
diff --git a/ts/features/wallet/paypal/screen/PayPalPspUpdateScreen.tsx b/ts/features/wallet/paypal/screen/PayPalPspUpdateScreen.tsx
index 26e50c4bf1e..bff5048f837 100644
--- a/ts/features/wallet/paypal/screen/PayPalPspUpdateScreen.tsx
+++ b/ts/features/wallet/paypal/screen/PayPalPspUpdateScreen.tsx
@@ -1,4 +1,4 @@
-import { useNavigation } from "@react-navigation/native";
+import { Route, useRoute } from "@react-navigation/native";
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import React, { useEffect } from "react";
@@ -23,8 +23,7 @@ import { IOStyles } from "../../../../components/core/variables/IOStyles";
 import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
 import FooterWithButtons from "../../../../components/ui/FooterWithButtons";
 import I18n from "../../../../i18n";
-import { IOStackNavigationRouteProps } from "../../../../navigation/params/AppParamsList";
-import { WalletParamsList } from "../../../../navigation/params/WalletParamsList";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
 import {
   pspForPaymentV2,
   pspSelectedForPaymentV2
@@ -157,28 +156,27 @@ export type PayPalPspUpdateScreenNavigationParams = {
   idPayment: string;
   idWallet: number;
 };
-type Props = IOStackNavigationRouteProps<
-  WalletParamsList,
-  "WALLET_PAYPAL_UPDATE_PAYMENT_PSP"
->;
 
 /**
  * This screen is where the user updates the PSP that will be used for the payment
  * Only 1 psp can be selected
  */
-const PayPalPspUpdateScreen: React.FunctionComponent<Props> = (
-  props: Props
-) => {
+const PayPalPspUpdateScreen: React.FunctionComponent = () => {
+  const { idPayment, idWallet } =
+    useRoute<
+      Route<
+        "WALLET_PAYPAL_UPDATE_PAYMENT_PSP",
+        PayPalPspUpdateScreenNavigationParams
+      >
+    >().params;
   const locales = getLocales();
-  const navigation = useNavigation();
+  const navigation = useIONavigation();
   const dispatch = useDispatch();
   const pspList = useIOSelector(pspV2ListSelector);
-  const idPayment = props.route.params.idPayment;
-  const idWallet = props.route.params.idWallet;
   const searchPaypalPsp = () => {
     dispatch(pspForPaymentV2.request({ idPayment, idWallet }));
   };
-  useEffect(searchPaypalPsp, [dispatch]);
+  useEffect(searchPaypalPsp, [dispatch, idPayment, idWallet]);
 
   const goBack = () => navigation.goBack();
   return (
diff --git a/ts/features/wallet/paypal/screen/PaypalDetailScreen.tsx b/ts/features/wallet/paypal/screen/PaypalDetailScreen.tsx
index 583e6abd855..8389e2aaa99 100644
--- a/ts/features/wallet/paypal/screen/PaypalDetailScreen.tsx
+++ b/ts/features/wallet/paypal/screen/PaypalDetailScreen.tsx
@@ -3,15 +3,15 @@ import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import * as React from "react";
 import WorkunitGenericFailure from "../../../../components/error/WorkunitGenericFailure";
-import {
-  PaymentCardBig,
-  PaymentCardBigProps
-} from "../../../../components/ui/cards/payment/PaymentCardBig";
 import { useIOSelector } from "../../../../store/hooks";
 import { paypalSelector } from "../../../../store/reducers/wallet/wallets";
 import { getPaypalAccountEmail } from "../../../../utils/paypal";
 import BasePaymentMethodScreen from "../../common/BasePaymentMethodScreen";
 import PaymentMethodFeatures from "../../component/features/PaymentMethodFeatures";
+import {
+  PaymentCardBig,
+  PaymentCardBigProps
+} from "../../../payments/common/components/PaymentCardBig";
 
 /**
  * Detail screen for a PayPal payment method
diff --git a/ts/features/walletV3/barcode/navigation/navigator.tsx b/ts/features/walletV3/barcode/navigation/navigator.tsx
deleted file mode 100644
index fd594ab997e..00000000000
--- a/ts/features/walletV3/barcode/navigation/navigator.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { ParamListBase } from "@react-navigation/native";
-import {
-  createStackNavigator,
-  StackNavigationProp,
-  TransitionPresets
-} from "@react-navigation/stack";
-import React from "react";
-import { isGestureEnabled } from "../../../../utils/navigation";
-import { WalletBarcodeChoiceScreen } from "../screens/WalletBarcodeChoiceScreen";
-import { WalletBarcodeScanScreen } from "../screens/WalletBarcodeScanScreen";
-import { WalletBarcodeParamsList } from "./params";
-import { WalletBarcodeRoutes } from "./routes";
-
-const Stack = createStackNavigator<WalletBarcodeParamsList>();
-
-export const WalletBarcodeNavigator = () => (
-  <Stack.Navigator
-    initialRouteName={WalletBarcodeRoutes.WALLET_BARCODE_MAIN}
-    headerMode={"none"}
-    screenOptions={{ gestureEnabled: isGestureEnabled }}
-  >
-    <Stack.Screen
-      name={WalletBarcodeRoutes.WALLET_BARCODE_SCAN}
-      component={WalletBarcodeScanScreen}
-      options={{
-        ...TransitionPresets.ModalSlideFromBottomIOS,
-        gestureEnabled: isGestureEnabled
-      }}
-    />
-    <Stack.Screen
-      name={WalletBarcodeRoutes.WALLET_BARCODE_CHOICE}
-      component={WalletBarcodeChoiceScreen}
-      options={{
-        gestureEnabled: isGestureEnabled
-      }}
-    />
-  </Stack.Navigator>
-);
-
-export type WalletBarcodeStackNavigationProp<
-  ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
-> = StackNavigationProp<WalletBarcodeParamsList & ParamList, RouteName>;
-
-export type WalletBarcodeStackNavigation = WalletBarcodeStackNavigationProp<
-  WalletBarcodeParamsList,
-  keyof WalletBarcodeParamsList
->;
diff --git a/ts/features/walletV3/barcode/navigation/params.ts b/ts/features/walletV3/barcode/navigation/params.ts
deleted file mode 100644
index 11b34aede6a..00000000000
--- a/ts/features/walletV3/barcode/navigation/params.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { WalletBarcodeChoiceScreenParams } from "../screens/WalletBarcodeChoiceScreen";
-import { WalletBarcodeRoutes } from "./routes";
-
-export type WalletBarcodeParamsList = {
-  [WalletBarcodeRoutes.WALLET_BARCODE_MAIN]: undefined;
-  [WalletBarcodeRoutes.WALLET_BARCODE_SCAN]: undefined;
-  [WalletBarcodeRoutes.WALLET_BARCODE_CHOICE]: WalletBarcodeChoiceScreenParams;
-};
diff --git a/ts/features/walletV3/barcode/navigation/routes.ts b/ts/features/walletV3/barcode/navigation/routes.ts
deleted file mode 100644
index 1a798293608..00000000000
--- a/ts/features/walletV3/barcode/navigation/routes.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const WalletBarcodeRoutes = {
-  WALLET_BARCODE_MAIN: "WALLET_BARCODE_MAIN",
-  WALLET_BARCODE_SCAN: "WALLET_BARCODE_SCAN",
-  WALLET_BARCODE_CHOICE: "WALLET_BARCODE_CHOICE"
-} as const;
diff --git a/ts/features/walletV3/common/api/client.ts b/ts/features/walletV3/common/api/client.ts
deleted file mode 100644
index a17ce98e752..00000000000
--- a/ts/features/walletV3/common/api/client.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { createClient } from "../../../../../definitions/pagopa/walletv3/client";
-import { defaultRetryingFetch } from "../../../../utils/fetch";
-
-const createWalletClient = (baseUrl: string, bearerAuth: string) =>
-  createClient<"bearerAuth">({
-    baseUrl,
-    basePath: "/payment-wallet/v1",
-    fetchApi: defaultRetryingFetch(),
-    withDefaults: op => params => {
-      const paramsWithDefaults = {
-        ...params,
-        bearerAuth
-      } as Parameters<typeof op>[0];
-
-      return op(paramsWithDefaults);
-    }
-  });
-
-export type WalletClient = ReturnType<typeof createWalletClient>;
-
-export { createWalletClient };
diff --git a/ts/features/walletV3/common/saga/index.ts b/ts/features/walletV3/common/saga/index.ts
deleted file mode 100644
index cc9f9eb76a9..00000000000
--- a/ts/features/walletV3/common/saga/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { SagaIterator } from "redux-saga";
-import { fork, select } from "typed-redux-saga/macro";
-import { isPagoPATestEnabledSelector } from "../../../../store/reducers/persistedPreferences";
-import { watchWalletOnboardingSaga } from "../../onboarding/saga";
-import { createPaymentClient } from "../../payment/api/client";
-import { watchWalletPaymentSaga } from "../../payment/saga";
-import { createWalletClient } from "../api/client";
-import { walletApiBaseUrl, walletApiUatBaseUrl } from "../../../../config";
-import { watchWalletDetailsSaga } from "../../details/saga";
-import { watchWalletTransactionSaga } from "../../transaction/saga";
-
-export function* watchWalletSaga(walletToken: string): SagaIterator {
-  const isPagoPATestEnabled = yield* select(isPagoPATestEnabledSelector);
-
-  const walletBaseUrl = isPagoPATestEnabled
-    ? walletApiUatBaseUrl
-    : walletApiBaseUrl;
-
-  const walletClient = createWalletClient(walletBaseUrl, walletToken);
-  const paymentClient = createPaymentClient(walletBaseUrl, walletToken);
-
-  yield* fork(watchWalletOnboardingSaga, walletClient);
-  yield* fork(watchWalletPaymentSaga, walletClient, paymentClient);
-  yield* fork(watchWalletDetailsSaga, walletClient);
-  yield* fork(watchWalletTransactionSaga, walletClient);
-}
diff --git a/ts/features/walletV3/common/store/actions/index.ts b/ts/features/walletV3/common/store/actions/index.ts
deleted file mode 100644
index fde34b55063..00000000000
--- a/ts/features/walletV3/common/store/actions/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { WalletDetailsActions } from "../../../details/store/actions";
-import { WalletOnboardingActions } from "../../../onboarding/store/actions";
-import { WalletPaymentActions } from "../../../payment/store/actions";
-import { WalletTransactionActions } from "../../../transaction/store/actions";
-
-export type WalletActions =
-  | WalletOnboardingActions
-  | WalletDetailsActions
-  | WalletPaymentActions
-  | WalletTransactionActions;
diff --git a/ts/features/walletV3/common/store/reducers/index.ts b/ts/features/walletV3/common/store/reducers/index.ts
deleted file mode 100644
index 071b27a0448..00000000000
--- a/ts/features/walletV3/common/store/reducers/index.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { combineReducers } from "redux";
-import walletOnboardingReducer, {
-  WalletOnboardingState
-} from "../../../onboarding/store";
-import walletPaymentReducer, {
-  WalletPaymentState
-} from "../../../payment/store/reducers";
-import walletDetailsReducer, {
-  WalletDetailsState
-} from "../../../details/store";
-import walletTransactionReducer, {
-  WalletTransactionState
-} from "../../../transaction/store";
-
-export type WalletState = {
-  onboarding: WalletOnboardingState;
-  details: WalletDetailsState;
-  payment: WalletPaymentState;
-  transaction: WalletTransactionState;
-};
-
-const walletReducer = combineReducers({
-  onboarding: walletOnboardingReducer,
-  details: walletDetailsReducer,
-  payment: walletPaymentReducer,
-  transaction: walletTransactionReducer
-});
-
-export default walletReducer;
diff --git a/ts/features/walletV3/details/components/WalletDetailsPaymentMethodScreen.tsx b/ts/features/walletV3/details/components/WalletDetailsPaymentMethodScreen.tsx
deleted file mode 100644
index 626b16227f2..00000000000
--- a/ts/features/walletV3/details/components/WalletDetailsPaymentMethodScreen.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-import * as pot from "@pagopa/ts-commons/lib/pot";
-import { useNavigation } from "@react-navigation/native";
-import * as React from "react";
-import {
-  Alert,
-  GestureResponderEvent,
-  Platform,
-  StyleSheet,
-  View
-} from "react-native";
-import { ScrollView } from "react-native-gesture-handler";
-import {
-  IOColors,
-  VSpacer,
-  IOSpacingScale,
-  ListItemAction,
-  IOStyles
-} from "@pagopa/io-app-design-system";
-import I18n from "../../../../i18n";
-import { emptyContextualHelp } from "../../../../utils/emptyContextualHelp";
-import { IOToast } from "../../../../components/Toast";
-import { useIODispatch, useIOSelector } from "../../../../store/hooks";
-import BaseScreenComponent from "../../../../components/screens/BaseScreenComponent";
-import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay";
-import FocusAwareStatusBar from "../../../../components/ui/FocusAwareStatusBar";
-import { WalletInfo } from "../../../../../definitions/pagopa/walletv3/WalletInfo";
-import { isDesignSystemEnabledSelector } from "../../../../store/reducers/persistedPreferences";
-import { walletDetailsInstrumentPotSelector } from "../store";
-import { walletDetailsDeleteInstrument } from "../store/actions";
-
-type Props = {
-  paymentMethod?: WalletInfo;
-  card: React.ReactNode;
-  content: React.ReactNode;
-  headerTitle?: string;
-};
-
-// ----------------------------- component -----------------------------------
-
-/**
- * Base layout for payment methods screen & legacy delete handling
- */
-const WalletDetailsPaymentMethodScreen = (props: Props) => {
-  const { card, content, paymentMethod } = props;
-  const hasErrorDelete = pot.isError(
-    useIOSelector(walletDetailsInstrumentPotSelector)
-  );
-  const [isLoadingDelete, setIsLoadingDelete] = React.useState(false);
-  const dispatch = useIODispatch();
-  const isDSenabled = useIOSelector(isDesignSystemEnabledSelector);
-  const blueHeaderColor = isDSenabled ? IOColors["blueIO-600"] : IOColors.blue;
-
-  const navigation = useNavigation();
-
-  const deleteWallet = (walletId: string) =>
-    dispatch(
-      walletDetailsDeleteInstrument.request({
-        walletId,
-        onSuccess: _ => {
-          IOToast.success(I18n.t("wallet.delete.successful"));
-          navigation.goBack();
-        },
-        onFailure: _ => {
-          IOToast.error(I18n.t("wallet.delete.failed"));
-        }
-      })
-    );
-
-  React.useEffect(() => {
-    if (hasErrorDelete) {
-      setIsLoadingDelete(false);
-    }
-  }, [hasErrorDelete]);
-
-  const onDeleteMethod = () => {
-    // Create a native Alert to confirm or cancel the delete action
-    Alert.alert(
-      I18n.t("wallet.newRemove.title"),
-      I18n.t("wallet.newRemove.body"),
-      [
-        {
-          text:
-            Platform.OS === "ios"
-              ? I18n.t(`wallet.delete.ios.confirm`)
-              : I18n.t(`wallet.delete.android.confirm`),
-          style: "destructive",
-          onPress: () => {
-            if (paymentMethod) {
-              deleteWallet(paymentMethod.walletId);
-            }
-          }
-        },
-        {
-          text: I18n.t("global.buttons.cancel"),
-          style: "default"
-        }
-      ],
-      { cancelable: false }
-    );
-  };
-
-  if (isLoadingDelete) {
-    return (
-      <LoadingSpinnerOverlay
-        isLoading={true}
-        loadingCaption={I18n.t("cardComponent.deleteLoading")}
-      />
-    );
-  }
-
-  return (
-    <BaseScreenComponent
-      contextualHelp={emptyContextualHelp}
-      headerTitle={props.headerTitle ?? ""}
-      faqCategories={["wallet_methods"]}
-      goBack={true}
-      titleColor="white"
-      dark={true}
-      headerBackgroundColor={blueHeaderColor}
-    >
-      <FocusAwareStatusBar barStyle="light-content" />
-      <ScrollView>
-        <View style={[styles.blueHeader, { backgroundColor: blueHeaderColor }]}>
-          <View style={styles.cardContainer}>{card}</View>
-        </View>
-        <VSpacer size={24} />
-        <View style={IOStyles.horizontalContentPadding}>
-          {content}
-          <VSpacer size={24} />
-          {paymentMethod && <DeleteButton onPress={onDeleteMethod} />}
-        </View>
-        <VSpacer size={40} />
-      </ScrollView>
-    </BaseScreenComponent>
-  );
-};
-
-// ----------------------------- utils -----------------------------------
-
-const DeleteButton = ({
-  onPress
-}: {
-  onPress: (event: GestureResponderEvent) => void;
-}) => (
-  <ListItemAction
-    label={I18n.t("cardComponent.removeCta")}
-    onPress={onPress}
-    accessibilityLabel={I18n.t("cardComponent.removeCta")}
-    icon="trashcan"
-    variant="danger"
-  />
-);
-
-// ----------------------------- styles -----------------------------------
-
-const cardContainerHorizontalSpacing: IOSpacingScale = 16;
-
-const styles = StyleSheet.create({
-  cardContainer: {
-    paddingHorizontal: cardContainerHorizontalSpacing,
-    alignItems: "center",
-    marginBottom: "-15%",
-    aspectRatio: 1.7,
-    width: "100%"
-  },
-  blueHeader: {
-    paddingTop: "75%",
-    marginTop: "-75%",
-    marginBottom: "15%"
-  }
-});
-
-export default WalletDetailsPaymentMethodScreen;
diff --git a/ts/features/walletV3/details/navigation/navigator.tsx b/ts/features/walletV3/details/navigation/navigator.tsx
deleted file mode 100644
index 49408d21d44..00000000000
--- a/ts/features/walletV3/details/navigation/navigator.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { ParamListBase } from "@react-navigation/native";
-import {
-  createStackNavigator,
-  StackNavigationProp
-} from "@react-navigation/stack";
-import React from "react";
-import { isGestureEnabled } from "../../../../utils/navigation";
-import WalletDetailsScreen, {
-  WalletDetailsScreenNavigationParams
-} from "../screens/WalletDetailsScreen";
-
-export const WalletDetailsRoutes = {
-  WALLET_DETAILS_MAIN: "WALLET_DETAILS_MAIN",
-  WALLET_DETAILS_SCREEN: "WALLET_DETAILS_SCREEN"
-} as const;
-
-export type WalletDetailsParamsList = {
-  [WalletDetailsRoutes.WALLET_DETAILS_MAIN]: undefined;
-  [WalletDetailsRoutes.WALLET_DETAILS_SCREEN]: WalletDetailsScreenNavigationParams;
-};
-
-const Stack = createStackNavigator<WalletDetailsParamsList>();
-
-export const WalletDetailsNavigator = () => (
-  <Stack.Navigator
-    initialRouteName={WalletDetailsRoutes.WALLET_DETAILS_SCREEN}
-    headerMode={"none"}
-    screenOptions={{ gestureEnabled: isGestureEnabled }}
-  >
-    <Stack.Screen
-      name={WalletDetailsRoutes.WALLET_DETAILS_SCREEN}
-      component={WalletDetailsScreen}
-      options={{ gestureEnabled: false }}
-    />
-  </Stack.Navigator>
-);
-
-export type WalletDetailsStackNavigationProp<
-  ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
-> = StackNavigationProp<WalletDetailsParamsList & ParamList, RouteName>;
-
-export type WalletDetailsStackNavigation = WalletDetailsStackNavigationProp<
-  WalletDetailsParamsList,
-  keyof WalletDetailsParamsList
->;
diff --git a/ts/features/walletV3/details/saga/handleTogglePagoPaCapability.ts b/ts/features/walletV3/details/saga/handleTogglePagoPaCapability.ts
deleted file mode 100644
index c64a9f66823..00000000000
--- a/ts/features/walletV3/details/saga/handleTogglePagoPaCapability.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { call, put, select } from "typed-redux-saga/macro";
-import * as E from "fp-ts/lib/Either";
-import { ActionType } from "typesafe-actions";
-import { SagaCallReturnType } from "../../../../types/utils";
-import {
-  walletDetailsGetInstrument,
-  walletDetailsPagoPaCapabilityToggle
-} from "../store/actions";
-import { readablePrivacyReport } from "../../../../utils/reporters";
-import { getGenericError, getNetworkError } from "../../../../utils/errors";
-import { WalletClient } from "../../common/api/client";
-import { withRefreshApiCall } from "../../../fastLogin/saga/utils";
-import { walletDetailsInstrumentSelector } from "../store";
-import { ServiceNameEnum } from "../../../../../definitions/pagopa/walletv3/ServiceName";
-import { Service } from "../../../../../definitions/pagopa/walletv3/Service";
-import { ServiceStatusEnum } from "../../../../../definitions/pagopa/walletv3/ServiceStatus";
-import { WalletService } from "../../../../../definitions/pagopa/walletv3/WalletService";
-
-/**
- * Handle the remote call to toggle the Wallet pagopa capability
- */
-export function* handleTogglePagoPaCapability(
-  updateWalletServicesById: WalletClient["updateWalletServicesById"],
-  action: ActionType<(typeof walletDetailsPagoPaCapabilityToggle)["request"]>
-) {
-  try {
-    const walletDetails = yield* select(walletDetailsInstrumentSelector);
-    if (!walletDetails) {
-      throw new Error("walletDetails is undefined");
-    }
-    const updatedServices = walletDetails.services.map(service => ({
-      ...service,
-      status: updatePagoPaServiceStatus(service)
-    }));
-
-    const updateWalletPagoPaServicesRequest = updateWalletServicesById({
-      walletId: action.payload.walletId,
-      body: {
-        services: updatedServices as Array<WalletService>
-      }
-    });
-    const updateWalletResult = (yield* call(
-      withRefreshApiCall,
-      updateWalletPagoPaServicesRequest,
-      action
-    )) as unknown as SagaCallReturnType<typeof updateWalletServicesById>;
-    if (E.isRight(updateWalletResult)) {
-      if (updateWalletResult.right.status === 204) {
-        // handled success
-        const successAction = walletDetailsPagoPaCapabilityToggle.success();
-        yield* put(successAction);
-        if (action.payload.onSuccess) {
-          action.payload.onSuccess(successAction);
-        }
-        return;
-      }
-      // not handled error codes
-      const failureAction = walletDetailsPagoPaCapabilityToggle.failure({
-        ...getGenericError(
-          new Error(`response status code ${updateWalletResult.right.status}`)
-        )
-      });
-      yield* put(failureAction);
-      if (action.payload.onFailure) {
-        action.payload.onFailure(failureAction);
-      }
-    } else {
-      // cannot decode response
-      const failureAction = walletDetailsPagoPaCapabilityToggle.failure({
-        ...getGenericError(
-          new Error(readablePrivacyReport(updateWalletResult.left))
-        )
-      });
-      yield* put(failureAction);
-      if (action.payload.onFailure) {
-        action.payload.onFailure(failureAction);
-      }
-    }
-  } catch (e) {
-    yield* put(walletDetailsGetInstrument.failure({ ...getNetworkError(e) }));
-  }
-}
-
-const updatePagoPaServiceStatus = (
-  service: Service
-): ServiceStatusEnum | undefined => {
-  if (service.name === ServiceNameEnum.PAGOPA) {
-    return service.status === ServiceStatusEnum.DISABLED
-      ? ServiceStatusEnum.ENABLED
-      : ServiceStatusEnum.DISABLED;
-  }
-  return service.status;
-};
diff --git a/ts/features/walletV3/details/screens/WalletDetailsScreen.tsx b/ts/features/walletV3/details/screens/WalletDetailsScreen.tsx
deleted file mode 100644
index d371306e44b..00000000000
--- a/ts/features/walletV3/details/screens/WalletDetailsScreen.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import * as React from "react";
-import { RouteProp, useNavigation, useRoute } from "@react-navigation/native";
-import { useDispatch } from "react-redux";
-import { IOLogoPaymentExtType } from "@pagopa/io-app-design-system";
-
-import * as O from "fp-ts/lib/Option";
-import { pipe } from "fp-ts/lib/function";
-import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay";
-import { PaymentCardBig } from "../../../../components/ui/cards/payment/PaymentCardBig";
-import { useIOSelector } from "../../../../store/hooks";
-import { idPayAreInitiativesFromInstrumentLoadingSelector } from "../../../idpay/wallet/store/reducers";
-import { capitalize } from "../../../../utils/strings";
-import WalletDetailsPaymentMethodScreen from "../components/WalletDetailsPaymentMethodScreen";
-import WalletDetailsPaymentMethodFeatures from "../../common/components/WalletDetailsPaymentMethodFeatures";
-import { WalletDetailsParamsList } from "../navigation/navigator";
-import {
-  isErrorWalletInstrumentSelector,
-  isLoadingWalletInstrumentSelector,
-  walletDetailsInstrumentSelector
-} from "../store";
-import { walletDetailsGetInstrument } from "../store/actions";
-import { UIWalletInfoDetails } from "../types/UIWalletInfoDetails";
-import { getDateFromExpiryDate } from "../../../../utils/dates";
-import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
-import I18n from "../../../../i18n";
-import {
-  AppParamsList,
-  IOStackNavigationProp
-} from "../../../../navigation/params/AppParamsList";
-
-export type WalletDetailsScreenNavigationParams = Readonly<{
-  walletId: string;
-}>;
-
-export type WalletDetailsScreenRouteProps = RouteProp<
-  WalletDetailsParamsList,
-  "WALLET_DETAILS_SCREEN"
->;
-
-const generateCardComponent = (details: UIWalletInfoDetails) => {
-  if (details.maskedEmail !== undefined) {
-    return (
-      <PaymentCardBig
-        testID="CreditCardComponent"
-        cardType="PAYPAL"
-        holderEmail={details.maskedEmail}
-      />
-    );
-  }
-
-  return (
-    <PaymentCardBig
-      testID="CreditCardComponent"
-      cardType="CREDIT"
-      expirationDate={getDateFromExpiryDate(details.expiryDate)}
-      holderName={details.holder || ""}
-      hpan={details.maskedPan || ""}
-      cardIcon={details.brand?.toLowerCase() as IOLogoPaymentExtType}
-    />
-  );
-};
-
-const generateCardHeaderTitle = (details?: UIWalletInfoDetails) => {
-  if (details?.maskedPan !== undefined) {
-    const capitalizedCardCircuit = capitalize(
-      details.brand?.toLowerCase() ?? ""
-    );
-    return `${capitalizedCardCircuit} ••${details.maskedPan}`;
-  }
-
-  return "";
-};
-
-/**
- * Detail screen for a credit card
- */
-const WalletDetailsScreen = () => {
-  const route = useRoute<WalletDetailsScreenRouteProps>();
-  const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
-  const dispatch = useDispatch();
-  const { walletId } = route.params;
-  const walletDetails = useIOSelector(walletDetailsInstrumentSelector);
-  const isLoadingWalletDetails = useIOSelector(
-    isLoadingWalletInstrumentSelector
-  );
-  const isErrorWalletDetails = useIOSelector(isErrorWalletInstrumentSelector);
-  const areIdpayInitiativesLoading = useIOSelector(
-    idPayAreInitiativesFromInstrumentLoadingSelector
-  );
-
-  const WalletDetailsGenericFailure = () => (
-    <OperationResultScreenContent
-      title={I18n.t("wallet.methodDetails.error.title")}
-      subtitle={I18n.t("wallet.methodDetails.error.subtitle")}
-      pictogram="umbrellaNew"
-      action={{
-        label: I18n.t("wallet.methodDetails.error.primaryButton"),
-        accessibilityLabel: I18n.t("wallet.methodDetails.error.primaryButton"),
-        onPress: () => navigation.pop()
-      }}
-      secondaryAction={{
-        label: I18n.t("wallet.methodDetails.error.secondaryButton"),
-        accessibilityLabel: I18n.t(
-          "wallet.methodDetails.error.secondaryButton"
-        ),
-        onPress: handleOnRetry
-      }}
-    />
-  );
-
-  const handleOnRetry = () => {
-    dispatch(walletDetailsGetInstrument.request({ walletId }));
-  };
-
-  React.useEffect(() => {
-    dispatch(walletDetailsGetInstrument.request({ walletId }));
-  }, [walletId, dispatch]);
-
-  if (isLoadingWalletDetails) {
-    return (
-      <WalletDetailsPaymentMethodScreen
-        paymentMethod={walletDetails}
-        card={<PaymentCardBig testID="CreditCardComponent" isLoading={true} />}
-        content={<></>}
-      />
-    );
-  }
-
-  if (walletDetails !== undefined) {
-    const cardComponent = pipe(
-      walletDetails.details,
-      O.fromNullable,
-      O.fold(
-        () => <PaymentCardBig testID="CreditCardComponent" isLoading={true} />,
-        details => generateCardComponent(details)
-      )
-    );
-
-    return (
-      <LoadingSpinnerOverlay
-        isLoading={areIdpayInitiativesLoading}
-        loadingOpacity={100}
-      >
-        <WalletDetailsPaymentMethodScreen
-          paymentMethod={walletDetails}
-          card={cardComponent}
-          content={
-            <WalletDetailsPaymentMethodFeatures paymentMethod={walletDetails} />
-          }
-          headerTitle={generateCardHeaderTitle(walletDetails.details)}
-        />
-      </LoadingSpinnerOverlay>
-    );
-  } else if (isErrorWalletDetails) {
-    return <WalletDetailsGenericFailure />;
-  }
-  return null;
-};
-
-export default WalletDetailsScreen;
diff --git a/ts/features/walletV3/details/store/actions/index.ts b/ts/features/walletV3/details/store/actions/index.ts
deleted file mode 100644
index 5396b3a70ce..00000000000
--- a/ts/features/walletV3/details/store/actions/index.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { ActionType, createAsyncAction } from "typesafe-actions";
-import { NetworkError } from "../../../../../utils/errors";
-import { WalletInfo } from "../../../../../../definitions/pagopa/walletv3/WalletInfo";
-
-export type WalletDetailsGetInstrumentPayload = {
-  walletId: string;
-};
-
-export type WalletDetailsDeleteinstrumentPayload = {
-  walletId: string;
-  onSuccess?: (
-    action: ActionType<typeof walletDetailsDeleteInstrument.success>
-  ) => void;
-  onFailure?: (
-    action: ActionType<typeof walletDetailsDeleteInstrument.failure>
-  ) => void;
-};
-
-export const walletDetailsGetInstrument = createAsyncAction(
-  "WALLET_DETAILS_GET_INSTRUMENT_REQUEST",
-  "WALLET_DETAILS_GET_INSTRUMENT_SUCCESS",
-  "WALLET_DETAILS_GET_INSTRUMENT_FAILURE",
-  "WALLET_DETAILS_GET_INSTRUMENT_CANCEL"
-)<WalletDetailsGetInstrumentPayload, WalletInfo, NetworkError, void>();
-
-export const walletDetailsDeleteInstrument = createAsyncAction(
-  "WALLET_DETAILS_DELETE_INSTRUMENT_REQUEST",
-  "WALLET_DETAILS_DELETE_INSTRUMENT_SUCCESS",
-  "WALLET_DETAILS_DELETE_INSTRUMENT_FAILURE",
-  "WALLET_DETAILS_DELETE_INSTRUMENT_CANCEL"
-)<WalletDetailsDeleteinstrumentPayload, void, NetworkError, void>();
-
-export type WalletDetailsPagoPaCapabilityTogglePayload = {
-  walletId: string;
-  onSuccess?: (
-    action: ActionType<typeof walletDetailsPagoPaCapabilityToggle.success>
-  ) => void;
-  onFailure?: (
-    action: ActionType<typeof walletDetailsPagoPaCapabilityToggle.failure>
-  ) => void;
-};
-
-export const walletDetailsPagoPaCapabilityToggle = createAsyncAction(
-  "WALLET_DETAILS_PAGOPA_CAPABILITY_TOGGLE_REQUEST",
-  "WALLET_DETAILS_PAGOPA_CAPABILITY_TOGGLE_SUCCESS",
-  "WALLET_DETAILS_PAGOPA_CAPABILITY_TOGGLE_FAILURE",
-  "WALLET_DETAILS_PAGOPA_CAPABILITY_TOGGLE_CANCEL"
-)<WalletDetailsPagoPaCapabilityTogglePayload, void, NetworkError, void>();
-
-export type WalletDetailsActions =
-  | ActionType<typeof walletDetailsGetInstrument>
-  | ActionType<typeof walletDetailsDeleteInstrument>
-  | ActionType<typeof walletDetailsPagoPaCapabilityToggle>;
diff --git a/ts/features/walletV3/details/store/index.ts b/ts/features/walletV3/details/store/index.ts
deleted file mode 100644
index abdb79fae02..00000000000
--- a/ts/features/walletV3/details/store/index.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import * as pot from "@pagopa/ts-commons/lib/pot";
-import * as _ from "lodash";
-import { createSelector } from "reselect";
-import { getType } from "typesafe-actions";
-import { Action } from "../../../../store/actions/types";
-import { NetworkError } from "../../../../utils/errors";
-import { GlobalState } from "../../../../store/reducers/types";
-
-import { ServiceNameEnum } from "../../../../../definitions/pagopa/walletv3/ServiceName";
-import { WalletInfo } from "../../../../../definitions/pagopa/walletv3/WalletInfo";
-import { ServiceStatusEnum } from "../../../../../definitions/pagopa/walletv3/ServiceStatus";
-import {
-  walletDetailsGetInstrument,
-  walletDetailsPagoPaCapabilityToggle
-} from "./actions";
-
-export type WalletDetailsState = {
-  walletDetails: pot.Pot<WalletInfo, NetworkError>;
-};
-
-const INITIAL_STATE: WalletDetailsState = {
-  walletDetails: pot.noneLoading
-};
-
-const walletDetailsReducer = (
-  state: WalletDetailsState = INITIAL_STATE,
-  action: Action
-): WalletDetailsState => {
-  switch (action.type) {
-    // GET WALLET DETAILS
-    case getType(walletDetailsGetInstrument.request):
-      return {
-        ...state,
-        walletDetails: pot.toLoading(pot.none)
-      };
-    case getType(walletDetailsGetInstrument.success):
-      return {
-        ...state,
-        walletDetails: pot.some(action.payload)
-      };
-    case getType(walletDetailsGetInstrument.failure):
-      return {
-        ...state,
-        walletDetails: pot.toError(state.walletDetails, action.payload)
-      };
-    case getType(walletDetailsGetInstrument.cancel):
-      return {
-        ...state,
-        walletDetails: pot.none
-      };
-    // TOGGLE PAGOPA CAPABILITY
-    case getType(walletDetailsPagoPaCapabilityToggle.success):
-      const walletDetails = pot.getOrElse(
-        state.walletDetails,
-        {} as WalletInfo
-      );
-      const updatedServices = walletDetails.services.map(service => {
-        if (service.name === ServiceNameEnum.PAGOPA) {
-          return {
-            ...service,
-            status:
-              service.status === ServiceStatusEnum.ENABLED
-                ? ServiceStatusEnum.DISABLED
-                : ServiceStatusEnum.ENABLED
-          };
-        }
-        return service;
-      });
-      return {
-        ...state,
-        walletDetails: pot.some({
-          ...walletDetails,
-          services: updatedServices
-        })
-      };
-  }
-  return state;
-};
-
-const walletDetailsSelector = (state: GlobalState) =>
-  state.features.wallet.details;
-
-export const walletDetailsInstrumentPotSelector = createSelector(
-  walletDetailsSelector,
-  details => details.walletDetails
-);
-
-export const walletDetailsInstrumentSelector = createSelector(
-  walletDetailsInstrumentPotSelector,
-  details => pot.toUndefined(details)
-);
-
-export const isLoadingWalletInstrumentSelector = createSelector(
-  walletDetailsInstrumentPotSelector,
-  walletInstrument => pot.isLoading(walletInstrument)
-);
-
-export const isErrorWalletInstrumentSelector = createSelector(
-  walletDetailsInstrumentPotSelector,
-  walletInstrument => pot.isError(walletInstrument)
-);
-
-export default walletDetailsReducer;
diff --git a/ts/features/walletV3/onboarding/components/WalletOnboardingError.tsx b/ts/features/walletV3/onboarding/components/WalletOnboardingError.tsx
deleted file mode 100644
index 5c2af8dd381..00000000000
--- a/ts/features/walletV3/onboarding/components/WalletOnboardingError.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-/* eslint-disable functional/immutable-data */
-import * as React from "react";
-
-import { OnboardingOutcomeEnum, OnboardingOutcomeFailure } from "../types";
-import I18n from "../../../../i18n";
-import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
-import { openWebUrl } from "../../../../utils/url";
-import {
-  ONBOARDING_FAQ_ENABLE_3DS,
-  ONBOARDING_OUTCOME_ERROR_PICTOGRAM
-} from "../utils";
-
-type WalletOnboardingErrorProps = {
-  onClose: () => void;
-  outcome: OnboardingOutcomeFailure;
-};
-
-type OnboardingErrorEnumKey = Exclude<
-  keyof typeof OnboardingOutcomeEnum,
-  "SUCCESS"
->;
-
-/**
- * Component used to show an error message when the wallet onboarding fails with a specific outcome
- */
-const WalletOnboardingError = ({
-  onClose,
-  outcome
-}: WalletOnboardingErrorProps) => {
-  const handleOnPressPrimaryAction = () => {
-    onClose();
-  };
-  const handleOnPressSecondaryAction = () => {
-    switch (outcome) {
-      case OnboardingOutcomeEnum.AUTH_ERROR:
-        openWebUrl(ONBOARDING_FAQ_ENABLE_3DS);
-    }
-  };
-
-  const outcomeEnumKey = Object.keys(OnboardingOutcomeEnum)[
-    Object.values(OnboardingOutcomeEnum).indexOf(
-      outcome as OnboardingOutcomeEnum
-    )
-  ] as OnboardingErrorEnumKey;
-
-  const renderSecondaryAction = () => {
-    switch (outcome) {
-      case OnboardingOutcomeEnum.AUTH_ERROR:
-        return {
-          label: I18n.t(`wallet.onboarding.failure.AUTH_ERROR.secondaryAction`),
-          accessibilityLabel: I18n.t(
-            `wallet.onboarding.failure.AUTH_ERROR.secondaryAction`
-          ),
-          onPress: handleOnPressSecondaryAction
-        };
-    }
-    return undefined;
-  };
-
-  return (
-    <OperationResultScreenContent
-      title={I18n.t(`wallet.onboarding.failure.${outcomeEnumKey}.title`)}
-      subtitle={I18n.t(`wallet.onboarding.failure.${outcomeEnumKey}.subtitle`)}
-      pictogram={ONBOARDING_OUTCOME_ERROR_PICTOGRAM[outcome]}
-      action={{
-        label: I18n.t(
-          `wallet.onboarding.failure.${outcomeEnumKey}.primaryAction`
-        ),
-        accessibilityLabel: I18n.t(
-          `wallet.onboarding.failure.${outcomeEnumKey}.primaryAction`
-        ),
-        onPress: handleOnPressPrimaryAction
-      }}
-      secondaryAction={renderSecondaryAction()}
-    />
-  );
-};
-
-export default WalletOnboardingError;
diff --git a/ts/features/walletV3/onboarding/components/WalletOnboardingSuccess.tsx b/ts/features/walletV3/onboarding/components/WalletOnboardingSuccess.tsx
deleted file mode 100644
index 299c36832bf..00000000000
--- a/ts/features/walletV3/onboarding/components/WalletOnboardingSuccess.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/* eslint-disable functional/immutable-data */
-import * as React from "react";
-import { SafeAreaView, View } from "react-native";
-import { ButtonSolid, Pictogram } from "@pagopa/io-app-design-system";
-import { IOStyles } from "../../../../components/core/variables/IOStyles";
-import { InfoScreenComponent } from "../../../../components/infoScreen/InfoScreenComponent";
-import I18n from "../../../../i18n";
-
-type WalletOnboardingSuccessProps = {
-  onContinue: () => void;
-};
-
-/**
- * Component that shows a success message after the wallet onboarding process is completed
- * TODO: Define the desired design of this component
- */
-const WalletOnboardingSuccess = ({
-  onContinue
-}: WalletOnboardingSuccessProps) => (
-  <SafeAreaView style={IOStyles.flex}>
-    <InfoScreenComponent
-      image={<Pictogram name="success" size={120} />}
-      title={I18n.t("wallet.onboarding.success.title")}
-      body={<ContinueButton onPress={onContinue} />}
-    />
-  </SafeAreaView>
-);
-
-type ContinueButtonProps = {
-  onPress: () => void;
-};
-
-const ContinueButton = ({ onPress }: ContinueButtonProps) => (
-  <View style={IOStyles.alignCenter}>
-    <ButtonSolid
-      accessibilityLabel={I18n.t("wallet.onboarding.success.continueButton")}
-      label={I18n.t("wallet.onboarding.success.continueButton")}
-      onPress={onPress}
-    />
-  </View>
-);
-
-export default WalletOnboardingSuccess;
diff --git a/ts/features/walletV3/onboarding/hooks/useWalletOnboardingWebView.tsx b/ts/features/walletV3/onboarding/hooks/useWalletOnboardingWebView.tsx
deleted file mode 100644
index 17edc36894e..00000000000
--- a/ts/features/walletV3/onboarding/hooks/useWalletOnboardingWebView.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import * as React from "react";
-import { pipe } from "fp-ts/lib/function";
-import * as O from "fp-ts/lib/Option";
-import * as pot from "@pagopa/ts-commons/lib/pot";
-import { openAuthenticationSession } from "@pagopa/io-react-native-login-utils";
-import {
-  WebViewErrorEvent,
-  WebViewHttpErrorEvent
-} from "react-native-webview/lib/WebViewTypes";
-
-import { OnboardingOutcomeFailure, OnboardingOutcomeSuccess } from "../types";
-import { NetworkError } from "../../../../utils/errors";
-import { WalletCreateResponse } from "../../../../../definitions/pagopa/walletv3/WalletCreateResponse";
-import { useIODispatch, useIOSelector } from "../../../../store/hooks";
-import { walletOnboardingStartupSelector } from "../store";
-import { walletStartOnboarding } from "../store/actions";
-import {
-  ONBOARDING_CALLBACK_URL_SCHEMA,
-  extractOnboardingResult
-} from "../utils";
-
-/**
- * Function that extracts the uri to be loaded in the webview from the onboarding startup result pot
- */
-const extractOnboardingWebViewUri = (
-  onboardingStartupResult: pot.Pot<WalletCreateResponse, NetworkError>
-) =>
-  pot.getOrElse(
-    pot.map(onboardingStartupResult, result => encodeURI(result.redirectUrl)),
-    ""
-  );
-
-export type WalletOnboardingWebViewProps = {
-  onSuccess?: (outcome: OnboardingOutcomeSuccess, walletId: string) => void;
-  onFailure?: (outcome: OnboardingOutcomeFailure) => void;
-  onError?: (
-    error?: WebViewErrorEvent | WebViewHttpErrorEvent | NetworkError
-  ) => void;
-  onDismiss?: () => void;
-};
-
-/**
- * This hook handles the onboarding webview flow and returns a function to start the onboarding
- * @param onSuccess callback called when the onboarding is successful
- * @param onFailure callback called when the onboarding is failed
- * @param onError callback called when an error occurs
- */
-export const useWalletOnboardingWebView = (
-  props: WalletOnboardingWebViewProps
-) => {
-  const { onSuccess, onError, onFailure, onDismiss } = props;
-  const onboardingStartupResult = useIOSelector(
-    walletOnboardingStartupSelector
-  );
-  const dispatch = useIODispatch();
-
-  const handleResultOnboarding = React.useCallback(
-    (url: string) => {
-      pipe(
-        url,
-        extractOnboardingResult,
-        O.fromNullable,
-        O.map(result => {
-          if (result.status === "SUCCESS") {
-            onSuccess?.(
-              result.outcome as OnboardingOutcomeSuccess,
-              result.walletId
-            );
-          } else if (result.status === "FAILURE") {
-            onFailure?.(result.outcome as OnboardingOutcomeFailure);
-          }
-        })
-      );
-    },
-    [onSuccess, onFailure]
-  );
-
-  const openOnboardingWebView = React.useCallback(async () => {
-    try {
-      const resultUrl = await openAuthenticationSession(
-        extractOnboardingWebViewUri(onboardingStartupResult),
-        ONBOARDING_CALLBACK_URL_SCHEMA
-      );
-      handleResultOnboarding(resultUrl);
-    } catch (err) {
-      onDismiss?.();
-    }
-  }, [onboardingStartupResult, handleResultOnboarding, onDismiss]);
-
-  React.useEffect(
-    () => () => {
-      dispatch(walletStartOnboarding.cancel());
-    },
-    [dispatch]
-  );
-
-  React.useEffect(() => {
-    if (pot.isError(onboardingStartupResult) && onError) {
-      onError(onboardingStartupResult.error);
-    }
-    if (
-      !pot.isError(onboardingStartupResult) &&
-      !pot.isLoading(onboardingStartupResult)
-    ) {
-      void openOnboardingWebView();
-    }
-  }, [onboardingStartupResult, openOnboardingWebView, onError]);
-
-  const startOnboarding = (paymentMethodId: string) => {
-    if (!pot.isLoading(onboardingStartupResult)) {
-      dispatch(walletStartOnboarding.request({ paymentMethodId }));
-    }
-  };
-
-  return {
-    startOnboarding
-  };
-};
diff --git a/ts/features/walletV3/onboarding/navigation/navigator.tsx b/ts/features/walletV3/onboarding/navigation/navigator.tsx
deleted file mode 100644
index dc31d7fb89e..00000000000
--- a/ts/features/walletV3/onboarding/navigation/navigator.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { ParamListBase } from "@react-navigation/native";
-import {
-  createStackNavigator,
-  StackNavigationProp
-} from "@react-navigation/stack";
-import React from "react";
-import { isGestureEnabled } from "../../../../utils/navigation";
-import WalletOnboardingStartScreen, {
-  WalletOnboardingFeedbackScreenParams
-} from "../screens/WalletOnboardingFeedbackScreen";
-import WalletOnboardingSelectPaymentMethodScreen from "../screens/WalletOnboardingSelectPaymentMethodScreen";
-
-export const WalletOnboardingRoutes = {
-  WALLET_ONBOARDING_MAIN: "WALLET_ONBOARDING_MAIN",
-  WALLET_ONBOARDING_SELECT_PAYMENT_METHOD:
-    "WALLET_ONBOARDING_SELECT_PAYMENT_METHOD",
-  WALLET_ONBOARDING_RESULT_FEEDBACK: "WALLET_ONBOARDING_RESULT_FEEDBACK"
-} as const;
-
-export type WalletOnboardingParamsList = {
-  [WalletOnboardingRoutes.WALLET_ONBOARDING_MAIN]: undefined;
-  [WalletOnboardingRoutes.WALLET_ONBOARDING_RESULT_FEEDBACK]: WalletOnboardingFeedbackScreenParams;
-  [WalletOnboardingRoutes.WALLET_ONBOARDING_SELECT_PAYMENT_METHOD]: undefined;
-};
-
-const Stack = createStackNavigator<WalletOnboardingParamsList>();
-
-export const WalletOnboardingNavigator = () => (
-  <Stack.Navigator
-    initialRouteName={WalletOnboardingRoutes.WALLET_ONBOARDING_RESULT_FEEDBACK}
-    headerMode={"none"}
-    screenOptions={{ gestureEnabled: isGestureEnabled }}
-  >
-    <Stack.Screen
-      name={WalletOnboardingRoutes.WALLET_ONBOARDING_RESULT_FEEDBACK}
-      component={WalletOnboardingStartScreen}
-      options={{ gestureEnabled: false }}
-    />
-    <Stack.Screen
-      name={WalletOnboardingRoutes.WALLET_ONBOARDING_SELECT_PAYMENT_METHOD}
-      component={WalletOnboardingSelectPaymentMethodScreen}
-      options={{ gestureEnabled: false }}
-    />
-  </Stack.Navigator>
-);
-
-export type WalletOnboardingStackNavigationProp<
-  ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
-> = StackNavigationProp<WalletOnboardingParamsList & ParamList, RouteName>;
-
-export type WalletOnboardingStackNavigation =
-  WalletOnboardingStackNavigationProp<
-    WalletOnboardingParamsList,
-    keyof WalletOnboardingParamsList
-  >;
diff --git a/ts/features/walletV3/onboarding/screens/WalletOnboardingFeedbackScreen.tsx b/ts/features/walletV3/onboarding/screens/WalletOnboardingFeedbackScreen.tsx
deleted file mode 100644
index 35969b7d4e0..00000000000
--- a/ts/features/walletV3/onboarding/screens/WalletOnboardingFeedbackScreen.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/* eslint-disable functional/immutable-data */
-import * as React from "react";
-
-import { RouteProp, useNavigation, useRoute } from "@react-navigation/native";
-import { View } from "react-native";
-
-import { WalletOnboardingParamsList } from "../navigation/navigator";
-
-import { IOStyles } from "../../../../components/core/variables/IOStyles";
-import WalletOnboardingSuccess from "../components/WalletOnboardingSuccess";
-import { OnboardingResult } from "../types";
-import WalletOnboardingError from "../components/WalletOnboardingError";
-import { WalletDetailsRoutes } from "../../details/navigation/navigator";
-import {
-  AppParamsList,
-  IOStackNavigationProp
-} from "../../../../navigation/params/AppParamsList";
-
-export type WalletOnboardingFeedbackScreenParams = {
-  onboardingResult: OnboardingResult;
-};
-
-type WalletOnboardingFeedbackScreenRouteProps = RouteProp<
-  WalletOnboardingParamsList,
-  "WALLET_ONBOARDING_RESULT_FEEDBACK"
->;
-
-const WalletOnboardingFeedbackScreen = () => {
-  const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
-  const route = useRoute<WalletOnboardingFeedbackScreenRouteProps>();
-  const { onboardingResult } = route.params;
-
-  const handleContinueButton = () => {
-    if (onboardingResult && onboardingResult.status === "SUCCESS") {
-      navigation.replace(WalletDetailsRoutes.WALLET_DETAILS_MAIN, {
-        screen: WalletDetailsRoutes.WALLET_DETAILS_SCREEN,
-        params: {
-          walletId: onboardingResult.walletId
-        }
-      });
-    }
-  };
-
-  // If the onboarding process is completed (with a success or not), we display the result content feedback
-  return (
-    <OnboardingResultContent
-      onboardingResult={onboardingResult}
-      onClose={() => navigation.pop()}
-      onContinue={handleContinueButton}
-    />
-  );
-};
-
-type OnboardingResultContentProps = {
-  onboardingResult: OnboardingResult;
-  onClose: () => void;
-  onContinue: () => void;
-};
-
-/**
- * This component is used to display the result of the onboarding process
- * @param onboardingResult the result of the onboarding process
- * @param onContinue callback to be called when the user tap on 'Continue' button into success screen
- * @param onClose callback to be called when the user tap on 'Close' button into error screen
- */
-const OnboardingResultContent = ({
-  onboardingResult,
-  onContinue,
-  onClose
-}: OnboardingResultContentProps) => (
-  <View style={IOStyles.flex}>
-    {onboardingResult.status === "SUCCESS" && (
-      <WalletOnboardingSuccess onContinue={onContinue} />
-    )}
-    {(onboardingResult.status === "ERROR" ||
-      onboardingResult.status === "FAILURE") && (
-      <WalletOnboardingError
-        outcome={onboardingResult.outcome}
-        onClose={onClose}
-      />
-    )}
-  </View>
-);
-
-export default WalletOnboardingFeedbackScreen;
diff --git a/ts/features/walletV3/onboarding/screens/WalletOnboardingSelectPaymentMethodScreen.tsx b/ts/features/walletV3/onboarding/screens/WalletOnboardingSelectPaymentMethodScreen.tsx
deleted file mode 100644
index 6d576443844..00000000000
--- a/ts/features/walletV3/onboarding/screens/WalletOnboardingSelectPaymentMethodScreen.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import * as React from "react";
-import { SafeAreaView } from "react-native";
-import * as pot from "@pagopa/ts-commons/lib/pot";
-import * as O from "fp-ts/lib/Option";
-import { pipe } from "fp-ts/lib/function";
-
-import { Body, H2, IOStyles, VSpacer } from "@pagopa/io-app-design-system";
-import { useNavigation } from "@react-navigation/native";
-
-import I18n from "../../../../i18n";
-import {
-  WalletOnboardingRoutes,
-  WalletOnboardingStackNavigation
-} from "../navigation/navigator";
-import TopScreenComponent from "../../../../components/screens/TopScreenComponent";
-import WalletOnboardingPaymentMethodsList from "../components/WalletOnboardingPaymentMethodsList";
-import { PaymentMethodResponse } from "../../../../../definitions/pagopa/walletv3/PaymentMethodResponse";
-import { useOnFirstRender } from "../../../../utils/hooks/useOnFirstRender";
-import { walletGetPaymentMethods } from "../store/actions";
-import { useIODispatch, useIOSelector } from "../../../../store/hooks";
-import {
-  isLoadingPaymentMethodsSelector,
-  walletOnboardingPaymentMethodsSelector
-} from "../store";
-import { OperationResultScreenContent } from "../../../../components/screens/OperationResultScreenContent";
-import { PaymentMethodStatusEnum } from "../../../../../definitions/pagopa/walletv3/PaymentMethodStatus";
-import { useWalletOnboardingWebView } from "../hooks/useWalletOnboardingWebView";
-import { OnboardingOutcomeEnum, OnboardingResult } from "../types";
-
-const WalletOnboardingSelectPaymentMethodScreen = () => {
-  const navigation = useNavigation<WalletOnboardingStackNavigation>();
-  const dispatch = useIODispatch();
-  const isLoadingPaymentMethods = useIOSelector(
-    isLoadingPaymentMethodsSelector
-  );
-  const paymentMethodsPot = useIOSelector(
-    walletOnboardingPaymentMethodsSelector
-  );
-  const availablePaymentMethods = pipe(
-    pot.getOrElse(
-      pot.map(paymentMethodsPot, el => el.paymentMethods),
-      null
-    ),
-    O.fromNullable,
-    O.map(el => el.filter(el => el.status === PaymentMethodStatusEnum.ENABLED)),
-    O.getOrElseW(() => [])
-  );
-
-  const { startOnboarding } = useWalletOnboardingWebView({
-    onSuccess: (outcome, walletId) =>
-      navigateToFeedbackPage({ status: "SUCCESS", outcome, walletId }),
-    onFailure: outcome =>
-      navigateToFeedbackPage({ status: "FAILURE", outcome }),
-    onError: () =>
-      navigateToFeedbackPage({
-        status: "ERROR",
-        outcome: OnboardingOutcomeEnum.GENERIC_ERROR
-      })
-  });
-
-  useOnFirstRender(() => {
-    dispatch(walletGetPaymentMethods.request());
-  });
-
-  const handleSelectedPaymentMethod = (
-    selectedPaymentMethod: PaymentMethodResponse
-  ) => {
-    startOnboarding(selectedPaymentMethod.id);
-  };
-
-  const navigateToFeedbackPage = (onboardingResult: OnboardingResult) => {
-    navigation.navigate(
-      WalletOnboardingRoutes.WALLET_ONBOARDING_RESULT_FEEDBACK,
-      {
-        onboardingResult
-      }
-    );
-  };
-
-  return (
-    <TopScreenComponent goBack>
-      {pot.isError(paymentMethodsPot) ? (
-        <OperationResultScreenContent
-          pictogram="umbrellaNew"
-          title={I18n.t("genericError")}
-          subtitle={I18n.t("global.genericError")}
-          action={{
-            label: I18n.t("global.genericRetry"),
-            accessibilityLabel: I18n.t("global.genericRetry"),
-            onPress: () => dispatch(walletGetPaymentMethods.request())
-          }}
-        />
-      ) : (
-        <SafeAreaView style={IOStyles.flex}>
-          <WalletOnboardingPaymentMethodsList
-            header={<PaymentMethodsHeading />}
-            isLoading={isLoadingPaymentMethods}
-            onSelectPaymentMethod={handleSelectedPaymentMethod}
-            paymentMethods={availablePaymentMethods}
-          />
-        </SafeAreaView>
-      )}
-    </TopScreenComponent>
-  );
-};
-
-const PaymentMethodsHeading = () => (
-  <>
-    <H2>{I18n.t("wallet.onboarding.paymentMethodsList.header.title")}</H2>
-    <VSpacer />
-    <Body>
-      {I18n.t("wallet.onboarding.paymentMethodsList.header.subtitle")}
-    </Body>
-    <VSpacer size={32} />
-  </>
-);
-
-export default WalletOnboardingSelectPaymentMethodScreen;
diff --git a/ts/features/walletV3/onboarding/store/actions/index.ts b/ts/features/walletV3/onboarding/store/actions/index.ts
deleted file mode 100644
index 90a55a271bc..00000000000
--- a/ts/features/walletV3/onboarding/store/actions/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { ActionType, createAsyncAction } from "typesafe-actions";
-import { NetworkError } from "../../../../../utils/errors";
-import { WalletCreateResponse } from "../../../../../../definitions/pagopa/walletv3/WalletCreateResponse";
-import { PaymentMethodsResponse } from "../../../../../../definitions/pagopa/walletv3/PaymentMethodsResponse";
-
-export const walletGetPaymentMethods = createAsyncAction(
-  "WALLET_GET_PAYMENT_METHODS_REQUEST",
-  "WALLET_GET_PAYMENT_METHODS_SUCCESS",
-  "WALLET_GET_PAYMENT_METHODS_FAILURE",
-  "WALLET_GET_PAYMENT_METHODS_CANCEL"
-)<void, PaymentMethodsResponse, NetworkError, void>();
-
-export type WalletOnboardingStartPayload = {
-  paymentMethodId: string;
-};
-
-export const walletStartOnboarding = createAsyncAction(
-  "WALLET_ONBOARDING_START_REQUEST",
-  "WALLET_ONBOARDING_START_SUCCESS",
-  "WALLET_ONBOARDING_START_FAILURE",
-  "WALLET_ONBOARDING_START_CANCEL"
-)<WalletOnboardingStartPayload, WalletCreateResponse, NetworkError, void>();
-
-export type WalletOnboardingActions =
-  | ActionType<typeof walletStartOnboarding>
-  | ActionType<typeof walletGetPaymentMethods>;
diff --git a/ts/features/walletV3/onboarding/store/index.ts b/ts/features/walletV3/onboarding/store/index.ts
deleted file mode 100644
index 88784a408ef..00000000000
--- a/ts/features/walletV3/onboarding/store/index.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import * as pot from "@pagopa/ts-commons/lib/pot";
-import * as _ from "lodash";
-import { createSelector } from "reselect";
-import { getType } from "typesafe-actions";
-import { Action } from "../../../../store/actions/types";
-import { NetworkError } from "../../../../utils/errors";
-import { GlobalState } from "../../../../store/reducers/types";
-import { WalletCreateResponse } from "../../../../../definitions/pagopa/walletv3/WalletCreateResponse";
-import { PaymentMethodsResponse } from "../../../../../definitions/pagopa/walletv3/PaymentMethodsResponse";
-
-import { walletGetPaymentMethods, walletStartOnboarding } from "./actions";
-
-export type WalletOnboardingState = {
-  result: pot.Pot<WalletCreateResponse, NetworkError>;
-  paymentMethods: pot.Pot<PaymentMethodsResponse, NetworkError>;
-};
-
-const INITIAL_STATE: WalletOnboardingState = {
-  result: pot.none,
-  paymentMethods: pot.noneLoading
-};
-
-const walletOnboardingReducer = (
-  state: WalletOnboardingState = INITIAL_STATE,
-  action: Action
-): WalletOnboardingState => {
-  switch (action.type) {
-    // START ONBOARDING ACTIONS
-    case getType(walletStartOnboarding.request):
-      return {
-        ...state,
-        result: pot.toLoading(pot.none)
-      };
-    case getType(walletStartOnboarding.success):
-      return {
-        ...state,
-        result: pot.some(action.payload as WalletCreateResponse)
-      };
-    case getType(walletStartOnboarding.failure):
-      return {
-        ...state,
-        result: pot.toError(state.result, action.payload)
-      };
-    case getType(walletStartOnboarding.cancel):
-      return {
-        ...state,
-        result: pot.none
-      };
-    // GET ONBOARDABLE PAYMENT METHODS LIST
-    case getType(walletGetPaymentMethods.request):
-      return {
-        ...state,
-        paymentMethods: pot.toLoading(pot.none)
-      };
-    case getType(walletGetPaymentMethods.success):
-      return {
-        ...state,
-        paymentMethods: pot.some(action.payload)
-      };
-    case getType(walletGetPaymentMethods.failure):
-      return {
-        ...state,
-        paymentMethods: pot.toError(state.paymentMethods, action.payload)
-      };
-    case getType(walletGetPaymentMethods.cancel):
-      return {
-        ...state,
-        paymentMethods: pot.none
-      };
-  }
-  return state;
-};
-
-const walletOnboardingSelector = (state: GlobalState) =>
-  state.features.wallet.onboarding;
-
-export const walletOnboardingStartupSelector = createSelector(
-  walletOnboardingSelector,
-  onboarding => onboarding.result
-);
-
-export const walletOnboardingPaymentMethodsSelector = createSelector(
-  walletOnboardingSelector,
-  onboarding => onboarding.paymentMethods
-);
-
-export const isLoadingPaymentMethodsSelector = createSelector(
-  walletOnboardingPaymentMethodsSelector,
-  paymentMethods => pot.isLoading(paymentMethods)
-);
-
-export default walletOnboardingReducer;
diff --git a/ts/features/walletV3/onboarding/types/index.ts b/ts/features/walletV3/onboarding/types/index.ts
deleted file mode 100644
index 21ba156e329..00000000000
--- a/ts/features/walletV3/onboarding/types/index.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * All the possible outcomes of the onboarding process
- */
-export enum OnboardingOutcomeEnum {
-  SUCCESS = "0",
-  GENERIC_ERROR = "1",
-  AUTH_ERROR = "2",
-  TIMEOUT = "4",
-  CANCELED_BY_USER = "8",
-  INVALID_SESSION = "14",
-  ALREADY_ONBOARDED = "15"
-}
-
-export type OnboardingOutcome = `${OnboardingOutcomeEnum}`;
-
-export type OnboardingStatus = "SUCCESS" | "FAILURE" | "ERROR";
-
-export type OnboardingOutcomeFailure = Exclude<
-  OnboardingOutcome,
-  `${OnboardingOutcomeEnum.SUCCESS}`
->;
-
-export type OnboardingOutcomeSuccess = Extract<
-  OnboardingOutcome,
-  `${OnboardingOutcomeEnum.SUCCESS}`
->;
-
-/**
- * Rapresents the result of onboarding process when it is successfully done
- */
-export type OnboardingSuccess = {
-  status: "SUCCESS";
-  outcome: OnboardingOutcome;
-  walletId: string;
-};
-
-/**
- * Rapresents the result of onboarding process when it is failed by the returned webview outcome
- */
-export type OnboardingFailure = {
-  status: "FAILURE";
-  outcome: OnboardingOutcomeFailure;
-};
-
-/**
- * Rapresents the result of onboarding process when it has a generic error not based on the webview outcome
- */
-export type OnboardingWebViewError = {
-  status: "ERROR";
-  outcome: OnboardingOutcomeFailure;
-};
-
-export type OnboardingResult =
-  | OnboardingSuccess
-  | OnboardingFailure
-  | OnboardingWebViewError;
diff --git a/ts/features/walletV3/onboarding/utils/index.ts b/ts/features/walletV3/onboarding/utils/index.ts
deleted file mode 100644
index b3abbb14557..00000000000
--- a/ts/features/walletV3/onboarding/utils/index.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { pipe } from "fp-ts/lib/function";
-import * as O from "fp-ts/lib/Option";
-import { IOPictograms } from "@pagopa/io-app-design-system";
-
-import URLParse from "url-parse";
-import {
-  OnboardingWebViewError,
-  OnboardingOutcome,
-  OnboardingOutcomeEnum,
-  OnboardingOutcomeFailure,
-  OnboardingResult,
-  OnboardingStatus
-} from "../types";
-import { isStringNullyOrEmpty } from "../../../../utils/strings";
-
-// List of outcomes that are considered successful
-export const successOutcomes: ReadonlyArray<OnboardingOutcome> = ["0"];
-
-export const ONBOARDING_FAQ_ENABLE_3DS = "https://io.italia.it/faq/#n3_3";
-
-export const ONBOARDING_CALLBACK_URL_SCHEMA = "iowallet";
-
-export const ONBOARDING_OUTCOME_PATH = "/wallets/outcomes";
-
-export const ONBOARDING_OUTCOME_ERROR_PICTOGRAM: Record<
-  OnboardingOutcomeFailure,
-  IOPictograms
-> = {
-  [OnboardingOutcomeEnum.GENERIC_ERROR]: "umbrellaNew",
-  [OnboardingOutcomeEnum.AUTH_ERROR]: "accessDenied",
-  [OnboardingOutcomeEnum.TIMEOUT]: "time",
-  [OnboardingOutcomeEnum.CANCELED_BY_USER]: "trash",
-  [OnboardingOutcomeEnum.INVALID_SESSION]: "umbrellaNew",
-  [OnboardingOutcomeEnum.ALREADY_ONBOARDED]: "success"
-};
-
-/**
- * Function to get the onboarding status from the given outcome
- * @param outcome outcome to get the status from
- * @returns the status of the onboarding
- */
-export const getOutcomeStatus = (
-  outcome: OnboardingOutcome
-): OnboardingStatus =>
-  successOutcomes.includes(outcome) ? "SUCCESS" : "FAILURE";
-
-/**
- * Function to extract the onboarding result from the url of the webview
- * It will return a {@link OnboardingWebViewError} if the url is not from the onboarding result page
- * @param url url to extract the onboarding result from
- * @returns an {@link OnboardingResult}
- */
-export const extractOnboardingResult = (url: string): OnboardingResult =>
-  pipe(
-    new URLParse(url, true),
-    O.fromPredicate(urlParse =>
-      urlParse.pathname.includes(ONBOARDING_OUTCOME_PATH)
-    ),
-    O.map(urlParse => ({
-      outcome: urlParse.query.outcome as OnboardingOutcome,
-      walletId: urlParse.query.walletId as string
-    })),
-    O.filter(result => !isStringNullyOrEmpty(result.outcome)),
-    O.map(result => ({
-      status: getOutcomeStatus(result.outcome),
-      outcome: result.outcome as OnboardingOutcomeFailure,
-      walletId: result.walletId
-    })),
-    O.getOrElseW(
-      () =>
-        ({
-          status: "ERROR",
-          outcome: OnboardingOutcomeEnum.GENERIC_ERROR
-        } as OnboardingWebViewError)
-    )
-  );
diff --git a/ts/features/walletV3/payment/api/client.ts b/ts/features/walletV3/payment/api/client.ts
deleted file mode 100644
index ea06a47c2ad..00000000000
--- a/ts/features/walletV3/payment/api/client.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { createClient } from "../../../../../definitions/pagopa/ecommerce/client";
-import { defaultRetryingFetch } from "../../../../utils/fetch";
-
-const createPaymentClient = (baseUrl: string, token: string) =>
-  createClient<"walletToken">({
-    baseUrl,
-    basePath: "/ecommerce/io/v1",
-    fetchApi: defaultRetryingFetch(),
-    withDefaults: op => params => {
-      const paramsWithDefaults = {
-        ...params,
-        walletToken: token
-      } as Parameters<typeof op>[0];
-
-      return op(paramsWithDefaults);
-    }
-  });
-
-export type PaymentClient = ReturnType<typeof createPaymentClient>;
-
-export { createPaymentClient };
diff --git a/ts/features/walletV3/payment/navigation/navigator.tsx b/ts/features/walletV3/payment/navigation/navigator.tsx
deleted file mode 100644
index 4093d787efa..00000000000
--- a/ts/features/walletV3/payment/navigation/navigator.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { ParamListBase } from "@react-navigation/native";
-import {
-  createStackNavigator,
-  StackNavigationProp
-} from "@react-navigation/stack";
-import React from "react";
-import { isGestureEnabled } from "../../../../utils/navigation";
-import { WalletPaymentDetailScreen } from "../screens/WalletPaymentDetailScreen";
-import { WalletPaymentInputFiscalCodeScreen } from "../screens/WalletPaymentInputFiscalCodeScreen";
-import { WalletPaymentInputNoticeNumberScreen } from "../screens/WalletPaymentInputNoticeNumberScreen";
-import { WalletPaymentPickMethodScreen } from "../screens/WalletPaymentPickMethodScreen";
-import { WalletPaymentOutcomeScreen } from "../screens/WalletPaymentOutcomeScreen";
-import { WalletPaymentPickPspScreen } from "../screens/WalletPaymentPickPspScreen";
-import { WalletPaymentConfirmScreen } from "../screens/WalletPaymentConfirmScreen";
-import { WalletPaymentParamsList } from "./params";
-import { WalletPaymentRoutes } from "./routes";
-
-const Stack = createStackNavigator<WalletPaymentParamsList>();
-
-export const WalletPaymentNavigator = () => (
-  <Stack.Navigator
-    initialRouteName={WalletPaymentRoutes.WALLET_PAYMENT_MAIN}
-    headerMode={"screen"}
-    screenOptions={{ gestureEnabled: isGestureEnabled }}
-  >
-    <Stack.Screen
-      name={WalletPaymentRoutes.WALLET_PAYMENT_INPUT_NOTICE_NUMBER}
-      component={WalletPaymentInputNoticeNumberScreen}
-      options={{
-        gestureEnabled: isGestureEnabled,
-        headerShown: false
-      }}
-    />
-    <Stack.Screen
-      name={WalletPaymentRoutes.WALLET_PAYMENT_INPUT_FISCAL_CODE}
-      component={WalletPaymentInputFiscalCodeScreen}
-      options={{
-        gestureEnabled: isGestureEnabled,
-        headerShown: false
-      }}
-    />
-    <Stack.Screen
-      name={WalletPaymentRoutes.WALLET_PAYMENT_DETAIL}
-      component={WalletPaymentDetailScreen}
-      options={{
-        gestureEnabled: isGestureEnabled,
-        // Should be false by default: the headerShown is set to true once the payment details are loaded
-        headerShown: false
-      }}
-    />
-    <Stack.Screen
-      name={WalletPaymentRoutes.WALLET_PAYMENT_PICK_METHOD}
-      component={WalletPaymentPickMethodScreen}
-      options={{
-        headerShown: true,
-        gestureEnabled: isGestureEnabled
-      }}
-    />
-    <Stack.Screen
-      name={WalletPaymentRoutes.WALLET_PAYMENT_PICK_PSP}
-      component={WalletPaymentPickPspScreen}
-      options={{
-        gestureEnabled: isGestureEnabled
-      }}
-    />
-    <Stack.Screen
-      name={WalletPaymentRoutes.WALLET_PAYMENT_CONFIRM}
-      component={WalletPaymentConfirmScreen}
-      options={{
-        gestureEnabled: isGestureEnabled
-      }}
-    />
-    <Stack.Screen
-      name={WalletPaymentRoutes.WALLET_PAYMENT_OUTCOME}
-      component={WalletPaymentOutcomeScreen}
-      options={{
-        gestureEnabled: isGestureEnabled,
-        headerShown: false
-      }}
-    />
-  </Stack.Navigator>
-);
-
-export type WalletPaymentStackNavigationProp<
-  ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
-> = StackNavigationProp<WalletPaymentParamsList & ParamList, RouteName>;
-
-export type WalletPaymentStackNavigation = WalletPaymentStackNavigationProp<
-  WalletPaymentParamsList,
-  keyof WalletPaymentParamsList
->;
diff --git a/ts/features/walletV3/payment/navigation/params.ts b/ts/features/walletV3/payment/navigation/params.ts
deleted file mode 100644
index 2882dc9b783..00000000000
--- a/ts/features/walletV3/payment/navigation/params.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { WalletPaymentDetailScreenNavigationParams } from "../screens/WalletPaymentDetailScreen";
-import { WalletPaymentInputFiscalCodeScreenNavigationParams } from "../screens/WalletPaymentInputFiscalCodeScreen";
-import { WalletPaymentOutcomeScreenNavigationParams } from "../screens/WalletPaymentOutcomeScreen";
-import { WalletPaymentRoutes } from "./routes";
-
-export type WalletPaymentParamsList = {
-  [WalletPaymentRoutes.WALLET_PAYMENT_MAIN]: undefined;
-  [WalletPaymentRoutes.WALLET_PAYMENT_INPUT_NOTICE_NUMBER]: undefined;
-  [WalletPaymentRoutes.WALLET_PAYMENT_INPUT_FISCAL_CODE]: WalletPaymentInputFiscalCodeScreenNavigationParams;
-  [WalletPaymentRoutes.WALLET_PAYMENT_DETAIL]: WalletPaymentDetailScreenNavigationParams;
-  [WalletPaymentRoutes.WALLET_PAYMENT_PICK_METHOD]: undefined;
-  [WalletPaymentRoutes.WALLET_PAYMENT_PICK_PSP]: undefined;
-  [WalletPaymentRoutes.WALLET_PAYMENT_CONFIRM]: undefined;
-  [WalletPaymentRoutes.WALLET_PAYMENT_OUTCOME]: WalletPaymentOutcomeScreenNavigationParams;
-};
diff --git a/ts/features/walletV3/payment/navigation/routes.ts b/ts/features/walletV3/payment/navigation/routes.ts
deleted file mode 100644
index 372daa211ef..00000000000
--- a/ts/features/walletV3/payment/navigation/routes.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export const WalletPaymentRoutes = {
-  WALLET_PAYMENT_MAIN: "WALLET_PAYMENT_MAIN",
-  WALLET_PAYMENT_INPUT_NOTICE_NUMBER: "WALLET_PAYMENT_INPUT_NOTICE_NUMBER",
-  WALLET_PAYMENT_INPUT_FISCAL_CODE: "WALLET_PAYMENT_INPUT_FISCAL_CODE",
-  WALLET_PAYMENT_DETAIL: "WALLET_PAYMENT_DETAIL",
-  WALLET_PAYMENT_PICK_METHOD: "WALLET_PAYMENT_PICK_METHOD",
-  WALLET_PAYMENT_PICK_PSP: "WALLET_PAYMENT_PICK_PSP",
-  WALLET_PAYMENT_CONFIRM: "WALLET_PAYMENT_CONFIRM",
-  WALLET_PAYMENT_OUTCOME: "WALLET_PAYMENT_OUTCOME"
-} as const;
diff --git a/ts/features/walletV3/payment/saga/networking/handleWalletPaymentGetUserWallets.ts b/ts/features/walletV3/payment/saga/networking/handleWalletPaymentGetUserWallets.ts
deleted file mode 100644
index e087e8ac340..00000000000
--- a/ts/features/walletV3/payment/saga/networking/handleWalletPaymentGetUserWallets.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as E from "fp-ts/lib/Either";
-import { pipe } from "fp-ts/lib/function";
-import { call, put } from "typed-redux-saga/macro";
-import { ActionType } from "typesafe-actions";
-import { SagaCallReturnType } from "../../../../../types/utils";
-import { getGenericError, getNetworkError } from "../../../../../utils/errors";
-import { readablePrivacyReport } from "../../../../../utils/reporters";
-import { withRefreshApiCall } from "../../../../fastLogin/saga/utils";
-import { WalletClient } from "../../../common/api/client";
-import { walletPaymentGetUserWallets } from "../../store/actions/networking";
-
-export function* handleWalletPaymentGetUserWallets(
-  getWalletsByIdUser: WalletClient["getWalletsByIdUser"],
-  action: ActionType<(typeof walletPaymentGetUserWallets)["request"]>
-) {
-  const getWalletsByIdUserRequest = getWalletsByIdUser({});
-
-  try {
-    const getWalletsByIdUserResult = (yield* call(
-      withRefreshApiCall,
-      getWalletsByIdUserRequest,
-      action
-    )) as SagaCallReturnType<typeof getWalletsByIdUser>;
-
-    yield* put(
-      pipe(
-        getWalletsByIdUserResult,
-        E.fold(
-          error =>
-            walletPaymentGetUserWallets.failure(
-              getGenericError(new Error(readablePrivacyReport(error)))
-            ),
-          res => {
-            if (res.status === 200) {
-              return walletPaymentGetUserWallets.success(res.value);
-            }
-            return walletPaymentGetUserWallets.failure({
-              ...getGenericError(new Error(`Error: ${res.status}`))
-            });
-          }
-        )
-      )
-    );
-  } catch (e) {
-    yield* put(walletPaymentGetUserWallets.failure({ ...getNetworkError(e) }));
-  }
-}
diff --git a/ts/features/walletV3/payment/store/__tests__/store.test.ts b/ts/features/walletV3/payment/store/__tests__/store.test.ts
deleted file mode 100644
index 1ea468f021c..00000000000
--- a/ts/features/walletV3/payment/store/__tests__/store.test.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as pot from "@pagopa/ts-commons/lib/pot";
-import * as O from "fp-ts/lib/Option";
-import { applicationChangeState } from "../../../../../store/actions/application";
-import { appReducer } from "../../../../../store/reducers";
-import { WalletPaymentState } from "../reducers";
-
-const INITIAL_STATE: WalletPaymentState = {
-  sessionToken: pot.none,
-  paymentDetails: pot.none,
-  userWallets: pot.none,
-  allPaymentMethods: pot.none,
-  pspList: pot.none,
-  chosenPaymentMethod: O.none,
-  chosenPsp: O.none,
-  transaction: pot.none,
-  authorizationUrl: pot.none
-};
-
-describe("Test Wallet reducer", () => {
-  it("should have initial state at startup", () => {
-    const globalState = appReducer(undefined, applicationChangeState("active"));
-    expect(globalState.features.wallet.payment).toStrictEqual(INITIAL_STATE);
-  });
-});
diff --git a/ts/features/walletV3/payment/store/actions/index.ts b/ts/features/walletV3/payment/store/actions/index.ts
deleted file mode 100644
index 994c2d5cfd3..00000000000
--- a/ts/features/walletV3/payment/store/actions/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { WalletPaymentNetworkingActions } from "./networking";
-import { WalletPaymentOrchestrationActions } from "./orchestration";
-
-export type WalletPaymentActions =
-  | WalletPaymentNetworkingActions
-  | WalletPaymentOrchestrationActions;
diff --git a/ts/features/walletV3/payment/store/actions/networking.ts b/ts/features/walletV3/payment/store/actions/networking.ts
deleted file mode 100644
index 9065a94feac..00000000000
--- a/ts/features/walletV3/payment/store/actions/networking.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { ActionType, createAsyncAction } from "typesafe-actions";
-import { AmountEuroCents } from "../../../../../../definitions/pagopa/ecommerce/AmountEuroCents";
-import { CalculateFeeResponse } from "../../../../../../definitions/pagopa/ecommerce/CalculateFeeResponse";
-import { NewTransactionRequest } from "../../../../../../definitions/pagopa/ecommerce/NewTransactionRequest";
-import { NewTransactionResponse } from "../../../../../../definitions/pagopa/ecommerce/NewTransactionResponse";
-import { PaymentRequestsGetResponse } from "../../../../../../definitions/pagopa/ecommerce/PaymentRequestsGetResponse";
-import { RequestAuthorizationResponse } from "../../../../../../definitions/pagopa/ecommerce/RequestAuthorizationResponse";
-import { RptId } from "../../../../../../definitions/pagopa/ecommerce/RptId";
-import { PaymentMethodsResponse } from "../../../../../../definitions/pagopa/walletv3/PaymentMethodsResponse";
-import { Wallets } from "../../../../../../definitions/pagopa/walletv3/Wallets";
-import { NetworkError } from "../../../../../utils/errors";
-import { WalletPaymentFailure } from "../../types/failure";
-import { NewSessionTokenResponse } from "../../../../../../definitions/pagopa/ecommerce/NewSessionTokenResponse";
-import { TransactionInfo } from "../../../../../../definitions/pagopa/ecommerce/TransactionInfo";
-import { CalculateFeeRequest } from "../../../../../../definitions/pagopa/ecommerce/CalculateFeeRequest";
-
-export const walletPaymentNewSessionToken = createAsyncAction(
-  "WALLET_PAYMENT_NEW_SESSION_TOKEN_REQUEST",
-  "WALLET_PAYMENT_NEW_SESSION_TOKEN_SUCCESS",
-  "WALLET_PAYMENT_NEW_SESSION_TOKEN_FAILURE"
-)<undefined, NewSessionTokenResponse, NetworkError>();
-
-export const walletPaymentGetDetails = createAsyncAction(
-  "WALLET_PAYMENT_GET_DETAILS_REQUEST",
-  "WALLET_PAYMENT_GET_DETAILS_SUCCESS",
-  "WALLET_PAYMENT_GET_DETAILS_FAILURE"
-)<RptId, PaymentRequestsGetResponse, NetworkError | WalletPaymentFailure>();
-
-export const walletPaymentGetAllMethods = createAsyncAction(
-  "WALLET_PAYMENT_GET_ALL_METHODS_REQUEST",
-  "WALLET_PAYMENT_GET_ALL_METHODS_SUCCESS",
-  "WALLET_PAYMENT_GET_ALL_METHODS_FAILURE"
-)<undefined, PaymentMethodsResponse, NetworkError>();
-
-export const walletPaymentGetUserWallets = createAsyncAction(
-  "WALLET_PAYMENT_GET_USER_WALLETS_REQUEST",
-  "WALLET_PAYMENT_GET_USER_WALLETS_SUCCESS",
-  "WALLET_PAYMENT_GET_USER_WALLETS_FAILURE"
-)<undefined, Wallets, NetworkError>();
-
-export const walletPaymentCalculateFees = createAsyncAction(
-  "WALLET_PAYMET_CALCULATE_FEES_REQUEST",
-  "WALLET_PAYMET_CALCULATE_FEES_SUCCESS",
-  "WALLET_PAYMET_CALCULATE_FEES_FAILURE"
-)<
-  CalculateFeeRequest & { paymentMethodId: string },
-  CalculateFeeResponse,
-  NetworkError
->();
-
-export const walletPaymentCreateTransaction = createAsyncAction(
-  "WALLET_PAYMENT_CREATE_TRANSACTION_REQUEST",
-  "WALLET_PAYMENT_CREATE_TRANSACTION_SUCCESS",
-  "WALLET_PAYMENT_CREATE_TRANSACTION_FAILURE"
-)<
-  NewTransactionRequest,
-  NewTransactionResponse,
-  NetworkError | WalletPaymentFailure
->();
-
-export const walletPaymentGetTransactionInfo = createAsyncAction(
-  "WALLET_PAYMENT_GET_TRANSACTION_INFO_REQUEST",
-  "WALLET_PAYMENT_GET_TRANSACTION_INFO_SUCCESS",
-  "WALLET_PAYMENT_GET_TRANSACTION_INFO_FAILURE"
-)<{ transactionId: string }, TransactionInfo, NetworkError>();
-
-export const walletPaymentDeleteTransaction = createAsyncAction(
-  "WALLET_PAYMENT_DELETE_TRANSACTION_REQUEST",
-  "WALLET_PAYMENT_DELETE_TRANSACTION_SUCCESS",
-  "WALLET_PAYMENT_DELETE_TRANSACTION_FAILURE"
-)<string, undefined, NetworkError>();
-
-export type WalletPaymentAuthorizePayload = {
-  transactionId: string;
-  walletId: string;
-  pspId: string;
-  paymentAmount: AmountEuroCents;
-  paymentFees: AmountEuroCents;
-};
-
-export const walletPaymentAuthorization = createAsyncAction(
-  "WALLET_PAYMENT_AUTH_REQUEST",
-  "WALLET_PAYMENT_AUTH_SUCCESS",
-  "WALLET_PAYMENT_AUTH_FAILURE",
-  "WALLET_PAYMENT_AUTH_CANCEL"
-)<
-  WalletPaymentAuthorizePayload,
-  RequestAuthorizationResponse,
-  NetworkError,
-  undefined
->();
-
-export type WalletPaymentNetworkingActions =
-  | ActionType<typeof walletPaymentNewSessionToken>
-  | ActionType<typeof walletPaymentGetDetails>
-  | ActionType<typeof walletPaymentGetAllMethods>
-  | ActionType<typeof walletPaymentGetUserWallets>
-  | ActionType<typeof walletPaymentCalculateFees>
-  | ActionType<typeof walletPaymentCreateTransaction>
-  | ActionType<typeof walletPaymentGetTransactionInfo>
-  | ActionType<typeof walletPaymentDeleteTransaction>
-  | ActionType<typeof walletPaymentAuthorization>;
diff --git a/ts/features/walletV3/payment/store/actions/orchestration.ts b/ts/features/walletV3/payment/store/actions/orchestration.ts
deleted file mode 100644
index cba31c50fa9..00000000000
--- a/ts/features/walletV3/payment/store/actions/orchestration.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { ActionType, createStandardAction } from "typesafe-actions";
-import { Bundle } from "../../../../../../definitions/pagopa/ecommerce/Bundle";
-import { WalletInfo } from "../../../../../../definitions/pagopa/walletv3/WalletInfo";
-
-/**
- * Action to initialize the state of a payment, optionally you can specify the route to go back to
- * after the payment is completed or cancelled (default is the popToTop route)
- */
-export const walletPaymentInitState = createStandardAction(
-  "WALLET_PAYMENT_INIT_STATE"
-)();
-
-export const walletPaymentPickPaymentMethod = createStandardAction(
-  "WALLET_PAYMENT_PICK_PAYMENT_METHOD"
-)<WalletInfo>();
-
-export const walletPaymentPickPsp = createStandardAction(
-  "WALLET_PAYMENT_PICK_PSP"
-)<Bundle>();
-
-export const walletPaymentResetPickedPsp = createStandardAction(
-  "WALLET_PAYMENT_RESET_PICKED_PSP"
-)();
-
-export type WalletPaymentOrchestrationActions =
-  | ActionType<typeof walletPaymentInitState>
-  | ActionType<typeof walletPaymentPickPaymentMethod>
-  | ActionType<typeof walletPaymentPickPsp>
-  | ActionType<typeof walletPaymentResetPickedPsp>;
diff --git a/ts/features/walletV3/transaction/navigation/navigator.tsx b/ts/features/walletV3/transaction/navigation/navigator.tsx
deleted file mode 100644
index 9b26df0638d..00000000000
--- a/ts/features/walletV3/transaction/navigation/navigator.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { ParamListBase } from "@react-navigation/native";
-import {
-  createStackNavigator,
-  StackNavigationProp
-} from "@react-navigation/stack";
-import React from "react";
-import { isGestureEnabled } from "../../../../utils/navigation";
-import WalletTransactionDetailsScreen, {
-  WalletTransactionDetailsScreenParams
-} from "../screens/WalletTransactionDetailsScreen";
-import WalletTransactionOperationDetailsScreen, {
-  WalletTransactionOperationDetailsScreenParams
-} from "../screens/WalletTransactionOperationDetails";
-
-export const WalletTransactionRoutes = {
-  WALLET_TRANSACTION_MAIN: "WALLET_TRANSACTION_MAIN",
-  WALLET_TRANSACTION_DETAILS: "WALLET_TRANSACTION_DETAILS",
-  WALLET_TRANSACTION_OPERATION_DETAILS: "WALLET_TRANSACTION_OPERATION_DETAILS"
-} as const;
-
-export type WalletTransactionParamsList = {
-  [WalletTransactionRoutes.WALLET_TRANSACTION_MAIN]: undefined;
-  [WalletTransactionRoutes.WALLET_TRANSACTION_DETAILS]: WalletTransactionDetailsScreenParams;
-  [WalletTransactionRoutes.WALLET_TRANSACTION_OPERATION_DETAILS]: WalletTransactionOperationDetailsScreenParams;
-};
-
-const Stack = createStackNavigator<WalletTransactionParamsList>();
-
-export const WalletTransactionNavigator = () => (
-  <Stack.Navigator
-    initialRouteName={WalletTransactionRoutes.WALLET_TRANSACTION_DETAILS}
-    headerMode={"screen"}
-    screenOptions={{ gestureEnabled: isGestureEnabled }}
-  >
-    <Stack.Screen
-      name={WalletTransactionRoutes.WALLET_TRANSACTION_DETAILS}
-      component={WalletTransactionDetailsScreen}
-      options={{ gestureEnabled: isGestureEnabled }}
-    />
-    <Stack.Screen
-      name={WalletTransactionRoutes.WALLET_TRANSACTION_OPERATION_DETAILS}
-      component={WalletTransactionOperationDetailsScreen}
-      options={{ gestureEnabled: isGestureEnabled }}
-    />
-  </Stack.Navigator>
-);
-
-export type WalletTransactionStackNavigationProp<
-  ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string
-> = StackNavigationProp<WalletTransactionParamsList & ParamList, RouteName>;
-
-export type WalletTransactionStackNavigation =
-  WalletTransactionStackNavigationProp<
-    WalletTransactionParamsList,
-    keyof WalletTransactionParamsList
-  >;
diff --git a/ts/features/walletV3/transaction/store/actions/index.ts b/ts/features/walletV3/transaction/store/actions/index.ts
deleted file mode 100644
index 50f40edff17..00000000000
--- a/ts/features/walletV3/transaction/store/actions/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ActionType, createAsyncAction } from "typesafe-actions";
-import { NetworkError } from "../../../../../utils/errors";
-import { Transaction } from "../../../../../types/pagopa";
-
-export type WalletTransactionDetailsPayload = {
-  transactionId: number;
-};
-
-export const walletTransactionDetailsGet = createAsyncAction(
-  "WALLET_TRANSACTION_DETAILS_REQUEST",
-  "WALLET_TRANSACTION_DETAILS_SUCCESS",
-  "WALLET_TRANSACTION_DETAILS_FAILURE",
-  "WALLET_TRANSACTION_DETAILS_CANCEL"
-)<WalletTransactionDetailsPayload, Transaction, NetworkError, void>();
-
-export type WalletTransactionActions = ActionType<
-  typeof walletTransactionDetailsGet
->;
diff --git a/ts/features/walletV3/transaction/store/index.ts b/ts/features/walletV3/transaction/store/index.ts
deleted file mode 100644
index 2efc50116f9..00000000000
--- a/ts/features/walletV3/transaction/store/index.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as pot from "@pagopa/ts-commons/lib/pot";
-import * as _ from "lodash";
-import { createSelector } from "reselect";
-import { getType } from "typesafe-actions";
-import { Action } from "../../../../store/actions/types";
-import { NetworkError } from "../../../../utils/errors";
-import { GlobalState } from "../../../../store/reducers/types";
-
-import { Transaction } from "../../../../types/pagopa";
-import { walletTransactionDetailsGet } from "./actions";
-
-export type WalletTransactionState = {
-  details: pot.Pot<Transaction, NetworkError>;
-};
-
-const INITIAL_STATE: WalletTransactionState = {
-  details: pot.noneLoading
-};
-
-const walletTransactionReducer = (
-  state: WalletTransactionState = INITIAL_STATE,
-  action: Action
-): WalletTransactionState => {
-  switch (action.type) {
-    // GET TRANSACTION DETAILS
-    case getType(walletTransactionDetailsGet.request):
-      return {
-        ...state,
-        details: pot.toLoading(pot.none)
-      };
-    case getType(walletTransactionDetailsGet.success):
-      return {
-        ...state,
-        details: pot.some(action.payload)
-      };
-    case getType(walletTransactionDetailsGet.failure):
-      return {
-        ...state,
-        details: pot.toError(state.details, action.payload)
-      };
-    case getType(walletTransactionDetailsGet.cancel):
-      return {
-        ...state,
-        details: pot.none
-      };
-  }
-  return state;
-};
-
-const walletTransactionSelector = (state: GlobalState) =>
-  state.features.wallet.transaction;
-
-export const walletTransactionDetailsPotSelector = createSelector(
-  walletTransactionSelector,
-  transaction => transaction.details
-);
-
-export default walletTransactionReducer;
diff --git a/ts/features/zendesk/analytics/index.ts b/ts/features/zendesk/analytics/index.ts
index 50459f5db9e..9acc4628f76 100644
--- a/ts/features/zendesk/analytics/index.ts
+++ b/ts/features/zendesk/analytics/index.ts
@@ -1,4 +1,5 @@
 import { getType } from "typesafe-actions";
+import { constVoid } from "fp-ts/lib/function";
 import { mixpanel } from "../../../mixpanel";
 import { Action } from "../../../store/actions/types";
 
@@ -15,7 +16,7 @@ import {
 
 const trackZendesk =
   (mp: NonNullable<typeof mixpanel>) =>
-  (action: Action): Promise<void> => {
+  (action: Action): void => {
     switch (action.type) {
       case getType(zendeskSupportCompleted):
       case getType(zendeskSupportCancel):
@@ -41,10 +42,9 @@ const trackZendesk =
           reason: getNetworkErrorMessage(action.payload)
         });
     }
-    return Promise.resolve();
   };
 
 const emptyTracking = (_: NonNullable<typeof mixpanel>) => (__: Action) =>
-  Promise.resolve();
+  constVoid();
 
 export default zendeskEnabled ? trackZendesk : emptyTracking;
diff --git a/ts/features/zendesk/navigation/navigator.tsx b/ts/features/zendesk/navigation/navigator.tsx
index 6f2956abe2c..dd6424fe3bd 100644
--- a/ts/features/zendesk/navigation/navigator.tsx
+++ b/ts/features/zendesk/navigation/navigator.tsx
@@ -16,8 +16,7 @@ const Stack = createStackNavigator<ZendeskParamsList>();
 export const ZendeskStackNavigator = () => (
   <Stack.Navigator
     initialRouteName={ZENDESK_ROUTES.HELP_CENTER}
-    headerMode={"none"}
-    screenOptions={{ gestureEnabled: isGestureEnabled }}
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerShown: false }}
   >
     <Stack.Screen
       name={ZENDESK_ROUTES.HELP_CENTER}
diff --git a/ts/features/zendesk/screens/ZendeskSupportHelpCenter.tsx b/ts/features/zendesk/screens/ZendeskSupportHelpCenter.tsx
index 41f51b6b387..531c9e2a735 100644
--- a/ts/features/zendesk/screens/ZendeskSupportHelpCenter.tsx
+++ b/ts/features/zendesk/screens/ZendeskSupportHelpCenter.tsx
@@ -37,6 +37,10 @@ import {
   addTicketCustomField,
   zendeskFciId
 } from "../../../utils/supportAssistance";
+import {
+  isProfileEmailValidatedSelector,
+  profileSelector
+} from "../../../store/reducers/profile";
 
 type FaqManagerProps = Pick<
   ZendeskStartPayload,
@@ -170,7 +174,10 @@ const ZendeskSupportHelpCenter = () => {
   const dispatch = useIODispatch();
   const workUnitCancel = () => dispatch(zendeskSupportCancel());
   const workUnitComplete = () => dispatch(zendeskSupportCompleted());
+  const profile = useIOSelector(profileSelector);
   const signatureRequestId = useIOSelector(fciSignatureRequestIdSelector);
+  const isEmailValidated = useIOSelector(isProfileEmailValidatedSelector);
+  const showRequestSupportContacts = isEmailValidated || !pot.isSome(profile);
 
   const route = useRoute<RouteProp<ZendeskParamsList, "ZENDESK_HELP_CENTER">>();
 
@@ -238,14 +245,19 @@ const ZendeskSupportHelpCenter = () => {
             contentLoaded={markdownContentLoaded}
             startingRoute={startingRoute}
           />
-          <VSpacer size={16} />
-          <ZendeskSupportComponent
-            assistanceForPayment={assistanceForPayment}
-            assistanceForCard={assistanceForCard}
-            assistanceForFci={
-              assistanceForFci || signatureRequestId !== undefined
-            }
-          />
+
+          {showRequestSupportContacts && (
+            <>
+              <VSpacer size={16} />
+              <ZendeskSupportComponent
+                assistanceForPayment={assistanceForPayment}
+                assistanceForCard={assistanceForCard}
+                assistanceForFci={
+                  assistanceForFci || signatureRequestId !== undefined
+                }
+              />
+            </>
+          )}
           <VSpacer size={16} />
         </ScrollView>
       </SafeAreaView>
diff --git a/ts/hooks/useHeaderSecondLevel.tsx b/ts/hooks/useHeaderSecondLevel.tsx
index 9b752c19776..fa42cd1f753 100644
--- a/ts/hooks/useHeaderSecondLevel.tsx
+++ b/ts/hooks/useHeaderSecondLevel.tsx
@@ -18,6 +18,7 @@ type CommonProps = {
   title: string;
   backAccessibilityLabel?: string;
   goBack?: () => void;
+  canGoBack?: boolean;
   transparent?: boolean;
   scrollValues?: ScrollValues;
 };
@@ -65,6 +66,7 @@ export const useHeaderSecondLevel = ({
   contextualHelpMarkdown,
   faqCategories,
   goBack,
+  canGoBack = true,
   supportRequest,
   secondAction,
   thirdAction,
@@ -79,12 +81,14 @@ export const useHeaderSecondLevel = ({
 
   const navigation = useNavigation();
   const headerComponentProps: HeaderProps = React.useMemo(() => {
-    const baseProps = {
-      title,
-      backAccessibilityLabel:
-        backAccessibilityLabel ?? I18n.t("global.buttons.back"),
-      goBack: goBack ?? navigation.goBack
-    };
+    const baseProps = canGoBack
+      ? {
+          title,
+          backAccessibilityLabel:
+            backAccessibilityLabel ?? I18n.t("global.buttons.back"),
+          goBack: goBack ?? navigation.goBack
+        }
+      : { title };
 
     if (supportRequest) {
       const helpAction = {
@@ -127,6 +131,7 @@ export const useHeaderSecondLevel = ({
       type: "base"
     };
   }, [
+    canGoBack,
     title,
     backAccessibilityLabel,
     goBack,
diff --git a/ts/hooks/useStartSupportRequest.ts b/ts/hooks/useStartSupportRequest.ts
index 04605fc5c79..b9e7a41a0a0 100644
--- a/ts/hooks/useStartSupportRequest.ts
+++ b/ts/hooks/useStartSupportRequest.ts
@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+import { useRoute } from "@react-navigation/native";
 import { ToolEnum } from "../../definitions/content/AssistanceToolConfig";
 import {
   ContextualHelpProps,
@@ -7,7 +8,6 @@ import {
 import { zendeskSupportStart } from "../features/zendesk/store/actions";
 import { useIODispatch, useIOSelector } from "../store/hooks";
 import { assistanceToolConfigSelector } from "../store/reducers/backendStatus";
-import { currentRouteSelector } from "../store/reducers/navigation";
 import { FAQsCategoriesType } from "../utils/faq";
 import {
   assistanceToolRemoteConfig,
@@ -25,11 +25,7 @@ export const useStartSupportRequest = ({
   contextualHelp,
   contextualHelpMarkdown
 }: SupportRequestParams) => {
-  /**
-   *  We have to use the deprecated currentRouteSelector because, at the moment, some components are rendered outside the navigation context.
-   *  TODO: Full usage of navigation header and modal, in order to have always the right context
-   */
-  const currentScreenName = useIOSelector(currentRouteSelector);
+  const { name: currentScreenName } = useRoute();
 
   const dispatch = useIODispatch();
   const assistanceToolConfig = useIOSelector(assistanceToolConfigSelector);
diff --git a/ts/hooks/useValidateEmailModal.tsx b/ts/hooks/useValidateEmailModal.tsx
deleted file mode 100644
index b40deebdf37..00000000000
--- a/ts/hooks/useValidateEmailModal.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useFocusEffect } from "@react-navigation/native";
-import { pipe } from "fp-ts/lib/function";
-import * as O from "fp-ts/lib/Option";
-import * as React from "react";
-import { useContext } from "react";
-import RemindEmailValidationOverlay from "../components/RemindEmailValidationOverlay";
-import { LightModalContext } from "../components/ui/LightModal";
-import { useIOSelector } from "../store/hooks";
-import { emailValidationSelector } from "../store/reducers/emailValidation";
-import { isProfileEmailValidatedSelector } from "../store/reducers/profile";
-
-export const useValidatedEmailModal = (isOnboarding?: boolean) => {
-  const { showModal, hideModal } = useContext(LightModalContext);
-  const isEmailValidatedSelector = useIOSelector(
-    isProfileEmailValidatedSelector
-  );
-  const { acknowledgeOnEmailValidated } = useIOSelector(
-    emailValidationSelector
-  );
-
-  const isEmailValidated = React.useMemo(
-    () =>
-      isEmailValidatedSelector &&
-      pipe(
-        acknowledgeOnEmailValidated,
-        O.getOrElse(() => true)
-      ),
-    [isEmailValidatedSelector, acknowledgeOnEmailValidated]
-  );
-
-  useFocusEffect(
-    React.useCallback(() => {
-      if (!isEmailValidated) {
-        showModal(<RemindEmailValidationOverlay isOnboarding={isOnboarding} />);
-      }
-      return () => hideModal();
-    }, [hideModal, isEmailValidated, isOnboarding, showModal])
-  );
-};
diff --git a/ts/mixpanel.ts b/ts/mixpanel.ts
index 07972c6bdb9..2c180c5939e 100644
--- a/ts/mixpanel.ts
+++ b/ts/mixpanel.ts
@@ -1,13 +1,12 @@
-import { MixpanelInstance } from "react-native-mixpanel";
+import { Mixpanel } from "mixpanel-react-native";
 import { mixpanelToken } from "./config";
-import { isAndroid, isIos } from "./utils/platform";
 import { getDeviceId } from "./utils/device";
 import { GlobalState } from "./store/reducers/types";
 import { updateMixpanelSuperProperties } from "./mixpanelConfig/superProperties";
 import { updateMixpanelProfileProperties } from "./mixpanelConfig/profileProperties";
 
 // eslint-disable-next-line
-export let mixpanel: MixpanelInstance | undefined;
+export let mixpanel: Mixpanel | undefined;
 
 /**
  * Initialize mixpanel at start
@@ -16,22 +15,22 @@ export const initializeMixPanel = async (state: GlobalState) => {
   if (mixpanel !== undefined) {
     return;
   }
-  const privateInstance = new MixpanelInstance(mixpanelToken);
-  await privateInstance.initialize();
+  const trackAutomaticEvents = true;
+  const privateInstance = new Mixpanel(mixpanelToken, trackAutomaticEvents);
+  await privateInstance.init(
+    undefined,
+    undefined,
+    "https://api-eu.mixpanel.com"
+  );
   mixpanel = privateInstance;
   // On app first open
   // On profile page, when user opt-in
   await setupMixpanel(mixpanel, state);
 };
 
-const setupMixpanel = async (mp: MixpanelInstance, state: GlobalState) => {
-  await mp.optInTracking();
-  // on iOS it can be deactivate by invoking a SDK method
-  // on Android it can be done adding an extra config in AndroidManifest
-  // see https://help.mixpanel.com/hc/en-us/articles/115004494803-Disable-Geolocation-Collection
-  if (isIos) {
-    await mp.disableIpAddressGeolocalization();
-  }
+const setupMixpanel = async (mp: Mixpanel, state: GlobalState) => {
+  mp.optInTracking();
+  mp.setUseIpAddressForGeolocation(false);
 
   await updateMixpanelSuperProperties(state);
   await updateMixpanelProfileProperties(state);
@@ -42,30 +41,17 @@ export const identifyMixpanel = async () => {
   await mixpanel?.identify(getDeviceId());
 };
 
-export const resetMixpanel = async () => {
+export const resetMixpanel = () => {
   // Reset mixpanel auto generated uniqueId
-  await mixpanel?.reset();
+  mixpanel?.reset();
 };
 
-export const terminateMixpanel = async () => {
+export const terminateMixpanel = () => {
   if (mixpanel) {
-    await mixpanel.flush();
-    await mixpanel.optOutTracking();
+    mixpanel.flush();
+    mixpanel.optOutTracking();
     mixpanel = undefined;
   }
-  return Promise.resolve();
-};
-
-export const setMixpanelPushNotificationToken = (token: string) => {
-  if (mixpanel) {
-    if (isIos) {
-      return mixpanel.addPushDeviceToken(token);
-    }
-    if (isAndroid) {
-      return mixpanel.setPushRegistrationId(token);
-    }
-  }
-  return Promise.resolve();
 };
 
 /**
diff --git a/ts/mixpanelConfig/profileProperties.ts b/ts/mixpanelConfig/profileProperties.ts
index 0d0a3f7d33a..1b04aec31f0 100644
--- a/ts/mixpanelConfig/profileProperties.ts
+++ b/ts/mixpanelConfig/profileProperties.ts
@@ -56,7 +56,7 @@ export const updateMixpanelProfileProperties = async (
     );
   }
 
-  await mixpanel.set(profilePropertiesObject);
+  mixpanel.getPeople().set(profilePropertiesObject);
 };
 
 const forceUpdate = <T extends keyof ProfileProperties>(
diff --git a/ts/mixpanelConfig/superProperties.ts b/ts/mixpanelConfig/superProperties.ts
index 6c29dd23d74..c263b2285f2 100644
--- a/ts/mixpanelConfig/superProperties.ts
+++ b/ts/mixpanelConfig/superProperties.ts
@@ -67,7 +67,7 @@ export const updateMixpanelSuperProperties = async (
     forceUpdate<keyof SuperProperties>(superPropertiesObject, forceUpdateFor);
   }
 
-  await mixpanel.registerSuperProperties(superPropertiesObject);
+  mixpanel.registerSuperProperties(superPropertiesObject);
 };
 
 const forceUpdate = <T extends keyof SuperProperties>(
diff --git a/ts/navigation/AppStackNavigator.tsx b/ts/navigation/AppStackNavigator.tsx
index 5641f27fb5f..b711994cc59 100644
--- a/ts/navigation/AppStackNavigator.tsx
+++ b/ts/navigation/AppStackNavigator.tsx
@@ -1,11 +1,11 @@
 /* eslint-disable functional/immutable-data */
+import { useIOThemeContext } from "@pagopa/io-app-design-system";
 import {
   LinkingOptions,
   NavigationContainer,
   NavigationContainerProps
 } from "@react-navigation/native";
-import * as React from "react";
-import { useRef } from "react";
+import React, { useRef } from "react";
 import { View } from "react-native";
 import { useStoredExperimentalDesign } from "../common/context/DSExperimentalContext";
 import LoadingSpinnerOverlay from "../components/LoadingSpinnerOverlay";
@@ -16,7 +16,7 @@ import { fimsLinkingOptions } from "../features/fims/navigation/navigator";
 import { idPayLinkingOptions } from "../features/idpay/common/navigation/linking";
 import { MESSAGES_ROUTES } from "../features/messages/navigation/routes";
 import UADONATION_ROUTES from "../features/uaDonations/navigation/routes";
-import IngressScreen from "../screens/ingress/IngressScreen";
+import { IngressScreen } from "../screens/ingress/IngressScreen";
 import { startApplicationInitialization } from "../store/actions/application";
 import { setDebugCurrentRouteName } from "../store/actions/debug";
 import { useIODispatch, useIOSelector } from "../store/hooks";
@@ -25,19 +25,25 @@ import {
   isCGNEnabledSelector,
   isFIMSEnabledSelector
 } from "../store/reducers/backendStatus";
+import { isNewWalletSectionEnabledSelector } from "../store/reducers/persistedPreferences";
 import { StartupStatusEnum, isStartupLoaded } from "../store/reducers/startup";
-import { IONavigationLightTheme } from "../theme/navigations";
+import {
+  IONavigationDarkTheme,
+  IONavigationLightTheme
+} from "../theme/navigations";
 import { isTestEnv } from "../utils/environment";
 import {
   IO_INTERNAL_LINK_PREFIX,
   IO_UNIVERSAL_LINK_PREFIX
 } from "../utils/navigation";
+import { SERVICES_ROUTES } from "../features/services/navigation/routes";
 import AuthenticatedStackNavigator from "./AuthenticatedStackNavigator";
 import NavigationService, {
   navigationRef,
   setMainNavigatorReady
 } from "./NavigationService";
 import NotAuthenticatedStackNavigator from "./NotAuthenticatedStackNavigator";
+import { AppParamsList } from "./params/AppParamsList";
 import ROUTES from "./routes";
 
 type OnStateChangeStateType = Parameters<
@@ -80,8 +86,14 @@ const InnerNavigationContainer = (props: { children: React.ReactElement }) => {
 
   const cgnEnabled = useIOSelector(isCGNEnabledSelector);
   const isFimsEnabled = useIOSelector(isFIMSEnabledSelector) && fimsEnabled;
+  const isNewWalletSectionEnabled = useIOSelector(
+    isNewWalletSectionEnabledSelector
+  );
 
-  const linking: LinkingOptions = {
+  // Dark/Light Mode
+  const { themeType } = useIOThemeContext();
+
+  const linking: LinkingOptions<AppParamsList> = {
     enabled: !isTestEnv, // disable linking in test env
     prefixes: [IO_INTERNAL_LINK_PREFIX, IO_UNIVERSAL_LINK_PREFIX],
     config: {
@@ -92,7 +104,11 @@ const InnerNavigationContainer = (props: { children: React.ReactElement }) => {
           screens: {
             [MESSAGES_ROUTES.MESSAGES_HOME]: "messages",
             [ROUTES.WALLET_HOME]: "wallet",
-            [ROUTES.SERVICES_HOME]: "services",
+            [SERVICES_ROUTES.SERVICES_HOME]: "services",
+            // [ROUTES.BARCODE_SCAN]: "scan",
+            ...(isNewWalletSectionEnabled
+              ? { [ROUTES.PAYMENTS_HOME]: "payments" }
+              : {}),
             [ROUTES.PROFILE_MAIN]: "profile"
           }
         },
@@ -112,16 +128,18 @@ const InnerNavigationContainer = (props: { children: React.ReactElement }) => {
               "card-onboarding-attempts"
           }
         },
-        [ROUTES.SERVICES_NAVIGATOR]: {
+        [SERVICES_ROUTES.SERVICES_NAVIGATOR]: {
           path: "services",
           screens: {
-            [ROUTES.SERVICE_DETAIL]: {
+            [SERVICES_ROUTES.SERVICE_DETAIL]: {
               path: "service-detail",
               parse: {
                 activate: activate => activate === "true"
               }
             },
-            ...(myPortalEnabled && { [ROUTES.SERVICE_WEBVIEW]: "webview" })
+            ...(myPortalEnabled && {
+              [SERVICES_ROUTES.SERVICE_WEBVIEW]: "webview"
+            })
           }
         },
         ...fciLinkingOptions,
@@ -136,7 +154,9 @@ const InnerNavigationContainer = (props: { children: React.ReactElement }) => {
 
   return (
     <NavigationContainer
-      theme={IONavigationLightTheme}
+      theme={
+        themeType === "light" ? IONavigationLightTheme : IONavigationDarkTheme
+      }
       ref={navigationRef}
       linking={linking}
       fallback={<LoadingSpinnerOverlay isLoading={true} />}
diff --git a/ts/navigation/AuthenticatedStackNavigator.tsx b/ts/navigation/AuthenticatedStackNavigator.tsx
index b057251f2f1..50d1a59d32f 100644
--- a/ts/navigation/AuthenticatedStackNavigator.tsx
+++ b/ts/navigation/AuthenticatedStackNavigator.tsx
@@ -2,7 +2,7 @@ import {
   createStackNavigator,
   TransitionPresets
 } from "@react-navigation/stack";
-import * as React from "react";
+import React from "react";
 import WorkunitGenericFailure from "../components/error/WorkunitGenericFailure";
 import { fimsEnabled } from "../config";
 import { BarcodeScanScreen } from "../features/barcode/screens/BarcodeScanScreen";
@@ -44,24 +44,24 @@ import {
   IDPayUnsubscriptionRoutes
 } from "../features/idpay/unsubscription/navigation/navigator";
 import UnsupportedDeviceScreen from "../features/lollipop/screens/UnsupportedDeviceScreen";
+import { MessagesStackNavigator } from "../features/messages/navigation/MessagesNavigator";
+import { MESSAGES_ROUTES } from "../features/messages/navigation/routes";
+import { WalletNavigator as NewWalletNavigator } from "../features/newWallet/navigation";
+import { WalletRoutes as NewWalletRoutes } from "../features/newWallet/navigation/routes";
+import { WalletBarcodeNavigator } from "../features/payments/barcode/navigation/navigator";
+import { PaymentsBarcodeRoutes } from "../features/payments/barcode/navigation/routes";
+import { PaymentsCheckoutNavigator } from "../features/payments/checkout/navigation/navigator";
+import { PaymentsCheckoutRoutes } from "../features/payments/checkout/navigation/routes";
+import { PaymentsMethodDetailsNavigator } from "../features/payments/details/navigation/navigator";
+import { PaymentsMethodDetailsRoutes } from "../features/payments/details/navigation/routes";
+import { PaymentsOnboardingNavigator } from "../features/payments/onboarding/navigation/navigator";
+import { PaymentsOnboardingRoutes } from "../features/payments/onboarding/navigation/routes";
+import { PaymentsTransactionNavigator } from "../features/payments/transaction/navigation/navigator";
+import { PaymentsTransactionRoutes } from "../features/payments/transaction/navigation/routes";
+import ServicesNavigator from "../features/services/navigation/navigator";
+import { SERVICES_ROUTES } from "../features/services/navigation/routes";
 import UADONATION_ROUTES from "../features/uaDonations/navigation/routes";
 import { UAWebViewScreen } from "../features/uaDonations/screens/UAWebViewScreen";
-import { WalletBarcodeNavigator } from "../features/walletV3/barcode/navigation/navigator";
-import { WalletBarcodeRoutes } from "../features/walletV3/barcode/navigation/routes";
-import {
-  WalletDetailsNavigator,
-  WalletDetailsRoutes
-} from "../features/walletV3/details/navigation/navigator";
-import {
-  WalletOnboardingNavigator,
-  WalletOnboardingRoutes
-} from "../features/walletV3/onboarding/navigation/navigator";
-import { WalletPaymentNavigator } from "../features/walletV3/payment/navigation/navigator";
-import { WalletPaymentRoutes } from "../features/walletV3/payment/navigation/routes";
-import {
-  WalletTransactionNavigator,
-  WalletTransactionRoutes
-} from "../features/walletV3/transaction/navigation/navigator";
 import { ZendeskStackNavigator } from "../features/zendesk/navigation/navigator";
 import ZENDESK_ROUTES from "../features/zendesk/navigation/routes";
 import { GalleryPermissionInstructionsScreen } from "../screens/misc/GalleryPermissionInstructionsScreen";
@@ -73,15 +73,13 @@ import {
   isFIMSEnabledSelector,
   isIdPayEnabledSelector
 } from "../store/reducers/backendStatus";
+import { isNewWalletSectionEnabledSelector } from "../store/reducers/persistedPreferences";
 import { isGestureEnabled } from "../utils/navigation";
-import { MessagesStackNavigator } from "../features/messages/navigation/MessagesNavigator";
-import { MESSAGES_ROUTES } from "../features/messages/navigation/routes";
 import CheckEmailNavigator from "./CheckEmailNavigator";
 import OnboardingNavigator from "./OnboardingNavigator";
 import { AppParamsList } from "./params/AppParamsList";
 import ProfileStackNavigator from "./ProfileNavigator";
 import ROUTES from "./routes";
-import ServicesNavigator from "./ServicesNavigator";
 import { MainTabNavigator } from "./TabNavigator";
 import WalletNavigator from "./WalletNavigator";
 
@@ -97,14 +95,23 @@ const AuthenticatedStackNavigator = () => {
   const cgnEnabled = useIOSelector(isCGNEnabledSelector);
   const isFciEnabled = useIOSelector(isFciEnabledSelector);
   const isIdPayEnabled = useIOSelector(isIdPayEnabledSelector);
+  const isNewWalletSectionEnabled = useIOSelector(
+    isNewWalletSectionEnabledSelector
+  );
 
   return (
     <Stack.Navigator
       initialRouteName={ROUTES.MAIN}
-      headerMode={"screen"}
-      screenOptions={{ gestureEnabled: false }}
+      screenOptions={{
+        gestureEnabled: false,
+        headerMode: "screen"
+      }}
     >
-      <Stack.Screen name={ROUTES.MAIN} component={MainTabNavigator} />
+      <Stack.Screen
+        name={ROUTES.MAIN}
+        options={{ headerShown: false }}
+        component={MainTabNavigator}
+      />
 
       <Stack.Screen
         name={ROUTES.ONBOARDING}
@@ -129,13 +136,21 @@ const AuthenticatedStackNavigator = () => {
         options={hideHeaderOptions}
         component={MessagesStackNavigator}
       />
+      {isNewWalletSectionEnabled ? (
+        <Stack.Screen
+          name={NewWalletRoutes.WALLET_NAVIGATOR}
+          options={hideHeaderOptions}
+          component={NewWalletNavigator}
+        />
+      ) : (
+        <Stack.Screen
+          name={ROUTES.WALLET_NAVIGATOR}
+          options={hideHeaderOptions}
+          component={WalletNavigator}
+        />
+      )}
       <Stack.Screen
-        name={ROUTES.WALLET_NAVIGATOR}
-        options={hideHeaderOptions}
-        component={WalletNavigator}
-      />
-      <Stack.Screen
-        name={ROUTES.SERVICES_NAVIGATOR}
+        name={SERVICES_ROUTES.SERVICES_NAVIGATOR}
         options={hideHeaderOptions}
         component={ServicesNavigator}
       />
@@ -287,36 +302,36 @@ const AuthenticatedStackNavigator = () => {
       )}
 
       <Stack.Screen
-        name={WalletOnboardingRoutes.WALLET_ONBOARDING_MAIN}
-        component={WalletOnboardingNavigator}
+        name={PaymentsOnboardingRoutes.PAYMENT_ONBOARDING_NAVIGATOR}
+        component={PaymentsOnboardingNavigator}
         options={{ gestureEnabled: isGestureEnabled, ...hideHeaderOptions }}
       />
       <Stack.Screen
-        name={WalletPaymentRoutes.WALLET_PAYMENT_MAIN}
-        component={WalletPaymentNavigator}
+        name={PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR}
+        component={PaymentsCheckoutNavigator}
         options={{
           gestureEnabled: isGestureEnabled,
           ...hideHeaderOptions
         }}
       />
       <Stack.Screen
-        name={WalletDetailsRoutes.WALLET_DETAILS_MAIN}
-        component={WalletDetailsNavigator}
+        name={PaymentsMethodDetailsRoutes.PAYMENT_METHOD_DETAILS_NAVIGATOR}
+        component={PaymentsMethodDetailsNavigator}
         options={{
           gestureEnabled: isGestureEnabled,
           ...hideHeaderOptions
         }}
       />
       <Stack.Screen
-        name={WalletTransactionRoutes.WALLET_TRANSACTION_MAIN}
-        component={WalletTransactionNavigator}
+        name={PaymentsTransactionRoutes.PAYMENT_TRANSACTION_NAVIGATOR}
+        component={PaymentsTransactionNavigator}
         options={{
           gestureEnabled: isGestureEnabled,
           ...hideHeaderOptions
         }}
       />
       <Stack.Screen
-        name={WalletBarcodeRoutes.WALLET_BARCODE_MAIN}
+        name={PaymentsBarcodeRoutes.PAYMENT_BARCODE_NAVIGATOR}
         component={WalletBarcodeNavigator}
         options={{
           ...TransitionPresets.ModalSlideFromBottomIOS,
diff --git a/ts/navigation/AuthenticationNavigator.tsx b/ts/navigation/AuthenticationNavigator.tsx
index af41d43c234..2df58a7cb2f 100644
--- a/ts/navigation/AuthenticationNavigator.tsx
+++ b/ts/navigation/AuthenticationNavigator.tsx
@@ -1,6 +1,16 @@
+import {
+  TransitionPresets,
+  createStackNavigator
+} from "@react-navigation/stack";
 import * as React from "react";
-import { createStackNavigator } from "@react-navigation/stack";
+import { IOVisualCostants } from "@pagopa/io-app-design-system";
+import CieLoginConfigScreen from "../features/cieLogin/components/screens/CieLoginConfigScreen";
 import CardSelectionScreen from "../screens/authentication/CardSelectionScreen";
+import IdpLoginScreen from "../screens/authentication/IdpLoginScreen";
+import IdpSelectionScreen from "../screens/authentication/IdpSelectionScreen";
+import { LandingScreen } from "../screens/authentication/LandingScreen";
+import NewOptInScreen from "../screens/authentication/NewOptInScreen";
+import TestAuthenticationScreen from "../screens/authentication/TestAuthenticationScreen";
 import CieAuthorizeDataUsageScreen from "../screens/authentication/cie/CieAuthorizeDataUsageScreen";
 import CieCardReaderScreen from "../screens/authentication/cie/CieCardReaderScreen";
 import CieConsentDataUsageScreen from "../screens/authentication/cie/CieConsentDataUsageScreen";
@@ -8,33 +18,43 @@ import CieExpiredOrInvalidScreen from "../screens/authentication/cie/CieExpiredO
 import CiePinLockedTemporarilyScreen from "../screens/authentication/cie/CiePinLockedTemporarilyScreen";
 import CiePinScreen from "../screens/authentication/cie/CiePinScreen";
 import CieWrongCiePinScreen from "../screens/authentication/cie/CieWrongCiePinScreen";
-import IdpLoginScreen from "../screens/authentication/IdpLoginScreen";
-import IdpSelectionScreen from "../screens/authentication/IdpSelectionScreen";
-import { LandingScreen } from "../screens/authentication/LandingScreen";
-import TestAuthenticationScreen from "../screens/authentication/TestAuthenticationScreen";
-import MarkdownScreen from "../screens/development/MarkdownScreen";
 import { AuthSessionPage } from "../screens/authentication/idpAuthSessionHandler";
-import CieLoginConfigScreen from "../features/cieLogin/components/screens/CieLoginConfigScreen";
-import NewOptInScreen from "../screens/authentication/NewOptInScreen";
+import CieNotSupported from "../components/cie/CieNotSupported";
+import RootedDeviceModal from "../screens/modal/RootedDeviceModal";
 import { AuthenticationParamsList } from "./params/AuthenticationParamsList";
 import ROUTES from "./routes";
+import CloseButton from "./components/CloseButton";
 
 const Stack = createStackNavigator<AuthenticationParamsList>();
 
 const AuthenticationStackNavigator = () => (
   <Stack.Navigator
     initialRouteName={ROUTES.AUTHENTICATION_LANDING}
-    headerMode={"none"}
-    screenOptions={{ gestureEnabled: true }}
+    screenOptions={{ gestureEnabled: true, headerShown: false }}
   >
     <Stack.Screen
       name={ROUTES.AUTHENTICATION_LANDING}
       component={LandingScreen}
+      options={{ headerShown: true }}
     />
 
+    <Stack.Group
+      screenOptions={{
+        gestureEnabled: false,
+        headerShown: false,
+        ...TransitionPresets.ModalSlideFromBottomIOS
+      }}
+    >
+      <Stack.Screen
+        name={ROUTES.AUTHENTICATION_ROOTED_DEVICE}
+        component={RootedDeviceModal}
+      />
+    </Stack.Group>
+
     <Stack.Screen
       name={ROUTES.AUTHENTICATION_OPT_IN}
       component={NewOptInScreen}
+      options={{ headerShown: true }}
     />
 
     <Stack.Screen
@@ -62,8 +82,6 @@ const AuthenticationStackNavigator = () => (
       component={TestAuthenticationScreen}
     />
 
-    <Stack.Screen name={ROUTES.MARKDOWN} component={MarkdownScreen} />
-
     <Stack.Screen
       name={ROUTES.CIE_EXPIRED_SCREEN}
       component={CieExpiredOrInvalidScreen}
@@ -100,6 +118,27 @@ const AuthenticationStackNavigator = () => (
       name={ROUTES.CIE_PIN_TEMP_LOCKED_SCREEN}
       component={CiePinLockedTemporarilyScreen}
     />
+
+    <Stack.Group
+      screenOptions={{
+        presentation: "modal",
+        headerLeft: () => null,
+        headerTitle: () => null,
+        headerRight: CloseButton,
+        headerStyle: {
+          height: IOVisualCostants.headerHeight,
+          // shadowOpacity and elevation are set to 0 to hide the shadow under the header
+          elevation: 0,
+          shadowOpacity: 0
+        },
+        headerShown: true
+      }}
+    >
+      <Stack.Screen
+        name={ROUTES.CIE_NOT_SUPPORTED}
+        component={CieNotSupported}
+      />
+    </Stack.Group>
   </Stack.Navigator>
 );
 
diff --git a/ts/navigation/CheckEmailNavigator.tsx b/ts/navigation/CheckEmailNavigator.tsx
index 87d0962c4ea..2a3e0866b92 100644
--- a/ts/navigation/CheckEmailNavigator.tsx
+++ b/ts/navigation/CheckEmailNavigator.tsx
@@ -9,21 +9,22 @@ const Stack = createStackNavigator();
 /**
  * The onboarding related stack of screens of the application.
  */
-const navigator = () => (
+const CheckEmailNavigator = () => (
   <Stack.Navigator
     initialRouteName={ROUTES.CHECK_EMAIL_NOT_VERIFIED}
-    headerMode={"none"}
-    screenOptions={{ gestureEnabled: isGestureEnabled }}
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerShown: false }}
   >
     <Stack.Screen
+      options={{ headerShown: true }}
       name={ROUTES.CHECK_EMAIL_NOT_VERIFIED}
       component={ValidateEmailScreen}
     />
     <Stack.Screen
+      options={{ headerShown: true }}
       name={ROUTES.CHECK_EMAIL_ALREADY_TAKEN}
       component={EmailAlreadyTakenScreen}
     />
   </Stack.Navigator>
 );
 
-export default navigator;
+export default CheckEmailNavigator;
diff --git a/ts/navigation/NavigationService.ts b/ts/navigation/NavigationService.ts
index 3679e48dd66..7ac82487eae 100644
--- a/ts/navigation/NavigationService.ts
+++ b/ts/navigation/NavigationService.ts
@@ -5,8 +5,10 @@ import {
 import { Route } from "@react-navigation/routers";
 import React from "react";
 import { mixpanelTrack } from "../mixpanel";
+import { AppParamsList } from "./params/AppParamsList";
 
-export const navigationRef = React.createRef<NavigationContainerRef>();
+export const navigationRef =
+  React.createRef<NavigationContainerRef<AppParamsList>>();
 // eslint-disable-next-line functional/no-let
 let isNavigationReady: boolean = false;
 
@@ -37,13 +39,27 @@ const withLogging =
   };
 
 // NavigationContainerComponent
-const getNavigator = (): React.RefObject<NavigationContainerRef> =>
-  navigationRef;
+const getNavigator = (): React.RefObject<
+  NavigationContainerRef<AppParamsList>
+> => navigationRef;
 
 // NavigationParams
-const navigate = (routeName: string, params?: any) => {
+// This definition comes from react-navigation navigate definition.
+type NavigationParams<T extends keyof AppParamsList> = T extends unknown
+  ? // This condition checks if the params are optional,
+    // which means it's either undefined or a union with undefined
+    undefined extends AppParamsList[T]
+    ?
+        | [screen: T] // if the params are optional, we don't have to provide it
+        | [screen: T, params: AppParamsList[T]]
+    : [screen: T, params: AppParamsList[T]]
+  : never;
+
+const navigate = <T extends keyof AppParamsList>(
+  ...args: NavigationParams<T>
+) => {
   if (isNavigationReady) {
-    navigationRef.current?.navigate(routeName, params);
+    navigationRef.current?.navigate(...args);
   }
 };
 
diff --git a/ts/navigation/NotAuthenticatedStackNavigator.tsx b/ts/navigation/NotAuthenticatedStackNavigator.tsx
index 59b6338b717..8df6174f0d0 100644
--- a/ts/navigation/NotAuthenticatedStackNavigator.tsx
+++ b/ts/navigation/NotAuthenticatedStackNavigator.tsx
@@ -13,8 +13,7 @@ const Stack = createStackNavigator<AppParamsList>();
 const NotAuthenticatedStackNavigator = () => (
   <Stack.Navigator
     initialRouteName={ROUTES.AUTHENTICATION}
-    headerMode={"none"}
-    screenOptions={{ gestureEnabled: false }}
+    screenOptions={{ gestureEnabled: false, headerShown: false }}
   >
     <Stack.Screen
       name={ROUTES.AUTHENTICATION}
diff --git a/ts/navigation/OnboardingNavigator.tsx b/ts/navigation/OnboardingNavigator.tsx
index a70b89842c4..e875501196b 100644
--- a/ts/navigation/OnboardingNavigator.tsx
+++ b/ts/navigation/OnboardingNavigator.tsx
@@ -1,9 +1,6 @@
 import { createStackNavigator } from "@react-navigation/stack";
 import * as React from "react";
-import { isEmailUniquenessValidationEnabledSelector } from "../features/fastLogin/store/selectors";
 import OnboardingCompletedScreen from "../screens/onboarding/OnboardingCompletedScreen";
-import OnboardingEmailInsertScreen from "../screens/onboarding/OnboardingEmailInsertScreen";
-import OnboardingEmailReadScreen from "../screens/onboarding/OnboardingEmailReadScreen";
 import OnboardingNotificationsInfoScreenConsent from "../screens/onboarding/OnboardingNotificationsInfoScreenConsent";
 import OnboardingNotificationsPreferencesScreen from "../screens/onboarding/OnboardingNotificationsPreferencesScreen";
 import OnboardingPinScreen from "../screens/onboarding/OnboardingPinScreen";
@@ -14,9 +11,9 @@ import ServicePreferenceCompleteScreen from "../screens/onboarding/ServicePrefer
 import FingerprintScreen from "../screens/onboarding/biometric&securityChecks/FingerprintScreen";
 import MissingDeviceBiometricScreen from "../screens/onboarding/biometric&securityChecks/MissingDeviceBiometricScreen";
 import MissingDevicePinScreen from "../screens/onboarding/biometric&securityChecks/MissingDevicePinScreen";
-import CduEmailInsertScreen from "../screens/profile/CduEmailInsertScreen";
-import { useIOSelector } from "../store/hooks";
 import { isGestureEnabled } from "../utils/navigation";
+import EmailValidationSendEmailScreen from "../screens/profile/EmailValidationSendEmailScreen";
+import EmailInsertScreen from "../screens/profile/EmailInsertScreen";
 import { OnboardingParamsList } from "./params/OnboardingParamsList";
 import ROUTES from "./routes";
 
@@ -24,88 +21,76 @@ const Stack = createStackNavigator<OnboardingParamsList>();
 /**
  * The onboarding related stack of screens of the application.
  */
-const OnboardingNavigator = () => {
-  const isEmailUniquenessValidationEnabled = useIOSelector(
-    isEmailUniquenessValidationEnabledSelector
-  );
-  return (
-    <Stack.Navigator
-      initialRouteName={ROUTES.ONBOARDING_SHARE_DATA}
-      screenOptions={{ gestureEnabled: isGestureEnabled }}
-    >
-      <Stack.Screen
-        name={ROUTES.ONBOARDING_SHARE_DATA}
-        component={OnboardingShareDataScreen}
-      />
-      <Stack.Screen
-        name={ROUTES.ONBOARDING_SERVICES_PREFERENCE}
-        component={OnboardingServicesPreferenceScreen}
-      />
-      <Stack.Screen
-        options={{ headerShown: false }}
-        name={ROUTES.ONBOARDING_SERVICES_PREFERENCE_COMPLETE}
-        component={ServicePreferenceCompleteScreen}
-      />
-      <Stack.Screen
-        options={{ headerShown: false }}
-        name={ROUTES.ONBOARDING_TOS}
-        component={OnboardingTosScreen}
-      />
-      <Stack.Screen
-        options={{ headerShown: false }}
-        name={ROUTES.ONBOARDING_PIN}
-        component={OnboardingPinScreen}
-      />
-      <Stack.Screen
-        options={{ headerShown: false }}
-        name={ROUTES.ONBOARDING_FINGERPRINT}
-        component={FingerprintScreen}
-      />
-      <Stack.Screen
-        options={{ headerShown: false }}
-        name={ROUTES.ONBOARDING_MISSING_DEVICE_PIN}
-        component={MissingDevicePinScreen}
-      />
-      <Stack.Screen
-        options={{ headerShown: false }}
-        name={ROUTES.ONBOARDING_MISSING_DEVICE_BIOMETRIC}
-        component={MissingDeviceBiometricScreen}
-      />
-      <Stack.Screen
-        options={{ headerShown: false }}
-        name={ROUTES.ONBOARDING_INSERT_EMAIL_SCREEN}
-        component={OnboardingEmailInsertScreen}
-      />
-      {isEmailUniquenessValidationEnabled ? (
-        <Stack.Screen
-          options={{ headerShown: false }}
-          name={ROUTES.ONBOARDING_READ_EMAIL_SCREEN}
-          component={CduEmailInsertScreen}
-        />
-      ) : (
-        <Stack.Screen
-          options={{ headerShown: false }}
-          name={ROUTES.ONBOARDING_READ_EMAIL_SCREEN}
-          component={OnboardingEmailReadScreen}
-        />
-      )}
-      <Stack.Screen
-        options={{ headerShown: false }}
-        name={ROUTES.ONBOARDING_COMPLETED}
-        component={OnboardingCompletedScreen}
-      />
-      <Stack.Screen
-        options={{ headerShown: false }}
-        name={ROUTES.ONBOARDING_NOTIFICATIONS_PREFERENCES}
-        component={OnboardingNotificationsPreferencesScreen}
-      />
-      <Stack.Screen
-        options={{ headerShown: false }}
-        name={ROUTES.ONBOARDING_NOTIFICATIONS_INFO_SCREEN_CONSENT}
-        component={OnboardingNotificationsInfoScreenConsent}
-      />
-    </Stack.Navigator>
-  );
-};
+const OnboardingNavigator = () => (
+  <Stack.Navigator
+    initialRouteName={ROUTES.ONBOARDING_SHARE_DATA}
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerMode: "screen" }}
+  >
+    <Stack.Screen
+      name={ROUTES.ONBOARDING_SHARE_DATA}
+      component={OnboardingShareDataScreen}
+    />
+    <Stack.Screen
+      name={ROUTES.ONBOARDING_SERVICES_PREFERENCE}
+      component={OnboardingServicesPreferenceScreen}
+    />
+    <Stack.Screen
+      options={{ headerShown: false }}
+      name={ROUTES.ONBOARDING_SERVICES_PREFERENCE_COMPLETE}
+      component={ServicePreferenceCompleteScreen}
+    />
+    <Stack.Screen
+      options={{ headerShown: false }}
+      name={ROUTES.ONBOARDING_TOS}
+      component={OnboardingTosScreen}
+    />
+    <Stack.Screen
+      options={{ headerShown: false }}
+      name={ROUTES.ONBOARDING_PIN}
+      component={OnboardingPinScreen}
+    />
+    <Stack.Screen
+      options={{ headerShown: false }}
+      name={ROUTES.ONBOARDING_FINGERPRINT}
+      component={FingerprintScreen}
+    />
+    <Stack.Screen
+      options={{ headerShown: false }}
+      name={ROUTES.ONBOARDING_MISSING_DEVICE_PIN}
+      component={MissingDevicePinScreen}
+    />
+    <Stack.Screen
+      options={{ headerShown: false }}
+      name={ROUTES.ONBOARDING_MISSING_DEVICE_BIOMETRIC}
+      component={MissingDeviceBiometricScreen}
+    />
+    <Stack.Screen
+      options={{ gestureEnabled: false }}
+      name={ROUTES.ONBOARDING_INSERT_EMAIL_SCREEN}
+      component={EmailInsertScreen}
+    />
+
+    <Stack.Screen
+      options={{ gestureEnabled: false, headerShown: false }}
+      name={ROUTES.ONBOARDING_EMAIL_VERIFICATION_SCREEN}
+      component={EmailValidationSendEmailScreen}
+    />
+    <Stack.Screen
+      options={{ headerShown: false }}
+      name={ROUTES.ONBOARDING_COMPLETED}
+      component={OnboardingCompletedScreen}
+    />
+    <Stack.Screen
+      options={{ headerShown: false }}
+      name={ROUTES.ONBOARDING_NOTIFICATIONS_PREFERENCES}
+      component={OnboardingNotificationsPreferencesScreen}
+    />
+    <Stack.Screen
+      options={{ headerShown: false }}
+      name={ROUTES.ONBOARDING_NOTIFICATIONS_INFO_SCREEN_CONSENT}
+      component={OnboardingNotificationsInfoScreenConsent}
+    />
+  </Stack.Navigator>
+);
 
 export default OnboardingNavigator;
diff --git a/ts/navigation/ProfileNavigator.tsx b/ts/navigation/ProfileNavigator.tsx
index 2775df01116..4570f5208d6 100644
--- a/ts/navigation/ProfileNavigator.tsx
+++ b/ts/navigation/ProfileNavigator.tsx
@@ -3,15 +3,11 @@ import * as React from "react";
 import LogoutScreen from "../components/screens/LogoutScreen";
 import { remindersOptInEnabled } from "../config";
 import { DesignSystemNavigator } from "../features/design-system/navigation/navigator";
-import { isEmailUniquenessValidationEnabledSelector } from "../features/fastLogin/store/selectors";
 import LollipopPlayground from "../features/lollipop/playgrounds/LollipopPlayground";
 import CalendarsPreferencesScreen from "../screens/profile/CalendarsPreferencesScreen";
-import CduEmailInsertScreen from "../screens/profile/CduEmailInsertScreen";
 import CgnLandingPlayground from "../screens/profile/CgnLandingPlayground";
 import DownloadProfileDataScreen from "../screens/profile/DownloadProfileDataScreen";
 import EmailForwardingScreen from "../screens/profile/EmailForwardingScreen";
-import EmailInsertScreen from "../screens/profile/EmailInsertScreen";
-import EmailReadScreen from "../screens/profile/EmailReadScreen";
 import FiscalCodeScreen from "../screens/profile/FiscalCodeScreen";
 import LanguagesPreferencesScreen from "../screens/profile/LanguagesPreferencesScreen";
 import { NotificationsPreferencesScreen } from "../screens/profile/NotificationsPreferencesScreen";
@@ -31,10 +27,11 @@ import WebPlayground from "../screens/profile/WebPlayground";
 import { IdPayCodePlayGround } from "../screens/profile/playgrounds/IdPayCodePlayground";
 import IdPayOnboardingPlayground from "../screens/profile/playgrounds/IdPayOnboardingPlayground";
 import MarkdownPlayground from "../screens/profile/playgrounds/MarkdownPlayground";
+import { WalletPaymentPlayground } from "../screens/profile/playgrounds/WalletPaymentPlayground";
 import WalletPlayground from "../screens/profile/playgrounds/WalletPlayground";
-import { useIOSelector } from "../store/hooks";
 import { isGestureEnabled } from "../utils/navigation";
-import { WalletPaymentPlayground } from "../screens/profile/playgrounds/WalletPaymentPlayground";
+import EmailValidationSendEmailScreen from "../screens/profile/EmailValidationSendEmailScreen";
+import EmailInsertScreen from "../screens/profile/EmailInsertScreen";
 import { ProfileParamsList } from "./params/ProfileParamsList";
 import ROUTES from "./routes";
 
@@ -43,193 +40,145 @@ const Stack = createStackNavigator<ProfileParamsList>();
 /**
  * A navigator for all the screens of the Profile section
  */
-const ProfileStackNavigator = () => {
-  const isEmailUniquenessValidationEnabled = useIOSelector(
-    isEmailUniquenessValidationEnabledSelector
-  );
-
-  return (
-    <Stack.Navigator
-      initialRouteName={ROUTES.PROFILE_DATA}
-      headerMode={"screen"}
-      screenOptions={{ gestureEnabled: isGestureEnabled }}
-    >
-      <Stack.Screen name={ROUTES.PROFILE_DATA} component={ProfileDataScreen} />
-      <Stack.Screen
-        name={ROUTES.PROFILE_PRIVACY_MAIN}
-        component={PrivacyMainScreen}
-      />
-      <Stack.Screen name={ROUTES.PROFILE_PRIVACY} component={TosScreen} />
-      <Stack.Screen
-        name={ROUTES.PROFILE_PRIVACY_SHARE_DATA}
-        component={ShareDataScreen}
-      />
-      <Stack.Screen name={ROUTES.PROFILE_SECURITY} component={SecurityScreen} />
-      <Stack.Screen
-        name={ROUTES.PROFILE_PREFERENCES_SERVICES}
-        component={ServicesPreferenceScreen}
-      />
-      <Stack.Screen
-        options={{
-          headerShown: false
-        }}
-        name={ROUTES.PROFILE_PREFERENCES_EMAIL_FORWARDING}
-        component={EmailForwardingScreen}
-      />
-      <Stack.Screen
-        name={ROUTES.PROFILE_PREFERENCES_HOME}
-        component={PreferencesScreen}
-      />
-      <Stack.Screen
-        name={ROUTES.PROFILE_PREFERENCES_CALENDAR}
-        component={CalendarsPreferencesScreen}
-      />
-      <Stack.Screen
-        name={ROUTES.PROFILE_PREFERENCES_LANGUAGE}
-        component={LanguagesPreferencesScreen}
-      />
-      <Stack.Screen
-        name={ROUTES.PROFILE_ABOUT_APP}
-        component={ProfileAboutApp}
-      />
-      <Stack.Screen
-        options={{
-          headerShown: false
-        }}
-        name={ROUTES.PROFILE_LOGOUT}
-        component={LogoutScreen}
-      />
-      <Stack.Screen
-        options={{
-          headerShown: false
-        }}
-        name={ROUTES.PROFILE_FISCAL_CODE}
-        component={FiscalCodeScreen}
-      />
-      <Stack.Screen
-        options={{
-          headerShown: false
-        }}
-        name={ROUTES.READ_EMAIL_SCREEN}
-        component={EmailReadScreen}
-      />
-      {isEmailUniquenessValidationEnabled ? (
-        <Stack.Screen
-          options={{
-            headerShown: false
-          }}
-          name={ROUTES.INSERT_EMAIL_SCREEN}
-          component={CduEmailInsertScreen}
-        />
-      ) : (
-        <Stack.Screen
-          options={{
-            headerShown: false
-          }}
-          name={ROUTES.INSERT_EMAIL_SCREEN}
-          component={EmailInsertScreen}
-        />
-      )}
-      <Stack.Screen
-        options={{
-          headerShown: false
-        }}
-        name={ROUTES.PIN_SCREEN}
-        component={PinScreen}
-      />
-      <Stack.Screen
-        options={{
-          headerShown: false
-        }}
-        name={ROUTES.PROFILE_DOWNLOAD_DATA}
-        component={DownloadProfileDataScreen}
-      />
-      <Stack.Screen
-        options={{
-          headerShown: false
-        }}
-        name={ROUTES.MARKDOWN_PLAYGROUND}
-        component={MarkdownPlayground}
-      />
-      <Stack.Screen
-        options={{
-          headerShown: false
-        }}
-        name={ROUTES.DESIGN_SYSTEM}
-        component={DesignSystemNavigator}
-      />
-      <Stack.Screen
-        options={{
-          headerShown: false
-        }}
-        name={ROUTES.WEB_PLAYGROUND}
-        component={WebPlayground}
-      />
-      <Stack.Screen
-        options={{
-          headerShown: false
-        }}
-        name={ROUTES.LOLLIPOP_PLAYGROUND}
-        component={LollipopPlayground}
-      />
-      <Stack.Screen
-        options={{
-          headerShown: false
-        }}
-        name={ROUTES.CGN_LANDING_PLAYGROUND}
-        component={CgnLandingPlayground}
-      />
-      <Stack.Screen
-        options={{
-          headerShown: false
-        }}
-        name={ROUTES.IDPAY_ONBOARDING_PLAYGROUND}
-        component={IdPayOnboardingPlayground}
-      />
-      <Stack.Screen
-        options={{
-          headerShown: false
-        }}
-        name={ROUTES.IDPAY_CODE_PLAYGROUND}
-        component={IdPayCodePlayGround}
-      />
-      <Stack.Screen
-        options={{
-          headerShown: false
-        }}
-        name={ROUTES.WALLET_PLAYGROUND}
-        component={WalletPlayground}
-      />
-      <Stack.Screen
-        name={ROUTES.WALLET_PAYMENT_PLAYGROUND}
-        component={WalletPaymentPlayground}
-      />
-      <Stack.Screen
-        name={ROUTES.PROFILE_REMOVE_ACCOUNT_INFO}
-        component={RemoveAccountInfo}
-      />
-      <Stack.Screen
-        options={{
-          headerShown: false
-        }}
-        name={ROUTES.PROFILE_REMOVE_ACCOUNT_DETAILS}
-        component={RemoveAccountDetails}
-      />
-      <Stack.Screen
-        options={{
-          headerShown: false
-        }}
-        name={ROUTES.PROFILE_REMOVE_ACCOUNT_SUCCESS}
-        component={RemoveAccountSuccess}
-      />
-      {remindersOptInEnabled && (
-        <Stack.Screen
-          name={ROUTES.PROFILE_PREFERENCES_NOTIFICATIONS}
-          component={NotificationsPreferencesScreen}
-        />
-      )}
-    </Stack.Navigator>
-  );
-};
+const ProfileStackNavigator = () => (
+  <Stack.Navigator
+    initialRouteName={ROUTES.PROFILE_DATA}
+    screenOptions={{ gestureEnabled: isGestureEnabled, headerMode: "screen" }}
+  >
+    <Stack.Screen name={ROUTES.PROFILE_DATA} component={ProfileDataScreen} />
+    <Stack.Screen
+      name={ROUTES.PROFILE_PRIVACY_MAIN}
+      component={PrivacyMainScreen}
+    />
+    <Stack.Screen name={ROUTES.PROFILE_PRIVACY} component={TosScreen} />
+    <Stack.Screen
+      name={ROUTES.PROFILE_PRIVACY_SHARE_DATA}
+      component={ShareDataScreen}
+    />
+    <Stack.Screen name={ROUTES.PROFILE_SECURITY} component={SecurityScreen} />
+    <Stack.Screen
+      name={ROUTES.PROFILE_PREFERENCES_SERVICES}
+      component={ServicesPreferenceScreen}
+    />
+    <Stack.Screen
+      options={{
+        headerShown: false
+      }}
+      name={ROUTES.PROFILE_PREFERENCES_EMAIL_FORWARDING}
+      component={EmailForwardingScreen}
+    />
+    <Stack.Screen
+      name={ROUTES.PROFILE_PREFERENCES_HOME}
+      component={PreferencesScreen}
+    />
+    <Stack.Screen
+      name={ROUTES.PROFILE_PREFERENCES_CALENDAR}
+      component={CalendarsPreferencesScreen}
+    />
+    <Stack.Screen
+      name={ROUTES.PROFILE_PREFERENCES_LANGUAGE}
+      component={LanguagesPreferencesScreen}
+    />
+    <Stack.Screen name={ROUTES.PROFILE_ABOUT_APP} component={ProfileAboutApp} />
+    <Stack.Screen
+      options={{
+        headerShown: false
+      }}
+      name={ROUTES.PROFILE_LOGOUT}
+      component={LogoutScreen}
+    />
+    <Stack.Screen
+      options={{
+        headerShown: false
+      }}
+      name={ROUTES.PROFILE_FISCAL_CODE}
+      component={FiscalCodeScreen}
+    />
+    <Stack.Screen
+      options={{ gestureEnabled: false }}
+      name={ROUTES.INSERT_EMAIL_SCREEN}
+      component={EmailInsertScreen}
+    />
+    <Stack.Screen
+      options={{ gestureEnabled: false, headerShown: false }}
+      name={ROUTES.EMAIL_VERIFICATION_SCREEN}
+      component={EmailValidationSendEmailScreen}
+    />
+    <Stack.Screen
+      options={{
+        headerShown: false
+      }}
+      name={ROUTES.PIN_SCREEN}
+      component={PinScreen}
+    />
+    <Stack.Screen
+      name={ROUTES.PROFILE_DOWNLOAD_DATA}
+      component={DownloadProfileDataScreen}
+    />
+    <Stack.Screen
+      name={ROUTES.MARKDOWN_PLAYGROUND}
+      component={MarkdownPlayground}
+    />
+    <Stack.Screen
+      options={{
+        headerShown: false
+      }}
+      name={ROUTES.DESIGN_SYSTEM}
+      component={DesignSystemNavigator}
+    />
+    <Stack.Screen name={ROUTES.WEB_PLAYGROUND} component={WebPlayground} />
+    <Stack.Screen
+      name={ROUTES.LOLLIPOP_PLAYGROUND}
+      component={LollipopPlayground}
+    />
+    <Stack.Screen
+      name={ROUTES.CGN_LANDING_PLAYGROUND}
+      component={CgnLandingPlayground}
+    />
+    <Stack.Screen
+      options={{
+        headerShown: false
+      }}
+      name={ROUTES.IDPAY_ONBOARDING_PLAYGROUND}
+      component={IdPayOnboardingPlayground}
+    />
+    <Stack.Screen
+      options={{
+        headerShown: false
+      }}
+      name={ROUTES.IDPAY_CODE_PLAYGROUND}
+      component={IdPayCodePlayGround}
+    />
+    <Stack.Screen
+      name={ROUTES.WALLET_PLAYGROUND}
+      component={WalletPlayground}
+    />
+    <Stack.Screen
+      name={ROUTES.WALLET_PAYMENT_PLAYGROUND}
+      component={WalletPaymentPlayground}
+    />
+    <Stack.Screen
+      name={ROUTES.PROFILE_REMOVE_ACCOUNT_INFO}
+      component={RemoveAccountInfo}
+    />
+    <Stack.Screen
+      name={ROUTES.PROFILE_REMOVE_ACCOUNT_DETAILS}
+      component={RemoveAccountDetails}
+    />
+    <Stack.Screen
+      options={{
+        headerShown: false
+      }}
+      name={ROUTES.PROFILE_REMOVE_ACCOUNT_SUCCESS}
+      component={RemoveAccountSuccess}
+    />
+    {remindersOptInEnabled && (
+      <Stack.Screen
+        name={ROUTES.PROFILE_PREFERENCES_NOTIFICATIONS}
+        component={NotificationsPreferencesScreen}
+      />
+    )}
+  </Stack.Navigator>
+);
 
 export default ProfileStackNavigator;
diff --git a/ts/navigation/ServicesHomeTabNavigator.tsx b/ts/navigation/ServicesHomeTabNavigator.tsx
index 34a4e1bab1f..388a1a36613 100644
--- a/ts/navigation/ServicesHomeTabNavigator.tsx
+++ b/ts/navigation/ServicesHomeTabNavigator.tsx
@@ -12,18 +12,17 @@ const Tab = createMaterialTopTabNavigator();
 const ServicesHomeTabNavigator = () => (
   <Tab.Navigator
     initialRouteName="SERVICES_NATIONAL"
-    lazy={true}
-    tabBarPosition="top"
-    tabBarOptions={{
-      activeTintColor: IOColors.blue,
-      inactiveTintColor: IOColors.bluegrey,
-      style: {
+    screenOptions={{
+      lazy: true,
+      tabBarActiveTintColor: IOColors.blue,
+      tabBarInactiveTintColor: IOColors.bluegrey,
+      tabBarStyle: {
         elevation: 0
       },
-      tabStyle: {
+      tabBarItemStyle: {
         height: 40
       },
-      labelStyle: {
+      tabBarLabelStyle: {
         ...makeFontStyleObject("SemiBold"),
         fontSize: Platform.OS === "android" ? 16 : undefined,
         fontWeight: Platform.OS === "android" ? "normal" : "bold",
@@ -31,6 +30,7 @@ const ServicesHomeTabNavigator = () => (
         height: 34
       }
     }}
+    tabBarPosition="top"
   >
     <Tab.Screen
       name={"SERVICES_NATIONAL"}
diff --git a/ts/navigation/ServicesNavigator.tsx b/ts/navigation/ServicesNavigator.tsx
deleted file mode 100644
index db1edc1783e..00000000000
--- a/ts/navigation/ServicesNavigator.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { createStackNavigator } from "@react-navigation/stack";
-import * as React from "react";
-import { myPortalEnabled } from "../config";
-import ServiceDetailsScreen from "../screens/services/ServiceDetailsScreen";
-import ServicesWebviewScreen from "../screens/services/ServicesWebviewScreen";
-import { isGestureEnabled } from "../utils/navigation";
-import ROUTES from "./routes";
-
-const Stack = createStackNavigator();
-
-const ServicesNavigator = () => (
-  <Stack.Navigator
-    initialRouteName={ROUTES.SERVICE_DETAIL}
-    headerMode={"none"}
-    screenOptions={{ gestureEnabled: isGestureEnabled }}
-  >
-    <Stack.Screen
-      name={ROUTES.SERVICE_DETAIL}
-      component={ServiceDetailsScreen}
-    />
-    {myPortalEnabled && (
-      <Stack.Screen
-        name={ROUTES.SERVICE_WEBVIEW}
-        component={ServicesWebviewScreen}
-      />
-    )}
-  </Stack.Navigator>
-);
-
-export default ServicesNavigator;
diff --git a/ts/navigation/TabNavigator.tsx b/ts/navigation/TabNavigator.tsx
index 864b22d6e21..73cb8af02ed 100644
--- a/ts/navigation/TabNavigator.tsx
+++ b/ts/navigation/TabNavigator.tsx
@@ -1,23 +1,28 @@
+import { IOColors } from "@pagopa/io-app-design-system";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { useNavigation } from "@react-navigation/native";
 import * as React from "react";
 import { StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { IOColors } from "@pagopa/io-app-design-system";
-import { makeFontStyleObject } from "../components/core/fonts";
 import LoadingSpinnerOverlay from "../components/LoadingSpinnerOverlay";
+import { makeFontStyleObject } from "../components/core/fonts";
 import { TabIconComponent } from "../components/ui/TabIconComponent";
-import I18n from "../i18n";
 import MessagesHomeScreen from "../features/messages/screens/MessagesHomeScreen";
+import { WalletHomeScreen as NewWalletHomeScreen } from "../features/newWallet/screens/WalletHomeScreen";
+import { PaymentsHomeScreen } from "../features/payments/home/screens/PaymentsHomeScreen";
+import I18n from "../i18n";
 import ProfileMainScreen from "../screens/profile/ProfileMainScreen";
 import ServicesHomeScreen from "../screens/services/ServicesHomeScreen";
 import WalletHomeScreen from "../screens/wallet/WalletHomeScreen";
 import { useIOSelector } from "../store/hooks";
-import { isDesignSystemEnabledSelector } from "../store/reducers/persistedPreferences";
+import {
+  isDesignSystemEnabledSelector,
+  isNewWalletSectionEnabledSelector
+} from "../store/reducers/persistedPreferences";
 import { StartupStatusEnum, isStartupLoaded } from "../store/reducers/startup";
 import variables from "../theme/variables";
 import { MESSAGES_ROUTES } from "../features/messages/navigation/routes";
-import { AppParamsList, IOStackNavigationProp } from "./params/AppParamsList";
+import { SERVICES_ROUTES } from "../features/services/navigation/routes";
+import { useIONavigation } from "./params/AppParamsList";
 import { MainTabParamsList } from "./params/MainTabParamsList";
 import ROUTES from "./routes";
 import { HeaderFirstLevelHandler } from "./components/HeaderFirstLevelHandler";
@@ -46,13 +51,19 @@ const styles = StyleSheet.create({
 });
 
 export const MainTabNavigator = () => {
+  const navigation = useIONavigation();
   const insets = useSafeAreaInsets();
+
   const startupLoaded = useIOSelector(isStartupLoaded);
+  const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector);
+  const isNewWalletSectionEnabled = useIOSelector(
+    isNewWalletSectionEnabledSelector
+  );
+  const showBarcodeScanSection = false; // Currently disabled
+
   const tabBarHeight = 54;
   const additionalPadding = 10;
   const bottomInset = insets.bottom === 0 ? additionalPadding : insets.bottom;
-  const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector);
-  const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
 
   const navigateToBarcodeScanScreen = () => {
     navigation.navigate(ROUTES.BARCODE_SCAN);
@@ -63,10 +74,14 @@ export const MainTabNavigator = () => {
       isLoading={startupLoaded === StartupStatusEnum.ONBOARDING}
       loadingOpacity={1}
     >
-      <HeaderFirstLevelHandler />
       <Tab.Navigator
-        tabBarOptions={{
-          labelStyle: {
+        screenOptions={{
+          header: ({ route }) => (
+            <HeaderFirstLevelHandler
+              currentRouteName={route.name as keyof MainTabParamsList}
+            />
+          ),
+          tabBarLabelStyle: {
             fontSize: isDesignSystemEnabled ? 10 : 12,
             ...makeFontStyleObject(
               "Regular",
@@ -74,13 +89,13 @@ export const MainTabNavigator = () => {
               isDesignSystemEnabled ? "ReadexPro" : "TitilliumWeb"
             )
           },
-          keyboardHidesTabBar: true,
-          allowFontScaling: false,
-          activeTintColor: isDesignSystemEnabled
+          tabBarHideOnKeyboard: true,
+          tabBarAllowFontScaling: false,
+          tabBarActiveTintColor: isDesignSystemEnabled
             ? IOColors["blueIO-500"]
             : IOColors.blue,
-          inactiveTintColor: IOColors["grey-850"],
-          style: [
+          tabBarInactiveTintColor: IOColors["grey-850"],
+          tabBarStyle: [
             styles.tabBarStyle,
             { height: tabBarHeight + bottomInset },
             insets.bottom === 0 ? { paddingBottom: additionalPadding } : {}
@@ -106,7 +121,9 @@ export const MainTabNavigator = () => {
         />
         <Tab.Screen
           name={ROUTES.WALLET_HOME}
-          component={WalletHomeScreen}
+          component={
+            isNewWalletSectionEnabled ? NewWalletHomeScreen : WalletHomeScreen
+          }
           options={{
             title: I18n.t("global.navigator.wallet"),
             tabBarIcon: ({ color, focused }) => (
@@ -119,7 +136,7 @@ export const MainTabNavigator = () => {
             )
           }}
         />
-        {isDesignSystemEnabled && (
+        {showBarcodeScanSection && (
           <Tab.Screen
             name={ROUTES.BARCODE_SCAN}
             component={EmptyComponent}
@@ -142,8 +159,25 @@ export const MainTabNavigator = () => {
             }}
           />
         )}
+        {isNewWalletSectionEnabled && (
+          <Tab.Screen
+            name={ROUTES.PAYMENTS_HOME}
+            component={PaymentsHomeScreen}
+            options={{
+              title: I18n.t("global.navigator.payments"),
+              tabBarIcon: ({ color, focused }) => (
+                <TabIconComponent
+                  iconName={"navPsp"}
+                  iconNameFocused={"navPsp"}
+                  color={color}
+                  focused={focused}
+                />
+              )
+            }}
+          />
+        )}
         <Tab.Screen
-          name={ROUTES.SERVICES_HOME}
+          name={SERVICES_ROUTES.SERVICES_HOME}
           component={ServicesHomeScreen}
           options={{
             title: I18n.t("global.navigator.services"),
diff --git a/ts/navigation/WalletNavigator.tsx b/ts/navigation/WalletNavigator.tsx
index ebfcf759141..93d46f0ac02 100644
--- a/ts/navigation/WalletNavigator.tsx
+++ b/ts/navigation/WalletNavigator.tsx
@@ -54,8 +54,7 @@ const bpay_cobadge_routes = () => (
 const WalletNavigator = () => (
   <Stack.Navigator
     initialRouteName={ROUTES.PAYMENT_SCAN_QR_CODE}
-    headerMode={"none"}
-    screenOptions={{ gestureEnabled: true }}
+    screenOptions={{ gestureEnabled: true, headerShown: false }}
   >
     <Stack.Screen
       name={ROUTES.WALLET_IDPAY_INITIATIVE_LIST}
diff --git a/ts/navigation/components/CloseButton.tsx b/ts/navigation/components/CloseButton.tsx
new file mode 100644
index 00000000000..f81a3f4fa35
--- /dev/null
+++ b/ts/navigation/components/CloseButton.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { IOVisualCostants, IconButton } from "@pagopa/io-app-design-system";
+import { useNavigation } from "@react-navigation/native";
+import { View } from "react-native";
+import I18n from "../../i18n";
+
+const CloseButton = () => {
+  const navigation = useNavigation();
+
+  return (
+    <View style={{ marginRight: IOVisualCostants.appMarginDefault }}>
+      <IconButton
+        icon="closeMedium"
+        color="neutral"
+        onPress={() => {
+          navigation.goBack();
+        }}
+        accessibilityLabel={I18n.t("global.buttons.close")}
+      />
+    </View>
+  );
+};
+export default CloseButton;
diff --git a/ts/navigation/components/HeaderFirstLevelHandler.tsx b/ts/navigation/components/HeaderFirstLevelHandler.tsx
index 4e6186f6aaf..c4dec86c05c 100644
--- a/ts/navigation/components/HeaderFirstLevelHandler.tsx
+++ b/ts/navigation/components/HeaderFirstLevelHandler.tsx
@@ -1,12 +1,9 @@
-/* eslint-disable functional/immutable-data */
-import React, { ComponentProps, useEffect, useMemo } from "react";
 import { ActionProp, HeaderFirstLevel } from "@pagopa/io-app-design-system";
-import { useNavigation } from "@react-navigation/native";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
-import { useIODispatch, useIOSelector } from "../../store/hooks";
-import { MainTabParamsList } from "../params/MainTabParamsList";
+import React, { ComponentProps, useMemo } from "react";
 import { useWalletHomeHeaderBottomSheet } from "../../components/wallet/WalletHomeHeader";
+import { MESSAGES_ROUTES } from "../../features/messages/navigation/routes";
 import {
   SupportRequestParams,
   useStartSupportRequest
@@ -14,54 +11,46 @@ import {
 import I18n from "../../i18n";
 import { navigateToServicePreferenceScreen } from "../../store/actions/navigation";
 import { searchMessagesEnabled } from "../../store/actions/search";
-import { currentRouteSelector } from "../../store/reducers/navigation";
+import { useIODispatch, useIOSelector } from "../../store/hooks";
+import { isNewWalletSectionEnabledSelector } from "../../store/reducers/persistedPreferences";
+import { SERVICES_ROUTES } from "../../features/services/navigation/routes";
+import { MainTabParamsList } from "../params/MainTabParamsList";
+import ROUTES from "../routes";
 
 type HeaderFirstLevelProps = ComponentProps<typeof HeaderFirstLevel>;
-type TabRoutes =
-  | Exclude<keyof MainTabParamsList, "MESSAGES_HOME" | "SERVICES_HOME">
-  | "MESSAGES_INBOX"
-  | "MESSAGES_ARCHIVE"
-  | "SERVICES_NATIONAL"
-  | "SERVICES_LOCAL";
+type TabRoutes = keyof MainTabParamsList;
 
 const headerHelpByRoute: Record<TabRoutes, SupportRequestParams> = {
-  BARCODE_SCAN: {},
-  MESSAGES_ARCHIVE: {
-    faqCategories: ["messages"],
-    contextualHelpMarkdown: {
-      title: "messages.contextualHelpTitle",
-      body: "messages.contextualHelpContent"
-    }
-  },
-  MESSAGES_INBOX: {
+  [MESSAGES_ROUTES.MESSAGES_HOME]: {
     faqCategories: ["messages"],
     contextualHelpMarkdown: {
       title: "messages.contextualHelpTitle",
       body: "messages.contextualHelpContent"
     }
   },
-  PROFILE_MAIN: {
+  [ROUTES.PROFILE_MAIN]: {
     faqCategories: ["profile"],
     contextualHelpMarkdown: {
       title: "profile.main.contextualHelpTitle",
       body: "profile.main.contextualHelpContent"
     }
   },
-  SERVICES_NATIONAL: {
+  [SERVICES_ROUTES.SERVICES_HOME]: {
     faqCategories: ["services"],
     contextualHelpMarkdown: {
       title: "services.contextualHelpTitle",
       body: "services.contextualHelpContent"
     }
   },
-  SERVICES_LOCAL: {
-    faqCategories: ["services"],
+  [ROUTES.WALLET_HOME]: {
+    faqCategories: ["wallet", "wallet_methods"],
     contextualHelpMarkdown: {
-      title: "services.contextualHelpTitle",
-      body: "services.contextualHelpContent"
+      title: "wallet.contextualHelpTitle",
+      body: "wallet.contextualHelpContent"
     }
   },
-  WALLET_HOME: {
+  [ROUTES.BARCODE_SCAN]: {},
+  [ROUTES.PAYMENTS_HOME]: {
     faqCategories: ["wallet", "wallet_methods"],
     contextualHelpMarkdown: {
       title: "wallet.contextualHelpTitle",
@@ -70,17 +59,22 @@ const headerHelpByRoute: Record<TabRoutes, SupportRequestParams> = {
   }
 };
 
+type Props = {
+  currentRouteName: TabRoutes;
+};
 /**
  * This Component aims to handle the header of the first level screens. based on the current route
  * it will set the header title and the contextual help and the actions related to the screen
  * THIS COMPONENT IS NOT MEANT TO BE USED OUTSIDE THE NAVIGATION.
  * THIS COMPONENT WILL BE REMOVED ONCE REACT NAVIGATION WILL BE UPGRADED TO V6
  */
-export const HeaderFirstLevelHandler = () => {
+export const HeaderFirstLevelHandler = ({ currentRouteName }: Props) => {
   const dispatch = useIODispatch();
-  const navigation = useNavigation();
-  const currentRouteName = useIOSelector(currentRouteSelector);
-  // console.log("currentRouteName", currentRouteName);
+
+  const isNewWalletSectionEnabled = useIOSelector(
+    isNewWalletSectionEnabledSelector
+  );
+
   const requestParams = useMemo(
     () =>
       pipe(
@@ -101,29 +95,16 @@ export const HeaderFirstLevelHandler = () => {
     }),
     [startSupportRequest]
   );
-  const headerPropsRef = React.useRef<HeaderFirstLevelProps>({
-    title: I18n.t("messages.contentTitle"),
-    type: "twoActions",
-    firstAction: helpAction,
-    secondAction: {
-      icon: "search",
-      accessibilityLabel: I18n.t("global.accessibility.search"),
-      onPress: () => {
-        dispatch(searchMessagesEnabled(true));
-      }
-    }
-  });
 
   const {
     bottomSheet: WalletHomeHeaderBottomSheet,
     present: presentWalletHomeHeaderBottomsheet
   } = useWalletHomeHeaderBottomSheet();
 
-  useEffect(() => {
+  const headerProps: HeaderFirstLevelProps = useMemo(() => {
     switch (currentRouteName) {
-      case "SERVICES_NATIONAL":
-      case "SERVICES_LOCAL":
-        headerPropsRef.current = {
+      case SERVICES_ROUTES.SERVICES_HOME:
+        return {
           title: I18n.t("services.title"),
           type: "twoActions",
           firstAction: helpAction,
@@ -135,33 +116,23 @@ export const HeaderFirstLevelHandler = () => {
             }
           }
         };
-        break;
-      case "PROFILE_MAIN":
-        headerPropsRef.current = {
+      case ROUTES.PROFILE_MAIN:
+        return {
           title: I18n.t("profile.main.title"),
           backgroundColor: "dark",
           type: "singleAction",
           firstAction: helpAction
         };
-        break;
-      case "MESSAGES_INBOX":
-      case "MESSAGES_ARCHIVE":
-        headerPropsRef.current = {
-          title: I18n.t("messages.contentTitle"),
-          type: "twoActions",
-          firstAction: helpAction,
-          secondAction: {
-            icon: "search",
-            accessibilityLabel: I18n.t("global.accessibility.search"),
-            onPress: () => {
-              dispatch(searchMessagesEnabled(true));
-            }
-          }
-        };
-        break;
-      case "BARCODE_SCAN":
-      case "WALLET_HOME":
-        headerPropsRef.current = {
+      case ROUTES.WALLET_HOME:
+        if (isNewWalletSectionEnabled) {
+          return {
+            title: I18n.t("wallet.wallet"),
+            type: "singleAction",
+            firstAction: helpAction,
+            testID: "wallet-home-header-title"
+          };
+        }
+        return {
           title: I18n.t("wallet.wallet"),
           type: "twoActions",
           firstAction: helpAction,
@@ -174,20 +145,39 @@ export const HeaderFirstLevelHandler = () => {
             testID: "walletAddNewPaymentMethodTestId"
           }
         };
-        break;
+      case ROUTES.PAYMENTS_HOME:
+        return {
+          title: "Pagamenti",
+          type: "singleAction",
+          firstAction: helpAction
+        };
+      case MESSAGES_ROUTES.MESSAGES_HOME:
       default:
-        break;
+        return {
+          title: I18n.t("messages.contentTitle"),
+          type: "twoActions",
+          firstAction: helpAction,
+          secondAction: {
+            icon: "search",
+            accessibilityLabel: I18n.t("global.accessibility.search"),
+            onPress: () => {
+              dispatch(searchMessagesEnabled(true));
+            }
+          }
+        };
     }
-    navigation.setOptions({
-      header: () => <HeaderFirstLevel {...headerPropsRef.current} />
-    });
   }, [
-    navigation,
     currentRouteName,
     helpAction,
     presentWalletHomeHeaderBottomsheet,
+    isNewWalletSectionEnabled,
     dispatch
   ]);
 
-  return <>{WalletHomeHeaderBottomSheet}</>;
+  return (
+    <>
+      <HeaderFirstLevel {...headerProps} />
+      {WalletHomeHeaderBottomSheet}
+    </>
+  );
 };
diff --git a/ts/navigation/params/AppParamsList.ts b/ts/navigation/params/AppParamsList.ts
index 6e234b954b6..1075af55c36 100644
--- a/ts/navigation/params/AppParamsList.ts
+++ b/ts/navigation/params/AppParamsList.ts
@@ -1,7 +1,8 @@
 import {
   NavigatorScreenParams,
   ParamListBase,
-  RouteProp
+  RouteProp,
+  useNavigation
 } from "@react-navigation/native";
 import { StackNavigationProp } from "@react-navigation/stack";
 import { CdcBonusRequestParamsList } from "../../features/bonus/cdc/navigation/params";
@@ -41,36 +42,33 @@ import {
   IDPayUnsubscriptionParamsList,
   IDPayUnsubscriptionRoutes
 } from "../../features/idpay/unsubscription/navigation/navigator";
+import { MessagesParamsList } from "../../features/messages/navigation/params";
+import { MESSAGES_ROUTES } from "../../features/messages/navigation/routes";
+import { WalletParamsList as NewWalletParamsList } from "../../features/newWallet/navigation/params";
+import { WalletRoutes as NewWalletRoutes } from "../../features/newWallet/navigation/routes";
+import { PaymentsBarcodeParamsList } from "../../features/payments/barcode/navigation/params";
+import { PaymentsBarcodeRoutes } from "../../features/payments/barcode/navigation/routes";
+import { PaymentsCheckoutParamsList } from "../../features/payments/checkout/navigation/params";
+import { PaymentsCheckoutRoutes } from "../../features/payments/checkout/navigation/routes";
+import { PaymentsMethodDetailsParamsList } from "../../features/payments/details/navigation/params";
+import { PaymentsMethodDetailsRoutes } from "../../features/payments/details/navigation/routes";
+import { PaymentsOnboardingParamsList } from "../../features/payments/onboarding/navigation/params";
+import { PaymentsOnboardingRoutes } from "../../features/payments/onboarding/navigation/routes";
+import { PaymentsTransactionParamsList } from "../../features/payments/transaction/navigation/params";
+import { PaymentsTransactionRoutes } from "../../features/payments/transaction/navigation/routes";
+import { ServicesParamsList } from "../../features/services/navigation/params";
+import { SERVICES_ROUTES } from "../../features/services/navigation/routes";
 import UADONATION_ROUTES from "../../features/uaDonations/navigation/routes";
 import { UAWebviewScreenNavigationParams } from "../../features/uaDonations/screens/UAWebViewScreen";
-import { WalletBarcodeParamsList } from "../../features/walletV3/barcode/navigation/params";
-import { WalletBarcodeRoutes } from "../../features/walletV3/barcode/navigation/routes";
-import {
-  WalletOnboardingParamsList,
-  WalletOnboardingRoutes
-} from "../../features/walletV3/onboarding/navigation/navigator";
-import {
-  WalletDetailsParamsList,
-  WalletDetailsRoutes
-} from "../../features/walletV3/details/navigation/navigator";
-import {
-  WalletTransactionParamsList,
-  WalletTransactionRoutes
-} from "../../features/walletV3/transaction/navigation/navigator";
-import { WalletPaymentParamsList } from "../../features/walletV3/payment/navigation/params";
-import { WalletPaymentRoutes } from "../../features/walletV3/payment/navigation/routes";
 import { ZendeskParamsList } from "../../features/zendesk/navigation/params";
 import ZENDESK_ROUTES from "../../features/zendesk/navigation/routes";
 import ROUTES from "../routes";
-import { MESSAGES_ROUTES } from "../../features/messages/navigation/routes";
-import { MessagesParamsList } from "../../features/messages/navigation/params";
 import { AuthenticationParamsList } from "./AuthenticationParamsList";
+import { CheckEmailParamsList } from "./CheckEmailParamsList";
 import { MainTabParamsList } from "./MainTabParamsList";
 import { OnboardingParamsList } from "./OnboardingParamsList";
 import { ProfileParamsList } from "./ProfileParamsList";
-import { ServicesParamsList } from "./ServicesParamsList";
 import { WalletParamsList } from "./WalletParamsList";
-import { CheckEmailParamsList } from "./CheckEmailParamsList";
 
 export type AppParamsList = {
   [ROUTES.INGRESS]: undefined;
@@ -83,7 +81,7 @@ export type AppParamsList = {
 
   [MESSAGES_ROUTES.MESSAGES_NAVIGATOR]: NavigatorScreenParams<MessagesParamsList>;
   [ROUTES.WALLET_NAVIGATOR]: NavigatorScreenParams<WalletParamsList>;
-  [ROUTES.SERVICES_NAVIGATOR]: NavigatorScreenParams<ServicesParamsList>;
+  [SERVICES_ROUTES.SERVICES_NAVIGATOR]: NavigatorScreenParams<ServicesParamsList>;
   [ROUTES.PROFILE_NAVIGATOR]: NavigatorScreenParams<ProfileParamsList>;
 
   [ROUTES.BARCODE_SCAN]: undefined;
@@ -114,11 +112,13 @@ export type AppParamsList = {
 
   [IdPayBarcodeRoutes.IDPAY_BARCODE_MAIN]: NavigatorScreenParams<IdPayBarcodeParamsList>;
 
-  [WalletOnboardingRoutes.WALLET_ONBOARDING_MAIN]: NavigatorScreenParams<WalletOnboardingParamsList>;
-  [WalletPaymentRoutes.WALLET_PAYMENT_MAIN]: NavigatorScreenParams<WalletPaymentParamsList>;
-  [WalletBarcodeRoutes.WALLET_BARCODE_MAIN]: NavigatorScreenParams<WalletBarcodeParamsList>;
-  [WalletDetailsRoutes.WALLET_DETAILS_MAIN]: NavigatorScreenParams<WalletDetailsParamsList>;
-  [WalletTransactionRoutes.WALLET_TRANSACTION_MAIN]: NavigatorScreenParams<WalletTransactionParamsList>;
+  [NewWalletRoutes.WALLET_NAVIGATOR]: NavigatorScreenParams<NewWalletParamsList>;
+
+  [PaymentsOnboardingRoutes.PAYMENT_ONBOARDING_NAVIGATOR]: NavigatorScreenParams<PaymentsOnboardingParamsList>;
+  [PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR]: NavigatorScreenParams<PaymentsCheckoutParamsList>;
+  [PaymentsBarcodeRoutes.PAYMENT_BARCODE_NAVIGATOR]: NavigatorScreenParams<PaymentsBarcodeParamsList>;
+  [PaymentsMethodDetailsRoutes.PAYMENT_METHOD_DETAILS_NAVIGATOR]: NavigatorScreenParams<PaymentsMethodDetailsParamsList>;
+  [PaymentsTransactionRoutes.PAYMENT_TRANSACTION_NAVIGATOR]: NavigatorScreenParams<PaymentsTransactionParamsList>;
 };
 
 /**
@@ -138,3 +138,6 @@ export type IOStackNavigationProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = string
 > = StackNavigationProp<AppParamsList & ParamList, RouteName>;
+
+export const useIONavigation = () =>
+  useNavigation<IOStackNavigationProp<AppParamsList, keyof AppParamsList>>();
diff --git a/ts/navigation/params/AuthenticationParamsList.ts b/ts/navigation/params/AuthenticationParamsList.ts
index a57dc1f97f6..ad3e052bdbf 100644
--- a/ts/navigation/params/AuthenticationParamsList.ts
+++ b/ts/navigation/params/AuthenticationParamsList.ts
@@ -6,13 +6,14 @@ import ROUTES from "../routes";
 
 export type AuthenticationParamsList = {
   [ROUTES.AUTHENTICATION_LANDING]: undefined;
+  [ROUTES.AUTHENTICATION_ROOTED_DEVICE]: undefined;
   [ROUTES.AUTHENTICATION_OPT_IN]: ChosenIdentifier;
   [ROUTES.AUTHENTICATION_IDP_SELECTION]: undefined;
   [ROUTES.AUTHENTICATION_CIE]: undefined;
   [ROUTES.AUTHENTICATION_IDP_LOGIN]: undefined;
   [ROUTES.AUTHENTICATION_AUTH_SESSION]: undefined;
   [ROUTES.AUTHENTICATION_IDP_TEST]: undefined;
-  [ROUTES.MARKDOWN]: undefined;
+  [ROUTES.CIE_NOT_SUPPORTED]: undefined;
   // For expired cie screen
   [ROUTES.CIE_EXPIRED_SCREEN]: undefined;
   [ROUTES.CIE_PIN_SCREEN]: undefined;
diff --git a/ts/navigation/params/MainTabParamsList.ts b/ts/navigation/params/MainTabParamsList.ts
index 64ac4448bfe..0a63d9f4937 100644
--- a/ts/navigation/params/MainTabParamsList.ts
+++ b/ts/navigation/params/MainTabParamsList.ts
@@ -1,11 +1,13 @@
 import { WalletHomeNavigationParams } from "../../screens/wallet/WalletHomeScreen";
 import ROUTES from "../routes";
 import { MESSAGES_ROUTES } from "../../features/messages/navigation/routes";
+import { SERVICES_ROUTES } from "../../features/services/navigation/routes";
 
 export type MainTabParamsList = {
   [MESSAGES_ROUTES.MESSAGES_HOME]: undefined;
   [ROUTES.WALLET_HOME]: WalletHomeNavigationParams;
   [ROUTES.BARCODE_SCAN]: undefined;
-  [ROUTES.SERVICES_HOME]: undefined;
+  [SERVICES_ROUTES.SERVICES_HOME]: undefined;
+  [ROUTES.PAYMENTS_HOME]: undefined;
   [ROUTES.PROFILE_MAIN]: undefined;
 };
diff --git a/ts/navigation/params/OnboardingParamsList.ts b/ts/navigation/params/OnboardingParamsList.ts
index b4ff0b6a2b2..dada8c7e052 100644
--- a/ts/navigation/params/OnboardingParamsList.ts
+++ b/ts/navigation/params/OnboardingParamsList.ts
@@ -1,6 +1,7 @@
 import { OnboardingNotificationsPreferencesScreenNavigationParams } from "../../screens/onboarding/OnboardingNotificationsPreferencesScreen";
 import { OnboardingServicesPreferenceScreenNavigationParams } from "../../screens/onboarding/OnboardingServicesPreferenceScreen";
-import { CduEmailInsertScreenNavigationParams } from "../../screens/profile/CduEmailInsertScreen";
+import { EmailInsertScreenNavigationParams } from "../../screens/profile/EmailInsertScreen";
+import { SendEmailValidationScreenProp } from "../../screens/profile/EmailValidationSendEmailScreen";
 import ROUTES from "../routes";
 
 export type OnboardingParamsList = {
@@ -12,8 +13,8 @@ export type OnboardingParamsList = {
   [ROUTES.ONBOARDING_MISSING_DEVICE_PIN]: undefined;
   [ROUTES.ONBOARDING_MISSING_DEVICE_BIOMETRIC]: undefined;
   [ROUTES.ONBOARDING_FINGERPRINT]: undefined;
-  [ROUTES.ONBOARDING_INSERT_EMAIL_SCREEN]: undefined;
-  [ROUTES.ONBOARDING_READ_EMAIL_SCREEN]: CduEmailInsertScreenNavigationParams;
+  [ROUTES.ONBOARDING_INSERT_EMAIL_SCREEN]: EmailInsertScreenNavigationParams;
+  [ROUTES.ONBOARDING_EMAIL_VERIFICATION_SCREEN]: SendEmailValidationScreenProp;
   [ROUTES.ONBOARDING_COMPLETED]: undefined;
   [ROUTES.ONBOARDING_NOTIFICATIONS_PREFERENCES]: OnboardingNotificationsPreferencesScreenNavigationParams;
   [ROUTES.ONBOARDING_NOTIFICATIONS_INFO_SCREEN_CONSENT]: undefined;
diff --git a/ts/navigation/params/ProfileParamsList.ts b/ts/navigation/params/ProfileParamsList.ts
index 43329d0f027..78689e58249 100644
--- a/ts/navigation/params/ProfileParamsList.ts
+++ b/ts/navigation/params/ProfileParamsList.ts
@@ -1,4 +1,5 @@
-import { CduEmailInsertScreenNavigationParams } from "../../screens/profile/CduEmailInsertScreen";
+import { EmailInsertScreenNavigationParams } from "../../screens/profile/EmailInsertScreen";
+import { SendEmailValidationScreenProp } from "../../screens/profile/EmailValidationSendEmailScreen";
 import ROUTES from "../routes";
 
 export type ProfileParamsList = {
@@ -15,8 +16,8 @@ export type ProfileParamsList = {
   [ROUTES.PROFILE_ABOUT_APP]: undefined;
   [ROUTES.PROFILE_LOGOUT]: undefined;
   [ROUTES.PROFILE_FISCAL_CODE]: undefined;
-  [ROUTES.READ_EMAIL_SCREEN]: undefined;
-  [ROUTES.INSERT_EMAIL_SCREEN]: CduEmailInsertScreenNavigationParams;
+  [ROUTES.INSERT_EMAIL_SCREEN]: EmailInsertScreenNavigationParams;
+  [ROUTES.EMAIL_VERIFICATION_SCREEN]: SendEmailValidationScreenProp;
   [ROUTES.PIN_SCREEN]: undefined;
   [ROUTES.PROFILE_DOWNLOAD_DATA]: undefined;
   [ROUTES.MARKDOWN_PLAYGROUND]: undefined;
diff --git a/ts/navigation/params/ServicesParamsList.ts b/ts/navigation/params/ServicesParamsList.ts
deleted file mode 100644
index 66253c09d4e..00000000000
--- a/ts/navigation/params/ServicesParamsList.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ServiceDetailsScreenNavigationParams } from "../../screens/services/ServiceDetailsScreen";
-import { ServiceWebviewScreenNavigationParams } from "../../screens/services/ServicesWebviewScreen";
-import ROUTES from "../routes";
-
-export type ServicesParamsList = {
-  [ROUTES.SERVICE_DETAIL]: ServiceDetailsScreenNavigationParams;
-  [ROUTES.SERVICE_WEBVIEW]: ServiceWebviewScreenNavigationParams;
-};
diff --git a/ts/navigation/params/WalletParamsList.ts b/ts/navigation/params/WalletParamsList.ts
index fec5a2ce8a4..5c2d8884144 100644
--- a/ts/navigation/params/WalletParamsList.ts
+++ b/ts/navigation/params/WalletParamsList.ts
@@ -29,6 +29,7 @@ import ROUTES from "../routes";
 import { BONUS_ROUTES } from "../../features/bonus/common/navigation/navigator";
 
 export type WalletParamsList = {
+  [ROUTES.WALLET_HOME]: undefined;
   [ROUTES.WALLET_IDPAY_INITIATIVE_LIST]: IdPayInstrumentInitiativesScreenRouteParams;
   [ROUTES.WALLET_ADD_PAYMENT_METHOD]: AddPaymentMethodScreenNavigationParams;
   [ROUTES.WALLET_TRANSACTION_DETAILS]: TransactionDetailsScreenNavigationParams;
diff --git a/ts/navigation/routes.ts b/ts/navigation/routes.ts
index 7f2d8ccd385..9e314922dad 100644
--- a/ts/navigation/routes.ts
+++ b/ts/navigation/routes.ts
@@ -8,12 +8,14 @@ const ROUTES = {
   // Authentication
   AUTHENTICATION: "AUTHENTICATION",
   AUTHENTICATION_LANDING: "AUTHENTICATION_LANDING",
+  AUTHENTICATION_ROOTED_DEVICE: "AUTHENTICATION_ROOTED_DEVICE",
   AUTHENTICATION_OPT_IN: "AUTHENTICATION_OPT_IN",
   AUTHENTICATION_IDP_SELECTION: "AUTHENTICATION_IDP_SELECTION",
   AUTHENTICATION_IDP_LOGIN: "AUTHENTICATION_IDP_LOGIN",
   AUTHENTICATION_AUTH_SESSION: "AUTHENTICATION_AUTH_SESSION",
   AUTHENTICATION_IDP_TEST: "AUTHENTICATION_IDP_TEST",
   AUTHENTICATION_CIE: "AUTHENTICATION_CIE",
+  CIE_NOT_SUPPORTED: "CIE_NOT_SUPPORTED",
   MARKDOWN: "MARKDOWN",
 
   // CIE
@@ -46,8 +48,8 @@ const ROUTES = {
   ONBOARDING_NOTIFICATIONS_PREFERENCES: "ONBOARDING_NOTIFICATIONS_PREFERENCES",
   ONBOARDING_NOTIFICATIONS_INFO_SCREEN_CONSENT:
     "ONBOARDING_NOTIFICATIONS_INFO_SCREEN_CONSENT",
-  ONBOARDING_READ_EMAIL_SCREEN: "ONBOARDING_READ_EMAIL_SCREEN",
   ONBOARDING_INSERT_EMAIL_SCREEN: "ONBOARDING_INSERT_EMAIL_SCREEN",
+  ONBOARDING_EMAIL_VERIFICATION_SCREEN: "ONBOARDING_EMAIL_VERIFICATION_SCREEN",
 
   // Wallet
   WALLET_NAVIGATOR: "WALLET_NAVIGATOR",
@@ -67,6 +69,7 @@ const ROUTES = {
   ADD_CREDIT_CARD_OUTCOMECODE_MESSAGE: "ADD_CREDIT_CARD_OUTCOMECODE_MESSAGE",
 
   // Payment
+  PAYMENTS_HOME: "PAYMENTS_HOME",
   PAYMENT_SCAN_QR_CODE: "PAYMENT_SCAN_QR_CODE",
   PAYMENT_MANUAL_DATA_INSERTION: "PAYMENT_MANUAL_DATA_INSERTION",
   PAYMENT_TRANSACTION_SUMMARY: "PAYMENT_TRANSACTION_SUMMARY",
@@ -85,12 +88,6 @@ const ROUTES = {
   // Main
   MAIN: "MAIN",
 
-  // Services
-  SERVICES_NAVIGATOR: "SERVICES_NAVIGATOR",
-  SERVICES_HOME: "SERVICES_HOME",
-  SERVICE_DETAIL: "SERVICE_DETAIL",
-  SERVICE_WEBVIEW: "SERVICE_WEBVIEW",
-
   // Profile
   PROFILE_NAVIGATOR: "PROFILE_NAVIGATOR",
   PROFILE_MAIN: "PROFILE_MAIN",
@@ -131,8 +128,8 @@ const ROUTES = {
   IDPAY_CODE_PLAYGROUND: "IDPAY_CODE_PLAYGROUND",
 
   // Preferences
-  READ_EMAIL_SCREEN: "READ_EMAIL_SCREEN",
   INSERT_EMAIL_SCREEN: "INSERT_EMAIL_SCREEN",
+  EMAIL_VERIFICATION_SCREEN: "EMAIL_VERIFICATION_SCREEN",
   PIN_SCREEN: "PIN_SCREEN",
 
   // Used when the App is in background
diff --git a/ts/sagas/__tests__/notifications.test.ts b/ts/sagas/__tests__/notifications.test.ts
index 24fa73d2c61..419e193b61a 100644
--- a/ts/sagas/__tests__/notifications.test.ts
+++ b/ts/sagas/__tests__/notifications.test.ts
@@ -314,7 +314,7 @@ describe("trackMessageNotificationTapIfNeeded", () => {
   it("should call trackMessageNotificationTap when there is a PendingMessageState that requires tracking", () => {
     const spiedTrackMessageNotificationTap = jest
       .spyOn(Analytics, "trackMessageNotificationTap")
-      .mockImplementation(_ => Promise.resolve());
+      .mockImplementation(jest.fn());
     const mockPendingMessageState = {
       id: "001",
       foreground: true,
@@ -326,7 +326,7 @@ describe("trackMessageNotificationTapIfNeeded", () => {
   it("should not call trackMessageNotificationTap when there is a PendingMessageState that does not require tracking", () => {
     const spiedTrackMessageNotificationTap = jest
       .spyOn(Analytics, "trackMessageNotificationTap")
-      .mockImplementation(_ => Promise.resolve());
+      .mockImplementation(jest.fn());
     const mockPendingMessageState = {
       id: "001",
       foreground: true,
@@ -338,7 +338,7 @@ describe("trackMessageNotificationTapIfNeeded", () => {
   it("should not call trackMessageNotificationTap when there is a PendingMessageState that does not have a tracking information", () => {
     const spiedTrackMessageNotificationTap = jest
       .spyOn(Analytics, "trackMessageNotificationTap")
-      .mockImplementation(_ => Promise.resolve());
+      .mockImplementation(jest.fn());
     const mockPendingMessageState = {
       id: "001",
       foreground: true
@@ -349,7 +349,7 @@ describe("trackMessageNotificationTapIfNeeded", () => {
   it("should not call trackMessageNotificationTap when there is not a PendingMessageState", () => {
     const spiedTrackMessageNotificationTap = jest
       .spyOn(Analytics, "trackMessageNotificationTap")
-      .mockImplementation(_ => Promise.resolve());
+      .mockImplementation(jest.fn());
     trackMessageNotificationTapIfNeeded();
     expect(spiedTrackMessageNotificationTap).not.toHaveBeenCalled();
   });
diff --git a/ts/sagas/profile.ts b/ts/sagas/profile.ts
index c2b708e9a7c..30ed55d7306 100644
--- a/ts/sagas/profile.ts
+++ b/ts/sagas/profile.ts
@@ -171,9 +171,7 @@ function* createOrUpdateProfileSaga(
       createOrUpdateProfile({
         body: newProfile
       }),
-      undefined,
-      undefined,
-      true
+      { skipThrowingError: true }
     )) as unknown as SagaCallReturnType<typeof createOrUpdateProfile>;
 
     if (E.isLeft(response)) {
@@ -237,7 +235,7 @@ function* createOrUpdateProfileSaga(
 const profileChangePredicates: ReadonlyArray<
   [
     (value: InitializedProfile, newValue: InitializedProfile) => boolean,
-    (value: InitializedProfile) => Promise<void> | undefined
+    (value: InitializedProfile) => void | undefined
   ]
 > = [
   [
diff --git a/ts/sagas/services/__tests__/refreshStoredServices.test.ts b/ts/sagas/services/__tests__/refreshStoredServices.test.ts
index 340c2466b36..3f47312e979 100644
--- a/ts/sagas/services/__tests__/refreshStoredServices.test.ts
+++ b/ts/sagas/services/__tests__/refreshStoredServices.test.ts
@@ -11,7 +11,7 @@ import { loadServicesDetail } from "../../../store/actions/services";
 import {
   servicesByIdSelector,
   ServicesByIdState
-} from "../../../store/reducers/entities/services/servicesById";
+} from "../../../features/services/store/reducers/servicesById";
 import { refreshStoredServices } from "../refreshStoredServices";
 
 describe("refreshStoredServices", () => {
diff --git a/ts/sagas/services/refreshStoredServices.ts b/ts/sagas/services/refreshStoredServices.ts
index 726e8e46140..9f3868f301a 100644
--- a/ts/sagas/services/refreshStoredServices.ts
+++ b/ts/sagas/services/refreshStoredServices.ts
@@ -3,7 +3,7 @@ import { SagaIterator } from "redux-saga";
 import { put, select } from "typed-redux-saga/macro";
 import { PaginatedServiceTupleCollection } from "../../../definitions/backend/PaginatedServiceTupleCollection";
 import { loadServicesDetail } from "../../store/actions/services";
-import { servicesByIdSelector } from "../../store/reducers/entities/services/servicesById";
+import { servicesByIdSelector } from "../../features/services/store/reducers/servicesById";
 
 /**
  * Check which services detail must be loaded. If there are, loading action will be dispatched
diff --git a/ts/sagas/services/removeUnusedStoredServices.ts b/ts/sagas/services/removeUnusedStoredServices.ts
index 0896df23000..4176faa0cad 100644
--- a/ts/sagas/services/removeUnusedStoredServices.ts
+++ b/ts/sagas/services/removeUnusedStoredServices.ts
@@ -4,7 +4,7 @@ import { SagaIterator } from "redux-saga";
 import { put, select } from "typed-redux-saga/macro";
 import { PaginatedServiceTupleCollection } from "../../../definitions/backend/PaginatedServiceTupleCollection";
 import { removeServiceTuples } from "../../store/actions/services";
-import { servicesByIdSelector } from "../../store/reducers/entities/services/servicesById";
+import { servicesByIdSelector } from "../../features/services/store/reducers/servicesById";
 
 type VisibleServiceVersionById = {
   [index: string]: number | undefined;
diff --git a/ts/sagas/services/watchLoadServicesSaga.ts b/ts/sagas/services/watchLoadServicesSaga.ts
index 31c0684c932..f89e5716788 100644
--- a/ts/sagas/services/watchLoadServicesSaga.ts
+++ b/ts/sagas/services/watchLoadServicesSaga.ts
@@ -2,22 +2,22 @@ import { SagaIterator } from "redux-saga";
 import { fork, put, takeEvery, takeLatest } from "typed-redux-saga/macro";
 import { getType } from "typesafe-actions";
 import { BackendClient } from "../../api/backend";
+import { handleGetServicePreference } from "../../features/services/saga/handleGetServicePreference";
+import { handleUpsertServicePreference } from "../../features/services/saga/handleUpsertServicePreference";
 import {
   loadServiceDetail,
   loadVisibleServices
 } from "../../store/actions/services";
+import {
+  loadServicePreference,
+  upsertServicePreference
+} from "../../features/services/store/actions";
 import {
   loadServiceDetailRequestHandler,
   watchServicesDetailLoadSaga
 } from "../startup/loadServiceDetailRequestHandler";
 import { loadVisibleServicesRequestHandler } from "../startup/loadVisibleServicesHandler";
-import {
-  loadServicePreference,
-  upsertServicePreference
-} from "../../store/actions/services/servicePreference";
 import { handleFirstVisibleServiceLoadSaga } from "./handleFirstVisibleServiceLoadSaga";
-import { handleGetServicePreference } from "./servicePreference/handleGetServicePreferenceSaga";
-import { handleUpsertServicePreference } from "./servicePreference/handleUpsertServicePreferenceSaga";
 
 /**
  * A saga for managing requests to load/refresh services data from backend
diff --git a/ts/sagas/startup.ts b/ts/sagas/startup.ts
index dcfde4a0500..d302d0579e6 100644
--- a/ts/sagas/startup.ts
+++ b/ts/sagas/startup.ts
@@ -50,7 +50,7 @@ import { lollipopPublicKeySelector } from "../features/lollipop/store/reducers/l
 import { watchMessagesSaga } from "../features/messages/saga";
 import { handleClearAllAttachments } from "../features/messages/saga/handleClearAttachments";
 import { watchPnSaga } from "../features/pn/store/sagas/watchPnSaga";
-import { watchWalletSaga as watchWalletV3Saga } from "../features/walletV3/common/saga";
+import { watchPaymentsSaga } from "../features/payments/common/saga";
 import {
   watchZendeskGetSessionSaga,
   watchZendeskSupportSaga
@@ -64,19 +64,12 @@ import {
 } from "../store/actions/application";
 import { sessionExpired } from "../store/actions/authentication";
 import { backendStatusLoadSuccess } from "../store/actions/backendStatus";
-import {
-  differentProfileLoggedIn,
-  setProfileHashedFiscalCode
-} from "../store/actions/crossSessions";
+import { differentProfileLoggedIn } from "../store/actions/crossSessions";
 import { previousInstallationDataDeleteSuccess } from "../store/actions/installation";
 import { setMixpanelEnabled } from "../store/actions/mixpanel";
 import { navigateToPrivacyScreen } from "../store/actions/navigation";
 import { clearOnboarding } from "../store/actions/onboarding";
-import {
-  clearCache,
-  profileLoadSuccess,
-  resetProfileState
-} from "../store/actions/profile";
+import { clearCache, resetProfileState } from "../store/actions/profile";
 import { startupLoadSuccess } from "../store/actions/startup";
 import { loadUserDataProcessing } from "../store/actions/userDataProcessing";
 import {
@@ -100,7 +93,10 @@ import { StartupStatusEnum } from "../store/reducers/startup";
 import { ReduxSagaEffect, SagaCallReturnType } from "../types/utils";
 import { trackKeychainGetFailure } from "../utils/analytics";
 import { isTestEnv } from "../utils/environment";
+import { walletPaymentHandlersInitialized } from "../store/actions/wallet/payment";
 import { deletePin, getPin } from "../utils/keychain";
+import { watchEmailValidationSaga } from "../store/sagas/emailValidationPollingSaga";
+import { handleIsKeyStrongboxBacked } from "../features/lollipop/utils/crypto";
 import {
   clearKeychainError,
   keychainError
@@ -460,13 +456,6 @@ export function* initializeApplicationSaga(
       }
     }
   }
-  // We dispatch a load success to allow the execution of the check
-  // which save the hashed code tax code
-  const profile = yield* select(profileSelector);
-  if (pot.isSome(profile)) {
-    yield* put(profileLoadSuccess(profile.value));
-    yield* take(setProfileHashedFiscalCode);
-  }
 
   // Ask to accept ToS if there is a new available version
   yield* call(checkAcceptedTosSaga, userProfile);
@@ -482,9 +471,14 @@ export function* initializeApplicationSaga(
   yield* call(trackKeychainGetFailure, keychainError);
   yield* call(clearKeychainError);
 
+  // track if the Android device has StrongBox
+  yield* call(handleIsKeyStrongboxBacked, keyInfo.keyTag);
+
   yield* call(checkConfiguredPinSaga);
   yield* call(checkAcknowledgedFingerprintSaga);
 
+  yield* fork(watchEmailValidationSaga);
+
   if (!hasPreviousSessionAndPin || userProfile.email === undefined) {
     yield* call(checkAcknowledgedEmailSaga, userProfile);
   }
@@ -537,7 +531,7 @@ export function* initializeApplicationSaga(
 
   if (pnEnabled) {
     // Start watching for PN actions
-    yield* fork(watchPnSaga, sessionToken, backendClient.getVerificaRpt);
+    yield* fork(watchPnSaga, sessionToken);
   }
 
   const idPayTestEnabled: ReturnType<typeof isIdPayTestEnabledSelector> =
@@ -549,7 +543,7 @@ export function* initializeApplicationSaga(
   }
 
   // Start watching for Wallet V3 actions
-  yield* fork(watchWalletV3Saga, maybeSessionInformation.value.walletToken);
+  yield* fork(watchPaymentsSaga, maybeSessionInformation.value.walletToken);
 
   // Load the user metadata
   yield* call(loadUserMetadata, backendClient.getUserMetadata, true);
@@ -637,7 +631,11 @@ export function* initializeApplicationSaga(
   // This tells the security advice bottomsheet that it can be shown
   yield* put(setSecurityAdviceReadyToShow(true));
 
-  yield* put(applicationInitialized({ actionsToWaitFor: [] }));
+  yield* put(
+    applicationInitialized({
+      actionsToWaitFor: [walletPaymentHandlersInitialized]
+    })
+  );
 }
 
 /**
diff --git a/ts/sagas/startup/__tests__/checkProfileEmailSaga.test.tsx b/ts/sagas/startup/__tests__/checkProfileEmailSaga.test.tsx
index a4ab1f78e37..56ef936aa20 100644
--- a/ts/sagas/startup/__tests__/checkProfileEmailSaga.test.tsx
+++ b/ts/sagas/startup/__tests__/checkProfileEmailSaga.test.tsx
@@ -6,7 +6,6 @@ import NavigationService from "../../../navigation/NavigationService";
 import ROUTES from "../../../navigation/routes";
 import { applicationChangeState } from "../../../store/actions/application";
 
-import { navigateToEmailReadScreen } from "../../../store/actions/navigation";
 import {
   emailAcknowledged,
   emailInsert
@@ -16,29 +15,12 @@ import { renderScreenWithNavigationStoreContext } from "../../../utils/testWrapp
 import { checkAcknowledgedEmailSaga } from "../checkAcknowledgedEmailSaga";
 import { ServicesPreferencesModeEnum } from "../../../../definitions/backend/ServicesPreferencesMode";
 
-jest.mock("../../../features/fastLogin/store/selectors", () => {
-  const originalModule = jest.requireActual(
-    "../../../features/fastLogin/store/selectors"
-  );
-  return {
-    ...originalModule,
-    isEmailUniquenessValidationEnabledSelector: () => false
-  };
-});
-
 describe("checkAcknowledgedEmailSaga", () => {
   beforeEach(() => {
     const globalState = appReducer(undefined, applicationChangeState("active"));
     const store = createStore(appReducer, globalState as any);
     renderScreenWithNavigationStoreContext(View, "DUMMY", {}, store);
-    jest.useRealTimers();
-  });
-
-  describe("when user has an email and it is validated", () => {
-    it("should do nothing", () =>
-      expectSaga(checkAcknowledgedEmailSaga, mockedProfile)
-        .not.call(navigateToEmailReadScreen)
-        .run());
+    jest.useFakeTimers();
   });
 
   describe("when user is on his first onboarding and he has an email and it is validated", () => {
@@ -48,13 +30,14 @@ describe("checkAcknowledgedEmailSaga", () => {
         mode: ServicesPreferencesModeEnum.LEGACY
       }
     };
-    it("should show email read screen", async () => {
-      await expectSaga(
+    it("should show email read screen", () => {
+      void expectSaga(
         checkAcknowledgedEmailSaga,
         profileEmailValidatedFirstOnboarding
       )
         .call(NavigationService.navigate, ROUTES.ONBOARDING, {
-          screen: ROUTES.ONBOARDING_READ_EMAIL_SCREEN
+          screen: ROUTES.ONBOARDING_INSERT_EMAIL_SCREEN,
+          params: { isOnboarding: true }
         })
         .run();
     });
@@ -65,15 +48,17 @@ describe("checkAcknowledgedEmailSaga", () => {
       ...mockedProfile,
       is_email_validated: false
     };
-    it("should prompt the screen to remember to validate", () =>
-      expectSaga(checkAcknowledgedEmailSaga, profileWithEmailNotValidated)
+    it("should prompt the screen to remember to validate", () => {
+      void expectSaga(checkAcknowledgedEmailSaga, profileWithEmailNotValidated)
         // read screen is wrapped in a HOC where if email is validate show ReadScreen
         // otherwise a screen that remembers to validate it
         .call(NavigationService.navigate, ROUTES.ONBOARDING, {
-          screen: ROUTES.ONBOARDING_READ_EMAIL_SCREEN
+          screen: ROUTES.ONBOARDING_INSERT_EMAIL_SCREEN,
+          params: { isOnboarding: true }
         })
         .dispatch(emailAcknowledged())
-        .run());
+        .run();
+    });
   });
 
   describe("when user has not an email", () => {
@@ -82,16 +67,19 @@ describe("checkAcknowledgedEmailSaga", () => {
       is_email_validated: false,
       email: undefined
     };
-    it("should prompt the screen to insert it", async () => {
+    it("should prompt the screen to insert it", () => {
       const globalState = appReducer(
         undefined,
         applicationChangeState("active")
       );
       const store = createStore(appReducer, globalState as any);
       renderScreenWithNavigationStoreContext(View, "DUMMY", {}, store);
-      await expectSaga(checkAcknowledgedEmailSaga, profileWithNoEmail)
+      void expectSaga(checkAcknowledgedEmailSaga, profileWithNoEmail)
         .call(NavigationService.navigate, ROUTES.ONBOARDING, {
-          screen: ROUTES.ONBOARDING_INSERT_EMAIL_SCREEN
+          screen: ROUTES.ONBOARDING_INSERT_EMAIL_SCREEN,
+          params: {
+            isOnboarding: true
+          }
         }) // go to email insert screen
         .dispatch(emailInsert()) // dispatch email insert
         .dispatch(emailAcknowledged()) // press continue
diff --git a/ts/sagas/startup/__tests__/loadServiceDetailRequestHandler.test.ts b/ts/sagas/startup/__tests__/loadServiceDetailRequestHandler.test.ts
index 5937666cba4..4c573c4ffdc 100644
--- a/ts/sagas/startup/__tests__/loadServiceDetailRequestHandler.test.ts
+++ b/ts/sagas/startup/__tests__/loadServiceDetailRequestHandler.test.ts
@@ -11,6 +11,7 @@ import { loadServiceDetail } from "../../../store/actions/services";
 import { handleOrganizationNameUpdateSaga } from "../../services/handleOrganizationNameUpdateSaga";
 import { handleServiceReadabilitySaga } from "../../services/handleServiceReadabilitySaga";
 import { loadServiceDetailRequestHandler } from "../loadServiceDetailRequestHandler";
+import { withRefreshApiCall } from "../../../features/fastLogin/saga/utils";
 
 const mockedServiceId = "A01" as ServiceId;
 const getService = jest.fn();
@@ -32,7 +33,11 @@ describe("loadServiceDetailRequestHandler", () => {
   it("returns an error if backend response is 500", () => {
     testSaga(loadServiceDetailRequestHandler, getService, mockedAction)
       .next()
-      .call(getService, { service_id: mockedServiceId })
+      .call(
+        withRefreshApiCall,
+        getService({ service_id: mockedServiceId }),
+        mockedAction
+      )
       .next(E.right({ status: 500, value: "generic error" }))
       .put(
         loadServiceDetail.failure({
@@ -47,7 +52,11 @@ describe("loadServiceDetailRequestHandler", () => {
   it("returns service detail if the backend response is 200", () => {
     testSaga(loadServiceDetailRequestHandler, getService, mockedAction)
       .next()
-      .call(getService, { service_id: mockedServiceId })
+      .call(
+        withRefreshApiCall,
+        getService({ service_id: mockedServiceId }),
+        mockedAction
+      )
       .next(E.right({ status: 200, value: mockedService }))
       .put(loadServiceDetail.success(mockedService))
       .next()
diff --git a/ts/sagas/startup/__tests__/loadVisibleServicesHandler.test.ts b/ts/sagas/startup/__tests__/loadVisibleServicesHandler.test.ts
index 8eb955f5948..0d659f2f3bf 100644
--- a/ts/sagas/startup/__tests__/loadVisibleServicesHandler.test.ts
+++ b/ts/sagas/startup/__tests__/loadVisibleServicesHandler.test.ts
@@ -19,7 +19,9 @@ describe("loadVisibleServicesHandler", () => {
     it("returns a generic error if backend response is 500", () => {
       testSaga(loadVisibleServicesRequestHandler, getVisibleServices)
         .next()
-        .call(withRefreshApiCall, getVisibleServices({}))
+        .call(withRefreshApiCall, getVisibleServices({}), {
+          skipThrowingError: true
+        })
         .next(
           E.right({
             status: 500,
@@ -39,10 +41,12 @@ describe("loadVisibleServicesHandler", () => {
       it("the session expiration is handled by withRefreshApiCall", () => {
         testSaga(loadVisibleServicesRequestHandler, getVisibleServices)
           .next()
-          .call(withRefreshApiCall, getVisibleServices({}))
+          .call(withRefreshApiCall, getVisibleServices({}), {
+            skipThrowingError: true
+          })
           .next(
             E.right({
-              status: 401,
+              status: 403,
               value: "An error occurred loading visible services"
             })
           )
@@ -59,7 +63,9 @@ describe("loadVisibleServicesHandler", () => {
     it("return an array of visibile services if backend response is 200", () => {
       testSaga(loadVisibleServicesRequestHandler, getVisibleServices)
         .next()
-        .call(withRefreshApiCall, getVisibleServices({}))
+        .call(withRefreshApiCall, getVisibleServices({}), {
+          skipThrowingError: true
+        })
         .next(E.right({ status: 200, value: { items: mockedVisibleServices } }))
         .put(loadVisibleServices.success(mockedVisibleServices))
         .next();
diff --git a/ts/sagas/startup/checkAcknowledgedEmailSaga.ts b/ts/sagas/startup/checkAcknowledgedEmailSaga.ts
index 519d6b08b1f..0a51e04fff5 100644
--- a/ts/sagas/startup/checkAcknowledgedEmailSaga.ts
+++ b/ts/sagas/startup/checkAcknowledgedEmailSaga.ts
@@ -1,5 +1,5 @@
-import { call, select, take } from "typed-redux-saga/macro";
-import { StackActions } from "@react-navigation/native";
+import { call, take } from "typed-redux-saga/macro";
+import { CommonActions } from "@react-navigation/native";
 import { InitializedProfile } from "../../../definitions/backend/InitializedProfile";
 import NavigationService from "../../navigation/NavigationService";
 import ROUTES from "../../navigation/routes";
@@ -10,7 +10,6 @@ import {
   isProfileFirstOnBoarding
 } from "../../store/reducers/profile";
 import { ReduxSagaEffect } from "../../types/utils";
-import { isEmailUniquenessValidationEnabledSelector } from "../../features/fastLogin/store/selectors";
 
 /**
  * Launch email saga that consists of:
@@ -22,24 +21,20 @@ import { isEmailUniquenessValidationEnabledSelector } from "../../features/fastL
 export function* checkAcknowledgedEmailSaga(
   userProfile: InitializedProfile
 ): IterableIterator<ReduxSagaEffect> {
-  const isEmailUniquenessValidationEnabled = yield* select(
-    isEmailUniquenessValidationEnabledSelector
-  );
-
   // Check if the profile has an email
   if (hasProfileEmail(userProfile)) {
     if (
       isProfileFirstOnBoarding(userProfile) ||
-      (!isEmailUniquenessValidationEnabled &&
-        !isProfileEmailValidated(userProfile))
+      !isProfileEmailValidated(userProfile)
     ) {
       // The user profile is just created (first onboarding), the conditional
       // view displays the screen to show the user's email used in app
       // OR
       // An email exists on the user's profile but it is not validated, the conditional
-      // view shows the component that reminds to validate the email address or allows the navigation to edit it.
+      // view shows a screen that forces the user to insert and validate his email
       yield* call(NavigationService.navigate, ROUTES.ONBOARDING, {
-        screen: ROUTES.ONBOARDING_READ_EMAIL_SCREEN
+        screen: ROUTES.ONBOARDING_INSERT_EMAIL_SCREEN,
+        params: { isOnboarding: true }
       });
     } else {
       // we can go on, no need to wait
@@ -47,13 +42,9 @@ export function* checkAcknowledgedEmailSaga(
     }
   } else {
     // the profile has no email address, user must insert it
-    // EmailInsertScreen knows if the user comes from onboarding or not
-    // if he comes from onboarding, on email inserted the navigation will focus EmailReadScreen to remember the user
-    // to validate it
     yield* call(NavigationService.navigate, ROUTES.ONBOARDING, {
-      screen: isEmailUniquenessValidationEnabled
-        ? ROUTES.ONBOARDING_READ_EMAIL_SCREEN
-        : ROUTES.ONBOARDING_INSERT_EMAIL_SCREEN
+      screen: ROUTES.ONBOARDING_INSERT_EMAIL_SCREEN,
+      params: { isOnboarding: true }
     });
   }
 
@@ -62,6 +53,13 @@ export function* checkAcknowledgedEmailSaga(
   yield* take(emailAcknowledged);
   yield* call(
     NavigationService.dispatchNavigationAction,
-    StackActions.popToTop()
+    // We use navigate to go back to the main tab
+    // https://reactnavigation.org/docs/nesting-navigators/#navigation-actions-are-handled-by-current-navigator-and-bubble-up-if-couldnt-be-handled
+    CommonActions.navigate({
+      name: ROUTES.MAIN,
+      // If for some reason, we have navigation params
+      // we want to merge them going back to the main tab.
+      merge: true
+    })
   );
 }
diff --git a/ts/sagas/startup/checkEmailSaga.ts b/ts/sagas/startup/checkEmailSaga.ts
index 91abb3d17f6..5d9f717c039 100644
--- a/ts/sagas/startup/checkEmailSaga.ts
+++ b/ts/sagas/startup/checkEmailSaga.ts
@@ -1,7 +1,7 @@
 import { call, put, select, take } from "typed-redux-saga/macro";
 import * as O from "fp-ts/lib/Option";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { StackActions } from "@react-navigation/native";
+import { CommonActions } from "@react-navigation/native";
 import NavigationService from "../../navigation/NavigationService";
 import ROUTES from "../../navigation/routes";
 import {
@@ -11,33 +11,26 @@ import {
 } from "../../store/reducers/profile";
 import { setEmailCheckAtStartupFailure } from "../../store/actions/profile";
 import { emailAcknowledged } from "../../store/actions/onboarding";
-import { isEmailUniquenessValidationEnabledSelector } from "../../features/fastLogin/store/selectors";
 
 export function* checkEmailSaga() {
   // We get the latest profile from the store
   const profile = yield* select(profileSelector);
-  const isEmailUniquenessValidationEnabled = yield* select(
-    isEmailUniquenessValidationEnabledSelector
-  );
 
   // When we use this saga, we are sure that the profile is not none
   if (pot.isSome(profile)) {
     // eslint-disable-next-line functional/no-let
     let userProfile = profile.value;
-    if (
-      isEmailUniquenessValidationEnabled &&
-      !isProfileEmailValidated(userProfile)
-    ) {
+    if (!isProfileEmailValidated(userProfile)) {
       yield* put(setEmailCheckAtStartupFailure(O.some(true)));
       if (isProfileEmailAlreadyTaken(userProfile)) {
         yield* call(NavigationService.navigate, ROUTES.CHECK_EMAIL, {
           screen: ROUTES.CHECK_EMAIL_ALREADY_TAKEN,
-          params: { email: userProfile.email }
+          params: { email: userProfile.email ?? "" }
         });
       } else {
         yield* call(NavigationService.navigate, ROUTES.CHECK_EMAIL, {
           screen: ROUTES.CHECK_EMAIL_NOT_VERIFIED,
-          params: { email: userProfile.email }
+          params: { email: userProfile.email ?? "" }
         });
       }
       // Wait for the user to press "Continue" button after having checked out
@@ -45,9 +38,15 @@ export function* checkEmailSaga() {
       yield* take(emailAcknowledged);
       yield* call(
         NavigationService.dispatchNavigationAction,
-        StackActions.popToTop()
+        // We use navigate to go back to the main tab
+        // https://reactnavigation.org/docs/nesting-navigators/#navigation-actions-are-handled-by-current-navigator-and-bubble-up-if-couldnt-be-handled
+        CommonActions.navigate({
+          name: ROUTES.MAIN,
+          // If for some reason, we have navigation params
+          // we want to merge them going back to the main tab.
+          merge: true
+        })
       );
-
       // We get the latest profile from the store and return it
       const maybeUpdatedProfile = yield* select(profileSelector);
       if (pot.isSome(maybeUpdatedProfile)) {
diff --git a/ts/sagas/startup/loadServiceDetailRequestHandler.ts b/ts/sagas/startup/loadServiceDetailRequestHandler.ts
index 87403c9f71e..af257fbb660 100644
--- a/ts/sagas/startup/loadServiceDetailRequestHandler.ts
+++ b/ts/sagas/startup/loadServiceDetailRequestHandler.ts
@@ -2,7 +2,14 @@ import { readableReport } from "@pagopa/ts-commons/lib/reporters";
 import { Millisecond } from "@pagopa/ts-commons/lib/units";
 import * as E from "fp-ts/lib/Either";
 import { buffers, channel, Channel } from "redux-saga";
-import { call, fork, put, take, takeLatest } from "typed-redux-saga/macro";
+import {
+  call,
+  fork,
+  put,
+  select,
+  take,
+  takeLatest
+} from "typed-redux-saga/macro";
 import { ActionType, getType } from "typesafe-actions";
 import { ServiceId } from "../../../definitions/backend/ServiceId";
 import { PathTraversalSafePathParam } from "../../../definitions/backend/PathTraversalSafePathParam";
@@ -19,6 +26,8 @@ import { convertUnknownToError } from "../../utils/errors";
 import { handleOrganizationNameUpdateSaga } from "../services/handleOrganizationNameUpdateSaga";
 import { handleServiceReadabilitySaga } from "../services/handleServiceReadabilitySaga";
 import { trackServiceDetailLoadingStatistics } from "../../utils/analytics";
+import { withRefreshApiCall } from "../../features/fastLogin/saga/utils";
+import { isFastLoginEnabledSelector } from "../../features/fastLogin/store/selectors";
 
 /**
  * A generator to load the service details from the Backend
@@ -38,14 +47,25 @@ export function* loadServiceDetailRequestHandler(
       throw Error("Unable to decode ServiceId to PathTraversalSafePathParam");
     }
 
-    const response = yield* call(getService, {
-      service_id: serviceIdEither.right
-    });
+    const response = (yield* call(
+      withRefreshApiCall,
+      getService({
+        service_id: serviceIdEither.right
+      }),
+      action
+    )) as unknown as SagaCallReturnType<typeof getService>;
 
     if (E.isLeft(response)) {
       throw Error(readableReport(response.left));
     }
 
+    if (response.right.status === 401) {
+      const isFastLoginEnabled = yield* select(isFastLoginEnabledSelector);
+      if (isFastLoginEnabled) {
+        return;
+      }
+    }
+
     if (response.right.status === 200) {
       yield* put(loadServiceDetail.success(response.right.value));
 
diff --git a/ts/sagas/startup/loadVisibleServicesHandler.ts b/ts/sagas/startup/loadVisibleServicesHandler.ts
index ccd264b77cf..8826c0a0527 100644
--- a/ts/sagas/startup/loadVisibleServicesHandler.ts
+++ b/ts/sagas/startup/loadVisibleServicesHandler.ts
@@ -1,6 +1,6 @@
 import { readableReport } from "@pagopa/ts-commons/lib/reporters";
 import * as E from "fp-ts/lib/Either";
-import { call, put } from "typed-redux-saga/macro";
+import { call, put, select } from "typed-redux-saga/macro";
 import { BackendClient } from "../../api/backend";
 import { loadVisibleServices } from "../../store/actions/services";
 import { ReduxSagaEffect, SagaCallReturnType } from "../../types/utils";
@@ -8,6 +8,7 @@ import { convertUnknownToError } from "../../utils/errors";
 import { refreshStoredServices } from "../services/refreshStoredServices";
 import { removeUnusedStoredServices } from "../services/removeUnusedStoredServices";
 import { withRefreshApiCall } from "../../features/fastLogin/saga/utils";
+import { isFastLoginEnabledSelector } from "../../features/fastLogin/store/selectors";
 
 /**
  * A generator to load the service details from the Backend
@@ -24,13 +25,19 @@ export function* loadVisibleServicesRequestHandler(
   SagaCallReturnType<typeof getVisibleServices>
 > {
   try {
-    const response = (yield* call(
-      withRefreshApiCall,
-      getVisibleServices({})
-    )) as unknown as SagaCallReturnType<typeof getVisibleServices>;
+    const response = (yield* call(withRefreshApiCall, getVisibleServices({}), {
+      skipThrowingError: true
+    })) as unknown as SagaCallReturnType<typeof getVisibleServices>;
+
     if (E.isLeft(response)) {
       throw Error(readableReport(response.left));
     }
+    if (response.right.status === 401) {
+      const isFastLoginEnabled = yield* select(isFastLoginEnabledSelector);
+      if (isFastLoginEnabled) {
+        return;
+      }
+    }
     if (response.right.status === 200) {
       const { items: visibleServices } = response.right.value;
       yield* put(loadVisibleServices.success(visibleServices));
diff --git a/ts/sagas/user/userMetadata.ts b/ts/sagas/user/userMetadata.ts
index b0cf4cf1452..24e3794d310 100644
--- a/ts/sagas/user/userMetadata.ts
+++ b/ts/sagas/user/userMetadata.ts
@@ -21,6 +21,8 @@ import {
 } from "../../store/reducers/userMetadata";
 import { ReduxSagaEffect, SagaCallReturnType } from "../../types/utils";
 import { convertUnknownToError } from "../../utils/errors";
+import { withRefreshApiCall } from "../../features/fastLogin/saga/utils";
+import { isFastLoginEnabledSelector } from "../../features/fastLogin/store/selectors";
 
 /**
  * A saga to fetch user metadata from the Backend
@@ -33,14 +35,24 @@ export function* fetchUserMetadata(
   SagaCallReturnType<typeof getUserMetadata>
 > {
   try {
-    const response = yield* call(getUserMetadata, {});
+    const response = (yield* call(withRefreshApiCall, getUserMetadata({}), {
+      skipThrowingError: true
+    })) as unknown as SagaCallReturnType<typeof getUserMetadata>;
 
     // Can't decode response
     if (E.isLeft(response)) {
       throw Error(readableReport(response.left));
     }
-
     if (response.right.status !== 200) {
+      if (response.right.status === 401) {
+        const isFastLoginEnabled = yield* select(isFastLoginEnabledSelector);
+        if (isFastLoginEnabled) {
+          // Return an empty object cause we have a token refresh
+          // The flow that called this API, must recall it once the token is refreshed
+          return E.right<Error, BackendUserMetadata>(emptyUserMetadata);
+        }
+      }
+
       if (response.right.status === 204) {
         // Return an empty object cause profile has no metadata yet (204 === No Content)
         return E.right<Error, BackendUserMetadata>(emptyUserMetadata);
diff --git a/ts/sagas/wallet.ts b/ts/sagas/wallet.ts
index 8f69b67b26e..82eb6f06a7d 100644
--- a/ts/sagas/wallet.ts
+++ b/ts/sagas/wallet.ts
@@ -87,7 +87,7 @@ import {
   pspForPaymentV2,
   pspForPaymentV2WithCallbacks,
   runDeleteActivePaymentSaga,
-  runStartOrResumePaymentActivationSaga
+  walletPaymentHandlersInitialized
 } from "../store/actions/wallet/payment";
 import {
   fetchPsp,
@@ -341,100 +341,6 @@ function* startOrResumeAddCreditCardSaga(
   resetLookUpId();
 }
 
-/**
- * This saga will run in sequence the requests needed to activate a payment:
- *
- * 1) attiva -> nodo
- * 2) polling for a payment id <- nodo
- * 3) check -> payment manager
- *
- * Each step has a corresponding state in the wallet.payment state that gets
- * updated with the "pot" state (none -> loading -> some|error).
- *
- * Each time the saga is run, it will resume from the next step that needs to
- * be executed (either because it never executed or because it previously
- * returned an error).
- *
- * Not that the pagoPA activation flow is not really resumable in case a step
- * returns an error (i.e. the steps are not idempotent).
- *
- * TODO: the resume logic may be made more intelligent by analyzing the error
- *       of each step and proceeed to the next step under certain conditions
- *       (e.g. when resuming a previous payment flow from scratch, some steps
- *       may fail because they are not idempotent, but we could just proceed
- *       to the next step).
- */
-// eslint-disable-next-line
-function* startOrResumePaymentActivationSaga(
-  action: ActionType<typeof runStartOrResumePaymentActivationSaga>
-) {
-  while (true) {
-    // before each step we select the updated payment state to know what has
-    // been already done.
-    const paymentState: GlobalState["wallet"]["payment"] = yield* select(
-      _ => _.wallet.payment
-    );
-
-    // first step: Attiva
-    if (pot.isNone(paymentState.attiva)) {
-      // this step needs to be executed
-      yield* put(
-        paymentAttiva.request({
-          rptId: action.payload.rptId,
-          verifica: action.payload.verifica
-        })
-      );
-      const responseAction = yield* take<
-        ActionType<typeof paymentAttiva.success | typeof paymentAttiva.failure>
-      >([paymentAttiva.success, paymentAttiva.failure]);
-      if (isActionOf(paymentAttiva.failure, responseAction)) {
-        // this step failed, exit the flow
-        return;
-      }
-      // all is ok, continue to the next step
-      continue;
-    }
-
-    // second step: poll for payment ID
-    if (pot.isNone(paymentState.paymentId)) {
-      // this step needs to be executed
-      yield* put(paymentIdPolling.request(action.payload.verifica));
-      const responseAction = yield* take<
-        ActionType<
-          typeof paymentIdPolling.success | typeof paymentIdPolling.failure
-        >
-      >([paymentIdPolling.success, paymentIdPolling.failure]);
-      if (isActionOf(paymentIdPolling.failure, responseAction)) {
-        // this step failed, exit the flow
-        return;
-      }
-      // all is ok, continue to the next step
-      continue;
-    }
-
-    // third step: "check" the payment
-    if (pot.isNone(paymentState.check)) {
-      // this step needs to be executed
-      yield* put(paymentCheck.request(paymentState.paymentId.value));
-      const responseAction = yield* take<
-        ActionType<typeof paymentCheck.success | typeof paymentCheck.failure>
-      >([paymentCheck.success, paymentCheck.failure]);
-      if (isActionOf(paymentCheck.failure, responseAction)) {
-        // this step failed, exit the flow
-        return;
-      }
-      // all is ok, continue to the next step
-      continue;
-    }
-
-    // finally, we signal the success of the activation flow
-    action.payload.onSuccess(paymentState.paymentId.value);
-
-    // since this is the last step, we exit the flow
-    break;
-  }
-}
-
 /**
  * This saga attempts to delete the active payment, if there's one.
  *
@@ -560,11 +466,6 @@ export function* watchWalletSaga(
     pmSessionManager
   );
 
-  yield* takeLatest(
-    getType(runStartOrResumePaymentActivationSaga),
-    startOrResumePaymentActivationSaga
-  );
-
   yield* takeLatest(
     getType(runDeleteActivePaymentSaga),
     deleteActivePaymentSaga
@@ -714,6 +615,8 @@ export function* watchWalletSaga(
     pmSessionManager
   );
 
+  yield* put(walletPaymentHandlersInitialized());
+
   /**
    * whenever the profile is loaded (from a load request or from un update)
    * check if the email is validated. If it not the session manager has to be disabled
@@ -901,8 +804,9 @@ export function* watchBackToEntrypointPaymentSaga(): Iterator<ReduxSagaEffect> {
     if (entrypointRoute !== undefined) {
       yield* call(
         NavigationService.dispatchNavigationAction,
-        CommonActions.navigate(entrypointRoute.name, {
-          key: entrypointRoute.key
+        CommonActions.navigate({
+          name: entrypointRoute.name,
+          merge: true
         })
       );
       yield* put(paymentInitializeState());
diff --git a/ts/sagas/wallet/pagopaApis.ts b/ts/sagas/wallet/pagopaApis.ts
index dacafac92bb..f273f43833f 100644
--- a/ts/sagas/wallet/pagopaApis.ts
+++ b/ts/sagas/wallet/pagopaApis.ts
@@ -5,6 +5,7 @@ import * as O from "fp-ts/lib/Option";
 import { call, put, select, take } from "typed-redux-saga/macro";
 import { ActionType, isActionOf } from "typesafe-actions";
 import { Action } from "redux";
+import { IOToast } from "@pagopa/io-app-design-system";
 import { BackendClient } from "../../api/backend";
 import { PaymentManagerClient } from "../../api/pagopa";
 import { mixpanelTrack } from "../../mixpanel";
@@ -62,7 +63,6 @@ import {
 import { readablePrivacyReport } from "../../utils/reporters";
 import { SessionManager } from "../../utils/SessionManager";
 import { convertWalletV2toWalletV1 } from "../../utils/walletv2";
-import { IOToast } from "../../components/Toast";
 import I18n from "../../i18n";
 import { PaymentRequestsGetResponse } from "../../../definitions/backend/PaymentRequestsGetResponse";
 import { Detail_v2Enum } from "../../../definitions/backend/PaymentProblemJson";
@@ -733,6 +733,9 @@ export function* commonPaymentVerificationProcedure<A extends Action>(
         const details = response.right.value.detail_v2;
         const failureAction = failureActionProvider(details);
         yield* put(failureAction);
+      } else if (response.right.status === 401) {
+        // This status code does not represent an error to show to the user
+        // The authentication will be handled by the Fast Login token refresh procedure
       } else {
         throw Error(`response status ${response.right.status}`);
       }
@@ -785,6 +788,9 @@ export function* paymentAttivaRequestHandler(
       ) {
         // Attiva failed
         throw Error(response.right.value.detail_v2);
+      } else if (response.right.status === 401) {
+        // This status code does not represent an error to show to the user
+        // The authentication will be handled by the Fast Login token refresh procedure
       } else {
         throw Error(`response status ${response.right.status}`);
       }
@@ -814,13 +820,18 @@ export function* paymentIdPollingRequestHandler(
       yield* select(isPagoPATestEnabledSelector);
 
     const getPaymentId = getPaymentIdApi.e2;
-    const response: SagaCallReturnType<typeof getPaymentId> = yield* call(
-      getPaymentId,
-      {
-        codiceContestoPagamento: action.payload.codiceContestoPagamento,
-        test: isPagoPATestEnabled
-      }
-    );
+
+    const request = getPaymentId({
+      codiceContestoPagamento: action.payload.codiceContestoPagamento,
+      test: isPagoPATestEnabled
+    });
+
+    const response: SagaCallReturnType<typeof getPaymentId> = (yield* call(
+      withRefreshApiCall,
+      request,
+      action
+    )) as unknown as SagaCallReturnType<typeof getPaymentId>;
+
     if (E.isRight(response)) {
       // Attiva succeeded
       if (response.right.status === 200) {
diff --git a/ts/screens/analytics/emailAnalytics.ts b/ts/screens/analytics/emailAnalytics.ts
index 07a21cb668e..3ee1d20e770 100644
--- a/ts/screens/analytics/emailAnalytics.ts
+++ b/ts/screens/analytics/emailAnalytics.ts
@@ -42,3 +42,38 @@ export function trackEmailValidationSuccessConfirmed(flow: FlowType) {
     buildEventProperties("UX", "action", undefined, flow)
   );
 }
+
+export function trackEmailNotAlreadyConfirmed(flow: FlowType) {
+  void mixpanelTrack(
+    "EMAIL_VALIDATION_STOP",
+    buildEventProperties("UX", "screen_view", undefined, flow)
+  );
+}
+
+export function trackEmailAlreadyTaken(flow: FlowType) {
+  void mixpanelTrack(
+    "EMAIL_DUPLICATE_STOP",
+    buildEventProperties("UX", "screen_view", undefined, flow)
+  );
+}
+
+export function trackSendValidationEmail(flow: FlowType) {
+  void mixpanelTrack(
+    "EMAIL_VALIDATION_SEND",
+    buildEventProperties("UX", "action", undefined, flow)
+  );
+}
+
+export function trackResendValidationEmail(flow: FlowType) {
+  void mixpanelTrack(
+    "EMAIL_VALIDATION_RESEND",
+    buildEventProperties("UX", "action", undefined, flow)
+  );
+}
+
+export function trackEmailDuplicateEditingConfirm(flow: FlowType) {
+  void mixpanelTrack(
+    "EMAIL_DUPLICATE_EDITING_CONFIRM",
+    buildEventProperties("UX", "action", undefined, flow)
+  );
+}
diff --git a/ts/screens/authentication/IdpLoginScreen.tsx b/ts/screens/authentication/IdpLoginScreen.tsx
index 8e6024fe079..47a6fe1d9ad 100644
--- a/ts/screens/authentication/IdpLoginScreen.tsx
+++ b/ts/screens/authentication/IdpLoginScreen.tsx
@@ -16,7 +16,7 @@ import { IdpSuccessfulAuthentication } from "../../components/IdpSuccessfulAuthe
 import LoadingSpinnerOverlay from "../../components/LoadingSpinnerOverlay";
 import BaseScreenComponent from "../../components/screens/BaseScreenComponent";
 import IdpCustomContextualHelpContent from "../../components/screens/IdpCustomContextualHelpContent";
-import Markdown from "../../components/ui/Markdown";
+import LegacyMarkdown from "../../components/ui/Markdown/LegacyMarkdown";
 import { RefreshIndicator } from "../../components/ui/RefreshIndicator";
 import { useLollipopLoginSource } from "../../features/lollipop/hooks/useLollipopLoginSource";
 import I18n from "../../i18n";
@@ -249,9 +249,9 @@ const IdpLoginScreen = (props: Props) => {
       return {
         title: I18n.t("authentication.idp_login.contextualHelpTitle"),
         body: () => (
-          <Markdown>
+          <LegacyMarkdown>
             {I18n.t("authentication.idp_login.contextualHelpContent")}
-          </Markdown>
+          </LegacyMarkdown>
         )
       };
     }
diff --git a/ts/screens/authentication/LandingScreen.tsx b/ts/screens/authentication/LandingScreen.tsx
index 3053331215e..90adc7bbd77 100644
--- a/ts/screens/authentication/LandingScreen.tsx
+++ b/ts/screens/authentication/LandingScreen.tsx
@@ -2,76 +2,64 @@
  * A screen where the user can choose to login with SPID or get more informations.
  * It includes a carousel with highlights on the app functionalities
  */
+import {
+  ButtonLink,
+  ButtonSolid,
+  ContentWrapper,
+  VSpacer
+} from "@pagopa/io-app-design-system";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { pipe } from "fp-ts/lib/function";
+import { useFocusEffect } from "@react-navigation/native";
 import * as O from "fp-ts/lib/Option";
 import JailMonkey from "jail-monkey";
-import { Content, Text as NBButtonText } from "native-base";
 import * as React from "react";
-import { View, Alert, StyleSheet } from "react-native";
+import { Alert, View } from "react-native";
 import DeviceInfo from "react-native-device-info";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useDispatch, useStore } from "react-redux";
-import { IOColors, Icon, HSpacer, VSpacer } from "@pagopa/io-app-design-system";
-import { useNavigation } from "@react-navigation/native";
-import sessionExpiredImg from "../../../img/landing/session_expired.png";
-import ButtonDefaultOpacity from "../../components/ButtonDefaultOpacity";
-import CieNotSupported from "../../components/cie/CieNotSupported";
-import ContextualInfo from "../../components/ContextualInfo";
-import { Link } from "../../components/core/typography/Link";
-import { IOStyles } from "../../components/core/variables/IOStyles";
-import { DevScreenButton } from "../../components/DevScreenButton";
-import { HorizontalScroll } from "../../components/HorizontalScroll";
-import { renderInfoRasterImage } from "../../components/infoScreen/imageRendering";
-import { InfoScreenComponent } from "../../components/infoScreen/InfoScreenComponent";
+import { SpidIdp } from "../../../definitions/content/SpidIdp";
 import { LandingCardComponent } from "../../components/LandingCardComponent";
 import LoadingSpinnerOverlay from "../../components/LoadingSpinnerOverlay";
-import BaseScreenComponent, {
-  ContextualHelpPropsMarkdown
-} from "../../components/screens/BaseScreenComponent";
 import SectionStatusComponent from "../../components/SectionStatus";
+import { IOStyles } from "../../components/core/variables/IOStyles";
+import { ContextualHelpPropsMarkdown } from "../../components/screens/BaseScreenComponent";
+import { privacyUrl } from "../../config";
+import { isCieLoginUatEnabledSelector } from "../../features/cieLogin/store/selectors";
+import { cieFlowForDevServerEnabled } from "../../features/cieLogin/utils";
+import {
+  fastLoginOptInFFEnabled,
+  isFastLoginEnabledSelector
+} from "../../features/fastLogin/store/selectors";
+import { useHeaderSecondLevel } from "../../hooks/useHeaderSecondLevel";
 import I18n from "../../i18n";
 import { mixpanelTrack } from "../../mixpanel";
+import { useIONavigation } from "../../navigation/params/AppParamsList";
 import ROUTES from "../../navigation/routes";
 import {
   idpSelected,
   resetAuthenticationState
 } from "../../store/actions/authentication";
-import {
-  hasApiLevelSupportSelector,
-  hasNFCFeatureSelector,
-  isCieSupportedSelector
-} from "../../store/reducers/cie";
+import { useIOSelector } from "../../store/hooks";
+import { isSessionExpiredSelector } from "../../store/reducers/authentication";
+import { isCieSupportedSelector } from "../../store/reducers/cie";
 import { continueWithRootOrJailbreakSelector } from "../../store/reducers/persistedPreferences";
-import variables from "../../theme/variables";
 import { ComponentProps } from "../../types/react";
-import { isDevEnv } from "../../utils/environment";
-import RootedDeviceModal from "../modal/RootedDeviceModal";
-import { SpidIdp } from "../../../definitions/content/SpidIdp";
-import { openWebUrl } from "../../utils/url";
-import { cieSpidMoreInfoUrl } from "../../config";
-import {
-  fastLoginOptInFFEnabled,
-  isFastLoginEnabledSelector
-} from "../../features/fastLogin/store/selectors";
-import { isCieLoginUatEnabledSelector } from "../../features/cieLogin/store/selectors";
-import { cieFlowForDevServerEnabled } from "../../features/cieLogin/utils";
+import { setAccessibilityFocus } from "../../utils/accessibility";
 import { useOnFirstRender } from "../../utils/hooks/useOnFirstRender";
-import { useIOSelector } from "../../store/hooks";
-import { isSessionExpiredSelector } from "../../store/reducers/authentication";
-import { LightModalContext } from "../../components/ui/LightModal";
-import { continueWithRootOrJailbreak } from "../../store/actions/persistedPreferences";
+import { openWebUrl } from "../../utils/url";
 import {
   trackCieLoginSelected,
   trackMethodInfo,
   trackSpidLoginSelected
 } from "./analytics";
+import { Carousel } from "./carousel/Carousel";
 
-const getCards = (
-  isCIEAvailable: boolean
-): ReadonlyArray<ComponentProps<typeof LandingCardComponent>> => [
+const carouselCards: ReadonlyArray<
+  ComponentProps<typeof LandingCardComponent>
+> = [
   {
-    id: 5,
-    image: require("../../../img/landing/05.png"),
+    id: 0,
+    pictogramName: "hello",
     title: I18n.t("authentication.landing.card5-title"),
     content: I18n.t("authentication.landing.card5-content"),
     accessibilityLabel: `${I18n.t(
@@ -85,7 +73,7 @@ const getCards = (
   },
   {
     id: 1,
-    image: require("../../../img/landing/01.png"),
+    pictogramName: "star",
     title: I18n.t("authentication.landing.card1-title"),
     content: I18n.t("authentication.landing.card1-content"),
     accessibilityLabel: `${I18n.t(
@@ -94,7 +82,7 @@ const getCards = (
   },
   {
     id: 2,
-    image: require("../../../img/landing/02.png"),
+    pictogramName: "cardFavourite",
     title: I18n.t("authentication.landing.card2-title"),
     content: I18n.t("authentication.landing.card2-content"),
     accessibilityLabel: `${I18n.t(
@@ -103,27 +91,12 @@ const getCards = (
   },
   {
     id: 3,
-    image: require("../../../img/landing/03.png"),
+    pictogramName: "doc",
     title: I18n.t("authentication.landing.card3-title"),
     content: I18n.t("authentication.landing.card3-content"),
     accessibilityLabel: `${I18n.t(
       "authentication.landing.card3-title"
     )}. ${I18n.t("authentication.landing.card3-content")}`
-  },
-  {
-    id: 4,
-    image: isCIEAvailable
-      ? require("../../../img/cie/CIE-onboarding-illustration.png")
-      : require("../../../img/landing/04.png"),
-    title: isCIEAvailable
-      ? I18n.t("authentication.landing.loginSpidCie")
-      : I18n.t("authentication.landing.card4-title"),
-    content: isCIEAvailable
-      ? I18n.t("authentication.landing.loginSpidCieContent")
-      : I18n.t("authentication.landing.card4-content"),
-    accessibilityLabel: `${I18n.t(
-      "authentication.landing.card4-title"
-    )}. ${I18n.t("authentication.landing.card4-content")}`
   }
 ];
 
@@ -132,30 +105,6 @@ const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
   body: "authentication.landing.contextualHelpContent"
 };
 
-const styles = StyleSheet.create({
-  flex: {
-    flex: 1
-  },
-  uatCie: {
-    backgroundColor: IOColors.red
-  },
-  noCie: {
-    // don't use opacity since the button still have the active color when it is pressed
-    // TODO: Remove this half-disabled state.
-    // See also discussion on Slack: https://pagopaspa.slack.com/archives/C012L0U4NQL/p1657171504522639
-    backgroundColor: IOColors.noCieButton
-  },
-  fullOpacity: {
-    backgroundColor: variables.brandPrimary
-  },
-  link: {
-    textAlign: "center",
-    paddingBottom: 5,
-    paddingTop: 4.5,
-    lineHeight: 30
-  }
-});
-
 export const IdpCIE: SpidIdp = {
   id: "cie",
   name: "CIE",
@@ -163,7 +112,13 @@ export const IdpCIE: SpidIdp = {
   profileUrl: ""
 };
 
+const SPACE_BETWEEN_BUTTONS = 8;
+const SPACE_AROUND_BUTTON_LINK = 16;
+
 export const LandingScreen = () => {
+  const accessibilityFirstFocuseViewRef = React.useRef<View>(null);
+  const insets = useSafeAreaInsets();
+
   const [isRootedOrJailbroken, setIsRootedOrJailbroken] = React.useState<
     O.Option<boolean>
   >(O.none);
@@ -175,9 +130,14 @@ export const LandingScreen = () => {
   const store = useStore();
 
   const dispatch = useDispatch();
-  const navigation = useNavigation();
+  const navigation = useIONavigation();
 
   const isSessionExpired = useIOSelector(isSessionExpiredSelector);
+  // Since the page is rendered more than once
+  // and if the session is expired
+  // we dispatch the resetAuthenticationState action,
+  // we need to keep track of the session expiration.
+  const isSessionExpiredRef = React.useRef(false);
 
   const isContinueWithRootOrJailbreak = useIOSelector(
     continueWithRootOrJailbreakSelector
@@ -187,10 +147,6 @@ export const LandingScreen = () => {
   const isFastLoginOptInFFEnabled = useIOSelector(fastLoginOptInFFEnabled);
 
   const isCIEAuthenticationSupported = useIOSelector(isCieSupportedSelector);
-  const hasApiLevelSupport = useIOSelector(hasApiLevelSupportSelector);
-  const hasCieApiLevelSupport = pot.getOrElse(hasApiLevelSupport, false);
-  const hasNFCFeature = useIOSelector(hasNFCFeatureSelector);
-  const hasCieNFCFeature = pot.getOrElse(hasNFCFeature, false);
 
   const isCieSupported = React.useCallback(
     () =>
@@ -200,17 +156,29 @@ export const LandingScreen = () => {
   );
   const isCieUatEnabled = useIOSelector(isCieLoginUatEnabledSelector);
 
+  useFocusEffect(() => setAccessibilityFocus(accessibilityFirstFocuseViewRef));
+
   useOnFirstRender(async () => {
-    const isRootedOrJailbroken = await JailMonkey.isJailBroken();
-    setIsRootedOrJailbroken(O.some(isRootedOrJailbroken));
+    const isRootedOrJailbrokenFromJailMonkey = await JailMonkey.isJailBroken();
+    setIsRootedOrJailbroken(O.some(isRootedOrJailbrokenFromJailMonkey));
     if (isSessionExpired) {
+      // eslint-disable-next-line functional/immutable-data
+      isSessionExpiredRef.current = isSessionExpired;
       dispatch(resetAuthenticationState());
     }
   });
 
-  const { hideModal, showAnimatedModal } = React.useContext(LightModalContext);
+  // We reset the session expiration flag
+  // when the component is unmounted
+  React.useEffect(
+    () => () => {
+      // eslint-disable-next-line functional/immutable-data
+      isSessionExpiredRef.current = false;
+    },
+    []
+  );
 
-  const displayTabletAlert = () => {
+  const displayTabletAlert = React.useCallback(() => {
     if (!hasTabletCompatibilityAlertAlreadyShown) {
       setHasTabletCompatibilityAlertAlreadyShown(true);
       Alert.alert(
@@ -225,15 +193,7 @@ export const LandingScreen = () => {
         { cancelable: true }
       );
     }
-  };
-
-  const navigateToMarkdown = React.useCallback(
-    () =>
-      navigation.navigate(ROUTES.AUTHENTICATION, {
-        screen: ROUTES.MARKDOWN
-      }),
-    [navigation]
-  );
+  }, [hasTabletCompatibilityAlertAlreadyShown]);
 
   const navigateToIdpSelection = React.useCallback(() => {
     trackSpidLoginSelected();
@@ -250,21 +210,6 @@ export const LandingScreen = () => {
   }, [isFastLoginOptInFFEnabled, navigation]);
 
   const navigateToCiePinScreen = React.useCallback(() => {
-    const openUnsupportedCIEModal = () => {
-      showAnimatedModal(
-        <ContextualInfo
-          onClose={hideModal}
-          title={I18n.t("authentication.landing.cie_unsupported.title")}
-          body={() => (
-            <CieNotSupported
-              hasCieApiLevelSupport={hasCieApiLevelSupport}
-              hasCieNFCFeature={hasCieNFCFeature}
-            />
-          )}
-        />
-      );
-    };
-
     if (isCieSupported()) {
       void trackCieLoginSelected(store.getState());
       dispatch(idpSelected(IdpCIE));
@@ -279,24 +224,16 @@ export const LandingScreen = () => {
         });
       }
     } else {
-      openUnsupportedCIEModal();
+      navigation.navigate(ROUTES.AUTHENTICATION, {
+        screen: ROUTES.CIE_NOT_SUPPORTED
+      });
     }
-  }, [
-    dispatch,
-    hasCieApiLevelSupport,
-    hasCieNFCFeature,
-    hideModal,
-    isCieSupported,
-    isFastLoginOptInFFEnabled,
-    navigation,
-    showAnimatedModal,
-    store
-  ]);
+  }, [dispatch, isCieSupported, isFastLoginOptInFFEnabled, navigation, store]);
 
-  const navigateToSpidCieInformationRequest = () => {
+  const navigateToPrivacyUrl = React.useCallback(() => {
     trackMethodInfo();
-    openWebUrl(cieSpidMoreInfoUrl);
-  };
+    openWebUrl(privacyUrl);
+  }, []);
 
   const navigateToCieUatSelectionScreen = React.useCallback(() => {
     if (isCieSupported()) {
@@ -306,167 +243,139 @@ export const LandingScreen = () => {
     }
   }, [isCieSupported, navigation]);
 
-  const renderCardComponents = () => {
-    const cardProps = getCards(isCieSupported());
-    return cardProps.map(p => (
-      <LandingCardComponent key={`card-${p.id}`} {...p} />
-    ));
-  };
+  const LandingScreen = () => {
+    useHeaderSecondLevel({
+      title: "",
+      supportRequest: true,
+      canGoBack: false,
+      contextualHelpMarkdown
+    });
 
-  const handleContinueWithRootOrJailbreak = (continueWith: boolean) => {
-    dispatch(continueWithRootOrJailbreak(continueWith));
-  };
+    const sessionExpiredCardContent = I18n.t(
+      "authentication.landing.session_expired.body",
+      {
+        days: isFastLoginEnabled ? "365" : "30"
+      }
+    );
 
-  // eslint-disable-next-line sonarjs/cognitive-complexity
-  const renderLandingScreen = () => {
-    const firstButtonStyle = isCieUatEnabled
-      ? styles.uatCie
-      : styles.fullOpacity;
-    const secondButtonStyle = isCieSupported()
-      ? styles.fullOpacity
-      : styles.noCie;
     return (
-      <BaseScreenComponent
-        appLogo
-        contextualHelpMarkdown={contextualHelpMarkdown}
-        faqCategories={
-          isCieSupported() ? ["landing_SPID", "landing_CIE"] : ["landing_SPID"]
-        }
-      >
-        {isDevEnv && <DevScreenButton onPress={navigateToMarkdown} />}
-
-        {isSessionExpired ? (
-          <InfoScreenComponent
+      <View style={IOStyles.flex}>
+        {isSessionExpiredRef.current ? (
+          <LandingCardComponent
+            id={0}
+            ref={accessibilityFirstFocuseViewRef}
+            pictogramName={"time"}
             title={I18n.t("authentication.landing.session_expired.title")}
-            body={I18n.t("authentication.landing.session_expired.body", {
-              days: isFastLoginEnabled ? "365" : "30"
-            })}
-            image={renderInfoRasterImage(sessionExpiredImg)}
+            content={sessionExpiredCardContent}
+            accessibilityLabel={`${I18n.t(
+              "authentication.landing.session_expired.title"
+            )} ${sessionExpiredCardContent}`}
           />
         ) : (
-          <Content contentContainerStyle={styles.flex} noPadded={true}>
-            <HorizontalScroll cards={renderCardComponents()} />
-          </Content>
+          <Carousel
+            ref={accessibilityFirstFocuseViewRef}
+            carouselCards={carouselCards}
+            dotEasterEggCallback={navigateToCieUatSelectionScreen}
+          />
         )}
 
         <SectionStatusComponent sectionKey={"login"} />
-        <View style={IOStyles.footer}>
-          <ButtonDefaultOpacity
-            block={true}
-            primary={true}
-            iconLeft={true}
-            onPress={
-              isCieSupported() ? navigateToCiePinScreen : navigateToIdpSelection
-            }
-            onLongPress={() =>
-              isCieSupported() ? navigateToCieUatSelectionScreen() : ""
+        <ContentWrapper>
+          <ButtonSolid
+            testID={
+              isCieSupported()
+                ? "landing-button-login-cie"
+                : "landing-button-login-spid"
             }
-            accessibilityRole="button"
-            accessible={true}
-            style={firstButtonStyle}
             accessibilityLabel={
               isCieSupported()
                 ? I18n.t("authentication.landing.loginCie")
                 : I18n.t("authentication.landing.loginSpid")
             }
+            fullWidth={true}
+            color={isCieUatEnabled ? "danger" : "primary"}
+            label={
+              isCieSupported()
+                ? I18n.t("authentication.landing.loginCie")
+                : I18n.t("authentication.landing.loginSpid")
+            }
+            icon={isCieSupported() ? "cie" : "spid"}
+            onPress={
+              isCieSupported() ? navigateToCiePinScreen : navigateToIdpSelection
+            }
+          />
+          <VSpacer size={SPACE_BETWEEN_BUTTONS} />
+          <ButtonSolid
             testID={
               isCieSupported()
-                ? "landing-button-login-cie"
-                : "landing-button-login-spid"
+                ? "landing-button-login-spid"
+                : "landing-button-login-cie"
             }
-          >
-            <Icon
-              name={isCieSupported() ? "cie" : "navProfile"}
-              color="white"
-            />
-            <HSpacer size={8} />
-            <NBButtonText>
-              {isCieSupported()
-                ? I18n.t("authentication.landing.loginCie")
-                : I18n.t("authentication.landing.loginSpid")}
-            </NBButtonText>
-          </ButtonDefaultOpacity>
-          <VSpacer size={16} />
-          <ButtonDefaultOpacity
+            fullWidth={true}
             accessibilityLabel={
               isCieSupported()
                 ? I18n.t("authentication.landing.loginSpid")
                 : I18n.t("authentication.landing.loginCie")
             }
-            accessibilityRole="button"
-            accessible={true}
-            style={secondButtonStyle}
-            block={true}
-            primary={true}
-            iconLeft={true}
+            color="primary"
+            // if CIE is not supported, since the new DS has not a
+            // "semi-enabled" state, we leave the button enabled
+            // but we navigate to the CIE unsupported info screen.
+            label={
+              isCieSupported()
+                ? I18n.t("authentication.landing.loginSpid")
+                : I18n.t("authentication.landing.loginCie")
+            }
+            icon={isCieSupported() ? "spid" : "cie"}
             onPress={
               isCieSupported() ? navigateToIdpSelection : navigateToCiePinScreen
             }
-            testID={
-              isCieSupported()
-                ? "landing-button-login-spid"
-                : "landing-button-login-cie"
-            }
-          >
-            <Icon
-              name={isCieSupported() ? "navProfile" : "cie"}
-              color="white"
+          />
+          <VSpacer size={SPACE_AROUND_BUTTON_LINK} />
+          <View style={IOStyles.selfCenter}>
+            <ButtonLink
+              accessibilityLabel={I18n.t("authentication.landing.privacyLink")}
+              color="primary"
+              label={I18n.t("authentication.landing.privacyLink")}
+              onPress={navigateToPrivacyUrl}
             />
-            <HSpacer size={8} />
-            <NBButtonText>
-              {isCieSupported()
-                ? I18n.t("authentication.landing.loginSpid")
-                : I18n.t("authentication.landing.loginCie")}
-            </NBButtonText>
-          </ButtonDefaultOpacity>
-          <VSpacer size={16} />
-          <Link
-            style={styles.link}
-            onPress={navigateToSpidCieInformationRequest}
-          >
-            {isCieSupported()
-              ? I18n.t("authentication.landing.nospid-nocie")
-              : I18n.t("authentication.landing.nospid")}
-          </Link>
-        </View>
-      </BaseScreenComponent>
+            <VSpacer size={SPACE_AROUND_BUTTON_LINK} />
+          </View>
+          {insets.bottom !== 0 && <VSpacer size={SPACE_AROUND_BUTTON_LINK} />}
+        </ContentWrapper>
+      </View>
     );
   };
 
   // Screen displayed during the async loading of the JailMonkey.isJailBroken()
-  const renderLoadingScreen = () => (
+  const LoadingScreen = () => (
     <View style={{ flex: 1 }}>
       <LoadingSpinnerOverlay isLoading={true} />
     </View>
   );
 
-  const chooseScreenToRender = (isRootedOrJailbroken: boolean) => {
+  React.useEffect(() => {
     // if the device is compromised and the user didn't allow to continue
     // show a blocking modal
-    if (isRootedOrJailbroken && !isContinueWithRootOrJailbreak) {
+    if (
+      O.isSome(isRootedOrJailbroken) &&
+      isRootedOrJailbroken.value &&
+      !isContinueWithRootOrJailbreak
+    ) {
       void mixpanelTrack("SHOW_ROOTED_OR_JAILBROKEN_MODAL");
-      return (
-        <RootedDeviceModal
-          onContinue={() => handleContinueWithRootOrJailbreak(true)}
-          onCancel={() => handleContinueWithRootOrJailbreak(false)}
-        />
-      );
+      navigation.navigate(ROUTES.AUTHENTICATION, {
+        screen: ROUTES.AUTHENTICATION_ROOTED_DEVICE
+      });
     }
-    // In case of Tablet, display an alert to inform the user
+  }, [isContinueWithRootOrJailbreak, isRootedOrJailbroken, navigation]);
+
+  // If the async loading of the isRootedOrJailbroken is not ready, display a loading
+  if (O.isNone(isRootedOrJailbroken)) {
+    return <LoadingScreen />;
+  } else {
     if (DeviceInfo.isTablet()) {
       displayTabletAlert();
     }
-    // standard rendering of the landing screen
-    return renderLandingScreen();
-  };
-
-  // If the async loading of the isRootedOrJailbroken is not ready, display a loading
-  return pipe(
-    isRootedOrJailbroken,
-    O.fold(
-      () => renderLoadingScreen(),
-      // when the value isRootedOrJailbroken is ready, display the right screen based on a set of rule
-      rootedOrJailbroken => chooseScreenToRender(rootedOrJailbroken)
-    )
-  );
+    return <LandingScreen />;
+  }
 };
diff --git a/ts/screens/authentication/NewOptInScreen.tsx b/ts/screens/authentication/NewOptInScreen.tsx
index 5c088079a8f..456d5649804 100644
--- a/ts/screens/authentication/NewOptInScreen.tsx
+++ b/ts/screens/authentication/NewOptInScreen.tsx
@@ -10,14 +10,11 @@ import {
   Pictogram,
   VSpacer
 } from "@pagopa/io-app-design-system";
-import { useNavigation } from "@react-navigation/native";
 import { useStore } from "react-redux";
-import BaseScreenComponent, {
-  ContextualHelpPropsMarkdown
-} from "../../components/screens/BaseScreenComponent";
+import { Route, useFocusEffect, useRoute } from "@react-navigation/native";
+import { ContextualHelpPropsMarkdown } from "../../components/screens/BaseScreenComponent";
 import ROUTES from "../../navigation/routes";
-import { AuthenticationParamsList } from "../../navigation/params/AuthenticationParamsList";
-import { IOStackNavigationRouteProps } from "../../navigation/params/AppParamsList";
+import { useIONavigation } from "../../navigation/params/AppParamsList";
 import I18n from "../../i18n";
 import { setFastLoginOptIn } from "../../features/fastLogin/store/actions/optInActions";
 import { useIODispatch } from "../../store/hooks";
@@ -29,6 +26,8 @@ import {
   trackLoginSessionOptInInfo
 } from "../../features/fastLogin/analytics/optinAnalytics";
 import { useSecuritySuggestionsBottomSheet } from "../../hooks/useSecuritySuggestionBottomSheet";
+import { setAccessibilityFocus } from "../../utils/accessibility";
+import { useHeaderSecondLevel } from "../../hooks/useHeaderSecondLevel";
 
 const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
   title: "authentication.opt_in.contextualHelpTitle",
@@ -41,28 +40,29 @@ export type ChosenIdentifier = {
   identifier: "SPID" | "CIE";
 };
 
-type Props = IOStackNavigationRouteProps<
-  AuthenticationParamsList,
-  "AUTHENTICATION_OPT_IN"
->;
+const NewOptInScreen = () => {
+  useHeaderSecondLevel({
+    title: "",
+    supportRequest: true,
+    contextualHelpMarkdown
+  });
 
-const NewOptInScreen = (props: Props) => {
+  const accessibilityFirstFocuseViewRef = React.useRef<View>(null);
   const dispatch = useIODispatch();
   const {
     securitySuggestionBottomSheet,
     presentSecuritySuggestionBottomSheet
   } = useSecuritySuggestionsBottomSheet();
-
-  const navigation = useNavigation();
+  const { identifier } =
+    useRoute<Route<"AUTHENTICATION_OPT_IN", ChosenIdentifier>>().params;
+  const navigation = useIONavigation();
   const store = useStore();
 
   useOnFirstRender(() => {
     trackLoginSessionOptIn();
   });
 
-  useOnFirstRender(() => {
-    trackLoginSessionOptIn();
-  });
+  useFocusEffect(() => setAccessibilityFocus(accessibilityFirstFocuseViewRef));
 
   const navigateToIdpPage = (isLV: boolean) => {
     if (isLV) {
@@ -72,7 +72,7 @@ const NewOptInScreen = (props: Props) => {
     }
     navigation.navigate(ROUTES.AUTHENTICATION, {
       screen:
-        props.route.params.identifier === "CIE"
+        identifier === "CIE"
           ? ROUTES.CIE_PIN_SCREEN
           : ROUTES.AUTHENTICATION_IDP_SELECTION
     });
@@ -80,74 +80,72 @@ const NewOptInScreen = (props: Props) => {
   };
 
   return (
-    <BaseScreenComponent
-      goBack={true}
-      contextualHelpMarkdown={contextualHelpMarkdown}
+    <GradientScrollView
+      testID="container-test"
+      primaryActionProps={{
+        label: I18n.t("authentication.opt_in.button_accept_lv"),
+        accessibilityLabel: I18n.t("authentication.opt_in.button_accept_lv"),
+        onPress: () => navigateToIdpPage(true),
+        testID: "accept-button-test"
+      }}
+      secondaryActionProps={{
+        label: I18n.t("authentication.opt_in.button_decline_lv"),
+        accessibilityLabel: I18n.t("authentication.opt_in.button_decline_lv"),
+        onPress: () => navigateToIdpPage(false),
+        testID: "decline-button-test"
+      }}
     >
-      <GradientScrollView
-        testID="container-test"
-        primaryActionProps={{
-          label: I18n.t("authentication.opt_in.button_accept_lv"),
-          accessibilityLabel: I18n.t("authentication.opt_in.button_accept_lv"),
-          onPress: () => navigateToIdpPage(true),
-          testID: "accept-button-test"
-        }}
-        secondaryActionProps={{
-          label: I18n.t("authentication.opt_in.button_decline_lv"),
-          accessibilityLabel: I18n.t("authentication.opt_in.button_decline_lv"),
-          onPress: () => navigateToIdpPage(false),
-          testID: "decline-button-test"
-        }}
-      >
-        <ContentWrapper>
-          {/* 
+      <ContentWrapper>
+        {/* 
           if the device height is > 820 then the pictogram will be visible, 
           otherwise it will not be visible
           */}
-          {Dimensions.get("screen").height > MIN_HEIGHT_TO_SHOW_FULL_RENDER && (
-            <View style={IOStyles.selfCenter} testID="pictogram-test">
-              <Pictogram name="passcode" size={120} />
-            </View>
-          )}
-          <VSpacer size={24} />
-          <View style={IOStyles.selfCenter}>
-            <Badge
-              text={I18n.t("authentication.opt_in.news")}
-              variant="info"
-              testID="badge-test"
-            />
+        {Dimensions.get("screen").height > MIN_HEIGHT_TO_SHOW_FULL_RENDER && (
+          <View style={IOStyles.selfCenter} testID="pictogram-test">
+            <Pictogram name="passcode" size={120} />
           </View>
-          <VSpacer size={24} />
+        )}
+        <VSpacer size={24} />
+        <View style={IOStyles.selfCenter}>
+          <Badge
+            text={I18n.t("authentication.opt_in.news")}
+            variant="info"
+            testID="badge-test"
+          />
+        </View>
+        <VSpacer size={24} />
+        <View accessible={true} ref={accessibilityFirstFocuseViewRef}>
           <H3
+            accessible={true}
             style={{ textAlign: "center", alignItems: "center" }}
             testID="title-test"
           >
             {I18n.t("authentication.opt_in.title")}
           </H3>
-          <VSpacer size={24} />
-          <FeatureInfo
-            pictogramName="identityCheck"
-            body={I18n.t("authentication.opt_in.identity_check")}
-          />
-          <VSpacer size={24} />
-          <FeatureInfo
-            pictogramName="passcode"
-            body={I18n.t("authentication.opt_in.passcode")}
-          />
-          <VSpacer size={24} />
-          <FeatureInfo
-            pictogramName="notification"
-            body={I18n.t("authentication.opt_in.notification")}
-            actionLabel={I18n.t("authentication.opt_in.security_suggests")}
-            actionOnPress={() => {
-              trackLoginSessionOptInInfo();
-              return presentSecuritySuggestionBottomSheet();
-            }}
-          />
-        </ContentWrapper>
-        {securitySuggestionBottomSheet}
-      </GradientScrollView>
-    </BaseScreenComponent>
+        </View>
+        <VSpacer size={24} />
+        <FeatureInfo
+          pictogramName="identityCheck"
+          body={I18n.t("authentication.opt_in.identity_check")}
+        />
+        <VSpacer size={24} />
+        <FeatureInfo
+          pictogramName="passcode"
+          body={I18n.t("authentication.opt_in.passcode")}
+        />
+        <VSpacer size={24} />
+        <FeatureInfo
+          pictogramName="notification"
+          body={I18n.t("authentication.opt_in.notification")}
+          actionLabel={I18n.t("authentication.opt_in.security_suggests")}
+          actionOnPress={() => {
+            trackLoginSessionOptInInfo();
+            return presentSecuritySuggestionBottomSheet();
+          }}
+        />
+      </ContentWrapper>
+      {securitySuggestionBottomSheet}
+    </GradientScrollView>
   );
 };
 
diff --git a/ts/screens/authentication/analytics/carouselAnalytics.ts b/ts/screens/authentication/analytics/carouselAnalytics.ts
index 5bd5bae5536..dc5386d4b60 100644
--- a/ts/screens/authentication/analytics/carouselAnalytics.ts
+++ b/ts/screens/authentication/analytics/carouselAnalytics.ts
@@ -23,13 +23,6 @@ function trackCarouselPaymentScreen() {
   );
 }
 
-function trackCarouselAccessScreen() {
-  void mixpanelTrack(
-    "LOGIN_CAROUSEL_5",
-    buildEventProperties("UX", "screen_view")
-  );
-}
-
 export function trackCarousel(
   index: number,
   cards: ReadonlyArray<JSX.Element>
@@ -51,9 +44,5 @@ export function trackCarousel(
       trackCarouselPaymentScreen();
       break;
     }
-    case 4: {
-      trackCarouselAccessScreen();
-      break;
-    }
   }
 }
diff --git a/ts/screens/authentication/analytics/index.ts b/ts/screens/authentication/analytics/index.ts
index cdc60cb5a28..a490765049b 100644
--- a/ts/screens/authentication/analytics/index.ts
+++ b/ts/screens/authentication/analytics/index.ts
@@ -17,10 +17,7 @@ export async function trackCieLoginSelected(state: GlobalState) {
     property: "LOGIN_METHOD",
     value: IdpCIE.id
   });
-  await mixpanelTrack(
-    "LOGIN_CIE_SELECTED",
-    buildEventProperties("UX", "action")
-  );
+  mixpanelTrack("LOGIN_CIE_SELECTED", buildEventProperties("UX", "action"));
 }
 
 export function trackSpidLoginSelected() {
diff --git a/ts/screens/authentication/analytics/spidAnalytics.ts b/ts/screens/authentication/analytics/spidAnalytics.ts
index 159a28846c1..88d77876ec4 100644
--- a/ts/screens/authentication/analytics/spidAnalytics.ts
+++ b/ts/screens/authentication/analytics/spidAnalytics.ts
@@ -93,7 +93,7 @@ export async function trackLoginSpidIdpSelected(
     property: "LOGIN_METHOD",
     value: idp
   });
-  await mixpanelTrack(
+  mixpanelTrack(
     "LOGIN_SPID_IDP_SELECTED",
     buildEventProperties("UX", "action", {
       idp
diff --git a/ts/screens/authentication/carousel/Carousel.tsx b/ts/screens/authentication/carousel/Carousel.tsx
new file mode 100644
index 00000000000..7cd7b23e2f5
--- /dev/null
+++ b/ts/screens/authentication/carousel/Carousel.tsx
@@ -0,0 +1,154 @@
+import { IOColors, VSpacer } from "@pagopa/io-app-design-system";
+import * as React from "react";
+import {
+  Animated,
+  ScrollView,
+  View,
+  StyleSheet,
+  GestureResponderEvent,
+  useWindowDimensions
+} from "react-native";
+import { trackCarousel } from "../analytics/carouselAnalytics";
+import { LandingCardComponent } from "../../../components/LandingCardComponent";
+import { ComponentProps } from "../../../types/react";
+import { useInteractiveElementDefaultColorName } from "../../../utils/hooks/theme";
+
+const styles = StyleSheet.create({
+  normalDot: {
+    height: 8,
+    width: 8,
+    borderRadius: 4,
+    backgroundColor: IOColors.greyLight,
+    marginHorizontal: 4
+  },
+  indicatorContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
+const newDsGrey = IOColors["grey-200"];
+
+type CarouselProps = {
+  carouselCards: ReadonlyArray<ComponentProps<typeof LandingCardComponent>>;
+  dotEasterEggCallback?: () => void;
+};
+
+type CarouselDotsProps = CarouselProps & { scrollX: Animated.Value };
+
+const CarouselDots = (props: CarouselDotsProps) => {
+  const { carouselCards, dotEasterEggCallback, scrollX } = props;
+  const dotTouchCount = React.useRef(0);
+
+  const blueColor = useInteractiveElementDefaultColorName();
+
+  const screenDimension = useWindowDimensions();
+  const windowWidth = screenDimension.width;
+
+  return (
+    <View
+      importantForAccessibility="yes"
+      accessibilityElementsHidden={false}
+      style={styles.indicatorContainer}
+      onTouchEnd={(_: GestureResponderEvent) => {
+        // eslint-disable-next-line functional/immutable-data
+        dotTouchCount.current++;
+        if (dotTouchCount.current === 3) {
+          // eslint-disable-next-line functional/immutable-data
+          dotTouchCount.current = 0;
+          dotEasterEggCallback?.();
+        }
+      }}
+    >
+      {carouselCards.map((_, imageIndex) => {
+        const width = scrollX.interpolate({
+          inputRange: [
+            windowWidth * (imageIndex - 1),
+            windowWidth * imageIndex,
+            windowWidth * (imageIndex + 1)
+          ],
+          outputRange: [8, 16, 8],
+          extrapolate: "clamp"
+        });
+        const backgroundColor = scrollX.interpolate({
+          inputRange: [
+            windowWidth * (imageIndex - 1),
+            windowWidth * imageIndex,
+            windowWidth * (imageIndex + 1)
+          ],
+          outputRange: [newDsGrey, blueColor, newDsGrey],
+          extrapolate: "clamp"
+        });
+        return (
+          <Animated.View
+            key={imageIndex}
+            style={[styles.normalDot, { width, backgroundColor }]}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+export const Carousel = React.forwardRef<View, CarouselProps>((props, ref) => {
+  const { carouselCards, dotEasterEggCallback } = props;
+  const screenDimension = useWindowDimensions();
+  const windowWidth = screenDimension.width;
+  const scrollX = React.useRef(new Animated.Value(0)).current;
+
+  const renderCardComponents = React.useCallback(
+    () =>
+      carouselCards.map(p => (
+        <LandingCardComponent
+          ref={p.id === 0 ? ref : null}
+          key={`card-${p.id}`}
+          {...p}
+        />
+      )),
+    [carouselCards, ref]
+  );
+
+  const cardComponents = renderCardComponents();
+
+  return (
+    <>
+      <ScrollView
+        horizontal={true}
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        onScrollEndDrag={event => {
+          const contentOffsetX = event.nativeEvent.contentOffset.x;
+          const currentPageIndex = Math.round(contentOffsetX / windowWidth);
+          if (
+            currentPageIndex >= 0 &&
+            cardComponents.length > currentPageIndex
+          ) {
+            trackCarousel(currentPageIndex, cardComponents);
+          }
+        }}
+        onScroll={Animated.event(
+          [
+            {
+              nativeEvent: {
+                contentOffset: {
+                  x: scrollX
+                }
+              }
+            }
+          ],
+          { useNativeDriver: false }
+        )}
+        scrollEventThrottle={1}
+      >
+        {cardComponents}
+      </ScrollView>
+      <CarouselDots
+        dotEasterEggCallback={dotEasterEggCallback}
+        carouselCards={carouselCards}
+        scrollX={scrollX}
+      />
+      <VSpacer size={24} />
+    </>
+  );
+});
diff --git a/ts/screens/authentication/cie/CieAuthorizeDataUsageScreen.tsx b/ts/screens/authentication/cie/CieAuthorizeDataUsageScreen.tsx
index 1235014a393..1fda354675e 100644
--- a/ts/screens/authentication/cie/CieAuthorizeDataUsageScreen.tsx
+++ b/ts/screens/authentication/cie/CieAuthorizeDataUsageScreen.tsx
@@ -8,7 +8,7 @@ import { VSpacer } from "@pagopa/io-app-design-system";
 import { H1 } from "../../../components/core/typography/H1";
 import TopScreenComponent from "../../../components/screens/TopScreenComponent";
 import FooterWithButtons from "../../../components/ui/FooterWithButtons";
-import Markdown from "../../../components/ui/Markdown";
+import LegacyMarkdown from "../../../components/ui/Markdown/LegacyMarkdown";
 import I18n from "../../../i18n";
 import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
 import { AuthenticationParamsList } from "../../../navigation/params/AuthenticationParamsList";
@@ -63,9 +63,9 @@ class CieAuthorizeDataUsageScreen extends React.PureComponent<Props, State> {
           <View style={styles.contentContainerStyle}>
             <H1>{I18n.t("authentication.cie.noDataTitle")}</H1>
             <VSpacer size={16} />
-            <Markdown onLoadEnd={this.handleMarkdownLoadingCompleted}>
+            <LegacyMarkdown onLoadEnd={this.handleMarkdownLoadingCompleted}>
               {I18n.t("authentication.cie.authToSendData")}
-            </Markdown>
+            </LegacyMarkdown>
           </View>
         </Content>
         {this.state.isLoadingCompleted && (
diff --git a/ts/screens/authentication/cie/CieCardReaderScreen.tsx b/ts/screens/authentication/cie/CieCardReaderScreen.tsx
index 9f9995e9a5d..ce82cc19d0c 100644
--- a/ts/screens/authentication/cie/CieCardReaderScreen.tsx
+++ b/ts/screens/authentication/cie/CieCardReaderScreen.tsx
@@ -444,7 +444,8 @@ class CieCardReaderScreen extends React.PureComponent<Props, State> {
         ),
         wrongPin2AttemptLeft: I18n.t(
           "authentication.cie.card.iosAlert.wrongPin2AttemptLeft"
-        )
+        ),
+        genericError: I18n.t("authentication.cie.card.iosAlert.genericError")
       })
       .then(async () => {
         await cieManager.startListeningNFC();
diff --git a/ts/screens/authentication/cie/CieConsentDataUsageScreen.tsx b/ts/screens/authentication/cie/CieConsentDataUsageScreen.tsx
index 42ae9307e26..9dc9877ef5e 100644
--- a/ts/screens/authentication/cie/CieConsentDataUsageScreen.tsx
+++ b/ts/screens/authentication/cie/CieConsentDataUsageScreen.tsx
@@ -11,12 +11,11 @@ import {
 } from "react-native-webview/lib/WebViewTypes";
 import { connect } from "react-redux";
 import { VSpacer } from "@pagopa/io-app-design-system";
+import { Route, useRoute } from "@react-navigation/native";
 import LoadingSpinnerOverlay from "../../../components/LoadingSpinnerOverlay";
 import GenericErrorComponent from "../../../components/screens/GenericErrorComponent";
 import TopScreenComponent from "../../../components/screens/TopScreenComponent";
 import I18n from "../../../i18n";
-import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
-import { AuthenticationParamsList } from "../../../navigation/params/AuthenticationParamsList";
 import {
   loginFailure,
   loginSuccess
@@ -39,24 +38,13 @@ export type CieConsentDataUsageScreenNavigationParams = {
   cieConsentUri: string;
 };
 
-type OwnProps = {
-  isLoading: boolean;
-};
-
-type NavigationProps = IOStackNavigationRouteProps<
-  AuthenticationParamsList,
-  "CIE_CONSENT_DATA_USAGE"
->;
-
 type State = {
   hasError: boolean;
   errorCode?: string;
   isLoginSuccess?: boolean;
 };
 
-type Props = OwnProps &
-  NavigationProps &
-  ReturnType<typeof mapDispatchToProps> &
+type Props = ReturnType<typeof mapDispatchToProps> &
   ReturnType<typeof mapStateToProps>;
 
 const loaderComponent = (
@@ -65,9 +53,14 @@ const loaderComponent = (
   </LoadingSpinnerOverlay>
 );
 
-class CieConsentDataUsageScreen extends React.Component<Props, State> {
+type CieConsentDataUsageScreenProps = Props &
+  CieConsentDataUsageScreenNavigationParams;
+class CieConsentDataUsageScreen extends React.Component<
+  CieConsentDataUsageScreenProps,
+  State
+> {
   private subscription: NativeEventSubscription | undefined;
-  constructor(props: Props) {
+  constructor(props: CieConsentDataUsageScreenProps) {
     super(props);
     trackLoginCieConsentDataUsageScreen();
     this.state = {
@@ -113,7 +106,7 @@ class CieConsentDataUsageScreen extends React.Component<Props, State> {
   }
 
   get cieAuthorizationUri(): string {
-    return this.props.route.params.cieConsentUri;
+    return this.props.cieConsentUri;
   }
 
   private handleWebViewError = () => {
@@ -224,7 +217,15 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
   loginFailure: (error: Error) => dispatch(loginFailure({ error, idp: "cie" }))
 });
 
+const CieConsentDataUsageScreenFC = (props: Props) => {
+  const { cieConsentUri } =
+    useRoute<
+      Route<"CIE_CONSENT_DATA_USAGE", CieConsentDataUsageScreenNavigationParams>
+    >().params;
+  return <CieConsentDataUsageScreen {...props} cieConsentUri={cieConsentUri} />;
+};
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(CieConsentDataUsageScreen);
+)(CieConsentDataUsageScreenFC);
diff --git a/ts/screens/authentication/cie/CieExpiredOrInvalidScreen.tsx b/ts/screens/authentication/cie/CieExpiredOrInvalidScreen.tsx
index 15d1ccd241b..06541a5bfd0 100644
--- a/ts/screens/authentication/cie/CieExpiredOrInvalidScreen.tsx
+++ b/ts/screens/authentication/cie/CieExpiredOrInvalidScreen.tsx
@@ -1,6 +1,5 @@
 import { Content } from "native-base";
 import * as React from "react";
-import { connect } from "react-redux";
 import { VSpacer } from "@pagopa/io-app-design-system";
 import { Body } from "../../../components/core/typography/Body";
 import { Link } from "../../../components/core/typography/Link";
@@ -10,46 +9,38 @@ import FooterWithButtons from "../../../components/ui/FooterWithButtons";
 import { openLink } from "../../../components/ui/Markdown/handlers/link";
 import I18n from "../../../i18n";
 import { resetToAuthenticationRoute } from "../../../store/actions/navigation";
-import { ReduxProps } from "../../../store/actions/types";
 
-type Props = ReduxProps;
 const bookingUrl = I18n.t("cie.booking_url");
 const browseToLink = () => openLink(bookingUrl);
 
-class CieExpiredOrInvalidScreen extends React.PureComponent<Props> {
-  constructor(props: Props) {
-    super(props);
-  }
+const CieExpiredOrInvalidScreen = () => {
+  const handleGoBack = () => resetToAuthenticationRoute();
 
-  private handleGoBack = () => resetToAuthenticationRoute();
+  return (
+    <TopScreenComponent
+      goBack={handleGoBack}
+      headerTitle={I18n.t("authentication.landing.expiredCardHeaderTitle")}
+    >
+      <ScreenContentHeader
+        title={I18n.t("authentication.landing.expiredCardTitle")}
+      />
+      <Content>
+        <Body>{I18n.t("authentication.landing.expiredCardContent")}</Body>
+        <VSpacer size={16} />
+        <Link onPress={browseToLink}>
+          {I18n.t("authentication.landing.expiredCardHelp")}
+        </Link>
+      </Content>
+      <FooterWithButtons
+        type={"SingleButton"}
+        leftButton={{
+          bordered: true,
+          onPress: handleGoBack,
+          title: I18n.t("global.buttons.cancel")
+        }}
+      />
+    </TopScreenComponent>
+  );
+};
 
-  public render(): React.ReactNode {
-    return (
-      <TopScreenComponent
-        goBack={this.handleGoBack}
-        headerTitle={I18n.t("authentication.landing.expiredCardHeaderTitle")}
-      >
-        <ScreenContentHeader
-          title={I18n.t("authentication.landing.expiredCardTitle")}
-        />
-        <Content>
-          <Body>{I18n.t("authentication.landing.expiredCardContent")}</Body>
-          <VSpacer size={16} />
-          <Link onPress={browseToLink}>
-            {I18n.t("authentication.landing.expiredCardHelp")}
-          </Link>
-        </Content>
-        <FooterWithButtons
-          type={"SingleButton"}
-          leftButton={{
-            bordered: true,
-            onPress: this.handleGoBack,
-            title: I18n.t("global.buttons.cancel")
-          }}
-        />
-      </TopScreenComponent>
-    );
-  }
-}
-
-export default connect()(CieExpiredOrInvalidScreen);
+export default CieExpiredOrInvalidScreen;
diff --git a/ts/screens/authentication/cie/CiePinLockedTemporarilyScreen.tsx b/ts/screens/authentication/cie/CiePinLockedTemporarilyScreen.tsx
index 6cd30c4596d..9f1e87c4fa4 100644
--- a/ts/screens/authentication/cie/CiePinLockedTemporarilyScreen.tsx
+++ b/ts/screens/authentication/cie/CiePinLockedTemporarilyScreen.tsx
@@ -9,7 +9,7 @@ import { connect } from "react-redux";
 import { ScreenContentHeader } from "../../../components/screens/ScreenContentHeader";
 import TopScreenComponent from "../../../components/screens/TopScreenComponent";
 import FooterWithButtons from "../../../components/ui/FooterWithButtons";
-import Markdown from "../../../components/ui/Markdown";
+import LegacyMarkdown from "../../../components/ui/Markdown/LegacyMarkdown";
 import I18n from "../../../i18n";
 import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
 import { AuthenticationParamsList } from "../../../navigation/params/AuthenticationParamsList";
@@ -45,7 +45,9 @@ class CiePinLockedTemporarilyScreen extends React.PureComponent<Props, State> {
   private getContextualHelp = () => ({
     title: I18n.t("authentication.cie.pin.contextualHelpTitle"),
     body: () => (
-      <Markdown>{I18n.t("authentication.cie.pin.contextualHelpBody")}</Markdown>
+      <LegacyMarkdown>
+        {I18n.t("authentication.cie.pin.contextualHelpBody")}
+      </LegacyMarkdown>
     )
   });
 
@@ -84,13 +86,13 @@ class CiePinLockedTemporarilyScreen extends React.PureComponent<Props, State> {
           title={I18n.t("authentication.cie.pinTempLocked.title")}
         />
         <Content>
-          <Markdown
+          <LegacyMarkdown
             onLoadEnd={() => {
               this.setState({ isLoadingCompleted: true });
             }}
           >
             {I18n.t("authentication.cie.pinTempLocked.content")}
-          </Markdown>
+          </LegacyMarkdown>
         </Content>
 
         {this.state.isLoadingCompleted && this.renderFooterButtons()}
diff --git a/ts/screens/authentication/cie/CiePinScreen.tsx b/ts/screens/authentication/cie/CiePinScreen.tsx
index c80d8ab2f8c..22cbc7b9be6 100644
--- a/ts/screens/authentication/cie/CiePinScreen.tsx
+++ b/ts/screens/authentication/cie/CiePinScreen.tsx
@@ -29,13 +29,13 @@ import {
   BottomTopAnimation,
   LightModalContext
 } from "../../../components/ui/LightModal";
-import Markdown from "../../../components/ui/Markdown";
+import LegacyMarkdown from "../../../components/ui/Markdown/LegacyMarkdown";
 import I18n from "../../../i18n";
 import { IOStackNavigationProp } from "../../../navigation/params/AppParamsList";
 import { AuthenticationParamsList } from "../../../navigation/params/AuthenticationParamsList";
 import ROUTES from "../../../navigation/routes";
 import { nfcIsEnabled } from "../../../store/actions/cie";
-import { Dispatch, ReduxProps } from "../../../store/actions/types";
+import { Dispatch } from "../../../store/actions/types";
 import variables from "../../../theme/variables";
 import { setAccessibilityFocus } from "../../../utils/accessibility";
 import { useLegacyIOBottomSheetModal } from "../../../utils/hooks/bottomSheet";
@@ -60,7 +60,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
     dispatch(loginSuccess({ token, idp }))
 });
 
-type Props = ReduxProps & ReturnType<typeof mapDispatchToProps>;
+type Props = ReturnType<typeof mapDispatchToProps>;
 
 const styles = StyleSheet.create({
   container: {
@@ -79,7 +79,9 @@ const CIE_PIN_LENGTH = 8;
 const getContextualHelp = () => ({
   title: I18n.t("authentication.cie.pin.contextualHelpTitle"),
   body: () => (
-    <Markdown>{I18n.t("authentication.cie.pin.contextualHelpBody")}</Markdown>
+    <LegacyMarkdown>
+      {I18n.t("authentication.cie.pin.contextualHelpBody")}
+    </LegacyMarkdown>
   )
 });
 const onOpenForgotPinPage = () => openWebUrl(pinPukHelpUrl);
@@ -109,9 +111,9 @@ const CiePinScreen: React.FC<Props> = props => {
 
   const { present, bottomSheet } = useLegacyIOBottomSheetModal(
     <View>
-      <Markdown avoidTextSelection>
+      <LegacyMarkdown avoidTextSelection>
         {I18n.t("bottomSheets.ciePin.content")}
-      </Markdown>
+      </LegacyMarkdown>
       <ButtonDefaultOpacity
         onPress={onOpenForgotPinPage}
         style={styles.bsLinkButton}
diff --git a/ts/screens/authentication/idpAuthSessionHandler.tsx b/ts/screens/authentication/idpAuthSessionHandler.tsx
index 79e96ad346f..272317634f6 100644
--- a/ts/screens/authentication/idpAuthSessionHandler.tsx
+++ b/ts/screens/authentication/idpAuthSessionHandler.tsx
@@ -31,7 +31,7 @@ import {
   getIdpLoginUri
 } from "../../utils/login";
 import { idpContextualHelpDataFromIdSelector } from "../../store/reducers/content";
-import Markdown from "../../components/ui/Markdown";
+import LegacyMarkdown from "../../components/ui/Markdown/LegacyMarkdown";
 import IdpCustomContextualHelpContent from "../../components/screens/IdpCustomContextualHelpContent";
 import NavigationService from "../../navigation/NavigationService";
 import LoadingSpinnerOverlay from "../../components/LoadingSpinnerOverlay";
@@ -122,6 +122,7 @@ const idpAuthSession = (
     )
   );
 
+// This page is used in the native login process.
 export const AuthSessionPage = () => {
   const [requestInfo, setRequestInfo] = useState<RequestInfo>({
     requestState: "LOADING",
@@ -196,9 +197,9 @@ export const AuthSessionPage = () => {
           () => ({
             title: I18n.t("authentication.idp_login.contextualHelpTitle"),
             body: () => (
-              <Markdown>
+              <LegacyMarkdown>
                 {I18n.t("authentication.idp_login.contextualHelpContent")}
-              </Markdown>
+              </LegacyMarkdown>
             )
           }),
           idpTextData => IdpCustomContextualHelpContent(idpTextData)
@@ -257,12 +258,12 @@ export const AuthSessionPage = () => {
     (error?: LoginUtilsError) => {
       void mixpanelTrack("SPID_ERROR", {
         idp,
-        description: error?.userInfo.Error,
+        description: error?.userInfo?.error,
         errorType: ErrorType.LOADING_ERROR
       });
 
       const backPressed: LoginUtilsErrorType = "NativeAuthSessionClosed";
-      if (error?.userInfo.Error === backPressed) {
+      if (error?.userInfo?.error === backPressed) {
         onBack();
         return;
       }
diff --git a/ts/screens/development/MarkdownScreen.tsx b/ts/screens/development/MarkdownScreen.tsx
deleted file mode 100644
index 0f27ec0b880..00000000000
--- a/ts/screens/development/MarkdownScreen.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import { Container, Content, Text as NBButtonText } from "native-base";
-import * as React from "react";
-import { View, TextInput } from "react-native";
-import { IOColors, VSpacer } from "@pagopa/io-app-design-system";
-import ButtonDefaultOpacity from "../../components/ButtonDefaultOpacity";
-
-import Markdown from "../../components/ui/Markdown";
-import I18n from "../../i18n";
-
-const MARKDOWN_REFERENCE = I18n.t("global.markdown.reference");
-
-const MARKDOWN_HEADING = `
-# I am a Header 1
-
-## I am a Header 2
-
-### I am a Header 3
-
-#### I am a Header 4
-
-##### I am a Header 5
-
-###### I am a Header 6
-`;
-
-const MARKDOWN_PARAGRAPH = `
-A simple paragraph.
-
-Text can be emphasized with *asterisk* or _underscore_.
-
-If you need bold use **double asterisk**.
-`;
-
-const MARKDOWN_LIST = `
-Unordered list:
-
-* React
-* Vue
-* Angular
-
-Ordered list:
-
-1. React
-2. Vue
-3. Angular
-`;
-
-type Props = Record<string, unknown>;
-
-type State = {
-  markdown: string;
-};
-
-const INITIAL_STATE: State = {
-  markdown: ""
-};
-
-class MarkdownScreen extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = INITIAL_STATE;
-  }
-
-  private setMarkdown(markdown: string) {
-    this.setState({
-      markdown
-    });
-  }
-
-  public render() {
-    return (
-      <Container>
-        <Content>
-          <View
-            style={{ flexDirection: "row", justifyContent: "space-around" }}
-          >
-            <ButtonDefaultOpacity
-              small={true}
-              onPress={() => this.setMarkdown(MARKDOWN_HEADING)}
-            >
-              <NBButtonText>Heading</NBButtonText>
-            </ButtonDefaultOpacity>
-            <ButtonDefaultOpacity
-              small={true}
-              onPress={() => this.setMarkdown(MARKDOWN_PARAGRAPH)}
-            >
-              <NBButtonText>Paragraph</NBButtonText>
-            </ButtonDefaultOpacity>
-            <ButtonDefaultOpacity
-              small={true}
-              onPress={() => this.setMarkdown(MARKDOWN_LIST)}
-            >
-              <NBButtonText>List</NBButtonText>
-            </ButtonDefaultOpacity>
-            <ButtonDefaultOpacity
-              small={true}
-              onPress={() => this.setMarkdown(MARKDOWN_REFERENCE)}
-            >
-              <NBButtonText>Reference</NBButtonText>
-            </ButtonDefaultOpacity>
-          </View>
-          <VSpacer size={16} />
-          <TextInput
-            style={{
-              borderColor: IOColors.grey,
-              borderWidth: 1,
-              width: "100%"
-            }}
-            onChangeText={text => this.setState({ markdown: text })}
-            value={this.state.markdown}
-            multiline={true}
-            numberOfLines={10}
-          />
-          <VSpacer size={16} />
-          <Markdown>{this.state.markdown}</Markdown>
-        </Content>
-      </Container>
-    );
-  }
-}
-
-export default MarkdownScreen;
diff --git a/ts/screens/ingress/CheckBox.tsx b/ts/screens/ingress/CheckBox.tsx
deleted file mode 100644
index dc8bbf7ddfb..00000000000
--- a/ts/screens/ingress/CheckBox.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import * as React from "react";
-import { StyleSheet, View } from "react-native";
-import {
-  IOColors,
-  IOIconSizeScaleCheckbox,
-  Icon,
-  hexToRgba
-} from "@pagopa/io-app-design-system";
-
-type Props = {
-  checked: boolean;
-};
-
-const checkBoxColor = hexToRgba(IOColors.white, 0.15);
-const CHECKBOX_SIZE: number = 20;
-const CHECKBOX_ICON_SIZE: IOIconSizeScaleCheckbox = 14;
-
-const styles = StyleSheet.create({
-  base: {
-    width: CHECKBOX_SIZE,
-    height: CHECKBOX_SIZE,
-    alignItems: "center",
-    justifyContent: "center",
-    borderWidth: 2,
-    borderColor: checkBoxColor,
-    borderRadius: 4
-  },
-  checked: {
-    borderColor: `transparent`,
-    backgroundColor: checkBoxColor
-  }
-});
-
-export const IngressCheckBox = (props: Props) => (
-  <View style={[styles.base, props.checked ? styles.checked : {}]}>
-    {props.checked && (
-      <Icon name="checkTickBig" size={CHECKBOX_ICON_SIZE} color="white" />
-    )}
-  </View>
-);
diff --git a/ts/screens/ingress/IngressScreen.tsx b/ts/screens/ingress/IngressScreen.tsx
index 5f627637caa..5836f3e15ed 100644
--- a/ts/screens/ingress/IngressScreen.tsx
+++ b/ts/screens/ingress/IngressScreen.tsx
@@ -1,104 +1,68 @@
 /**
  * An ingress screen to choose the real first screen the user must navigate to.
  */
-import * as pot from "@pagopa/ts-commons/lib/pot";
-import * as O from "fp-ts/lib/Option";
-import { Container, List, ListItem, Spinner } from "native-base";
 import * as React from "react";
-import { StatusBar, StyleSheet, View, SafeAreaView } from "react-native";
-import { connect } from "react-redux";
-import { HSpacer } from "@pagopa/io-app-design-system";
-import { Body } from "../../components/core/typography/Body";
-import { IOStyles } from "../../components/core/variables/IOStyles";
-import SectionStatusComponent from "../../components/SectionStatus";
-import I18n from "../../i18n";
-import { ReduxProps } from "../../store/actions/types";
+import { View, StyleSheet, AccessibilityInfo, Platform } from "react-native";
 import {
-  sessionInfoSelector,
-  sessionTokenSelector
-} from "../../store/reducers/authentication";
-import { profileSelector } from "../../store/reducers/profile";
-import { GlobalState } from "../../store/reducers/types";
-import variables from "../../theme/variables";
-import { IngressCheckBox } from "./CheckBox";
-
-type Props = ReduxProps & ReturnType<typeof mapStateToProps>;
+  ContentWrapper,
+  H3,
+  IOStyles,
+  VSpacer
+} from "@pagopa/io-app-design-system";
+import { SafeAreaView } from "react-native-safe-area-context";
+import I18n from "../../i18n";
+import { useOnFirstRender } from "../../utils/hooks/useOnFirstRender";
+import { trackIngressScreen } from "../profile/analytics";
+import { LoadingIndicator } from "../../components/ui/LoadingIndicator";
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    paddingTop: variables.contentPaddingLarge,
-    backgroundColor: variables.brandPrimary
+    ...IOStyles.bgWhite,
+    ...IOStyles.centerJustified,
+    ...IOStyles.flex
+  },
+  contentTitle: {
+    textAlign: "center"
+  },
+  content: {
+    alignItems: "center"
   }
 });
 
-class IngressScreen extends React.PureComponent<Props> {
-  public render() {
-    const items = [
-      {
-        enabled: this.props.hasSessionToken,
-        label: I18n.t("startup.authentication")
-      },
-      {
-        enabled: this.props.hasSessionInfo,
-        label: I18n.t("startup.sessionInfo")
-      },
-      { enabled: this.props.hasProfile, label: I18n.t("startup.profileInfo") },
-      {
-        enabled: this.props.isProfileEnabled,
-        label: I18n.t("startup.profileEnabled")
-      }
-    ];
-    return (
-      <SafeAreaView
-        style={[IOStyles.flex, { backgroundColor: variables.brandPrimary }]}
-      >
-        <StatusBar
-          barStyle="light-content"
-          backgroundColor={styles.container.backgroundColor}
-        />
-        <Container style={styles.container}>
-          <View style={IOStyles.alignCenter}>
-            <Body color="white">{I18n.t("startup.title")}</Body>
-          </View>
-          <Spinner color="white" />
-
-          <List withContentLateralPadding={true}>
-            {items.map((item, index) => (
-              <ListItem key={`item-${index}`}>
-                <IngressCheckBox checked={item.enabled} />
-                <HSpacer size={8} />
-                <Body
-                  color="white"
-                  weight={item.enabled ? "SemiBold" : "Regular"}
-                >
-                  {item.label}
-                </Body>
-              </ListItem>
-            ))}
-          </List>
-          <View style={{ marginTop: 48 }}>
-            <SectionStatusComponent sectionKey={"ingress"} />
-          </View>
-        </Container>
-      </SafeAreaView>
-    );
-  }
-}
+const SPACE_BETWEEN_SPINNER_AND_TEXT = 24;
 
-function mapStateToProps(state: GlobalState) {
-  const maybeSessionToken = sessionTokenSelector(state);
-  const maybeSessionInfo = sessionInfoSelector(state);
-  const potProfile = profileSelector(state);
-  return {
-    hasSessionToken: maybeSessionToken !== undefined,
-    hasSessionInfo: O.isSome(maybeSessionInfo),
-    hasProfile: potProfile !== null,
-    isProfileEnabled:
-      pot.isSome(potProfile) &&
-      potProfile.value.has_profile &&
-      potProfile.value.is_inbox_enabled
-  };
-}
+export const IngressScreen = () => {
+  const contentTitle = I18n.t("startup.title");
+  useOnFirstRender(() => {
+    trackIngressScreen();
+    // Since the screen is shown for a very short time,
+    // we prefer to announce the content to the screen reader,
+    // instead of focusing the first element.
+    if (Platform.OS === "android") {
+      // We use it only on Android, because on iOS the screen reader
+      // stops reading the content when the ingress screen is unmounted
+      // and the focus is moved to another element.
+      AccessibilityInfo.announceForAccessibility(contentTitle);
+    }
+  });
 
-export default connect(mapStateToProps)(IngressScreen);
+  return (
+    <SafeAreaView style={styles.container}>
+      <ContentWrapper>
+        <View style={styles.content}>
+          <View
+            accessible={false}
+            accessibilityElementsHidden={true}
+            importantForAccessibility={"no-hide-descendants"}
+          >
+            <LoadingIndicator />
+          </View>
+          <VSpacer size={SPACE_BETWEEN_SPINNER_AND_TEXT} />
+          <H3 style={styles.contentTitle} accessibilityLabel={contentTitle}>
+            {contentTitle}
+          </H3>
+        </View>
+      </ContentWrapper>
+    </SafeAreaView>
+  );
+};
diff --git a/ts/screens/modal/IdentificationLockModal.tsx b/ts/screens/modal/IdentificationLockModal.tsx
index 3e46caace75..0ffb349fbf5 100644
--- a/ts/screens/modal/IdentificationLockModal.tsx
+++ b/ts/screens/modal/IdentificationLockModal.tsx
@@ -1,74 +1,125 @@
 import { Millisecond } from "@pagopa/ts-commons/lib/units";
-import { format } from "date-fns";
-import { pipe } from "fp-ts/lib/function";
-import * as O from "fp-ts/lib/Option";
 import * as React from "react";
-import { View, Image, Modal, StyleSheet } from "react-native";
-import { VSpacer } from "@pagopa/io-app-design-system";
-import errorIcon from "../../../img/messages/error-message-detail-icon.png";
-import { H1 } from "../../components/core/typography/H1";
+import { useEffect } from "react";
+import { View, Modal, StyleSheet, SafeAreaView } from "react-native";
+import {
+  ContentWrapper,
+  LabelSmall,
+  Pictogram,
+  VSpacer
+} from "@pagopa/io-app-design-system";
 import { H3 } from "../../components/core/typography/H3";
 import { IOStyles } from "../../components/core/variables/IOStyles";
 import I18n from "../../i18n";
+import { useIODispatch } from "../../store/hooks";
+import { identificationHideLockModal } from "../../store/actions/identification";
+import { IOStyleVariables } from "../../components/core/variables/IOStyleVariables";
+import {
+  CountdownProvider,
+  useCountdown
+} from "../../components/countdown/CountdownProvider";
+import { useOnFirstRender } from "../../utils/hooks/useOnFirstRender";
+import { ProgressIndicator } from "../../components/ui/ProgressIndicator";
 
 type Props = {
-  // milliseconds
-  countdown?: Millisecond;
+  countdownInMs: Millisecond;
+  timeSpanInSeconds: number;
 };
 
-const styles = StyleSheet.create({
-  imageContainer: {
-    paddingTop: 96
-  },
-  spaced: {
-    flexDirection: "column",
-    alignItems: "center"
-  }
-});
-
-const wrongCodeText = I18n.t("global.genericRetry");
 const waitMessageText = I18n.t("identification.fail.waitMessage");
 const tooManyAttemptsText = I18n.t("identification.fail.tooManyAttempts");
 
-// Convert milliseconds to a textual representation based on mm:ss
+const TIMER_INTERVAL = 1000;
 
-const fromMillisecondsToTimeRepresentation = (ms: Millisecond): string =>
-  format(new Date(ms), "mm:ss");
+type CountdownProps = {
+  onElapsedTimer: () => void;
+  timeSpanInSeconds: number;
+};
+
+const Countdown = (props: CountdownProps) => {
+  const { timerCount, startTimer } = useCountdown();
+  const { onElapsedTimer, timeSpanInSeconds } = props;
+  const loaderValue = Math.round((timerCount * 100) / timeSpanInSeconds);
+
+  useOnFirstRender(() => {
+    startTimer?.();
+  });
+
+  useEffect(() => {
+    if (timerCount === 0) {
+      onElapsedTimer();
+    }
+  }, [onElapsedTimer, timerCount]);
+
+  return (
+    <>
+      <ProgressIndicator progress={loaderValue} />
+      <VSpacer size={8} />
+      <View style={IOStyles.row}>
+        <LabelSmall color="black" weight="Regular">
+          {waitMessageText}
+        </LabelSmall>
+        <LabelSmall color="black"> {timerCount}s</LabelSmall>
+      </View>
+    </>
+  );
+};
 
 /*
   This modal screen is displayed when too many wrong pin attempts have been made.
   A countdown is displayed indicating how long it is to unlock the application.
 */
+export const IdentificationLockModal = (props: Props) => {
+  const { countdownInMs, timeSpanInSeconds } = props;
+  const timerTiming = Math.round((countdownInMs as number) / 1000);
 
-export const IdentificationLockModal: React.FunctionComponent<
-  Props
-> = props => {
-  const minuteSeconds = pipe(
-    props.countdown,
-    O.fromNullable,
-    O.fold(
-      () => "0:00",
-      x => fromMillisecondsToTimeRepresentation(x)
-    )
-  );
+  const dispatch = useIODispatch();
+  const hideModal = React.useCallback(() => {
+    dispatch(identificationHideLockModal());
+  }, [dispatch]);
 
   return (
     <Modal>
-      <View style={styles.spaced}>
-        <View style={styles.imageContainer}>
-          <Image source={errorIcon} />
-        </View>
-        <VSpacer size={24} />
-        <H1>{wrongCodeText}</H1>
-        <VSpacer size={24} />
-        <View style={IOStyles.alignCenter}>
-          <H3>{tooManyAttemptsText}</H3>
-          <H3 weight="Bold">{waitMessageText}</H3>
-        </View>
-        <VSpacer size={24} />
-        <H1>{minuteSeconds}</H1>
-        <VSpacer size={24} />
-      </View>
+      <SafeAreaView style={styles.container}>
+        <ContentWrapper>
+          <View style={styles.content}>
+            <Pictogram name="accessDenied" />
+            <VSpacer
+              size={IOStyleVariables.defaultSpaceBetweenPictogramAndText}
+            />
+            <H3
+              style={styles.contentTitle}
+              accessibilityLabel={tooManyAttemptsText}
+            >
+              {tooManyAttemptsText}
+            </H3>
+            <VSpacer size={32} />
+            <CountdownProvider
+              timerTiming={timerTiming}
+              intervalDuration={TIMER_INTERVAL}
+            >
+              <Countdown
+                onElapsedTimer={hideModal}
+                timeSpanInSeconds={timeSpanInSeconds}
+              />
+            </CountdownProvider>
+          </View>
+        </ContentWrapper>
+      </SafeAreaView>
     </Modal>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    ...IOStyles.bgWhite,
+    ...IOStyles.centerJustified,
+    ...IOStyles.flex
+  },
+  contentTitle: {
+    textAlign: "center"
+  },
+  content: {
+    alignItems: "center"
+  }
+});
diff --git a/ts/screens/modal/IdentificationModal.tsx b/ts/screens/modal/IdentificationModal.tsx
index 3f19cf662f6..cee551ed07e 100644
--- a/ts/screens/modal/IdentificationModal.tsx
+++ b/ts/screens/modal/IdentificationModal.tsx
@@ -1,15 +1,24 @@
-import { Millisecond } from "@pagopa/ts-commons/lib/units";
+import * as React from "react";
+import { useCallback, useState, useRef, useMemo, memo } from "react";
+import {
+  H2,
+  VSpacer,
+  Pictogram,
+  IconButton,
+  ContentWrapper,
+  ButtonLink,
+  IOStyles,
+  ToastNotification,
+  IOPictograms
+} from "@pagopa/io-app-design-system";
+import _ from "lodash";
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
-import { Content } from "native-base";
-import * as React from "react";
-import { View, Alert, Modal, StatusBar, StyleSheet, Text } from "react-native";
-import { connect } from "react-redux";
-import { Dispatch } from "redux";
-import { IOColors, VSpacer } from "@pagopa/io-app-design-system";
-import { Link } from "../../components/core/typography/Link";
-import Pinpad from "../../components/Pinpad";
-import BaseScreenComponent from "../../components/screens/BaseScreenComponent";
+import { Alert, ColorSchemeName, Modal, View, StyleSheet } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { ScrollView } from "react-native-gesture-handler";
+import { useDispatch } from "react-redux";
+import { Millisecond } from "@pagopa/ts-commons/lib/units";
 import I18n from "../../i18n";
 import {
   identificationCancel,
@@ -18,670 +27,412 @@ import {
   identificationPinReset,
   identificationSuccess
 } from "../../store/actions/identification";
-import { appCurrentStateSelector } from "../../store/reducers/appState";
-import { assistanceToolConfigSelector } from "../../store/reducers/backendStatus";
+import { useIOSelector } from "../../store/hooks";
 import {
-  freeAttempts,
   IdentificationCancelData,
   identificationFailSelector,
   maxAttempts,
   progressSelector
 } from "../../store/reducers/identification";
-import { isFingerprintEnabledSelector } from "../../store/reducers/persistedPreferences";
+import { useBiometricType } from "../../utils/hooks/useBiometricType";
 import { profileNameSelector } from "../../store/reducers/profile";
-import { GlobalState } from "../../store/reducers/types";
+import { biometricAuthenticationRequest } from "../../utils/biometrics";
+import { appCurrentStateSelector } from "../../store/reducers/appState";
+import { usePrevious } from "../../utils/hooks/usePrevious";
 import { setAccessibilityFocus } from "../../utils/accessibility";
 import {
-  biometricAuthenticationRequest,
-  BiometricsValidType,
-  getBiometricsType,
-  isBiometricsValidType
-} from "../../utils/biometrics";
-import { maybeNotNullyString } from "../../utils/strings";
-
-import customVariables from "../../theme/variables";
-
-import { IOStyles } from "../../components/core/variables/IOStyles";
-import { Label } from "../../components/core/typography/Label";
-import { Body } from "../../components/core/typography/Body";
-import { H2 } from "../../components/core/typography/H2";
+  FAIL_ATTEMPTS_TO_SHOW_ALERT,
+  IdentificationInstructionsComponent,
+  getBiometryIconName
+} from "../../utils/identification";
+import { useAppBackgroundAccentColorName } from "../../utils/hooks/theme";
 import { IdentificationLockModal } from "./IdentificationLockModal";
+import { IdentificationNumberPad } from "./components/IdentificationNumberPad";
 
-type Props = ReturnType<typeof mapDispatchToProps> &
-  ReturnType<typeof mapStateToProps>;
-
-/**
- * Type used in the local state to save the result of Pinpad code matching.
- * State is "unstarted" if the user still need to insert the unlock code.
- * State is "failure" when the unlock code inserted by the user do not match the
- * stored one.
- */
-type IdentificationByPinState = "unstarted" | "failure";
-
-type IdentificationByBiometryState = "unstarted" | "failure";
-
-type State = {
-  identificationByPinState: IdentificationByPinState;
-  identificationByBiometryState: IdentificationByBiometryState;
-  biometryType?: BiometricsValidType;
-  biometryAuthAvailable: boolean;
-  canInsertPinTooManyAttempts: boolean;
-  countdown?: Millisecond;
-  errorDescription?: string;
-};
-
-const checkPinInterval = 100 as Millisecond;
-
-// the threshold of attempts after which it is necessary to activate the timer check
-const checkTimerThreshold = maxAttempts - freeAttempts;
+const VERTICAL_PADDING = 16;
+const A11Y_FOCUS_DELAY = 1000 as Millisecond;
 
 const onRequestCloseHandler = () => undefined;
 
-const styles = StyleSheet.create({
-  bottomContainer: {
-    position: "absolute",
-    bottom: 20,
-    alignSelf: "center"
-  },
-  contentContainerStyle: {
-    flexGrow: 1,
-    padding: customVariables.contentPadding
-  }
-});
-
-/**
- * A component used to identify the the user.
- * The identification process can be activated calling a saga or dispatching the
- * identificationRequest redux action.
- * The modal can have 2 designs:
- * 1. primary background: used to autenticate the user when he/she enters the app
- * 2. white background: used to identify the user when he/she wants to complete a task (eg a payment)
- * The 2nd design is displayed when isValidatingTask (from the identificationProgressState) is true
- */
-class IdentificationModal extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      identificationByPinState: "unstarted",
-      identificationByBiometryState: "unstarted",
-      biometryAuthAvailable: true,
-      canInsertPinTooManyAttempts: O.isNone(this.props.identificationFailState)
-    };
+// eslint-disable-next-line sonarjs/cognitive-complexity, complexity
+const IdentificationModal = () => {
+  const [isBiometricLocked, setIsBiometricLocked] = useState(false);
+  const showRetryText = useRef(false);
+  const headerRef = useRef<View>(null);
+  const errorStatusRef = useRef<View>(null);
+  const colorScheme: ColorSchemeName = "light";
+  const numberPadVariant = colorScheme ? "dark" : "light";
+
+  const blueColor = useAppBackgroundAccentColorName();
+
+  const appState = useIOSelector(appCurrentStateSelector);
+  const previousAppState = usePrevious(appState);
+  const identificationProgressState = useIOSelector(progressSelector);
+  const previousIdentificationProgressState = usePrevious(
+    identificationProgressState
+  );
+  const identificationFailState = useIOSelector(
+    identificationFailSelector,
+    // Since the identificationFailState is an Option,
+    // we need to performs a deep comparison between
+    // two values to determine if they are equivalent
+    // to avoid unnecessary re-renders.
+    (l, r) => _.isEqual(l, r)
+  );
+  const name = useIOSelector(profileNameSelector);
+  const { biometricType, isFingerprintEnabled } = useBiometricType();
+
+  // eslint-disable-next-line functional/no-let
+  let pin = "";
+  // eslint-disable-next-line functional/no-let
+  let isValidatingTask = false;
+  // eslint-disable-next-line functional/no-let
+  let cancelData: IdentificationCancelData | undefined;
+  if (identificationProgressState.kind === "started") {
+    pin = identificationProgressState.pin;
+    isValidatingTask = identificationProgressState.isValidatingTask;
+    const { identificationCancelData } = identificationProgressState;
+    cancelData = identificationCancelData;
   }
 
-  private headerRef = React.createRef<Text>();
-  private errorStatusRef = React.createRef<Text>();
-
-  private idUpdateCanInsertPinTooManyAttempts?: number;
-
-  /**
-   * Update the state using the actual props value of the `identificationFailState`
-   * return the updated value of `canInsertPinTooManyAttempts` in order to be used without waiting the state update
-   */
-  private updateCanInsertPinTooManyAttempts = () =>
-    pipe(
-      this.props.identificationFailState,
-      O.map(errorData => {
-        const now = new Date();
-        const canInsertPinTooManyAttempts = errorData.nextLegalAttempt <= now;
-        this.setState({
-          canInsertPinTooManyAttempts,
-          countdown: (errorData.nextLegalAttempt.getTime() -
-            now.getTime()) as Millisecond
-        });
-        return canInsertPinTooManyAttempts;
-      })
-    );
-
-  /**
-   * Activate the interval check on the pin state if the condition is satisfied
-   */
-  private scheduleCanInsertPinUpdate = () => {
-    pipe(
-      this.props.identificationFailState,
-      O.map(failState => {
-        if (failState.remainingAttempts < checkTimerThreshold) {
-          this.updateCanInsertPinTooManyAttempts();
-          // eslint-disable-next-line
-          this.idUpdateCanInsertPinTooManyAttempts = setInterval(
-            this.updateCanInsertPinTooManyAttempts,
-            checkPinInterval
-          );
-        }
-      })
+  const forgotCodeLabel = `${I18n.t(
+    "identification.unlockCode.reset.button"
+  )} ${I18n.t("identification.unlockCode.reset.code")}?`;
+  const closeButtonLabel = cancelData?.label ?? I18n.t("global.buttons.close");
+  const textTryAgain = I18n.t("global.genericRetry");
+
+  const dispatch = useDispatch();
+  const onIdentificationCancel = useCallback(() => {
+    dispatch(identificationCancel());
+  }, [dispatch]);
+  const onIdentificationSuccess = useCallback(
+    (isBiometric: boolean) => {
+      dispatch(identificationSuccess({ isBiometric }));
+    },
+    [dispatch]
+  );
+  const onIdentificationForceLogout = useCallback(() => {
+    dispatch(identificationForceLogout());
+  }, [dispatch]);
+  const onIdentificationFailure = useCallback(() => {
+    dispatch(identificationFailure());
+  }, [dispatch]);
+
+  const onIdentificationFailureHandler = useCallback(() => {
+    const forceLogout = pipe(
+      identificationFailState,
+      O.map(failState => failState.remainingAttempts === 1),
+      O.getOrElse(() => false)
     );
-  };
-
-  public componentDidMount() {
-    const { isFingerprintEnabled } = this.props;
-    setAccessibilityFocus(this.headerRef);
-    if (isFingerprintEnabled) {
-      getBiometricsType().then(
-        biometricsType =>
-          this.setState({
-            biometryType: isBiometricsValidType(biometricsType)
-              ? biometricsType
-              : undefined
-          }),
-        _ => 0
-      );
+    if (forceLogout) {
+      onIdentificationForceLogout();
     } else {
-      // if the biometric is not available unlock the unlock code insertion
-      this.setState({ biometryAuthAvailable: false });
+      onIdentificationFailure();
     }
+  }, [
+    identificationFailState,
+    onIdentificationFailure,
+    onIdentificationForceLogout
+  ]);
+
+  const onIdentificationSuccessHandler = useCallback(
+    (isBiometric: boolean) => {
+      if (identificationProgressState.kind !== "started") {
+        return;
+      }
 
-    // first time the component is mounted, need to calculate the state value for `canInsertPinTooManyAttempts`
-    // and schedule the update if needed
-    pipe(
-      this.updateCanInsertPinTooManyAttempts(),
-      O.map(_ => this.scheduleCanInsertPinUpdate())
-    );
-  }
-
-  // atm this method is never called because the component won't be never unmount
-  public componentWillUnmount() {
-    clearInterval(this.idUpdateCanInsertPinTooManyAttempts);
-  }
-
-  /**
-   * Check if fingerprint login can be prompted by looking at three parameters in
-   * serie:
-   * 1. The current state of identification process
-   * 2. `isFingerprintEnabled` whose value comes from app preferences
-   * 3. Current status of biometry recognition system, provided by querying
-   * the library in charge.
-   *
-   * @param {boolean} updateBiometrySupportProp – This flag is needed because
-   * this funciton can be run from several contexts: when it is called while
-   * the app is returning foreground from background, biometry support status
-   * has to be updated in case of system preferences changes.
-   */
-  private maybeTriggerFingerprintRequest(updateBiometrySupportProp?: {
-    updateBiometrySupportProp: boolean;
-  }) {
-    // check if the state of identification process is correct
-    const { identificationProgressState, isFingerprintEnabled } = this.props;
-
-    if (identificationProgressState.kind !== "started") {
-      return;
-    }
-    // Check for global properties to know if biometric recognition is enabled
-    if (isFingerprintEnabled) {
-      getBiometricsType()
-        .then(
-          biometricsType => {
-            if (updateBiometrySupportProp) {
-              this.setState({
-                biometryType: isBiometricsValidType(biometricsType)
-                  ? biometricsType
-                  : undefined,
-                biometryAuthAvailable: isBiometricsValidType(biometricsType)
-              });
-            }
-          },
-          _ => undefined
-        )
-        .then(
-          () => {
-            if (this.state.biometryType) {
-              void this.onFingerprintRequest(
-                this.onIdentificationSuccessHandler
-              );
-            }
-          },
-          _ => undefined
-        );
-    }
-  }
-
-  public componentDidUpdate(prevProps: Props, prevState: State) {
-    // When app becomes active from background the state of TouchID support
-    // must be updated, because it might be switched off.
-    // Don't do this check if I can't authenticate for too many attempts (canInsertPinTooManyAttempts === false)
-    if (
-      this.state.canInsertPinTooManyAttempts &&
-      ((prevProps.appState === "background" &&
-        this.props.appState === "active") ||
-        (prevProps.identificationProgressState.kind !== "started" &&
-          this.props.identificationProgressState.kind === "started"))
-    ) {
-      this.maybeTriggerFingerprintRequest({
-        updateBiometrySupportProp:
-          prevProps.appState !== "active" && this.props.appState === "active"
-      });
-      setAccessibilityFocus(this.headerRef);
-    }
-
-    // Added to solve the issue https://www.pivotaltracker.com/story/show/173217033
-    if (prevProps.isFingerprintEnabled !== this.props.isFingerprintEnabled) {
-      this.setState((_, props) => ({
-        biometryAuthAvailable: pipe(
-          props.isFingerprintEnabled,
-          O.fromNullable,
-          O.getOrElse(() => false)
-        )
-      }));
-    }
-
-    const previousAttempts = pipe(
-      prevProps.identificationFailState,
-      O.fold(
-        () => Number.MAX_VALUE,
-        x => x.remainingAttempts
-      )
-    );
-
-    const currentAttempts = pipe(
-      this.props.identificationFailState,
-      O.fold(
-        () => Number.MAX_VALUE,
-        x => x.remainingAttempts
-      )
-    );
-
-    // trigger an update in the management of the updateInterval if the attempts or the state
-    // `canInsertPinTooManyAttempts` is changed
-    if (
-      previousAttempts !== currentAttempts ||
-      prevState.canInsertPinTooManyAttempts !==
-        this.state.canInsertPinTooManyAttempts
-    ) {
-      // trigger a state update based on the current props and use the results to choose what to do
-      // with the scheduled interval
-      const caninsertPin = pipe(
-        this.updateCanInsertPinTooManyAttempts(),
-        O.getOrElse(() => true)
-      );
-      // if the pin can be inserted, the timer is no longer needed
-      if (caninsertPin) {
-        clearInterval(this.idUpdateCanInsertPinTooManyAttempts);
-        // eslint-disable-next-line
-        this.idUpdateCanInsertPinTooManyAttempts = undefined;
+      const { identificationSuccessData } = identificationProgressState;
 
-        // if the pin can't be inserted and is not scheduled an interval, schedule an update
-      } else if (this.idUpdateCanInsertPinTooManyAttempts === undefined) {
-        this.scheduleCanInsertPinUpdate();
+      if (identificationSuccessData) {
+        identificationSuccessData.onSuccess();
       }
-    }
-  }
-
-  private onIdentificationSuccessHandler = () => {
-    const { identificationProgressState } = this.props;
+      onIdentificationSuccess(isBiometric);
+    },
+    [identificationProgressState, onIdentificationSuccess]
+  );
 
+  const onIdentificationCancelHandler = useCallback(() => {
     if (identificationProgressState.kind !== "started") {
       return;
     }
 
-    // The identification state is started we need to show the modal
-    const { identificationSuccessData } = identificationProgressState;
+    const { identificationCancelData } = identificationProgressState;
 
-    if (identificationSuccessData) {
-      identificationSuccessData.onSuccess();
-    }
-    this.props.onIdentificationSuccess();
-  };
-
-  private onIdentificationFailureHandler = () => {
-    const { identificationFailState } = this.props;
+    identificationCancelData?.onCancel();
+    onIdentificationCancel();
+  }, [identificationProgressState, onIdentificationCancel]);
 
-    const forceLogout = pipe(
-      identificationFailState,
-      O.map(failState => failState.remainingAttempts === 1),
-      O.getOrElse(() => false)
-    );
-    if (forceLogout) {
-      this.props.onIdentificationForceLogout();
-    } else {
-      this.props.onIdentificationFailure();
-    }
-  };
-
-  private loadAlertTexts = (
-    profileName: string | undefined
-  ): [string, string] =>
-    pipe(
-      profileName,
-      O.fromNullable,
-      O.fold(
-        () => [
-          I18n.t("identification.logout"),
-          I18n.t("identification.logoutDescription")
-        ],
-        pn => [
-          I18n.t("identification.logoutProfileName", {
-            profileName: pn
-          }),
-          I18n.t("identification.logoutDescriptionProfileName", {
-            profileName: pn
-          })
-        ]
-      )
-    );
-
-  private onLogout = () => {
-    Alert.alert(
-      ...this.loadAlertTexts(this.props.profileName),
-      [
-        {
-          text: I18n.t("global.buttons.cancel"),
-          style: "cancel"
+  const onFingerprintRequest = useCallback(
+    () =>
+      biometricAuthenticationRequest(
+        () => {
+          onIdentificationSuccessHandler(true);
         },
-        {
-          text: I18n.t("global.buttons.continue"),
-          onPress: this.props.onIdentificationForceLogout
+        e => {
+          if (e.name === "DeviceLocked" || e.name === "DeviceLockedPermanent") {
+            setIsBiometricLocked(true);
+          }
         }
-      ],
-      { cancelable: true }
-    );
-  };
-
-  // The generic "Try again" message appears if you make a mistake
-  // in entering the unlock code or in case of failed biometric authentication.
-  // If you fail to write the unlock code more than 4 times you should see
-  // "Try again. Number of remaining attempts". In case of failed biometric identification
-  // the message is displayed when you open the app by holding the "wrong finger" on the biometric iPhone sensor.
-  private getErrorText = () => {
-    const textTryAgain = I18n.t("global.genericRetry");
-
-    if (this.state.identificationByPinState === "failure") {
-      this.setState({
-        identificationByBiometryState: "unstarted"
-      });
-      return pipe(
-        this.props.identificationFailState,
-        O.filter(fs => fs.remainingAttempts <= maxAttempts - freeAttempts),
-        O.map(
-          // here if the user finished his free attempts
-          fd =>
-            `${textTryAgain}. ${I18n.t(
-              fd.remainingAttempts > 1
-                ? "identification.fail.remainingAttempts"
-                : "identification.fail.remainingAttemptSingle",
-              { attempts: fd.remainingAttempts }
-            )}`
+      ),
+    [onIdentificationSuccessHandler, setIsBiometricLocked]
+  );
+
+  const biometricsConfig = useMemo(
+    () =>
+      biometricType
+        ? {
+            biometricType,
+            biometricAccessibilityLabel: getBiometryIconName(biometricType),
+            onBiometricPress: () => onFingerprintRequest()
+          }
+        : {},
+    [biometricType, onFingerprintRequest]
+  );
+
+  const onPinResetHandler = useCallback(() => {
+    dispatch(identificationPinReset());
+  }, [dispatch]);
+
+  const confirmResetAlert = useCallback(
+    () =>
+      Alert.alert(
+        I18n.t("identification.forgetCode.confirmTitle"),
+        I18n.t(
+          isValidatingTask
+            ? "identification.forgetCode.confirmMsgWithTask"
+            : "identification.forgetCode.confirmMsg"
         ),
-        O.getOrElse(() => textTryAgain)
-      );
+        [
+          {
+            text: I18n.t("global.buttons.confirm"),
+            style: "default",
+            onPress: onPinResetHandler
+          },
+          {
+            text: I18n.t("global.buttons.cancel"),
+            style: "cancel"
+          }
+        ],
+        { cancelable: false }
+      ),
+    [isValidatingTask, onPinResetHandler]
+  );
+
+  const titleLabel = isValidatingTask
+    ? I18n.t("identification.titleValidation")
+    : name
+    ? I18n.t("identification.title", { name })
+    : "";
+
+  const onPinValidated = useCallback(
+    (isValidated: boolean) => {
+      if (isValidated) {
+        // eslint-disable-next-line functional/immutable-data
+        showRetryText.current = false;
+        onIdentificationSuccessHandler(false);
+      } else {
+        // eslint-disable-next-line functional/immutable-data
+        showRetryText.current = true;
+        onIdentificationFailureHandler();
+      }
+    },
+    [onIdentificationFailureHandler, onIdentificationSuccessHandler]
+  );
+
+  const NumberPad = memo(() => (
+    <IdentificationNumberPad
+      pin={pin}
+      pinValidation={onPinValidated}
+      numberPadVariant={numberPadVariant}
+      biometricsConfig={biometricsConfig}
+    />
+  ));
+
+  const pictogramKey: IOPictograms = isValidatingTask ? "passcode" : "key";
+
+  // Managing the countdown and the remaining attempts
+  // this way is simpler and more predictable
+  // instead of using useEffect and ref and state.
+  // eslint-disable-next-line functional/no-let
+  let countdownInMs = 0 as Millisecond;
+  // eslint-disable-next-line functional/no-let
+  let timeSpanBetweenAttemptsInSeconds = 0;
+  // eslint-disable-next-line functional/no-let
+  let showLockModal = false;
+  // eslint-disable-next-line functional/no-let
+  let remainingAttempts = maxAttempts;
+  if (O.isSome(identificationFailState)) {
+    showLockModal = identificationFailState.value.showLockModal ?? false;
+    remainingAttempts = identificationFailState.value.remainingAttempts;
+    timeSpanBetweenAttemptsInSeconds =
+      identificationFailState.value.timespanBetweenAttempts;
+    const nowInMs = new Date().getTime();
+    const nextLegalAttemptInMs =
+      identificationFailState.value.nextLegalAttempt.getTime();
+    const elapsedTimeInMs = nextLegalAttemptInMs - nowInMs;
+    // This screen is refreshing at every app state change.
+    // So we can rely on the elapsed time to show the lock modal.
+    if (showLockModal && elapsedTimeInMs > 0) {
+      // We need to show the lock modal with the countdown
+      // updated with the remaining time to handle cases where
+      // the app has been killed and restarted.
+      // eslint-disable-next-line functional/immutable-data
+      countdownInMs = elapsedTimeInMs as Millisecond;
     }
-
-    if (this.state.identificationByBiometryState === "failure") {
-      this.setState({
-        identificationByPinState: "unstarted"
-      });
-      return textTryAgain;
+  }
+  const remainingAttemptsText = I18n.t(
+    remainingAttempts > 1
+      ? "identification.fail.remainingAttempts"
+      : "identification.fail.remainingAttemptSingle",
+    {
+      attempts: remainingAttempts
     }
+  );
 
-    return undefined;
-  };
-
-  private renderErrorDescription = () =>
-    pipe(
-      maybeNotNullyString(this.getErrorText()),
-      O.fold(
-        () => undefined,
-        des => (
-          <View style={IOStyles.alignCenter}>
-            <Label
-              weight="Bold"
-              color="white"
-              accessible={true}
-              ref={this.errorStatusRef}
-            >
-              {des}
-            </Label>
-          </View>
-        )
-      )
-    );
-
-  /**
-   * Create handlers merging default internal actions (to manage the identification state)
-   * with, if available, custom actions passed as props.
-   */
-  private onIdentificationCancelHandler(
-    identificationCancelData: IdentificationCancelData
-  ) {
-    identificationCancelData.onCancel();
-    this.props.onCancelIdentification();
+  // If the authentication process is not started, we don't show the modal.
+  // We need to put this before the biometric request,
+  // to avoid the biometric request to be triggered when the modal is not shown.
+  if (identificationProgressState.kind !== "started") {
+    return null;
   }
 
-  private renderHeader(isValidatingTask: boolean) {
-    return (
-      <View style={IOStyles.alignCenter}>
-        <H2
-          weight="Bold"
-          color={isValidatingTask ? "bluegreyDark" : "white"}
-          accessible={true}
-          ref={this.headerRef}
-        >
-          {isValidatingTask
-            ? I18n.t("identification.titleValidation")
-            : pipe(
-                this.props.profileName,
-                O.fromNullable,
-                O.fold(
-                  () => I18n.t("identification.title"),
-                  pN =>
-                    I18n.t("identification.titleProfileName", {
-                      profileName: pN
-                    })
-                )
-              )}
-        </H2>
-        <Body
-          color={isValidatingTask ? "bluegreyDark" : "white"}
-          testID="identification-modal-body"
-        >
-          {this.getInstructions()}
-        </Body>
-      </View>
-    );
+  // When app becomes active from background the state of TouchID support
+  // must be updated, because it might be switched off.
+  // Don't do this check if I can't authenticate
+  // for too many attempts.
+  if (
+    !showLockModal &&
+    isFingerprintEnabled &&
+    ((previousAppState === "background" && appState === "active") ||
+      (previousIdentificationProgressState?.kind !== "started" &&
+        identificationProgressState.kind === "started"))
+  ) {
+    void onFingerprintRequest();
   }
 
-  public render() {
-    const { identificationProgressState, isFingerprintEnabled } = this.props;
-
-    if (identificationProgressState.kind !== "started") {
-      return null;
-    }
-
-    // The identification is started, we need to show the modal
-    const { pin, isValidatingTask, identificationCancelData, shufflePad } =
-      identificationProgressState;
-
-    const { biometryType, countdown, identificationByBiometryState } =
-      this.state;
+  const remainingAttemptsToShowAlert =
+    remainingAttempts <= FAIL_ATTEMPTS_TO_SHOW_ALERT;
+  const showToastNotificationAlert =
+    remainingAttemptsToShowAlert || showRetryText.current;
 
-    const canInsertPin =
-      !this.state.biometryAuthAvailable &&
-      this.state.canInsertPinTooManyAttempts;
-
-    // display the remaining attempts number only if start to lock the application for too many attempts
-    const displayRemainingAttempts = pipe(
-      this.props.identificationFailState,
-      O.fold(
-        () => undefined,
-        failState =>
-          failState.remainingAttempts <= maxAttempts - freeAttempts
-            ? failState.remainingAttempts
-            : undefined
-      )
-    );
-
-    const defaultColor = isValidatingTask
-      ? customVariables.contentPrimaryBackground
-      : IOColors.white;
+  if (showRetryText.current) {
+    setAccessibilityFocus(errorStatusRef, A11Y_FOCUS_DELAY);
+  }
 
-    return !this.state.canInsertPinTooManyAttempts ? (
-      IdentificationLockModal({ countdown })
-    ) : (
-      <Modal onRequestClose={onRequestCloseHandler}>
-        <BaseScreenComponent
-          accessibilityEvents={{ avoidNavigationEventsUsage: true }}
-          accessibilityLabel={I18n.t("identification.title")}
-          primary={!isValidatingTask}
-          showChat={false}
-          faqCategories={["unlock", "onboarding_pin", "onboarding_fingerprint"]}
-          appLogo={true}
+  return showLockModal ? (
+    <IdentificationLockModal
+      countdownInMs={countdownInMs}
+      timeSpanInSeconds={timeSpanBetweenAttemptsInSeconds}
+    />
+  ) : (
+    <Modal
+      statusBarTranslucent
+      transparent
+      onRequestClose={onRequestCloseHandler}
+    >
+      <SafeAreaView style={[styles.safeArea, { backgroundColor: blueColor }]}>
+        {isValidatingTask && (
+          <View accessible style={styles.closeButton}>
+            <ContentWrapper>
+              <VSpacer size={VERTICAL_PADDING} />
+              <IconButton
+                icon={"closeLarge"}
+                color="contrast"
+                onPress={() => {
+                  onIdentificationCancelHandler();
+                }}
+                accessibilityLabel={closeButtonLabel}
+              />
+            </ContentWrapper>
+          </View>
+        )}
+        <ScrollView
+          centerContent={true}
+          contentContainerStyle={[
+            styles.scrollViewContentContainer,
+            {
+              justifyContent: isValidatingTask ? undefined : "center"
+            }
+          ]}
         >
-          <StatusBar
-            barStyle="light-content"
-            backgroundColor={customVariables.contentPrimaryBackground}
-          />
-          <Content
-            primary={!isValidatingTask}
-            contentContainerStyle={styles.contentContainerStyle}
-            noPadded
-          >
-            {this.renderHeader(isValidatingTask)}
-            {this.renderErrorDescription()}
-            <Pinpad
-              onPinResetHandler={this.props.onPinResetHandler}
-              isValidatingTask={isValidatingTask}
-              isFingerprintEnabled={
-                isFingerprintEnabled &&
-                identificationByBiometryState !== "failure"
-              }
-              biometryType={biometryType}
-              onFingerPrintReq={() =>
-                this.onFingerprintRequest(this.onIdentificationSuccessHandler)
-              }
-              shufflePad={shufflePad}
-              disabled={!canInsertPin}
-              compareWithCode={pin as string}
-              activeColor={defaultColor}
-              inactiveColor={defaultColor}
-              buttonType={isValidatingTask ? "light" : "primary"}
-              delayOnFailureMillis={1000}
-              onFulfill={(_: string, __: boolean) =>
-                this.onPinFullfill(
-                  _,
-                  __,
-                  this.onIdentificationSuccessHandler,
-                  this.onIdentificationFailureHandler
-                )
-              }
-              clearOnInvalid={true}
-              onCancel={
-                identificationCancelData
-                  ? () =>
-                      this.onIdentificationCancelHandler(
-                        identificationCancelData
-                      )
-                  : undefined
-              }
-              remainingAttempts={displayRemainingAttempts}
-            />
-            <VSpacer size={24} />
-            {!isValidatingTask && (
-              <View style={styles.bottomContainer}>
-                <Link onPress={this.onLogout} weight="Bold" color="white">
-                  {pipe(
-                    this.props.profileName,
-                    O.fromNullable,
-                    O.fold(
-                      () => I18n.t("identification.logout"),
-                      pN =>
-                        I18n.t("identification.logoutProfileName", {
-                          profileName: pN
-                        })
-                    )
-                  )}
-                </Link>
+          <ContentWrapper>
+            <View>
+              <VSpacer size={16} />
+              {showToastNotificationAlert ? (
+                <View
+                  accessible
+                  ref={errorStatusRef}
+                  style={styles.alertContainer}
+                >
+                  <ToastNotification
+                    message={
+                      remainingAttemptsToShowAlert
+                        ? remainingAttemptsText
+                        : textTryAgain
+                    }
+                    icon="warningFilled"
+                    variant="warning"
+                  />
+                </View>
+              ) : (
+                <View style={IOStyles.alignCenter}>
+                  <Pictogram
+                    pictogramStyle="light-content"
+                    name={pictogramKey}
+                    size={64}
+                  />
+                </View>
+              )}
+              <View accessible ref={headerRef} style={IOStyles.alignCenter}>
+                <VSpacer size={8} />
+                <H2 color={"white"}>{titleLabel}</H2>
+                <VSpacer size={8} />
+                <IdentificationInstructionsComponent
+                  biometricType={biometricType}
+                  isBimoetricIdentificatoinFailed={isBiometricLocked}
+                />
               </View>
-            )}
-          </Content>
-        </BaseScreenComponent>
-      </Modal>
-    );
-  }
-
-  /**
-   * Return the proper instruction based on the avaiable identification method
-   */
-  private getInstructions(): string {
-    // We have a failure cause the biometry auth responded with a DeviceLocked or DeviceLockedPermanent code.
-    // message should not include biometry instructions
-    if (this.state.identificationByBiometryState === "failure") {
-      return I18n.t("identification.subtitleCode");
-    }
+            </View>
+            <VSpacer size={32} />
+            <NumberPad />
+            <View>
+              <VSpacer size={32} />
+              <View style={IOStyles.selfCenter}>
+                <ButtonLink
+                  accessibilityLabel={forgotCodeLabel}
+                  color="contrast"
+                  label={forgotCodeLabel}
+                  onPress={confirmResetAlert}
+                />
+                <VSpacer size={VERTICAL_PADDING} />
+              </View>
+            </View>
+          </ContentWrapper>
+        </ScrollView>
+      </SafeAreaView>
+    </Modal>
+  );
+};
 
-    switch (this.state.biometryType) {
-      case "BIOMETRICS":
-        return I18n.t("identification.subtitleCodeFingerprint");
-      case "FACE_ID":
-        return I18n.t("identification.subtitleCodeFaceId");
-      case "TOUCH_ID":
-        return I18n.t("identification.subtitleCodeFingerprint");
-      default:
-        return I18n.t("identification.subtitleCode");
-    }
+const styles = StyleSheet.create({
+  safeArea: { flexGrow: 1 },
+  closeButton: {
+    zIndex: 100,
+    flexGrow: 1,
+    alignItems: "flex-end"
+  },
+  scrollViewContentContainer: {
+    flexGrow: 1
+  },
+  alertContainer: {
+    flexGrow: 1
+  },
+  smallPinLabel: {
+    position: "absolute",
+    alignItems: "center",
+    opacity: 0.5,
+    bottom: -32
   }
-
-  private onPinFullfill = (
-    _: string,
-    isValid: boolean,
-    onIdentificationSuccessHandler: () => void,
-    onIdentificationFailureHandler: () => void
-  ) => {
-    if (isValid) {
-      this.setState({
-        identificationByPinState: "unstarted"
-      });
-      onIdentificationSuccessHandler();
-    } else {
-      this.setState(
-        {
-          identificationByPinState: "failure"
-        },
-        () => setAccessibilityFocus(this.errorStatusRef)
-      );
-
-      onIdentificationFailureHandler();
-    }
-  };
-
-  private onFingerprintRequest = (onIdentificationSuccessHandler: () => void) =>
-    biometricAuthenticationRequest(
-      () => {
-        this.setState({
-          identificationByBiometryState: "unstarted"
-        });
-        onIdentificationSuccessHandler();
-      },
-      e => {
-        // some error occured, enable pin insertion
-        this.setState({
-          biometryAuthAvailable: false
-        });
-        if (e.name === "DeviceLocked" || e.name === "DeviceLockedPermanent") {
-          this.setState({
-            identificationByBiometryState: "failure"
-          });
-        }
-      }
-    );
-}
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  onPinResetHandler: () => dispatch(identificationPinReset()),
-  onCancelIdentification: () => dispatch(identificationCancel()),
-  onIdentificationSuccess: () => dispatch(identificationSuccess()),
-  onIdentificationForceLogout: () => dispatch(identificationForceLogout()),
-  onIdentificationFailure: () => dispatch(identificationFailure())
-});
-
-const mapStateToProps = (state: GlobalState) => ({
-  identificationProgressState: progressSelector(state),
-  identificationFailState: identificationFailSelector(state),
-  isFingerprintEnabled: isFingerprintEnabledSelector(state),
-  appState: appCurrentStateSelector(state),
-  profileName: profileNameSelector(state),
-  assistanceToolConfig: assistanceToolConfigSelector(state)
 });
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(IdentificationModal);
+export default IdentificationModal;
diff --git a/ts/screens/modal/RootedDeviceModal.tsx b/ts/screens/modal/RootedDeviceModal.tsx
index 58f12392198..dc00382d374 100644
--- a/ts/screens/modal/RootedDeviceModal.tsx
+++ b/ts/screens/modal/RootedDeviceModal.tsx
@@ -1,164 +1,106 @@
-import { Container, Content } from "native-base";
 import * as React from "react";
+import { View, Platform, StyleSheet } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useDispatch } from "react-redux";
 import {
-  View,
-  Alert,
-  AlertButton,
-  Image,
-  Platform,
-  SafeAreaView,
-  StyleSheet
-} from "react-native";
-import { VSpacer } from "@pagopa/io-app-design-system";
-import image from "../../../img/rooted/broken-phone.png";
-import { H2 } from "../../components/core/typography/H2";
+  ButtonLink,
+  ButtonOutline,
+  ContentWrapper,
+  H3,
+  LabelSmall,
+  Pictogram,
+  VSpacer
+} from "@pagopa/io-app-design-system";
 import { IOStyles } from "../../components/core/variables/IOStyles";
-import { withLoadingSpinner } from "../../components/helpers/withLoadingSpinner";
-import BaseScreenComponent from "../../components/screens/BaseScreenComponent";
-import { BlockButtonProps } from "../../components/ui/BlockButtons";
-import FooterWithButtons from "../../components/ui/FooterWithButtons";
-import Markdown from "../../components/ui/Markdown";
 import I18n from "../../i18n";
-import customVariables from "../../theme/variables";
+import LegacyMarkdown from "../../components/ui/Markdown/LegacyMarkdown";
+import { useIONavigation } from "../../navigation/params/AppParamsList";
+import { continueWithRootOrJailbreak } from "../../store/actions/persistedPreferences";
+import { useIOBottomSheetAutoresizableModal } from "../../utils/hooks/bottomSheet";
 import { trackLoginRootedScreen } from "./analytics";
 
-type Props = {
-  onContinue: () => void;
-  onCancel: () => void;
-};
-
-const styles = StyleSheet.create({
-  flex: {
-    flex: 1
-  },
-  main: {
-    paddingTop: customVariables.contentPadding,
-    paddingHorizontal: customVariables.contentPadding,
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  image: {
-    width: 66,
-    height: 104
-  }
-});
-
-const CSS_STYLE = `
-body {
-  text-align: center;
-}
-`;
-
-const opacity = 0.9;
-
-type ConfirmConfig = {
-  title: string;
-  body?: string;
-  confirmText: string;
-  cancelText?: string;
-  onConfirmAction: () => void;
-};
-
-const RootedDeviceModal: React.FunctionComponent<Props> = (props: Props) => {
-  const [markdownLoaded, setMarkdownLoaded] = React.useState(false);
+const RootedDeviceModal = () => {
   trackLoginRootedScreen();
 
-  const showAlert = (confirmConfig: ConfirmConfig) => {
-    const buttons: ReadonlyArray<AlertButton> = [
-      {
-        text: confirmConfig.cancelText
-      },
-      {
-        text: confirmConfig.confirmText,
-        onPress: confirmConfig.onConfirmAction,
-        style: "cancel"
-      }
-    ];
-    Alert.alert(
-      confirmConfig.title,
-      confirmConfig.body ? confirmConfig.body : "",
-      buttons.slice(confirmConfig.cancelText ? 0 : 1), // remove cancel button if cancelText is undefined
-      { cancelable: true }
-    );
-  };
-
-  const continueAlertConfig: ConfirmConfig = {
-    title: I18n.t("rooted.continueAlert.title"),
-    body: I18n.t("rooted.continueAlert.body"),
-    confirmText: I18n.t("rooted.continueAlert.confirmText"),
-    cancelText: I18n.t("rooted.continueAlert.cancelText"),
-    onConfirmAction: props.onContinue
-  };
+  const dispatch = useDispatch();
+  const navigation = useIONavigation();
 
-  const cancelAlertConfig: ConfirmConfig = {
-    title: I18n.t("rooted.cancelAlert.title"),
-    body: I18n.t("rooted.cancelAlert.body"),
-    confirmText: I18n.t("rooted.cancelAlert.confirmText"),
-    onConfirmAction: props.onCancel
-  };
-
-  const leftButton: BlockButtonProps = {
-    title: I18n.t("global.buttons.continue"),
-    bordered: true,
-    danger: true,
-    onPress: () => showAlert(continueAlertConfig)
-  };
-
-  const rightButton: BlockButtonProps = {
-    title: I18n.t("global.buttons.cancel"),
-    primary: true,
-    onPress: () => showAlert(cancelAlertConfig)
-  };
-
-  const onMarkdownLoaded = () => {
-    setMarkdownLoaded(true);
-  };
+  const handleContinueWithRootOrJailbreak = React.useCallback(() => {
+    dispatch(continueWithRootOrJailbreak(true));
+    navigation.goBack();
+  }, [dispatch, navigation]);
 
   const body = Platform.select({
     ios: I18n.t("rooted.bodyiOS"),
     default: I18n.t("rooted.bodyAndroid")
   });
-  const ComponentWithLoading = withLoadingSpinner(() => (
-    <BaseScreenComponent
-      goBack={false}
-      accessibilityEvents={{ avoidNavigationEventsUsage: true }}
-    >
-      <Container>
-        <SafeAreaView style={styles.flex}>
-          <Content>
-            <View style={styles.main}>
-              <Image source={image} resizeMode="contain" style={styles.image} />
-              <VSpacer size={24} />
-              <View style={IOStyles.alignCenter}>
-                <H2>{I18n.t("rooted.title")}</H2>
-              </View>
-            </View>
-            <VSpacer size={8} />
-            <Markdown
-              cssStyle={CSS_STYLE}
-              onLoadEnd={onMarkdownLoaded}
-              extraBodyHeight={100}
-            >
-              {body}
-            </Markdown>
-          </Content>
-          <FooterWithButtons
-            type="TwoButtonsInlineHalf"
-            leftButton={leftButton}
-            rightButton={rightButton}
-          />
-        </SafeAreaView>
-      </Container>
-    </BaseScreenComponent>
-  ));
+
+  const {
+    present: presentLearnMoreBottomSheet,
+    bottomSheet: learnMoreBottomSheet
+  } = useIOBottomSheetAutoresizableModal({
+    title: I18n.t("rooted.learnMoreBottomsheet.title"),
+    component: <LegacyMarkdown>{body}</LegacyMarkdown>
+  });
 
   return (
-    <ComponentWithLoading
-      isLoading={!markdownLoaded}
-      loadingOpacity={opacity}
-    />
+    <SafeAreaView style={styles.flex}>
+      <ScrollView contentContainerStyle={styles.scrollViewContentContainer}>
+        <ContentWrapper>
+          <View style={IOStyles.alignCenter}>
+            <Pictogram name="attention" size={120} />
+          </View>
+          <VSpacer size={24} />
+          <View accessible style={IOStyles.alignCenter}>
+            <H3 style={styles.textCenter}>{I18n.t("rooted.title")}</H3>
+          </View>
+          <VSpacer size={8} />
+          <View accessible style={IOStyles.alignCenter}>
+            <LabelSmall
+              style={styles.textCenter}
+              color="grey-650"
+              weight="Regular"
+            >
+              {I18n.t("rooted.body")}
+            </LabelSmall>
+          </View>
+          <VSpacer size={24} />
+          <View style={IOStyles.selfCenter}>
+            <ButtonLink
+              label={I18n.t("rooted.learnMoreButton.title")}
+              accessibilityLabel={I18n.t("rooted.learnMoreButton.title")}
+              onPress={presentLearnMoreBottomSheet}
+            />
+          </View>
+          <VSpacer size={24} />
+          <View style={IOStyles.selfCenter}>
+            <ButtonOutline
+              color="danger"
+              label={I18n.t("global.buttons.continue")}
+              accessibilityLabel={I18n.t("global.buttons.continue")}
+              onPress={handleContinueWithRootOrJailbreak}
+            />
+          </View>
+        </ContentWrapper>
+      </ScrollView>
+      {learnMoreBottomSheet}
+    </SafeAreaView>
   );
 };
 
 export default RootedDeviceModal;
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1
+  },
+  textCenter: {
+    textAlign: "center"
+  },
+  scrollViewContentContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    flexGrow: 1
+  }
+});
diff --git a/ts/screens/modal/components/IdentificationNumberPad.tsx b/ts/screens/modal/components/IdentificationNumberPad.tsx
new file mode 100644
index 00000000000..a360bb86388
--- /dev/null
+++ b/ts/screens/modal/components/IdentificationNumberPad.tsx
@@ -0,0 +1,115 @@
+import * as React from "react";
+import { useState, useCallback } from "react";
+import {
+  CodeInput,
+  NumberPad,
+  VSpacer,
+  IOStyles,
+  BiometricsValidType,
+  IconButton
+} from "@pagopa/io-app-design-system";
+import { View } from "react-native";
+import I18n from "../../../i18n";
+import { isDevEnv } from "../../../utils/environment";
+
+const PIN_LENGTH = 6;
+const CODE_INPUT_ERROR_ANIMATION_DURATION = 500;
+const CODE_INPUT_SUCCESS_CALLBACK_CALL_TIMEOUT = 250;
+
+type BiometricConfigType =
+  | {
+      biometricType: BiometricsValidType;
+      biometricAccessibilityLabel: string;
+      onBiometricPress: () => Promise<void>;
+    }
+  | {
+      biometricType?: undefined;
+      biometricAccessibilityLabel?: undefined;
+      onBiometricPress?: undefined;
+    };
+type IdentificationNumberPadProps = {
+  pin: string;
+  pinValidation: (success: boolean) => void;
+  numberPadVariant: "light" | "dark";
+  biometricsConfig: BiometricConfigType;
+};
+
+export const IdentificationNumberPad = (
+  props: IdentificationNumberPadProps
+) => {
+  const [value, setValue] = useState("");
+
+  const { pin, pinValidation, numberPadVariant, biometricsConfig } = props;
+
+  const onValueChange = useCallback((v: string) => {
+    if (v.length <= PIN_LENGTH) {
+      setValue(v);
+    }
+  }, []);
+
+  // Calling pinValidation after a timeout is neeed
+  // to allow code input to refresh correctly,
+  // and in case of error to see the shake animation.
+  const onPinValidated = useCallback(
+    (v: string) => {
+      if (v === pin) {
+        setTimeout(() => {
+          pinValidation(true);
+        }, CODE_INPUT_SUCCESS_CALLBACK_CALL_TIMEOUT);
+        return true;
+      } else {
+        setTimeout(() => {
+          pinValidation(false);
+        }, CODE_INPUT_ERROR_ANIMATION_DURATION);
+        return false;
+      }
+    },
+    [pin, pinValidation]
+  );
+
+  // We don't need to handle the value change on code input,
+  // only on number pad.
+  const onCodeInputValueChange = useCallback(() => void 0, []);
+
+  return (
+    <>
+      <View style={IOStyles.alignCenter}>
+        <CodeInput
+          value={value}
+          length={PIN_LENGTH}
+          variant={"light"}
+          onValueChange={onCodeInputValueChange}
+          onValidate={onPinValidated}
+        />
+      </View>
+      <VSpacer size={48} />
+      <View>
+        <NumberPad
+          value={value}
+          deleteAccessibilityLabel={I18n.t("global.buttons.delete")}
+          onValueChange={onValueChange}
+          variant={numberPadVariant}
+          {...biometricsConfig}
+        />
+      </View>
+      {isDevEnv && (
+        <View
+          accessible={false}
+          importantForAccessibility="no-hide-descendants"
+          accessibilityElementsHidden
+          style={IOStyles.alignCenter}
+        >
+          <VSpacer size={16} />
+          <IconButton
+            icon={"systemPermissionsAndroid"}
+            color="contrast"
+            onPress={() => {
+              setValue(pin);
+            }}
+            accessibilityLabel={"Insert valid pin button (dev only)"}
+          />
+        </View>
+      )}
+    </>
+  );
+};
diff --git a/ts/screens/onboarding/OnboardingCompletedScreen.tsx b/ts/screens/onboarding/OnboardingCompletedScreen.tsx
index 93f49abb428..dd9afcd7ec3 100644
--- a/ts/screens/onboarding/OnboardingCompletedScreen.tsx
+++ b/ts/screens/onboarding/OnboardingCompletedScreen.tsx
@@ -1,14 +1,7 @@
 import * as O from "fp-ts/lib/Option";
-import * as React from "react";
-import { SafeAreaView } from "react-native";
+import React from "react";
 import { useDispatch } from "react-redux";
-import { Pictogram } from "@pagopa/io-app-design-system";
 import { useRoute } from "@react-navigation/native";
-import BaseScreenComponent from "../../components/screens/BaseScreenComponent";
-import { IOStyles } from "../../components/core/variables/IOStyles";
-import { InfoScreenComponent } from "../../components/infoScreen/InfoScreenComponent";
-import FooterWithButtons from "../../components/ui/FooterWithButtons";
-import { BlockButtonProps } from "../../components/ui/BlockButtons";
 import I18n from "../../i18n";
 import { completeOnboarding } from "../../store/actions/onboarding";
 import { useOnFirstRender } from "../../utils/hooks/useOnFirstRender";
@@ -18,6 +11,7 @@ import { isFastLoginEnabledSelector } from "../../features/fastLogin/store/selec
 import { idpSelector } from "../../store/reducers/authentication";
 import { trackLoginEnded } from "../authentication/analytics";
 import { getFlowType } from "../../utils/analytics";
+import { OperationResultScreenContent } from "../../components/screens/OperationResultScreenContent";
 
 const OnboardingCompletedScreen = () => {
   const dispatch = useDispatch();
@@ -28,38 +22,30 @@ const OnboardingCompletedScreen = () => {
   const idp = O.isSome(idpSelected) ? idpSelected.value.name : "";
   const route = useRoute();
 
-  const continueButtonProps: BlockButtonProps = {
-    bordered: false,
-    title: I18n.t("global.buttons.continue"),
-    onPress: () => {
-      trackLoginEnded(
-        isFastLoginEnabled,
-        idp,
-        getFlowType(false, true),
-        route.name
-      );
-      dispatch(completeOnboarding());
-    }
-  };
-
   useOnFirstRender(() => {
     trackThankYouPageScreen();
   });
 
-  return (
-    <BaseScreenComponent>
-      <SafeAreaView style={IOStyles.flex}>
-        <InfoScreenComponent
-          image={<Pictogram name="fireworks" />}
-          title={I18n.t("onboarding.thankYouPage.title")}
-        />
+  const handleContinue = () => {
+    trackLoginEnded(
+      isFastLoginEnabled,
+      idp,
+      getFlowType(false, true),
+      route.name
+    );
+    dispatch(completeOnboarding());
+  };
 
-        <FooterWithButtons
-          type={"SingleButton"}
-          leftButton={continueButtonProps}
-        />
-      </SafeAreaView>
-    </BaseScreenComponent>
+  return (
+    <OperationResultScreenContent
+      pictogram="success"
+      title={I18n.t("onboarding.thankYouPage.title")}
+      action={{
+        label: I18n.t("global.buttons.close"),
+        accessibilityLabel: I18n.t("global.buttons.close"),
+        onPress: handleContinue
+      }}
+    />
   );
 };
 
diff --git a/ts/screens/onboarding/OnboardingEmailInsertScreen.tsx b/ts/screens/onboarding/OnboardingEmailInsertScreen.tsx
deleted file mode 100644
index a4c205799dd..00000000000
--- a/ts/screens/onboarding/OnboardingEmailInsertScreen.tsx
+++ /dev/null
@@ -1,298 +0,0 @@
-/**
- * A screen where user after login (with CIE) can set email address if it is
- * not present in the profile.
- */
-import * as pot from "@pagopa/ts-commons/lib/pot";
-import { EmailString } from "@pagopa/ts-commons/lib/strings";
-import * as E from "fp-ts/lib/Either";
-import { pipe } from "fp-ts/lib/function";
-import * as O from "fp-ts/lib/Option";
-import { Content, Form } from "native-base";
-import * as React from "react";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { View, Alert, Keyboard, SafeAreaView, StyleSheet } from "react-native";
-import { StackActions } from "@react-navigation/native";
-import { VSpacer } from "@pagopa/io-app-design-system";
-import { H1 } from "../../components/core/typography/H1";
-import { LabelledItem } from "../../components/LabelledItem";
-import LoadingSpinnerOverlay from "../../components/LoadingSpinnerOverlay";
-import BaseScreenComponent, {
-  ContextualHelpPropsMarkdown
-} from "../../components/screens/BaseScreenComponent";
-import FooterWithButtons from "../../components/ui/FooterWithButtons";
-import I18n from "../../i18n";
-import { IOStackNavigationRouteProps } from "../../navigation/params/AppParamsList";
-import { OnboardingParamsList } from "../../navigation/params/OnboardingParamsList";
-import ROUTES from "../../navigation/routes";
-import { abortOnboarding, emailInsert } from "../../store/actions/onboarding";
-import { profileLoadRequest, profileUpsert } from "../../store/actions/profile";
-import { useIODispatch, useIOSelector } from "../../store/hooks";
-import {
-  profileEmailSelector,
-  profileSelector
-} from "../../store/reducers/profile";
-import { usePrevious } from "../../utils/hooks/usePrevious";
-import { withKeyboard } from "../../utils/keyboard";
-import { areStringsEqual } from "../../utils/options";
-import { showToast } from "../../utils/showToast";
-import { Body } from "../../components/core/typography/Body";
-import { IOStyles } from "../../components/core/variables/IOStyles";
-
-type Props = IOStackNavigationRouteProps<
-  OnboardingParamsList,
-  "ONBOARDING_INSERT_EMAIL_SCREEN"
->;
-
-const styles = StyleSheet.create({
-  flex: {
-    flex: 1
-  }
-});
-
-const EMPTY_EMAIL = "";
-
-const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
-  title: "email.insert.help.title",
-  body: "email.insert.help.content"
-};
-
-/**
- * A screen to allow user to insert an email address.
- */
-const OnboardingEmailInsertScreen = (props: Props) => {
-  const dispatch = useIODispatch();
-
-  const profile = useIOSelector(profileSelector);
-  const optionEmail = useIOSelector(profileEmailSelector);
-  const isLoading = useMemo(
-    () => pot.isUpdating(profile) || pot.isLoading(profile),
-    [profile]
-  );
-
-  const updateEmail = useCallback(
-    (email: EmailString) =>
-      dispatch(
-        profileUpsert.request({
-          email
-        })
-      ),
-    [dispatch]
-  );
-  const acknowledgeEmailInsert = useCallback(
-    () => dispatch(emailInsert()),
-    [dispatch]
-  );
-  const requestAbortOnboarding = useCallback(
-    () => dispatch(abortOnboarding()),
-    [dispatch]
-  );
-  const reloadProfile = useCallback(
-    () => dispatch(profileLoadRequest()),
-    [dispatch]
-  );
-
-  const [isMounted, setIsMounted] = useState(true);
-  const [email, setEmail] = useState(optionEmail);
-
-  /** validate email returning three possible values:
-   * - _true_,      if email is valid.
-   * - _false_,     if email has been already changed from the user and it is not
-   * valid.
-   * - _undefined_, if email field is empty. This state is consumed by
-   * LabelledItem Component and it used for style pourposes ONLY.
-   */
-  const isValidEmail = () =>
-    pipe(
-      email,
-      O.map(value => {
-        if (EMPTY_EMAIL === value) {
-          return undefined;
-        }
-        return E.isRight(EmailString.decode(value));
-      }),
-      O.toUndefined
-    );
-
-  const continueOnPress = () => {
-    Keyboard.dismiss();
-    if (isValidEmail()) {
-      // The profile is reloaded to check if the user email
-      // has been updated within another session
-      reloadProfile();
-    }
-  };
-
-  const renderFooterButtons = () => {
-    const continueButtonProps = {
-      disabled: isValidEmail() !== true && !isLoading,
-      onPress: continueOnPress,
-      title: I18n.t("global.buttons.continue"),
-      block: true,
-      primary: isValidEmail()
-    };
-
-    return (
-      <FooterWithButtons
-        type={"SingleButton"}
-        leftButton={continueButtonProps}
-      />
-    );
-  };
-
-  const handleOnChangeEmailText = (value: string) => {
-    setEmail(value !== EMPTY_EMAIL ? O.some(value) : O.none);
-  };
-
-  const navigateToEmailReadScreen = useCallback(() => {
-    props.navigation.dispatch(StackActions.popToTop());
-    props.navigation.navigate(ROUTES.ONBOARDING, {
-      screen: ROUTES.ONBOARDING_READ_EMAIL_SCREEN,
-      params: { isOnboarding: true }
-    });
-  }, [props.navigation]);
-
-  useEffect(() => {
-    if (!isMounted) {
-      navigateToEmailReadScreen();
-    }
-  }, [isMounted, navigateToEmailReadScreen]);
-
-  const handleGoBack = useCallback(() => {
-    // if the onboarding is not completed and the email is set, force goback with a reset (user could edit his email and go back without saving)
-    // see https://www.pivotaltracker.com/story/show/171424350
-    if (O.isSome(optionEmail)) {
-      setIsMounted(false);
-    } else {
-      // if the user is in onboarding phase, go back has to
-      // abort login (an user with no email can't access the home)
-      Alert.alert(
-        I18n.t("onboarding.alert.title"),
-        I18n.t("onboarding.alert.description"),
-        [
-          {
-            text: I18n.t("global.buttons.cancel"),
-            style: "cancel"
-          },
-          {
-            text: I18n.t("global.buttons.exit"),
-            style: "default",
-            onPress: requestAbortOnboarding
-          }
-        ]
-      );
-    }
-  }, [requestAbortOnboarding, optionEmail]);
-
-  const prevUserProfile = usePrevious(profile);
-
-  const prevOptionEmail = usePrevious(optionEmail);
-
-  useEffect(() => {
-    // When the profile reload is completed, check if the email is changed since the last reload
-    if (
-      prevUserProfile &&
-      pot.isLoading(prevUserProfile) &&
-      !pot.isLoading(profile)
-    ) {
-      // Check both if the email has been changed within another session and
-      // if the inserted email match with the email stored into the user profile
-      const isTheSameEmail = areStringsEqual(optionEmail, email, true);
-      if (!isTheSameEmail) {
-        pipe(
-          email,
-          O.map(e => {
-            updateEmail(e as EmailString);
-          })
-        );
-      } else {
-        Alert.alert(I18n.t("email.insert.alert"));
-      }
-    }
-  }, [email, prevUserProfile, profile, optionEmail, updateEmail]);
-
-  useEffect(() => {
-    if (prevUserProfile && pot.isUpdating(prevUserProfile)) {
-      if (pot.isError(profile)) {
-        // display a toast with error
-        showToast(I18n.t("email.edit.upsert_ko"), "danger");
-      } else if (pot.isSome(profile)) {
-        // user is inserting his email from onboarding phase
-        // he comes from checkAcknowledgedEmailSaga if onboarding is not finished yet
-        // and he has not an email
-        if (prevOptionEmail && O.isNone(prevOptionEmail)) {
-          // since this screen is mounted from saga it won't be unmounted because on saga
-          // we have a direct navigation instead of back
-          // so we have to force a reset (to get this screen unmounted) and navigate to emailReadScreen
-          // isMounted is used as a guard to prevent update while the screen is unmounting
-          acknowledgeEmailInsert();
-          setIsMounted(false);
-          return;
-        }
-        // go back (to the EmailReadScreen)
-        handleGoBack();
-        return;
-      }
-    }
-  }, [
-    acknowledgeEmailInsert,
-    handleGoBack,
-    prevOptionEmail,
-    prevUserProfile,
-    profile
-  ]);
-
-  useEffect(() => {
-    if (prevUserProfile) {
-      const isPrevCurrentSameState = prevUserProfile.kind === profile.kind;
-      // do nothing if prev profile is in the same state of the current
-      if (isMounted || isPrevCurrentSameState) {
-        return;
-      }
-    }
-  }, [prevUserProfile, profile, isMounted]);
-
-  return (
-    <LoadingSpinnerOverlay isLoading={isLoading}>
-      <BaseScreenComponent
-        goBack={handleGoBack}
-        headerTitle={I18n.t("email.insert.header")}
-        contextualHelpMarkdown={contextualHelpMarkdown}
-      >
-        <SafeAreaView style={styles.flex}>
-          <Content noPadded={true} style={styles.flex} scrollEnabled={false}>
-            <View style={IOStyles.horizontalContentPadding}>
-              <H1 color={"bluegreyDark"} weight={"Bold"}>
-                {I18n.t("email.insert.title")}
-              </H1>
-              <VSpacer size={16} />
-              <Body>{I18n.t("email.insert.subtitle")}</Body>
-              <VSpacer size={16} />
-              <Form>
-                <LabelledItem
-                  label={I18n.t("email.insert.label")}
-                  icon="email"
-                  isValid={isValidEmail()}
-                  inputProps={{
-                    returnKeyType: "done",
-                    onSubmitEditing: continueOnPress,
-                    autoCapitalize: "none",
-                    keyboardType: "email-address",
-                    value: pipe(
-                      email,
-                      O.getOrElse(() => EMPTY_EMAIL)
-                    ),
-                    onChangeText: handleOnChangeEmailText
-                  }}
-                />
-              </Form>
-            </View>
-          </Content>
-
-          {withKeyboard(renderFooterButtons())}
-        </SafeAreaView>
-      </BaseScreenComponent>
-    </LoadingSpinnerOverlay>
-  );
-};
-
-export default OnboardingEmailInsertScreen;
diff --git a/ts/screens/onboarding/OnboardingEmailReadScreen.tsx b/ts/screens/onboarding/OnboardingEmailReadScreen.tsx
deleted file mode 100644
index bcf229f743d..00000000000
--- a/ts/screens/onboarding/OnboardingEmailReadScreen.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * A screen to display the email address used by IO
- * The _isFromProfileSection_ navigation parameter let the screen being adapted
- * if:
- * - it is displayed during the user onboarding
- * - it is displayed after the onboarding (navigation from the profile section)
- */
-import * as pot from "@pagopa/ts-commons/lib/pot";
-import * as React from "react";
-import { Alert } from "react-native";
-import EmailReadComponent from "../../components/EmailReadComponent";
-import LoadingSpinnerOverlay from "../../components/LoadingSpinnerOverlay";
-import { TwoButtonsInlineHalf } from "../../components/ui/BlockButtons";
-import { useValidatedEmailModal } from "../../hooks/useValidateEmailModal";
-import I18n from "../../i18n";
-import { IOStackNavigationRouteProps } from "../../navigation/params/AppParamsList";
-import { OnboardingParamsList } from "../../navigation/params/OnboardingParamsList";
-import ROUTES from "../../navigation/routes";
-import {
-  abortOnboarding,
-  emailAcknowledged
-} from "../../store/actions/onboarding";
-import { useIODispatch, useIOSelector } from "../../store/hooks";
-import { userMetadataSelector } from "../../store/reducers/userMetadata";
-
-type Props = IOStackNavigationRouteProps<
-  OnboardingParamsList,
-  "ONBOARDING_READ_EMAIL_SCREEN"
->;
-
-const OnboardingEmailReadScreen = (props: Props) => {
-  useValidatedEmailModal(true);
-  const dispatch = useIODispatch();
-  const potUserMetadata = useIOSelector(userMetadataSelector);
-
-  const isLoading = pot.isLoading(potUserMetadata);
-
-  const acknowledgeEmail = () => dispatch(emailAcknowledged());
-  const askAbortOnboarding = () => dispatch(abortOnboarding());
-
-  const handleGoBack = () => {
-    Alert.alert(
-      I18n.t("onboarding.alert.title"),
-      I18n.t("onboarding.alert.description"),
-      [
-        {
-          text: I18n.t("global.buttons.cancel"),
-          style: "cancel"
-        },
-        {
-          text: I18n.t("global.buttons.exit"),
-          style: "default",
-          onPress: askAbortOnboarding
-        }
-      ]
-    );
-  };
-
-  const footerProps: TwoButtonsInlineHalf = {
-    type: "TwoButtonsInlineHalf",
-    leftButton: {
-      block: true,
-      bordered: true,
-      title: I18n.t("email.edit.cta"),
-      onPress: () => {
-        props.navigation.navigate(ROUTES.ONBOARDING, {
-          screen: ROUTES.ONBOARDING_INSERT_EMAIL_SCREEN
-        });
-      }
-    },
-    rightButton: {
-      block: true,
-      primary: true,
-      title: I18n.t("global.buttons.continue"),
-      onPress: acknowledgeEmail
-    }
-  };
-
-  return (
-    <LoadingSpinnerOverlay isLoading={isLoading}>
-      <EmailReadComponent
-        handleGoBack={handleGoBack}
-        footerProps={footerProps}
-      />
-    </LoadingSpinnerOverlay>
-  );
-};
-
-export default OnboardingEmailReadScreen;
diff --git a/ts/screens/onboarding/OnboardingServicesPreferenceScreen.tsx b/ts/screens/onboarding/OnboardingServicesPreferenceScreen.tsx
index 04aa858273a..98ef5010413 100644
--- a/ts/screens/onboarding/OnboardingServicesPreferenceScreen.tsx
+++ b/ts/screens/onboarding/OnboardingServicesPreferenceScreen.tsx
@@ -1,177 +1,218 @@
-import { VSpacer } from "@pagopa/io-app-design-system";
+import {
+  ContentWrapper,
+  FeatureInfo,
+  FooterWithButtons,
+  IOStyles,
+  IOToast,
+  VSpacer
+} from "@pagopa/io-app-design-system";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import * as React from "react";
+import React, { ReactElement, useCallback, useEffect, useState } from "react";
 import { SafeAreaView, View } from "react-native";
-import { connect, useStore } from "react-redux";
+import { useStore } from "react-redux";
 import { ServicesPreferencesModeEnum } from "../../../definitions/backend/ServicesPreferencesMode";
-import { InfoBox } from "../../components/box/InfoBox";
-import { confirmButtonProps } from "../../components/buttons/ButtonConfigurations";
-import { H5 } from "../../components/core/typography/H5";
-import { IOStyles } from "../../components/core/variables/IOStyles";
-import { withLoadingSpinner } from "../../components/helpers/withLoadingSpinner";
-import FooterWithButtons from "../../components/ui/FooterWithButtons";
 import { RNavScreenWithLargeHeader } from "../../components/ui/RNavScreenWithLargeHeader";
 import I18n from "../../i18n";
-import { IOStackNavigationRouteProps } from "../../navigation/params/AppParamsList";
+import {
+  IOStackNavigationRouteProps,
+  useIONavigation
+} from "../../navigation/params/AppParamsList";
 import { OnboardingParamsList } from "../../navigation/params/OnboardingParamsList";
-import { navigateToOnboardingServicePreferenceCompleteAction } from "../../store/actions/navigation";
 import { servicesOptinCompleted } from "../../store/actions/onboarding";
 import { profileUpsert } from "../../store/actions/profile";
-import { Dispatch } from "../../store/actions/types";
 import {
   isServicesPreferenceModeSet,
   profileSelector,
   profileServicePreferencesModeSelector
 } from "../../store/reducers/profile";
-import { GlobalState } from "../../store/reducers/types";
 import { getFlowType } from "../../utils/analytics";
 import { emptyContextualHelp } from "../../utils/emptyContextualHelp";
 import { useOnFirstRender } from "../../utils/hooks/useOnFirstRender";
-import { showToast } from "../../utils/showToast";
 import {
   trackServiceConfiguration,
   trackServiceConfigurationScreen
 } from "../profile/analytics";
 import { useManualConfigBottomSheet } from "../profile/components/services/ManualConfigBottomSheet";
 import ServicesContactComponent from "../profile/components/services/ServicesContactComponent";
+import { useIODispatch, useIOSelector } from "../../store/hooks";
+import LoadingSpinnerOverlay from "../../components/LoadingSpinnerOverlay";
+import { usePrevious } from "../../utils/hooks/usePrevious";
+import ROUTES from "../../navigation/routes";
 
 export type OnboardingServicesPreferenceScreenNavigationParams = {
   isFirstOnboarding: boolean;
 };
-type Props = ReturnType<typeof mapStateToProps> &
-  ReturnType<typeof mapDispatchToProps> &
-  IOStackNavigationRouteProps<
-    OnboardingParamsList,
-    "ONBOARDING_SERVICES_PREFERENCE"
-  >;
-
-const OnboardingServicesPreferenceScreen = (
-  props: Props
-): React.ReactElement => {
+type Props = IOStackNavigationRouteProps<
+  OnboardingParamsList,
+  "ONBOARDING_SERVICES_PREFERENCE"
+>;
+
+const OnboardingServicesPreferenceScreen = (props: Props): ReactElement => {
+  const dispatch = useIODispatch();
+  const navigation = useIONavigation();
   const isFirstOnboarding = props.route.params.isFirstOnboarding;
+  const store = useStore();
+  const profile = useIOSelector(profileSelector);
+  const prevProfile = usePrevious(profile);
+  const isLoading = pot.isUpdating(profile) || pot.isLoading(profile);
+  const profileServicePreferenceMode = useIOSelector(
+    profileServicePreferencesModeSelector
+  );
+  const prevMode = usePrevious(profileServicePreferenceMode);
+
   // if the user is not new and he/she hasn't a preference set, pre-set with AUTO mode
-  const mode = props.profileServicePreferenceMode;
-  const [modeSelected, setModeSelected] = React.useState<
+  const mode = profileServicePreferenceMode;
+  const [modeSelected, setModeSelected] = useState<
     ServicesPreferencesModeEnum | undefined
   >(mode);
-  const [prevPotProfile, setPrevPotProfile] = React.useState<
-    typeof props.potProfile
-  >(props.potProfile);
 
-  const { profileServicePreferenceMode, potProfile, onContinue } = props;
+  const dispatchServicesOptinCompleted = useCallback(
+    () => dispatch(servicesOptinCompleted()),
+    [dispatch]
+  );
+
+  const onServicePreferenceSelected = useCallback(
+    (mode: ServicesPreferencesModeEnum) =>
+      dispatch(
+        profileUpsert.request({ service_preferences_settings: { mode } })
+      ),
+    [dispatch]
+  );
+
+  const navigateToOnboardingServicePreferenceComplete = useCallback(() => {
+    navigation.navigate(ROUTES.ONBOARDING, {
+      screen: ROUTES.ONBOARDING_SERVICES_PREFERENCE_COMPLETE
+    });
+  }, [navigation]);
+
+  const onContinue = useCallback(
+    (isFirstOnboarding: boolean) =>
+      // if the user is not new, navigate to the thank-you screen
+      !isFirstOnboarding
+        ? navigateToOnboardingServicePreferenceComplete()
+        : dispatchServicesOptinCompleted(),
+    [
+      dispatchServicesOptinCompleted,
+      navigateToOnboardingServicePreferenceComplete
+    ]
+  );
+
+  const handleOnContinue = useCallback(() => {
+    void trackServiceConfiguration(
+      profileServicePreferenceMode,
+      getFlowType(true, isFirstOnboarding),
+      store.getState()
+    );
+    onContinue(isFirstOnboarding);
+  }, [isFirstOnboarding, onContinue, profileServicePreferenceMode, store]);
+
+  const selectCurrentMode = useCallback(
+    (mode: ServicesPreferencesModeEnum) => {
+      onServicePreferenceSelected(mode);
+    },
+    [onServicePreferenceSelected]
+  );
+
+  const { present: confirmManualConfig, manualConfigBottomSheet } =
+    useManualConfigBottomSheet(() => {
+      selectCurrentMode(ServicesPreferencesModeEnum.MANUAL);
+    });
+
+  const handleOnSelectMode = useCallback(
+    (mode: ServicesPreferencesModeEnum) => {
+      // if user's choice is 'manual', open bottom sheet to ask confirmation
+      if (mode === ServicesPreferencesModeEnum.MANUAL) {
+        confirmManualConfig();
+        return;
+      }
+      selectCurrentMode(mode);
+    },
+    [confirmManualConfig, selectCurrentMode]
+  );
 
   useOnFirstRender(() => {
     trackServiceConfigurationScreen(getFlowType(true, isFirstOnboarding));
   });
 
-  const store = useStore();
-
-  React.useEffect(() => {
-    // when the user made a choice (the profile is right updated), continue to the next step
-    if (isServicesPreferenceModeSet(profileServicePreferenceMode)) {
-      void trackServiceConfiguration(
-        profileServicePreferenceMode,
-        getFlowType(true, isFirstOnboarding),
-        store.getState()
-      );
-      onContinue(isFirstOnboarding);
-      return;
-    }
+  useEffect(() => {
     // show error toast only when the profile updating fails
-    // otherwise, if the profile is in error state, the toast will be shown immediately without any updates
-    if (!pot.isError(prevPotProfile) && pot.isError(potProfile)) {
-      showToast(I18n.t("global.genericError"));
-    }
-    setPrevPotProfile(potProfile);
-  }, [
-    isFirstOnboarding,
-    prevPotProfile,
-    potProfile,
-    profileServicePreferenceMode,
-    onContinue,
-    store
-  ]);
-
-  const handleOnContinue = () => {
-    if (modeSelected) {
-      props.onServicePreferenceSelected(modeSelected);
+    // otherwise, if the profile is in error state,
+    // the toast will be shown immediately without any updates
+    if (prevProfile && !pot.isError(prevProfile) && pot.isError(profile)) {
+      IOToast.error(I18n.t("global.genericError"));
+      return;
     }
-  };
-  const { present: confirmManualConfig, manualConfigBottomSheet } =
-    useManualConfigBottomSheet(() =>
-      props.onServicePreferenceSelected(ServicesPreferencesModeEnum.MANUAL)
-    );
 
-  const handleOnSelectMode = (mode: ServicesPreferencesModeEnum) => {
-    // if user's choice is 'manual', open bottom sheet to ask confirmation
-    if (mode === ServicesPreferencesModeEnum.MANUAL) {
-      confirmManualConfig();
-      return;
+    // if profile preferences are updated correctly
+    // the button is selected
+    // and the success banner is shown
+    if (
+      prevProfile &&
+      pot.isUpdating(prevProfile) &&
+      pot.isSome(profile) &&
+      profileServicePreferenceMode !== prevMode
+    ) {
+      setModeSelected(profileServicePreferenceMode);
+      IOToast.success(
+        profileServicePreferenceMode === ServicesPreferencesModeEnum.MANUAL
+          ? I18n.t("services.optIn.preferences.manualConfig.successAlert")
+          : I18n.t("services.optIn.preferences.quickConfig.successAlert")
+      );
     }
-    setModeSelected(mode);
-  };
+  }, [prevMode, prevProfile, profile, profileServicePreferenceMode]);
 
   // show a badge when the user is not new
+  // As explained in this comment (https://pagopa.atlassian.net/browse/IOPID-1511?focusedCommentId=126354)
+  // a future feature will be need this value,
+  // so I didn't delete it even though it is not used
   const showBadge = !isFirstOnboarding;
   return (
-    <RNavScreenWithLargeHeader
-      title={I18n.t("services.optIn.preferences.title")}
-      description={I18n.t("services.optIn.preferences.body")}
-      headerActionsProp={{ showHelp: true }}
-      contextualHelp={emptyContextualHelp}
-      fixedBottomSlot={
-        <SafeAreaView>
+    <LoadingSpinnerOverlay isLoading={isLoading}>
+      <RNavScreenWithLargeHeader
+        title={{
+          label: I18n.t("services.optIn.preferences.title")
+        }}
+        canGoback={false}
+        description={I18n.t("services.optIn.preferences.body")}
+        headerActionsProp={{ showHelp: true }}
+        contextualHelp={emptyContextualHelp}
+        fixedBottomSlot={
           <FooterWithButtons
-            type={"SingleButton"}
-            leftButton={{
-              ...confirmButtonProps(handleOnContinue),
-              disabled: !isServicesPreferenceModeSet(modeSelected)
+            type="SingleButton"
+            primary={{
+              type: "Solid",
+              buttonProps: {
+                label: I18n.t("global.buttons.confirm"),
+                onPress: () => handleOnContinue(),
+                accessibilityLabel: I18n.t("global.buttons.confirm"),
+                disabled: !isServicesPreferenceModeSet(modeSelected)
+              }
             }}
           />
+        }
+      >
+        <SafeAreaView style={IOStyles.flex}>
+          <ContentWrapper>
+            <ServicesContactComponent
+              mode={modeSelected}
+              onSelectMode={handleOnSelectMode}
+              showBadge={showBadge}
+            />
+            <VSpacer size={16} />
+            <View>
+              <FeatureInfo
+                iconName="navProfile"
+                body={I18n.t(
+                  "profile.main.privacy.shareData.screen.profileSettings"
+                )}
+              />
+            </View>
+          </ContentWrapper>
+          {manualConfigBottomSheet}
         </SafeAreaView>
-      }
-    >
-      <SafeAreaView style={IOStyles.flex}>
-        <View style={[IOStyles.horizontalContentPadding, { flexGrow: 1 }]}>
-          <ServicesContactComponent
-            mode={modeSelected}
-            onSelectMode={handleOnSelectMode}
-            showBadge={showBadge}
-          />
-          <InfoBox iconName="navProfile" iconColor="bluegrey">
-            <H5 color={"bluegrey"} weight={"Regular"}>
-              {I18n.t("profile.main.privacy.shareData.screen.profileSettings")}
-            </H5>
-          </InfoBox>
-          <VSpacer size={16} />
-        </View>
-
-        {manualConfigBottomSheet}
-      </SafeAreaView>
-    </RNavScreenWithLargeHeader>
+      </RNavScreenWithLargeHeader>
+    </LoadingSpinnerOverlay>
   );
 };
 
-const mapStateToProps = (state: GlobalState) => {
-  const profile = profileSelector(state);
-  return {
-    isLoading: pot.isUpdating(profile) || pot.isLoading(profile),
-    potProfile: profile,
-    profileServicePreferenceMode: profileServicePreferencesModeSelector(state)
-  };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  onContinue: (isFirstOnboarding: boolean) =>
-    // if the user is not new, navigate to the thank-you screen
-    !isFirstOnboarding
-      ? navigateToOnboardingServicePreferenceCompleteAction()
-      : dispatch(servicesOptinCompleted()),
-  onServicePreferenceSelected: (mode: ServicesPreferencesModeEnum) =>
-    dispatch(profileUpsert.request({ service_preferences_settings: { mode } }))
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withLoadingSpinner(OnboardingServicesPreferenceScreen));
+export default OnboardingServicesPreferenceScreen;
diff --git a/ts/screens/onboarding/OnboardingShareDataScreen.tsx b/ts/screens/onboarding/OnboardingShareDataScreen.tsx
index feeb6b5785b..024ceedf5e0 100644
--- a/ts/screens/onboarding/OnboardingShareDataScreen.tsx
+++ b/ts/screens/onboarding/OnboardingShareDataScreen.tsx
@@ -71,8 +71,10 @@ const OnboardingShareDataScreen = (props: Props): React.ReactElement => {
   return (
     <RNavScreenWithLargeHeader
       goBack={handleGoBack}
-      title={I18n.t("profile.main.privacy.shareData.screen.title")}
-      titleTestID={"share-data-component-title"}
+      title={{
+        label: I18n.t("profile.main.privacy.shareData.screen.title"),
+        testID: "share-data-component-title"
+      }}
       description={I18n.t("profile.main.privacy.shareData.screen.description")}
       fixedBottomSlot={
         <SafeAreaView>
diff --git a/ts/screens/onboarding/UnlockAccessScreen.tsx b/ts/screens/onboarding/UnlockAccessScreen.tsx
index 6be74c5b78a..67f92c9329e 100644
--- a/ts/screens/onboarding/UnlockAccessScreen.tsx
+++ b/ts/screens/onboarding/UnlockAccessScreen.tsx
@@ -14,18 +14,19 @@ import {
 } from "@pagopa/io-app-design-system";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Text, View } from "react-native";
-import { useNavigation } from "@react-navigation/native";
 import BaseScreenComponent from "../../components/screens/BaseScreenComponent";
 import I18n from "../../i18n";
 import { useIOBottomSheetAutoresizableModal } from "../../utils/hooks/bottomSheet";
 import { openWebUrl } from "../../utils/url";
 import ROUTES from "../../navigation/routes";
+import { useIONavigation } from "../../navigation/params/AppParamsList";
+
 type Props = {
   identifier: "SPID" | "CIE";
 };
 const UnlockAccessScreen = (props: Props) => {
   const { identifier } = props;
-  const navigation = useNavigation();
+  const navigation = useIONavigation();
   const ModalContent = () => (
     <View testID="modal-view-test">
       <Body weight="Regular" color="grey-700">
@@ -100,7 +101,10 @@ const UnlockAccessScreen = (props: Props) => {
           testID: "button-link-test",
           label: I18n.t("authentication.unlock.loginIO"),
           accessibilityLabel: I18n.t("authentication.unlock.loginIO"),
-          onPress: () => navigation.navigate(ROUTES.AUTHENTICATION_LANDING)
+          onPress: () =>
+            navigation.navigate(ROUTES.AUTHENTICATION, {
+              screen: ROUTES.AUTHENTICATION_LANDING
+            })
         }}
       >
         <SafeAreaView>
diff --git a/ts/screens/onboarding/__tests__/CduEmailInsertScreen.test.tsx b/ts/screens/onboarding/__tests__/EmailInsertScreen.test.tsx
similarity index 55%
rename from ts/screens/onboarding/__tests__/CduEmailInsertScreen.test.tsx
rename to ts/screens/onboarding/__tests__/EmailInsertScreen.test.tsx
index 8c0ef321eac..d4e93d6b443 100644
--- a/ts/screens/onboarding/__tests__/CduEmailInsertScreen.test.tsx
+++ b/ts/screens/onboarding/__tests__/EmailInsertScreen.test.tsx
@@ -1,19 +1,18 @@
-import { fireEvent, waitFor } from "@testing-library/react-native";
+import { fireEvent } from "@testing-library/react-native";
 import { createStore } from "redux";
 import ROUTES from "../../../navigation/routes";
 import { applicationChangeState } from "../../../store/actions/application";
 import { appReducer } from "../../../store/reducers";
 import I18n from "../../../i18n";
 import { renderScreenWithNavigationStoreContext } from "../../../utils/testWrapper";
-import CduEmailInsertScreen from "../../profile/CduEmailInsertScreen";
+import EmailInsertScreen from "../../profile/EmailInsertScreen";
 
-describe("CduEmailInsertScreen", async () => {
+describe("EmailInsertScreen", async () => {
   it("the components into the page should be render correctly", () => {
     const component = renderComponent();
     expect(component).toBeDefined();
     expect(component.getByTestId("container-test")).not.toBeNull();
     expect(component.getByTestId("title-test")).toBeDefined();
-    expect(component.getByTestId("TextFieldInput")).toBeDefined();
     expect(
       component.queryByText(I18n.t("global.buttons.continue"))
     ).toBeDefined();
@@ -28,32 +27,6 @@ describe("CduEmailInsertScreen", async () => {
       fireEvent.press(continueButton);
     }
   });
-
-  it("should show the correct error for the email insert field", async () => {
-    const component = renderComponent();
-    const TextFieldInput = component.getByTestId("TextFieldInput");
-    const continueButton = component.queryByText(
-      I18n.t("global.buttons.continue")
-    );
-    expect(continueButton).toBeTruthy();
-
-    fireEvent.changeText(TextFieldInput, "email.email.it");
-    fireEvent(TextFieldInput, "onEndEditing");
-
-    await waitFor(() => {
-      expect(continueButton).toBeDisabled();
-    });
-
-    fireEvent.changeText(TextFieldInput, "email.email@prova.it");
-    fireEvent(TextFieldInput, "onEndEditing");
-
-    await waitFor(() => {
-      expect(continueButton).not.toBeDisabled();
-      if (continueButton) {
-        fireEvent.press(continueButton);
-      }
-    });
-  });
 });
 
 const renderComponent = () => {
@@ -61,7 +34,7 @@ const renderComponent = () => {
   const store = createStore(appReducer, globalState as any);
 
   return renderScreenWithNavigationStoreContext(
-    CduEmailInsertScreen,
+    EmailInsertScreen,
     ROUTES.ONBOARDING_INSERT_EMAIL_SCREEN,
     {},
     store
diff --git a/ts/screens/onboarding/__tests__/OnboardingCompletedScreen.test.tsx b/ts/screens/onboarding/__tests__/OnboardingCompletedScreen.test.tsx
index 4b61cae8dca..298f33905b0 100644
--- a/ts/screens/onboarding/__tests__/OnboardingCompletedScreen.test.tsx
+++ b/ts/screens/onboarding/__tests__/OnboardingCompletedScreen.test.tsx
@@ -17,9 +17,7 @@ describe("Given the OnboardingCompletedScreen", () => {
   describe("when the user taps on the continue button", () => {
     it("then the completeOnboarding action is dispatched", () => {
       const { screen, store } = renderComponent();
-      const continueButton = screen.queryByText(
-        I18n.t("global.buttons.continue")
-      );
+      const continueButton = screen.queryByText(I18n.t("global.buttons.close"));
       expect(continueButton).toBeTruthy();
       if (continueButton) {
         fireEvent.press(continueButton);
diff --git a/ts/screens/profile/CalendarsPreferencesScreen.tsx b/ts/screens/profile/CalendarsPreferencesScreen.tsx
index ce66ab23c66..61b52afd5ac 100644
--- a/ts/screens/profile/CalendarsPreferencesScreen.tsx
+++ b/ts/screens/profile/CalendarsPreferencesScreen.tsx
@@ -51,7 +51,9 @@ class CalendarsPreferencesScreen extends React.PureComponent<Props, State> {
     const { isLoading } = this.state;
     return (
       <RNavScreenWithLargeHeader
-        title={I18n.t("profile.preferences.list.preferred_calendar.title")}
+        title={{
+          label: I18n.t("profile.preferences.list.preferred_calendar.title")
+        }}
         description={I18n.t("messages.cta.reminderCalendarSelect")}
         contextualHelpMarkdown={contextualHelpMarkdown}
         headerActionsProp={{ showHelp: true }}
diff --git a/ts/screens/profile/CduEmailInsertScreen.tsx b/ts/screens/profile/CduEmailInsertScreen.tsx
deleted file mode 100644
index bd801ab76f5..00000000000
--- a/ts/screens/profile/CduEmailInsertScreen.tsx
+++ /dev/null
@@ -1,436 +0,0 @@
-/**
- * A screen where user after login (with CIE) can set email address if it is
- * not present in the profile.
- */
-import * as pot from "@pagopa/ts-commons/lib/pot";
-import { EmailString } from "@pagopa/ts-commons/lib/strings";
-import * as E from "fp-ts/lib/Either";
-import { pipe } from "fp-ts/lib/function";
-import * as O from "fp-ts/lib/Option";
-import { Content, Form } from "native-base";
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  useContext,
-  createRef
-} from "react";
-import validator from "validator";
-import { Alert, Keyboard, SafeAreaView, StyleSheet, View } from "react-native";
-import {
-  IOColors,
-  Icon,
-  LabelSmall,
-  VSpacer,
-  Alert as AlertComponent,
-  FooterWithButtons
-} from "@pagopa/io-app-design-system";
-import { H1 } from "../../components/core/typography/H1";
-import { LabelledItem } from "../../components/LabelledItem";
-import LoadingSpinnerOverlay from "../../components/LoadingSpinnerOverlay";
-import BaseScreenComponent, {
-  ContextualHelpPropsMarkdown
-} from "../../components/screens/BaseScreenComponent";
-import I18n from "../../i18n";
-import { IOStackNavigationRouteProps } from "../../navigation/params/AppParamsList";
-import { ProfileParamsList } from "../../navigation/params/ProfileParamsList";
-import { profileUpsert } from "../../store/actions/profile";
-import { useIODispatch, useIOSelector } from "../../store/hooks";
-import {
-  isProfileEmailAlreadyTakenSelector,
-  isProfileEmailValidatedSelector,
-  isProfileFirstOnBoardingSelector,
-  profileEmailSelector,
-  profileSelector
-} from "../../store/reducers/profile";
-import { usePrevious } from "../../utils/hooks/usePrevious";
-import { withKeyboard } from "../../utils/keyboard";
-import { areStringsEqual } from "../../utils/options";
-import { Body } from "../../components/core/typography/Body";
-import { IOStyles } from "../../components/core/variables/IOStyles";
-import { LightModalContext } from "../../components/ui/LightModal";
-import NewRemindEmailValidationOverlay from "../../components/NewRemindEmailValidationOverlay";
-import { useOnFirstRender } from "../../utils/hooks/useOnFirstRender";
-import {
-  trackEmailDuplicateEditing,
-  trackEmailEditing,
-  trackEmailEditingError
-} from "../analytics/emailAnalytics";
-import { getFlowType } from "../../utils/analytics";
-import { emailValidationSelector } from "../../store/reducers/emailValidation";
-import { emailAcknowledged } from "../../store/actions/onboarding";
-import { showToast } from "../../utils/showToast";
-
-export type CduEmailInsertScreenNavigationParams = Readonly<{
-  isOnboarding: boolean;
-}>;
-
-type Props = IOStackNavigationRouteProps<
-  ProfileParamsList,
-  "INSERT_EMAIL_SCREEN"
->;
-
-const styles = StyleSheet.create({
-  flex: {
-    flex: 1
-  }
-});
-
-const EMPTY_EMAIL = "";
-
-// TODO: update content (https://www.pivotaltracker.com/n/projects/2048617/stories/169392558)
-const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
-  title: "email.insert.help.title",
-  body: "email.insert.help.content"
-};
-
-/**
- * A screen to allow user to insert an email address.
- */
-const CduEmailInsertScreen = (props: Props) => {
-  const viewRef = createRef<View>();
-  const { showModal } = useContext(LightModalContext);
-
-  const dispatch = useIODispatch();
-
-  const profile = useIOSelector(profileSelector);
-  const optionEmail = useIOSelector(profileEmailSelector);
-  const isEmailValidated = useIOSelector(isProfileEmailValidatedSelector);
-  const isFirstOnboarding = useIOSelector(isProfileFirstOnBoardingSelector);
-  const isProfileEmailAlreadyTaken = useIOSelector(
-    isProfileEmailAlreadyTakenSelector
-  );
-
-  const isFirstOnBoarding = useIOSelector(isProfileFirstOnBoardingSelector);
-  const { isOnboarding } = props.route.params ?? {};
-
-  const flow = getFlowType(isOnboarding, isFirstOnBoarding);
-
-  useOnFirstRender(() => {
-    if (isProfileEmailAlreadyTaken) {
-      trackEmailEditing(flow);
-    } else {
-      trackEmailDuplicateEditing(flow);
-    }
-  });
-
-  const acknowledgeOnEmailValidated = useIOSelector(
-    emailValidationSelector
-  ).acknowledgeOnEmailValidated;
-
-  const prevUserProfile = usePrevious(profile);
-
-  const isLoading = useMemo(
-    () => pot.isUpdating(profile) || pot.isLoading(profile),
-    [profile]
-  );
-
-  const acknowledgeEmail = useCallback(
-    () => dispatch(emailAcknowledged()),
-    [dispatch]
-  );
-
-  const updateEmail = useCallback(
-    (email: EmailString) =>
-      dispatch(
-        profileUpsert.request({
-          email
-        })
-      ),
-    [dispatch]
-  );
-
-  const getEmail = (email: O.Option<string>) =>
-    !isProfileEmailAlreadyTaken ? email : O.some(EMPTY_EMAIL);
-
-  const [areSameEmails, setAreSameEmails] = useState(false);
-  const [email, setEmail] = useState(getEmail(optionEmail));
-
-  useEffect(() => {
-    if (areSameEmails) {
-      trackEmailEditingError(flow);
-    }
-  }, [areSameEmails, flow]);
-
-  /** validate email returning three possible values:
-   * - _true_,      if email is valid.
-   * - _false_,     if email has been already changed from the user and it is not
-   * valid.
-   * - _undefined_, if email field is empty. This state is consumed by
-   * LabelledItem Component and it used for style pourposes ONLY.
-   */
-  const isValidEmail = useCallback(
-    () =>
-      pipe(
-        email,
-        O.map(value => {
-          if (
-            EMPTY_EMAIL === value ||
-            !validator.isEmail(value) ||
-            areSameEmails
-          ) {
-            return undefined;
-          }
-          return E.isRight(EmailString.decode(value));
-        }),
-        O.toUndefined
-      ),
-    [areSameEmails, email]
-  );
-  const isContinueButtonDisabled = !isValidEmail() && !isLoading;
-
-  const continueOnPress = () => {
-    Keyboard.dismiss();
-    pipe(
-      email,
-      O.map(e => {
-        updateEmail(e as EmailString);
-      })
-    );
-  };
-
-  const renderFooterButtons = () => {
-    const continueButtonProps = {
-      disabled: isContinueButtonDisabled,
-      onPress: continueOnPress,
-      label: I18n.t("global.buttons.continue"),
-      accessibilityLabel: I18n.t("global.buttons.continue"),
-      block: true,
-      primary: isValidEmail()
-    };
-
-    return (
-      <FooterWithButtons
-        type={"SingleButton"}
-        primary={{
-          type: "Solid",
-          buttonProps: continueButtonProps
-        }}
-      />
-    );
-  };
-
-  const handleOnChangeEmailText = (value: string) => {
-    /**
-     * SCENARIOS:
-     * 1. first onboarding and email already taken => if the CIT writes
-     *    the same email as the one he has to modify, he is blocked.
-     * 2. first onboarding and NOT email already taken => in this case,
-     *    the CIT does not need his email to be compared with another one,
-     *    so the areSameEmails will always be false.
-     * 3. Not first onboarding => if the CIT write the same email as the one
-     *    he already has, he is blocked.
-     */
-    if (isFirstOnBoarding) {
-      setAreSameEmails(
-        isProfileEmailAlreadyTaken
-          ? areStringsEqual(O.some(value), optionEmail, true)
-          : false
-      );
-    } else {
-      setAreSameEmails(areStringsEqual(O.some(value), optionEmail, true));
-    }
-    setEmail(value !== EMPTY_EMAIL ? O.some(value) : O.none);
-  };
-
-  const handleGoBack = useCallback(() => {
-    // goback if the onboarding is completed
-    props.navigation.goBack();
-  }, [props.navigation]);
-
-  useOnFirstRender(() => {
-    if (!isFirstOnBoarding) {
-      setEmail(O.some(EMPTY_EMAIL));
-      setAreSameEmails(false);
-    }
-  });
-
-  // If we navigate to this screen with acknowledgeOnEmailValidated set to false,
-  // we show the modal to remind the user to validate the email.
-  // This is used during the check of the email at startup.
-  useEffect(() => {
-    if (
-      O.isSome(acknowledgeOnEmailValidated) &&
-      acknowledgeOnEmailValidated.value === false
-    ) {
-      showModal(
-        <NewRemindEmailValidationOverlay isOnboarding={isFirstOnboarding} />
-      );
-    }
-  }, [acknowledgeOnEmailValidated, isFirstOnboarding, showModal]);
-
-  // eslint-disable-next-line sonarjs/cognitive-complexity
-  useEffect(() => {
-    if (prevUserProfile && pot.isUpdating(prevUserProfile)) {
-      if (pot.isError(profile)) {
-        // the user is trying to enter an email already in use
-        if (profile.error.type === "PROFILE_EMAIL_IS_NOT_UNIQUE_ERROR") {
-          Alert.alert(
-            I18n.t("email.insert.alertTitle"),
-            I18n.t("email.insert.alertDescription"),
-            [
-              {
-                text: I18n.t("email.insert.alertButton"),
-                style: "cancel"
-              }
-            ]
-          );
-        } else {
-          showToast(I18n.t("email.edit.upsert_ko"));
-        }
-        // display a toast with error
-      } else if (pot.isSome(profile) && !pot.isUpdating(profile)) {
-        // the email is correctly inserted
-        if (isEmailValidated) {
-          if (!isFirstOnboarding) {
-            handleGoBack();
-          }
-        } else {
-          showModal(
-            <NewRemindEmailValidationOverlay isOnboarding={isFirstOnboarding} />
-          );
-        }
-        return;
-      }
-    }
-  }, [
-    acknowledgeEmail,
-    handleGoBack,
-    isEmailValidated,
-    isFirstOnboarding,
-    prevUserProfile,
-    profile,
-    showModal
-  ]);
-
-  const showGoBack = () => {
-    if (isFirstOnBoarding) {
-      return undefined;
-    } else {
-      if (!isEmailValidated) {
-        return undefined;
-      }
-      return handleGoBack;
-    }
-  };
-
-  return (
-    <LoadingSpinnerOverlay isLoading={isLoading}>
-      <BaseScreenComponent
-        goBack={showGoBack()}
-        headerTitle={
-          isFirstOnboarding
-            ? I18n.t("email.newinsert.header")
-            : I18n.t("profile.data.list.email")
-        }
-        contextualHelpMarkdown={contextualHelpMarkdown}
-      >
-        <SafeAreaView style={styles.flex}>
-          <Content
-            testID="container-test"
-            noPadded={true}
-            style={styles.flex}
-            scrollEnabled={false}
-          >
-            <View style={IOStyles.horizontalContentPadding}>
-              <H1 color={"bluegreyDark"} weight={"Bold"} testID="title-test">
-                {isFirstOnboarding
-                  ? I18n.t("email.newinsert.title")
-                  : I18n.t("email.edit.title")}
-              </H1>
-              <VSpacer />
-              <VSpacer size={16} />
-              <Body>
-                {isFirstOnboarding ? (
-                  I18n.t("email.newinsert.subtitle")
-                ) : (
-                  <>
-                    {I18n.t("email.edit.subtitle")}
-                    <Body weight="SemiBold">
-                      {` ${pipe(
-                        optionEmail,
-                        O.getOrElse(() => "")
-                      )}`}
-                    </Body>
-                  </>
-                )}
-              </Body>
-              {isProfileEmailAlreadyTaken && isFirstOnboarding && (
-                <>
-                  <VSpacer size={24} />
-                  <AlertComponent
-                    testID="alert-test"
-                    viewRef={viewRef}
-                    variant="info"
-                    content={I18n.t("email.newinsert.alert.title", {
-                      email: pipe(
-                        optionEmail,
-                        O.getOrElse(() => EMPTY_EMAIL)
-                      )
-                    })}
-                  />
-                </>
-              )}
-              <VSpacer size={16} />
-              <Form>
-                <View>
-                  <LabelledItem
-                    label={
-                      isFirstOnboarding
-                        ? I18n.t("email.edit.label")
-                        : I18n.t("email.newinsert.label")
-                    }
-                    icon="email"
-                    isValid={isValidEmail()}
-                    overrideBorderColor={
-                      areSameEmails ? IOColors.red : undefined
-                    }
-                    inputProps={{
-                      returnKeyType: "done",
-                      // continueOnPress is called by pressing the
-                      // button on the keyboard only if the mail is valid
-                      onSubmitEditing: isContinueButtonDisabled
-                        ? undefined
-                        : continueOnPress,
-                      autoCapitalize: "none",
-                      keyboardType: "email-address",
-                      defaultValue: pipe(
-                        getEmail(email),
-                        O.getOrElse(() => EMPTY_EMAIL)
-                      ),
-                      onChangeText: handleOnChangeEmailText
-                    }}
-                    testID="TextField"
-                  />
-                  {areSameEmails && (
-                    <View
-                      testID="error-label"
-                      style={{
-                        display: "flex",
-                        flexDirection: "row",
-                        alignItems: "center"
-                      }}
-                      accessibilityElementsHidden={true}
-                      importantForAccessibility="no-hide-descendants"
-                    >
-                      <View style={{ marginRight: 6 }}>
-                        <Icon size={14} name="notice" color="red" />
-                      </View>
-                      <LabelSmall weight="Regular" color="red">
-                        {I18n.t("email.newinsert.alert.description")}
-                      </LabelSmall>
-                    </View>
-                  )}
-                </View>
-              </Form>
-            </View>
-          </Content>
-          {withKeyboard(renderFooterButtons())}
-        </SafeAreaView>
-      </BaseScreenComponent>
-    </LoadingSpinnerOverlay>
-  );
-};
-
-export default CduEmailInsertScreen;
diff --git a/ts/screens/profile/CgnLandingPlayground.tsx b/ts/screens/profile/CgnLandingPlayground.tsx
index 660d9a9f939..4b191efefc6 100644
--- a/ts/screens/profile/CgnLandingPlayground.tsx
+++ b/ts/screens/profile/CgnLandingPlayground.tsx
@@ -1,17 +1,32 @@
-import { Content } from "native-base";
+import {
+  ButtonOutline,
+  ButtonSolid,
+  IOColors,
+  IOVisualCostants,
+  VSpacer
+} from "@pagopa/io-app-design-system";
 import * as React from "react";
-import { View, SafeAreaView, StyleSheet, TextInput } from "react-native";
-import { IOColors, Icon, VSpacer } from "@pagopa/io-app-design-system";
-import { Label } from "../../components/core/typography/Label";
-import BaseScreenComponent from "../../components/screens/BaseScreenComponent";
-import ButtonDefaultOpacity from "../../components/ButtonDefaultOpacity";
-import { IOStyles } from "../../components/core/variables/IOStyles";
-import { H5 } from "../../components/core/typography/H5";
+import {
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  TextInput,
+  View
+} from "react-native";
 import WebviewComponent from "../../components/WebviewComponent";
+import { H5 } from "../../components/core/typography/H5";
+import { IOStyles } from "../../components/core/variables/IOStyles";
+import { useHeaderSecondLevel } from "../../hooks/useHeaderSecondLevel";
 
 const styles = StyleSheet.create({
-  textInput: { padding: 1, borderWidth: 1, height: 30, color: IOColors.black },
-  contentCenter: { justifyContent: "center" },
+  textInput: {
+    padding: 8,
+    borderWidth: 1,
+    height: 40,
+    color: IOColors.black,
+    borderRadius: 8,
+    borderColor: IOColors["grey-450"]
+  },
   row: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -25,63 +40,69 @@ const CgnLandingPlayground = () => {
   const [loadUri, setLoadUri] = React.useState("https://google.com");
   const [reloadKey, setReloadKey] = React.useState(0);
 
+  useHeaderSecondLevel({
+    title: "CGN Landing Playground"
+  });
+
   return (
-    <BaseScreenComponent goBack={true}>
-      <SafeAreaView style={IOStyles.flex}>
-        <Content contentContainerStyle={IOStyles.flex}>
-          <View>
-            <H5>{"Link alla landing"}</H5>
-            <TextInput
-              style={styles.textInput}
-              onChangeText={setNavigationUri}
-              value={navigationURI}
-              keyboardType="url"
-              autoCapitalize="none"
-              autoCorrect={false}
-            />
-            <VSpacer size={16} />
-            <H5>{"Referer"}</H5>
-            <TextInput
-              style={styles.textInput}
-              onChangeText={setRefererValue}
-              value={refererValue}
-            />
-          </View>
-          <VSpacer size={16} />
-          <View style={styles.row}>
-            <ButtonDefaultOpacity
-              style={styles.contentCenter}
-              onPress={() => setReloadKey(r => r + 1)}
-            >
-              <Label color={"white"}>Reload</Label>
-            </ButtonDefaultOpacity>
-            <ButtonDefaultOpacity
-              style={styles.contentCenter}
-              onPress={() => {
-                setLoadUri(navigationURI);
+    <SafeAreaView style={IOStyles.flex}>
+      <ScrollView
+        contentContainerStyle={[
+          { paddingHorizontal: IOVisualCostants.appMarginDefault },
+          IOStyles.flex
+        ]}
+      >
+        <View>
+          <H5>{"Link alla landing"}</H5>
+          <TextInput
+            style={styles.textInput}
+            onChangeText={setNavigationUri}
+            value={navigationURI}
+            keyboardType="url"
+            autoCapitalize="none"
+            autoCorrect={false}
+          />
+          <VSpacer size={8} />
+          <H5>{"Referer"}</H5>
+          <TextInput
+            style={styles.textInput}
+            onChangeText={setRefererValue}
+            value={refererValue}
+          />
+        </View>
+        <VSpacer size={16} />
+        <View style={styles.row}>
+          <ButtonOutline
+            icon="reload"
+            label="Reload"
+            accessibilityLabel="Reload"
+            onPress={() => setReloadKey(r => r + 1)}
+          />
+          <ButtonSolid
+            label="Invia"
+            onPress={() => {
+              setLoadUri(navigationURI);
+            }}
+            accessibilityLabel={"Invia"}
+          />
+        </View>
+        <VSpacer size={16} />
+        <View style={IOStyles.flex}>
+          {loadUri !== "" && (
+            <WebviewComponent
+              key={`${reloadKey}_webview`}
+              source={{
+                uri: loadUri,
+                headers: {
+                  referer: refererValue,
+                  "X-PagoPa-CGN-Referer": refererValue
+                }
               }}
-            >
-              <Icon name="chevronRight" size={24} color="white" />
-            </ButtonDefaultOpacity>
-          </View>
-          <VSpacer size={16} />
-          <View style={IOStyles.flex}>
-            {loadUri !== "" && (
-              <WebviewComponent
-                key={`${reloadKey}_webview`}
-                source={{
-                  uri: loadUri,
-                  headers: {
-                    referer: refererValue,
-                    "X-PagoPa-CGN-Referer": refererValue
-                  }
-                }}
-              />
-            )}
-          </View>
-        </Content>
-      </SafeAreaView>
-    </BaseScreenComponent>
+            />
+          )}
+        </View>
+      </ScrollView>
+    </SafeAreaView>
   );
 };
 
diff --git a/ts/screens/profile/DeveloperModeSection.tsx b/ts/screens/profile/DeveloperModeSection.tsx
index 27f1e8bf0ca..1aa185f971c 100644
--- a/ts/screens/profile/DeveloperModeSection.tsx
+++ b/ts/screens/profile/DeveloperModeSection.tsx
@@ -3,20 +3,21 @@ import {
   ContentWrapper,
   Divider,
   H2,
+  IOToast,
   IOVisualCostants,
   ListItemHeader,
   ListItemInfoCopy,
   ListItemNav,
   ListItemSwitch,
-  VSpacer
+  VSpacer,
+  useIOTheme,
+  useIOThemeContext
 } from "@pagopa/io-app-design-system";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { useNavigation } from "@react-navigation/native";
 import I18n from "i18n-js";
 import * as React from "react";
 import { ComponentProps } from "react";
 import { Alert, FlatList, ListRenderItemInfo } from "react-native";
-import { IOToast } from "../../components/Toast";
 import { AlertModal } from "../../components/ui/AlertModal";
 import { LightModalContext } from "../../components/ui/LightModal";
 import { isPlaygroundsEnabled } from "../../config";
@@ -24,11 +25,14 @@ import { isFastLoginEnabledSelector } from "../../features/fastLogin/store/selec
 import { lollipopPublicKeySelector } from "../../features/lollipop/store/reducers/lollipop";
 import { toThumbprint } from "../../features/lollipop/utils/crypto";
 import { walletAddCoBadgeStart } from "../../features/wallet/onboarding/cobadge/store/actions";
+import { useIONavigation } from "../../navigation/params/AppParamsList";
 import ROUTES from "../../navigation/routes";
 import { sessionExpired } from "../../store/actions/authentication";
 import { setDebugModeEnabled } from "../../store/actions/debug";
 import {
   preferencesIdPayTestSetEnabled,
+  preferencesItWalletTestSetEnabled,
+  preferencesNewWalletSectionSetEnabled,
   preferencesPagoPaTestEnvironmentSetEnabled,
   preferencesPnTestEnvironmentSetEnabled
 } from "../../store/actions/persistedPreferences";
@@ -42,12 +46,15 @@ import { isDebugModeEnabledSelector } from "../../store/reducers/debug";
 import { notificationsInstallationSelector } from "../../store/reducers/notifications/installation";
 import {
   isIdPayTestEnabledSelector,
+  isItWalletTestEnabledSelector,
+  isNewWalletSectionEnabledSelector,
   isPagoPATestEnabledSelector,
   isPnTestEnabledSelector
 } from "../../store/reducers/persistedPreferences";
 import { clipboardSetStringWithFeedback } from "../../utils/clipboard";
 import { getDeviceId } from "../../utils/device";
 import { isDevEnv } from "../../utils/environment";
+
 import DSEnableSwitch from "./components/DSEnableSwitch";
 
 type PlaygroundsNavListItem = {
@@ -66,6 +73,10 @@ type DevDataCopyListItem = {
   "label" | "testID" | "onPress"
 >;
 
+type DevActionButton = {
+  condition: boolean;
+} & Pick<ComponentProps<typeof ButtonSolid>, "color" | "label" | "onPress">;
+
 const DeveloperActionsSection = () => {
   const dispatch = useIODispatch();
 
@@ -91,78 +102,83 @@ const DeveloperActionsSection = () => {
     );
   };
 
-  return (
-    <ContentWrapper>
-      <ListItemHeader label="Actions" />
+  const dumpAsyncStorage = () => {
+    /* eslint-disable no-console */
+    console.log("[DUMP START]");
+    AsyncStorage.getAllKeys()
+      .then(keys => {
+        console.log(`\tAvailable keys: ${keys.join(", ")}`);
+        return Promise.all(
+          keys.map(key =>
+            AsyncStorage.getItem(key).then(value => {
+              console.log(`\tValue for ${key}\n\t\t`, value);
+            })
+          )
+        );
+      })
+      .then(() => console.log("[DUMP END]"))
+      .catch(e => console.error(e));
+    /* eslint-enable no-console */
+  };
 
-      <VSpacer size={8} />
-      <ButtonSolid
-        fullWidth
-        color="danger"
-        label={I18n.t("profile.main.cache.clear")}
-        onPress={handleClearCachePress}
-        accessibilityLabel={I18n.t("profile.main.cache.clear")}
-      />
-      <VSpacer size={8} />
-      {isDevEnv && (
-        <>
-          <VSpacer size={8} />
-          <ButtonSolid
-            fullWidth
-            color="danger"
-            label={I18n.t("profile.main.forgetCurrentSession")}
-            onPress={() => dispatch(sessionExpired())}
-            accessibilityLabel={I18n.t("profile.main.forgetCurrentSession")}
-          />
-          <VSpacer size={8} />
-        </>
-      )}
-      {isDevEnv && (
-        <>
-          <VSpacer size={8} />
-          <ButtonSolid
-            fullWidth
-            color="danger"
-            label={I18n.t("profile.main.clearAsyncStorage")}
-            onPress={() => {
-              void AsyncStorage.clear();
-            }}
-            accessibilityLabel={I18n.t("profile.main.clearAsyncStorage")}
-          />
-          <VSpacer size={8} />
-        </>
-      )}
-      {isDevEnv && (
-        <>
-          <VSpacer size={8} />
-          <ButtonSolid
-            fullWidth
-            color="primary"
-            label={I18n.t("profile.main.dumpAsyncStorage")}
-            onPress={() => {
-              /* eslint-disable no-console */
-              console.log("[DUMP START]");
-              AsyncStorage.getAllKeys()
-                .then(keys => {
-                  console.log(`\tAvailable keys: ${keys.join(", ")}`);
-                  return Promise.all(
-                    keys.map(key =>
-                      AsyncStorage.getItem(key).then(value => {
-                        console.log(`\tValue for ${key}\n\t\t`, value);
-                      })
-                    )
-                  );
-                })
-                .then(() => console.log("[DUMP END]"))
-                .catch(e => console.error(e));
-              /* eslint-enable no-console */
-            }}
-            accessibilityLabel={I18n.t("profile.main.dumpAsyncStorage")}
-          />
-          <VSpacer size={8} />
-        </>
-      )}
-    </ContentWrapper>
+  const devActionButtons: ReadonlyArray<DevActionButton> = [
+    {
+      condition: true,
+      label: I18n.t("profile.main.cache.clear"),
+      onPress: handleClearCachePress
+    },
+    {
+      condition: isDevEnv,
+      label: I18n.t("profile.main.forgetCurrentSession"),
+      onPress: () => dispatch(sessionExpired())
+    },
+    {
+      condition: isDevEnv,
+      label: I18n.t("profile.main.clearAsyncStorage"),
+      onPress: () => {
+        void AsyncStorage.clear();
+      }
+    },
+    {
+      condition: isDevEnv,
+      color: "primary",
+      label: I18n.t("profile.main.dumpAsyncStorage"),
+      onPress: dumpAsyncStorage
+    }
+  ];
+
+  // Don't render the separator, even if the item is null
+  const filteredDevActionButtons = devActionButtons.filter(
+    item => item.condition !== false
+  );
+
+  const renderDevActionButton = ({
+    item: { color = "danger", label, onPress }
+  }: ListRenderItemInfo<DevActionButton>) => (
+    <ButtonSolid
+      fullWidth
+      color={color}
+      label={label}
+      accessibilityLabel={label}
+      onPress={onPress}
+    />
+  );
+
+  return (
+    <FlatList
+      ListHeaderComponent={<ListItemHeader label="Actions" />}
+      scrollEnabled={false}
+      keyExtractor={(item: DevActionButton, index: number) =>
+        `${item.label}-${index}`
+      }
+      contentContainerStyle={{
+        paddingHorizontal: IOVisualCostants.appMarginDefault
+      }}
+      data={filteredDevActionButtons}
+      renderItem={renderDevActionButton}
+      ItemSeparatorComponent={() => <VSpacer size={8} />}
+      ListFooterComponent={() => <VSpacer size={16} />}
+    />
   );
 };
 
@@ -225,7 +241,7 @@ const DeveloperDataSection = () => {
   ];
 
   // Don't render the separator, even if the item is null
-  const filtereddevDataCopyListItems = devDataCopyListItems.filter(
+  const filteredDevDataCopyListItems = devDataCopyListItems.filter(
     item => item.condition !== false
   );
 
@@ -259,7 +275,7 @@ const DeveloperDataSection = () => {
       contentContainerStyle={{
         paddingHorizontal: IOVisualCostants.appMarginDefault
       }}
-      data={filtereddevDataCopyListItems}
+      data={filteredDevDataCopyListItems}
       renderItem={renderDevDataCopyItem}
       ItemSeparatorComponent={() => <Divider />}
     />
@@ -267,7 +283,21 @@ const DeveloperDataSection = () => {
 };
 
 const DesignSystemSection = () => {
-  const navigation = useNavigation();
+  const navigation = useIONavigation();
+  const { themeType, setTheme } = useIOThemeContext();
+  const dispatch = useIODispatch();
+
+  const isNewWalletSectionEnabled = useIOSelector(
+    isNewWalletSectionEnabledSelector
+  );
+
+  const onNewWalletSectionToggle = (enabled: boolean) => {
+    dispatch(
+      preferencesNewWalletSectionSetEnabled({
+        isNewWalletSectionEnabled: enabled
+      })
+    );
+  };
 
   return (
     <ContentWrapper>
@@ -284,13 +314,28 @@ const DesignSystemSection = () => {
       />
       <Divider />
       <DSEnableSwitch />
+      <Divider />
+      <ListItemSwitch
+        label="Abilita Dark Mode"
+        value={themeType === "dark"}
+        onSwitchValueChange={() =>
+          setTheme(themeType === "dark" ? "light" : "dark")
+        }
+      />
+      <Divider />
+      <ListItemSwitch
+        label={I18n.t("profile.main.newWalletSection")}
+        value={isNewWalletSectionEnabled}
+        onSwitchValueChange={onNewWalletSectionToggle}
+      />
     </ContentWrapper>
   );
 };
 
 const PlaygroundsSection = () => {
-  const navigation = useNavigation();
+  const navigation = useIONavigation();
   const isIdPayTestEnabled = useIOSelector(isIdPayTestEnabledSelector);
+  const isItWalletTestEnabled = useIOSelector(isItWalletTestEnabledSelector);
   const playgroundsNavListItems: ReadonlyArray<PlaygroundsNavListItem> = [
     {
       value: "Lollipop",
@@ -337,12 +382,16 @@ const PlaygroundsSection = () => {
         })
     },
     {
-      // New Wallet
-      value: I18n.t("profile.main.walletPlayground.titleSection"),
+      value: "Payments",
       onPress: () =>
         navigation.navigate(ROUTES.PROFILE_NAVIGATOR, {
           screen: ROUTES.WALLET_PLAYGROUND
         })
+    },
+    {
+      condition: isItWalletTestEnabled,
+      value: "IT Wallet",
+      onPress: () => undefined
     }
   ];
 
@@ -395,6 +444,7 @@ const DeveloperTestEnvironmentSection = ({
   const isPagoPATestEnabled = useIOSelector(isPagoPATestEnabledSelector);
   const isPnTestEnabled = useIOSelector(isPnTestEnabledSelector);
   const isIdPayTestEnabled = useIOSelector(isIdPayTestEnabledSelector);
+  const isItWalletTestEnabled = useIOSelector(isItWalletTestEnabledSelector);
   const onAddTestCard = () => {
     if (!isPagoPATestEnabled) {
       Alert.alert(
@@ -458,6 +508,12 @@ const DeveloperTestEnvironmentSection = ({
     dispatch(preferencesIdPayTestSetEnabled({ isIdPayTestEnabled: enabled }));
     handleShowModal();
   };
+
+  const onItWalletTestToggle = (enabled: boolean) => {
+    dispatch(
+      preferencesItWalletTestSetEnabled({ isItWalletTestEnabled: enabled })
+    );
+  };
   return (
     <ContentWrapper>
       <ListItemHeader
@@ -489,6 +545,12 @@ const DeveloperTestEnvironmentSection = ({
         value={isIdPayTestEnabled}
         onSwitchValueChange={onIdPayTestToggle}
       />
+      <ListItemSwitch
+        label={I18n.t("profile.main.itWallet.itWalletTest")}
+        description={I18n.t("profile.main.itWallet.itWalletTestDescription")}
+        value={isItWalletTestEnabled}
+        onSwitchValueChange={onItWalletTestToggle}
+      />
     </ContentWrapper>
   );
 };
@@ -498,6 +560,8 @@ const DeveloperModeSection = () => {
   const dispatch = useIODispatch();
   const isDebugModeEnabled = useIOSelector(isDebugModeEnabledSelector);
 
+  const theme = useIOTheme();
+
   const handleShowModal = () => {
     showModal(
       <AlertModal
@@ -510,7 +574,9 @@ const DeveloperModeSection = () => {
     <>
       <ContentWrapper>
         <VSpacer size={24} />
-        <H2>{I18n.t("profile.main.developersSectionHeader")}</H2>
+        <H2 color={theme["textHeading-default"]}>
+          {I18n.t("profile.main.developersSectionHeader")}
+        </H2>
         <VSpacer size={8} />
 
         {/* Enable/Disable Developer Mode */}
diff --git a/ts/screens/profile/DownloadProfileDataScreen.tsx b/ts/screens/profile/DownloadProfileDataScreen.tsx
index 859caf9b5c6..f29080a1e05 100644
--- a/ts/screens/profile/DownloadProfileDataScreen.tsx
+++ b/ts/screens/profile/DownloadProfileDataScreen.tsx
@@ -1,14 +1,18 @@
+import {
+  BlockButtonProps,
+  ContentWrapper,
+  IOToast,
+  FooterWithButtons
+} from "@pagopa/io-app-design-system";
 import * as pot from "@pagopa/ts-commons/lib/pot";
 import { useNavigation } from "@react-navigation/native";
 import React, { useEffect, useState } from "react";
-import { Alert, SafeAreaView, StyleSheet, View } from "react-native";
+import { Alert, SafeAreaView } from "react-native";
 import { UserDataProcessingChoiceEnum } from "../../../definitions/backend/UserDataProcessingChoice";
-import { IOStyles } from "../../components/core/variables/IOStyles";
 import LoadingSpinnerOverlay from "../../components/LoadingSpinnerOverlay";
-import BaseScreenComponent from "../../components/screens/BaseScreenComponent";
-import ScreenContent from "../../components/screens/ScreenContent";
-import FooterWithButtons from "../../components/ui/FooterWithButtons";
-import Markdown from "../../components/ui/Markdown";
+import { IOStyles } from "../../components/core/variables/IOStyles";
+import LegacyMarkdown from "../../components/ui/Markdown/LegacyMarkdown";
+import { RNavScreenWithLargeHeader } from "../../components/ui/RNavScreenWithLargeHeader";
 import I18n from "../../i18n";
 import {
   resetUserDataProcessingRequest,
@@ -16,16 +20,7 @@ import {
 } from "../../store/actions/userDataProcessing";
 import { useIODispatch, useIOSelector } from "../../store/hooks";
 import { userDataProcessingSelector } from "../../store/reducers/userDataProcessing";
-import themeVariables from "../../theme/variables";
 import { usePrevious } from "../../utils/hooks/usePrevious";
-import { showToast } from "../../utils/showToast";
-
-const styles = StyleSheet.create({
-  container: {
-    paddingLeft: themeVariables.contentPadding,
-    paddingRight: themeVariables.contentPadding
-  }
-});
 
 /**
  * A screen to explain how profile data export works.
@@ -49,7 +44,7 @@ const DownloadProfileDataScreen = () => {
       pot.isSome(userDataProcessing.DOWNLOAD)
     ) {
       if (pot.isError(userDataProcessing.DOWNLOAD)) {
-        showToast(I18n.t("profile.main.privacy.exportData.error"));
+        IOToast.error(I18n.t("profile.main.privacy.exportData.error"));
         return;
       }
       navigation.goBack();
@@ -85,37 +80,42 @@ const DownloadProfileDataScreen = () => {
     );
   };
 
+  const requestDataButtonProps: BlockButtonProps = {
+    type: "Solid",
+    buttonProps: {
+      color: "primary",
+      label: I18n.t("profile.main.privacy.exportData.cta"),
+      accessibilityLabel: I18n.t("profile.main.privacy.exportData.cta"),
+      onPress: handleDownloadPress
+    }
+  };
+
   return (
-    <LoadingSpinnerOverlay isLoading={isLoading} loadingOpacity={0.9}>
-      <BaseScreenComponent
-        goBack={true}
-        headerTitle={I18n.t("profile.main.privacy.exportData.title")}
-      >
+    <RNavScreenWithLargeHeader
+      title={{
+        label: I18n.t("profile.main.privacy.exportData.title"),
+        testID: "share-data-component-title"
+      }}
+      description={I18n.t("profile.main.privacy.exportData.info.title")}
+      fixedBottomSlot={
+        isMarkdownLoaded && (
+          <FooterWithButtons
+            type={"SingleButton"}
+            primary={requestDataButtonProps}
+          />
+        )
+      }
+    >
+      <LoadingSpinnerOverlay isLoading={isLoading} loadingOpacity={0.9}>
         <SafeAreaView style={IOStyles.flex}>
-          <ScreenContent
-            title={I18n.t("profile.main.privacy.exportData.title")}
-            subtitle={I18n.t("profile.main.privacy.exportData.info.title")}
-          >
-            <View style={styles.container}>
-              <Markdown onLoadEnd={() => setIsMarkdownLoaded(true)}>
-                {I18n.t("profile.main.privacy.exportData.info.body")}
-              </Markdown>
-            </View>
-          </ScreenContent>
-          {isMarkdownLoaded && (
-            <FooterWithButtons
-              type={"SingleButton"}
-              leftButton={{
-                block: true,
-                primary: true,
-                onPress: handleDownloadPress,
-                title: I18n.t("profile.main.privacy.exportData.cta")
-              }}
-            />
-          )}
+          <ContentWrapper>
+            <LegacyMarkdown onLoadEnd={() => setIsMarkdownLoaded(true)}>
+              {I18n.t("profile.main.privacy.exportData.info.body")}
+            </LegacyMarkdown>
+          </ContentWrapper>
         </SafeAreaView>
-      </BaseScreenComponent>
-    </LoadingSpinnerOverlay>
+      </LoadingSpinnerOverlay>
+    </RNavScreenWithLargeHeader>
   );
 };
 
diff --git a/ts/screens/profile/EmailInsertScreen.tsx b/ts/screens/profile/EmailInsertScreen.tsx
index b2ab2d2e56f..12e8c3ef64e 100644
--- a/ts/screens/profile/EmailInsertScreen.tsx
+++ b/ts/screens/profile/EmailInsertScreen.tsx
@@ -4,56 +4,75 @@
  */
 import * as pot from "@pagopa/ts-commons/lib/pot";
 import { EmailString } from "@pagopa/ts-commons/lib/strings";
-import * as E from "fp-ts/lib/Either";
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
-import { Content, Form } from "native-base";
-import * as React from "react";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Alert, Keyboard, SafeAreaView, StyleSheet, View } from "react-native";
-import { VSpacer } from "@pagopa/io-app-design-system";
-import { H1 } from "../../components/core/typography/H1";
-import { LabelledItem } from "../../components/LabelledItem";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import validator from "validator";
+import {
+  Alert,
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  View,
+  StyleSheet
+} from "react-native";
+import {
+  VSpacer,
+  H1,
+  TextInputValidation,
+  ContentWrapper,
+  ButtonSolid,
+  IOToast
+} from "@pagopa/io-app-design-system";
+import { Route, useFocusEffect, useRoute } from "@react-navigation/native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { ScrollView } from "react-native-gesture-handler";
+import themeVariables from "../../theme/variables";
 import LoadingSpinnerOverlay from "../../components/LoadingSpinnerOverlay";
-import BaseScreenComponent, {
-  ContextualHelpPropsMarkdown
-} from "../../components/screens/BaseScreenComponent";
-import FooterWithButtons from "../../components/ui/FooterWithButtons";
+import { ContextualHelpPropsMarkdown } from "../../components/screens/BaseScreenComponent";
 import I18n from "../../i18n";
-import { IOStackNavigationRouteProps } from "../../navigation/params/AppParamsList";
-import { ProfileParamsList } from "../../navigation/params/ProfileParamsList";
-import { emailInsert } from "../../store/actions/onboarding";
-import { profileLoadRequest, profileUpsert } from "../../store/actions/profile";
+import { profileUpsert } from "../../store/actions/profile";
 import { useIODispatch, useIOSelector } from "../../store/hooks";
 import {
+  isProfileEmailAlreadyTakenSelector,
   isProfileEmailValidatedSelector,
+  isProfileFirstOnBoardingSelector,
   profileEmailSelector,
   profileSelector
 } from "../../store/reducers/profile";
 import { usePrevious } from "../../utils/hooks/usePrevious";
-import { withKeyboard } from "../../utils/keyboard";
 import { areStringsEqual } from "../../utils/options";
-import { showToast } from "../../utils/showToast";
 import { Body } from "../../components/core/typography/Body";
-import { IOStyles } from "../../components/core/variables/IOStyles";
 import { useOnFirstRender } from "../../utils/hooks/useOnFirstRender";
-import { trackEmailEditing } from "../analytics/emailAnalytics";
+import {
+  trackEmailDuplicateEditing,
+  trackEmailEditing,
+  trackEmailEditingError,
+  trackSendValidationEmail
+} from "../analytics/emailAnalytics";
 import { getFlowType } from "../../utils/analytics";
+import { emailValidationSelector } from "../../store/reducers/emailValidation";
+import { useHeaderSecondLevel } from "../../hooks/useHeaderSecondLevel";
+import { trackTosUserExit } from "../authentication/analytics";
+import { abortOnboarding } from "../../store/actions/onboarding";
+import ROUTES from "../../navigation/routes";
+import { useIONavigation } from "../../navigation/params/AppParamsList";
+import { setAccessibilityFocus } from "../../utils/accessibility";
 
-type Props = IOStackNavigationRouteProps<
-  ProfileParamsList,
-  "INSERT_EMAIL_SCREEN"
->;
-
-const styles = StyleSheet.create({
-  flex: {
-    flex: 1
-  }
-});
+export type EmailInsertScreenNavigationParams = Readonly<{
+  isOnboarding: boolean;
+  isFciEditEmailFlow?: boolean;
+  isEditingPreviouslyInsertedEmailMode?: boolean;
+}>;
 
 const EMPTY_EMAIL = "";
 
-// TODO: update content (https://www.pivotaltracker.com/n/projects/2048617/stories/169392558)
 const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
   title: "email.insert.help.title",
   body: "email.insert.help.content"
@@ -62,21 +81,69 @@ const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
 /**
  * A screen to allow user to insert an email address.
  */
-const EmailInsertScreen = (props: Props) => {
+const EmailInsertScreen = () => {
+  const {
+    isOnboarding,
+    isFciEditEmailFlow,
+    isEditingPreviouslyInsertedEmailMode
+  } =
+    useRoute<
+      Route<
+        "ONBOARDING_INSERT_EMAIL_SCREEN" | "INSERT_EMAIL_SCREEN",
+        EmailInsertScreenNavigationParams
+      >
+    >().params;
+  const navigation = useIONavigation();
+
   const dispatch = useIODispatch();
 
   const profile = useIOSelector(profileSelector);
   const optionEmail = useIOSelector(profileEmailSelector);
   const isEmailValidated = useIOSelector(isProfileEmailValidatedSelector);
-  const isLoading = useMemo(
-    () => pot.isUpdating(profile) || pot.isLoading(profile),
-    [profile]
+  const isFirstOnboarding = useIOSelector(isProfileFirstOnBoardingSelector);
+  const isProfileEmailAlreadyTaken = useIOSelector(
+    isProfileEmailAlreadyTakenSelector
   );
+  const [errorMessage, setErrorMessage] = useState<string>("");
+  const flow = getFlowType(isOnboarding, isFirstOnboarding);
+  const accessibilityFirstFocuseViewRef = useRef<View>(null);
+  // This reference is used to prevent the refresh visual glitch
+  // caused by the polling stop in the email validation screen.
+  const canShowLoadingSpinner = useRef(true);
+
+  useFocusEffect(() => setAccessibilityFocus(accessibilityFirstFocuseViewRef));
 
   useOnFirstRender(() => {
-    trackEmailEditing(getFlowType(false));
+    if (isProfileEmailAlreadyTaken) {
+      trackEmailEditing(flow);
+      if (isFirstOnboarding) {
+        IOToast.info(
+          I18n.t("email.newinsert.alert.title", {
+            email: pipe(
+              optionEmail,
+              O.getOrElse(() => EMPTY_EMAIL)
+            )
+          })
+        );
+      }
+    } else {
+      trackEmailDuplicateEditing(flow);
+    }
   });
 
+  const acknowledgeOnEmailValidated = useIOSelector(
+    emailValidationSelector
+  ).acknowledgeOnEmailValidated;
+
+  const prevUserProfile = usePrevious(profile);
+
+  const isLoading = useMemo(
+    () =>
+      (pot.isUpdating(profile) || pot.isLoading(profile)) &&
+      canShowLoadingSpinner.current,
+    [profile]
+  );
+
   const updateEmail = useCallback(
     (email: EmailString) =>
       dispatch(
@@ -86,186 +153,339 @@ const EmailInsertScreen = (props: Props) => {
       ),
     [dispatch]
   );
-  const acknowledgeEmailInsert = useCallback(
-    () => dispatch(emailInsert()),
-    [dispatch]
-  );
-  const reloadProfile = useCallback(
-    () => dispatch(profileLoadRequest()),
+
+  const dispatchAbortOnboarding = useCallback(
+    () => dispatch(abortOnboarding()),
     [dispatch]
   );
 
-  const [email, setEmail] = useState(optionEmail);
+  const getEmail = (email: O.Option<string>) =>
+    !isProfileEmailAlreadyTaken ? email : O.some(EMPTY_EMAIL);
+
+  const [areSameEmails, setAreSameEmails] = useState(false);
+  const [email, setEmail] = useState(getEmail(optionEmail));
 
-  /** validate email returning three possible values:
+  useEffect(() => {
+    if (areSameEmails) {
+      trackEmailEditingError(flow);
+    }
+  }, [areSameEmails, flow]);
+
+  const sameEmailsErrorRender = useCallback(() => {
+    if (isProfileEmailAlreadyTaken && isFirstOnboarding) {
+      setErrorMessage(I18n.t("email.newinsert.alert.description1"));
+      return;
+    }
+    if (isOnboarding) {
+      setErrorMessage(I18n.t("email.newinsert.alert.description2"));
+      return;
+    }
+    if (!isOnboarding && !isFirstOnboarding) {
+      setErrorMessage(I18n.t("email.newinsert.alert.description3"));
+      return;
+    }
+    setErrorMessage(I18n.t("email.newinsert.alert.description1"));
+  }, [isFirstOnboarding, isOnboarding, isProfileEmailAlreadyTaken]);
+
+  /** validate email returning two possible values:
    * - _true_,      if email is valid.
    * - _false_,     if email has been already changed from the user and it is not
    * valid.
-   * - _undefined_, if email field is empty. This state is consumed by
-   * LabelledItem Component and it used for style pourposes ONLY.
    */
-  const isValidEmail = () =>
-    pipe(
-      email,
-      O.map(value => {
-        if (EMPTY_EMAIL === value) {
-          return undefined;
-        }
-        return E.isRight(EmailString.decode(value));
-      }),
-      O.toUndefined
-    );
+  const isValidEmail = useCallback(
+    () =>
+      pipe(
+        email,
+        O.fold(
+          () => {
+            setErrorMessage(I18n.t("email.newinsert.alert.invalidemail"));
+            return false;
+          },
+          value => {
+            if (!validator.isEmail(value)) {
+              setErrorMessage(I18n.t("email.newinsert.alert.invalidemail"));
+              return false;
+            }
+            if (areSameEmails) {
+              sameEmailsErrorRender();
+              return false;
+            }
+            return true;
+          }
+        )
+      ),
+    [areSameEmails, email, sameEmailsErrorRender]
+  );
 
   const continueOnPress = () => {
     Keyboard.dismiss();
+    // eslint-disable-next-line functional/immutable-data
+    canShowLoadingSpinner.current = true;
     if (isValidEmail()) {
-      // The profile is reloaded to check if the user email
-      // has been updated within another session
-      reloadProfile();
+      pipe(
+        email,
+        O.map(e => {
+          updateEmail(e as EmailString);
+        })
+      );
+      if (isFirstOnboarding) {
+        trackSendValidationEmail(flow);
+      }
     }
   };
 
-  const renderFooterButtons = () => {
-    const continueButtonProps = {
-      disabled: isValidEmail() !== true && !isLoading,
-      onPress: continueOnPress,
-      title: I18n.t("global.buttons.continue"),
-      block: true,
-      primary: isValidEmail()
-    };
-
-    return (
-      <FooterWithButtons
-        type={"SingleButton"}
-        leftButton={continueButtonProps}
-      />
-    );
-  };
-
   const handleOnChangeEmailText = (value: string) => {
+    /**
+     * SCENARIOS:
+     * 1. first onboarding and email already taken => if the CIT writes
+     *    the same email as the one he has to modify, he is blocked.
+     * 2. first onboarding and NOT email already taken => in this case,
+     *    the CIT does not need his email to be compared with another one,
+     *    so the areSameEmails will always be false.
+     * 3. Not first onboarding => if the CIT write the same email as the one
+     *    he already has, he is blocked.
+     */
+    // If we are editing the email previously inserted
+    // we don't want to show the error message.
+    if (!isEditingPreviouslyInsertedEmailMode) {
+      if (isFirstOnboarding) {
+        setAreSameEmails(
+          isProfileEmailAlreadyTaken
+            ? areStringsEqual(O.some(value), optionEmail, true)
+            : false
+        );
+      } else {
+        setAreSameEmails(areStringsEqual(O.some(value), optionEmail, true));
+      }
+    }
     setEmail(value !== EMPTY_EMAIL ? O.some(value) : O.none);
   };
 
   const handleGoBack = useCallback(() => {
-    // goback if the onboarding is completed
-    props.navigation.goBack();
-  }, [props.navigation]);
-
-  useEffect(() => {
-    setEmail(O.some(EMPTY_EMAIL));
-  }, []);
+    // click on goback icon
+    // if the flow is onboarding, a warning is displayed at the click
+    if (isFirstOnboarding) {
+      Alert.alert(
+        I18n.t("onboarding.alert.title"),
+        I18n.t("onboarding.alert.description"),
+        [
+          {
+            text: I18n.t("global.buttons.cancel"),
+            style: "cancel"
+          },
+          {
+            text: I18n.t("global.buttons.exit"),
+            style: "default",
+            onPress: () => {
+              trackTosUserExit(getFlowType(true, isFirstOnboarding));
+              dispatchAbortOnboarding();
+            }
+          }
+        ]
+      );
+      // if the flow isn't first onboarding/onboarding
+      // the button allows you to return to the previous step
+    } else {
+      navigation.goBack();
+    }
+  }, [dispatchAbortOnboarding, isFirstOnboarding, navigation]);
 
-  const prevUserProfile = usePrevious(profile);
+  useOnFirstRender(() => {
+    if (!isFirstOnboarding) {
+      setEmail(O.some(EMPTY_EMAIL));
+      setAreSameEmails(false);
+    }
+  });
 
-  const prevOptionEmail = usePrevious(optionEmail);
+  const userNavigateToEmailValidationScreen =
+    O.isSome(acknowledgeOnEmailValidated) &&
+    acknowledgeOnEmailValidated.value === false &&
+    isOnboarding;
 
+  // If we navigate to this screen with acknowledgeOnEmailValidated set to false,
+  // let the user navigate the email validation screen
   useEffect(() => {
-    if (prevUserProfile) {
-      const isPrevCurrentSameState = prevUserProfile.kind === profile.kind;
-      // do nothing if prev profile is in the same state of the current
-      if (isPrevCurrentSameState) {
-        return;
-      }
+    if (userNavigateToEmailValidationScreen) {
+      // eslint-disable-next-line functional/immutable-data
+      canShowLoadingSpinner.current = false;
+      navigation.navigate(ROUTES.ONBOARDING, {
+        screen: ROUTES.ONBOARDING_EMAIL_VERIFICATION_SCREEN,
+        params: {
+          isOnboarding,
+          sendEmailAtFirstRender: isOnboarding
+        }
+      });
     }
-  }, [prevUserProfile, profile]);
+  }, [isOnboarding, navigation, userNavigateToEmailValidationScreen]);
 
+  // eslint-disable-next-line sonarjs/cognitive-complexity
   useEffect(() => {
     if (prevUserProfile && pot.isUpdating(prevUserProfile)) {
       if (pot.isError(profile)) {
+        // the user is trying to enter an email already in use
+        if (profile.error.type === "PROFILE_EMAIL_IS_NOT_UNIQUE_ERROR") {
+          Alert.alert(
+            I18n.t("email.insert.alertTitle"),
+            I18n.t("email.insert.alertDescription"),
+            [
+              {
+                text: I18n.t("email.insert.alertButton"),
+                style: "cancel"
+              }
+            ]
+          );
+        } else {
+          IOToast.error(I18n.t("email.edit.upsert_ko"));
+        }
         // display a toast with error
-        showToast(I18n.t("email.edit.upsert_ko"), "danger");
-      } else if (pot.isSome(profile)) {
-        // user is inserting his email from onboarding phase
-        // he comes from checkAcknowledgedEmailSaga if onboarding is not finished yet
-        // and he has not an email
-        // go back (to the EmailReadScreen)
-        handleGoBack();
-        return;
+      } else if (pot.isSome(profile) && !pot.isUpdating(profile)) {
+        // the email is correctly inserted
+
+        // if the email is entered and when the 'confirm' button
+        // is clicked the session has expired, when the session
+        // is refreshed the profile is updated and the email is
+        // validated because we are still using the old email.
+        // In order to prevent the user navigating to the email
+        // validation screen we use this control to allow the user
+        // to remain in this screen
+        if (isEmailValidated) {
+          if (!isFirstOnboarding) {
+            return;
+          }
+        } else {
+          // eslint-disable-next-line functional/no-let
+          let sendEmailAtFirstRender = false;
+          // the IO BE orchestrator already send an email
+          // if the previous profile email is different from the current one.
+          if (pot.isSome(prevUserProfile)) {
+            // So we need to check if the email is not changed
+            // to send the email validation process programmatically.
+            sendEmailAtFirstRender =
+              profile.value.email === prevUserProfile.value.email;
+          }
+          // eslint-disable-next-line functional/immutable-data
+          canShowLoadingSpinner.current = false;
+          if (isOnboarding) {
+            navigation.navigate(ROUTES.ONBOARDING, {
+              screen: ROUTES.ONBOARDING_EMAIL_VERIFICATION_SCREEN,
+              params: {
+                isOnboarding,
+                sendEmailAtFirstRender: isOnboarding
+              }
+            });
+          } else {
+            navigation.navigate(ROUTES.PROFILE_NAVIGATOR, {
+              screen: ROUTES.EMAIL_VERIFICATION_SCREEN,
+              params: {
+                isOnboarding: false,
+                sendEmailAtFirstRender,
+                isFciEditEmailFlow
+              }
+            });
+          }
+        }
       }
     }
   }, [
-    acknowledgeEmailInsert,
     handleGoBack,
-    prevOptionEmail,
+    isEmailValidated,
+    isFciEditEmailFlow,
+    isFirstOnboarding,
+    isOnboarding,
+    navigation,
     prevUserProfile,
     profile
   ]);
 
-  useEffect(() => {
-    // When the profile reload is completed, check if the email is changed since the last reload
-    if (
-      prevUserProfile &&
-      pot.isLoading(prevUserProfile) &&
-      !pot.isLoading(profile)
-    ) {
-      // Check both if the email has been changed within another session and
-      // if the inserted email match with the email stored into the user profile
-      const isTheSameEmail = areStringsEqual(optionEmail, email, true);
-      if (!isTheSameEmail) {
-        pipe(
-          email,
-          O.map(e => {
-            updateEmail(e as EmailString);
-          })
-        );
-      } else {
-        Alert.alert(I18n.t("email.insert.alert"));
-      }
-    }
-  }, [email, prevUserProfile, profile, optionEmail, updateEmail]);
+  useHeaderSecondLevel({
+    title: "",
+    supportRequest: true,
+    contextualHelpMarkdown,
+    goBack: handleGoBack,
+    canGoBack: isEmailValidated || isFirstOnboarding
+  });
 
   return (
     <LoadingSpinnerOverlay isLoading={isLoading}>
-      <BaseScreenComponent
-        goBack={handleGoBack}
-        headerTitle={I18n.t("profile.data.list.email")}
-        contextualHelpMarkdown={contextualHelpMarkdown}
+      <SafeAreaView
+        testID="container-test"
+        edges={["bottom"]}
+        style={styles.safeArea}
       >
-        <SafeAreaView style={styles.flex}>
-          <Content noPadded={true} style={styles.flex} scrollEnabled={false}>
-            <View style={IOStyles.horizontalContentPadding}>
-              <H1 color={"bluegreyDark"} weight={"Bold"}>
-                {I18n.t("email.edit.title")}
+        <ScrollView contentContainerStyle={styles.scrollViewContentContainer}>
+          <ContentWrapper>
+            <View accessible={true} ref={accessibilityFirstFocuseViewRef}>
+              <H1 testID="title-test">
+                {isFirstOnboarding
+                  ? I18n.t("email.newinsert.title")
+                  : I18n.t("email.edit.title")}
               </H1>
-              <VSpacer />
-              <VSpacer size={16} />
-              <Body>
-                {isEmailValidated
-                  ? I18n.t("email.edit.validated")
-                  : I18n.t("email.edit.subtitle")}
-                <Body weight="SemiBold">
-                  {` ${pipe(
-                    optionEmail,
-                    O.getOrElse(() => "")
-                  )}`}
-                </Body>
-              </Body>
-              <VSpacer size={16} />
-              <Form>
-                <LabelledItem
-                  label={I18n.t("email.edit.label")}
-                  icon="email"
-                  isValid={isValidEmail()}
-                  inputProps={{
-                    returnKeyType: "done",
-                    onSubmitEditing: continueOnPress,
-                    autoCapitalize: "none",
-                    keyboardType: "email-address",
-                    value: pipe(
-                      email,
-                      O.getOrElse(() => EMPTY_EMAIL)
-                    ),
-                    onChangeText: handleOnChangeEmailText
-                  }}
-                />
-              </Form>
             </View>
-          </Content>
-          {withKeyboard(renderFooterButtons())}
-        </SafeAreaView>
-      </BaseScreenComponent>
+            <VSpacer size={16} />
+            <Body>
+              {isFirstOnboarding ? (
+                I18n.t("email.newinsert.subtitle")
+              ) : (
+                <>
+                  {I18n.t("email.edit.subtitle")}
+                  <Body weight="SemiBold">
+                    {` ${pipe(
+                      optionEmail,
+                      O.getOrElse(() => "")
+                    )}`}
+                  </Body>
+                </>
+              )}
+            </Body>
+            <VSpacer size={16} />
+            <TextInputValidation
+              autoFocus={!userNavigateToEmailValidationScreen}
+              textInputProps={{
+                autoCorrect: false,
+                autoCapitalize: "none",
+                inputMode: true
+              }}
+              accessibilityLabel={I18n.t("email.newinsert.label")}
+              placeholder={I18n.t("email.newinsert.label")}
+              onValidate={isValidEmail}
+              errorMessage={errorMessage}
+              value={pipe(
+                email,
+                O.getOrElse(() => EMPTY_EMAIL)
+              )}
+              onChangeText={handleOnChangeEmailText}
+            />
+          </ContentWrapper>
+        </ScrollView>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === "android" ? undefined : "padding"}
+          keyboardVerticalOffset={Platform.select({
+            ios: 110 + 16,
+            android: themeVariables.contentPadding
+          })}
+        >
+          <ContentWrapper>
+            <ButtonSolid
+              label={I18n.t("global.buttons.continue")}
+              accessibilityLabel={I18n.t("global.buttons.continue")}
+              onPress={continueOnPress}
+              fullWidth={true}
+            />
+            <VSpacer size={16} />
+          </ContentWrapper>
+        </KeyboardAvoidingView>
+      </SafeAreaView>
     </LoadingSpinnerOverlay>
   );
 };
 
 export default EmailInsertScreen;
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flexGrow: 1
+  },
+  scrollViewContentContainer: {
+    flexGrow: 1
+  }
+});
diff --git a/ts/screens/profile/EmailReadScreen.tsx b/ts/screens/profile/EmailReadScreen.tsx
deleted file mode 100644
index f40a5e6b135..00000000000
--- a/ts/screens/profile/EmailReadScreen.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * A screen to display the email address used by IO
- * The _isFromProfileSection_ navigation parameter let the screen being adapted
- * if:
- * - it is displayed during the user onboarding
- * - it is displayed after the onboarding (navigation from the profile section)
- */
-import { useNavigation } from "@react-navigation/native";
-import * as React from "react";
-import EmailReadComponent from "../../components/EmailReadComponent";
-import { SingleButton } from "../../components/ui/BlockButtons";
-import { useValidatedEmailModal } from "../../hooks/useValidateEmailModal";
-import I18n from "../../i18n";
-import { IOStackNavigationRouteProps } from "../../navigation/params/AppParamsList";
-import { ProfileParamsList } from "../../navigation/params/ProfileParamsList";
-import ROUTES from "../../navigation/routes";
-
-type Props = IOStackNavigationRouteProps<
-  ProfileParamsList,
-  "READ_EMAIL_SCREEN"
->;
-
-const EmailReadScreen = (props: Props) => {
-  useValidatedEmailModal();
-  const navigation = useNavigation();
-
-  const handleGoBack = () => {
-    props.navigation.goBack();
-  };
-
-  const footerProps: SingleButton = {
-    type: "SingleButton",
-    leftButton: {
-      bordered: true,
-      title: I18n.t("email.edit.cta"),
-      onPress: () =>
-        navigation.navigate(ROUTES.PROFILE_NAVIGATOR, {
-          screen: ROUTES.INSERT_EMAIL_SCREEN
-        })
-    }
-  };
-
-  return (
-    <EmailReadComponent handleGoBack={handleGoBack} footerProps={footerProps} />
-  );
-};
-
-export default EmailReadScreen;
diff --git a/ts/screens/profile/EmailValidationSendEmailScreen.tsx b/ts/screens/profile/EmailValidationSendEmailScreen.tsx
new file mode 100644
index 00000000000..26266fc7839
--- /dev/null
+++ b/ts/screens/profile/EmailValidationSendEmailScreen.tsx
@@ -0,0 +1,354 @@
+/**
+ * A component to remind the user to validate his email
+ */
+import { Millisecond } from "@pagopa/ts-commons/lib/units";
+import { pipe } from "fp-ts/lib/function";
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import * as O from "fp-ts/lib/Option";
+import React, { useRef, useCallback, useEffect, useState } from "react";
+import { Platform, ScrollView, StyleSheet, View } from "react-native";
+import {
+  IOPictogramSizeScale,
+  Pictogram,
+  VSpacer,
+  Body,
+  IOStyles,
+  H3,
+  IOVisualCostants,
+  ButtonOutline,
+  ButtonSolid,
+  ButtonLink,
+  IOToast
+} from "@pagopa/io-app-design-system";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Route, useFocusEffect, useRoute } from "@react-navigation/native";
+import _ from "lodash";
+import I18n from "../../i18n";
+
+import {
+  acknowledgeOnEmailValidation,
+  emailValidationPollingStart,
+  emailValidationPollingStop,
+  setEmailCheckAtStartupFailure,
+  startEmailValidation
+} from "../../store/actions/profile";
+import {
+  isEmailValidatedSelector,
+  isProfileFirstOnBoardingSelector,
+  profileEmailSelector
+} from "../../store/reducers/profile";
+import { useIODispatch, useIOSelector } from "../../store/hooks";
+import { emailValidationSelector } from "../../store/reducers/emailValidation";
+import { emailAcknowledged } from "../../store/actions/onboarding";
+import { getFlowType } from "../../utils/analytics";
+import {
+  trackEmailValidation,
+  trackEmailValidationSuccess,
+  trackEmailValidationSuccessConfirmed,
+  trackResendValidationEmail
+} from "../analytics/emailAnalytics";
+import { useOnFirstRender } from "../../utils/hooks/useOnFirstRender";
+import { usePrevious } from "../../utils/hooks/usePrevious";
+import { CountdownProvider } from "../../components/countdown/CountdownProvider";
+import { useIONavigation } from "../../navigation/params/AppParamsList";
+import { setAccessibilityFocus } from "../../utils/accessibility";
+import { FCI_ROUTES } from "../../features/fci/navigation/routes";
+import ROUTES from "../../navigation/routes";
+import Countdown from "./components/CountdownComponent";
+
+const emailSentTimeout = 60000 as Millisecond; // 60 seconds
+const countdownIntervalDuration = 1000 as Millisecond; // 1 second
+
+const EMPTY_EMAIL = "";
+const VALIDATION_ILLUSTRATION_WIDTH: IOPictogramSizeScale = 120;
+
+export type SendEmailValidationScreenProp = {
+  isOnboarding?: boolean;
+  sendEmailAtFirstRender?: boolean;
+  isFciEditEmailFlow?: boolean;
+  isEditingEmailMode?: boolean;
+};
+
+const EmailValidationSendEmailScreen = () => {
+  const props =
+    useRoute<
+      Route<
+        "ONBOARDING_EMAIL_VERIFICATION_SCREEN" | "EMAIL_VERIFICATION_SCREEN",
+        SendEmailValidationScreenProp
+      >
+    >().params;
+  const { isOnboarding, sendEmailAtFirstRender, isFciEditEmailFlow } = props;
+  const dispatch = useIODispatch();
+  const navigation = useIONavigation();
+  const optionEmail = useIOSelector(profileEmailSelector, _.isEqual);
+  const isEmailValidated = useIOSelector(isEmailValidatedSelector);
+  const emailValidation = useIOSelector(emailValidationSelector, _.isEqual);
+  const prevEmailValidation = usePrevious(emailValidation);
+  const isFirstOnBoarding = useIOSelector(isProfileFirstOnBoardingSelector);
+  const flow = getFlowType(!!isOnboarding, isFirstOnBoarding);
+  const [showCountdown, setShowCountdown] = useState(true);
+  const email = pipe(
+    optionEmail,
+    O.getOrElse(() => EMPTY_EMAIL)
+  );
+  const accessibilityFirstFocuseViewRef = useRef<View>(null);
+
+  const sendEmailValidation = useCallback(
+    () => dispatch(startEmailValidation.request()),
+    [dispatch]
+  );
+
+  const acknowledgeEmail = useCallback(
+    () => dispatch(emailAcknowledged()),
+    [dispatch]
+  );
+
+  const startPollingSaga = useCallback(
+    () => dispatch(emailValidationPollingStart()),
+    [dispatch]
+  );
+  const stopPollingSaga = useCallback(
+    () => dispatch(emailValidationPollingStop()),
+    [dispatch]
+  );
+
+  const dispatchAcknowledgeOnEmailValidation = useCallback(
+    (maybeAcknowledged: O.Option<boolean>) =>
+      dispatch(acknowledgeOnEmailValidation(maybeAcknowledged)),
+    [dispatch]
+  );
+
+  const dispatchSetEmailCheckAtStartupFailure = useCallback(
+    (maybeFailed: O.Option<boolean>) =>
+      dispatch(setEmailCheckAtStartupFailure(maybeFailed)),
+    [dispatch]
+  );
+
+  useFocusEffect(() => setAccessibilityFocus(accessibilityFirstFocuseViewRef));
+
+  useOnFirstRender(() => {
+    // polling starts every time the user land on this screen
+    startPollingSaga();
+    // if the verification email was never sent, we send it
+    if (sendEmailAtFirstRender) {
+      sendEmailValidation();
+    }
+  });
+
+  const handleContinue = useCallback(() => {
+    if (isEmailValidated) {
+      trackEmailValidationSuccessConfirmed(flow);
+      if (isOnboarding || isFirstOnBoarding) {
+        acknowledgeEmail();
+        if (
+          O.isSome(emailValidation.emailCheckAtStartupFailed) &&
+          emailValidation.emailCheckAtStartupFailed.value
+        ) {
+          dispatchAcknowledgeOnEmailValidation(O.none);
+          dispatchSetEmailCheckAtStartupFailure(O.none);
+          // if the user is in the onboarding flow and the email is correctly validated,
+          // the email validation flow is finished
+        }
+      } else {
+        if (isFciEditEmailFlow) {
+          navigation.navigate(FCI_ROUTES.MAIN, {
+            screen: FCI_ROUTES.USER_DATA_SHARE
+          });
+        } else {
+          navigation.popToTop();
+        }
+      }
+    }
+  }, [
+    acknowledgeEmail,
+    dispatchAcknowledgeOnEmailValidation,
+    dispatchSetEmailCheckAtStartupFailure,
+    emailValidation.emailCheckAtStartupFailed,
+    flow,
+    isEmailValidated,
+    isFciEditEmailFlow,
+    isFirstOnBoarding,
+    isOnboarding,
+    navigation
+  ]);
+
+  const handleResendEmail = useCallback(() => {
+    trackResendValidationEmail(flow);
+    sendEmailValidation();
+  }, [flow, sendEmailValidation]);
+
+  const navigateBackToInsertEmail = useCallback(() => {
+    dispatchAcknowledgeOnEmailValidation(O.none);
+    if (isOnboarding) {
+      navigation.navigate(ROUTES.ONBOARDING, {
+        screen: ROUTES.ONBOARDING_INSERT_EMAIL_SCREEN,
+        params: {
+          isOnboarding,
+          isFciEditEmailFlow,
+          isEditingPreviouslyInsertedEmailMode: true
+        }
+      });
+    } else {
+      navigation.navigate(ROUTES.PROFILE_NAVIGATOR, {
+        screen: ROUTES.INSERT_EMAIL_SCREEN,
+        params: {
+          isOnboarding: false,
+          isFciEditEmailFlow,
+          isEditingPreviouslyInsertedEmailMode: true
+        }
+      });
+    }
+  }, [
+    dispatchAcknowledgeOnEmailValidation,
+    isFciEditEmailFlow,
+    isOnboarding,
+    navigation
+  ]);
+
+  useEffect(() => {
+    if (
+      prevEmailValidation &&
+      pot.isLoading(prevEmailValidation.sendEmailValidationRequest)
+    ) {
+      // send validation email KO
+      if (pot.isError(emailValidation.sendEmailValidationRequest)) {
+        IOToast.error(I18n.t("global.actions.retry"));
+        setShowCountdown(false);
+      }
+      // send validation email OK
+      if (pot.isSome(emailValidation.sendEmailValidationRequest)) {
+        IOToast.success(I18n.t("email.newvalidate.toast"));
+        setShowCountdown(true);
+      }
+    }
+  }, [emailValidation.sendEmailValidationRequest, prevEmailValidation]);
+
+  useEffect(() => {
+    if (isEmailValidated) {
+      setShowCountdown(false);
+      // if the user has validated the email the polling can stop
+      trackEmailValidationSuccess(flow);
+    } else {
+      trackEmailValidation(flow);
+    }
+
+    return () => {
+      // if the user change screen the polling can stop
+      if (!isEmailValidated) {
+        stopPollingSaga();
+      }
+    };
+  }, [flow, isEmailValidated, stopPollingSaga]);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView
+        centerContent={true}
+        contentContainerStyle={[
+          styles.wrapper,
+          /* Android fallback because `centerContent` is only an iOS property */
+          Platform.OS === "android" && styles.wrapper_android
+        ]}
+      >
+        <View style={IOStyles.selfCenter}>
+          <Pictogram
+            name={isEmailValidated ? "emailDotCheck" : "emailDotNotif"}
+            size={VALIDATION_ILLUSTRATION_WIDTH}
+          />
+        </View>
+        <VSpacer size={24} />
+        <View
+          style={IOStyles.alignCenter}
+          accessible={true}
+          ref={accessibilityFirstFocuseViewRef}
+        >
+          <H3 testID="title-test">
+            {I18n.t(
+              isEmailValidated
+                ? "email.newvalidemail.title"
+                : "email.newvalidate.title"
+            )}
+          </H3>
+        </View>
+        <VSpacer size={16} />
+        <View style={{ display: "flex", flexDirection: "column" }}>
+          <Body
+            weight="Regular"
+            style={{ textAlign: "center" }}
+            testID="subtitle-test"
+          >
+            {I18n.t(
+              isEmailValidated
+                ? "email.newvalidemail.subtitle"
+                : "email.newvalidate.subtitle"
+            )}{" "}
+            <Body weight="SemiBold">{email}</Body>
+          </Body>
+        </View>
+        <VSpacer size={24} />
+        {!isEmailValidated && (
+          <View style={IOStyles.selfCenter}>
+            <ButtonLink
+              label={I18n.t("email.newvalidate.link")}
+              accessibilityLabel={I18n.t("email.newvalidate.link")}
+              onPress={navigateBackToInsertEmail}
+              testID="link-test"
+            />
+            <VSpacer size={24} />
+          </View>
+        )}
+        <CountdownProvider
+          timerTiming={emailSentTimeout / 1000}
+          intervalDuration={countdownIntervalDuration}
+        >
+          <Countdown
+            onContdownCompleted={() => {
+              setShowCountdown(false);
+            }}
+            visible={showCountdown && !isEmailValidated}
+          />
+        </CountdownProvider>
+        {isEmailValidated ? (
+          <View style={IOStyles.selfCenter}>
+            <ButtonSolid
+              label={I18n.t("global.buttons.continue")}
+              accessibilityLabel={I18n.t("global.buttons.continue")}
+              onPress={handleContinue}
+            />
+          </View>
+        ) : (
+          !showCountdown && (
+            <View style={IOStyles.selfCenter}>
+              <ButtonOutline
+                label={I18n.t("email.newvalidate.buttonlabelsentagain")}
+                accessibilityLabel={I18n.t(
+                  "email.newvalidate.buttonlabelsentagain"
+                )}
+                onPress={handleResendEmail}
+              />
+            </View>
+          )
+        )}
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    marginHorizontal: IOVisualCostants.appMarginDefault
+  },
+  wrapper: {
+    flex: 1,
+    alignItems: "stretch",
+    justifyContent: "center",
+    alignContent: "center"
+  },
+  wrapper_android: {
+    flexGrow: 1,
+    justifyContent: "center"
+  }
+});
+
+export default EmailValidationSendEmailScreen;
diff --git a/ts/screens/profile/LanguagesPreferencesScreen.tsx b/ts/screens/profile/LanguagesPreferencesScreen.tsx
index 1bda954db7f..6e4c5c6c07e 100644
--- a/ts/screens/profile/LanguagesPreferencesScreen.tsx
+++ b/ts/screens/profile/LanguagesPreferencesScreen.tsx
@@ -8,12 +8,14 @@ import { Alert, SafeAreaView, View } from "react-native";
 import { connect } from "react-redux";
 import { Locales, TranslationKeys } from "../../../locales/locales";
 import SectionStatusComponent from "../../components/SectionStatus";
-import { withLightModalContext } from "../../components/helpers/withLightModalContext";
 import { withLoadingSpinner } from "../../components/helpers/withLoadingSpinner";
 import { ContextualHelpPropsMarkdown } from "../../components/screens/BaseScreenComponent";
 import ListItemComponent from "../../components/screens/ListItemComponent";
 import { AlertModal } from "../../components/ui/AlertModal";
-import { LightModalContextInterface } from "../../components/ui/LightModal";
+import {
+  LightModalContext,
+  LightModalContextInterface
+} from "../../components/ui/LightModal";
 import { RNavScreenWithLargeHeader } from "../../components/ui/RNavScreenWithLargeHeader";
 import I18n, { availableTranslations } from "../../i18n";
 import { preferredLanguageSaveSuccess } from "../../store/actions/persistedPreferences";
@@ -28,12 +30,13 @@ import {
 } from "../../utils/locale";
 import { showToast } from "../../utils/showToast";
 
-type Props = LightModalContextInterface &
-  ReturnType<typeof mapDispatchToProps> &
+type Props = ReturnType<typeof mapDispatchToProps> &
   ReturnType<typeof mapStateToProps>;
 
 type State = { isLoading: boolean; selectedLocale?: Locales };
 
+type LanguagesPreferencesScreenProps = Props & LightModalContextInterface;
+
 const iconSize: IOIconSizeScale = 12;
 
 const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
@@ -44,8 +47,11 @@ const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
 /**
  * Allows the user to select one of the available Languages as preferred
  */
-class LanguagesPreferencesScreen extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
+class LanguagesPreferencesScreen extends React.PureComponent<
+  LanguagesPreferencesScreenProps,
+  State
+> {
+  constructor(props: LanguagesPreferencesScreenProps) {
     super(props);
     this.state = { isLoading: false };
   }
@@ -122,7 +128,9 @@ class LanguagesPreferencesScreen extends React.PureComponent<Props, State> {
   public render() {
     const ContainerComponent = withLoadingSpinner(() => (
       <RNavScreenWithLargeHeader
-        title={I18n.t("profile.preferences.list.preferred_language.title")}
+        title={{
+          label: I18n.t("profile.preferences.list.preferred_language.title")
+        }}
         description={I18n.t(
           "profile.preferences.list.preferred_language.subtitle"
         )}
@@ -187,7 +195,12 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
     )
 });
 
+const LanguagesPreferencesScreenFC = (props: Props) => {
+  const { ...modalContext } = React.useContext(LightModalContext);
+  return <LanguagesPreferencesScreen {...props} {...modalContext} />;
+};
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(withLightModalContext(LanguagesPreferencesScreen));
+)(LanguagesPreferencesScreenFC);
diff --git a/ts/screens/profile/NotificationsPreferencesScreen.tsx b/ts/screens/profile/NotificationsPreferencesScreen.tsx
index b65b1110aa8..b1cbc875396 100644
--- a/ts/screens/profile/NotificationsPreferencesScreen.tsx
+++ b/ts/screens/profile/NotificationsPreferencesScreen.tsx
@@ -60,7 +60,9 @@ export const NotificationsPreferencesScreen = () => {
 
   return (
     <RNavScreenWithLargeHeader
-      title={I18n.t("profile.preferences.notifications.header")}
+      title={{
+        label: I18n.t("profile.preferences.notifications.header")
+      }}
       description={I18n.t("profile.preferences.notifications.subtitle")}
       contextualHelpMarkdown={contextualHelpMarkdown}
       headerActionsProp={{ showHelp: true }}
diff --git a/ts/screens/profile/PreferencesScreen.tsx b/ts/screens/profile/PreferencesScreen.tsx
index 5f1feadba28..f00725e221d 100644
--- a/ts/screens/profile/PreferencesScreen.tsx
+++ b/ts/screens/profile/PreferencesScreen.tsx
@@ -15,15 +15,18 @@ import { ComponentProps } from "react";
 import { Alert, FlatList, ListRenderItemInfo } from "react-native";
 import { connect } from "react-redux";
 import { ServicesPreferencesModeEnum } from "../../../definitions/backend/ServicesPreferencesMode";
-import { withLightModalContext } from "../../components/helpers/withLightModalContext";
 import { ContextualHelpPropsMarkdown } from "../../components/screens/BaseScreenComponent";
-import { LightModalContextInterface } from "../../components/ui/LightModal";
+import {
+  LightModalContext,
+  LightModalContextInterface
+} from "../../components/ui/LightModal";
 import { RNavScreenWithLargeHeader } from "../../components/ui/RNavScreenWithLargeHeader";
 import { remindersOptInEnabled } from "../../config";
 import I18n from "../../i18n";
 import {
   AppParamsList,
-  IOStackNavigationRouteProps
+  IOStackNavigationProp,
+  useIONavigation
 } from "../../navigation/params/AppParamsList";
 import ROUTES from "../../navigation/routes";
 import {
@@ -32,7 +35,7 @@ import {
   navigateToLanguagePreferenceScreen,
   navigateToServicePreferenceScreen
 } from "../../store/actions/navigation";
-import { Dispatch, ReduxProps } from "../../store/actions/types";
+import { Dispatch } from "../../store/actions/types";
 import {
   isCustomEmailChannelEnabledSelector,
   preferredLanguageSelector
@@ -54,13 +57,8 @@ import {
 } from "../../utils/locale";
 import { requestWriteCalendarPermission } from "../../utils/permission";
 
-type OwnProps = IOStackNavigationRouteProps<AppParamsList>;
-
-type Props = OwnProps &
-  ReturnType<typeof mapStateToProps> &
-  ReturnType<typeof mapDispatchToProps> &
-  ReduxProps &
-  LightModalContextInterface;
+type Props = ReturnType<typeof mapStateToProps> &
+  ReturnType<typeof mapDispatchToProps>;
 
 type PreferencesNavListItem = {
   value: string;
@@ -70,6 +68,9 @@ type PreferencesNavListItem = {
   "description" | "testID" | "onPress"
 >;
 
+type PreferencesScreenProps = LightModalContextInterface &
+  Props & { navigation: IOStackNavigationProp<AppParamsList> };
+
 /**
  * Translates the primary languages of the provided locales.
  *
@@ -105,8 +106,8 @@ const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
   body: "profile.preferences.contextualHelpContent"
 };
 
-class PreferencesScreen extends React.Component<Props> {
-  constructor(props: Props) {
+class PreferencesScreen extends React.Component<PreferencesScreenProps> {
+  constructor(props: PreferencesScreenProps) {
     super(props);
   }
 
@@ -243,7 +244,9 @@ class PreferencesScreen extends React.Component<Props> {
 
     return (
       <RNavScreenWithLargeHeader
-        title={I18n.t("profile.preferences.title")}
+        title={{
+          label: I18n.t("profile.preferences.title")
+        }}
         description={I18n.t("profile.preferences.subtitle")}
         contextualHelpMarkdown={contextualHelpMarkdown}
         headerActionsProp={{ showHelp: true }}
@@ -287,7 +290,15 @@ const mapDispatchToProps = (_: Dispatch) => ({
   navigateToLanguagePreferenceScreen: () => navigateToLanguagePreferenceScreen()
 });
 
+const PreferencesScreenFC = (props: Props) => {
+  const { ...modalContext } = React.useContext(LightModalContext);
+  const navigation = useIONavigation();
+  return (
+    <PreferencesScreen {...props} {...modalContext} navigation={navigation} />
+  );
+};
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(withLightModalContext(PreferencesScreen));
+)(PreferencesScreenFC);
diff --git a/ts/screens/profile/PrivacyMainScreen.tsx b/ts/screens/profile/PrivacyMainScreen.tsx
index f1a6aaff75f..1ca07463e8d 100644
--- a/ts/screens/profile/PrivacyMainScreen.tsx
+++ b/ts/screens/profile/PrivacyMainScreen.tsx
@@ -262,7 +262,9 @@ const PrivacyMainScreen = ({ navigation }: Props) => {
 
   return (
     <RNavScreenWithLargeHeader
-      title={I18n.t("profile.main.privacy.title")}
+      title={{
+        label: I18n.t("profile.main.privacy.title")
+      }}
       description={I18n.t("profile.main.privacy.subtitle")}
       headerActionsProp={{ showHelp: true }}
     >
diff --git a/ts/screens/profile/ProfileAboutApp.tsx b/ts/screens/profile/ProfileAboutApp.tsx
index fea8fc79f62..7fb55c47919 100644
--- a/ts/screens/profile/ProfileAboutApp.tsx
+++ b/ts/screens/profile/ProfileAboutApp.tsx
@@ -1,19 +1,21 @@
 import { ContentWrapper, VSpacer } from "@pagopa/io-app-design-system";
 import React from "react";
-import Markdown from "../../components/ui/Markdown";
+import LegacyMarkdown from "../../components/ui/Markdown/LegacyMarkdown";
 import { RNavScreenWithLargeHeader } from "../../components/ui/RNavScreenWithLargeHeader";
 import I18n from "../../i18n";
 
 const ProfileAboutApp = () => (
   <RNavScreenWithLargeHeader
-    title={I18n.t("profile.main.appInfo.title")}
+    title={{
+      label: I18n.t("profile.main.appInfo.title")
+    }}
     headerActionsProp={{ showHelp: false }}
   >
     <ContentWrapper>
       <VSpacer size={8} />
-      <Markdown>
+      <LegacyMarkdown>
         {I18n.t("profile.main.appInfo.contextualHelpContent")}
-      </Markdown>
+      </LegacyMarkdown>
       <VSpacer size={24} />
     </ContentWrapper>
   </RNavScreenWithLargeHeader>
diff --git a/ts/screens/profile/ProfileDataScreen.tsx b/ts/screens/profile/ProfileDataScreen.tsx
index 600bebcdc18..a1024eb7b3c 100644
--- a/ts/screens/profile/ProfileDataScreen.tsx
+++ b/ts/screens/profile/ProfileDataScreen.tsx
@@ -3,16 +3,10 @@ import { pipe } from "fp-ts/lib/function";
 import { List } from "native-base";
 import * as React from "react";
 import { connect } from "react-redux";
-import { Dispatch } from "redux";
 import { ContextualHelpPropsMarkdown } from "../../components/screens/BaseScreenComponent";
 import ListItemComponent from "../../components/screens/ListItemComponent";
 import { RNavScreenWithLargeHeader } from "../../components/ui/RNavScreenWithLargeHeader";
-import { isEmailUniquenessValidationEnabledSelector } from "../../features/fastLogin/store/selectors";
 import I18n from "../../i18n";
-import {
-  navigateToEmailInsertScreen,
-  navigateToEmailReadScreen
-} from "../../store/actions/navigation";
 import {
   hasProfileEmailSelector,
   isProfileEmailValidatedSelector,
@@ -20,9 +14,10 @@ import {
   profileNameSurnameSelector
 } from "../../store/reducers/profile";
 import { GlobalState } from "../../store/reducers/types";
+import { useIONavigation } from "../../navigation/params/AppParamsList";
+import ROUTES from "../../navigation/routes";
 
-type Props = ReturnType<typeof mapDispatchToProps> &
-  ReturnType<typeof mapStateToProps>;
+type Props = ReturnType<typeof mapStateToProps>;
 
 const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
   title: "profile.preferences.contextualHelpTitle",
@@ -32,26 +27,30 @@ const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
 const ProfileDataScreen: React.FC<Props> = ({
   profileEmail,
   isEmailValidated,
-  isEmailUniquenessValidationEnabled,
-  navigateToEmailReadScreen,
-  navigateToEmailInsertScreen,
   hasProfileEmail,
   nameSurname
 }): React.ReactElement => {
+  const navigation = useIONavigation();
+
+  const navigateToInsertEmailScreen = React.useCallback(() => {
+    navigation.navigate(ROUTES.PROFILE_NAVIGATOR, {
+      screen: ROUTES.INSERT_EMAIL_SCREEN,
+      params: {
+        isOnboarding: false
+      }
+    });
+  }, [navigation]);
+
   const onPressEmail = () => {
     if (hasProfileEmail) {
-      if (isEmailUniquenessValidationEnabled) {
-        navigateToEmailInsertScreen();
-      } else {
-        navigateToEmailReadScreen();
-      }
-    } else {
-      navigateToEmailInsertScreen();
+      navigateToInsertEmailScreen();
     }
   };
   return (
     <RNavScreenWithLargeHeader
-      title={I18n.t("profile.data.title")}
+      title={{
+        label: I18n.t("profile.data.title")
+      }}
       description={I18n.t("profile.data.subtitle")}
       headerActionsProp={{ showHelp: true }}
       contextualHelpMarkdown={contextualHelpMarkdown}
@@ -87,18 +86,11 @@ const ProfileDataScreen: React.FC<Props> = ({
   );
 };
 
-const mapDispatchToProps = (_: Dispatch) => ({
-  navigateToEmailReadScreen: () => navigateToEmailReadScreen(),
-  navigateToEmailInsertScreen: () => navigateToEmailInsertScreen()
-});
-
 const mapStateToProps = (state: GlobalState) => ({
   profileEmail: profileEmailSelector(state),
   isEmailValidated: isProfileEmailValidatedSelector(state),
   hasProfileEmail: hasProfileEmailSelector(state),
-  nameSurname: profileNameSurnameSelector(state),
-  isEmailUniquenessValidationEnabled:
-    isEmailUniquenessValidationEnabledSelector(state)
+  nameSurname: profileNameSurnameSelector(state)
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(ProfileDataScreen);
+export default connect(mapStateToProps)(ProfileDataScreen);
diff --git a/ts/screens/profile/ProfileMainScreen.tsx b/ts/screens/profile/ProfileMainScreen.tsx
index 4165dfa186e..5e5ccde9195 100644
--- a/ts/screens/profile/ProfileMainScreen.tsx
+++ b/ts/screens/profile/ProfileMainScreen.tsx
@@ -3,8 +3,10 @@ import {
   Divider,
   IOColors,
   IOVisualCostants,
+  IOToast,
   ListItemNav,
-  VSpacer
+  VSpacer,
+  useIOTheme
 } from "@pagopa/io-app-design-system";
 import { Millisecond } from "@pagopa/ts-commons/lib/units";
 import * as React from "react";
@@ -20,9 +22,7 @@ import {
 import { connect } from "react-redux";
 import AppVersion from "../../components/AppVersion";
 import FiscalCodeComponent from "../../components/FiscalCodeComponent";
-import { IOToast } from "../../components/Toast";
 import TouchableDefaultOpacity from "../../components/TouchableDefaultOpacity";
-import { IOStyles } from "../../components/core/variables/IOStyles";
 import { withLightModalContext } from "../../components/helpers/withLightModalContext";
 import {
   TabBarItemPressType,
@@ -197,47 +197,6 @@ class ProfileMainScreen extends React.PureComponent<Props, State> {
       }
     ];
 
-    const renderProfileNavItem = ({
-      item: { value, description, onPress, testID, hideChevron }
-    }: ListRenderItemInfo<ProfileNavListItem>) => (
-      <ListItemNav
-        accessibilityLabel={value}
-        value={value}
-        description={description}
-        onPress={onPress}
-        testID={testID}
-        hideChevron={hideChevron}
-      />
-    );
-
-    const screenContent = () => (
-      <ScrollView style={IOStyles.bgWhite}>
-        <VSpacer size={16} />
-        <FlatList
-          scrollEnabled={false}
-          keyExtractor={(item: ProfileNavListItem, index: number) =>
-            `${item.value}-${index}`
-          }
-          contentContainerStyle={{
-            paddingHorizontal: IOVisualCostants.appMarginDefault
-          }}
-          data={profileNavListItems}
-          renderItem={renderProfileNavItem}
-          ItemSeparatorComponent={() => <Divider />}
-        />
-
-        <ContentWrapper>
-          <AppVersion onPress={this.onTapAppVersion} />
-        </ContentWrapper>
-
-        {/* Developer Section */}
-        {(isDebugModeEnabled || isDevEnv) && <DeveloperModeSection />}
-
-        {/* End Page */}
-        <VSpacer size={24} />
-      </ScrollView>
-    );
-
     /* The dimensions of the screen that will be used
     to hide the white background when inertial
     scrolling is turned on. */
@@ -288,11 +247,67 @@ class ProfileMainScreen extends React.PureComponent<Props, State> {
         contextualHelpMarkdown={contextualHelpMarkdown}
         faqCategories={["profile"]}
       >
-        {screenContent()}
+        <ScreenContent
+          onTapAppVersion={this.onTapAppVersion}
+          profileNavListItems={profileNavListItems}
+          isDebugModeEnabled={isDebugModeEnabled}
+        />
       </DarkLayout>
     );
   }
 }
+type ScreenContentProps = {
+  isDebugModeEnabled: boolean;
+  onTapAppVersion: () => void;
+  profileNavListItems: ReadonlyArray<ProfileNavListItem>;
+};
+
+const ScreenContent = ({
+  profileNavListItems,
+  onTapAppVersion,
+  isDebugModeEnabled
+}: ScreenContentProps) => {
+  const theme = useIOTheme();
+  const renderProfileNavItem = ({
+    item: { value, description, onPress, testID, hideChevron }
+  }: ListRenderItemInfo<ProfileNavListItem>) => (
+    <ListItemNav
+      accessibilityLabel={value}
+      value={value}
+      description={description}
+      onPress={onPress}
+      testID={testID}
+      hideChevron={hideChevron}
+    />
+  );
+  return (
+    <ScrollView style={{ backgroundColor: theme["appBackground-primary"] }}>
+      <VSpacer size={16} />
+      <FlatList
+        scrollEnabled={false}
+        keyExtractor={(item: ProfileNavListItem, index: number) =>
+          `${item.value}-${index}`
+        }
+        contentContainerStyle={{
+          paddingHorizontal: IOVisualCostants.appMarginDefault
+        }}
+        data={profileNavListItems}
+        renderItem={renderProfileNavItem}
+        ItemSeparatorComponent={() => <Divider />}
+      />
+
+      <ContentWrapper>
+        <AppVersion onPress={onTapAppVersion} />
+      </ContentWrapper>
+
+      {/* Developer Section */}
+      {(isDebugModeEnabled || isDevEnv) && <DeveloperModeSection />}
+
+      {/* End Page */}
+      <VSpacer size={24} />
+    </ScrollView>
+  );
+};
 
 const mapStateToProps = (state: GlobalState) => ({
   isDebugModeEnabled: isDebugModeEnabledSelector(state)
diff --git a/ts/screens/profile/RemoveAccountDetailsScreen.tsx b/ts/screens/profile/RemoveAccountDetailsScreen.tsx
index 091d97de597..d576f10f3c3 100644
--- a/ts/screens/profile/RemoveAccountDetailsScreen.tsx
+++ b/ts/screens/profile/RemoveAccountDetailsScreen.tsx
@@ -1,39 +1,38 @@
+import {
+  BlockButtonProps,
+  ContentWrapper,
+  FooterWithButtons
+} from "@pagopa/io-app-design-system";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { Content } from "native-base";
+import { StackActions } from "@react-navigation/native";
 import * as React from "react";
-import { View, Alert, SafeAreaView } from "react-native";
+import { Alert, SafeAreaView } from "react-native";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
-import { StackActions } from "@react-navigation/native";
+import { LabelledItem } from "../../components/LabelledItem";
+import { LoadingErrorComponent } from "../../components/LoadingErrorComponent";
 import {
   RadioButtonList,
   RadioItem
 } from "../../components/core/selection/RadioButtonList";
-import { H1 } from "../../components/core/typography/H1";
-import { H4 } from "../../components/core/typography/H4";
 import { IOStyles } from "../../components/core/variables/IOStyles";
-import { LabelledItem } from "../../components/LabelledItem";
-import BaseScreenComponent from "../../components/screens/BaseScreenComponent";
-import FooterWithButtons from "../../components/ui/FooterWithButtons";
+import { RNavScreenWithLargeHeader } from "../../components/ui/RNavScreenWithLargeHeader";
 import { shufflePinPadOnPayment } from "../../config";
-import { LoadingErrorComponent } from "../../components/LoadingErrorComponent";
 import { isCgnEnrolledSelector } from "../../features/bonus/cgn/store/reducers/details";
 import I18n from "../../i18n";
 import NavigationService from "../../navigation/NavigationService";
 import { identificationRequest } from "../../store/actions/identification";
 import { navigateToWalletHome } from "../../store/actions/navigation";
 import {
-  removeAccountMotivation,
   RemoveAccountMotivationEnum,
-  RemoveAccountMotivationPayload
+  RemoveAccountMotivationPayload,
+  removeAccountMotivation
 } from "../../store/actions/profile";
-import { ReduxProps } from "../../store/actions/types";
 import { GlobalState } from "../../store/reducers/types";
 import { userDataProcessingSelector } from "../../store/reducers/userDataProcessing";
 import { withKeyboard } from "../../utils/keyboard";
 
-type Props = ReduxProps &
-  ReturnType<typeof mapStateToProps> &
+type Props = ReturnType<typeof mapStateToProps> &
   ReturnType<typeof mapDispatchToProps>;
 
 const getMotivationItems = (): ReadonlyArray<
@@ -117,20 +116,33 @@ const RemoveAccountDetails: React.FunctionComponent<Props> = (props: Props) => {
         props.requestIdentification({ reason: selectedMotivation });
     }
   };
-  const continueButtonProps = {
-    block: true,
-    primary: true,
-    onPress: handleContinuePress,
-    title: I18n.t("profile.main.privacy.removeAccount.info.cta")
+
+  const continueButtonProps: BlockButtonProps = {
+    type: "Solid",
+    buttonProps: {
+      color: "primary",
+      label: I18n.t("profile.main.privacy.removeAccount.info.cta"),
+      accessibilityLabel: I18n.t("profile.main.privacy.removeAccount.info.cta"),
+      onPress: handleContinuePress
+    }
   };
 
   const loadingCaption = I18n.t(
     "profile.main.privacy.removeAccount.success.title"
   );
   return (
-    <BaseScreenComponent
-      goBack={true}
-      headerTitle={I18n.t("profile.main.title")}
+    <RNavScreenWithLargeHeader
+      title={{
+        label: I18n.t("profile.main.privacy.removeAccount.title")
+      }}
+      description={I18n.t("profile.main.privacy.removeAccount.details.body")}
+      fixedBottomSlot={withKeyboard(
+        <FooterWithButtons
+          type={"SingleButton"}
+          primary={continueButtonProps}
+        />,
+        true
+      )}
     >
       {props.isLoading || props.isError ? (
         <LoadingErrorComponent
@@ -145,47 +157,34 @@ const RemoveAccountDetails: React.FunctionComponent<Props> = (props: Props) => {
         />
       ) : (
         <SafeAreaView style={IOStyles.flex}>
-          <Content>
-            <H1>{I18n.t("profile.main.privacy.removeAccount.title")}</H1>
-            <H4 weight="Regular">
-              {I18n.t("profile.main.privacy.removeAccount.details.body")}
-            </H4>
-            <View style={{ paddingTop: 25 }}>
-              <RadioButtonList<RemoveAccountMotivationEnum>
-                head={I18n.t(
-                  "profile.main.privacy.removeAccount.details.question"
+          <ContentWrapper>
+            <RadioButtonList<RemoveAccountMotivationEnum>
+              head={I18n.t(
+                "profile.main.privacy.removeAccount.details.question"
+              )}
+              key="delete_reason"
+              items={getMotivationItems()}
+              selectedItem={selectedMotivation}
+              onPress={setSelectedMotivation}
+            />
+            {selectedMotivation === RemoveAccountMotivationEnum.OTHERS && (
+              <LabelledItem
+                label={I18n.t(
+                  "profile.main.privacy.removeAccount.details.labelOpenAnswer"
                 )}
-                key="delete_reason"
-                items={getMotivationItems()}
-                selectedItem={selectedMotivation}
-                onPress={setSelectedMotivation}
+                inputProps={{
+                  keyboardType: "default",
+                  returnKeyType: "done",
+                  autoFocus: true,
+                  maxLength: 18,
+                  onChangeText: setOtherMotivation
+                }}
               />
-              {selectedMotivation === RemoveAccountMotivationEnum.OTHERS && (
-                <LabelledItem
-                  label={I18n.t(
-                    "profile.main.privacy.removeAccount.details.labelOpenAnswer"
-                  )}
-                  inputProps={{
-                    keyboardType: "default",
-                    returnKeyType: "done",
-                    autoFocus: true,
-                    maxLength: 18,
-                    onChangeText: setOtherMotivation
-                  }}
-                />
-              )}
-            </View>
-          </Content>
-          {withKeyboard(
-            <FooterWithButtons
-              type={"SingleButton"}
-              leftButton={continueButtonProps}
-            />,
-            true
-          )}
+            )}
+          </ContentWrapper>
         </SafeAreaView>
       )}
-    </BaseScreenComponent>
+    </RNavScreenWithLargeHeader>
   );
 };
 
diff --git a/ts/screens/profile/RemoveAccountInfoScreen.tsx b/ts/screens/profile/RemoveAccountInfoScreen.tsx
index 8b49a343c21..518efa44414 100644
--- a/ts/screens/profile/RemoveAccountInfoScreen.tsx
+++ b/ts/screens/profile/RemoveAccountInfoScreen.tsx
@@ -1,9 +1,12 @@
-import { Body, ContentWrapper } from "@pagopa/io-app-design-system";
+import {
+  BlockButtonProps,
+  Body,
+  ContentWrapper,
+  FooterWithButtons
+} from "@pagopa/io-app-design-system";
 import * as React from "react";
-import { SafeAreaView } from "react-native";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
-import FooterWithButtons from "../../components/ui/FooterWithButtons";
 import { RNavScreenWithLargeHeader } from "../../components/ui/RNavScreenWithLargeHeader";
 import I18n from "../../i18n";
 import { navigateToRemoveAccountDetailScreen } from "../../store/actions/navigation";
@@ -16,28 +19,30 @@ type Props = ReturnType<typeof mapDispatchToProps>;
  * Here user can ask to delete his account
  */
 const RemoveAccountInfo: React.FunctionComponent<Props> = props => {
-  const continueButtonProps = {
-    block: true,
-    primary: true,
-    onPress: () => {
-      props.loadBonus();
-      props.navigateToRemoveAccountDetail();
-    },
-    title: I18n.t("profile.main.privacy.removeAccount.info.cta")
+  const continueButtonProps: BlockButtonProps = {
+    type: "Solid",
+    buttonProps: {
+      color: "primary",
+      label: I18n.t("profile.main.privacy.removeAccount.info.cta"),
+      accessibilityLabel: I18n.t("profile.main.privacy.removeAccount.info.cta"),
+      onPress: () => {
+        props.loadBonus();
+        props.navigateToRemoveAccountDetail();
+      }
+    }
   };
 
-  const footerComponent = (
-    <SafeAreaView>
-      <FooterWithButtons
-        type={"SingleButton"}
-        leftButton={continueButtonProps}
-      />
-    </SafeAreaView>
-  );
   return (
     <RNavScreenWithLargeHeader
-      title={I18n.t("profile.main.privacy.removeAccount.title")}
-      fixedBottomSlot={footerComponent}
+      title={{
+        label: I18n.t("profile.main.privacy.removeAccount.title")
+      }}
+      fixedBottomSlot={
+        <FooterWithButtons
+          type={"SingleButton"}
+          primary={continueButtonProps}
+        />
+      }
     >
       <ContentWrapper>
         <Body weight="Regular">
diff --git a/ts/screens/profile/RemoveAccountSuccessScreen.tsx b/ts/screens/profile/RemoveAccountSuccessScreen.tsx
index d5ded0b2871..78acfb8522f 100644
--- a/ts/screens/profile/RemoveAccountSuccessScreen.tsx
+++ b/ts/screens/profile/RemoveAccountSuccessScreen.tsx
@@ -1,67 +1,101 @@
-import { Content } from "native-base";
+import {
+  BlockButtonProps,
+  Body,
+  ContentWrapper,
+  FooterWithButtons,
+  H2,
+  IOVisualCostants,
+  VSpacer
+} from "@pagopa/io-app-design-system";
 import * as React from "react";
-import { Image, SafeAreaView, StyleSheet } from "react-native";
+import { useState } from "react";
+import { Image, Platform, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { connect } from "react-redux";
-import { VSpacer } from "@pagopa/io-app-design-system";
-import { IOStyles } from "../../components/core/variables/IOStyles";
-import BaseScreenComponent from "../../components/screens/BaseScreenComponent";
-import FooterWithButtons from "../../components/ui/FooterWithButtons";
+import expiredIcon from "../../../img/wallet/errors/payment-expired-icon.png";
+import { useHardwareBackButton } from "../../hooks/useHardwareBackButton";
 import I18n from "../../i18n";
-import { H4 } from "../../components/core/typography/H4";
-import { H2 } from "../../components/core/typography/H2";
 import {
   AppParamsList,
   IOStackNavigationRouteProps
 } from "../../navigation/params/AppParamsList";
-import { Dispatch } from "../../store/actions/types";
 import { logoutRequest } from "../../store/actions/authentication";
-import expiredIcon from "../../../img/wallet/errors/payment-expired-icon.png";
-import { useHardwareBackButton } from "../../hooks/useHardwareBackButton";
+import { Dispatch } from "../../store/actions/types";
 
 type Props = IOStackNavigationRouteProps<AppParamsList> &
   ReturnType<typeof mapDispatchToProps>;
-const styles = StyleSheet.create({
-  content: {
-    flex: 1,
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center"
-  }
-});
+
 /**
  * A screen to explain how the account removal works.
  * Here user can ask to delete his account
  */
 const RemoveAccountSuccess: React.FunctionComponent<Props> = props => {
+  const [footerHeight, setFooterHeight] = useState(0);
+  const insets = useSafeAreaInsets();
   // do nothing
   useHardwareBackButton(() => true);
 
-  const continueButtonProps = {
-    block: true,
-    bordered: true,
-    primary: true,
-    onPress: props.logout,
-    title: I18n.t("profile.main.privacy.removeAccount.success.cta")
+  const continueButtonProps: BlockButtonProps = {
+    type: "Outline",
+    buttonProps: {
+      color: "primary",
+      label: I18n.t("profile.main.privacy.removeAccount.success.cta"),
+      accessibilityLabel: I18n.t(
+        "profile.main.privacy.removeAccount.success.cta"
+      ),
+      onPress: props.logout
+    }
   };
 
   const footerComponent = (
-    <FooterWithButtons type={"SingleButton"} leftButton={continueButtonProps} />
+    <FooterWithButtons
+      sticky
+      onLayoutChange={setFooterHeight}
+      type={"SingleButton"}
+      primary={continueButtonProps}
+    />
   );
 
   return (
-    <BaseScreenComponent headerTitle={I18n.t("profile.main.title")}>
-      <SafeAreaView style={IOStyles.flex}>
-        <Content contentContainerStyle={styles.content}>
-          <Image source={expiredIcon} />
-          <VSpacer size={16} />
-          <H2>{I18n.t("profile.main.privacy.removeAccount.success.title")}</H2>
-          <H4 weight="Regular" style={{ textAlign: "center" }}>
-            {I18n.t("profile.main.privacy.removeAccount.success.body")}
-          </H4>
-        </Content>
-        {footerComponent}
-      </SafeAreaView>
-    </BaseScreenComponent>
+    <View style={{ flexGrow: 1 }}>
+      {/* This extra View is mandatory when you have a fixed
+        bottom component to get a consistent behavior
+        across platforms */}
+      <View style={{ flexGrow: 1, paddingBottom: footerHeight }}>
+        <ScrollView
+          centerContent
+          contentContainerStyle={[
+            { paddingTop: insets.top },
+            /* Android fallback because `centerContent`
+              is only an iOS property */
+            Platform.OS === "android" && {
+              flexGrow: 1,
+              justifyContent: "center"
+            }
+          ]}
+        >
+          <ContentWrapper>
+            <View
+              style={{
+                alignItems: "center",
+                paddingVertical: IOVisualCostants.appMarginDefault
+              }}
+            >
+              <Image source={expiredIcon} />
+              <VSpacer size={16} />
+              <H2 style={{ textAlign: "center" }}>
+                {I18n.t("profile.main.privacy.removeAccount.success.title")}
+              </H2>
+              <VSpacer size={16} />
+              <Body style={{ textAlign: "center" }}>
+                {I18n.t("profile.main.privacy.removeAccount.success.body")}
+              </Body>
+            </View>
+          </ContentWrapper>
+        </ScrollView>
+      </View>
+      {footerComponent}
+    </View>
   );
 };
 
diff --git a/ts/screens/profile/SecurityScreen.tsx b/ts/screens/profile/SecurityScreen.tsx
index 26bf13f62e5..9dd37d0df3e 100644
--- a/ts/screens/profile/SecurityScreen.tsx
+++ b/ts/screens/profile/SecurityScreen.tsx
@@ -1,7 +1,7 @@
 import { Divider, ListItemNav } from "@pagopa/io-app-design-system";
-import { useNavigation } from "@react-navigation/native";
 import { List } from "native-base";
 import React, { useCallback, useEffect, useState } from "react";
+import { useNavigation } from "@react-navigation/native";
 import { ContextualHelpPropsMarkdown } from "../../components/screens/BaseScreenComponent";
 import ListItemComponent from "../../components/screens/ListItemComponent";
 import { RNavScreenWithLargeHeader } from "../../components/ui/RNavScreenWithLargeHeader";
@@ -29,6 +29,11 @@ import {
   trackBiometricActivationAccepted,
   trackBiometricActivationDeclined
 } from "../onboarding/biometric&securityChecks/analytics";
+import {
+  IOStackNavigationProp,
+  useIONavigation
+} from "../../navigation/params/AppParamsList";
+import { IdPayCodeParamsList } from "../../features/idpay/code/navigation/params";
 
 const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
   title: "profile.preferences.contextualHelpTitle",
@@ -38,24 +43,36 @@ const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
 const SecurityScreen = (): React.ReactElement => {
   const dispatch = useIODispatch();
   const isFingerprintEnabled = useIOSelector(isFingerprintEnabledSelector);
-  const navigation = useNavigation();
+  const navigation =
+    useNavigation<IOStackNavigationProp<IdPayCodeParamsList>>();
+  const commonNavigation = useIONavigation();
   const isScreenReaderEnabled = useScreenReaderEnabled();
   const [isFingerprintAvailable, setIsFingerprintAvailable] = useState(false);
   const isIdPayEnabled = useIOSelector(isIdPayEnabledSelector);
   const isIdPayCodeOnboarded = useIOSelector(isIdPayCodeOnboardedSelector);
 
   const idPayCodeHandler = () => {
-    navigation.navigate(IdPayCodeRoutes.IDPAY_CODE_MAIN, {
-      screen: isIdPayCodeOnboarded
-        ? IdPayCodeRoutes.IDPAY_CODE_RENEW
-        : IdPayCodeRoutes.IDPAY_CODE_ONBOARDING
-    });
+    navigation.navigate(
+      IdPayCodeRoutes.IDPAY_CODE_MAIN,
+      isIdPayCodeOnboarded
+        ? {
+            screen: IdPayCodeRoutes.IDPAY_CODE_RENEW
+          }
+        : {
+            screen: IdPayCodeRoutes.IDPAY_CODE_ONBOARDING,
+            params: {
+              initiativeId: undefined
+            }
+          }
+    );
   };
 
   const requestIdentificationAndResetPin = useCallback(() => {
     const onSuccess = () => {
       void mixpanelTrack("UPDATE_PIN");
-      navigation.navigate(ROUTES.PIN_SCREEN);
+      commonNavigation.navigate(ROUTES.PROFILE_NAVIGATOR, {
+        screen: ROUTES.PIN_SCREEN
+      });
     };
 
     dispatch(
@@ -70,7 +87,7 @@ const SecurityScreen = (): React.ReactElement => {
         shufflePinPadOnPayment
       )
     );
-  }, [dispatch, navigation]);
+  }, [commonNavigation, dispatch]);
 
   const setFingerprintPreference = useCallback(
     (fingerprintPreference: boolean) =>
@@ -122,7 +139,9 @@ const SecurityScreen = (): React.ReactElement => {
 
   return (
     <RNavScreenWithLargeHeader
-      title={I18n.t("profile.security.title")}
+      title={{
+        label: I18n.t("profile.security.title")
+      }}
       description={I18n.t("profile.security.subtitle")}
       headerActionsProp={{ showHelp: true }}
       contextualHelpMarkdown={contextualHelpMarkdown}
diff --git a/ts/screens/profile/ServicesPreferenceScreen.tsx b/ts/screens/profile/ServicesPreferenceScreen.tsx
index ea7c205f20f..eb4aa8d3de1 100644
--- a/ts/screens/profile/ServicesPreferenceScreen.tsx
+++ b/ts/screens/profile/ServicesPreferenceScreen.tsx
@@ -1,13 +1,12 @@
-import { ContentWrapper, VSpacer } from "@pagopa/io-app-design-system";
+import { ContentWrapper, VSpacer, IOToast } from "@pagopa/io-app-design-system";
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import * as React from "react";
-import { connect } from "react-redux";
+import React, { ReactElement, useCallback, useEffect } from "react";
+import { useStore } from "react-redux";
 import { ServicesPreferencesModeEnum } from "../../../definitions/backend/ServicesPreferencesMode";
-import { withLoadingSpinner } from "../../components/helpers/withLoadingSpinner";
+import LoadingSpinnerOverlay from "../../components/LoadingSpinnerOverlay";
 import { RNavScreenWithLargeHeader } from "../../components/ui/RNavScreenWithLargeHeader";
 import I18n from "../../i18n";
 import { profileUpsert } from "../../store/actions/profile";
-import { Dispatch } from "../../store/actions/types";
 import {
   profileSelector,
   profileServicePreferencesModeSelector
@@ -15,7 +14,8 @@ import {
 import { GlobalState } from "../../store/reducers/types";
 import { getFlowType } from "../../utils/analytics";
 import { useOnFirstRender } from "../../utils/hooks/useOnFirstRender";
-import { showToast } from "../../utils/showToast";
+import { useIODispatch, useIOSelector } from "../../store/hooks";
+import { usePrevious } from "../../utils/hooks/usePrevious";
 import {
   trackServiceConfiguration,
   trackServiceConfigurationScreen
@@ -23,90 +23,106 @@ import {
 import { useManualConfigBottomSheet } from "./components/services/ManualConfigBottomSheet";
 import ServicesContactComponent from "./components/services/ServicesContactComponent";
 
-type Props = ReturnType<typeof mapStateToProps> &
-  ReturnType<typeof mapDispatchToProps>;
-
 /**
  * Display the current profile services preference mode (auto or manual)
  * User can update his/her mode
  * @param props
  * @constructor
  */
-const ServicesPreferenceScreen = (props: Props): React.ReactElement => {
-  const { potProfile, state } = props;
+const ServicesPreferenceScreen = (): ReactElement => {
+  const store = useStore();
+  const state = store.getState();
+  const dispatch = useIODispatch();
+  const profile = useIOSelector(profileSelector);
+  const prevProfile = usePrevious(profile);
+  const isLoading = pot.isUpdating(profile) || pot.isLoading(profile);
+  const profileServicePreferenceMode = useIOSelector(
+    profileServicePreferencesModeSelector
+  );
+  const prevMode = usePrevious(profileServicePreferenceMode);
+
+  const dispatchServicePreferencesSetting = useCallback(
+    (mode: ServicesPreferencesModeEnum) =>
+      dispatch(
+        profileUpsert.request({ service_preferences_settings: { mode } })
+      ),
+    [dispatch]
+  );
+
+  const onServicePreferenceSelected = useCallback(
+    (mode: ServicesPreferencesModeEnum, state: GlobalState) => {
+      void trackServiceConfiguration(mode, getFlowType(false, false), state);
+      dispatchServicePreferencesSetting(mode);
+    },
+    [dispatchServicePreferencesSetting]
+  );
+
   const { present: confirmManualConfig, manualConfigBottomSheet } =
     useManualConfigBottomSheet(() =>
-      props.onServicePreferenceSelected(
-        ServicesPreferencesModeEnum.MANUAL,
-        state
-      )
+      onServicePreferenceSelected(ServicesPreferencesModeEnum.MANUAL, state)
     );
 
   useOnFirstRender(() => {
     trackServiceConfigurationScreen(getFlowType(false, false));
   });
 
-  const [prevPotProfile, setPrevPotProfile] = React.useState<
-    typeof props.potProfile
-  >(props.potProfile);
-  React.useEffect(() => {
+  useEffect(() => {
     // show error toast only when the profile updating fails
-    // otherwise, if the profile is in error state, the toast will be shown immediately without any updates
-    if (!pot.isError(prevPotProfile) && pot.isError(potProfile)) {
-      showToast(I18n.t("global.genericError"));
-    }
-
-    setPrevPotProfile(potProfile);
-  }, [potProfile, prevPotProfile]);
-
-  const handleOnSelectMode = (mode: ServicesPreferencesModeEnum) => {
-    // if user's choice is 'manual', open bottom sheet to ask confirmation
-    if (mode === ServicesPreferencesModeEnum.MANUAL) {
-      confirmManualConfig();
+    // otherwise, if the profile is in error state,
+    // the toast will be shown immediately without any updates
+    if (prevProfile && !pot.isError(prevProfile) && pot.isError(profile)) {
+      IOToast.error(I18n.t("global.genericError"));
       return;
     }
-    props.onServicePreferenceSelected(mode, state);
-  };
+    // if profile preferences are updated correctly
+    // the button is selected
+    // and the success banner is shown
+    if (
+      prevProfile &&
+      pot.isUpdating(prevProfile) &&
+      pot.isSome(profile) &&
+      prevMode !== profileServicePreferenceMode
+    ) {
+      IOToast.success(
+        profileServicePreferenceMode === ServicesPreferencesModeEnum.MANUAL
+          ? I18n.t("services.optIn.preferences.manualConfig.successAlert")
+          : I18n.t("services.optIn.preferences.quickConfig.successAlert")
+      );
+    }
+  }, [profile, prevProfile, profileServicePreferenceMode, prevMode]);
 
-  return (
-    <RNavScreenWithLargeHeader
-      title={I18n.t("services.optIn.preferences.title")}
-      description={I18n.t("services.optIn.preferences.body")}
-      headerActionsProp={{ showHelp: true }}
-    >
-      <VSpacer size={16} />
-      <ContentWrapper>
-        <ServicesContactComponent
-          onSelectMode={handleOnSelectMode}
-          mode={props.profileServicePreferenceMode}
-        />
-      </ContentWrapper>
-      {manualConfigBottomSheet}
-    </RNavScreenWithLargeHeader>
+  const handleOnSelectMode = useCallback(
+    (mode: ServicesPreferencesModeEnum) => {
+      // if user's choice is 'manual', open bottom sheet to ask confirmation
+      if (mode === ServicesPreferencesModeEnum.MANUAL) {
+        confirmManualConfig();
+        return;
+      }
+      onServicePreferenceSelected(mode, state);
+    },
+    [confirmManualConfig, onServicePreferenceSelected, state]
   );
-};
 
-const mapStateToProps = (state: GlobalState) => {
-  const profile = profileSelector(state);
-  return {
-    isLoading: pot.isUpdating(profile) || pot.isLoading(profile),
-    potProfile: profile,
-    profileServicePreferenceMode: profileServicePreferencesModeSelector(state),
-    state
-  };
+  return (
+    <LoadingSpinnerOverlay isLoading={isLoading}>
+      <RNavScreenWithLargeHeader
+        title={{
+          label: I18n.t("services.optIn.preferences.title")
+        }}
+        description={I18n.t("services.optIn.preferences.body")}
+        headerActionsProp={{ showHelp: true }}
+      >
+        <VSpacer size={16} />
+        <ContentWrapper>
+          <ServicesContactComponent
+            onSelectMode={handleOnSelectMode}
+            mode={profileServicePreferenceMode}
+          />
+        </ContentWrapper>
+        {manualConfigBottomSheet}
+      </RNavScreenWithLargeHeader>
+    </LoadingSpinnerOverlay>
+  );
 };
 
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  onServicePreferenceSelected: (
-    mode: ServicesPreferencesModeEnum,
-    state: GlobalState
-  ) => {
-    void trackServiceConfiguration(mode, getFlowType(false, false), state);
-    dispatch(profileUpsert.request({ service_preferences_settings: { mode } }));
-  }
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withLoadingSpinner(ServicesPreferenceScreen));
+export default ServicesPreferenceScreen;
diff --git a/ts/screens/profile/ShareDataScreen.tsx b/ts/screens/profile/ShareDataScreen.tsx
index 1c611526cde..87cd751c096 100644
--- a/ts/screens/profile/ShareDataScreen.tsx
+++ b/ts/screens/profile/ShareDataScreen.tsx
@@ -1,12 +1,12 @@
 import {
   BlockButtonProps,
+  IOToast,
   FooterWithButtons
 } from "@pagopa/io-app-design-system";
 import * as React from "react";
 import { SafeAreaView, View } from "react-native";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
-import { IOToast } from "../../components/Toast";
 import { IOStyles } from "../../components/core/variables/IOStyles";
 import { RNavScreenWithLargeHeader } from "../../components/ui/RNavScreenWithLargeHeader";
 import I18n from "../../i18n";
@@ -77,8 +77,10 @@ const ShareDataScreen = (props: Props): React.ReactElement => {
 
   return (
     <RNavScreenWithLargeHeader
-      title={I18n.t("profile.main.privacy.shareData.screen.title")}
-      titleTestID={"share-data-component-title"}
+      title={{
+        label: I18n.t("profile.main.privacy.shareData.screen.title"),
+        testID: "share-data-component-title"
+      }}
       description={I18n.t("profile.main.privacy.shareData.screen.description")}
       fixedBottomSlot={
         <FooterWithButtons type="SingleButton" primary={buttonProps} />
diff --git a/ts/screens/profile/WebPlayground.tsx b/ts/screens/profile/WebPlayground.tsx
index 23fa72b394c..cf6cdb08f92 100644
--- a/ts/screens/profile/WebPlayground.tsx
+++ b/ts/screens/profile/WebPlayground.tsx
@@ -1,27 +1,46 @@
-import { Content } from "native-base";
-import URLParse from "url-parse";
+import {
+  ButtonOutline,
+  ButtonSolid,
+  Divider,
+  HSpacer,
+  IOColors,
+  IOStyles,
+  IOVisualCostants,
+  IconButtonContained,
+  ListItemSwitch,
+  VSpacer,
+  IOToast
+} from "@pagopa/io-app-design-system";
+import CookieManager, { Cookie } from "@react-native-cookies/cookies";
 import * as React from "react";
-import { View, SafeAreaView, StyleSheet, TextInput } from "react-native";
+import {
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  TextInput,
+  View
+} from "react-native";
 import { connect } from "react-redux";
-import CookieManager, { Cookie } from "@react-native-cookies/cookies";
-import { Icon, HSpacer, VSpacer } from "@pagopa/io-app-design-system";
-import { Label } from "../../components/core/typography/Label";
-import BaseScreenComponent from "../../components/screens/BaseScreenComponent";
-import Switch from "../../components/ui/Switch";
-import { Monospace } from "../../components/core/typography/Monospace";
+import URLParse from "url-parse";
+import { LabelledItem } from "../../components/LabelledItem";
 import RegionServiceWebView from "../../components/RegionServiceWebView";
-import { Dispatch } from "../../store/actions/types";
+import { Monospace } from "../../components/core/typography/Monospace";
+import { useHeaderSecondLevel } from "../../hooks/useHeaderSecondLevel";
 import { navigateBack } from "../../store/actions/navigation";
-import ButtonDefaultOpacity from "../../components/ButtonDefaultOpacity";
-import { LabelledItem } from "../../components/LabelledItem";
-import { showToast } from "../../utils/showToast";
+import { Dispatch } from "../../store/actions/types";
 
 type Props = ReturnType<typeof mapDispatchToProps>;
 
 const styles = StyleSheet.create({
   flex: { flex: 1 },
-  textInput: { flex: 1, padding: 1, borderWidth: 1, height: 30 },
-  contentCenter: { justifyContent: "center" },
+  textInput: {
+    flex: 1,
+    padding: 8,
+    borderWidth: 1,
+    borderRadius: 8,
+    borderColor: IOColors["grey-450"],
+    height: 40
+  },
   row: {
     flexDirection: "row",
     justifyContent: "space-between",
@@ -39,9 +58,13 @@ const WebPlayground: React.FunctionComponent<Props> = (props: Props) => {
   const [saveCookie, setSaveCookie] = React.useState(false);
   const [reloadKey, setReloadKey] = React.useState(0);
 
+  useHeaderSecondLevel({
+    title: "MyPortal Web"
+  });
+
   const setCookieOnDomain = () => {
     if (loadUri === "") {
-      showToast("Missing domain");
+      IOToast.info("Missing domain");
       return;
     }
     const url = new URLParse(loadUri, true);
@@ -55,15 +78,15 @@ const WebPlayground: React.FunctionComponent<Props> = (props: Props) => {
 
     CookieManager.set(url.origin, cookie, true)
       .then(_ => {
-        showToast("cookie correctly set", "success");
+        IOToast.success("cookie correctly set");
       })
-      .catch(_ => showToast("Unable to set Cookie"));
+      .catch(_ => IOToast.error("Unable to set Cookie"));
   };
 
   const clearCookies = () => {
     CookieManager.clearAll(true)
-      .then(() => showToast("Cookies cleared", "success"))
-      .catch(_ => showToast("Unable to remove Cookies"));
+      .then(() => IOToast.success("Cookies cleared"))
+      .catch(_ => IOToast.error("Unable to remove Cookies"));
   };
 
   const handleUriInput = (text: string) => {
@@ -71,88 +94,91 @@ const WebPlayground: React.FunctionComponent<Props> = (props: Props) => {
   };
 
   return (
-    <BaseScreenComponent goBack={true}>
-      <SafeAreaView style={styles.flex}>
-        <Content contentContainerStyle={styles.flex}>
-          <View style={styles.row}>
-            <TextInput
-              style={styles.textInput}
-              onChangeText={handleUriInput}
-              value={navigationURI}
-            />
-            <HSpacer size={16} />
-            <ButtonDefaultOpacity
-              style={styles.contentCenter}
-              onPress={() => setLoadUri(navigationURI)}
-            >
-              <Icon name="chevronRight" size={24} color="white" />
-            </ButtonDefaultOpacity>
-          </View>
-          <VSpacer size={16} />
-          <View style={styles.row}>
-            <ButtonDefaultOpacity
-              style={styles.contentCenter}
-              onPress={() => setReloadKey(r => r + 1)}
-            >
-              <Label color={"white"}>Reload</Label>
-            </ButtonDefaultOpacity>
-            <ButtonDefaultOpacity
-              style={styles.contentCenter}
-              onPress={clearCookies}
-            >
-              <Label color={"white"}>Clear cookies</Label>
-            </ButtonDefaultOpacity>
-          </View>
-          <VSpacer size={16} />
-          <View style={styles.row}>
-            <Label color={"bluegrey"}>{"Show debug"}</Label>
-            <Switch value={showDebug} onValueChange={setShowDebug} />
-          </View>
-          <VSpacer size={16} />
-          <View style={styles.row}>
-            <Label color={"bluegrey"}>{"Save a cookie"}</Label>
-            <Switch value={saveCookie} onValueChange={setSaveCookie} />
-          </View>
-          <VSpacer size={16} />
-          <View style={{ flex: 1 }}>
-            {saveCookie && (
-              <>
-                <LabelledItem
-                  label={"Cookie name"}
-                  inputProps={{
-                    value: cookieName,
-                    returnKeyType: "done",
-                    onChangeText: setCookieName
-                  }}
-                />
-                <LabelledItem
-                  label={"Cookie value"}
-                  inputProps={{
-                    value: cookieValue,
-                    returnKeyType: "done",
-                    onChangeText: setCookieValue
-                  }}
-                />
-                <VSpacer size={8} />
-                <ButtonDefaultOpacity
-                  style={styles.contentCenter}
-                  onPress={() => setCookieOnDomain()}
-                >
-                  <Label color={"white"}>Save</Label>
-                </ButtonDefaultOpacity>
-              </>
-            )}
-            {showDebug && <Monospace>{webMessage}</Monospace>}
-            <RegionServiceWebView
-              key={`${reloadKey}_webview`}
-              uri={loadUri}
-              onWebviewClose={props.goBack}
-              handleWebMessage={setWebMessage}
-            />
-          </View>
-        </Content>
-      </SafeAreaView>
-    </BaseScreenComponent>
+    <SafeAreaView style={styles.flex}>
+      <ScrollView
+        contentContainerStyle={[
+          { paddingHorizontal: IOVisualCostants.appMarginDefault },
+          IOStyles.flex
+        ]}
+      >
+        <View style={styles.row}>
+          <TextInput
+            style={styles.textInput}
+            onChangeText={handleUriInput}
+            value={navigationURI}
+          />
+          <HSpacer size={16} />
+          <IconButtonContained
+            onPress={() => setLoadUri(navigationURI)}
+            icon="arrowRight"
+            accessibilityLabel={"Imposta la pagina web"}
+          />
+        </View>
+        <VSpacer size={8} />
+        <View style={styles.row}>
+          <ButtonSolid
+            onPress={() => setReloadKey(r => r + 1)}
+            icon="reload"
+            label="Reload"
+            accessibilityLabel={"Reload"}
+          />
+          <ButtonOutline
+            onPress={clearCookies}
+            label="Clear cookies"
+            accessibilityLabel="Clear cookies"
+          />
+        </View>
+        <VSpacer size={8} />
+
+        <ListItemSwitch
+          label="Show debug"
+          value={showDebug}
+          onSwitchValueChange={setShowDebug}
+        />
+        <Divider />
+        <ListItemSwitch
+          label="Save a cookie"
+          value={saveCookie}
+          onSwitchValueChange={setSaveCookie}
+        />
+        <View style={{ flex: 1 }}>
+          {saveCookie && (
+            <>
+              <LabelledItem
+                label={"Cookie name"}
+                inputProps={{
+                  value: cookieName,
+                  returnKeyType: "done",
+                  onChangeText: setCookieName
+                }}
+              />
+              <LabelledItem
+                label={"Cookie value"}
+                inputProps={{
+                  value: cookieValue,
+                  returnKeyType: "done",
+                  onChangeText: setCookieValue
+                }}
+              />
+              <VSpacer size={8} />
+              <ButtonSolid
+                onPress={() => setCookieOnDomain()}
+                label="Save"
+                accessibilityLabel={"Save"}
+              />
+              <VSpacer size={8} />
+            </>
+          )}
+          {showDebug && <Monospace>{webMessage}</Monospace>}
+          <RegionServiceWebView
+            key={`${reloadKey}_webview`}
+            uri={loadUri}
+            onWebviewClose={props.goBack}
+            handleWebMessage={setWebMessage}
+          />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
   );
 };
 
diff --git a/ts/screens/profile/__test__/ProfileDataScreen.test.tsx b/ts/screens/profile/__test__/ProfileDataScreen.test.tsx
index 1e5079258f6..0cb5d60ac31 100644
--- a/ts/screens/profile/__test__/ProfileDataScreen.test.tsx
+++ b/ts/screens/profile/__test__/ProfileDataScreen.test.tsx
@@ -1,8 +1,8 @@
-import { fireEvent } from "@testing-library/react-native";
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import React from "react";
 import configureMockStore from "redux-mock-store";
+import { fireEvent } from "@testing-library/react-native";
 import I18n from "../../../i18n";
 import ROUTES from "../../../navigation/routes";
 import { applicationChangeState } from "../../../store/actions/application";
diff --git a/ts/screens/profile/analytics/index.ts b/ts/screens/profile/analytics/index.ts
index 3103dc1e336..ec450dc03ae 100644
--- a/ts/screens/profile/analytics/index.ts
+++ b/ts/screens/profile/analytics/index.ts
@@ -9,7 +9,20 @@ import { FlowType, buildEventProperties } from "../../../utils/analytics";
 export async function trackProfileLoadSuccess(state: GlobalState) {
   await updateMixpanelSuperProperties(state);
   await updateMixpanelProfileProperties(state);
-  await mixpanelTrack(profileLoadSuccess.toString());
+  mixpanelTrack(profileLoadSuccess.toString());
+}
+
+export function trackIdpAuthenticationSuccessScreen(idpId: string | undefined) {
+  void mixpanelTrack("IDENTIFICATION_CONFIRM_SCREEN", {
+    idp: idpId,
+    ...buildEventProperties("UX", "screen_view")
+  });
+}
+export function trackIngressScreen() {
+  void mixpanelTrack(
+    "INITIALIZATION_LOADING",
+    buildEventProperties("UX", "screen_view")
+  );
 }
 
 export function trackTosScreen(flow: FlowType) {
@@ -74,7 +87,7 @@ export async function trackTosAccepted(
     property: "TOS_ACCEPTED_VERSION",
     value: acceptedTosVersion
   });
-  await mixpanelTrack(
+  mixpanelTrack(
     "TOS_ACCEPTED",
     buildEventProperties(
       "UX",
@@ -139,7 +152,7 @@ export async function trackServiceConfiguration(
     property: "SERVICE_CONFIGURATION",
     value: mode
   });
-  await mixpanelTrack(
+  mixpanelTrack(
     "SERVICE_PREFERENCE_CONFIGURATION",
     buildEventProperties(
       "UX",
@@ -194,7 +207,7 @@ export async function trackNotificationPreferenceConfiguration(
     property: "NOTIFICATION_CONFIGURATION",
     value: configuration
   });
-  await mixpanelTrack(
+  mixpanelTrack(
     "NOTIFICATION_PREFERENCE_CONFIGURATION",
     buildEventProperties(
       "UX",
diff --git a/ts/screens/profile/components/CountdownComponent.tsx b/ts/screens/profile/components/CountdownComponent.tsx
new file mode 100644
index 00000000000..cca5dcef7fb
--- /dev/null
+++ b/ts/screens/profile/components/CountdownComponent.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { View } from "react-native";
+import { Body, IOStyles, VSpacer } from "@pagopa/io-app-design-system";
+import { useCountdown } from "../../../components/countdown/CountdownProvider";
+import I18n from "../../../i18n";
+import { ProgressIndicator } from "../../../components/ui/ProgressIndicator";
+
+type CountdownProps = {
+  visible: boolean;
+  onContdownCompleted?: () => void;
+};
+
+const Countdown = (props: CountdownProps) => {
+  const { visible } = props;
+  const { timerCount, resetTimer, startTimer, isRunning } = useCountdown();
+
+  if (timerCount === 0 && props.onContdownCompleted) {
+    props.onContdownCompleted();
+  }
+
+  if (!visible) {
+    if (resetTimer) {
+      resetTimer();
+    }
+
+    return null;
+  } else if (startTimer && isRunning && !isRunning()) {
+    startTimer();
+  }
+
+  if (visible) {
+    return (
+      <View style={IOStyles.alignCenter}>
+        <VSpacer size={24} />
+        <ProgressIndicator progress={(timerCount / 60) * 100} />
+        <VSpacer size={8} />
+        <Body weight="Regular" style={{ textAlign: "center" }} color="black">
+          {I18n.t("email.newvalidate.countdowntext")}{" "}
+          <Body weight="SemiBold" color="black">
+            {timerCount}s
+          </Body>
+        </Body>
+      </View>
+    );
+  }
+  return null;
+};
+export default Countdown;
diff --git a/ts/screens/profile/components/ShareDataComponent.tsx b/ts/screens/profile/components/ShareDataComponent.tsx
index 7c6c4719c0c..61f3975bb51 100644
--- a/ts/screens/profile/components/ShareDataComponent.tsx
+++ b/ts/screens/profile/components/ShareDataComponent.tsx
@@ -4,7 +4,7 @@ import { InfoBox } from "../../../components/box/InfoBox";
 import { Body } from "../../../components/core/typography/Body";
 import { Label } from "../../../components/core/typography/Label";
 import { Link } from "../../../components/core/typography/Link";
-import Markdown from "../../../components/ui/Markdown";
+import LegacyMarkdown from "../../../components/ui/Markdown/LegacyMarkdown";
 import { privacyUrl } from "../../../config";
 import I18n from "../../../i18n";
 import { ioSuppliersUrl } from "../../../urls";
@@ -18,7 +18,7 @@ type MarkdownProps = {
 const MarkdownBody = (props: MarkdownProps): React.ReactElement => (
   <>
     <VSpacer size={16} />
-    <Markdown avoidTextSelection={true}>{props.body}</Markdown>
+    <LegacyMarkdown avoidTextSelection={true}>{props.body}</LegacyMarkdown>
   </>
 );
 
diff --git a/ts/screens/profile/components/services/ManualConfigBottomSheet.tsx b/ts/screens/profile/components/services/ManualConfigBottomSheet.tsx
index 0ce64301235..7d6d8ffc0e5 100644
--- a/ts/screens/profile/components/services/ManualConfigBottomSheet.tsx
+++ b/ts/screens/profile/components/services/ManualConfigBottomSheet.tsx
@@ -1,20 +1,17 @@
 import * as React from "react";
-import { VSpacer } from "@pagopa/io-app-design-system";
-import FooterWithButtons from "../../../../components/ui/FooterWithButtons";
-import {
-  cancelButtonProps,
-  errorButtonProps
-} from "../../../../components/buttons/ButtonConfigurations";
-import Markdown from "../../../../components/ui/Markdown";
+import { VSpacer, FooterWithButtons } from "@pagopa/io-app-design-system";
+import LegacyMarkdown from "../../../../components/ui/Markdown/LegacyMarkdown";
 import I18n from "../../../../i18n";
-import { useLegacyIOBottomSheetModal } from "../../../../utils/hooks/bottomSheet";
+import { useIOBottomSheetAutoresizableModal } from "../../../../utils/hooks/bottomSheet";
+
+const SNAP_POINT_VALUE = 250;
 
 const ManualConfigConfirm = (): React.ReactElement => (
   <>
     <VSpacer size={16} />
-    <Markdown>
+    <LegacyMarkdown>
       {I18n.t("services.optIn.preferences.manualConfig.bottomSheet.body")}
-    </Markdown>
+    </LegacyMarkdown>
   </>
 );
 
@@ -23,24 +20,40 @@ export const useManualConfigBottomSheet = (onConfirm: () => void) => {
     present,
     bottomSheet: manualConfigBottomSheet,
     dismiss
-  } = useLegacyIOBottomSheetModal(
-    <ManualConfigConfirm />,
-    I18n.t("services.optIn.preferences.manualConfig.bottomSheet.title"),
-    350,
-    <FooterWithButtons
-      type={"TwoButtonsInlineHalf"}
-      leftButton={{
-        ...cancelButtonProps(() => dismiss()),
-        onPressWithGestureHandler: true
-      }}
-      rightButton={{
-        ...errorButtonProps(() => {
-          onConfirm();
-          dismiss();
-        }),
-        onPressWithGestureHandler: true
-      }}
-    />
+  } = useIOBottomSheetAutoresizableModal(
+    {
+      title: I18n.t(
+        "services.optIn.preferences.manualConfig.bottomSheet.title"
+      ),
+      component: <ManualConfigConfirm />,
+      fullScreen: true,
+      footer: (
+        <FooterWithButtons
+          type="TwoButtonsInlineHalf"
+          primary={{
+            type: "Outline",
+            buttonProps: {
+              label: I18n.t("global.buttons.cancel"),
+              onPress: () => dismiss(),
+              accessibilityLabel: I18n.t("global.buttons.cancel")
+            }
+          }}
+          secondary={{
+            type: "Solid",
+            buttonProps: {
+              color: "danger",
+              label: I18n.t("global.buttons.confirm"),
+              accessibilityLabel: I18n.t("global.buttons.confirm"),
+              onPress: () => {
+                onConfirm();
+                dismiss();
+              }
+            }
+          }}
+        />
+      )
+    },
+    SNAP_POINT_VALUE
   );
 
   return { present, manualConfigBottomSheet, dismiss };
diff --git a/ts/screens/profile/components/services/ServicesContactComponent.tsx b/ts/screens/profile/components/services/ServicesContactComponent.tsx
index aee99302fc5..5b440c42879 100644
--- a/ts/screens/profile/components/services/ServicesContactComponent.tsx
+++ b/ts/screens/profile/components/services/ServicesContactComponent.tsx
@@ -1,114 +1,74 @@
-import { HSpacer, Icon, VSpacer } from "@pagopa/io-app-design-system";
-import { constNull } from "fp-ts/lib/function";
-import * as React from "react";
-import { FlatList, ListRenderItemInfo, View } from "react-native";
-import { connect } from "react-redux";
+import React, { ReactElement, useCallback, useEffect, useState } from "react";
+import { IOColors, LabelSmall, RadioGroup } from "@pagopa/io-app-design-system";
+import { Text } from "react-native";
 import { ServicesPreferencesModeEnum } from "../../../../../definitions/backend/ServicesPreferencesMode";
-import ItemSeparatorComponent from "../../../../components/ItemSeparatorComponent";
-import TouchableDefaultOpacity from "../../../../components/TouchableDefaultOpacity";
-import { IOBadge } from "../../../../components/core/IOBadge";
-import { H4 } from "../../../../components/core/typography/H4";
-import { H5 } from "../../../../components/core/typography/H5";
-import { IOStyles } from "../../../../components/core/variables/IOStyles";
 import I18n from "../../../../i18n";
-import { Dispatch } from "../../../../store/actions/types";
-import { GlobalState } from "../../../../store/reducers/types";
+import { usePrevious } from "../../../../utils/hooks/usePrevious";
 
 type Props = {
   onSelectMode: (mode: ServicesPreferencesModeEnum) => void;
   mode?: ServicesPreferencesModeEnum;
   showBadge?: boolean;
-} & ReturnType<typeof mapStateToProps> &
-  ReturnType<typeof mapDispatchToProps>;
-
-type ContactOption = {
-  title: string;
-  mode: ServicesPreferencesModeEnum;
-  description1: string;
-  description2?: string;
 };
 
-const options = (): ReadonlyArray<ContactOption> => [
-  {
-    title: I18n.t("services.optIn.preferences.quickConfig.title"),
-    mode: ServicesPreferencesModeEnum.AUTO,
-    description1: I18n.t("services.optIn.preferences.quickConfig.body.text1"),
-    description2: I18n.t("services.optIn.preferences.quickConfig.body.text2")
-  },
-  {
-    title: I18n.t("services.optIn.preferences.manualConfig.title"),
-    mode: ServicesPreferencesModeEnum.MANUAL,
-    description1: I18n.t("services.optIn.preferences.manualConfig.body.text1")
-  }
-];
+const ServicesContactComponent = (props: Props): ReactElement => {
+  // We put the options inside the component to handle translations
+  // when the language changes,
+  // or is different between the device and the app.
+  const options = [
+    {
+      value: I18n.t("services.optIn.preferences.quickConfig.title"),
+      id: ServicesPreferencesModeEnum.AUTO,
+      description: (
+        <LabelSmall color="grey-700" weight="Regular">
+          {I18n.t("services.optIn.preferences.quickConfig.body.text1")}{" "}
+          <Text style={{ color: IOColors["grey-700"], fontWeight: "600" }}>
+            {I18n.t("services.optIn.preferences.quickConfig.body.text2")}
+          </Text>
+        </LabelSmall>
+      )
+    },
+    {
+      value: I18n.t("services.optIn.preferences.manualConfig.title"),
+      id: ServicesPreferencesModeEnum.MANUAL,
+      description: I18n.t("services.optIn.preferences.manualConfig.body.text1")
+    }
+  ];
+
+  const { mode, onSelectMode } = props;
+  const [selectedItem, setSelectedItem] = useState(mode);
+  const prevMode = usePrevious(mode);
+
+  const handlePress = useCallback(
+    (value: any) => {
+      // if the selected mode is the same,
+      // it does not have to do anything,
+      // otherwise it would re-run the POST /profile
+      if (mode !== value) {
+        onSelectMode(value);
+      }
+    },
+    [mode, onSelectMode]
+  );
 
-const ServicesContactComponent = (props: Props): React.ReactElement => {
-  const renderListItem = ({ item }: ListRenderItemInfo<ContactOption>) => {
-    const isSelected = item.mode === props.mode;
-    return (
-      <>
-        <TouchableDefaultOpacity
-          style={[
-            IOStyles.row,
-            {
-              justifyContent: "space-between"
-            }
-          ]}
-          accessibilityRole={"radio"}
-          accessibilityState={{ checked: isSelected }}
-          onPress={
-            // do nothing if it is the current mode set
-            isSelected ? constNull : () => props.onSelectMode(item.mode)
-          }
-        >
-          <View style={IOStyles.flex}>
-            {props.showBadge &&
-              item.mode === ServicesPreferencesModeEnum.AUTO && (
-                <IOBadge
-                  small
-                  variant="solid"
-                  color="blue"
-                  text={I18n.t("services.optIn.preferences.oldUsersBadge")}
-                />
-              )}
-            <H4>{item.title}</H4>
-            <H5 weight={"Regular"}>
-              {item.description1}
-              {item.description2 && <H5>{`\n${item.description2}`}</H5>}
-            </H5>
-          </View>
-          <HSpacer size={24} />
-          <View style={{ alignSelf: "flex-start" }}>
-            <Icon
-              name={isSelected ? "legRadioOn" : "legRadioOff"}
-              color="blue"
-              size={24}
-            />
-          </View>
-        </TouchableDefaultOpacity>
-        <VSpacer size={16} />
-        <ItemSeparatorComponent noPadded />
-        <VSpacer size={16} />
-      </>
-    );
-  };
+  useEffect(() => {
+    if (mode !== prevMode) {
+      // in case "MANUAL" if the user confirms that he
+      // wants to use the MANUAL MODE after being
+      // shown the bottomsheet then the data is selected
+      // else the other option remains selected
+      setSelectedItem(mode);
+    }
+  }, [mode, prevMode]);
 
   return (
-    <FlatList
-      style={{ flexGrow: 0 }}
-      scrollEnabled={false}
-      data={options()}
-      renderItem={renderListItem}
-      keyExtractor={o => o.mode}
+    <RadioGroup<string>
+      type="radioListItem"
+      items={options}
+      selectedItem={selectedItem}
+      onPress={handlePress}
     />
   );
 };
 
-const mapStateToProps = (_: GlobalState) => ({});
-
-const mapDispatchToProps = (_: Dispatch) => ({});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ServicesContactComponent);
+export default ServicesContactComponent;
diff --git a/ts/screens/profile/mailCheck/EmailAlreadyTakenScreen.tsx b/ts/screens/profile/mailCheck/EmailAlreadyTakenScreen.tsx
index 3b0fe9fe066..0275f886944 100644
--- a/ts/screens/profile/mailCheck/EmailAlreadyTakenScreen.tsx
+++ b/ts/screens/profile/mailCheck/EmailAlreadyTakenScreen.tsx
@@ -1,104 +1,114 @@
-import * as React from "react";
-import { View, SafeAreaView, StyleSheet } from "react-native";
-import { Pictogram, VSpacer } from "@pagopa/io-app-design-system";
+import React, { useCallback, useMemo } from "react";
 import * as O from "fp-ts/lib/Option";
+import { Route, useRoute } from "@react-navigation/native";
 import I18n from "../../../i18n";
-import { Body } from "../../../components/core/typography/Body";
-import { H3 } from "../../../components/core/typography/H3";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
-import themeVariables from "../../../theme/variables";
-import FooterWithButtons from "../../../components/ui/FooterWithButtons";
-import BaseScreenComponent from "../../../components/screens/BaseScreenComponent";
-import { CheckEmailParamsList } from "../../../navigation/params/CheckEmailParamsList";
-import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
-import NavigationService from "../../../navigation/NavigationService";
+import { ContextualHelpPropsMarkdown } from "../../../components/screens/BaseScreenComponent";
+import { useIONavigation } from "../../../navigation/params/AppParamsList";
 import ROUTES from "../../../navigation/routes";
-import { useIODispatch } from "../../../store/hooks";
+import { useIODispatch, useIOSelector } from "../../../store/hooks";
 import { acknowledgeOnEmailValidation } from "../../../store/actions/profile";
+import { useOnFirstRender } from "../../../utils/hooks/useOnFirstRender";
+import {
+  trackEmailAlreadyTaken,
+  trackEmailDuplicateEditingConfirm
+} from "../../analytics/emailAnalytics";
 
-const styles = StyleSheet.create({
-  mainContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    padding: themeVariables.contentPaddingLarge
-  },
-  title: {
-    textAlign: "center"
-  }
-});
+import { isProfileFirstOnBoardingSelector } from "../../../store/reducers/profile";
+import { getFlowType } from "../../../utils/analytics";
+import {
+  BodyProps,
+  OperationResultScreenContent
+} from "../../../components/screens/OperationResultScreenContent";
+import { useHeaderSecondLevel } from "../../../hooks/useHeaderSecondLevel";
 
 export type OnboardingServicesPreferenceScreenNavigationParams = {
   isFirstOnboarding: boolean;
 };
-type Props = IOStackNavigationRouteProps<
-  CheckEmailParamsList,
-  "CHECK_EMAIL_ALREADY_TAKEN"
->;
 
 export type EmailAlreadyUsedScreenParamList = {
   email: string;
 };
 
-const navigateToInsertEmailScreen = () => {
-  NavigationService.navigate(ROUTES.ONBOARDING, {
-    screen: ROUTES.ONBOARDING_READ_EMAIL_SCREEN
-  });
+const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
+  title: "email.cduScreens.emailAlreadyTaken.title",
+  body: "email.cduScreens.emailAlreadyTaken.help.body"
 };
 
-const EmailAlreadyTakenScreen = (props: Props) => {
-  const { email } = props.route.params;
+const EmailAlreadyTakenScreen = () => {
+  const { email } =
+    useRoute<
+      Route<"CHECK_EMAIL_ALREADY_TAKEN", EmailAlreadyUsedScreenParamList>
+    >().params;
 
   const dispatch = useIODispatch();
+  const navigation = useIONavigation();
+  const isFirstOnBoarding = useIOSelector(isProfileFirstOnBoardingSelector);
+  const flow = getFlowType(true, isFirstOnBoarding);
+  const navigateToInsertEmailScreen = useCallback(() => {
+    navigation.navigate(ROUTES.ONBOARDING, {
+      screen: ROUTES.ONBOARDING_INSERT_EMAIL_SCREEN,
+      params: {
+        isOnboarding: true
+      }
+    });
+  }, [navigation]);
+
+  useOnFirstRender(() => {
+    trackEmailAlreadyTaken(flow);
+  });
 
-  const confirmButtonOnPress = React.useCallback(() => {
+  const confirmButtonOnPress = useCallback(() => {
+    trackEmailDuplicateEditingConfirm(flow);
     dispatch(acknowledgeOnEmailValidation(O.none));
     navigateToInsertEmailScreen();
-  }, [dispatch]);
+  }, [dispatch, flow, navigateToInsertEmailScreen]);
 
-  const continueButtonProps = {
-    onPress: confirmButtonOnPress,
-    title: I18n.t("email.cduScreens.emailAlreadyTaken.editButton"),
-    block: true
-  };
+  const bodyPropsArray: Array<BodyProps> = useMemo(
+    () => [
+      {
+        text: I18n.t("email.cduScreens.emailAlreadyTaken.subtitleStart"),
+        style: {
+          textAlign: "center"
+        }
+      },
+      {
+        text: <> {email} </>,
+        style: {
+          textAlign: "center"
+        },
+        weight: "SemiBold"
+      },
+      {
+        text: I18n.t("email.cduScreens.emailAlreadyTaken.subtitleEnd"),
+        style: {
+          textAlign: "center"
+        }
+      }
+    ],
+    [email]
+  );
+
+  useHeaderSecondLevel({
+    title: "",
+    supportRequest: true,
+    canGoBack: false,
+    contextualHelpMarkdown
+  });
 
   return (
-    <BaseScreenComponent
-      goBack={false}
-      accessibilityEvents={{ avoidNavigationEventsUsage: true }}
-      contextualHelpMarkdown={{
-        title: "email.cduScreens.emailAlreadyTaken.title",
-        body: "email.cduScreens.emailAlreadyTaken.help.body"
+    <OperationResultScreenContent
+      pictogram="accessDenied"
+      title={I18n.t("email.cduScreens.emailAlreadyTaken.title")}
+      subtitle={bodyPropsArray}
+      action={{
+        label: I18n.t("email.cduScreens.emailAlreadyTaken.editButton"),
+        accessibilityLabel: I18n.t(
+          "email.cduScreens.emailAlreadyTaken.editButton"
+        ),
+        onPress: confirmButtonOnPress
       }}
-      headerTitle={I18n.t("email.cduScreens.emailAlreadyTaken.header.title")}
-    >
-      <SafeAreaView style={IOStyles.flex}>
-        <View style={styles.mainContainer}>
-          <Pictogram name={"unrecognized"} size={120} />
-          <VSpacer size={16} />
-          <H3 style={styles.title}>
-            {I18n.t("email.cduScreens.emailAlreadyTaken.title")}
-          </H3>
-          <VSpacer size={16} />
-          <Body style={{ textAlign: "center" }}>
-            <Body style={{ textAlign: "center" }}>
-              {I18n.t("email.cduScreens.emailAlreadyTaken.subtitleStart")}
-            </Body>
-            <Body style={{ textAlign: "center" }} weight="SemiBold">
-              {" "}
-              {" " + email + " "}
-            </Body>
-            <Body style={{ textAlign: "center" }}>
-              {I18n.t("email.cduScreens.emailAlreadyTaken.subtitleEnd")}
-            </Body>
-          </Body>
-        </View>
-        <FooterWithButtons
-          type={"SingleButton"}
-          leftButton={continueButtonProps}
-        />
-      </SafeAreaView>
-    </BaseScreenComponent>
+      isHeaderVisible={true}
+    />
   );
 };
 export default EmailAlreadyTakenScreen;
diff --git a/ts/screens/profile/mailCheck/ValidateEmailScreen.tsx b/ts/screens/profile/mailCheck/ValidateEmailScreen.tsx
index 9ac5b6e87fc..ef3b7cade7e 100644
--- a/ts/screens/profile/mailCheck/ValidateEmailScreen.tsx
+++ b/ts/screens/profile/mailCheck/ValidateEmailScreen.tsx
@@ -1,105 +1,114 @@
-import * as React from "react";
-import { View, SafeAreaView, StyleSheet } from "react-native";
-import { Pictogram, VSpacer } from "@pagopa/io-app-design-system";
+import React, { useMemo, useCallback } from "react";
 import * as O from "fp-ts/lib/Option";
+import { Route, useRoute } from "@react-navigation/native";
 import I18n from "../../../i18n";
-import { Body } from "../../../components/core/typography/Body";
-import { H3 } from "../../../components/core/typography/H3";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
-import themeVariables from "../../../theme/variables";
-import FooterWithButtons from "../../../components/ui/FooterWithButtons";
-import { Link } from "../../../components/core/typography/Link";
-import BaseScreenComponent from "../../../components/screens/BaseScreenComponent";
-import NavigationService from "../../../navigation/NavigationService";
 import ROUTES from "../../../navigation/routes";
-import { useIODispatch } from "../../../store/hooks";
+import { useIODispatch, useIOSelector } from "../../../store/hooks";
 import { acknowledgeOnEmailValidation } from "../../../store/actions/profile";
-import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
-import { CheckEmailParamsList } from "../../../navigation/params/CheckEmailParamsList";
-
-const styles = StyleSheet.create({
-  mainContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    padding: themeVariables.contentPaddingLarge
-  },
-  title: {
-    textAlign: "center"
-  }
-});
+import { useIONavigation } from "../../../navigation/params/AppParamsList";
+import { useOnFirstRender } from "../../../utils/hooks/useOnFirstRender";
+import {
+  trackEmailNotAlreadyConfirmed,
+  trackSendValidationEmail
+} from "../../analytics/emailAnalytics";
+import { getFlowType } from "../../../utils/analytics";
+import { isProfileFirstOnBoardingSelector } from "../../../store/reducers/profile";
+import {
+  BodyProps,
+  OperationResultScreenContent
+} from "../../../components/screens/OperationResultScreenContent";
+import { useHeaderSecondLevel } from "../../../hooks/useHeaderSecondLevel";
+import { ContextualHelpPropsMarkdown } from "../../../components/screens/BaseScreenComponent";
 
 export type EmailNotVerifiedScreenParamList = {
   email: string;
 };
 
-export type Props = IOStackNavigationRouteProps<
-  CheckEmailParamsList,
-  "CHECK_EMAIL_NOT_VERIFIED"
->;
-
-const ValidateEmailScreen = (props: Props) => {
+const ValidateEmailScreen = () => {
   const dispatch = useIODispatch();
-
-  const { email } = props.route.params;
-
-  const navigateToInsertEmailScreen = () => {
-    NavigationService.navigate(ROUTES.ONBOARDING, {
-      screen: ROUTES.ONBOARDING_READ_EMAIL_SCREEN
+  const navigation = useIONavigation();
+  const { email } =
+    useRoute<
+      Route<"CHECK_EMAIL_NOT_VERIFIED", EmailNotVerifiedScreenParamList>
+    >().params;
+  const isFirstOnboarding = useIOSelector(isProfileFirstOnBoardingSelector);
+  const flow = getFlowType(true, isFirstOnboarding);
+  const navigateToInsertEmailScreen = useCallback(() => {
+    navigation.navigate(ROUTES.ONBOARDING, {
+      screen: ROUTES.ONBOARDING_INSERT_EMAIL_SCREEN,
+      params: {
+        isOnboarding: true
+      }
     });
+  }, [navigation]);
+
+  const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
+    title: "email.cduScreens.validateMail.title",
+    body: "email.cduScreens.validateMail.help.body"
   };
 
-  const confirmButtonOnPress = React.useCallback(() => {
+  useOnFirstRender(() => {
+    trackEmailNotAlreadyConfirmed(flow);
+  });
+
+  const confirmButtonOnPress = useCallback(() => {
     // We dispatch this action to show the InsertEmailScreen with
     // the validation modal already opened.
+    trackSendValidationEmail(flow);
     dispatch(acknowledgeOnEmailValidation(O.some(false)));
     navigateToInsertEmailScreen();
-  }, [dispatch]);
+  }, [dispatch, flow, navigateToInsertEmailScreen]);
 
-  const modifyEmailButtonOnPress = React.useCallback(() => {
+  const modifyEmailButtonOnPress = useCallback(() => {
     dispatch(acknowledgeOnEmailValidation(O.none));
     navigateToInsertEmailScreen();
-  }, [dispatch]);
+  }, [dispatch, navigateToInsertEmailScreen]);
 
-  const continueButtonProps = {
-    onPress: confirmButtonOnPress,
-    title: I18n.t("email.cduScreens.validateMail.validateButton"),
-    block: true
-  };
+  const bodyPropsArray: Array<BodyProps> = useMemo(
+    () => [
+      {
+        text: I18n.t("email.cduScreens.validateMail.subtitle"),
+        style: {
+          textAlign: "center"
+        }
+      },
+      {
+        text: <> {email} </>,
+        style: {
+          textAlign: "center"
+        },
+        weight: "SemiBold"
+      }
+    ],
+    [email]
+  );
+
+  useHeaderSecondLevel({
+    title: "",
+    supportRequest: true,
+    contextualHelpMarkdown,
+    canGoBack: false
+  });
 
   return (
-    <BaseScreenComponent
-      goBack={false}
-      accessibilityEvents={{ avoidNavigationEventsUsage: true }}
-      contextualHelpMarkdown={{
-        title: "email.cduScreens.validateMail.title",
-        body: "email.cduScreens.validateMail.help.body"
+    <OperationResultScreenContent
+      pictogram="attention"
+      title={I18n.t("email.cduScreens.validateMail.title")}
+      subtitle={bodyPropsArray}
+      action={{
+        label: I18n.t("email.cduScreens.validateMail.validateButton"),
+        accessibilityLabel: I18n.t(
+          "email.cduScreens.validateMail.validateButton"
+        ),
+        onPress: confirmButtonOnPress
+      }}
+      secondaryAction={{
+        label: I18n.t("email.cduScreens.validateMail.editButton"),
+        accessibilityLabel: I18n.t("email.cduScreens.validateMail.editButton"),
+        onPress: modifyEmailButtonOnPress
       }}
-      headerTitle={I18n.t("email.cduScreens.validateMail.header.title")}
-    >
-      <SafeAreaView style={IOStyles.flex}>
-        <View style={styles.mainContainer}>
-          <Pictogram name={"puzzle"} size={120} />
-          <VSpacer size={16} />
-          <H3 style={styles.title}>
-            {I18n.t("email.cduScreens.validateMail.title")}
-          </H3>
-          <VSpacer size={16} />
-          <Body style={{ textAlign: "center" }}>
-            {I18n.t("email.cduScreens.validateMail.subtitle")}
-          </Body>
-          <Body weight="SemiBold">{email}</Body>
-          <VSpacer size={16} />
-          <Link onPress={modifyEmailButtonOnPress}>
-            {I18n.t("email.cduScreens.validateMail.editButton")}
-          </Link>
-        </View>
-        <FooterWithButtons
-          type={"SingleButton"}
-          leftButton={continueButtonProps}
-        />
-      </SafeAreaView>
-    </BaseScreenComponent>
+      isHeaderVisible={true}
+    />
   );
 };
 export default ValidateEmailScreen;
diff --git a/ts/screens/profile/playgrounds/MarkdownPlayground.tsx b/ts/screens/profile/playgrounds/MarkdownPlayground.tsx
index 6959f1e564e..5ce87e8819d 100644
--- a/ts/screens/profile/playgrounds/MarkdownPlayground.tsx
+++ b/ts/screens/profile/playgrounds/MarkdownPlayground.tsx
@@ -1,38 +1,100 @@
+import {
+  ButtonOutline,
+  ButtonSolid,
+  HSpacer,
+  IOColors,
+  IOVisualCostants,
+  IconButtonSolid,
+  LabelSmallAlt,
+  VSpacer
+} from "@pagopa/io-app-design-system";
 import { useLinkTo } from "@react-navigation/native";
 import * as O from "fp-ts/lib/Option";
-import { Content } from "native-base";
+import I18n from "i18n-js";
 import React, { useCallback } from "react";
-import { View, SafeAreaView, StyleSheet, TextInput } from "react-native";
-import { Icon, HSpacer, VSpacer } from "@pagopa/io-app-design-system";
+import { ScrollView, StyleSheet, TextInput, View } from "react-native";
 import { MessageBodyMarkdown } from "../../../../definitions/backend/MessageBodyMarkdown";
-import ButtonDefaultOpacity from "../../../components/ButtonDefaultOpacity";
-import { Label } from "../../../components/core/typography/Label";
 import { ExtractedCtaButton } from "../../../components/cta/ExtractedCtaButton";
-import BaseScreenComponent from "../../../components/screens/BaseScreenComponent";
-import Markdown from "../../../components/ui/Markdown";
+import LegacyMarkdown from "../../../components/ui/Markdown/LegacyMarkdown";
 import { CTA } from "../../../features/messages/types/MessageCTA";
 import {
   cleanMarkdownFromCTAs,
   getMessageCTA,
   handleCtaAction
 } from "../../../features/messages/utils/messages";
+import { useHeaderSecondLevel } from "../../../hooks/useHeaderSecondLevel";
 import { maybeNotNullyString } from "../../../utils/strings";
 
 const styles = StyleSheet.create({
-  flex: { flex: 1 },
-  textInput: { flex: 1, padding: 1, borderWidth: 1, height: 60 },
+  textInput: {
+    flex: 1,
+    padding: 8,
+    borderWidth: 1,
+    borderRadius: 8,
+    borderColor: IOColors["grey-450"],
+    height: 64
+  },
   row: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center"
   },
-  contentCenter: { justifyContent: "center" }
+  horizontalScroll: {
+    flexShrink: 1,
+    marginLeft: -IOVisualCostants.appMarginDefault,
+    marginRight: -IOVisualCostants.appMarginDefault,
+    paddingHorizontal: IOVisualCostants.appMarginDefault
+  }
 });
 
+const MARKDOWN_REFERENCE = I18n.t("global.markdown.reference");
+
+const MARKDOWN_HEADING = `# I am a Header 1
+
+## I am a Header 2
+
+### I am a Header 3
+
+#### I am a Header 4
+
+##### I am a Header 5
+
+###### I am a Header 6
+`;
+
+const MARKDOWN_PARAGRAPH = `A simple paragraph.
+
+Text can be emphasized with *asterisk* or _underscore_.
+
+If you need bold use **double asterisk**.
+`;
+
+const MARKDOWN_LIST = `Unordered list:
+
+* React
+* Vue
+* Angular
+
+Ordered list:
+
+1. React
+2. Vue
+3. Angular
+`;
+
 const MarkdownPlayground = () => {
   const [markdownText, setMarkdownText] = React.useState("");
   const [inputText, setInputText] = React.useState("");
 
+  const setMarkdown = (markdownString: string) => {
+    setMarkdownText(markdownString);
+    setInputText(markdownString);
+  };
+
+  useHeaderSecondLevel({
+    title: "Markdown playground"
+  });
+
   const linkTo = useLinkTo();
   const handleCtaPress = useCallback(
     (cta: CTA) => handleCtaAction(cta, linkTo),
@@ -42,74 +104,108 @@ const MarkdownPlayground = () => {
   const maybeCTA = getMessageCTA(markdownText as MessageBodyMarkdown);
   const ctaMessage = O.isSome(maybeCTA)
     ? `${maybeCTA.value.cta_1 ? "2" : "1"} cta found!`
-    : "no CTA found";
+    : "No CTA found";
   const isMarkdownSet = O.isSome(maybeNotNullyString(markdownText));
+
   return (
-    <BaseScreenComponent goBack={true} headerTitle={"Markdown playground"}>
-      <SafeAreaView style={styles.flex}>
-        <Content contentContainerStyle={styles.flex}>
-          <View style={styles.row}>
-            <TextInput
-              multiline={true}
-              placeholder={"paste here your markdown and press the button"}
-              style={styles.textInput}
-              onChangeText={setInputText}
-              value={inputText}
+    <View style={{ flex: 1 }}>
+      <ScrollView
+        contentContainerStyle={{
+          paddingHorizontal: IOVisualCostants.appMarginDefault
+        }}
+      >
+        <View style={styles.row}>
+          <TextInput
+            multiline={true}
+            placeholder={"paste here your markdown and press the button"}
+            style={styles.textInput}
+            onChangeText={setInputText}
+            value={inputText}
+          />
+          <HSpacer size={16} />
+          <View>
+            <IconButtonSolid
+              icon="arrowRight"
+              onPress={() => setMarkdownText(inputText)}
+              accessibilityLabel="Invia"
             />
-            <HSpacer size={16} />
-            <View>
-              <ButtonDefaultOpacity
-                style={styles.contentCenter}
-                onPress={() => setMarkdownText(inputText)}
-              >
-                <Icon name="chevronRight" color="white" />
-              </ButtonDefaultOpacity>
-            </View>
           </View>
-          <View style={{ marginTop: 10 }}>
-            <Label
-              weight={"Regular"}
-              color={"blue"}
-              onPress={() => setInputText("")}
-            >
-              {"clear"}
-            </Label>
+        </View>
+        <VSpacer />
+        <ScrollView
+          horizontal={true}
+          showsHorizontalScrollIndicator={false}
+          style={styles.horizontalScroll}
+        >
+          <View style={{ flexDirection: "row" }}>
+            <ButtonSolid
+              label="Heading"
+              accessibilityLabel="Heading"
+              onPress={() => setMarkdown(MARKDOWN_HEADING)}
+            />
+            <HSpacer size={8} />
+            <ButtonSolid
+              label="Paragraph"
+              accessibilityLabel="Paragraph"
+              onPress={() => setMarkdown(MARKDOWN_PARAGRAPH)}
+            />
+            <HSpacer size={8} />
+            <ButtonSolid
+              label="List"
+              accessibilityLabel="List"
+              onPress={() => setMarkdown(MARKDOWN_LIST)}
+            />
+            <HSpacer size={8} />
+            <ButtonSolid
+              label="All"
+              accessibilityLabel="All"
+              onPress={() => setMarkdown(MARKDOWN_REFERENCE)}
+            />
+            <HSpacer size={48} />
           </View>
-          <VSpacer size={16} />
-          {isMarkdownSet && <Label color={"bluegrey"}>{ctaMessage}</Label>}
+        </ScrollView>
+        <View style={{ marginTop: 10 }}>
+          <ButtonOutline
+            onPress={() => setMarkdown("")}
+            label="Clear"
+            accessibilityLabel="Clear"
+          />
+        </View>
+        <VSpacer size={16} />
+
+        {isMarkdownSet && <LabelSmallAlt>{ctaMessage}</LabelSmallAlt>}
 
-          {O.isSome(maybeCTA) && (
+        {O.isSome(maybeCTA) && (
+          <View style={styles.row}>
+            <ExtractedCtaButton
+              cta={maybeCTA.value.cta_1}
+              xsmall={true}
+              onCTAPress={handleCtaPress}
+            />
+          </View>
+        )}
+        {O.isSome(maybeCTA) && maybeCTA.value.cta_2 && (
+          <>
+            <VSpacer size={16} />
             <View style={styles.row}>
               <ExtractedCtaButton
-                cta={maybeCTA.value.cta_1}
+                cta={maybeCTA.value.cta_2}
                 xsmall={true}
                 onCTAPress={handleCtaPress}
               />
             </View>
-          )}
-          {O.isSome(maybeCTA) && maybeCTA.value.cta_2 && (
-            <>
-              <VSpacer size={16} />
-              <View style={styles.row}>
-                <ExtractedCtaButton
-                  cta={maybeCTA.value.cta_2}
-                  xsmall={true}
-                  onCTAPress={handleCtaPress}
-                />
-              </View>
-            </>
-          )}
-          {isMarkdownSet && (
-            <>
-              <VSpacer size={16} />
-              <Markdown extraBodyHeight={60}>
-                {cleanMarkdownFromCTAs(markdownText as MessageBodyMarkdown)}
-              </Markdown>
-            </>
-          )}
-        </Content>
-      </SafeAreaView>
-    </BaseScreenComponent>
+          </>
+        )}
+        {isMarkdownSet && (
+          <>
+            <VSpacer size={16} />
+            <LegacyMarkdown extraBodyHeight={60}>
+              {cleanMarkdownFromCTAs(markdownText as MessageBodyMarkdown)}
+            </LegacyMarkdown>
+          </>
+        )}
+      </ScrollView>
+    </View>
   );
 };
 
diff --git a/ts/screens/profile/playgrounds/WalletPaymentPlayground.tsx b/ts/screens/profile/playgrounds/WalletPaymentPlayground.tsx
index 0af4be895dd..f9c6c80eeab 100644
--- a/ts/screens/profile/playgrounds/WalletPaymentPlayground.tsx
+++ b/ts/screens/profile/playgrounds/WalletPaymentPlayground.tsx
@@ -5,33 +5,23 @@ import {
 } from "@pagopa/io-app-design-system";
 import {
   RptId as PagoPaRptId,
-  PaymentNoticeNumberFromString,
-  RptIdFromString as PagoPaRptIdFromString
+  RptIdFromString as PagoPaRptIdFromString,
+  PaymentNoticeNumberFromString
 } from "@pagopa/io-pagopa-commons/lib/pagopa";
-import { useNavigation } from "@react-navigation/native";
-import { sequenceS } from "fp-ts/lib/Apply";
 import * as E from "fp-ts/lib/Either";
-import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import React from "react";
-import { RptId } from "../../../../definitions/pagopa/ecommerce/RptId";
 import {
   validateOrganizationFiscalCode,
   validatePaymentNoticeNumber
-} from "../../../features/walletV3/common/utils/validation";
-import { WalletPaymentRoutes } from "../../../features/walletV3/payment/navigation/routes";
-import { walletPaymentInitState } from "../../../features/walletV3/payment/store/actions/orchestration";
+} from "../../../features/payments/common/utils/validation";
+import { usePagoPaPayment } from "../../../features/payments/checkout/hooks/usePagoPaPayment";
 import { useHeaderSecondLevel } from "../../../hooks/useHeaderSecondLevel";
 import I18n from "../../../i18n";
-import {
-  AppParamsList,
-  IOStackNavigationProp
-} from "../../../navigation/params/AppParamsList";
-import { useIODispatch } from "../../../store/hooks";
+import { generateValidRandomRptIdString } from "./utils";
 
 const WalletPaymentPlayground = () => {
-  const dispatch = useIODispatch();
-  const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
+  const { startPaymentFlowWithData } = usePagoPaPayment();
 
   const [rptId, setRptId] = React.useState<PagoPaRptId>();
   const [paymentNoticeNumber, setPaymentNoticeNumber] =
@@ -54,36 +44,22 @@ const WalletPaymentPlayground = () => {
 
   React.useEffect(() => {
     pipe(
-      sequenceS(E.Monad)({
-        paymentNoticeNumber: E.right(paymentNoticeNumber),
-        organizationFiscalCode: E.right(organizationFiscalCode)
-      }),
-      E.chain(PagoPaRptId.decode),
+      PagoPaRptId.decode({ paymentNoticeNumber, organizationFiscalCode }),
       E.map(setRptId),
       E.getOrElse(() => setRptId(undefined))
     );
   }, [paymentNoticeNumber, organizationFiscalCode]);
 
   const navigateToWalletPayment = () => {
-    pipe(
-      rptId,
-      O.fromNullable,
-      O.map(PagoPaRptIdFromString.encode),
-      O.map(rptId => {
-        dispatch(walletPaymentInitState());
-        navigation.navigate(WalletPaymentRoutes.WALLET_PAYMENT_MAIN, {
-          screen: WalletPaymentRoutes.WALLET_PAYMENT_DETAIL,
-          params: {
-            rptId: rptId as RptId
-          }
-        });
-      })
-    );
+    startPaymentFlowWithData({
+      paymentNoticeNumber,
+      organizationFiscalCode
+    });
   };
 
   const generateValidRandomRptId = () => {
     pipe(
-      "00000123456002160020399398578",
+      generateValidRandomRptIdString(),
       PagoPaRptIdFromString.decode,
       E.map(setRptId)
     );
diff --git a/ts/screens/profile/playgrounds/WalletPlayground.tsx b/ts/screens/profile/playgrounds/WalletPlayground.tsx
index 5fe9462e3df..5f7d3f02533 100644
--- a/ts/screens/profile/playgrounds/WalletPlayground.tsx
+++ b/ts/screens/profile/playgrounds/WalletPlayground.tsx
@@ -1,25 +1,25 @@
 /* eslint-disable sonarjs/no-identical-functions */
-import { Divider, ListItemNav, VSpacer } from "@pagopa/io-app-design-system";
+import {
+  ContentWrapper,
+  Divider,
+  ListItemNav
+} from "@pagopa/io-app-design-system";
 import { useNavigation } from "@react-navigation/native";
 import React from "react";
-import { ScrollView } from "react-native";
-import { Body } from "../../../components/core/typography/Body";
-import { H2 } from "../../../components/core/typography/H2";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
-import BaseScreenComponent from "../../../components/screens/BaseScreenComponent";
-import { WalletOnboardingRoutes } from "../../../features/walletV3/onboarding/navigation/navigator";
+import { RNavScreenWithLargeHeader } from "../../../components/ui/RNavScreenWithLargeHeader";
 import {
   AppParamsList,
   IOStackNavigationProp
 } from "../../../navigation/params/AppParamsList";
 import ROUTES from "../../../navigation/routes";
+import { PaymentsOnboardingRoutes } from "../../../features/payments/onboarding/navigation/routes";
 
 const WalletPlayground = () => {
   const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
 
   const navigateToWalletOnboarding = () => {
-    navigation.navigate(WalletOnboardingRoutes.WALLET_ONBOARDING_MAIN, {
-      screen: WalletOnboardingRoutes.WALLET_ONBOARDING_SELECT_PAYMENT_METHOD
+    navigation.navigate(PaymentsOnboardingRoutes.PAYMENT_ONBOARDING_NAVIGATOR, {
+      screen: PaymentsOnboardingRoutes.PAYMENT_ONBOARDING_SELECT_METHOD
     });
   };
 
@@ -30,11 +30,11 @@ const WalletPlayground = () => {
   };
 
   return (
-    <BaseScreenComponent goBack>
-      <ScrollView style={IOStyles.horizontalContentPadding}>
-        <H2>New wallet playground</H2>
-        <Body>Choose the playground flow for the new wallet</Body>
-        <VSpacer size={24} />
+    <RNavScreenWithLargeHeader
+      title={{ label: "Payments playground" }}
+      description="Choose the playground flow for the new wallet"
+    >
+      <ContentWrapper>
         {/* Onboarding Playground */}
         <ListItemNav
           value="Onboarding"
@@ -50,8 +50,8 @@ const WalletPlayground = () => {
           description="Start the payment flow to pay with a method of payment"
           onPress={navigateToWalletPaymentPlayground}
         />
-      </ScrollView>
-    </BaseScreenComponent>
+      </ContentWrapper>
+    </RNavScreenWithLargeHeader>
   );
 };
 
diff --git a/ts/screens/profile/playgrounds/utils.ts b/ts/screens/profile/playgrounds/utils.ts
new file mode 100644
index 00000000000..7829ad566e9
--- /dev/null
+++ b/ts/screens/profile/playgrounds/utils.ts
@@ -0,0 +1,17 @@
+const generateRandomNumberString = (length: number) => {
+  const characters = "0123456789";
+
+  return Array.from(Array(length).keys())
+    .map(() => {
+      const randomIndex = Math.floor(Math.random() * characters.length);
+      return characters[randomIndex];
+    })
+    .join("");
+};
+
+export const generateValidRandomRptIdString = () => {
+  const organizationFiscalCode = generateRandomNumberString(11);
+  const paymentNoticeNumber = "002" + generateRandomNumberString(15);
+
+  return `${organizationFiscalCode}${paymentNoticeNumber}`;
+};
diff --git a/ts/screens/services/ServiceDetailsScreen.tsx b/ts/screens/services/LegacyServiceDetailsScreen.tsx
similarity index 80%
rename from ts/screens/services/ServiceDetailsScreen.tsx
rename to ts/screens/services/LegacyServiceDetailsScreen.tsx
index a747765211f..fcfdf1e6c01 100644
--- a/ts/screens/services/ServiceDetailsScreen.tsx
+++ b/ts/screens/services/LegacyServiceDetailsScreen.tsx
@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
 import { View, SafeAreaView } from "react-native";
 import { connect } from "react-redux";
 import { VSpacer } from "@pagopa/io-app-design-system";
+import { Route, useRoute } from "@react-navigation/native";
 import { ServiceId } from "../../../definitions/backend/ServiceId";
 import { SpecialServiceMetadata } from "../../../definitions/backend/SpecialServiceMetadata";
 import { IOStyles } from "../../components/core/variables/IOStyles";
@@ -20,16 +21,15 @@ import ContactPreferencesToggles from "../../components/services/ContactPreferen
 import ServiceMetadataComponent from "../../components/services/ServiceMetadata";
 import SpecialServicesCTA from "../../components/services/SpecialServices/SpecialServicesCTA";
 import TosAndPrivacyBox from "../../components/services/TosAndPrivacyBox";
-import Markdown from "../../components/ui/Markdown";
+import LegacyMarkdown from "../../components/ui/Markdown/LegacyMarkdown";
 import { FooterTopShadow } from "../../components/FooterTopShadow";
 import I18n from "../../i18n";
-import { IOStackNavigationRouteProps } from "../../navigation/params/AppParamsList";
-import { ServicesParamsList } from "../../navigation/params/ServicesParamsList";
+import { useIONavigation } from "../../navigation/params/AppParamsList";
 import { loadServiceDetail } from "../../store/actions/services";
 import { Dispatch } from "../../store/actions/types";
 import { contentSelector } from "../../store/reducers/content";
 import { isDebugModeEnabledSelector } from "../../store/reducers/debug";
-import { serviceByIdSelector } from "../../store/reducers/entities/services/servicesById";
+import { serviceByIdPotSelector } from "../../features/services/store/reducers/servicesById";
 import {
   isEmailEnabledSelector,
   isInboxEnabledSelector,
@@ -40,23 +40,11 @@ import { GlobalState } from "../../store/reducers/types";
 import { getServiceCTA } from "../../features/messages/utils/messages";
 import { logosForService } from "../../utils/services";
 import { handleItemOnPress } from "../../utils/url";
-
-export type ServiceDetailsScreenNavigationParams = Readonly<{
-  serviceId: ServiceId;
-  // if true the service should be activated automatically
-  // as soon as the screen is shown (used for custom activation
-  // flows like PN)
-  activate?: boolean;
-}>;
-
-type OwnProps = IOStackNavigationRouteProps<
-  ServicesParamsList,
-  "SERVICE_DETAIL"
->;
+import { useIOSelector } from "../../store/hooks";
+import { ServiceDetailsScreenNavigationParams } from "../../features/services/screens/ServiceDetailsScreen";
 
 type Props = ReturnType<typeof mapStateToProps> &
-  ReturnType<typeof mapDispatchToProps> &
-  OwnProps;
+  ReturnType<typeof mapDispatchToProps>;
 
 type SpecialServiceWrapper = {
   isSpecialService: boolean;
@@ -72,10 +60,21 @@ const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
  * Screen displaying the details of a selected service. The user
  * can enable/disable the service and customize the notification settings.
  */
-const ServiceDetailsScreen = (props: Props) => {
+const LegacyServiceDetailsScreen = (props: Props) => {
   const [isMarkdownLoaded, setIsMarkdownLoaded] = useState(false);
+  const navigation = useIONavigation();
+  const { serviceId, activate } =
+    useRoute<Route<"SERVICE_DETAIL", ServiceDetailsScreenNavigationParams>>()
+      .params;
+
+  const service = useIOSelector(state =>
+    pipe(serviceByIdPotSelector(state, serviceId), pot.toUndefined)
+  );
 
-  const { service, serviceId, loadServiceDetail } = props;
+  // const serviceId = props.route.params.serviceId;
+  // const activate = props.route.params.activate;
+
+  const { loadServiceDetail } = props;
   useEffect(() => {
     loadServiceDetail(serviceId);
   }, [serviceId, loadServiceDetail]);
@@ -109,7 +108,7 @@ const ServiceDetailsScreen = (props: Props) => {
 
   return (
     <BaseScreenComponent
-      goBack={() => props.navigation.goBack()}
+      goBack={() => navigation.goBack()}
       headerTitle={I18n.t("serviceDetail.headerTitle")}
       contextualHelpMarkdown={contextualHelpMarkdown}
       faqCategories={["services_detail"]}
@@ -127,13 +126,13 @@ const ServiceDetailsScreen = (props: Props) => {
 
           {metadata?.description && (
             <>
-              <Markdown
+              <LegacyMarkdown
                 animated={true}
                 onLoadEnd={onMarkdownEnd}
                 onError={onMarkdownEnd}
               >
                 {metadata.description}
-              </Markdown>
+              </LegacyMarkdown>
               <VSpacer size={24} />
             </>
           )}
@@ -190,11 +189,11 @@ const ServiceDetailsScreen = (props: Props) => {
               <>
                 <VSpacer size={8} />
                 <SpecialServicesCTA
-                  serviceId={props.serviceId}
+                  serviceId={serviceId}
                   customSpecialFlowOpt={
                     specialServiceInfoOpt.customSpecialFlowOpt
                   }
-                  activate={props.activate}
+                  activate={activate}
                 />
               </>
             )}
@@ -205,22 +204,14 @@ const ServiceDetailsScreen = (props: Props) => {
   );
 };
 
-const mapStateToProps = (state: GlobalState, props: OwnProps) => {
-  const serviceId = props.route.params.serviceId;
-  const activate = props.route.params.activate;
-
-  return {
-    serviceId,
-    activate,
-    service: pipe(serviceByIdSelector(state, serviceId), pot.toUndefined),
-    isInboxEnabled: isInboxEnabledSelector(state),
-    isEmailEnabled: isEmailEnabledSelector(state),
-    isEmailValidated: isProfileEmailValidatedSelector(state),
-    content: contentSelector(state),
-    profile: profileSelector(state),
-    isDebugModeEnabled: isDebugModeEnabledSelector(state)
-  };
-};
+const mapStateToProps = (state: GlobalState) => ({
+  isInboxEnabled: isInboxEnabledSelector(state),
+  isEmailEnabled: isEmailEnabledSelector(state),
+  isEmailValidated: isProfileEmailValidatedSelector(state),
+  content: contentSelector(state),
+  profile: profileSelector(state),
+  isDebugModeEnabled: isDebugModeEnabledSelector(state)
+});
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
   loadServiceDetail: (id: ServiceId) => dispatch(loadServiceDetail.request(id)),
@@ -230,4 +221,4 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(ServiceDetailsScreen);
+)(LegacyServiceDetailsScreen);
diff --git a/ts/screens/services/ServicesHomeScreen.tsx b/ts/screens/services/ServicesHomeScreen.tsx
index 3efe85ba3a3..7be05f283d5 100644
--- a/ts/screens/services/ServicesHomeScreen.tsx
+++ b/ts/screens/services/ServicesHomeScreen.tsx
@@ -76,7 +76,7 @@ import {
   visibleServicesDetailLoadStateSelector
 } from "../../store/reducers/entities/services";
 import { readServicesByIdSelector } from "../../store/reducers/entities/services/readStateByServiceId";
-import { servicesByIdSelector } from "../../store/reducers/entities/services/servicesById";
+import { servicesByIdSelector } from "../../features/services/store/reducers/servicesById";
 import { visibleServicesSelector } from "../../store/reducers/entities/services/visibleServices";
 import { wasServiceAlertDisplayedOnceSelector } from "../../store/reducers/persistedPreferences";
 import { profileSelector, ProfileState } from "../../store/reducers/profile";
@@ -95,7 +95,7 @@ import {
   getProfileChannelsforServicesList
 } from "../../utils/profile";
 import { showToast } from "../../utils/showToast";
-import { ServiceDetailsScreenNavigationParams } from "./ServiceDetailsScreen";
+import { ServiceDetailsScreenNavigationParams } from "../../features/services/screens/ServiceDetailsScreen";
 
 type OwnProps = IOStackNavigationRouteProps<AppParamsList>;
 
@@ -234,7 +234,11 @@ class ServicesHomeScreen extends React.Component<Props, State> {
   public componentDidUpdate(prevProps: Props, prevState: State) {
     // if some errors occur while updating profile, we will show a message in a toast
     // profile could be updated by enabling/disabling on or more channel of a service
-    if (pot.isError(this.props.profile) && !pot.isError(prevProps.profile)) {
+    if (
+      pot.isError(this.props.profile) &&
+      !pot.isError(prevProps.profile) &&
+      this.props.profile.error.type !== "PROFILE_EMAIL_IS_NOT_UNIQUE_ERROR"
+    ) {
       showToast(
         I18n.t("serviceDetail.onUpdateEnabledChannelsFailure"),
         "danger"
diff --git a/ts/screens/services/ServicesLocalScreen.tsx b/ts/screens/services/ServicesLocalScreen.tsx
index 0de66a244f9..1f9bc5cc5d0 100644
--- a/ts/screens/services/ServicesLocalScreen.tsx
+++ b/ts/screens/services/ServicesLocalScreen.tsx
@@ -1,13 +1,12 @@
-import { useNavigation } from "@react-navigation/native";
-import * as React from "react";
-import { useCallback } from "react";
+import React, { useCallback } from "react";
 import { View, StyleSheet } from "react-native";
 import { ServicePublic } from "../../../definitions/backend/ServicePublic";
 import { IOStyles } from "../../components/core/variables/IOStyles";
 import LocalServicesWebView from "../../components/services/LocalServicesWebView";
-import ROUTES from "../../navigation/routes";
 import { showServiceDetails } from "../../store/actions/services";
 import { useIODispatch } from "../../store/hooks";
+import { useIONavigation } from "../../navigation/params/AppParamsList";
+import { SERVICES_ROUTES } from "../../features/services/navigation/routes";
 
 const styles = StyleSheet.create({
   contentWrapper: {
@@ -17,14 +16,14 @@ const styles = StyleSheet.create({
 
 const ServicesLocalScreen = () => {
   const dispatch = useIODispatch();
-  const navigation = useNavigation();
+  const navigation = useIONavigation();
 
   const onServiceSelect = useCallback(
     (service: ServicePublic) => {
       // when a service gets selected the service is recorded as read
       dispatch(showServiceDetails(service));
-      navigation.navigate(ROUTES.SERVICES_NAVIGATOR, {
-        screen: ROUTES.SERVICE_DETAIL,
+      navigation.navigate(SERVICES_ROUTES.SERVICES_NAVIGATOR, {
+        screen: SERVICES_ROUTES.SERVICE_DETAIL,
         params: { serviceId: service.service_id }
       });
     },
diff --git a/ts/screens/services/ServicesNationalScreen.tsx b/ts/screens/services/ServicesNationalScreen.tsx
index 0825e982d96..c2e1a43020b 100644
--- a/ts/screens/services/ServicesNationalScreen.tsx
+++ b/ts/screens/services/ServicesNationalScreen.tsx
@@ -1,11 +1,9 @@
 import * as pot from "@pagopa/ts-commons/lib/pot";
-import { useNavigation } from "@react-navigation/native";
 import * as React from "react";
 import { useCallback } from "react";
 import { Animated } from "react-native";
 import { ServicePublic } from "../../../definitions/backend/ServicePublic";
 import ServicesTab from "../../components/services/ServicesTab";
-import ROUTES from "../../navigation/routes";
 import {
   loadVisibleServices,
   showServiceDetails
@@ -17,11 +15,13 @@ import {
   visibleServicesDetailLoadStateSelector
 } from "../../store/reducers/entities/services";
 import { userMetadataSelector } from "../../store/reducers/userMetadata";
+import { useIONavigation } from "../../navigation/params/AppParamsList";
+import { SERVICES_ROUTES } from "../../features/services/navigation/routes";
 
 const tabScrollOffset = new Animated.Value(0);
 
 const ServicesNationalScreen = () => {
-  const navigation = useNavigation();
+  const navigation = useIONavigation();
   const dispatch = useIODispatch();
   const nationalTabSections = useIOSelector(nationalServicesSectionsSelector);
   const visibleServicesContentLoadState = useIOSelector(
@@ -44,8 +44,8 @@ const ServicesNationalScreen = () => {
     (service: ServicePublic) => {
       // when a service gets selected the service is recorded as read
       dispatch(showServiceDetails(service));
-      navigation.navigate(ROUTES.SERVICES_NAVIGATOR, {
-        screen: ROUTES.SERVICE_DETAIL,
+      navigation.navigate(SERVICES_ROUTES.SERVICES_NAVIGATOR, {
+        screen: SERVICES_ROUTES.SERVICE_DETAIL,
         params: { serviceId: service.service_id }
       });
     },
diff --git a/ts/screens/services/ServicesWebviewScreen.tsx b/ts/screens/services/ServicesWebviewScreen.tsx
index 62d02536bed..085d0a8e9ae 100644
--- a/ts/screens/services/ServicesWebviewScreen.tsx
+++ b/ts/screens/services/ServicesWebviewScreen.tsx
@@ -17,7 +17,7 @@ import {
   tokenFromNameSelector,
   TokenName
 } from "../../store/reducers/authentication";
-import { serviceMetadataByIdSelector } from "../../store/reducers/entities/services/servicesById";
+import { serviceMetadataByIdSelector } from "../../features/services/store/reducers/servicesById";
 
 export type ServiceWebviewScreenNavigationParams = Readonly<{
   serviceId: ServiceId;
@@ -37,8 +37,8 @@ const ServicesWebviewScreen: React.FunctionComponent<Props> = (
     useRoute<
       Route<"SERVICES_NAVIGATOR", ServiceWebviewScreenNavigationParams>
     >();
-  const maybeService = useIOSelector(
-    serviceMetadataByIdSelector(route.params.serviceId)
+  const maybeService = useIOSelector(state =>
+    serviceMetadataByIdSelector(state, route.params.serviceId)
   );
   const token = useIOSelector(
     tokenFromNameSelector(maybeService?.token_name as TokenName)
diff --git a/ts/screens/services/__tests__/ServiceDetailsScreen.test.tsx b/ts/screens/services/__tests__/ServiceDetailsScreen.test.tsx
index 38fef4fdd5d..e9b5d628562 100644
--- a/ts/screens/services/__tests__/ServiceDetailsScreen.test.tsx
+++ b/ts/screens/services/__tests__/ServiceDetailsScreen.test.tsx
@@ -10,12 +10,12 @@ import { applicationChangeState } from "../../../store/actions/application";
 import { appReducer } from "../../../store/reducers";
 import { GlobalState } from "../../../store/reducers/types";
 import { renderScreenWithNavigationStoreContext } from "../../../utils/testWrapper";
-import ServiceDetailsScreen from "../ServiceDetailsScreen";
-import ROUTES from "../../../navigation/routes";
+import ServiceDetailsScreen from "../LegacyServiceDetailsScreen";
 import {
   loadServiceDetail,
   loadVisibleServices
 } from "../../../store/actions/services";
+import { SERVICES_ROUTES } from "../../../features/services/navigation/routes";
 
 jest.useFakeTimers();
 
@@ -73,7 +73,7 @@ const renderComponent = () => {
   return {
     component: renderScreenWithNavigationStoreContext<GlobalState>(
       ServiceDetailsScreen,
-      ROUTES.SERVICE_DETAIL,
+      SERVICES_ROUTES.SERVICE_DETAIL,
       { serviceId: service.service_id },
       store
     ),
diff --git a/ts/screens/wallet/AddCardScreen.tsx b/ts/screens/wallet/AddCardScreen.tsx
index a88f174d539..37b3856d293 100644
--- a/ts/screens/wallet/AddCardScreen.tsx
+++ b/ts/screens/wallet/AddCardScreen.tsx
@@ -11,8 +11,8 @@ import { Content } from "native-base";
 import React, { useState } from "react";
 import { Keyboard, SafeAreaView, ScrollView, StyleSheet } from "react-native";
 import { Col, Grid } from "react-native-easy-grid";
-import { connect } from "react-redux";
 import { IOColors, VSpacer } from "@pagopa/io-app-design-system";
+import { Route, useRoute } from "@react-navigation/native";
 import { PaymentRequestsGetResponse } from "../../../definitions/backend/PaymentRequestsGetResponse";
 import { Link } from "../../components/core/typography/Link";
 import { LabelledItem } from "../../components/LabelledItem";
@@ -22,14 +22,8 @@ import BaseScreenComponent, {
 import SectionStatusComponent from "../../components/SectionStatus";
 import FooterWithButtons from "../../components/ui/FooterWithButtons";
 import I18n from "../../i18n";
-import { IOStackNavigationRouteProps } from "../../navigation/params/AppParamsList";
-import { WalletParamsList } from "../../navigation/params/WalletParamsList";
-import {
-  navigateBack,
-  navigateToWalletConfirmCardDetails
-} from "../../store/actions/navigation";
-import { Dispatch } from "../../store/actions/types";
-import { GlobalState } from "../../store/reducers/types";
+import { useIONavigation } from "../../navigation/params/AppParamsList";
+import { navigateToWalletConfirmCardDetails } from "../../store/actions/navigation";
 import { CreditCard } from "../../types/pagopa";
 import { ComponentProps } from "../../types/react";
 import { useScreenReaderEnabled } from "../../utils/accessibility";
@@ -64,15 +58,6 @@ export type AddCardScreenNavigationParams = Readonly<{
   keyFrom?: string;
 }>;
 
-type OwnProps = IOStackNavigationRouteProps<
-  WalletParamsList,
-  "WALLET_ADD_CARD"
->;
-
-type Props = ReturnType<typeof mapDispatchToProps> &
-  ReturnType<typeof mapStateToProps> &
-  OwnProps;
-
 const styles = StyleSheet.create({
   creditCardForm: {
     height: 24,
@@ -215,11 +200,21 @@ const getAccessibilityLabels = (creditCard: CreditCardState) => ({
       : I18n.t("wallet.dummyCard.accessibility.securityCode.4D.error")
 });
 
-const AddCardScreen: React.FC<Props> = props => {
+const AddCardScreen: React.FC = () => {
   const [creditCard, setCreditCard] = useState<CreditCardState>(
     INITIAL_CARD_FORM_STATE
   );
 
+  const navigation = useIONavigation();
+  const { inPayment, keyFrom } =
+    useRoute<Route<"WALLET_ADD_CARD", AddCardScreenNavigationParams>>().params;
+  const navigateToConfirmCardDetailsScreen = (creditCard: CreditCard) =>
+    navigateToWalletConfirmCardDetails({
+      creditCard,
+      inPayment,
+      keyFrom
+    });
+
   const isCardHolderValid = O.isNone(creditCard.holder)
     ? undefined
     : isValidCardHolder(creditCard.holder);
@@ -263,7 +258,7 @@ const AddCardScreen: React.FC<Props> = props => {
   const secondaryButtonProps = {
     block: true,
     bordered: true,
-    onPress: props.navigateBack,
+    onPress: navigation.goBack,
     title: I18n.t("global.buttons.back")
   };
 
@@ -442,7 +437,7 @@ const AddCardScreen: React.FC<Props> = props => {
           leftButton={secondaryButtonProps}
           rightButton={usePrimaryButtonPropsFromState(
             creditCard,
-            props.navigateToConfirmCardDetailsScreen,
+            navigateToConfirmCardDetailsScreen,
             isValidCardHolder(creditCard.holder),
             O.toUndefined(maybeCreditCardValidOrExpired(creditCard))
           )}
@@ -452,19 +447,8 @@ const AddCardScreen: React.FC<Props> = props => {
   );
 };
 
-const mapStateToProps = (_: GlobalState) => ({});
-
-const mapDispatchToProps = (_: Dispatch, props: OwnProps) => ({
-  navigateBack: () => navigateBack(),
-  navigateToConfirmCardDetailsScreen: (creditCard: CreditCard) =>
-    navigateToWalletConfirmCardDetails({
-      creditCard,
-      inPayment: props.route.params.inPayment,
-      keyFrom: props.route.params.keyFrom
-    })
-});
+export default AddCardScreen;
 
-export default connect(mapStateToProps, mapDispatchToProps)(AddCardScreen);
 // keep encapsulation strong
 export const testableAddCardScreen = isTestEnv
   ? { isCreditCardDateExpiredOrInvalid }
diff --git a/ts/screens/wallet/AddPaymentMethodScreen.tsx b/ts/screens/wallet/AddPaymentMethodScreen.tsx
index d3514079de0..2445cda4804 100644
--- a/ts/screens/wallet/AddPaymentMethodScreen.tsx
+++ b/ts/screens/wallet/AddPaymentMethodScreen.tsx
@@ -6,6 +6,7 @@ import * as React from "react";
 import { View, SafeAreaView } from "react-native";
 import { connect } from "react-redux";
 import { VSpacer } from "@pagopa/io-app-design-system";
+import { Route, useRoute } from "@react-navigation/native";
 import { PaymentRequestsGetResponse } from "../../../definitions/backend/PaymentRequestsGetResponse";
 import BpayLogo from "../../../img/wallet/payment-methods/bancomat_pay.svg";
 import CreditCard from "../../../img/wallet/payment-methods/creditcard.svg";
@@ -27,8 +28,6 @@ import {
   walletAddPaypalStart
 } from "../../features/wallet/onboarding/paypal/store/actions";
 import I18n from "../../i18n";
-import { IOStackNavigationRouteProps } from "../../navigation/params/AppParamsList";
-import { WalletParamsList } from "../../navigation/params/WalletParamsList";
 import {
   navigateBack,
   navigateToWalletAddCreditCard
@@ -55,13 +54,7 @@ export type AddPaymentMethodScreenNavigationParams = Readonly<{
   keyFrom?: string;
 }>;
 
-type OwnProps = IOStackNavigationRouteProps<
-  WalletParamsList,
-  "WALLET_ADD_PAYMENT_METHOD"
->;
-
-type Props = OwnProps &
-  ReturnType<typeof mapDispatchToProps> &
+type Props = ReturnType<typeof mapDispatchToProps> &
   ReturnType<typeof mapStateToProps>;
 
 const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
@@ -76,13 +69,14 @@ const getPaymentMethods = (
     isPaymentOnGoing: boolean;
     isPaypalEnabled: boolean;
     canOnboardBPay: boolean;
-  }
+  },
+  navigateToAddCreditCard: () => void
 ): ReadonlyArray<IPaymentMethod> => [
   {
     name: I18n.t("wallet.methods.card.name"),
     description: I18n.t("wallet.methods.card.description"),
     icon: CreditCard,
-    onPress: props.navigateToAddCreditCard,
+    onPress: navigateToAddCreditCard,
     status: "implemented",
     section: "credit_card"
   },
@@ -149,9 +143,16 @@ const getPaymentMethods = (
 const AddPaymentMethodScreen: React.FunctionComponent<Props> = (
   props: Props
 ) => {
-  const inPayment = props.route.params.inPayment;
-  const canAddOnlyPayablePaymentMethod =
-    props.route.params.showOnlyPayablePaymentMethods;
+  const { inPayment, showOnlyPayablePaymentMethods, keyFrom } =
+    useRoute<
+      Route<"WALLET_ADD_PAYMENT_METHOD", AddPaymentMethodScreenNavigationParams>
+    >().params;
+
+  const navigateToAddCreditCard = () =>
+    navigateToWalletAddCreditCard({
+      inPayment,
+      keyFrom
+    });
 
   const cancelButtonProps = {
     block: true,
@@ -187,26 +188,34 @@ const AddPaymentMethodScreen: React.FunctionComponent<Props> = (
               <VSpacer size={16} />
               {/* since we're paying show only those method can pay with pagoPA */}
               <PaymentMethodsList
-                paymentMethods={getPaymentMethods(props, {
-                  onlyPaymentMethodCanPay: true,
-                  isPaymentOnGoing: O.isSome(inPayment),
-                  isPaypalEnabled: props.isPaypalEnabled,
-                  // can onboard bpay only when both FF are enabled
-                  canOnboardBPay: props.canOnboardBPay && props.canPayWithBPay
-                })}
+                paymentMethods={getPaymentMethods(
+                  props,
+                  {
+                    onlyPaymentMethodCanPay: true,
+                    isPaymentOnGoing: O.isSome(inPayment),
+                    isPaypalEnabled: props.isPaypalEnabled,
+                    // can onboard bpay only when both FF are enabled
+                    canOnboardBPay: props.canOnboardBPay && props.canPayWithBPay
+                  },
+                  navigateToAddCreditCard
+                )}
               />
             </View>
           </Content>
         ) : (
           <Content noPadded={true} style={IOStyles.horizontalContentPadding}>
             <PaymentMethodsList
-              paymentMethods={getPaymentMethods(props, {
-                onlyPaymentMethodCanPay:
-                  canAddOnlyPayablePaymentMethod === true,
-                isPaymentOnGoing: O.isSome(inPayment),
-                isPaypalEnabled: props.isPaypalEnabled,
-                canOnboardBPay: props.canOnboardBPay
-              })}
+              paymentMethods={getPaymentMethods(
+                props,
+                {
+                  onlyPaymentMethodCanPay:
+                    showOnlyPayablePaymentMethods === true,
+                  isPaymentOnGoing: O.isSome(inPayment),
+                  isPaypalEnabled: props.isPaypalEnabled,
+                  canOnboardBPay: props.canOnboardBPay
+                },
+                navigateToAddCreditCard
+              )}
             />
           </Content>
         )}
@@ -219,17 +228,12 @@ const AddPaymentMethodScreen: React.FunctionComponent<Props> = (
   );
 };
 
-const mapDispatchToProps = (dispatch: Dispatch, props: OwnProps) => ({
+const mapDispatchToProps = (dispatch: Dispatch) => ({
   navigateBack: () => navigateBack(),
   startBPayOnboarding: () => dispatch(walletAddBPayStart()),
   startPaypalOnboarding: (onOboardingCompleted: OnOnboardingCompleted) =>
     dispatch(walletAddPaypalStart(onOboardingCompleted)),
-  startAddBancomat: () => dispatch(walletAddBancomatStart()),
-  navigateToAddCreditCard: () =>
-    navigateToWalletAddCreditCard({
-      inPayment: props.route.params.inPayment,
-      keyFrom: props.route.params.keyFrom
-    })
+  startAddBancomat: () => dispatch(walletAddBancomatStart())
 });
 
 const mapStateToProps = (state: GlobalState) => {
diff --git a/ts/screens/wallet/ConfirmCardDetailsScreen.tsx b/ts/screens/wallet/ConfirmCardDetailsScreen.tsx
index 41203494a06..2e01409ce06 100644
--- a/ts/screens/wallet/ConfirmCardDetailsScreen.tsx
+++ b/ts/screens/wallet/ConfirmCardDetailsScreen.tsx
@@ -12,6 +12,7 @@ import { View, Alert, SafeAreaView, StyleSheet } from "react-native";
 import { connect } from "react-redux";
 
 import { HSpacer, VSpacer } from "@pagopa/io-app-design-system";
+import { useNavigation, useRoute, Route } from "@react-navigation/native";
 import { PaymentRequestsGetResponse } from "../../../definitions/backend/PaymentRequestsGetResponse";
 import { TypeEnum } from "../../../definitions/pagopa/Wallet";
 import image from "../../../img/wallet/errors/payment-unavailable-icon.png";
@@ -41,7 +42,10 @@ import {
   isReady
 } from "../../common/model/RemoteValue";
 import I18n from "../../i18n";
-import { IOStackNavigationRouteProps } from "../../navigation/params/AppParamsList";
+import {
+  IOStackNavigationProp,
+  IOStackNavigationRouteProps
+} from "../../navigation/params/AppParamsList";
 import { WalletParamsList } from "../../navigation/params/WalletParamsList";
 import {
   navigateToAddCreditCardOutcomeCode,
@@ -67,6 +71,7 @@ import { CreditCard, Wallet } from "../../types/pagopa";
 import { getLocalePrimaryWithFallback } from "../../utils/locale";
 import { getLookUpIdPO } from "../../utils/pmLookUpId";
 import { showToast } from "../../utils/showToast";
+import { LightModalContext } from "../../components/ui/LightModal";
 import { dispatchPickPspOrConfirm } from "./payment/common";
 
 export type ConfirmCardDetailsScreenNavigationParams = Readonly<{
@@ -504,8 +509,32 @@ const mergeProps = (
   };
 };
 
-export default connect(
+const ConnectedConfirmCardDetailsScreen = connect(
   mapStateToProps,
   mapDispatchToProps,
   mergeProps
 )(withLoadingSpinner(ConfirmCardDetailsScreen));
+
+const ConfirmCardDetailsScreenFC = () => {
+  const { ...modalContext } = React.useContext(LightModalContext);
+  const navigation =
+    useNavigation<
+      IOStackNavigationProp<WalletParamsList, "WALLET_CONFIRM_CARD_DETAILS">
+    >();
+  const route =
+    useRoute<
+      Route<
+        "WALLET_CONFIRM_CARD_DETAILS",
+        ConfirmCardDetailsScreenNavigationParams
+      >
+    >();
+  return (
+    <ConnectedConfirmCardDetailsScreen
+      {...modalContext}
+      navigation={navigation}
+      route={route}
+    />
+  );
+};
+
+export default ConfirmCardDetailsScreenFC;
diff --git a/ts/screens/wallet/PaymentHistoryDetailsScreen.tsx b/ts/screens/wallet/PaymentHistoryDetailsScreen.tsx
index da733dcbeb1..c8f07cc2978 100644
--- a/ts/screens/wallet/PaymentHistoryDetailsScreen.tsx
+++ b/ts/screens/wallet/PaymentHistoryDetailsScreen.tsx
@@ -5,6 +5,7 @@ import { Text as NBButtonText } from "native-base";
 import { View } from "react-native";
 import { connect } from "react-redux";
 import { Icon, HSpacer, VSpacer } from "@pagopa/io-app-design-system";
+import { useNavigation, useRoute, Route } from "@react-navigation/native";
 import { EnteBeneficiario } from "../../../definitions/backend/EnteBeneficiario";
 import { PaymentRequestsGetResponse } from "../../../definitions/backend/PaymentRequestsGetResponse";
 import { ToolEnum } from "../../../definitions/content/AssistanceToolConfig";
@@ -27,7 +28,10 @@ import {
   zendeskSupportStart
 } from "../../features/zendesk/store/actions";
 import I18n from "../../i18n";
-import { IOStackNavigationRouteProps } from "../../navigation/params/AppParamsList";
+import {
+  IOStackNavigationProp,
+  IOStackNavigationRouteProps
+} from "../../navigation/params/AppParamsList";
 import { WalletParamsList } from "../../navigation/params/WalletParamsList";
 import { Dispatch } from "../../store/actions/types";
 import { canShowHelpSelector } from "../../store/reducers/assistanceTools";
@@ -422,7 +426,28 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
     dispatch(zendeskSelectedCategory(category))
 });
 
-export default connect(
+const ConnectedPaymentHistoryDetailsScreen = connect(
   mapStateToProps,
   mapDispatchToProps
 )(PaymentHistoryDetailsScreen);
+
+const PaymentHistoryDetailsScreenFC = () => {
+  const navigation =
+    useNavigation<
+      IOStackNavigationProp<WalletParamsList, "PAYMENT_HISTORY_DETAIL_INFO">
+    >();
+  const route =
+    useRoute<
+      Route<
+        "PAYMENT_HISTORY_DETAIL_INFO",
+        PaymentHistoryDetailsScreenNavigationParams
+      >
+    >();
+  return (
+    <ConnectedPaymentHistoryDetailsScreen
+      navigation={navigation}
+      route={route}
+    />
+  );
+};
+export default PaymentHistoryDetailsScreenFC;
diff --git a/ts/screens/wallet/TransactionDetailsScreen.tsx b/ts/screens/wallet/TransactionDetailsScreen.tsx
index 0d733996dc5..a58e742dda5 100644
--- a/ts/screens/wallet/TransactionDetailsScreen.tsx
+++ b/ts/screens/wallet/TransactionDetailsScreen.tsx
@@ -12,24 +12,29 @@ import {
 } from "react-native";
 import { connect } from "react-redux";
 import { IOColors, VSpacer } from "@pagopa/io-app-design-system";
+import { Route, useNavigation, useRoute } from "@react-navigation/native";
 import ButtonDefaultOpacity from "../../components/ButtonDefaultOpacity";
 import CopyButtonComponent from "../../components/CopyButtonComponent";
 import { Body } from "../../components/core/typography/Body";
 import { H2 } from "../../components/core/typography/H2";
 import { Link } from "../../components/core/typography/Link";
 import { IOStyles } from "../../components/core/variables/IOStyles";
-import { withLightModalContext } from "../../components/helpers/withLightModalContext";
-import { withLoadingSpinner } from "../../components/helpers/withLoadingSpinner";
 import ItemSeparatorComponent from "../../components/ItemSeparatorComponent";
 import BaseScreenComponent, {
   ContextualHelpPropsMarkdown
 } from "../../components/screens/BaseScreenComponent";
 import FocusAwareStatusBar from "../../components/ui/FocusAwareStatusBar";
-import { LightModalContextInterface } from "../../components/ui/LightModal";
+import {
+  LightModalContext,
+  LightModalContextInterface
+} from "../../components/ui/LightModal";
 import { PaymentSummaryComponent } from "../../components/wallet/PaymentSummaryComponent";
 import { SlidedContentComponent } from "../../components/wallet/SlidedContentComponent";
 import I18n from "../../i18n";
-import { IOStackNavigationRouteProps } from "../../navigation/params/AppParamsList";
+import {
+  IOStackNavigationProp,
+  IOStackNavigationRouteProps
+} from "../../navigation/params/AppParamsList";
 import { WalletParamsList } from "../../navigation/params/WalletParamsList";
 import { Dispatch } from "../../store/actions/types";
 import { backToEntrypointPayment } from "../../store/actions/wallet/payment";
@@ -46,6 +51,7 @@ import {
   getTransactionIUV
 } from "../../utils/payment";
 import { formatNumberCentsToAmount } from "../../utils/stringBuilder";
+import { withLoadingSpinner } from "../../components/helpers/withLoadingSpinner";
 
 export type TransactionDetailsScreenNavigationParams = Readonly<{
   isPaymentCompletedTransaction: boolean;
@@ -58,8 +64,10 @@ type OwnProps = IOStackNavigationRouteProps<
 >;
 
 type Props = ReturnType<typeof mapStateToProps> &
-  ReturnType<typeof mapDispatchToProps> &
-  LightModalContextInterface &
+  ReturnType<typeof mapDispatchToProps>;
+
+type TransactionDetailsScreenProps = LightModalContextInterface &
+  Props &
   OwnProps;
 
 /**
@@ -89,10 +97,13 @@ type State = {
  * a list of information available about a
  * specific transaction.
  */
-class TransactionDetailsScreen extends React.Component<Props, State> {
+class TransactionDetailsScreen extends React.Component<
+  TransactionDetailsScreenProps,
+  State
+> {
   private subscription: NativeEventSubscription | undefined;
   private navigationEventUnsubscribe!: () => void;
-  constructor(props: Props) {
+  constructor(props: TransactionDetailsScreenProps) {
     super(props);
     this.state = { showFullReason: false };
   }
@@ -361,7 +372,31 @@ const mapStateToProps = (state: GlobalState, ownProps: OwnProps) => {
   };
 };
 
-export default connect(
+const ConnectedTransactionDetailsScreen = connect(
   mapStateToProps,
   mapDispatchToProps
-)(withLightModalContext(withLoadingSpinner(TransactionDetailsScreen)));
+)(withLoadingSpinner(TransactionDetailsScreen));
+
+const TransactionDetailsScreenFC = () => {
+  const { ...modalContext } = React.useContext(LightModalContext);
+  const navigation =
+    useNavigation<
+      IOStackNavigationProp<WalletParamsList, "WALLET_TRANSACTION_DETAILS">
+    >();
+  const route =
+    useRoute<
+      Route<
+        "WALLET_TRANSACTION_DETAILS",
+        TransactionDetailsScreenNavigationParams
+      >
+    >();
+  return (
+    <ConnectedTransactionDetailsScreen
+      {...modalContext}
+      navigation={navigation}
+      route={route}
+    />
+  );
+};
+
+export default TransactionDetailsScreenFC;
diff --git a/ts/screens/wallet/WalletHomeScreen.tsx b/ts/screens/wallet/WalletHomeScreen.tsx
index 30b99d3e879..d837cfe5e5e 100644
--- a/ts/screens/wallet/WalletHomeScreen.tsx
+++ b/ts/screens/wallet/WalletHomeScreen.tsx
@@ -47,8 +47,8 @@ import { idPayWalletInitiativeListSelector } from "../../features/idpay/wallet/s
 import NewPaymentMethodAddedNotifier from "../../features/wallet/component/NewMethodAddedNotifier";
 import FeaturedCardCarousel from "../../features/wallet/component/card/FeaturedCardCarousel";
 import WalletV2PreviewCards from "../../features/wallet/component/card/WalletV2PreviewCards";
-import { WalletBarcodeRoutes } from "../../features/walletV3/barcode/navigation/routes";
-import { WalletTransactionRoutes } from "../../features/walletV3/transaction/navigation/navigator";
+import { PaymentsBarcodeRoutes } from "../../features/payments/barcode/navigation/routes";
+import { PaymentsTransactionRoutes } from "../../features/payments/transaction/navigation/routes";
 import I18n from "../../i18n";
 import { IOStackNavigationRouteProps } from "../../navigation/params/AppParamsList";
 import { MainTabParamsList } from "../../navigation/params/MainTabParamsList";
@@ -389,9 +389,9 @@ class WalletHomeScreen extends React.PureComponent<Props, State> {
   ) => {
     if (this.props.isDesignSystemEnabled) {
       this.props.navigation.navigate(
-        WalletTransactionRoutes.WALLET_TRANSACTION_MAIN,
+        PaymentsTransactionRoutes.PAYMENT_TRANSACTION_NAVIGATOR,
         {
-          screen: WalletTransactionRoutes.WALLET_TRANSACTION_DETAILS,
+          screen: PaymentsTransactionRoutes.PAYMENT_TRANSACTION_DETAILS,
           params: {
             transactionId: transaction.id
           }
@@ -420,9 +420,12 @@ class WalletHomeScreen extends React.PureComponent<Props, State> {
   }
 
   private navigateToPaymentScanQrCode = () => {
-    this.props.navigation.navigate(WalletBarcodeRoutes.WALLET_BARCODE_MAIN, {
-      screen: WalletBarcodeRoutes.WALLET_BARCODE_SCAN
-    });
+    this.props.navigation.navigate(
+      PaymentsBarcodeRoutes.PAYMENT_BARCODE_NAVIGATOR,
+      {
+        screen: PaymentsBarcodeRoutes.PAYMENT_BARCODE_SCAN
+      }
+    );
   };
 
   private footerButton(potWallets: pot.Pot<ReadonlyArray<Wallet>, Error>) {
diff --git a/ts/screens/wallet/__tests__/AddCardScreen.test.tsx b/ts/screens/wallet/__tests__/AddCardScreen.test.tsx
index ca0cda09d50..0ccd35a5063 100644
--- a/ts/screens/wallet/__tests__/AddCardScreen.test.tsx
+++ b/ts/screens/wallet/__tests__/AddCardScreen.test.tsx
@@ -141,19 +141,22 @@ describe("getPaymentMethods", () => {
     startBPayOnboarding: jest.fn(),
     startPaypalOnboarding: jest.fn(),
     startAddBancomat: jest.fn(),
-    navigateToAddCreditCard: jest.fn(),
     isPaypalAlreadyAdded: true,
     isPaypalEnabled: true,
     canOnboardBPay: false,
     canPayWithBPay: false
   };
   // TODO: ⚠️ cast to any only to complete the merge, should be removed!
-  const methods = testableFunctions.getPaymentMethods!(props as any, {
-    onlyPaymentMethodCanPay: true,
-    isPaymentOnGoing: true,
-    isPaypalEnabled: true,
-    canOnboardBPay: true
-  });
+  const methods = testableFunctions.getPaymentMethods!(
+    props as any,
+    {
+      onlyPaymentMethodCanPay: true,
+      isPaymentOnGoing: true,
+      isPaypalEnabled: true,
+      canOnboardBPay: true
+    },
+    jest.fn()
+  );
 
   const getMethodStatus = (
     methods: ReadonlyArray<IPaymentMethod>,
@@ -174,12 +177,16 @@ describe("getPaymentMethods", () => {
 
   it("paypal should be always notImplemented when the FF is OFF", () => {
     // TODO: ⚠️ cast to any only to complete the merge, should be removed!
-    const methods = testableFunctions.getPaymentMethods!(props as any, {
-      onlyPaymentMethodCanPay: true,
-      isPaymentOnGoing: true,
-      isPaypalEnabled: false,
-      canOnboardBPay: true
-    });
+    const methods = testableFunctions.getPaymentMethods!(
+      props as any,
+      {
+        onlyPaymentMethodCanPay: true,
+        isPaymentOnGoing: true,
+        isPaypalEnabled: false,
+        canOnboardBPay: true
+      },
+      jest.fn()
+    );
     expect(
       getMethodStatus(methods, I18n.t("wallet.methods.paypal.name"))
     ).toEqual("notImplemented");
@@ -187,12 +194,16 @@ describe("getPaymentMethods", () => {
 
   it("bpay should be always notImplemented if Bpay onboarding FF is OFF", () => {
     // TODO: ⚠️ cast to any only to complete the merge, should be removed!
-    const methods = testableFunctions.getPaymentMethods!(props as any, {
-      onlyPaymentMethodCanPay: true,
-      isPaymentOnGoing: true,
-      isPaypalEnabled: true,
-      canOnboardBPay: false
-    });
+    const methods = testableFunctions.getPaymentMethods!(
+      props as any,
+      {
+        onlyPaymentMethodCanPay: true,
+        isPaymentOnGoing: true,
+        isPaypalEnabled: true,
+        canOnboardBPay: false
+      },
+      jest.fn()
+    );
     expect(
       getMethodStatus(methods, I18n.t("wallet.methods.bancomatPay.name"))
     ).toEqual("notImplemented");
@@ -200,12 +211,16 @@ describe("getPaymentMethods", () => {
 
   it("bpay should be always implemented if Bpay onboarding FF is ON and onlyPaymentMethodCanPay flag is OFF", () => {
     // TODO: ⚠️ cast to any only to complete the merge, should be removed!
-    const methods = testableFunctions.getPaymentMethods!(props as any, {
-      onlyPaymentMethodCanPay: false,
-      isPaymentOnGoing: true,
-      isPaypalEnabled: true,
-      canOnboardBPay: true
-    });
+    const methods = testableFunctions.getPaymentMethods!(
+      props as any,
+      {
+        onlyPaymentMethodCanPay: false,
+        isPaymentOnGoing: true,
+        isPaypalEnabled: true,
+        canOnboardBPay: true
+      },
+      jest.fn()
+    );
     expect(
       getMethodStatus(methods, I18n.t("wallet.methods.bancomatPay.name"))
     ).toEqual("implemented");
@@ -222,7 +237,8 @@ describe("getPaymentMethods", () => {
         isPaymentOnGoing: true,
         isPaypalEnabled: true,
         canOnboardBPay: canPayWithBPay && canOnboardBPay
-      }
+      },
+      jest.fn()
     );
     expect(
       getMethodStatus(methods, I18n.t("wallet.methods.bancomatPay.name"))
@@ -240,7 +256,8 @@ describe("getPaymentMethods", () => {
         isPaymentOnGoing: false,
         isPaypalEnabled: true,
         canOnboardBPay: canPayWithBPay && canOnboardBPay
-      }
+      },
+      jest.fn()
     );
     expect(
       getMethodStatus(methods, I18n.t("wallet.methods.bancomatPay.name"))
diff --git a/ts/screens/wallet/__tests__/ConfirmCardDetailScreen.test.tsx b/ts/screens/wallet/__tests__/ConfirmCardDetailScreen.test.tsx
index dd42c54e52d..2dc4002a935 100644
--- a/ts/screens/wallet/__tests__/ConfirmCardDetailScreen.test.tsx
+++ b/ts/screens/wallet/__tests__/ConfirmCardDetailScreen.test.tsx
@@ -67,9 +67,7 @@ const getComponent = () => {
   } as ConfirmCardDetailsScreenNavigationParams;
   const ToBeTested: React.FunctionComponent<
     React.ComponentProps<typeof ConfirmCardDetailsScreen>
-  > = (props: React.ComponentProps<typeof ConfirmCardDetailsScreen>) => (
-    <ConfirmCardDetailsScreen {...props} />
-  );
+  > = () => <ConfirmCardDetailsScreen />;
 
   const globalState = appReducer(undefined, applicationChangeState("active"));
   const store = createStore(appReducer, globalState as any);
diff --git a/ts/screens/wallet/creditCardOnboardingAttempts/CreditCardOnboardingAttemptDetailScreen.tsx b/ts/screens/wallet/creditCardOnboardingAttempts/CreditCardOnboardingAttemptDetailScreen.tsx
index 21b4b83a523..fdf3a62b1ae 100644
--- a/ts/screens/wallet/creditCardOnboardingAttempts/CreditCardOnboardingAttemptDetailScreen.tsx
+++ b/ts/screens/wallet/creditCardOnboardingAttempts/CreditCardOnboardingAttemptDetailScreen.tsx
@@ -4,6 +4,7 @@ import * as React from "react";
 import { View, StyleSheet } from "react-native";
 import { useDispatch } from "react-redux";
 import { Icon, HSpacer, VSpacer } from "@pagopa/io-app-design-system";
+import { Route, useRoute } from "@react-navigation/native";
 import { ToolEnum } from "../../../../definitions/content/AssistanceToolConfig";
 import ButtonDefaultOpacity from "../../../components/ButtonDefaultOpacity";
 import { Body } from "../../../components/core/typography/Body";
@@ -20,8 +21,7 @@ import {
   zendeskSupportStart
 } from "../../../features/zendesk/store/actions";
 import I18n from "../../../i18n";
-import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
-import { WalletParamsList } from "../../../navigation/params/WalletParamsList";
+import { useIONavigation } from "../../../navigation/params/AppParamsList";
 import { useIOSelector } from "../../../store/hooks";
 import { canShowHelpSelector } from "../../../store/reducers/assistanceTools";
 import { assistanceToolConfigSelector } from "../../../store/reducers/backendStatus";
@@ -43,11 +43,6 @@ export type CreditCardOnboardingAttemptDetailScreenNavigationParams = Readonly<{
   attempt: CreditCardInsertion;
 }>;
 
-type Props = IOStackNavigationRouteProps<
-  WalletParamsList,
-  "CREDIT_CARD_ONBOARDING_ATTEMPT_DETAIL"
->;
-
 const styles = StyleSheet.create({
   row: {
     flexDirection: "row",
@@ -78,9 +73,16 @@ const renderRow = (label: string, value: string) => (
  * This screen shows credit card onboarding attempt details and allows the user
  * to ask assistance about this attempts
  */
-const CreditCardOnboardingAttemptDetailScreen = (props: Props) => {
+const CreditCardOnboardingAttemptDetailScreen = () => {
   const dispatch = useDispatch();
-  const attempt = props.route.params.attempt;
+  const { attempt } =
+    useRoute<
+      Route<
+        "CREDIT_CARD_ONBOARDING_ATTEMPT_DETAIL",
+        CreditCardOnboardingAttemptDetailScreenNavigationParams
+      >
+    >().params;
+  const navigation = useIONavigation();
   const assistanceToolConfig = useIOSelector(assistanceToolConfigSelector);
   const outcomeCodes = useIOSelector(outcomeCodesSelector);
   const choosenTool = assistanceToolRemoteConfig(assistanceToolConfig);
@@ -160,7 +162,7 @@ const CreditCardOnboardingAttemptDetailScreen = (props: Props) => {
       : undefined;
   return (
     <BaseScreenComponent
-      goBack={() => props.navigation.goBack()}
+      goBack={() => navigation.goBack()}
       showChat={false}
       dark={true}
       headerTitle={I18n.t("wallet.creditCard.onboardingAttempts.title")}
diff --git a/ts/screens/wallet/payment/ConfirmPaymentMethodScreen.tsx b/ts/screens/wallet/payment/ConfirmPaymentMethodScreen.tsx
index d0cc490ec0e..03ade8ddeef 100644
--- a/ts/screens/wallet/payment/ConfirmPaymentMethodScreen.tsx
+++ b/ts/screens/wallet/payment/ConfirmPaymentMethodScreen.tsx
@@ -6,6 +6,7 @@ import * as React from "react";
 import { View, Alert, SafeAreaView, StyleSheet, Text } from "react-native";
 import { connect } from "react-redux";
 import { IOColors, Icon, HSpacer, VSpacer } from "@pagopa/io-app-design-system";
+import { Route, useRoute } from "@react-navigation/native";
 import { ImportoEuroCents } from "../../../../definitions/backend/ImportoEuroCents";
 import { PaymentRequestsGetResponse } from "../../../../definitions/backend/PaymentRequestsGetResponse";
 import { PspData } from "../../../../definitions/pagopa/PspData";
@@ -18,13 +19,14 @@ import { H3 } from "../../../components/core/typography/H3";
 import { H4 } from "../../../components/core/typography/H4";
 import { LabelSmall } from "../../../components/core/typography/LabelSmall";
 import { IOStyles } from "../../../components/core/variables/IOStyles";
-import { withLightModalContext } from "../../../components/helpers/withLightModalContext";
-import { withLoadingSpinner } from "../../../components/helpers/withLoadingSpinner";
 import BaseScreenComponent, {
   ContextualHelpPropsMarkdown
 } from "../../../components/screens/BaseScreenComponent";
 import FooterWithButtons from "../../../components/ui/FooterWithButtons";
-import { LightModalContextInterface } from "../../../components/ui/LightModal";
+import {
+  LightModalContext,
+  LightModalContextInterface
+} from "../../../components/ui/LightModal";
 import { getCardIconFromBrandLogo } from "../../../components/wallet/card/Logo";
 import { PayWebViewModal } from "../../../components/wallet/PayWebViewModal";
 import { SelectionBox } from "../../../components/wallet/SelectionBox";
@@ -38,8 +40,7 @@ import {
 } from "../../../common/model/RemoteValue";
 import { BrandImage } from "../../../features/wallet/component/card/BrandImage";
 import I18n from "../../../i18n";
-import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
-import { WalletParamsList } from "../../../navigation/params/WalletParamsList";
+import { useIONavigation } from "../../../navigation/params/AppParamsList";
 import ROUTES from "../../../navigation/routes";
 import {
   navigateToPaymentOutcomeCode,
@@ -90,6 +91,7 @@ import { getLookUpIdPO } from "../../../utils/pmLookUpId";
 import { showToast } from "../../../utils/showToast";
 import { formatNumberCentsToAmount } from "../../../utils/stringBuilder";
 import { openWebUrl } from "../../../utils/url";
+import LoadingSpinnerOverlay from "../../../components/LoadingSpinnerOverlay";
 
 // temporary feature flag since this feature is still WIP
 // (missing task to complete https://pagopa.atlassian.net/browse/IA-684?filter=10121)
@@ -104,15 +106,10 @@ export type ConfirmPaymentMethodScreenNavigationParams = Readonly<{
   psps: ReadonlyArray<PspData>;
 }>;
 
-type OwnProps = IOStackNavigationRouteProps<
-  WalletParamsList,
-  "PAYMENT_CONFIRM_PAYMENT_METHOD"
->;
-
 type Props = ReturnType<typeof mapStateToProps> &
-  ReturnType<typeof mapDispatchToProps> &
-  LightModalContextInterface &
-  OwnProps;
+  ReturnType<typeof mapDispatchToProps>;
+
+type ConfirmPaymentMethodScreenProps = LightModalContextInterface & Props;
 
 const styles = StyleSheet.create({
   totalContainer: {
@@ -225,7 +222,18 @@ const getPaymentMethodType = (
   }
 };
 
-const ConfirmPaymentMethodScreen: React.FC<Props> = (props: Props) => {
+const ConfirmPaymentMethodScreen: React.FC<ConfirmPaymentMethodScreenProps> = (
+  props: ConfirmPaymentMethodScreenProps
+) => {
+  const navigation = useIONavigation();
+  const { rptId, initialAmount, verifica, idPayment, wallet, psps } =
+    useRoute<
+      Route<
+        "PAYMENT_CONFIRM_PAYMENT_METHOD",
+        ConfirmPaymentMethodScreenNavigationParams
+      >
+    >().params;
+
   React.useEffect(() => {
     // show a toast if we got an error while retrieving pm session token
     if (O.isSome(props.retrievingSessionTokenError)) {
@@ -233,13 +241,28 @@ const ConfirmPaymentMethodScreen: React.FC<Props> = (props: Props) => {
     }
   }, [props.retrievingSessionTokenError]);
 
+  const pickPaymentMethod = () =>
+    navigateToPaymentPickPaymentMethodScreen({
+      rptId,
+      initialAmount,
+      verifica,
+      idPayment
+    });
+  const pickPsp = () =>
+    navigateToPaymentPickPspScreen({
+      rptId,
+      initialAmount,
+      verifica,
+      idPayment,
+      psps,
+      wallet,
+      chooseToChange: true
+    });
+
   const urlPrefix = props.isPagoPATestEnabled
     ? pagoPaApiUrlPrefixTest
     : pagoPaApiUrlPrefix;
 
-  const verifica: PaymentRequestsGetResponse = props.route.params.verifica;
-  const wallet: Wallet = props.route.params.wallet;
-  const idPayment: string = props.route.params.idPayment;
   const paymentReason = verifica.causaleVersamento;
   const maybePsp = O.fromNullable(wallet.psp);
   const isPayingWithPaypal = isRawPayPal(wallet.paymentMethod);
@@ -271,7 +294,7 @@ const ConfirmPaymentMethodScreen: React.FC<Props> = (props: Props) => {
       )
     ) {
       // store the rptid of a payment done
-      props.dispatchPaymentCompleteSuccessfully(props.route.params.rptId);
+      props.dispatchPaymentCompleteSuccessfully(rptId);
       // refresh transactions list
       props.loadTransactions();
     } else {
@@ -304,17 +327,15 @@ const ConfirmPaymentMethodScreen: React.FC<Props> = (props: Props) => {
 
   // navigate to the screen where the user can pick the desired psp
   const handleOnEditPaypalPsp = () => {
-    props.navigation.navigate(ROUTES.WALLET_PAYPAL_UPDATE_PAYMENT_PSP, {
-      idWallet: wallet.idWallet,
-      idPayment
+    navigation.navigate(ROUTES.WALLET_NAVIGATOR, {
+      screen: ROUTES.WALLET_PAYPAL_UPDATE_PAYMENT_PSP,
+      params: { idWallet: wallet.idWallet, idPayment }
     });
   };
 
   // Handle the PSP change, this will trigger
   // a different callback for a payment with PayPal.
-  const handleChangePsp = isPayingWithPaypal
-    ? handleOnEditPaypalPsp
-    : props.pickPsp;
+  const handleChangePsp = isPayingWithPaypal ? handleOnEditPaypalPsp : pickPsp;
 
   const formData = pipe(
     props.payStartWebviewPayload,
@@ -374,167 +395,171 @@ const ConfirmPaymentMethodScreen: React.FC<Props> = (props: Props) => {
   );
 
   return (
-    <BaseScreenComponent
-      goBack={props.onCancel}
-      headerTitle={I18n.t("wallet.ConfirmPayment.header")}
-      contextualHelpMarkdown={contextualHelpMarkdown}
-      faqCategories={["payment"]}
-      backButtonTestID="cancelPaymentButton"
-    >
-      <SafeAreaView style={styles.flex}>
-        <Content noPadded={true}>
-          <View style={IOStyles.horizontalContentPadding}>
-            <VSpacer size={16} />
-
-            <View
-              style={styles.totalContainer}
-              accessibilityRole="header"
-              accessibilityLabel={`${I18n.t(
-                "wallet.ConfirmPayment.total"
-              )} ${formattedTotal}`}
-              accessible
-            >
-              <H1>{I18n.t("wallet.ConfirmPayment.total")}</H1>
-              <H1>{formattedTotal}</H1>
-            </View>
-
-            <VSpacer size={24} />
-
-            <View style={styles.iconRow}>
-              <Icon name="info" size={20} color="bluegrey" />
-              <HSpacer size={8} />
-              <H3 color="bluegrey" accessibilityRole="header">
-                {I18n.t("wallet.ConfirmPayment.paymentInformations")}
-              </H3>
-            </View>
-
-            <VSpacer size={16} />
-
-            <View
-              accessibilityLabel={`${paymentReason}, ${formattedSingleAmount}`}
-              accessible
-            >
-              <H4 weight="SemiBold" color="bluegreyDark" numberOfLines={1}>
-                {paymentReason}
-              </H4>
-
-              <LabelSmall color="bluegrey" weight="Regular">
-                {formattedSingleAmount}
-              </LabelSmall>
-            </View>
-
-            <VSpacer size={24} />
-
-            <View style={styles.iconRow}>
-              <CardIcon width={20} height={20} />
-              <HSpacer size={8} />
-              <H3 color="bluegrey" accessibilityRole="header">
-                {I18n.t("wallet.ConfirmPayment.payWith")}
-              </H3>
-            </View>
-
-            <VSpacer size={16} />
-
-            <SelectionBox
-              logo={paymentMethodInfo.logo}
-              mainText={paymentMethodInfo.caption}
-              subText={paymentMethodInfo.subject}
-              ctaText={I18n.t("wallet.ConfirmPayment.edit")}
-              onPress={props.pickPaymentMethod}
-              accessibilityLabel={`${
-                paymentMethodInfo.accessibilityLabel
-              }, ${I18n.t("wallet.ConfirmPayment.accessibility.edit")}`}
-            />
-
-            <VSpacer size={24} />
-
-            <View style={styles.iconRow}>
-              <TagIcon width={20} height={20} />
-              <HSpacer size={8} />
-              <H3 color="bluegrey" accessibilityRole="header">
-                {I18n.t("wallet.ConfirmPayment.transactionCosts")}
-              </H3>
-            </View>
-
-            <VSpacer size={16} />
-
-            <SelectionBox
-              mainText={formattedFees}
-              subText={pspName}
-              ctaText={
-                canChangePsp ? I18n.t("wallet.ConfirmPayment.edit") : undefined
-              }
-              onPress={canChangePsp ? handleChangePsp : undefined}
-              accessibilityLabel={`${I18n.t(
-                "wallet.ConfirmPayment.accessibility.transactionCosts",
-                {
-                  cost: formattedFees,
-                  psp: pspName
+    <LoadingSpinnerOverlay isLoading={props.isLoading}>
+      <BaseScreenComponent
+        goBack={props.onCancel}
+        headerTitle={I18n.t("wallet.ConfirmPayment.header")}
+        contextualHelpMarkdown={contextualHelpMarkdown}
+        faqCategories={["payment"]}
+        backButtonTestID="cancelPaymentButton"
+      >
+        <SafeAreaView style={styles.flex}>
+          <Content noPadded={true}>
+            <View style={IOStyles.horizontalContentPadding}>
+              <VSpacer size={16} />
+
+              <View
+                style={styles.totalContainer}
+                accessibilityRole="header"
+                accessibilityLabel={`${I18n.t(
+                  "wallet.ConfirmPayment.total"
+                )} ${formattedTotal}`}
+                accessible
+              >
+                <H1>{I18n.t("wallet.ConfirmPayment.total")}</H1>
+                <H1>{formattedTotal}</H1>
+              </View>
+
+              <VSpacer size={24} />
+
+              <View style={styles.iconRow}>
+                <Icon name="info" size={20} color="bluegrey" />
+                <HSpacer size={8} />
+                <H3 color="bluegrey" accessibilityRole="header">
+                  {I18n.t("wallet.ConfirmPayment.paymentInformations")}
+                </H3>
+              </View>
+
+              <VSpacer size={16} />
+
+              <View
+                accessibilityLabel={`${paymentReason}, ${formattedSingleAmount}`}
+                accessible
+              >
+                <H4 weight="SemiBold" color="bluegreyDark" numberOfLines={1}>
+                  {paymentReason}
+                </H4>
+
+                <LabelSmall color="bluegrey" weight="Regular">
+                  {formattedSingleAmount}
+                </LabelSmall>
+              </View>
+
+              <VSpacer size={24} />
+
+              <View style={styles.iconRow}>
+                <CardIcon width={20} height={20} />
+                <HSpacer size={8} />
+                <H3 color="bluegrey" accessibilityRole="header">
+                  {I18n.t("wallet.ConfirmPayment.payWith")}
+                </H3>
+              </View>
+
+              <VSpacer size={16} />
+
+              <SelectionBox
+                logo={paymentMethodInfo.logo}
+                mainText={paymentMethodInfo.caption}
+                subText={paymentMethodInfo.subject}
+                ctaText={I18n.t("wallet.ConfirmPayment.edit")}
+                onPress={pickPaymentMethod}
+                accessibilityLabel={`${
+                  paymentMethodInfo.accessibilityLabel
+                }, ${I18n.t("wallet.ConfirmPayment.accessibility.edit")}`}
+              />
+
+              <VSpacer size={24} />
+
+              <View style={styles.iconRow}>
+                <TagIcon width={20} height={20} />
+                <HSpacer size={8} />
+                <H3 color="bluegrey" accessibilityRole="header">
+                  {I18n.t("wallet.ConfirmPayment.transactionCosts")}
+                </H3>
+              </View>
+
+              <VSpacer size={16} />
+
+              <SelectionBox
+                mainText={formattedFees}
+                subText={pspName}
+                ctaText={
+                  canChangePsp
+                    ? I18n.t("wallet.ConfirmPayment.edit")
+                    : undefined
                 }
-              )}${
-                canChangePsp
-                  ? ", " + I18n.t("wallet.ConfirmPayment.accessibility.edit")
-                  : ""
-              }`}
+                onPress={canChangePsp ? handleChangePsp : undefined}
+                accessibilityLabel={`${I18n.t(
+                  "wallet.ConfirmPayment.accessibility.transactionCosts",
+                  {
+                    cost: formattedFees,
+                    psp: pspName
+                  }
+                )}${
+                  canChangePsp
+                    ? ", " + I18n.t("wallet.ConfirmPayment.accessibility.edit")
+                    : ""
+                }`}
+              />
+
+              {isPayingWithPaypal && privacyUrl && (
+                <>
+                  <VSpacer size={16} />
+
+                  <Text
+                    onPress={() => openWebUrl(privacyUrl)}
+                    accessibilityRole="link"
+                  >
+                    <LabelSmall color="bluegrey" weight="Regular">
+                      {`${I18n.t(
+                        "wallet.onboarding.paypal.paymentCheckout.privacyDisclaimer"
+                      )} `}
+                    </LabelSmall>
+
+                    <LabelSmall weight="SemiBold">
+                      {I18n.t(
+                        "wallet.onboarding.paypal.paymentCheckout.privacyTerms"
+                      )}
+                    </LabelSmall>
+                  </Text>
+                </>
+              )}
+
+              <VSpacer size={40} />
+            </View>
+          </Content>
+
+          {O.isSome(props.payStartWebviewPayload) && (
+            <PayWebViewModal
+              postUri={urlPrefix + payUrlSuffix}
+              formData={formData}
+              showInfoHeader={isPaymentMethodCreditCard}
+              finishPathName={webViewExitPathName}
+              onFinish={handlePaymentOutcome}
+              outcomeQueryparamName={webViewOutcomeParamName}
+              onGoBack={handlePayWebviewGoBack}
+              modalHeaderTitle={I18n.t("wallet.challenge3ds.header")}
             />
+          )}
 
-            {isPayingWithPaypal && privacyUrl && (
-              <>
-                <VSpacer size={16} />
-
-                <Text
-                  onPress={() => openWebUrl(privacyUrl)}
-                  accessibilityRole="link"
-                >
-                  <LabelSmall color="bluegrey" weight="Regular">
-                    {`${I18n.t(
-                      "wallet.onboarding.paypal.paymentCheckout.privacyDisclaimer"
-                    )} `}
-                  </LabelSmall>
-
-                  <LabelSmall weight="SemiBold">
-                    {I18n.t(
-                      "wallet.onboarding.paypal.paymentCheckout.privacyTerms"
-                    )}
-                  </LabelSmall>
-                </Text>
-              </>
+          <FooterWithButtons
+            type="SingleButton"
+            leftButton={confirmButtonProps(
+              () =>
+                props.dispatchPaymentStart({
+                  idWallet: wallet.idWallet,
+                  idPayment,
+                  language: getLocalePrimaryWithFallback()
+                }),
+              `${I18n.t("wallet.ConfirmPayment.pay")} ${formattedTotal}`,
+              undefined,
+              undefined,
+              O.isSome(props.payStartWebviewPayload)
             )}
-
-            <VSpacer size={40} />
-          </View>
-        </Content>
-
-        {O.isSome(props.payStartWebviewPayload) && (
-          <PayWebViewModal
-            postUri={urlPrefix + payUrlSuffix}
-            formData={formData}
-            showInfoHeader={isPaymentMethodCreditCard}
-            finishPathName={webViewExitPathName}
-            onFinish={handlePaymentOutcome}
-            outcomeQueryparamName={webViewOutcomeParamName}
-            onGoBack={handlePayWebviewGoBack}
-            modalHeaderTitle={I18n.t("wallet.challenge3ds.header")}
           />
-        )}
-
-        <FooterWithButtons
-          type="SingleButton"
-          leftButton={confirmButtonProps(
-            () =>
-              props.dispatchPaymentStart({
-                idWallet: wallet.idWallet,
-                idPayment,
-                language: getLocalePrimaryWithFallback()
-              }),
-            `${I18n.t("wallet.ConfirmPayment.pay")} ${formattedTotal}`,
-            undefined,
-            undefined,
-            O.isSome(props.payStartWebviewPayload)
-          )}
-        />
-      </SafeAreaView>
-    </BaseScreenComponent>
+        </SafeAreaView>
+      </BaseScreenComponent>
+    </LoadingSpinnerOverlay>
   );
 };
 const mapStateToProps = (state: GlobalState) => {
@@ -564,29 +589,12 @@ const mapStateToProps = (state: GlobalState) => {
   };
 };
 
-const mapDispatchToProps = (dispatch: Dispatch, props: OwnProps) => {
+const mapDispatchToProps = (dispatch: Dispatch) => {
   const dispatchCancelPayment = () => {
     dispatch(abortRunningPayment());
     showToast(I18n.t("wallet.ConfirmPayment.cancelPaymentSuccess"), "success");
   };
   return {
-    pickPaymentMethod: () =>
-      navigateToPaymentPickPaymentMethodScreen({
-        rptId: props.route.params.rptId,
-        initialAmount: props.route.params.initialAmount,
-        verifica: props.route.params.verifica,
-        idPayment: props.route.params.idPayment
-      }),
-    pickPsp: () =>
-      navigateToPaymentPickPspScreen({
-        rptId: props.route.params.rptId,
-        initialAmount: props.route.params.initialAmount,
-        verifica: props.route.params.verifica,
-        idPayment: props.route.params.idPayment,
-        psps: props.route.params.psps,
-        wallet: props.route.params.wallet,
-        chooseToChange: true
-      }),
     onCancel: () => {
       ActionSheet.show(
         {
@@ -640,7 +648,12 @@ const mapDispatchToProps = (dispatch: Dispatch, props: OwnProps) => {
   };
 };
 
+const ConfirmPaymentMethodScreenWithContext = (props: Props) => {
+  const { ...modalContext } = React.useContext(LightModalContext);
+  return <ConfirmPaymentMethodScreen {...props} {...modalContext} />;
+};
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(withLightModalContext(withLoadingSpinner(ConfirmPaymentMethodScreen)));
+)(ConfirmPaymentMethodScreenWithContext);
diff --git a/ts/screens/wallet/payment/ManualDataInsertionScreen.tsx b/ts/screens/wallet/payment/ManualDataInsertionScreen.tsx
index 4fbf8e07b65..0b8be363e8b 100644
--- a/ts/screens/wallet/payment/ManualDataInsertionScreen.tsx
+++ b/ts/screens/wallet/payment/ManualDataInsertionScreen.tsx
@@ -18,18 +18,17 @@ import { IOColors, VSpacer } from "@pagopa/io-app-design-system";
 import { H1 } from "../../../components/core/typography/H1";
 import { Link } from "../../../components/core/typography/Link";
 import { IOStyles } from "../../../components/core/variables/IOStyles";
-
-import { withLightModalContext } from "../../../components/helpers/withLightModalContext";
 import { LabelledItem } from "../../../components/LabelledItem";
 import BaseScreenComponent, {
   ContextualHelpPropsMarkdown
 } from "../../../components/screens/BaseScreenComponent";
 import FooterWithButtons from "../../../components/ui/FooterWithButtons";
-import { LightModalContextInterface } from "../../../components/ui/LightModal";
+import {
+  LightModalContext,
+  LightModalContextInterface
+} from "../../../components/ui/LightModal";
 import { cancelButtonProps } from "../../../components/buttons/ButtonConfigurations";
 import I18n from "../../../i18n";
-import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
-import { WalletParamsList } from "../../../navigation/params/WalletParamsList";
 import {
   navigateBack,
   navigateToPaymentTransactionSummaryScreen,
@@ -48,15 +47,10 @@ export type ManualDataInsertionScreenNavigationParams = {
   isInvalidAmount?: boolean;
 };
 
-type OwnProps = IOStackNavigationRouteProps<
-  WalletParamsList,
-  "PAYMENT_MANUAL_DATA_INSERTION"
->;
+type Props = ReturnType<typeof mapDispatchToProps> &
+  ReturnType<typeof mapStateToProps>;
 
-type Props = OwnProps &
-  ReturnType<typeof mapDispatchToProps> &
-  ReturnType<typeof mapStateToProps> &
-  LightModalContextInterface;
+type ManualDataInsertionScreenProps = Props & LightModalContextInterface;
 
 type State = Readonly<{
   paymentNoticeNumber: O.Option<
@@ -93,8 +87,11 @@ const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
  *  - integrate contextual help to obtain details on the data to insert for manually identifying the transaction
  *    https://www.pivotaltracker.com/n/projects/2048617/stories/157874540
  */
-class ManualDataInsertionScreen extends React.Component<Props, State> {
-  constructor(props: Props) {
+class ManualDataInsertionScreen extends React.Component<
+  ManualDataInsertionScreenProps,
+  State
+> {
+  constructor(props: ManualDataInsertionScreenProps) {
     super(props);
     this.state = {
       paymentNoticeNumber: O.none,
@@ -317,7 +314,12 @@ const mapStateToProps = (state: GlobalState) => ({
   hasMethodsCanPay: withPaymentFeatureSelector(state).length > 0
 });
 
+const ManualDataInsertionScreenFC = (props: Props) => {
+  const { ...modalContext } = React.useContext(LightModalContext);
+  return <ManualDataInsertionScreen {...props} {...modalContext} />;
+};
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(withLightModalContext(ManualDataInsertionScreen));
+)(ManualDataInsertionScreenFC);
diff --git a/ts/screens/wallet/payment/PaymentOutcomeCodeMessage.tsx b/ts/screens/wallet/payment/PaymentOutcomeCodeMessage.tsx
index 3cf68bc7b43..a7c789e15c5 100644
--- a/ts/screens/wallet/payment/PaymentOutcomeCodeMessage.tsx
+++ b/ts/screens/wallet/payment/PaymentOutcomeCodeMessage.tsx
@@ -6,6 +6,7 @@ import { View } from "react-native";
 import { widthPercentageToDP } from "react-native-responsive-screen";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
+import { Route, useRoute } from "@react-navigation/native";
 import { ImportoEuroCents } from "../../../../definitions/backend/ImportoEuroCents";
 import paymentCompleted from "../../../../img/pictograms/payment-completed.png";
 import { cancelButtonProps } from "../../../components/buttons/ButtonConfigurations";
@@ -14,11 +15,9 @@ import { InfoScreenComponent } from "../../../components/infoScreen/InfoScreenCo
 import { renderInfoRasterImage } from "../../../components/infoScreen/imageRendering";
 import FooterWithButtons from "../../../components/ui/FooterWithButtons";
 import OutcomeCodeMessageComponent from "../../../components/wallet/OutcomeCodeMessageComponent";
-import { WalletPaymentFeebackBanner } from "../../../features/walletV3/payment/components/WalletPaymentFeedbackBanner";
+import { WalletPaymentFeebackBanner } from "../../../features/payments/checkout/components/WalletPaymentFeedbackBanner";
 import { useHardwareBackButton } from "../../../hooks/useHardwareBackButton";
 import I18n from "../../../i18n";
-import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
-import { WalletParamsList } from "../../../navigation/params/WalletParamsList";
 import { navigateToWalletHome } from "../../../store/actions/navigation";
 import { backToEntrypointPayment } from "../../../store/actions/wallet/payment";
 import { profileEmailSelector } from "../../../store/reducers/profile";
@@ -35,14 +34,8 @@ export type PaymentOutcomeCodeMessageNavigationParams = Readonly<{
   fee: ImportoEuroCents;
 }>;
 
-type OwnProps = IOStackNavigationRouteProps<
-  WalletParamsList,
-  "PAYMENT_OUTCOMECODE_MESSAGE"
->;
-
 type Props = ReturnType<typeof mapStateToProps> &
-  ReturnType<typeof mapDispatchToProps> &
-  OwnProps;
+  ReturnType<typeof mapDispatchToProps>;
 
 const SuccessBody = ({ emailAddress }: { emailAddress: string }) => (
   <View>
@@ -101,6 +94,13 @@ const successFooter = (onClose: () => void) => (
  * If the outcome code is of type success the render a single buttons footer that allow the user to go to the wallet home.
  */
 const PaymentOutcomeCodeMessage: React.FC<Props> = (props: Props) => {
+  const { fee } =
+    useRoute<
+      Route<
+        "PAYMENT_OUTCOMECODE_MESSAGE",
+        PaymentOutcomeCodeMessageNavigationParams
+      >
+    >().params;
   const outcomeCode = O.toNullable(props.outcomeCode.outcomeCode);
   const learnMoreLink = "https://io.italia.it/faq/#pagamenti";
   const onLearnMore = () => openWebUrl(learnMoreLink);
@@ -114,7 +114,7 @@ const PaymentOutcomeCodeMessage: React.FC<Props> = (props: Props) => {
     if (pot.isSome(props.verifica)) {
       const totalAmount =
         (props.verifica.value.importoSingoloVersamento as number) +
-        (props.route.params.fee as number);
+        (fee as number);
 
       return successComponent(
         O.getOrElse(() => "")(props.profileEmail),
diff --git a/ts/screens/wallet/payment/PickPaymentMethodScreen.tsx b/ts/screens/wallet/payment/PickPaymentMethodScreen.tsx
index 03e68268c12..ab3436b6a34 100644
--- a/ts/screens/wallet/payment/PickPaymentMethodScreen.tsx
+++ b/ts/screens/wallet/payment/PickPaymentMethodScreen.tsx
@@ -10,6 +10,7 @@ import { FlatList, SafeAreaView } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
 import { connect } from "react-redux";
 import { VSpacer } from "@pagopa/io-app-design-system";
+import { Route, useNavigation, useRoute } from "@react-navigation/native";
 import { PaymentRequestsGetResponse } from "../../../../definitions/backend/PaymentRequestsGetResponse";
 import { withLoadingSpinner } from "../../../components/helpers/withLoadingSpinner";
 import BaseScreenComponent, {
@@ -32,7 +33,10 @@ import {
 } from "../../../common/model/RemoteValue";
 import PaymentStatusSwitch from "../../../features/wallet/component/features/PaymentStatusSwitch";
 import I18n from "../../../i18n";
-import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
+import {
+  IOStackNavigationProp,
+  IOStackNavigationRouteProps
+} from "../../../navigation/params/AppParamsList";
 import { WalletParamsList } from "../../../navigation/params/WalletParamsList";
 import {
   navigateBack,
@@ -282,7 +286,25 @@ const mapDispatchToProps = (dispatch: Dispatch, props: OwnProps) => ({
     })
 });
 
-export default connect(
+const ConnectedPickPaymentMethodScreen = connect(
   mapStateToProps,
   mapDispatchToProps
 )(withLoadingSpinner(PickPaymentMethodScreen));
+
+const PickPaymentMethodScreenFC = () => {
+  const navigation =
+    useNavigation<
+      IOStackNavigationProp<WalletParamsList, "PAYMENT_PICK_PAYMENT_METHOD">
+    >();
+  const route =
+    useRoute<
+      Route<
+        "PAYMENT_PICK_PAYMENT_METHOD",
+        PickPaymentMethodScreenNavigationParams
+      >
+    >();
+  return (
+    <ConnectedPickPaymentMethodScreen navigation={navigation} route={route} />
+  );
+};
+export default PickPaymentMethodScreenFC;
diff --git a/ts/screens/wallet/payment/PickPspScreen.tsx b/ts/screens/wallet/payment/PickPspScreen.tsx
index 77554577f80..edfd5344335 100644
--- a/ts/screens/wallet/payment/PickPspScreen.tsx
+++ b/ts/screens/wallet/payment/PickPspScreen.tsx
@@ -3,21 +3,23 @@ import * as pot from "@pagopa/ts-commons/lib/pot";
 import * as React from "react";
 import { View, FlatList, SafeAreaView, StyleSheet } from "react-native";
 import { connect } from "react-redux";
-
 import { VSpacer } from "@pagopa/io-app-design-system";
+import { Route, useNavigation, useRoute } from "@react-navigation/native";
 import { PaymentRequestsGetResponse } from "../../../../definitions/backend/PaymentRequestsGetResponse";
 import { PspData } from "../../../../definitions/pagopa/PspData";
 import { H1 } from "../../../components/core/typography/H1";
 import { H4 } from "../../../components/core/typography/H4";
 import { H5 } from "../../../components/core/typography/H5";
 import { IOStyles } from "../../../components/core/variables/IOStyles";
-import { withLightModalContext } from "../../../components/helpers/withLightModalContext";
 import ItemSeparatorComponent from "../../../components/ItemSeparatorComponent";
 import BaseScreenComponent, {
   ContextualHelpPropsMarkdown
 } from "../../../components/screens/BaseScreenComponent";
 import FooterWithButtons from "../../../components/ui/FooterWithButtons";
-import { LightModalContextInterface } from "../../../components/ui/LightModal";
+import {
+  LightModalContext,
+  LightModalContextInterface
+} from "../../../components/ui/LightModal";
 import { PspComponent } from "../../../components/wallet/payment/PspComponent";
 import { cancelButtonProps } from "../../../components/buttons/ButtonConfigurations";
 import { LoadingErrorComponent } from "../../../components/LoadingErrorComponent";
@@ -27,7 +29,10 @@ import {
   isLoading
 } from "../../../common/model/RemoteValue";
 import I18n from "../../../i18n";
-import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
+import {
+  IOStackNavigationProp,
+  IOStackNavigationRouteProps
+} from "../../../navigation/params/AppParamsList";
 import { WalletParamsList } from "../../../navigation/params/WalletParamsList";
 import { navigateBack } from "../../../store/actions/navigation";
 import { Dispatch } from "../../../store/actions/types";
@@ -56,9 +61,9 @@ type OwnProps = IOStackNavigationRouteProps<
 >;
 
 type Props = ReturnType<typeof mapStateToProps> &
-  ReturnType<typeof mapDispatchToProps> &
-  LightModalContextInterface &
-  OwnProps;
+  ReturnType<typeof mapDispatchToProps>;
+
+type PickPspScreenProps = LightModalContextInterface & Props & OwnProps;
 
 const styles = StyleSheet.create({
   header: {
@@ -77,7 +82,7 @@ const contextualHelpMarkdown: ContextualHelpPropsMarkdown = {
 /**
  * Select a PSP to be used for a the current selected wallet
  */
-class PickPspScreen extends React.Component<Props> {
+class PickPspScreen extends React.Component<PickPspScreenProps> {
   public componentDidMount() {
     // load all psp in order to offer to the user the complete psps list
     const idWallet = this.props.route.params.wallet.idWallet;
@@ -201,7 +206,26 @@ const mapDispatchToProps = (dispatch: Dispatch, props: OwnProps) => ({
     )
 });
 
-export default connect(
+const ConnectedPickPspScreen = connect(
   mapStateToProps,
   mapDispatchToProps
-)(withLightModalContext(PickPspScreen));
+)(PickPspScreen);
+
+const PickPspScreenFC = () => {
+  const { ...modalContext } = React.useContext(LightModalContext);
+  const navigation =
+    useNavigation<
+      IOStackNavigationProp<WalletParamsList, "PAYMENT_PICK_PSP">
+    >();
+  const route =
+    useRoute<Route<"PAYMENT_PICK_PSP", PickPspScreenNavigationParams>>();
+  return (
+    <ConnectedPickPspScreen
+      {...modalContext}
+      navigation={navigation}
+      route={route}
+    />
+  );
+};
+
+export default PickPspScreenFC;
diff --git a/ts/screens/wallet/payment/TransactionErrorScreen.tsx b/ts/screens/wallet/payment/TransactionErrorScreen.tsx
index 78048ae8ef0..51cfc4d1730 100644
--- a/ts/screens/wallet/payment/TransactionErrorScreen.tsx
+++ b/ts/screens/wallet/payment/TransactionErrorScreen.tsx
@@ -12,6 +12,7 @@ import { ComponentProps } from "react";
 import { View, SafeAreaView } from "react-native";
 import { connect } from "react-redux";
 import { VSpacer, IOPictograms } from "@pagopa/io-app-design-system";
+import { Route, useRoute } from "@react-navigation/native";
 import { Detail_v2Enum } from "../../../../definitions/backend/PaymentProblemJson";
 import { ToolEnum } from "../../../../definitions/content/AssistanceToolConfig";
 import { ZendeskCategory } from "../../../../definitions/content/ZendeskCategory";
@@ -30,8 +31,6 @@ import {
 } from "../../../features/zendesk/store/actions";
 import { useHardwareBackButton } from "../../../hooks/useHardwareBackButton";
 import I18n from "../../../i18n";
-import { IOStackNavigationRouteProps } from "../../../navigation/params/AppParamsList";
-import { WalletParamsList } from "../../../navigation/params/WalletParamsList";
 import { navigateToPaymentManualDataInsertion } from "../../../store/actions/navigation";
 import { Dispatch } from "../../../store/actions/types";
 import {
@@ -80,13 +79,7 @@ export type TransactionErrorScreenNavigationParams = {
   onCancel: () => void;
 };
 
-type OwnProps = IOStackNavigationRouteProps<
-  WalletParamsList,
-  "PAYMENT_TRANSACTION_ERROR"
->;
-
-type Props = OwnProps &
-  ReturnType<typeof mapStateToProps> &
+type Props = ReturnType<typeof mapStateToProps> &
   ReturnType<typeof mapDispatchToProps>;
 
 const imageTimeout: IOPictograms = "inProgress";
@@ -357,9 +350,11 @@ export const errorTransactionUIElements = (
 };
 
 const TransactionErrorScreen = (props: Props) => {
-  const rptId = props.route.params.rptId;
-  const error = props.route.params.error;
-  const onCancel = props.route.params.onCancel;
+  const { rptId, error, onCancel } =
+    useRoute<
+      Route<"PAYMENT_TRANSACTION_ERROR", TransactionErrorScreenNavigationParams>
+    >().params;
+
   const { paymentsHistory } = props;
 
   const codiceAvviso = getCodiceAvviso(rptId);
diff --git a/ts/screens/wallet/payment/TransactionSummaryScreen.tsx b/ts/screens/wallet/payment/TransactionSummaryScreen.tsx
index e0c0952019a..7e23f2635ea 100644
--- a/ts/screens/wallet/payment/TransactionSummaryScreen.tsx
+++ b/ts/screens/wallet/payment/TransactionSummaryScreen.tsx
@@ -1,6 +1,7 @@
 import {
   ButtonSolid,
   ContentWrapper,
+  IOToast,
   VSpacer
 } from "@pagopa/io-app-design-system";
 import {
@@ -17,26 +18,20 @@ import React, { useCallback, useEffect } from "react";
 import { ScrollView, StyleSheet } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useDispatch } from "react-redux";
-import { PaymentRequestsGetResponse } from "../../../../definitions/backend/PaymentRequestsGetResponse";
-import { IOToast } from "../../../components/Toast";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
-import BaseScreenComponent from "../../../components/screens/BaseScreenComponent";
 import {
   isError as isRemoteError,
   isLoading as isRemoteLoading,
   isUndefined
 } from "../../../common/model/RemoteValue";
+import { IOStyles } from "../../../components/core/variables/IOStyles";
+import BaseScreenComponent from "../../../components/screens/BaseScreenComponent";
 import {
   zendeskSelectedCategory,
   zendeskSupportStart
 } from "../../../features/zendesk/store/actions";
 import I18n from "../../../i18n";
 import { WalletParamsList } from "../../../navigation/params/WalletParamsList";
-import {
-  navigateToPaymentPickPaymentMethodScreen,
-  navigateToPaymentTransactionErrorScreen,
-  navigateToWalletAddPaymentMethod
-} from "../../../store/actions/navigation";
+import { navigateToPaymentTransactionErrorScreen } from "../../../store/actions/navigation";
 import {
   PaymentStartOrigin,
   abortRunningPayment,
@@ -46,8 +41,7 @@ import {
   paymentIdPolling,
   paymentInitializeState,
   paymentVerifica,
-  runDeleteActivePaymentSaga,
-  runStartOrResumePaymentActivationSaga
+  runDeleteActivePaymentSaga
 } from "../../../store/actions/wallet/payment";
 import { fetchWalletsRequestWithExpBackoff } from "../../../store/actions/wallet/wallets";
 import { useIOSelector } from "../../../store/hooks";
@@ -55,10 +49,7 @@ import {
   bancomatPayConfigSelector,
   isPaypalEnabledSelector
 } from "../../../store/reducers/backendStatus";
-import {
-  getFavoriteWallet,
-  withPaymentFeatureSelector
-} from "../../../store/reducers/wallet/wallets";
+import { getFavoriteWallet } from "../../../store/reducers/wallet/wallets";
 import customVariables from "../../../theme/variables";
 import { PayloadForAction } from "../../../types/utils";
 import { emptyContextualHelp } from "../../../utils/emptyContextualHelp";
@@ -69,7 +60,6 @@ import {
   getV2ErrorMainType,
   isDuplicatedPayment
 } from "../../../utils/payment";
-import { alertNoPayablePaymentMethods } from "../../../utils/paymentMethod";
 import {
   addTicketCustomField,
   appendLog,
@@ -81,10 +71,10 @@ import {
   zendeskPaymentOrgFiscalCode,
   zendeskPaymentStartOrigin
 } from "../../../utils/supportAssistance";
-import { dispatchPickPspOrConfirm } from "./common";
 import { TransactionSummary } from "./components/TransactionSummary";
 import { TransactionSummaryErrorDetails } from "./components/TransactionSummaryErrorDetails";
 import { TransactionSummaryStatus } from "./components/TransactionSummaryStatus";
+import { useStartOrResumePayment } from "./hooks/useStartOrResumePayment";
 
 export type TransactionSummaryScreenNavigationParams = Readonly<{
   rptId: RptId;
@@ -214,9 +204,6 @@ const TransactionSummaryScreen = (): React.ReactElement => {
     })
   );
 
-  const hasPayableMethods =
-    useIOSelector(withPaymentFeatureSelector).length > 0;
-
   const isLoading =
     pot.isLoading(walletById) ||
     pot.isLoading(paymentVerification) ||
@@ -335,55 +322,13 @@ const TransactionSummaryScreen = (): React.ReactElement => {
       paymentVerifica.request({ rptId, startOrigin: paymentStartOrigin })
     );
 
-  const startOrResumePayment = useCallback(
-    (paymentVerification: PaymentRequestsGetResponse) =>
-      dispatch(
-        runStartOrResumePaymentActivationSaga({
-          rptId,
-          verifica: paymentVerification,
-          onSuccess: idPayment =>
-            dispatchPickPspOrConfirm(dispatch)(
-              rptId,
-              initialAmount,
-              paymentVerification,
-              idPayment,
-              maybeFavoriteWallet,
-              () => {
-                // either we cannot use the default payment method for this
-                // payment, or fetching the PSPs for this payment and the
-                // default wallet has failed, ask the user to pick a wallet
-
-                navigateToPaymentPickPaymentMethodScreen({
-                  rptId,
-                  initialAmount,
-                  verifica: paymentVerification,
-                  idPayment
-                });
-              },
-              hasPayableMethods
-            )
-        })
-      ),
-    [dispatch, hasPayableMethods, initialAmount, maybeFavoriteWallet, rptId]
+  const continueWithPayment = useStartOrResumePayment(
+    rptId,
+    pot.toOption(paymentVerification),
+    initialAmount,
+    maybeFavoriteWallet
   );
 
-  const continueWithPayment = useCallback(() => {
-    if (!pot.isSome(paymentVerification)) {
-      return;
-    }
-    if (hasPayableMethods) {
-      startOrResumePayment(paymentVerification.value);
-      return;
-    }
-
-    alertNoPayablePaymentMethods(() =>
-      navigateToWalletAddPaymentMethod({
-        inPayment: O.none,
-        showOnlyPayablePaymentMethods: true
-      })
-    );
-  }, [hasPayableMethods, startOrResumePayment, paymentVerification]);
-
   const resetPayment = () => {
     dispatch(runDeleteActivePaymentSaga());
     dispatch(paymentInitializeState());
diff --git a/ts/screens/wallet/payment/components/TransactionSummary.tsx b/ts/screens/wallet/payment/components/TransactionSummary.tsx
index c34b96d7b08..de816b5c5b8 100644
--- a/ts/screens/wallet/payment/components/TransactionSummary.tsx
+++ b/ts/screens/wallet/payment/components/TransactionSummary.tsx
@@ -118,7 +118,11 @@ export const TransactionSummary = (props: Props): React.ReactElement => {
 
   const amount = pot.toUndefined(
     pot.map(props.paymentVerification, _ =>
-      formatNumberAmount(centsToAmount(_.importoSingoloVersamento), true)
+      formatNumberAmount(
+        centsToAmount(_.importoSingoloVersamento),
+        true,
+        "right"
+      )
     )
   );
 
diff --git a/ts/screens/wallet/payment/hooks/useStartOrResumePayment.ts b/ts/screens/wallet/payment/hooks/useStartOrResumePayment.ts
new file mode 100644
index 00000000000..6f67538d51f
--- /dev/null
+++ b/ts/screens/wallet/payment/hooks/useStartOrResumePayment.ts
@@ -0,0 +1,131 @@
+import { AmountInEuroCents, RptId } from "@pagopa/io-pagopa-commons/lib/pagopa";
+import * as pot from "@pagopa/ts-commons/lib/pot";
+import * as O from "fp-ts/lib/Option";
+import { pipe } from "fp-ts/lib/function";
+import React from "react";
+import { PaymentRequestsGetResponse } from "../../../../../definitions/backend/PaymentRequestsGetResponse";
+import { isUndefined } from "../../../../common/model/RemoteValue";
+import { useIONavigation } from "../../../../navigation/params/AppParamsList";
+import ROUTES from "../../../../navigation/routes";
+import {
+  paymentAttiva,
+  paymentCheck,
+  paymentIdPolling
+} from "../../../../store/actions/wallet/payment";
+import { useIODispatch, useIOSelector } from "../../../../store/hooks";
+import { withPaymentFeatureSelector } from "../../../../store/reducers/wallet/wallets";
+import { Wallet } from "../../../../types/pagopa";
+import { alertNoPayablePaymentMethods } from "../../../../utils/paymentMethod";
+import { dispatchPickPspOrConfirm } from "../common";
+
+const useStartOrResumePayment = (
+  rptId: RptId,
+  paymentVerification: O.Option<PaymentRequestsGetResponse>,
+  initialAmount: AmountInEuroCents,
+  maybeSelectedWallet: O.Option<Wallet>
+) => {
+  const navigation = useIONavigation();
+  const dispatch = useIODispatch();
+
+  const hasPayableMethods =
+    useIOSelector(withPaymentFeatureSelector).length > 0;
+
+  const paymentAttivaPot = useIOSelector(_ => _.wallet.payment.attiva);
+  const paymentIdPot = useIOSelector(_ => _.wallet.payment.paymentId);
+  const paymentCheckPot = useIOSelector(_ => _.wallet.payment.check);
+  const pspsRemoteValue = useIOSelector(_ => _.wallet.payment.pspsV2.psps);
+
+  React.useEffect(() => {
+    pipe(
+      paymentVerification,
+      O.map(verifica => {
+        if (pot.isNone(paymentAttivaPot)) {
+          // If payment activation has not yet been requested, skip
+          return;
+        }
+
+        if (pot.isNone(paymentIdPot) && !pot.isLoading(paymentIdPot)) {
+          // Poll for payment ID
+          dispatch(paymentIdPolling.request(verifica));
+        }
+
+        if (pot.isSome(paymentIdPot)) {
+          const idPayment = paymentIdPot.value;
+
+          // "check" the payment
+          if (pot.isNone(paymentCheckPot) && !pot.isLoading(paymentCheckPot)) {
+            dispatch(paymentCheck.request(idPayment));
+          }
+
+          if (pot.isSome(paymentCheckPot) && isUndefined(pspsRemoteValue)) {
+            // Navigate to method or PSP selection screen
+            dispatchPickPspOrConfirm(dispatch)(
+              rptId,
+              initialAmount,
+              verifica,
+              idPayment,
+              maybeSelectedWallet,
+              () => {
+                // either we cannot use the default payment method for this
+                // payment, or fetching the PSPs for this payment and the
+                // default wallet has failed, ask the user to pick a wallet
+                navigation.navigate(ROUTES.WALLET_NAVIGATOR, {
+                  screen: ROUTES.PAYMENT_PICK_PAYMENT_METHOD,
+                  params: {
+                    rptId,
+                    initialAmount,
+                    verifica,
+                    idPayment
+                  }
+                });
+              },
+              hasPayableMethods
+            );
+          }
+        }
+      })
+    );
+  }, [
+    dispatch,
+    navigation,
+    paymentVerification,
+    paymentAttivaPot,
+    paymentIdPot,
+    paymentCheckPot,
+    hasPayableMethods,
+    pspsRemoteValue,
+    rptId,
+    initialAmount,
+    maybeSelectedWallet
+  ]);
+
+  return React.useCallback(() => {
+    if (!hasPayableMethods) {
+      alertNoPayablePaymentMethods(() =>
+        navigation.navigate(ROUTES.WALLET_NAVIGATOR, {
+          screen: ROUTES.WALLET_ADD_PAYMENT_METHOD,
+          params: {
+            inPayment: O.none,
+            showOnlyPayablePaymentMethods: true
+          }
+        })
+      );
+
+      return;
+    }
+
+    pipe(
+      paymentVerification,
+      O.map(verifica =>
+        dispatch(
+          paymentAttiva.request({
+            rptId,
+            verifica
+          })
+        )
+      )
+    );
+  }, [dispatch, navigation, hasPayableMethods, rptId, paymentVerification]);
+};
+
+export { useStartOrResumePayment };
diff --git a/ts/store/actions/identification.ts b/ts/store/actions/identification.ts
index ef7ee6250f6..de1c66eb866 100644
--- a/ts/store/actions/identification.ts
+++ b/ts/store/actions/identification.ts
@@ -1,4 +1,8 @@
-import { ActionType, createAction } from "typesafe-actions";
+import {
+  ActionType,
+  createAction,
+  createStandardAction
+} from "typesafe-actions";
 
 import { PinString } from "../../types/PinString";
 import {
@@ -59,13 +63,18 @@ export const identificationStart = createAction(
 );
 
 export const identificationCancel = createAction("IDENTIFICATION_CANCEL");
-export const identificationSuccess = createAction("IDENTIFICATION_SUCCESS");
+export const identificationSuccess = createStandardAction(
+  "IDENTIFICATION_SUCCESS"
+)<{ isBiometric: boolean }>();
 export const identificationFailure = createAction("IDENTIFICATION_FAILURE");
 export const identificationPinReset = createAction("IDENTIFICATION_PIN_RESET");
 export const identificationReset = createAction("IDENTIFICATION_RESET");
 export const identificationForceLogout = createAction(
   "IDENTIFICATION_FORCE_LOGOUT"
 );
+export const identificationHideLockModal = createAction(
+  "IDENTIFICATION_HIDE_LOCK_MODAL"
+);
 
 export type IdentificationActions =
   | ActionType<typeof identificationStart>
@@ -75,4 +84,5 @@ export type IdentificationActions =
   | ActionType<typeof identificationFailure>
   | ActionType<typeof identificationPinReset>
   | ActionType<typeof identificationForceLogout>
-  | ActionType<typeof identificationReset>;
+  | ActionType<typeof identificationReset>
+  | ActionType<typeof identificationHideLockModal>;
diff --git a/ts/store/actions/navigation.ts b/ts/store/actions/navigation.ts
index fde450c7bb1..5964dfb6cb1 100644
--- a/ts/store/actions/navigation.ts
+++ b/ts/store/actions/navigation.ts
@@ -4,7 +4,6 @@ import NavigationService from "../../navigation/NavigationService";
 import ROUTES from "../../navigation/routes";
 import { CieCardReaderScreenNavigationParams } from "../../screens/authentication/cie/CieCardReaderScreen";
 import { OnboardingServicesPreferenceScreenNavigationParams } from "../../screens/onboarding/OnboardingServicesPreferenceScreen";
-import { ServiceDetailsScreenNavigationParams } from "../../screens/services/ServiceDetailsScreen";
 import { AddCardScreenNavigationParams } from "../../screens/wallet/AddCardScreen";
 import { AddCreditCardOutcomeCodeMessageNavigationParams } from "../../screens/wallet/AddCreditCardOutcomeCodeMessage";
 import { AddPaymentMethodScreenNavigationParams } from "../../screens/wallet/AddPaymentMethodScreen";
@@ -25,6 +24,8 @@ import {
   BPayPaymentMethod,
   CreditCardPaymentMethod
 } from "../../types/pagopa";
+import { SERVICES_ROUTES } from "../../features/services/navigation/routes";
+import { ServiceDetailsScreenNavigationParams } from "../../features/services/screens/ServiceDetailsScreen";
 
 /**
  * @deprecated
@@ -111,28 +112,6 @@ export const navigateToServicesPreferenceModeSelectionScreen = (
     })
   );
 
-/**
- * Email
- */
-
-/**
- * @deprecated
- */
-export const navigateToEmailReadScreen = () => {
-  NavigationService.dispatchNavigationAction(
-    CommonActions.navigate(ROUTES.READ_EMAIL_SCREEN)
-  );
-};
-
-/**
- * @deprecated
- */
-export const navigateToEmailInsertScreen = () => {
-  NavigationService.dispatchNavigationAction(
-    CommonActions.navigate(ROUTES.INSERT_EMAIL_SCREEN)
-  );
-};
-
 /**
  * Service
  */
@@ -142,8 +121,8 @@ export const navigateToEmailInsertScreen = () => {
  */
 export const navigateToServiceHomeScreen = () =>
   NavigationService.dispatchNavigationAction(
-    CommonActions.navigate(ROUTES.SERVICES_NAVIGATOR, {
-      screen: ROUTES.SERVICES_HOME
+    CommonActions.navigate(SERVICES_ROUTES.SERVICES_NAVIGATOR, {
+      screen: SERVICES_ROUTES.SERVICES_HOME
     })
   );
 
@@ -154,8 +133,8 @@ export const navigateToServiceDetailsScreen = (
   params: ServiceDetailsScreenNavigationParams
 ) =>
   NavigationService.dispatchNavigationAction(
-    CommonActions.navigate(ROUTES.SERVICES_NAVIGATOR, {
-      screen: ROUTES.SERVICE_DETAIL,
+    CommonActions.navigate(SERVICES_ROUTES.SERVICES_NAVIGATOR, {
+      screen: SERVICES_ROUTES.SERVICE_DETAIL,
       params
     })
   );
diff --git a/ts/store/actions/persistedPreferences.ts b/ts/store/actions/persistedPreferences.ts
index e75ebd10316..e8947101fee 100644
--- a/ts/store/actions/persistedPreferences.ts
+++ b/ts/store/actions/persistedPreferences.ts
@@ -49,6 +49,14 @@ export const preferencesDesignSystemSetEnabled = createStandardAction(
   "PREFERENCES_DESIGN_SYSTEM_SET_ENABLED"
 )<{ isDesignSystemEnabled: boolean }>();
 
+export const preferencesNewWalletSectionSetEnabled = createStandardAction(
+  "PREFERENCES_NEW_WALLET_SECTION_SET_ENABLED"
+)<{ isNewWalletSectionEnabled: boolean }>();
+
+export const preferencesItWalletTestSetEnabled = createStandardAction(
+  "PREFERENCES_ITWALLET_TEST_SET_ENABLED"
+)<{ isItWalletTestEnabled: boolean }>();
+
 export type PersistedPreferencesActions = ActionType<
   // eslint-disable-next-line
   | typeof preferenceFingerprintIsEnabledSaveSuccess
@@ -62,4 +70,6 @@ export type PersistedPreferencesActions = ActionType<
   | typeof preferencesPnTestEnvironmentSetEnabled
   | typeof preferencesIdPayTestSetEnabled
   | typeof preferencesDesignSystemSetEnabled
+  | typeof preferencesNewWalletSectionSetEnabled
+  | typeof preferencesItWalletTestSetEnabled
 >;
diff --git a/ts/store/actions/profile.ts b/ts/store/actions/profile.ts
index 8b77dcba261..6bd55c72e1f 100644
--- a/ts/store/actions/profile.ts
+++ b/ts/store/actions/profile.ts
@@ -82,6 +82,13 @@ export const removeAccountMotivation = createStandardAction(
   "REMOVE_ACCOUNT_MOTIVATION"
 )<RemoveAccountMotivationPayload>();
 
+export const emailValidationPollingStart = createAction(
+  "EMAIL_VALIDATION_POLLING_START"
+);
+export const emailValidationPollingStop = createAction(
+  "EMAIL_VALIDATION_POLLING_STOP"
+);
+
 export type ProfileActions =
   | ActionType<typeof resetProfileState>
   | ActionType<typeof profileLoadSuccess>
@@ -93,4 +100,6 @@ export type ProfileActions =
   | ActionType<typeof profileFirstLogin>
   | ActionType<typeof clearCache>
   | ActionType<typeof removeAccountMotivation>
-  | ActionType<typeof setEmailCheckAtStartupFailure>;
+  | ActionType<typeof setEmailCheckAtStartupFailure>
+  | ActionType<typeof emailValidationPollingStart>
+  | ActionType<typeof emailValidationPollingStop>;
diff --git a/ts/store/actions/services/index.ts b/ts/store/actions/services/index.ts
index 9baf2bd9ae2..763a286f8e0 100644
--- a/ts/store/actions/services/index.ts
+++ b/ts/store/actions/services/index.ts
@@ -15,7 +15,7 @@ import { ServicePublic } from "../../../../definitions/backend/ServicePublic";
 import {
   loadServicePreference,
   upsertServicePreference
-} from "./servicePreference";
+} from "../../../features/services/store/actions";
 
 //
 // service loading at startup
diff --git a/ts/store/actions/types.ts b/ts/store/actions/types.ts
index e64628eb068..6988c953845 100644
--- a/ts/store/actions/types.ts
+++ b/ts/store/actions/types.ts
@@ -16,12 +16,13 @@ import { FciActions } from "../../features/fci/store/actions";
 import { IdPayActions } from "../../features/idpay/common/store/actions";
 import { LollipopActions } from "../../features/lollipop/store/actions/lollipop";
 import { MessagesActions } from "../../features/messages/store/actions";
+import { WalletActions as NewWalletActions } from "../../features/newWallet/store/actions";
+import { PaymentsActions as PaymentsFeatureActions } from "../../features/payments/common/store/actions";
 import { PnActions } from "../../features/pn/store/actions";
 import { AbiActions } from "../../features/wallet/onboarding/bancomat/store/actions";
 import { BPayActions } from "../../features/wallet/onboarding/bancomatPay/store/actions";
 import { CoBadgeActions } from "../../features/wallet/onboarding/cobadge/store/actions";
 import { PayPalOnboardingActions } from "../../features/wallet/onboarding/paypal/store/actions";
-import { WalletActions as WalletV3Actions } from "../../features/walletV3/common/store/actions";
 import { WhatsNewActions } from "../../features/whatsnew/store/actions";
 import { ZendeskSupportActions } from "../../features/zendesk/store/actions";
 import { GlobalState } from "../reducers/types";
@@ -98,7 +99,8 @@ export type Action =
   | LollipopActions
   | FastLoginActions
   | WhatsNewActions
-  | WalletV3Actions;
+  | PaymentsFeatureActions
+  | NewWalletActions;
 
 export type Dispatch = DispatchAPI<Action>;
 
diff --git a/ts/store/actions/wallet/payment.ts b/ts/store/actions/wallet/payment.ts
index c878b6fb94e..e8aecf8ddfd 100644
--- a/ts/store/actions/wallet/payment.ts
+++ b/ts/store/actions/wallet/payment.ts
@@ -239,20 +239,6 @@ export const abortRunningPayment = createStandardAction(
   "PAYMENT_ABORT_RUNNING_PAYMENT"
 )();
 
-//
-// run startOrResumePaymentSaga
-//
-
-type RunStartOrResumePaymentActivationSagaPayload = Readonly<{
-  rptId: RptId;
-  verifica: PaymentRequestsGetResponse;
-  onSuccess: (idPayment: string) => void;
-}>;
-
-export const runStartOrResumePaymentActivationSaga = createStandardAction(
-  "PAYMENT_RUN_START_OR_RESUME_PAYMENT_ACTIVATION_SAGA"
-)<RunStartOrResumePaymentActivationSagaPayload>();
-
 /**
  * the psp selected for the payment
  */
@@ -287,6 +273,12 @@ export const pspForPaymentV2WithCallbacks = createStandardAction(
   onFailure: () => void;
 }>();
 
+// This action is used to notify that wallet sagas handlers have been initialized
+// Used by the Fast Login sagas to wait before dispatching any pending actions
+export const walletPaymentHandlersInitialized = createStandardAction(
+  "WALLET_PAYMENT_HANDLERS_INITIALIZED"
+)();
+
 /**
  * All possible payment actions
  */
@@ -307,7 +299,7 @@ export type PaymentActions =
   | ActionType<typeof runDeleteActivePaymentSaga>
   | ActionType<typeof abortRunningPayment>
   | ActionType<typeof paymentRedirectionUrls>
-  | ActionType<typeof runStartOrResumePaymentActivationSaga>
   | ActionType<typeof pspForPaymentV2>
   | ActionType<typeof pspSelectedForPaymentV2>
-  | ActionType<typeof pspForPaymentV2WithCallbacks>;
+  | ActionType<typeof pspForPaymentV2WithCallbacks>
+  | ActionType<typeof walletPaymentHandlersInitialized>;
diff --git a/ts/store/hooks.ts b/ts/store/hooks.ts
index cf9150bee82..b42785341b1 100644
--- a/ts/store/hooks.ts
+++ b/ts/store/hooks.ts
@@ -1,6 +1,12 @@
-import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+import {
+  TypedUseSelectorHook,
+  useDispatch,
+  useSelector,
+  useStore
+} from "react-redux";
 import { AppDispatch } from "../App";
 import { GlobalState } from "./reducers/types";
 
 export const useIODispatch = () => useDispatch<AppDispatch>();
 export const useIOSelector: TypedUseSelectorHook<GlobalState> = useSelector;
+export const useIOStore = () => useStore<GlobalState>();
diff --git a/ts/store/middlewares/analytics.ts b/ts/store/middlewares/analytics.ts
index c8a074a678b..cd5ed8c5807 100644
--- a/ts/store/middlewares/analytics.ts
+++ b/ts/store/middlewares/analytics.ts
@@ -106,13 +106,14 @@ import {
   setFavouriteWalletSuccess,
   updatePaymentStatus
 } from "../actions/wallet/wallets";
+import { buildEventProperties } from "../../utils/analytics";
 import { trackContentAction } from "./contentAnalytics";
 import { trackServiceAction } from "./serviceAnalytics";
 
 const trackAction =
   (mp: NonNullable<typeof mixpanel>) =>
   // eslint-disable-next-line complexity
-  (action: Action): Promise<void | ReadonlyArray<null>> => {
+  (action: Action): void | ReadonlyArray<null> => {
     // eslint-disable-next-line sonarjs/max-switch-cases
     switch (action.type) {
       //
@@ -183,12 +184,11 @@ const trackAction =
         // Only in the former case we have a transaction and an amount.
         if (action.payload.kind === "COMPLETED") {
           const amount = action.payload.transaction?.amount.amount;
-          return mp
-            .track(action.type, {
-              amount,
-              kind: action.payload.kind
-            })
-            .then(_ => mp.trackCharge(amount ?? -1));
+          mp.track(action.type, {
+            amount,
+            kind: action.payload.kind
+          });
+          return mp.getPeople().trackCharge(amount ?? -1, {});
         } else {
           return mp.track(action.type, {
             kind: action.payload.kind
@@ -306,10 +306,11 @@ const trackAction =
       case getType(sessionInvalid):
       case getType(logoutSuccess):
       // identification
+      // identificationSuccess is handled separately
+      // because it has a payload.
       case getType(identificationRequest):
       case getType(identificationStart):
       case getType(identificationCancel):
-      case getType(identificationSuccess):
       case getType(identificationFailure):
       case getType(identificationPinReset):
       case getType(identificationForceLogout):
@@ -370,8 +371,15 @@ const trackAction =
           choice: action.payload.choice,
           reason: action.payload.error.message
         });
+      // identification: identificationSuccess
+      case getType(identificationSuccess):
+        return mp.track(
+          action.type,
+          buildEventProperties("UX", "confirm", {
+            identification_method: action.payload.isBiometric ? "bio" : "pin"
+          })
+        );
     }
-    return Promise.resolve();
   };
 
 /*
diff --git a/ts/store/middlewares/contentAnalytics.ts b/ts/store/middlewares/contentAnalytics.ts
index 61dd25325c3..049bbe5791f 100644
--- a/ts/store/middlewares/contentAnalytics.ts
+++ b/ts/store/middlewares/contentAnalytics.ts
@@ -5,7 +5,7 @@ import { loadContextualHelpData, loadIdps } from "../actions/content";
 
 export const trackContentAction =
   (mp: NonNullable<typeof mixpanel>) =>
-  (action: Action): Promise<void> => {
+  (action: Action): void => {
     switch (action.type) {
       case getType(loadContextualHelpData.request):
       case getType(loadContextualHelpData.success):
@@ -18,5 +18,4 @@ export const trackContentAction =
           reason: action.payload
         });
     }
-    return Promise.resolve();
   };
diff --git a/ts/store/middlewares/serviceAnalytics.ts b/ts/store/middlewares/serviceAnalytics.ts
index 322390199b5..f9178177b1b 100644
--- a/ts/store/middlewares/serviceAnalytics.ts
+++ b/ts/store/middlewares/serviceAnalytics.ts
@@ -9,13 +9,12 @@ import {
 import {
   loadServicePreference,
   upsertServicePreference
-} from "../actions/services/servicePreference";
-import { getNetworkErrorMessage } from "../../utils/errors";
+} from "../../features/services/store/actions";
 
 // Isolated tracker for services actions
 export const trackServiceAction =
   (mp: NonNullable<typeof mixpanel>) =>
-  (action: Action): Promise<void> => {
+  (action: Action): void => {
     switch (action.type) {
       case getType(loadServicesDetail):
         return mp.track(action.type, {
@@ -33,7 +32,7 @@ export const trackServiceAction =
       case getType(upsertServicePreference.failure):
         return mp.track(action.type, {
           service_id: action.payload.id,
-          reason: getNetworkErrorMessage(action.payload)
+          reason: action.payload
         });
       case getType(loadVisibleServices.request):
       case getType(loadVisibleServices.success):
@@ -52,5 +51,4 @@ export const trackServiceAction =
           responseStatus: action.payload.kind
         });
     }
-    return Promise.resolve();
   };
diff --git a/ts/store/reducers/__tests__/identification.test.ts b/ts/store/reducers/__tests__/identification.test.ts
index 53a6d8969ed..0d7a0ea189f 100644
--- a/ts/store/reducers/__tests__/identification.test.ts
+++ b/ts/store/reducers/__tests__/identification.test.ts
@@ -29,7 +29,10 @@ describe("Identification reducer", () => {
   });
   it("should return correct state after identification success", () => {
     const startState = reducer(undefined, identificationStartMock);
-    const successState = reducer(startState, identificationSuccess());
+    const successState = reducer(
+      startState,
+      identificationSuccess({ isBiometric: false })
+    );
     expect(successState.progress.kind).toEqual("identified");
     expect(successState.fail).toEqual(undefined);
   });
@@ -85,7 +88,10 @@ describe("Identification reducer", () => {
     };
 
     // after a success the fail state is cleared
-    expectFailStateReset(identificationSuccess(), "identified");
+    expectFailStateReset(
+      identificationSuccess({ isBiometric: false }),
+      "identified"
+    );
 
     // after a reset the fail state is cleared
     expectFailStateReset(identificationReset(), "unidentified");
@@ -109,7 +115,7 @@ describe("Identification reducer", () => {
     // start the full identification sequence from different states
     [
       identificationCancel(),
-      identificationSuccess(),
+      identificationSuccess({ isBiometric: false }),
       identificationStartMock
     ].forEach(action => expectFailSequenceFromStartingState(action));
   });
@@ -119,7 +125,8 @@ describe("Identification reducer", () => {
     pipe(
       identificationResetState,
       expectFailSequence,
-      (state: IdentificationState) => reducer(state, identificationSuccess()),
+      (state: IdentificationState) =>
+        reducer(state, identificationSuccess({ isBiometric: false })),
       expectFailSequence,
       (state: IdentificationState) => reducer(state, identificationReset()),
       expectFailSequence
diff --git a/ts/store/reducers/__tests__/identificationStateMigration.test.ts b/ts/store/reducers/__tests__/identificationStateMigration.test.ts
new file mode 100644
index 00000000000..4208981ecca
--- /dev/null
+++ b/ts/store/reducers/__tests__/identificationStateMigration.test.ts
@@ -0,0 +1,94 @@
+import MockDate from "mockdate";
+import { PersistPartial } from "redux-persist";
+import {
+  IDENTIFICATION_STATE_MIGRATION_VERSION,
+  identificationStateMigration
+} from "..";
+import { IdentificationState } from "../identification";
+
+MockDate.set(new Date("2024-03-13T10:30:20.000Z"));
+
+const lastAttempt = new Date("2024-03-13T10:30:00.000Z");
+
+// "progress" is in black list, so we need to omit it from the presisted state
+type MockState = Omit<IdentificationState, "progress"> & PersistPartial;
+// A mock of the state before the migration
+const previousState: MockState = {
+  _persist: {
+    version: IDENTIFICATION_STATE_MIGRATION_VERSION - 1,
+    rehydrated: true
+  },
+  fail: {
+    nextLegalAttempt: lastAttempt,
+    remainingAttempts: 7,
+    timespanBetweenAttempts: 0
+  }
+};
+
+describe("IdentificationStateMigration", () => {
+  it("should pass the sanity check", () => {
+    const actualDate = new Date();
+    const expectedDate = new Date("2024-03-13T10:30:20.000Z");
+    expect(actualDate).toEqual(expectedDate);
+  });
+});
+
+describe("IdentificationStateMigration", () => {
+  it("should add showLockModal=false to fail object if fail exists and remainingAttempts > 3", () => {
+    // Execute the migration
+    const migratedState = identificationStateMigration["0"](
+      previousState
+    ) as MockState;
+
+    // Assertions
+    expect(migratedState).toHaveProperty("fail");
+    if (migratedState.fail) {
+      // TypeScript guard for type safety
+      expect(migratedState.fail).toHaveProperty("showLockModal");
+      // Validate showLockModal
+      expect(migratedState.fail.showLockModal).toBe(false);
+    }
+  });
+
+  it("should add showLockModal=true to fail object if fail exists and remainingAttempts <= 3", () => {
+    // Setup state with undefined fail
+    const prevStateThatShouldHaveShowLockSetToTrue: MockState = {
+      ...previousState,
+      fail: {
+        nextLegalAttempt: lastAttempt,
+        remainingAttempts: 3,
+        timespanBetweenAttempts: 30
+      }
+    };
+
+    // Execute the migration
+    const migratedState = identificationStateMigration["0"](
+      prevStateThatShouldHaveShowLockSetToTrue
+    ) as MockState;
+
+    // Assertions
+    expect(migratedState).toHaveProperty("fail");
+    if (migratedState.fail) {
+      // TypeScript guard for type safety
+      expect(migratedState.fail).toHaveProperty("showLockModal");
+      // Validate showLockModal value
+      expect(migratedState.fail.showLockModal).toBe(true);
+    }
+  });
+
+  it("should handle cases where fail is undefined or null", () => {
+    // Setup state with undefined fail
+    const prevStateWithUndefinedFail: MockState = {
+      ...previousState,
+      fail: undefined
+    };
+
+    // Execute migration
+    const migratedStateWithUndefinedFail = identificationStateMigration["0"](
+      prevStateWithUndefinedFail
+    ) as MockState;
+
+    // Assertions for undefined fail
+    expect(migratedStateWithUndefinedFail.fail).toBeUndefined();
+  });
+});
diff --git a/ts/store/reducers/__tests__/profile.test.ts b/ts/store/reducers/__tests__/profile.test.ts
index e8fc9ef279d..2c26f7336df 100644
--- a/ts/store/reducers/__tests__/profile.test.ts
+++ b/ts/store/reducers/__tests__/profile.test.ts
@@ -4,11 +4,13 @@ import mockedProfile from "../../../__mocks__/initializedProfile";
 import {
   hasProfileEmail,
   isProfileEmailValidated,
+  isProfileEmailValidatedSelector,
   isProfileFirstOnBoarding,
   profileEmailSelector,
   ProfileState
 } from "../profile";
 import { ServicesPreferencesModeEnum } from "../../../../definitions/backend/ServicesPreferencesMode";
+import { GlobalState } from "../types";
 
 describe("email profile selector", () => {
   const potProfile: ProfileState = pot.some(mockedProfile);
@@ -67,3 +69,222 @@ describe("email profile selector", () => {
     expect(isProfileFirstOnBoarding(potProfile.value)).toStrictEqual(false);
   });
 });
+
+describe("isProfileEmailValidatedSelector", () => {
+  it("should return false for pot.none profile", () => {
+    const state = {
+      profile: pot.none
+    } as GlobalState;
+    const isProfileEmailValidated = isProfileEmailValidatedSelector(state);
+    expect(isProfileEmailValidated).toBe(false);
+  });
+  it("should return false for pot.noneLoading profile", () => {
+    const state = {
+      profile: pot.noneLoading
+    } as GlobalState;
+    const isProfileEmailValidated = isProfileEmailValidatedSelector(state);
+    expect(isProfileEmailValidated).toBe(false);
+  });
+  it("should return false for pot.noneUpdating profile", () => {
+    const state = {
+      profile: pot.noneUpdating({
+        email: "namesurname@domain.com",
+        is_email_validated: true
+      })
+    } as GlobalState;
+    const isProfileEmailValidated = isProfileEmailValidatedSelector(state);
+    expect(isProfileEmailValidated).toBe(false);
+  });
+  it("should return false for pot.noneError profile", () => {
+    const state = {
+      profile: pot.noneError(new Error())
+    } as GlobalState;
+    const isProfileEmailValidated = isProfileEmailValidatedSelector(state);
+    expect(isProfileEmailValidated).toBe(false);
+  });
+  it("should return false for pot.some profile with undefined email", () => {
+    const state = {
+      profile: pot.some({
+        is_email_validated: true
+      })
+    } as GlobalState;
+    const isProfileEmailValidated = isProfileEmailValidatedSelector(state);
+    expect(isProfileEmailValidated).toBe(false);
+  });
+  it("should return false for pot.some profile with defined email but undefined is_email_validated", () => {
+    const state = {
+      profile: pot.some({
+        email: "namesurname@domain.com"
+      })
+    } as GlobalState;
+    const isProfileEmailValidated = isProfileEmailValidatedSelector(state);
+    expect(isProfileEmailValidated).toBe(false);
+  });
+  it("should return false for pot.some profile with defined email but false is_email_validated", () => {
+    const state = {
+      profile: pot.some({
+        email: "namesurname@domain.com",
+        is_email_validated: false
+      })
+    } as GlobalState;
+    const isProfileEmailValidated = isProfileEmailValidatedSelector(state);
+    expect(isProfileEmailValidated).toBe(false);
+  });
+  it("should return true for pot.some profile with defined email and validated email", () => {
+    const state = {
+      profile: pot.some({
+        email: "namesurname@domain.com",
+        is_email_validated: true
+      })
+    } as GlobalState;
+    const isProfileEmailValidated = isProfileEmailValidatedSelector(state);
+    expect(isProfileEmailValidated).toBe(true);
+  });
+  it("should return false for pot.someLoading profile with undefined email", () => {
+    const state = {
+      profile: pot.someLoading({
+        is_email_validated: true
+      })
+    } as GlobalState;
+    const isProfileEmailValidated = isProfileEmailValidatedSelector(state);
+    expect(isProfileEmailValidated).toBe(false);
+  });
+  it("should return false for pot.someLoading profile with defined email but undefined is_email_validated", () => {
+    const state = {
+      profile: pot.someLoading({
+        email: "namesurname@domain.com"
+      })
+    } as GlobalState;
+    const isProfileEmailValidated = isProfileEmailValidatedSelector(state);
+    expect(isProfileEmailValidated).toBe(false);
+  });
+  it("should return false for pot.someLoading profile with defined email but false is_email_validated", () => {
+    const state = {
+      profile: pot.someLoading({
+        email: "namesurname@domain.com",
+        is_email_validated: false
+      })
+    } as GlobalState;
+    const isProfileEmailValidated = isProfileEmailValidatedSelector(state);
+    expect(isProfileEmailValidated).toBe(false);
+  });
+  it("should return true for pot.someLoading profile with defined email and validated email", () => {
+    const state = {
+      profile: pot.someLoading({
+        email: "namesurname@domain.com",
+        is_email_validated: true
+      })
+    } as GlobalState;
+    const isProfileEmailValidated = isProfileEmailValidatedSelector(state);
+    expect(isProfileEmailValidated).toBe(true);
+  });
+  it("should return false for pot.someUpdating profile with undefined email", () => {
+    const state = {
+      profile: pot.someUpdating(
+        {
+          is_email_validated: true
+        },
+        {
+          email: "namesurname@domain.com",
+          is_email_validated: true
+        }
+      )
+    } as GlobalState;
+    const isProfileEmailValidated = isProfileEmailValidatedSelector(state);
+    expect(isProfileEmailValidated).toBe(false);
+  });
+  it("should return false for pot.someUpdating profile with defined email but undefined is_email_validated", () => {
+    const state = {
+      profile: pot.someUpdating(
+        {
+          email: "namesurname@domain.com"
+        },
+        {
+          email: "namesurname@domain.com",
+          is_email_validated: true
+        }
+      )
+    } as GlobalState;
+    const isProfileEmailValidated = isProfileEmailValidatedSelector(state);
+    expect(isProfileEmailValidated).toBe(false);
+  });
+  it("should return false for pot.someUpdating profile with defined email but false is_email_validated", () => {
+    const state = {
+      profile: pot.someUpdating(
+        {
+          email: "namesurname@domain.com",
+          is_email_validated: false
+        },
+        {
+          email: "namesurname@domain.com",
+          is_email_validated: true
+        }
+      )
+    } as GlobalState;
+    const isProfileEmailValidated = isProfileEmailValidatedSelector(state);
+    expect(isProfileEmailValidated).toBe(false);
+  });
+  it("should return true for pot.someUpdating profile with defined email and validated email", () => {
+    const state = {
+      profile: pot.someUpdating(
+        {
+          email: "namesurname@domain.com",
+          is_email_validated: true
+        },
+        {}
+      )
+    } as GlobalState;
+    const isProfileEmailValidated = isProfileEmailValidatedSelector(state);
+    expect(isProfileEmailValidated).toBe(true);
+  });
+  it("should return false for pot.someError profile with undefined email", () => {
+    const state = {
+      profile: pot.someError(
+        {
+          is_email_validated: true
+        },
+        new Error()
+      )
+    } as GlobalState;
+    const isProfileEmailValidated = isProfileEmailValidatedSelector(state);
+    expect(isProfileEmailValidated).toBe(false);
+  });
+  it("should return false for pot.someError profile with defined email but undefined is_email_validated", () => {
+    const state = {
+      profile: pot.someError(
+        {
+          email: "namesurname@domain.com"
+        },
+        new Error()
+      )
+    } as GlobalState;
+    const isProfileEmailValidated = isProfileEmailValidatedSelector(state);
+    expect(isProfileEmailValidated).toBe(false);
+  });
+  it("should return false for pot.someError profile with defined email but false is_email_validated", () => {
+    const state = {
+      profile: pot.someError(
+        {
+          email: "namesurname@domain.com",
+          is_email_validated: false
+        },
+        new Error()
+      )
+    } as GlobalState;
+    const isProfileEmailValidated = isProfileEmailValidatedSelector(state);
+    expect(isProfileEmailValidated).toBe(false);
+  });
+  it("should return true for pot.someError profile with defined email and validated email", () => {
+    const state = {
+      profile: pot.someError(
+        {
+          email: "namesurname@domain.com",
+          is_email_validated: true
+        },
+        new Error()
+      )
+    } as GlobalState;
+    const isProfileEmailValidated = isProfileEmailValidatedSelector(state);
+    expect(isProfileEmailValidated).toBe(true);
+  });
+});
diff --git a/ts/store/reducers/assistanceTools.ts b/ts/store/reducers/assistanceTools.ts
index ec01f4826c8..f58e131b0b0 100644
--- a/ts/store/reducers/assistanceTools.ts
+++ b/ts/store/reducers/assistanceTools.ts
@@ -1,5 +1,4 @@
 import { combineReducers } from "redux";
-import * as pot from "@pagopa/ts-commons/lib/pot";
 import { createSelector } from "reselect";
 import { Action } from "../actions/types";
 import zendeskReducer, {
@@ -10,7 +9,6 @@ import {
   canShowHelp
 } from "../../utils/supportAssistance";
 import { assistanceToolConfigSelector } from "./backendStatus";
-import { isProfileEmailValidatedSelector, profileSelector } from "./profile";
 
 export type AssistanceToolsState = {
   zendesk: ZendeskState;
@@ -21,17 +19,12 @@ const assistanceToolsReducer = combineReducers<AssistanceToolsState, Action>({
 });
 
 // This selector contains the logic to show or not the help button:
-// if remote FF is zendesk + ff local + the profile is not potSome or the email is validated
+// if remote FF is zendesk + ff local
 export const canShowHelpSelector = createSelector(
   assistanceToolConfigSelector,
-  profileSelector,
-  isProfileEmailValidatedSelector,
-  (assistanceToolConfig, profile, isProfileEmailValidated): boolean => {
+  (assistanceToolConfig): boolean => {
     const remoteTool = assistanceToolRemoteConfig(assistanceToolConfig);
-    return canShowHelp(
-      remoteTool,
-      !pot.isSome(profile) || isProfileEmailValidated
-    );
+    return canShowHelp(remoteTool);
   }
 );
 
diff --git a/ts/store/reducers/authentication.ts b/ts/store/reducers/authentication.ts
index fe30867947b..bb21d7be7e5 100644
--- a/ts/store/reducers/authentication.ts
+++ b/ts/store/reducers/authentication.ts
@@ -210,6 +210,9 @@ export const tokenFromNameSelector = (
       )
   );
 
+export const loggedInIdpSelector = (state: GlobalState) =>
+  isLoggedIn(state.authentication) ? state.authentication.idp : undefined;
+
 export const isLoggedInWithTestIdpSelector = (state: GlobalState) =>
   isLoggedIn(state.authentication) && state.authentication.idp.isTestIdp;
 
diff --git a/ts/store/reducers/emailValidation.ts b/ts/store/reducers/emailValidation.ts
index 24f667b11a3..97f000d92b1 100644
--- a/ts/store/reducers/emailValidation.ts
+++ b/ts/store/reducers/emailValidation.ts
@@ -9,6 +9,8 @@ import * as pot from "@pagopa/ts-commons/lib/pot";
 import { getType } from "typesafe-actions";
 import {
   acknowledgeOnEmailValidation,
+  emailValidationPollingStart,
+  emailValidationPollingStop,
   setEmailCheckAtStartupFailure,
   startEmailValidation
 } from "../actions/profile";
@@ -19,16 +21,17 @@ export type EmailValidationState = {
   sendEmailValidationRequest: pot.Pot<void, Error>;
   acknowledgeOnEmailValidated: O.Option<boolean>;
   emailCheckAtStartupFailed: O.Option<boolean>;
+  isEmailValidationPollingRunning: boolean;
 };
 
 const INITIAL_STATE: EmailValidationState = {
   sendEmailValidationRequest: pot.none,
   acknowledgeOnEmailValidated: O.none,
-  emailCheckAtStartupFailed: O.none
+  emailCheckAtStartupFailed: O.none,
+  isEmailValidationPollingRunning: false
 };
 
 // Selector
-
 // return the pot of email validation
 export const emailValidationSelector = (
   state: GlobalState
@@ -55,6 +58,10 @@ const reducer = (
       return { ...state, acknowledgeOnEmailValidated: action.payload };
     case getType(setEmailCheckAtStartupFailure):
       return { ...state, emailCheckAtStartupFailed: action.payload };
+    case getType(emailValidationPollingStart):
+      return { ...state, isEmailValidationPollingRunning: true };
+    case getType(emailValidationPollingStop):
+      return { ...state, isEmailValidationPollingRunning: false };
     default:
       return state;
   }
diff --git a/ts/store/reducers/entities/calendarEvents/calendarEventsByMessageId.ts b/ts/store/reducers/entities/calendarEvents/calendarEventsByMessageId.ts
index 42848084e98..d9d9850e910 100644
--- a/ts/store/reducers/entities/calendarEvents/calendarEventsByMessageId.ts
+++ b/ts/store/reducers/entities/calendarEvents/calendarEventsByMessageId.ts
@@ -47,8 +47,9 @@ const reducer = (
 };
 
 // Selectors
-export const calendarEventByMessageIdSelector =
-  (messageId: string) => (state: GlobalState) =>
-    state.entities.calendarEvents.byMessageId[messageId];
+export const calendarEventByMessageIdSelector = (
+  state: GlobalState,
+  messageId: string
+) => state.entities.calendarEvents.byMessageId[messageId];
 
 export default reducer;
diff --git a/ts/store/reducers/entities/services/__tests__/index.test.ts b/ts/store/reducers/entities/services/__tests__/index.test.ts
index 79eb76c59cb..bcbb3cd5a06 100644
--- a/ts/store/reducers/entities/services/__tests__/index.test.ts
+++ b/ts/store/reducers/entities/services/__tests__/index.test.ts
@@ -24,7 +24,7 @@ import { ServiceName } from "../../../../../../definitions/backend/ServiceName";
 import { ServiceTuple } from "../../../../../../definitions/backend/ServiceTuple";
 import { UserMetadataState } from "../../../userMetadata";
 import { OrganizationsState } from "../../organizations";
-import { ServicesByIdState } from "../servicesById";
+import { ServicesByIdState } from "../../../../../features/services/store/reducers/servicesById";
 import { VisibleServicesState } from "../visibleServices";
 import { ServiceScopeEnum } from "../../../../../../definitions/backend/ServiceScope";
 import { StandardServiceCategoryEnum } from "../../../../../../definitions/backend/StandardServiceCategory";
diff --git a/ts/store/reducers/entities/services/__tests__/servicePreference.test.ts b/ts/store/reducers/entities/services/__tests__/servicePreference.test.ts
deleted file mode 100644
index 9631a34bd56..00000000000
--- a/ts/store/reducers/entities/services/__tests__/servicePreference.test.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-import * as pot from "@pagopa/ts-commons/lib/pot";
-import servicePreferenceReducer, {
-  ServicePreferenceState
-} from "../servicePreference";
-import {
-  loadServicePreference,
-  upsertServicePreference
-} from "../../../../actions/services/servicePreference";
-import {
-  ServicePreference,
-  ServicePreferenceResponse,
-  WithServiceID
-} from "../../../../../types/services/ServicePreferenceResponse";
-import {
-  getNetworkError,
-  getNetworkErrorMessage,
-  NetworkError
-} from "../../../../../utils/errors";
-import { ServiceId } from "../../../../../../definitions/backend/ServiceId";
-
-const initialState: ServicePreferenceState = pot.none;
-
-describe("servicePreferenceReducer", () => {
-  it("should handle the load request of servicePreference", () => {
-    const action = loadServicePreference.request("s1" as ServiceId);
-
-    const updatedState = servicePreferenceReducer(initialState, action);
-
-    expect(updatedState).toMatchObject(pot.noneLoading);
-  });
-
-  it("should handle the success load of servicePreference", () => {
-    const servicePreferenceResponse: ServicePreferenceResponse = {
-      id: "s1" as ServiceId,
-      kind: "success",
-      value: {
-        inbox: true,
-        push: true,
-        email: false,
-        can_access_message_read_status: false,
-        settings_version: 0
-      }
-    };
-
-    const action = loadServicePreference.success(servicePreferenceResponse);
-
-    const updatedState = servicePreferenceReducer(initialState, action);
-
-    expect(updatedState).toMatchObject(pot.some(servicePreferenceResponse));
-  });
-
-  it("should handle the updating request and success case of servicePreference", () => {
-    const state: ServicePreferenceState = pot.some({
-      id: "s1" as ServiceId,
-      kind: "success",
-      value: {
-        inbox: true,
-        push: true,
-        email: false,
-        can_access_message_read_status: false,
-        settings_version: 0
-      }
-    });
-
-    const updatingResponse: WithServiceID<ServicePreference> = {
-      id: "s1" as ServiceId,
-      inbox: true,
-      push: true,
-      email: true,
-      can_access_message_read_status: true,
-      settings_version: 0
-    };
-
-    const requestUpsert = upsertServicePreference.request(updatingResponse);
-
-    const updatingState = servicePreferenceReducer(state, requestUpsert);
-
-    expect(updatingState).toMatchObject(
-      pot.someUpdating(state.value, {
-        id: "s1" as ServiceId,
-        kind: "success",
-        value: {
-          inbox: true,
-          push: true,
-          email: true,
-          can_access_message_read_status: true,
-          settings_version: 0
-        }
-      })
-    );
-
-    const successUpsert = upsertServicePreference.success({
-      id: "s1" as ServiceId,
-      kind: "success",
-      value: {
-        inbox: true,
-        push: true,
-        email: true,
-        can_access_message_read_status: true,
-        settings_version: 0
-      }
-    });
-
-    const updatedState = servicePreferenceReducer(state, successUpsert);
-
-    expect(updatedState).toMatchObject(
-      pot.some({
-        id: "s1" as ServiceId,
-        kind: "success",
-        value: {
-          inbox: true,
-          push: true,
-          email: true,
-          can_access_message_read_status: true,
-          settings_version: 0
-        }
-      })
-    );
-  });
-});
-
-it("should handle the error load of servicePreference", () => {
-  const servicePreferenceError: WithServiceID<NetworkError> = {
-    id: "s1" as ServiceId,
-    ...getNetworkError(new Error("GenericError"))
-  };
-
-  const action = loadServicePreference.failure(servicePreferenceError);
-
-  const updatedState = servicePreferenceReducer(initialState, action);
-
-  expect(updatedState).toMatchObject(
-    pot.noneError(new Error(getNetworkErrorMessage(servicePreferenceError)))
-  );
-});
diff --git a/ts/store/reducers/entities/services/__tests__/servicesById.test.ts b/ts/store/reducers/entities/services/__tests__/servicesById.test.ts
deleted file mode 100644
index 0b916e8cbd8..00000000000
--- a/ts/store/reducers/entities/services/__tests__/servicesById.test.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Tuple2 } from "@pagopa/ts-commons/lib/tuples";
-
-import { removeServiceTuples } from "../../../../actions/services";
-import servicesByIdReducer from "../servicesById";
-
-const initialState = {
-  s1: {},
-  s2: {},
-  s3: {},
-  s4: {},
-  s5: {}
-};
-
-describe("servicesById", () => {
-  it("should handle removeServiceTuples correctly", () => {
-    const action = removeServiceTuples([
-      Tuple2("s2", "a"),
-      Tuple2("s3", "b"),
-      // Not existing serviceId
-      Tuple2("s6", "b")
-    ]);
-
-    const expectedState = {
-      s1: {},
-      s4: {},
-      s5: {}
-    };
-
-    const obtainedState = servicesByIdReducer(initialState as any, action);
-
-    expect(obtainedState).toMatchObject(expectedState);
-  });
-});
diff --git a/ts/store/reducers/entities/services/index.ts b/ts/store/reducers/entities/services/index.ts
index 716e672ba0e..aa8f6b630e1 100644
--- a/ts/store/reducers/entities/services/index.ts
+++ b/ts/store/reducers/entities/services/index.ts
@@ -1,12 +1,20 @@
 /**
  * Services reducer
  */
-import * as O from "fp-ts/lib/Option";
 import * as pot from "@pagopa/ts-commons/lib/pot";
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/lib/Option";
 import { combineReducers } from "redux";
 import { createSelector } from "reselect";
-import { pipe } from "fp-ts/lib/function";
 import { ServicePublic } from "../../../../../definitions/backend/ServicePublic";
+import { ServiceScopeEnum } from "../../../../../definitions/backend/ServiceScope";
+import servicePreferenceReducer, {
+  ServicePreferenceState
+} from "../../../../features/services/store/reducers/servicePreference";
+import servicesByIdReducer, {
+  servicesByIdSelector,
+  ServicesByIdState
+} from "../../../../features/services/store/reducers/servicesById";
 import { isDefined } from "../../../../utils/guards";
 import { isVisibleService } from "../../../../utils/services";
 import { Action } from "../../../actions/types";
@@ -16,7 +24,6 @@ import {
   organizationNamesByFiscalCodeSelector,
   OrganizationNamesByFiscalCodeState
 } from "../organizations/organizationsByFiscalCodeReducer";
-import { ServiceScopeEnum } from "../../../../../definitions/backend/ServiceScope";
 import {
   firstLoadingReducer,
   FirstLoadingState,
@@ -26,10 +33,6 @@ import readServicesByIdReducer, {
   readServicesByIdSelector,
   ReadStateByServicesId
 } from "./readStateByServiceId";
-import servicesByIdReducer, {
-  servicesByIdSelector,
-  ServicesByIdState
-} from "./servicesById";
 import {
   serviceIdsByOrganizationFiscalCodeReducer,
   ServiceIdsByOrganizationFiscalCodeState
@@ -39,9 +42,6 @@ import {
   visibleServicesSelector,
   VisibleServicesState
 } from "./visibleServices";
-import servicePreferenceReducer, {
-  ServicePreferenceState
-} from "./servicePreference";
 
 export type ServicesState = Readonly<{
   // Section to hold the preference for services
diff --git a/ts/store/reducers/entities/services/servicePreference.ts b/ts/store/reducers/entities/services/servicePreference.ts
deleted file mode 100644
index 520d441be2d..00000000000
--- a/ts/store/reducers/entities/services/servicePreference.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as pot from "@pagopa/ts-commons/lib/pot";
-import { getType } from "typesafe-actions";
-import { Action } from "../../../actions/types";
-import {
-  loadServicePreference,
-  upsertServicePreference
-} from "../../../actions/services/servicePreference";
-import { ServicePreferenceResponse } from "../../../../types/services/ServicePreferenceResponse";
-import { getNetworkErrorMessage } from "../../../../utils/errors";
-import { GlobalState } from "../../types";
-
-export type ServicePreferenceState = pot.Pot<ServicePreferenceResponse, Error>;
-
-// Reducer to handle specific service contact preferences (inbox, push, emails)
-const servicePreferenceReducer = (
-  state: ServicePreferenceState = pot.none,
-  action: Action
-): ServicePreferenceState => {
-  switch (action.type) {
-    case getType(loadServicePreference.request):
-      return pot.toLoading(state);
-    case getType(upsertServicePreference.request):
-      const { id, ...payload } = action.payload;
-
-      return pot.toUpdating(state, {
-        id,
-        kind: "success",
-        value: payload
-      });
-    case getType(loadServicePreference.success):
-    case getType(upsertServicePreference.success):
-      return pot.some(action.payload);
-    case getType(loadServicePreference.failure):
-    case getType(upsertServicePreference.failure):
-      return pot.toError(
-        state,
-        new Error(getNetworkErrorMessage(action.payload))
-      );
-  }
-  return state;
-};
-
-export default servicePreferenceReducer;
-
-// Selectors
-export const servicePreferenceSelector = (
-  state: GlobalState
-): ServicePreferenceState => state.entities.services.servicePreference;
diff --git a/ts/store/reducers/identification.ts b/ts/store/reducers/identification.ts
index 9ee81dd984c..73e623b7cc7 100644
--- a/ts/store/reducers/identification.ts
+++ b/ts/store/reducers/identification.ts
@@ -7,6 +7,7 @@ import { PinString } from "../../types/PinString";
 import {
   identificationCancel,
   identificationFailure,
+  identificationHideLockModal,
   identificationReset,
   identificationStart,
   identificationSuccess
@@ -66,6 +67,7 @@ export type IdentificationFailData = {
   remainingAttempts: number;
   nextLegalAttempt: Date;
   timespanBetweenAttempts: number;
+  showLockModal?: boolean;
 };
 
 export type IdentificationState = {
@@ -84,6 +86,20 @@ export const INITIAL_STATE: IdentificationState = {
   fail: undefined
 };
 
+export const fillShowLockModal = (actualErrorData: IdentificationFailData) => {
+  // showLockModal is true if the time gap between now and the next legal attempt
+  // is less than the timespanBetweenAttempts and the remaining attempts are less than 3
+  const timeGap =
+    new Date().getTime() - actualErrorData.nextLegalAttempt.getTime();
+  const showLockModal =
+    actualErrorData.remainingAttempts <= 3 &&
+    timeGap < actualErrorData.timespanBetweenAttempts * 1000;
+  return {
+    ...actualErrorData,
+    showLockModal
+  };
+};
+
 const nextErrorData = (
   errorData: IdentificationFailData
 ): IdentificationFailData => {
@@ -100,7 +116,8 @@ const nextErrorData = (
   return {
     nextLegalAttempt: new Date(Date.now() + newTimespan * 1000),
     remainingAttempts: nextRemainingAttempts,
-    timespanBetweenAttempts: newTimespan
+    timespanBetweenAttempts: newTimespan,
+    showLockModal: nextRemainingAttempts <= 3
   };
 };
 
@@ -136,6 +153,18 @@ const reducer = (
     case getType(identificationReset):
       return INITIAL_STATE;
 
+    case getType(identificationHideLockModal):
+      const failData = state.fail
+        ? {
+            ...state.fail,
+            showLockModal: false
+          }
+        : undefined;
+      return {
+        ...state,
+        fail: failData
+      };
+
     case getType(identificationFailure):
       const newErrorData = pipe(
         state.fail,
@@ -144,7 +173,8 @@ const reducer = (
           () => ({
             nextLegalAttempt: new Date(),
             remainingAttempts: maxAttempts - 1,
-            timespanBetweenAttempts: 0
+            timespanBetweenAttempts: 0,
+            showLockModal: false
           }),
           errorData => nextErrorData(errorData)
         )
diff --git a/ts/store/reducers/index.ts b/ts/store/reducers/index.ts
index 11e8a2ac658..50b1da8ee2e 100644
--- a/ts/store/reducers/index.ts
+++ b/ts/store/reducers/index.ts
@@ -3,7 +3,15 @@
  */
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { combineReducers, Reducer } from "redux";
-import { PersistConfig, persistReducer, purgeStoredState } from "redux-persist";
+import {
+  createMigrate,
+  MigrationManifest,
+  PersistConfig,
+  PersistedState,
+  PersistPartial,
+  persistReducer,
+  purgeStoredState
+} from "redux-persist";
 import { isActionOf } from "typesafe-actions";
 import { versionInfoReducer } from "../../common/versionInfo/store/reducers/versionInfo";
 import bonusReducer from "../../features/bonus/common/store/reducers";
@@ -20,6 +28,7 @@ import createSecureStorage from "../storages/keychain";
 import { DateISO8601Transform } from "../transforms/dateISO8601Tranform";
 import { whatsNewInitialState } from "../../features/whatsnew/store/reducers";
 import { fastLoginOptInInitialState } from "../../features/fastLogin/store/reducers/optInReducer";
+import { isDevEnv } from "../../utils/environment";
 import appStateReducer from "./appState";
 import assistanceToolsReducer from "./assistanceTools";
 import authenticationReducer, {
@@ -41,6 +50,7 @@ import entitiesReducer, {
 } from "./entities";
 import identificationReducer, {
   IdentificationState,
+  fillShowLockModal,
   INITIAL_STATE as identificationInitialState
 } from "./identification";
 import installationReducer from "./installation";
@@ -68,12 +78,29 @@ export const authenticationPersistConfig: PersistConfig = {
   blacklist: ["deepLink"]
 };
 
+export const IDENTIFICATION_STATE_MIGRATION_VERSION = 0;
+export const identificationStateMigration: MigrationManifest = {
+  // version 0
+  // we added showLockModal
+  "0": (state: PersistedState) => {
+    const previousState = state as IdentificationState & PersistPartial;
+    const failData = previousState.fail
+      ? fillShowLockModal(previousState.fail)
+      : undefined;
+    return {
+      ...previousState,
+      fail: failData
+    } as PersistedState;
+  }
+};
 // A custom configuration to store the fail information of the identification section
 export const identificationPersistConfig: PersistConfig = {
   key: "identification",
   storage: AsyncStorage,
   blacklist: ["progress"],
-  transforms: [DateISO8601Transform]
+  transforms: [DateISO8601Transform],
+  version: IDENTIFICATION_STATE_MIGRATION_VERSION,
+  migrate: createMigrate(identificationStateMigration, { debug: isDevEnv })
 };
 
 /**
diff --git a/ts/store/reducers/persistedPreferences.ts b/ts/store/reducers/persistedPreferences.ts
index 106df12a97b..ea9d6bb7f6f 100644
--- a/ts/store/reducers/persistedPreferences.ts
+++ b/ts/store/reducers/persistedPreferences.ts
@@ -19,7 +19,9 @@ import {
   serviceAlertDisplayedOnceSuccess,
   preferencesPnTestEnvironmentSetEnabled,
   preferencesIdPayTestSetEnabled,
-  preferencesDesignSystemSetEnabled
+  preferencesDesignSystemSetEnabled,
+  preferencesNewWalletSectionSetEnabled,
+  preferencesItWalletTestSetEnabled
 } from "../actions/persistedPreferences";
 import { Action } from "../actions/types";
 import { differentProfileLoggedIn } from "../actions/crossSessions";
@@ -38,7 +40,14 @@ export type PersistedPreferencesState = Readonly<{
   isMixpanelEnabled: boolean | null;
   isPnTestEnabled: boolean;
   isIdPayTestEnabled?: boolean;
+  // 'isDesignSystemEnabled' has been introduced without a migration
+  // (PR https://github.com/pagopa/io-app/pull/4427) so there are cases
+  // where its value is `undefined` (when the user updates the app without
+  // changing the variable value later). Typescript cannot detect this so
+  // be sure to handle such case when reading and using this value
   isDesignSystemEnabled: boolean;
+  isNewWalletSectionEnabled: boolean;
+  isItWalletTestEnabled?: boolean;
 }>;
 
 export const initialPreferencesState: PersistedPreferencesState = {
@@ -52,7 +61,9 @@ export const initialPreferencesState: PersistedPreferencesState = {
   isMixpanelEnabled: null,
   isPnTestEnabled: false,
   isIdPayTestEnabled: false,
-  isDesignSystemEnabled: false
+  isDesignSystemEnabled: false,
+  isNewWalletSectionEnabled: false,
+  isItWalletTestEnabled: false
 };
 
 export default function preferencesReducer(
@@ -148,6 +159,20 @@ export default function preferencesReducer(
     };
   }
 
+  if (isActionOf(preferencesNewWalletSectionSetEnabled, action)) {
+    return {
+      ...state,
+      isNewWalletSectionEnabled: action.payload.isNewWalletSectionEnabled
+    };
+  }
+
+  if (isActionOf(preferencesItWalletTestSetEnabled, action)) {
+    return {
+      ...state,
+      isItWalletTestEnabled: action.payload.isItWalletTestEnabled
+    };
+  }
+
   return state;
 }
 
@@ -182,8 +207,19 @@ export const isPnTestEnabledSelector = (state: GlobalState) =>
 export const isIdPayTestEnabledSelector = (state: GlobalState) =>
   !!state.persistedPreferences?.isIdPayTestEnabled;
 
+// 'isDesignSystemEnabled' has been introduced without a migration
+// (PR https://github.com/pagopa/io-app/pull/4427) so there are cases
+// where its value is `undefined` (when the user updates the app without
+// changing the variable value later). Typescript cannot detect this so
+// we must make sure that the signature's return type is respected
 export const isDesignSystemEnabledSelector = (state: GlobalState) =>
-  state.persistedPreferences.isDesignSystemEnabled;
+  state.persistedPreferences.isDesignSystemEnabled ?? false;
+
+export const isNewWalletSectionEnabledSelector = (state: GlobalState) =>
+  state.persistedPreferences?.isNewWalletSectionEnabled ?? false;
+
+export const isItWalletTestEnabledSelector = (state: GlobalState) =>
+  !!state.persistedPreferences?.isItWalletTestEnabled;
 
 // returns the preferred language as an Option from the persisted store
 export const preferredLanguageSelector = createSelector<
diff --git a/ts/store/reducers/profile.ts b/ts/store/reducers/profile.ts
index 715fc9bb1ad..c113f7c627d 100644
--- a/ts/store/reducers/profile.ts
+++ b/ts/store/reducers/profile.ts
@@ -3,6 +3,7 @@
  * It only manages SUCCESS actions because all UI state properties (like loading/error)
  * are managed by different global reducers.
  */
+import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import * as pot from "@pagopa/ts-commons/lib/pot";
 import { createSelector } from "reselect";
@@ -165,13 +166,23 @@ export const isProfileFirstOnBoardingSelector = createSelector(
 );
 
 // return true if the profile pot is some and its field is_email_validated exists and it's true
-export const isProfileEmailValidatedSelector = createSelector(
-  profileSelector,
-  (profile: ProfileState): boolean =>
-    pot.getOrElse(
-      pot.map(profile, p => hasProfileEmail(p) && isProfileEmailValidated(p)),
-      false
-    )
+export const isProfileEmailValidatedSelector = (state: GlobalState) =>
+  pipe(
+    state,
+    profileSelector,
+    profileStatusPot =>
+      pot.map(
+        profileStatusPot,
+        profileStatus =>
+          hasProfileEmail(profileStatus) &&
+          isProfileEmailValidated(profileStatus)
+      ),
+    profileEmailValidatedPot => pot.getOrElse(profileEmailValidatedPot, false)
+  );
+
+export const isEmailValidatedSelector = createSelector(
+  isProfileEmailValidatedSelector,
+  isEmailValidated => isEmailValidated
 );
 
 // return preferences
@@ -288,6 +299,7 @@ const reducer = (
           return pot.some({
             ...currentProfile,
             email: newProfile.email,
+            last_app_version: newProfile.last_app_version,
             is_inbox_enabled: newProfile.is_inbox_enabled === true,
             is_email_enabled: newProfile.is_email_enabled === true,
             is_email_validated: newProfile.is_email_validated === true,
diff --git a/ts/store/sagas/emailValidationPollingSaga.ts b/ts/store/sagas/emailValidationPollingSaga.ts
new file mode 100644
index 00000000000..fba76e2ed6c
--- /dev/null
+++ b/ts/store/sagas/emailValidationPollingSaga.ts
@@ -0,0 +1,31 @@
+// watch for all actions regarding Zendesk
+import { takeLatest, call, put, take, select } from "typed-redux-saga/macro";
+import { Millisecond } from "@pagopa/ts-commons/lib/units";
+import { startTimer } from "../../utils/timer";
+import {
+  emailValidationPollingStart,
+  profileLoadRequest,
+  profileLoadSuccess
+} from "../actions/profile";
+import { emailValidationSelector } from "../reducers/emailValidation";
+
+const GET_PROFILE_POLLING_INTERVAL = 5000 as Millisecond;
+
+function* emailValidationPollingLoop() {
+  // eslint-disable-next-line functional/no-let
+  let profilePollingIsRunning = true;
+
+  while (profilePollingIsRunning) {
+    yield* call(startTimer, GET_PROFILE_POLLING_INTERVAL);
+
+    yield* put(profileLoadRequest());
+    yield* take(profileLoadSuccess);
+    const isEmailValidationSelector = yield* select(emailValidationSelector);
+    profilePollingIsRunning =
+      isEmailValidationSelector.isEmailValidationPollingRunning;
+  }
+}
+
+export function* watchEmailValidationSaga() {
+  yield* takeLatest(emailValidationPollingStart, emailValidationPollingLoop);
+}
diff --git a/ts/utils/__tests__/supportAssistance.test.ts b/ts/utils/__tests__/supportAssistance.test.ts
index ed6499c7d13..f26b926ada1 100644
--- a/ts/utils/__tests__/supportAssistance.test.ts
+++ b/ts/utils/__tests__/supportAssistance.test.ts
@@ -29,16 +29,12 @@ describe("anonymousAssistanceAddress", () => {
 
 describe("canShowHelp", () => {
   it("if assistanceTool is Zendesk, should return true if the email is validated", () => {
-    expect(canShowHelp(ToolEnum.zendesk, true)).toBeTruthy();
-    expect(canShowHelp(ToolEnum.zendesk, false)).toBeFalsy();
+    expect(canShowHelp(ToolEnum.zendesk)).toBeTruthy();
   });
   it("if assistanceTool is instabug, web or none, should return false", () => {
-    expect(canShowHelp(ToolEnum.instabug, true)).toBeFalsy();
-    expect(canShowHelp(ToolEnum.instabug, false)).toBeFalsy();
-    expect(canShowHelp(ToolEnum.web, true)).toBeFalsy();
-    expect(canShowHelp(ToolEnum.none, true)).toBeFalsy();
-    expect(canShowHelp(ToolEnum.web, false)).toBeFalsy();
-    expect(canShowHelp(ToolEnum.none, false)).toBeFalsy();
+    expect(canShowHelp(ToolEnum.instabug)).toBeFalsy();
+    expect(canShowHelp(ToolEnum.web)).toBeFalsy();
+    expect(canShowHelp(ToolEnum.none)).toBeFalsy();
   });
 });
 
diff --git a/ts/utils/analytics.ts b/ts/utils/analytics.ts
index 5b55f71390f..a33877960dc 100644
--- a/ts/utils/analytics.ts
+++ b/ts/utils/analytics.ts
@@ -179,6 +179,26 @@ export function trackLollipopIdpLoginFailure(reason: string) {
   });
 }
 
+export function trackLollipopIsKeyStrongboxBackedSuccess(
+  isStrongboxBacked: boolean
+) {
+  void mixpanelTrack(
+    "LOLLIPOP_IS_KEY_STRONGBOX_BACKED_SUCCESS",
+    buildEventProperties("TECH", undefined, {
+      isStrongboxBacked
+    })
+  );
+}
+
+export function trackLollipopIsKeyStrongboxBackedFailure(reason: string) {
+  void mixpanelTrack(
+    "LOLLIPOP_IS_KEY_STRONGBOX_BACKED_FAILURE",
+    buildEventProperties("KO", undefined, {
+      reason
+    })
+  );
+}
+
 // End of lollipop events
 
 // SPID Login
@@ -190,9 +210,9 @@ export function trackSpidLoginError(
   if (isLoginUtilsError(e)) {
     void mixpanelTrack(eventName, {
       idp: idpName,
-      code: e.userInfo.StatusCode,
-      description: e.userInfo.Error,
-      domain: e.userInfo.URL
+      code: e.userInfo?.statusCode,
+      description: e.userInfo?.error,
+      domain: e.userInfo?.url
     });
   } else {
     const error = e as Error;
diff --git a/ts/utils/calendar.ts b/ts/utils/calendar.ts
index 8f1cab98ccb..748fdbfb2fb 100644
--- a/ts/utils/calendar.ts
+++ b/ts/utils/calendar.ts
@@ -3,12 +3,12 @@ import * as TE from "fp-ts/lib/TaskEither";
 import * as E from "fp-ts/lib/Either";
 import RNCalendarEvents, { Calendar } from "react-native-calendar-events";
 import { Platform } from "react-native";
-import { pipe } from "fp-ts/lib/function";
+import { identity, pipe } from "fp-ts/lib/function";
+import { CreatedMessageWithContentAndAttachments } from "../../definitions/backend/CreatedMessageWithContentAndAttachments";
 import { TranslationKeys } from "../../locales/locales";
 import I18n from "../i18n";
 import { AddCalendarEventPayload } from "../store/actions/calendarEvents";
 import { CalendarEvent } from "../store/reducers/entities/calendarEvents/calendarEventsByMessageId";
-import { CreatedMessageWithContentAndAttachments } from "../../definitions/backend/CreatedMessageWithContentAndAttachments";
 import { formatDateAsReminder } from "./dates";
 import { showToast } from "./showToast";
 
@@ -97,7 +97,7 @@ export function convertLocalCalendarName(calendarTitle: string) {
  * and right is a boolean -> true === the is in calendar
  * @param eventId
  */
-export const isEventInCalendar = (
+export const legacyIsEventInCalendar = (
   eventId: string
 ): TE.TaskEither<Error, boolean> => {
   const authTask = TE.tryCatch(
@@ -208,3 +208,67 @@ export const removeCalendarEventFromDeviceCalendar = (
     showToast(I18n.t("messages.cta.reminderRemoveFailure"), "danger");
   }
 };
+
+/**
+ * Check and request the permission to access the device calendar
+ * @returns a boolean that is true if the permission is granted
+ */
+export const requestCalendarPermission = async (): Promise<boolean> => {
+  const checkResult = await RNCalendarEvents.checkPermissions();
+  if (checkResult === "authorized") {
+    return true;
+  }
+
+  const requestStatus = await RNCalendarEvents.requestPermissions();
+  return requestStatus === "authorized";
+};
+
+/**
+ * Check if the event is in the device calendar
+ */
+export const isEventInCalendar = (eventId: string) =>
+  pipe(
+    TE.tryCatch(() => requestCalendarPermission(), E.toError),
+    TE.chain(TE.fromPredicate(identity, () => Error("Permission not granted"))),
+    TE.chain(() =>
+      TE.tryCatch(() => RNCalendarEvents.findEventById(eventId), E.toError)
+    ),
+    TE.map(ev => ev !== null)
+  );
+
+/**
+ * Add an event to the device calendar
+ */
+export const saveEventToDeviceCalendarTask = (
+  calendarId: string,
+  dueDate: Date,
+  title: string
+) =>
+  TE.tryCatch(
+    () =>
+      RNCalendarEvents.saveEvent(title, {
+        calendarId,
+        startDate: dueDate.toISOString(),
+        endDate: dueDate.toISOString(),
+        allDay: true,
+        alarms: []
+      }),
+    E.toError
+  );
+
+/**
+ * Remove an event from the device calendar
+ */
+export const removeEventFromDeviceCalendarTask = (eventId: string) =>
+  pipe(
+    TE.tryCatch(() => RNCalendarEvents.removeEvent(eventId), E.toError),
+    TE.map(_ => eventId)
+  );
+
+/**
+ * Find the device calendars
+ */
+export const findDeviceCalendarsTask = TE.tryCatch(
+  () => RNCalendarEvents.findCalendars(),
+  E.toError
+);
diff --git a/ts/utils/clipboard.ts b/ts/utils/clipboard.ts
index c27b9f792a4..ee9e5ef120d 100644
--- a/ts/utils/clipboard.ts
+++ b/ts/utils/clipboard.ts
@@ -1,7 +1,7 @@
 import Clipboard from "@react-native-clipboard/clipboard";
+import { IOToast } from "@pagopa/io-app-design-system";
 
 import I18n from "../i18n";
-import { IOToast } from "../components/Toast";
 
 /**
  * Copy a text to the device clipboard and give a feedback.
diff --git a/ts/utils/dates.ts b/ts/utils/dates.ts
index 41b5b99c83a..faba844cd94 100644
--- a/ts/utils/dates.ts
+++ b/ts/utils/dates.ts
@@ -325,8 +325,12 @@ export const toAndroidCacheTimestamp = () =>
  * This function returns a Date object from a string in format "YYYYMM"
  * @param expiryDate
  */
-export const getDateFromExpiryDate = (expiryDate: string): Date => {
-  const year = +expiryDate.slice(0, 4);
-  const month = +expiryDate.slice(4, 6);
-  return new Date(year, month - 1);
+export const getDateFromExpiryDate = (expiryDate: string): Date | undefined => {
+  try {
+    const year = +expiryDate.slice(0, 4);
+    const month = +expiryDate.slice(4, 6);
+    return new Date(year, month - 1);
+  } catch {
+    return undefined;
+  }
 };
diff --git a/ts/utils/hooks/bottomSheet.tsx b/ts/utils/hooks/bottomSheet.tsx
index 4101034eb6d..c9dfded9160 100644
--- a/ts/utils/hooks/bottomSheet.tsx
+++ b/ts/utils/hooks/bottomSheet.tsx
@@ -6,6 +6,11 @@ import {
   useBottomSheetModal
 } from "@gorhom/bottom-sheet";
 import { BottomSheetFooterProps } from "@gorhom/bottom-sheet/lib/typescript/components/bottomSheetFooter";
+import {
+  IOBottomSheetHeaderRadius,
+  IOSpacingScale,
+  IOVisualCostants
+} from "@pagopa/io-app-design-system";
 import { NonEmptyArray } from "fp-ts/lib/NonEmptyArray";
 import * as React from "react";
 import { useCallback, useEffect, useState } from "react";
@@ -18,11 +23,6 @@ import {
   View
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import {
-  IOBottomSheetHeaderRadius,
-  IOSpacingScale,
-  IOVisualCostants
-} from "@pagopa/io-app-design-system";
 import { BottomSheetHeader } from "../../components/bottomSheet/BottomSheetHeader";
 import { IOStyles } from "../../components/core/variables/IOStyles";
 import { useHardwareBackButtonToDismiss } from "../../hooks/useHardwareBackButton";
@@ -40,6 +40,7 @@ const styles = StyleSheet.create({
   bottomSheet: {
     borderTopRightRadius: IOBottomSheetHeaderRadius,
     borderTopLeftRadius: IOBottomSheetHeaderRadius,
+    borderCurve: "continuous",
     // Don't delete the overflow property
     // oterwise the above borderRadius won't work
     overflow: "hidden"
diff --git a/ts/utils/hooks/theme/index.ts b/ts/utils/hooks/theme/index.ts
new file mode 100644
index 00000000000..d3a2d00aa80
--- /dev/null
+++ b/ts/utils/hooks/theme/index.ts
@@ -0,0 +1,21 @@
+import { IOColors, useIOTheme } from "@pagopa/io-app-design-system";
+
+export const useAppBackgroundAccentColor = (): IOColors => {
+  const theme = useIOTheme();
+  return theme["appBackground-accent"];
+};
+
+export const useAppBackgroundAccentColorName = (): string => {
+  const color = useAppBackgroundAccentColor();
+  return IOColors[color];
+};
+
+export const useInteractiveElementDefaultColor = (): IOColors => {
+  const theme = useIOTheme();
+  return theme["interactiveElem-default"];
+};
+
+export const useInteractiveElementDefaultColorName = (): string => {
+  const color = useInteractiveElementDefaultColor();
+  return IOColors[color];
+};
diff --git a/ts/utils/hooks/useBiometricType.ts b/ts/utils/hooks/useBiometricType.ts
new file mode 100644
index 00000000000..764a49f599f
--- /dev/null
+++ b/ts/utils/hooks/useBiometricType.ts
@@ -0,0 +1,26 @@
+import * as React from "react";
+import { BiometricsValidType } from "@pagopa/io-app-design-system";
+import { useIOSelector } from "../../store/hooks";
+import { isFingerprintEnabledSelector } from "../../store/reducers/persistedPreferences";
+import { getBiometricsType, isBiometricsValidType } from "../biometrics";
+
+export const useBiometricType = () => {
+  const isFingerprintEnabled = useIOSelector(isFingerprintEnabledSelector);
+
+  const [biometricType, setBiometricType] = React.useState<
+    BiometricsValidType | undefined
+  >(undefined);
+  React.useEffect(() => {
+    if (isFingerprintEnabled) {
+      getBiometricsType().then(
+        biometricsType =>
+          setBiometricType(
+            isBiometricsValidType(biometricsType) ? biometricsType : undefined
+          ),
+        _ => 0
+      );
+    }
+  }, [isFingerprintEnabled]);
+
+  return { biometricType, isFingerprintEnabled };
+};
diff --git a/ts/utils/identification/index.tsx b/ts/utils/identification/index.tsx
new file mode 100644
index 00000000000..1bcf000cf4a
--- /dev/null
+++ b/ts/utils/identification/index.tsx
@@ -0,0 +1,159 @@
+import * as React from "react";
+import {
+  BiometricsValidType,
+  IOStyles,
+  LabelSmall
+} from "@pagopa/io-app-design-system";
+import { View } from "react-native";
+import I18n from "../../i18n";
+
+export const FAIL_ATTEMPTS_TO_SHOW_ALERT = 4;
+
+export const getBiometryIconName = (
+  biometryPrintableSimpleType: BiometricsValidType
+) => {
+  switch (biometryPrintableSimpleType) {
+    case "BIOMETRICS":
+    case "TOUCH_ID":
+      return I18n.t("identification.unlockCode.accessibility.fingerprint");
+    case "FACE_ID":
+      return I18n.t("identification.unlockCode.accessibility.faceId");
+  }
+};
+
+const getTranlations = () => {
+  // We need a function to handle the translations when the language changes,
+  // or is differnt between the device and the app
+  const unlockCode = I18n.t("identification.instructions.unlockCode");
+  const unlockCodePrefix = I18n.t(
+    "identification.instructions.unlockCodepPrefix"
+  );
+  const fingerprint = I18n.t("identification.instructions.fingerprint");
+  const fingerprintPrefix = I18n.t(
+    "identification.instructions.fingerprintPrefix"
+  );
+  const faceId = I18n.t("identification.instructions.faceId");
+  const faceIdPrefix = I18n.t("identification.instructions.faceIdPrefix");
+  return {
+    unlockCode,
+    unlockCodePrefix,
+    fingerprint,
+    fingerprintPrefix,
+    faceId,
+    faceIdPrefix,
+    congiunction: I18n.t("identification.instructions.congiunction"),
+    unlockCodeInstruction: `${unlockCodePrefix} ${unlockCode}`,
+    fingerprintInstruction: `${fingerprintPrefix} ${fingerprint}`,
+    faceIdInstruction: `${faceIdPrefix} ${faceId}`
+  };
+};
+
+export const getAccessibiliyIdentificationInstructions = (
+  biometricType: BiometricsValidType | undefined,
+  isBimoetricIdentificatoinFailed: boolean = false
+) => {
+  const {
+    unlockCodeInstruction,
+    fingerprintInstruction,
+    faceIdInstruction,
+    congiunction
+  } = getTranlations();
+
+  if (isBimoetricIdentificatoinFailed) {
+    return unlockCodeInstruction;
+  }
+
+  switch (biometricType) {
+    case "BIOMETRICS":
+    case "TOUCH_ID":
+      return `${fingerprintInstruction} ${congiunction} ${unlockCodeInstruction}`;
+    case "FACE_ID":
+      return `${faceIdInstruction} ${congiunction} ${unlockCodeInstruction}`;
+    default:
+      return unlockCodeInstruction;
+  }
+};
+
+export const IdentificationInstructionsComponent = (props: {
+  biometricType: BiometricsValidType | undefined;
+  isBimoetricIdentificatoinFailed: boolean;
+}) => {
+  const { biometricType, isBimoetricIdentificatoinFailed } = props;
+  const a11yInstruction = getAccessibiliyIdentificationInstructions(
+    biometricType,
+    isBimoetricIdentificatoinFailed
+  );
+  const {
+    unlockCode,
+    unlockCodePrefix,
+    fingerprint,
+    fingerprintPrefix,
+    faceId,
+    faceIdPrefix,
+    congiunction
+  } = getTranlations();
+  const instructionComponent = (
+    <View style={IOStyles.row}>
+      <LabelSmall color="white" weight="Regular">
+        {unlockCodePrefix}
+      </LabelSmall>
+      <LabelSmall color="white"> {unlockCode}</LabelSmall>
+    </View>
+  );
+  const instructionComponentWithFingerprint = (
+    <View style={IOStyles.row}>
+      <LabelSmall color="white" weight="Regular">
+        {fingerprintPrefix}
+      </LabelSmall>
+      <LabelSmall color="white"> {fingerprint}</LabelSmall>
+    </View>
+  );
+  const instructionComponentWithFaceId = (
+    <View style={IOStyles.row}>
+      <LabelSmall color="white" weight="Regular">
+        {faceIdPrefix}
+      </LabelSmall>
+      <LabelSmall color="white"> {faceId}</LabelSmall>
+    </View>
+  );
+
+  if (isBimoetricIdentificatoinFailed) {
+    return instructionComponent;
+  }
+
+  switch (biometricType) {
+    case "BIOMETRICS":
+    case "TOUCH_ID":
+      return (
+        <View
+          accessible
+          accessibilityLabel={a11yInstruction}
+          style={IOStyles.row}
+        >
+          {instructionComponentWithFingerprint}
+          <LabelSmall color="white" weight="Regular">
+            {" "}
+            {congiunction}{" "}
+          </LabelSmall>
+          {instructionComponent}
+        </View>
+      );
+    case "FACE_ID":
+      return (
+        <View
+          accessible
+          accessibilityLabel={a11yInstruction}
+          style={IOStyles.row}
+        >
+          {instructionComponentWithFaceId}
+          <LabelSmall color="white" weight="Regular">
+            {" "}
+            {congiunction}{" "}
+          </LabelSmall>
+          {instructionComponent}
+        </View>
+      );
+    default:
+      return instructionComponent;
+  }
+};
diff --git a/ts/utils/internalLink.ts b/ts/utils/internalLink.ts
index 8c1f9d2ba88..70cc9483d7a 100644
--- a/ts/utils/internalLink.ts
+++ b/ts/utils/internalLink.ts
@@ -16,6 +16,7 @@ import FIMS_ROUTES from "../features/fims/navigation/routes";
 import UADONATION_ROUTES from "../features/uaDonations/navigation/routes";
 import ROUTES from "../navigation/routes";
 import { MESSAGES_ROUTES } from "../features/messages/navigation/routes";
+import { SERVICES_ROUTES } from "../features/services/navigation/routes";
 import { isTestEnv } from "./environment";
 import {
   IO_FIMS_LINK_PREFIX,
@@ -37,7 +38,7 @@ const routesToNavigationLink: Record<string, string> = {
   [MESSAGES_ROUTES.MESSAGES_HOME]: "/main/messages",
   [ROUTES.PROFILE_PREFERENCES_HOME]: "/profile/preferences",
   [ROUTES.WALLET_HOME]: "/main/wallet",
-  [ROUTES.SERVICES_HOME]: "/main/services",
+  [SERVICES_ROUTES.SERVICES_HOME]: "/main/services",
   [ROUTES.PROFILE_MAIN]: "/main/profile",
   [ROUTES.PROFILE_PRIVACY]: "/profile/privacy",
   [ROUTES.PROFILE_PRIVACY_MAIN]: "/profile/privacy-main",
@@ -57,7 +58,7 @@ const cgnRoutesToNavigationLink: Record<string, string> = {
 };
 
 const myPortalRoutesToNavigationLink: Record<string, string> = {
-  [ROUTES.SERVICE_WEBVIEW]: "/services/webview"
+  [SERVICES_ROUTES.SERVICE_WEBVIEW]: "/services/webview"
 };
 
 const uaDonationsRoutesToNavigationLink: Record<string, string> = {
diff --git a/ts/utils/supportAssistance.ts b/ts/utils/supportAssistance.ts
index ab446628975..26dd393f941 100644
--- a/ts/utils/supportAssistance.ts
+++ b/ts/utils/supportAssistance.ts
@@ -1,4 +1,4 @@
-import ZendDesk from "@pagopa/io-react-native-zendesk";
+import * as ZendDesk from "@pagopa/io-react-native-zendesk";
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import { ToolEnum } from "../../definitions/content/AssistanceToolConfig";
@@ -144,13 +144,10 @@ export const resetAssistanceData = () => {
 export const hasSubCategories = (zendeskCategory: ZendeskCategory): boolean =>
   (zendeskCategory.zendeskSubCategories?.subCategories ?? []).length > 0;
 // help can be shown only when remote FF is  zendesk + local FF + emailValidated
-export const canShowHelp = (
-  assistanceTool: ToolEnum,
-  isEmailValidated: boolean
-): boolean => {
+export const canShowHelp = (assistanceTool: ToolEnum): boolean => {
   switch (assistanceTool) {
     case ToolEnum.zendesk:
-      return zendeskEnabled && isEmailValidated;
+      return zendeskEnabled;
     case ToolEnum.instabug:
     case ToolEnum.web:
     case ToolEnum.none:
diff --git a/yarn.lock b/yarn.lock
index 063bfb61df9..6290c5b3395 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10,6 +10,14 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@ampproject/remapping@^2.2.0":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"
+  integrity sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
 "@apidevtools/json-schema-ref-parser@^9.0.6":
   version "9.0.9"
   resolved "https://registry.yarnpkg.com/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-9.0.9.tgz#d720f9256e3609621280584f2b47ae165359268b"
@@ -84,6 +92,14 @@
   dependencies:
     "@babel/highlight" "^7.18.6"
 
+"@babel/code-frame@^7.22.13", "@babel/code-frame@^7.23.5":
+  version "7.23.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.23.5.tgz#9009b69a8c602293476ad598ff53e4562e15c244"
+  integrity sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==
+  dependencies:
+    "@babel/highlight" "^7.23.4"
+    chalk "^2.4.2"
+
 "@babel/compat-data@^7.12.5", "@babel/compat-data@^7.12.7":
   version "7.12.7"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.12.7.tgz#9329b4782a7d6bbd7eef57e11addf91ee3ef1e41"
@@ -104,6 +120,11 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.20.14.tgz#4106fc8b755f3e3ee0a0a7c27dde5de1d2b2baf8"
   integrity sha512-0YpKHD6ImkWMEINCyDAD0HLLUH/lPCefG8ld9it8DJB2wnApraKuhgYTvTY1z7UFIfBTGy5LwncZ+5HWWGbhFw==
 
+"@babel/compat-data@^7.23.5":
+  version "7.23.5"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.5.tgz#ffb878728bb6bdcb6f4510aa51b1be9afb8cfd98"
+  integrity sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==
+
 "@babel/core@7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.9.0.tgz#ac977b538b77e132ff706f3b8a4dbad09c03c56e"
@@ -190,7 +211,7 @@
     json5 "^2.2.1"
     semver "^6.3.0"
 
-"@babel/core@^7.14.0", "@babel/core@^7.15.0":
+"@babel/core@^7.14.0":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.9.tgz#6bae81a06d95f4d0dec5bb9d74bbc1f58babdcfe"
   integrity sha512-5ug+SfZCpDAkVp9SFIZAzlW18rlzsOcJGaetCjkySnrXXDUw9AR8cDUm1iByTmdWM6yxX6/zycaV76w3YTF2gw==
@@ -211,6 +232,27 @@
     json5 "^2.2.1"
     semver "^6.3.0"
 
+"@babel/core@^7.18.8", "@babel/core@^7.20.0":
+  version "7.23.7"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.7.tgz#4d8016e06a14b5f92530a13ed0561730b5c6483f"
+  integrity sha512-+UpDgowcmqe36d4NwqvKsyPMlOLNGMsfMmQ5WGCu+siCe3t3dfe9njrzGfdN4qq+bcNUt0+Vw6haRxBOycs4dw==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.23.5"
+    "@babel/generator" "^7.23.6"
+    "@babel/helper-compilation-targets" "^7.23.6"
+    "@babel/helper-module-transforms" "^7.23.3"
+    "@babel/helpers" "^7.23.7"
+    "@babel/parser" "^7.23.6"
+    "@babel/template" "^7.22.15"
+    "@babel/traverse" "^7.23.7"
+    "@babel/types" "^7.23.6"
+    convert-source-map "^2.0.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
+
 "@babel/core@^7.4.5":
   version "7.12.10"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.10.tgz#b79a2e1b9f70ed3d84bbfb6d8c4ef825f606bccd"
@@ -286,6 +328,16 @@
     "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.23.6":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.6.tgz#9e1fca4811c77a10580d17d26b57b036133f3c2e"
+  integrity sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==
+  dependencies:
+    "@babel/types" "^7.23.6"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3"
@@ -373,6 +425,17 @@
     lru-cache "^5.1.1"
     semver "^6.3.0"
 
+"@babel/helper-compilation-targets@^7.23.6":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz#4d79069b16cbcf1461289eccfbbd81501ae39991"
+  integrity sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==
+  dependencies:
+    "@babel/compat-data" "^7.23.5"
+    "@babel/helper-validator-option" "^7.23.5"
+    browserslist "^4.22.2"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
 "@babel/helper-create-class-features-plugin@^7.10.4", "@babel/helper-create-class-features-plugin@^7.10.5":
   version "7.10.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.5.tgz#9f61446ba80e8240b0a5c85c6fdac8459d6f259d"
@@ -468,6 +531,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
   integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
 
+"@babel/helper-environment-visitor@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
+  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
+
 "@babel/helper-explode-assignable-expression@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.10.4.tgz#40a1cd917bff1288f699a94a75b37a1a2dbd8c7c"
@@ -527,6 +595,14 @@
     "@babel/template" "^7.18.10"
     "@babel/types" "^7.19.0"
 
+"@babel/helper-function-name@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
+  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
+  dependencies:
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.23.0"
+
 "@babel/helper-get-function-arity@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz#98c1cbea0e2332f33f9a4661b8ce1505b2c19ba2"
@@ -576,6 +652,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-hoist-variables@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
+  integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-member-expression-to-functions@^7.10.4", "@babel/helper-member-expression-to-functions@^7.10.5":
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.11.0.tgz#ae69c83d84ee82f4b42f96e2a09410935a8f26df"
@@ -639,6 +722,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-module-imports@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
+  integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
+  dependencies:
+    "@babel/types" "^7.22.15"
+
 "@babel/helper-module-transforms@^7.10.4", "@babel/helper-module-transforms@^7.11.0":
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.11.0.tgz#b16f250229e47211abdd84b34b64737c2ab2d359"
@@ -709,6 +799,17 @@
     "@babel/traverse" "^7.20.10"
     "@babel/types" "^7.20.7"
 
+"@babel/helper-module-transforms@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz#d7d12c3c5d30af5b3c0fcab2a6d5217773e2d0f1"
+  integrity sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-module-imports" "^7.22.15"
+    "@babel/helper-simple-access" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/helper-validator-identifier" "^7.22.20"
+
 "@babel/helper-optimise-call-expression@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz#50dc96413d594f995a77905905b05893cd779673"
@@ -757,6 +858,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz#4b8aea3b069d8cb8a72cdfe28ddf5ceca695ef2f"
   integrity sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==
 
+"@babel/helper-plugin-utils@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295"
+  integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==
+
 "@babel/helper-regex@^7.10.4":
   version "7.10.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.10.5.tgz#32dfbb79899073c415557053a19bd055aae50ae0"
@@ -870,6 +976,13 @@
   dependencies:
     "@babel/types" "^7.20.2"
 
+"@babel/helper-simple-access@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz#4938357dc7d782b80ed6dbb03a0fba3d22b1d5de"
+  integrity sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.11.0":
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.11.0.tgz#eec162f112c2f58d3af0af125e3bb57665146729"
@@ -926,11 +1039,23 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-split-export-declaration@^7.22.6":
+  version "7.22.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c"
+  integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-string-parser@^7.18.10", "@babel/helper-string-parser@^7.19.4":
   version "7.19.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
   integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
 
+"@babel/helper-string-parser@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz#9478c707febcbbe1ddb38a3d91a2e054ae622d83"
+  integrity sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==
+
 "@babel/helper-validator-identifier@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
@@ -956,6 +1081,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
   integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
 
+"@babel/helper-validator-identifier@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
+
 "@babel/helper-validator-option@^7.12.1", "@babel/helper-validator-option@^7.12.11":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.11.tgz#d66cb8b7a3e7fe4c6962b32020a131ecf0847f4f"
@@ -971,6 +1101,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
   integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
 
+"@babel/helper-validator-option@^7.23.5":
+  version "7.23.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz#907a3fbd4523426285365d1206c423c4c5520307"
+  integrity sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==
+
 "@babel/helper-wrap-function@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.10.4.tgz#8a6f701eab0ff39f765b5a1cfef409990e624b87"
@@ -1046,6 +1181,15 @@
     "@babel/traverse" "^7.20.13"
     "@babel/types" "^7.20.7"
 
+"@babel/helpers@^7.23.7":
+  version "7.23.8"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.8.tgz#fc6b2d65b16847fd50adddbd4232c76378959e34"
+  integrity sha512-KDqYz4PiOWvDFrdHLPhKtCThtIcKVy6avWD2oG4GEvyQ+XDZwHD4YQd+H2vNMnq2rkdxsDkU82T+Vk8U/WXHRQ==
+  dependencies:
+    "@babel/template" "^7.22.15"
+    "@babel/traverse" "^7.23.7"
+    "@babel/types" "^7.23.6"
+
 "@babel/highlight@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
@@ -1082,6 +1226,15 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.23.4.tgz#edaadf4d8232e1a961432db785091207ead0621b"
+  integrity sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.22.20"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.10.4", "@babel/parser@^7.11.0", "@babel/parser@^7.11.1", "@babel/parser@^7.7.0":
   version "7.11.2"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.11.2.tgz#0882ab8a455df3065ea2dcb4c753b2460a24bead"
@@ -1112,6 +1265,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.15.tgz#eec9f36d8eaf0948bb88c87a46784b5ee9fd0c89"
   integrity sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg==
 
+"@babel/parser@^7.22.15", "@babel/parser@^7.23.6":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.6.tgz#ba1c9e512bda72a47e285ae42aff9d2a635a9e3b"
+  integrity sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==
+
 "@babel/parser@^7.9.4":
   version "7.11.5"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.11.5.tgz#c7ff6303df71080ec7a4f5b8c003c58f1cf51037"
@@ -1365,6 +1523,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-syntax-flow@^7.18.0":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.23.3.tgz#084564e0f3cc21ea6c70c44cff984a1c0509729a"
+  integrity sha512-YZiAIpkJAwQXBJLIQbRFayR5c+gJ35Vcz3bg954k7cd73zqjvhacJuL9RbrzPz8qPmZdgqP6EUKwy0PCNhaaPA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
 "@babel/plugin-syntax-flow@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.18.6.tgz#774d825256f2379d06139be0c723c4dd444f3ca1"
@@ -2255,6 +2420,15 @@
     "@babel/parser" "^7.18.10"
     "@babel/types" "^7.18.10"
 
+"@babel/template@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
+  integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
+  dependencies:
+    "@babel/code-frame" "^7.22.13"
+    "@babel/parser" "^7.22.15"
+    "@babel/types" "^7.22.15"
+
 "@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.11.0", "@babel/traverse@^7.7.0":
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.11.0.tgz#9b996ce1b98f53f7c3e4175115605d56ed07dd24"
@@ -2333,6 +2507,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.23.7":
+  version "7.23.7"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.7.tgz#9a7bf285c928cb99b5ead19c3b1ce5b310c9c305"
+  integrity sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg==
+  dependencies:
+    "@babel/code-frame" "^7.23.5"
+    "@babel/generator" "^7.23.6"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
+    "@babel/helper-hoist-variables" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/parser" "^7.23.6"
+    "@babel/types" "^7.23.6"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
 "@babel/traverse@^7.7.4":
   version "7.14.7"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.14.7.tgz#64007c9774cfdc3abd23b0780bc18a3ce3631753"
@@ -2400,6 +2590,15 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.6.tgz#be33fdb151e1f5a56877d704492c240fc71c7ccd"
+  integrity sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.23.4"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -2857,6 +3056,15 @@
     "@jridgewell/set-array" "^1.0.0"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@jridgewell/gen-mapping@^0.3.0":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"
+  integrity sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
 "@jridgewell/gen-mapping@^0.3.2":
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
@@ -2871,6 +3079,11 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
   integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
 
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz#c08679063f279615a3326583ba3a90d1d82cc721"
+  integrity sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==
+
 "@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.0.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
@@ -2881,6 +3094,19 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
+"@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.4.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
+"@jridgewell/trace-mapping@^0.3.17":
+  version "0.3.22"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz#72a621e5de59f5f1ef792d0793a82ee20f645e4c"
+  integrity sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
 "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.17"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985"
@@ -3051,10 +3277,10 @@
   dependencies:
     "@types/node" ">= 8"
 
-"@pagopa/io-app-design-system@1.20.1":
-  version "1.20.1"
-  resolved "https://registry.yarnpkg.com/@pagopa/io-app-design-system/-/io-app-design-system-1.20.1.tgz#e439ad96e5dc73eeece2172f5141abfbcb30558e"
-  integrity sha512-ClSiEj5BrJpTMfR95wrhLz9FkFmitbZivPdEj2VRgi3Xusoclv8lb2RBUQetpPsVTK0cEV4uWPlthSJG/iNbiA==
+"@pagopa/io-app-design-system@1.33.0":
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/@pagopa/io-app-design-system/-/io-app-design-system-1.33.0.tgz#eab0591ed04458f5adb45e358a69154cb6dd164f"
+  integrity sha512-1wFFGP0xRsjt+OULMtLR/Hk0t5Jj0IfvbshKDbmiY++wlMVUfjKan/s0/gJwe+lL+5x0L1X8Ibw+ynJ03iuzDA==
   dependencies:
     "@pagopa/ts-commons" "^12.0.0"
     "@testing-library/jest-native" "^5.4.2"
@@ -3062,12 +3288,13 @@
     "@types/react-test-renderer" "^18.0.0"
     auto-changelog "^2.4.0"
     lodash "^4.17.21"
+    react-native-easing-gradient "^1.1.1"
     react-native-gesture-handler "^2.12.0"
     react-native-haptic-feedback "^2.0.2"
     react-native-linear-gradient "^2.5.6"
     react-native-reanimated "^2.9.1"
     react-native-safe-area-context "^3.3.2"
-    react-native-svg "^12.3.0"
+    react-native-svg "^15.1.0"
     rn-placeholder "1.3.3"
 
 "@pagopa/io-pagopa-commons@^3.1.0":
@@ -3079,20 +3306,27 @@
     fp-ts "^2.12.1"
     io-ts "^2.2.16"
 
-"@pagopa/io-react-native-crypto@^0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@pagopa/io-react-native-crypto/-/io-react-native-crypto-0.2.1.tgz#3d62b0f0cf45b2a878e4ee0652239ea69089988e"
-  integrity sha512-J+VP1kLXl1lQSJJYFMa+ljW9fWgMIYQskBJZFaVKPrtrZr8MJyrhNzlFUf2/EGwxm3kA+7o7budq6fPqdfVvvg==
+"@pagopa/io-react-native-crypto@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@pagopa/io-react-native-crypto/-/io-react-native-crypto-0.3.0.tgz#4181a53e36d4cd142b93ef133d3d227d9d360f96"
+  integrity sha512-3H5CqJwpEYX14QNUhqbSizJBFBeIQRFv8Bw/46+YILTZpvCloVDjfSrPDsKNLZdC1d05wfUSTGGRncMQOB2kMg==
 
-"@pagopa/io-react-native-login-utils@^0.2.2":
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/@pagopa/io-react-native-login-utils/-/io-react-native-login-utils-0.2.2.tgz#9b37787f98d94fac645e70bda926638b14e59d0d"
-  integrity sha512-rOChvrMsJ5QvfLvcsttGP6M5LZkOWhOD2YVRL4+bMCVqNRMsSDmteBNoMWzWlRcXrKyd2ZORgDEa1zPmMRMhTw==
+"@pagopa/io-react-native-http-client@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@pagopa/io-react-native-http-client/-/io-react-native-http-client-0.1.3.tgz#a02251edc0cfbbd21525ef950dd5e60a49e01200"
+  integrity sha512-YLYUgzyIfzWFA2jnUfkUVsCRfUS8qLbcXgl14MbodibpR2IHAkVJBpDbShExUxoTrj6+FQQITpFbIiLZDxCrLQ==
+  dependencies:
+    auto-changelog "^2.4.0"
 
-"@pagopa/io-react-native-zendesk@^0.3.28":
-  version "0.3.28"
-  resolved "https://registry.yarnpkg.com/@pagopa/io-react-native-zendesk/-/io-react-native-zendesk-0.3.28.tgz#eaef19df577bee000b615f6813d52546a1f2513f"
-  integrity sha512-U6avcojN+lbQgus1aYiggJ19wsqoHcVCm1EN4Dc7E+f32aCCfvsclFSisKd5FpubGsUdEd/x3De/+5At5c+K9w==
+"@pagopa/io-react-native-login-utils@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@pagopa/io-react-native-login-utils/-/io-react-native-login-utils-1.0.0.tgz#26aa8fe2ae2c30f18d2714264524fd281f0f2b12"
+  integrity sha512-9OXV4ebpZAGdFfbV5HOt0YbVhGvVb104KshCA7u74YnsTkJp32FhdIVwoqmerRwNO4rRjwwvDjWZdhT80IrOzA==
+
+"@pagopa/io-react-native-zendesk@^0.3.29":
+  version "0.3.29"
+  resolved "https://registry.yarnpkg.com/@pagopa/io-react-native-zendesk/-/io-react-native-zendesk-0.3.29.tgz#ada8dab8a9ef15e126275baace2084491148bac8"
+  integrity sha512-CskFyF0Sz+EC/ZyJNNMFEX/Avjyn6cKRwE2K+XSTGWDKYLImPraA8YozTljclCdv3DOxk3ZklUsieMG25PfnSw==
 
 "@pagopa/openapi-codegen-ts@^12.2.1":
   version "12.2.1"
@@ -3109,10 +3343,10 @@
     write-yaml-file "^4.1.3"
     yargs "^15.0.1"
 
-"@pagopa/react-native-cie@1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@pagopa/react-native-cie/-/react-native-cie-1.2.0.tgz#7c664e810dfb4ea4e86c2a1a9e7c92ce481781a2"
-  integrity sha512-Dge9dKfsyqNvdc6cn/kEKoAGRQtvsVkO7zNz/oK/CgBGnw9V0h0A1PlogjvN1gsFpGMVuCOC3UiZocxMK95/0A==
+"@pagopa/react-native-cie@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@pagopa/react-native-cie/-/react-native-cie-1.2.1.tgz#f38ca7c714c4943da839d232a4c076cc78f0d833"
+  integrity sha512-6v5DAzy5aTTBag+1idSyClTWRBhZ66kPoh5WXGxZsbKQQSolWhcTyl7pmWDeVG69UnkhIuy8ggXLGQnkrfOSOw==
 
 "@pagopa/ts-commons@^10.15.0":
   version "10.15.0"
@@ -3200,42 +3434,42 @@
     invariant "^2.2.4"
     prop-types "^15.7.2"
 
-"@react-native-community/cli-clean@^8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-8.0.4.tgz#97e16a20e207b95de12e29b03816e8f2b2c80cc7"
-  integrity sha512-IwS1M1NHg6+qL8PThZYMSIMYbZ6Zbx+lIck9PLBskbosFo24M3lCOflOl++Bggjakp6mR+sRXxLMexid/GeOsQ==
+"@react-native-community/cli-clean@^9.2.1":
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-9.2.1.tgz#198c5dd39c432efb5374582073065ff75d67d018"
+  integrity sha512-dyNWFrqRe31UEvNO+OFWmQ4hmqA07bR9Ief/6NnGwx67IO9q83D5PEAf/o96ML6jhSbDwCmpPKhPwwBbsyM3mQ==
   dependencies:
-    "@react-native-community/cli-tools" "^8.0.4"
+    "@react-native-community/cli-tools" "^9.2.1"
     chalk "^4.1.2"
     execa "^1.0.0"
     prompts "^2.4.0"
 
-"@react-native-community/cli-config@^8.0.6":
-  version "8.0.6"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-config/-/cli-config-8.0.6.tgz#041eee7dd8fdef595bf7a3f24228c173bf294a44"
-  integrity sha512-mjVpVvdh8AviiO8xtqeX+BkjqE//NMDnISwsLWSJUfNCwTAPmdR8PGbhgP5O4hWHyJ3WkepTopl0ya7Tfi3ifw==
+"@react-native-community/cli-config@^9.2.1":
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-config/-/cli-config-9.2.1.tgz#54eb026d53621ccf3a9df8b189ac24f6e56b8750"
+  integrity sha512-gHJlBBXUgDN9vrr3aWkRqnYrPXZLztBDQoY97Mm5Yo6MidsEpYo2JIP6FH4N/N2p1TdjxJL4EFtdd/mBpiR2MQ==
   dependencies:
-    "@react-native-community/cli-tools" "^8.0.4"
+    "@react-native-community/cli-tools" "^9.2.1"
     cosmiconfig "^5.1.0"
     deepmerge "^3.2.0"
     glob "^7.1.3"
     joi "^17.2.1"
 
-"@react-native-community/cli-debugger-ui@^8.0.0":
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-8.0.0.tgz#98263dc525e65015e2d6392c940114028f87e8e9"
-  integrity sha512-u2jq06GZwZ9sRERzd9FIgpW6yv4YOW4zz7Ym/B8eSzviLmy3yI/8mxJtvlGW+J8lBsfMcQoqJpqI6Rl1nZy9yQ==
+"@react-native-community/cli-debugger-ui@^9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-9.0.0.tgz#ea5c5dad6008bccd840d858e160d42bb2ced8793"
+  integrity sha512-7hH05ZwU9Tp0yS6xJW0bqcZPVt0YCK7gwj7gnRu1jDNN2kughf6Lg0Ys29rAvtZ7VO1PK5c1O+zs7yFnylQDUA==
   dependencies:
     serve-static "^1.13.1"
 
-"@react-native-community/cli-doctor@^8.0.6":
-  version "8.0.6"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-doctor/-/cli-doctor-8.0.6.tgz#954250155ab2f3a66a54821e071bc4a631d2dfff"
-  integrity sha512-ZQqyT9mJMVeFEVIwj8rbDYGCA2xXjJfsQjWk2iTRZ1CFHfhPSUuUiG8r6mJmTinAP9t+wYcbbIYzNgdSUKnDMw==
+"@react-native-community/cli-doctor@^9.3.0":
+  version "9.3.0"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-doctor/-/cli-doctor-9.3.0.tgz#8817a3fd564453467def5b5bc8aecdc4205eff50"
+  integrity sha512-/fiuG2eDGC2/OrXMOWI5ifq4X1gdYTQhvW2m0TT5Lk1LuFiZsbTCp1lR+XILKekuTvmYNjEGdVpeDpdIWlXdEA==
   dependencies:
-    "@react-native-community/cli-config" "^8.0.6"
-    "@react-native-community/cli-platform-ios" "^8.0.6"
-    "@react-native-community/cli-tools" "^8.0.4"
+    "@react-native-community/cli-config" "^9.2.1"
+    "@react-native-community/cli-platform-ios" "^9.3.0"
+    "@react-native-community/cli-tools" "^9.2.1"
     chalk "^4.1.2"
     command-exists "^1.2.8"
     envinfo "^7.7.2"
@@ -3250,69 +3484,64 @@
     sudo-prompt "^9.0.0"
     wcwidth "^1.0.1"
 
-"@react-native-community/cli-hermes@^8.0.5":
-  version "8.0.5"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-hermes/-/cli-hermes-8.0.5.tgz#639edc6b0ce73f705e4b737e3de1cc47d42516ff"
-  integrity sha512-Zm0wM6SfgYAEX1kfJ1QBvTayabvh79GzmjHyuSnEROVNPbl4PeCG4WFbwy489tGwOP9Qx9fMT5tRIFCD8bp6/g==
+"@react-native-community/cli-hermes@^9.3.4":
+  version "9.3.4"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-hermes/-/cli-hermes-9.3.4.tgz#47851847c4990272687883bd8bf53733d5f3c341"
+  integrity sha512-VqTPA7kknCXgtYlRf+sDWW4yxZ6Gtg1Ga+Rdrn1qSKuo09iJ8YKPoQYOu5nqbIYJQAEhorWQyo1VvNgd0wd49w==
   dependencies:
-    "@react-native-community/cli-platform-android" "^8.0.5"
-    "@react-native-community/cli-tools" "^8.0.4"
+    "@react-native-community/cli-platform-android" "^9.3.4"
+    "@react-native-community/cli-tools" "^9.2.1"
     chalk "^4.1.2"
     hermes-profile-transformer "^0.0.6"
     ip "^1.1.5"
 
-"@react-native-community/cli-platform-android@^8.0.4", "@react-native-community/cli-platform-android@^8.0.5":
-  version "8.0.5"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-android/-/cli-platform-android-8.0.5.tgz#da11d2678adeca98e83494d68de80e50571b4af4"
-  integrity sha512-z1YNE4T1lG5o9acoQR1GBvf7mq6Tzayqo/za5sHVSOJAC9SZOuVN/gg/nkBa9a8n5U7qOMFXfwhTMNqA474gXA==
+"@react-native-community/cli-platform-android@9.3.4", "@react-native-community/cli-platform-android@^9.3.4":
+  version "9.3.4"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-android/-/cli-platform-android-9.3.4.tgz#42f22943b6ee15713add6af8608c1d0ebf79d774"
+  integrity sha512-BTKmTMYFuWtMqimFQJfhRyhIWw1m+5N5svR1S5+DqPcyFuSXrpNYDWNSFR8E105xUbFANmsCZZQh6n1WlwMpOA==
   dependencies:
-    "@react-native-community/cli-tools" "^8.0.4"
+    "@react-native-community/cli-tools" "^9.2.1"
     chalk "^4.1.2"
     execa "^1.0.0"
     fs-extra "^8.1.0"
     glob "^7.1.3"
-    jetifier "^1.6.2"
-    lodash "^4.17.15"
     logkitty "^0.7.1"
     slash "^3.0.0"
 
-"@react-native-community/cli-platform-ios@^8.0.4", "@react-native-community/cli-platform-ios@^8.0.6":
-  version "8.0.6"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-ios/-/cli-platform-ios-8.0.6.tgz#ab80cd4eb3014b8fcfc9bd1b53ec0a9f8e5d1430"
-  integrity sha512-CMR6mu/LVx6JVfQRDL9uULsMirJT633bODn+IrYmrwSz250pnhON16We8eLPzxOZHyDjm7JPuSgHG3a/BPiRuQ==
+"@react-native-community/cli-platform-ios@9.3.0", "@react-native-community/cli-platform-ios@^9.3.0":
+  version "9.3.0"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-platform-ios/-/cli-platform-ios-9.3.0.tgz#45abde2a395fddd7cf71e8b746c1dc1ee2260f9a"
+  integrity sha512-nihTX53BhF2Q8p4B67oG3RGe1XwggoGBrMb6vXdcu2aN0WeXJOXdBLgR900DAA1O8g7oy1Sudu6we+JsVTKnjw==
   dependencies:
-    "@react-native-community/cli-tools" "^8.0.4"
+    "@react-native-community/cli-tools" "^9.2.1"
     chalk "^4.1.2"
     execa "^1.0.0"
     glob "^7.1.3"
-    js-yaml "^3.13.1"
-    lodash "^4.17.15"
     ora "^5.4.1"
-    plist "^3.0.2"
 
-"@react-native-community/cli-plugin-metro@^8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-plugin-metro/-/cli-plugin-metro-8.0.4.tgz#a364a50a2e05fc5d0b548759e499e5b681b6e4cc"
-  integrity sha512-UWzY1eMcEr/6262R2+d0Is5M3L/7Y/xXSDIFMoc5Rv5Wucl3hJM/TxHXmByvHpuJf6fJAfqOskyt4bZCvbI+wQ==
+"@react-native-community/cli-plugin-metro@^9.3.3":
+  version "9.3.3"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-plugin-metro/-/cli-plugin-metro-9.3.3.tgz#330d7b9476a3fdabdd5863f114fa962289e280dc"
+  integrity sha512-lPBw6XieNdj2AbWDN0Rc+jNOx8hBgSQyv0gUAm01qtJe4I9FjSMU6nOGTxMpWpICo6TYl/cmPGXOzbfpwxwtkQ==
   dependencies:
-    "@react-native-community/cli-server-api" "^8.0.4"
-    "@react-native-community/cli-tools" "^8.0.4"
+    "@react-native-community/cli-server-api" "^9.2.1"
+    "@react-native-community/cli-tools" "^9.2.1"
     chalk "^4.1.2"
-    metro "^0.70.1"
-    metro-config "^0.70.1"
-    metro-core "^0.70.1"
-    metro-react-native-babel-transformer "^0.70.1"
-    metro-resolver "^0.70.1"
-    metro-runtime "^0.70.1"
+    metro "0.72.4"
+    metro-config "0.72.4"
+    metro-core "0.72.4"
+    metro-react-native-babel-transformer "0.72.4"
+    metro-resolver "0.72.4"
+    metro-runtime "0.72.4"
     readline "^1.3.0"
 
-"@react-native-community/cli-server-api@^8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-server-api/-/cli-server-api-8.0.4.tgz#d45d895a0a6e8b960c9d677188d414a996faa4d3"
-  integrity sha512-Orr14njx1E70CVrUA8bFdl+mrnbuXUjf1Rhhm0RxUadFpvkHuOi5dh8Bryj2MKtf8eZrpEwZ7tuQPhJEULW16A==
+"@react-native-community/cli-server-api@^9.2.1":
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-server-api/-/cli-server-api-9.2.1.tgz#41ac5916b21d324bccef447f75600c03b2f54fbe"
+  integrity sha512-EI+9MUxEbWBQhWw2PkhejXfkcRqPl+58+whlXJvKHiiUd7oVbewFs0uLW0yZffUutt4FGx6Uh88JWEgwOzAdkw==
   dependencies:
-    "@react-native-community/cli-debugger-ui" "^8.0.0"
-    "@react-native-community/cli-tools" "^8.0.4"
+    "@react-native-community/cli-debugger-ui" "^9.0.0"
+    "@react-native-community/cli-tools" "^9.2.1"
     compression "^1.7.1"
     connect "^3.6.5"
     errorhandler "^1.5.0"
@@ -3321,15 +3550,14 @@
     serve-static "^1.13.1"
     ws "^7.5.1"
 
-"@react-native-community/cli-tools@^8.0.4":
-  version "8.0.4"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-tools/-/cli-tools-8.0.4.tgz#994b9d56c84472491c876b71acd4356773fcbe65"
-  integrity sha512-ePN9lGxh6LRFiotyddEkSmuqpQhnq2iw9oiXYr4EFWpIEy0yCigTuSTiDF68+c8M9B+7bTwkRpz/rMPC4ViO5Q==
+"@react-native-community/cli-tools@^9.2.1":
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-tools/-/cli-tools-9.2.1.tgz#c332324b1ea99f9efdc3643649bce968aa98191c"
+  integrity sha512-bHmL/wrKmBphz25eMtoJQgwwmeCylbPxqFJnFSbkqJPXQz3ManQ6q/gVVMqFyz7D3v+riaus/VXz3sEDa97uiQ==
   dependencies:
     appdirsjs "^1.2.4"
     chalk "^4.1.2"
     find-up "^5.0.0"
-    lodash "^4.17.15"
     mime "^2.4.1"
     node-fetch "^2.6.0"
     open "^6.2.0"
@@ -3337,40 +3565,37 @@
     semver "^6.3.0"
     shell-quote "^1.7.3"
 
-"@react-native-community/cli-types@^8.0.0":
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli-types/-/cli-types-8.0.0.tgz#72d24178e5ed1c2d271da43e0a4a4f59178f261a"
-  integrity sha512-1lZS1PEvMlFaN3Se1ksyoFWzMjk+YfKi490GgsqKJln9gvFm8tqVPdnXttI5Uf2DQf3BMse8Bk8dNH4oV6Ewow==
+"@react-native-community/cli-types@^9.1.0":
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli-types/-/cli-types-9.1.0.tgz#dcd6a0022f62790fe1f67417f4690db938746aab"
+  integrity sha512-KDybF9XHvafLEILsbiKwz5Iobd+gxRaPyn4zSaAerBxedug4er5VUWa8Szy+2GeYKZzMh/gsb1o9lCToUwdT/g==
   dependencies:
     joi "^17.2.1"
 
-"@react-native-community/cli@^8.0.4":
-  version "8.0.6"
-  resolved "https://registry.yarnpkg.com/@react-native-community/cli/-/cli-8.0.6.tgz#7aae37843ab8e44b75c477c1de69f4c902e599ef"
-  integrity sha512-E36hU/if3quQCfJHGWVkpsCnwtByRCwORuAX0r6yr1ebKktpKeEO49zY9PAu/Z1gfyxCtgluXY0HfRxjKRFXTg==
-  dependencies:
-    "@react-native-community/cli-clean" "^8.0.4"
-    "@react-native-community/cli-config" "^8.0.6"
-    "@react-native-community/cli-debugger-ui" "^8.0.0"
-    "@react-native-community/cli-doctor" "^8.0.6"
-    "@react-native-community/cli-hermes" "^8.0.5"
-    "@react-native-community/cli-plugin-metro" "^8.0.4"
-    "@react-native-community/cli-server-api" "^8.0.4"
-    "@react-native-community/cli-tools" "^8.0.4"
-    "@react-native-community/cli-types" "^8.0.0"
+"@react-native-community/cli@9.3.5":
+  version "9.3.5"
+  resolved "https://registry.yarnpkg.com/@react-native-community/cli/-/cli-9.3.5.tgz#73626d3be8f5e2e6389f2555d126666fb8de4389"
+  integrity sha512-X+/xSysHsb0rXUWZKtXnKGhUNMRPxYzyhBc3VMld+ygPaFG57TAdK9rFGRu7NkIsRI6qffF/SukQPVlBZIfBHg==
+  dependencies:
+    "@react-native-community/cli-clean" "^9.2.1"
+    "@react-native-community/cli-config" "^9.2.1"
+    "@react-native-community/cli-debugger-ui" "^9.0.0"
+    "@react-native-community/cli-doctor" "^9.3.0"
+    "@react-native-community/cli-hermes" "^9.3.4"
+    "@react-native-community/cli-plugin-metro" "^9.3.3"
+    "@react-native-community/cli-server-api" "^9.2.1"
+    "@react-native-community/cli-tools" "^9.2.1"
+    "@react-native-community/cli-types" "^9.1.0"
     chalk "^4.1.2"
-    commander "^2.19.0"
+    commander "^9.4.0"
     execa "^1.0.0"
     find-up "^4.1.0"
     fs-extra "^8.1.0"
     graceful-fs "^4.1.3"
-    leven "^3.1.0"
-    lodash "^4.17.15"
-    minimist "^1.2.0"
     prompts "^2.4.0"
     semver "^6.3.0"
 
-"@react-native-community/datetimepicker@^3.0.2", "@react-native-community/datetimepicker@^3.5.2":
+"@react-native-community/datetimepicker@^3.0.2":
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/@react-native-community/datetimepicker/-/datetimepicker-3.5.2.tgz#8e6feb30f2620e5abdf565d5fe74c0c04edcf6ae"
   integrity sha512-TWRuAtr/DnrEcRewqvXMLea2oB+YF+SbtuYLHguALLxNJQLl/RFB7aTNZeF+OoH75zKFqtXECXV1/uxQUpA+sg==
@@ -3425,11 +3650,6 @@
   resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-1.16.8.tgz#2126ca54d4a5a3e9ea5e3f39ad1e6643f8e4b3d4"
   integrity sha512-pacdQDX6V6EmjF+HoiIh6u++qx4mTK0WnhgUHRc01B+Qt5eoeUwseBqmqfTSXTx/aHDEd6PiIw7UGvKgFoqgFQ==
 
-"@react-native-picker/picker@^2.4.1":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-2.4.1.tgz#92feb7e0672d739624517dae04bf4de1452dfcdc"
-  integrity sha512-1XWy3IQgwr7MWd30KdY1iUh2gQZD+JiotN1ifj/ptFUYKon/0UFwngKQaWCO/CP/FdLl20/huSSLwKedYrdMMA==
-
 "@react-native/assets@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@react-native/assets/-/assets-1.0.0.tgz#c6f9bf63d274bafc8e970628de24986b30a55c8e"
@@ -3445,55 +3665,73 @@
   resolved "https://registry.yarnpkg.com/@react-native/polyfills/-/polyfills-2.0.0.tgz#4c40b74655c83982c8cf47530ee7dc13d957b6aa"
   integrity sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ==
 
-"@react-navigation/bottom-tabs@^5.11.15":
-  version "5.11.15"
-  resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-5.11.15.tgz#f973625cc32d9c5a4067851f084cb11ccd68fe79"
-  integrity sha512-TBY419W6aN/HZg98xbVp5Bx1HEF5sXuHR5f55W6KMI4k2AvxlwelKD1wbfvEcX2iuQT0YUiiXsACRFUSECYhkw==
+"@react-navigation/bottom-tabs@6.5.11":
+  version "6.5.11"
+  resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-6.5.11.tgz#b6e67a3aa19e60ed9c1139fa0253586c479832d5"
+  integrity sha512-CBN/NOdxnMvmjw+AJQI1kltOYaClTZmGec5pQ3ZNTPX86ytbIOylDIITKMfTgHZcIEFQDymx1SHeS++PIL3Szw==
   dependencies:
-    color "^3.1.3"
-    react-native-iphone-x-helper "^1.3.0"
+    "@react-navigation/elements" "^1.3.21"
+    color "^4.2.3"
+    warn-once "^0.1.0"
 
-"@react-navigation/core@^5.16.1":
-  version "5.16.1"
-  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.16.1.tgz#e0d308bd9bbd930114ce55c4151806b6d7907f69"
-  integrity sha512-3AToC7vPNeSNcHFLd1h71L6u34hfXoRAS1CxF9Fc4uC8uOrVqcNvphpeFbE0O9Bw6Zpl0BnMFl7E5gaL3KGzNA==
+"@react-navigation/core@^6.4.10":
+  version "6.4.10"
+  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-6.4.10.tgz#0c52621968b35e3a75e189e823d3b9e3bad77aff"
+  integrity sha512-oYhqxETRHNHKsipm/BtGL0LI43Hs2VSFoWMbBdHK9OqgQPjTVUitslgLcPpo4zApCcmBWoOLX2qPxhsBda644A==
   dependencies:
-    "@react-navigation/routers" "^5.7.4"
+    "@react-navigation/routers" "^6.1.9"
     escape-string-regexp "^4.0.0"
-    nanoid "^3.1.15"
-    query-string "^6.13.6"
+    nanoid "^3.1.23"
+    query-string "^7.1.3"
     react-is "^16.13.0"
+    use-latest-callback "^0.1.7"
+
+"@react-navigation/elements@^1.3.21":
+  version "1.3.21"
+  resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.21.tgz#debac6becc6b6692da09ec30e705e476a780dfe1"
+  integrity sha512-eyS2C6McNR8ihUoYfc166O1D8VYVh9KIl0UQPI8/ZJVsStlfSTgeEEh+WXge6+7SFPnZ4ewzEJdSAHH+jzcEfg==
+
+"@react-navigation/material-top-tabs@6.6.5":
+  version "6.6.5"
+  resolved "https://registry.yarnpkg.com/@react-navigation/material-top-tabs/-/material-top-tabs-6.6.5.tgz#5cfc33e0d02f2dcd1a0654284704f4eef1d16697"
+  integrity sha512-ovKc+ltWYJwu3ju5sw1txBTMemlRM85/JceSrkqU++QnL9l0TAPiPxDlO+wJddR1iwi+P6zj5/+QkXR5Ku+trw==
+  dependencies:
+    color "^4.2.3"
+    warn-once "^0.1.0"
 
-"@react-navigation/material-top-tabs@^5.x":
-  version "5.3.19"
-  resolved "https://registry.yarnpkg.com/@react-navigation/material-top-tabs/-/material-top-tabs-5.3.19.tgz#64f3a933f5d7e86e99f3d57d9f0c1e833ffa7e4f"
-  integrity sha512-I7bEF99THxxcY7kCUZ5pPmwXr6kgo6L2sg3P1YJo+CcBWSGvGiHyNbZXNs15HuKRuFvEuueChNV9n8QuKBWbDA==
+"@react-navigation/native-stack@^6.9.17":
+  version "6.9.17"
+  resolved "https://registry.yarnpkg.com/@react-navigation/native-stack/-/native-stack-6.9.17.tgz#4fc370b14be07296423ae8c00940fb002c6001b5"
+  integrity sha512-X8p8aS7JptQq7uZZNFEvfEcPf6tlK4PyVwYDdryRbG98B4bh2wFQYMThxvqa+FGEN7USEuHdv2mF0GhFKfX0ew==
   dependencies:
-    color "^3.1.3"
+    "@react-navigation/elements" "^1.3.21"
+    warn-once "^0.1.0"
 
-"@react-navigation/native@^5.9.8":
-  version "5.9.8"
-  resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.9.8.tgz#ac76ee6390ea7ce807486ca5c38d903e23433a97"
-  integrity sha512-DNbcDHXQPSFDLn51kkVVJjT3V7jJy2GztNYZe/2bEg29mi5QEcHHcpifjMCtyFKntAOWzKlG88UicIQ17UEghg==
+"@react-navigation/native@6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-6.1.9.tgz#8ef87095cd9c2ed094308c726157c7f6fc28796e"
+  integrity sha512-AMuJDpwXE7UlfyhIXaUCCynXmv69Kb8NzKgKJO7v0k0L+u6xUTbt6xvshmJ79vsvaFyaEH9Jg5FMzek5/S5qNw==
   dependencies:
-    "@react-navigation/core" "^5.16.1"
+    "@react-navigation/core" "^6.4.10"
     escape-string-regexp "^4.0.0"
-    nanoid "^3.1.15"
+    fast-deep-equal "^3.1.3"
+    nanoid "^3.1.23"
 
-"@react-navigation/routers@^5.7.4":
-  version "5.7.4"
-  resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-5.7.4.tgz#8b5460e841a0c64f6c9a5fbc2a1eb832432d4fb0"
-  integrity sha512-0N202XAqsU/FlE53Nmh6GHyMtGm7g6TeC93mrFAFJOqGRKznT0/ail+cYlU6tNcPA9AHzZu1Modw1eoDINSliQ==
+"@react-navigation/routers@^6.1.9":
+  version "6.1.9"
+  resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-6.1.9.tgz#73f5481a15a38e36592a0afa13c3c064b9f90bed"
+  integrity sha512-lTM8gSFHSfkJvQkxacGM6VJtBt61ip2XO54aNfswD+KMw6eeZ4oehl7m0me3CR9hnDE4+60iAZR8sAhvCiI3NA==
   dependencies:
-    nanoid "^3.1.15"
+    nanoid "^3.1.23"
 
-"@react-navigation/stack@^5.14.9":
-  version "5.14.9"
-  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.14.9.tgz#49c7b9316e6fb456e9766c901e0d607862f0ea7d"
-  integrity sha512-DuvrT9P+Tz8ezZLQYxORZqOGqO+vEufaxlW1hSLw1knLD4jNxkz8TJDXtfKwaz//9gb43UhTNccNM02vm7iPqQ==
+"@react-navigation/stack@6.3.20":
+  version "6.3.20"
+  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-6.3.20.tgz#8eec944888f317bb1ba1ff30e7f513806bea16c2"
+  integrity sha512-vE6mgZzOgoa5Uy7ayT97Cj+ZIK7DK+JBYVuKUViILlWZy6IWK7HFDuqoChSbZ1ajTIfAxj/acVGg1jkbAKsToA==
   dependencies:
-    color "^3.1.3"
-    react-native-iphone-x-helper "^1.3.0"
+    "@react-navigation/elements" "^1.3.21"
+    color "^4.2.3"
+    warn-once "^0.1.0"
 
 "@redux-saga/core@^1.1.3":
   version "1.1.3"
@@ -4011,10 +4249,10 @@
   resolved "https://registry.yarnpkg.com/@types/react-native-push-notification/-/react-native-push-notification-8.1.1.tgz#0c9a181d7823cfad215d040bc5596c2d83e1a3cd"
   integrity sha512-ZN4UbU4EM3C7XGt4zI6RqHEZS2+35EwOz9DPAD1lTTY3IpWMHAKYjryykvP35hFkSwrGMpT8nYuMFPEJRwDEJA==
 
-"@types/react-native@0.69.6":
-  version "0.69.6"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.69.6.tgz#b792b7eb024a14869fdbbe97536e6014cb3be731"
-  integrity sha512-jx1QdJT3CdQc42EpoIGu22F1wrPZjmC/CNkfR5sRs5GxloJzthuICK7CKqAGEo2SekPs+YYzhbzrJGi1IrG5Lg==
+"@types/react-native@0.70.19":
+  version "0.70.19"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.70.19.tgz#b4e651dcf7f49c69ff3a4c3072584cad93155582"
+  integrity sha512-c6WbyCgWTBgKKMESj/8b4w+zWcZSsCforson7UdXtXMecG3MxCinYi6ihhrHVPyUrVzORsvEzK8zg32z4pK6Sg==
   dependencies:
     "@types/react" "*"
 
@@ -4776,10 +5014,10 @@ assign-symbols@^1.0.0:
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
   integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
 
-ast-types@0.14.2:
-  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.14.2.tgz#600b882df8583e3cd4f2df5fa20fa83759d4bdfd"
-  integrity sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==
+ast-types@0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.15.2.tgz#39ae4809393c4b16df751ee563411423e85fb49d"
+  integrity sha512-c27loCv9QkZinsa5ProX751khO9DJl/AcB5c2KNtA6NRvHKS0PgLfcftz72KVq504vB0Gku5s2kUZzDBvQWvHg==
   dependencies:
     tslib "^2.0.1"
 
@@ -5751,6 +5989,16 @@ browserslist@^4.21.3:
     node-releases "^2.0.8"
     update-browserslist-db "^1.0.10"
 
+browserslist@^4.22.2:
+  version "4.22.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.2.tgz#704c4943072bd81ea18997f3bd2180e89c77874b"
+  integrity sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==
+  dependencies:
+    caniuse-lite "^1.0.30001565"
+    electron-to-chromium "^1.4.601"
+    node-releases "^2.0.14"
+    update-browserslist-db "^1.0.13"
+
 bser@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
@@ -5986,6 +6234,11 @@ caniuse-lite@^1.0.30001449:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001450.tgz#022225b91200589196b814b51b1bbe45144cf74f"
   integrity sha512-qMBmvmQmFXaSxexkjjfMvD5rnDL0+m+dUMZKoDYsGG8iZN29RuYh9eRoMvKsT6uMAWlyUUGDEQGJJYjzCIO9ew==
 
+caniuse-lite@^1.0.30001565:
+  version "1.0.30001579"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001579.tgz#45c065216110f46d6274311a4b3fcf6278e0852a"
+  integrity sha512-u5AUVkixruKHJjw/pj9wISlcMpgFWzSrczLZbrqBSxukQixmg0SJ5sZTpvaFvxU0HoQKd4yoyAogyrAz9pzJnA==
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -6282,7 +6535,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3:
+color-convert@^1.9.0, color-convert@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -6314,10 +6567,10 @@ color-string@^1.5.2:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
-color-string@^1.6.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.0.tgz#63b6ebd1bec11999d1df3a79a7569451ac2be8aa"
-  integrity sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==
+color-string@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
+  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
   dependencies:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
@@ -6330,13 +6583,13 @@ color@^3.0.0, color@~3.1.2:
     color-convert "^1.9.1"
     color-string "^1.5.2"
 
-color@^3.1.3:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
-  integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
+color@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
+  integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
   dependencies:
-    color-convert "^1.9.3"
-    color-string "^1.6.0"
+    color-convert "^2.0.1"
+    color-string "^1.9.0"
 
 colorette@^1.0.7:
   version "1.3.0"
@@ -6406,7 +6659,7 @@ commander@^10.0.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.0.tgz#71797971162cd3cf65f0b9d24eb28f8d303acdf1"
   integrity sha512-zS5PnTI22FIRM6ylNW8G4Ap0IEOyk62fhLSD0+uHRT9McRCLGpkVNvao4bjimpK/GShynyQkFFxHhwMcETmduA==
 
-commander@^2.18.0, commander@^2.19.0, commander@^2.20.3:
+commander@^2.18.0, commander@^2.20.3:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -6426,6 +6679,11 @@ commander@^8.0.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
   integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
 
+commander@^9.4.0:
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
+  integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
+
 commander@~2.13.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
@@ -6709,6 +6967,11 @@ convert-source-map@^1.7.0:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
 
+convert-source-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
@@ -6886,15 +7149,15 @@ css-select@^2.0.0:
     domutils "^1.7.0"
     nth-check "^1.0.2"
 
-css-select@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.2.1.tgz#9e665d6ae4c7f9d65dbe69d0316e3221fb274cdd"
-  integrity sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==
+css-select@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
+  integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
   dependencies:
     boolbase "^1.0.0"
-    css-what "^5.1.0"
-    domhandler "^4.3.0"
-    domutils "^2.8.0"
+    css-what "^6.1.0"
+    domhandler "^5.0.2"
+    domutils "^3.0.1"
     nth-check "^2.0.1"
 
 css-to-react-native@^3.0.0:
@@ -6914,15 +7177,7 @@ css-tree@1.0.0-alpha.37:
     mdn-data "2.0.4"
     source-map "^0.6.1"
 
-css-tree@^1.0.0-alpha.39:
-  version "1.0.0-alpha.39"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.39.tgz#2bff3ffe1bb3f776cf7eefd91ee5cba77a149eeb"
-  integrity sha512-7UvkEYgBAHRG9Nt980lYxjsTrCyHFN53ky3wVsDkiMdVqylqRt+Zc+jm5qw7/qyOvN2dHSYtX0e4MbCCExSvnA==
-  dependencies:
-    mdn-data "2.0.6"
-    source-map "^0.6.1"
-
-css-tree@^1.1.2:
+css-tree@^1.1.2, css-tree@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
   integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
@@ -6935,10 +7190,10 @@ css-what@^3.2.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.3.0.tgz#10fec696a9ece2e591ac772d759aacabac38cd39"
   integrity sha512-pv9JPyatiPaQ6pf4OvD/dbfm0o5LviWmwxNWzblYf/1u9QZd0ihV+PMwy5jdQWQ3349kZmKEx9WXuSka2dM4cg==
 
-css-what@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.1.0.tgz#3f7b707aadf633baf62c2ceb8579b545bb40f7fe"
-  integrity sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==
+css-what@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
 
 cssfilter@0.0.10:
   version "0.0.10"
@@ -7130,7 +7385,7 @@ decimal.js@^10.2.1:
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.3.1.tgz#d8c3a444a9c6774ba60ca6ad7261c3a94fd5e783"
   integrity sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==
 
-decode-uri-component@^0.2.0:
+decode-uri-component@^0.2.0, decode-uri-component@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
   integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
@@ -7421,6 +7676,15 @@ dom-serializer@^1.0.1:
     domhandler "^4.2.0"
     entities "^2.0.0"
 
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
 dom-walk@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
@@ -7441,6 +7705,11 @@ domelementtype@^2.2.0:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
   integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
 
+domelementtype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
+
 domexception@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304"
@@ -7448,13 +7717,20 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
-domhandler@^4.2.0, domhandler@^4.2.2, domhandler@^4.3.0:
+domhandler@^4.2.0, domhandler@^4.2.2:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.0.tgz#16c658c626cf966967e306f966b431f77d4a5626"
   integrity sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==
   dependencies:
     domelementtype "^2.2.0"
 
+domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
 domutils@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
@@ -7472,6 +7748,15 @@ domutils@^2.8.0:
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
 
+domutils@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
+  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+
 dot-prop@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
@@ -7548,6 +7833,11 @@ electron-to-chromium@^1.4.284:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.286.tgz#0e039de59135f44ab9a8ec9025e53a9135eba11f"
   integrity sha512-Vp3CVhmYpgf4iXNKAucoQUDcCrBQX3XLBtwgFqP9BUXuucgvAV9zWp1kYU7LL9j4++s9O+12cb3wMtN4SJy6UQ==
 
+electron-to-chromium@^1.4.601:
+  version "1.4.639"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.639.tgz#c6f9cc685f9efb2980d2cfc95a27f8142c9adf28"
+  integrity sha512-CkKf3ZUVZchr+zDpAlNLEEy2NJJ9T64ULWaDgy3THXXlPVPkLu3VOs9Bac44nebVtdwl2geSj6AxTtGDOxoXhg==
+
 electron-to-chromium@^1.4.84:
   version "1.4.107"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.107.tgz#564257014ab14033b4403a309c813123c58a3fb9"
@@ -7629,6 +7919,11 @@ entities@^3.0.1:
   resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
   integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
 
+entities@^4.2.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
 envinfo@^7.7.2:
   version "7.8.1"
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
@@ -8742,7 +9037,7 @@ fsevents@^2.1.2:
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
   integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
 
-fsevents@^2.3.2, fsevents@~2.3.2:
+fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -9284,22 +9579,17 @@ hasurl@^1.0.0:
   resolved "https://registry.yarnpkg.com/hasurl/-/hasurl-1.0.0.tgz#e4c619097ae1e8fc906bee904ce47e94f5e1ea37"
   integrity sha512-43ypUd3DbwyCT01UYpA99AEZxZ4aKtRxWGBHEIbjcOsUghd9YUON0C+JF6isNjaiwC/UF5neaUudy6JS9jZPZQ==
 
-hermes-engine@~0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/hermes-engine/-/hermes-engine-0.11.0.tgz#bb224730d230a02a5af02c4e090d1f52d57dd3db"
-  integrity sha512-7aMUlZja2IyLYAcZ69NBnwJAR5ZOYlSllj0oMpx08a8HzxHOys0eKCzfphrf6D0vX1JGO1QQvVsQKe6TkYherw==
-
-hermes-estree@0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.6.0.tgz#e866fddae1b80aec65fe2ae450a5f2070ad54033"
-  integrity sha512-2YTGzJCkhdmT6VuNprWjXnvTvw/3iPNw804oc7yknvQpNKo+vJGZmtvLLCghOZf0OwzKaNAzeIMp71zQbNl09w==
+hermes-estree@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/hermes-estree/-/hermes-estree-0.8.0.tgz#530be27243ca49f008381c1f3e8b18fb26bf9ec0"
+  integrity sha512-W6JDAOLZ5pMPMjEiQGLCXSSV7pIBEgRR5zGkxgmzGSXHOxqV5dC/M1Zevqpbm9TZDE5tu358qZf8Vkzmsc+u7Q==
 
-hermes-parser@0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.6.0.tgz#00d14e91bca830b3c1457050fa4187400cb96328"
-  integrity sha512-Vf58jBZca2+QBLR9h7B7mdg8oFz2g5ILz1iVouZ5DOrOrAfBmPfJjdjDT8jrO0f+iJ4/hSRrQHqHIjSnTaLUDQ==
+hermes-parser@0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/hermes-parser/-/hermes-parser-0.8.0.tgz#116dceaba32e45b16d6aefb5c4c830eaeba2d257"
+  integrity sha512-yZKalg1fTYG5eOiToLUaw69rQfZq/fi+/NtEXRU7N87K/XobNRhRWorh80oSge2lWUiZfTgUvRJH+XgZWrhoqA==
   dependencies:
-    hermes-estree "0.6.0"
+    hermes-estree "0.8.0"
 
 hermes-profile-transformer@^0.0.6:
   version "0.0.6"
@@ -9640,9 +9930,9 @@ io-ts@^2.2.16:
   integrity sha512-y5TTSa6VP6le0hhmIyN0dqEXkrZeJLeC5KApJq6VLci3UEKF80lZ+KuoUs02RhBxNWlrqSNxzfI7otLX1Euv8Q==
 
 ip@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
-  integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.9.tgz#8dfbcc99a754d07f425310b86a99546b1151e396"
+  integrity sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==
 
 ipaddr.js@1.9.1:
   version "1.9.1"
@@ -10362,26 +10652,6 @@ jest-haste-map@^26.6.2:
   optionalDependencies:
     fsevents "^2.1.2"
 
-jest-haste-map@^27.3.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.5.1.tgz#9fd8bd7e7b4fa502d9c6164c5640512b4e811e7f"
-  integrity sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng==
-  dependencies:
-    "@jest/types" "^27.5.1"
-    "@types/graceful-fs" "^4.1.2"
-    "@types/node" "*"
-    anymatch "^3.0.3"
-    fb-watchman "^2.0.0"
-    graceful-fs "^4.2.9"
-    jest-regex-util "^27.5.1"
-    jest-serializer "^27.5.1"
-    jest-util "^27.5.1"
-    jest-worker "^27.5.1"
-    micromatch "^4.0.4"
-    walker "^1.0.7"
-  optionalDependencies:
-    fsevents "^2.3.2"
-
 jest-jasmine2@^26.6.3:
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-26.6.3.tgz#adc3cf915deacb5212c93b9f3547cd12958f2edd"
@@ -10492,7 +10762,7 @@ jest-regex-util@^26.0.0:
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-26.0.0.tgz#d25e7184b36e39fd466c3bc41be0971e821fee28"
   integrity sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==
 
-jest-regex-util@^27.5.1:
+jest-regex-util@^27.0.6:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.5.1.tgz#4da143f7e9fd1e542d4aa69617b38e4a78365b95"
   integrity sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg==
@@ -10587,7 +10857,7 @@ jest-serializer@^26.6.2:
     "@types/node" "*"
     graceful-fs "^4.2.4"
 
-jest-serializer@^27.5.1:
+jest-serializer@^27.0.6:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-27.5.1.tgz#81438410a30ea66fd57ff730835123dea1fb1f64"
   integrity sha512-jZCyo6iIxO1aqUxpuBlwTDMkzOAJS4a3eYz3YzgxxVQFwLeSA7Jfq5cbqCY+JLvTDrWirgusI/0KwxKMgrdf7w==
@@ -10629,7 +10899,7 @@ jest-util@^26.6.2:
     is-ci "^2.0.0"
     micromatch "^4.0.2"
 
-jest-util@^27.5.1:
+jest-util@^27.2.0:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.5.1.tgz#3ba9771e8e31a0b85da48fe0b0891fb86c01c2f9"
   integrity sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==
@@ -10675,7 +10945,7 @@ jest-worker@^26.6.2:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
-jest-worker@^27.2.0, jest-worker@^27.5.1:
+jest-worker@^27.2.0:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.5.1.tgz#8d146f0900e8973b106b6f73cc1e9a8cb86f8db0"
   integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==
@@ -10693,11 +10963,6 @@ jest@^26.6.3:
     import-local "^3.0.2"
     jest-cli "^26.6.3"
 
-jetifier@^1.6.2:
-  version "1.6.6"
-  resolved "https://registry.yarnpkg.com/jetifier/-/jetifier-1.6.6.tgz#fec8bff76121444c12dc38d2dad6767c421dab68"
-  integrity sha512-JNAkmPeB/GS2tCRqUzRPsTOHpGDah7xP18vGJfIjZC+W2sxEHbxgJxetIjIqhjQ3yYbYNEELkM/spKLtwoOSUQ==
-
 joi@^17.2.1:
   version "17.4.2"
   resolved "https://registry.yarnpkg.com/joi/-/joi-17.4.2.tgz#02f4eb5cf88e515e614830239379dcbbe28ce7f7"
@@ -10761,10 +11026,15 @@ jsc-android@^250230.2.1:
   resolved "https://registry.yarnpkg.com/jsc-android/-/jsc-android-250230.2.1.tgz#3790313a970586a03ab0ad47defbc84df54f1b83"
   integrity sha512-KmxeBlRjwoqCnBBKGsihFtvsBHyUFlBxJPK4FzeYcIuBfdjv6jFys44JITAgSTbQD+vIdwMEfyZklsuQX0yI1Q==
 
-jscodeshift@^0.13.1:
-  version "0.13.1"
-  resolved "https://registry.yarnpkg.com/jscodeshift/-/jscodeshift-0.13.1.tgz#69bfe51e54c831296380585c6d9e733512aecdef"
-  integrity sha512-lGyiEbGOvmMRKgWk4vf+lUrCWO/8YR8sUR3FKF1Cq5fovjZDlIcw3Hu5ppLHAnEXshVffvaM0eyuY/AbOeYpnQ==
+jsc-safe-url@^0.2.2:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/jsc-safe-url/-/jsc-safe-url-0.2.4.tgz#141c14fbb43791e88d5dc64e85a374575a83477a"
+  integrity sha512-0wM3YBWtYePOjfyXQH5MWQ8H7sdk5EXSwZvmSLKk2RboVQ2Bu239jycHDz5J/8Blf3K0Qnoy2b6xD+z10MFB+Q==
+
+jscodeshift@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/jscodeshift/-/jscodeshift-0.14.0.tgz#7542e6715d6d2e8bde0b4e883f0ccea358b46881"
+  integrity sha512-7eCC1knD7bLUPuSCwXsMZUH51O8jIcoVyKtI6P0XM0IVzlGjckPy3FIwQlorzbN0Sg79oK+RlohN32Mqf/lrYA==
   dependencies:
     "@babel/core" "^7.13.16"
     "@babel/parser" "^7.13.16"
@@ -10779,10 +11049,10 @@ jscodeshift@^0.13.1:
     chalk "^4.1.2"
     flow-parser "0.*"
     graceful-fs "^4.2.4"
-    micromatch "^3.1.10"
+    micromatch "^4.0.4"
     neo-async "^2.5.0"
     node-dir "^0.1.17"
-    recast "^0.20.4"
+    recast "^0.21.0"
     temp "^0.8.4"
     write-file-atomic "^2.3.0"
 
@@ -10931,7 +11201,7 @@ json5@^2.1.0, json5@^2.1.2:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
 
-json5@^2.2.1, json5@^2.2.2:
+json5@^2.2.1, json5@^2.2.2, json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -11620,11 +11890,6 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
-mdn-data@2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.6.tgz#852dc60fcaa5daa2e8cf6c9189c440ed3e042978"
-  integrity sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA==
-
 mdurl@^1.0.0, mdurl@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -11762,69 +12027,88 @@ metro-babel-transformer@0.58.0:
     "@babel/core" "^7.0.0"
     metro-source-map "0.58.0"
 
-metro-babel-transformer@0.70.3:
-  version "0.70.3"
-  resolved "https://registry.yarnpkg.com/metro-babel-transformer/-/metro-babel-transformer-0.70.3.tgz#dca61852be273824a4b641bd1ecafff07ff3ad1f"
-  integrity sha512-bWhZRMn+mIOR/s3BDpFevWScz9sV8FGktVfMlF1eJBLoX24itHDbXvTktKBYi38PWIKcHedh6THSFpJogfuwNA==
+metro-babel-transformer@0.72.4:
+  version "0.72.4"
+  resolved "https://registry.yarnpkg.com/metro-babel-transformer/-/metro-babel-transformer-0.72.4.tgz#5149424896797980aa1758c8ef7c9a80f9d0f587"
+  integrity sha512-cg1TQUKDkKqrIClrqqIGE8ZDa9kRKSjhBtqPtNYt/ZSywXU41SrldfcI5uzPrzcIrYpH5hnN6OCLRACPgy2vsw==
   dependencies:
     "@babel/core" "^7.14.0"
-    hermes-parser "0.6.0"
-    metro-source-map "0.70.3"
+    hermes-parser "0.8.0"
+    metro-source-map "0.72.4"
     nullthrows "^1.1.1"
 
-metro-cache-key@0.70.3:
-  version "0.70.3"
-  resolved "https://registry.yarnpkg.com/metro-cache-key/-/metro-cache-key-0.70.3.tgz#898803db04178a8f440598afba7d82a9cf35abf7"
-  integrity sha512-0zpw+IcpM3hmGd5sKMdxNv3sbOIUYnMUvx1/yaM6vNRReSPmOLX0bP8fYf3CGgk8NEreZ1OHbVsuw7bdKt40Mw==
+metro-cache-key@0.72.4:
+  version "0.72.4"
+  resolved "https://registry.yarnpkg.com/metro-cache-key/-/metro-cache-key-0.72.4.tgz#f03d49214554b25968f04dc5e19dfe018cf9312b"
+  integrity sha512-DH3cgN4L7IKNCVBy8LBOXQ4tHDdvh7Vl7jWNkQKMOfHWu1EwsTtXD/+zdV7/be4ls/kHxrD0HbGzpK8XhUAHSw==
 
-metro-cache@0.70.3:
-  version "0.70.3"
-  resolved "https://registry.yarnpkg.com/metro-cache/-/metro-cache-0.70.3.tgz#42cf3cdf8a7b3691f3bef9a86bed38d4c5f6201f"
-  integrity sha512-iCix/+z812fUqa6KlOxaTkY6LQQDoXIe/VljXkGIvpygSCmYyhjQpfQVZEVVPezFmUBYXNdabdQ6cYx6JX3yMg==
+metro-cache@0.72.4:
+  version "0.72.4"
+  resolved "https://registry.yarnpkg.com/metro-cache/-/metro-cache-0.72.4.tgz#e0ffb33dd044a7cf5897a09489088a413bfe7468"
+  integrity sha512-76fi9OVytiFVSuGQcNoquVOT7AENd0q3n1WmyBeJ7jvl/UrE3/NN3HTWzu2ezG5IxF3cmo5q1ehi0NEpgwaFGg==
   dependencies:
-    metro-core "0.70.3"
+    metro-core "0.72.4"
     rimraf "^2.5.4"
 
-metro-config@0.70.3, metro-config@^0.70.1:
-  version "0.70.3"
-  resolved "https://registry.yarnpkg.com/metro-config/-/metro-config-0.70.3.tgz#fe6f7330f679d5594e5724af7a69d4dbe1bb5bc3"
-  integrity sha512-SSCDjSTygoCgzoj61DdrBeJzZDRwQxUEfcgc6t6coxWSExXNR4mOngz0q4SAam49Bmjq9J2Jft6qUKnUTPrRgA==
+metro-config@0.72.4:
+  version "0.72.4"
+  resolved "https://registry.yarnpkg.com/metro-config/-/metro-config-0.72.4.tgz#3ad42b3ca0037125d5615f4cb7e1c7ed9442bedd"
+  integrity sha512-USv+H14D5RrSpfA5t4t5cbF1CnizgYGz6xJ3HB0r/bDYdJdZTVqB3/mMPft7Z5zHslS00JCG7oE51G1CK/FlKw==
   dependencies:
     cosmiconfig "^5.0.5"
     jest-validate "^26.5.2"
-    metro "0.70.3"
-    metro-cache "0.70.3"
-    metro-core "0.70.3"
-    metro-runtime "0.70.3"
+    metro "0.72.4"
+    metro-cache "0.72.4"
+    metro-core "0.72.4"
+    metro-runtime "0.72.4"
 
-metro-core@0.70.3, metro-core@^0.70.1:
-  version "0.70.3"
-  resolved "https://registry.yarnpkg.com/metro-core/-/metro-core-0.70.3.tgz#bf4dda15a5185f5a7931de463a1b97ac9ef680a0"
-  integrity sha512-NzfHB/w5R7yLaOeU1tzPTbBzCRsYSvpKJkLMP0yudszKZzIAZqNdjoEJ9GZ688Wi0ynZxcU0BxukXh4my80ZBw==
+metro-core@0.72.4:
+  version "0.72.4"
+  resolved "https://registry.yarnpkg.com/metro-core/-/metro-core-0.72.4.tgz#e4939aef4c50d953c44eee99a3c971d5162f1287"
+  integrity sha512-2JNT1nG0UV1uMrQHQOKUSII0sdS6MhVT3mBt2kwfjCvD+jvi1iYhKJ4kYCRlUQw9XNLGZ/B+C0VDQzlf2M3zVw==
   dependencies:
-    jest-haste-map "^27.3.1"
     lodash.throttle "^4.1.1"
-    metro-resolver "0.70.3"
+    metro-resolver "0.72.4"
 
-metro-hermes-compiler@0.70.3:
-  version "0.70.3"
-  resolved "https://registry.yarnpkg.com/metro-hermes-compiler/-/metro-hermes-compiler-0.70.3.tgz#ac7ed656fbcf0a59adcd010d3639e4cfdbc76b4f"
-  integrity sha512-W6WttLi4E72JL/NyteQ84uxYOFMibe0PUr9aBKuJxxfCq6QRnJKOVcNY0NLW0He2tneXGk+8ZsNz8c0flEvYqg==
+metro-file-map@0.72.4:
+  version "0.72.4"
+  resolved "https://registry.yarnpkg.com/metro-file-map/-/metro-file-map-0.72.4.tgz#8a0c8a0e44d665af90dded2ac6e01baebff8552e"
+  integrity sha512-Mv5WgTsYs5svTR/df6jhq2aD4IkAuwV5TutHW0BfEg1YccQt8/v7q5ZypmUOkjdSS9bFR4r3677jalr/ceFypQ==
+  dependencies:
+    abort-controller "^3.0.0"
+    anymatch "^3.0.3"
+    debug "^2.2.0"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.4"
+    invariant "^2.2.4"
+    jest-regex-util "^27.0.6"
+    jest-serializer "^27.0.6"
+    jest-util "^27.2.0"
+    jest-worker "^27.2.0"
+    micromatch "^4.0.4"
+    walker "^1.0.7"
+  optionalDependencies:
+    fsevents "^2.1.2"
 
-metro-inspector-proxy@0.70.3:
-  version "0.70.3"
-  resolved "https://registry.yarnpkg.com/metro-inspector-proxy/-/metro-inspector-proxy-0.70.3.tgz#321c25b2261e76d8c4bcc39e092714adfcb50a14"
-  integrity sha512-qQoNdPGrmyoJSWYkxSDpTaAI8xyqVdNDVVj9KRm1PG8niSuYmrCCFGLLFsMvkVYwsCWUGHoGBx0UoAzVp14ejw==
+metro-hermes-compiler@0.72.4:
+  version "0.72.4"
+  resolved "https://registry.yarnpkg.com/metro-hermes-compiler/-/metro-hermes-compiler-0.72.4.tgz#06c946d74720d5132fa1690df0610ba367d3436c"
+  integrity sha512-AY1mAT5FKfDRYCthuKo2XHbuhG5TUV4ZpZlJ8peIgkiWICzfy0tau3yu+3jUD456N90CjMCOmdknji4uKiZ8ww==
+
+metro-inspector-proxy@0.72.4:
+  version "0.72.4"
+  resolved "https://registry.yarnpkg.com/metro-inspector-proxy/-/metro-inspector-proxy-0.72.4.tgz#347e9634b6204c38117292edfb11eb2df71c09ad"
+  integrity sha512-pr+PsbNCZaStWuJRH8oclT170B7NxfgH+UUyTf9/aR+7PjX0gdDabJhPyzA633QgR+EFBaQKZuetHA+f5/cnEQ==
   dependencies:
     connect "^3.6.5"
     debug "^2.2.0"
     ws "^7.5.1"
     yargs "^15.3.1"
 
-metro-minify-uglify@0.70.3:
-  version "0.70.3"
-  resolved "https://registry.yarnpkg.com/metro-minify-uglify/-/metro-minify-uglify-0.70.3.tgz#2f28129ca5b8ef958f3e3fcf004c3707c7732e1e"
-  integrity sha512-oHyjV9WDqOlDE1FPtvs6tIjjeY/oP1PNUPYL1wqyYtqvjN+zzAOrcbsAAL1sv+WARaeiMsWkF2bwtNo+Hghoog==
+metro-minify-uglify@0.72.4:
+  version "0.72.4"
+  resolved "https://registry.yarnpkg.com/metro-minify-uglify/-/metro-minify-uglify-0.72.4.tgz#b4504adc17f093173c0e5d44df32ac9e13f50a88"
+  integrity sha512-84Rrgie3O7Dqkak9ep/eIpMZkEFzpKD4bngPUNimYqAMCExKL7/aymydB27gKcqwus/BVkAV+aOnFsuOhlgnQg==
   dependencies:
     uglify-es "^3.1.9"
 
@@ -11869,10 +12153,10 @@ metro-react-native-babel-preset@0.58.0:
     "@babel/template" "^7.0.0"
     react-refresh "^0.4.0"
 
-metro-react-native-babel-preset@0.70.3, metro-react-native-babel-preset@^0.70.3:
-  version "0.70.3"
-  resolved "https://registry.yarnpkg.com/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.70.3.tgz#1c77ec4544ecd5fb6c803e70b21284d7483e4842"
-  integrity sha512-4Nxc1zEiHEu+GTdEMEsHnRgfaBkg8f/Td3+FcQ8NTSvs+xL3LBrQy6N07idWSQZHIdGFf+tTHvRfSIWLD8u8Tg==
+metro-react-native-babel-preset@0.72.4:
+  version "0.72.4"
+  resolved "https://registry.yarnpkg.com/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.72.4.tgz#2b320772d2489d1fb3a6413fc58dad13a56eea0e"
+  integrity sha512-YGCVaYe1H5fOFktdDdL9IwAyiXjPh1t2eZZFp3KFJak6fxKpN+q5PPhe1kzMa77dbCAqgImv43zkfGa6i27eyA==
   dependencies:
     "@babel/core" "^7.14.0"
     "@babel/plugin-proposal-async-generator-functions" "^7.0.0"
@@ -11914,17 +12198,61 @@ metro-react-native-babel-preset@0.70.3, metro-react-native-babel-preset@^0.70.3:
     "@babel/template" "^7.0.0"
     react-refresh "^0.4.0"
 
-metro-react-native-babel-transformer@0.70.3, metro-react-native-babel-transformer@^0.70.1:
-  version "0.70.3"
-  resolved "https://registry.yarnpkg.com/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.70.3.tgz#195597c32488f820aa9e441bbca7c04fe7de7a2d"
-  integrity sha512-WKBU6S/G50j9cfmFM4k4oRYprd8u3qjleD4so1E2zbTNILg+gYla7ZFGCAvi2G0ZcqS2XuGCR375c2hF6VVvwg==
+metro-react-native-babel-preset@^0.73.0:
+  version "0.73.10"
+  resolved "https://registry.yarnpkg.com/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.73.10.tgz#304b24bb391537d2c987732cc0a9774be227d3f6"
+  integrity sha512-1/dnH4EHwFb2RKEKx34vVDpUS3urt2WEeR8FYim+ogqALg4sTpG7yeQPxWpbgKATezt4rNfqAANpIyH19MS4BQ==
+  dependencies:
+    "@babel/core" "^7.20.0"
+    "@babel/plugin-proposal-async-generator-functions" "^7.0.0"
+    "@babel/plugin-proposal-class-properties" "^7.0.0"
+    "@babel/plugin-proposal-export-default-from" "^7.0.0"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.0.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.0.0"
+    "@babel/plugin-proposal-optional-chaining" "^7.0.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.0.0"
+    "@babel/plugin-syntax-export-default-from" "^7.0.0"
+    "@babel/plugin-syntax-flow" "^7.18.0"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.0.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.0.0"
+    "@babel/plugin-transform-arrow-functions" "^7.0.0"
+    "@babel/plugin-transform-async-to-generator" "^7.0.0"
+    "@babel/plugin-transform-block-scoping" "^7.0.0"
+    "@babel/plugin-transform-classes" "^7.0.0"
+    "@babel/plugin-transform-computed-properties" "^7.0.0"
+    "@babel/plugin-transform-destructuring" "^7.0.0"
+    "@babel/plugin-transform-flow-strip-types" "^7.0.0"
+    "@babel/plugin-transform-function-name" "^7.0.0"
+    "@babel/plugin-transform-literals" "^7.0.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.0.0"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.0.0"
+    "@babel/plugin-transform-parameters" "^7.0.0"
+    "@babel/plugin-transform-react-display-name" "^7.0.0"
+    "@babel/plugin-transform-react-jsx" "^7.0.0"
+    "@babel/plugin-transform-react-jsx-self" "^7.0.0"
+    "@babel/plugin-transform-react-jsx-source" "^7.0.0"
+    "@babel/plugin-transform-runtime" "^7.0.0"
+    "@babel/plugin-transform-shorthand-properties" "^7.0.0"
+    "@babel/plugin-transform-spread" "^7.0.0"
+    "@babel/plugin-transform-sticky-regex" "^7.0.0"
+    "@babel/plugin-transform-template-literals" "^7.0.0"
+    "@babel/plugin-transform-typescript" "^7.5.0"
+    "@babel/plugin-transform-unicode-regex" "^7.0.0"
+    "@babel/template" "^7.0.0"
+    react-refresh "^0.4.0"
+
+metro-react-native-babel-transformer@0.72.4:
+  version "0.72.4"
+  resolved "https://registry.yarnpkg.com/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.72.4.tgz#c1a38bf28513374dbb0fce45b4017d8abfe4a071"
+  integrity sha512-VxM8Cki+/tPAyQRPHEy1bsxAihpxz8cGLdteFo9t0eAJI7/vEegqICxQm4A+RiGQc4f8t2jiwI6YpnDWomI5Gw==
   dependencies:
     "@babel/core" "^7.14.0"
     babel-preset-fbjs "^3.4.0"
-    hermes-parser "0.6.0"
-    metro-babel-transformer "0.70.3"
-    metro-react-native-babel-preset "0.70.3"
-    metro-source-map "0.70.3"
+    hermes-parser "0.8.0"
+    metro-babel-transformer "0.72.4"
+    metro-react-native-babel-preset "0.72.4"
+    metro-source-map "0.72.4"
     nullthrows "^1.1.1"
 
 metro-react-native-babel-transformer@^0.58.0:
@@ -11938,19 +12266,20 @@ metro-react-native-babel-transformer@^0.58.0:
     metro-react-native-babel-preset "0.58.0"
     metro-source-map "0.58.0"
 
-metro-resolver@0.70.3, metro-resolver@^0.70.1:
-  version "0.70.3"
-  resolved "https://registry.yarnpkg.com/metro-resolver/-/metro-resolver-0.70.3.tgz#c64fdd6d0a88fa62f3f99f87e539b5f603bd47bf"
-  integrity sha512-5Pc5S/Gs4RlLbziuIWtvtFd9GRoILlaRC8RZDVq5JZWcWHywKy/PjNmOBNhpyvtRlzpJfy/ssIfLhu8zINt1Mw==
+metro-resolver@0.72.4:
+  version "0.72.4"
+  resolved "https://registry.yarnpkg.com/metro-resolver/-/metro-resolver-0.72.4.tgz#37893ff72273a2b7ea529564caa15fe2e2337267"
+  integrity sha512-aHxq/jypzGyi9Ic9woe//RymfxpzWliAkyTmBWPHE9ypGoiobstK0me2j5XuSfzASzCU8wcVt20qy870rxTWLw==
   dependencies:
     absolute-path "^0.0.0"
 
-metro-runtime@0.70.3, metro-runtime@^0.70.1:
-  version "0.70.3"
-  resolved "https://registry.yarnpkg.com/metro-runtime/-/metro-runtime-0.70.3.tgz#09231b9d05dcbdfb5a13df0a45307273e6fe1168"
-  integrity sha512-22xU7UdXZacniTIDZgN2EYtmfau2pPyh97Dcs+cWrLcJYgfMKjWBtesnDcUAQy3PHekDYvBdJZkoQUeskYTM+w==
+metro-runtime@0.72.4:
+  version "0.72.4"
+  resolved "https://registry.yarnpkg.com/metro-runtime/-/metro-runtime-0.72.4.tgz#b3469fd040a9526bfd897c0517c5f052a059ddeb"
+  integrity sha512-EA0ltqyYFpjOdpoRqE2U9FJleqTOIK+ZLRlLaDrx4yz3zTqUZ16W6w71dq+qrwD8BPg7bPKQu7RluU3K6tI79A==
   dependencies:
     "@babel/runtime" "^7.0.0"
+    react-refresh "^0.4.0"
 
 metro-source-map@0.58.0:
   version "0.58.0"
@@ -11965,17 +12294,17 @@ metro-source-map@0.58.0:
     source-map "^0.5.6"
     vlq "^1.0.0"
 
-metro-source-map@0.70.3:
-  version "0.70.3"
-  resolved "https://registry.yarnpkg.com/metro-source-map/-/metro-source-map-0.70.3.tgz#f5976108c18d4661eaa4d188c96713e5d67a903b"
-  integrity sha512-zsYtZGrwRbbGEFHtmMqqeCH9K9aTGNVPsurMOWCUeQA3VGyVGXPGtLMC+CdAM9jLpUyg6jw2xh0esxi+tYH7Uw==
+metro-source-map@0.72.4:
+  version "0.72.4"
+  resolved "https://registry.yarnpkg.com/metro-source-map/-/metro-source-map-0.72.4.tgz#3c6444bba22b84d7d7e383f784a1d59e724192de"
+  integrity sha512-P09aMDEPkLo6BM8VYYoTsH/2B1w6t+mrCwNcNJV1zE+57FPiU4fSBlSeM8G9YeYaezDTHimS2JlMozP+2r+trA==
   dependencies:
     "@babel/traverse" "^7.14.0"
     "@babel/types" "^7.0.0"
     invariant "^2.2.4"
-    metro-symbolicate "0.70.3"
+    metro-symbolicate "0.72.4"
     nullthrows "^1.1.1"
-    ob1 "0.70.3"
+    ob1 "0.72.4"
     source-map "^0.5.6"
     vlq "^1.0.0"
 
@@ -11990,22 +12319,22 @@ metro-symbolicate@0.58.0:
     through2 "^2.0.1"
     vlq "^1.0.0"
 
-metro-symbolicate@0.70.3:
-  version "0.70.3"
-  resolved "https://registry.yarnpkg.com/metro-symbolicate/-/metro-symbolicate-0.70.3.tgz#b039e5629c4ed0c999ea0496d580e1c98260f5cb"
-  integrity sha512-JTYkF1dpeDUssQ84juE1ycnhHki2ylJBBdJE1JHtfu5oC+z1ElDbBdPHq90Uvt8HbRov/ZAnxvv7Zy6asS+WCA==
+metro-symbolicate@0.72.4:
+  version "0.72.4"
+  resolved "https://registry.yarnpkg.com/metro-symbolicate/-/metro-symbolicate-0.72.4.tgz#3be7c9d1f382fc58198efcb515f2de0ec3fc4181"
+  integrity sha512-6ZRo66Q4iKiwaQuHjmogkSCCqaSpJ4QzbHsVHRUe57mFIL34lOLYp7aPfmX7NHCmy061HhDox/kGuYZQRmHB3A==
   dependencies:
     invariant "^2.2.4"
-    metro-source-map "0.70.3"
+    metro-source-map "0.72.4"
     nullthrows "^1.1.1"
     source-map "^0.5.6"
     through2 "^2.0.1"
     vlq "^1.0.0"
 
-metro-transform-plugins@0.70.3:
-  version "0.70.3"
-  resolved "https://registry.yarnpkg.com/metro-transform-plugins/-/metro-transform-plugins-0.70.3.tgz#7fe87cd0d8979b4d5d6e375751d86188fff38fd9"
-  integrity sha512-dQRIJoTkWZN2IVS2KzgS1hs7ZdHDX3fS3esfifPkqFAEwHiLctCf0EsPgIknp0AjMLvmGWfSLJigdRB/dc0ASw==
+metro-transform-plugins@0.72.4:
+  version "0.72.4"
+  resolved "https://registry.yarnpkg.com/metro-transform-plugins/-/metro-transform-plugins-0.72.4.tgz#01e95aa277216fb0887610067125fac9271d399e"
+  integrity sha512-yxB4v/LxQkmN1rjyyeLiV4x+jwCmId4FTTxNrmTYoi0tFPtOBOeSwuqY08LjxZQMJdZOKXqj2bgIewqFXJEkGw==
   dependencies:
     "@babel/core" "^7.14.0"
     "@babel/generator" "^7.14.0"
@@ -12013,29 +12342,29 @@ metro-transform-plugins@0.70.3:
     "@babel/traverse" "^7.14.0"
     nullthrows "^1.1.1"
 
-metro-transform-worker@0.70.3:
-  version "0.70.3"
-  resolved "https://registry.yarnpkg.com/metro-transform-worker/-/metro-transform-worker-0.70.3.tgz#62bfa28ebef98803531c4bcb558de5fc804c94ef"
-  integrity sha512-MtVVsnHhhBOp9GRLCdAb2mD1dTCsIzT4+m34KMRdBDCEbDIb90YafT5prpU8qbj5uKd0o2FOQdrJ5iy5zQilHw==
+metro-transform-worker@0.72.4:
+  version "0.72.4"
+  resolved "https://registry.yarnpkg.com/metro-transform-worker/-/metro-transform-worker-0.72.4.tgz#356903c343dc62373b928b4325ad09a103398cc5"
+  integrity sha512-mIvzy6nRQKMALEdF5g8LXPgCOUi/tGESE5dlb7OSMCj2FAFBm3mTLRrpW5phzK/J6Wg+4Vb9PMS+wGbXR261rA==
   dependencies:
     "@babel/core" "^7.14.0"
     "@babel/generator" "^7.14.0"
     "@babel/parser" "^7.14.0"
     "@babel/types" "^7.0.0"
     babel-preset-fbjs "^3.4.0"
-    metro "0.70.3"
-    metro-babel-transformer "0.70.3"
-    metro-cache "0.70.3"
-    metro-cache-key "0.70.3"
-    metro-hermes-compiler "0.70.3"
-    metro-source-map "0.70.3"
-    metro-transform-plugins "0.70.3"
+    metro "0.72.4"
+    metro-babel-transformer "0.72.4"
+    metro-cache "0.72.4"
+    metro-cache-key "0.72.4"
+    metro-hermes-compiler "0.72.4"
+    metro-source-map "0.72.4"
+    metro-transform-plugins "0.72.4"
     nullthrows "^1.1.1"
 
-metro@0.70.3, metro@^0.70.1:
-  version "0.70.3"
-  resolved "https://registry.yarnpkg.com/metro/-/metro-0.70.3.tgz#4290f538ab5446c7050e718b5c5823eea292c5c2"
-  integrity sha512-uEWS7xg8oTetQDABYNtsyeUjdLhH3KAvLFpaFFoJqUpOk2A3iygszdqmjobFl6W4zrvKDJS+XxdMR1roYvUhTw==
+metro@0.72.4:
+  version "0.72.4"
+  resolved "https://registry.yarnpkg.com/metro/-/metro-0.72.4.tgz#fdfc43b3329388b5a3e8856727403f93a8c05250"
+  integrity sha512-UBqL2fswJjsq2LlfMPV4ArqzLzjyN0nReKRijP3DdSxZiaJDG4NC9sQoVJHbH1HP5qXQMAK/SftyAx1c1kuy+w==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     "@babel/core" "^7.14.0"
@@ -12055,27 +12384,28 @@ metro@0.70.3, metro@^0.70.1:
     error-stack-parser "^2.0.6"
     fs-extra "^1.0.0"
     graceful-fs "^4.2.4"
-    hermes-parser "0.6.0"
+    hermes-parser "0.8.0"
     image-size "^0.6.0"
     invariant "^2.2.4"
-    jest-haste-map "^27.3.1"
     jest-worker "^27.2.0"
+    jsc-safe-url "^0.2.2"
     lodash.throttle "^4.1.1"
-    metro-babel-transformer "0.70.3"
-    metro-cache "0.70.3"
-    metro-cache-key "0.70.3"
-    metro-config "0.70.3"
-    metro-core "0.70.3"
-    metro-hermes-compiler "0.70.3"
-    metro-inspector-proxy "0.70.3"
-    metro-minify-uglify "0.70.3"
-    metro-react-native-babel-preset "0.70.3"
-    metro-resolver "0.70.3"
-    metro-runtime "0.70.3"
-    metro-source-map "0.70.3"
-    metro-symbolicate "0.70.3"
-    metro-transform-plugins "0.70.3"
-    metro-transform-worker "0.70.3"
+    metro-babel-transformer "0.72.4"
+    metro-cache "0.72.4"
+    metro-cache-key "0.72.4"
+    metro-config "0.72.4"
+    metro-core "0.72.4"
+    metro-file-map "0.72.4"
+    metro-hermes-compiler "0.72.4"
+    metro-inspector-proxy "0.72.4"
+    metro-minify-uglify "0.72.4"
+    metro-react-native-babel-preset "0.72.4"
+    metro-resolver "0.72.4"
+    metro-runtime "0.72.4"
+    metro-source-map "0.72.4"
+    metro-symbolicate "0.72.4"
+    metro-transform-plugins "0.72.4"
+    metro-transform-worker "0.72.4"
     mime-types "^2.1.27"
     node-fetch "^2.2.0"
     nullthrows "^1.1.1"
@@ -12480,6 +12810,11 @@ mixin-object@^2.0.1:
     for-in "^0.1.3"
     is-extendable "^0.1.1"
 
+mixpanel-react-native@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/mixpanel-react-native/-/mixpanel-react-native-2.4.1.tgz#d63bf160875e9a0b7e3a50f395ad7aaa6d8c09a5"
+  integrity sha512-NNzXxOxX83FSIKN3x9vY49a13mk2syshWDcXvkfljiQ2bgwk0suA9PKYQNOkbwT/Af53oWt06JMe0xP4RUOyCA==
+
 mkdirp2@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/mkdirp2/-/mkdirp2-1.0.4.tgz#56de1f8f5c93cf2199906362eba0f9f262ee4437"
@@ -12576,11 +12911,6 @@ nan@^2.14.0:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee"
   integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==
 
-nanoid@^3.1.15:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.3.tgz#fd8e8b7aa761fe807dba2d1b98fb7241bb724a25"
-  integrity sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==
-
 nanoid@^3.1.20, nanoid@^3.1.23:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
@@ -12752,6 +13082,11 @@ node-releases@^2.0.1:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.1.tgz#3d1d395f204f1f2f29a54358b9fb678765ad2fc5"
   integrity sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==
 
+node-releases@^2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
+  integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
+
 node-releases@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.3.tgz#225ee7488e4a5e636da8da52854844f9d716ca96"
@@ -12885,10 +13220,10 @@ ob1@0.58.0:
   resolved "https://registry.yarnpkg.com/ob1/-/ob1-0.58.0.tgz#484a1e9a63a8b79d9ea6f3a83b2a42110faac973"
   integrity sha512-uZP44cbowAfHafP1k4skpWItk5iHCoRevMfrnUvYCfyNNPPJd3rfDCyj0exklWi2gDXvjlj2ObsfiqP/bs/J7Q==
 
-ob1@0.70.3:
-  version "0.70.3"
-  resolved "https://registry.yarnpkg.com/ob1/-/ob1-0.70.3.tgz#f48cd5a5abf54b0c423b1b06b6d4ff4d049816cb"
-  integrity sha512-Vy9GGhuXgDRY01QA6kdhToPd8AkLdLpX9GjH5kpqluVqTu70mgOm7tpGoJDZGaNbr9nJlJgnipqHJQRPORixIQ==
+ob1@0.72.4:
+  version "0.72.4"
+  resolved "https://registry.yarnpkg.com/ob1/-/ob1-0.72.4.tgz#d2ddedb09fb258d69490e8809157518a62b75506"
+  integrity sha512-/iPJKpXpVEZS0subUvjew4ept5LTBxj1hD20A4mAj9CJkGGPgvbBlfYtFEBubBkk4dv4Ef5lajsnRBYPxF74cQ==
 
 object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
@@ -13641,7 +13976,7 @@ pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-plist@^3.0.2, plist@^3.0.5:
+plist@^3.0.5:
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/plist/-/plist-3.0.5.tgz#2cbeb52d10e3cdccccf0c11a63a85d830970a987"
   integrity sha512-83vX4eYdQp3vP9SxuYgEM/G/pJQqLUz/V/xzPrzruLs7fz7jxGQ1msZ/mg1nwZxUSuOp4sb+/bEIbRrbzZRxDA==
@@ -13800,7 +14135,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-promise@^8.2.0:
+promise@^8.3.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/promise/-/promise-8.3.0.tgz#8cb333d1edeb61ef23869fbb8a4ea0279ab60e0a"
   integrity sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==
@@ -13932,16 +14267,6 @@ query-string@6.10.1:
     split-on-first "^1.0.0"
     strict-uri-encode "^2.0.0"
 
-query-string@^6.13.6:
-  version "6.14.1"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.14.1.tgz#7ac2dca46da7f309449ba0f86b1fd28255b0c86a"
-  integrity sha512-XDxAeVmpfu1/6IjyT/gXHOl+S0vQ9owggJ30hhWKdHAsNPOcasn5o9BW0eejZqL2e4vMjhAxoW3jVHcD6mbcYw==
-  dependencies:
-    decode-uri-component "^0.2.0"
-    filter-obj "^1.1.0"
-    split-on-first "^1.0.0"
-    strict-uri-encode "^2.0.0"
-
 query-string@^6.8.2:
   version "6.13.1"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.13.1.tgz#d913ccfce3b4b3a713989fe6d39466d92e71ccad"
@@ -13951,6 +14276,16 @@ query-string@^6.8.2:
     split-on-first "^1.0.0"
     strict-uri-encode "^2.0.0"
 
+query-string@^7.1.3:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.3.tgz#a1cf90e994abb113a325804a972d98276fe02328"
+  integrity sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==
+  dependencies:
+    decode-uri-component "^0.2.2"
+    filter-obj "^1.1.0"
+    split-on-first "^1.0.0"
+    strict-uri-encode "^2.0.0"
+
 querystringify@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
@@ -14038,25 +14373,25 @@ react-deep-force-update@^1.0.0:
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.1.2.tgz#3d2ae45c2c9040cbb1772be52f8ea1ade6ca2ee1"
   integrity sha512-WUSQJ4P/wWcusaH+zZmbECOk7H5N2pOIl0vzheeornkIMhu+qrNdGFm0bDZLCb0hSF0jf/kH1SgkNGfBdTc4wA==
 
-react-devtools-core@4.24.0:
-  version "4.24.0"
-  resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.24.0.tgz#7daa196bdc64f3626b3f54f2ff2b96f7c4fdf017"
-  integrity sha512-Rw7FzYOOzcfyUPaAm9P3g0tFdGqGq2LLiAI+wjYcp6CsF3DeeMrRS3HZAho4s273C29G/DJhx0e8BpRE/QZNGg==
+react-devtools-core@4.27.7:
+  version "4.27.7"
+  resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.27.7.tgz#458a6541483078d60a036c75bf88f54c478086ec"
+  integrity sha512-12N0HrhCPbD76Z7SkyJdGdXdPGouUsgV6tlEsbSpAnLDO06tjXZP+irht4wPdYwJAJRQ85DxL48eQoz7UmrSuQ==
   dependencies:
     shell-quote "^1.6.1"
     ws "^7"
 
+react-freeze@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.3.tgz#5e3ca90e682fed1d73a7cb50c2c7402b3e85618d"
+  integrity sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g==
+
 react-is@^16.12.0, react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-"react-is@^16.12.0 || ^17.0.0":
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
-  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
-
-"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0:
+"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.1.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
@@ -14110,14 +14445,14 @@ react-native-calendar-events@2.2.0:
   resolved "https://registry.yarnpkg.com/react-native-calendar-events/-/react-native-calendar-events-2.2.0.tgz#6cb78bf712457ca9928dae95b428c91e7b895ae0"
   integrity sha512-tNUbhT6Ief0JM4OQzQAaz1ri0+MCcAoHptBcEXCz2g7q3A05pg62PR2Dio4F9t2fCAD7Y2+QggdY1ycAsF3Tsg==
 
-react-native-codegen@^0.69.2:
-  version "0.69.2"
-  resolved "https://registry.yarnpkg.com/react-native-codegen/-/react-native-codegen-0.69.2.tgz#e33ac3b1486de59ddae687b731ddbfcef8af0e4e"
-  integrity sha512-yPcgMHD4mqLbckqnWjFBaxomDnBREfRjDi2G/WxNyPBQLD+PXUEmZTkDx6QoOXN+Bl2SkpnNOSsLE2+/RUHoPw==
+react-native-codegen@^0.70.7:
+  version "0.70.7"
+  resolved "https://registry.yarnpkg.com/react-native-codegen/-/react-native-codegen-0.70.7.tgz#8f6b47a88740ae703209d57b7605538d86dacfa6"
+  integrity sha512-qXE8Jrhc9BmxDAnCmrHFDLJrzgjsE/mH57dtC4IO7K76AwagdXNCMRp5SA8XdHJzvvHWRaghpiFHEMl9TtOBcQ==
   dependencies:
     "@babel/parser" "^7.14.0"
     flow-parser "^0.121.0"
-    jscodeshift "^0.13.1"
+    jscodeshift "^0.14.0"
     nullthrows "^1.1.1"
 
 react-native-config@^1.4.5:
@@ -14146,10 +14481,10 @@ react-native-device-info@^10.8.0:
   resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-10.8.0.tgz#c331c94d65542f86bac197f223ee064c7e10a9ec"
   integrity sha512-DE4/X82ZVhdcnR1Y21iTP46WSSJA/rHK3lmeqWfGGq1RKLwXTIdxmfbZZnYwryqJ+esrw2l4ND19qlgxDGby8A==
 
-react-native-document-picker@^9.0.1:
-  version "9.0.1"
-  resolved "https://registry.yarnpkg.com/react-native-document-picker/-/react-native-document-picker-9.0.1.tgz#a5ceec157f84dbadb85fe717c657569755f4c6ca"
-  integrity sha512-l2c2xChwsdjzZIV9QJc85buC3vXkM5ZuY4943yMDj3TiszJp1spmHNaRMZKYIh3yVwdD2jENm0DBU5AWa+jhLg==
+react-native-document-picker@^9.1.1:
+  version "9.1.1"
+  resolved "https://registry.yarnpkg.com/react-native-document-picker/-/react-native-document-picker-9.1.1.tgz#54390c500396b61ed697095ef8a6f9cbe0977bc9"
+  integrity sha512-BW+7DbsILuFThlBm7NUFVUmKKf6Awkcf9R0q8wiCU2DlGGtAKQTt2iHpO5+Dn/7WMPB+rqNv3X1HsmJQ0t5R3g==
   dependencies:
     invariant "^2.2.4"
 
@@ -14161,6 +14496,11 @@ react-native-drawer@2.5.1:
     prop-types "^15.5.8"
     tween-functions "^1.0.1"
 
+react-native-easing-gradient@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-native-easing-gradient/-/react-native-easing-gradient-1.1.1.tgz#8d099795d7a0065e67d37a8489bffe354ffb94fa"
+  integrity sha512-KrGU97kPTMrLNzVXxFirFMgl65uo70gVNoKw2OngDzcDfoswb648I3ggeCnoY+JgMWkPyx4LlG7n3ZNgSPFnLw==
+
 react-native-easy-grid@0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/react-native-easy-grid/-/react-native-easy-grid-0.2.2.tgz#f0be33620be1ebe2d2295918eb58b0a27e8272ab"
@@ -14201,10 +14541,10 @@ react-native-fs@^2.18.0:
     base-64 "^0.1.0"
     utf8 "^3.0.0"
 
-react-native-gesture-handler@^2.12.0:
-  version "2.12.0"
-  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.12.0.tgz#59ca9d97e4c71f70b9c258f14a1a081f4c689976"
-  integrity sha512-rr+XwVzXAVpY8co25ukvyI38fKCxTQjz7WajeZktl8qUPdh1twnSExgpT47DqDi4n+m+OiJPAnHfZOkqqAQMOg==
+react-native-gesture-handler@^2.12.0, react-native-gesture-handler@^2.12.1:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.15.0.tgz#f8e6c0451a7bdf065edb7b9be605480db402baa0"
+  integrity sha512-cmMGW8k86o/xgVTBZZOPohvR5re4Vh65PUxH4HbBBJAYTog4aN4wTVTUlnoky01HuSN8/X4h3tI/K3XLPoDnsg==
   dependencies:
     "@egjs/hammerjs" "^2.0.17"
     hoist-non-react-statics "^3.3.0"
@@ -14219,10 +14559,10 @@ react-native-get-random-values@^1.7.0:
   dependencies:
     fast-base64-decode "^1.0.0"
 
-react-native-gradle-plugin@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.7.tgz#96602f909745239deab7b589443f14fce5da2056"
-  integrity sha512-+4JpbIx42zGTONhBTIXSyfyHICHC29VTvhkkoUOJAh/XHPEixpuBduYgf6Y4y9wsN1ARlQhBBoptTvXvAFQf5g==
+react-native-gradle-plugin@^0.70.3:
+  version "0.70.3"
+  resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz#cbcf0619cbfbddaa9128701aa2d7b4145f9c4fc8"
+  integrity sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A==
 
 react-native-haptic-feedback@^2.0.2:
   version "2.0.2"
@@ -14251,11 +14591,6 @@ react-native-iphone-x-helper@^1.0.3:
   resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz#645e2ffbbb49e80844bb4cbbe34a126fda1e6772"
   integrity sha512-/VbpIEp8tSNNHIvstuA3Swx610whci1Zpc9mqNkqn14DkMbw+ORviln2u0XyHG1kPvvwTNGZY6QpeFwxYaSdbQ==
 
-react-native-iphone-x-helper@^1.3.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
-  integrity sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==
-
 react-native-keyboard-aware-scroll-view@^0.9.5:
   version "0.9.5"
   resolved "https://registry.yarnpkg.com/react-native-keyboard-aware-scroll-view/-/react-native-keyboard-aware-scroll-view-0.9.5.tgz#e2e9665d320c188e6b1f22f151b94eb358bf9b71"
@@ -14282,17 +14617,10 @@ react-native-masked-text@^1.13.0:
     date-and-time "0.9.0"
     tinymask "1.0.2"
 
-react-native-mixpanel@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/react-native-mixpanel/-/react-native-mixpanel-1.2.0.tgz#17c24151cf2039482cd20decc54ccf0e49ccebc5"
-  integrity sha512-Xy+KEIEVFidWuASBdexZquXTJBb3JCyFM7xSgnIOZt5PRzpARGFrYMDErTUZ1wSPK+KFaf1oylInOoC2DddI/Q==
-
-react-native-modal-datetime-picker@^10.2.0:
-  version "10.2.0"
-  resolved "https://registry.yarnpkg.com/react-native-modal-datetime-picker/-/react-native-modal-datetime-picker-10.2.0.tgz#3ec5c299e8bdc9fd2ec0a1a6642a459c408b910f"
-  integrity sha512-eMQb3EPqHx47WrlLPTrXvmLZDwGwGH//WTWiQBUvJ+6ehDeuTjIn8/v/ANv8wxCCrt4NeHem8FQY3Z5fa4fRgQ==
-  dependencies:
-    prop-types "^15.7.2"
+react-native-pager-view@^6.2.3:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-6.2.3.tgz#698f6387fdf06cecc3d8d4792604419cb89cb775"
+  integrity sha512-dqVpXWFtPNfD3D2QQQr8BP+ullS5MhjRJuF8Z/qml4QTILcrWaW8F5iAxKkQR3Jl0ikcEryG/+SQlNcwlo0Ggg==
 
 react-native-pdf-thumbnail@^1.2.1:
   version "1.2.1"
@@ -14378,10 +14706,13 @@ react-native-screen-brightness@^2.0.0-alpha:
   resolved "https://registry.yarnpkg.com/react-native-screen-brightness/-/react-native-screen-brightness-2.0.0-alpha.tgz#2fc30cf711cfafa5e0aec685f0fce51ce65e0052"
   integrity sha512-NdJPptcWiFwG9aypm0awYv9d/aoZSJetXPFkx6w/UuNX9SRr5YTKXMSND/2lwuSOw6uGU9mQ0f4dBuGZSNgzow==
 
-react-native-screens@^2.18.1:
-  version "2.18.1"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.18.1.tgz#47b9991c6f762d00d0ed3233e5283d523e859885"
-  integrity sha512-r5WZLpmx2hHjC1RgMdPq5YpSU9tEhBpUaZ5M1SUtNIONyiLqQVxabhRCINdebIk4depJiIl7yw2Q85zJyeX6fw==
+react-native-screens@^3.30.1:
+  version "3.30.1"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.30.1.tgz#254f5cbbeed649492da112756f85ecae3ccf313e"
+  integrity sha512-/muEvjocCtFb+j5J3YmLvB25+f4rIU8hnnxgGTkXcAf2omPBY8uhPjJaaFUlvj64VEoEzJcRpugbXWsjfPPIFg==
+  dependencies:
+    react-freeze "^1.0.0"
+    warn-once "^0.1.0"
 
 react-native-sha256@1.2.3:
   version "1.2.3"
@@ -14408,18 +14739,20 @@ react-native-svg-transformer@^0.14.3:
     path-dirname "^1.0.2"
     semver "^5.6.0"
 
-react-native-svg@^12.3.0:
-  version "12.3.0"
-  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-12.3.0.tgz#40f657c5d1ee366df23f3ec8dae76fd276b86248"
-  integrity sha512-ESG1g1j7/WLD7X3XRFTQHVv0r6DpbHNNcdusngAODIxG88wpTWUZkhcM3A2HJTb+BbXTFDamHv7FwtRKWQ/ALg==
+react-native-svg@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-15.1.0.tgz#07c75f29b1d641faba50144c7ccd21604b368420"
+  integrity sha512-p0Sx0EpQNk1nu6UcMEiB8K9P04n3J7s+pNYUwf1d/Yz+v4hk961VjuVqjyndgiEbHZyWiKWLZRVNuvLpwjPY2A==
   dependencies:
-    css-select "^4.2.1"
-    css-tree "^1.0.0-alpha.39"
+    css-select "^5.1.0"
+    css-tree "^1.1.3"
 
-react-native-tab-view@^2.x:
-  version "2.16.0"
-  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.16.0.tgz#cae72c7084394bd328fac5fefb86cd966df37a86"
-  integrity sha512-ac2DmT7+l13wzIFqtbfXn4wwfgtPoKzWjjZyrK1t+T8sdemuUvD4zIt+UImg03fu3s3VD8Wh/fBrIdcqQyZJWg==
+react-native-tab-view@3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-3.5.2.tgz#2789b8af6148b16835869566bf13dc3b0e6c1b46"
+  integrity sha512-nE5WqjbeEPsWQx4mtz81QGVvgHRhujTNIIZiMCx3Bj6CBFDafbk7XZp9ocmtzXUQaZ4bhtVS43R4FIiR4LboJw==
+  dependencies:
+    use-latest-callback "^0.1.5"
 
 react-native-vector-icons@^7.0.0:
   version "7.0.0"
@@ -14460,15 +14793,15 @@ react-native-xml2js@^1.0.3:
     timers "0.1.x"
     xmlbuilder "8.2.x"
 
-react-native@0.69.9:
-  version "0.69.9"
-  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.69.9.tgz#c988dfc2e21b3b586d35a8cc57b102537e760edc"
-  integrity sha512-I1xqIn47RWxBToO4E6yqyIPSaK9mZnMiscMfrFpWjQr3Gdkicr9y+twmtrRszxaLdQLjHzh/M3y4qOqc3hZnpg==
+react-native@0.70.15:
+  version "0.70.15"
+  resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.70.15.tgz#65f2c5c399ff8e2a892cef9b094cc0888653a874"
+  integrity sha512-pm2ZPpA+m0Kl0THAy2fptnp7B9+QPexpfad9fSXfqjPufrXG2alwW8kYCn2EO5ZUX6bomZjFEswz6RzdRN/p9A==
   dependencies:
     "@jest/create-cache-key-function" "^27.0.1"
-    "@react-native-community/cli" "^8.0.4"
-    "@react-native-community/cli-platform-android" "^8.0.4"
-    "@react-native-community/cli-platform-ios" "^8.0.4"
+    "@react-native-community/cli" "9.3.5"
+    "@react-native-community/cli-platform-android" "9.3.4"
+    "@react-native-community/cli-platform-ios" "9.3.0"
     "@react-native/assets" "1.0.0"
     "@react-native/normalize-color" "2.0.0"
     "@react-native/polyfills" "2.0.0"
@@ -14476,24 +14809,23 @@ react-native@0.69.9:
     anser "^1.4.9"
     base64-js "^1.1.2"
     event-target-shim "^5.0.1"
-    hermes-engine "~0.11.0"
     invariant "^2.2.4"
     jsc-android "^250230.2.1"
     memoize-one "^5.0.0"
-    metro-react-native-babel-transformer "0.70.3"
-    metro-runtime "0.70.3"
-    metro-source-map "0.70.3"
+    metro-react-native-babel-transformer "0.72.4"
+    metro-runtime "0.72.4"
+    metro-source-map "0.72.4"
     mkdirp "^0.5.1"
     nullthrows "^1.1.1"
     pretty-format "^26.5.2"
-    promise "^8.2.0"
-    react-devtools-core "4.24.0"
-    react-native-codegen "^0.69.2"
-    react-native-gradle-plugin "^0.0.7"
+    promise "^8.3.0"
+    react-devtools-core "4.27.7"
+    react-native-codegen "^0.70.7"
+    react-native-gradle-plugin "^0.70.3"
     react-refresh "^0.4.0"
-    react-shallow-renderer "16.15.0"
+    react-shallow-renderer "^16.15.0"
     regenerator-runtime "^0.13.2"
-    scheduler "^0.21.0"
+    scheduler "^0.22.0"
     stacktrace-parser "^0.1.3"
     use-sync-external-store "^1.0.0"
     whatwg-fetch "^3.0.0"
@@ -14524,7 +14856,7 @@ react-refresh@^0.4.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.4.3.tgz#966f1750c191672e76e16c2efa569150cc73ab53"
   integrity sha512-Hwln1VNuGl/6bVwnd0Xdn1e84gT/8T9aYNL+HAKDArLCS7LWjwr7StE30IEYbIkx0Vi3vs+coQxe+SQDbGbbpA==
 
-react-shallow-renderer@16.15.0:
+react-shallow-renderer@^16.15.0:
   version "16.15.0"
   resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457"
   integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==
@@ -14532,22 +14864,14 @@ react-shallow-renderer@16.15.0:
     object-assign "^4.1.1"
     react-is "^16.12.0 || ^17.0.0 || ^18.0.0"
 
-react-shallow-renderer@^16.13.1:
-  version "16.14.1"
-  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz#bf0d02df8a519a558fd9b8215442efa5c840e124"
-  integrity sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==
+react-test-renderer@18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.1.0.tgz#35b75754834cf9ab517b6813db94aee0a6b545c3"
+  integrity sha512-OfuueprJFW7h69GN+kr4Ywin7stcuqaYAt1g7airM5cUgP0BoF5G5CXsPGmXeDeEkncb2fqYNECO4y18sSqphg==
   dependencies:
-    object-assign "^4.1.1"
-    react-is "^16.12.0 || ^17.0.0"
-
-react-test-renderer@18.0.0:
-  version "18.0.0"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.0.0.tgz#fa403d625ea9478a70ace43db88833f6c3a5bb4c"
-  integrity sha512-SyZTP/FSkwfiKOZuTZiISzsrC8A80KNlQ8PyyoGoOq+VzMAab6Em1POK/CiX3+XyXG6oiJa1C53zYDbdrJu9fw==
-  dependencies:
-    react-is "^18.0.0"
-    react-shallow-renderer "^16.13.1"
-    scheduler "^0.21.0"
+    react-is "^18.1.0"
+    react-shallow-renderer "^16.15.0"
+    scheduler "^0.22.0"
 
 react-transform-hmr@^1.0.4:
   version "1.0.4"
@@ -14565,10 +14889,10 @@ react-tween-state@^0.1.5:
     raf "^3.1.0"
     tween-functions "^1.0.1"
 
-react@18.0.0:
-  version "18.0.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96"
-  integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==
+react@18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
+  integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
   dependencies:
     loose-envify "^1.1.0"
 
@@ -14701,12 +15025,12 @@ readline@^1.3.0:
   resolved "https://registry.yarnpkg.com/readline/-/readline-1.3.0.tgz#c580d77ef2cfc8752b132498060dc9793a7ac01c"
   integrity sha1-xYDXfvLPyHUrEySYBg3JeTp6wBw=
 
-recast@^0.20.4:
-  version "0.20.5"
-  resolved "https://registry.yarnpkg.com/recast/-/recast-0.20.5.tgz#8e2c6c96827a1b339c634dd232957d230553ceae"
-  integrity sha512-E5qICoPoNL4yU0H0NoBDntNB0Q5oMSNh9usFctYniLBluTthi3RsQVBXIJNbApOlvSwW/RGxIuokPcAc59J5fQ==
+recast@^0.21.0:
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.21.5.tgz#e8cd22bb51bcd6130e54f87955d33a2b2e57b495"
+  integrity sha512-hjMmLaUXAm1hIuTqOdeYObMslq/q+Xff6QE3Y2P+uoHAg2nmVlLBps2hzh1UJDdMtDTMXOFewK6ky51JQIeECg==
   dependencies:
-    ast-types "0.14.2"
+    ast-types "0.15.2"
     esprima "~4.0.0"
     source-map "~0.6.1"
     tslib "^2.0.1"
@@ -15384,10 +15708,10 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.21.0:
-  version "0.21.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
-  integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
+scheduler@^0.22.0:
+  version "0.22.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"
+  integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==
   dependencies:
     loose-envify "^1.1.0"
 
@@ -15406,6 +15730,11 @@ semver@^6.0.0, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
+semver@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
 semver@^7.0.0, semver@^7.1.1, semver@^7.1.3, semver@^7.2.1, semver@^7.3.2, semver@^7.3.5, semver@^7.3.7:
   version "7.3.8"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
@@ -16961,6 +17290,14 @@ update-browserslist-db@^1.0.10:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
+update-browserslist-db@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
+  integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 update-browserslist-db@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz#be06a5eedd62f107b7c19eb5bcefb194411abf38"
@@ -16999,6 +17336,11 @@ use-isomorphic-layout-effect@^1.0.0:
   resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
   integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
 
+use-latest-callback@^0.1.5, use-latest-callback@^0.1.7:
+  version "0.1.9"
+  resolved "https://registry.yarnpkg.com/use-latest-callback/-/use-latest-callback-0.1.9.tgz#10191dc54257e65a8e52322127643a8940271e2a"
+  integrity sha512-CL/29uS74AwreI/f2oz2hLTW7ZqVeV5+gxFeGudzQrgkCytrHw33G4KbnQOrRlAEzzAFXi7dDLMC9zhWcVpzmw==
+
 use-sync-external-store@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
@@ -17153,6 +17495,11 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
+warn-once@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/warn-once/-/warn-once-0.1.1.tgz#952088f4fb56896e73fd4e6a3767272a3fccce43"
+  integrity sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==
+
 wcwidth@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"