From dd64c50f4b580e0cb00d12425416000a79f197e9 Mon Sep 17 00:00:00 2001
From: Apurva <apurvask26@gmail.com>
Date: Mon, 6 Jul 2026 10:09:17 -0400
Subject: [PATCH 1/9] feat: created the FRQ Feedback Page Skeleton

---
 package-lock.json                       |  2 +-
 package.json                            |  2 +-
 src/app/frq-feedback/[id]/page.tsx      | 58 +++++++++++++++++++++++++
 src/components/frq/feedbackRenderer.tsx | 13 ++++++
 src/lib/firebase.ts                     | 10 +++--
 5 files changed, 80 insertions(+), 5 deletions(-)
 create mode 100644 src/app/frq-feedback/[id]/page.tsx
 create mode 100644 src/components/frq/feedbackRenderer.tsx

diff --git a/package-lock.json b/package-lock.json
index 0103dc5e..ba7816b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,7 @@
         "editorjs-math": "^1.0.2",
         "editorjs-parser": "^1.5.3",
         "editorjs-undo": "^2.0.28",
-        "firebase": "^10.13.0",
+        "firebase": "^10.14.1",
         "firebase-admin": "^12.3.1",
         "highlight.js": "^11.10.0",
         "katex": "^0.16.11",
diff --git a/package.json b/package.json
index 9ba74ca1..83658e5a 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
     "editorjs-math": "^1.0.2",
     "editorjs-parser": "^1.5.3",
     "editorjs-undo": "^2.0.28",
-    "firebase": "^10.13.0",
+    "firebase": "^10.14.1",
     "firebase-admin": "^12.3.1",
     "highlight.js": "^11.10.0",
     "katex": "^0.16.11",
diff --git a/src/app/frq-feedback/[id]/page.tsx b/src/app/frq-feedback/[id]/page.tsx
new file mode 100644
index 00000000..c349e36f
--- /dev/null
+++ b/src/app/frq-feedback/[id]/page.tsx
@@ -0,0 +1,58 @@
+
+"use client";
+
+import FRQFeedbackRenderer from "@/components/frq/feedbackRenderer";
+import { db } from "@/lib/firebase";
+import { doc, getDoc } from "firebase/firestore";
+import { useEffect, useState } from "react";
+
+type FeedbackStatus = "loading" | "found" | "not-found";
+type PageStuff = {
+  params: {
+    id: string;
+  };
+};
+
+const Page = (props: PageStuff) => {
+  const frqId = props.params.id;
+  const [status, setStatus] = useState<FeedbackStatus>("loading");
+
+  useEffect(() => {
+    const fetchFeedback = async () => {
+      setStatus("loading");
+      try {
+        const docRef = doc(
+          db, 
+          "frq-feedback", 
+          frqId
+        );
+        const docSnap = await getDoc(docRef);
+
+        if (docSnap.exists()) {
+          setStatus("found");
+        } else {
+          setStatus("not-found");
+        }
+        } catch (error: unknown) {
+          console.error("Error fetching FRQ feedback:", error);
+          setStatus("not-found");
+        }
+    };
+
+    void fetchFeedback();
+  }, [frqId]);
+
+  if (status === "loading") {
+    return <p>Loading...</p>;
+  }
+
+  return (
+  <div className="px-8 py-12">
+    <FRQFeedbackRenderer 
+      feedbackFound={status === "found"} 
+    />
+  </div>
+  );
+};
+
+export default Page;
diff --git a/src/components/frq/feedbackRenderer.tsx b/src/components/frq/feedbackRenderer.tsx
new file mode 100644
index 00000000..fc44315d
--- /dev/null
+++ b/src/components/frq/feedbackRenderer.tsx
@@ -0,0 +1,13 @@
+
+
+
+interface Props {
+    feedbackFound: boolean;
+}
+
+export default function FRQFeedbackRenderer({ feedbackFound }: Props) {
+    if (feedbackFound) {
+        return <p>Success.</p>;
+    }    
+    return <p>Failed.</p>
+}
diff --git a/src/lib/firebase.ts b/src/lib/firebase.ts
index 858dd959..97d29e0b 100644
--- a/src/lib/firebase.ts
+++ b/src/lib/firebase.ts
@@ -1,10 +1,10 @@
 "use client"
 
-import { initializeApp } from "firebase/app";
-import { getAuth } from "firebase/auth";
-import { getFirestore } from "firebase/firestore";
 import { getStorage } from "firebase/storage";
 
+import { initializeApp } from "firebase/app";
+import { connectAuthEmulator, getAuth } from "firebase/auth";
+import { connectFirestoreEmulator, getFirestore } from "firebase/firestore";
 import { env } from "@/env.js";
 
 const firebaseConfig = {
@@ -18,8 +18,12 @@ const firebaseConfig = {
 };
 
 const app = initializeApp(firebaseConfig);
+
 const db = getFirestore(app);
+connectFirestoreEmulator(db, "127.0.0.1", 8080);
+
 const auth = getAuth(app);
+connectAuthEmulator(auth, "http://127.0.0.1:9099");
 const storage = getStorage(app);
 
 export { db, auth, storage };

From 5a94268c196b6fa2a1a8483a19f23936d90294d2 Mon Sep 17 00:00:00 2001
From: Apurva Srimat Kandala <apurvask26@gmail.com>
Date: Tue, 7 Jul 2026 19:32:07 -0400
Subject: [PATCH 2/9] Emulator issue during production fixed

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 src/lib/firebase.ts | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/lib/firebase.ts b/src/lib/firebase.ts
index 97d29e0b..3c1dbc6d 100644
--- a/src/lib/firebase.ts
+++ b/src/lib/firebase.ts
@@ -20,10 +20,26 @@ const firebaseConfig = {
 const app = initializeApp(firebaseConfig);
 
 const db = getFirestore(app);
-connectFirestoreEmulator(db, "127.0.0.1", 8080);
+
+if (
+  process.env.NODE_ENV === "development" &&
+  typeof window !== "undefined" &&
+  (window.location.hostname === "localhost" ||
+    window.location.hostname === "127.0.0.1")
+) {
+  connectFirestoreEmulator(db, "127.0.0.1", 8080);
+}
 
 const auth = getAuth(app);
-connectAuthEmulator(auth, "http://127.0.0.1:9099");
+
+if (
+  process.env.NODE_ENV === "development" &&
+  typeof window !== "undefined" &&
+  (window.location.hostname === "localhost" ||
+    window.location.hostname === "127.0.0.1")
+) {
+  connectAuthEmulator(auth, "http://127.0.0.1:9099");
+}
 const storage = getStorage(app);
 
 export { db, auth, storage };

From 6e9d659a17c9debab721faaf24bd71e7e5f2f51a Mon Sep 17 00:00:00 2001
From: Apurva <apurvask26@gmail.com>
Date: Tue, 7 Jul 2026 19:41:59 -0400
Subject: [PATCH 3/9] Fixed pull request

---
 src/app/frq-feedback/[id]/page.tsx      | 11 ++++-------
 src/components/frq/feedbackRenderer.tsx | 17 ++++++++---------
 src/lib/firebase.ts                     | 14 +++++++++++---
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/app/frq-feedback/[id]/page.tsx b/src/app/frq-feedback/[id]/page.tsx
index c349e36f..1187fb1f 100644
--- a/src/app/frq-feedback/[id]/page.tsx
+++ b/src/app/frq-feedback/[id]/page.tsx
@@ -5,16 +5,13 @@ import FRQFeedbackRenderer from "@/components/frq/feedbackRenderer";
 import { db } from "@/lib/firebase";
 import { doc, getDoc } from "firebase/firestore";
 import { useEffect, useState } from "react";
+import usePathname from "@/components/client/pathname";
 
 type FeedbackStatus = "loading" | "found" | "not-found";
-type PageStuff = {
-  params: {
-    id: string;
-  };
-};
 
-const Page = (props: PageStuff) => {
-  const frqId = props.params.id;
+const Page = () => {
+  const pathname = usePathname() ?? "";
+  const frqId = pathname.split("/").at(-1) ?? "";
   const [status, setStatus] = useState<FeedbackStatus>("loading");
 
   useEffect(() => {
diff --git a/src/components/frq/feedbackRenderer.tsx b/src/components/frq/feedbackRenderer.tsx
index fc44315d..8bcfb4bb 100644
--- a/src/components/frq/feedbackRenderer.tsx
+++ b/src/components/frq/feedbackRenderer.tsx
@@ -1,13 +1,12 @@
-
-
-
 interface Props {
-    feedbackFound: boolean;
+   feedbackFound: boolean;
 }
 
 export default function FRQFeedbackRenderer({ feedbackFound }: Props) {
-    if (feedbackFound) {
-        return <p>Success.</p>;
-    }    
-    return <p>Failed.</p>
-}
+   if (feedbackFound) {
+     return <p>Success.</p>;
+   }
+   return <p>Failed.</p>;
+ }
+
+
diff --git a/src/lib/firebase.ts b/src/lib/firebase.ts
index 97d29e0b..0f310aca 100644
--- a/src/lib/firebase.ts
+++ b/src/lib/firebase.ts
@@ -20,10 +20,18 @@ const firebaseConfig = {
 const app = initializeApp(firebaseConfig);
 
 const db = getFirestore(app);
-connectFirestoreEmulator(db, "127.0.0.1", 8080);
-
 const auth = getAuth(app);
-connectAuthEmulator(auth, "http://127.0.0.1:9099");
+
+
+
+const isLocalDevelopemnt = 
+  process.env.NODE_ENV === "development" && typeof window !== "undefined" && ["localhost", "127.0.0.1"].includes(window.location.hostname);
+
+if (isLocalDevelopemnt) {
+  connectFirestoreEmulator(db, "127.0.0.1", 8080);
+  connectAuthEmulator(auth, "http://127.0.0.1:9099");
+}
+
 const storage = getStorage(app);
 
 export { db, auth, storage };

From 053478533fea3a8f5db14160d34dc4554749a13f Mon Sep 17 00:00:00 2001
From: Apurva <apurvask26@gmail.com>
Date: Wed, 8 Jul 2026 14:35:19 -0400
Subject: [PATCH 4/9] fixed firebase.ts

---
 src/lib/firebase.ts | 34 +++++++++-------------------------
 1 file changed, 9 insertions(+), 25 deletions(-)

diff --git a/src/lib/firebase.ts b/src/lib/firebase.ts
index b3babe41..7449de96 100644
--- a/src/lib/firebase.ts
+++ b/src/lib/firebase.ts
@@ -1,10 +1,10 @@
 "use client"
 
+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+import { getFirestore } from "firebase/firestore";
 import { getStorage } from "firebase/storage";
 
-import { initializeApp } from "firebase/app";
-import { connectAuthEmulator, getAuth } from "firebase/auth";
-import { connectFirestoreEmulator, getFirestore } from "firebase/firestore";
 import { env } from "@/env.js";
 
 const firebaseConfig = {
@@ -17,26 +17,10 @@ const firebaseConfig = {
   measurementId: env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
 };
 
- const app = initializeApp(firebaseConfig);
- const db = getFirestore(app);
-
- if (
-   process.env.NODE_ENV === "development" &&
-   typeof window !== "undefined" &&
-   (window.location.hostname === "localhost" ||
-     window.location.hostname === "127.0.0.1")
- ) {
-   connectFirestoreEmulator(db, "127.0.0.1", 8080);
- }
- const auth = getAuth(app);
+const app = initializeApp(firebaseConfig);
+const db = getFirestore(app);
+const auth = getAuth(app);
+const storage = getStorage(app);
 
- if (
-   process.env.NODE_ENV === "development" &&
-   typeof window !== "undefined" &&
-   (window.location.hostname === "localhost" ||
-     window.location.hostname === "127.0.0.1")
- ) {
-   connectAuthEmulator(auth, "http://127.0.0.1:9099");
- }
- const storage = getStorage(app);
- export { db, auth, storage };
\ No newline at end of file
+export { db, auth, storage };
+export default app;
\ No newline at end of file

From 569a3a69970663a83991367298af0d3598d1b9a9 Mon Sep 17 00:00:00 2001
From: Apurva <apurvask26@gmail.com>
Date: Tue, 14 Jul 2026 13:30:05 -0400
Subject: [PATCH 5/9] Added FRQ footer component

---
 src/components/global/frqFooter.tsx | 81 +++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 src/components/global/frqFooter.tsx

diff --git a/src/components/global/frqFooter.tsx b/src/components/global/frqFooter.tsx
new file mode 100644
index 00000000..cf809106
--- /dev/null
+++ b/src/components/global/frqFooter.tsx
@@ -0,0 +1,81 @@
+import { ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
+
+
+interface FooterProps {
+  testName: string;
+  currentFrqIndex: number;
+  totalFrqs: number;
+  onPrevious: () => void;
+  onNext: () => void;
+  onJumpToFrq: (index: number) => void;
+}
+
+export default function Footer({
+  testName,
+  currentFrqIndex,
+  totalFrqs,
+  onPrevious,
+  onNext,
+  onJumpToFrq,
+}: FooterProps) {
+  return (
+    <footer className="fixed bottom-0 left-0 z-50 flex h-14 w-full items-center justify-between border-t-2 border-gray-300 bg-white px-8">
+      <p className="font-semibold">{testName}</p>
+
+      <div className="absolute left-1/2 flex -translate-x-1/2 items-center gap-2">
+        <button
+          onClick={onPrevious}
+          className="rounded-md bg-black p-2 text-white"
+        >
+          <ChevronLeft className="size-5" />
+        </button>
+
+        <Popover>
+            <PopoverTrigger className="flex items-center gap-1 rounded-md bg-black px-4 py-2 text-sm font-bold text-white">
+                Question {currentFrqIndex + 1} of {totalFrqs}
+                <ChevronUp className="size-4" />
+            </PopoverTrigger>
+
+            <PopoverContent className="w-40">
+                <div className="flex flex-col gap-2">
+                {Array.from({ length: totalFrqs }).map((_, index) => (
+                    <button
+                    key={index}
+                    onClick={() => onJumpToFrq(index)}
+                    className={`rounded-md px-3 py-2 text-left text-sm ${
+                        index === currentFrqIndex
+                        ? "bg-[#294ad1] font-bold text-white"
+                        : "bg-gray-100 hover:bg-gray-200"
+                    }`}
+                    >
+                    FRQ {index + 1}
+                    </button>
+                ))}
+                </div>
+            </PopoverContent>
+            </Popover>
+
+        <button onClick={onNext} className="rounded-md bg-black p-2 text-white">
+          <ChevronRight className="size-5" />
+        </button>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <button
+          onClick={onPrevious}
+          className="rounded-full bg-[#294ad1] px-6 py-2 font-bold text-white"
+        >
+          Back
+        </button>
+
+        <button
+          onClick={onNext}
+          className="rounded-full bg-[#294ad1] px-6 py-2 font-bold text-white"
+        >
+          Next
+        </button>
+      </div>
+    </footer>
+  );
+}

From 0ec65b44d9b4aee4e42e01c8224a139da44907a2 Mon Sep 17 00:00:00 2001
From: Apurva <apurvask26@gmail.com>
Date: Tue, 14 Jul 2026 13:43:55 -0400
Subject: [PATCH 6/9] Updated frq footer

---
 src/components/global/frqFooter.tsx | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/components/global/frqFooter.tsx b/src/components/global/frqFooter.tsx
index cf809106..95a04ad3 100644
--- a/src/components/global/frqFooter.tsx
+++ b/src/components/global/frqFooter.tsx
@@ -11,14 +11,7 @@ interface FooterProps {
   onJumpToFrq: (index: number) => void;
 }
 
-export default function Footer({
-  testName,
-  currentFrqIndex,
-  totalFrqs,
-  onPrevious,
-  onNext,
-  onJumpToFrq,
-}: FooterProps) {
+export default function Footer({testName, currentFrqIndex, totalFrqs, onPrevious, onNext, onJumpToFrq,}: FooterProps) {
   return (
     <footer className="fixed bottom-0 left-0 z-50 flex h-14 w-full items-center justify-between border-t-2 border-gray-300 bg-white px-8">
       <p className="font-semibold">{testName}</p>

From 29e1d4055f126bfa80ed59e2497eab0d84c591ce Mon Sep 17 00:00:00 2001
From: Apurva <apurvask26@gmail.com>
Date: Sun, 19 Jul 2026 11:09:55 -0400
Subject: [PATCH 7/9] everything mostly working

---
 src/app/frq-feedback/[id]/page.tsx            |   4 +-
 .../frq/feedback/dropdownContent.tsx          |  90 +++++++++
 src/components/frq/feedback/fallbackData_2.ts | 165 +++++++++++++++++
 src/components/frq/feedback/fallbackdata.tsx  | 174 ++++++++++++++++++
 src/components/frq/feedback/footer.tsx        |  98 ++++++++++
 src/components/frq/feedback/header.tsx        |  17 ++
 src/components/frq/feedback/layout.tsx        |  89 +++++++++
 src/components/frq/feedback/leftSide.tsx      |  31 ++++
 src/components/frq/feedback/rightSide.tsx     |  80 ++++++++
 .../frq/feedback/rubricCriteriaRow.tsx        |  43 +++++
 src/components/frq/feedback/trying_smth.tsx   |  34 ++++
 src/components/frq/feedback/types.ts          |  72 ++++++++
 src/components/frq/feedbackRenderer.tsx       | 119 +++++++++++-
 src/components/global/frqFooter.tsx           |  58 ++++--
 src/lib/firebase.ts                           |  64 ++++++-
 15 files changed, 1103 insertions(+), 35 deletions(-)
 create mode 100644 src/components/frq/feedback/dropdownContent.tsx
 create mode 100644 src/components/frq/feedback/fallbackData_2.ts
 create mode 100644 src/components/frq/feedback/fallbackdata.tsx
 create mode 100644 src/components/frq/feedback/footer.tsx
 create mode 100644 src/components/frq/feedback/header.tsx
 create mode 100644 src/components/frq/feedback/layout.tsx
 create mode 100644 src/components/frq/feedback/leftSide.tsx
 create mode 100644 src/components/frq/feedback/rightSide.tsx
 create mode 100644 src/components/frq/feedback/rubricCriteriaRow.tsx
 create mode 100644 src/components/frq/feedback/trying_smth.tsx
 create mode 100644 src/components/frq/feedback/types.ts

diff --git a/src/app/frq-feedback/[id]/page.tsx b/src/app/frq-feedback/[id]/page.tsx
index 1187fb1f..ca59c9e7 100644
--- a/src/app/frq-feedback/[id]/page.tsx
+++ b/src/app/frq-feedback/[id]/page.tsx
@@ -45,9 +45,7 @@ const Page = () => {
 
   return (
   <div className="px-8 py-12">
-    <FRQFeedbackRenderer 
-      feedbackFound={status === "found"} 
-    />
+    <FRQFeedbackRenderer />
   </div>
   );
 };
diff --git a/src/components/frq/feedback/dropdownContent.tsx b/src/components/frq/feedback/dropdownContent.tsx
new file mode 100644
index 00000000..50e67694
--- /dev/null
+++ b/src/components/frq/feedback/dropdownContent.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { RenderContent } from "@/components/article-creator/custom_questions/RenderAdvancedTextbox";
+import RubricCriteriaRow from "./rubricCriteriaRow";
+import type {FRQPart,FRQPartFeedback,ResponseAnswer,} from "./types";
+import { Textarea } from "@/components/ui/textarea";
+
+interface FeedbackSectionProps {
+  part: FRQPart;
+  label: string;
+  answer?: ResponseAnswer;
+  partFeedback?: FRQPartFeedback;
+  isOpen: boolean;
+  onToggle: () => void;
+  onFeedbackChange: (feedback: string) => void;
+  onPointsChange: (criterionId: string, points:number) => void;
+}
+
+export default function FeedbackSection({part,label,answer,partFeedback,isOpen,onToggle,onFeedbackChange, onPointsChange}: FeedbackSectionProps) {
+  const pointsEarned =
+    partFeedback?.gradingCriteria.reduce(
+      (total, criterion) => total + criterion.points,
+      0,
+    ) ?? 0;
+
+  const pointsPossible = part.gradingCriteria.reduce((total, criterion) => total + criterion.points,0,);
+
+  return (
+    <div>
+      <button type="button" onClick={onToggle} className="flex w-full items-center bg-gray-100">
+        <span className="bg-black px-3 py-2 font-bold text-white">
+          {label}
+        </span>
+
+        <p className="flex-1 px-3 text-left font-bold">
+          {pointsEarned}/{pointsPossible} Points
+        </p>
+
+        <span className="px-3">
+          {isOpen ? (<ChevronDown className="size-5" />) : (<ChevronRight className="size-5" />)}
+        </span>
+      </button>
+
+      {isOpen && (<div className="mt-4 space-y-4">
+          <RenderContent content={part.prompt} origin="question"/>
+
+          <div className="rounded-md border border-gray-400 p-3">
+            <RenderContent
+              content={{
+                value:
+                  answer?.value ?? "No response submitted.",
+                files: [],
+              }}
+              origin="content"
+            />
+          </div>
+
+          <div>
+            {part.gradingCriteria.map((criterion) => {
+              const criterionScore =
+                partFeedback?.gradingCriteria.find(
+                  (score) =>
+                    score.criterionId === criterion.id,
+                );
+
+              return (
+                <RubricCriteriaRow
+                  key={criterion.id}
+                  criterion={criterion}
+                  points={criterionScore?.points ?? 0}
+                  onPointsChange={(points) =>
+                    onPointsChange(criterion.id, points)
+                  }                />
+              );
+            })}
+          </div>
+          <Textarea
+            value = {partFeedback?.feedback ?? ""}
+              onChange={(event) =>
+                onFeedbackChange(event.target.value)
+              }
+              placeholder="Enter feedback"
+              className = "min-h-24 resize-y border-gray-400"
+              />
+        </div>
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/frq/feedback/fallbackData_2.ts b/src/components/frq/feedback/fallbackData_2.ts
new file mode 100644
index 00000000..bef56619
--- /dev/null
+++ b/src/components/frq/feedback/fallbackData_2.ts
@@ -0,0 +1,165 @@
+export const fallbackFeedbackData = {
+  "name": "AP Human Geography FRQ 1",
+  "creatorID": "1259823594",
+  "mostRecentEditor": "1259823594",
+  "id": "43281",
+  "isVisible": true,
+  "feedback": {
+    "id": "47231",
+    "graderId": "964923741",
+    "submittedAt": "2026-07-13T18:30:00Z",
+    "questions": [
+      {
+        "questionId": "53213",
+        "feedback": "",
+        "gradingCriteria": [
+          {
+            "criterionId": "59684",
+            "points": 3
+          },
+          {
+            "criterionId": "85931",
+            "points": 1
+          }
+        ]
+      },
+      {
+        "questionId": "53214",
+        "feedback": "",
+        "gradingCriteria": [
+          {
+            "criterionId": "59685",
+            "points": 1
+          },
+          {
+            "criterionId": "85930",
+            "points": 1
+          }
+        ]
+      },
+      {
+        "questionId": "63213",
+        "feedback": "",
+        "gradingCriteria": [
+          {
+            "criterionId": "69684",
+            "points": 3
+          },
+          {
+            "criterionId": "75931",
+            "points": 0
+          }
+        ]
+      }
+    ]
+  },
+  "response": {
+    "id": "47231",
+    "userId": "3749237134",
+    "submittedAt": "2026-07-13T18:30:00Z",
+    "answers": [
+      {
+        "questionId": "53213",
+        "value": "1-1 Answer"
+      },
+      {
+        "questionId": "53214",
+        "value": "1-2 Answer"
+      },
+      {
+        "questionId": "63213",
+        "value": "2-1 Answer"
+      }
+    ]
+  },
+  "frqs": [
+    {
+      "id": "12345",
+      "name": "FRQ 1",
+      "description": {
+        "value": "Choice A is incorrect. As $@x = 1$ is a vertical asymptote, the limit as the function approaches that value will not be a definite number, but some infinity. Choice B is incorrect. It is true that as the limit of a function approaches a vertical asymptote, it will approach an infinity. However, we can use simple numerical logic to guide and realize that $@\\displaystyle\\frac{0.9999}{0.9999^2 - 1}$ will be negative, since $@1^-$ indicates a quantity that is slightly smaller than 1. Choice C is correct. A vertical asymptote exists at $@x = 1$, so the one-sided limit will yield an infinite value. As $@x$ approaches $@1$ from the left of the function, the denominator approaches a very small negative value and the numerator is positive. This evaluates to a large negative number, indicating that the limit is $@-\\infty$. Choice D is incorrect. To some extent, it is true that if a limit approaches infinity, it is a case of DNE since it experiences unbounded change. HOWEVER, the convention will ALWAYS be to specify whether or not it is a $@\\pm \\infty$, which makes C a better answer.",
+        "files": []
+      },
+      "isVisible": true,
+      "questions": [
+        {
+          "id": "53213",
+          "name": "Question 1",
+          "isVisible": true,
+          "prompt": {
+            "value": "This is a prompt for frq 1 question 1",
+            "files": []
+          },
+          "answerType": "text",
+          "gradingCriteria": [
+            {
+              "id": "59684",
+              "text": "Correct Grammar",
+              "points": 4
+            },
+            {
+              "id": "85931",
+              "text": "Mentions Demographics",
+              "points": 2
+            }
+          ]
+        },
+        {
+          "id": "53214",
+          "name": "Question 2",
+          "isVisible": true,
+          "prompt": {
+            "value": "This is a prompt for frq 1 question 2",
+            "files": []
+          },
+          "answerType": "text",
+          "gradingCriteria": [
+            {
+              "id": "59685",
+              "text": "Correct Math",
+              "points": 1
+            },
+            {
+              "id": "85930",
+              "text": "Aura",
+              "points": 2
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "95312",
+      "name": "FRQ 2",
+      "description": {
+        "value": "Choice A is incorrect. As $@x = 1$ is a vertical asymptote, the limit as the function approaches that value will not be a definite number, but some infinity. Choice B is incorrect. It is true that as the limit of a function approaches a vertical asymptote, it will approach an infinity. However, we can use simple numerical logic to guide and realize that $@\\displaystyle\\frac{0.9999}{0.9999^2 - 1}$ will be negative, since $@1^-$ indicates a quantity that is slightly smaller than 1. Choice C is correct. A vertical asymptote exists at $@x = 1$, so the one-sided limit will yield an infinite value. As $@x$ approaches $@1$ from the left of the function, the denominator approaches a very small negative value and the numerator is positive. This evaluates to a large negative number, indicating that the limit is $@-\\infty$.",
+        "files": []
+      },
+      "isVisible": true,
+      "questions": [
+        {
+          "id": "63213",
+          "name": "Question 1",
+          "isVisible": true,
+          "prompt": {
+            "value": "This is a prompt for frq 2 question 1",
+            "files": []
+          },
+          "answerType": "text",
+          "gradingCriteria": [
+            {
+              "id": "69684",
+              "text": "Correct Grammar",
+              "points": 4
+            },
+            {
+              "id": "75931",
+              "text": "Mentions Demographics",
+              "points": 2
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
\ No newline at end of file
diff --git a/src/components/frq/feedback/fallbackdata.tsx b/src/components/frq/feedback/fallbackdata.tsx
new file mode 100644
index 00000000..a2b5ef3c
--- /dev/null
+++ b/src/components/frq/feedback/fallbackdata.tsx
@@ -0,0 +1,174 @@
+// import type { FRQFeedbackDocument } from "./types";
+
+// export const fallbackFeedbackData: FRQFeedbackDocument = {
+//   name: "AP Human Geography FRQ 1",
+//   creatorId: "1259823594",
+//   mostRecentEditor: "1259823594",
+//   id: "43281",
+//   isVisible: true,
+
+//   feedback: {
+//     id: "47231",
+//     graderId: "964923741",
+//     submittedAt: "2026-07-13T18:30:00Z",
+//     questions: [
+//       {
+//         questionId: "53213",
+//         graderFeedback:
+//           "This is a very solid response. Work on your evidence and make sure to explain the demographic shift more clearly in future answers.",
+//         gradingCriteria: [
+//           {
+//             criterionId: "59684",
+//             awardedPoints: 3,
+//           },
+//           {
+//             criterionId: "85931",
+//             awardedPoints: 1,
+//           },
+//         ],
+//       },
+//       {
+//         questionId: "53214",
+//         graderFeedback: "This answer needs more explanation.",
+//         gradingCriteria: [
+//           {
+//             criterionId: "59685",
+//             awardedPoints: 1,
+//           },
+//           {
+//             criterionId: "85930",
+//             awardedPoints: 1,
+//           },
+//         ],
+//       },
+//       {
+//         questionId: "63213",
+//         graderFeedback:
+//           "Good start, but the evidence could be stronger.",
+//         gradingCriteria: [
+//           {
+//             criterionId: "69684",
+//             awardedPoints: 3,
+//           },
+//           {
+//             criterionId: "75931",
+//             awardedPoints: 0,
+//           },
+//         ],
+//       },
+//     ],
+//   },
+
+//   response: {
+//     id: "47231",
+//     userId: "3749237134",
+//     submittedAt: "2026-07-13T18:30:00Z",
+//     answers: [
+//       {
+//         questionId: "53213",
+//         value: "1-1 Answer",
+//       },
+//       {
+//         questionId: "53214",
+//         value: "1-2 Answer",
+//       },
+//       {
+//         questionId: "63213",
+//         value: "2-1 Answer",
+//       },
+//     ],
+//   },
+
+//   frqs: [
+//     {
+//       id: "12345",
+//       name: "FRQ 1",
+//       description: {
+//         value:
+//           "Choice A is incorrect. As $@x = 1$ is a vertical asymptote, the limit as the function approaches that value will not be a definite number, but some infinity. Choice B is incorrect. It is true that as the limit of a function approaches a vertical asymptote, it will approach an infinity. However, we can use simple numerical logic to guide and realize that $@\\displaystyle\\frac{0.9999}{0.9999^2 - 1}$ will be negative, since $@1^-$ indicates a quantity that is slightly smaller than 1. Choice C is correct. A vertical asymptote exists at $@x = 1$, so the one-sided limit will yield an infinite value. As $@x$ approaches $@1$ from the left of the function, the denominator approaches a very small negative value and the numerator is positive. This evaluates to a large negative number, indicating that the limit is $@-\\infty$. Choice D is incorrect. To some extent, it is true that if a limit approaches infinity, it is a case of DNE since it experiences unbounded change. HOWEVER, the convention will ALWAYS be to specify whether or not it is a $@\\pm \\infty$, which makes C a better answer.",
+//         files: [],
+//       },
+//       isVisible: true,
+//       questions: [
+//         {
+//           id: "53213",
+//           name: "Question 1",
+//           isVisible: true,
+//           prompt: {
+//             value: "This is a prompt for frq 1 question 1",
+//             files: [],
+//           },
+//           answerType: "text",
+//           gradingCriteria: [
+//             {
+//               id: "59684",
+//               text: "Correct Grammar",
+//               possiblePoints: 4,
+//             },
+//             {
+//               id: "85931",
+//               text: "Mentions Demographics",
+//               possiblePoints: 2,
+//             },
+//           ],
+//         },
+//         {
+//           id: "53214",
+//           name: "Question 2",
+//           isVisible: true,
+//           prompt: {
+//             value: "This is a prompt for frq 1 question 2",
+//             files: [],
+//           },
+//           answerType: "text",
+//           gradingCriteria: [
+//             {
+//               id: "59685",
+//               text: "Correct Math",
+//               possiblePoints: 1,
+//             },
+//             {
+//               id: "85930",
+//               text: "Aura",
+//               possiblePoints: 2,
+//             },
+//           ],
+//         },
+//       ],
+//     },
+//     {
+//       id: "95312",
+//       name: "FRQ 2",
+//       description: {
+//         value:
+//           "Choice A is incorrect. As $@x = 1$ is a vertical asymptote, the limit as the function approaches that value will not be a definite number, but some infinity. Choice B is incorrect. It is true that as the limit of a function approaches a vertical asymptote, it will approach an infinity. However, we can use simple numerical logic to guide and realize that $@\\displaystyle\\frac{0.9999}{0.9999^2 - 1}$ will be negative, since $@1^-$ indicates a quantity that is slightly smaller than 1. Choice C is correct. A vertical asymptote exists at $@x = 1$, so the one-sided limit will yield an infinite value. As $@x$ approaches $@1$ from the left of the function, the denominator approaches a very small negative value and the numerator is positive. This evaluates to a large negative number, indicating that the limit is $@-\\infty$.",
+//         files: [],
+//       },
+//       isVisible: true,
+//       questions: [
+//         {
+//           id: "63213",
+//           name: "Question 1",
+//           isVisible: true,
+//           prompt: {
+//             value: "This is a prompt for frq 2 question 1",
+//             files: [],
+//           },
+//           answerType: "text",
+//           gradingCriteria: [
+//             {
+//               id: "69684",
+//               text: "Correct Grammar",
+//               possiblePoints: 4,
+//             },
+//             {
+//               id: "75931",
+//               text: "Mentions Demographics",
+//               possiblePoints: 2,
+//             },
+//           ],
+//         },
+//       ],
+//     },
+//   ],
+// };
\ No newline at end of file
diff --git a/src/components/frq/feedback/footer.tsx b/src/components/frq/feedback/footer.tsx
new file mode 100644
index 00000000..906f4849
--- /dev/null
+++ b/src/components/frq/feedback/footer.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { ChevronLeft, ChevronRight, ChevronUp, MapPin, X } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
+import { useState } from "react";
+
+
+interface FooterProps {
+  testName: string;
+  currentFrqIndex: number;
+  totalFrqs: number;
+  onPrevious: () => void;
+  onNext: () => void;
+  onJumpToFrq: (index: number) => void;
+}
+
+export default function Footer({testName, currentFrqIndex, totalFrqs, onPrevious, onNext, onJumpToFrq,}: FooterProps) {
+  const [navigationOpen, setNavigationOpen] = useState(false);
+
+  return (
+    <footer className="fixed bottom-0 left-0 z-50 flex h-14 w-full items-center justify-between border-t-2 border-gray-300 bg-white px-8">
+      <p className="font-semibold">{testName}</p>
+
+      <div className="absolute left-1/2 flex -translate-x-1/2 items-center gap-2">
+        <button
+          onClick={onPrevious}
+          className="rounded-md bg-black p-2 text-white"
+        >
+          <ChevronLeft className="size-5" />
+        </button>
+
+        <Popover open={navigationOpen} onOpenChange={setNavigationOpen}>
+            <PopoverTrigger className="flex items-center gap-1 rounded-md bg-black px-4 py-2 text-sm font-bold text-white">
+                Question {currentFrqIndex + 1} of {totalFrqs}
+                <ChevronUp className="size-4" />
+            </PopoverTrigger>
+
+            <PopoverContent className="w-[480px] p-0">
+              <div className="rounded-md bg-white">
+                <div className="relative px-8 py-5 text-center">
+                  <h2 className="text-xl font-bold">{testName} Questions</h2>
+
+              <button
+                type="button"
+                aria-label="Close question navigation"
+                onClick={() => setNavigationOpen(false)}
+                className="absolute right-5 top-5"
+              >
+                <X className="size-5" />
+              </button>
+                </div>
+
+                <div className="border-t border-gray-300" />
+
+                <div className="px-8 py-8">
+                  <div className="grid grid-cols-6 gap-x-5 gap-y-8">
+                    {Array.from({ length: totalFrqs }).map((_, index) => (
+                      <button
+                        key={index}
+                        onClick={() => {onJumpToFrq(index); setNavigationOpen(false);}}                        
+                        className="relative flex size-10 items-center justify-center border-2 border-transparent bg-[#294ad1] text-base font-bold text-white"
+                      >
+                        {index + 1}
+
+                        {index === currentFrqIndex && (
+                          <MapPin className="absolute -top-7 size-5 fill-white stroke-black" />
+                        )}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </PopoverContent>
+            </Popover>
+
+        <button onClick={onNext} className="rounded-md bg-black p-2 text-white">
+          <ChevronRight className="size-5" />
+        </button>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <button
+          onClick={onPrevious}
+          className="rounded-full bg-[#294ad1] px-6 py-2 font-bold text-white"
+        >
+          Back
+        </button>
+
+        <button
+          onClick={onNext}
+          className="rounded-full bg-[#294ad1] px-6 py-2 font-bold text-white"
+        >
+          Next
+        </button>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/components/frq/feedback/header.tsx b/src/components/frq/feedback/header.tsx
new file mode 100644
index 00000000..e4f8a3c1
--- /dev/null
+++ b/src/components/frq/feedback/header.tsx
@@ -0,0 +1,17 @@
+import { LogOut } from "lucide-react";
+
+
+export default function Header({ earnedPoints, totalPoints }: {earnedPoints: number; totalPoints: number;}) {
+  return (
+    <header className="fixed left-0 top-0 z-50 flex h-16 w-full items-center justify-center border-b-2 border-gray-300 bg-white px-8">
+      <p className="font-semibold">
+        {earnedPoints}/{totalPoints} Points Earned
+      </p>
+
+      <button className="absolute right-8 flex items-center gap-2 font-semibold text-red-500">
+        <LogOut className="size-5" />
+        Return to Dashboard
+      </button>
+    </header>
+  );
+}
\ No newline at end of file
diff --git a/src/components/frq/feedback/layout.tsx b/src/components/frq/feedback/layout.tsx
new file mode 100644
index 00000000..cf6ea6bd
--- /dev/null
+++ b/src/components/frq/feedback/layout.tsx
@@ -0,0 +1,89 @@
+import Header from "./header";
+import Footer from "./footer";
+import LeftSide from "./leftSide";
+import QuestionFeedback from "./rightSide";
+import type {
+  FRQFeedbackDocument,
+  FRQQuestion,
+} from "./types";
+
+interface LayoutProps {
+  feedbackData: FRQFeedbackDocument;
+  currentFrq: FRQQuestion;
+  currentFrqIndex: number;
+  onPrevious: () => void;
+  onNext: () => void;
+  onJumpToFrq: (index: number) => void;
+  onFeedbackChange: (questionId: string, feedback: string) => void;
+  onPointsChange: (questionId: string, criterionId: string, points: number)=> void;
+}
+
+export default function Layout({
+  feedbackData,
+  currentFrq,
+  currentFrqIndex,
+  onPrevious,
+  onNext,
+  onJumpToFrq,
+  onFeedbackChange,
+  onPointsChange,
+}: LayoutProps) {
+  const earnedPoints =
+    feedbackData.feedback.questions.reduce(
+      (feedbackTotal, partFeedback) =>
+        feedbackTotal +
+        partFeedback.gradingCriteria.reduce(
+          (partTotal, criterionScore) =>
+            partTotal + criterionScore.points,
+          0,
+        ),
+      0,
+    );
+
+  const totalPoints = feedbackData.frqs.reduce(
+    (frqTotal, frq) =>
+      frqTotal +
+      frq.questions.reduce(
+        (partTotal, part) =>
+          partTotal +
+          part.gradingCriteria.reduce(
+            (criterionTotal, criterion) =>
+              criterionTotal + criterion.points,
+            0,
+          ),
+        0,
+      ),
+    0,
+  );
+
+  return (
+    <div className="min-h-screen bg-white text-black">
+      <Header
+        earnedPoints={earnedPoints}
+        totalPoints={totalPoints}
+      />
+
+      <main className="grid h-screen grid-cols-2 pt-16 pb-14">
+        <div className="border-r-2 border-gray-400">
+          <LeftSide description={currentFrq.description} />
+        </div>
+
+        <QuestionFeedback
+          frq={currentFrq}
+          feedbackData={feedbackData}
+          onFeedbackChange={onFeedbackChange}
+          onPointsChange={onPointsChange}
+        />
+      </main>
+
+      <Footer
+        testName={feedbackData.name}
+        currentFrqIndex={currentFrqIndex}
+        totalFrqs={feedbackData.frqs.length}
+        onPrevious={onPrevious}
+        onNext={onNext}
+        onJumpToFrq={onJumpToFrq}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/frq/feedback/leftSide.tsx b/src/components/frq/feedback/leftSide.tsx
new file mode 100644
index 00000000..6ab1df3b
--- /dev/null
+++ b/src/components/frq/feedback/leftSide.tsx
@@ -0,0 +1,31 @@
+
+
+
+
+//----------------------------------------------------------------------
+//REVIEW THIS ENTIRE THING
+//----------------------------------------------------------------------
+
+
+
+
+
+
+
+
+import { RenderContent } from "@/components/article-creator/custom_questions/RenderAdvancedTextbox";
+import type { QuestionInput } from "@/types/questions";
+
+interface DescriptionPanelProps {
+  description: QuestionInput;
+}
+
+export default function DescriptionPanel({
+  description,
+}: DescriptionPanelProps) {
+  return (
+    <section className="h-full overflow-y-auto px-16 py-10">
+      <RenderContent content={description} origin="content" />
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/frq/feedback/rightSide.tsx b/src/components/frq/feedback/rightSide.tsx
new file mode 100644
index 00000000..b49558a7
--- /dev/null
+++ b/src/components/frq/feedback/rightSide.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import FeedbackSection from "./dropdownContent";
+import type {
+  FRQFeedbackDocument,
+  FRQQuestion,
+} from "./types";
+
+
+export default function QuestionFeedback({frq, feedbackData, onFeedbackChange, onPointsChange}: {frq: FRQQuestion, feedbackData: FRQFeedbackDocument, onFeedbackChange:(questionId: string, feedback:string,)=> void; onPointsChange: (questionId:string, criterionId: string, points: number)=> void;}) {
+  const [openParts, setOpenParts] = useState<string[]>(frq.questions[0] ? [frq.questions[0].id] : [],);
+
+  useEffect(() => {
+    setOpenParts(
+      frq.questions[0] ? [frq.questions[0].id] : [],
+    );
+  }, [frq]);
+
+  const togglePart = (partId: string) => {
+    setOpenParts((currentParts) =>
+      currentParts.includes(partId)
+        ? currentParts.filter((id) => id !== partId)
+        : [...currentParts, partId],
+    );
+  };
+
+  const closeAll = () => {setOpenParts([]);};
+
+  return (
+    <section className="h-full overflow-y-auto px-16 py-10">
+      <div className="mb-6 flex items-center justify-between">
+        <h1 className="text-xl font-bold">
+          {frq.name} | {frq.questions.length} Questions
+        </h1>
+
+        <button
+          type="button"
+          onClick={closeAll}
+          className="rounded-md bg-black px-10 py-2 font-semibold text-white"
+        >
+          Close All
+        </button>
+      </div>
+
+      <div className="space-y-6">
+        {frq.questions.map((part, index) => {
+          const answer = feedbackData.response.answers.find(
+            (item) => item.questionId === part.id,
+          );
+
+          const partFeedback =
+            feedbackData.feedback.questions.find(
+              (item) => item.questionId === part.id,
+            );
+
+          return (
+            <FeedbackSection
+              key={part.id}
+              part={part}
+              label={String.fromCharCode(65 + index)}
+              answer={answer}
+              partFeedback={partFeedback}
+              isOpen={openParts.includes(part.id)}
+              onToggle={() => togglePart(part.id)}
+              onFeedbackChange={(feedback)=> onFeedbackChange(part.id, feedback)}
+              onPointsChange={(criterionId, points) =>
+                onPointsChange(
+                  part.id,
+                  criterionId,
+                  points,
+                )
+              }
+              />
+          );
+        })}
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/src/components/frq/feedback/rubricCriteriaRow.tsx b/src/components/frq/feedback/rubricCriteriaRow.tsx
new file mode 100644
index 00000000..48c4ba5b
--- /dev/null
+++ b/src/components/frq/feedback/rubricCriteriaRow.tsx
@@ -0,0 +1,43 @@
+
+
+
+"use client";
+
+import { useState, useEffect } from "react";
+import type { GradingCriterion } from "./types";
+
+
+
+export default function RubricCriteriaRow({criterion, points, onPointsChange}: {criterion: GradingCriterion, points: number, onPointsChange: (points:number)=>void;}) {
+  const [earnedPoints, setEarnedPoints] = useState(points);
+  useEffect(()=> {
+    setEarnedPoints(points);}, [points]
+  );
+  const updatePoints = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const newPoints = Number(event.target.value);
+  const boundedPoints = Math.min(Math.max(newPoints, 0), criterion.points);
+  setEarnedPoints(boundedPoints);
+  onPointsChange(boundedPoints)};
+  return (
+    <div className="mb-2 flex items-center gap-3">
+      <p className="flex-1 rounded-md border border-gray-300 px-3 py-1">
+        {criterion.text}
+      </p>
+
+      <div className="flex items-baseline gap-1">
+        <input
+          type="number"
+          min={0}
+          max={criterion.points}
+          value={earnedPoints}
+          onChange={updatePoints}
+          className="w-10 rounded border border-gray-300 text-center text-2xl font-semibold"
+        />
+
+        <span className="text-base">/{criterion.points}</span>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/frq/feedback/trying_smth.tsx b/src/components/frq/feedback/trying_smth.tsx
new file mode 100644
index 00000000..960c8d6e
--- /dev/null
+++ b/src/components/frq/feedback/trying_smth.tsx
@@ -0,0 +1,34 @@
+
+
+export default function Header({earnedPoints, totalPoints,}: {earnedPoints: number;totalPoints: number;}) {
+  return (
+    <header>
+      {earnedPoints}/{totalPoints} Points Earned
+    </header>
+  );
+}
+
+
+
+
+export function Footer (haha: {haha: string;}){
+    return(
+        <>
+        "HAHAHAAH" {haha}
+        </>
+    );
+}
+
+
+
+export function Layout ({haha, bla_bla}: {haha: any, bla_bla: any}){
+    return(
+        <>
+        <Footer
+            haha={haha}
+            bla_bla = {bla_bla}
+        />
+        hahah
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/frq/feedback/types.ts b/src/components/frq/feedback/types.ts
new file mode 100644
index 00000000..f435a7da
--- /dev/null
+++ b/src/components/frq/feedback/types.ts
@@ -0,0 +1,72 @@
+import type { QuestionInput } from "@/types/questions";
+
+export interface RubricScore {
+  criterionId: string;
+  points: number;
+}
+
+
+export interface FRQPartFeedback {
+  questionId: string;
+  feedback: string;
+  gradingCriteria: RubricScore[];
+}
+
+
+export interface FRQFeedback {
+  id: string;
+  graderId: string;
+  submittedAt: string;
+  questions: FRQPartFeedback[];
+}
+
+export interface ResponseAnswer {
+  questionId: string;
+  value: string;
+}
+
+
+export interface FRQResponse {
+  id: string;
+  userId: string;
+  submittedAt: string;
+  answers: ResponseAnswer[];
+}
+
+
+export interface GradingCriterion {
+  id: string;
+  text: string;
+  points: number;
+}
+
+
+export interface FRQPart {
+  id: string;
+  name: string;
+  isVisible: boolean;
+  prompt: QuestionInput;
+  answerType: "text";
+  gradingCriteria: GradingCriterion[];
+}
+
+
+export interface FRQQuestion {
+  id: string;
+  name: string;
+  description: QuestionInput;
+  isVisible: boolean;
+  questions: FRQPart[];
+}
+
+
+export interface FRQFeedbackDocument {
+  name: string;
+  creatorID: string;
+  mostRecentEditor: string;
+  id: string;
+  isVisible: boolean;
+  feedback: FRQFeedback;
+  response: FRQResponse;
+  frqs: FRQQuestion[];
+}
\ No newline at end of file
diff --git a/src/components/frq/feedbackRenderer.tsx b/src/components/frq/feedbackRenderer.tsx
index 8bcfb4bb..0c4a0b53 100644
--- a/src/components/frq/feedbackRenderer.tsx
+++ b/src/components/frq/feedbackRenderer.tsx
@@ -1,12 +1,115 @@
-interface Props {
-   feedbackFound: boolean;
+"use client";
+
+import { useState } from "react";
+import Layout from "./feedback/layout";
+import type { FRQFeedbackDocument } from "./feedback/types";
+import { fallbackFeedbackData } from "./feedback/fallbackData_2";
+
+interface FRQFeedbackRendererProps {
+  feedbackData?: FRQFeedbackDocument;
 }
 
-export default function FRQFeedbackRenderer({ feedbackFound }: Props) {
-   if (feedbackFound) {
-     return <p>Success.</p>;
-   }
-   return <p>Failed.</p>;
- }
+export default function FRQFeedbackRenderer({feedbackData,}: FRQFeedbackRendererProps) {
+  const [currentFrqIndex, setCurrentFrqIndex] = useState(0);
+
+  const initialData =feedbackData ?? (fallbackFeedbackData as FRQFeedbackDocument);
+
+  const[data, setData] = useState<FRQFeedbackDocument>(() => structuredClone(initialData));
+
+  const currentFrq = data.frqs[currentFrqIndex];
+
+  const goToPreviousFrq = () => {setCurrentFrqIndex((currentIndex) =>Math.max(currentIndex - 1, 0),);};
+
+  const goToNextFrq = () => {setCurrentFrqIndex((currentIndex) => Math.min(currentIndex + 1, data.frqs.length - 1),);};
+
+  const jumpToFrq = (index: number) => {
+    if (index < 0 || index >= data.frqs.length) {
+      return;
+    }
+
+    setCurrentFrqIndex(index);
+  };
 
+  const updatePartFeedback = (questionId: string, feedback: string,) => {
+    setData((currentData) => ({
+      ...currentData, 
+      feedback: {
+        ...currentData.feedback, 
+        questions: currentData.feedback.questions.map(
+          (question)=> question.questionId === questionId
+          ?{
+            ...question, feedback,}: question,
+    ),
+  },
+}));
+  };
+
+
+const updateCriterionPoints = (questionId: string,criterionId: string,points: number) => {
+  setData((currentData) => {
+    const part = currentData.frqs
+      .flatMap((frq) => frq.questions)
+      .find((item) => item.id === questionId);
+
+    const criterionDefinition =
+      part?.gradingCriteria.find(
+        (criterion) =>
+          criterion.id === criterionId,
+      );
+
+    if (!criterionDefinition) {
+      return currentData;
+    }
+
+    const boundedPoints = Math.min(
+      Math.max(points, 0),
+      criterionDefinition.points,
+    );
+
+    return {
+      ...currentData,
+      feedback: {
+        ...currentData.feedback,
+        questions:
+          currentData.feedback.questions.map(
+            (question) =>
+              question.questionId !== questionId
+                ? question
+                : {
+                    ...question,
+                    gradingCriteria:
+                      question.gradingCriteria.map(
+                        (criterion) =>
+                          criterion.criterionId ===
+                          criterionId
+                            ? {
+                                ...criterion,
+                                points:
+                                  boundedPoints,
+                              }
+                            : criterion,
+                      ),
+                  },
+          ),
+      },
+    };
+  });
+};
+
+if (!currentFrq) {
+  return <p>No FRQ feedback available.</p>;
+}
 
+return (
+  <Layout
+    feedbackData={data}
+    currentFrq={currentFrq}
+    currentFrqIndex={currentFrqIndex}
+    onPrevious={goToPreviousFrq}
+    onNext={goToNextFrq}
+    onJumpToFrq={jumpToFrq}
+    onFeedbackChange={updatePartFeedback}
+    onPointsChange={updateCriterionPoints}
+  />
+);
+}
\ No newline at end of file
diff --git a/src/components/global/frqFooter.tsx b/src/components/global/frqFooter.tsx
index 95a04ad3..906f4849 100644
--- a/src/components/global/frqFooter.tsx
+++ b/src/components/global/frqFooter.tsx
@@ -1,5 +1,8 @@
-import { ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
+"use client";
+
+import { ChevronLeft, ChevronRight, ChevronUp, MapPin, X } from "lucide-react";
 import { Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
+import { useState } from "react";
 
 
 interface FooterProps {
@@ -12,6 +15,8 @@ interface FooterProps {
 }
 
 export default function Footer({testName, currentFrqIndex, totalFrqs, onPrevious, onNext, onJumpToFrq,}: FooterProps) {
+  const [navigationOpen, setNavigationOpen] = useState(false);
+
   return (
     <footer className="fixed bottom-0 left-0 z-50 flex h-14 w-full items-center justify-between border-t-2 border-gray-300 bg-white px-8">
       <p className="font-semibold">{testName}</p>
@@ -24,28 +29,47 @@ export default function Footer({testName, currentFrqIndex, totalFrqs, onPrevious
           <ChevronLeft className="size-5" />
         </button>
 
-        <Popover>
+        <Popover open={navigationOpen} onOpenChange={setNavigationOpen}>
             <PopoverTrigger className="flex items-center gap-1 rounded-md bg-black px-4 py-2 text-sm font-bold text-white">
                 Question {currentFrqIndex + 1} of {totalFrqs}
                 <ChevronUp className="size-4" />
             </PopoverTrigger>
 
-            <PopoverContent className="w-40">
-                <div className="flex flex-col gap-2">
-                {Array.from({ length: totalFrqs }).map((_, index) => (
-                    <button
-                    key={index}
-                    onClick={() => onJumpToFrq(index)}
-                    className={`rounded-md px-3 py-2 text-left text-sm ${
-                        index === currentFrqIndex
-                        ? "bg-[#294ad1] font-bold text-white"
-                        : "bg-gray-100 hover:bg-gray-200"
-                    }`}
-                    >
-                    FRQ {index + 1}
-                    </button>
-                ))}
+            <PopoverContent className="w-[480px] p-0">
+              <div className="rounded-md bg-white">
+                <div className="relative px-8 py-5 text-center">
+                  <h2 className="text-xl font-bold">{testName} Questions</h2>
+
+              <button
+                type="button"
+                aria-label="Close question navigation"
+                onClick={() => setNavigationOpen(false)}
+                className="absolute right-5 top-5"
+              >
+                <X className="size-5" />
+              </button>
+                </div>
+
+                <div className="border-t border-gray-300" />
+
+                <div className="px-8 py-8">
+                  <div className="grid grid-cols-6 gap-x-5 gap-y-8">
+                    {Array.from({ length: totalFrqs }).map((_, index) => (
+                      <button
+                        key={index}
+                        onClick={() => {onJumpToFrq(index); setNavigationOpen(false);}}                        
+                        className="relative flex size-10 items-center justify-center border-2 border-transparent bg-[#294ad1] text-base font-bold text-white"
+                      >
+                        {index + 1}
+
+                        {index === currentFrqIndex && (
+                          <MapPin className="absolute -top-7 size-5 fill-white stroke-black" />
+                        )}
+                      </button>
+                    ))}
+                  </div>
                 </div>
+              </div>
             </PopoverContent>
             </Popover>
 
diff --git a/src/lib/firebase.ts b/src/lib/firebase.ts
index 7449de96..2196cca7 100644
--- a/src/lib/firebase.ts
+++ b/src/lib/firebase.ts
@@ -1,10 +1,43 @@
-"use client"
+// "use client"
+
+// import { initializeApp } from "firebase/app";
+// import { getAuth } from "firebase/auth";
+// import { getFirestore } from "firebase/firestore";
+// import { getStorage } from "firebase/storage";
+
+// import { env } from "@/env.js";
+
+// const firebaseConfig = {
+//   apiKey: env.NEXT_PUBLIC_FIREBASE_API_KEY,
+//   authDomain: env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+//   projectId: env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+//   storageBucket: env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+//   messagingSenderId: env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+//   appId: env.NEXT_PUBLIC_FIREBASE_APP_ID,
+//   measurementId: env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
+// };
+
+// const app = initializeApp(firebaseConfig);
+// const db = getFirestore(app);
+// const auth = getAuth(app);
+// const storage = getStorage(app);
+
+// export { db, auth, storage };
+// export default app;
+
 
-import { initializeApp } from "firebase/app";
-import { getAuth } from "firebase/auth";
-import { getFirestore } from "firebase/firestore";
-import { getStorage } from "firebase/storage";
 
+//TO START EMULATORS, DO THIS: npx -y firebase-tools@latest emulators:start
+
+"use client";
+
+import { getApp, getApps, initializeApp } from "firebase/app";
+import { connectAuthEmulator, getAuth } from "firebase/auth";
+import {
+  connectFirestoreEmulator,
+  getFirestore,
+} from "firebase/firestore";
+import { getStorage } from "firebase/storage";
 import { env } from "@/env.js";
 
 const firebaseConfig = {
@@ -17,10 +50,27 @@ const firebaseConfig = {
   measurementId: env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
 };
 
-const app = initializeApp(firebaseConfig);
+const app = getApps().length ? getApp() : initializeApp(firebaseConfig);
+
 const db = getFirestore(app);
 const auth = getAuth(app);
 const storage = getStorage(app);
 
-export { db, auth, storage };
+const useEmulators =
+  process.env.NODE_ENV === "development" &&
+  typeof window !== "undefined" &&
+  ["localhost", "127.0.0.1"].includes(window.location.hostname);
+
+if (useEmulators) {
+  try {
+    connectFirestoreEmulator(db, "127.0.0.1", 8080);
+    connectAuthEmulator(auth, "http://127.0.0.1:9099", {
+      disableWarnings: true,
+    });
+  } catch {
+    // Next.js hot reload may evaluate this module after emulators are connected.
+  }
+}
+
+export { app, db, auth, storage };
 export default app;
\ No newline at end of file

From 7593dd78f81c9fda30b946d6d94ffec5a8aa0afa Mon Sep 17 00:00:00 2001
From: Apurva <apurvask26@gmail.com>
Date: Sun, 19 Jul 2026 16:45:47 -0400
Subject: [PATCH 8/9] Designed FRQ Feedback Page to match the mockup + added
 the functionalities to ensure everything works

---
 src/app/frq-feedback/[id]/page.tsx            |  21 +--
 .../frq/feedback/dropdownContent.tsx          |  69 ++++---
 src/components/frq/feedback/fallBackData.ts   | 167 +++++++++++++++++
 src/components/frq/feedback/fallbackData_2.ts | 165 -----------------
 src/components/frq/feedback/fallbackdata.tsx  | 174 ------------------
 src/components/frq/feedback/footer.tsx        |  91 +++++----
 src/components/frq/feedback/header.tsx        |  13 +-
 src/components/frq/feedback/layout.tsx        |  45 ++---
 src/components/frq/feedback/leftSide.tsx      |  19 +-
 src/components/frq/feedback/rightSide.tsx     |  57 +++---
 .../frq/feedback/rubricCriteriaRow.tsx        |  36 ++--
 src/components/frq/feedback/trying_smth.tsx   |  34 ----
 src/components/frq/feedback/types.ts          |   9 +-
 src/components/frq/feedbackRenderer.tsx       | 165 +++++++++--------
 14 files changed, 437 insertions(+), 628 deletions(-)
 create mode 100644 src/components/frq/feedback/fallBackData.ts
 delete mode 100644 src/components/frq/feedback/fallbackData_2.ts
 delete mode 100644 src/components/frq/feedback/fallbackdata.tsx
 delete mode 100644 src/components/frq/feedback/trying_smth.tsx

diff --git a/src/app/frq-feedback/[id]/page.tsx b/src/app/frq-feedback/[id]/page.tsx
index ca59c9e7..36d7798a 100644
--- a/src/app/frq-feedback/[id]/page.tsx
+++ b/src/app/frq-feedback/[id]/page.tsx
@@ -1,4 +1,3 @@
-
 "use client";
 
 import FRQFeedbackRenderer from "@/components/frq/feedbackRenderer";
@@ -18,11 +17,7 @@ const Page = () => {
     const fetchFeedback = async () => {
       setStatus("loading");
       try {
-        const docRef = doc(
-          db, 
-          "frq-feedback", 
-          frqId
-        );
+        const docRef = doc(db, "frq-feedback", frqId);
         const docSnap = await getDoc(docRef);
 
         if (docSnap.exists()) {
@@ -30,10 +25,10 @@ const Page = () => {
         } else {
           setStatus("not-found");
         }
-        } catch (error: unknown) {
-          console.error("Error fetching FRQ feedback:", error);
-          setStatus("not-found");
-        }
+      } catch (error: unknown) {
+        console.error("Error fetching FRQ feedback:", error);
+        setStatus("not-found");
+      }
     };
 
     void fetchFeedback();
@@ -44,9 +39,9 @@ const Page = () => {
   }
 
   return (
-  <div className="px-8 py-12">
-    <FRQFeedbackRenderer />
-  </div>
+    <div>
+      <FRQFeedbackRenderer />
+    </div>
   );
 };
 
diff --git a/src/components/frq/feedback/dropdownContent.tsx b/src/components/frq/feedback/dropdownContent.tsx
index 50e67694..2e3183e4 100644
--- a/src/components/frq/feedback/dropdownContent.tsx
+++ b/src/components/frq/feedback/dropdownContent.tsx
@@ -3,7 +3,7 @@
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { RenderContent } from "@/components/article-creator/custom_questions/RenderAdvancedTextbox";
 import RubricCriteriaRow from "./rubricCriteriaRow";
-import type {FRQPart,FRQPartFeedback,ResponseAnswer,} from "./types";
+import type { FRQPart, FRQPartFeedback, ResponseAnswer } from "./types";
 import { Textarea } from "@/components/ui/textarea";
 
 interface FeedbackSectionProps {
@@ -14,42 +14,60 @@ interface FeedbackSectionProps {
   isOpen: boolean;
   onToggle: () => void;
   onFeedbackChange: (feedback: string) => void;
-  onPointsChange: (criterionId: string, points:number) => void;
+  onPointsChange: (criterionId: string, points: number) => void;
 }
 
-export default function FeedbackSection({part,label,answer,partFeedback,isOpen,onToggle,onFeedbackChange, onPointsChange}: FeedbackSectionProps) {
+export default function FeedbackSection({
+  part,
+  label,
+  answer,
+  partFeedback,
+  isOpen,
+  onToggle,
+  onFeedbackChange,
+  onPointsChange,
+}: FeedbackSectionProps) {
   const pointsEarned =
     partFeedback?.gradingCriteria.reduce(
       (total, criterion) => total + criterion.points,
       0,
     ) ?? 0;
 
-  const pointsPossible = part.gradingCriteria.reduce((total, criterion) => total + criterion.points,0,);
+  const pointsPossible = part.gradingCriteria.reduce(
+    (total, criterion) => total + criterion.points,
+    0,
+  );
 
   return (
     <div>
-      <button type="button" onClick={onToggle} className="flex w-full items-center bg-gray-100">
-        <span className="bg-black px-3 py-2 font-bold text-white">
-          {label}
-        </span>
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex w-full items-center bg-gray-100"
+      >
+        <span className="bg-black px-3 py-2 font-bold text-white">{label}</span>
 
         <p className="flex-1 px-3 text-left font-bold">
           {pointsEarned}/{pointsPossible} Points
         </p>
 
         <span className="px-3">
-          {isOpen ? (<ChevronDown className="size-5" />) : (<ChevronRight className="size-5" />)}
+          {isOpen ? (
+            <ChevronDown className="size-5" />
+          ) : (
+            <ChevronRight className="size-5" />
+          )}
         </span>
       </button>
 
-      {isOpen && (<div className="mt-4 space-y-4">
-          <RenderContent content={part.prompt} origin="question"/>
+      {isOpen && (
+        <div className="mt-4 space-y-4">
+          <RenderContent content={part.prompt} origin="question" />
 
           <div className="rounded-md border border-gray-400 p-3">
             <RenderContent
               content={{
-                value:
-                  answer?.value ?? "No response submitted.",
+                value: answer?.value ?? "No response submitted.",
                 files: [],
               }}
               origin="content"
@@ -58,11 +76,9 @@ export default function FeedbackSection({part,label,answer,partFeedback,isOpen,o
 
           <div>
             {part.gradingCriteria.map((criterion) => {
-              const criterionScore =
-                partFeedback?.gradingCriteria.find(
-                  (score) =>
-                    score.criterionId === criterion.id,
-                );
+              const criterionScore = partFeedback?.gradingCriteria.find(
+                (score) => score.criterionId === criterion.id,
+              );
 
               return (
                 <RubricCriteriaRow
@@ -71,20 +87,19 @@ export default function FeedbackSection({part,label,answer,partFeedback,isOpen,o
                   points={criterionScore?.points ?? 0}
                   onPointsChange={(points) =>
                     onPointsChange(criterion.id, points)
-                  }                />
+                  }
+                />
               );
             })}
           </div>
           <Textarea
-            value = {partFeedback?.feedback ?? ""}
-              onChange={(event) =>
-                onFeedbackChange(event.target.value)
-              }
-              placeholder="Enter feedback"
-              className = "min-h-24 resize-y border-gray-400"
-              />
+            value={partFeedback?.feedback ?? ""}
+            onChange={(event) => onFeedbackChange(event.target.value)}
+            placeholder="Enter feedback"
+            className="min-h-24 resize-y border-gray-400"
+          />
         </div>
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/frq/feedback/fallBackData.ts b/src/components/frq/feedback/fallBackData.ts
new file mode 100644
index 00000000..73cff602
--- /dev/null
+++ b/src/components/frq/feedback/fallBackData.ts
@@ -0,0 +1,167 @@
+export const fallbackFeedbackData = {
+  name: "AP Human Geography FRQ 1",
+  creatorID: "1259823594",
+  mostRecentEditor: "1259823594",
+  id: "43281",
+  isVisible: true,
+  feedback: {
+    id: "47231",
+    graderId: "964923741",
+    submittedAt: "2026-07-13T18:30:00Z",
+    questions: [
+      {
+        questionId: "53213",
+        feedback: "",
+        gradingCriteria: [
+          {
+            criterionId: "59684",
+            points: 3,
+          },
+          {
+            criterionId: "85931",
+            points: 1,
+          },
+        ],
+      },
+      {
+        questionId: "53214",
+        feedback: "",
+        gradingCriteria: [
+          {
+            criterionId: "59685",
+            points: 1,
+          },
+          {
+            criterionId: "85930",
+            points: 1,
+          },
+        ],
+      },
+      {
+        questionId: "63213",
+        feedback: "",
+        gradingCriteria: [
+          {
+            criterionId: "69684",
+            points: 3,
+          },
+          {
+            criterionId: "75931",
+            points: 0,
+          },
+        ],
+      },
+    ],
+  },
+  response: {
+    id: "47231",
+    userId: "3749237134",
+    submittedAt: "2026-07-13T18:30:00Z",
+    answers: [
+      {
+        questionId: "53213",
+        value: "1-1 Answer",
+      },
+      {
+        questionId: "53214",
+        value: "1-2 Answer",
+      },
+      {
+        questionId: "63213",
+        value: "2-1 Answer",
+      },
+    ],
+  },
+  frqs: [
+    {
+      id: "12345",
+      name: "FRQ 1",
+      description: {
+        value:
+          "Choice A is incorrect. As $@x = 1$ is a vertical asymptote, the limit as the function approaches that value will not be a definite number, but some infinity. Choice B is incorrect. It is true that as the limit of a function approaches a vertical asymptote, it will approach an infinity. However, we can use simple numerical logic to guide and realize that $@\\displaystyle\\frac{0.9999}{0.9999^2 - 1}$ will be negative, since $@1^-$ indicates a quantity that is slightly smaller than 1. Choice C is correct. A vertical asymptote exists at $@x = 1$, so the one-sided limit will yield an infinite value. As $@x$ approaches $@1$ from the left of the function, the denominator approaches a very small negative value and the numerator is positive. This evaluates to a large negative number, indicating that the limit is $@-\\infty$. Choice D is incorrect. To some extent, it is true that if a limit approaches infinity, it is a case of DNE since it experiences unbounded change. HOWEVER, the convention will ALWAYS be to specify whether or not it is a $@\\pm \\infty$, which makes C a better answer.",
+        files: [],
+      },
+      isVisible: true,
+      questions: [
+        {
+          id: "53213",
+          name: "Question 1",
+          isVisible: true,
+          prompt: {
+            value: "This is a prompt for frq 1 question 1",
+            files: [],
+          },
+          answerType: "text",
+          gradingCriteria: [
+            {
+              id: "59684",
+              text: "Correct Grammar",
+              points: 4,
+            },
+            {
+              id: "85931",
+              text: "Mentions Demographics",
+              points: 2,
+            },
+          ],
+        },
+        {
+          id: "53214",
+          name: "Question 2",
+          isVisible: true,
+          prompt: {
+            value: "This is a prompt for frq 1 question 2",
+            files: [],
+          },
+          answerType: "text",
+          gradingCriteria: [
+            {
+              id: "59685",
+              text: "Correct Math",
+              points: 1,
+            },
+            {
+              id: "85930",
+              text: "Aura",
+              points: 2,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: "95312",
+      name: "FRQ 2",
+      description: {
+        value:
+          "Choice A is incorrect. As $@x = 1$ is a vertical asymptote, the limit as the function approaches that value will not be a definite number, but some infinity. Choice B is incorrect. It is true that as the limit of a function approaches a vertical asymptote, it will approach an infinity. However, we can use simple numerical logic to guide and realize that $@\\displaystyle\\frac{0.9999}{0.9999^2 - 1}$ will be negative, since $@1^-$ indicates a quantity that is slightly smaller than 1. Choice C is correct. A vertical asymptote exists at $@x = 1$, so the one-sided limit will yield an infinite value. As $@x$ approaches $@1$ from the left of the function, the denominator approaches a very small negative value and the numerator is positive. This evaluates to a large negative number, indicating that the limit is $@-\\infty$.",
+        files: [],
+      },
+      isVisible: true,
+      questions: [
+        {
+          id: "63213",
+          name: "Question 1",
+          isVisible: true,
+          prompt: {
+            value: "This is a prompt for frq 2 question 1",
+            files: [],
+          },
+          answerType: "text",
+          gradingCriteria: [
+            {
+              id: "69684",
+              text: "Correct Grammar",
+              points: 4,
+            },
+            {
+              id: "75931",
+              text: "Mentions Demographics",
+              points: 2,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
diff --git a/src/components/frq/feedback/fallbackData_2.ts b/src/components/frq/feedback/fallbackData_2.ts
deleted file mode 100644
index bef56619..00000000
--- a/src/components/frq/feedback/fallbackData_2.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-export const fallbackFeedbackData = {
-  "name": "AP Human Geography FRQ 1",
-  "creatorID": "1259823594",
-  "mostRecentEditor": "1259823594",
-  "id": "43281",
-  "isVisible": true,
-  "feedback": {
-    "id": "47231",
-    "graderId": "964923741",
-    "submittedAt": "2026-07-13T18:30:00Z",
-    "questions": [
-      {
-        "questionId": "53213",
-        "feedback": "",
-        "gradingCriteria": [
-          {
-            "criterionId": "59684",
-            "points": 3
-          },
-          {
-            "criterionId": "85931",
-            "points": 1
-          }
-        ]
-      },
-      {
-        "questionId": "53214",
-        "feedback": "",
-        "gradingCriteria": [
-          {
-            "criterionId": "59685",
-            "points": 1
-          },
-          {
-            "criterionId": "85930",
-            "points": 1
-          }
-        ]
-      },
-      {
-        "questionId": "63213",
-        "feedback": "",
-        "gradingCriteria": [
-          {
-            "criterionId": "69684",
-            "points": 3
-          },
-          {
-            "criterionId": "75931",
-            "points": 0
-          }
-        ]
-      }
-    ]
-  },
-  "response": {
-    "id": "47231",
-    "userId": "3749237134",
-    "submittedAt": "2026-07-13T18:30:00Z",
-    "answers": [
-      {
-        "questionId": "53213",
-        "value": "1-1 Answer"
-      },
-      {
-        "questionId": "53214",
-        "value": "1-2 Answer"
-      },
-      {
-        "questionId": "63213",
-        "value": "2-1 Answer"
-      }
-    ]
-  },
-  "frqs": [
-    {
-      "id": "12345",
-      "name": "FRQ 1",
-      "description": {
-        "value": "Choice A is incorrect. As $@x = 1$ is a vertical asymptote, the limit as the function approaches that value will not be a definite number, but some infinity. Choice B is incorrect. It is true that as the limit of a function approaches a vertical asymptote, it will approach an infinity. However, we can use simple numerical logic to guide and realize that $@\\displaystyle\\frac{0.9999}{0.9999^2 - 1}$ will be negative, since $@1^-$ indicates a quantity that is slightly smaller than 1. Choice C is correct. A vertical asymptote exists at $@x = 1$, so the one-sided limit will yield an infinite value. As $@x$ approaches $@1$ from the left of the function, the denominator approaches a very small negative value and the numerator is positive. This evaluates to a large negative number, indicating that the limit is $@-\\infty$. Choice D is incorrect. To some extent, it is true that if a limit approaches infinity, it is a case of DNE since it experiences unbounded change. HOWEVER, the convention will ALWAYS be to specify whether or not it is a $@\\pm \\infty$, which makes C a better answer.",
-        "files": []
-      },
-      "isVisible": true,
-      "questions": [
-        {
-          "id": "53213",
-          "name": "Question 1",
-          "isVisible": true,
-          "prompt": {
-            "value": "This is a prompt for frq 1 question 1",
-            "files": []
-          },
-          "answerType": "text",
-          "gradingCriteria": [
-            {
-              "id": "59684",
-              "text": "Correct Grammar",
-              "points": 4
-            },
-            {
-              "id": "85931",
-              "text": "Mentions Demographics",
-              "points": 2
-            }
-          ]
-        },
-        {
-          "id": "53214",
-          "name": "Question 2",
-          "isVisible": true,
-          "prompt": {
-            "value": "This is a prompt for frq 1 question 2",
-            "files": []
-          },
-          "answerType": "text",
-          "gradingCriteria": [
-            {
-              "id": "59685",
-              "text": "Correct Math",
-              "points": 1
-            },
-            {
-              "id": "85930",
-              "text": "Aura",
-              "points": 2
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "id": "95312",
-      "name": "FRQ 2",
-      "description": {
-        "value": "Choice A is incorrect. As $@x = 1$ is a vertical asymptote, the limit as the function approaches that value will not be a definite number, but some infinity. Choice B is incorrect. It is true that as the limit of a function approaches a vertical asymptote, it will approach an infinity. However, we can use simple numerical logic to guide and realize that $@\\displaystyle\\frac{0.9999}{0.9999^2 - 1}$ will be negative, since $@1^-$ indicates a quantity that is slightly smaller than 1. Choice C is correct. A vertical asymptote exists at $@x = 1$, so the one-sided limit will yield an infinite value. As $@x$ approaches $@1$ from the left of the function, the denominator approaches a very small negative value and the numerator is positive. This evaluates to a large negative number, indicating that the limit is $@-\\infty$.",
-        "files": []
-      },
-      "isVisible": true,
-      "questions": [
-        {
-          "id": "63213",
-          "name": "Question 1",
-          "isVisible": true,
-          "prompt": {
-            "value": "This is a prompt for frq 2 question 1",
-            "files": []
-          },
-          "answerType": "text",
-          "gradingCriteria": [
-            {
-              "id": "69684",
-              "text": "Correct Grammar",
-              "points": 4
-            },
-            {
-              "id": "75931",
-              "text": "Mentions Demographics",
-              "points": 2
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};
\ No newline at end of file
diff --git a/src/components/frq/feedback/fallbackdata.tsx b/src/components/frq/feedback/fallbackdata.tsx
deleted file mode 100644
index a2b5ef3c..00000000
--- a/src/components/frq/feedback/fallbackdata.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-// import type { FRQFeedbackDocument } from "./types";
-
-// export const fallbackFeedbackData: FRQFeedbackDocument = {
-//   name: "AP Human Geography FRQ 1",
-//   creatorId: "1259823594",
-//   mostRecentEditor: "1259823594",
-//   id: "43281",
-//   isVisible: true,
-
-//   feedback: {
-//     id: "47231",
-//     graderId: "964923741",
-//     submittedAt: "2026-07-13T18:30:00Z",
-//     questions: [
-//       {
-//         questionId: "53213",
-//         graderFeedback:
-//           "This is a very solid response. Work on your evidence and make sure to explain the demographic shift more clearly in future answers.",
-//         gradingCriteria: [
-//           {
-//             criterionId: "59684",
-//             awardedPoints: 3,
-//           },
-//           {
-//             criterionId: "85931",
-//             awardedPoints: 1,
-//           },
-//         ],
-//       },
-//       {
-//         questionId: "53214",
-//         graderFeedback: "This answer needs more explanation.",
-//         gradingCriteria: [
-//           {
-//             criterionId: "59685",
-//             awardedPoints: 1,
-//           },
-//           {
-//             criterionId: "85930",
-//             awardedPoints: 1,
-//           },
-//         ],
-//       },
-//       {
-//         questionId: "63213",
-//         graderFeedback:
-//           "Good start, but the evidence could be stronger.",
-//         gradingCriteria: [
-//           {
-//             criterionId: "69684",
-//             awardedPoints: 3,
-//           },
-//           {
-//             criterionId: "75931",
-//             awardedPoints: 0,
-//           },
-//         ],
-//       },
-//     ],
-//   },
-
-//   response: {
-//     id: "47231",
-//     userId: "3749237134",
-//     submittedAt: "2026-07-13T18:30:00Z",
-//     answers: [
-//       {
-//         questionId: "53213",
-//         value: "1-1 Answer",
-//       },
-//       {
-//         questionId: "53214",
-//         value: "1-2 Answer",
-//       },
-//       {
-//         questionId: "63213",
-//         value: "2-1 Answer",
-//       },
-//     ],
-//   },
-
-//   frqs: [
-//     {
-//       id: "12345",
-//       name: "FRQ 1",
-//       description: {
-//         value:
-//           "Choice A is incorrect. As $@x = 1$ is a vertical asymptote, the limit as the function approaches that value will not be a definite number, but some infinity. Choice B is incorrect. It is true that as the limit of a function approaches a vertical asymptote, it will approach an infinity. However, we can use simple numerical logic to guide and realize that $@\\displaystyle\\frac{0.9999}{0.9999^2 - 1}$ will be negative, since $@1^-$ indicates a quantity that is slightly smaller than 1. Choice C is correct. A vertical asymptote exists at $@x = 1$, so the one-sided limit will yield an infinite value. As $@x$ approaches $@1$ from the left of the function, the denominator approaches a very small negative value and the numerator is positive. This evaluates to a large negative number, indicating that the limit is $@-\\infty$. Choice D is incorrect. To some extent, it is true that if a limit approaches infinity, it is a case of DNE since it experiences unbounded change. HOWEVER, the convention will ALWAYS be to specify whether or not it is a $@\\pm \\infty$, which makes C a better answer.",
-//         files: [],
-//       },
-//       isVisible: true,
-//       questions: [
-//         {
-//           id: "53213",
-//           name: "Question 1",
-//           isVisible: true,
-//           prompt: {
-//             value: "This is a prompt for frq 1 question 1",
-//             files: [],
-//           },
-//           answerType: "text",
-//           gradingCriteria: [
-//             {
-//               id: "59684",
-//               text: "Correct Grammar",
-//               possiblePoints: 4,
-//             },
-//             {
-//               id: "85931",
-//               text: "Mentions Demographics",
-//               possiblePoints: 2,
-//             },
-//           ],
-//         },
-//         {
-//           id: "53214",
-//           name: "Question 2",
-//           isVisible: true,
-//           prompt: {
-//             value: "This is a prompt for frq 1 question 2",
-//             files: [],
-//           },
-//           answerType: "text",
-//           gradingCriteria: [
-//             {
-//               id: "59685",
-//               text: "Correct Math",
-//               possiblePoints: 1,
-//             },
-//             {
-//               id: "85930",
-//               text: "Aura",
-//               possiblePoints: 2,
-//             },
-//           ],
-//         },
-//       ],
-//     },
-//     {
-//       id: "95312",
-//       name: "FRQ 2",
-//       description: {
-//         value:
-//           "Choice A is incorrect. As $@x = 1$ is a vertical asymptote, the limit as the function approaches that value will not be a definite number, but some infinity. Choice B is incorrect. It is true that as the limit of a function approaches a vertical asymptote, it will approach an infinity. However, we can use simple numerical logic to guide and realize that $@\\displaystyle\\frac{0.9999}{0.9999^2 - 1}$ will be negative, since $@1^-$ indicates a quantity that is slightly smaller than 1. Choice C is correct. A vertical asymptote exists at $@x = 1$, so the one-sided limit will yield an infinite value. As $@x$ approaches $@1$ from the left of the function, the denominator approaches a very small negative value and the numerator is positive. This evaluates to a large negative number, indicating that the limit is $@-\\infty$.",
-//         files: [],
-//       },
-//       isVisible: true,
-//       questions: [
-//         {
-//           id: "63213",
-//           name: "Question 1",
-//           isVisible: true,
-//           prompt: {
-//             value: "This is a prompt for frq 2 question 1",
-//             files: [],
-//           },
-//           answerType: "text",
-//           gradingCriteria: [
-//             {
-//               id: "69684",
-//               text: "Correct Grammar",
-//               possiblePoints: 4,
-//             },
-//             {
-//               id: "75931",
-//               text: "Mentions Demographics",
-//               possiblePoints: 2,
-//             },
-//           ],
-//         },
-//       ],
-//     },
-//   ],
-// };
\ No newline at end of file
diff --git a/src/components/frq/feedback/footer.tsx b/src/components/frq/feedback/footer.tsx
index 906f4849..012f5eff 100644
--- a/src/components/frq/feedback/footer.tsx
+++ b/src/components/frq/feedback/footer.tsx
@@ -1,10 +1,13 @@
 "use client";
 
 import { ChevronLeft, ChevronRight, ChevronUp, MapPin, X } from "lucide-react";
-import { Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { useState } from "react";
 
-
 interface FooterProps {
   testName: string;
   currentFrqIndex: number;
@@ -14,11 +17,18 @@ interface FooterProps {
   onJumpToFrq: (index: number) => void;
 }
 
-export default function Footer({testName, currentFrqIndex, totalFrqs, onPrevious, onNext, onJumpToFrq,}: FooterProps) {
+export default function Footer({
+  testName,
+  currentFrqIndex,
+  totalFrqs,
+  onPrevious,
+  onNext,
+  onJumpToFrq,
+}: FooterProps) {
   const [navigationOpen, setNavigationOpen] = useState(false);
 
   return (
-    <footer className="fixed bottom-0 left-0 z-50 flex h-14 w-full items-center justify-between border-t-2 border-gray-300 bg-white px-8">
+    <footer className="fixed bottom-0 left-0 z-50 flex h-14 w-full items-center justify-between border-t-2 border-dashed border-gray-500 bg-white px-8">
       <p className="font-semibold">{testName}</p>
 
       <div className="absolute left-1/2 flex -translate-x-1/2 items-center gap-2">
@@ -30,48 +40,51 @@ export default function Footer({testName, currentFrqIndex, totalFrqs, onPrevious
         </button>
 
         <Popover open={navigationOpen} onOpenChange={setNavigationOpen}>
-            <PopoverTrigger className="flex items-center gap-1 rounded-md bg-black px-4 py-2 text-sm font-bold text-white">
-                Question {currentFrqIndex + 1} of {totalFrqs}
-                <ChevronUp className="size-4" />
-            </PopoverTrigger>
+          <PopoverTrigger className="flex items-center gap-1 rounded-md bg-black px-4 py-2 text-sm font-bold text-white">
+            Question {currentFrqIndex + 1} of {totalFrqs}
+            <ChevronUp className="size-4" />
+          </PopoverTrigger>
 
-            <PopoverContent className="w-[480px] p-0">
-              <div className="rounded-md bg-white">
-                <div className="relative px-8 py-5 text-center">
-                  <h2 className="text-xl font-bold">{testName} Questions</h2>
+          <PopoverContent className="w-[480px] p-0">
+            <div className="rounded-md bg-white">
+              <div className="relative px-8 py-5 text-center">
+                <h2 className="text-xl font-bold">{testName} Questions</h2>
 
-              <button
-                type="button"
-                aria-label="Close question navigation"
-                onClick={() => setNavigationOpen(false)}
-                className="absolute right-5 top-5"
-              >
-                <X className="size-5" />
-              </button>
-                </div>
+                <button
+                  type="button"
+                  aria-label="Close question navigation"
+                  onClick={() => setNavigationOpen(false)}
+                  className="absolute right-5 top-5"
+                >
+                  <X className="size-5" />
+                </button>
+              </div>
 
-                <div className="border-t border-gray-300" />
+              <div className="border-t border-gray-300" />
 
-                <div className="px-8 py-8">
-                  <div className="grid grid-cols-6 gap-x-5 gap-y-8">
-                    {Array.from({ length: totalFrqs }).map((_, index) => (
-                      <button
-                        key={index}
-                        onClick={() => {onJumpToFrq(index); setNavigationOpen(false);}}                        
-                        className="relative flex size-10 items-center justify-center border-2 border-transparent bg-[#294ad1] text-base font-bold text-white"
-                      >
-                        {index + 1}
+              <div className="px-8 py-8">
+                <div className="grid grid-cols-6 gap-x-5 gap-y-8">
+                  {Array.from({ length: totalFrqs }).map((_, index) => (
+                    <button
+                      key={index}
+                      onClick={() => {
+                        onJumpToFrq(index);
+                        setNavigationOpen(false);
+                      }}
+                      className="relative flex size-10 items-center justify-center border-2 border-transparent bg-[#294ad1] text-base font-bold text-white"
+                    >
+                      {index + 1}
 
-                        {index === currentFrqIndex && (
-                          <MapPin className="absolute -top-7 size-5 fill-white stroke-black" />
-                        )}
-                      </button>
-                    ))}
-                  </div>
+                      {index === currentFrqIndex && (
+                        <MapPin className="absolute -top-7 size-5 fill-white stroke-black" />
+                      )}
+                    </button>
+                  ))}
                 </div>
               </div>
-            </PopoverContent>
-            </Popover>
+            </div>
+          </PopoverContent>
+        </Popover>
 
         <button onClick={onNext} className="rounded-md bg-black p-2 text-white">
           <ChevronRight className="size-5" />
diff --git a/src/components/frq/feedback/header.tsx b/src/components/frq/feedback/header.tsx
index e4f8a3c1..8b2e8210 100644
--- a/src/components/frq/feedback/header.tsx
+++ b/src/components/frq/feedback/header.tsx
@@ -1,9 +1,14 @@
 import { LogOut } from "lucide-react";
 
-
-export default function Header({ earnedPoints, totalPoints }: {earnedPoints: number; totalPoints: number;}) {
+export default function Header({
+  earnedPoints,
+  totalPoints,
+}: {
+  earnedPoints: number;
+  totalPoints: number;
+}) {
   return (
-    <header className="fixed left-0 top-0 z-50 flex h-16 w-full items-center justify-center border-b-2 border-gray-300 bg-white px-8">
+    <header className="fixed left-0 top-0 z-50 flex h-16 w-full items-center justify-center border-b-2 border-dashed border-gray-500 bg-white px-8">
       <p className="font-semibold">
         {earnedPoints}/{totalPoints} Points Earned
       </p>
@@ -14,4 +19,4 @@ export default function Header({ earnedPoints, totalPoints }: {earnedPoints: num
       </button>
     </header>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/frq/feedback/layout.tsx b/src/components/frq/feedback/layout.tsx
index cf6ea6bd..24a922a4 100644
--- a/src/components/frq/feedback/layout.tsx
+++ b/src/components/frq/feedback/layout.tsx
@@ -2,10 +2,7 @@ import Header from "./header";
 import Footer from "./footer";
 import LeftSide from "./leftSide";
 import QuestionFeedback from "./rightSide";
-import type {
-  FRQFeedbackDocument,
-  FRQQuestion,
-} from "./types";
+import type { FRQFeedbackDocument, FRQQuestion } from "./types";
 
 interface LayoutProps {
   feedbackData: FRQFeedbackDocument;
@@ -15,7 +12,11 @@ interface LayoutProps {
   onNext: () => void;
   onJumpToFrq: (index: number) => void;
   onFeedbackChange: (questionId: string, feedback: string) => void;
-  onPointsChange: (questionId: string, criterionId: string, points: number)=> void;
+  onPointsChange: (
+    questionId: string,
+    criterionId: string,
+    points: number,
+  ) => void;
 }
 
 export default function Layout({
@@ -28,17 +29,15 @@ export default function Layout({
   onFeedbackChange,
   onPointsChange,
 }: LayoutProps) {
-  const earnedPoints =
-    feedbackData.feedback.questions.reduce(
-      (feedbackTotal, partFeedback) =>
-        feedbackTotal +
-        partFeedback.gradingCriteria.reduce(
-          (partTotal, criterionScore) =>
-            partTotal + criterionScore.points,
-          0,
-        ),
-      0,
-    );
+  const earnedPoints = feedbackData.feedback.questions.reduce(
+    (feedbackTotal, partFeedback) =>
+      feedbackTotal +
+      partFeedback.gradingCriteria.reduce(
+        (partTotal, criterionScore) => partTotal + criterionScore.points,
+        0,
+      ),
+    0,
+  );
 
   const totalPoints = feedbackData.frqs.reduce(
     (frqTotal, frq) =>
@@ -47,8 +46,7 @@ export default function Layout({
         (partTotal, part) =>
           partTotal +
           part.gradingCriteria.reduce(
-            (criterionTotal, criterion) =>
-              criterionTotal + criterion.points,
+            (criterionTotal, criterion) => criterionTotal + criterion.points,
             0,
           ),
         0,
@@ -58,13 +56,10 @@ export default function Layout({
 
   return (
     <div className="min-h-screen bg-white text-black">
-      <Header
-        earnedPoints={earnedPoints}
-        totalPoints={totalPoints}
-      />
+      <Header earnedPoints={earnedPoints} totalPoints={totalPoints} />
 
-      <main className="grid h-screen grid-cols-2 pt-16 pb-14">
-        <div className="border-r-2 border-gray-400">
+      <main className="grid h-screen grid-cols-2 pb-14 pt-16">
+        <div className="border-r-2 border-gray-500">
           <LeftSide description={currentFrq.description} />
         </div>
 
@@ -86,4 +81,4 @@ export default function Layout({
       />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/frq/feedback/leftSide.tsx b/src/components/frq/feedback/leftSide.tsx
index 6ab1df3b..568a9c6e 100644
--- a/src/components/frq/feedback/leftSide.tsx
+++ b/src/components/frq/feedback/leftSide.tsx
@@ -1,18 +1,3 @@
-
-
-
-
-//----------------------------------------------------------------------
-//REVIEW THIS ENTIRE THING
-//----------------------------------------------------------------------
-
-
-
-
-
-
-
-
 import { RenderContent } from "@/components/article-creator/custom_questions/RenderAdvancedTextbox";
 import type { QuestionInput } from "@/types/questions";
 
@@ -24,8 +9,8 @@ export default function DescriptionPanel({
   description,
 }: DescriptionPanelProps) {
   return (
-    <section className="h-full overflow-y-auto px-16 py-10">
+    <section className="h-full overflow-y-auto px-16 py-8">
       <RenderContent content={description} origin="content" />
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/frq/feedback/rightSide.tsx b/src/components/frq/feedback/rightSide.tsx
index b49558a7..ef703b54 100644
--- a/src/components/frq/feedback/rightSide.tsx
+++ b/src/components/frq/feedback/rightSide.tsx
@@ -2,19 +2,29 @@
 
 import { useEffect, useState } from "react";
 import FeedbackSection from "./dropdownContent";
-import type {
-  FRQFeedbackDocument,
-  FRQQuestion,
-} from "./types";
+import type { FRQFeedbackDocument, FRQQuestion } from "./types";
 
-
-export default function QuestionFeedback({frq, feedbackData, onFeedbackChange, onPointsChange}: {frq: FRQQuestion, feedbackData: FRQFeedbackDocument, onFeedbackChange:(questionId: string, feedback:string,)=> void; onPointsChange: (questionId:string, criterionId: string, points: number)=> void;}) {
-  const [openParts, setOpenParts] = useState<string[]>(frq.questions[0] ? [frq.questions[0].id] : [],);
+export default function QuestionFeedback({
+  frq,
+  feedbackData,
+  onFeedbackChange,
+  onPointsChange,
+}: {
+  frq: FRQQuestion;
+  feedbackData: FRQFeedbackDocument;
+  onFeedbackChange: (questionId: string, feedback: string) => void;
+  onPointsChange: (
+    questionId: string,
+    criterionId: string,
+    points: number,
+  ) => void;
+}) {
+  const [openParts, setOpenParts] = useState<string[]>(
+    frq.questions[0] ? [frq.questions[0].id] : [],
+  );
 
   useEffect(() => {
-    setOpenParts(
-      frq.questions[0] ? [frq.questions[0].id] : [],
-    );
+    setOpenParts(frq.questions[0] ? [frq.questions[0].id] : []);
   }, [frq]);
 
   const togglePart = (partId: string) => {
@@ -25,10 +35,12 @@ export default function QuestionFeedback({frq, feedbackData, onFeedbackChange, o
     );
   };
 
-  const closeAll = () => {setOpenParts([]);};
+  const closeAll = () => {
+    setOpenParts([]);
+  };
 
   return (
-    <section className="h-full overflow-y-auto px-16 py-10">
+    <section className="h-full overflow-y-auto px-16 py-8">
       <div className="mb-6 flex items-center justify-between">
         <h1 className="text-xl font-bold">
           {frq.name} | {frq.questions.length} Questions
@@ -49,10 +61,9 @@ export default function QuestionFeedback({frq, feedbackData, onFeedbackChange, o
             (item) => item.questionId === part.id,
           );
 
-          const partFeedback =
-            feedbackData.feedback.questions.find(
-              (item) => item.questionId === part.id,
-            );
+          const partFeedback = feedbackData.feedback.questions.find(
+            (item) => item.questionId === part.id,
+          );
 
           return (
             <FeedbackSection
@@ -63,18 +74,16 @@ export default function QuestionFeedback({frq, feedbackData, onFeedbackChange, o
               partFeedback={partFeedback}
               isOpen={openParts.includes(part.id)}
               onToggle={() => togglePart(part.id)}
-              onFeedbackChange={(feedback)=> onFeedbackChange(part.id, feedback)}
+              onFeedbackChange={(feedback) =>
+                onFeedbackChange(part.id, feedback)
+              }
               onPointsChange={(criterionId, points) =>
-                onPointsChange(
-                  part.id,
-                  criterionId,
-                  points,
-                )
+                onPointsChange(part.id, criterionId, points)
               }
-              />
+            />
           );
         })}
       </div>
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/frq/feedback/rubricCriteriaRow.tsx b/src/components/frq/feedback/rubricCriteriaRow.tsx
index 48c4ba5b..c0af5f02 100644
--- a/src/components/frq/feedback/rubricCriteriaRow.tsx
+++ b/src/components/frq/feedback/rubricCriteriaRow.tsx
@@ -1,25 +1,21 @@
-
-
-
 "use client";
 
-import { useState, useEffect } from "react";
 import type { GradingCriterion } from "./types";
 
-
-
-export default function RubricCriteriaRow({criterion, points, onPointsChange}: {criterion: GradingCriterion, points: number, onPointsChange: (points:number)=>void;}) {
-  const [earnedPoints, setEarnedPoints] = useState(points);
-  useEffect(()=> {
-    setEarnedPoints(points);}, [points]
-  );
-  const updatePoints = (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
+export default function RubricCriteriaRow({
+  criterion,
+  points,
+  onPointsChange,
+}: {
+  criterion: GradingCriterion;
+  points: number;
+  onPointsChange: (points: number) => void;
+}) {
+  const updatePoints = (event: React.ChangeEvent<HTMLInputElement>) => {
     const newPoints = Number(event.target.value);
-  const boundedPoints = Math.min(Math.max(newPoints, 0), criterion.points);
-  setEarnedPoints(boundedPoints);
-  onPointsChange(boundedPoints)};
+    const boundedPoints = Math.min(Math.max(newPoints, 0), criterion.points);
+    onPointsChange(boundedPoints);
+  };
   return (
     <div className="mb-2 flex items-center gap-3">
       <p className="flex-1 rounded-md border border-gray-300 px-3 py-1">
@@ -31,13 +27,13 @@ export default function RubricCriteriaRow({criterion, points, onPointsChange}: {
           type="number"
           min={0}
           max={criterion.points}
-          value={earnedPoints}
+          value={points}
           onChange={updatePoints}
-          className="w-10 rounded border border-gray-300 text-center text-2xl font-semibold"
+          className="w-10 border-0 bg-transparent p-0 text-center text-2xl font-semibold outline-none focus:ring-0"
         />
 
         <span className="text-base">/{criterion.points}</span>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/frq/feedback/trying_smth.tsx b/src/components/frq/feedback/trying_smth.tsx
deleted file mode 100644
index 960c8d6e..00000000
--- a/src/components/frq/feedback/trying_smth.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-export default function Header({earnedPoints, totalPoints,}: {earnedPoints: number;totalPoints: number;}) {
-  return (
-    <header>
-      {earnedPoints}/{totalPoints} Points Earned
-    </header>
-  );
-}
-
-
-
-
-export function Footer (haha: {haha: string;}){
-    return(
-        <>
-        "HAHAHAAH" {haha}
-        </>
-    );
-}
-
-
-
-export function Layout ({haha, bla_bla}: {haha: any, bla_bla: any}){
-    return(
-        <>
-        <Footer
-            haha={haha}
-            bla_bla = {bla_bla}
-        />
-        hahah
-        </>
-    )
-}
\ No newline at end of file
diff --git a/src/components/frq/feedback/types.ts b/src/components/frq/feedback/types.ts
index f435a7da..3eaa5704 100644
--- a/src/components/frq/feedback/types.ts
+++ b/src/components/frq/feedback/types.ts
@@ -5,14 +5,12 @@ export interface RubricScore {
   points: number;
 }
 
-
 export interface FRQPartFeedback {
   questionId: string;
   feedback: string;
   gradingCriteria: RubricScore[];
 }
 
-
 export interface FRQFeedback {
   id: string;
   graderId: string;
@@ -25,7 +23,6 @@ export interface ResponseAnswer {
   value: string;
 }
 
-
 export interface FRQResponse {
   id: string;
   userId: string;
@@ -33,14 +30,12 @@ export interface FRQResponse {
   answers: ResponseAnswer[];
 }
 
-
 export interface GradingCriterion {
   id: string;
   text: string;
   points: number;
 }
 
-
 export interface FRQPart {
   id: string;
   name: string;
@@ -50,7 +45,6 @@ export interface FRQPart {
   gradingCriteria: GradingCriterion[];
 }
 
-
 export interface FRQQuestion {
   id: string;
   name: string;
@@ -59,7 +53,6 @@ export interface FRQQuestion {
   questions: FRQPart[];
 }
 
-
 export interface FRQFeedbackDocument {
   name: string;
   creatorID: string;
@@ -69,4 +62,4 @@ export interface FRQFeedbackDocument {
   feedback: FRQFeedback;
   response: FRQResponse;
   frqs: FRQQuestion[];
-}
\ No newline at end of file
+}
diff --git a/src/components/frq/feedbackRenderer.tsx b/src/components/frq/feedbackRenderer.tsx
index 0c4a0b53..9635c7a9 100644
--- a/src/components/frq/feedbackRenderer.tsx
+++ b/src/components/frq/feedbackRenderer.tsx
@@ -3,24 +3,35 @@
 import { useState } from "react";
 import Layout from "./feedback/layout";
 import type { FRQFeedbackDocument } from "./feedback/types";
-import { fallbackFeedbackData } from "./feedback/fallbackData_2";
+import { fallbackFeedbackData } from "./feedback/fallBackData";
 
 interface FRQFeedbackRendererProps {
   feedbackData?: FRQFeedbackDocument;
 }
 
-export default function FRQFeedbackRenderer({feedbackData,}: FRQFeedbackRendererProps) {
+export default function FRQFeedbackRenderer({
+  feedbackData,
+}: FRQFeedbackRendererProps) {
   const [currentFrqIndex, setCurrentFrqIndex] = useState(0);
 
-  const initialData =feedbackData ?? (fallbackFeedbackData as FRQFeedbackDocument);
+  const initialData =
+    feedbackData ?? (fallbackFeedbackData as FRQFeedbackDocument);
 
-  const[data, setData] = useState<FRQFeedbackDocument>(() => structuredClone(initialData));
+  const [data, setData] = useState<FRQFeedbackDocument>(() =>
+    structuredClone(initialData),
+  );
 
   const currentFrq = data.frqs[currentFrqIndex];
 
-  const goToPreviousFrq = () => {setCurrentFrqIndex((currentIndex) =>Math.max(currentIndex - 1, 0),);};
+  const goToPreviousFrq = () => {
+    setCurrentFrqIndex((currentIndex) => Math.max(currentIndex - 1, 0));
+  };
 
-  const goToNextFrq = () => {setCurrentFrqIndex((currentIndex) => Math.min(currentIndex + 1, data.frqs.length - 1),);};
+  const goToNextFrq = () => {
+    setCurrentFrqIndex((currentIndex) =>
+      Math.min(currentIndex + 1, data.frqs.length - 1),
+    );
+  };
 
   const jumpToFrq = (index: number) => {
     if (index < 0 || index >= data.frqs.length) {
@@ -30,86 +41,84 @@ export default function FRQFeedbackRenderer({feedbackData,}: FRQFeedbackRenderer
     setCurrentFrqIndex(index);
   };
 
-  const updatePartFeedback = (questionId: string, feedback: string,) => {
+  const updatePartFeedback = (questionId: string, feedback: string) => {
     setData((currentData) => ({
-      ...currentData, 
+      ...currentData,
       feedback: {
-        ...currentData.feedback, 
-        questions: currentData.feedback.questions.map(
-          (question)=> question.questionId === questionId
-          ?{
-            ...question, feedback,}: question,
-    ),
-  },
-}));
+        ...currentData.feedback,
+        questions: currentData.feedback.questions.map((question) =>
+          question.questionId === questionId
+            ? {
+                ...question,
+                feedback,
+              }
+            : question,
+        ),
+      },
+    }));
   };
 
-
-const updateCriterionPoints = (questionId: string,criterionId: string,points: number) => {
-  setData((currentData) => {
-    const part = currentData.frqs
-      .flatMap((frq) => frq.questions)
-      .find((item) => item.id === questionId);
-
-    const criterionDefinition =
-      part?.gradingCriteria.find(
-        (criterion) =>
-          criterion.id === criterionId,
+  const updateCriterionPoints = (
+    questionId: string,
+    criterionId: string,
+    points: number,
+  ) => {
+    setData((currentData) => {
+      const part = currentData.frqs
+        .flatMap((frq) => frq.questions)
+        .find((item) => item.id === questionId);
+
+      const criterionDefinition = part?.gradingCriteria.find(
+        (criterion) => criterion.id === criterionId,
       );
 
-    if (!criterionDefinition) {
-      return currentData;
-    }
+      if (!criterionDefinition) {
+        return currentData;
+      }
 
-    const boundedPoints = Math.min(
-      Math.max(points, 0),
-      criterionDefinition.points,
-    );
+      const boundedPoints = Math.min(
+        Math.max(points, 0),
+        criterionDefinition.points,
+      );
 
-    return {
-      ...currentData,
-      feedback: {
-        ...currentData.feedback,
-        questions:
-          currentData.feedback.questions.map(
-            (question) =>
-              question.questionId !== questionId
-                ? question
-                : {
-                    ...question,
-                    gradingCriteria:
-                      question.gradingCriteria.map(
-                        (criterion) =>
-                          criterion.criterionId ===
-                          criterionId
-                            ? {
-                                ...criterion,
-                                points:
-                                  boundedPoints,
-                              }
-                            : criterion,
-                      ),
-                  },
+      return {
+        ...currentData,
+        feedback: {
+          ...currentData.feedback,
+          questions: currentData.feedback.questions.map((question) =>
+            question.questionId !== questionId
+              ? question
+              : {
+                  ...question,
+                  gradingCriteria: question.gradingCriteria.map((criterion) =>
+                    criterion.criterionId === criterionId
+                      ? {
+                          ...criterion,
+                          points: boundedPoints,
+                        }
+                      : criterion,
+                  ),
+                },
           ),
-      },
-    };
-  });
-};
+        },
+      };
+    });
+  };
 
-if (!currentFrq) {
-  return <p>No FRQ feedback available.</p>;
+  if (!currentFrq) {
+    return <p>No FRQ feedback available.</p>;
+  }
+
+  return (
+    <Layout
+      feedbackData={data}
+      currentFrq={currentFrq}
+      currentFrqIndex={currentFrqIndex}
+      onPrevious={goToPreviousFrq}
+      onNext={goToNextFrq}
+      onJumpToFrq={jumpToFrq}
+      onFeedbackChange={updatePartFeedback}
+      onPointsChange={updateCriterionPoints}
+    />
+  );
 }
-
-return (
-  <Layout
-    feedbackData={data}
-    currentFrq={currentFrq}
-    currentFrqIndex={currentFrqIndex}
-    onPrevious={goToPreviousFrq}
-    onNext={goToNextFrq}
-    onJumpToFrq={jumpToFrq}
-    onFeedbackChange={updatePartFeedback}
-    onPointsChange={updateCriterionPoints}
-  />
-);
-}
\ No newline at end of file

From 7ba71c076f1fda1906c2208144cb143221285ec2 Mon Sep 17 00:00:00 2001
From: Apurva <apurvask26@gmail.com>
Date: Mon, 20 Jul 2026 11:05:59 -0400
Subject: [PATCH 9/9] Fixed firebase.ts

---
 src/lib/firebase.ts | 64 +++++----------------------------------------
 1 file changed, 7 insertions(+), 57 deletions(-)

diff --git a/src/lib/firebase.ts b/src/lib/firebase.ts
index 2196cca7..7449de96 100644
--- a/src/lib/firebase.ts
+++ b/src/lib/firebase.ts
@@ -1,43 +1,10 @@
-// "use client"
+"use client"
 
-// import { initializeApp } from "firebase/app";
-// import { getAuth } from "firebase/auth";
-// import { getFirestore } from "firebase/firestore";
-// import { getStorage } from "firebase/storage";
-
-// import { env } from "@/env.js";
-
-// const firebaseConfig = {
-//   apiKey: env.NEXT_PUBLIC_FIREBASE_API_KEY,
-//   authDomain: env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
-//   projectId: env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
-//   storageBucket: env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
-//   messagingSenderId: env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
-//   appId: env.NEXT_PUBLIC_FIREBASE_APP_ID,
-//   measurementId: env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
-// };
-
-// const app = initializeApp(firebaseConfig);
-// const db = getFirestore(app);
-// const auth = getAuth(app);
-// const storage = getStorage(app);
-
-// export { db, auth, storage };
-// export default app;
-
-
-
-//TO START EMULATORS, DO THIS: npx -y firebase-tools@latest emulators:start
-
-"use client";
-
-import { getApp, getApps, initializeApp } from "firebase/app";
-import { connectAuthEmulator, getAuth } from "firebase/auth";
-import {
-  connectFirestoreEmulator,
-  getFirestore,
-} from "firebase/firestore";
+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+import { getFirestore } from "firebase/firestore";
 import { getStorage } from "firebase/storage";
+
 import { env } from "@/env.js";
 
 const firebaseConfig = {
@@ -50,27 +17,10 @@ const firebaseConfig = {
   measurementId: env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
 };
 
-const app = getApps().length ? getApp() : initializeApp(firebaseConfig);
-
+const app = initializeApp(firebaseConfig);
 const db = getFirestore(app);
 const auth = getAuth(app);
 const storage = getStorage(app);
 
-const useEmulators =
-  process.env.NODE_ENV === "development" &&
-  typeof window !== "undefined" &&
-  ["localhost", "127.0.0.1"].includes(window.location.hostname);
-
-if (useEmulators) {
-  try {
-    connectFirestoreEmulator(db, "127.0.0.1", 8080);
-    connectAuthEmulator(auth, "http://127.0.0.1:9099", {
-      disableWarnings: true,
-    });
-  } catch {
-    // Next.js hot reload may evaluate this module after emulators are connected.
-  }
-}
-
-export { app, db, auth, storage };
+export { db, auth, storage };
 export default app;
\ No newline at end of file