diff --git a/components/TopBar.tsx b/components/TopBar.tsx
index fb627196..81ef263c 100644
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@@ -111,11 +111,13 @@ const TopBar = () => {
           <ConnectWalletButton />
         ) : (
           <button
-            className="relative flex h-16 items-center justify-center rounded-none bg-th-bkg-2 bg-gradient-to-bl px-6 text-base font-bold text-white before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:cursor-pointer hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100"
+            className="relative h-16 rounded-none bg-th-bkg-2 bg-gradient-to-bl px-6 text-base font-bold text-th-fgd-1 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-th-bkg-4 before:to-transparent before:opacity-0 hover:cursor-pointer hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100"
             onClick={handleShowSetup}
           >
-            <WalletIcon className="mr-2 h-5 w-5 flex-shrink-0" />
-            {t('connect')}
+            <div className="relative z-10 flex items-center justify-center">
+              <WalletIcon className="mr-2 h-5 w-5 flex-shrink-0" />
+              {t('connect')}
+            </div>
           </button>
         )}
       </div>
diff --git a/components/wallet/ConnectWalletButton.tsx b/components/wallet/ConnectWalletButton.tsx
index 34a727ea..ae745073 100644
--- a/components/wallet/ConnectWalletButton.tsx
+++ b/components/wallet/ConnectWalletButton.tsx
@@ -19,8 +19,8 @@ export const ConnectWalletButton: React.FC = () => {
         disabled={!groupLoaded}
         className={` text-white focus:outline-none disabled:cursor-wait disabled:opacity-25`}
       >
-        <div className="relative flex h-16 w-44 bg-th-bkg-2 py-2 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100">
-          <div className="default-transition flex h-full flex-row items-center justify-center space-x-3 px-4">
+        <div className="relative flex h-16 w-44 bg-th-bkg-2 py-2 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-th-bkg-4 before:to-transparent before:opacity-0 hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100">
+          <div className="default-transition relative z-10 flex h-full items-center justify-center space-x-3 px-4">
             <div
               className={`flex h-[28px] w-[28px] items-center justify-center rounded-full ${
                 wallet?.adapter.name === 'Solflare' ? 'bg-black' : ''