diff --git a/apps/sample-react-app/src/Components/ConnectWalletButton.tsx b/apps/sample-react-app/src/Components/SwitchWalletButton.tsx
similarity index 58%
rename from apps/sample-react-app/src/Components/ConnectWalletButton.tsx
rename to apps/sample-react-app/src/Components/SwitchWalletButton.tsx
index 589abab8..5a2c6319 100644
--- a/apps/sample-react-app/src/Components/ConnectWalletButton.tsx
+++ b/apps/sample-react-app/src/Components/SwitchWalletButton.tsx
@@ -1,17 +1,15 @@
 import type { HTMLChakraProps } from '@chakra-ui/react';
-import { Button, Icon, useDisclosure } from '@chakra-ui/react';
-import { WalletIcon } from '@heroicons/react/24/solid';
+import { useDisclosure } from '@chakra-ui/react';
 import React from 'react';
-import { useWallet } from '@vechain/react-wallet-kit';
+import { ConnectWalletButton, useWallet } from '@vechain/react-wallet-kit';
 import { AccountDetailModal } from './AccountDetailModal';
 import { AddressButton } from './AddressButton';
-import { ConnectWalletModal } from './ConnectWalletModal';
 
-interface ConnectWalletButtonProps {
+interface SwitchWalletButtonProps {
     buttonProps?: HTMLChakraProps<'button'>;
 }
 
-export const ConnectWalletButton: React.FC<ConnectWalletButtonProps> = ({
+export const SwitchWalletButton: React.FC<SwitchWalletButtonProps> = ({
     buttonProps,
 }): React.ReactElement => {
     const { isOpen, onOpen, onClose } = useDisclosure();
@@ -38,16 +36,5 @@ export const ConnectWalletButton: React.FC<ConnectWalletButtonProps> = ({
             </>
         );
 
-    return (
-        <>
-            <ConnectWalletModal isOpen={isOpen} onClose={onClose} />
-            <Button
-                {...buttonProps}
-                leftIcon={<Icon as={WalletIcon} />}
-                onClick={onOpen}
-            >
-                Connect Wallet
-            </Button>
-        </>
-    );
+    return <ConnectWalletButton buttonProps={buttonProps} />;
 };
diff --git a/apps/sample-react-app/src/Components/index.ts b/apps/sample-react-app/src/Components/index.ts
index 2c393926..be36fbcf 100644
--- a/apps/sample-react-app/src/Components/index.ts
+++ b/apps/sample-react-app/src/Components/index.ts
@@ -2,6 +2,6 @@ export * from './AccountDetailBody';
 export * from './AccountDetailModal';
 export * from './AddressButton';
 export * from './AddressIcon';
-export * from './ConnectWalletButton';
+export * from './SwitchWalletButton';
 export * from './ConnectWalletModal';
 export * from './WalletSourceRadio';
diff --git a/apps/sample-react-app/src/Components/layout/NavBar.tsx b/apps/sample-react-app/src/Components/layout/NavBar.tsx
index 8076e345..1790917b 100644
--- a/apps/sample-react-app/src/Components/layout/NavBar.tsx
+++ b/apps/sample-react-app/src/Components/layout/NavBar.tsx
@@ -20,7 +20,7 @@ import { Bars3Icon } from '@heroicons/react/24/solid';
 import { useWallet } from '@vechain/react-wallet-kit';
 import { VechainLogo } from '../../Logos';
 import { AccountDetailBody } from '../AccountDetailBody';
-import { ConnectWalletButton } from '../ConnectWalletButton';
+import { SwitchWalletButton } from '../SwitchWalletButton';
 
 export const NavBar = (): JSX.Element => {
     const bg = useColorModeValue('gray.50', 'gray.900');
@@ -101,7 +101,7 @@ const MobileNavBarDrawer = ({
                                     source={accountState.source}
                                 />
                             ) : (
-                                <ConnectWalletButton />
+                                <SwitchWalletButton />
                             )}
                         </VStack>
                     </VStack>
@@ -114,7 +114,7 @@ const MobileNavBarDrawer = ({
 const NavBarWalletConnect = (): JSX.Element => {
     return (
         <HStack spacing={4}>
-            <ConnectWalletButton />
+            <SwitchWalletButton />
         </HStack>
     );
 };
diff --git a/apps/sample-react-app/src/Screens/components/Welcome.tsx b/apps/sample-react-app/src/Screens/components/Welcome.tsx
index bfd1e88c..78746791 100644
--- a/apps/sample-react-app/src/Screens/components/Welcome.tsx
+++ b/apps/sample-react-app/src/Screens/components/Welcome.tsx
@@ -1,7 +1,7 @@
 import { Button, Heading, HStack, Link, Text, VStack } from '@chakra-ui/react';
 import type { JSX } from 'react';
 import { StyledCard } from '../../Components/shared';
-import { ConnectWalletButton } from '../../Components';
+import { SwitchWalletButton } from '../../Components';
 
 export const Welcome = (): JSX.Element => {
     return (
@@ -18,7 +18,7 @@ export const Welcome = (): JSX.Element => {
                     w="full"
                     wrap="wrap"
                 >
-                    <ConnectWalletButton />
+                    <SwitchWalletButton />
                     <Link
                         href="https://github.com/vechainfoundation/veworld-dapp"
                         isExternal
diff --git a/package.json b/package.json
index d4c2edd7..c0a2ae16 100755
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     ],
     "scripts": {
         "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 node_modules .turbo",
         "dev": "turbo run dev --no-daemon",
diff --git a/packages/react-wallet-kit/package.json b/packages/react-wallet-kit/package.json
index a1a65ca5..a7e9f13d 100644
--- a/packages/react-wallet-kit/package.json
+++ b/packages/react-wallet-kit/package.json
@@ -13,8 +13,11 @@
         "lint": "eslint src --ext .js,.jsx,.ts,.tsx"
     },
     "dependencies": {
+        "@chakra-ui/react": "^2.8.1",
+        "@heroicons/react": "^2.0.18",
         "@vechain/connex": "2.1.0",
         "@vechain/connex-framework": "2.1.0",
+        "@vechain/picasso": "^2.1.1",
         "@vechain/wallet-connect": "*",
         "@vechain/wallet-kit": "*",
         "thor-devkit": "^2.0.9"
diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectWalletModal.tsx b/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectWalletModal.tsx
new file mode 100644
index 00000000..a7664667
--- /dev/null
+++ b/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectWalletModal.tsx
@@ -0,0 +1,171 @@
+import {
+    Alert,
+    AlertIcon,
+    Box,
+    Button,
+    Flex,
+    HStack,
+    Icon,
+    Spinner,
+    Text,
+    useToast,
+    VStack,
+} from '@chakra-ui/react';
+import { LinkIcon, WalletIcon } from '@heroicons/react/24/solid';
+import React, { useCallback, useState } from 'react';
+import { Certificate } from 'thor-devkit';
+import { Dialog } from './Dialog';
+import { WalletSourceRadio } from './WalletSourceRadio';
+import { useConnex, useWallet } from '../../ConnexProvider';
+
+interface ConnectedWalletDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export const ConnectWalletModal: React.FC<ConnectedWalletDialogProps> = ({
+    isOpen,
+    onClose,
+}) => {
+    const header = (
+        <HStack spacing={2}>
+            <Icon as={WalletIcon} />
+            <Text>Connect Wallet</Text>
+        </HStack>
+    );
+
+    return (
+        <Dialog
+            body={<ConnectedWalletBody onClose={onClose} />}
+            header={header}
+            isOpen={isOpen}
+            onClose={onClose}
+        />
+    );
+};
+
+interface ConnectedWalletBodyProps {
+    onClose: () => void;
+}
+
+const ConnectedWalletBody: React.FC<ConnectedWalletBodyProps> = ({
+    onClose,
+}) => {
+    const toast = useToast();
+    const { setAccount } = useWallet();
+    const { vendor } = useConnex();
+
+    const [connectionLoading, setConnectionLoading] = useState(false);
+    const [connectionError, setConnectionError] = useState('');
+
+    const connectToWalletHandler =
+        useCallback(async (): Promise<Certificate> => {
+            const message: Connex.Vendor.CertMessage = {
+                purpose: 'identification',
+                payload: {
+                    type: 'text',
+                    content: 'Sign a certificate to prove your identity',
+                },
+            };
+
+            if (!vendor) throw new Error('Vendor not available');
+
+            const certResponse = await vendor.sign('cert', message).request();
+
+            const cert: Certificate = {
+                purpose: message.purpose,
+                payload: message.payload,
+                domain: certResponse.annex.domain,
+                timestamp: certResponse.annex.timestamp,
+                signer: certResponse.annex.signer,
+                signature: certResponse.signature,
+            };
+
+            Certificate.verify(cert);
+
+            return cert;
+        }, [vendor]);
+
+    const onSuccessfullConnection = useCallback(
+        (cert: Certificate): void => {
+            setAccount(cert.signer);
+            onClose();
+            toast({
+                title: 'Wallet connected.',
+                description: `You've succesfully connected with wallet ${cert.signer}`,
+                status: 'success',
+                position: 'bottom-left',
+                duration: 5000,
+                isClosable: true,
+            });
+        },
+        [toast, setAccount, onClose],
+    );
+
+    const connectHandler = useCallback(async () => {
+        try {
+            setConnectionError('');
+            setConnectionLoading(true);
+
+            const cert = await connectToWalletHandler();
+
+            onSuccessfullConnection(cert);
+        } catch (e) {
+            if (e instanceof Error) {
+                setConnectionError(e.message);
+            } else {
+                setConnectionError('Failed to connect to wallet');
+            }
+        } finally {
+            setConnectionLoading(false);
+        }
+    }, [
+        onSuccessfullConnection,
+        setConnectionError,
+        setConnectionLoading,
+        connectToWalletHandler,
+    ]);
+
+    const connect = useCallback(() => {
+        connectHandler().catch((e) => {
+            throw e;
+        });
+    }, [connectHandler]);
+
+    return (
+        <>
+            <Flex direction="column" gap={8}>
+                <Box>
+                    <Text mb="8px">Wallet</Text>
+                    <WalletSourceRadio />
+                </Box>
+            </Flex>
+            <VStack mt={8} spacing={4} w="full">
+                {connectionLoading ? (
+                    <Alert status="warning">
+                        <AlertIcon />
+                        Waiting for wallet approval...
+                    </Alert>
+                ) : null}
+                {connectionError ? (
+                    <Alert status="error">
+                        <AlertIcon />
+                        {connectionError}
+                    </Alert>
+                ) : null}
+
+                <Button
+                    colorScheme="blue"
+                    disabled={connectionLoading}
+                    leftIcon={
+                        connectionLoading ? <Spinner /> : <Icon as={LinkIcon} />
+                    }
+                    onClick={connect}
+                    w="full"
+                >
+                    {connectionLoading ? 'Connecting...' : 'Connect'}
+                </Button>
+            </VStack>
+        </>
+    );
+};
diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Components/Dialog.tsx b/packages/react-wallet-kit/src/ConnectWalletButton/Components/Dialog.tsx
new file mode 100644
index 00000000..e1fb5abf
--- /dev/null
+++ b/packages/react-wallet-kit/src/ConnectWalletButton/Components/Dialog.tsx
@@ -0,0 +1,49 @@
+import type { HTMLChakraProps } from '@chakra-ui/react';
+import {
+    Modal,
+    ModalBody,
+    ModalCloseButton,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    ModalOverlay,
+} from '@chakra-ui/react';
+import React from 'react';
+
+interface DialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    header?: React.ReactNode;
+    headerStyle?: HTMLChakraProps<'header'>;
+    body?: React.ReactNode;
+    footer?: React.ReactNode;
+    showCloseButton?: boolean;
+    closeButtonStyle?: HTMLChakraProps<'button'>;
+}
+
+export const Dialog: React.FC<DialogProps> = ({
+    isOpen,
+    onClose,
+    header,
+    headerStyle = {},
+    body,
+    footer,
+    showCloseButton = true,
+    closeButtonStyle = {},
+}) => {
+    return (
+        <Modal isOpen={isOpen} onClose={onClose} trapFocus={false}>
+            <ModalOverlay />
+            <ModalContent>
+                {header ? (
+                    <ModalHeader {...headerStyle}>{header}</ModalHeader>
+                ) : null}
+                {showCloseButton ? (
+                    <ModalCloseButton {...closeButtonStyle} />
+                ) : null}
+                {body ? <ModalBody>{body}</ModalBody> : null}
+                {footer ? <ModalFooter>{footer}</ModalFooter> : null}
+            </ModalContent>
+        </Modal>
+    );
+};
diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Components/RadioCard.tsx b/packages/react-wallet-kit/src/ConnectWalletButton/Components/RadioCard.tsx
new file mode 100644
index 00000000..b0012f46
--- /dev/null
+++ b/packages/react-wallet-kit/src/ConnectWalletButton/Components/RadioCard.tsx
@@ -0,0 +1,66 @@
+import type { HTMLChakraProps } from '@chakra-ui/react';
+import { Box, Button, Flex, HStack } from '@chakra-ui/react';
+import React from 'react';
+
+interface RadioCardProps extends HTMLChakraProps<'button'> {
+    children: React.ReactNode;
+    selected: boolean;
+    onClick: () => void;
+}
+
+export const RadioCard: React.FC<RadioCardProps> = ({
+    children,
+    selected,
+    onClick,
+    ...props
+}) => {
+    return (
+        <Button
+            shadow={selected ? 'outline' : 'none'}
+            variant="outline"
+            w="full"
+            {...props}
+        >
+            <HStack
+                justify="space-between"
+                onClick={onClick}
+                spacing={2}
+                w="full"
+            >
+                {children}
+                <RadioCircle filled={selected} />
+            </HStack>
+        </Button>
+    );
+};
+
+interface RadioCircleProps extends HTMLChakraProps<'div'> {
+    filled?: boolean;
+}
+
+const RadioCircle: React.FC<RadioCircleProps> = ({
+    filled = false,
+    ...props
+}) => {
+    return (
+        <Flex
+            align="center"
+            border="1px solid"
+            borderColor="lightgray"
+            justify="center"
+            p={1}
+            rounded="full"
+            {...props}
+        >
+            <Box
+                bg={filled ? 'blue.500' : 'transparent'}
+                display="block"
+                h={2.5}
+                margin="auto"
+                minW={2.5}
+                rounded="full"
+                w={2.5}
+            />
+        </Flex>
+    );
+};
diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Components/WalletSourceRadio.tsx b/packages/react-wallet-kit/src/ConnectWalletButton/Components/WalletSourceRadio.tsx
new file mode 100644
index 00000000..b163e375
--- /dev/null
+++ b/packages/react-wallet-kit/src/ConnectWalletButton/Components/WalletSourceRadio.tsx
@@ -0,0 +1,111 @@
+import {
+    Box,
+    Flex,
+    HStack,
+    Icon,
+    Image,
+    Text,
+    Tooltip,
+    VStack,
+} from '@chakra-ui/react';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/solid';
+import React, { useCallback } from 'react';
+import type { WalletSource } from '@vechain/wallet-kit';
+import { useWallet } from '../../ConnexProvider';
+import { WalletSources } from '../Constants';
+import { RadioCard } from './RadioCard';
+
+export const WalletSourceRadio: React.FC = () => {
+    const { availableWallets, wallets, setSource, accountState } = useWallet();
+
+    const handleSourceClick = useCallback(
+        (isDisabled: boolean, source: WalletSource) => () => {
+            if (!isDisabled) {
+                setSource(source);
+            }
+        },
+        [setSource],
+    );
+
+    return (
+        <VStack spacing={4} w="full">
+            {wallets.map((source: WalletSource) => {
+                const isDisabled = !availableWallets.includes(source);
+                const isSelected = source === accountState.source;
+
+                return (
+                    <WalletSourceButton
+                        isDisabled={isDisabled}
+                        isSelected={isSelected}
+                        key={source}
+                        onClick={handleSourceClick(isDisabled, source)}
+                        source={source}
+                    />
+                );
+            })}
+        </VStack>
+    );
+};
+
+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}
+        >
+            <HStack spacing={2}>
+                <Image
+                    alt={`${sourceInfo.name}-logo`}
+                    h={35}
+                    objectFit="cover"
+                    rounded="lg"
+                    src={sourceInfo.logo}
+                    w={35}
+                />
+                <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/ConnectWalletButton.tsx b/packages/react-wallet-kit/src/ConnectWalletButton/ConnectWalletButton.tsx
new file mode 100644
index 00000000..3f96366e
--- /dev/null
+++ b/packages/react-wallet-kit/src/ConnectWalletButton/ConnectWalletButton.tsx
@@ -0,0 +1,27 @@
+import type { HTMLChakraProps } from '@chakra-ui/react';
+import { Button, Icon, useDisclosure } from '@chakra-ui/react';
+import { WalletIcon } from '@heroicons/react/24/solid';
+import React from 'react';
+import { ConnectWalletModal } from './Components/ConnectWalletModal';
+
+interface ConnectWalletButtonProps {
+    buttonProps?: HTMLChakraProps<'button'>;
+}
+
+export const ConnectWalletButton: React.FC<ConnectWalletButtonProps> = ({
+    buttonProps,
+}): React.ReactElement => {
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    return (
+        <>
+            <ConnectWalletModal isOpen={isOpen} onClose={onClose} />
+            <Button
+                {...buttonProps}
+                leftIcon={<Icon as={WalletIcon} />}
+                onClick={onOpen}
+            >
+                Connect Wallet
+            </Button>
+        </>
+    );
+};
diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Constants/Constants.ts b/packages/react-wallet-kit/src/ConnectWalletButton/Constants/Constants.ts
new file mode 100644
index 00000000..8bb8651c
--- /dev/null
+++ b/packages/react-wallet-kit/src/ConnectWalletButton/Constants/Constants.ts
@@ -0,0 +1,27 @@
+import { WalletSource } from '@vechain/wallet-kit';
+
+interface SourceInfo {
+    name: string;
+    logo: string;
+}
+
+const baseLogoUrl = `${process.env.PUBLIC_URL}/images/logo`;
+
+export const WalletSources: Record<WalletSource, SourceInfo> = {
+    [WalletSource.WalletConnect]: {
+        name: 'Wallet Connect',
+        logo: `${baseLogoUrl}/wallet-connect-logo.png`,
+    },
+    [WalletSource.VeWorldExtension]: {
+        name: 'VeWorld Extension',
+        logo: `${baseLogoUrl}/veworld_black.png`,
+    },
+    [WalletSource.Sync]: {
+        name: 'Sync',
+        logo: `${baseLogoUrl}/sync.png`,
+    },
+    [WalletSource.Sync2]: {
+        name: 'Sync 2',
+        logo: `${baseLogoUrl}/sync2.png`,
+    },
+};
diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Constants/index.ts b/packages/react-wallet-kit/src/ConnectWalletButton/Constants/index.ts
new file mode 100644
index 00000000..a719bffa
--- /dev/null
+++ b/packages/react-wallet-kit/src/ConnectWalletButton/Constants/index.ts
@@ -0,0 +1 @@
+export * from './Constants';
diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/index.ts b/packages/react-wallet-kit/src/ConnectWalletButton/index.ts
new file mode 100644
index 00000000..f0725a9c
--- /dev/null
+++ b/packages/react-wallet-kit/src/ConnectWalletButton/index.ts
@@ -0,0 +1 @@
+export * from './ConnectWalletButton';
diff --git a/packages/react-wallet-kit/src/index.tsx b/packages/react-wallet-kit/src/index.tsx
index a9e4b854..efd9ac66 100644
--- a/packages/react-wallet-kit/src/index.tsx
+++ b/packages/react-wallet-kit/src/index.tsx
@@ -3,3 +3,4 @@ import * as React from 'react';
 
 export * from './ConnexProvider';
 export * from './types';
+export * from './ConnectWalletButton';