diff --git a/package-lock.json b/package-lock.json
index 7951d41..c3a97b0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1572,7 +1572,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
       "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -1583,7 +1582,6 @@
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz",
       "integrity": "sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==",
       "dev": true,
-      "license": "MIT",
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
diff --git a/src/App.tsx b/src/App.tsx
index 88eaf92..6954ed5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Catalog from "./pages/Catalog";
 import Planner from "./pages/Planner";
+import DepartmentFilters from "./components/Department-Filters.tsx";
 import Toolbox from "./components/Toolbox/Toolbox";
 
 function App() {
@@ -20,6 +20,7 @@ function App() {
                 />
               }
             ></Route>
+            <Route path="/filters" element={<DepartmentFilters />} />
             <Route path="/planner" element={<Planner />}></Route>
           </Routes>
           <Toolbox courses={toolboxCourses} />
@@ -29,4 +30,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/Department-Filters.tsx b/src/components/Department-Filters.tsx
new file mode 100644
index 0000000..0a8c449
--- /dev/null
+++ b/src/components/Department-Filters.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+
+// 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' }
+];
+
+// DepartmentFilters component
+interface DepartmentFiltersProps {
+  onSelect?: (department: Department) => void;
+  selectedDepartment?: string;
+  isVisible?: boolean;
+}
+
+const DepartmentFilters: React.FC<DepartmentFiltersProps> = ({ 
+  onSelect,
+  selectedDepartment,
+  isVisible = true
+}) => {
+  if (!isVisible) return null;
+
+  // Render the list of departments
+  return (
+    <div className="w-full h-full flex items-center justify-center bg-pink-100 p-2 overflow-hidden">
+      <div className="flex flex-wrap gap-2 justify-center overflow-y-auto max-h-full">
+        {departments.map((dept) => (
+          <button
+            key={dept.code}
+            className={`
+              flex-shrink-0
+              px-3 
+              py-1.5 
+              rounded-full 
+              border 
+              border-black 
+              text-xs
+              transition-colors
+              ${selectedDepartment === dept.code 
+                ? 'bg-blue-100 border-blue-500' 
+                : 'bg-transparent active:bg-gray-100'
+              }
+              hover:bg-black hover:text-white
+            `}
+            onClick={() => onSelect?.(dept)}
+          >
+            <div className="flex items-center whitespace-nowrap">
+              <span className="font-bold">{dept.code}</span>
+              <span className="mx-1">·</span>
+              <span className="font-normal">{dept.name}</span>
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default DepartmentFilters;
\ No newline at end of file