diff --git a/apps/sample-vue-app/src/components/ConnectWalletModal.vue b/apps/sample-vue-app/src/components/ConnectWalletModal.vue
index 48a09b1c..e9602f39 100644
--- a/apps/sample-vue-app/src/components/ConnectWalletModal.vue
+++ b/apps/sample-vue-app/src/components/ConnectWalletModal.vue
@@ -14,6 +14,7 @@
 
                 <section id="modalDescription" class="modal-body">
                     <slot name="current">{{ account }}</slot>
+                    <br />
                     <slot name="current">{{ source }}</slot>
 
                     <ul class="radio-list">
@@ -21,24 +22,41 @@
                             <input
                                 id="sync2"
                                 v-model="source"
-                                name="walletSource"
                                 type="radio"
                                 value="sync2"
-                                @change="connect('sync2')"
+                                @change="connectWallet('sync2')"
                             />
                             <label for="sync2">Sync2</label>
                         </li>
-
                         <li>
                             <input
                                 id="veworld-extension"
+                                v-model="source"
                                 type="radio"
-                                @change="connect('veworld-extension')"
+                                value="veworld-extension"
+                                @change="connectWallet('veworld-extension')"
                             />
                             <label for="veworld-extension">VeWorld</label>
                         </li>
+                        <li>
+                            <input
+                                id="wallet-connect"
+                                v-model="source"
+                                type="radio"
+                                value="wallet-connect"
+                                @change="connectWallet('wallet-connect')"
+                            />
+                            <label for="wallet-connect">Wallet Connect</label>
+                        </li>
                     </ul>
                 </section>
+
+                <!-- Footer Section -->
+                <footer class="modal-footer">
+                    <button class="disconnect-button" @click="disconnect">
+                        Disconnect
+                    </button>
+                </footer>
             </div>
         </div>
     </transition>
@@ -47,20 +65,17 @@
 <script lang="ts">
 import type { WalletSource } from '@vechain/wallet-kit';
 import { defineComponent } from 'vue';
-import {
-    injectConnex,
-    injectWalletActions,
-    injectWalletState,
-} from '@/connex/injections';
+import { injectWalletActions, injectWalletState } from '@/connex/injections';
 
 export default defineComponent({
     setup() {
-        const { vendor } = injectConnex();
         const { source, account } = injectWalletState();
-        const { updateSource, updateAccount } = injectWalletActions();
+        const { updateSource, updateAccount, connect, disconnect } =
+            injectWalletActions();
 
         return {
-            vendor,
+            connect,
+            disconnect,
             account,
             source,
             updateSource,
@@ -71,8 +86,12 @@ export default defineComponent({
     watch: {
         source: {
             immediate: true,
-            handler(source: WalletSource) {
-                console.log('source', source);
+            async handler(source: WalletSource | null) {
+                if (source) {
+                    const res = await this.connect();
+
+                    this.updateAccount(res.account);
+                }
             },
         },
     },
@@ -84,20 +103,12 @@ export default defineComponent({
             this.$emit('close');
         },
 
-        async connect(source: WalletSource) {
-            this.updateSource(source);
+        async connectWallet(source: WalletSource) {
+            if (source !== this.source) {
+                this.disconnect();
+            }
 
-            const res = await this.vendor
-                .sign('cert', {
-                    purpose: 'identification',
-                    payload: {
-                        content: 'Hello World!',
-                        type: 'text',
-                    },
-                })
-                .request();
-
-            this.updateAccount(res.annex.signer);
+            this.updateSource(source);
         },
     },
 });
@@ -173,4 +184,41 @@ export default defineComponent({
     color: #333;
     cursor: pointer;
 }
+
+.modal-footer {
+    padding: 15px;
+    display: flex;
+    justify-content: flex-end; /* Adjust alignment as needed */
+    background-color: #4aae9b;
+    border-radius: 0 0 10px 10px;
+}
+
+.modal-footer button {
+    /* Style your footer button here */
+    background-color: #4aae9b;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+.modal-footer button:hover {
+    background-color: #357a72;
+}
+
+.disconnect-button {
+    /* Style for the Disconnect button */
+    background-color: #e74c3c;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+    border-radius: 20px; /* Rounded border */
+    transition: background-color 0.3s; /* Smooth color transition on hover */
+}
+
+.disconnect-button:hover {
+    background-color: #c0392b;
+}
 </style>
diff --git a/apps/sample-vue-app/src/connex/ConnexProvider.vue b/apps/sample-vue-app/src/connex/ConnexProvider.vue
index a124dec9..818dcfea 100644
--- a/apps/sample-vue-app/src/connex/ConnexProvider.vue
+++ b/apps/sample-vue-app/src/connex/ConnexProvider.vue
@@ -12,6 +12,7 @@ import {
     WalletStateSymbol,
 } from '@/connex/keys';
 import { WalletActions, WalletState } from '@/connex/types';
+import { WalletConnectOptions } from '@vechain/wallet-connect';
 
 const initWallets = (hasWcOptions: boolean) => {
     const wallets: WalletSource[] = ['sync2'];
@@ -31,6 +32,16 @@ const initWallets = (hasWcOptions: boolean) => {
     return wallets;
 };
 
+const walletConnectOptions: WalletConnectOptions = {
+    projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
+    metadata: {
+        name: 'Sample VeChain dApp',
+        description: 'A sample VeChain dApp',
+        url: window.location.origin,
+        icons: [`${window.location.origin}/images/logo/my-dapp.png`],
+    },
+};
+
 export default defineComponent({
     setup() {
         const walletState: WalletState = reactive<WalletState>({
@@ -48,6 +59,7 @@ export default defineComponent({
         const connex = new MultiWalletConnex({
             nodeUrl: 'https://mainnet.vechain.org/',
             onDisconnected,
+            walletConnectOptions,
         });
 
         const updateAccount = (addr: string) => {
@@ -64,9 +76,16 @@ export default defineComponent({
             vendor: connex.vendor,
         };
 
+        const disconnect = () => {
+            connex.wallet.disconnect();
+            walletState.source = null;
+            walletState.account = null;
+        };
         const walletActions: WalletActions = {
             updateAccount,
             updateSource,
+            disconnect,
+            connect: connex.wallet.connect,
         };
 
         provide(ConnexSymbol, readonly(_connex));
diff --git a/apps/sample-vue-app/src/connex/types.d.ts b/apps/sample-vue-app/src/connex/types.d.ts
index 5eb31446..21d69065 100644
--- a/apps/sample-vue-app/src/connex/types.d.ts
+++ b/apps/sample-vue-app/src/connex/types.d.ts
@@ -1,4 +1,5 @@
 import { WalletSource } from '@vechain/wallet-kit';
+import { ConnectResponse } from '@vechain/wallet-kit/src/types';
 
 type WalletState = {
     wallets: WalletSource[];
@@ -10,4 +11,6 @@ type WalletState = {
 type WalletActions = {
     updateAccount: (account: string) => void;
     updateSource: (source: WalletSource) => void;
+    connect: () => Promise<ConnectResponse>;
+    disconnect: () => void;
 };