diff --git a/packages/stylex/.babelrc.js b/packages/stylex/.babelrc.js
index 6eedf3af..24ea7880 100644
--- a/packages/stylex/.babelrc.js
+++ b/packages/stylex/.babelrc.js
@@ -14,6 +14,7 @@ module.exports = {
 					rootDir: path.join(__dirname, '../..')
 				}
 			}
-		]
+		],
+		'@babel/plugin-transform-private-methods'
 	]
 };
diff --git a/packages/stylex/app/_components/home/CTA/CTA.tsx b/packages/stylex/app/_components/home/CTA/CTA.tsx
new file mode 100644
index 00000000..1de3e59b
--- /dev/null
+++ b/packages/stylex/app/_components/home/CTA/CTA.tsx
@@ -0,0 +1,56 @@
+import Button from '@components/theme/Button';
+import Text from '@components/theme/Text';
+import { EFontWeight, ETextAlign, ETextType } from '@components/theme/Text/Text.enum';
+import * as stylex from '@stylexjs/stylex';
+import { FC } from 'react';
+import { EColor, ESize } from 'styles/theme.enum';
+import { colors } from '../../../../styles/theme.stylex';
+
+const SM = '@media only screen and (min-width: 600px)';
+
+const styles = stylex.create({
+	container: {
+		display: 'flex',
+		flexDirection: 'column',
+		justifyContent: 'center',
+		alignItems: 'center',
+		transform: {
+			default: 'scale(0.9)',
+			[SM]: 'scale(1)'
+		}
+	},
+	text: {
+		display: 'flex',
+		flexDirection: 'column',
+		justifyContent: 'center',
+		alignItems: 'center'
+	},
+	button: {
+		marginTop: '32px',
+		color: colors.lightBlue
+	}
+});
+
+const cloneCmd = 'npx create-nextjs-dapp';
+
+const CTA: FC = () => {
+	return (
+		<div {...stylex.props(styles.container)}>
+			<Text
+				type={ETextType.h2}
+				size={ESize.s}
+				color={EColor.gray}
+				weight={EFontWeight.regular}
+				align={ETextAlign.center}
+				style={styles.text}
+			>
+				Start coding is easy as
+				<Button style={styles.button} valueToCopy={cloneCmd + '@latest'}>
+					{cloneCmd}
+				</Button>
+			</Text>
+		</div>
+	);
+};
+
+export { CTA };
diff --git a/packages/stylex/app/_components/home/CTA/index.ts b/packages/stylex/app/_components/home/CTA/index.ts
new file mode 100644
index 00000000..e6c5474f
--- /dev/null
+++ b/packages/stylex/app/_components/home/CTA/index.ts
@@ -0,0 +1 @@
+export { CTA as default } from './CTA';
diff --git a/packages/stylex/app/_components/home/HomePage/HomePage.tsx b/packages/stylex/app/_components/home/HomePage/HomePage.tsx
index 16be91a8..18e0148a 100644
--- a/packages/stylex/app/_components/home/HomePage/HomePage.tsx
+++ b/packages/stylex/app/_components/home/HomePage/HomePage.tsx
@@ -1,5 +1,6 @@
 import * as stylex from '@stylexjs/stylex';
 import { spacing } from '../../../../styles/theme.stylex';
+import CTA from '../CTA';
 import Tagline from '../Tagline';
 import Technologies from '../Technologies';
 
@@ -33,6 +34,8 @@ const HomePage = () => {
 			<Technologies />
 
 			<Tagline />
+
+			<CTA />
 		</main>
 	);
 };
diff --git a/packages/stylex/app/_components/home/Technologies/Technologies.tsx b/packages/stylex/app/_components/home/Technologies/Technologies.tsx
index 36199e2f..2e33f6bf 100644
--- a/packages/stylex/app/_components/home/Technologies/Technologies.tsx
+++ b/packages/stylex/app/_components/home/Technologies/Technologies.tsx
@@ -76,7 +76,8 @@ const styles = stylex.create({
 		width: 'auto',
 		height: {
 			default: '30px',
-			[MD]: '45px'
+			[MD]: '45px',
+			[LG]: '60px'
 		}
 	},
 	link: {
diff --git a/packages/stylex/app/_components/Navbar/Navbar.tsx b/packages/stylex/app/_components/navbar/Navbar/Navbar.tsx
similarity index 81%
rename from packages/stylex/app/_components/Navbar/Navbar.tsx
rename to packages/stylex/app/_components/navbar/Navbar/Navbar.tsx
index 368216f7..8ef37c60 100644
--- a/packages/stylex/app/_components/Navbar/Navbar.tsx
+++ b/packages/stylex/app/_components/navbar/Navbar/Navbar.tsx
@@ -3,7 +3,8 @@ import Text from '@components/theme/Text';
 import { ETextType } from '@components/theme/Text/Text.enum';
 import * as stylex from '@stylexjs/stylex';
 import { FaStar } from 'react-icons/fa';
-import { ESize } from '../../../styles/theme.enum';
+import { ESize } from '../../../../styles/theme.enum';
+import WalletButton from '../WalletButton';
 
 const repoUrl = 'https://github.com/swiiny/create-nextjs-dapp';
 
@@ -15,7 +16,7 @@ const styles = stylex.create({
 		position: 'fixed',
 		top: 0,
 		left: 0,
-		zIndex: 100,
+		zIndex: 10,
 		display: 'flex',
 		width: '100%',
 		padding: {
@@ -35,11 +36,13 @@ const styles = stylex.create({
 	},
 	buttonsContainer: {
 		display: 'flex',
-		alignItems: 'center'
+		alignItems: 'center',
+		gap: '1rem'
 	},
 	button: {
 		display: {
-			default: 'flex'
+			default: 'initial',
+			'@media (max-width: 600px)': 'none'
 		}
 	},
 	icon: {
@@ -55,11 +58,11 @@ const Navbar = () => {
 			</Text>
 
 			<div {...stylex.props(styles.buttonsContainer)}>
-				<Button href={repoUrl} icon={<FaStar size={28} {...stylex.props(styles.icon)} />} style={styles.button}>
+				<Button href={repoUrl} icon={<FaStar size={28} {...stylex.props(styles.icon, styles.button)} />}>
 					Star on Github
 				</Button>
 
-				{/* <WalletButton /> */}
+				<WalletButton />
 			</div>
 		</nav>
 	);
diff --git a/packages/stylex/app/_components/Navbar/index.ts b/packages/stylex/app/_components/navbar/Navbar/index.ts
similarity index 100%
rename from packages/stylex/app/_components/Navbar/index.ts
rename to packages/stylex/app/_components/navbar/Navbar/index.ts
diff --git a/packages/stylex/app/_components/navbar/WalletButton/WalletButton.tsx b/packages/stylex/app/_components/navbar/WalletButton/WalletButton.tsx
new file mode 100644
index 00000000..abfe2a5b
--- /dev/null
+++ b/packages/stylex/app/_components/navbar/WalletButton/WalletButton.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import Button from '@components/theme/Button';
+import { WALLETS } from '@contexts/Web3Context/Web3Context.variables';
+import useWeb3 from '@hooks/useWeb3';
+import Address from '@models/Address';
+import * as stylex from '@stylexjs/stylex';
+import { FC } from 'react';
+import { MdOutlineAccountBalanceWallet } from 'react-icons/md';
+import { colors } from '../../../../styles/theme.stylex';
+import WalletModal from '../WalletModal';
+import { IWalletButton } from './WalletButton.type';
+
+const styles = stylex.create({
+	button: {
+		color: colors.lightBlue
+	}
+});
+
+const WalletButton: FC<IWalletButton> = () => {
+	const { connectWallet, accounts, setIsWalletModalOpen, isWalletModalOpen } = useWeb3();
+
+	const address = accounts[0]?.address;
+	const ens = accounts[0]?.ens;
+
+	const isWalletConnected = !!address;
+
+	return (
+		<>
+			<WalletModal isOpen={isWalletModalOpen} onClose={() => setIsWalletModalOpen(false)} />
+			<Button
+				onClick={isWalletConnected ? () => setIsWalletModalOpen(true) : () => connectWallet(WALLETS.blocknative)}
+				icon={<MdOutlineAccountBalanceWallet size={28} />}
+				style={styles.button}
+			>
+				{isWalletConnected ? ens?.name || Address.from(address)?.truncate() : 'Connect Wallet'}
+			</Button>
+		</>
+	);
+};
+
+export { WalletButton };
diff --git a/packages/stylex/app/_components/navbar/WalletButton/WalletButton.type.ts b/packages/stylex/app/_components/navbar/WalletButton/WalletButton.type.ts
new file mode 100644
index 00000000..5d11e0b2
--- /dev/null
+++ b/packages/stylex/app/_components/navbar/WalletButton/WalletButton.type.ts
@@ -0,0 +1,4 @@
+
+interface IWalletButton {}
+
+export type { IWalletButton }
diff --git a/packages/stylex/app/_components/navbar/WalletButton/index.ts b/packages/stylex/app/_components/navbar/WalletButton/index.ts
new file mode 100644
index 00000000..02cabb99
--- /dev/null
+++ b/packages/stylex/app/_components/navbar/WalletButton/index.ts
@@ -0,0 +1 @@
+export { WalletButton as default } from './WalletButton';
diff --git a/packages/stylex/app/_components/navbar/WalletModal/WalletModal.tsx b/packages/stylex/app/_components/navbar/WalletModal/WalletModal.tsx
new file mode 100644
index 00000000..37884f10
--- /dev/null
+++ b/packages/stylex/app/_components/navbar/WalletModal/WalletModal.tsx
@@ -0,0 +1,126 @@
+'use client';
+
+import Portal from '@components/Portal';
+import Text from '@components/theme/Text';
+import { EFontWeight, ETextAlign } from '@components/theme/Text/Text.enum';
+import useWeb3 from '@hooks/useWeb3';
+import * as stylex from '@stylexjs/stylex';
+import { FC, useEffect, useState } from 'react';
+import { ESize } from 'styles/theme.enum';
+import { colors, spacing } from '../../../../styles/theme.stylex';
+import { IWalletModal } from './WalletModal.type';
+
+const styles = stylex.create({
+	bgButton: {
+		position: 'fixed',
+		inset: 0,
+		zIndex: 900,
+		backgroundColor: colors.black,
+		opacity: 0.0,
+		transition: 'opacity 0.3s ease-in-out',
+		border: 'none'
+	},
+	bgButtonVisible: {
+		opacity: 0.5
+	},
+	modalContainer: {
+		display: 'flex',
+		flexDirection: 'column',
+		justifyContent: 'center',
+		alignItems: 'center',
+		position: 'fixed',
+		zIndex: 901,
+		transition: 'opacity 0.3s ease-in-out',
+		top: '50%',
+		left: '50%',
+		transform: 'translate(-50%, -50%)',
+		width: 500,
+		height: 'auto',
+		opacity: 0,
+		padding: {
+			default: spacing['2xs'],
+			'@media (min-width: 900px)': spacing.s
+		},
+		borderRadius: '13px',
+		background: colors.darkGradient,
+		border: '1px solid',
+		borderColor: colors.darkGray,
+		boxShadow: '0px 5px 20px 10px #12131450'
+	},
+	modalContainerVisible: {
+		opacity: 1
+	},
+	button: {
+		border: 'none',
+		height: 80,
+		width: '100%',
+		display: 'flex',
+		justifyContent: 'center',
+		alignItems: 'center',
+		borderRadius: 8,
+		backgroundColor: {
+			default: colors.transparentGray,
+			':hover': colors.lessTransparentGray
+		},
+		padding: '0 20px',
+		cursor: 'pointer',
+		transition: 'all 0.3s ease-in-out'
+	}
+});
+
+const WalletModal: FC<IWalletModal> = ({ isOpen = false, onClose = () => {} }) => {
+	const { disconnectWallet } = useWeb3();
+
+	const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
+
+	useEffect(() => {
+		if (isOpen) {
+			const timeout = setTimeout(() => {
+				document.body.style.overflow = 'hidden';
+				setIsModalVisible(true);
+			}, 10);
+
+			return () => clearTimeout(timeout);
+		} else {
+			const timeout = setTimeout(() => {
+				document.body.style.overflow = 'visible';
+				document.body.style.overflowX = 'hidden';
+
+				setIsModalVisible(false);
+			}, 400);
+
+			return () => clearTimeout(timeout);
+		}
+	}, [isOpen]);
+
+	const handleDisconnectWallet = () => {
+		onClose();
+
+		setTimeout(() => {
+			disconnectWallet();
+		}, 300);
+	};
+
+	if (!isOpen && !isModalVisible) {
+		return <></>;
+	}
+
+	return (
+		<Portal selector='body'>
+			<button
+				{...stylex.props(styles.bgButton, isModalVisible && isOpen ? styles.bgButtonVisible : {})}
+				onClick={onClose}
+			/>
+
+			<div {...stylex.props(styles.modalContainer, isModalVisible && isOpen ? styles.modalContainerVisible : {})}>
+				<button onClick={() => handleDisconnectWallet()} {...stylex.props(styles.button)}>
+					<Text size={ESize.l} weight={EFontWeight.bold} align={ETextAlign.center}>
+						Disconnect Wallet
+					</Text>
+				</button>
+			</div>
+		</Portal>
+	);
+};
+
+export { WalletModal };
diff --git a/packages/stylex/app/_components/navbar/WalletModal/WalletModal.type.ts b/packages/stylex/app/_components/navbar/WalletModal/WalletModal.type.ts
new file mode 100644
index 00000000..62fb1820
--- /dev/null
+++ b/packages/stylex/app/_components/navbar/WalletModal/WalletModal.type.ts
@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+interface IWalletModal {
+	isOpen: boolean;
+	onClose: () => void;
+}
+
+export type { IWalletModal };
diff --git a/packages/stylex/app/_components/navbar/WalletModal/index.ts b/packages/stylex/app/_components/navbar/WalletModal/index.ts
new file mode 100644
index 00000000..740d3e9a
--- /dev/null
+++ b/packages/stylex/app/_components/navbar/WalletModal/index.ts
@@ -0,0 +1 @@
+export { WalletModal as default } from './WalletModal';
diff --git a/packages/stylex/app/_components/theme/Button/Button.tsx b/packages/stylex/app/_components/theme/Button/Button.tsx
index 06ab3839..36097d6d 100644
--- a/packages/stylex/app/_components/theme/Button/Button.tsx
+++ b/packages/stylex/app/_components/theme/Button/Button.tsx
@@ -40,14 +40,19 @@ const styles = stylex.create({
 		display: 'flex',
 		justifyContent: 'center',
 		alignItems: 'center',
-		marginLeft: '20px'
+		marginLeft: '20px',
+		color: 'inherit'
 	},
 	icons: {
-		position: 'absolute'
+		position: 'absolute',
+		transition: {
+			'@media screen and (prefers-reduced-motion: no-preference)': 'all 0.3s ease-in-out'
+		}
 	},
 	firstIcon: {
 		opacity: 1,
-		transform: 'translateX(0) rotateX(0)'
+		transform: 'translateX(0) rotateX(0)',
+		color: 'inherit'
 	},
 	firstIconActive: {
 		opacity: 0,
@@ -62,7 +67,7 @@ const styles = stylex.create({
 		transform: 'translateX(0) rotateX(0)'
 	},
 	gradientContainer: {
-		height: '46px',
+		minHeight: '46px',
 		position: 'relative',
 		borderRadius: '13px',
 		background: colors.darkGradient,
@@ -74,8 +79,12 @@ const styles = stylex.create({
 		alignItems: 'center',
 		padding: {
 			default: '6px 18px',
-			'@media screen and (min-width: 600px)': '9px 27px',
+			[SM]: '9px 27px',
 			'@media screen and (min-width: 960px)': '12px 36px'
+		},
+		transform: {
+			default: 'scale(1.0)',
+			':hover': 'scale(1.02)'
 		}
 	},
 	containerGap: {
@@ -114,9 +123,12 @@ const Button: FC<IButton> = ({ children, onClick, href, valueToCopy, icon, style
 						<span {...stylex.props(styles.iconContainer)}>
 							<MdOutlineContentCopy
 								size={24}
-								{...stylex.props(isCopying ? styles.firstIconActive : styles.firstIcon)}
+								{...stylex.props(styles.icons, isCopying ? styles.firstIconActive : styles.firstIcon)}
+							/>
+							<MdOutlineCheck
+								size={24}
+								{...stylex.props(styles.icons, isCopying ? styles.secondIconActive : styles.secondIcon)}
 							/>
-							<MdOutlineCheck size={24} {...stylex.props(isCopying ? styles.secondIconActive : styles.secondIcon)} />
 						</span>
 					</>
 				) : icon ? (
@@ -140,7 +152,6 @@ const Button: FC<IButton> = ({ children, onClick, href, valueToCopy, icon, style
 					style,
 					isCopying && styles.copyingColor
 				)}
-				{...otherProps}
 			>
 				{content}
 			</a>
diff --git a/packages/stylex/app/_components/theme/Text/Text.tsx b/packages/stylex/app/_components/theme/Text/Text.tsx
index 4d313d21..fd9eed38 100644
--- a/packages/stylex/app/_components/theme/Text/Text.tsx
+++ b/packages/stylex/app/_components/theme/Text/Text.tsx
@@ -223,12 +223,14 @@ const Text: FC<PropsWithChildren<IText>> = ({
 	const TextTag = component || type;
 
 	// heading key
-	const key = textTypeStylexKeyMap(ESize.m)[type as keyof typeof ETextType] as keyof typeof styles;
+	const key = textTypeStylexKeyMap(size)[type as keyof typeof ETextType] as keyof Omit<
+		typeof styles,
+		'getColor' | 'text' | 'getGradient' | 'inherit'
+	>;
 
 	return (
 		<TextTag
 			{...stylex.props(
-				// @ts-ignore @todo(dig to find the ts issue reason)
 				styles[key],
 				styles.text,
 				weight === EFontWeight.regular && styles.regular,
diff --git a/packages/stylex/app/layout.tsx b/packages/stylex/app/layout.tsx
index 89d45318..ffdcd44b 100644
--- a/packages/stylex/app/layout.tsx
+++ b/packages/stylex/app/layout.tsx
@@ -1,8 +1,9 @@
-import Navbar from '@components/Navbar';
+import Navbar from '@components/navbar/Navbar';
 import * as stylex from '@stylexjs/stylex';
 import { Metadata } from 'next';
 import '../styles/globals.css';
 import { colors } from '../styles/theme.stylex';
+import { ClientProviders } from './providers';
 
 export const metadata: Metadata = {
 	title: 'Create NextJs Dapp',
@@ -36,10 +37,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 			        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 
 			<body {...stylex.props(styles.body)}>
-				<Navbar />
-				{children}
+				<ClientProviders>
+					<Navbar />
 
-				<footer></footer>
+					{children}
+
+					<footer></footer>
+				</ClientProviders>
 			</body>
 		</html>
 	);
diff --git a/packages/stylex/app/providers.tsx b/packages/stylex/app/providers.tsx
new file mode 100644
index 00000000..c72d0f0c
--- /dev/null
+++ b/packages/stylex/app/providers.tsx
@@ -0,0 +1,8 @@
+'use client';
+
+import Web3Provider from '@contexts/Web3Context';
+import { ReactNode } from 'react';
+
+export const ClientProviders = ({ children }: { children: ReactNode }) => {
+	return <Web3Provider>{children}</Web3Provider>;
+};
diff --git a/packages/stylex/package.json b/packages/stylex/package.json
index 36c46325..577cb576 100644
--- a/packages/stylex/package.json
+++ b/packages/stylex/package.json
@@ -28,6 +28,7 @@
 		"@babel/plugin-syntax-flow": "^7.22.5",
 		"@babel/plugin-syntax-jsx": "^7.22.5",
 		"@babel/plugin-syntax-typescript": "^7.22.5",
+		"@babel/plugin-transform-private-methods": "^7.24.1",
 		"@stylexjs/babel-plugin": "^0.4.1",
 		"@stylexjs/eslint-plugin": "^0.4.1",
 		"@stylexjs/nextjs-plugin": "^0.4.1",
@@ -37,7 +38,7 @@
 		"eslint": "^8.55.0",
 		"eslint-config-next": "^13.5.6",
 		"prettier": "3.1.1",
-		"typescript": "5.3.3",
-		"rimraf": "^5.0.5"
+		"rimraf": "^5.0.5",
+		"typescript": "5.3.3"
 	}
 }
diff --git a/packages/stylex/styles/theme.stylex.ts b/packages/stylex/styles/theme.stylex.ts
index 0bc9cfd5..253096dd 100644
--- a/packages/stylex/styles/theme.stylex.ts
+++ b/packages/stylex/styles/theme.stylex.ts
@@ -13,6 +13,12 @@ export const colors = stylex.defineVars({
 	gray: {
 		default: '#979797'
 	},
+	transparentGray: {
+		default: '#97979730'
+	},
+	lessTransparentGray: {
+		default: '#97979740'
+	},
 	blue: {
 		default: '#2467df'
 	},