diff --git a/apps/sample-react-app/src/App.tsx b/apps/sample-react-app/src/App.tsx
index 75fd2c3f..10508b6f 100644
--- a/apps/sample-react-app/src/App.tsx
+++ b/apps/sample-react-app/src/App.tsx
@@ -1,7 +1,7 @@
 import reactLogo from './assets/react.svg';
 import viteLogo from '/vite.svg';
 import './App.css';
-import { ConnectWalletButtonWithModal } from '@vechain/dapp-kit-react';
+import { VechainDappConnectKit } from '@vechain/dapp-kit-react';
 
 function App() {
     return (
@@ -20,7 +20,7 @@ function App() {
             </div>
             <h1>Vite + React</h1>
             <div className="card">
-                <ConnectWalletButtonWithModal />
+                <VechainDappConnectKit />
             </div>
             <p className="read-the-docs">
                 Click on the Vite and React logos to learn more
diff --git a/packages/dapp-kit-react/src/Components/VechainDappConnectKit/VechainDappConnectKit.tsx b/packages/dapp-kit-react/src/Components/VechainDappConnectKit/VechainDappConnectKit.tsx
new file mode 100644
index 00000000..d98eeae1
--- /dev/null
+++ b/packages/dapp-kit-react/src/Components/VechainDappConnectKit/VechainDappConnectKit.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import GlobalFonts from '../../../assets/fonts/fonts';
+import { ThemeProvider } from '../../provider/ThemeProvider';
+import { VechainDappConnectKitWithTheme } from './Wrapped/VechainDappConnectKitWrapped';
+
+export const VechainDappConnectKit: React.FC = (): React.ReactElement => {
+    return (
+        <ThemeProvider>
+            <GlobalFonts />
+            <VechainDappConnectKitWithTheme />
+        </ThemeProvider>
+    );
+};
diff --git a/packages/dapp-kit-react/src/Components/VechainDappConnectKit/Wrapped/VechainDappConnectKitWrapped.tsx b/packages/dapp-kit-react/src/Components/VechainDappConnectKit/Wrapped/VechainDappConnectKitWrapped.tsx
new file mode 100644
index 00000000..b747666e
--- /dev/null
+++ b/packages/dapp-kit-react/src/Components/VechainDappConnectKit/Wrapped/VechainDappConnectKitWrapped.tsx
@@ -0,0 +1,22 @@
+import React, { useMemo } from 'react';
+import { createComponent } from '@lit/react';
+import { VechainDappConnectKit as VechainDappConnectKitVanilla } from '@vechain/dapp-kit-ui';
+import { useThemeSelector } from '../../../provider/ThemeProvider';
+
+const VechainDappConnectKitWrapped = () =>
+    createComponent({
+        tagName: 'vwk-vechain-dapp-connect-kit',
+        elementClass: VechainDappConnectKitVanilla,
+        react: React,
+    });
+
+export const VechainDappConnectKitWithTheme: React.FC = () => {
+    const { theme } = useThemeSelector();
+
+    const VechainDappConnectKit = useMemo(
+        () => VechainDappConnectKitWrapped(),
+        [],
+    );
+
+    return <VechainDappConnectKit mode={theme.mode} />;
+};
diff --git a/packages/dapp-kit-react/src/Components/VechainDappConnectKit/index.ts b/packages/dapp-kit-react/src/Components/VechainDappConnectKit/index.ts
new file mode 100644
index 00000000..45ab9aa9
--- /dev/null
+++ b/packages/dapp-kit-react/src/Components/VechainDappConnectKit/index.ts
@@ -0,0 +1 @@
+export * from './VechainDappConnectKit';
diff --git a/packages/dapp-kit-react/src/Components/index.ts b/packages/dapp-kit-react/src/Components/index.ts
index 7ff0f4ee..757462f7 100644
--- a/packages/dapp-kit-react/src/Components/index.ts
+++ b/packages/dapp-kit-react/src/Components/index.ts
@@ -1,3 +1,4 @@
 export * from './ConnectWalletButtonWithModal';
 export * from './ConnectWalletModal';
 export * from './SelectWalletModal';
+export * from './VechainDappConnectKit';
diff --git a/packages/dapp-kit-react/test/helpers/react-test-helpers.tsx b/packages/dapp-kit-react/test/helpers/react-test-helpers.tsx
index 7425dafb..f9c7bae9 100644
--- a/packages/dapp-kit-react/test/helpers/react-test-helpers.tsx
+++ b/packages/dapp-kit-react/test/helpers/react-test-helpers.tsx
@@ -1,8 +1,9 @@
 import {
-    ConnectWalletButtonWithModal,
     ConnectWalletModal,
     DAppKitProvider,
     SelectWalletModal,
+    VechainDappConnectKit,
+    ConnectWalletButtonWithModal,
 } from '../../src';
 import { ThemeProvider } from '../../src/provider/ThemeProvider';
 
@@ -10,6 +11,7 @@ export const wrapper = ({ children }: { children?: React.ReactNode }) => (
     <DAppKitProvider nodeUrl="https://testnet.vechain.org">
         <ThemeProvider>
             {children}
+            <VechainDappConnectKit />
             <ConnectWalletButtonWithModal />
             <SelectWalletModal isOpen={false} />
             <ConnectWalletModal isOpen={false} />
diff --git a/packages/dapp-kit-ui/src/modal.ts b/packages/dapp-kit-ui/src/modal.ts
index 2bbca8ba..f39f454f 100644
--- a/packages/dapp-kit-ui/src/modal.ts
+++ b/packages/dapp-kit-ui/src/modal.ts
@@ -85,8 +85,9 @@ export class DAppKitModal {
     open(): void {
         DAppKitLogger.debug('DAppKitModal', 'opening the modal');
 
-        const existingElement =
-            window.document.querySelector('vwk-connect-modal');
+        const existingElement = window.document.querySelector(
+            'vwk-vechain-dapp-connect-kit',
+        );
 
         if (!existingElement) {
             DAppKitLogger.debug(
@@ -95,7 +96,9 @@ export class DAppKitModal {
                 'creating a new element',
             );
 
-            const element = window.document.createElement('vwk-connect-modal');
+            const element = window.document.createElement(
+                'vwk-vechain-dapp-connect-kit',
+            );
 
             window.document.body.appendChild(element);
         }