diff --git a/app/[orgId]/contests/[id]/problems/[problemId]/page.tsx b/app/[orgId]/contests/[id]/problems/[problemId]/page.tsx
index 06af031..8ed0150 100644
--- a/app/[orgId]/contests/[id]/problems/[problemId]/page.tsx
+++ b/app/[orgId]/contests/[id]/problems/[problemId]/page.tsx
@@ -1,50 +1,66 @@
+"use client";
+
 import { CodeEditor } from "@/components/code-editor";
 import { notFound } from "next/navigation";
+import { useEffect, useState } from "react";
 
-async function getProblem(orgId: string, contestId: string, problemId: string) {
-  console.log(
-    `ENV: ${process.env.NEXT_PUBLIC_APP_URL}`,
-    orgId,
-    contestId,
-    problemId,
-  );
-
-  try {
-    // Fetch the problem with contest context
-    const response = await fetch(
-      `${process.env.NEXT_PUBLIC_APP_URL}/api/orgs/${orgId}/contests/${contestId}/problems/${problemId}`,
-      {
-        cache: "no-store",
-      },
-    );
-
-    if (!response.ok) {
-      throw new Error("Failed to fetch problem");
-    }
-
-    const problem = await response.json();
-
-    // Add the contest ID to the problem data
-    return {
-      ...problem,
-      contestNameId: contestId,
-      orgId,
-    };
-  } catch (error) {
-    console.error("Error fetching problem:", error);
-    return null;
-  }
-}
-
-export default async function Page({
+export default function Page({
   params,
 }: {
   params: { orgId: string; id: string; problemId: string };
 }) {
-  const problem = await getProblem(params.orgId, params.id, params.problemId);
+  const [problem, setProblem] = useState(null);
+
+  useEffect(() => {
+    async function getProblem(
+      orgId: string,
+      contestId: string,
+      problemId: string,
+    ) {
+      console.log(
+        `ENV: ${process.env.NEXT_PUBLIC_APP_URL}`,
+        orgId,
+        contestId,
+        problemId,
+      );
+
+      try {
+        // Fetch the problem with contest context
+        const response = await fetch(
+          `/api/orgs/${orgId}/contests/${contestId}/problems/${problemId}`,
+          {
+            cache: "no-store",
+          },
+        );
+
+        if (!response.ok) {
+          throw new Error("Failed to fetch problem");
+        }
+
+        const problem = await response.json();
+
+        // Add the contest ID to the problem data
+        return {
+          ...problem,
+          contestNameId: contestId,
+          orgId,
+        };
+      } catch (error) {
+        console.error("Error fetching problem:", error);
+        return null;
+      }
+    }
+
+    getProblem(params.orgId, params.id, params.problemId).then((result) => {
+      if (!result) {
+        notFound();
+      }
+      setProblem(result);
+    });
+  }, [params.orgId, params.id, params.problemId]);
 
   if (!problem) {
-    notFound();
+    return null;
   }
 
   return (
diff --git a/app/[orgId]/problems/[id]/page.tsx b/app/[orgId]/problems/[id]/page.tsx
index 61acf14..07f7c2a 100644
--- a/app/[orgId]/problems/[id]/page.tsx
+++ b/app/[orgId]/problems/[id]/page.tsx
@@ -1,46 +1,58 @@
+"use client";
+
 import { CodeEditor } from "@/components/code-editor";
 import { notFound } from "next/navigation";
+import { useEffect, useState } from "react";
 // import { getProblemIdFromCode } from "@/app/api/orgs/[orgId]/problems/service";
 
-async function getProblem(orgId: string, problemId: string) {
-  console.log(`ENV: ${process.env.NEXT_PUBLIC_APP_URL}`, orgId, problemId);
-
-  try {
-    // const problemIdNumber = await getProblemIdFromCode(orgId, problemId);
-
-    const response = await fetch(
-      `${process.env.NEXT_PUBLIC_APP_URL}/api/orgs/${orgId}/problems/${problemId}`,
-      {
-        cache: "no-store",
-      },
-    );
-
-    if (!response.ok) {
-      throw new Error("Failed to fetch problem");
-    }
-
-    // Return the problem without adding contestId
-    const problem = await response.json();
-    return {
-      ...problem,
-      orgId,
-      // No contestId here, as this is a standalone problem
-    };
-  } catch (error) {
-    console.error("Error fetching problem:", error);
-    return null;
-  }
-}
-
-export default async function Page({
+export default function Page({
   params,
 }: {
   params: { orgId: string; id: string };
 }) {
-  const problem = await getProblem(params.orgId, params.id);
+  const [problem, setProblem] = useState(null);
+
+  useEffect(() => {
+    async function getProblem(orgId: string, problemId: string) {
+      console.log(`ENV: ${process.env.NEXT_PUBLIC_APP_URL}`, orgId, problemId);
+
+      try {
+        // const problemIdNumber = await getProblemIdFromCode(orgId, problemId);
+
+        const response = await fetch(
+          `/api/orgs/${orgId}/problems/${problemId}`,
+          {
+            cache: "no-store",
+          },
+        );
+
+        if (!response.ok) {
+          throw new Error("Failed to fetch problem");
+        }
+
+        // Return the problem without adding contestId
+        const problem = await response.json();
+        return {
+          ...problem,
+          orgId,
+          // No contestId here, as this is a standalone problem
+        };
+      } catch (error) {
+        console.error("Error fetching problem:", error);
+        return null;
+      }
+    }
+
+    getProblem(params.orgId, params.id).then((result) => {
+      if (!result) {
+        notFound();
+      }
+      setProblem(result);
+    });
+  }, [params.orgId, params.id]);
 
   if (!problem) {
-    notFound();
+    return null;
   }
 
   return (