diff --git a/src/components/Course/CatalogCourse.tsx b/src/components/Course/CatalogCourse.tsx
index 3664600..ccb4ed0 100644
--- a/src/components/Course/CatalogCourse.tsx
+++ b/src/components/Course/CatalogCourse.tsx
@@ -2,11 +2,11 @@ import React, { useState } from "react";
 import Tag from "./CatalogCourse/Tag";
 import AddButton from "./CatalogCourse/AddButton";
 import { motion } from "framer-motion";
-import { CourseType } from "../../types/interfaces/Course.interface";
+import { APICourse } from "../../types/interfaces/Course.interface";
 import { useCourseWorkspace } from "../../hooks/useCourseWorkspace";
 
 interface CourseProps {
-  course: CourseType;
+  course: APICourse;
 }
 
 const Course: React.FC<CourseProps> = ({ course }) => {
@@ -26,18 +26,18 @@ const Course: React.FC<CourseProps> = ({ course }) => {
       .join(" ");
   };
 
-  const courseDisplay: string = `${course.dept + course.code_num} ${toTitleCase(course.title)}`;
+  const courseDisplay: string = `${course.subj_code}-${course.code_num} ${toTitleCase(course.title)}`;
   const addCourse = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
 
     setToolboxCourses((prevCourses) => {
       const existingIndex = prevCourses.findIndex(
-        (c) => c.name === courseDisplay,
+        (c) => c.name === courseDisplay
       );
 
       if (existingIndex !== -1) {
         return prevCourses.map((c, i) =>
-          i === existingIndex ? { ...c, count: c.count + 1 } : c,
+          i === existingIndex ? { ...c, count: c.count + 1 } : c
         );
       } else {
         return [
@@ -67,18 +67,30 @@ const Course: React.FC<CourseProps> = ({ course }) => {
         <div>
           <div className={`text-md`}>
             <b>
-              {course.dept}
-              {course.code_num}
+              {course.subj_code}-{course.code_num}
             </b>
             <p>{toTitleCase(course.title)}</p>
           </div>
           <div className={`flex flex-wrap mt-1`}>
-            <Tag name={course.dept} color={"4D5E87"} />
-            {course.attr_list?.split(",").map((attr, index) => {
-              return <Tag key={index} name={attr} color={"4D5E87"} />;
+            {course.attr_list?.map((attr, index) => {
+              return (
+                <Tag
+                  key={index}
+                  name={attr}
+                  bgcolor={"#99C1B9"}
+                  color={"#283044"}
+                />
+              );
             })}
-            {course.sem_list?.split(",").map((semester, index) => {
-              return <Tag key={index} name={semester} color={"4D5E87"} />;
+            {course.sem_list?.map((semester, index) => {
+              return (
+                <Tag
+                  key={index}
+                  name={semester}
+                  bgcolor={"#565E87"}
+                  color={"#F5CECE"}
+                />
+              );
             })}
           </div>
         </div>
diff --git a/src/components/Course/CatalogCourse/Tag.tsx b/src/components/Course/CatalogCourse/Tag.tsx
index 7f9777e..cf5d581 100644
--- a/src/components/Course/CatalogCourse/Tag.tsx
+++ b/src/components/Course/CatalogCourse/Tag.tsx
@@ -2,13 +2,14 @@ import React from "react";
 
 interface TagProp {
   name: string;
+  bgcolor: string;
   color: string;
 }
-const Tag: React.FC<TagProp> = ({ name, color }) => {
+const Tag: React.FC<TagProp> = ({ name, bgcolor, color }) => {
   return (
     <div
-      className={`rounded-2xl text-carpipink px-3 py-1 text-xs mr-1 mb-1`}
-      style={{ backgroundColor: `#${color}` }}
+      className={`rounded-2xl px-3 py-1 text-xs mr-1 mb-1`}
+      style={{ backgroundColor: `${bgcolor}`, color: `${color}` }}
     >
       {name}
     </div>
diff --git a/src/components/Course/PlannerCourse.tsx b/src/components/Course/PlannerCourse.tsx
index 1af068c..d6c20ed 100644
--- a/src/components/Course/PlannerCourse.tsx
+++ b/src/components/Course/PlannerCourse.tsx
@@ -6,19 +6,19 @@ import React, {
   SetStateAction,
 } from "react";
 import { MdDragIndicator, MdOutlineMoreHoriz } from "react-icons/md";
-import { CourseType } from "../../types/interfaces/Course.interface";
+import { APICourse } from "../../types/interfaces/Course.interface";
 import { SemesterType } from "../../types/interfaces/Semester.interface";
-import { CourseEntry } from "../../types/interfaces/Course.interface";
+import { UserCourse } from "../../types/interfaces/Course.interface";
 import * as RightClickContextMenu from "@radix-ui/react-context-menu";
 import { usePlannerCourse } from "../../hooks/usePlannerCourseOptions";
 import PlannerOptionsPopup from "../PlannerComponents/PlannerOptionsPopup";
 
 interface PlannerCourseProps {
-  course: CourseType;
+  course: APICourse;
   isDragging?: boolean;
   index: number;
   setPlannerCourses: Dispatch<SetStateAction<SemesterType[]>>;
-  setToolboxCourses: Dispatch<SetStateAction<CourseEntry[]>>;
+  setToolboxCourses: Dispatch<SetStateAction<UserCourse[]>>;
   semesterIndex: number;
   count: number;
 }
@@ -88,8 +88,7 @@ const PlannerCourse: React.FC<PlannerCourseProps> = ({
             <MdDragIndicator className="text-2xl" />
             <div className={`text-sm`}>
               <b>
-                {course.dept}
-                {course.code_num}
+                {course.subj_code}-{course.code_num}
               </b>
               <i>
                 {course.credit_min !== course.credit_max ? (
diff --git a/src/components/Course/ToolboxCourse.tsx b/src/components/Course/ToolboxCourse.tsx
index ffe5581..7f137d3 100644
--- a/src/components/Course/ToolboxCourse.tsx
+++ b/src/components/Course/ToolboxCourse.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { CourseType } from "../../types/interfaces/Course.interface";
+import { APICourse } from "../../types/interfaces/Course.interface";
 import { MdDragIndicator } from "react-icons/md";
 
 interface ToolboxCourseProps {
@@ -7,7 +7,7 @@ interface ToolboxCourseProps {
   count: number;
   index: number;
   isDragging: boolean;
-  course: CourseType;
+  course: APICourse;
 }
 
 const ToolboxCourse: React.FC<ToolboxCourseProps> = ({
@@ -31,8 +31,7 @@ const ToolboxCourse: React.FC<ToolboxCourseProps> = ({
           <MdDragIndicator className="text-2xl" />
           <div className={`text-sm`}>
             <b>
-              {course.dept}
-              {course.code_num}
+              {course.subj_code}-{course.code_num}
             </b>
             <p>{toTitleCase(course.title)}</p>
           </div>
diff --git a/src/components/Department-Filters.tsx b/src/components/Department-Filters.tsx
index 8bd1242..ea1ca61 100644
--- a/src/components/Department-Filters.tsx
+++ b/src/components/Department-Filters.tsx
@@ -1,66 +1,14 @@
 import React from "react";
 import { useFilterData } from "../hooks/useFilters";
 
-// Department type
-interface Department {
-  code: string;
-  name: string;
-}
-
-// List of Departments
-const departments: Department[] = [
-  { code: "ADMN", name: "Administrative Courses" },
-  { code: "ARCH", name: "Architecture" },
-  { code: "ARTS", name: "Arts" },
-  { code: "ASTR", name: "Astronomy" },
-  { code: "BCBP", name: "BioChemistry & BioPhysics" },
-  { code: "BIOL", name: "Biology" },
-  { code: "BMED", name: "Biomedical Engineering" },
-  { code: "BUSN", name: "Business" },
-  { code: "CHEM", name: "Chemistry" },
-  { code: "CHME", name: "Chemical Engineering" },
-  { code: "CIVL", name: "Civil Engineering" },
-  { code: "COGS", name: "Cognitive Science" },
-  { code: "COMM", name: "Communication" },
-  { code: "CSCI", name: "Computer Science" },
-  { code: "ECON", name: "Economics" },
-  { code: "ECSE", name: "Electrical, Computer, Systems Engineering" },
-  { code: "ENGR", name: "Core Engineering" },
-  { code: "ENVE", name: "Environmental Engineering" },
-  { code: "ERTH", name: "Earth & Environmental Sci" },
-  { code: "GSAS", name: "Games & Simulation Arts & Sciences" },
-  { code: "IHSS", name: "HASS Inquiry" },
-  { code: "IENV", name: "Interdisciplinary Environmental" },
-  { code: "ISCI", name: "Interdisciplinary Science" },
-  { code: "ISYE", name: "Industrial & Systems Engineering" },
-  { code: "ITWS", name: "Information Technology & Web Sci" },
-  { code: "LANG", name: "Languages" },
-  { code: "LGHT", name: "Lighting" },
-  { code: "LITR", name: "Literature" },
-  { code: "MANE", name: "Mech, Aero, Nucl Engineer" },
-  { code: "MATH", name: "Mathematics" },
-  {
-    code: "MATP",
-    name: "Mathematical Programming, Probability, and Statistics",
-  },
-  { code: "MTLE", name: "Material Sciences & Engineering" },
-  { code: "PHIL", name: "Philosophy" },
-  { code: "PHYS", name: "Physics" },
-  { code: "STSO", name: "Science, Technology, & Society" },
-  { code: "USAF", name: "Aerospace Studies" },
-  { code: "USAR", name: "Military Science" },
-  { code: "USNA", name: "Naval Science" },
-  { code: "WRIT", name: "Writing" },
-];
-
 const DepartmentFilters: React.FC = () => {
-  const { toggleFilter } = useFilterData();
+  const { toggleFilter, subjects } = useFilterData();
 
   return (
     <div className="md:h-full md:w-full md:overflow-y-auto flex flex-wrap justify-center gap-2">
-      {departments.map((dept) => (
+      {subjects.map((subject) => (
         <button
-          key={dept.code}
+          key={subject.code}
           className={`
             px-3 
             py-2 
@@ -72,17 +20,11 @@ const DepartmentFilters: React.FC = () => {
             hover:bg-darkblue hover:text-carpipink
             h-fit
           `}
-          onClick={() =>
-            toggleFilter({
-              id: 1,
-              code: dept.code,
-              type: "Subject",
-            })
-          }
+          onClick={() => toggleFilter(subject)}
         >
           <div className="flex items-center gap-2 whitespace-nowrap">
-            <span className="font-bold">{dept.code}</span>
-            <span className="font-normal">{dept.name}</span>
+            <span className="font-bold">{subject.code}</span>
+            <span className="font-normal">{subject.value}</span>
           </div>
         </button>
       ))}
diff --git a/src/components/DraggableItem.tsx b/src/components/DraggableItem.tsx
index 6ef87eb..de1b734 100644
--- a/src/components/DraggableItem.tsx
+++ b/src/components/DraggableItem.tsx
@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from "react";
 import { Draggable } from "@hello-pangea/dnd";
 import { SemesterType } from "../types/interfaces/Semester.interface";
-import { CourseType, CourseEntry } from "../types/interfaces/Course.interface";
+import { APICourse, UserCourse } from "../types/interfaces/Course.interface";
 
 import PlannerCourse from "./Course/PlannerCourse";
 import ToolboxCourse from "./Course/ToolboxCourse";
@@ -10,10 +10,10 @@ interface DraggableItemProps {
   name: string;
   count: number;
   index: number;
-  course: CourseType;
+  course: APICourse;
   location: string;
   setPlannerCourses: Dispatch<SetStateAction<SemesterType[]>> | null;
-  setToolboxCourses: Dispatch<SetStateAction<CourseEntry[]>> | null;
+  setToolboxCourses: Dispatch<SetStateAction<UserCourse[]>> | null;
   semesterIndex: number | null;
 }
 
diff --git a/src/components/PlannerComponents/RightClickContext.tsx b/src/components/PlannerComponents/RightClickContext.tsx
index 9688348..b88b5b3 100644
--- a/src/components/PlannerComponents/RightClickContext.tsx
+++ b/src/components/PlannerComponents/RightClickContext.tsx
@@ -1,16 +1,16 @@
 import React, { Dispatch, SetStateAction } from "react";
 import * as ContextMenu from "@radix-ui/react-context-menu";
 import { MdDragIndicator } from "react-icons/md";
-import { CourseType } from "../../types/interfaces/Course.interface";
+import { APICourse } from "../../types/interfaces/Course.interface";
 import { SemesterType } from "../../types/interfaces/Semester.interface";
-import { CourseEntry } from "../../types/interfaces/Course.interface";
+import { UserCourse } from "../../types/interfaces/Course.interface";
 
 interface PlannerCourseProps {
-  course: CourseType;
+  course: APICourse;
   isDragging: boolean;
   index: number;
   setPlannerCourses: Dispatch<SetStateAction<SemesterType[]>>;
-  setToolboxCourses: Dispatch<SetStateAction<CourseEntry[]>>;
+  setToolboxCourses: Dispatch<SetStateAction<UserCourse[]>>;
   semesterIndex: number;
 }
 
@@ -41,8 +41,8 @@ const PlannerCourse: React.FC<PlannerCourseProps> = ({
                 ...semester.courseList.slice(index + 1),
               ],
             }
-          : semester,
-      ),
+          : semester
+      )
     );
   };
 
@@ -76,7 +76,7 @@ const PlannerCourse: React.FC<PlannerCourseProps> = ({
               courseList: s.courseList.filter((_, idx) => idx !== index),
               creditsTotal: s.creditsTotal - courseCopy.data.credit_max,
             }
-          : s,
+          : s
       );
       return updated.map((s, i) =>
         i === semesterIndex
@@ -85,7 +85,7 @@ const PlannerCourse: React.FC<PlannerCourseProps> = ({
               courseList: [...s.courseList, courseCopy],
               creditsTotal: s.creditsTotal + courseCopy.data.credit_max,
             }
-          : s,
+          : s
       );
     });
   };
@@ -93,7 +93,8 @@ const PlannerCourse: React.FC<PlannerCourseProps> = ({
   const handleMoveToolbox = () => {
     setPlannerCourses((prev) => {
       const courseToMove = prev[semesterIndex - 1].courseList[index];
-      const cleanedName = courseToMove.name.split("-")[0];
+      const nameParts = courseToMove.name.split("-");
+      const cleanedName = nameParts.slice(0, 2).join("-");
       const cleanedCourse = { ...courseToMove, name: cleanedName };
 
       const updated = prev.map((s, i) =>
@@ -103,12 +104,12 @@ const PlannerCourse: React.FC<PlannerCourseProps> = ({
               courseList: s.courseList.filter((_, idx) => idx !== index),
               creditsTotal: s.creditsTotal - courseToMove.data.credit_max,
             }
-          : s,
+          : s
       );
 
       setToolboxCourses((toolboxPrev) => {
         const existingIndex = toolboxPrev.findIndex(
-          (entry) => entry.name === cleanedName,
+          (entry) => entry.name === cleanedName
         );
         if (existingIndex !== -1) {
           const updatedToolbox = [...toolboxPrev];
@@ -132,8 +133,8 @@ const PlannerCourse: React.FC<PlannerCourseProps> = ({
               creditsTotal:
                 s.creditsTotal - s.courseList[index].data.credit_max,
             }
-          : s,
-      ),
+          : s
+      )
     );
   };
 
@@ -156,8 +157,7 @@ const PlannerCourse: React.FC<PlannerCourseProps> = ({
                 <MdDragIndicator />
                 <div className="text-sm ml-1">
                   <b>
-                    {course.dept}
-                    {course.code_num}
+                    {course.subj_code}-{course.code_num}
                   </b>
                   <p>{toTitleCase(course.title)}</p>
                 </div>
diff --git a/src/components/PlannerComponents/SemesterBlock.tsx b/src/components/PlannerComponents/SemesterBlock.tsx
index 5027fc1..56affc0 100644
--- a/src/components/PlannerComponents/SemesterBlock.tsx
+++ b/src/components/PlannerComponents/SemesterBlock.tsx
@@ -3,13 +3,13 @@ import { SemesterType } from "../../types/interfaces/Semester.interface";
 import { Droppable } from "@hello-pangea/dnd";
 import PlannerCourseHolder from "./PlannerCourseHolder";
 import DraggableItem from "../DraggableItem";
-import { CourseEntry } from "../../types/interfaces/Course.interface";
+import { UserCourse } from "../../types/interfaces/Course.interface";
 
 interface SemesterBlockProps {
   semester: SemesterType;
   index: number;
   setPlannerCourses: Dispatch<SetStateAction<SemesterType[]>>;
-  setToolboxCourses: Dispatch<SetStateAction<CourseEntry[]>>;
+  setToolboxCourses: Dispatch<SetStateAction<UserCourse[]>>;
 }
 
 const seasons: string[] = ["fall", "spring", "summer", "misc"];
@@ -26,8 +26,8 @@ const SemesterBlock: React.FC<SemesterBlockProps> = ({
       prevCourses.map((sem) =>
         sem.semesterID === semester.semesterID
           ? { ...sem, semesterSeason: newSeason }
-          : sem,
-      ),
+          : sem
+      )
     );
   };
 
diff --git a/src/components/PlannerComponents/SemesterBlocks/SemesterBlock.tsx b/src/components/PlannerComponents/SemesterBlocks/SemesterBlock.tsx
index 9c3536b..26440cd 100644
--- a/src/components/PlannerComponents/SemesterBlocks/SemesterBlock.tsx
+++ b/src/components/PlannerComponents/SemesterBlocks/SemesterBlock.tsx
@@ -2,7 +2,7 @@ import React, { Dispatch, SetStateAction } from "react";
 import useIsDesktop from "../../../hooks/useIsDesktop";
 
 import { SemesterType } from "../../../types/interfaces/Semester.interface";
-import { CourseEntry } from "../../../types/interfaces/Course.interface";
+import { UserCourse } from "../../../types/interfaces/Course.interface";
 import MobileSemesterBlock from "./MobileSemesterBlock";
 import DesktopSemesterBlock from "./DesktopSemesterBlock";
 
@@ -10,7 +10,7 @@ export interface SemesterBlockProps {
   semester: SemesterType;
   index: number;
   setPlannerCourses: Dispatch<SetStateAction<SemesterType[]>>;
-  setToolboxCourses: Dispatch<SetStateAction<CourseEntry[]>>;
+  setToolboxCourses: Dispatch<SetStateAction<UserCourse[]>>;
 }
 
 const SemesterBlock: React.FC<SemesterBlockProps> = ({
diff --git a/src/components/SearchBar/ChosenTag.tsx b/src/components/SearchBar/ChosenTag.tsx
index 64c4e09..eff9e0c 100644
--- a/src/components/SearchBar/ChosenTag.tsx
+++ b/src/components/SearchBar/ChosenTag.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { IoClose } from "react-icons/io5";
 import { useFilterData } from "../../hooks/useFilters";
-import { FilterData } from "../../types/Filters";
+import { FilterData } from "../../types/interfaces/Filters.interface";
 
 interface ChosenTagProp {
   filter: FilterData;
@@ -13,11 +13,11 @@ const ChosenTag: React.FC<ChosenTagProp> = ({ filter }) => {
     <div
       className={`rounded-2xl text-carpipink px-3 py-1 text-sm mr-1 mb-1 bg-darkblue inline-flex items-center`}
     >
-      {filter.code}
+      {filter.value}
       <button
         type="button"
         onClick={() => toggleFilter(filter)}
-        aria-label={`Remove filter: ${filter.code}`}
+        aria-label={`Remove filter: ${filter.value}`}
         className="inline ml-1"
       >
         <IoClose className="w-4 h-4 hover:cursor-pointer" />
diff --git a/src/components/SearchBar/FilterPanel/FilterSection.tsx b/src/components/SearchBar/FilterPanel/FilterSection.tsx
index 53dabeb..f6f6092 100644
--- a/src/components/SearchBar/FilterPanel/FilterSection.tsx
+++ b/src/components/SearchBar/FilterPanel/FilterSection.tsx
@@ -1,14 +1,9 @@
 import React from "react";
-import { FilterData } from "../../../types/Filters";
-
-interface TagProp {
-  id: number;
-  code: string;
-}
+import { FilterData } from "../../../types/interfaces/Filters.interface";
 
 interface FilterSectionProps {
   sectionName: "Subject" | "Attributes" | "Semesters";
-  tags: TagProp[];
+  tags: FilterData[];
   selected: string[];
   toggleFilter: (filter: FilterData) => void;
 }
@@ -28,15 +23,9 @@ const FilterSection: React.FC<FilterSectionProps> = ({
             key={tag.id}
             className={`hover:bg-darkblue/10 hover:cursor-pointer rounded-2xl px-3 py-1 text-sm mr-1 mb-1 flex-none
               ${selected.includes(tag.code) ? "bg-darkblue text-carpipink hover:bg-darkblue/70 border border-darkblue" : "border border-darkblue text-darkblue"}`}
-            onClick={() =>
-              toggleFilter({
-                id: tag.id,
-                code: tag.code,
-                type: sectionName,
-              })
-            }
+            onClick={() => toggleFilter(tag)}
           >
-            {tag.code}
+            {tag.value}
           </button>
         ))}
       </div>
diff --git a/src/context/CourseWorkspaceContext.tsx b/src/context/CourseWorkspaceContext.tsx
index 14ad4ba..f71f95e 100644
--- a/src/context/CourseWorkspaceContext.tsx
+++ b/src/context/CourseWorkspaceContext.tsx
@@ -1,20 +1,20 @@
 import React, { createContext } from "react";
-import { CourseEntry } from "../types/interfaces/Course.interface.ts";
+import { UserCourse } from "../types/interfaces/Course.interface.ts";
 import { SemesterType } from "../types/interfaces/Semester.interface.ts";
 import { OnDragStartResponder, OnDragEndResponder } from "@hello-pangea/dnd";
 
 export interface CourseWorkspaceContextType {
   plannerCourses: SemesterType[];
   setPlannerCourses: React.Dispatch<React.SetStateAction<SemesterType[]>>;
-  toolboxCourses: CourseEntry[];
-  setToolboxCourses: React.Dispatch<React.SetStateAction<CourseEntry[]>>;
+  toolboxCourses: UserCourse[];
+  setToolboxCourses: React.Dispatch<React.SetStateAction<UserCourse[]>>;
   isDragging: boolean;
   onDragStart: OnDragStartResponder;
   onDragEnd: OnDragEndResponder;
 }
 
 const CourseWorkspaceContext = createContext<CourseWorkspaceContextType | null>(
-  null,
+  null
 );
 
 export default CourseWorkspaceContext;
diff --git a/src/context/CourseWorkspaceProvider.tsx b/src/context/CourseWorkspaceProvider.tsx
index 4e15334..d7d8d3c 100644
--- a/src/context/CourseWorkspaceProvider.tsx
+++ b/src/context/CourseWorkspaceProvider.tsx
@@ -1,5 +1,5 @@
 import React, { useState, ReactNode } from "react";
-import { CourseEntry } from "../types/interfaces/Course.interface.ts";
+import { UserCourse } from "../types/interfaces/Course.interface.ts";
 import { SemesterType } from "../types/interfaces/Semester.interface.ts";
 import { useDragAndDrop } from "../hooks/useDragAndDrop.ts";
 import CourseWorkspaceContext from "./CourseWorkspaceContext.tsx";
@@ -8,10 +8,11 @@ export const CourseWorkspaceProvider: React.FC<{ children: ReactNode }> = ({
   children,
 }) => {
   // all states
-  const [toolboxCourses, setToolboxCourses] = useState<CourseEntry[]>([]);
+  const [toolboxCourses, setToolboxCourses] = useState<UserCourse[]>([]);
   const [plannerCourses, setPlannerCourses] = useState<SemesterType[]>([
     {
       semesterNumber: 1,
+      semesterID: "semester-1",
       semesterSeason: "fall",
       creditsTotal: 0,
       courseList: [],
diff --git a/src/context/FilterContext.tsx b/src/context/FilterContext.tsx
index b5c3ba3..d34be5f 100644
--- a/src/context/FilterContext.tsx
+++ b/src/context/FilterContext.tsx
@@ -1,5 +1,5 @@
 import { createContext } from "react";
-import { FilterData } from "../types/Filters";
+import { FilterData } from "../types/interfaces/Filters.interface";
 
 export interface FilterContextType {
   // available filter options
diff --git a/src/context/FilterProvider.tsx b/src/context/FilterProvider.tsx
index cfe68e4..6436986 100644
--- a/src/context/FilterProvider.tsx
+++ b/src/context/FilterProvider.tsx
@@ -1,13 +1,17 @@
 import React, { useState, useEffect, ReactNode } from "react";
 import api from "../axios.ts";
-import { FilterData } from "../types/Filters.ts";
+import {
+  FilterData,
+  FilterCategory,
+} from "../types/interfaces/Filters.interface.ts";
 import FilterContext from "./FilterContext.tsx";
 
-const formatApiData = (type: string, data: string[]) => {
-  return data.map((item: string, index: number) => ({
+const formatApiData = (type: FilterCategory, data: Record<string, string>) => {
+  return Object.entries(data).map(([code, value], index) => ({
     id: index,
-    code: item,
-    type: type as "Subject" | "Attributes" | "Semesters",
+    code,
+    value,
+    type,
   }));
 };
 
@@ -24,7 +28,7 @@ export const FilterProvider: React.FC<{ children: ReactNode }> = ({
       try {
         const [subjectsResponse, attributesResponse, semestersResponse] =
           await Promise.all([
-            api.get("/course/filter/values/departments"),
+            api.get("/course/filter/values/subjects"),
             api.get("/course/filter/values/attributes"),
             api.get("/course/filter/values/semesters"),
           ]);
@@ -46,11 +50,11 @@ export const FilterProvider: React.FC<{ children: ReactNode }> = ({
   const toggleFilter = (filter: FilterData) => {
     setSelectedFilters((prevSelected) => {
       const exists = prevSelected.find(
-        (f) => f.code === filter.code && f.type === filter.type,
+        (f) => f.code === filter.code && f.type === filter.type
       );
       if (exists) {
         return prevSelected.filter(
-          (f) => !(f.code === filter.code && f.type === filter.type),
+          (f) => !(f.code === filter.code && f.type === filter.type)
         );
       } else {
         return [...prevSelected, filter];
diff --git a/src/hooks/useDragAndDrop.ts b/src/hooks/useDragAndDrop.ts
index 500a805..4703080 100644
--- a/src/hooks/useDragAndDrop.ts
+++ b/src/hooks/useDragAndDrop.ts
@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from "react";
 import { DropResult } from "@hello-pangea/dnd";
-import { CourseEntry } from "../types/interfaces/Course.interface";
+import { UserCourse } from "../types/interfaces/Course.interface";
 import { SemesterType } from "../types/interfaces/Semester.interface";
 
 // --- Helper Functions ---
@@ -12,7 +12,7 @@ const reorder = <T>(list: T[], startIndex: number, endIndex: number): T[] => {
   return result;
 };
 
-const cloneCourse = (course: CourseEntry): CourseEntry => {
+const cloneCourse = (course: UserCourse): UserCourse => {
   return {
     ...course,
     name: `${course.name}-${Math.random().toString(36).substring(2, 7)}`,
@@ -24,9 +24,9 @@ const cloneCourse = (course: CourseEntry): CourseEntry => {
 // --- Hook Definition ---
 
 interface UseDragAndDropProps {
-  toolboxCourses: CourseEntry[];
+  toolboxCourses: UserCourse[];
   plannerCourses: SemesterType[];
-  setToolboxCourses: Dispatch<SetStateAction<CourseEntry[]>>;
+  setToolboxCourses: Dispatch<SetStateAction<UserCourse[]>>;
   setPlannerCourses: Dispatch<SetStateAction<SemesterType[]>>;
   setIsDragging: Dispatch<SetStateAction<boolean>>;
 }
@@ -55,7 +55,7 @@ export const useDragAndDrop = ({
     // Reorder in toolbox
     if (sInd === "toolbox" && dInd === "toolbox") {
       setToolboxCourses((prev) =>
-        reorder(prev, source.index, destination.index),
+        reorder(prev, source.index, destination.index)
       );
       return;
     }
@@ -63,7 +63,7 @@ export const useDragAndDrop = ({
     // Delete from toolbox
     if (dInd === "garbage" && sInd === "toolbox") {
       setToolboxCourses((prev) =>
-        prev.filter((_, index) => index !== source.index),
+        prev.filter((_, index) => index !== source.index)
       );
       return;
     }
@@ -79,11 +79,11 @@ export const useDragAndDrop = ({
                 courseList: reorder(
                   semester.courseList,
                   source.index,
-                  destination.index,
+                  destination.index
                 ),
               }
-            : semester,
-        ),
+            : semester
+        )
       );
       return;
     }
@@ -148,14 +148,14 @@ export const useDragAndDrop = ({
               };
             }
             return semester;
-          }),
+          })
         );
         setToolboxCourses((prev) =>
           prev
             .map((c) =>
-              c.name === courseToClone.name ? { ...c, count: c.count - 1 } : c,
+              c.name === courseToClone.name ? { ...c, count: c.count - 1 } : c
             )
-            .filter((c) => c.count > 0),
+            .filter((c) => c.count > 0)
         );
       }
       return;
@@ -202,19 +202,20 @@ export const useDragAndDrop = ({
           return {
             ...semester,
             courseList: semester.courseList.filter(
-              (_, index) => index !== source.index,
+              (_, index) => index !== source.index
             ),
             creditsTotal: semester.creditsTotal - courseToMove.data.credit_max,
           };
-        }),
+        })
       );
 
-      const cleanedName = courseToMove.name.split("-")[0];
+      const nameParts = courseToMove.name.split("-");
+      const cleanedName = nameParts.slice(0, 2).join("-");
 
       setToolboxCourses((prev) => {
         const existingIndex = prev.findIndex((c) => c.name === cleanedName);
 
-        const courseForToolbox: CourseEntry = {
+        const courseForToolbox: UserCourse = {
           ...courseToMove,
           name: cleanedName,
         };
diff --git a/src/hooks/usePlannerCourseOptions.ts b/src/hooks/usePlannerCourseOptions.ts
index 67ba71c..599a7a2 100644
--- a/src/hooks/usePlannerCourseOptions.ts
+++ b/src/hooks/usePlannerCourseOptions.ts
@@ -1,13 +1,13 @@
 import { Dispatch, SetStateAction } from "react";
 import { SemesterType } from "../types/interfaces/Semester.interface";
-import { CourseEntry, CourseType } from "../types/interfaces/Course.interface";
+import { UserCourse, APICourse } from "../types/interfaces/Course.interface";
 
 interface UsePlannerCourseProps {
   setPlannerCourses: Dispatch<SetStateAction<SemesterType[]>>;
-  setToolboxCourses: Dispatch<SetStateAction<CourseEntry[]>>;
+  setToolboxCourses: Dispatch<SetStateAction<UserCourse[]>>;
   semesterIndex: number; // 1-based index
   courseIndex: number; // 0-based index
-  course: CourseType;
+  course: APICourse;
   name: string;
   count: number;
 }
@@ -77,8 +77,8 @@ export const usePlannerCourse = ({
                 ...semester.courseList.slice(courseIndex + 1),
               ],
             }
-          : semester,
-      ),
+          : semester
+      )
     );
   };
 
@@ -91,11 +91,11 @@ export const usePlannerCourse = ({
           ? {
               ...semester,
               courseList: semester.courseList.filter(
-                (_, idx) => idx !== courseIndex,
+                (_, idx) => idx !== courseIndex
               ),
               creditsTotal: semester.creditsTotal - course.credit_max,
             }
-          : semester,
+          : semester
       );
 
       // Add to next semester
@@ -107,15 +107,17 @@ export const usePlannerCourse = ({
               courseList: [...semester.courseList, courseCopy],
               creditsTotal: semester.creditsTotal + courseCopy.data.credit_max,
             }
-          : semester,
+          : semester
       );
     });
   };
 
   const handleMoveToolbox = () => {
     setPlannerCourses((prev) => {
-      const courseToMove = { name, count, data: course };
-      const cleanedName = courseToMove.name.split("-")[0];
+      const formattedCourseName = `${course.subj_code}-${course.code_num} ${toTitleCase(course.title)}`;
+      const courseToMove = { name: formattedCourseName, count, data: course };
+      const nameParts = courseToMove.name.split("-");
+      const cleanedName = nameParts.slice(0, 2).join("-");
       const cleanedCourse = {
         ...courseToMove,
         name: cleanedName,
@@ -126,17 +128,17 @@ export const usePlannerCourse = ({
           ? {
               ...semester,
               courseList: semester.courseList.filter(
-                (_, idx) => idx !== courseIndex,
+                (_, idx) => idx !== courseIndex
               ),
               creditsTotal:
                 semester.creditsTotal - courseToMove.data.credit_max,
             }
-          : semester,
+          : semester
       );
 
       setToolboxCourses((toolboxPrev) => {
         const existingIndex = toolboxPrev.findIndex(
-          (entry) => entry.name === cleanedName,
+          (entry) => entry.name === cleanedName
         );
 
         if (existingIndex !== -1) {
@@ -159,12 +161,12 @@ export const usePlannerCourse = ({
           ? {
               ...semester,
               courseList: semester.courseList.filter(
-                (_, idx) => idx !== courseIndex,
+                (_, idx) => idx !== courseIndex
               ),
               creditsTotal: semester.creditsTotal - course.credit_max,
             }
-          : semester,
-      ),
+          : semester
+      )
     );
   };
 
diff --git a/src/pages/Catalog.tsx b/src/pages/Catalog.tsx
index 8ecece6..1f2f8c2 100644
--- a/src/pages/Catalog.tsx
+++ b/src/pages/Catalog.tsx
@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from "react";
 import api from "../axios.ts";
 import Course from "../components/Course/CatalogCourse.tsx";
 import SearchBar from "../components/SearchBar/SeachBar";
-import { CourseType } from "../types/interfaces/Course.interface.ts";
+import { APICourse } from "../types/interfaces/Course.interface.ts";
 import DepartmentFilters from "../components/Department-Filters.tsx";
 import ChosenTag from "../components/SearchBar/ChosenTag";
 import { useFilterData } from "../hooks/useFilters.ts";
@@ -10,7 +10,7 @@ import { useFilterData } from "../hooks/useFilters.ts";
 const Catalog: React.FC = () => {
   const { selectedFilters } = useFilterData();
 
-  const [searchResults, setSearchResults] = React.useState<CourseType[]>([]);
+  const [searchResults, setSearchResults] = React.useState<APICourse[]>([]);
   const [searchPrompt, setSearchPrompt] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [hasSearched, setHasSearched] = useState(false);
@@ -35,7 +35,7 @@ const Catalog: React.FC = () => {
     setHasSearched(true);
 
     debounceTimeout.current = setTimeout(async () => {
-      const deptFilters = selectedFilters
+      const subjFilters = selectedFilters
         .filter((filter) => filter.type === "Subject")
         .map((filter) => filter.code);
       const attrFilters = selectedFilters
@@ -61,12 +61,12 @@ const Catalog: React.FC = () => {
         const response = await api.get(
           "course/search?searchPrompt=" +
             searchPrompt +
-            "&deptFilters=" +
-            deptFilters +
+            "&subjFilters=" +
+            subjFilters +
             "&attrFilters=" +
             attrFilters +
             "&semFilters=" +
-            semFilters,
+            semFilters
         );
 
         const data = response.data;
@@ -107,7 +107,7 @@ const Catalog: React.FC = () => {
       <div className="md:h-[calc(100vh-17rem)] md:overflow-hidden">
         {searchResults.length > 0 ? (
           <div className="h-full overflow-y-auto flex flex-wrap justify-center gap-4 pr-3 pt-3">
-            {searchResults?.map((course: CourseType, index: number) => (
+            {searchResults?.map((course: APICourse, index: number) => (
               <Course key={index} course={course} />
             ))}
 
diff --git a/src/types/Filters.ts b/src/types/Filters.ts
deleted file mode 100644
index 8dc3e2b..0000000
--- a/src/types/Filters.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export type Filters = {
-  Subject: string[];
-  Attributes: string[];
-  Semesters: string[];
-};
-
-export type FilterData = {
-  id: number;
-  code: string;
-  type: "Subject" | "Attributes" | "Semesters";
-};
diff --git a/src/types/interfaces/Course.interface.ts b/src/types/interfaces/Course.interface.ts
index 999b245..8a81822 100644
--- a/src/types/interfaces/Course.interface.ts
+++ b/src/types/interfaces/Course.interface.ts
@@ -1,22 +1,22 @@
-export interface CourseType {
-  attr_list: string;
-  code_match: number;
-  code_num: string;
-  credit_max: number;
-  credit_min: number;
-  dept: string;
-  desc_text: string;
-  sem_list: string;
+export interface APICourse {
+  subj_code: string;
+  code_num: number;
   title: string;
-  title_abbrev: number;
-  title_acronym: number;
+  desc_text: string;
+  credit_min: number;
+  credit_max: number;
+  sem_list: string[];
+  attr_list: string[];
+  code_match: number;
   title_exact_match: number;
-  title_match: number;
   title_start_match: number;
+  title_match: number;
+  title_acronym: number;
+  title_abbrev: number;
 }
 
-export type CourseEntry = {
+export interface UserCourse {
   name: string;
   count: number;
-  data: CourseType;
-};
+  data: APICourse;
+}
diff --git a/src/types/interfaces/Filters.interface.ts b/src/types/interfaces/Filters.interface.ts
new file mode 100644
index 0000000..bddc73a
--- /dev/null
+++ b/src/types/interfaces/Filters.interface.ts
@@ -0,0 +1,14 @@
+export type FilterCategory = "Subject" | "Attributes" | "Semesters";
+
+export interface Filters {
+  Subject: string[];
+  Attributes: string[];
+  Semesters: string[];
+}
+
+export interface FilterData {
+  id: number;
+  code: string;
+  value: string;
+  type: FilterCategory;
+}
diff --git a/src/types/interfaces/Semester.interface.ts b/src/types/interfaces/Semester.interface.ts
index a9e2f69..9c8e72a 100644
--- a/src/types/interfaces/Semester.interface.ts
+++ b/src/types/interfaces/Semester.interface.ts
@@ -1,9 +1,9 @@
-import { CourseEntry } from "./Course.interface";
+import { UserCourse } from "./Course.interface";
 
 export interface SemesterType {
   semesterNumber: number;
   semesterID: string;
   semesterSeason: string;
   creditsTotal: number;
-  courseList: CourseEntry[];
+  courseList: UserCourse[];
 }