diff --git a/apps/sample-vue-app/package.json b/apps/sample-vue-app/package.json
index 29280f7b..a08417c0 100644
--- a/apps/sample-vue-app/package.json
+++ b/apps/sample-vue-app/package.json
@@ -31,6 +31,7 @@
         "root": true
     },
     "dependencies": {
+        "@vechain/vanilla-wallet-kit": "*",
         "@vechain/wallet-kit": "*",
         "core-js": "^3.8.3",
         "node-polyfill-webpack-plugin": "^2.0.1",
diff --git a/apps/sample-vue-app/src/App.vue b/apps/sample-vue-app/src/App.vue
index 9d51d2e9..e2e69e10 100644
--- a/apps/sample-vue-app/src/App.vue
+++ b/apps/sample-vue-app/src/App.vue
@@ -2,24 +2,21 @@
     <ConnexProvider>
         <img alt="Vue logo" src="./assets/logo.png" />
         <div id="app">
-            <button class="btn" type="button" @click="showModal">
-                Open Modal!
-            </button>
-
+            <vwk-connect-button-with-modal
+                mode="DARK"
+            ></vwk-connect-button-with-modal>
             <ConnectWalletModal v-show="isModalVisible" @close="closeModal" />
         </div>
     </ConnexProvider>
 </template>
 
 <script lang="ts">
-import ConnectWalletModal from './components/ConnectWalletModal.vue';
 import { defineComponent, ref } from 'vue';
 import ConnexProvider from '@/connex/ConnexProvider.vue';
 
 export default defineComponent({
     components: {
         ConnexProvider,
-        ConnectWalletModal,
     },
 
     setup() {
diff --git a/apps/sample-vue-app/src/components/ConnectWalletModal.vue b/apps/sample-vue-app/src/components/ConnectWalletModal.vue
deleted file mode 100644
index e9602f39..00000000
--- a/apps/sample-vue-app/src/components/ConnectWalletModal.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<template>
-    <transition name="modal-fade">
-        <div class="modal-backdrop">
-            <div
-                aria-describedby="modalDescription"
-                aria-labelledby="modalTitle"
-                class="modal"
-                role="dialog"
-            >
-                <header id="modalTitle" class="modal-header">
-                    <slot name="header">Connect Wallet</slot>
-                    <button class="btn-close" @click="close">×</button>
-                </header>
-
-                <section id="modalDescription" class="modal-body">
-                    <slot name="current">{{ account }}</slot>
-                    <br />
-                    <slot name="current">{{ source }}</slot>
-
-                    <ul class="radio-list">
-                        <li>
-                            <input
-                                id="sync2"
-                                v-model="source"
-                                type="radio"
-                                value="sync2"
-                                @change="connectWallet('sync2')"
-                            />
-                            <label for="sync2">Sync2</label>
-                        </li>
-                        <li>
-                            <input
-                                id="veworld-extension"
-                                v-model="source"
-                                type="radio"
-                                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>
-</template>
-
-<script lang="ts">
-import type { WalletSource } from '@vechain/wallet-kit';
-import { defineComponent } from 'vue';
-import { injectWalletActions, injectWalletState } from '@/connex/injections';
-
-export default defineComponent({
-    setup() {
-        const { source, account } = injectWalletState();
-        const { updateSource, updateAccount, connect, disconnect } =
-            injectWalletActions();
-
-        return {
-            connect,
-            disconnect,
-            account,
-            source,
-            updateSource,
-            updateAccount,
-        };
-    },
-
-    watch: {
-        source: {
-            immediate: true,
-            async handler(source: WalletSource | null) {
-                if (source) {
-                    const res = await this.connect();
-
-                    this.updateAccount(res.account);
-                }
-            },
-        },
-    },
-
-    emits: ['close'],
-
-    methods: {
-        close() {
-            this.$emit('close');
-        },
-
-        async connectWallet(source: WalletSource) {
-            if (source !== this.source) {
-                this.disconnect();
-            }
-
-            this.updateSource(source);
-        },
-    },
-});
-</script>
-
-<style>
-.modal-backdrop {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: rgba(0, 0, 0, 0.3);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.modal {
-    background: #ffffff;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    max-width: 500px; /* Adjust the width as needed */
-    border-radius: 10px;
-    overflow: hidden;
-}
-
-.modal-header {
-    padding: 15px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: #4aae9b;
-    color: white;
-    border-bottom: 1px solid #4aae9b;
-    border-radius: 10px 10px 0 0;
-}
-
-.modal-body {
-    padding: 20px;
-}
-
-.btn-close {
-    border: none;
-    font-size: 20px;
-    padding: 10px;
-    cursor: pointer;
-    font-weight: bold;
-    color: white;
-    background: transparent;
-}
-
-.btn-close:hover {
-    color: #4aae9b;
-}
-
-.radio-list {
-    list-style: none; /* Remove bullet points */
-    padding: 0;
-}
-
-.radio-list li {
-    margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-}
-
-.radio-list input[type='radio'] {
-    margin-right: 10px;
-}
-
-.radio-list label {
-    font-size: 18px;
-    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 818dcfea..bf1d5d6b 100644
--- a/apps/sample-vue-app/src/connex/ConnexProvider.vue
+++ b/apps/sample-vue-app/src/connex/ConnexProvider.vue
@@ -13,6 +13,7 @@ import {
 } from '@/connex/keys';
 import { WalletActions, WalletState } from '@/connex/types';
 import { WalletConnectOptions } from '@vechain/wallet-connect';
+import { configureThorModal } from '@vechain/vanilla-wallet-kit';
 
 const initWallets = (hasWcOptions: boolean) => {
     const wallets: WalletSource[] = ['sync2'];
@@ -62,6 +63,8 @@ export default defineComponent({
             walletConnectOptions,
         });
 
+        configureThorModal(connex);
+
         const updateAccount = (addr: string) => {
             walletState.account = addr;
         };
diff --git a/apps/sample-vue-app/src/main.ts b/apps/sample-vue-app/src/main.ts
index 684d0421..a9434a40 100644
--- a/apps/sample-vue-app/src/main.ts
+++ b/apps/sample-vue-app/src/main.ts
@@ -1,4 +1,5 @@
 import { createApp } from 'vue';
 import App from './App.vue';
+import '@vechain/vanilla-wallet-kit';
 
 createApp(App).mount('#app');
diff --git a/apps/sample-vue-app/vue.config.js b/apps/sample-vue-app/vue.config.js
index ca20ec40..317e97fc 100644
--- a/apps/sample-vue-app/vue.config.js
+++ b/apps/sample-vue-app/vue.config.js
@@ -12,4 +12,16 @@ module.exports = defineConfig({
             },
         },
     },
+    chainWebpack: (config) => {
+        config.module
+            .rule('vue')
+            .use('vue-loader')
+            .tap((options) => {
+                options.compilerOptions = {
+                    ...options.compilerOptions,
+                    isCustomElement: (tag) => tag.startsWith('vwk-'),
+                };
+                return options;
+            });
+    },
 });
diff --git a/package.json b/package.json
index bbc6251f..4061e474 100755
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
         "build": "turbo run build",
         "build-react-kit": "turbo run build  --filter='@vechain/react-wallet-kit'",
         "build:deps": "turbo build --no-daemon --filter='@vechain/*'",
-        "clean": "npx turbo@latest run clean && rm -rf .turbo .parcel-cache",
+        "clean": "rm -rf .turbo .parcel-cache build && npx turbo@latest run clean",
         "dev": "turbo run dev --no-daemon",
         "format": "prettier --write \"**/*.{ts,tsx,md,json,js,jsx}\"",
         "install:all": "yarn && yarn run build:deps",
diff --git a/packages/vanilla-wallet-kit/package.json b/packages/vanilla-wallet-kit/package.json
index fb46ed68..3f1e7fa2 100644
--- a/packages/vanilla-wallet-kit/package.json
+++ b/packages/vanilla-wallet-kit/package.json
@@ -16,7 +16,7 @@
     "types": "dist/index.d.ts",
     "scripts": {
         "build": "tsup",
-        "clean": "rm -rf dist",
+        "clean": "rm -rf dist .turbo",
         "dev": "parcel index.html --open",
         "format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write",
         "lint": "eslint 'src/**/*.ts'",