diff --git a/src/app/frq-feedback/[id]/page.tsx b/src/app/frq-feedback/[id]/page.tsx
index 1187fb1f..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,11 +39,9 @@ const Page = () => {
   }
 
   return (
-  <div className="px-8 py-12">
-    <FRQFeedbackRenderer 
-      feedbackFound={status === "found"} 
-    />
-  </div>
+    <div>
+      <FRQFeedbackRenderer />
+    </div>
   );
 };
 
diff --git a/src/components/frq/feedback/dropdownContent.tsx b/src/components/frq/feedback/dropdownContent.tsx
new file mode 100644
index 00000000..2e3183e4
--- /dev/null
+++ b/src/components/frq/feedback/dropdownContent.tsx
@@ -0,0 +1,105 @@
+"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>
+  );
+}
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/footer.tsx b/src/components/frq/feedback/footer.tsx
new file mode 100644
index 00000000..012f5eff
--- /dev/null
+++ b/src/components/frq/feedback/footer.tsx
@@ -0,0 +1,111 @@
+"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-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">
+        <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..8b2e8210
--- /dev/null
+++ b/src/components/frq/feedback/header.tsx
@@ -0,0 +1,22 @@
+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-dashed border-gray-500 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>
+  );
+}
diff --git a/src/components/frq/feedback/layout.tsx b/src/components/frq/feedback/layout.tsx
new file mode 100644
index 00000000..24a922a4
--- /dev/null
+++ b/src/components/frq/feedback/layout.tsx
@@ -0,0 +1,84 @@
+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 pb-14 pt-16">
+        <div className="border-r-2 border-gray-500">
+          <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>
+  );
+}
diff --git a/src/components/frq/feedback/leftSide.tsx b/src/components/frq/feedback/leftSide.tsx
new file mode 100644
index 00000000..568a9c6e
--- /dev/null
+++ b/src/components/frq/feedback/leftSide.tsx
@@ -0,0 +1,16 @@
+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-8">
+      <RenderContent content={description} origin="content" />
+    </section>
+  );
+}
diff --git a/src/components/frq/feedback/rightSide.tsx b/src/components/frq/feedback/rightSide.tsx
new file mode 100644
index 00000000..ef703b54
--- /dev/null
+++ b/src/components/frq/feedback/rightSide.tsx
@@ -0,0 +1,89 @@
+"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-8">
+      <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>
+  );
+}
diff --git a/src/components/frq/feedback/rubricCriteriaRow.tsx b/src/components/frq/feedback/rubricCriteriaRow.tsx
new file mode 100644
index 00000000..c0af5f02
--- /dev/null
+++ b/src/components/frq/feedback/rubricCriteriaRow.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import type { GradingCriterion } from "./types";
+
+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);
+    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={points}
+          onChange={updatePoints}
+          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>
+  );
+}
diff --git a/src/components/frq/feedback/types.ts b/src/components/frq/feedback/types.ts
new file mode 100644
index 00000000..3eaa5704
--- /dev/null
+++ b/src/components/frq/feedback/types.ts
@@ -0,0 +1,65 @@
+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[];
+}
diff --git a/src/components/frq/feedbackRenderer.tsx b/src/components/frq/feedbackRenderer.tsx
index 8bcfb4bb..9635c7a9 100644
--- a/src/components/frq/feedbackRenderer.tsx
+++ b/src/components/frq/feedbackRenderer.tsx
@@ -1,12 +1,124 @@
-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";
+
+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}
+    />
+  );
+}
diff --git a/src/components/global/frqFooter.tsx b/src/components/global/frqFooter.tsx
new file mode 100644
index 00000000..906f4849
--- /dev/null
+++ b/src/components/global/frqFooter.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>
+  );
+}