diff --git a/apps/backend/src/app.ts b/apps/backend/src/app.ts
index 6ebb6176..7a4b155c 100644
--- a/apps/backend/src/app.ts
+++ b/apps/backend/src/app.ts
@@ -2,7 +2,7 @@ import morgan from "morgan";
 import express, { ErrorRequestHandler } from "express";
 import cors from "cors";
 import { isUser } from "~/controllers/user";
-import { getAllCourses, getCourseByID, getCourses, getFilteredCourses } from "~/controllers/courses";
+import { getAllCourses, getCourseByID, getCourses, getFilteredCourses, getRequisites } from "~/controllers/courses";
 import { getFCEs } from "~/controllers/fces";
 import { getInstructors } from "~/controllers/instructors";
 import { getGeneds } from "~/controllers/geneds";
@@ -21,6 +21,7 @@ app.route("/course/:courseID").get(getCourseByID);
 app.route("/courses").get(getCourses);
 app.route("/courses").post(isUser, getCourses);
 app.route("/courses/all").get(getAllCourses);
+app.route("/courses/requisites/:courseID").get(getRequisites);
 app.route("/courses/search/").get(getFilteredCourses);
 app.route("/courses/search/").post(isUser, getFilteredCourses);
 
diff --git a/apps/backend/src/controllers/courses.ts b/apps/backend/src/controllers/courses.ts
index 7bd88b82..f1aa233b 100644
--- a/apps/backend/src/controllers/courses.ts
+++ b/apps/backend/src/controllers/courses.ts
@@ -6,6 +6,7 @@ import {
   SingleOrArray,
   singleToArray,
   standardizeID,
+  parsePrereqString,
 } from "~/util";
 import { RequestHandler } from "express";
 import db, { Prisma } from "@cmucourses/db";
@@ -272,3 +273,52 @@ export const getAllCourses: RequestHandler<
     res.json(allCoursesEntry.allCourses);
   }
 };
+
+
+export const getRequisites: RequestHandler = async (req, res, next) => {
+  try {
+    if (!req.params.courseID) {
+      return res.status(400).json({ error: 'courseID parameter is required' });
+    }
+
+    const courseID = standardizeID(req.params.courseID);
+
+    const course = await db.courses.findUnique({
+      where: { courseID },
+      select: {
+        courseID: true,
+        prereqs: true,
+        prereqString: true,
+      },
+    });
+
+    if (!course) {
+      return res.status(400).json({ error: 'Course not found' });
+    }
+
+    const parsedPrereqs = parsePrereqString(course.prereqString);
+
+    const postreqs = await db.courses.findMany({
+      where: {
+        prereqs: {
+          has: course.courseID,
+        },
+      },
+      select: {
+        courseID: true,
+      },
+    });
+
+    const postreqIDs = postreqs.map(postreq => postreq.courseID);
+
+    const courseRequisites = {
+      prereqs: course.prereqs,
+      prereqRelations: parsedPrereqs,
+      postreqs: postreqIDs
+    }
+
+    res.json(courseRequisites);
+  } catch (e) {
+    next(e);
+  }
+};
diff --git a/apps/backend/src/util.ts b/apps/backend/src/util.ts
index b9adddf5..7075ec08 100644
--- a/apps/backend/src/util.ts
+++ b/apps/backend/src/util.ts
@@ -40,4 +40,10 @@ export type PrismaReturn<PrismaFnType extends (...args: any) => any> =
   Awaited<ReturnType<PrismaFnType>>;
 
 export type ElemType<ArrayType extends readonly unknown[]> =
-  ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
\ No newline at end of file
+  ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+
+export function parsePrereqString(prereqString: string): string[][] {
+  const normalized = prereqString.replace(/\s+/g, "").replace(/[()]/g, ""); // Remove whitespace and parentheses
+  const andGroups = normalized.split("and"); // Split by AND groups
+  return andGroups.map((group) => group.split("or")); // Split each AND group into OR relationships
+}
\ No newline at end of file
diff --git a/apps/frontend/src/app/api/course.ts b/apps/frontend/src/app/api/course.ts
index 8196e5d5..4af39501 100644
--- a/apps/frontend/src/app/api/course.ts
+++ b/apps/frontend/src/app/api/course.ts
@@ -138,3 +138,29 @@ export const useFetchAllCourses = () => {
     staleTime: STALE_TIME,
   });
 };
+
+export type CourseRequisites = {
+  prereqs: string[];
+  prereqRelations: string[][];
+  postreqs: string[];
+};
+
+export const fetchCourseRequisites = async (courseID: string): Promise<CourseRequisites> => {
+  const url = `${process.env.NEXT_PUBLIC_BACKEND_URL || ""}/courses/requisites/${courseID}`;
+
+  const response = await axios.get(url, {
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  return response.data;
+};
+
+export const useFetchCourseRequisites = (courseID: string) => {
+  return useQuery<CourseRequisites>({
+    queryKey: ['courseRequisites', courseID],
+    queryFn: () => fetchCourseRequisites(courseID),
+    staleTime: STALE_TIME,
+  });
+};
diff --git a/apps/frontend/src/app/types.ts b/apps/frontend/src/app/types.ts
index f1b194f9..c86059ee 100644
--- a/apps/frontend/src/app/types.ts
+++ b/apps/frontend/src/app/types.ts
@@ -90,3 +90,9 @@ export interface Gened {
   fces: FCE[];
 }
 
+export interface TreeNode {
+  courseID: string;
+  prereqs?: TreeNode[];
+  prereqRelations?: TreeNode[][];
+  postreqs?: TreeNode[];
+}
diff --git a/apps/frontend/src/components/Buttons.tsx b/apps/frontend/src/components/Buttons.tsx
index d802b712..64709ea0 100644
--- a/apps/frontend/src/components/Buttons.tsx
+++ b/apps/frontend/src/components/Buttons.tsx
@@ -33,3 +33,18 @@ export const FlushedButton = ({
     </div>
   );
 };
+
+export const CourseIDButton = ({
+  courseID,
+}: {
+  courseID: string;
+}) => {
+  return (
+    <button
+      onClick={() => (window.location.href = `/course/${courseID}`)}
+      className="font-normal text-center px-2 py-1 text-base bg-gray-50 hover:bg-gray-200 text-gray-900 border border-gray-300 rounded shadow cursor-pointer no-underline min-w-20 inline mt-1 mb-1"
+    >
+      {courseID}
+    </button>
+  )
+}
\ No newline at end of file
diff --git a/apps/frontend/src/components/CourseDetail.tsx b/apps/frontend/src/components/CourseDetail.tsx
index 1aeea172..78ee3a51 100644
--- a/apps/frontend/src/components/CourseDetail.tsx
+++ b/apps/frontend/src/components/CourseDetail.tsx
@@ -4,7 +4,8 @@ import CourseCard from "./CourseCard";
 import { useFetchFCEInfoByCourse } from "~/app/api/fce";
 import { SchedulesCard } from "./SchedulesCard";
 import { FCECard } from "./FCECard";
-import { useFetchCourseInfo } from "~/app/api/course";
+import { useFetchCourseInfo, useFetchCourseRequisites } from "~/app/api/course";
+import ReqTreeCard from "./ReqTreeCard";
 
 type Props = {
   courseID: string;
@@ -12,19 +13,32 @@ type Props = {
 
 const CourseDetail = ({ courseID }: Props) => {
   const { data: { fces } = {} } = useFetchFCEInfoByCourse(courseID);
-  const { data: { schedules } = {} } = useFetchCourseInfo(courseID);
+  const { data: info } = useFetchCourseInfo(courseID);
+  const { data: requisites } = useFetchCourseRequisites(courseID);
+
+  if (!info || !requisites) {
+    return <div>Loading...</div>;
+  }
 
   return (
     <div className="m-auto space-y-4 p-6">
       <CourseCard courseID={courseID} showFCEs={false} showCourseInfo={true} />
       {fces && <FCECard fces={fces} />}
-      {schedules && (
+      {info.schedules && (
         <SchedulesCard
-          scheduleInfos={filterSessions([...schedules]).sort(compareSessions)}
+          scheduleInfos={filterSessions([...info.schedules]).sort(compareSessions)}
+        />
+      )}
+      {info.prereqs && requisites.prereqRelations && requisites.postreqs && (
+        <ReqTreeCard
+          courseID={courseID}
+          prereqs={requisites.prereqs}
+          prereqRelations={requisites.prereqRelations}
+          postreqs={requisites.postreqs}
         />
       )}
     </div>
   );
 };
 
-export default CourseDetail;
+export default CourseDetail;
\ No newline at end of file
diff --git a/apps/frontend/src/components/PostReqCourses.tsx b/apps/frontend/src/components/PostReqCourses.tsx
new file mode 100644
index 00000000..7a193744
--- /dev/null
+++ b/apps/frontend/src/components/PostReqCourses.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+import { useFetchCourseRequisites } from "~/app/api/course";
+import { TreeNode } from "~/app/types";
+import { CourseIDButton } from "./Buttons";
+
+interface Props {
+  courseID: string;
+}
+
+export const PostReqCourses = ({ courseID }: Props) => {
+  const { isPending: isCourseInfoPending, data: requisites } = useFetchCourseRequisites(courseID);
+
+  if (isCourseInfoPending || !requisites) {
+    return null;
+  }
+
+  // Recursive function to render only the child branches
+  const renderTree = (nodes: TreeNode[]) => {
+    return (
+      <div className="flex flex-col">
+        {nodes.map((node) => (
+          <div key={node.courseID} className="flex items-center">
+            {/* Half vertical line for the first postreq */}
+            {nodes && nodes.length > 1 && nodes.indexOf(node) === 0 && (
+              <div className="flex flex-col w-0.5 self-stretch">
+                <div className="h-1/2 self-stretch"></div>
+                <div className="w-0.5 h-1/2 bg-gray-400 self-stretch"></div>
+              </div>
+            )}
+
+            {/* Normal vertical Line connector */}
+            {nodes && nodes.length > 1 && nodes.indexOf(node) !== 0 && nodes.indexOf(node) !== nodes.length - 1 && (
+              <div className="w-0.5 bg-gray-400 self-stretch"></div>
+            )}
+
+            {/* Half vertical line for the last prereq in the list */}
+            {nodes && nodes.length > 1 && nodes.indexOf(node) === nodes.length - 1 && (
+              <div className="flex flex-col w-0.5 self-stretch">
+                <div className="w-0.5 h-1/2 bg-gray-400 self-stretch"></div>
+                <div className="h-1/2 self-stretch"></div>
+              </div>
+            )}
+
+            {/* Line left to node */}
+            {nodes && nodes.length > 1 && (
+              <div className="w-3 h-0.5 bg-gray-400"></div>
+            )}
+
+            {/* Course ID button */}
+            <CourseIDButton courseID={node.courseID} />
+
+            {/* Render child nodes recursively */}
+            {node.postreqs && renderTree(node.postreqs)}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  // Transform fetched data into a tree structure excluding the parent node
+  const childNodes: TreeNode[] = requisites.postreqs?.map((postreq: string) => ({
+    courseID: postreq,
+  })) || [];
+
+  return (
+    <div>
+      {childNodes.length > 0 ? (
+        renderTree(childNodes)
+      ) : (
+        <div
+          className="italic ml-2 text-gray-700 text-center text-lg font-semibold rounded-md"
+        >
+          None
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PostReqCourses;
\ No newline at end of file
diff --git a/apps/frontend/src/components/PreReqCourses.tsx b/apps/frontend/src/components/PreReqCourses.tsx
new file mode 100644
index 00000000..58525b11
--- /dev/null
+++ b/apps/frontend/src/components/PreReqCourses.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+import { useFetchCourseRequisites } from "~/app/api/course";
+import { TreeNode } from "~/app/types";
+import { CourseIDButton } from "./Buttons";
+
+interface Props {
+  courseID: string;
+}
+
+export const PreReqCourses = ({ courseID }: Props) => {
+  const { isPending: isCourseInfoPending, data: requisites } = useFetchCourseRequisites(courseID);
+
+  if (isCourseInfoPending || !requisites) {
+    return null;
+  }
+
+  // Recursive function to render only the child branches
+  const renderTree = (nodes: TreeNode[]) => {
+    return (
+      <div className="flex flex-col">
+        {nodes.map((node) => (
+          <div key={node.courseID} className="flex items-center">
+            {/* Course ID button */}
+            <CourseIDButton courseID={node.courseID} />
+
+            {/* Line connector right to node */}
+            {nodes && nodes.length > 1 && (
+              <div className="w-3 h-0.5 bg-gray-400"></div>
+            )}
+
+            {/* Half vertical line for the first prereq in the list */}
+            {nodes && nodes.length > 1 && nodes.indexOf(node) === 0 && (
+              <div className="flex flex-col w-0.5 self-stretch">
+                <div className="h-1/2 self-stretch"></div>
+                <div className="w-0.5 h-1/2 bg-gray-400 self-stretch"></div>
+              </div>
+            )}
+
+            {/* Normal vertical Line connector */}
+            {nodes && nodes.length > 1 && nodes.indexOf(node) !== 0 && nodes.indexOf(node) !== nodes.length - 1 && (
+              <div className="w-0.5 bg-gray-400 self-stretch"></div>
+            )}
+
+            {/* Half vertical line for the last prereq in the list */}
+            {nodes && nodes.length > 1 && nodes.indexOf(node) === nodes.length - 1 && (
+              <div className="flex flex-col w-0.5 self-stretch">
+                <div className="w-0.5 h-1/2 bg-gray-400 self-stretch"></div>
+                <div className="h-1/2 self-stretch"></div>
+              </div>
+            )}
+
+            {/* Render child nodes recursively */}
+            {node.prereqs && renderTree(node.prereqs)}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  // Transform fetched data into a tree structure excluding the parent node
+  const childNodes: TreeNode[] = requisites.prereqs.map((prereq: string) => ({
+    courseID: prereq,
+  })) || [];
+
+  return (
+    <div>
+      {childNodes.length > 0 ? (
+        renderTree(childNodes)
+      ) : (
+        <div
+          className="italic mr-2 text-gray-700 text-center text-lg font-semibold rounded-md"
+        >
+          None
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PreReqCourses;
\ No newline at end of file
diff --git a/apps/frontend/src/components/ReqTreeCard.tsx b/apps/frontend/src/components/ReqTreeCard.tsx
new file mode 100644
index 00000000..d80ddcf7
--- /dev/null
+++ b/apps/frontend/src/components/ReqTreeCard.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { Card } from "./Card";
+import ReqTreeDetail from "./ReqTreeDetail";
+import { TreeNode } from "~/app/types";
+
+interface ReqTreeCardProps {
+  courseID: string;
+  prereqs: string[];
+  prereqRelations: string[][];
+  postreqs: string[];
+}
+
+const ReqTreeCard: React.FC<ReqTreeCardProps> = ({ courseID, prereqs, prereqRelations, postreqs }) => {
+  const hasNoRequisites = prereqs.length === 0 && postreqs.length === 0;
+
+  const buildTree = (id: string, prereqList: string[], prereqRelationsList: string[][], postreqList: string[]): TreeNode => {
+    return {
+      courseID: id,
+      prereqs: prereqList.map((prereq) => ({ courseID: prereq })),
+      prereqRelations: prereqRelationsList.map((prereqSubList) => (prereqSubList.map((prereq) => ({ courseID: prereq })))),
+      postreqs: postreqList.map((postreq) => ({ courseID: postreq })),
+    };
+  };
+
+  const tree = buildTree(courseID, prereqs, prereqRelations, postreqs);
+
+  return (
+    <Card>
+      <Card.Header>Requisite Tree</Card.Header>
+      {hasNoRequisites ? (
+        <div className="italic text-gray-800 p-10 text-center">
+          There are no prerequisites or postrequisites for this course.
+        </div>
+      ) : (
+        <ReqTreeDetail root={tree} />
+      )}
+
+    </Card>
+  );
+};
+
+export default ReqTreeCard;
\ No newline at end of file
diff --git a/apps/frontend/src/components/ReqTreeDetail.tsx b/apps/frontend/src/components/ReqTreeDetail.tsx
new file mode 100644
index 00000000..c5d7c33e
--- /dev/null
+++ b/apps/frontend/src/components/ReqTreeDetail.tsx
@@ -0,0 +1,201 @@
+import React, { useState } from "react";
+import PostReqCourses from "./PostReqCourses";
+import PreReqCourses from "./PreReqCourses";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "@heroicons/react/20/solid";
+import { TreeNode } from "~/app/types";
+import { CourseIDButton } from "./Buttons";
+
+interface ReqTreeProps {
+  root: TreeNode;
+}
+
+const ReqTreeDetail: React.FC<ReqTreeProps> = ({ root }) => {
+  const [expandedPostReqIDs, setExpandedPostReqIDs] = useState<string[]>([]);
+  const [expandedPreReqIDs, setExpandedPreReqIDs] = useState<string[]>([]);
+
+  const togglePostReqs = (courseID: string) => {
+    setExpandedPostReqIDs((prev) =>
+      prev.includes(courseID)
+        ? prev.filter((id) => id !== courseID)
+        : [...prev, courseID]
+    );
+  };
+
+  const togglePreReqs = (courseID: string) => {
+    setExpandedPreReqIDs((prev) =>
+      prev.includes(courseID)
+        ? prev.filter((id) => id !== courseID)
+        : [...prev, courseID]
+    );
+  };
+
+  return (
+    <div className="flex overflow-auto">
+      {/* Padding */}
+      <div className="flex-grow"></div>
+
+      {/* Prereqs on the left */}
+      {root.prereqs && root.prereqs.length > 0 && (
+        <div className="flex flex-col items-end justify-center">
+          {root.prereqs.map((prereq) => (
+            <div key={prereq.courseID} className="flex items-center justify-center">
+
+              {/* Next level of prereqs */}
+              {expandedPreReqIDs.includes(prereq.courseID) && (
+                <div className="flex items-center justify-center">
+                  <PreReqCourses courseID={prereq.courseID} />
+                  <div className="w-3 h-0.5 bg-gray-400"></div>
+                </div>
+              )}
+
+              {/* Expansion button */}
+              <div
+                className="text-gray-700 cursor-pointer rounded py-1 px-2 text-sm hover:bg-gray-50"
+                onClick={() => togglePreReqs(prereq.courseID)}
+              >
+                {expandedPreReqIDs.includes(prereq.courseID) ? (
+                  <div className="flex items-center">
+                    <div className="mr-1 hidden md:block">Hide</div>
+                    <ChevronRightIcon className="h-5 w-5" />
+                  </div>
+                ) : (
+                  <div className="flex items-center">
+                    <ChevronLeftIcon className="h-5 w-5" />
+                  </div>
+                )}
+              </div>
+
+              {/* Line right to expansion button */}
+              <div className="w-3 h-0.5 bg-gray-400"></div>
+
+              {/* Course ID button */}
+              <CourseIDButton courseID={prereq.courseID} />
+
+              {/* Line connector right to node */}
+              {root.prereqs && root.prereqs.length > 1 && (
+                <div className="w-3 h-0.5 bg-gray-400"></div>
+              )}
+
+              {/* Half vertical line for the first prereq in the list */}
+              {root.prereqs && root.prereqs.length > 1 && root.prereqs.indexOf(prereq) === 0 && (
+                <div className="flex flex-col w-0.5 self-stretch">
+                  <div className="h-1/2 self-stretch"></div>
+                  <div className="w-0.5 h-1/2 bg-gray-400 self-stretch"></div>
+                </div>
+              )}
+
+              {/* Normal vertical Line connector */}
+              {root.prereqs && root.prereqs.length > 1 && root.prereqs.indexOf(prereq) !== 0 && root.prereqs.indexOf(prereq) !== root.prereqs.length - 1 && (
+                <div className="w-0.5 bg-gray-400 self-stretch"></div>
+              )}
+
+              {/* Half vertical line for the last prereq in the list */}
+              {root.prereqs && root.prereqs.length > 1 && root.prereqs.indexOf(prereq) === root.prereqs.length - 1 && (
+                <div className="flex flex-col w-0.5 self-stretch">
+                  <div className="w-0.5 h-1/2 bg-gray-400 self-stretch"></div>
+                  <div className="h-1/2 self-stretch"></div>
+                </div>
+              )}
+
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Main Course */}
+      <div className="flex items-center">
+        {/* Line left to node */}
+        {root.prereqs && root.prereqs.length > 0 && (
+          <div className="w-3 h-0.5 bg-gray-400"></div>
+        )}
+
+        {/* Main node */}
+        <div
+          className="font-bold text-center px-2 py-1 text-base bg-gray-200 text-gray-900 border border-gray-400 rounded shadow-md min-w-20"
+        >
+          {root.courseID}
+        </div>
+
+        {/* Line right to node */}
+        {root.postreqs && root.postreqs.length > 0 && (
+          <div className="w-3 h-0.5 bg-gray-400"></div>
+        )}
+      </div>
+
+      {/* Postreqs on the right */}
+      {root.postreqs && root.postreqs.length > 0 && (
+        <div className="flex flex-col items-start justify-center">
+          {root.postreqs.map((postreq) => (
+            <div key={postreq.courseID} className="flex items-center justify-center">
+              {/* Half vertical line for the first postreq */}
+              {root.postreqs && root.postreqs.length > 1 && root.postreqs.indexOf(postreq) === 0 && (
+                <div className="flex flex-col w-0.5 self-stretch">
+                  <div className="h-1/2 self-stretch"></div>
+                  <div className="w-0.5 h-1/2 bg-gray-400 self-stretch"></div>
+                </div>
+              )}
+
+              {/* Normal vertical Line connector */}
+              {root.postreqs && root.postreqs.length > 1 && root.postreqs.indexOf(postreq) !== 0 && root.postreqs.indexOf(postreq) !== root.postreqs.length - 1 && (
+                <div className="w-0.5 bg-gray-400 self-stretch"></div>
+              )}
+
+              {/* Half vertical line for the last postreq */}
+              {root.postreqs && root.postreqs.length > 1 && root.postreqs.indexOf(postreq) === root.postreqs.length - 1 && (
+                <div className="flex flex-col w-0.5 self-stretch">
+                  <div className="w-0.5 h-1/2 bg-gray-400 self-stretch"></div>
+                  <div className="h-1/2 self-stretch"></div>
+                </div>
+              )}
+
+              {/* Line left to node */}
+              {root.postreqs && root.postreqs.length > 1 && (
+                <div className="w-3 h-0.5 bg-gray-400"></div>
+              )}
+
+              {/* Course ID button */}
+              <CourseIDButton courseID={postreq.courseID} />
+
+              {/* Line right to node */}
+              <div className="w-3 h-0.5 bg-gray-400"></div>
+
+              {/* Expansion button */}
+              <div
+                className="text-gray-700 cursor-pointer rounded py-1 px-2 text-sm hover:bg-gray-50"
+                onClick={() => togglePostReqs(postreq.courseID)}
+              >
+                {expandedPostReqIDs.includes(postreq.courseID) ? (
+                  <div className="flex items-center">
+                    <div className="mr-1 hidden md:block">Hide</div>
+                    <ChevronLeftIcon className="h-5 w-5" />
+                  </div>
+                ) : (
+                  <div className="flex items-center">
+                    <ChevronRightIcon className="h-5 w-5" />
+                  </div>
+                )}
+              </div>
+
+              {/* Next level of postreqs */}
+              {expandedPostReqIDs.includes(postreq.courseID) && (
+                <div className="flex items-center justify-center">
+                  <div className="w-3 h-0.5 bg-gray-400"></div>
+                  <PostReqCourses courseID={postreq.courseID} />
+                </div>
+              )}
+
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Padding */}
+      <div className="flex-grow"></div>
+    </div>
+  );
+};
+
+export default ReqTreeDetail;
\ No newline at end of file