diff --git a/web/src/app/maps/[mapId]/page.tsx b/web/src/app/maps/[mapId]/page.tsx
index 48e8bcc..2b49117 100644
--- a/web/src/app/maps/[mapId]/page.tsx
+++ b/web/src/app/maps/[mapId]/page.tsx
@@ -1,17 +1,14 @@
+"use client"
+
 import Webpage from "@/app/_components/webpage";
+import { useParams } from "next/navigation";
 
-interface MapParams {
-    params: {
-        mapid: string;
-    };
-}
-
-export default function Map({ params }: MapParams) {
-    const { mapid } = params;
+export default function Map() {
+    const { mapId } = useParams<{mapId: string}>()
 
     return (
         <Webpage>
-            <p>map { mapid }</p>
+            <p>map { mapId }</p>
         </Webpage>
     );
-}
\ No newline at end of file
+}
diff --git a/web/src/app/maps/page.tsx b/web/src/app/maps/page.tsx
index 5729a36..1e28448 100644
--- a/web/src/app/maps/page.tsx
+++ b/web/src/app/maps/page.tsx
@@ -1,13 +1,20 @@
+"use client"
+
+import { useState, useEffect } from "react";
 import Webpage from "@/app/_components/webpage";
 
-export default async function MapsPage() {
-    const ingameMaps = fetch("/api/maps?Page=1&Limit=10");
+export default function MapsPage() {
+    const [ingameMaps, setIngameMaps] = useState();
 
-    try {
+    useEffect(() => {
+        fetch("/api/maps?Page=1&Limit=10")
+            .then(response => response.json())
+            .then(setIngameMaps);
+    }, []);
+
+    useEffect(() => {
         console.log(ingameMaps);
-    } catch(error) {
-        console.log(error);
-    }
+    }, [ingameMaps]);
     
     return (
         <Webpage>