diff --git a/src/components/Course/CatalogCourse.tsx b/src/components/Course/CatalogCourse.tsx
index f2fadc5..296ec06 100644
--- a/src/components/Course/CatalogCourse.tsx
+++ b/src/components/Course/CatalogCourse.tsx
@@ -1,9 +1,19 @@
 import React, { useState } from "react";
-import Tag from "./CatalogCourse/Tag";
 import AddButton from "./CatalogCourse/AddButton";
 import { motion } from "framer-motion";
 import { APICourse } from "../../types/interfaces/Course.interface";
 import { useCourseWorkspace } from "../../hooks/useCourseWorkspace";
+import { useFilterData } from "../../hooks/useFilters";
+import { FilterData } from "../../types/interfaces/Filters.interface";
+import Tag from "../Tag";
+
+const findFiltersForCourse = (
+  api_list: string[],
+  filterDataType: FilterData[],
+) => {
+  console.log("API List:", api_list);
+  return filterDataType.filter((attr) => api_list.includes(attr.code));
+};
 
 interface CourseProps {
   course: APICourse;
@@ -11,6 +21,10 @@ interface CourseProps {
 
 const Course: React.FC<CourseProps> = ({ course }) => {
   const { toolboxCourses, setToolboxCourses } = useCourseWorkspace();
+  const { attributes, semesters } = useFilterData();
+
+  const attrFilters = findFiltersForCourse(course.attr_list || [], attributes);
+  const semFilters = findFiltersForCourse(course.sem_list || [], semesters);
 
   const [isOpen, setIsOpen] = useState(false);
   const toggleOpen = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -58,7 +72,7 @@ const Course: React.FC<CourseProps> = ({ course }) => {
       <div
         className={`${
           courseCount === undefined ? "hidden" : ""
-        } absolute right-[-10px] top-[-10px] rounded-full bg-[#78A1BB] w-8 h-8 flex justify-center items-center text-white`}
+        } absolute right-[-10px] top-[-10px] rounded-full bg-steelblue w-8 h-8 flex justify-center items-center text-carpipink`}
       >
         <p>{courseCount}</p>
       </div>
@@ -71,26 +85,12 @@ const Course: React.FC<CourseProps> = ({ course }) => {
             </b>
             <p>{toTitleCase(course.title)}</p>
           </div>
-          <div className={`flex flex-wrap mt-1`}>
-            {course.attr_list?.map((attr, index) => {
-              return (
-                <Tag
-                  key={index}
-                  name={attr}
-                  bgcolor={"#99C1B9"}
-                  color={"#283044"}
-                />
-              );
+          <div className={`flex flex-wrap mt-1 gap-1`}>
+            {attrFilters.map((attr, index) => {
+              return <Tag key={index} filter={attr} />;
             })}
-            {course.sem_list?.map((semester, index) => {
-              return (
-                <Tag
-                  key={index}
-                  name={semester}
-                  bgcolor={"#565E87"}
-                  color={"#F5CECE"}
-                />
-              );
+            {semFilters?.map((semester, index) => {
+              return <Tag key={index} filter={semester} />;
             })}
           </div>
         </div>
diff --git a/src/components/Course/CatalogCourse/Tag.tsx b/src/components/Course/CatalogCourse/Tag.tsx
deleted file mode 100644
index cf5d581..0000000
--- a/src/components/Course/CatalogCourse/Tag.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-
-interface TagProp {
-  name: string;
-  bgcolor: string;
-  color: string;
-}
-const Tag: React.FC<TagProp> = ({ name, bgcolor, color }) => {
-  return (
-    <div
-      className={`rounded-2xl px-3 py-1 text-xs mr-1 mb-1`}
-      style={{ backgroundColor: `${bgcolor}`, color: `${color}` }}
-    >
-      {name}
-    </div>
-  );
-};
-
-export default Tag;
diff --git a/src/components/Course/ToolboxCourse.tsx b/src/components/Course/ToolboxCourse.tsx
index 7f137d3..481db12 100644
--- a/src/components/Course/ToolboxCourse.tsx
+++ b/src/components/Course/ToolboxCourse.tsx
@@ -53,7 +53,7 @@ const ToolboxCourse: React.FC<ToolboxCourseProps> = ({
       className={`relative bg-carpipink text-nowrap rounded-md w-fit px-3 py-1`}
     >
       <div
-        className={`absolute -top-2 -right-2  rounded-full bg-[#78A1BB] w-6 h-6 flex justify-center items-center text-white text-sm ${
+        className={`absolute -top-2 -right-2  rounded-full bg-steelblue w-6 h-6 flex justify-center items-center text-white text-sm ${
           count === 1 ? "hidden" : ""
         }`}
       >
diff --git a/src/components/Department-Filters.tsx b/src/components/Department-Filters.tsx
index ea1ca61..e098c7a 100644
--- a/src/components/Department-Filters.tsx
+++ b/src/components/Department-Filters.tsx
@@ -5,19 +5,19 @@ const DepartmentFilters: React.FC = () => {
   const { toggleFilter, subjects } = useFilterData();
 
   return (
-    <div className="md:h-full md:w-full md:overflow-y-auto flex flex-wrap justify-center gap-2">
+    <div className="md:h-full md:w-full md:overflow-y-auto flex flex-wrap justify-center gap-1">
       {subjects.map((subject) => (
         <button
           key={subject.code}
           className={`
             px-3 
             py-2 
-            rounded-xl 
+            rounded-full
             border 
             border-darkblue 
             text-xs
             transition-colors
-            hover:bg-darkblue hover:text-carpipink
+            hover:bg-darkblue hover:text-carpipink hover:cursor-pointer
             h-fit
           `}
           onClick={() => toggleFilter(subject)}
@@ -29,7 +29,7 @@ const DepartmentFilters: React.FC = () => {
         </button>
       ))}
 
-      <div className="h-15" />
+      <div className="h-40" />
     </div>
   );
 };
diff --git a/src/components/SearchBar/ChosenTag.tsx b/src/components/SearchBar/ChosenTag.tsx
deleted file mode 100644
index eff9e0c..0000000
--- a/src/components/SearchBar/ChosenTag.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import { IoClose } from "react-icons/io5";
-import { useFilterData } from "../../hooks/useFilters";
-import { FilterData } from "../../types/interfaces/Filters.interface";
-
-interface ChosenTagProp {
-  filter: FilterData;
-}
-
-const ChosenTag: React.FC<ChosenTagProp> = ({ filter }) => {
-  const { toggleFilter } = useFilterData();
-  return (
-    <div
-      className={`rounded-2xl text-carpipink px-3 py-1 text-sm mr-1 mb-1 bg-darkblue inline-flex items-center`}
-    >
-      {filter.value}
-      <button
-        type="button"
-        onClick={() => toggleFilter(filter)}
-        aria-label={`Remove filter: ${filter.value}`}
-        className="inline ml-1"
-      >
-        <IoClose className="w-4 h-4 hover:cursor-pointer" />
-      </button>
-    </div>
-  );
-};
-
-export default ChosenTag;
diff --git a/src/components/SearchBar/FilterPanel/FilterPanel.tsx b/src/components/SearchBar/FilterPanel/FilterPanel.tsx
index a27a7e3..6c47390 100644
--- a/src/components/SearchBar/FilterPanel/FilterPanel.tsx
+++ b/src/components/SearchBar/FilterPanel/FilterPanel.tsx
@@ -1,40 +1,40 @@
 import { useFilterData } from "../../../hooks/useFilters";
 import FilterSection from "./FilterSection";
+// import FilterSectionChild from "./FilterSectionChild";
 
 const FilterPanel: React.FC = () => {
-  const { selectedFilters, toggleFilter, subjects, attributes, semesters } =
-    useFilterData();
+  const { selectedFilters, subjects, attributes, semesters } = useFilterData();
 
   const selectedSubjects = selectedFilters
     .filter((f) => f.type === "Subject")
     .map((f) => f.code);
   const selectedAttributes = selectedFilters
-    .filter((f) => f.type === "Attributes")
+    .filter((f) => f.type === "Attribute")
     .map((f) => f.code);
   const selectedSemesters = selectedFilters
-    .filter((f) => f.type === "Semesters")
+    .filter((f) => f.type === "Semester")
     .map((f) => f.code);
 
   return (
-    <div className="w-full">
+    <div className="md:max-h-80 md:overflow-y-auto scrollbar-thin scrollbar-thumb-carpipink scrollbar-track-darkblue/50">
+      <h1 className="font-bold">Filter By</h1>
       <FilterSection
         sectionName="Subject"
         tags={subjects}
         selected={selectedSubjects}
-        toggleFilter={toggleFilter}
+        showCode
       />
       <FilterSection
-        sectionName="Attributes"
+        sectionName="Attribute"
         tags={attributes}
         selected={selectedAttributes}
-        toggleFilter={toggleFilter}
       />
       <FilterSection
-        sectionName="Semesters"
+        sectionName="Semester"
         tags={semesters}
         selected={selectedSemesters}
-        toggleFilter={toggleFilter}
       />
+      <div className="h-20 md:h-5" />
     </div>
   );
 };
diff --git a/src/components/SearchBar/FilterPanel/FilterPanelPopup.tsx b/src/components/SearchBar/FilterPanel/FilterPanelPopup.tsx
index 226325a..c57dbdd 100644
--- a/src/components/SearchBar/FilterPanel/FilterPanelPopup.tsx
+++ b/src/components/SearchBar/FilterPanel/FilterPanelPopup.tsx
@@ -3,7 +3,7 @@ import FilterPanel from "./FilterPanel";
 
 const FilterPanelPopup: React.FC = () => {
   return (
-    <div className="absolute right-4 top-20 z-10 mt-2 w-full max-w-sm rounded-lg bg-carpipink p-4 shadow-lg border border-darkblue">
+    <div className="absolute right-0 top-16 z-10 mt-2 w-full max-w-sm rounded-lg bg-darkblue text-carpipink p-4 shadow-lg ">
       <FilterPanel />
     </div>
   );
diff --git a/src/components/SearchBar/FilterPanel/FilterSection.tsx b/src/components/SearchBar/FilterPanel/FilterSection.tsx
index f6f6092..94623fe 100644
--- a/src/components/SearchBar/FilterPanel/FilterSection.tsx
+++ b/src/components/SearchBar/FilterPanel/FilterSection.tsx
@@ -1,34 +1,82 @@
-import React from "react";
-import { FilterData } from "../../../types/interfaces/Filters.interface";
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import {
+  FilterCategory,
+  FilterData,
+} from "../../../types/interfaces/Filters.interface";
+import useIsDesktop from "../../../hooks/useIsDesktop";
+import Tag from "../../Tag";
 
 interface FilterSectionProps {
-  sectionName: "Subject" | "Attributes" | "Semesters";
+  sectionName: FilterCategory;
   tags: FilterData[];
   selected: string[];
-  toggleFilter: (filter: FilterData) => void;
+  showCode?: boolean;
 }
 
 const FilterSection: React.FC<FilterSectionProps> = ({
   sectionName,
   tags,
   selected,
-  toggleFilter,
+  showCode = false,
 }) => {
+  const isDesktop = useIsDesktop();
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const COLLAPSED_HEIGHT = "6rem";
+  const TAG_THRESHOLD = 6;
+  const shouldTruncate = tags.length > TAG_THRESHOLD;
+
   return (
     <div className="mt-2">
-      <h3 className="font-semibold mb-1">{sectionName}</h3>
-      <div className="flex overflow-x-auto scrollbar-none">
-        {tags.map((tag) => (
-          <button
-            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(tag)}
-          >
-            {tag.value}
-          </button>
-        ))}
+      <h3 className="font-medium mb-1">{sectionName}</h3>
+
+      <div className="relative">
+        <motion.div
+          initial={false}
+          animate={{
+            height:
+              isExpanded || !shouldTruncate || !isDesktop
+                ? "auto"
+                : COLLAPSED_HEIGHT,
+          }}
+          transition={{ duration: 0.3, ease: "easeInOut" }}
+          className="flex flex-wrap overflow-hidden gap-1"
+        >
+          {tags.map((tag) => (
+            <Tag
+              key={tag.id}
+              filter={tag}
+              isSelectable={true}
+              isSelected={selected.includes(tag.code)}
+              showCode={showCode}
+            />
+          ))}
+        </motion.div>
+
+        {isDesktop && !isExpanded && shouldTruncate && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            aria-hidden="true"
+            className="absolute bottom-0 left-0 w-full h-12 bg-gradient-to-t from-darkblue to-transparent pointer-events-none"
+          />
+        )}
       </div>
+
+      {/* Toggle Button */}
+      {shouldTruncate && (
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          aria-expanded={isExpanded}
+          aria-controls={`${sectionName}-tags`}
+          className="text-xs text-carpipink mt-1 hover:underline focus:outline-none"
+        >
+          {isExpanded ? "Show Less" : "Show All"}
+        </button>
+      )}
     </div>
   );
 };
diff --git a/src/components/SearchBar/FilterPanel/FilterSectionChild.tsx b/src/components/SearchBar/FilterPanel/FilterSectionChild.tsx
new file mode 100644
index 0000000..7fd161e
--- /dev/null
+++ b/src/components/SearchBar/FilterPanel/FilterSectionChild.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+import {
+  FilterCategory,
+  FilterData,
+} from "../../../types/interfaces/Filters.interface";
+
+interface FilterSectionProps {
+  sectionName: FilterCategory;
+  tags: FilterData[];
+  selected: string[];
+  toggleFilter: (filter: FilterData) => void;
+}
+
+const FilterSectionChild: React.FC<FilterSectionProps> = ({
+  sectionName,
+  tags,
+  selected,
+  toggleFilter,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <div className="relative">
+      <h3
+        className="font-semibold mb-1 hover:cursor-pointer hover:bg-carpipink/10 rounded-full px-4"
+        onMouseEnter={() => setIsExpanded(true)}
+        onMouseLeave={() => setIsExpanded(false)}
+      >
+        {sectionName}
+      </h3>
+
+      {isExpanded && (
+        <div className="absolute left-full top-0 z-10 p-2 ml-2 bg-darkblue text-carpipink shadow-lg border rounded-2xl border-darkblue flex flex-wrap w-xl">
+          {tags.map((tag) => (
+            <button
+              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 transition-colors
+                ${
+                  selected.includes(tag.code)
+                    ? "bg-darkblue text-carpipink hover:bg-darkblue/70 border border-carpipink"
+                    : "border border-carpipink"
+                }`}
+              onClick={() => toggleFilter(tag)}
+            >
+              {tag.value}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FilterSectionChild;
diff --git a/src/components/SearchBar/SeachBar.tsx b/src/components/SearchBar/SearchBar.tsx
similarity index 73%
rename from src/components/SearchBar/SeachBar.tsx
rename to src/components/SearchBar/SearchBar.tsx
index b673867..0b62558 100644
--- a/src/components/SearchBar/SeachBar.tsx
+++ b/src/components/SearchBar/SearchBar.tsx
@@ -1,23 +1,28 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { IoClose, IoSearchOutline, IoFilter } from "react-icons/io5";
 import FilterPanel from "./FilterPanel/FilterPanel.tsx";
 import useIsDesktop from "../../hooks/useIsDesktop.ts";
 import FilterPanelPopup from "./FilterPanel/FilterPanelPopup.tsx";
+import { useFilterData } from "../../hooks/useFilters.ts";
+import Tag from "../Tag.tsx";
 
 interface SearchBarProps {
   searchPrompt: string;
   setSearchPrompt: React.Dispatch<React.SetStateAction<string>>;
+  showFilter: boolean;
+  setShowFilter: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const SearchBar: React.FC<SearchBarProps> = ({
   searchPrompt,
   setSearchPrompt,
+  showFilter,
+  setShowFilter,
 }) => {
+  const { selectedFilters } = useFilterData();
   const isDesktop = useIsDesktop();
   const componentRef = useRef<HTMLDivElement>(null);
 
-  const [showFilter, setShowFilter] = useState(false);
-
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchPrompt(e.target.value);
     setShowFilter(false);
@@ -37,14 +42,14 @@ const SearchBar: React.FC<SearchBarProps> = ({
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, []);
+  }, [setShowFilter]);
 
   return (
-    <div className="flex justify-between flex-col items-center gap-2">
-      <div
-        ref={componentRef}
-        className="flex items-center gap-4 w-full border-b border-darkblue p-2"
-      >
+    <div
+      ref={componentRef}
+      className="flex justify-between flex-col items-center gap-2"
+    >
+      <div className="flex items-center gap-4 w-full border-b border-darkblue p-2">
         <IoSearchOutline className="w-5 h-5" />
         <input
           type="text"
@@ -78,6 +83,13 @@ const SearchBar: React.FC<SearchBarProps> = ({
         {showFilter && isDesktop && <FilterPanelPopup />}
       </div>
 
+      {!isDesktop && selectedFilters.length > 0 && (
+        <div className="flex flex-wrap w-full items-start gap-1">
+          {selectedFilters.map((filter) => (
+            <Tag key={filter.id} filter={filter} isRemovable={true} />
+          ))}
+        </div>
+      )}
       {showFilter && !isDesktop && <FilterPanel />}
     </div>
   );
diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
new file mode 100644
index 0000000..7a9f690
--- /dev/null
+++ b/src/components/Tag.tsx
@@ -0,0 +1,106 @@
+import React from "react";
+import { IoClose } from "react-icons/io5";
+import { FilterData } from "../types/interfaces/Filters.interface";
+import { useFilterData } from "../hooks/useFilters";
+import useIsDesktop from "../hooks/useIsDesktop";
+
+interface ColorClass {
+  selected_border: string;
+  selected_bg: string;
+  hover_bg: string;
+}
+
+const getColorClass = (type: string): ColorClass => {
+  switch (type) {
+    case "Subject":
+      return {
+        selected_border: "border-burgundy",
+        selected_bg: "bg-burgundy",
+        hover_bg:
+          "hover:bg-[color-mix(in_oklab,var(--color-burgundy)_90%,white_10%)]",
+      };
+    case "Attribute":
+      return {
+        selected_border: "border-slategray",
+        selected_bg: "bg-slategray",
+        hover_bg:
+          "hover:bg-[color-mix(in_oklab,var(--color-slategray)_90%,white_10%)]",
+      };
+    case "Semester":
+      return {
+        selected_border: "border-copperwood",
+        selected_bg: "bg-copperwood",
+        hover_bg:
+          "hover:bg-[color-mix(in_oklab,var(--color-copperwood)_90%,white_10%)]",
+      };
+    default:
+      return {
+        selected_border: "border-darkblue",
+        selected_bg: "bg-darkblue",
+        hover_bg:
+          "hover:bg-[color-mix(in_oklab,var(--color-darkblue)_90%,white_10%)]",
+      };
+  }
+};
+
+interface TagProps {
+  filter: FilterData;
+
+  // optional props for behavior and style
+  isSelectable?: boolean;
+  isSelected?: boolean;
+  showCode?: boolean;
+  isRemovable?: boolean;
+}
+
+const Tag: React.FC<TagProps> = ({
+  filter,
+  showCode = false,
+  isSelectable = false,
+  isSelected = false,
+  isRemovable = false,
+}) => {
+  const { toggleFilter } = useFilterData();
+  const isDesktop = useIsDesktop();
+
+  // Determine content: value or code
+  const content = showCode ? filter.code : filter.value;
+  const selectedValue = isSelectable ? isSelected : true;
+
+  // Determine styles
+  const baseClass =
+    "rounded-full px-3 py-1 text-sm inline-flex items-center transition-colors text-carpipink";
+  const accentColor = getColorClass(filter.type);
+  const colorClasses = selectedValue
+    ? `${accentColor.selected_border} ${accentColor.selected_bg} ${accentColor.hover_bg}`
+    : isDesktop
+      ? `border-carpipink ${accentColor.hover_bg}`
+      : `border-darkblue text-darkblue ${accentColor.hover_bg}`;
+
+  const handleClick = () => {
+    if (isSelectable || isRemovable) {
+      toggleFilter(filter);
+    }
+  };
+
+  return (
+    <button
+      className={`border ${baseClass} ${colorClasses} ${isSelectable || isRemovable ? "hover:cursor-pointer" : ""}`}
+      onClick={handleClick}
+      disabled={!isSelectable && !isRemovable}
+      title={filter.value}
+    >
+      {content}
+      {isRemovable && (
+        <span className="inline ml-1">
+          <IoClose
+            className="w-4 h-4"
+            aria-label={`Remove filter: ${filter.value}`}
+          />
+        </span>
+      )}
+    </button>
+  );
+};
+
+export default Tag;
diff --git a/src/components/Toolbox/NavButton.tsx b/src/components/Toolbox/NavButton.tsx
index 2beda65..ce8ec6a 100644
--- a/src/components/Toolbox/NavButton.tsx
+++ b/src/components/Toolbox/NavButton.tsx
@@ -5,14 +5,12 @@ const NavButton = () => {
   const path = location.pathname;
 
   return (
-    <>
-      <Link
-        className={`bg-[#283044] text-[#F5CECE] border-[#F5CECE] border-1 px-[35vw] rounded-t-2xl py-1 absolute bottom-0`}
-        to={`${path == "/" ? "/planner" : "/"}`}
-      >
-        {path == "/" ? "Go to Planner" : "Go to Courses"}
-      </Link>
-    </>
+    <Link
+      className={`bg-darkblue text-carpipink border-carpipink border-t w-full text-center rounded-t-2xl py-2 absolute bottom-0`}
+      to={`${path == "/" ? "/planner" : "/"}`}
+    >
+      {path == "/" ? "Go to Planner" : "Go to Courses"}
+    </Link>
   );
 };
 
diff --git a/src/components/Toolbox/Toolbox.tsx b/src/components/Toolbox/Toolbox.tsx
index cfedc70..c4e46fa 100644
--- a/src/components/Toolbox/Toolbox.tsx
+++ b/src/components/Toolbox/Toolbox.tsx
@@ -45,9 +45,9 @@ const Toolbox: React.FC = () => {
       )}
 
       <div
-        className={`w-full bg-[#283044] rounded-t-xl transition-transform duration-300 ease-in-out pointer-events-auto ${
+        className={`w-full bg-[#283044] rounded-t-xl h-auto transition-transform duration-300 ease-in-out pointer-events-auto ${
           isOpen
-            ? ""
+            ? "transform translate-y-0"
             : isDesktop
               ? "transform translate-y-[calc(100%-52px)]"
               : "transform translate-y-full"
@@ -55,51 +55,54 @@ const Toolbox: React.FC = () => {
       >
         <GarbageBin isDragging={isDragging} />
 
-        <div
-          className="flex items-center gap-4 p-3 mx-2 cursor-pointer"
-          onClick={toggleToolbox}
-          role="button"
-          aria-expanded={isOpen}
-          aria-controls="toolbox-content"
-        >
-          <div className="flex items-center">
-            <h2 className="text-[#F5CECE] font-semibold text-xl">TOOLBOX</h2>
-            <IoIosArrowUp
-              className={`ml-2 text-2xl text-[#F5CECE] transition-transform duration-300 ${
-                isOpen ? "rotate-180" : ""
-              }`}
-            />
-          </div>
-          {count > 0 && (
-            <div className="flex h-6 w-6 items-center justify-center rounded-full bg-[#78A1BB] text-sm font-medium text-white">
-              {count}
-            </div>
-          )}
-        </div>
-
         <div id="toolbox-content">
-          <Droppable droppableId="toolbox" direction="horizontal">
-            {(provided) => (
-              <div
-                ref={provided.innerRef}
-                {...provided.droppableProps}
-                className={`courses gap-4 pt-3 md:h-[75px] h-[100px] md:min-h-[50px] scrollbar-none flex justify-items-center w-full overflow-x-auto px-4 pb-2 transition-colors`}
-              >
-                {toolboxCourses.map((course, index) => (
-                  <DraggableItem
-                    key={course.name}
-                    name={course.name}
-                    count={course.count}
-                    index={index}
-                    course={course.data}
-                    location="toolbox"
-                    semesterIndex={null}
-                  />
-                ))}
-                {provided.placeholder}
+          <div className="flex items-center gap-4 p-3 mx-2 cursor-pointer">
+            <div className="flex items-center">
+              <h2 className="text-[#F5CECE] font-semibold text-xl">TOOLBOX</h2>
+              <IoIosArrowUp
+                className={`ml-2 text-2xl text-[#F5CECE] transition-transform duration-300 ${
+                  isOpen ? "rotate-180" : ""
+                }`}
+                onClick={toggleToolbox}
+                role="button"
+                aria-expanded={isOpen}
+                aria-controls="hideable-toolbox-content"
+              />
+            </div>
+            {count > 0 && (
+              <div className="flex h-6 w-6 items-center justify-center rounded-full bg-steelblue text-sm font-medium text-white">
+                {count}
               </div>
             )}
-          </Droppable>
+          </div>
+
+          <div
+            className={`${isOpen ? "block" : "hidden"}`}
+            id="hideable-toolbox-content"
+          >
+            <Droppable droppableId="toolbox" direction="horizontal">
+              {(provided) => (
+                <div
+                  ref={provided.innerRef}
+                  {...provided.droppableProps}
+                  className={`courses gap-4 pt-3 md:h-[75px] h-[100px] md:min-h-[50px] scrollbar-none flex justify-items-center w-full overflow-x-auto px-4 pb-2 transition-colors`}
+                >
+                  {toolboxCourses.map((course, index) => (
+                    <DraggableItem
+                      key={course.name}
+                      name={course.name}
+                      count={course.count}
+                      index={index}
+                      course={course.data}
+                      location="toolbox"
+                      semesterIndex={null}
+                    />
+                  ))}
+                  {provided.placeholder}
+                </div>
+              )}
+            </Droppable>
+          </div>
         </div>
       </div>
 
diff --git a/src/components/Toolbox/ToolboxButton.tsx b/src/components/Toolbox/ToolboxButton.tsx
index 00427ca..2e0df53 100644
--- a/src/components/Toolbox/ToolboxButton.tsx
+++ b/src/components/Toolbox/ToolboxButton.tsx
@@ -20,7 +20,7 @@ const ToolboxButton: React.FC<ToolboxButtonProps> = ({
       <div
         className={`${
           count === 0 ? "hidden" : ""
-        } absolute -top-1 -right-2  rounded-full bg-[#78A1BB] w-8 h-8 flex justify-center items-center text-white text-lg`}
+        } absolute -top-1 -right-2  rounded-full bg-steelblue w-8 h-8 flex justify-center items-center text-white text-lg`}
       >
         <p>{count}</p>
       </div>
diff --git a/src/context/FilterProvider.tsx b/src/context/FilterProvider.tsx
index b29e9ab..2a23fe1 100644
--- a/src/context/FilterProvider.tsx
+++ b/src/context/FilterProvider.tsx
@@ -34,8 +34,8 @@ export const FilterProvider: React.FC<{ children: ReactNode }> = ({
           ]);
 
         setSubjects(formatApiData("Subject", subjectsResponse.data));
-        setAttributes(formatApiData("Attributes", attributesResponse.data));
-        setSemesters(formatApiData("Semesters", semestersResponse.data));
+        setAttributes(formatApiData("Attribute", attributesResponse.data));
+        setSemesters(formatApiData("Semester", semestersResponse.data));
       } catch (error) {
         console.error("Failed to fetch filters:", error);
       }
diff --git a/src/index.css b/src/index.css
index 9f5c249..cdf56e0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,10 +2,14 @@
 @plugin 'tailwind-scrollbar';
 
 @theme {
-  --color-carpipink: oklch(88.46% 0.0441 18.02);
-  --color-darkblue: oklch(31.09% 0.0378 267.38);
-  --color-darkblue-40: oklch(31.09% 0.0378 267.38/40%);
-  --color-lightblue: oklch(68.85% 0.0588 236.57);
+  --color-carpipink: oklch(88.46% 0.0441 18.02); /* #F5CECE */
+  --color-steelblue: oklch(68.85% 0.0588 236.57); /* #78a1bb */
+  --color-dustygrape: oklch(49.23% 0.0665 275.21); /* #565E87 */
+  --color-darkblue: oklch(31.09% 0.0378 267.38); /* #283044 */
+  --color-mutedteal: oklch(77.97% 0.0441 181.55); /* #99C1B9 */
+  --color-burgundy: oklch(36.07% 0.1294 18.64); /* #721121 */
+  --color-slategray: oklch(54.39% 0.0444 212.21); /* #51777F */
+  --color-copperwood: oklch(53.68% 0.1081 63.18); /* #AA6822 */
   --color-rosewood: oklch(54.14% 0.206 10.45); /* #c91752 */
 }
 
diff --git a/src/pages/Catalog.tsx b/src/pages/Catalog.tsx
index 75e57cd..722bb60 100644
--- a/src/pages/Catalog.tsx
+++ b/src/pages/Catalog.tsx
@@ -1,19 +1,22 @@
 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 SearchBar from "../components/SearchBar/SearchBar";
 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";
+import useIsDesktop from "../hooks/useIsDesktop.ts";
+import Tag from "../components/Tag.tsx";
 
 const Catalog: React.FC = () => {
   const { selectedFilters } = useFilterData();
+  const isDesktop = useIsDesktop();
 
   const [searchResults, setSearchResults] = React.useState<APICourse[]>([]);
   const [searchPrompt, setSearchPrompt] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [hasSearched, setHasSearched] = useState(false);
+  const [showFilter, setShowFilter] = useState(false);
 
   const debounceTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
   const lastNoResultQuery = useRef<string | null>(null);
@@ -39,10 +42,10 @@ const Catalog: React.FC = () => {
         .filter((filter) => filter.type === "Subject")
         .map((filter) => filter.code);
       const attrFilters = selectedFilters
-        .filter((filter) => filter.type === "Attributes")
+        .filter((filter) => filter.type === "Attribute")
         .map((filter) => filter.code);
       const semFilters = selectedFilters
-        .filter((filter) => filter.type === "Semesters")
+        .filter((filter) => filter.type === "Semester")
         .map((filter) => filter.code);
 
       if (searchPrompt.length < 3) {
@@ -89,68 +92,74 @@ const Catalog: React.FC = () => {
   }, [selectedFilters, searchPrompt, setSearchResults]);
 
   return (
-    <section className="flex flex-col gap-2">
-      <div className={`sticky top-20 z-10 flex flex-col gap-2`}>
+    <section className="flex flex-col gap-2 md:h-[calc(100vh-10rem)] md:overflow-hidden">
+      <div className="sticky z-10 flex flex-col gap-2">
         <h1 className="font-bold text-xl">Courses</h1>
         <SearchBar
           setSearchPrompt={setSearchPrompt}
           searchPrompt={searchPrompt}
+          showFilter={showFilter}
+          setShowFilter={setShowFilter}
         />
 
-        <div className="flex flex-wrap w-full items-start ">
-          {selectedFilters.map((filter) => (
-            <ChosenTag key={filter.id} filter={filter} />
-          ))}
-        </div>
+        {isDesktop && (
+          <div className="flex flex-wrap w-full items-start gap-1">
+            {selectedFilters.map((filter) => (
+              <Tag key={filter.id} filter={filter} isRemovable={true} />
+            ))}
+          </div>
+        )}
       </div>
 
-      <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: APICourse, index: number) => (
-              <Course key={index} course={course} />
-            ))}
+      {(isDesktop || !showFilter) && (
+        <div className="overflow-y-auto flex-grow">
+          {searchResults.length > 0 ? (
+            <div className="h-full overflow-y-auto flex flex-wrap justify-center gap-4 pr-3 pt-3">
+              {searchResults?.map((course: APICourse, index: number) => (
+                <Course key={index} course={course} />
+              ))}
 
-            <div className="h-15" />
-          </div>
-        ) : isLoading ? (
-          Array.from({ length: 6 }).map((_, i) => (
-            <div
-              key={i}
-              className="mb-4 animate-pulse h-fit border-1 border-darkblue/20 rounded-xl p-4 flex items-center gap-2 justify-between"
-            >
-              <div className="flex gap-2 flex-col justify-between">
-                <div className="h-5 w-25 bg-darkblue/20 rounded-sm"></div>
-                <div className="h-5 w-50 bg-darkblue/20 rounded-sm"></div>
-
-                <div className="flex flex-wrap gap-2">
-                  {Array.from({ length: 4 }).map((_, j) => (
-                    <div
-                      key={j}
-                      className="h-6 w-15 bg-darkblue/20 rounded-full"
-                    ></div>
-                  ))}
+              <div className="h-15" />
+            </div>
+          ) : isLoading ? (
+            Array.from({ length: 6 }).map((_, i) => (
+              <div
+                key={i}
+                className="mb-4 animate-pulse h-fit border-1 border-darkblue/20 rounded-xl p-4 flex items-center gap-2 justify-between"
+              >
+                <div className="flex gap-2 flex-col justify-between">
+                  <div className="h-5 w-25 bg-darkblue/20 rounded-sm"></div>
+                  <div className="h-5 w-50 bg-darkblue/20 rounded-sm"></div>
+
+                  <div className="flex flex-wrap gap-2">
+                    {Array.from({ length: 4 }).map((_, j) => (
+                      <div
+                        key={j}
+                        className="h-6 w-15 bg-darkblue/20 rounded-full"
+                      ></div>
+                    ))}
+                  </div>
                 </div>
-              </div>
 
-              <div className="h-15 w-15 bg-darkblue/20 rounded-full"></div>
+                <div className="h-15 w-15 bg-darkblue/20 rounded-full"></div>
+              </div>
+            ))
+          ) : hasSearched ? (
+            <div className="flex text-darkblue/70 text-center gap-2 items-center flex-col justify-center h-50">
+              <h3 className="text-[75px] font-bold">D:</h3>
+              <p className="ml-2 text-xl">
+                No courses found for "{searchPrompt}"
+              </p>
+              <p className="text-sm">
+                Try searching for another course. <br />
+                Maybe "CSCI 1100" or "Computer Science I"
+              </p>
             </div>
-          ))
-        ) : hasSearched ? (
-          <div className="flex text-darkblue/70 text-center gap-2 items-center flex-col justify-center h-50">
-            <h3 className="text-[75px] font-bold">D:</h3>
-            <p className="ml-2 text-xl">
-              No courses found for "{searchPrompt}"
-            </p>
-            <p className="text-sm">
-              Try searching for another course. <br />
-              Maybe "CSCI 1100" or "Computer Science I"
-            </p>
-          </div>
-        ) : (
-          selectedFilters.length === 0 && <DepartmentFilters />
-        )}
-      </div>
+          ) : (
+            selectedFilters.length === 0 && <DepartmentFilters />
+          )}
+        </div>
+      )}
     </section>
   );
 };
diff --git a/src/types/interfaces/Filters.interface.ts b/src/types/interfaces/Filters.interface.ts
index bddc73a..2074a8a 100644
--- a/src/types/interfaces/Filters.interface.ts
+++ b/src/types/interfaces/Filters.interface.ts
@@ -1,9 +1,9 @@
-export type FilterCategory = "Subject" | "Attributes" | "Semesters";
+export type FilterCategory = "Subject" | "Attribute" | "Semester";
 
 export interface Filters {
   Subject: string[];
-  Attributes: string[];
-  Semesters: string[];
+  Attribute: string[];
+  Semester: string[];
 }
 
 export interface FilterData {