diff --git a/frontend/src/app/map/page.jsx b/frontend/src/app/map/page.jsx
index 96f7e57..6d63f57 100644
--- a/frontend/src/app/map/page.jsx
+++ b/frontend/src/app/map/page.jsx
@@ -1,4 +1,23 @@
-import MapView from "@/views/map/page";
+"use client";
+import dynamic from "next/dynamic";
+
+const MapView = dynamic(() => import("@/views/map/page"), {
+  ssr: false,
+  loading: () => (
+    <div
+      style={{
+        height: "100vh",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "#f0f0f0",
+      }}
+    >
+      Loading map...
+    </div>
+  ),
+});
 
 const Map = () => {
   return <MapView />;