diff --git a/src/components/planner/Sidebar/RecursiveRequirement.tsx b/src/components/planner/Sidebar/RecursiveRequirement.tsx
index 163f96aa6..799415bd2 100644
--- a/src/components/planner/Sidebar/RecursiveRequirement.tsx
+++ b/src/components/planner/Sidebar/RecursiveRequirement.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, Fragment } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
 import { trpc } from '@/utils/trpc';
@@ -36,15 +36,14 @@ export function RecursiveRequirement({
             >
               <>
                 {req.requirements.map((req2, idx) => (
-                  <>
+                  <Fragment key={req2.metadata.id}>
                     <div className="h-2 px-2 text-sm">Option {idx + 1}</div>
                     <RecursiveRequirement
-                      key={idx}
                       req={req2}
                       courses={courses}
                       validCourses={validCourses}
                     />
-                  </>
+                  </Fragment>
                 ))}
               </>
             </Accordion>
@@ -58,15 +57,13 @@ export function RecursiveRequirement({
               filled={req.filled}
             >
               <>
-                {req.requirements.map((req2, idx) => (
-                  <>
-                    <RecursiveRequirement
-                      key={idx}
-                      req={req2}
-                      courses={courses}
-                      validCourses={validCourses}
-                    />
-                  </>
+                {req.requirements.map((req2) => (
+                  <RecursiveRequirement
+                    key={req2.metadata.id}
+                    req={req2}
+                    courses={courses}
+                    validCourses={validCourses}
+                  />
                 ))}
               </>
             </Accordion>
@@ -85,15 +82,14 @@ export function RecursiveRequirement({
             >
               <>
                 {req.requirements.map((req2, idx) => (
-                  <>
+                  <Fragment key={req2.metadata.id}>
                     <div className="h-2 px-2 text-sm">Option {idx + 1}</div>
                     <RecursiveRequirement
-                      key={idx}
                       req={req2}
                       courses={courses}
                       validCourses={validCourses}
                     />
-                  </>
+                  </Fragment>
                 ))}
               </>
             </Accordion>
@@ -112,15 +108,14 @@ export function RecursiveRequirement({
             >
               <>
                 {req.requirements.map((req2, idx) => (
-                  <>
+                  <Fragment key={req2.metadata.id}>
                     <div className="h-2 px-2 text-sm">Option {idx + 1}</div>
                     <RecursiveRequirement
-                      key={idx}
                       req={req2}
                       courses={courses}
                       validCourses={validCourses}
                     />
-                  </>
+                  </Fragment>
                 ))}
               </>
             </Accordion>
@@ -140,7 +135,7 @@ export function RecursiveRequirement({
               <>
                 {req.prefix_groups.map((req2, idx) => (
                   <RecursiveRequirement
-                    key={idx}
+                    key={req2.metadata.id}
                     req={req2}
                     courses={courses}
                     validCourses={validCourses}
@@ -156,7 +151,7 @@ export function RecursiveRequirement({
         return <div>NOT SUPPORTED</div>;
     }
   };
-  return <>{getRequirement()}</>;
+  return getRequirement();
 }
 
 function CourseRequirementComponent({
diff --git a/src/components/planner/Sidebar/RequirementsContainer.tsx b/src/components/planner/Sidebar/RequirementsContainer.tsx
index b1cb2603e..b7593fce4 100644
--- a/src/components/planner/Sidebar/RequirementsContainer.tsx
+++ b/src/components/planner/Sidebar/RequirementsContainer.tsx
@@ -155,7 +155,9 @@ const getRequirementGroup = (
                 course: `${c.subject_prefix} ${c.course_number}`,
                 matcher: 'Course',
                 filled: courses.includes(`${c.subject_prefix} ${c.course_number}`),
-                metadata: {},
+                metadata: {
+                  id: `course-${c.id}`,
+                },
               }))
             : [],
         filterFunction: filterFunc,
@@ -200,12 +202,12 @@ const getRequirementGroup = (
 };
 
 export const ProgressComponent2 = ({ value, max }: { value: number; max: number }) => {
-  const heh = `${(value * 100) / max}%`;
+  const width = `${(value * 100) / max}%`;
 
   return (
     <div className="flex w-full flex-col items-center justify-center">
       <div className="mt-2 h-1 w-full overflow-hidden rounded-2xl bg-[#F5F5F5] ">
-        <div style={{ width: heh }} className={`h-full bg-primary`}></div>
+        <div style={{ width }} className={`h-full bg-primary`}></div>
       </div>
     </div>
   );
@@ -220,7 +222,7 @@ export const ProgressComponent = ({
   max: number;
   unit?: string;
 }) => {
-  const heh = `${(value * 100) / max}%`;
+  const width = `${(value * 100) / max}%`;
 
   return (
     <div className="flex w-24 flex-col items-center justify-center">
@@ -228,7 +230,7 @@ export const ProgressComponent = ({
         {value}/{max} {unit}
       </div>
       <div className="h-3 w-full overflow-hidden rounded-2xl bg-[#F5F5F5]">
-        <div style={{ width: heh }} className={`h-full bg-primary`}></div>
+        <div style={{ width }} className={`h-full bg-primary`}></div>
       </div>
     </div>
   );
diff --git a/src/components/planner/Sidebar/types.ts b/src/components/planner/Sidebar/types.ts
index f1d82d381..a94b1c1a3 100644
--- a/src/components/planner/Sidebar/types.ts
+++ b/src/components/planner/Sidebar/types.ts
@@ -17,7 +17,7 @@ export type DegreeRequirement = Requirement & {
 
 export interface Requirement {
   matcher: string;
-  metadata: { [key: string]: string };
+  metadata: { id: string; [key: string]: string };
   filled: boolean;
 }
 
@@ -36,7 +36,6 @@ export type AndRequirementGroup = Requirement & {
 
 export type HoursRequirementGroup = Requirement & {
   matcher: 'Hours';
-  metadata: { [key: string]: string };
   required_hours: number;
   fulfilled_hours: number;
   requirements: RequirementTypes[];