clue page update

app/(main)/leaderboard/page.js

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 import NavBar from "@/components/NavBar";
+import Image from "next/image";
 
 export default function LeaderboardPage() {
   const [teams, setTeams] = useState([]);
@@ -159,6 +160,25 @@ export default function LeaderboardPage() {
         <div className="no-data">No teams on the leaderboard yet</div>
       )}
 
+      {/* Decorative corner images */}
+      <div className="corner-decoration left-corner">
+        <Image
+          src="/images/cannon-ball.svg"
+          alt="Cannon Ball"
+          width={80}
+          height={80}
+        />
+      </div>
+
+      <div className="corner-decoration right-corner">
+        <Image
+          src="/images/barrel-crop.svg"
+          alt="Barrel"
+          width={100}
+          height={100}
+        />
+      </div>
+
       {/* Only show navigation bar when the hunt hasn't ended */}
       {!huntJustEnded && (
         <NavBar
@@ -404,6 +424,35 @@ export default function LeaderboardPage() {
         .nav-item.active {
           color: #68543c;
         }
+
+        .corner-decoration {
+          position: fixed;
+          bottom: 80px;
+          z-index: 5;
+        }
+
+        .left-corner {
+          left: -10px;
+        }
+
+        .right-corner {
+          right: 20px;
+        }
+
+        ${huntJustEnded
+          ? `
+        .corner-decoration {
+          bottom: 20px;
+        }
+        `
+          : ""}
+
+        @media (max-width: 600px) {
+          .corner-decoration {
+            width: 60px;
+            height: 60px;
+          }
+        }
       `}</style>
     </div>
   );