diff --git a/pages/wallet.vue b/pages/wallet.vue
index debf14e..b294e04 100644
--- a/pages/wallet.vue
+++ b/pages/wallet.vue
@@ -46,7 +46,7 @@
               >
                 <div
                   class="flex flex-col items-center text-center"
-                  @click="openSendOverlay"
+                  @click="openShieldOverlay"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -59,15 +59,15 @@
                     <path
                       stroke-linecap="round"
                       stroke-linejoin="round"
-                      d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"
+                      d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"
                     />
                   </svg>
-                  <p class="text-xs">Send</p>
+                  <p class="text-xs">Shield</p>
                 </div>
 
                 <div
                   class="flex flex-col items-center text-center"
-                  @click="openReceiveOverlay"
+                  @click="openUnshieldOverlay"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -80,15 +80,20 @@
                     <path
                       stroke-linecap="round"
                       stroke-linejoin="round"
-                      d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
+                      d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
+                    />
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
                     />
                   </svg>
-                  <p class="text-xs">Receive</p>
+                  <p class="text-xs">Unshield</p>
                 </div>
 
                 <div
                   class="flex flex-col items-center text-center"
-                  @click="openShieldOverlay"
+                  @click="openSendOverlay"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -101,15 +106,15 @@
                     <path
                       stroke-linecap="round"
                       stroke-linejoin="round"
-                      d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"
+                      d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18"
                     />
                   </svg>
-                  <p class="text-xs">Shield</p>
+                  <p class="text-xs">P. Send</p>
                 </div>
 
                 <div
                   class="flex flex-col items-center text-center"
-                  @click="openUnshieldOverlay"
+                  @click="openReceiveOverlay"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -122,15 +127,10 @@
                     <path
                       stroke-linecap="round"
                       stroke-linejoin="round"
-                      d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
-                    />
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+                      d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
                     />
                   </svg>
-                  <p class="text-xs">Unshield</p>
+                  <p class="text-xs">P. Receive</p>
                 </div>
               </div>
             </div>
@@ -138,21 +138,76 @@
         </div>
       </div>
     </div>
-    <div v-if="showAssetsInfo" class="alert-overlay">
-      <div class="alert">
-        <h1 class="mb-8">Other Assets</h1>
-        <p>
-          Incognitee is capable of shielding any fungible asset on any
-          substrate-based chain. Stay tuned for dedicated deployments for DOT,
-          KSM, USDC, USDT and others
-        </p>
-        <p class="mt-3">
-          With further extension, Incognitee will be able to shield BTC, ETH and
-          any other token whose protocol supports light clients
-        </p>
-        <button @click="closeAssetsInfo" class="mt-8">Got it</button>
-      </div>
-    </div>
+
+    <TransitionRoot as="template" :show="showAssetsInfo">
+      <Dialog class="relative z-10" @close="closeAssetsInfo">
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div
+            class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+          />
+        </TransitionChild>
+
+        <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+          <div
+            class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
+          >
+            <TransitionChild
+              as="template"
+              enter="ease-out duration-300"
+              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enter-to="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leave-from="opacity-100 translate-y-0 sm:scale-100"
+              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <DialogPanel
+                class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
+              >
+                <div>
+                  <div class="mt-3 text-center sm:mt-5">
+                    <DialogTitle
+                      as="h3"
+                      class="text-base font-semibold leading-6 text-gray-900"
+                      >Other Assets
+                    </DialogTitle>
+                    <div class="mt-2">
+                      <p class="text-sm text-gray-500 mt-4 text-left">
+                        Incognitee is capable of shielding any fungible asset on
+                        any substrate-based chain. Stay tuned for dedicated
+                        deployments for DOT, KSM, USDC, USDT and others
+                      </p>
+                      <p class="text-sm text-gray-500 text-left my-4">
+                        With further extension, Incognitee will be able to
+                        shield BTC, ETH and any other token whose protocol
+                        supports light clients
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div class="mt-5 sm:mt-6">
+                  <button
+                    type="button"
+                    class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                    @click="closeAssetsInfo"
+                  >
+                    Got it!
+                  </button>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
     <div
       v-if="showPrivacyInfo"
       class="alert-overlay"
@@ -220,266 +275,642 @@
         <button @click="closePrivacyInfo" class="mt-8">Got it</button>
       </div>
     </div>
-    <div v-if="showShieldOverlay" class="action-overlay">
-      <div class="action">
-        <h1 class="mb-8">Shield PAS</h1>
-        <p>
-          shielding is the process of moving naked, publicly visible balance on
-          Paseo to your private wallet on Incognitee
-        </p>
-        <div class="mt-8">
-          <form @submit.prevent="submitShieldForm" class="form-container">
-            <label for="shieldAmount" class="mt-8">Amount:</label>
-            <p>available balance {{ accountStore.getPaseoHumanBalance }}</p>
-            <input
-              id="shieldAmount"
-              v-model="shieldAmount"
-              type="number"
-              step="0.01"
-              :min="0.1"
-              :max="
-                (accountStore.paseoBalance - existential_deposit_paseo) /
-                  Math.pow(10, 10) -
-                0.1
-              "
-              required
-            />
-            <p>fee: 16 mPAS for Paseo, 0.175% for Incognitee</p>
-            <button type="submit" class="btn btn_gradient">shield</button>
-          </form>
-        </div>
-        <button @click="closeShieldOverlay" class="mt-8">cancel</button>
-      </div>
-    </div>
-    <div v-if="showUnshieldOverlay" class="action-overlay">
-      <div class="action">
-        <h1 class="mb-8">Unshield PAS</h1>
-        <p>
-          unshielding is the process of moving funds from your private balance
-          on Incognitee to publicly visible (naked) Paseo
-        </p>
-        <div class="mt-8">
-          <form @submit.prevent="submitUnshieldForm" class="form-container">
-            <label for="recipientAddress">Recipient:</label>
-            <input
-              id="recipientAddress"
-              v-model="recipientAddress"
-              type="text"
-              required
-            />
-            <UButton
-              class="btn btn_gradient"
-              @click="setRecipientAddressToSelf"
+
+    <TransitionRoot as="template" :show="showShieldOverlay">
+      <Dialog class="relative z-20" @close="closeShieldOverlay">
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div
+            class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+          />
+        </TransitionChild>
+
+        <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+          <div
+            class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
+          >
+            <TransitionChild
+              as="template"
+              enter="ease-out duration-300"
+              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enter-to="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leave-from="opacity-100 translate-y-0 sm:scale-100"
+              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              to myself
-            </UButton>
-            <UButton class="btn btn_gradient" @click="openScanOverlay">
-              scan QR
-            </UButton>
-            <label for="unshieldAmount" class="mt-8">Amount:</label>
-            <p>
-              available balance {{ accountStore.getIncogniteeHumanBalance }}
-            </p>
-            <p>
-              for optimal k-anonymity, we advise you to unshield exactly 10 PAS
-              at the time. In the future we will provide a score including
-              timing and popular amounts to enhance unlinkability of your
-              actions
-            </p>
-            <input
-              id="unshieldAmount"
-              v-model="unshieldAmount"
-              type="number"
-              step="0.1"
-              :min="1.1"
-              :max="accountStore.incogniteeBalance / Math.pow(10, 10) - 0.1"
-              required
-            />
-            <p>fee: 30m PAS for incognitee</p>
-            <button type="submit" class="btn btn_gradient">unshield</button>
-          </form>
-        </div>
-        <button @click="closeUnshieldOverlay" class="mt-8">cancel</button>
-      </div>
-    </div>
-    <div v-if="showReceiveOverlay" class="action-overlay">
-      <div class="action">
-        <h1 class="mb-8">Receive</h1>
-        <div class="qrcode-container">
-          <qrcode class="qrcode" :value="accountStore.getAddress"></qrcode>
-        </div>
-        <div class="mt-3">
-          <p>your address:</p>
-          <span style="word-break: break-word; overflow-wrap: break-word">
-            <code>{{ accountStore.getAddress }}</code
-            ><br />
-            <button @click="copyOwnAddressToClipboard">⧉</button>
-          </span>
-        </div>
-        <button @click="closeReceiveOverlay" class="mt-8">cancel</button>
-      </div>
-    </div>
-    <div v-if="showSendOverlay" class="action-overlay">
-      <div class="action">
-        <h1 class="mb-8">Send</h1>
-        <div class="mt-8">
-          <form @submit.prevent="submitSendForm" class="form-container">
-            <label for="recipientAddress">Recipient:</label>
-            <input
-              id="recipientAddress"
-              v-model="recipientAddress"
-              type="text"
-              required
-            />
-            <UButton class="btn btn_gradient" @click="openScanOverlay">
-              scan QR
-            </UButton>
-            <label for="sendAmount" class="mt-8">Amount:</label>
-            <p>
-              available balance {{ accountStore.getIncogniteeHumanBalance }}
-            </p>
-            <input
-              id="sendAmount"
-              v-model="sendAmount"
-              type="number"
-              step="0.01"
-              :min="0.1"
-              :max="accountStore.incogniteeBalance / Math.pow(10, 10) - 0.1"
-              required
-            />
-            <p>fee: 10m PAS for incognitee</p>
-            <button type="submit" class="btn btn_gradient">transfer</button>
-          </form>
-        </div>
-        <button @click="closeSendOverlay" class="mt-8">cancel</button>
-      </div>
-    </div>
-    <div v-if="showScanOverlay" class="action-overlay">
-      <div class="action">
-        <h1 class="mb-8">Scan QR code</h1>
+              <DialogPanel
+                class="w-full relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
+              >
+                <div class="mt-3 text-center sm:mt-5">
+                  <DialogTitle
+                    as="h3"
+                    class="text-base font-semibold leading-6 text-gray-900"
+                    >Shield PAS
+                  </DialogTitle>
 
-        <div class="qrcode-container">
-          <qrcode-stream @detect="onDecode"></qrcode-stream>
+                  <p class="text-sm text-gray-500 text-left my-4">
+                    Shielding is the process of moving naked, publicly visible
+                    balance on Paseo to your private wallet on Incognitee.
+                  </p>
+
+                  <form @submit.prevent="submitShieldForm">
+                    <div class="mt-10">
+                      <div class="flex justify-between items-center">
+                        <label
+                          for="sendAmount"
+                          class="text-sm font-medium leading-6 text-gray-900"
+                          >Amount</label
+                        >
+
+                        <span class="text-xs text-gray-500"
+                          >Available balance:
+                          {{ accountStore.getPaseoHumanBalance }}</span
+                        >
+                      </div>
+                      <input
+                        id="shieldAmount"
+                        v-model="shieldAmount"
+                        type="number"
+                        step="0.01"
+                        :min="0.1"
+                        :max="
+                          (accountStore.paseoBalance -
+                            existential_deposit_paseo) /
+                            Math.pow(10, 10) -
+                          0.1
+                        "
+                        required
+                        class="w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                      />
+                      <div class="text-right">
+                        <span class="text-xs text-gray-500"
+                          >Fee: 16 mPAS for Paseo, 0.175% for Incognitee</span
+                        >
+                      </div>
+                      <div class="mt-5 sm:mt-6">
+                        <button
+                          type="submit"
+                          class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                        >
+                          Shield
+                        </button>
+                      </div>
+                    </div>
+                  </form>
+                </div>
+                <div class="mt-20 sm:mt-6">
+                  <button
+                    type="button"
+                    class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                    @click="closeShieldOverlay"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
         </div>
-        <div></div>
-        <button @click="closeScanOverlay" class="mt-8">cancel</button>
-      </div>
-    </div>
-    <div v-if="showNewWalletOverlay">
-      <TransitionRoot as="template" :show="open">
-        <Dialog class="relative z-10" @close="open = false">
-          <TransitionChild
-            as="template"
-            enter="ease-out duration-300"
-            enter-from="opacity-0"
-            enter-to="opacity-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100"
-            leave-to="opacity-0"
+      </Dialog>
+    </TransitionRoot>
+
+    <TransitionRoot
+      as="template"
+      :show="showUnshieldOverlay && !showScanOverlay"
+    >
+      <Dialog class="relative z-10" @close="closeUnshieldOverlay">
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div
+            class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+          />
+        </TransitionChild>
+
+        <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+          <div
+            class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
           >
-            <div
-              class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
-            />
-          </TransitionChild>
-
-          <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
-            <div
-              class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
+            <TransitionChild
+              as="template"
+              enter="ease-out duration-300"
+              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enter-to="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leave-from="opacity-100 translate-y-0 sm:scale-100"
+              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <TransitionChild
-                as="template"
-                enter="ease-out duration-300"
-                enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enter-to="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leave-from="opacity-100 translate-y-0 sm:scale-100"
-                leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              <DialogPanel
+                class="w-full relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
               >
-                <DialogPanel
-                  class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
-                >
-                  <div>
-                    <div
-                      class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100"
-                    >
-                      <CheckIcon
-                        class="h-6 w-6 text-green-600"
-                        aria-hidden="true"
+                <div class="mt-3 text-center sm:mt-5">
+                  <DialogTitle
+                    as="h3"
+                    class="text-base font-semibold leading-6 text-gray-900"
+                    >Unshield PAS
+                  </DialogTitle>
+                  <div class="mt-10">
+                    <p class="text-sm text-gray-500 text-left my-4">
+                      Unshielding is the process of moving funds from your
+                      private balance on Incognitee to publicly visible (naked)
+                      Paseo.
+                    </p>
+                  </div>
+                  <form @submit.prevent="submitUnshieldForm">
+                    <div class="mt-5">
+                      <div class="flex justify-between items-center">
+                        <label
+                          for="recipientAddress"
+                          class="text-sm font-medium leading-6 text-gray-900"
+                          >Recipient</label
+                        >
+                      </div>
+                      <input
+                        id="recipientAddress"
+                        v-model="recipientAddress"
+                        type="text"
+                        required
+                        class="w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
                       />
-                    </div>
-                    <div class="mt-3 text-center sm:mt-5">
-                      <DialogTitle
-                        as="h3"
-                        class="text-base font-semibold leading-6 text-gray-900"
-                        >New Wallet!
-                      </DialogTitle>
-                      <div class="mt-2">
-                        <p class="text-sm text-gray-500">
-                          We have created a new wallet for you.
-                        </p>
-                        <div class="bg-slate-200 rounded-lg my-4 p-4">
-                          <span
-                            style="
-                              word-break: break-word;
-                              overflow-wrap: break-word;
-                            "
-                          >
-                            <code>{{ accountStore.getAddress }}</code>
-                          </span>
-                        </div>
+
+                      <div class="flex justify-between space-x-4 mt-5 sm:mt-6">
                         <button
                           type="button"
                           class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
-                          @click="copyOwnAddressToClipboard"
+                          @click="setRecipientAddressToSelf"
                         >
-                          Copy your address
+                          To myself
                         </button>
-                        <p class="text-sm text-gray-500 mt-4 text-left">
-                          In order to keep your wallet, please store a bookmark
-                          to the current url which includes your secret
-                          <strong>NOW</strong>. (i.e. type Ctrl+D to bookmark
-                          this page). If you lose the bookmark, you will lose
-                          access to your wallet. If you share your personal url
-                          with others, they can spend your funds. The purpose of
-                          this demo is not security but optimal user experience
-                          for testing purposes.
-                        </p>
-                        <p class="text-sm text-gray-500 text-left my-4">
-                          You will have zero funds. Please tap "Get free PAS
-                          tokens from faucet" and go to Paseo Faucet to get your
-                          first PAS tokens.
-                        </p>
-
-                        <a
-                          href="https://faucet.polkadot.io/paseo"
-                          target="_blank"
+
+                        <button
+                          type="button"
+                          class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                          @click="openScanOverlay"
                         >
-                          <button
-                            type="button"
-                            class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
-                          >
-                            Get free PAS tokens from faucet
-                          </button>
-                        </a>
+                          Scan QR Code
+                        </button>
+                      </div>
+
+                      <p class="text-sm text-gray-500 text-left mt-10">
+                        For optimal k-anonymity, we advise you to unshield
+                        exactly 10 PAS at the time. In the future we will
+                        provide a score including timing and popular amounts to
+                        enhance unlinkability of your actions.
+                      </p>
+                      <div class="flex justify-between items-center mt-5">
+                        <label
+                          for="unshieldAmount"
+                          class="text-sm font-medium leading-6 text-gray-900"
+                          >Amount</label
+                        >
+
+                        <span class="text-xs text-gray-500"
+                          >Available balance:
+                          {{ accountStore.getIncogniteeHumanBalance }}</span
+                        >
+                      </div>
+                      <input
+                        id="unshieldAmount"
+                        v-model="unshieldAmount"
+                        type="number"
+                        step="0.1"
+                        :min="1.1"
+                        :max="
+                          accountStore.incogniteeBalance / Math.pow(10, 10) -
+                          0.1
+                        "
+                        required
+                        class="w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                      />
+                      <!-- Fee description -->
+                      <div class="text-right">
+                        <span class="text-xs text-gray-500"
+                          >Fee: 30m PAS for Incognitee</span
+                        >
+                      </div>
+                      <div class="mt-5 sm:mt-6">
+                        <button
+                          type="submit"
+                          class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                        >
+                          Unshield
+                        </button>
                       </div>
                     </div>
+                  </form>
+                </div>
+                <div class="mt-20 sm:mt-6">
+                  <button
+                    type="button"
+                    class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                    @click="closeUnshieldOverlay"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
+    <TransitionRoot as="template" :show="showReceiveOverlay">
+      <Dialog class="relative z-10" @close="closeReceiveOverlay">
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div
+            class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+          />
+        </TransitionChild>
+
+        <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+          <div
+            class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
+          >
+            <TransitionChild
+              as="template"
+              enter="ease-out duration-300"
+              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enter-to="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leave-from="opacity-100 translate-y-0 sm:scale-100"
+              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <DialogPanel
+                class="w-full relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
+              >
+                <div class="mt-3 text-center sm:mt-5">
+                  <DialogTitle
+                    as="h3"
+                    class="text-base font-semibold leading-6 text-gray-900"
+                    >Receive
+                  </DialogTitle>
+
+                  <div class="mt-6 qrcode-container">
+                    <qrcode :value="accountStore.getAddress"></qrcode>
                   </div>
-                  <div class="mt-5 sm:mt-6">
-                    <button
-                      type="button"
-                      class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
-                      @click="closeNewWalletOverlay"
+                  <div
+                    class="mt-5 text-sm font-medium leading-6 text-gray-900 font-semibold"
+                  >
+                    Your address:
+                  </div>
+                  <div class="bg-slate-200 rounded-lg mb-5 p-4 text-black">
+                    <span
+                      style="word-break: break-word; overflow-wrap: break-word"
                     >
-                      Cancel
-                    </button>
+                      <code>{{ accountStore.getAddress }}</code>
+                    </span>
                   </div>
-                </DialogPanel>
-              </TransitionChild>
-            </div>
+                </div>
+                <button
+                  type="button"
+                  class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                  @click="copyOwnAddressToClipboard"
+                >
+                  Copy your address
+                </button>
+                <div class="mt-20 sm:mt-6">
+                  <button
+                    type="button"
+                    class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                    @click="closeReceiveOverlay"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
           </div>
-        </Dialog>
-      </TransitionRoot>
-    </div>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
+    <TransitionRoot as="template" :show="showSendOverlay && !showScanOverlay">
+      <Dialog class="relative z-10" @close="closeSendOverlay">
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div
+            class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+          />
+        </TransitionChild>
+
+        <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+          <div
+            class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
+          >
+            <TransitionChild
+              as="template"
+              enter="ease-out duration-300"
+              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enter-to="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leave-from="opacity-100 translate-y-0 sm:scale-100"
+              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <DialogPanel
+                class="w-full relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
+              >
+                <div class="mt-3 text-center sm:mt-5">
+                  <DialogTitle
+                    as="h3"
+                    class="text-base font-semibold leading-6 text-gray-900"
+                    >Send
+                  </DialogTitle>
+
+                  <form class="mt-5" @submit.prevent="submitSendForm">
+                    <div class="text-left">
+                      <label
+                        for="recipientAddress"
+                        class="text-sm font-medium leading-6 text-gray-900"
+                        >Recipient</label
+                      >
+                      <input
+                        id="recipientAddress"
+                        v-model="recipientAddress"
+                        type="text"
+                        required
+                        class="w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                        placeholder="Recipient"
+                      />
+                    </div>
+
+                    <div class="mt-5 sm:mt-6">
+                      <button
+                        type="button"
+                        class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                        @click="openScanOverlay"
+                      >
+                        Scan QR Code
+                      </button>
+                    </div>
+
+                    <div class="mt-10">
+                      <!-- Label and available balance -->
+                      <div class="flex justify-between items-center">
+                        <label
+                          for="sendAmount"
+                          class="text-sm font-medium leading-6 text-gray-900"
+                          >Amount</label
+                        >
+
+                        <span class="text-xs text-gray-500"
+                          >Available balance:
+                          {{ accountStore.getIncogniteeHumanBalance }}</span
+                        >
+                      </div>
+
+                      <!-- Input field -->
+                      <div>
+                        <input
+                          id="sendAmount"
+                          v-model="sendAmount"
+                          type="number"
+                          step="0.01"
+                          :min="0.1"
+                          :max="
+                            accountStore.incogniteeBalance / Math.pow(10, 10) -
+                            0.1
+                          "
+                          required
+                          class="w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                          placeholder="Amount"
+                        />
+                      </div>
+
+                      <!-- Fee description -->
+                      <div class="text-right">
+                        <span class="text-xs text-gray-500"
+                          >Fee: 10m PAS for Incognitee</span
+                        >
+                      </div>
+                    </div>
+                    <div class="mt-5 sm:mt-6">
+                      <button
+                        type="submit"
+                        class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                      >
+                        Transfer
+                      </button>
+                    </div>
+                  </form>
+                </div>
+                <div class="mt-20 sm:mt-6">
+                  <button
+                    type="button"
+                    class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                    @click="closeSendOverlay"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
+    <TransitionRoot as="template" :show="showScanOverlay">
+      <Dialog class="relative z-20" @close="closeScanOverlay">
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div
+            class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+          />
+        </TransitionChild>
+
+        <div class="fixed inset-0 z-20 w-screen overflow-y-auto">
+          <div
+            class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
+          >
+            <TransitionChild
+              as="template"
+              enter="ease-out duration-300"
+              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enter-to="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leave-from="opacity-100 translate-y-0 sm:scale-100"
+              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <DialogPanel
+                class="w-full relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
+              >
+                <div class="mt-3 text-center sm:mt-5">
+                  <DialogTitle
+                    as="h3"
+                    class="text-base font-semibold leading-6 text-gray-900"
+                    >Scan recipient's QR code
+                  </DialogTitle>
+
+                  <div class="mt-6 qrcode-container">
+                    <qrcode-stream @detect="onDecode"></qrcode-stream>
+                  </div>
+                </div>
+                <div class="mt-20 sm:mt-6">
+                  <button
+                    type="button"
+                    class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                    @click="closeScanOverlay"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
+    <TransitionRoot as="template" :show="showNewWalletOverlay">
+      <Dialog class="relative z-10" @close="closeNewWalletOverlay">
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <div
+            class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+          />
+        </TransitionChild>
+
+        <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+          <div
+            class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
+          >
+            <TransitionChild
+              as="template"
+              enter="ease-out duration-300"
+              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enter-to="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leave-from="opacity-100 translate-y-0 sm:scale-100"
+              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <DialogPanel
+                class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6"
+              >
+                <div>
+                  <div
+                    class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100"
+                  >
+                    <CheckIcon
+                      class="h-6 w-6 text-green-600"
+                      aria-hidden="true"
+                    />
+                  </div>
+                  <div class="mt-3 text-center sm:mt-5">
+                    <DialogTitle
+                      as="h3"
+                      class="text-base font-semibold leading-6 text-gray-900"
+                      >New Wallet!
+                    </DialogTitle>
+                    <div class="mt-2">
+                      <p class="text-sm text-gray-500">
+                        We have created a new wallet for you.
+                      </p>
+                      <div class="bg-slate-200 rounded-lg my-4 p-4 text-black">
+                        <span
+                          style="
+                            word-break: break-word;
+                            overflow-wrap: break-word;
+                          "
+                        >
+                          <code>{{ accountStore.getAddress }}</code>
+                        </span>
+                      </div>
+                      <button
+                        type="button"
+                        class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                        @click="copyOwnAddressToClipboard"
+                      >
+                        Copy your address
+                      </button>
+                      <p class="text-sm text-gray-500 mt-4 text-left">
+                        In order to keep your wallet, please store a bookmark to
+                        the current url which includes your secret
+                        <strong>NOW</strong>. (i.e. type Ctrl+D to bookmark this
+                        page). If you lose the bookmark, you will lose access to
+                        your wallet. If you share your personal url with others,
+                        they can spend your funds. The purpose of this demo is
+                        not security but optimal user experience for testing
+                        purposes.
+                      </p>
+                      <p class="text-sm text-gray-500 text-left my-4">
+                        You will have zero funds. Please tap "Get free PAS
+                        tokens from faucet" and go to Paseo Faucet to get your
+                        first PAS tokens.
+                      </p>
+
+                      <a
+                        href="https://faucet.polkadot.io/paseo"
+                        target="_blank"
+                      >
+                        <button
+                          type="button"
+                          class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                        >
+                          Get free PAS tokens from faucet
+                        </button>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+                <div class="mt-5 sm:mt-6">
+                  <button
+                    type="button"
+                    class="btn btn_gradient inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+                    @click="closeNewWalletOverlay"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+
     <div v-if="showStatusOverlay" class="status-overlay">
       <div class="status">
         <div class="spinner" />
@@ -491,10 +922,12 @@
 </template>
 
 <script setup lang="ts">
-import Polkadot from "@/assets/img/polkadot-logo.svg";
 import Paseo from "@/assets/img/paseo-logo.svg";
+import Polkadot from "@/assets/img/polkadot-logo.svg";
 import USDC from "@/assets/img/usdc-logo.svg";
 
+import { useAccount } from "@/store/account.ts";
+import { useIncognitee } from "@/store/incognitee.ts";
 import {
   Dialog,
   DialogPanel,
@@ -503,21 +936,19 @@ import {
   TransitionRoot,
 } from "@headlessui/vue";
 import { CheckIcon } from "@heroicons/vue/24/outline";
-import { onMounted, ref, watch } from "vue";
+import { ApiPromise, WsProvider } from "@polkadot/api";
+import { Keyring } from "@polkadot/keyring";
+import { formatBalance, hexToU8a, u8aToHex } from "@polkadot/util";
 import {
   cryptoWaitReady,
   mnemonicGenerate,
   mnemonicToMiniSecret,
 } from "@polkadot/util-crypto";
-import { Keyring } from "@polkadot/keyring";
-import { formatBalance, hexToU8a, u8aToHex } from "@polkadot/util";
-import { useRouter } from "vue-router";
-import { useAccount } from "@/store/account.ts";
-import { useIncognitee } from "@/store/incognitee.ts";
-import { ApiPromise, WsProvider } from "@polkadot/api";
 import { useInterval } from "@vueuse/core";
+import { onMounted, ref, watch } from "vue";
 import Qrcode from "vue-qrcode";
 import { QrcodeStream } from "vue-qrcode-reader";
+import { useRouter } from "vue-router";
 
 const router = useRouter();
 const accountStore = useAccount();
@@ -537,6 +968,7 @@ let api: ApiPromise | null = null;
 
 const submitSendForm = () => {
   // Handle the form submission here
+  console.log("submitting send form");
   openStatusOverlay();
   closeSendOverlay();
   sendPrivately();
@@ -825,9 +1257,11 @@ const closeReceiveOverlay = () => {
 };
 const showSendOverlay = ref(false);
 const openSendOverlay = () => {
+  console.log(`openSendOverlay (scanoverlay=${showScanOverlay.value})`);
   showSendOverlay.value = true;
 };
 const closeSendOverlay = () => {
+  console.log("closeSendOverlay");
   showSendOverlay.value = false;
 };
 
@@ -837,6 +1271,7 @@ const openScanOverlay = () => {
   showScanOverlay.value = true;
 };
 const closeScanOverlay = () => {
+  console.log("closeScanOverlay");
   showScanOverlay.value = false;
 };
 const showStatusOverlay = ref(false);