INJIMOB-3604: changes according to new style guide (#2121)

* [injimob-3604]: changes according to new style guide Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [injimob-3604]: changes according to new style guide Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> # Conflicts: # components/KebabPopUp.tsx # components/VC/common/VCItemField.tsx # components/ui/svg.tsx # components/ui/themes/DefaultTheme.ts # locales/ara.json # locales/en.json # locales/fil.json # locales/hin.json # locales/kan.json # locales/tam.json * [injimob-3604]: changes according to review comments Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [injimob-3604]: changes according to review comments Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [injimob-3604]: changes according to review comments Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [injimob-3604]: changes according to review comments Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [injimob-3604]: removed the debug.keystore file Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> --------- Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> Signed-off-by: jaswanthkumartw <jaswanthkumar.p@thoughtworks.com>
2026-01-07 20:53:54 -05:00 · 2025-11-07 11:28:36 +05:30
parent 33c6caa08a
commit a7e9d99076
48 changed files with 1212 additions and 776 deletions
--- a/.talismanrc
+++ b/.talismanrc
@@ -2,7 +2,7 @@ fileignoreconfig:
  - filename: package.json
    checksum: 5b4fcb5ddc7cc96cc2d1733b544d56ea66e88cdab995a1052fbf9ac0e9c2dc21
  - filename: package-lock.json
-    checksum: 1885743d6ee2727f5f5b175db599676232f549b12e3ec94efc7c050f7a61b8d7
+    checksum: 0c4eec7fc90a92da92234caa4fa4828caf579d015a11daf38d9fa515c1f1f9bf
  - filename: lib/jsonld-signatures/suites/ed255192018/ed25519.ts
    checksum: 493b6e31144116cb612c24d98b97d8adcad5609c0a52c865a6847ced0a0ddc3a
  - filename: components/PasscodeVerify.tsx
@@ -413,3 +413,9 @@ fileignoreconfig:
  - filename: components/VC/Views/VCDetailView.tsx
    checksum: 890c216a5632ac77b938f2f58f2123a669ea45b933a41931b8e7324e315f2d50
    version: "1.0"
+  - filename: screens/Settings/SettingScreen.tsx
+    checksum: ce9c50ec1af107161c2a25e1481794aaa9898ff1998dff26bc7986c43a51c2fa
+  - filename: screens/IntroSliders/trustedDigitalWalletIntro.tsx
+    checksum: 4d46111af02fc8b6731f624d3e4f6ce71d6369649f4549564627a8962b136192
+  - filename: components/ui/Picker.tsx
+    checksum: ad814e904cb990f55068281fcb566cca349872de2c4fd66432ed6372fb540ec3
--- a/assets/Error_Toast_Icon.svg
+++ b/assets/Error_Toast_Icon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#EA3A3D"/>
+<path d="M14.1209 15.5349L11.9999 13.4141L9.87897 15.5349C9.69133 15.7226 9.43681 15.8281 9.17145 15.8281C8.90608 15.8281 8.65157 15.7226 8.46393 15.5349C8.27629 15.3473 8.1709 15.0928 8.1709 14.8274C8.1709 14.562 8.27629 14.3078 8.46393 14.1201L10.585 11.999L8.46393 9.87695C8.27642 9.68931 8.17117 9.43495 8.17126 9.16968C8.17136 8.90441 8.27678 8.64991 8.46442 8.4624C8.65206 8.27489 8.90654 8.16958 9.17181 8.16968C9.43708 8.16977 9.69146 8.27525 9.87897 8.46289L11.9999 10.584L14.1209 8.46289C14.2138 8.36998 14.324 8.2964 14.4454 8.24609C14.5667 8.19579 14.6967 8.16972 14.8281 8.16968C14.9594 8.16963 15.0895 8.19563 15.2109 8.24585C15.3322 8.29607 15.4426 8.36956 15.5355 8.4624C15.6284 8.55525 15.7021 8.66553 15.7524 8.78687C15.8027 8.9082 15.8286 9.03833 15.8286 9.16968C15.8287 9.30103 15.8028 9.43112 15.7526 9.55249C15.7024 9.67386 15.6288 9.78404 15.5359 9.87695L13.4139 12L15.5349 14.1211C15.7226 14.3087 15.828 14.5632 15.828 14.8286C15.828 15.094 15.7226 15.3482 15.5349 15.5359C15.3473 15.7235 15.0928 15.8291 14.8275 15.8291C14.5621 15.8291 14.3076 15.7235 14.1199 15.5359L14.1209 15.5349Z" fill="white"/>
+</svg>
--- a/assets/Expired_Status.svg
+++ b/assets/Expired_Status.svg
@@ -0,0 +1,4 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="5.5" cy="5.5" r="3.5" fill="white"/>
+<path d="M5.41659 7.58331C5.53936 7.58331 5.64228 7.54179 5.72534 7.45873C5.80839 7.37567 5.84992 7.27276 5.84992 7.14998C5.84992 7.0272 5.80839 6.92429 5.72534 6.84123C5.64228 6.75817 5.53936 6.71665 5.41659 6.71665C5.29381 6.71665 5.19089 6.75817 5.10784 6.84123C5.02478 6.92429 4.98325 7.0272 4.98325 7.14998C4.98325 7.27276 5.02478 7.37567 5.10784 7.45873C5.19089 7.54179 5.29381 7.58331 5.41659 7.58331ZM4.98325 5.84998H5.84992V3.24998H4.98325V5.84998ZM5.41659 9.74998C4.81714 9.74998 4.25381 9.63623 3.72659 9.40873C3.19936 9.18123 2.74075 8.87248 2.35075 8.48248C1.96075 8.09248 1.652 7.63387 1.4245 7.10665C1.197 6.57942 1.08325 6.01609 1.08325 5.41665C1.08325 4.8172 1.197 4.25387 1.4245 3.72665C1.652 3.19942 1.96075 2.74081 2.35075 2.35081C2.74075 1.96081 3.19936 1.65206 3.72659 1.42456C4.25381 1.19706 4.81714 1.08331 5.41659 1.08331C6.01603 1.08331 6.57936 1.19706 7.10659 1.42456C7.63381 1.65206 8.09242 1.96081 8.48242 2.35081C8.87242 2.74081 9.18117 3.19942 9.40867 3.72665C9.63617 4.25387 9.74992 4.8172 9.74992 5.41665C9.74992 6.01609 9.63617 6.57942 9.40867 7.10665C9.18117 7.63387 8.87242 8.09248 8.48242 8.48248C8.09242 8.87248 7.63381 9.18123 7.10659 9.40873C6.57936 9.63623 6.01603 9.74998 5.41659 9.74998Z" fill="#F04B0F"/>
+</svg>
--- a/assets/Icon.svg
+++ b/assets/Icon.svg
@@ -0,0 +1,3 @@
+<svg width="59" height="59" viewBox="0 0 59 59" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.2778 2H16.6667C11.5329 2 8.96594 2 7.00509 2.99911C5.28027 3.87795 3.87795 5.28027 2.99911 7.00509C2 8.96594 2 11.5329 2 16.6667V17.2778M17.2778 57H16.6667C11.5329 57 8.96594 57 7.00509 56.0009C5.28027 55.1221 3.87795 53.7197 2.99911 51.9949C2 50.0341 2 47.4671 2 42.3333V41.7222M57 17.2778V16.6667C57 11.5329 57 8.96594 56.0009 7.00509C55.1221 5.28027 53.7197 3.87795 51.9949 2.99911C50.0341 2 47.4671 2 42.3333 2H41.7222M57 41.7222V42.3333C57 47.4671 57 50.0341 56.0009 51.9949C55.1221 53.7197 53.7197 55.1221 51.9949 56.0009C50.0341 57 47.4671 57 42.3333 57H41.7222M15.75 17.2778V21.8611M43.25 17.2778V21.8611M26.4444 31.3336C28.8889 31.3336 31.0278 29.1947 31.0278 26.7503V17.2778M39.2784 39.2776C33.7784 44.7776 24.9173 44.7776 19.4173 39.2776" stroke="#F2680C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/Info_Toast_Icon.svg
+++ b/assets/Info_Toast_Icon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#014DAF"/>
+<path d="M11.0002 17V11C11.0002 10.7348 11.1056 10.4805 11.2932 10.293C11.4807 10.1054 11.735 10 12.0002 10C12.2655 10 12.5198 10.1054 12.7073 10.293C12.8949 10.4805 13.0002 10.7348 13.0002 11V17C13.0002 17.2652 12.8949 17.5195 12.7073 17.707C12.5198 17.8946 12.2655 18 12.0002 18C11.735 18 11.4807 17.8946 11.2932 17.707C11.1056 17.5195 11.0002 17.2652 11.0002 17ZM10.7402 6.87013C10.7402 6.64663 10.8065 6.42802 10.9307 6.2422C11.0548 6.05637 11.2313 5.91146 11.4378 5.82594C11.6443 5.74041 11.8715 5.71813 12.0907 5.76173C12.3099 5.80533 12.5112 5.91302 12.6693 6.07105C12.8273 6.22909 12.9349 6.43047 12.9785 6.64967C13.0221 6.86887 12.9998 7.09602 12.9142 7.3025C12.8287 7.50898 12.6839 7.68541 12.498 7.80958C12.3122 7.93375 12.0937 8.00001 11.8702 8.00001C11.5705 8.00001 11.2831 7.88087 11.0712 7.66895C10.8593 7.45704 10.7402 7.16982 10.7402 6.87013Z" fill="white"/>
+</svg>
--- a/assets/Pending_Status.svg
+++ b/assets/Pending_Status.svg
@@ -0,0 +1,4 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="5.5" cy="5.5" r="3.5" fill="white"/>
+<path d="M5.41671 7.58331C5.53949 7.58331 5.6424 7.54179 5.72546 7.45873C5.80851 7.37567 5.85004 7.27276 5.85004 7.14998C5.85004 7.0272 5.80851 6.92429 5.72546 6.84123C5.6424 6.75817 5.53949 6.71665 5.41671 6.71665C5.29393 6.71665 5.19101 6.75817 5.10796 6.84123C5.0249 6.92429 4.98337 7.0272 4.98337 7.14998C4.98337 7.27276 5.0249 7.37567 5.10796 7.45873C5.19101 7.54179 5.29393 7.58331 5.41671 7.58331ZM4.98337 5.84998H5.85004V3.24998H4.98337V5.84998ZM5.41671 9.74998C4.81726 9.74998 4.25393 9.63623 3.72671 9.40873C3.19949 9.18123 2.74087 8.87248 2.35087 8.48248C1.96087 8.09248 1.65212 7.63387 1.42462 7.10665C1.19712 6.57942 1.08337 6.01609 1.08337 5.41665C1.08337 4.8172 1.19712 4.25387 1.42462 3.72665C1.65212 3.19942 1.96087 2.74081 2.35087 2.35081C2.74087 1.96081 3.19949 1.65206 3.72671 1.42456C4.25393 1.19706 4.81726 1.08331 5.41671 1.08331C6.01615 1.08331 6.57949 1.19706 7.10671 1.42456C7.63393 1.65206 8.09254 1.96081 8.48254 2.35081C8.87254 2.74081 9.18129 3.19942 9.40879 3.72665C9.63629 4.25387 9.75004 4.8172 9.75004 5.41665C9.75004 6.01609 9.63629 6.57942 9.40879 7.10665C9.18129 7.63387 8.87254 8.09248 8.48254 8.48248C8.09254 8.87248 7.63393 9.18123 7.10671 9.40873C6.57949 9.63623 6.01615 9.74998 5.41671 9.74998Z" fill="#D98C00"/>
+</svg>
--- a/assets/Receive_Card.svg
+++ b/assets/Receive_Card.svg
@@ -8,6 +8,6 @@
  </defs>
  <g id="Group_57608" data-name="Group 57608" transform="translate(-88.75 -189.75)">
    <path id="badge_FILL0_wght0_GRAD0_opszNaN_1_" data-name="badge_FILL0_wght0_GRAD0_opszNaN (1)" d="M81.725,394a1.622,1.622,0,0,1-1.208-.54A1.764,1.764,0,0,1,80,392.2V377.8a1.764,1.764,0,0,1,.518-1.26,1.622,1.622,0,0,1,1.208-.54h19.55a1.622,1.622,0,0,1,1.208.54A1.764,1.764,0,0,1,103,377.8v14.4a1.764,1.764,0,0,1-.518,1.26,1.622,1.622,0,0,1-1.208.54Zm0-1.8h19.55V377.8H81.725Zm2.645-3.72h6.871v-.42a1.793,1.793,0,0,0-.259-.96,1.313,1.313,0,0,0-.661-.57,11.176,11.176,0,0,0-1.438-.435,5.053,5.053,0,0,0-1.006-.1,5.468,5.468,0,0,0-1.164.135,12.27,12.27,0,0,0-1.394.405,1.3,1.3,0,0,0-.69.57,1.793,1.793,0,0,0-.259.96Zm3.508-3.51a1.466,1.466,0,0,0,1.1-.472,1.68,1.68,0,0,0,0-2.3,1.516,1.516,0,0,0-2.2,0,1.68,1.68,0,0,0,0,2.3A1.466,1.466,0,0,0,87.878,384.97Zm3.623-.51,0,.51" transform="translate(9 -186)" stroke="none" stroke-width="0.5" fill="url(#linear-gradient)"/>
-    <path id="publish_FILL0_wght0_GRAD0_opszNaN" d="M2.506,4.709H1.754V1.288L.578,2.331l-.041.036L.5,2.331l-.456-.4L0,1.89l.041-.036L2.089.036,2.13,0,2.17.036,4.219,1.853l.041.036-.041.036-.456.4-.041.036-.041-.036L2.506,1.288V4.709Z" transform="translate(107.618 201.781) rotate(180)" fill="#683387" stroke="none" stroke-width="0.4"/>
+    <path id="publish_FILL0_wght0_GRAD0_opszNaN" d="M2.506,4.709H1.754V1.288L.578,2.331l-.041.036L.5,2.331l-.456-.4L0,1.89l.041-.036L2.089.036,2.13,0,2.17.036,4.219,1.853l.041.036-.041.036-.456.4-.041.036-.041-.036L2.506,1.288V4.709Z" transform="translate(107.618 201.781) rotate(180)" fill="#F2680C" stroke="none" stroke-width="0.4"/>
  </g>
 </svg>
--- a/assets/Revoked_Status.svg
+++ b/assets/Revoked_Status.svg
@@ -0,0 +1,4 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="5.5" cy="5.5" r="3.5" fill="white"/>
+<path d="M5.41671 7.58337C5.53949 7.58337 5.6424 7.54185 5.72546 7.45879C5.80851 7.37574 5.85004 7.27282 5.85004 7.15004C5.85004 7.02726 5.80851 6.92435 5.72546 6.84129C5.6424 6.75824 5.53949 6.71671 5.41671 6.71671C5.29393 6.71671 5.19101 6.75824 5.10796 6.84129C5.0249 6.92435 4.98337 7.02726 4.98337 7.15004C4.98337 7.27282 5.0249 7.37574 5.10796 7.45879C5.19101 7.54185 5.29393 7.58337 5.41671 7.58337ZM4.98337 5.85004H5.85004V3.25004H4.98337V5.85004ZM5.41671 9.75004C4.81726 9.75004 4.25393 9.63629 3.72671 9.40879C3.19949 9.18129 2.74087 8.87254 2.35087 8.48254C1.96087 8.09254 1.65212 7.63393 1.42462 7.10671C1.19712 6.57949 1.08337 6.01615 1.08337 5.41671C1.08337 4.81726 1.19712 4.25393 1.42462 3.72671C1.65212 3.19949 1.96087 2.74087 2.35087 2.35087C2.74087 1.96087 3.19949 1.65212 3.72671 1.42462C4.25393 1.19712 4.81726 1.08337 5.41671 1.08337C6.01615 1.08337 6.57949 1.19712 7.10671 1.42462C7.63393 1.65212 8.09254 1.96087 8.48254 2.35087C8.87254 2.74087 9.18129 3.19949 9.40879 3.72671C9.63629 4.25393 9.75004 4.81726 9.75004 5.41671C9.75004 6.01615 9.63629 6.57949 9.40879 7.10671C9.18129 7.63393 8.87254 8.09254 8.48254 8.48254C8.09254 8.87254 7.63393 9.18129 7.10671 9.40879C6.57949 9.63629 6.01615 9.75004 5.41671 9.75004Z" fill="#7D0038"/>
+</svg>
--- a/assets/Selected_Check_Box.svg
+++ b/assets/Selected_Check_Box.svg
@@ -1,7 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
  <g id="Group_58148" data-name="Group 58148" transform="translate(-0.114 -0.21)">
    <g id="Group_57140" data-name="Group 57140" transform="translate(-0.095)">
-      <g id="Rectangle_7173" data-name="Rectangle 7173" transform="translate(0.209 0.21)" fill="#951F6F" stroke="#951F6F" stroke-width="2">
+      <g id="Rectangle_7173" data-name="Rectangle 7173" transform="translate(0.209 0.21)" fill="#F2680C" stroke="#F2680C" stroke-width="2">
        <rect width="18" height="18" rx="4" stroke="none"/>
        <rect x="1" y="1" width="16" height="16" rx="3" fill="none"/>
      </g>
--- a/assets/Success_Toast_Icon.svg
+++ b/assets/Success_Toast_Icon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#3B9F76"/>
+<path d="M16.8317 7.00011C16.6831 7.00573 16.5372 7.0415 16.4028 7.10509C16.2684 7.16869 16.1483 7.2589 16.0497 7.37023C14.2497 9.31323 12.6078 11.2192 10.8798 13.1202L8.84875 11.3651C8.7345 11.2649 8.60042 11.1899 8.45525 11.1449C8.31008 11.0999 8.15707 11.0859 8.00616 11.1039C7.85524 11.1219 7.70983 11.1715 7.57934 11.2494C7.44884 11.3273 7.33622 11.4317 7.24877 11.556C7.05967 11.8141 6.97309 12.1335 7.00579 12.4518C7.03849 12.7701 7.18815 13.0649 7.42577 13.2792L10.2687 15.7301C10.4834 15.9169 10.7633 16.0113 11.0474 15.9925C11.3314 15.9738 11.5964 15.8434 11.7847 15.63C13.8297 13.422 15.6617 11.2531 17.6597 9.0941C17.8761 8.85825 17.9975 8.55065 18.0002 8.23058C18.003 7.91051 17.887 7.60076 17.6747 7.36119C17.5685 7.24392 17.4381 7.15079 17.2927 7.08849C17.1472 7.02619 16.9899 6.9961 16.8317 7.00011V7.00011Z" fill="white"/>
+</svg>
--- a/assets/Valid_Status.svg
+++ b/assets/Valid_Status.svg
@@ -0,0 +1,11 @@
+<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1851_393)">
+<path d="M4.33333 8.66667C6.72657 8.66667 8.66667 6.72657 8.66667 4.33333C8.66667 1.9401 6.72657 0 4.33333 0C1.9401 0 0 1.9401 0 4.33333C0 6.72657 1.9401 8.66667 4.33333 8.66667Z" fill="#4B9D20"/>
+<path d="M3.62522 6.51644L7.02082 3.12084L6.46702 2.5809L3.62522 5.42704L2.18569 3.9849L1.64575 4.52484L3.62522 6.51644Z" fill="#EBE6F3"/>
+</g>
+<defs>
+<clipPath id="clip0_1851_393">
+<rect width="8.66667" height="8.66667" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/assets/Warning_Toast_Icon.svg
+++ b/assets/Warning_Toast_Icon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#F9B959"/>
+<path d="M10.9998 17V11C10.9998 10.7348 11.1052 10.4805 11.2927 10.293C11.4802 10.1054 11.7346 10 11.9998 10C12.265 10 12.5194 10.1054 12.7069 10.293C12.8944 10.4805 12.9998 10.7348 12.9998 11V17C12.9998 17.2652 12.8944 17.5195 12.7069 17.707C12.5194 17.8946 12.265 18 11.9998 18C11.7346 18 11.4802 17.8946 11.2927 17.707C11.1052 17.5195 10.9998 17.2652 10.9998 17ZM10.7398 6.87013C10.7378 6.64622 10.8024 6.42665 10.9253 6.23951C11.0483 6.05237 11.2241 5.90592 11.4304 5.81886C11.6367 5.7318 11.8642 5.70803 12.084 5.7505C12.3039 5.79297 12.5062 5.89976 12.6652 6.05738C12.8242 6.21501 12.9329 6.41629 12.9773 6.63575C13.0217 6.85522 12.9999 7.08299 12.9147 7.29005C12.8295 7.49711 12.6847 7.67423 12.4986 7.79884C12.3126 7.92345 12.0937 7.98999 11.8698 7.99C11.7221 7.99066 11.5756 7.96219 11.4389 7.90626C11.3021 7.85033 11.1778 7.76808 11.0729 7.66407C10.9679 7.56007 10.8845 7.4363 10.8274 7.30006C10.7702 7.16382 10.7404 7.01787 10.7398 6.87013V6.87013Z" fill="white"/>
+</svg>
--- a/components/BannerNotification.tsx
+++ b/components/BannerNotification.tsx
@@ -1,30 +1,36 @@
 import React from 'react';
-import {Pressable, View} from 'react-native';
+import {Pressable, StatusBar, View} from 'react-native';
 import {Column, Row, Text} from './ui';
 import {Theme} from './ui/styleUtils';
 import {Icon} from 'react-native-elements';
 import testIDProps from '../shared/commonUtil';
+import ErrorToastIcon from '../assets/Error_Toast_Icon.svg';
+import InfoToastIcon from '../assets/Info_Toast_Icon.svg';
+import SuccessToastIcon from '../assets/Success_Toast_Icon.svg';

 export const BannerNotification: React.FC<BannerNotificationProps> = props => {
  return (
    <View {...testIDProps(props.testId)}>
      <Row
        style={[Theme.BannerStyles.container, Theme.BannerStyles[props.type]]}>
-        <Column fill>
+        <Row fill>
+          {props.type === BannerStatusType.SUCCESS && <SuccessToastIcon />}
+          {props.type === BannerStatusType.ERROR && <ErrorToastIcon />}
+          {props.type === BannerStatusType.IN_PROGRESS && <InfoToastIcon />}
          <Text
            testID={`${props.testId}Text`}
-            color={Theme.Colors.whiteText}
+            color={Theme.Colors.PopupText}
            weight="semibold"
            style={Theme.BannerStyles.text}>
            {props.message}
          </Text>
-        </Column>
+        </Row>
        <Column>
          <Pressable
            style={Theme.BannerStyles.dismiss}
            {...testIDProps('close')}
            onPress={props.onClosePress}>
-            <Icon name="close" color={Theme.Colors.whiteText} size={19} />
+            <Icon name="close" color={Theme.Colors.PopupText} size={19} />
          </Pressable>
        </Column>
      </Row>
--- a/components/BannerNotificationContainer.tsx
+++ b/components/BannerNotificationContainer.tsx
@@ -30,7 +30,7 @@ export const BannerNotificationContainer: React.FC<
  const verificationStatus = bannerNotificationController.verificationStatus || null;

  return (
-    <>
+    <View style={[{position: 'absolute', zIndex: 100}]}>
      <BackupAndRestoreBannerNotification />

      {settingsScreenController.isKeyOrderSet === true && (
@@ -145,7 +145,7 @@ export const BannerNotificationContainer: React.FC<
          testId={'downloadingVcSuccessPopup'}
        />
      )}
-    </>
+    </View>
  );
 };

--- a/components/BiometricIcon.tsx
+++ b/components/BiometricIcon.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import {isIOS} from '../shared/constants';
+import {SvgImage} from './ui/svg';
+import {View} from 'react-native';
+
+interface BiometricIconProps {
+  size?: number;
+}
+
+const BiometricIcon: React.FC<BiometricIconProps> = ({size = 66}) => {
+  const Icon = isIOS()
+    ? SvgImage.faceBiometicIcon(size)
+    : SvgImage.fingerprintIcon(size);
+
+  return <View>{Icon}</View>;
+};
+
+export default BiometricIcon;
--- a/components/KebabPopUp.tsx
+++ b/components/KebabPopUp.tsx
@@ -59,7 +59,7 @@ export const KebabPopUp: React.FC<KebabPopUpProps> = props => {
                  {item.icon}
                </View>
                <Text
-                  style={{ fontFamily: 'Inter_600SemiBold' }}
+                  style={{fontFamily: 'Montserrat_600SemiBold'}}
                  color={
                    item.testID === 'removeFromWallet'
                      ? Theme.Colors.warningText
--- a/components/Toggle.tsx
+++ b/components/Toggle.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import {View} from 'react-native';
+import SwitchToggle from 'react-native-switch-toggle';
+import {Theme} from './ui/styleUtils';
+import testIDProps from '../shared/commonUtil';
+
+interface ShareToggleProps {
+  value: boolean;
+  onToggle: (value: boolean) => void;
+  testID?: string;
+}
+
+const Toggle: React.FC<ShareToggleProps> = ({value, onToggle, testID}) => {
+  return (
+    <View
+      style={[
+        Theme.Styles.wrapper,
+        {
+          borderColor: value ? 'transparent' : Theme.Colors.switchHead,
+          backgroundColor: value
+            ? Theme.Colors.switchHead
+            : Theme.Colors.switchCircleOff,
+        },
+      ]}>
+      <SwitchToggle
+        {...testIDProps(testID || 'shareToggle')}
+        switchOn={value}
+        onPress={() => onToggle(value)}
+        circleColorOff={Theme.Colors.switchHead}
+        circleColorOn={Theme.Colors.switchCircleOff}
+        backgroundColorOn={Theme.Colors.switchHead}
+        backgroundColorOff={Theme.Colors.whiteBackgroundColor}
+        containerStyle={Theme.Styles.container}
+        circleStyle={Theme.Styles.circle}
+      />
+    </View>
+  );
+};
+
+export default Toggle;
--- a/components/VC/Views/VCDetailView.tsx
+++ b/components/VC/Views/VCDetailView.tsx
@@ -302,7 +302,7 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = (
                      <Text
                        testID="offlineAuthDisabledHeader"
                        style={{
-                          fontFamily: 'Inter_600SemiBold',
+                          fontFamily: 'Montserrat_600SemiBold',
                          fontSize: 14,
                        }}
                        color={Theme.Colors.statusLabel}
@@ -312,7 +312,7 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = (
                      <Text
                        testID="offlineAuthDisabledMessage"
                        style={{
-                          fontFamily: 'Inter_400Regular',
+                          fontFamily: 'Montserrat_400Regular',
                          fontSize: 12,
                        }}
                        color={Theme.Colors.statusMessage}
@@ -345,7 +345,7 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = (
                        testID="profileAuthenticated"
                        color={Theme.Colors.statusLabel}
                        style={{
-                          fontFamily: 'Inter_600SemiBold',
+                          fontFamily: 'Montserrat_600SemiBold',
                          fontSize: 14,
                        }}
                        margin={'0 18 0 0'}>
@@ -379,7 +379,7 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = (
              style={{
                color: '#007AFF',
                fontSize: 16,
-                fontFamily: 'Inter_500Medium',
+                fontFamily: 'Montserrat_500Medium',
              }}>
              {t('View Shareable Information')}
            </Text>
--- a/components/VC/common/VCItemField.tsx
+++ b/components/VC/common/VCItemField.tsx
@@ -1,13 +1,13 @@
-import { Dimensions, View } from 'react-native';
-import { Column, Row, Text } from '../../ui';
-import { CustomTooltip } from '../../ui/ToolTip';
-import { Theme } from '../../ui/styleUtils';
+import {Dimensions, View} from 'react-native';
+import {Column, Row, Text} from '../../ui';
+import {CustomTooltip} from '../../ui/ToolTip';
+import {Theme} from '../../ui/styleUtils';
 import React from 'react';
-import { SvgImage } from '../../ui/svg';
-import { useTranslation } from 'react-i18next';
+import {SvgImage} from '../../ui/svg';
+import {useTranslation} from 'react-i18next';
 import Icon from 'react-native-vector-icons/FontAwesome';
-import { STATUS_FIELD_NAME } from './VCUtils';
-import { StatusTooltipContent } from './VcStatustooTip';
+import {STATUS_FIELD_NAME} from './VCUtils';
+import {StatusTooltipContent} from './VcStatustooTip';

 export const VCItemFieldName = ({
  fieldName,
@@ -20,7 +20,7 @@ export const VCItemFieldName = ({
  fieldNameColor?: string;
  isDisclosed?: boolean;
 }) => {
-  const { t } = useTranslation('ViewVcModal');
+  const {t} = useTranslation('ViewVcModal');
  return (
    <Row>
      {fieldName && (
@@ -38,14 +38,17 @@ export const VCItemFieldName = ({
          width={Dimensions.get('screen').width * 0.8}
          height={Dimensions.get('screen').height * 0.28}
          triggerComponent={SvgImage.info()}
-          triggerComponentStyles={{ marginLeft: 2, marginTop: 2 }}
-          toolTipContent={
-            <StatusTooltipContent />
-          }
+          triggerComponentStyles={{marginLeft: 2, marginTop: 2}}
+          toolTipContent={<StatusTooltipContent />}
        />
      )}
      {isDisclosed && (
-        <Icon name="share-square-o" size={10} color="#666" style={{ marginLeft: 5, marginTop: 3 }} />
+        <Icon
+          name="share-square-o"
+          size={10}
+          color="#666"
+          style={{marginLeft: 5, marginTop: 3}}
+        />
      )}
    </Row>
  );
@@ -61,14 +64,7 @@ export const VCItemFieldValue = ({
  fieldValueColor?: string;
 }) => {
  if (React.isValidElement(fieldValue)) {
-
-    return (
-      <View
-        testID={`${testID}Value`}
-      >
-        {fieldValue}
-      </View>
-    );
+    return <View testID={`${testID}Value`}>{fieldValue}</View>;
  }

  return (
--- a/components/VCVerification.tsx
+++ b/components/VCVerification.tsx
@@ -1,20 +1,20 @@
 import React from 'react';
-import { View } from 'react-native';
+import {View} from 'react-native';
 import testIDProps from '../shared/commonUtil';
-import { Display } from './VC/common/VCUtils';
+import {Display} from './VC/common/VCUtils';
 import VerifiedIcon from './VerifiedIcon';
 import PendingIcon from './PendingIcon';
-import { Row, Text } from './ui';
-import { Theme } from './ui/styleUtils';
-import { useTranslation } from 'react-i18next';
-import { VCMetadata } from '../shared/VCMetadata';
+import {Row, Text} from './ui';
+import {Theme} from './ui/styleUtils';
+import {useTranslation} from 'react-i18next';
+import {VCMetadata} from '../shared/VCMetadata';

 export const VCVerification: React.FC<VCVerificationProps> = ({
  vcMetadata,
  display,
  showLastChecked = true,
 }) => {
-  const { t } = useTranslation('VcDetails');
+  const {t} = useTranslation('VcDetails');

  let statusText: string;
  let statusIcon: JSX.Element;
@@ -36,44 +36,48 @@ export const VCVerification: React.FC<VCVerificationProps> = ({
  }

  return (
-  <View
-    {...testIDProps('verified')}
-    style={{
-      flexDirection: 'column',
-      alignItems: 'flex-start',
-      paddingVertical: 6,
-    }}>
-    
-    {/* First Row: Status Icon + Text */}
-    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-      {statusIcon}
-      <Text
-        testID="verificationStatus"
-        color={display.getTextColor(Theme.Colors.Details)}
-        style={Theme.Styles.verificationStatus}>
-        {statusText}
-      </Text>
-    </View>
-
-    {showLastChecked && vcMetadata.lastKnownStatusTimestamp && (
-      <View style={{ marginTop: 4 }}>
+    <View
+      {...testIDProps('verified')}
+      style={{
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        paddingVertical: 6,
+      }}>
+      {/* First Row: Status Icon + Text */}
+      <View style={{flexDirection: 'row', alignItems: 'center'}}>
+        {statusIcon}
        <Text
-          testID='lastCheckedLabel'
+          testID="verificationStatus"
          color={display.getTextColor(Theme.Colors.Details)}
-          style={[Theme.Styles.verificationStatus, { fontFamily: 'Inter_400' }]}>
-          {t('lastChecked')}
-        </Text>
-        <Text
-          testID="lastKnownStatusTimestamp"
-          color={display.getTextColor(Theme.Colors.Details)}
-          style={[Theme.Styles.verificationStatus,{ fontFamily: 'Inter_400' }]}>
-          {new Date(vcMetadata.lastKnownStatusTimestamp).toLocaleString()}
+          style={Theme.Styles.verificationStatus}>
+          {statusText}
        </Text>
      </View>
-    )}
-  </View>
-);

+      {showLastChecked && vcMetadata.lastKnownStatusTimestamp && (
+        <View style={{marginTop: 4}}>
+          <Text
+            testID="lastCheckedLabel"
+            color={display.getTextColor(Theme.Colors.Details)}
+            style={[
+              Theme.Styles.verificationStatus,
+              {fontFamily: 'Montserrat_400Regular'},
+            ]}>
+            {t('lastChecked')}
+          </Text>
+          <Text
+            testID="lastKnownStatusTimestamp"
+            color={display.getTextColor(Theme.Colors.Details)}
+            style={[
+              Theme.Styles.verificationStatus,
+              {fontFamily: 'Montserrat_400Regular'},
+            ]}>
+            {new Date(vcMetadata.lastKnownStatusTimestamp).toLocaleString()}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
 };

 export interface VCVerificationProps {
--- a/components/ui/Header.tsx
+++ b/components/ui/Header.tsx
@@ -4,8 +4,10 @@ import {Column, Row} from './Layout';
 import {Theme} from './styleUtils';
 import testIDProps from '../../shared/commonUtil';
 import {BackButton} from './backButton/BackButton';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';

 export const Header: React.FC<HeaderProps> = ({goBack, title, testID}) => {
+  const insets = useSafeAreaInsets();
  return (
    <Column safe align="center" testID={testID}>
      <Row elevation={2}>
@@ -18,6 +20,7 @@ export const Header: React.FC<HeaderProps> = ({goBack, title, testID}) => {
            marginBottom: 22,
            marginVertical: 16,
            marginLeft: 10,
+            paddingTop: insets.top,
          }}>
          <BackButton onPress={goBack} />
          <Row fill align={'center'}>
--- a/components/ui/Picker.tsx
+++ b/components/ui/Picker.tsx
@@ -4,6 +4,7 @@ import {Icon, ListItem, Overlay} from 'react-native-elements';
 import {Column} from './Layout';
 import {Text} from './Text';
 import testIDProps from '../../shared/commonUtil';
+import {Theme} from './styleUtils';

 interface Picker extends React.VFC<PickerProps<unknown>> {
  <T>(props: PickerProps<T>): ReturnType<React.FC>;
@@ -33,23 +34,41 @@ export const Picker: Picker = (props: PickerProps<unknown>) => {
      <Overlay
        isVisible={isContentVisible}
        onBackdropPress={toggleContent}
-        overlayStyle={{padding: 1}}>
+        overlayStyle={Theme.Styles.overlay}>
        <Column
          testID={props.testID}
          width={Dimensions.get('window').width * 0.8}>
-          {props.items.map((item, index) => (
-            <ListItem
-              topDivider={index !== 0}
-              onPress={() => selectItem(index)}
-              key={index}>
-              <ListItem.Content>
-                <ListItem.Title {...testIDProps(item.value as string)}>
-                  <Text>{item.label}</Text>
-                </ListItem.Title>
-              </ListItem.Content>
-              {selectedIndex === index && <Icon name="check" />}
-            </ListItem>
-          ))}
+          {props.items.map((item, index) => {
+            const isSelected = selectedIndex === index;
+            return (
+              <ListItem
+                key={String(item.value ?? index)}
+                topDivider={index !== 0}
+                onPress={() => selectItem(index)}
+                containerStyle={
+                  isSelected
+                    ? Theme.Styles.listItemSelectedContainer
+                    : Theme.Styles.listItemUnselectedContainer
+                }>
+                <ListItem.Content>
+                  <ListItem.Title {...testIDProps(item.value as string)}>
+                    <Text
+                      style={
+                        isSelected
+                          ? Theme.Styles.listItemSelectedText
+                          : Theme.Styles.listItemUnselectedText
+                      }>
+                      {item.label}
+                    </Text>
+                  </ListItem.Title>
+                </ListItem.Content>
+
+                {isSelected && (
+                  <Icon name="check" color={Theme.Colors.ListSelectedIcon} />
+                )}
+              </ListItem>
+            );
+          })}
        </Column>
      </Overlay>
    </React.Fragment>
--- a/components/ui/SearchBar.tsx
+++ b/components/ui/SearchBar.tsx
@@ -1,44 +1,45 @@
 import React from 'react';
-import {TextInput, View} from 'react-native';
+import {TextInput} from 'react-native';
 import {Icon} from 'react-native-elements';
 import {Row} from './Layout';
 import {Theme} from './styleUtils';
-import {SvgImage} from './svg';

-export const SearchBar = ({ isVcSearch = false, searchIconTestID, searchBarTestID, placeholder, search, onFocus, onChangeText, onLayout, editable = true }: SearchBarProps) => {
+export const SearchBar = ({
+  searchIconTestID,
+  searchBarTestID,
+  placeholder,
+  search,
+  onFocus,
+  onChangeText,
+  onLayout,
+  editable = true,
+}: SearchBarProps) => {
  return (
-    <Row>
-      {isVcSearch ? (
-        <View
-          testID={searchIconTestID}
-          style={Theme.SearchBarStyles.vcSearchIcon}>
-          {SvgImage.SearchIcon()}
-        </View>
-      ) : (
-        <Icon
-          testID={searchIconTestID}
-          name="search"
-          color={Theme.Colors.Icon}
-          size={27}
-          style={Theme.SearchBarStyles.searchIcon}
-        />
-      )}
+    <Row style={Theme.SearchBarStyles.innerSearchBarContainer}>
      <TextInput
        testID={searchBarTestID}
        style={Theme.SearchBarStyles.searchBar}
        placeholder={placeholder}
+        placeholderTextColor={Theme.Colors.SearchBarPlaceholderColor}
        value={search}
        onFocus={onFocus}
        onChangeText={searchText => onChangeText(searchText)}
        onLayout={onLayout}
        editable={editable ?? true}
      />
+      <Icon
+        testID={searchIconTestID}
+        name="search"
+        type="material"
+        color={Theme.Colors.SearchIcon}
+        size={27}
+        style={Theme.SearchBarStyles.searchIcon}
+      />
    </Row>
  );
 };

 interface SearchBarProps {
-  isVcSearch: Boolean;
  searchIconTestID: string;
  searchBarTestID: string;
  search: string;
--- a/components/ui/SetupPicker.tsx
+++ b/components/ui/SetupPicker.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import {Dimensions} from 'react-native';
+import {Dimensions, View} from 'react-native';
 import {Icon, ListItem} from 'react-native-elements';
 import {Column} from './Layout';
 import {Text} from './Text';
@@ -33,30 +33,35 @@ export const SetupPicker: Picker = (props: PickerProps<unknown>) => {
      testID={props.testID}
      width={Dimensions.get('window').width * 0.8}
      backgroundColor={Theme.Colors.whiteBackgroundColor}>
-      {props.items.map((item, index) => (
-        <ListItem
-          bottomDivider
-          topDivider={index !== 0}
-          onPress={() => selectItem(index)}
-          key={index}>
-          <ListItem.Content>
-            <ListItem.Title
-              {...testIDProps(item.value)}
-              style={{paddingTop: 3}}>
-              <Text
-                color={selectedIndex === index ? Theme.Colors.Icon : null}
-                weight={selectedIndex === index ? 'semibold' : 'regular'}>
-                {item.label}
-              </Text>
-            </ListItem.Title>
-          </ListItem.Content>
-          {selectedIndex === index ? (
-            <Icon name="radio-button-checked" color={Theme.Colors.Icon} />
-          ) : (
-            <Icon name="radio-button-unchecked" color={Theme.Colors.GrayIcon} />
-          )}
-        </ListItem>
-      ))}
+      {props.items.map((item, index) => {
+        const isSelected = selectedIndex === index;
+        return (
+          <ListItem
+            bottomDivider
+            topDivider={index !== 0}
+            onPress={() => selectItem(index)}>
+            <ListItem.Content>
+              <ListItem.Title
+                {...testIDProps(item.value)}
+                style={{paddingTop: 3}}>
+                <Text
+                  color={isSelected ? Theme.Colors.Icon : null}
+                  weight={isSelected ? 'semibold' : 'regular'}>
+                  {item.label}
+                </Text>
+              </ListItem.Title>
+            </ListItem.Content>
+            {isSelected ? (
+              <View style={Theme.Styles.listItemSelectedCircle} />
+            ) : (
+              <Icon
+                name="radio-button-unchecked"
+                color={Theme.Colors.GrayIcon}
+              />
+            )}
+          </ListItem>
+        );
+      })}
    </Column>
  );
 };
--- a/components/ui/Timestamp.tsx
+++ b/components/ui/Timestamp.tsx
@@ -23,7 +23,7 @@ export const Timestamp: React.FC<TimestampProps> = props => {
        testID={`${props.testId}Time`}
        size="regular"
        style={{
-          fontFamily: 'Inter_500Medium',
+          fontFamily: 'Montserrat_500Medium',
          fontWeight: '600',
          fontSize: 14,
          letterSpacing: 0,
--- a/components/ui/svg.tsx
+++ b/components/ui/svg.tsx
@@ -60,6 +60,7 @@ import QuestionIcon from '../../assets/questionIcon.svg';
 import CopyIcon from '../../assets/file_copy.svg';
 import StarIcon from '../../assets/credentialRegestryStar.svg';
 import SelectedCheckBox from '../../assets/Selected_Check_Box.svg';
+import FaceBiometric from '../../assets/Icon.svg';
 import ReverifyIcon from '../../assets/Reverify.svg';
 export class SvgImage {
  static selectedCheckBox() {
@@ -100,8 +101,8 @@ export class SvgImage {
  }

  static defaultIssuerLogo(defaultLogo: any) {
-    const DefaultLogo=defaultLogo
-    return <DefaultLogo/>
+    const DefaultLogo = defaultLogo;
+    return <DefaultLogo />;
  }

  static starIcon() {
@@ -557,10 +558,6 @@ export class SvgImage {
    );
  }

-  static SearchIcon() {
-    return <Search {...testIDProps('searchIcon')} />;
-  }
-
  static settingsLanguageIcon(size) {
    return (
      <SettingsLanguage
@@ -583,6 +580,17 @@ export class SvgImage {
    );
  }

+  static faceBiometicIcon(size?: number | undefined) {
+    return (
+      <FaceBiometric
+        height={size}
+        width={size}
+        color1={Theme.Colors.linearIconGradientStart}
+        color2={Theme.Colors.linearIconGradientEnd}
+      />
+    );
+  }
+
  static abotInjiIcon() {
    return (
      <SettingsAboutInji
--- a/components/ui/themes/DefaultTheme.ts
+++ b/components/ui/themes/DefaultTheme.ts
@@ -31,7 +31,8 @@ const Colors = {
  DimGray: '#737373',
  DarkGray: '#A5A5A5',
  platinumGrey: '#EDEDED',
-  Orange: '#951F6F',
+  Orange: '#F37321',
+  DarkMagenta: '#951F6F',
  OrangeBrown: '#D9822B',
  Blue: '#0000FF',
  LightGrey: '#F8F8F8',
@@ -45,12 +46,13 @@ const Colors = {
  Warning: '#f0ad4e',
  GrayText: '#6F6F6F',
  mediumLightGrayText: '#A7A7A7',
+  veryLightBluishGray: '#D9E1E7',
  dorColor: '#CBCBCB',
  plainText: '#FFFFFF',
  walletbindingLabel: '#000000',
  LightOrange: '#F7EDF3',
  GradientColors: ['#FF5300', '#5B03AD'],
-  GradientColorsLight: ['#FF5300' + 14, '#5B03AD' + 14],
+  GradientColorsLight: ['#FF5300' + 14, '#FF5300' + 14],
  DisabledColors: ['#C7C7C7', '#C7C7C7'],
  TimeoutHintBoxColor: '#FFF7E5',
  TimeoutHintBoxBorder: '#FFF2D6',
@@ -68,6 +70,16 @@ const Colors = {
  Mercury: '#E6E6E6',
  Yellow: '#E8A94F',
  selectIDTextGradient: ['#F5F5F5', '#FFFFFF'],
+  brandPrimary: '#F37321',
+  brandPrimaryLight: '#FCEFE6',
+  brandPrimaryDark: '#D65F17',
+  DeepPurple: '#290B45',
+  RoyalPurple: '#451691',
+  LightMintGreen: '#9DCFBB',
+  CharcoalBlue: '#384455',
+  LightRose: '#EFB3B5',
+  LightYellow: '#FFE799',
+  SteelBlue: '#809FB8',
 };

 export type ElevationLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -81,7 +93,7 @@ export const DefaultTheme = {
    DetailsLabel: Colors.Gray40,
    LoadingDetailsLabel: Colors.Gray40,
    AddIdBtnBg: Colors.Orange,
-    AddIdBtnTxt: Colors.Orange,
+    AddIdBtnTxt: Colors.DarkMagenta,
    DownloadIdBtnTxt: Colors.White,
    Loading: Colors.Orange,
    Cursor: Colors.Orange,
@@ -89,6 +101,7 @@ export const DefaultTheme = {
    IconBg: Colors.Orange,
    popUp: Colors.Green,
    Icon: Colors.Orange,
+    SearchIcon: Colors.veryLightBluishGray,
    GrayIcon: Colors.Gray50,
    helpText: Colors.Gray44,
    borderBottomColor: Colors.Grey6,
@@ -98,6 +111,7 @@ export const DefaultTheme = {
    switchHead: Colors.Orange,
    switchTrackTrue: Colors.LightOrange,
    switchTrackFalse: Colors.Grey,
+    switchCircleOff: Colors.White,
    overlayBackgroundColor: Colors.White,
    rotatingIcon: Colors.Grey5,
    loadingLabel: Colors.Grey6,
@@ -139,10 +153,10 @@ export const DefaultTheme = {
    uncheckedIcon: Colors.uncheckedIcon,
    settingsLabel: Colors.Black,
    chevronRightColor: Colors.Grey,
-    linearGradientStart: Colors.startColor,
-    linearGradientEnd: Colors.endColor,
-    linearIconGradientStart: Colors.startColor,
-    linearIconGradientEnd: Colors.endColor,
+    linearGradientStart: Colors.brandPrimary,
+    linearGradientEnd: Colors.brandPrimary,
+    linearIconGradientStart: Colors.brandPrimary,
+    linearIconGradientEnd: Colors.brandPrimary,
    LinearGradientStroke: Colors.stroke,
    warningLogoBgColor: Colors.warningLogoBg,
    tooltipIcon: Colors.toolTip,
@@ -151,6 +165,16 @@ export const DefaultTheme = {
    warningText: Colors.Red,
    PendingIcon: Colors.Yellow,
    selectIDTextGradient: ['#F5F5F5', '#FFFFFF'],
+    ListSelectedBackground: Colors.brandPrimaryLight,
+    ListSelectedText: Colors.brandPrimary,
+    ListSelectedIcon: Colors.brandPrimary,
+    ListUnselectedBackground: Colors.White,
+    ListUnselectedText: Colors.Black,
+    SearchBarPlaceholderColor: Colors.veryLightBluishGray,
+    PopupText: Colors.CharcoalBlue,
+    TransactionCodeBackgroundColor: Colors.White,
+    TransactionCodeBorderColor: Colors.veryLightBluishGray,
+    TransactionCodePlaceholderColor: Colors.SteelBlue,
  },
  Styles: StyleSheet.create({
    title: {
@@ -169,12 +193,12 @@ export const DefaultTheme = {
    fieldItemTitle: {
      backgroundColor: Colors.Transparent,
      fontSize: 11,
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
    },
    fieldItemValue: {
      backgroundColor: Colors.Transparent,
      fontSize: 12,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      marginTop: 3,
    },
    loadingSubtitle: {
@@ -183,7 +207,7 @@ export const DefaultTheme = {
    },
    verificationStatus: {
      fontSize: 12,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    statusLabel: {
      color: Colors.Gray30,
@@ -574,7 +598,7 @@ export const DefaultTheme = {
    detailsText: {
      fontWeight: 'bold',
      fontSize: 15,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
    },
    idInputContainer: {
      width: Dimensions.get('window').width * 0.86,
@@ -587,9 +611,51 @@ export const DefaultTheme = {
      height: isIOS() ? 100 : 'auto',
    },
    picker: {
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 18,
    },
+    overlay: {
+      padding: 1,
+      borderRadius: 12,
+      overflow: 'hidden',
+    },
+    listItemSelectedText: {
+      color: Colors.brandPrimary,
+      fontWeight: '600',
+      fontFamily: 'Montserrat_500Medium',
+    },
+    listItemUnselectedText: {
+      color: Colors.Black,
+      fontWeight: '400',
+      fontFamily: 'Montserrat_500Medium',
+    },
+    listItemSelectedContainer: {backgroundColor: Colors.brandPrimaryLight},
+    listItemUnselectedContainer: {backgroundColor: Colors.White},
+    listItemSelectedCircle: {
+      width: 22,
+      height: 22,
+      borderRadius: 11,
+      borderWidth: 7,
+      borderColor: Colors.brandPrimary,
+      backgroundColor: Colors.White,
+    },
+    wrapper: {
+      borderWidth: 2,
+      borderRadius: 16,
+      padding: 2,
+    },
+    container: {
+      width: 48,
+      height: 22,
+      borderRadius: 16,
+      padding: 3,
+    },
+    circle: {
+      width: 18,
+      height: 18,
+      borderRadius: 9,
+      elevation: 2,
+    },
    idInputBottom: {
      position: 'relative',
      bottom: 18,
@@ -608,7 +674,7 @@ export const DefaultTheme = {
      marginVertical: 6,
    },
    placeholder: {
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    hrLine: {
      borderBottomColor: Colors.Gray44,
@@ -656,13 +722,16 @@ export const DefaultTheme = {
    },
    boxShadow: generateBoxShadowStyle(),
    tooltipContainerStyle: {
-      backgroundColor: '#FAFAFA',
-      borderWidth: 1,
+      backgroundColor: '#EBE6F3',
+      borderWidth: 2,
      borderColor: '#E0E0E0',
-      marginLeft: 15,
+      maxWidth: '90%',
+    },
+    tooltipContentTitle: {
+      color: Colors.DeepPurple,
    },
    tooltipContentDescription: {
-      color: Colors.toolTipContent,
+      color: Colors.RoyalPurple,
      marginTop: 10,
    },
    tooltipHrLine: {
@@ -698,7 +767,7 @@ export const DefaultTheme = {
      maxHeight: 20,
      borderRadius: 4,
      fontSize: 10,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      lineHeight: 12,
    },
    scanLayoutHeaderContainer: {
@@ -709,7 +778,7 @@ export const DefaultTheme = {
    },
    scanLayoutHeaderTitle: {
      fontSize: 26,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      paddingTop: isIOS() ? 10 : 20,
      paddingBottom: 10,
    },
@@ -726,18 +795,18 @@ export const DefaultTheme = {
    },
    sendVPHeaderTitle: {
      fontSize: 18,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    sendVPHeaderSubTitle: {
      fontSize: 13,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      color: Colors.Orange,
      maxWidth: '80%',
      overflow: 'hidden',
    },
    HistoryHeaderTitleStyle: {
      fontSize: 26,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      marginTop: isIOS() ? 5 : 15,
    },
    tabBarIconCopilot: {
@@ -774,7 +843,7 @@ export const DefaultTheme = {
      backgroundColor: '#DADADA',
    },
    disclosureTitle: {
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 15,
      color: Colors.Black,
    },
@@ -785,20 +854,22 @@ export const DefaultTheme = {
    },
    disclosureSelectButton: {
      fontSize: 14,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
    },
  }),
  BannerStyles: StyleSheet.create({
    container: {
-      alignItems: 'flex-start',
+      alignItems: 'center',
      justifyContent: 'space-between',
      backgroundColor: '#DB2E2E',
      width: '100%',
+      height: 70,
      position: 'relative',
      paddingHorizontal: 18,
      paddingVertical: 12,
      marginVertical: 1,
      columnGap: 7,
+      borderRadius: 10,
    },
    topBanner: {
      marginTop: 10,
@@ -806,20 +877,24 @@ export const DefaultTheme = {
    },
    text: {
      textAlignVertical: 'center',
-      fontSize: 12,
+      fontSize: 14,
      lineHeight: 15,
      padding: 1,
-      fontFamily: 'Inter_600SemiBold',
+      marginHorizontal: 8,
+      fontFamily: 'Montserrat_600SemiBold',
    },
    dismiss: {paddingLeft: 9},
    inProgress: {
-      backgroundColor: Colors.OrangeBrown,
+      backgroundColor: Colors.LightYellow,
+      color: Colors.CharcoalBlue,
    },
    success: {
-      backgroundColor: Colors.Green,
+      backgroundColor: Colors.LightMintGreen,
+      color: Colors.CharcoalBlue,
    },
    error: {
-      backgroundColor: Colors.LightRed,
+      backgroundColor: Colors.LightRose,
+      color: Colors.CharcoalBlue,
    },
  }),
  QrCodeStyles: StyleSheet.create({
@@ -845,7 +920,7 @@ export const DefaultTheme = {
      borderTopLeftRadius: 21,
      borderTopRightRadius: 21,
      justifyContent: 'space-between',
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      paddingBottom: 10,
      paddingRight: 15,
      paddingLeft: 130,
@@ -881,7 +956,7 @@ export const DefaultTheme = {
      color: Colors.Black,
      flex: 1,
      fontSize: 33,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      height: 50,
      lineHeight: 28,
      margin: 8,
@@ -892,7 +967,7 @@ export const DefaultTheme = {
      borderColor: Colors.Orange,
      color: Colors.Black,
      flex: 1,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 29,
      height: 50,
      margin: 8,
@@ -902,33 +977,33 @@ export const DefaultTheme = {
  TextStyles: StyleSheet.create({
    header: {
      color: Colors.Black,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 18,
      lineHeight: 19,
      paddingTop: 5,
    },
    subHeader: {
      color: Colors.mediumLightGrayText,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      lineHeight: 19,
      fontSize: 13,
      paddingTop: 4,
    },
    semiBoldHeader: {
      color: Colors.Black,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 18,
      lineHeight: 21,
      paddingTop: 4,
    },
    retrieveIdLabel: {
      color: Colors.ShadeOfGrey,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      lineHeight: 18,
    },
    helpHeader: {
      color: Colors.Black,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 18,
      lineHeight: 19,
      paddingTop: 5,
@@ -937,11 +1012,11 @@ export const DefaultTheme = {
    helpDetails: {
      margin: 5,
      color: Colors.Gray44,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    urlLinkText: {
      color: Colors.Orange,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    aboutDetails: {
      color: Colors.Black,
@@ -954,7 +1029,7 @@ export const DefaultTheme = {
      top: 65,
      left: 5,
      color: Colors.Red,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 12,
      minWidth: 200,
    },
@@ -964,21 +1039,21 @@ export const DefaultTheme = {
      lineHeight: 18,
    },
    regular: {
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      fontSize: 14,
    },
    regularGrey: {
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      fontSize: 15,
      lineHeight: 19,
      color: Colors.ShadeOfGrey,
    },
    semibold: {
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 15,
    },
    bold: {
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 15,
      justifyContent: 'center',
    },
@@ -1052,23 +1127,21 @@ export const DefaultTheme = {
    },
  }),
  SearchBarStyles: StyleSheet.create({
-    idleSearchBarBottomLine: {
-      alignItems: 'center',
-      borderBottomWidth: 1,
-      borderBottomColor: Colors.Gray40,
-    },
    searchBarContainer: {
      alignItems: 'center',
-      borderBottomWidth: 1,
-      borderBottomColor: Colors.Orange,
    },
-    vcSearchBarContainer: {
+    vcSearchBarContainer: {},
+    innerSearchBarContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
      alignItems: 'center',
-      borderBottomWidth: 0.5,
-      borderTopWidth: 0.5,
-      borderColor: Colors.DimGray,
-      width: Dimensions.get('window').width,
+      width: '100%',
      backgroundColor: Colors.White,
+      borderColor: Colors.veryLightBluishGray,
+      borderRadius: 18,
+      borderWidth: 2,
+      marginTop: 10,
+      paddingHorizontal: 20,
    },
    vcSearchIcon: {
      justifyContent: 'center',
@@ -1080,14 +1153,14 @@ export const DefaultTheme = {
      justifyContent: 'center',
      height: Dimensions.get('window').height * 0.055,
      width: Dimensions.get('window').width * 0.1,
+      fontFamily: 'Montserrat_500Medium',
    },
    searchBar: {
      textAlign: I18nManager.isRTL ? 'right' : 'left',
      height: Dimensions.get('window').height * 0.055,
      width: Dimensions.get('window').width * 0.75,
-    },
-    clearSearch: {
-      padding: 10,
+      fontFamily: 'Montserrat_500Medium',
+      fontSize: 17,
    },
  }),
  ButtonStyles: StyleSheet.create({
@@ -1168,7 +1241,7 @@ export const DefaultTheme = {
      backgroundColor: Colors.White,
      borderWidth: 0,
      marginTop: -15,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      padding: 0,
    },
    timeoutHintContainer: {
@@ -1271,7 +1344,7 @@ export const DefaultTheme = {
  }),
  BackupAndRestoreStyles: StyleSheet.create({
    backupProgressText: {
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      fontSize: 14,
      color: Colors.Gray44,
    },
@@ -1281,7 +1354,7 @@ export const DefaultTheme = {
      textAlign: 'center',
      lineHeight: 22,
      fontSize: 17,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      marginHorizontal: 30,
    },
    actionOrLoaderContainer: {
@@ -1298,7 +1371,7 @@ export const DefaultTheme = {
      paddingHorizontal: 10,
      textAlign: 'center',
      paddingTop: 15,
-      fontFamily: 'Inter_500Medium',
+      fontFamily: 'Montserrat_500Medium',
      fontSize: 14,
      letterSpacing: 0,
      lineHeight: 17,
@@ -1316,7 +1389,7 @@ export const DefaultTheme = {
    headerText: {
      justifyContent: 'center',
      paddingLeft: 12,
-      fontFamily: 'Inter_500Medium',
+      fontFamily: 'Montserrat_500Medium',
      fontWeight: '600',
      fontSize: 14,
      letterSpacing: 0,
@@ -1377,7 +1450,7 @@ export const DefaultTheme = {
    },
    kebabHeaderStyle: {
      justifyContent: 'space-between',
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
    },
  }),
  MessageOverlayStyles: StyleSheet.create({
@@ -1397,6 +1470,7 @@ export const DefaultTheme = {
    button: {
      borderTopLeftRadius: 0,
      borderTopRightRadius: 0,
+      fontSize: 16,
    },
    halfButton: {
      borderRadius: 8,
@@ -1475,7 +1549,7 @@ export const DefaultTheme = {
    sliderTitle: {
      color: Colors.White,
      marginBottom: 20,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
    },
    text: {
      color: Colors.White,
@@ -1556,7 +1630,7 @@ export const DefaultTheme = {
      marginHorizontal: 9,
    },
    issuerHeading: {
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 14,
      paddingHorizontal: 3,
      marginBottom: 2,
@@ -1582,7 +1656,7 @@ export const DefaultTheme = {
    image: {marginTop: -60, paddingBottom: 26},
    title: {
      color: Colors.Black,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 18,
      lineHeight: 21,
      paddingTop: 4,
@@ -1591,7 +1665,7 @@ export const DefaultTheme = {
    },
    message: {
      textAlign: 'center',
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      fontSize: 14,
      lineHeight: 20,
      marginTop: 6,
@@ -1601,7 +1675,7 @@ export const DefaultTheme = {
    },
    additionalMessage: {
      color: Colors.Black,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 18,
      lineHeight: 21,
      paddingTop: 4,
@@ -1646,7 +1720,7 @@ export const DefaultTheme = {
    },
    heading: {
      color: 'black',
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 18,
      lineHeight: 19,
      padding: 10,
@@ -1793,16 +1867,16 @@ export const DefaultTheme = {
    purposeText: {
      fontSize: 13,
      position: 'relative',
-      fontFamily: 'Inter_500Medium',
+      fontFamily: 'Montserrat_500Medium',
    },
    cardsSelectedText: {
-      fontFamily: 'Inter_500Medium',
+      fontFamily: 'Montserrat_500Medium',
      color: '#000000',
      fontSize: 14,
    },
    selectIDText: {
      position: 'relative',
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 16,
    },
  }),
@@ -1822,11 +1896,11 @@ export const DefaultTheme = {
      justifyContent: 'space-between',
    },
    bannerTitle: {
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    bannerGuide: {
      opacity: 0.8,
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
    },
    bannerEnablePermissionContainer: {
      marginTop: 15,
@@ -1834,7 +1908,7 @@ export const DefaultTheme = {
    bannerEnablePermission: {
      borderBottomWidth: 1.5,
      borderBottomColor: Colors.White,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    scannerContainer: {
      borderRadius: 24,
@@ -1889,14 +1963,18 @@ export const DefaultTheme = {
    },
    holdPhoneSteadyText: {
      color: Colors.Black,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 15,
    },
    cameraFlipIcon: {
      height: 50,
      width: 50,
    },
-    iconText: {fontFamily: 'Inter_600SemiBold', fontSize: 12, marginTop: 6},
+    iconText: {
+      fontFamily: 'Montserrat_600SemiBold',
+      fontSize: 12,
+      marginTop: 6,
+    },
  }),

  BottomTabBarStyle: StyleSheet.create({
@@ -1904,7 +1982,7 @@ export const DefaultTheme = {
    headerLeftContainerStyle: {paddingEnd: 13},
    tabBarLabelStyle: {
      fontSize: 12,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    tabBarStyle: {
      display: 'flex',
@@ -2000,6 +2078,26 @@ export const DefaultTheme = {
      marginTop: 10,
      width: '80%',
    },
+    transactionGradientContainer: {
+      width: Dimensions.get('window').width - 100,
+      alignSelf: 'center',
+      borderRadius: 18,
+      padding: 2,
+      marginTop: 10,
+      marginBottom: 25,
+    },
+    inputContainer: {
+      borderBottomWidth: 0,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      width: '100%',
+      backgroundColor: Colors.White,
+      borderRadius: 18,
+      paddingHorizontal: 20,
+      overflow: 'hidden',
+      height: 60,
+    },
    inputStyle: {
      fontSize: 20,
      fontWeight: '500',
@@ -2162,7 +2260,7 @@ export const DefaultTheme = {
    titleText: {
      fontSize: 17,
      textAlign: 'left',
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      paddingTop: 20,
    },
    titleDescription: {
@@ -2173,14 +2271,14 @@ export const DefaultTheme = {
    },
    noteTitleText: {
      fontSize: 14,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      color: '#973C00',
      marginBottom: 5,
    },
    noteDescriptionText: {
      fontSize: 13,
      color: '#973C00',
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      lineHeight: 18,
      textAlign: 'left',
      marginLeft: -25,
@@ -2199,7 +2297,7 @@ export const DefaultTheme = {
    },
    text: {
      fontSize: 14,
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      color: 'black',
      flex: 1,
    },
--- a/components/ui/themes/PurpleTheme.ts
+++ b/components/ui/themes/PurpleTheme.ts
@@ -45,6 +45,7 @@ const Colors = {
  Warning: '#f0ad4e',
  GrayText: '#6F6F6F',
  mediumLightGrayText: '#A7A7A7',
+  veryLightBluishGray: '#D9E1E7',
  dorColor: '#CBCBCB',
  plainText: '#F3E2FF',
  walletbindingLabel: '#000000',
@@ -70,6 +71,16 @@ const Colors = {
  Mercury: '#E6E6E6',
  Yellow: '#E8A94F',
  selectIDTextGradient: ['#F5F5F5', '#FFFFFF'],
+  brandPrimary: '#5B03AD',
+  brandPrimaryLight: '#F2E6FA',
+  brandPrimaryDark: '#4A028F',
+  DeepPurple: '#290B45',
+  RoyalPurple: '#451691',
+  LightMintGreen: '#9DCFBB',
+  CharcoalBlue: '#384455',
+  LightRose: '#EFB3B5',
+  LightYellow: '#FFE799',
+  SteelBlue: '#809FB8',
 };

 export type ElevationLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -91,6 +102,7 @@ export const PurpleTheme = {
    IconBg: Colors.Purple,
    popUp: Colors.Green,
    Icon: Colors.Purple,
+    SearchIcon: Colors.veryLightBluishGray,
    GrayIcon: Colors.Gray50,
    helpText: Colors.Gray44,
    borderBottomColor: Colors.Grey6,
@@ -101,6 +113,7 @@ export const PurpleTheme = {
    switchHead: Colors.Purple,
    switchTrackTrue: Colors.LightPurple,
    switchTrackFalse: Colors.Grey,
+    switchCircleOff: Colors.White,
    overlayBackgroundColor: Colors.White,
    rotatingIcon: Colors.Grey5,
    loadingLabel: Colors.Grey6,
@@ -142,10 +155,10 @@ export const PurpleTheme = {
    uncheckedIcon: Colors.uncheckedIcon,
    settingsLabel: Colors.Black,
    chevronRightColor: Colors.Grey,
-    linearGradientStart: Colors.startColor,
-    linearGradientEnd: Colors.endColor,
-    linearIconGradientStart: Colors.startColor,
-    linearIconGradientEnd: Colors.startColor,
+    linearGradientStart: Colors.brandPrimary,
+    linearGradientEnd: Colors.brandPrimary,
+    linearIconGradientStart: Colors.brandPrimary,
+    linearIconGradientEnd: Colors.brandPrimary,
    LinearGradientStroke: Colors.stroke,
    warningLogoBgColor: Colors.warningLogoBg,
    tooltipIcon: Colors.tooltip,
@@ -153,6 +166,16 @@ export const PurpleTheme = {
    urlLink: Colors.Purple,
    warningText: Colors.Red,
    PendingIcon: Colors.Yellow,
+    ListSelectedBackground: Colors.brandPrimaryLight,
+    ListSelectedText: Colors.brandPrimary,
+    ListSelectedIcon: Colors.brandPrimary,
+    ListUnselectedBackground: Colors.White,
+    ListUnselectedText: Colors.Black,
+    SearchBarPlaceholderColor: Colors.veryLightBluishGray,
+    PopupText: Colors.CharcoalBlue,
+    TransactionCodeBackgroundColor: Colors.White,
+    TransactionCodeBorderColor: Colors.veryLightBluishGray,
+    TransactionCodePlaceholderColor: Colors.SteelBlue,
  },
  Styles: StyleSheet.create({
    title: {
@@ -171,12 +194,12 @@ export const PurpleTheme = {
    fieldItemTitle: {
      backgroundColor: Colors.Transparent,
      fontSize: 11,
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
    },
    fieldItemValue: {
      backgroundColor: Colors.Transparent,
      fontSize: 12,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      marginTop: 3,
    },
    loadingSubtitle: {
@@ -185,7 +208,7 @@ export const PurpleTheme = {
    },
    verificationStatus: {
      fontSize: 12,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    statusLabel: {
      color: Colors.Gray30,
@@ -580,7 +603,7 @@ export const PurpleTheme = {
    detailsText: {
      fontWeight: 'bold',
      fontSize: 15,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
    },
    idInputContainer: {
      width: Dimensions.get('window').width * 0.86,
@@ -593,9 +616,51 @@ export const PurpleTheme = {
      height: isIOS() ? 100 : 'auto',
    },
    picker: {
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 18,
    },
+    overlay: {
+      padding: 1,
+      borderRadius: 12,
+      overflow: 'hidden',
+    },
+    listItemSelectedText: {
+      color: Colors.brandPrimary,
+      fontWeight: '600',
+      fontFamily: 'Montserrat_500Medium',
+    },
+    listItemUnselectedText: {
+      color: Colors.Black,
+      fontWeight: '400',
+      fontFamily: 'Montserrat_500Medium',
+    },
+    listItemSelectedContainer: {backgroundColor: Colors.brandPrimaryLight},
+    listItemUnselectedContainer: {backgroundColor: Colors.White},
+    listItemSelectedCircle: {
+      width: 22,
+      height: 22,
+      borderRadius: 11,
+      borderWidth: 7,
+      borderColor: Colors.brandPrimary,
+      backgroundColor: Colors.White,
+    },
+    wrapper: {
+      borderWidth: 2,
+      borderRadius: 16,
+      padding: 2,
+    },
+    container: {
+      width: 48,
+      height: 22,
+      borderRadius: 16,
+      padding: 3,
+    },
+    circle: {
+      width: 18,
+      height: 18,
+      borderRadius: 9,
+      elevation: 2,
+    },
    idInputBottom: {
      position: 'relative',
      bottom: 18,
@@ -614,7 +679,7 @@ export const PurpleTheme = {
      marginVertical: 6,
    },
    placeholder: {
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    hrLine: {
      borderBottomColor: Colors.Gray44,
@@ -662,13 +727,16 @@ export const PurpleTheme = {
    },
    boxShadow: generateBoxShadowStyle(),
    tooltipContainerStyle: {
-      backgroundColor: '#FAFAFA',
-      borderWidth: 1,
+      backgroundColor: '#EBE6F3',
+      borderWidth: 2,
      borderColor: '#E0E0E0',
-      marginLeft: 15,
+      maxWidth: '90%',
+    },
+    tooltipContentTitle: {
+      color: Colors.DeepPurple,
    },
    tooltipContentDescription: {
-      color: Colors.toolTipContent,
+      color: Colors.RoyalPurple,
      marginTop: 10,
    },
    tooltipHrLine: {
@@ -678,8 +746,8 @@ export const PurpleTheme = {
    },
    introSliderHeader: {
      marginTop: isIOS()
-          ? Constants.statusBarHeight + 40
-          : StatusBar.currentHeight + 40,
+        ? Constants.statusBarHeight + 40
+        : StatusBar.currentHeight + 40,
      width: '100%',
      marginBottom: 50,
    },
@@ -706,7 +774,7 @@ export const PurpleTheme = {
      marginTop: 10,
      borderRadius: 4,
      fontSize: 10,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      lineHeight: 12,
    },
    scanLayoutHeaderContainer: {
@@ -717,7 +785,7 @@ export const PurpleTheme = {
    },
    scanLayoutHeaderTitle: {
      fontSize: 26,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      paddingTop: isIOS() ? 10 : 20,
      paddingBottom: 10,
    },
@@ -734,18 +802,18 @@ export const PurpleTheme = {
    },
    sendVPHeaderTitle: {
      fontSize: 18,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    sendVPHeaderSubTitle: {
      fontSize: 13,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      color: Colors.LightPurple,
      maxWidth: '80%',
      overflow: 'hidden',
    },
    HistoryHeaderTitleStyle: {
      fontSize: 26,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      marginTop: isIOS() ? 5 : 15,
    },
    tabBarIconCopilot: {
@@ -777,58 +845,64 @@ export const PurpleTheme = {
      flex: 1,
      justifyContent: 'space-around',
    },
-    horizontalSeparator:{
+    horizontalSeparator: {
      height: 1,
      backgroundColor: '#DADADA',
      marginBottom: 12,
    },
-    disclosureTitle:{
-      fontFamily: 'Inter_700Bold',
+    disclosureTitle: {
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 15,
      color: Colors.Black,
    },
-    disclosureSubtitle:{
+    disclosureSubtitle: {
      fontSize: 13,
      color: '#747474',
      marginTop: 4,
    },
-    disclosureSelectButton:{
+    disclosureSelectButton: {
      fontSize: 14,
-      fontFamily: 'Inter_700Bold',
-    }
+      fontFamily: 'Montserrat_700Bold',
+    },
  }),
  BannerStyles: StyleSheet.create({
    container: {
-      alignItems: 'flex-start',
+      alignItems: 'center',
      justifyContent: 'space-between',
      backgroundColor: '#DB2E2E',
      width: '100%',
+      height: 70,
      position: 'relative',
      paddingHorizontal: 18,
      paddingVertical: 12,
      marginVertical: 1,
      columnGap: 7,
-    },
-    text: {
-      textAlignVertical: 'center',
-      fontSize: 12,
-      lineHeight: 15,
-      padding: 1,
-      fontFamily: 'Inter_600SemiBold',
+      borderRadius: 10,
    },
    topBanner: {
      marginTop: 10,
      marginBottom: 10,
    },
+    text: {
+      textAlignVertical: 'center',
+      fontSize: 14,
+      lineHeight: 15,
+      padding: 1,
+      marginHorizontal: 8,
+      fontFamily: 'Montserrat_600SemiBold',
+    },
    dismiss: {paddingLeft: 9},
    inProgress: {
-      backgroundColor: Colors.OrangeBrown,
+      backgroundColor: Colors.LightYellow,
+      color: Colors.CharcoalBlue,
    },
    success: {
-      backgroundColor: Colors.Green,
+      backgroundColor: Colors.LightMintGreen,
+      color: Colors.CharcoalBlue,
    },
    error: {
-      backgroundColor: Colors.LightRed,
+      backgroundColor: Colors.LightRose,
+      color: Colors.CharcoalBlue,
    },
  }),
  QrCodeStyles: StyleSheet.create({
@@ -854,7 +928,7 @@ export const PurpleTheme = {
      borderTopLeftRadius: 21,
      borderTopRightRadius: 21,
      justifyContent: 'space-between',
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      paddingBottom: 10,
      paddingRight: 15,
      paddingLeft: 130,
@@ -890,7 +964,7 @@ export const PurpleTheme = {
      color: Colors.Black,
      flex: 1,
      fontSize: 33,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      height: 40,
      lineHeight: 28,
      margin: 8,
@@ -901,7 +975,7 @@ export const PurpleTheme = {
      borderColor: Colors.Purple,
      color: Colors.Black,
      flex: 1,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 29,
      height: 40,
      margin: 8,
@@ -911,33 +985,33 @@ export const PurpleTheme = {
  TextStyles: StyleSheet.create({
    header: {
      color: Colors.Black,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 18,
      lineHeight: 19,
      paddingTop: 5,
    },
    subHeader: {
      color: Colors.mediumLightGrayText,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      lineHeight: 19,
      fontSize: 13,
      paddingTop: 4,
    },
    semiBoldHeader: {
      color: Colors.Black,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 18,
      lineHeight: 21,
      paddingTop: 4,
    },
    retrieveIdLabel: {
      color: Colors.ShadeOfGrey,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      lineHeight: 18,
    },
    helpHeader: {
      color: Colors.Black,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 18,
      lineHeight: 19,
      paddingTop: 5,
@@ -946,11 +1020,11 @@ export const PurpleTheme = {
    helpDetails: {
      margin: 5,
      color: Colors.Gray44,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    urlLinkText: {
      color: Colors.Purple,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    aboutDetails: {
      color: Colors.Black,
@@ -963,7 +1037,7 @@ export const PurpleTheme = {
      top: 65,
      left: 5,
      color: Colors.Red,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 12,
      minWidth: 200,
    },
@@ -973,21 +1047,21 @@ export const PurpleTheme = {
      lineHeight: 18,
    },
    regular: {
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      fontSize: 14,
    },
    regularGrey: {
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      fontSize: 15,
      lineHeight: 19,
      color: Colors.ShadeOfGrey,
    },
    semibold: {
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 15,
    },
    bold: {
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 15,
      justifyContent: 'center',
    },
@@ -1061,23 +1135,21 @@ export const PurpleTheme = {
    },
  }),
  SearchBarStyles: StyleSheet.create({
-    idleSearchBarBottomLine: {
-      alignItems: 'center',
-      borderBottomWidth: 1,
-      borderBottomColor: Colors.Gray40,
-    },
    searchBarContainer: {
      alignItems: 'center',
-      borderBottomWidth: 1,
-      borderBottomColor: Colors.Purple,
    },
-    vcSearchBarContainer: {
+    vcSearchBarContainer: {},
+    innerSearchBarContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
      alignItems: 'center',
-      borderBottomWidth: 0.5,
-      borderTopWidth: 0.5,
-      borderColor: Colors.DimGray,
-      width: Dimensions.get('window').width,
+      width: '100%',
      backgroundColor: Colors.White,
+      borderColor: Colors.veryLightBluishGray,
+      borderRadius: 18,
+      borderWidth: 2,
+      marginTop: 10,
+      paddingHorizontal: 20,
    },
    vcSearchIcon: {
      justifyContent: 'center',
@@ -1089,14 +1161,14 @@ export const PurpleTheme = {
      justifyContent: 'center',
      height: Dimensions.get('window').height * 0.055,
      width: Dimensions.get('window').width * 0.1,
+      fontFamily: 'Montserrat_500Medium',
    },
    searchBar: {
      textAlign: I18nManager.isRTL ? 'right' : 'left',
      height: Dimensions.get('window').height * 0.055,
      width: Dimensions.get('window').width * 0.75,
-    },
-    clearSearch: {
-      padding: 10,
+      fontFamily: 'Montserrat_500Medium',
+      fontSize: 17,
    },
  }),
  ButtonStyles: StyleSheet.create({
@@ -1174,7 +1246,7 @@ export const PurpleTheme = {
      backgroundColor: Colors.White,
      borderWidth: 0,
      marginTop: -15,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      padding: 0,
    },
    timeoutHintContainer: {
@@ -1197,7 +1269,7 @@ export const PurpleTheme = {
      borderColor: Colors.Purple,
      borderRadius: 30,
    },
-    sharedSuccessfullyVerifierInfo:{
+    sharedSuccessfullyVerifierInfo: {
      alignSelf: 'center',
      backgroundColor: '#F5F5F5',
      borderRadius: 16,
@@ -1211,7 +1283,7 @@ export const PurpleTheme = {
      height: 40,
      borderRadius: 8,
      marginRight: 12,
-    }
+    },
  }),
  AppMetaDataStyles: StyleSheet.create({
    buttonContainer: {
@@ -1277,7 +1349,7 @@ export const PurpleTheme = {
  }),
  BackupAndRestoreStyles: StyleSheet.create({
    backupProgressText: {
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      fontSize: 14,
      color: Colors.Gray44,
    },
@@ -1291,7 +1363,7 @@ export const PurpleTheme = {
      textAlign: 'center',
      lineHeight: 22,
      fontSize: 17,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      marginHorizontal: 30,
    },
    cloudInfo: {
@@ -1304,7 +1376,7 @@ export const PurpleTheme = {
      paddingHorizontal: 10,
      textAlign: 'center',
      paddingTop: 15,
-      fontFamily: 'Inter_500Medium',
+      fontFamily: 'Montserrat_500Medium',
      fontSize: 14,
      letterSpacing: 0,
      lineHeight: 17,
@@ -1322,7 +1394,7 @@ export const PurpleTheme = {
    headerText: {
      justifyContent: 'center',
      paddingLeft: 12,
-      fontFamily: 'Inter_500Medium',
+      fontFamily: 'Montserrat_500Medium',
      fontWeight: '600',
      fontSize: 14,
      letterSpacing: 0,
@@ -1383,7 +1455,7 @@ export const PurpleTheme = {
    },
    kebabHeaderStyle: {
      justifyContent: 'space-between',
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
    },
  }),
  MessageOverlayStyles: StyleSheet.create({
@@ -1482,7 +1554,7 @@ export const PurpleTheme = {
    sliderTitle: {
      color: Colors.White,
      marginBottom: 20,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
    },
    text: {
      color: Colors.White,
@@ -1564,7 +1636,7 @@ export const PurpleTheme = {
      marginHorizontal: 9,
    },
    issuerHeading: {
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 14,
      paddingHorizontal: 3,
      marginBottom: 2,
@@ -1588,7 +1660,7 @@ export const PurpleTheme = {
    image: {marginTop: -60, paddingBottom: 26},
    title: {
      color: Colors.Black,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 18,
      lineHeight: 21,
      paddingTop: 4,
@@ -1597,7 +1669,7 @@ export const PurpleTheme = {
    },
    message: {
      textAlign: 'center',
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      fontSize: 14,
      lineHeight: 20,
      marginTop: 6,
@@ -1607,7 +1679,7 @@ export const PurpleTheme = {
    },
    additionalMessage: {
      color: Colors.Black,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 18,
      lineHeight: 21,
      paddingTop: 4,
@@ -1656,7 +1728,7 @@ export const PurpleTheme = {
    },
    heading: {
      color: 'black',
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 18,
      lineHeight: 19,
      padding: 10,
@@ -1800,16 +1872,16 @@ export const PurpleTheme = {
    purposeText: {
      fontSize: 13,
      position: 'relative',
-      fontFamily: 'Inter_500Medium',
+      fontFamily: 'Montserrat_500Medium',
    },
    cardsSelectedText: {
-      fontFamily: 'Inter_500Medium',
+      fontFamily: 'Montserrat_500Medium',
      color: '#000000',
      fontSize: 14,
    },
    selectIDText: {
      position: 'relative',
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 16,
    },
  }),
@@ -1829,11 +1901,11 @@ export const PurpleTheme = {
      justifyContent: 'space-between',
    },
    bannerTitle: {
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    bannerGuide: {
      opacity: 0.8,
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
    },
    bannerEnablePermissionContainer: {
      marginTop: 15,
@@ -1841,7 +1913,7 @@ export const PurpleTheme = {
    bannerEnablePermission: {
      borderBottomWidth: 1.5,
      borderBottomColor: Colors.White,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    scannerContainer: {
      borderRadius: 24,
@@ -1895,21 +1967,25 @@ export const PurpleTheme = {
    },
    holdPhoneSteadyText: {
      color: Colors.Black,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 15,
    },
    cameraFlipIcon: {
      height: 50,
      width: 50,
    },
-    iconText: {fontFamily: 'Inter_600SemiBold', fontSize: 12, marginTop: 6},
+    iconText: {
+      fontFamily: 'Montserrat_600SemiBold',
+      fontSize: 12,
+      marginTop: 6,
+    },
  }),
  BottomTabBarStyle: StyleSheet.create({
    headerRightContainerStyle: {paddingEnd: 13},
    headerLeftContainerStyle: {paddingEnd: 13},
    tabBarLabelStyle: {
      fontSize: 12,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    tabBarStyle: {
      display: 'flex',
@@ -2004,6 +2080,26 @@ export const PurpleTheme = {
      marginTop: 10,
      width: '80%',
    },
+    transactionGradientContainer: {
+      width: Dimensions.get('window').width - 100,
+      alignSelf: 'center',
+      borderRadius: 18,
+      padding: 2,
+      marginTop: 10,
+      marginBottom: 25,
+    },
+    inputContainer: {
+      borderBottomWidth: 0,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      width: '100%',
+      backgroundColor: Colors.White,
+      borderRadius: 18,
+      paddingHorizontal: 20,
+      overflow: 'hidden',
+      height: 60,
+    },
    inputStyle: {
      fontSize: 20,
      fontWeight: '500',
@@ -2126,7 +2222,7 @@ export const PurpleTheme = {
    },
  }),
  DisclosureOverlayStyles: StyleSheet.create({
-    overlay:{
+    overlay: {
      padding: 0,
      borderTopLeftRadius: 20,
      borderTopRightRadius: 20,
@@ -2135,7 +2231,7 @@ export const PurpleTheme = {
      bottom: 0,
      backgroundColor: '#fff',
    },
-    outerView:{
+    outerView: {
      padding: 16,
      borderBottomWidth: 1,
      borderBottomColor: Colors.LightGrey,
@@ -2143,14 +2239,14 @@ export const PurpleTheme = {
      alignItems: 'center',
      justifyContent: 'space-between',
    },
-    listView:{
+    listView: {
      marginHorizontal: 16,
      marginVertical: 6,
      padding: 12,
      borderRadius: 10,
      borderWidth: 1,
    },
-    noteView:{
+    noteView: {
      marginHorizontal: 16,
      marginBottom: 30,
      padding: 12,
@@ -2164,7 +2260,7 @@ export const PurpleTheme = {
    titleText: {
      fontSize: 17,
      textAlign: 'left',
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      paddingTop: 20,
    },
    titleDescription: {
@@ -2175,23 +2271,23 @@ export const PurpleTheme = {
    },
    noteTitleText: {
      fontSize: 14,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      color: '#973C00',
      marginBottom: 5,
    },
-    noteDescriptionText:{
+    noteDescriptionText: {
      fontSize: 13,
      color: '#973C00',
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      lineHeight: 18,
      textAlign: 'left',
-      marginLeft: -25
-    }
+      marginLeft: -25,
+    },
  }),
  DisclosureInfo: StyleSheet.create({
-    view:{
+    view: {
      marginTop: -16,
-      marginBottom:16,
+      marginBottom: 16,
      marginHorizontal: 10,
      padding: 12,
      backgroundColor: '#EFF6FF',
@@ -2199,12 +2295,12 @@ export const PurpleTheme = {
      borderWidth: 1,
      borderColor: '#BEDBFF',
    },
-    text:{
+    text: {
      fontSize: 14,
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      color: 'black',
      flex: 1,
-    }
+    },
  }),

  ICON_SMALL_SIZE: 16,
@@ -2246,7 +2342,7 @@ export const PurpleTheme = {
    }

    const [top, end, bottom, start] =
-        typeof values === 'string' ? values.split(' ').map(Number) : values;
+      typeof values === 'string' ? values.split(' ').map(Number) : values;

    return {
      [`${type}Top`]: top,
@@ -2274,4 +2370,4 @@ function generateBoxShadowStyle() {
    elevation: 4,
    shadowColor: '#000',
  };
-}
+}
--- a/locales/ara.json
+++ b/locales/ara.json
@@ -444,7 +444,7 @@
    }
  },
  "MyVcsTab": {
-    "searchByName": "يبحث",
+    "searchByName": "...يبحث",
    "bringYourDigitalID": "أحضر هويتك الرقمية",
    "generateVcDescription": "اضغط على \"إضافة بطاقة \" أدناه لتنزيل بطاقتك",
    "generateVcFABDescription": "اضغط على \"+\" أدناه لتنزيل بطاقتك",
@@ -538,6 +538,10 @@
        "title": "وضع انتظار:",
        "description": "التحقق معلق حاليًا بسبب مشكلات فنية."
      },
+      "expired": {
+        "title": "الحالة منتهية الصلاحية:",
+        "description": "انتهت صلاحية بيانات الاعتماد."
+      },
      "revoked": {
        "title": "الحالة الملغاة:",
        "description": "تم إلغاء بيانات الاعتماد."
@@ -1142,7 +1146,9 @@
    "verify": "تحقق",
    "emptyCodeError": "لا يمكن أن يكون الرمز فارغًا",
    "invalidCharacters": "يسمح فقط بالأحرف والأرقام",
-    "TransactionCode": "رمز المعاملة"
+    "TransactionCode": "رمز المعاملة",
+    "showMore": "عرض المزيد ↓",
+    "showLess": "عرض أقل ↑"
  },
  "trustScreen": {
    "description": "تأكد من أنك تعرف أو تثق بهذا المصدر. بمجرد أن تثق بهذا المصدر:",
--- a/locales/en.json
+++ b/locales/en.json
@@ -445,7 +445,7 @@
    }
  },
  "MyVcsTab": {
-    "searchByName": "Search",
+    "searchByName": "search...",
    "bringYourDigitalID": "Bring your digital identity",
    "generateVcDescription": "Tap on \"Download card\" below to download your card",
    "generateVcFABDescription": "Tap on  \"+\" below to download your card",
@@ -1162,7 +1162,9 @@
    "verify": "Verify",
    "emptyCodeError": "Code cannot be empty",
    "invalidCharacters": "Only letters and numbers are allowed",
-    "TransactionCode": "Transasction Code"
+    "TransactionCode": "Transasction Code",
+    "showMore": "Show more ↓",
+    "showLess": "Show less ↑"
  },
  "trustScreen": {
    "description": "Make sure you recognize or trust this issuer. Once you trust this issuer:",
--- a/locales/fil.json
+++ b/locales/fil.json
@@ -443,7 +443,7 @@
    }
  },
  "MyVcsTab": {
-    "searchByName": "Maghanap",
+    "searchByName": "maghanap...",
    "bringYourDigitalID": "Dalhin ang Iyong Digital ID",
    "generateVcDescription": "Upang i-download ang iyong card i-tap ang I-download card sa ibaba",
    "generateVcFABDescription": "Upang i-download ang iyong card i-tap ang + sa ibaba",
@@ -1144,7 +1144,9 @@
    "verify": "I-verify",
    "emptyCodeError": "Hindi puwedeng walang laman ang code",
    "invalidCharacters": "Mga letra at numero lamang ang pinapayagan",
-    "TransactionCode": "Transaction Code"
+    "TransactionCode": "Transaction Code",
+    "showMore": "Ipakita pa ↓",
+    "showLess": "Ipakita nang kaunti ↑"
  },
  "trustScreen": {
    "description": "Siguraduhin mong kilala mo o pinagkakatiwalaan mo ang issuer na ito. Kapag pinagkatiwalaan mo sila:",
--- a/locales/hin.json
+++ b/locales/hin.json
@@ -445,7 +445,7 @@
    }
  },
  "MyVcsTab": {
-    "searchByName": "खोजें",
+    "searchByName": "खोजें...",
    "downloadCard": "डाउनलोड कार्ड",
    "bringYourDigitalID": "अपनी डिजिटल आईडी लाओ",
    "generateVcDescription": "अपना कार्ड डाउनलोड करने के लिए नीचे डाउनलोड कार्ड टैप करें",
@@ -1146,7 +1146,9 @@
    "verify": "सत्यापित करें",
    "emptyCodeError": "कोड खाली नहीं हो सकता",
    "invalidCharacters": "केवल अक्षर और संख्याएँ मान्य हैं",
-    "TransactionCode": "लेन-देन कोड"
+    "TransactionCode": "लेन-देन कोड",
+    "showMore": "अधिक दिखाएं ↓",
+    "showLess": "कम दिखाएं ↑"
  },
  "trustScreen": {
    "description": "सुनिश्चित करें कि आप इस जारीकर्ता को पहचानते हैं या उस पर भरोसा करते हैं। एक बार जब आप भरोसा कर लेते हैं:",
--- a/locales/kan.json
+++ b/locales/kan.json
@@ -444,7 +444,7 @@
    }
  },
  "MyVcsTab": {
-    "searchByName": "ಹುಡುಕು",
+    "searchByName": "ಹುಡುಕು...",
    "downloadCard": "ಕಾರ್ಡ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ",
    "bringYourDigitalID": "ನಿಮ್ಮ ಡಿಜಿಟಲ್ ಐಡಿ ತನ್ನಿ",
    "generateVcDescription": "ನಿಮ್ಮ ಕಾರ್ಡ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ಕೆಳಗಿನ ಡೌನ್‌ಲೋಡ್ ಕಾರ್ಡ್ ಅನ್ನು ಟ್ಯಾಪ್ ಮಾಡಿ",
@@ -1146,7 +1146,9 @@
    "verify": "ಸರಿಪಡಿಸಿ",
    "emptyCodeError": "ಕೋಡ್ ಖಾಲಿ ಇರಬಾರದು",
    "invalidCharacters": "ಅಕ್ಷರಗಳು ಮತ್ತು ಸಂಖ್ಯೆಗಳು ಮಾತ್ರ ಅನುಮತಿಸಲಾಗಿದೆ",
-    "TransactionCode": "ವಹಿವಾಟು ಕೋಡ್"
+    "TransactionCode": "ವಹಿವಾಟು ಕೋಡ್",
+    "showMore": "ಹೆಚ್ಚು ತೋರಿಸಿ ↓",
+    "showLess": "ಕಡಿಮೆ ತೋರಿಸಿ ↑"
  },
  "trustScreen": {
    "description": "ಈ ಹೊರಹೊಮ್ಮಿಸುವವರನ್ನು ನೀವು ಗುರುತಿಸುತ್ತೀರಾ ಅಥವಾ ನಂಬಿದೀರಾ ಎಂಬುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ನೀವು ನಂಬಿದ ನಂತರ:",
--- a/locales/tam.json
+++ b/locales/tam.json
@@ -444,7 +444,7 @@
    }
  },
  "MyVcsTab": {
-    "searchByName": "தேடு",
+    "searchByName": "தேடு...",
    "bringYourDigitalID": "உங்கள் டிஜிட்டல் ஐடியைக் கொண்டு வாருங்கள்",
    "generateVcDescription": "உங்கள் அட்டை ஐப் பதிவிறக்க, கீழே உள்ள பதிவிறக்கு அட்டை என்பதைத் தட்டவும்",
    "generateVcFABDescription": "உங்கள் அட்டை ஐப் பதிவிறக்க, கீழே உள்ள + என்பதைத் தட்டவும்",
@@ -1146,7 +1146,9 @@
    "verify": "சரிபார்க்கவும்",
    "emptyCodeError": "குறியீடு காலியாக இருக்க முடியாது",
    "invalidCharacters": "எழுத்துகள் மற்றும் எண்கள் மட்டும் அனுமதிக்கப்படும்",
-    "TransactionCode": "பரிவரத்து குறியீடு"
+    "TransactionCode": "பரிவரத்து குறியீடு",
+    "showMore": "மேலும் காண்பிக்கவும் ↓",
+    "showLess": "குறைவாக காண்பிக்கவும் ↑"
  },
  "trustScreen": {
    "description": "இந்த வெளியீட்டாளரை நீங்கள் அறிந்தவரா அல்லது நம்புகிறீர்களா என்பதை உறுதி செய்யவும். நீங்கள் வெளியீட்டாளரை நம்பினால்:",
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
        "@digitalbazaar/rsa-signature-2018": "digitalbazaar/rsa-signature-2018#initial",
        "@digitalbazaar/rsa-verification-key-2018": "digitalbazaar/rsa-verification-key-2018#initial",
        "@digitalcredentials/vc": "^1.1.2",
-        "@expo-google-fonts/inter": "^0.2.3",
+        "@expo-google-fonts/montserrat": "^0.4.2",
        "@expo/metro-config": "~0.18.11",
        "@invertase/react-native-apple-authentication": "^2.3.0",
        "@iriscan/biometric-sdk-react-native": "0.2.6",
@@ -95,6 +95,7 @@
        "react-native-shimmer-placeholder": "^2.0.9",
        "react-native-spinkit": "^1.5.1",
        "react-native-svg": "15.2.0",
+        "react-native-switch-toggle": "^2.2.1",
        "react-native-vector-icons": "^10.0.0",
        "react-native-webview": "^13.13.5",
        "react-native-zip-archive": "^6.1.0",
@@ -3318,10 +3319,10 @@
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
      }
    },
-    "node_modules/@expo-google-fonts/inter": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@expo-google-fonts/inter/-/inter-0.2.3.tgz",
-      "integrity": "sha512-iHK9FI+dnE45X5c2Z5hSFwNH4zUWethizpbv3XUn0FIGw5jwvzriENz0a6wCdkI4/d+1QkurnHo5XHti7TbNJA=="
+    "node_modules/@expo-google-fonts/montserrat": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@expo-google-fonts/montserrat/-/montserrat-0.4.2.tgz",
+      "integrity": "sha512-Xyq7rKJhhZOE1Xk4wKSSVoUeOkFmQEMhtZ3pdFrgYckGZMs115Apmld1AI8Ju+yrl5GzDdfRCCqRr33dvEDYUA=="
    },
    "node_modules/@expo/bunyan": {
      "version": "4.0.1",
@@ -13639,6 +13640,15 @@
        "url": "https://github.com/fb55/domutils?sponsor=1"
      }
    },
+    "node_modules/dooboolab-welcome": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/dooboolab-welcome/-/dooboolab-welcome-1.3.2.tgz",
+      "integrity": "sha512-2NbMaIIURElxEf/UAoVUFlXrO+7n/FRhLCiQlk4fkbGRh9cJ3/f8VEMPveR9m4Ug2l2Zey+UCXjd6EcBqHJ5bw==",
+      "hasInstallScript": true,
+      "bin": {
+        "dooboolab-welcome": "bin/hello.js"
+      }
+    },
    "node_modules/dot-case": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
@@ -25791,6 +25801,18 @@
        "react-native-svg": ">=12.0.0"
      }
    },
+    "node_modules/react-native-switch-toggle": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-native-switch-toggle/-/react-native-switch-toggle-2.2.1.tgz",
+      "integrity": "sha512-Y/RQ1Pb/KDVZhBSNjc16LKtUi7MGZb0MYxouZLj/THpiSQLsy5pUyTwbIKRjNuZDNSxmMDXyRX1QfLt+oup4Uw==",
+      "dependencies": {
+        "dooboolab-welcome": "^1.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9",
+        "react-native": ">=0.58"
+      }
+    },
    "node_modules/react-native-url-polyfill": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/react-native-url-polyfill/-/react-native-url-polyfill-2.0.0.tgz",
@@ -33132,10 +33154,10 @@
      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
      "dev": true
    },
-    "@expo-google-fonts/inter": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@expo-google-fonts/inter/-/inter-0.2.3.tgz",
-      "integrity": "sha512-iHK9FI+dnE45X5c2Z5hSFwNH4zUWethizpbv3XUn0FIGw5jwvzriENz0a6wCdkI4/d+1QkurnHo5XHti7TbNJA=="
+    "@expo-google-fonts/montserrat": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@expo-google-fonts/montserrat/-/montserrat-0.4.2.tgz",
+      "integrity": "sha512-Xyq7rKJhhZOE1Xk4wKSSVoUeOkFmQEMhtZ3pdFrgYckGZMs115Apmld1AI8Ju+yrl5GzDdfRCCqRr33dvEDYUA=="
    },
    "@expo/bunyan": {
      "version": "4.0.1",
@@ -40836,6 +40858,11 @@
        "domhandler": "^5.0.3"
      }
    },
+    "dooboolab-welcome": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/dooboolab-welcome/-/dooboolab-welcome-1.3.2.tgz",
+      "integrity": "sha512-2NbMaIIURElxEf/UAoVUFlXrO+7n/FRhLCiQlk4fkbGRh9cJ3/f8VEMPveR9m4Ug2l2Zey+UCXjd6EcBqHJ5bw=="
+    },
    "dot-case": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
@@ -49741,6 +49768,14 @@
        "path-dirname": "^1.0.2"
      }
    },
+    "react-native-switch-toggle": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-native-switch-toggle/-/react-native-switch-toggle-2.2.1.tgz",
+      "integrity": "sha512-Y/RQ1Pb/KDVZhBSNjc16LKtUi7MGZb0MYxouZLj/THpiSQLsy5pUyTwbIKRjNuZDNSxmMDXyRX1QfLt+oup4Uw==",
+      "requires": {
+        "dooboolab-welcome": "^1.3.0"
+      }
+    },
    "react-native-url-polyfill": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/react-native-url-polyfill/-/react-native-url-polyfill-2.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
    "@digitalbazaar/rsa-signature-2018": "digitalbazaar/rsa-signature-2018#initial",
    "@digitalbazaar/rsa-verification-key-2018": "digitalbazaar/rsa-verification-key-2018#initial",
    "@digitalcredentials/vc": "^1.1.2",
-    "@expo-google-fonts/inter": "^0.2.3",
+    "@expo-google-fonts/montserrat": "^0.4.2",
    "@expo/metro-config": "~0.18.11",
    "@invertase/react-native-apple-authentication": "^2.3.0",
    "@iriscan/biometric-sdk-react-native": "0.2.6",
@@ -100,6 +100,7 @@
    "react-native-shimmer-placeholder": "^2.0.9",
    "react-native-spinkit": "^1.5.1",
    "react-native-svg": "15.2.0",
+    "react-native-switch-toggle": "^2.2.1",
    "react-native-vector-icons": "^10.0.0",
    "react-native-webview": "^13.13.5",
    "react-native-zip-archive": "^6.1.0",
--- a/routes/main.ts
+++ b/routes/main.ts
@@ -44,7 +44,7 @@ const settings: TabScreen = {
  options: {
    headerTitleStyle: {
      fontSize: 26,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      marginTop: 15,
    },
    title: i18n.t('MainLayout:settings'),
--- a/screens/AuthScreen.tsx
+++ b/screens/AuthScreen.tsx
@@ -12,7 +12,7 @@ import {
  sendStartEvent,
 } from '../shared/telemetry/TelemetryUtils';
 import {TelemetryConstants} from '../shared/telemetry/TelemetryConstants';
-import {SvgImage} from '../components/ui/svg';
+import BiometricIcon from '../components/BiometricIcon';

 export const AuthScreen: React.FC<RootRouteProps> = props => {
  const {t} = useTranslation('AuthScreen');
@@ -43,7 +43,7 @@ export const AuthScreen: React.FC<RootRouteProps> = props => {
        title={controller.alertMsg}
      />
      <Column crossAlign="center">
-        {SvgImage.fingerprintIcon(66)}
+        <BiometricIcon size={66} />
        <Column margin="30 0 0 0">
          <Text
            testID="selectAppUnlockMethod"
--- a/screens/BiometricScreen.tsx
+++ b/screens/BiometricScreen.tsx
@@ -12,7 +12,7 @@ import {
  resetRetryCount,
 } from '../shared/telemetry/TelemetryUtils';
 import {TelemetryConstants} from '../shared/telemetry/TelemetryConstants';
-import {SvgImage} from '../components/ui/svg';
+import BiometricIcon from '../components/BiometricIcon';

 export const BiometricScreen: React.FC<RootRouteProps> = props => {
  const {t} = useTranslation('BiometricScreen');
@@ -39,7 +39,7 @@ export const BiometricScreen: React.FC<RootRouteProps> = props => {
      backgroundColor={Theme.Colors.whiteBackgroundColor}>
      <Centered fill>
        <TouchableOpacity onPress={controller.useBiometrics}>
-          {SvgImage.fingerprintIcon(180)}
+          <BiometricIcon size={108} />
        </TouchableOpacity>
      </Centered>

--- a/screens/Home/MyVcsTab.tsx
+++ b/screens/Home/MyVcsTab.tsx
@@ -259,7 +259,6 @@ const [highlightCardLayout, setHighlightCardLayout] = useState<null | {
                }>
                <Row style={Theme.SearchBarStyles.vcSearchBarContainer}>
                  <SearchBar
-                    isVcSearch
                    searchIconTestID="searchIssuerIcon"
                    searchBarTestID="issuerSearchBar"
                    search={search}
@@ -268,23 +267,10 @@ const [highlightCardLayout, setHighlightCardLayout] = useState<null | {
                    onChangeText={filterVcs}
                    onLayout={() => filterVcs('')}
                  />
-                  {clearSearchIcon && (
-                    <Pressable
-                      onPress={clearSearchText}
-                      style={Theme.SearchBarStyles.clearSearch}>
-                      <Icon
-                        testID="clearingIssuerSearchIcon"
-                        name="circle-with-cross"
-                        type="entypo"
-                        size={18}
-                        color={Theme.Colors.DetailsLabel}
-                      />
-                    </Pressable>
-                  )}
                </Row>
                <Row pY={11} pX={8}>
                  {numberOfCardsAvailable > 0 && (
-                    <Text style={{fontFamily: 'Inter_500Medium'}}>
+                    <Text style={{fontFamily: 'Montserrat_500Medium'}}>
                      {cardsAvailableText}
                    </Text>
                  )}
@@ -355,7 +341,7 @@ const [highlightCardLayout, setHighlightCardLayout] = useState<null | {
                            fontWeight: 'bold',
                            textAlign: 'center',
                            fontSize: 18,
-                            fontFamily: 'Inter_600SemiBold',
+                            fontFamily: 'Montserrat_600SemiBold',
                          }}>
                          {t('noCardsTitle')}
                        </Text>
@@ -365,7 +351,7 @@ const [highlightCardLayout, setHighlightCardLayout] = useState<null | {
                            lineHeight: 17,
                            paddingTop: 10,
                            fontSize: 14,
-                            fontFamily: 'Inter_400Regular',
+                            fontFamily: 'Montserrat_400Regular',
                          }}>
                          {t('noCardsDescription')}
                        </Text>
--- a/screens/HomeScreenLayout.tsx
+++ b/screens/HomeScreenLayout.tsx
@@ -29,7 +29,7 @@ export const HomeScreenLayout: React.FC<RootRouteProps> = props => {
        tabBarActiveTintColor: Theme.Colors.IconBg,
        tabBarLabelStyle: {
          fontSize: 12,
-          fontFamily: 'Inter_600SemiBold',
+          fontFamily: 'Montserrat_600SemiBold',
        },
        tabBarStyle: {
          height: 75,
--- a/screens/IntroSliders/biometricIntro.tsx
+++ b/screens/IntroSliders/biometricIntro.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import {useTranslation} from 'react-i18next';
 import {Column, Text, Button} from '../../components/ui';
 import {Theme} from '../../components/ui/styleUtils';
-import {SvgImage} from '../../components/ui/svg';
-import { View, ScrollView } from 'react-native';
+import {View, ScrollView} from 'react-native';
+import BiometricIcon from '../../components/BiometricIcon';

 export const StaticAuthScreen: React.FC = () => {
  const {t} = useTranslation('AuthScreen');
@@ -13,16 +13,15 @@ export const StaticAuthScreen: React.FC = () => {
      fill
      padding={[0, 5, 0, 5]}
      backgroundColor={Theme.Colors.whiteBackgroundColor}
-      style={Theme.IntroSliderStyles.biometricIntroOuterColumn}
-    >
-      <View 
+      style={Theme.IntroSliderStyles.biometricIntroOuterColumn}>
+      <View
        testID="notchView"
        style={Theme.IntroSliderStyles.biometricIntroNotch}></View>
-      <ScrollView 
-        showsVerticalScrollIndicator={false} 
-        contentContainerStyle={{ flexGrow: 1 }}>
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{flexGrow: 1}}>
        <Column
-          align='space-between'
+          align="space-between"
          fill
          padding={[0, 20, 0, 20]}
          backgroundColor={Theme.Colors.whiteBackgroundColor}
@@ -31,7 +30,7 @@ export const StaticAuthScreen: React.FC = () => {
            overflow: 'hidden',
          }}>
          <Column crossAlign="center">
-            {SvgImage.fingerprintIcon(66)}
+            <BiometricIcon size={66} />
            <Column margin="30 0 0 0">
              <Text
                testID="header"
@@ -57,29 +56,25 @@ export const StaticAuthScreen: React.FC = () => {
              </Text>
            </Column>
          </Column>
-          <View 
-            testID="spacerView"
-            style={{ height: 100 }}></View>
+          <View testID="spacerView" style={{height: 100}}></View>
          <Column>
            <Button
              testID="useBiometricsButton"
              title={t('useBiometrics')}
              type="gradient"
              margin="0 0 8 0"
-              onPress={() => { }}
+              onPress={() => {}}
            />
            <Button
              testID="usePasscodeButton"
              type="clear"
              title={t('usePasscode')}
              disabled={false}
-              onPress={() => { }}
+              onPress={() => {}}
            />
          </Column>
          {/* height increased to enable force scroll */}
-          <View 
-            testID="footerSpacerView"
-            style={{ height: 200 }}></View>
+          <View testID="footerSpacerView" style={{height: 200}}></View>
        </Column>
      </ScrollView>
    </Column>
--- a/screens/IntroSliders/trustedDigitalWalletIntro.tsx
+++ b/screens/IntroSliders/trustedDigitalWalletIntro.tsx
@@ -1,144 +1,163 @@
 import React from 'react';
-import { Column, Row, Text } from '../../components/ui';
-import { Theme } from '../../components/ui/styleUtils';
-import { SvgImage } from '../../components/ui/svg';
-import { LinearGradient } from 'react-native-linear-gradient';
-import { Image, Icon } from 'react-native-elements';
-import { ScrollView, View } from 'react-native';
-import { HelpScreen } from '../../components/HelpScreen';
-import { useTranslation } from 'react-i18next';
-import { SearchBar } from '../../components/ui/SearchBar';
+import {Column, Row, Text} from '../../components/ui';
+import {Theme} from '../../components/ui/styleUtils';
+import {SvgImage} from '../../components/ui/svg';
+import LinearGradient from 'react-native-linear-gradient';
+import {Image, Icon} from 'react-native-elements';
+import {ScrollView, View} from 'react-native';
+import {HelpScreen} from '../../components/HelpScreen';
+import {useTranslation} from 'react-i18next';
+import {SearchBar} from '../../components/ui/SearchBar';

 export const StaticHomeScreen: React.FC = () => {
-    const { t } = useTranslation();
-    const cards = [
-        { id: 1, name: 'Abigail', status: 'valid', pin: false, face: require("../../assets/faceImage2.png") },
-        { id: 2, name: 'Patricia', status: 'valid', pin: false, face: require("../../assets/faceImage1.png") },
-        { id: 3, name: 'Timara', status: 'pending', pin: false, face: require("../../assets/faceImage2.png") },
-        { id: 4, name: 'Abishek', status: 'valid', pin: false, face: require("../../assets/faceImage1.png") },
-    ];
+  const {t} = useTranslation();
+  const cards = [
+    {
+      id: 1,
+      name: 'Abigail',
+      status: 'valid',
+      pin: false,
+      face: require('../../assets/faceImage2.png'),
+    },
+    {
+      id: 2,
+      name: 'Patricia',
+      status: 'valid',
+      pin: false,
+      face: require('../../assets/faceImage1.png'),
+    },
+    {
+      id: 3,
+      name: 'Timara',
+      status: 'pending',
+      pin: false,
+      face: require('../../assets/faceImage2.png'),
+    },
+    {
+      id: 4,
+      name: 'Abishek',
+      status: 'valid',
+      pin: false,
+      face: require('../../assets/faceImage1.png'),
+    },
+  ];

-    return (
-        <Column
-            testID="homeScreen"
-            fill
-            backgroundColor={Theme.Colors.whiteBackgroundColor}
-            style={Theme.IntroSliderStyles.trustedDigitalWalletIntroOuterColumn}>
-            <View
-                testID="introScreenNotch"
-                style={Theme.IntroSliderStyles.introScreenNotch}></View>
+  return (
+    <Column
+      testID="homeScreen"
+      fill
+      backgroundColor={Theme.Colors.whiteBackgroundColor}
+      style={Theme.IntroSliderStyles.trustedDigitalWalletIntroOuterColumn}>
+      <View
+        testID="introScreenNotch"
+        style={Theme.IntroSliderStyles.introScreenNotch}></View>

-            <Row
-                style={{
-                    padding: 16,
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    borderBottomWidth: 1,
-                    borderBottomColor: Theme.Colors.lightGreyBackgroundColor,
-                }}>
-                {SvgImage.InjiLogo({ height: 60, width: 120 })}
-                <HelpScreen
-                    isDisabled={true}
-                    source={'Inji'}
-                    triggerComponent={
-                        <LinearGradient
-                            style={{ borderRadius: 8 }}
-                            colors={Theme.Colors.GradientColorsLight}
-                            start={Theme.LinearGradientDirection.start}
-                            end={Theme.LinearGradientDirection.end}>
-                            <View style={Theme.HelpScreenStyle.viewStyle}>
-                                <Row crossAlign="center" style={Theme.HelpScreenStyle.rowStyle}>
-                                    <View
-                                        testID="helpIcon"
-                                        style={Theme.HelpScreenStyle.iconStyle}>
-                                        {SvgImage.coloredInfo()}
-                                    </View>
-                                    <Text
-                                        testID="helpText"
-                                        style={Theme.HelpScreenStyle.labelStyle}>
-                                        {t('IssuersScreen:help')}
-                                    </Text>
-                                </Row>
-                            </View>
-                        </LinearGradient>
-                    }
-                />
-            </Row>
-            <SearchBar
-                searchBarTestID="searchBar"
-                isVcSearch
-                editable={false}
-                placeholder={t('MyVcsTab:searchByName')}
-            />
-            <ScrollView
-                testID="cardsScrollView"
-                showsVerticalScrollIndicator={false}
-                contentContainerStyle={{ flexGrow: 1 }}>
-                <Row
-                    style={{
-                        justifyContent: 'space-between',
-                        padding: 16,
-                        alignItems: 'center',
-                    }}>
-                    <Text
-                        testID="totalCardsText"
-                        style={{ fontWeight: 'bold', fontSize: 13 }}>
-                        4 {t('common:cards')}
-                    </Text>
+      <Row
+        style={{
+          padding: 16,
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          borderBottomWidth: 1,
+          borderBottomColor: Theme.Colors.lightGreyBackgroundColor,
+        }}>
+        {SvgImage.InjiLogo({height: 60, width: 120})}
+        <HelpScreen
+          isDisabled={true}
+          source={'Inji'}
+          triggerComponent={
+            <LinearGradient
+              style={{borderRadius: 8}}
+              colors={Theme.Colors.GradientColorsLight}
+              start={Theme.LinearGradientDirection.start}
+              end={Theme.LinearGradientDirection.end}>
+              <View style={Theme.HelpScreenStyle.viewStyle}>
+                <Row crossAlign="center" style={Theme.HelpScreenStyle.rowStyle}>
+                  <View
+                    testID="helpIcon"
+                    style={Theme.HelpScreenStyle.iconStyle}>
+                    {SvgImage.coloredInfo()}
+                  </View>
+                  <Text
+                    testID="helpText"
+                    style={Theme.HelpScreenStyle.labelStyle}>
+                    {t('IssuersScreen:help')}
+                  </Text>
                </Row>
+              </View>
+            </LinearGradient>
+          }
+        />
+      </Row>
+      <SearchBar
+        searchBarTestID="searchBar"
+        editable={false}
+        placeholder={t('MyVcsTab:searchByName')}
+      />
+      <ScrollView
+        testID="cardsScrollView"
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{flexGrow: 1}}>
+        <Row
+          style={{
+            justifyContent: 'space-between',
+            padding: 16,
+            alignItems: 'center',
+          }}>
+          <Text
+            testID="totalCardsText"
+            style={{fontWeight: 'bold', fontSize: 13}}>
+            4 {t('common:cards')}
+          </Text>
+        </Row>

-                {cards.map(card => (
-                    <Row
-                        key={card.id}
-                        testID={`cardRow-${card.id}`}
-                        style={{
-                            alignItems: 'center',
-                            padding: 16,
-                            borderBottomWidth: 1,
-                            borderBottomColor: Theme.Colors.lightGreyBackgroundColor,
-                        }}>
-                        {card.pin && SvgImage.pinIcon()}
-                        <Image
-                            testID={`cardImage-${card.id}`}
-                            style={{ height: 40, width: 40, marginRight: 10 }}
-                            source={card.face}></Image>
-                        <Column style={{ marginLeft: card.pin ? 8 : 0, flex: 1 }}>
-                            <Text
-                                testID={`cardName-${card.id}`}
-                                style={{ fontWeight: 'bold' }}>
-                                {card.name}
-                            </Text>
-                            <Row>
-                                <Text
-                                    testID={`cardStatus-${card.id}`}
-                                    style={{
-                                        color:
-                                            card.status === 'valid'
-                                                ? Theme.Colors.GrayText
-                                                : Theme.Colors.GrayText,
-                                    }}>
-                                    {t("VcDetails:" + card.status)}
-                                </Text>
-                            </Row>
-                        </Column>
+        {cards.map(card => (
+          <Row
+            key={card.id}
+            testID={`cardRow-${card.id}`}
+            style={{
+              alignItems: 'center',
+              padding: 16,
+              borderBottomWidth: 1,
+              borderBottomColor: Theme.Colors.lightGreyBackgroundColor,
+            }}>
+            {card.pin && SvgImage.pinIcon()}
+            <Image
+              testID={`cardImage-${card.id}`}
+              style={{height: 40, width: 40, marginRight: 10}}
+              source={card.face}></Image>
+            <Column style={{marginLeft: card.pin ? 8 : 0, flex: 1}}>
+              <Text testID={`cardName-${card.id}`} style={{fontWeight: 'bold'}}>
+                {card.name}
+              </Text>
+              <Row>
+                <Text
+                  testID={`cardStatus-${card.id}`}
+                  style={{
+                    color:
+                      card.status === 'valid'
+                        ? Theme.Colors.GrayText
+                        : Theme.Colors.GrayText,
+                  }}>
+                  {t('VcDetails:' + card.status)}
+                </Text>
+              </Row>
+            </Column>

-                        {card.status === 'valid' && SvgImage.walletActivatedIcon()}
-                        {card.status === 'pending' && SvgImage.walletUnActivatedIcon()}
-                        <Icon
-                            testID={`cardOptionsIcon-${card.id}`}
-                            name="dots-three-horizontal"
-                            type="entypo"
-                            color={Theme.Colors.GrayText}
-                            size={Theme.ICON_SMALL_SIZE}
-                            style={{ paddingHorizontal: 10 }}
-                        />
-                    </Row>
-                ))}
-                {/* height increased to enable force scroll */}
-                <View
-                    testID="spacerView"
-                    style={{ height: 200 }}></View>
-            </ScrollView>
-        </Column>
-    );
+            {card.status === 'valid' && SvgImage.walletActivatedIcon()}
+            {card.status === 'pending' && SvgImage.walletUnActivatedIcon()}
+            <Icon
+              testID={`cardOptionsIcon-${card.id}`}
+              name="dots-three-horizontal"
+              type="entypo"
+              color={Theme.Colors.GrayText}
+              size={Theme.ICON_SMALL_SIZE}
+              style={{paddingHorizontal: 10}}
+            />
+          </Row>
+        ))}
+        {/* height increased to enable force scroll */}
+        <View testID="spacerView" style={{height: 200}}></View>
+      </ScrollView>
+    </Column>
+  );
 };
--- a/screens/Issuers/TransactionCodeScreen.tsx
+++ b/screens/Issuers/TransactionCodeScreen.tsx
@@ -1,25 +1,27 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button, Column, Text } from '../../components/ui';
-import { Theme } from '../../components/ui/styleUtils';
+import React, {useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import {Button, Column, Text} from '../../components/ui';
+import {Theme} from '../../components/ui/styleUtils';
 import {
  Dimensions,
  Keyboard,
-  KeyboardAvoidingView, TouchableWithoutFeedback,
+  KeyboardAvoidingView,
+  TouchableWithoutFeedback,
  View,
-  ModalProps
+  ModalProps,
 } from 'react-native';
-import { isIOS } from '../../shared/constants';
-import { SvgImage } from '../../components/ui/svg';
-import { getScreenHeight } from '../../shared/commonUtil';
-import { PinInput } from '../../components/PinInput';
-import { Modal } from '../../components/ui/Modal';
-import { CancelDownloadModal } from './ConfirmationModal';
-import { Icon, Input } from 'react-native-elements';
+import {isIOS} from '../../shared/constants';
+import {SvgImage} from '../../components/ui/svg';
+import {getScreenHeight} from '../../shared/commonUtil';
+import {PinInput} from '../../components/PinInput';
+import {Modal} from '../../components/ui/Modal';
+import {CancelDownloadModal} from './ConfirmationModal';
+import {Icon, Input} from 'react-native-elements';
+import LinearGradient from 'react-native-linear-gradient';

 export const TransactionCodeModal: React.FC<ExtendedModalProps> = props => {
-  const { t } = useTranslation('transactionCodeScreen');
-  const { isSmallScreen, screenHeight } = getScreenHeight();
+  const {t} = useTranslation('transactionCodeScreen');
+  const {isSmallScreen, screenHeight} = getScreenHeight();
  const [transactionCode, setTransactionCode] = useState('');
  const [errorMessage, setErrorMessage] = useState('');
  const [showCancelConfirm, setShowCancelConfirm] = useState(false);
@@ -29,7 +31,6 @@ export const TransactionCodeModal: React.FC<ExtendedModalProps> = props => {
  const [textLineCount, setTextLineCount] = useState(0);
  const maxLines = 2;

-
  const validateCode = (code: string): string => {
    if (!code.trim()) return t('emptyCodeError');
    if (!/^[a-zA-Z0-9]+$/.test(code)) return t('invalidCharacters');
@@ -47,41 +48,47 @@ export const TransactionCodeModal: React.FC<ExtendedModalProps> = props => {
  };

  const handleChange = (text: string) => {
-    if (!touched)
-      setTouched(true);
+    if (!touched) setTouched(true);
    setTransactionCode(text);
    let error;
-    if (touched)
-      error = validateCode(text);
+    if (touched) error = validateCode(text);
    setErrorMessage(error);
  };

  return (
    <>
      {showCancelConfirm ? (
-        <CancelDownloadModal onCancel={() => setShowCancelConfirm(false)} onConfirm={props.onDismiss ?? (() => { })} visible={showCancelConfirm} />
+        <CancelDownloadModal
+          onCancel={() => setShowCancelConfirm(false)}
+          onConfirm={props.onDismiss ?? (() => {})}
+          visible={showCancelConfirm}
+        />
      ) : (
-        <Modal isVisible={props.visible ?? false} onDismiss={() => setShowCancelConfirm(true)}>
+        <Modal
+          isVisible={props.visible ?? false}
+          onDismiss={() => setShowCancelConfirm(true)}>
          <KeyboardAvoidingView
            style={
              isSmallScreen
-                ? { flex: 1, paddingHorizontal: 10 }
+                ? {flex: 1, paddingHorizontal: 10}
                : Theme.Styles.keyboardAvoidStyle
            }
            behavior={isIOS() ? 'padding' : 'height'}>
-            <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
-              <View style={{ height: 700 }}>
+            <TouchableWithoutFeedback
+              onPress={Keyboard.dismiss}
+              accessible={false}>
+              <View style={{height: 700}}>
                <Column
                  crossAlign="center"
                  style={
                    isSmallScreen
                      ? null
                      : {
-                        maxHeight: screenHeight,
-                        flex: 1,
-                        justifyContent: 'space-around',
-                        marginBottom: 20,
-                      }
+                          maxHeight: screenHeight,
+                          flex: 1,
+                          justifyContent: 'space-around',
+                          marginBottom: 20,
+                        }
                  }>
                  {SvgImage.OtpVerificationIcon()}
                  <View>
@@ -93,39 +100,37 @@ export const TransactionCodeModal: React.FC<ExtendedModalProps> = props => {
                        {t('TransactionCode')}
                      </Text>
                      <Text
-                        style={{ marginTop: 15 }}
+                        style={{marginTop: 15}}
                        testID="otpVerificationDescription"
                        color={Theme.Colors.RetrieveIdLabel}
                        numLines={showFullDescription ? undefined : 2}
-                        ellipsizeMode='tail'
+                        ellipsizeMode="tail"
                        weight="semibold"
                        size="small"
                        align="center"
-                        onTextLayout={(e) => {
+                        onTextLayout={e => {
                          if (textLineCount !== e.nativeEvent.lines.length) {
                            setTextLineCount(e.nativeEvent.lines.length);
                          }
-                        }}
-                      >
-                        {t(
-                          `${props.description ||
-                          t('description')
-                          }`,
-                        )}
+                        }}>
+                        {props.description
+                          ? t(props.description)
+                          : t('description')}
                      </Text>
-                      {textLineCount > maxLines && <Text
-                        onPress={() => setShowFullDescription(prev => !prev)}
-                        style={Theme.TransactionCodeScreenStyle.showMoreButton}
-                      >
-                        {showFullDescription ? t('Show less ↑') : t('Show more ↓')}
-                      </Text>}
-                      </Column>
+                      {textLineCount > maxLines && (
+                        <Text
+                          onPress={() => setShowFullDescription(prev => !prev)}
+                          style={
+                            Theme.TransactionCodeScreenStyle.showMoreButton
+                          }>
+                          {showFullDescription ? t('showLess') : t('showMore')}
+                        </Text>
+                      )}
+                    </Column>
                  </View>

                  {(props.error || errorMessage) && (
-                    <View
-                      style={Theme.TransactionCodeScreenStyle.errorView}
-                    >
+                    <View style={Theme.TransactionCodeScreenStyle.errorView}>
                      <Text
                        testID="otpVerificationError"
                        align="center"
@@ -135,11 +140,11 @@ export const TransactionCodeModal: React.FC<ExtendedModalProps> = props => {
                    </View>
                  )}

-                  <View style={{ alignItems: 'center' }}>
-                    {((!props.inputMode ||
+                  <View style={{alignItems: 'center'}}>
+                    {(!props.inputMode ||
                      (props.inputMode && props.inputMode === 'numeric')) &&
-                      props.length &&
-                      props.length <= 6) ? (
+                    props.length &&
+                    props.length <= 6 ? (
                      <>
                        <PinInput
                          testID="pinInput"
@@ -157,40 +162,85 @@ export const TransactionCodeModal: React.FC<ExtendedModalProps> = props => {
                            props.onDismiss?.();
                          }}
                        />
-                        <Button styles={{ marginTop: 30 }} disabled={transactionCode.length == 0} title={t('verify')} type="gradient" onPress={handleVerify} />
+                        <Button
+                          styles={{marginTop: 30}}
+                          disabled={transactionCode.length == 0}
+                          title={t('verify')}
+                          type="gradient"
+                          onPress={handleVerify}
+                        />
                      </>
                    ) : (
                      <>
-                        <Input
-                          containerStyle={{
-                            width: Dimensions.get('window').width - 80,
-                            alignSelf: 'center',
-                          }}
-                          placeholder={t('placeholder')}
-                          placeholderTextColor="#ACACAC"
-                          inputContainerStyle={{
-                            borderBottomColor: '#C1C1C1',
-                            borderBottomWidth: 1,
-                            marginBottom: 16,
-                          }}
-                          inputStyle={Theme.TransactionCodeScreenStyle.inputStyle}
-                          maxLength={props.length ?? 30}
-                          autoFocus
-                          secureTextEntry={!showCode}
-                          value={transactionCode}
-                          keyboardType={props.inputMode === 'numeric' ? 'numeric' : 'default'}
-                          onChangeText={handleChange}
-                          rightIcon={
-                            <Icon
-                              name={showCode ? 'eye-off' : 'eye'}
-                              type="feather"
-                              size={20}
-                              color="#888"
-                              onPress={() => setShowCode(prev => !prev)}
-                            />
+                        <LinearGradient
+                          colors={
+                            transactionCode.length > 0
+                              ? Theme.Colors.GradientColors
+                              : [
+                                  Theme.Colors.TransactionCodeBorderColor,
+                                  Theme.Colors.TransactionCodeBorderColor,
+                                ]
                          }
+                          start={{x: 0, y: 0}}
+                          end={{x: 1, y: 0}}
+                          style={
+                            Theme.TransactionCodeScreenStyle
+                              .transactionGradientContainer
+                          }>
+                          <View
+                            style={{
+                              backgroundColor:
+                                Theme.Colors.TransactionCodeBackgroundColor,
+                              borderRadius: 16,
+                              overflow: 'hidden',
+                            }}>
+                            <Input
+                              containerStyle={{
+                                width: Dimensions.get('window').width - 80,
+                                alignSelf: 'center',
+                                marginBottom: -25,
+                                padding: 0,
+                              }}
+                              placeholder={t('placeholder')}
+                              placeholderTextColor={
+                                Theme.Colors.TransactionCodePlaceholderColor
+                              }
+                              inputContainerStyle={
+                                Theme.TransactionCodeScreenStyle.inputContainer
+                              }
+                              inputStyle={
+                                Theme.TransactionCodeScreenStyle.inputStyle
+                              }
+                              maxLength={props.length ?? 30}
+                              autoFocus
+                              secureTextEntry={!showCode}
+                              value={transactionCode}
+                              keyboardType={
+                                props.inputMode === 'numeric'
+                                  ? 'numeric'
+                                  : 'default'
+                              }
+                              onChangeText={handleChange}
+                              rightIcon={
+                                <Icon
+                                  name={showCode ? 'eye-off' : 'eye'}
+                                  type="feather"
+                                  size={20}
+                                  color={
+                                    Theme.Colors.TransactionCodePlaceholderColor
+                                  }
+                                  onPress={() => setShowCode(prev => !prev)}
+                                />
+                              }
+                            />
+                          </View>
+                        </LinearGradient>
+                        <Button
+                          disabled={transactionCode.length == 0}
+                          title={t('verify')}
+                          type="gradient"
+                          onPress={handleVerify}
                        />
-                        <Button disabled={transactionCode.length == 0} title="Verify" type="gradient" onPress={handleVerify} />
                      </>
                    )}
                  </View>
@@ -202,7 +252,6 @@ export const TransactionCodeModal: React.FC<ExtendedModalProps> = props => {
      )}
    </>
  );
-
 };

 interface ExtendedModalProps extends ModalProps {
--- a/screens/QrLogin/QrConsent.tsx
+++ b/screens/QrLogin/QrConsent.tsx
@@ -3,12 +3,13 @@ import {useTranslation} from 'react-i18next';
 import {Button, Column, Row, Text} from '../../components/ui';
 import {Theme} from '../../components/ui/styleUtils';
 import {useQrLogin} from './QrLoginController';
-import {Image} from 'react-native';
-import {ListItem, Switch} from 'react-native-elements';
+import {Image, View} from 'react-native';
+import {ListItem} from 'react-native-elements';
 import {Modal} from '../../components/ui/Modal';
 import {QrLoginRef} from '../../machines/QrLogin/QrLoginMachine';
 import {ScrollView} from 'react-native';
 import {getClientNameForCurrentLanguage} from '../../i18n';
+import Toggle from '../../components/Toggle';

 export const QrConsent: React.FC<QrConsentProps> = props => {
  const {t} = useTranslation('QrLogin');
@@ -100,15 +101,10 @@ export const QrConsent: React.FC<QrConsentProps> = props => {
                  </ListItem.Title>
                </ListItem.Content>

-                <Switch
+                <Toggle
                  value={controller.isShare[claim]}
-                  onValueChange={() =>
-                    controller.SELECT_CONSENT(
-                      controller.isShare[claim],
-                      claim,
-                    )
-                  }
-                  color={Theme.Colors.Icon}
+                  onToggle={value => controller.SELECT_CONSENT(value, claim)}
+                  testID="voluntaryClaimToggle"
                />
              </ListItem>
            ))}
--- a/screens/Scan/SendVPScreen.tsx
+++ b/screens/Scan/SendVPScreen.tsx
@@ -340,7 +340,7 @@ export const SendVPScreen: React.FC<ScanLayoutProps> = props => {
              <Text
                style={{
                  color: Theme.Colors.Icon,
-                  fontFamily: 'Inter_600SemiBold',
+                  fontFamily: 'Montserrat_600SemiBold',
                }}
                onPress={
                  areAllVcsChecked
--- a/screens/Settings/SettingScreen.tsx
+++ b/screens/Settings/SettingScreen.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Platform, Pressable} from 'react-native';
+import {Platform, Pressable, View} from 'react-native';
 import {Icon, ListItem, Switch} from 'react-native-elements';
 import {Column, Row, Text} from '../../components/ui';
 import {Theme} from '../../components/ui/styleUtils';
@@ -18,6 +18,9 @@ import {SvgImage} from '../../components/ui/svg';
 import {DataBackupAndRestore} from './DataBackupAndRestore';
 import {BannerNotificationContainer} from '../../components/BannerNotificationContainer';
 import {SettingsKeyManagementScreen} from './SettingsKeyManagement';
+import SwitchToggle from 'react-native-switch-toggle';
+import BiometricIcon from '../../components/BiometricIcon';
+import Toggle from '../../components/Toggle';

 const LanguageSetting: React.FC = () => {
  const {t} = useTranslation('SettingScreen');
@@ -73,150 +76,144 @@ export const SettingScreen: React.FC<
  };

  return (
-      <React.Fragment>
-        <Pressable accessible={false} onPress={controller.TOGGLE_SETTINGS}>
-          {props.triggerComponent}
-        </Pressable>
-        <BannerNotificationContainer />
-        <ScrollView {...testIDProps('settingsScreen')}>
-          <Column
-              style={{display: Platform.OS !== 'ios' ? 'flex' : 'none'}}
-              backgroundColor={Theme.Colors.lightGreyBackgroundColor}>
-            <Text
-                style={{paddingTop: 3}}
-                testID="injiAsVerifierApp"
-                weight="semibold"
-                margin="10"
-                color={Theme.Colors.aboutVersion}>
-              {t('injiAsVerifierApp')}
-            </Text>
-            <Row
-                align="space-evenly"
-                backgroundColor={Theme.Colors.whiteBackgroundColor}>
-              <Pressable
-                  {...testIDProps('receiveCardPressableArea')}
-                  onPress={controller.RECEIVE_CARD}>
-                <Column align="center" style={Theme.Styles.receiveCardsContainer}>
-                  {SvgImage.ReceiveCard()}
-                  <Text
-                      testID="receiveCard"
-                      margin="6"
-                      style={{paddingTop: 3}}
-                      weight="semibold">
-                    {t('receiveCard')}
-                  </Text>
-                </Column>
-              </Pressable>
+    <React.Fragment>
+      <Pressable accessible={false} onPress={controller.TOGGLE_SETTINGS}>
+        {props.triggerComponent}
+      </Pressable>
+      <BannerNotificationContainer />
+      <ScrollView {...testIDProps('settingsScreen')}>
+        <Column
+          style={{display: Platform.OS !== 'ios' ? 'flex' : 'none'}}
+          backgroundColor={Theme.Colors.lightGreyBackgroundColor}>
+          <Text
+            style={{paddingTop: 3}}
+            testID="injiAsVerifierApp"
+            weight="semibold"
+            margin="10"
+            color={Theme.Colors.aboutVersion}>
+            {t('injiAsVerifierApp')}
+          </Text>
+          <Row
+            align="space-evenly"
+            backgroundColor={Theme.Colors.whiteBackgroundColor}>
+            <Pressable
+              {...testIDProps('receiveCardPressableArea')}
+              onPress={controller.RECEIVE_CARD}>
+              <Column align="center" style={Theme.Styles.receiveCardsContainer}>
+                {SvgImage.ReceiveCard()}
+                <Text
+                  testID="receiveCard"
+                  margin="6"
+                  style={{paddingTop: 3}}
+                  weight="semibold">
+                  {t('receiveCard')}
+                </Text>
+              </Column>
+            </Pressable>

-              <ReceivedCards />
-            </Row>
+            <ReceivedCards />
+          </Row>

-            <Text
-                weight="semibold"
-                style={{paddingTop: 3}}
-                margin="10"
-                color={Theme.Colors.aboutVersion}>
-              {t('basicSettings')}
-            </Text>
-          </Column>
-          <Column fill>
-            <MessageOverlay
-                isVisible={controller.alertMsg != ''}
-                onBackdropPress={controller.hideAlert}
-                title={controller.alertMsg}
+          <Text
+            weight="semibold"
+            style={{paddingTop: 3}}
+            margin="10"
+            color={Theme.Colors.aboutVersion}>
+            {t('basicSettings')}
+          </Text>
+        </Column>
+        <Column fill>
+          <MessageOverlay
+            isVisible={controller.alertMsg != ''}
+            onBackdropPress={controller.hideAlert}
+            title={controller.alertMsg}
+          />
+
+          <LanguageSetting />
+
+          <ListItem topDivider disabled={!controller.canUseBiometrics}>
+            <BiometricIcon size={24} />
+            <ListItem.Content>
+              <ListItem.Title
+                {...testIDProps('bioUnlock')}
+                style={{paddingTop: 3}}>
+                <Text weight="semibold" color={Theme.Colors.settingsLabel}>
+                  {t('bioUnlock')}
+                </Text>
+              </ListItem.Title>
+            </ListItem.Content>
+            <Toggle
+              value={controller.isBiometricUnlockEnabled}
+              onToggle={value => {
+                handleBiometricToggle(!value);
+              }}
+              testID="biometricToggle"
            />
+          </ListItem>

-            <LanguageSetting />
+          <AboutInji appId={controller.appId} />

-            <ListItem topDivider disabled={!controller.canUseBiometrics}>
-              {SvgImage.fingerprintIcon(24)}
-              <ListItem.Content>
-                <ListItem.Title
-                    {...testIDProps('bioUnlock')}
-                    style={{paddingTop: 3}}>
-                  <Text weight="semibold" color={Theme.Colors.settingsLabel}>
-                    {t('bioUnlock')}
-                  </Text>
-                </ListItem.Title>
-              </ListItem.Content>
-              <Switch
-                  {...testIDProps('biometricToggle')}
-                  value={controller.isBiometricUnlockEnabled}
-                  onValueChange={handleBiometricToggle}
-                  trackColor={{
-                    false: Theme.Colors.switchTrackFalse,
-                    true:
-                        Platform.OS == 'ios'
-                            ? Theme.Colors.switchHead
-                            : Theme.Colors.switchTrackTrue,
-                  }}
-                  color={Theme.Colors.switchHead}
-              />
-            </ListItem>
+          <DataBackupAndRestore />
+          <SettingsKeyManagementScreen controller={controller} />

-            <AboutInji appId={controller.appId} />
+          {CREDENTIAL_REGISTRY_EDIT === 'true' && (
+            <EditableListItem
+              testID="credentialRegistry"
+              title={t('credentialRegistry')}
+              content={controller.credentialRegistry}
+              items={[
+                {
+                  label: t('credentialRegistry'),
+                  value: controller.credentialRegistry,
+                  testID: 'credentialRegistry',
+                },
+                {
+                  label: t('esignethosturl'),
+                  value: controller.esignetHostUrl,
+                  testID: 'esignetHost',
+                },
+              ]}
+              response={controller.credentialRegistryResponse}
+              onCancel={controller.CANCEL}
+              onEdit={updateRegistry}
+              Icon="star"
+              errorMessage={t('errorMessage')}
+              progress={controller.isResetInjiProps}
+              titleColor={Theme.Colors.settingsLabel}
+            />
+          )}

-            <DataBackupAndRestore />
-            <SettingsKeyManagementScreen controller={controller} />
+          <ListItem
+            topDivider
+            bottomDivider
+            onPress={() => controller.INJI_TOUR_GUIDE()}>
+            {SvgImage.coloredInfo()}
+            <ListItem.Content>
+              <ListItem.Title
+                {...testIDProps('injiTourGuide')}
+                style={{paddingTop: 3}}>
+                <Text weight="semibold" color={Theme.Colors.settingsLabel}>
+                  {t('injiTourGuide')}
+                </Text>
+              </ListItem.Title>
+            </ListItem.Content>
+          </ListItem>

-            {CREDENTIAL_REGISTRY_EDIT === 'true' && (
-                <EditableListItem
-                    testID="credentialRegistry"
-                    title={t('credentialRegistry')}
-                    content={controller.credentialRegistry}
-                    items={[
-                      {
-                        label: t('credentialRegistry'),
-                        value: controller.credentialRegistry,
-                        testID: 'credentialRegistry',
-                      },
-                      {
-                        label: t('esignethosturl'),
-                        value: controller.esignetHostUrl,
-                        testID: 'esignetHost',
-                      },
-                    ]}
-                    response={controller.credentialRegistryResponse}
-                    onCancel={controller.CANCEL}
-                    onEdit={updateRegistry}
-                    Icon="star"
-                    errorMessage={t('errorMessage')}
-                    progress={controller.isResetInjiProps}
-                    titleColor={Theme.Colors.settingsLabel}
-                />
-            )}
-
-            <ListItem
-                topDivider
-                bottomDivider
-                onPress={() => controller.INJI_TOUR_GUIDE()}>
-              {SvgImage.coloredInfo()}
-              <ListItem.Content>
-                <ListItem.Title
-                    {...testIDProps('injiTourGuide')}
-                    style={{paddingTop: 3}}>
-                  <Text weight="semibold" color={Theme.Colors.settingsLabel}>
-                    {t('injiTourGuide')}
-                  </Text>
-                </ListItem.Title>
-              </ListItem.Content>
-            </ListItem>
-
-            <ListItem onPress={controller.LOGOUT}>
-              {SvgImage.logOutIcon()}
-              <ListItem.Content>
-                <ListItem.Title
-                    {...testIDProps('logout')}
-                    style={{paddingTop: 3}}>
-                  <Text weight="semibold" color={Theme.Colors.settingsLabel}>
-                    {t('logout')}
-                  </Text>
-                </ListItem.Title>
-              </ListItem.Content>
-            </ListItem>
-          </Column>
-        </ScrollView>
-      </React.Fragment>
+          <ListItem onPress={controller.LOGOUT}>
+            {SvgImage.logOutIcon()}
+            <ListItem.Content>
+              <ListItem.Title
+                {...testIDProps('logout')}
+                style={{paddingTop: 3}}>
+                <Text weight="semibold" color={Theme.Colors.settingsLabel}>
+                  {t('logout')}
+                </Text>
+              </ListItem.Title>
+            </ListItem.Content>
+          </ListItem>
+        </Column>
+      </ScrollView>
+    </React.Fragment>
  );
 };

--- a/shared/hooks/useFont.ts
+++ b/shared/hooks/useFont.ts
@@ -1,17 +1,17 @@
 import {
-  Inter_400Regular,
-  Inter_500Medium,
-  Inter_600SemiBold,
-  Inter_700Bold,
+  Montserrat_400Regular,
+  Montserrat_500Medium,
+  Montserrat_600SemiBold,
+  Montserrat_700Bold,
  useFonts,
-} from '@expo-google-fonts/inter';
+} from '@expo-google-fonts/montserrat';

 export function useFont() {
  const [hasFontsLoaded] = useFonts({
-    Inter_400Regular,
-    Inter_500Medium,
-    Inter_600SemiBold,
-    Inter_700Bold,
+    Montserrat_400Regular,
+    Montserrat_500Medium,
+    Montserrat_600SemiBold,
+    Montserrat_700Bold,
  });

  return hasFontsLoaded;