diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx
index dfa375e..febd2fd 100644
--- a/src/layouts/PublicLayout.tsx
+++ b/src/layouts/PublicLayout.tsx
@@ -723,7 +723,7 @@ export function PublicLayout() {
               {t("popular")}
             </Link>
             <div className="mt-2 w-full max-w-xs">
-              <WalletButton compact />
+              <WalletButton compact onOpenLogin={() => setOpen(false)} />
             </div>
           </div>
         ) : null}
diff --git a/src/wallet/WalletButton.tsx b/src/wallet/WalletButton.tsx
index 26061c3..d75f94f 100644
--- a/src/wallet/WalletButton.tsx
+++ b/src/wallet/WalletButton.tsx
@@ -2,7 +2,13 @@ import { useEffect, useRef, useState } from "react";
 import { useI18n } from "../i18n";
 import { shortenAddress, useWallet } from "./WalletProvider";
 
-export function WalletButton({ compact = false }: { compact?: boolean }) {
+export function WalletButton({
+  compact = false,
+  onOpenLogin,
+}: {
+  compact?: boolean;
+  onOpenLogin?: () => void;
+}) {
   const { t } = useI18n();
   const wallet = useWallet();
   const [open, setOpen] = useState(false);
@@ -66,7 +72,10 @@ export function WalletButton({ compact = false }: { compact?: boolean }) {
   return (
     <button
       type="button"
-      onClick={wallet.openLoginModal}
+      onClick={() => {
+        onOpenLogin?.();
+        wallet.openLoginModal();
+      }}
       className={[
         "inline-flex h-10 items-center justify-center rounded-full border border-ark-gold/50 bg-ark-gold px-4 text-sm font-bold text-black outline-none transition hover:bg-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg",
         compact ? "w-full" : "",