diff --git a/backend/degree/serializers.py b/backend/degree/serializers.py
index 5ff2aa1c5..34139300b 100644
--- a/backend/degree/serializers.py
+++ b/backend/degree/serializers.py
@@ -116,9 +116,9 @@ class DegreePlanDetailSerializer(serializers.ModelSerializer):
     )
     degrees = DegreeDetailSerializer(read_only=True, many=True)
     degree_ids = serializers.PrimaryKeyRelatedField(
+        many=True,
         required=False,    
-        write_only=True,
-        source="degree",
+        source="degrees",
         queryset=Degree.objects.all(),
         help_text="The degree_id this degree plan belongs to.",
     )
diff --git a/frontend/degree-plan/components/FourYearPlan/CoursePlanned.tsx b/frontend/degree-plan/components/FourYearPlan/CoursePlanned.tsx
index e87220f40..4a13e42d9 100644
--- a/frontend/degree-plan/components/FourYearPlan/CoursePlanned.tsx
+++ b/frontend/degree-plan/components/FourYearPlan/CoursePlanned.tsx
@@ -55,7 +55,7 @@ const CoursePlanned = ({course, semesterIndex, removeCourse, highlightReqId, set
       <div onClick={() => showCourseDetail(course)}>
         {course.id}
       </div>
-      <RemoveCourseButton hidden={mouseOver} onClick={() => removeCourse(course)}>
+      <RemoveCourseButton hidden={!mouseOver} onClick={() => removeCourse(course)}>
         <GrayIcon><i className="fas fa-times"></i></GrayIcon>
       </RemoveCourseButton>
     </PlannedCourseContainer>
diff --git a/frontend/degree-plan/components/FourYearPlan/CoursesPlanned.tsx b/frontend/degree-plan/components/FourYearPlan/CoursesPlanned.tsx
index d8116a247..ea2e0e217 100644
--- a/frontend/degree-plan/components/FourYearPlan/CoursesPlanned.tsx
+++ b/frontend/degree-plan/components/FourYearPlan/CoursesPlanned.tsx
@@ -1,23 +1,35 @@
 
 
-import { useEffect, useState } from "react";
+import { Ref, useEffect, useState } from "react";
 import CoursePlanned, { PlannedCourseContainer } from "./CoursePlanned";
 import styled from "@emotion/styled";
 
 const PlannedCoursesContainer = styled.div`
     flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
 `;
 
-const CoursesPlanned = ({courses, semesterIndex, removeCourse, showCourseDetail, highlightReqId, className}: any) => {
+interface CoursesPlannedProps {
+    courses: any;
+    semesterIndex: number;
+    removeCourse: any;
+    showCourseDetail: any;
+    highlightReqId: any; // TODO: should not be anys
+    className: string;
+    dropRef: Ref<React.ReactNode>;
+}
+
+const CoursesPlanned = ({courses, semesterIndex, removeCourse, showCourseDetail, highlightReqId, className, dropRef}: any) => {
     const [courseOpen, setCourseOpen] = useState(false);
     
     return (
         <PlannedCoursesContainer className={className}>
-            {courses.length === 0 ? 
-            <PlannedCourseContainer/>
-            : courses.map((course: any) => 
-                <CoursePlanned course={course} highlightReqId={highlightReqId} semesterIndex={semesterIndex} removeCourse={removeCourse} courseOpen={courseOpen} setCourseOpen={setCourseOpen} showCourseDetail={showCourseDetail}/>
+            {courses.map((course: any) => 
+                <CoursePlanned course={course} highlightReqId={highlightReqId} semesterIndex={semesterIndex} removeCourse={removeCourse} setCourseOpen={setCourseOpen} showCourseDetail={showCourseDetail}/>
             )}
+            <PlannedCourseContainer ref={dropRef}/>
         </PlannedCoursesContainer>
     )
 }
diff --git a/frontend/degree-plan/components/FourYearPlan/PlanPanel.tsx b/frontend/degree-plan/components/FourYearPlan/PlanPanel.tsx
index a117ca44f..06178bce3 100644
--- a/frontend/degree-plan/components/FourYearPlan/PlanPanel.tsx
+++ b/frontend/degree-plan/components/FourYearPlan/PlanPanel.tsx
@@ -29,7 +29,7 @@ const ShowStatsButton = ({ showStats, setShowStats }: { showStats: boolean, setS
     )
 }
 
-const PlanPanelHeader = styled.div`
+export const PanelHeader = styled.div`
     display: flex;
     justify-content: space-between;
     background-color:'#DBE2F5'; 
@@ -38,13 +38,13 @@ const PlanPanelHeader = styled.div`
     flex-grow: 0;
 `;
 
-const OverflowSemesters = styled(Semesters)`
-    overflow-y: scroll;
+export const PanelBody = styled.div`
+    overflow-y: auto;
     flex-grow: 1;
     padding: 1rem;
 `;
 
-const PlanPanelContainer = styled.div`
+export const PanelContainer = styled.div`
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -71,6 +71,7 @@ const ModalInteriorWrapper = styled.div<{ $row?: boolean }>`
     align-items: center;
     padding: 1rem;
     gap: .5rem;
+    text-align: center;
 `;
 
 const ModalInput = styled.input`
@@ -131,7 +132,10 @@ const ModalInterior = ({ modalObject, modalKey, close, create, rename, remove }:
             return (
                 <ModalInteriorWrapper>
                     <p>Are you sure you want to remove this degree plan?</p>
-                    <ModalButton onClick={() => remove(modalObject.id)}>Remove</ModalButton>
+                    <ModalButton onClick={() => {
+                        remove(modalObject.id)
+                        close();
+                    }}>Remove</ModalButton>
                 </ModalInteriorWrapper>
             );
     }
@@ -199,7 +203,7 @@ const PlanPanel = ({ setActiveDegreeplanId, activeDegreeplan, degreeplans, isLoa
 
     return (
         <>
-            <PlanPanelContainer>
+            <PanelContainer>
                 {modalKey && <ModalContainer
                         title={getModalTitle(modalKey)}
                         close={() => setModalKey(null)}
@@ -217,7 +221,7 @@ const PlanPanel = ({ setActiveDegreeplanId, activeDegreeplan, degreeplans, isLoa
                         />
                     </ModalContainer>
                     }
-                <PlanPanelHeader>
+                <PanelHeader>
                     <SelectListDropdown
                         itemType="degree plan" 
                         active={activeDegreeplan}
@@ -242,10 +246,12 @@ const PlanPanel = ({ setActiveDegreeplanId, activeDegreeplan, degreeplans, isLoa
                         }}              
                     />
                     <ShowStatsButton showStats={showStats} setShowStats={setShowStats} />
-                </PlanPanelHeader>
+                </PanelHeader>
                 {/** map to semesters */}
-                <OverflowSemesters semesters={semesters} setSemesters={setSemesters} showStats={showStats} addCourse={addCourse}/>
-            </PlanPanelContainer>
+                <PanelBody>
+                    <Semesters semesters={semesters} setSemesters={setSemesters} showStats={showStats} addCourse={addCourse}/>
+                </PanelBody>
+            </PanelContainer>
         </>
     );
 }
diff --git a/frontend/degree-plan/components/FourYearPlan/SelectListDropdown.tsx b/frontend/degree-plan/components/FourYearPlan/SelectListDropdown.tsx
index b0595e805..d5f0c76f3 100644
--- a/frontend/degree-plan/components/FourYearPlan/SelectListDropdown.tsx
+++ b/frontend/degree-plan/components/FourYearPlan/SelectListDropdown.tsx
@@ -115,9 +115,9 @@ interface DropdownButton {
     onClick: () => void;
     makeActive: () => void;
     mutators: {
-        copy: () => void;
-        remove: (() => void);
-        rename: (() => void);
+        copy?: () => void;
+        remove?: (() => void);
+        rename?: (() => void);
     };
 }
 
@@ -247,9 +247,9 @@ interface SelectListDropdownProps<T extends DBObject,> {
     selectItem: (id: T["id"]) => void;
     getItemName: (item: T) => string;
     mutators: {
-        copy: (item: T) => void;
-        remove: (item: T) => void;
-        rename: (item: T) => void;
+        copy?: (item: T) => void;
+        remove?: (item: T) => void;
+        rename?: (item: T) => void;
         create: () => void;
     };
 }
@@ -318,9 +318,9 @@ const SelectListDropdown = <T extends DBObject,>({
                                         onClick={() => selectItem(data.id)}
                                         text={getItemName(data)}
                                         mutators={{
-                                            copy: () => copy(data),
-                                            remove: () => remove(data),
-                                            rename: () => rename(data)
+                                            copy: copy && (() => copy(data)),
+                                            remove: remove && (() => remove(data)),
+                                            rename: rename && (() => rename(data))
                                         }}
                                     />
                                 );
diff --git a/frontend/degree-plan/components/FourYearPlan/Semester.tsx b/frontend/degree-plan/components/FourYearPlan/Semester.tsx
index 94c1dd0d0..1ce0a3655 100644
--- a/frontend/degree-plan/components/FourYearPlan/Semester.tsx
+++ b/frontend/degree-plan/components/FourYearPlan/Semester.tsx
@@ -70,7 +70,7 @@ const Semester = ({semester, addCourse, index, highlightReqId, removeCourseFromS
                 {semester.name}
             </SemesterLabel>
             <SemesterContent ref={ref}>
-                <FlexCoursesPlanned courses={semester.courses} highlightReqId={highlightReqId} semesterIndex={index} removeCourse={removeCourse} showCourseDetail={showCourseDetail}/>
+                <FlexCoursesPlanned dropRef={drop} courses={semester.courses} highlightReqId={highlightReqId} semesterIndex={index} removeCourse={removeCourse} showCourseDetail={showCourseDetail}/>
                 {showStats && <FlexStats courses={semester.courses}/>}
             </SemesterContent>
             <CreditsLabel>
diff --git a/frontend/degree-plan/components/Requirements/Major.tsx b/frontend/degree-plan/components/Requirements/Major.tsx
index 5149345c0..2eb831f8d 100644
--- a/frontend/degree-plan/components/Requirements/Major.tsx
+++ b/frontend/degree-plan/components/Requirements/Major.tsx
@@ -1,4 +1,4 @@
-import Requirement from "./Requirement"
+import Rule from "./Requirement"
 import Icon from '@mdi/react';
 import { mdiTrashCanOutline } from '@mdi/js';
 import { mdiReorderHorizontal } from '@mdi/js';
@@ -34,7 +34,7 @@ const Major = ({major, setSearchClosed}: any) => {
                 </div>
                 {!collapsed &&
                 <div className='ms-2 mt-2'>
-                    {major.requirements.map((requirement: any) => ( <Requirement key={requirement.id} requirement={requirement} setSearchClosed={setSearchClosed}/>))}
+                    {major.requirements.map((requirement: any) => ( <Rule key={requirement.id} requirement={requirement} setSearchClosed={setSearchClosed}/>))}
                 </div>}
             </div>
     )
diff --git a/frontend/degree-plan/components/Requirements/QObj.tsx b/frontend/degree-plan/components/Requirements/QObj.tsx
index 6b26dacbb..6b81bfd54 100644
--- a/frontend/degree-plan/components/Requirements/QObj.tsx
+++ b/frontend/degree-plan/components/Requirements/QObj.tsx
@@ -121,7 +121,7 @@ const RootQObj = ({query, reqId}) => {
                 break;
             case 'attributes__code__in':
                 const attrs = stripChar(value, '[', ']');
-                queryComponent = `attribute must be one of`;
+                queryComponent = `attribute must be one of `;
                 // for (const attr in attrs) {
                     queryComponent += stripChar(attrs, '\'');
                 // }
diff --git a/frontend/degree-plan/components/Requirements/ReqPanel.tsx b/frontend/degree-plan/components/Requirements/ReqPanel.tsx
index 15b07d597..699ee4f7d 100644
--- a/frontend/degree-plan/components/Requirements/ReqPanel.tsx
+++ b/frontend/degree-plan/components/Requirements/ReqPanel.tsx
@@ -1,57 +1,99 @@
-import Icon from '@mdi/react';
-import { mdiNoteEditOutline, mdiArrowLeft, mdiPlus } from '@mdi/js';
 import { useEffect, useState } from 'react';
-import { PanelTopBar } from '@/pages/FourYearPlanPage';
 import SelectListDropdown from '../FourYearPlan/SelectListDropdown';
-import SwitchFromList from '../FourYearPlan/SwitchFromList';
-import Requirement from './Requirement';
-import axios from 'axios';
+import Rule from './Requirement';
+import { Degree, DegreePlan } from '@/types';
+import styled from '@emotion/styled';
+import { PanelBody, PanelContainer, PanelHeader } from '@/components/FourYearPlan/PlanPanel'
+import { useSWRCrud } from '@/hooks/swrcrud';
+import { set, update } from 'lodash';
+import { useSWRConfig } from 'swr';
 
 const requirementDropdownListStyle = {
   maxHeight: '90%',
   width: '100%',
-  overflowY: 'scroll',
+  overflowY: 'auto',
   paddingRight: '15px',
   paddingLeft: '15px',
   marginTop: '10px'
 }
-  
-  const ReqPanel = ({majors, currentMajor, highlightReqId, setCurrentMajor, setMajors, setSearchClosed, setDegreeModalOpen, handleSearch, setHighlightReqId}:any) => {
-      const [editMode, setEditMode] = useState(false);
-      const [majorData, setMajorData] = useState({});
 
-      useEffect(() => {
-        const getMajor = async () => {
-            // const res = await axios.get(`/degree/degrees/${currentMajor.id}`);
-            // console.log(res.data);
-            // setMajorData(res.data);
-            // return;
-        }
-        if (currentMajor.id) getMajor();
-      }, [currentMajor])
+const EmptyPanelContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  padding: 2rem;
+  text-align: center;
+`;
+
+const EmptyPanelImage = styled.img`
+    max-width: min(60%, 40vw);
+`;
+
+const EmptyPanel = () => {
+  return (
+    <EmptyPanelContainer>
+      <EmptyPanelImage src="/images/empty-state-cal.svg" />
+      There's nothing here so far... add a degree to get started!
+    </EmptyPanelContainer>
+  )
+}
+
+interface ReqPanelProps {
+  activeDegreePlan: DegreePlan | null;
+  isLoading: boolean;
+}
+const ReqPanel = ({activeDegreePlan, isLoading, highlightReqId, setSearchClosed, handleSearch, setHighlightReqId}: ReqPanelProps) => {
+  const degrees = activeDegreePlan?.degrees;
+  const [activeDegreeId, setActiveDegreeId] = useState<Degree["id"] | undefined>(undefined);
+  const [activeDegree, setActiveDegree] = useState<Degree | undefined>(undefined);
+  useEffect(() => {
+    if (!activeDegreeId && degrees?.length) {
+      setActiveDegreeId(degrees[0].id);
+    }
+  }, [activeDegreeId, activeDegreePlan])
+
+  useEffect(() => {
+    if (activeDegreeId && degrees) {
+      setActiveDegree(degrees.find(degree => degree.id === activeDegreeId));
+    }
+  })
 
-    return(
-        <>
-          <PanelTopBar>
-              <SelectListDropdown 
-              allItems={[]}
-              active={undefined}
-              selectItem={setCurrentMajor}
-              itemType={"major or degree"}
-              mutators={{
-                copy: () => {},
-                remove: () => {},
-                rename: () => {},
-                create: () => {}
-              }}
-              />
-          </PanelTopBar>
-          <div style={requirementDropdownListStyle}>
-            {majorData && majorData.rules && majorData.rules.map((requirement: any) => ( 
-              <Requirement requirement={requirement} setSearchClosed={setSearchClosed} parent={null} handleSearch={handleSearch} setHighlightReqId={setHighlightReqId} highlightReqId={highlightReqId} key={requirement.id}/>
-            ))}
-          </div>
-        </>
-    );
+  const { update: updateDegreeplan } = useSWRCrud<DegreePlan>('/api/degree/degreeplans/');
+  
+  return(
+      <PanelContainer>
+        <PanelHeader>
+            <SelectListDropdown 
+            allItems={degrees || []}
+            active={activeDegree}
+            selectItem={(id: Degree["id"]) => setActiveDegreeId(id)}
+            getItemName={(degree: Degree) => `${degree.major}, ${degree.degree}`}
+            itemType={"major or degree"}
+            mutators={{
+              remove: (degree) => {
+                updateDegreeplan(
+                  {degree_ids: activeDegreePlan?.degree_ids?.filter(id => id !== degree.id) || []},
+                  activeDegreePlan?.id
+                )
+                if (degree.id === activeDegreeId) setActiveDegreeId(undefined);
+              },
+              create: () => updateDegreeplan(
+                {degree_ids: [...(activeDegreePlan?.degree_ids || []), 1867]}, // TODO: this is a placeholder, we need to add a new degree
+                activeDegreePlan?.id
+              )?.then(() => setActiveDegreeId(1867)),
+            }}
+            />
+        </PanelHeader>
+        <PanelBody>
+          {activeDegree?.rules?.map((rule: any) => ( 
+              <Rule rule={rule} setSearchClosed={setSearchClosed} handleSearch={handleSearch} setHighlightReqId={setHighlightReqId} highlightReqId={highlightReqId} key={rule.id}/>
+            ))
+            || <EmptyPanel />
+            }
+        </PanelBody>
+      </PanelContainer>
+  );
 }
 export default ReqPanel;
\ No newline at end of file
diff --git a/frontend/degree-plan/components/Requirements/Requirement.tsx b/frontend/degree-plan/components/Requirements/Requirement.tsx
index 373fbedd4..44572b994 100644
--- a/frontend/degree-plan/components/Requirements/Requirement.tsx
+++ b/frontend/degree-plan/components/Requirements/Requirement.tsx
@@ -1,79 +1,87 @@
-// interface IRequirement {
-//     req: [ICourse]
-// }
-import Icon from '@mdi/react';
-import { mdiArrowDown, mdiArrowUp, mdiEye, mdiLightSwitch, mdiLightbulb, mdiLightbulbOutline, mdiMagnify, mdiMenuDown, mdiMenuUp } from '@mdi/js';
-import { titleStyle } from "@/pages/FourYearPlanPage";
-import Course from "./Course";
+import MDIcon from '@mdi/react';
+import { mdiEye, mdiMagnify, mdiMenuDown, mdiMenuUp } from '@mdi/js';
 import { useState } from 'react';
 import RootQObj , { trimQuery } from './QObj';
+import { Rule } from '@/types';
+import styled from '@emotion/styled';
+import { Icon } from '../bulma_derived_components';
 
-/* Recursive component */
-const Requirement = ({requirement, setSearchClosed, parent, handleSearch, setHighlightReqId, highlightReqId} : any) => {
-    const [collapsed, setCollapsed] = useState(true);
+const RuleTitle = styled.div`
+    font-size: 1rem;
+    font-weight: 500;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    background-color: #F5F5F5;
+    color: #575757;
+    padding: 0.25rem .5rem;
+    margin: 0.5rem 0;
+    border-radius: .5rem;
+`
+
+const CourseRequirementWrapper = styled.div`
+  margin: .5rem 0;
+  display: flex;
+  justify-content: space-between;
+`
+
+interface RuleProps {
+    rule: Rule;
+    setSearchClosed: any;
+    handleSearch: any;
+    setHighlightReqId: any;
+    highlightReqId: any;
+}
+
+/**
+ * Recursive component to represent a rule.
+ * @returns 
+ */
+const Rule = ({ rule, setSearchClosed, handleSearch, setHighlightReqId, highlightReqId } : RuleProps) => {
+    const [collapsed, setCollapsed] = useState(false);
 
     const handleShowSatisfyingCourses = () => {
         console.log(highlightReqId);
-        if (highlightReqId === requirement.id) 
+        if (highlightReqId === rule.id) 
             setHighlightReqId(-1);
         else 
-        setHighlightReqId(requirement.id);
+        setHighlightReqId(rule.id);
     }
 
     return (
-        <>
-            {parent === requirement.parent && 
-            (requirement.q || requirement.title) &&
-            <div>
-            
-                    {requirement.q ? 
-                    <label className="mb-2 col-12 justify-content-between d-flex" style={{
-                        backgroundColor:'#EFEFEF', 
-                        fontSize:'16px', 
-                        padding:'2px', 
-                        paddingLeft:'15px', 
-                        borderRadius:'8px',
-                    }}>
-                        <div style={titleStyle}>
-                            <RootQObj query={trimQuery(requirement.q)} reqId={requirement.id}/>
-                        </div>
-                        <div className='d-flex'>
-                            <div onClick={handleShowSatisfyingCourses}>
-                                <Icon path={mdiEye} size={1} color={highlightReqId === requirement.id ? 'yellow': '#575757'}/>
-                            </div>
-                            <div onClick={() => {setSearchClosed(false); handleSearch(requirement.id);}}>
-                                <Icon path={mdiMagnify} size={1} color='#575757'/>
-                            </div>
-                        </div>
-                    </label>
-                    :
-                    <label className="mb-2 col-12 justify-content-between d-flex" style={{
-                        backgroundColor:'#EFEFEF', 
-                        fontSize:'16px', 
-                        padding:'2px', 
-                        paddingLeft:'15px', 
-                        borderRadius:'8px',
-                    }}>
-                        <div onClick={() => setCollapsed(!collapsed)} className='col-12 d-flex justify-content-between'>
-                            <div style={titleStyle}>
-                                {requirement.title}
-                            </div>
-                            <div>
-                                {requirement.rules.length && 
-                                    <Icon path={collapsed ? mdiMenuDown : mdiMenuUp} size={1} color='#575757'/>
-                                }
-                            </div>
-                        </div>
-                    </label>
-                    }
-                {!collapsed && <div className="ms-3">
-                    {requirement.rules.map((rule: any, index: number) => 
-                        <Requirement requirement={rule} setSearchClosed={setSearchClosed} parent={requirement.id} handleSearch={handleSearch} setHighlightReqId={setHighlightReqId} highlightReqId={highlightReqId}/>
-                    )}
-                </div>}
-            </div>}
-        </>
+      <>
+        {rule.q ? 
+          <CourseRequirementWrapper>
+              <RootQObj query={trimQuery(rule.q)} reqId={rule.id}/>
+              <div className='d-flex'>
+                <div onClick={handleShowSatisfyingCourses}>
+                  <MDIcon path={mdiEye} size={1} color={highlightReqId === rule.id ? 'yellow': '#575757'}/>
+                </div>
+                <div onClick={() => {setSearchClosed(false); handleSearch(rule.id);}}>
+                  <MDIcon path={mdiMagnify} size={1} color='#575757'/>
+                </div>
+              </div>
+          </CourseRequirementWrapper>
+          :
+          <RuleTitle onClick={() => setCollapsed(!collapsed)}>
+            <div>{rule.title}</div>
+            {rule.rules.length && 
+                <Icon path={collapsed ? mdiMenuDown : mdiMenuUp} size={1} color='#575757'>
+                  <i class={`fas fa-chevron-${collapsed ? "up" : "down"}`}></i>
+                </Icon>
+            }
+          </RuleTitle>
+          }
+
+        {!collapsed && <div className="ms-3">
+            {rule.rules.map((rule: any, index: number) => 
+                <Rule rule={rule} setSearchClosed={setSearchClosed} handleSearch={handleSearch} setHighlightReqId={setHighlightReqId} highlightReqId={highlightReqId}/>
+            )}
+          </div>
+          }
+      </>
     )
 }
 
-export default Requirement;
\ No newline at end of file
+export default Rule;
\ No newline at end of file
diff --git a/frontend/degree-plan/pages/FourYearPlanPage.tsx b/frontend/degree-plan/pages/FourYearPlanPage.tsx
index 8ac57ec61..348f39475 100644
--- a/frontend/degree-plan/pages/FourYearPlanPage.tsx
+++ b/frontend/degree-plan/pages/FourYearPlanPage.tsx
@@ -151,7 +151,7 @@ const FourYearPlanPage = () => {
                 </PanelContainer>
                 <Divider onMouseDown={startResize}/>
                 <PanelContainer $width={totalWidth - leftWidth}>
-                    <ReqPanel majors={majors} highlightReqId={highlightReqId} setHighlightReqId={setHighlightReqId} setMajors={setMajors} currentMajor={currentMajor} setCurrentMajor={setCurrentMajor} setSearchClosed={setSearchClosed} setDegreeModalOpen={setDegreeModalOpen} handleSearch={handleSearch}/>
+                    <ReqPanel activeDegreePlan={activeDegreePlan} highlightReqId={highlightReqId} setHighlightReqId={setHighlightReqId} setMajors={setMajors} currentMajor={currentMajor} setCurrentMajor={setCurrentMajor} setSearchClosed={setSearchClosed} setDegreeModalOpen={setDegreeModalOpen} handleSearch={handleSearch}/>
                 </PanelContainer>
                 <PanelContainer hidden={searchClosed}>
                     <SearchPanel setClosed={handleCloseSearchPanel} courses={results} showCourseDetail={showCourseDetail} loading={loading} searchReqId={highlightReqId}/>
diff --git a/frontend/degree-plan/public/images/empty-state-cal.svg b/frontend/degree-plan/public/images/empty-state-cal.svg
new file mode 100644
index 000000000..bb25c87e8
--- /dev/null
+++ b/frontend/degree-plan/public/images/empty-state-cal.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 983.2 597.6" style="enable-background:new 0 0 983.2 597.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E9EDFF;}
+	.st1{fill:none;stroke:#B2B2B2;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:#B2B2B2;stroke-width:4;stroke-linecap:round;stroke-miterlimit:10;stroke-dasharray:10.1646,20.3293;}
+	.st3{fill:none;stroke:#B2B2B2;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st4{fill:#FFFFFF;}
+	.st5{fill:none;stroke:#E8E8E8;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st6{fill:#B2B2B2;}
+	.st7{fill:none;stroke:#7B84E6;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;}
+	.st8{fill:none;stroke:#B2B2B2;stroke-width:8.9109;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st9{fill:#FFFFFF;stroke:#B2B2B2;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st10{fill:none;stroke:#B2B2B2;stroke-width:8.4748;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st11{fill:none;stroke:#B2B2B2;stroke-width:7.5021;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+</style>
+<g>
+	<g>
+		<path class="st1" d="M606.5,271.4c0,0-0.2,1.8-0.9,4.9"/>
+		<path class="st2" d="M598.8,295.5c-12.4,26.2-44.2,66.4-125.2,81.6c-124.4,23.4-148.3-116-48.4-132.3
+			c98.5-16,150.4,297.7-169.7,245"/>
+		<path class="st1" d="M245.5,488c-1.6-0.3-3.3-0.6-4.9-0.9"/>
+	</g>
+</g>
+<g>
+	<line class="st7" x1="682.5" y1="399.1" x2="680.7" y2="405.2"/>
+	<line class="st7" x1="675.7" y1="422.2" x2="673.9" y2="428.3"/>
+	<line class="st7" x1="663.8" y1="409.4" x2="669.9" y2="411.2"/>
+	<line class="st7" x1="686.3" y1="416" x2="692.6" y2="417.9"/>
+</g>
+<g>
+	<line class="st7" x1="226.2" y1="341.2" x2="224.1" y2="347.2"/>
+	<line class="st7" x1="218.4" y1="364" x2="216.3" y2="370"/>
+	<line class="st7" x1="207" y1="350.7" x2="213.1" y2="352.7"/>
+	<line class="st7" x1="229.2" y1="358.3" x2="235.5" y2="360.4"/>
+</g>
+<g>
+	<polygon class="st0" points="577.2,117.4 627.5,155.7 786.3,76.2 573.4,114.9 	"/>
+	<polygon class="st0" points="658,179.4 736.8,244.2 794.7,81.3 	"/>
+	<polyline class="st8" points="706.4,90.7 799.3,73.8 627.1,159.4 568.6,115.8 663.6,98.5 	"/>
+	<polygon class="st8" points="653.6,179.8 736.8,244.2 799.3,73.8 	"/>
+	<polygon class="st0" points="653.2,184.1 639,221.8 678.2,204.7 	"/>
+	<polyline class="st8" points="653.6,179.8 633.6,227 627.1,159.4 	"/>
+	<line class="st8" x1="633.6" y1="227" x2="682.8" y2="202.4"/>
+	<circle class="st6" cx="684" cy="94" r="5.1"/>
+</g>
+</svg>
diff --git a/frontend/degree-plan/types.ts b/frontend/degree-plan/types.ts
index 48b8721d8..ffb76be0f 100644
--- a/frontend/degree-plan/types.ts
+++ b/frontend/degree-plan/types.ts
@@ -2,6 +2,17 @@ export interface DBObject {
   id: any;
 }
 
+export interface Rule extends DBObject {
+  id: number;
+  q: string; // could be blank
+  title: string; // could be blank
+  credits: number | null;
+  parent: Rule["id"],
+  num: number | null;
+  concentration: string;
+  rules: Rule[];
+}
+
 export interface Degree extends DBObject {
   id: number;
   year: number;
@@ -9,11 +20,13 @@ export interface Degree extends DBObject {
   degree: string;
   major: string;
   concentration: string;
+  rules: Rule[];
 }
 
 export interface DegreePlan extends DBObject {
   id: number;
-  degree: Degree;
+  degrees: Degree[];
+  degree_ids: number[]; // the ids of the degrees in the degree plan, which we use to mutate the degree plan
   name: string;
   updated_at: string;
   created_at: string;