diff --git a/src/components/common/WalletConnectCalloutBanner.tsx b/src/components/common/WalletConnectCalloutBanner.tsx
index 84afdfb4..1d3fd9a7 100644
--- a/src/components/common/WalletConnectCalloutBanner.tsx
+++ b/src/components/common/WalletConnectCalloutBanner.tsx
@@ -1,6 +1,8 @@
+import { useState } from 'react';
 import { Wallet } from 'lucide-react';
+import { useAccount, useConnect, useReconnect } from 'wagmi';
 import { cn } from '@/lib/utils';
-import ConnectWalletButton from '@/components/common/ConnectWalletButton';
+import showToast from '@/utils/toast.util';
 
 interface WalletConnectCalloutBannerProps {
 	title?: string;
@@ -13,6 +15,57 @@ const WalletConnectCalloutBanner: React.FC<WalletConnectCalloutBannerProps> = ({
 	description = 'Connect your wallet to continue with creator key purchases and on-chain actions.',
 	className,
 }) => {
+	const { isConnected } = useAccount();
+	const { reconnectAsync, connectors: reconnectConnectors } = useReconnect();
+	const { connectAsync, connectors: connectConnectors } = useConnect();
+	const [isReconnecting, setIsReconnecting] = useState(false);
+
+	const retryConnector = reconnectConnectors[0] ?? connectConnectors[0];
+
+	const handleReconnect = async () => {
+		if (isReconnecting) {
+			return;
+		}
+
+		if (isConnected) {
+			showToast.success('Wallet is already connected.');
+			return;
+		}
+
+		setIsReconnecting(true);
+		showToast.loading('Reconnecting wallet...');
+
+		try {
+			const reconnectResults = await reconnectAsync();
+			const didReconnect = reconnectResults.some(
+				result => result.accounts.length > 0
+			);
+
+			if (didReconnect) {
+				showToast.success('Wallet reconnected successfully.');
+				return;
+			}
+
+			if (!retryConnector) {
+				showToast.error(
+					'No wallet connector is available. Open your wallet extension and try again.'
+				);
+				return;
+			}
+
+			await connectAsync({ connector: retryConnector });
+			showToast.success('Wallet connected successfully.');
+		} catch (error) {
+			const message =
+				error instanceof Error && error.message
+					? error.message
+					: 'Please try again after unlocking your wallet.';
+			showToast.error(`Reconnect failed. ${message}`);
+		} finally {
+			setIsReconnecting(false);
+		}
+	};
+
 	return (
 		<div
 			className={cn(
@@ -32,7 +85,14 @@ const WalletConnectCalloutBanner: React.FC<WalletConnectCalloutBannerProps> = ({
 					<p className="mt-1 text-xs text-amber-100/75">{description}</p>
 				</div>
 				<div className="shrink-0">
-					<ConnectWalletButton />
+					<button
+						type="button"
+						onClick={handleReconnect}
+						disabled={isReconnecting}
+						className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-blue-300"
+					>
+						{isReconnecting ? 'Reconnecting...' : 'Reconnect Wallet'}
+					</button>
 				</div>
 			</div>
 		</div>