diff --git a/components/WalletConnectButton.vue b/components/WalletConnectButton.vue
index 5d0f6815..246fd143 100644
--- a/components/WalletConnectButton.vue
+++ b/components/WalletConnectButton.vue
@@ -4,6 +4,12 @@ const deepLink = ref('')
 const { initProvider, connect: connectWalletConnect } =
   useWalletConnectProvider()
 const { walletConnectProvider: provider } = storeToRefs(useAppStore())
+const { closeModal } = useModal()
+
+const handleClick = async () => {
+  await closeModal()
+  navigateTo(deepLink.value, { external: true })
+}
 
 onMounted(async () => {
   await initProvider()
@@ -22,7 +28,19 @@ onMounted(async () => {
 </script>
 
 <template>
-  <lukso-button variant="secondary" is-full-width is-link :href="deepLink">
+  <lukso-button
+    variant="secondary"
+    is-full-width
+    target="_self"
+    :is-loading="!deepLink ? true : undefined"
+    :loading-text="
+      formatMessage(
+        'modal_connect_wallet_select_provider_connect_mobile_button'
+      )
+    "
+    :disabled="!deepLink ? true : undefined"
+    @click="handleClick"
+  >
     <lukso-icon name="phone-portrait-outline" class="mr-2"></lukso-icon>
     {{
       formatMessage(