just need to fix the map to clue function.

app/(main)/leaderboard/page.js

@@ -12,7 +12,7 @@ export default function LeaderboardPage() {
   const searchParams = useSearchParams();
   const huntJustEnded = searchParams.get("huntEnded") === "true";
   const router = useRouter();
-  const { status } = useSession();
+  const { data: session, status } = useSession(); // Fix: Properly destructure session from useSession()
 
   // Function to fetch leaderboard data
   const fetchLeaderboard = async () => {
@@ -70,7 +70,9 @@ export default function LeaderboardPage() {
     <div className="leaderboard-page">
       <div className="page-header">
         <div className="back-button"></div>
-        <div className="page-title">Leaderboard</div>
+        <div className="page-title">
+          {huntJustEnded ? "Final Results" : "Leaderboard"}
+        </div>
       </div>
 
       {huntJustEnded && (
@@ -156,32 +158,46 @@ export default function LeaderboardPage() {
         <div className="no-data">No teams on the leaderboard yet</div>
       )}
 
-      {/* Navigation Bar */}
-      <div className="nav-bar">
-        <Link href="/map" className="nav-item">
-          <div className="nav-icon">🗺️</div>
-          <div className="nav-label">Map</div>
-        </Link>
-        <Link href="/stats" className="nav-item">
-          <div className="nav-icon">📊</div>
-          <div className="nav-label">Stats</div>
-        </Link>
-        <Link
-          href={
-            teams.length > 0 && session?.user?.teamId
-              ? `/${session.user.teamId}`
-              : "/team-selection"
-          }
-          className="nav-item"
-        >
-          <div className="nav-icon">👥</div>
-          <div className="nav-label">Team</div>
-        </Link>
-        <Link href="/leaderboard" className="nav-item active">
-          <div className="nav-icon">🏆</div>
-          <div className="nav-label">Leaderboard</div>
-        </Link>
-      </div>
+      {/* Only show navigation bar when the hunt hasn't ended */}
+      {!huntJustEnded && (
+        <div className="nav-bar">
+          <Link href="/map" className="nav-item">
+            <div className="nav-icon">🗺️</div>
+            <div className="nav-label">Map</div>
+          </Link>
+          <Link href="/stats" className="nav-item">
+            <div className="nav-icon">📊</div>
+            <div className="nav-label">Stats</div>
+          </Link>
+          <Link
+            href={
+              session?.user?.teamId
+                ? `/${session.user.teamId}`
+                : "/team-selection"
+            }
+            className="nav-item"
+          >
+            <div className="nav-icon">👥</div>
+            <div className="nav-label">Team</div>
+          </Link>
+          <Link href="/leaderboard" className="nav-item active">
+            <div className="nav-icon">🏆</div>
+            <div className="nav-label">Leaderboard</div>
+          </Link>
+        </div>
+      )}
+
+      {/* Add a "back to home" button when the hunt has ended */}
+      {huntJustEnded && (
+        <div className="hunt-ended-actions">
+          <button
+            onClick={() => (window.location.href = "/team-selection")}
+            className="back-to-home-button"
+          >
+            Back to Home
+          </button>
+        </div>
+      )}
 
       <style jsx>{`
         .leaderboard-page {
@@ -189,7 +205,7 @@ export default function LeaderboardPage() {
           flex-direction: column;
           min-height: 100vh;
           background-color: #f4f4f4;
-          padding-bottom: 70px;
+          padding-bottom: ${huntJustEnded ? "0" : "70px"};
         }
 
         .page-header {
@@ -339,14 +355,35 @@ export default function LeaderboardPage() {
           color: #721c24;
           border: 1px solid #f5c6cb;
           border-radius: 8px;
-          padding: 15px;
+          padding: 20px;
           margin: 20px;
           text-align: center;
         }
 
         .hunt-ended-icon {
-          font-size: 36px;
-          margin-bottom: 10px;
+          font-size: 46px;
+          margin-bottom: 15px;
+        }
+
+        .hunt-ended-actions {
+          display: flex;
+          justify-content: center;
+          margin: 30px 0;
+        }
+
+        .back-to-home-button {
+          background-color: #68543c;
+          color: white;
+          border: none;
+          border-radius: 8px;
+          padding: 12px 24px;
+          font-size: 16px;
+          cursor: pointer;
+          transition: background-color 0.3s;
+        }
+
+        .back-to-home-button:hover {
+          background-color: #53402d;
         }
 
         /* Navigation Bar Styles */

app/(main)/map/page.js

@@ -282,10 +282,23 @@ export default function MapPage() {
             console.log("Hunt has ended, redirecting to leaderboard");
             clearHuntTimer(); // Clean up all timer data
 
-            // Use the appropriate redirect method
-            if (isMounted.current) {
-              hardRedirect("/leaderboard?huntEnded=true");
-            }
+            // Show a brief message before redirecting
+            const huntEndedMessage = document.createElement("div");
+            huntEndedMessage.innerHTML = `
+              <div style="position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8); color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:9999">
+                <div style="font-size:32px; margin-bottom:20px">🎯 Hunt Complete!</div>
+                <div style="font-size:24px; margin-bottom:20px">The treasure hunt has ended.</div>
+                <div style="font-size:18px">Redirecting to results...</div>
+              </div>
+            `;
+            document.body.appendChild(huntEndedMessage);
+
+            // Use the appropriate redirect method after a short delay
+            setTimeout(() => {
+              if (isMounted.current) {
+                hardRedirect("/leaderboard?huntEnded=true");
+              }
+            }, 2000);
             return;
           }
 
@@ -302,8 +315,21 @@ export default function MapPage() {
           console.log("Timer expired, redirecting to leaderboard");
           clearHuntTimer(); // Clean up all timer data
 
+          // Show a brief message before redirecting
+          const timerEndedMessage = document.createElement("div");
+          timerEndedMessage.innerHTML = `
+            <div style="position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8); color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:9999">
+              <div style="font-size:32px; margin-bottom:20px">⏰ Time's Up!</div>
+              <div style="font-size:24px; margin-bottom:20px">The treasure hunt has ended.</div>
+              <div style="font-size:18px">Redirecting to results...</div>
+            </div>
+          `;
+          document.body.appendChild(timerEndedMessage);
+
           if (isMounted.current) {
-            hardRedirect("/leaderboard?huntEnded=true");
+            setTimeout(() => {
+              hardRedirect("/leaderboard?huntEnded=true");
+            }, 2000);
           }
           return;
         }