diff --git a/src/app/frq-grading/[id]/page.tsx b/src/app/frq-grading/[id]/page.tsx
new file mode 100644
index 00000000..47eac554
--- /dev/null
+++ b/src/app/frq-grading/[id]/page.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import FRQGradingRenderer from "@/components/frq/gradingRenderer";
+import { db } from "@/lib/firebase";
+import type { FRQSubmission } from "@/types/frq";
+import { doc, getDoc } from "firebase/firestore";
+import { useEffect, useState } from "react";
+
+type PageProps = {
+  params: {
+    id: string;
+  };
+};
+
+const Page = ({ params }: PageProps) => {
+  const [frq, setFrq] = useState<FRQSubmission | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchFrq = async () => {
+      try {
+        const docRef = doc(db, "ungraded-frqs", params.id);
+        const docSnap = await getDoc(docRef);
+
+        if (docSnap.exists()) {
+          setFrq({
+            id: docSnap.id,
+            ...(docSnap.data() as FRQSubmission),
+          });
+        } else {
+          setFrq(null);
+        }
+      } catch (error) {
+        console.error("Error fetching FRQ:", error);
+        setFrq(null);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    void fetchFrq();
+  }, [params.id]);
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  return <FRQGradingRenderer frq={frq ?? null} />;
+};
+
+export default Page;
\ No newline at end of file
diff --git a/src/app/frq-grading/page.tsx b/src/app/frq-grading/page.tsx
new file mode 100644
index 00000000..ed36d766
--- /dev/null
+++ b/src/app/frq-grading/page.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import Link from "next/link";
+import { db } from "@/lib/firebase";
+import { collection, getDocs } from "firebase/firestore";
+import { useEffect, useState } from "react";
+
+const Page = () => {
+  const [frqIds, setFrqIds] = useState<string[] | null>(null);
+
+  useEffect(() => {
+    const fetchFrqs = async () => {
+      const collectionRef = collection(db, "ungraded-frqs");
+      const snapshot = await getDocs(collectionRef);
+      setFrqIds(snapshot.docs.map((doc) => doc.id));
+    };
+
+    fetchFrqs().catch((error) => {
+      console.error("Error fetching ungraded FRQs:", error);
+      setFrqIds([]);
+    });
+  }, []);
+
+  if (frqIds === null) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <h1>Ungraded FRQs</h1>
+
+      {frqIds.length === 0 ? (
+        <p>No ungraded FRQs found.</p>
+      ) : (
+        <ul>
+          {frqIds.map((id) => (
+            <li key={id}>
+              <Link href={`/frq-grading/${id}`}>{id}</Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default Page;
\ No newline at end of file
diff --git a/src/components/frq/gradingRenderer.tsx b/src/components/frq/gradingRenderer.tsx
new file mode 100644
index 00000000..abcbbdab
--- /dev/null
+++ b/src/components/frq/gradingRenderer.tsx
@@ -0,0 +1,15 @@
+import type { FRQSubmission } from "@/types/frq";
+
+type FRQGradingRendererProps = {
+  frq: FRQSubmission | null;
+};
+
+const FRQGradingRenderer = ({ frq }: FRQGradingRendererProps) => {
+  if (!frq) {
+    return <div>FRQ not found.</div>;
+  }
+
+  return <div>FRQ found. Grading page loaded successfully.</div>;
+};
+
+export default FRQGradingRenderer;
\ No newline at end of file