issues regarding the map and hunt stopping have been fixed. leaderboard page needs to be integrated and a clues should be added to be properly processed. after that the css for the application should be developed.

app/(main)/map/map.module.css

@@ -5,7 +5,7 @@
   height: 100vh; /* Full viewport height */
   overflow: hidden; /* Hide overflow at page level */
   position: relative;
-  background-color: #69b5a8;
+  background-color: #69B5A8;
 }
 
 .map-banner {
@@ -63,17 +63,36 @@
   position: relative;
   width: 100%;
   height: 100%;
+  min-height: calc(100vh - 120px); /* Adjust for header and navbar height */
+  background-color: #69B5A8; /* Updated background color */
 }
 
 .treasure-map {
   width: 100%;
   height: 100%;
-  min-height: 100%;
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
+/* New class for the background map image */
+.map-background {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: url("/images/map.svg"); /* Updated path to the correct SVG file */
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: 5; /* Ensure the map is above the background */
+}
+
 .map-svg {
   width: 100% !important; /* Override Next.js Image default width */
   height: auto !important; /* Override Next.js Image default height */