diff --git a/apps/sample-react-app/package.json b/apps/sample-react-app/package.json
index c5692e0b..9e5cb767 100644
--- a/apps/sample-react-app/package.json
+++ b/apps/sample-react-app/package.json
@@ -44,6 +44,7 @@
         "@vechain/hardhat-web3": "^0.1.4",
         "@vechain/picasso": "^2.1.1",
         "@vechain/react-wallet-kit": "*",
+        "@vechain/vanilla-wallet-kit": "*",
         "@vechain/wallet-connect": "*",
         "@vechain/wallet-kit": "*",
         "@vechain/web3-providers-connex": "^1.1.2",
diff --git a/apps/sample-react-app/public/images/logo/sync.png b/apps/sample-react-app/public/images/logo/sync.png
deleted file mode 100644
index c0248675..00000000
Binary files a/apps/sample-react-app/public/images/logo/sync.png and /dev/null differ
diff --git a/apps/sample-react-app/public/images/logo/sync2.png b/apps/sample-react-app/public/images/logo/sync2.png
deleted file mode 100644
index a3ec7952..00000000
Binary files a/apps/sample-react-app/public/images/logo/sync2.png and /dev/null differ
diff --git a/apps/sample-react-app/public/images/logo/veWorld.png b/apps/sample-react-app/public/images/logo/veWorld.png
deleted file mode 100644
index 73e830c8..00000000
Binary files a/apps/sample-react-app/public/images/logo/veWorld.png and /dev/null differ
diff --git a/apps/sample-react-app/public/images/logo/vechain.png b/apps/sample-react-app/public/images/logo/vechain.png
deleted file mode 100644
index 6f12941e..00000000
Binary files a/apps/sample-react-app/public/images/logo/vechain.png and /dev/null differ
diff --git a/apps/sample-react-app/public/images/logo/vechain_white.png b/apps/sample-react-app/public/images/logo/vechain_white.png
deleted file mode 100644
index 8978093e..00000000
Binary files a/apps/sample-react-app/public/images/logo/vechain_white.png and /dev/null differ
diff --git a/apps/sample-react-app/public/images/logo/veworld_black.png b/apps/sample-react-app/public/images/logo/veworld_black.png
deleted file mode 100644
index e03f9f1d..00000000
Binary files a/apps/sample-react-app/public/images/logo/veworld_black.png and /dev/null differ
diff --git a/apps/sample-react-app/public/images/logo/wallet-connect-logo.png b/apps/sample-react-app/public/images/logo/wallet-connect-logo.png
deleted file mode 100644
index 24a9d885..00000000
Binary files a/apps/sample-react-app/public/images/logo/wallet-connect-logo.png and /dev/null differ
diff --git a/apps/sample-react-app/src/Components/SwitchWalletButton.tsx b/apps/sample-react-app/src/Components/SwitchWalletButton.tsx
index 5a2c6319..ea0a034f 100644
--- a/apps/sample-react-app/src/Components/SwitchWalletButton.tsx
+++ b/apps/sample-react-app/src/Components/SwitchWalletButton.tsx
@@ -14,22 +14,20 @@ export const SwitchWalletButton: React.FC<SwitchWalletButtonProps> = ({
 }): React.ReactElement => {
     const { isOpen, onOpen, onClose } = useDisclosure();
 
-    const {
-        accountState: { address, source },
-    } = useWallet();
+    const { account, source } = useWallet();
 
-    if (address && source)
+    if (account && source)
         return (
             <>
                 <AccountDetailModal
-                    address={address}
+                    address={account}
                     isOpen={isOpen}
                     onClose={onClose}
                     source={source}
                 />
                 <AddressButton
                     {...buttonProps}
-                    address={address}
+                    address={account}
                     onClick={onOpen}
                     showCopyIcon={false}
                 />
diff --git a/apps/sample-react-app/src/Components/layout/NavBar.tsx b/apps/sample-react-app/src/Components/layout/NavBar.tsx
index 1790917b..432bf320 100644
--- a/apps/sample-react-app/src/Components/layout/NavBar.tsx
+++ b/apps/sample-react-app/src/Components/layout/NavBar.tsx
@@ -18,7 +18,6 @@ import type { JSX } from 'react';
 import React from 'react';
 import { Bars3Icon } from '@heroicons/react/24/solid';
 import { useWallet } from '@vechain/react-wallet-kit';
-import { VechainLogo } from '../../Logos';
 import { AccountDetailBody } from '../AccountDetailBody';
 import { SwitchWalletButton } from '../SwitchWalletButton';
 
@@ -49,9 +48,7 @@ export const NavBar = (): JSX.Element => {
 const DesktopNavBar = (): JSX.Element => {
     return (
         <>
-            <Box h="30px">
-                <VechainLogo />
-            </Box>
+            <Box h="30px" />
             <NavBarWalletConnect />
         </>
     );
@@ -62,9 +59,7 @@ const MobileNavBar = (): JSX.Element => {
     return (
         <>
             <MobileNavBarDrawer isOpen={isOpen} onClose={onClose} />
-            <Box h="30px">
-                <VechainLogo />
-            </Box>
+            <Box h="30px" />
             <IconButton
                 aria-label="light"
                 fontSize="20px"
@@ -84,7 +79,7 @@ const MobileNavBarDrawer = ({
     isOpen,
     onClose,
 }: MobileNavBarDrawerProps): JSX.Element => {
-    const { accountState, disconnect } = useWallet();
+    const { account, source, disconnect } = useWallet();
 
     return (
         <Drawer isOpen={isOpen} onClose={onClose} placement="right">
@@ -94,11 +89,11 @@ const MobileNavBarDrawer = ({
                     <VStack h="full" justifyContent="space-between" w="full">
                         <VStack alignItems="flex-start" spacing={4} w="full">
                             <Text>Connected Wallet</Text>
-                            {accountState.address && accountState.source ? (
+                            {account && source ? (
                                 <AccountDetailBody
-                                    accountAddress={accountState.address}
+                                    accountAddress={account}
                                     disconnectWallet={disconnect}
-                                    source={accountState.source}
+                                    source={source}
                                 />
                             ) : (
                                 <SwitchWalletButton />
diff --git a/apps/sample-react-app/src/Logos/Logo.tsx b/apps/sample-react-app/src/Logos/Logo.tsx
index 7e15008d..9304e678 100644
--- a/apps/sample-react-app/src/Logos/Logo.tsx
+++ b/apps/sample-react-app/src/Logos/Logo.tsx
@@ -1,36 +1,17 @@
 import type { HTMLChakraProps } from '@chakra-ui/react';
-import { Image, useColorModeValue } from '@chakra-ui/react';
+import { Image } from '@chakra-ui/react';
 import React from 'react';
+import { VeWorldLogo as VWLogo } from '@vechain/vanilla-wallet-kit';
 
 type IIMage = HTMLChakraProps<'img'>;
 
-export const VechainLogo: React.FC<IIMage> = ({
-    ...props
-}): React.ReactElement => {
-    const lightModeUrl = `${process.env.PUBLIC_URL}/images/logo/vechain.png`;
-    const darkModeUrl = `${process.env.PUBLIC_URL}/images/logo/vechain_white.png`;
-    const logoUrl = useColorModeValue(lightModeUrl, darkModeUrl);
-    return (
-        <Image
-            alt="Vechain logo"
-            h="full"
-            objectFit="cover"
-            src={logoUrl}
-            {...props}
-        />
-    );
-};
-
 export const VeWorldLogo: React.FC<IIMage> = ({ ...props }) => {
-    const lightModeUrl = `${process.env.PUBLIC_URL}/images/logo/veWorld.png`;
-    const darkModeUrl = `${process.env.PUBLIC_URL}/images/logo/veworld_black.png`;
-    const logoUrl = useColorModeValue(lightModeUrl, darkModeUrl);
     return (
         <Image
             alt="VeWorld logo"
             h="full"
             objectFit="cover"
-            src={logoUrl}
+            src={VWLogo}
             {...props}
         />
     );
diff --git a/apps/sample-react-app/src/Screens/components/Counter.tsx b/apps/sample-react-app/src/Screens/components/Counter.tsx
index 97b56f0c..adc696fd 100644
--- a/apps/sample-react-app/src/Screens/components/Counter.tsx
+++ b/apps/sample-react-app/src/Screens/components/Counter.tsx
@@ -18,7 +18,7 @@ import { useCounter } from '../../Hooks/useCounter';
 import { AddressButton } from '../../Components';
 
 export const Counter = (): JSX.Element => {
-    const { accountState } = useWallet();
+    const { account } = useWallet();
     const { count, increment, status, address, error } = useCounter();
     const toast = useToast();
 
@@ -40,9 +40,7 @@ export const Counter = (): JSX.Element => {
         return (
             <Button
                 disabled={
-                    !accountState.address ||
-                    status === 'pending' ||
-                    status === 'in-wallet'
+                    !account || status === 'pending' || status === 'in-wallet'
                 }
                 leftIcon={<Icon as={ArrowUpIcon} />}
                 onClick={incrementCounter}
@@ -50,7 +48,7 @@ export const Counter = (): JSX.Element => {
                 Increment
             </Button>
         );
-    }, [accountState.address, incrementCounter, status]);
+    }, [account, incrementCounter, status]);
 
     const message = useMemo(() => {
         switch (status) {
diff --git a/apps/sample-vue-app/src/App.vue b/apps/sample-vue-app/src/App.vue
index e2e69e10..667e9fc4 100644
--- a/apps/sample-vue-app/src/App.vue
+++ b/apps/sample-vue-app/src/App.vue
@@ -5,37 +5,18 @@
             <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 { defineComponent, ref } from 'vue';
+import { defineComponent } from 'vue';
 import ConnexProvider from '@/connex/ConnexProvider.vue';
 
 export default defineComponent({
     components: {
         ConnexProvider,
     },
-
-    setup() {
-        const isModalVisible = ref(false);
-
-        const showModal = () => {
-            isModalVisible.value = true;
-        };
-
-        const closeModal = () => {
-            isModalVisible.value = false;
-        };
-
-        return {
-            isModalVisible,
-            showModal,
-            closeModal,
-        };
-    },
 });
 </script>
 
diff --git a/apps/sample-vue-app/src/connex/ConnexProvider.vue b/apps/sample-vue-app/src/connex/ConnexProvider.vue
index bf1d5d6b..08590563 100644
--- a/apps/sample-vue-app/src/connex/ConnexProvider.vue
+++ b/apps/sample-vue-app/src/connex/ConnexProvider.vue
@@ -1,9 +1,9 @@
 <script lang="ts">
 import { defineComponent, provide, reactive, readonly, toRefs } from 'vue';
 import {
+    ConnectResponse,
     MultiWalletConnex,
     WalletSource,
-    WalletSources,
 } from '@vechain/wallet-kit';
 import type Connex from '@vechain/connex';
 import {
@@ -46,32 +46,42 @@ const walletConnectOptions: WalletConnectOptions = {
 export default defineComponent({
     setup() {
         const walletState: WalletState = reactive<WalletState>({
-            wallets: WalletSources,
-            availableWallets: initWallets(true),
+            availableWallets: initWallets(!!walletConnectOptions),
             source: null,
             account: null,
         });
 
-        const onDisconnected = () => {
-            walletState.account = null;
-            walletState.source = null;
-        };
-
         const connex = new MultiWalletConnex({
             nodeUrl: 'https://mainnet.vechain.org/',
-            onDisconnected,
             walletConnectOptions,
         });
 
+        const onDisconnected = () => {
+            walletState.source = null;
+            walletState.account = null;
+        };
+
+        const onSourceChanged = (source: WalletSource | null) => {
+            walletState.source = source;
+        };
+
+        connex.wallet.onDisconnected(onDisconnected);
+        connex.wallet.onSourceChanged(onSourceChanged);
+
         configureThorModal(connex);
 
-        const updateAccount = (addr: string) => {
+        const setAccount = (addr: string) => {
             walletState.account = addr;
         };
 
-        const updateSource = (source: WalletSource) => {
+        const setSource = (source: WalletSource) => {
             connex.wallet.setSource(source);
-            walletState.source = source;
+        };
+
+        const connect = async (): Promise<ConnectResponse> => {
+            const res = await connex.wallet.connect();
+            walletState.account = res.account;
+            return res;
         };
 
         const _connex: Connex = {
@@ -84,11 +94,12 @@ export default defineComponent({
             walletState.source = null;
             walletState.account = null;
         };
+
         const walletActions: WalletActions = {
-            updateAccount,
-            updateSource,
+            setAccount,
+            setSource,
             disconnect,
-            connect: connex.wallet.connect,
+            connect,
         };
 
         provide(ConnexSymbol, readonly(_connex));
diff --git a/apps/sample-vue-app/src/connex/injections.ts b/apps/sample-vue-app/src/connex/injections.ts
index d05ca970..78ec2740 100644
--- a/apps/sample-vue-app/src/connex/injections.ts
+++ b/apps/sample-vue-app/src/connex/injections.ts
@@ -7,12 +7,33 @@ import {
 } from '@/connex/keys';
 import { WalletActions, WalletState } from '@/connex/types';
 
+const NOT_SETUP = new Error('`ConnexProvider` not setup properly');
+
+const defaultState: WalletState = {
+    account: null,
+    source: null,
+    availableWallets: [],
+};
+
+const defaultActions: WalletActions = {
+    setAccount: () => {
+        throw NOT_SETUP;
+    },
+    setSource: () => {
+        throw NOT_SETUP;
+    },
+    connect: () => Promise.reject(NOT_SETUP),
+    disconnect: () => {
+        throw NOT_SETUP;
+    },
+};
+
 const injectConnex = (): Connex => inject<Connex>(ConnexSymbol, {} as Connex);
 
 const injectWalletState = (): WalletState =>
-    inject(WalletStateSymbol, {} as WalletState);
+    inject(WalletStateSymbol, defaultState);
 
 const injectWalletActions = (): WalletActions =>
-    inject(WalletActionsSymbol, {} as WalletActions);
+    inject(WalletActionsSymbol, defaultActions);
 
 export { injectConnex, injectWalletState, injectWalletActions };
diff --git a/apps/sample-vue-app/src/connex/types.d.ts b/apps/sample-vue-app/src/connex/types.d.ts
index 21d69065..bfad5e71 100644
--- a/apps/sample-vue-app/src/connex/types.d.ts
+++ b/apps/sample-vue-app/src/connex/types.d.ts
@@ -1,16 +1,14 @@
-import { WalletSource } from '@vechain/wallet-kit';
-import { ConnectResponse } from '@vechain/wallet-kit/src/types';
+import { ConnectResponse, WalletSource } from '@vechain/wallet-kit';
 
 type WalletState = {
-    wallets: WalletSource[];
     availableWallets: WalletSource[];
     source: WalletSource | null;
     account: string | null;
 };
 
 type WalletActions = {
-    updateAccount: (account: string) => void;
-    updateSource: (source: WalletSource) => void;
+    setAccount: (account: string) => void;
+    setSource: (source: WalletSource) => void;
     connect: () => Promise<ConnectResponse>;
     disconnect: () => void;
 };
diff --git a/packages/react-wallet-kit/package.json b/packages/react-wallet-kit/package.json
index d1a89024..9eb81aef 100644
--- a/packages/react-wallet-kit/package.json
+++ b/packages/react-wallet-kit/package.json
@@ -19,6 +19,7 @@
         "@vechain/connex": "2.1.0",
         "@vechain/connex-framework": "2.1.0",
         "@vechain/picasso": "^2.1.1",
+        "@vechain/vanilla-wallet-kit": "*",
         "@vechain/wallet-connect": "*",
         "@vechain/wallet-kit": "*",
         "thor-devkit": "^2.0.9"
diff --git a/packages/react-wallet-kit/src/AccountReducer.ts b/packages/react-wallet-kit/src/AccountReducer.ts
deleted file mode 100644
index f19c40b1..00000000
--- a/packages/react-wallet-kit/src/AccountReducer.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { WalletSource } from '@vechain/wallet-kit';
-import type { AccountState } from './types';
-
-const ACCOUNT_KEY = 'sample-app@account';
-const WALLET_SOURCE_KEY = 'sample-app@wallet-source';
-
-export type AccountAction =
-    | { type: 'set-address'; payload: { address: string; persist: boolean } }
-    | {
-          type: 'set-wallet-source';
-          payload: { source: WalletSource; persist: boolean };
-      }
-    | { type: 'clear' };
-
-export const defaultAccountState: AccountState = {
-    address: localStorage.getItem(ACCOUNT_KEY),
-    source: localStorage.getItem(WALLET_SOURCE_KEY) as WalletSource,
-};
-
-export const accountReducer = (
-    state: AccountState,
-    action: AccountAction,
-): AccountState => {
-    switch (action.type) {
-        case 'set-address': {
-            const { address, persist } = action.payload;
-            if (persist) {
-                localStorage.setItem(ACCOUNT_KEY, address);
-            }
-            return { ...state, address };
-        }
-        case 'set-wallet-source': {
-            const { source, persist } = action.payload;
-            if (persist) {
-                localStorage.setItem(WALLET_SOURCE_KEY, source);
-            }
-            return { ...state, source };
-        }
-        case 'clear':
-            localStorage.removeItem(ACCOUNT_KEY);
-            localStorage.removeItem(WALLET_SOURCE_KEY);
-            return { address: null, source: null };
-    }
-};
diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectWalletModal.tsx b/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectWalletModal.tsx
index 666c1393..562d0356 100644
--- a/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectWalletModal.tsx
+++ b/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectWalletModal.tsx
@@ -49,7 +49,7 @@ interface ConnectedWalletBodyProps {
 const ConnectedWalletBody: React.FC<ConnectedWalletBodyProps> = ({
     onClose,
 }) => {
-    const { setAccount, connect } = useWallet();
+    const { connect } = useWallet();
 
     const [connectionLoading, setConnectionLoading] = useState(false);
     const [connectionError, setConnectionError] = useState('');
@@ -59,9 +59,8 @@ const ConnectedWalletBody: React.FC<ConnectedWalletBodyProps> = ({
             setConnectionError('');
             setConnectionLoading(true);
 
-            const { account } = await connect();
+            await connect();
 
-            setAccount(account);
             onClose();
         } catch (e) {
             if (e instanceof Error) {
@@ -72,13 +71,7 @@ const ConnectedWalletBody: React.FC<ConnectedWalletBodyProps> = ({
         } finally {
             setConnectionLoading(false);
         }
-    }, [
-        connect,
-        onClose,
-        setAccount,
-        setConnectionError,
-        setConnectionLoading,
-    ]);
+    }, [connect, onClose, setConnectionError, setConnectionLoading]);
 
     const _connect = useCallback(() => {
         connectHandler().catch(() => {
diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Components/WalletSourceRadio.tsx b/packages/react-wallet-kit/src/ConnectWalletButton/Components/WalletSourceRadio.tsx
index b163e375..00e8e625 100644
--- a/packages/react-wallet-kit/src/ConnectWalletButton/Components/WalletSourceRadio.tsx
+++ b/packages/react-wallet-kit/src/ConnectWalletButton/Components/WalletSourceRadio.tsx
@@ -1,14 +1,4 @@
-import {
-    Box,
-    Flex,
-    HStack,
-    Icon,
-    Image,
-    Text,
-    Tooltip,
-    VStack,
-} from '@chakra-ui/react';
-import { ExclamationTriangleIcon } from '@heroicons/react/24/solid';
+import { HStack, Image, Text, VStack } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 import type { WalletSource } from '@vechain/wallet-kit';
 import { useWallet } from '../../ConnexProvider';
@@ -16,30 +6,26 @@ import { WalletSources } from '../Constants';
 import { RadioCard } from './RadioCard';
 
 export const WalletSourceRadio: React.FC = () => {
-    const { availableWallets, wallets, setSource, accountState } = useWallet();
+    const { availableWallets, setSource, source } = useWallet();
 
     const handleSourceClick = useCallback(
-        (isDisabled: boolean, source: WalletSource) => () => {
-            if (!isDisabled) {
-                setSource(source);
-            }
+        (_source: WalletSource) => () => {
+            setSource(_source);
         },
         [setSource],
     );
 
     return (
         <VStack spacing={4} w="full">
-            {wallets.map((source: WalletSource) => {
-                const isDisabled = !availableWallets.includes(source);
-                const isSelected = source === accountState.source;
+            {availableWallets.map((_source: WalletSource) => {
+                const isSelected = _source === source;
 
                 return (
                     <WalletSourceButton
-                        isDisabled={isDisabled}
                         isSelected={isSelected}
-                        key={source}
-                        onClick={handleSourceClick(isDisabled, source)}
-                        source={source}
+                        key={_source}
+                        onClick={handleSourceClick(_source)}
+                        source={_source}
                     />
                 );
             })}
@@ -50,24 +36,17 @@ export const WalletSourceRadio: React.FC = () => {
 interface WalletSourceButtonProps {
     source: WalletSource;
     isSelected: boolean;
-    isDisabled: boolean;
     onClick: () => void;
 }
 
 const WalletSourceButton: React.FC<WalletSourceButtonProps> = ({
     source,
     isSelected,
-    isDisabled,
     onClick,
 }) => {
     const sourceInfo = WalletSources[source];
     return (
-        <RadioCard
-            disabled={isDisabled}
-            onClick={onClick}
-            position="relative"
-            selected={isSelected}
-        >
+        <RadioCard onClick={onClick} position="relative" selected={isSelected}>
             <HStack spacing={2}>
                 <Image
                     alt={`${sourceInfo.name}-logo`}
@@ -79,33 +58,6 @@ const WalletSourceButton: React.FC<WalletSourceButtonProps> = ({
                 />
                 <Text color="primary">{sourceInfo.name}</Text>
             </HStack>
-            {isDisabled ? (
-                <Box position="absolute" right={-2} top={-2} zIndex={10}>
-                    <SourceNotDetectedIcon source={source} />
-                </Box>
-            ) : null}
         </RadioCard>
     );
 };
-
-interface SourceNotDetectedIconProps {
-    source: WalletSource;
-}
-
-const SourceNotDetectedIcon: React.FC<SourceNotDetectedIconProps> = ({
-    source,
-}) => {
-    const sourceInfo = WalletSources[source];
-
-    return (
-        <Tooltip label={`${sourceInfo.name} not detected`} placement="top">
-            <Flex alignItems="center" bg="orange.500" p={1} rounded="full">
-                <Icon
-                    as={ExclamationTriangleIcon}
-                    color="white"
-                    fontSize="md"
-                />
-            </Flex>
-        </Tooltip>
-    );
-};
diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Constants/Constants.ts b/packages/react-wallet-kit/src/ConnectWalletButton/Constants/Constants.ts
index c7414c80..0e4729db 100644
--- a/packages/react-wallet-kit/src/ConnectWalletButton/Constants/Constants.ts
+++ b/packages/react-wallet-kit/src/ConnectWalletButton/Constants/Constants.ts
@@ -1,27 +1,31 @@
 import type { WalletSource } from '@vechain/wallet-kit';
+import {
+    Sync2Logo,
+    SyncLogo,
+    VeWorldLogo,
+    WalletConnectLogo,
+} from '@vechain/vanilla-wallet-kit';
 
 interface SourceInfo {
     name: string;
     logo: string;
 }
 
-const baseLogoUrl = `${process.env.PUBLIC_URL || ''}/images/logo`;
-
 export const WalletSources: Record<WalletSource, SourceInfo> = {
     'wallet-connect': {
         name: 'Wallet Connect',
-        logo: `${baseLogoUrl}/wallet-connect-logo.png`,
+        logo: WalletConnectLogo,
     },
     'veworld-extension': {
         name: 'VeWorld Extension',
-        logo: `${baseLogoUrl}/veworld_black.png`,
+        logo: VeWorldLogo,
     },
     sync: {
         name: 'Sync',
-        logo: `${baseLogoUrl}/sync.png`,
+        logo: SyncLogo,
     },
     sync2: {
         name: 'Sync 2',
-        logo: `${baseLogoUrl}/sync2.png`,
+        logo: Sync2Logo,
     },
 };
diff --git a/packages/react-wallet-kit/src/ConnexProvider.tsx b/packages/react-wallet-kit/src/ConnexProvider.tsx
index e7c7a73d..03b6edcd 100644
--- a/packages/react-wallet-kit/src/ConnexProvider.tsx
+++ b/packages/react-wallet-kit/src/ConnexProvider.tsx
@@ -2,15 +2,27 @@ import React, {
     createContext,
     useCallback,
     useContext,
+    useEffect,
     useMemo,
-    useReducer,
+    useState,
 } from 'react';
-import type { ConnexInstance } from '@vechain/wallet-kit';
-import { MultiWalletConnex, WalletSources } from '@vechain/wallet-kit';
-import type { WalletSource } from '@vechain/wallet-kit/src/types';
-import { accountReducer, defaultAccountState } from './AccountReducer';
+import type { WalletSource } from '@vechain/wallet-kit';
+import { MultiWalletConnex } from '@vechain/wallet-kit';
 import type { ConnexContext, ConnexProviderOptions } from './types';
 
+const STORAGE_PREFIX = '@vechain/wallet-kit';
+const persist = (key: 'source' | 'account', value: string): void => {
+    localStorage.setItem(`${STORAGE_PREFIX}${key}`, value);
+};
+
+const retrieve = (key: 'source' | 'account'): string | null => {
+    return localStorage.getItem(`${STORAGE_PREFIX}${key}`);
+};
+
+const remove = (key: 'source' | 'account'): void => {
+    localStorage.removeItem(`${STORAGE_PREFIX}${key}`);
+};
+
 /**
  * Context
  */
@@ -22,74 +34,105 @@ export const ConnexProvider: React.FC<ConnexProviderOptions> = ({
     walletConnectOptions,
     persistState = false,
 }): React.ReactElement => {
-    const [accountState, dispatch] = useReducer(
-        accountReducer,
-        defaultAccountState,
+    const [account, setAccount] = useState<string | null>(
+        persistState ? retrieve('account') : null,
+    );
+    const [source, setSource] = useState<WalletSource | null>(
+        persistState ? (retrieve('source') as WalletSource) : null,
     );
 
-    const onDisconnected = useCallback((): void => {
-        dispatch({ type: 'clear' });
-    }, []);
-
-    const connex: ConnexInstance = useMemo(
+    const connex = useMemo(
         () =>
             new MultiWalletConnex({
                 nodeUrl: nodeOptions.node,
                 genesis: nodeOptions.network,
                 walletConnectOptions,
-                onDisconnected,
             }),
-
-        [
-            nodeOptions.node,
-            nodeOptions.network,
-            walletConnectOptions,
-            onDisconnected,
-        ],
+        [nodeOptions.network, nodeOptions.node, walletConnectOptions],
     );
 
-    const disconnect = useCallback((): void => {
-        dispatch({ type: 'clear' });
+    /**
+     * Run at start - Set wallet source if it was persisted
+     */
+    useEffect(() => {
+        const instanceSource = connex.wallet.getSource();
+
+        if (source && !instanceSource) {
+            connex.wallet.setSource(source);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
-        void connex.wallet.disconnect();
-    }, [connex]);
+    const availableWallets: WalletSource[] = useMemo(() => {
+        return connex.wallet.getAvailableSources();
+    }, [connex.wallet]);
 
-    const availableWallets = useMemo(() => {
-        const wallets: WalletSource[] = ['sync2'];
+    useEffect(() => {
+        const onDisconnected = (): void => {
+            setAccount(null);
+            setSource(null);
 
-        if (window.vechain) {
-            wallets.push('veworld-extension');
-        }
+            if (persistState) {
+                remove('account');
+                remove('source');
+            }
+        };
 
-        if (window.connex) {
-            wallets.push('sync');
-        }
+        const onSourceChanged = (_src: WalletSource | null): void => {
+            setSource(_src);
 
-        if (walletConnectOptions) {
-            wallets.push('wallet-connect');
+            if (persistState) {
+                _src ? persist('source', _src) : remove('source');
+            }
+        };
+
+        connex.wallet.onDisconnected(onDisconnected);
+        connex.wallet.onSourceChanged(onSourceChanged);
+
+        return () => {
+            connex.wallet.removeOnDisconnected(onDisconnected);
+            connex.wallet.removeOnSourceChanged(onSourceChanged);
+        };
+    }, [connex.wallet, persistState]);
+
+    const connect = useCallback(async () => {
+        const res = await connex.wallet.connect();
+
+        setAccount(res.account);
+
+        if (persistState) {
+            persist('account', res.account);
         }
 
-        return wallets;
-    }, [walletConnectOptions]);
+        return res;
+    }, [persistState, connex.wallet, setAccount]);
+
+    const disconnect = useCallback(async () => {
+        await connex.wallet.disconnect();
 
-    const setSource = useCallback(
-        (wallet: WalletSource): void => {
-            connex.wallet.setSource(wallet);
+        setAccount(null);
+        setSource(null);
 
-            dispatch({
-                type: 'set-wallet-source',
-                payload: { source: wallet, persist: persistState },
-            });
+        if (persistState) {
+            remove('account');
+            remove('source');
+        }
+    }, [persistState, connex.wallet]);
+
+    const updateSource = useCallback(
+        (_source: WalletSource) => {
+            connex.wallet.setSource(_source);
         },
-        [connex, persistState],
+        [connex.wallet],
     );
 
-    const setAccount = useCallback(
-        (address: string) => {
-            dispatch({
-                type: 'set-address',
-                payload: { address, persist: persistState },
-            });
+    const updateAccount = useCallback(
+        (_account: string) => {
+            setAccount(_account);
+
+            if (persistState) {
+                persist('account', _account);
+            }
         },
         [persistState],
     );
@@ -101,22 +144,25 @@ export const ConnexProvider: React.FC<ConnexProviderOptions> = ({
                 vendor: connex.vendor,
             },
             wallet: {
-                setSource,
-                setAccount,
-                availableWallets,
-                wallets: WalletSources,
-                accountState,
+                setSource: updateSource,
+                setAccount: updateAccount,
                 disconnect,
-                connect: connex.wallet.connect,
+                connect,
+                availableWallets,
+                account,
+                source,
             },
         };
     }, [
-        accountState,
-        connex,
-        setAccount,
-        setSource,
-        availableWallets,
+        connex.thor,
+        connex.vendor,
+        updateSource,
+        updateAccount,
         disconnect,
+        connect,
+        availableWallets,
+        account,
+        source,
     ]);
 
     return <Context.Provider value={context}>{children}</Context.Provider>;
diff --git a/packages/react-wallet-kit/src/types.ts b/packages/react-wallet-kit/src/types.ts
index 694e3dc8..4fe591b3 100644
--- a/packages/react-wallet-kit/src/types.ts
+++ b/packages/react-wallet-kit/src/types.ts
@@ -1,8 +1,7 @@
 import type { Options } from '@vechain/connex';
 import type React from 'react';
 import type { WalletConnectOptions } from '@vechain/wallet-connect';
-import type { WalletSource } from '@vechain/wallet-kit';
-import type { ConnectResponse } from '@vechain/wallet-kit/src/types';
+import type { ConnectResponse, WalletSource } from '@vechain/wallet-kit';
 
 export interface AccountState {
     address: string | null;
@@ -38,9 +37,9 @@ export interface ConnexContext {
         setSource: (source: WalletSource) => void;
         setAccount: (account: string) => void;
         availableWallets: WalletSource[];
-        wallets: WalletSource[];
-        accountState: AccountState;
         disconnect: () => void;
         connect: () => Promise<ConnectResponse>;
+        account: string | null;
+        source: WalletSource | null;
     };
 }
diff --git a/packages/vanilla-wallet-kit/src/client.ts b/packages/vanilla-wallet-kit/src/client.ts
index 09e67d00..a3deaa94 100644
--- a/packages/vanilla-wallet-kit/src/client.ts
+++ b/packages/vanilla-wallet-kit/src/client.ts
@@ -39,6 +39,8 @@ class VechainWalletKitModal {
             this.walletKit.connex.wallet
                 .connect()
                 .then(({ account }) => {
+                    // eslint-disable-next-line no-console
+                    console.log('account connected', account);
                     this.walletKit.account = account;
                 })
                 .catch((error) => {
diff --git a/packages/vanilla-wallet-kit/src/index.ts b/packages/vanilla-wallet-kit/src/index.ts
index 4f1cce44..e3af4e0c 100644
--- a/packages/vanilla-wallet-kit/src/index.ts
+++ b/packages/vanilla-wallet-kit/src/index.ts
@@ -1 +1,2 @@
 export * from './client';
+export * from './assets';
diff --git a/packages/wallet-connect/package.json b/packages/wallet-connect/package.json
index 537bb748..51476ed1 100644
--- a/packages/wallet-connect/package.json
+++ b/packages/wallet-connect/package.json
@@ -6,9 +6,9 @@
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "scripts": {
-        "build": "tsup src/index.ts --format cjs --dts",
+        "build": "tsup src/index.ts --format cjs,esm --dts",
         "clean": "rm -rf dist .turbo",
-        "dev": "tsup src/index.ts --format cjs --watch --dts",
+        "dev": "tsup src/index.ts --format cjs,esm --watch --dts",
         "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
         "purge": "yarn clean && rm -rf node_modules"
     },
diff --git a/packages/wallet-kit/package.json b/packages/wallet-kit/package.json
index f3619693..2d8e3677 100644
--- a/packages/wallet-kit/package.json
+++ b/packages/wallet-kit/package.json
@@ -2,10 +2,6 @@
     "name": "@vechain/wallet-kit",
     "version": "0.0.0",
     "private": true,
-    "exports": {
-        "import": "./dist/index.mjs",
-        "require": "./dist/index.js"
-    },
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "scripts": {
@@ -20,6 +16,7 @@
         "@vechain/connex-driver": "2.1.0",
         "@vechain/connex-framework": "2.1.0",
         "@vechain/wallet-connect": "*",
+        "events": "^3.3.0",
         "thor-devkit": "^2.0.9"
     },
     "devDependencies": {
diff --git a/packages/wallet-kit/src/connex.ts b/packages/wallet-kit/src/connex.ts
index 0b8189dc..66c6fece 100644
--- a/packages/wallet-kit/src/connex.ts
+++ b/packages/wallet-kit/src/connex.ts
@@ -2,7 +2,7 @@ import { createNoVendor } from '@vechain/connex/esm/driver';
 import { newThor } from '@vechain/connex-framework/dist/thor';
 import type { DriverNoVendor } from '@vechain/connex-driver';
 import { newVendor } from '@vechain/connex-framework';
-import type { ConnexOptions, ConnexWalletManager } from './types';
+import type { ConnexOptions } from './types';
 import { normalizeGenesisBlock } from './genesis';
 import { FullDriver } from './full-driver';
 import { WalletManager } from './wallet-manager';
@@ -10,7 +10,7 @@ import { WalletManager } from './wallet-manager';
 class MultiWalletConnex {
     public readonly thor: Connex.Thor;
     public readonly vendor: Connex.Vendor;
-    public readonly wallet: ConnexWalletManager;
+    public readonly wallet: WalletManager;
 
     constructor(options: ConnexOptions) {
         const { nodeUrl, genesis } = options;
diff --git a/packages/wallet-kit/src/create-wallet.ts b/packages/wallet-kit/src/create-wallet.ts
index 3c6da881..7d1901d5 100644
--- a/packages/wallet-kit/src/create-wallet.ts
+++ b/packages/wallet-kit/src/create-wallet.ts
@@ -11,6 +11,7 @@ import { normalizeGenesisId } from './genesis';
 
 type ICreateWallet = ConnexOptions & {
     source: WalletSource;
+    onDisconnected: () => void;
 };
 
 export const createWallet = ({
diff --git a/packages/wallet-kit/src/index.ts b/packages/wallet-kit/src/index.ts
index f3fdf3e6..caba88af 100644
--- a/packages/wallet-kit/src/index.ts
+++ b/packages/wallet-kit/src/index.ts
@@ -1,13 +1,13 @@
 export * from './connex';
 export * from './wallet';
 export * from './constants';
+export * from './wallet-manager';
 
 export type {
     ConnexOptions,
-    ConnexInstance,
     ConnexWallet,
     WalletSource,
+    ConnectResponse,
     WalletConfig,
     BaseWallet,
-    ConnexWalletManager,
 } from './types';
diff --git a/packages/wallet-kit/src/types.d.ts b/packages/wallet-kit/src/types.d.ts
index 8e398c18..a4a1c20b 100644
--- a/packages/wallet-kit/src/types.d.ts
+++ b/packages/wallet-kit/src/types.d.ts
@@ -28,7 +28,6 @@ export type Genesis = 'main' | 'test' | Connex.Thor.Block;
 interface ConnexOptions {
     nodeUrl: string;
     genesis?: Genesis;
-    onDisconnected?: () => void;
     walletConnectOptions?: WalletConnectOptions;
 }
 
@@ -41,10 +40,6 @@ type BaseWallet = Connex.Signer & {
  */
 type ConnexWallet = BaseWallet & {
     connect: () => Promise<ConnectResponse>;
-    signIn: (
-        msg?: Connex.Vendor.CertMessage,
-        options?: Connex.Signer.CertOptions,
-    ) => Promise<Connex.Vendor.CertResponse>;
 };
 
 export interface ConnectResponse {
@@ -52,21 +47,10 @@ export interface ConnectResponse {
     verified: boolean;
 }
 
-type ConnexWalletManager = ConnexWallet & {
-    setSource: (src: WalletSource) => void;
-    disconnect: () => Promise<void> | void;
-};
-
-type ConnexInstance = Connex & {
-    wallet: ConnexWalletManager;
-};
-
 export type {
     BaseWallet,
     ConnexOptions,
-    ConnexInstance,
     ConnexWallet,
     WalletConfig,
     WalletSource,
-    ConnexWalletManager,
 };
diff --git a/packages/wallet-kit/src/wallet-manager.ts b/packages/wallet-kit/src/wallet-manager.ts
index dab22df5..0db463dd 100644
--- a/packages/wallet-kit/src/wallet-manager.ts
+++ b/packages/wallet-kit/src/wallet-manager.ts
@@ -1,23 +1,23 @@
+import { EventEmitter } from 'node:events';
 import type {
     ConnectResponse,
     ConnexOptions,
     ConnexWallet,
-    ConnexWalletManager,
     WalletSource,
 } from './types';
 import { createWallet } from './create-wallet';
 import { WalletSources } from './wallet';
 
-class WalletManager implements ConnexWalletManager {
-    private wallets: Record<string, ConnexWallet | undefined> = {};
+const DISCONNECTED = 'disconnected';
+const SOURCE_CHANGED = 'source-changed';
 
-    constructor(private readonly connexOptions: ConnexOptions) {}
+class WalletManager {
+    private wallets: Record<string, ConnexWallet | undefined> = {};
 
+    private eventEmitter = new EventEmitter();
     private _source: WalletSource | null = null;
 
-    public get source(): WalletSource | null {
-        return this._source;
-    }
+    constructor(private readonly connexOptions: ConnexOptions) {}
 
     private get wallet(): ConnexWallet {
         const source = this._source;
@@ -33,7 +33,11 @@ class WalletManager implements ConnexWalletManager {
             if (!WalletSources.includes(source))
                 throw new Error(`No wallet found for: ${source}`);
 
-            const opts = { ...this.connexOptions, source };
+            const opts = {
+                ...this.connexOptions,
+                source,
+                onDisconnected: () => this.disconnect(true),
+            };
             wallet = createWallet(opts);
 
             this.wallets[source] = wallet;
@@ -44,23 +48,20 @@ class WalletManager implements ConnexWalletManager {
 
     connect = (): Promise<ConnectResponse> => this.wallet.connect();
 
-    signIn = (
-        msg?: Connex.Vendor.CertMessage,
-        options?: Connex.Signer.CertOptions,
-    ): Promise<Connex.Vendor.CertResponse> => this.wallet.signIn(msg, options);
-
-    disconnect = async (): Promise<void> => {
+    disconnect = async (remote = false): Promise<void> => {
         if (!this._source) {
             return;
         }
 
         const wallet = this.wallets[this._source];
 
-        if (wallet) {
+        if (wallet && !remote) {
             await wallet.disconnect?.();
         }
 
         this._source = null;
+        this.eventEmitter.emit(SOURCE_CHANGED, null);
+        this.eventEmitter.emit(DISCONNECTED);
     };
 
     signTx = (
@@ -91,7 +92,46 @@ class WalletManager implements ConnexWalletManager {
         }
 
         this._source = src;
+        this.eventEmitter.emit(SOURCE_CHANGED, src);
+    };
+
+    getSource = (): WalletSource | null => this._source;
+
+    getAvailableSources = (): WalletSource[] => {
+        const wallets: WalletSource[] = ['sync2'];
+
+        if (window.vechain) {
+            wallets.push('veworld-extension');
+        }
+
+        if (window.connex) {
+            wallets.push('sync');
+        }
+
+        if (this.connexOptions.walletConnectOptions) {
+            wallets.push('wallet-connect');
+        }
+
+        return wallets;
     };
+
+    onDisconnected(listener: () => void): void {
+        this.eventEmitter.on(DISCONNECTED, listener);
+    }
+
+    removeOnDisconnected(listener: () => void): void {
+        this.eventEmitter.off(DISCONNECTED, listener);
+    }
+
+    onSourceChanged(listener: (source: WalletSource | null) => void): void {
+        this.eventEmitter.on(SOURCE_CHANGED, listener);
+    }
+
+    removeOnSourceChanged(
+        listener: (source: WalletSource | null) => void,
+    ): void {
+        this.eventEmitter.off(SOURCE_CHANGED, listener);
+    }
 }
 
 export { WalletManager };
diff --git a/packages/wallet-kit/src/wallets/certificate-wallet.ts b/packages/wallet-kit/src/wallets/certificate-wallet.ts
index e9f98b2a..2d8b02a4 100644
--- a/packages/wallet-kit/src/wallets/certificate-wallet.ts
+++ b/packages/wallet-kit/src/wallets/certificate-wallet.ts
@@ -1,9 +1,6 @@
 import { Certificate } from 'thor-devkit';
 import type { BaseWallet, ConnectResponse, ConnexWallet } from '../types';
-import {
-    DEFAULT_CONNECT_CERT_MESSAGE,
-    DEFAULT_SIGN_IN_MESSAGE,
-} from '../certificates';
+import { DEFAULT_CONNECT_CERT_MESSAGE } from '../certificates';
 
 /**
  * A `ConnexWallet` for wallet's that use a certificate connection
@@ -46,16 +43,6 @@ class CertificateBasedWallet implements ConnexWallet {
     ): Promise<Connex.Vendor.CertResponse> =>
         this.wallet.then((w) => w.signCert(msg, options));
 
-    signIn = (
-        msg?: Connex.Vendor.CertMessage | undefined,
-        options?: Connex.Signer.CertOptions | undefined,
-    ): Promise<Connex.Vendor.CertResponse> => {
-        const _msg = msg || DEFAULT_SIGN_IN_MESSAGE;
-        const _options = options || {};
-
-        return this.signCert(_msg, _options);
-    };
-
     signTx = (
         msg: Connex.Vendor.TxMessage,
         options: Connex.Signer.TxOptions,
diff --git a/packages/wallet-kit/src/wallets/wc-wallet.ts b/packages/wallet-kit/src/wallets/wc-wallet.ts
index d589f5fb..9e4f728a 100644
--- a/packages/wallet-kit/src/wallets/wc-wallet.ts
+++ b/packages/wallet-kit/src/wallets/wc-wallet.ts
@@ -1,6 +1,5 @@
 import type { WCSigner } from '@vechain/wallet-connect';
 import type { ConnectResponse, ConnexWallet } from '../types';
-import { DEFAULT_SIGN_IN_MESSAGE } from '../certificates';
 
 class WCWallet implements ConnexWallet {
     constructor(private readonly signer: WCSigner) {}
@@ -20,16 +19,6 @@ class WCWallet implements ConnexWallet {
     ): Promise<Connex.Vendor.CertResponse> =>
         this.signer.signCert(msg, options);
 
-    signIn = (
-        msg?: Connex.Vendor.CertMessage | undefined,
-        options?: Connex.Signer.CertOptions | undefined,
-    ): Promise<Connex.Vendor.CertResponse> => {
-        const _msg = msg || DEFAULT_SIGN_IN_MESSAGE;
-        const _options = options || {};
-
-        return this.signCert(_msg, _options);
-    };
-
     signTx = (
         msg: Connex.Vendor.TxMessage,
         options: Connex.Signer.TxOptions,