diff --git a/app.vue b/app.vue
index 6e4d3e79..0bf3ea41 100644
--- a/app.vue
+++ b/app.vue
@@ -21,7 +21,10 @@ const { addProviderEvents, removeProviderEvents } =
 const { disconnect } = useBaseProvider()
 const { cacheValue } = useCache()
 const { currencyList } = storeToRefs(useCurrencyStore())
-const { initProvider, connect } = useWalletConnectProvider()
+const {
+  initProvider: initWalletConnectProvider,
+  connect: connectWalletConnect,
+} = useWalletConnectProvider()
 const { formatMessage } = useIntl()
 const { gridChainId, tempGrids } = storeToRefs(useGridStore())
 const swHasUpgrade = ref<boolean>(false)
@@ -60,8 +63,8 @@ const setupWeb3Instances = async () => {
 
   // reconnect wallet connect
   if (isWalletConnect.value) {
-    await initProvider()
-    await connect()
+    await initWalletConnectProvider()
+    await connectWalletConnect()
   }
 }
 
diff --git a/components/FollowButton.vue b/components/FollowButton.vue
index dc6ed33c..7384f15f 100644
--- a/components/FollowButton.vue
+++ b/components/FollowButton.vue
@@ -94,7 +94,15 @@ const handleClick = async (event: Event) => {
 
   // when we are not connected, we need to connect first
   if (!isConnected.value) {
-    await connect()
+    try {
+      isPending.value = true
+      await connect()
+    } catch (error) {
+      console.warn(error)
+    } finally {
+      isPending.value = false
+    }
+
     invalidateQueries()
 
     // stop if we want to follow ourselves
diff --git a/components/ModalTemplateConnectWallet.vue b/components/ModalTemplateConnectWallet.vue
index 719e7634..e29a9281 100644
--- a/components/ModalTemplateConnectWallet.vue
+++ b/components/ModalTemplateConnectWallet.vue
@@ -107,7 +107,7 @@ const handleToggleMobile = () => {
         {{ formatMessage('modal_connect_wallet_mobile_scan_text') }}
       </div>
       <WalletConnectQrCode
-        class="flex items-center justify-center pb-6 pt-4"
+        class="flex items-center justify-center"
         @disconnect="handleToggleMobile"
       />
     </div>
diff --git a/components/WalletConnectButton.vue b/components/WalletConnectButton.vue
index bf8aa55d..6584f4c8 100644
--- a/components/WalletConnectButton.vue
+++ b/components/WalletConnectButton.vue
@@ -4,11 +4,19 @@ const deepLink = ref('')
 const { initProvider, connect: connectWalletConnect } =
   useWalletConnectProvider()
 const { walletConnectProvider: provider } = storeToRefs(useAppStore())
+const isLoading = ref(false)
+
+const handleClick = async () => {
+  isLoading.value = true
+  navigateTo(deepLink.value, { external: true })
+}
 
 onMounted(async () => {
   await initProvider()
   provider.value?.on('display_uri', (data: string) => {
-    deepLink.value = walletConnectDeepLinkUrl(data)
+    deepLink.value = walletConnectDeepLinkUrl(data, {
+      withRedirectUrl: true,
+    })
   })
 
   try {
@@ -20,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 || isLoading ? 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(
diff --git a/components/WalletConnectQrCode.vue b/components/WalletConnectQrCode.vue
index 05cc2bde..470ac96f 100644
--- a/components/WalletConnectQrCode.vue
+++ b/components/WalletConnectQrCode.vue
@@ -40,7 +40,9 @@ const generateQrCode = (data: string) => {
   })
 
   if (qrCodeElement.value) {
+    qrCodeElement.value.innerHTML = '<AppLoader />'
     qrCode.append(qrCodeElement.value as HTMLDivElement)
+    qrCodeElement.value.classList.add('animate-fade-in')
   }
 }
 
@@ -69,6 +71,7 @@ onMounted(async () => {
     >
       <div
         ref="qrCodeElement"
+        class="cursor-pointer"
         :style="{
           'min-height': `${size}px`,
         }"
diff --git a/composables/web3-provider/useBaseProvider.ts b/composables/web3-provider/useBaseProvider.ts
index 64d46a3c..5dde7a43 100644
--- a/composables/web3-provider/useBaseProvider.ts
+++ b/composables/web3-provider/useBaseProvider.ts
@@ -1,11 +1,22 @@
 import { INJECTED_PROVIDER } from '@/shared/provider'
 
 const connect = async () => {
-  const { isWalletConnect, isMobile } = storeToRefs(useAppStore())
-  const { connect: connectWalletConnect } = useWalletConnectProvider()
+  const { isWalletConnect, isMobile, walletConnectProvider } =
+    storeToRefs(useAppStore())
+  const {
+    connect: connectWalletConnect,
+    initProvider: initWalletConnectProvider,
+  } = useWalletConnectProvider()
   const { connect: connectBrowserExtension } = useBrowserExtensionProvider()
 
   if (isWalletConnect.value || isMobile.value) {
+    await initWalletConnectProvider()
+    walletConnectProvider.value?.on('display_uri', (data: string) => {
+      const deepLink = walletConnectDeepLinkUrl(data, {
+        withRedirectUrl: true,
+      })
+      navigateTo(deepLink, { external: true })
+    })
     await connectWalletConnect()
     return
   }
diff --git a/utils/__tests__/externalUrls.spec.ts b/utils/__tests__/externalUrls.spec.ts
index 0ffc795b..cb54efd1 100644
--- a/utils/__tests__/externalUrls.spec.ts
+++ b/utils/__tests__/externalUrls.spec.ts
@@ -151,14 +151,24 @@ describe('universalSwapsAssetUrl', () => {
 })
 
 describe('walletConnectDeepLinkUrl', () => {
-  test('should produce proper deep link', () => {
+  test('should produce proper deep link without redirect URL', () => {
     const input =
       'wc:96c935c09bfae76a83d65747651a7e0c77592e3b7aeff8556bc91e9363a86689@2?expiryTimestamp=1728294685&relay-protocol=irn&symKey=8ba498cb98560cb940584b50450e77fe8699c29a5ecf28cbad7ee2f215685815'
     const expectedOutput =
-      'io.universaleverything.universalprofiles://wallet-connect/96c935c09bfae76a83d65747651a7e0c77592e3b7aeff8556bc91e9363a86689@2?expiryTimestamp=1728294685&relay-protocol=irn&symKey=8ba498cb98560cb940584b50450e77fe8699c29a5ecf28cbad7ee2f215685815&redirectUrl=http://localhost:3000/'
+      'io.universaleverything.universalprofiles://wallet-connect/96c935c09bfae76a83d65747651a7e0c77592e3b7aeff8556bc91e9363a86689@2?expiryTimestamp=1728294685&relay-protocol=irn&symKey=8ba498cb98560cb940584b50450e77fe8699c29a5ecf28cbad7ee2f215685815'
     expect(walletConnectDeepLinkUrl(input)).toBe(expectedOutput)
   })
 
+  test('should produce proper deep link with redirect URL', () => {
+    const input =
+      'wc:96c935c09bfae76a83d65747651a7e0c77592e3b7aeff8556bc91e9363a86689@2?expiryTimestamp=1728294685&relay-protocol=irn&symKey=8ba498cb98560cb940584b50450e77fe8699c29a5ecf28cbad7ee2f215685815'
+    const expectedOutput =
+      'io.universaleverything.universalprofiles://wallet-connect/96c935c09bfae76a83d65747651a7e0c77592e3b7aeff8556bc91e9363a86689@2?expiryTimestamp=1728294685&relay-protocol=irn&symKey=8ba498cb98560cb940584b50450e77fe8699c29a5ecf28cbad7ee2f215685815&redirectUrl=http%3A%2F%2Flocalhost%3A3000%2F'
+    expect(walletConnectDeepLinkUrl(input, { withRedirectUrl: true })).toBe(
+      expectedOutput
+    )
+  })
+
   test('throws an error when data is invalid', () => {
     // @ts-expect-error
     expect(() => walletConnectDeepLinkUrl()).toThrow('Invalid URL')
diff --git a/utils/externalUrls.ts b/utils/externalUrls.ts
index 8fbe1bd1..c26f97ff 100644
--- a/utils/externalUrls.ts
+++ b/utils/externalUrls.ts
@@ -147,17 +147,34 @@ export const universalSwapsAssetUrl = (address?: Address) => {
  *
  * @param data
  */
-export const walletConnectDeepLinkUrl = (data: string) => {
+export const walletConnectDeepLinkUrl = (
+  data: string,
+  options?: {
+    withRedirectUrl?: boolean
+  }
+) => {
   if (genericLog.enabled) {
     genericLog(`Wallet Connect link: ${data}`)
   }
 
-  const urlData = new URL(data)
-  const redirectUrl = location.href.replace(
-    '&modalTemplate=ConnectWallet&modalSize=auto',
-    ''
-  )
-  const deepLink = `${MOBILE_APP_DEEP_LINK_PREFIX}://wallet-connect/${urlData.pathname}${urlData.search}&redirectUrl=${redirectUrl}`
+  const dataUrl = new URL(data)
+
+  // add redirectUrl to deep link
+  if (options?.withRedirectUrl) {
+    const redirectUrl = new URL(location.href)
+
+    // remove modal query params so we don't re-open the modal
+    redirectUrl.searchParams.delete('modalTemplate')
+    redirectUrl.searchParams.delete('modalSize')
+
+    // add redirectUrl to dataUrl
+    dataUrl.searchParams.append(
+      'redirectUrl',
+      `${redirectUrl.origin}${redirectUrl.pathname}${redirectUrl.search}`
+    )
+  }
+
+  const deepLink = `${MOBILE_APP_DEEP_LINK_PREFIX}://wallet-connect/${dataUrl.pathname}${dataUrl.search}`
 
   if (genericLog.enabled) {
     genericLog(`Mobile App link: ${deepLink}`)