diff --git a/tcf_website/api/serializers.py b/tcf_website/api/serializers.py
new file mode 100644
index 000000000..9651a3405
--- /dev/null
+++ b/tcf_website/api/serializers.py
@@ -0,0 +1,215 @@
+"""DRF Serializers"""
+
+from rest_framework import serializers
+
+from ..models import (
+    Club,
+    ClubCategory,
+    Course,
+    Department,
+    Instructor,
+    School,
+    Semester,
+    Subdepartment,
+)
+
+
+class SemesterSerializer(serializers.ModelSerializer):
+    """DRF Serializer for Semester"""
+
+    season = serializers.SerializerMethodField()
+
+    def get_season(self, obj):
+        """Change the `season` field to TitleCase (or PascalCase)"""
+        return obj.season.title()
+
+    class Meta:
+        model = Semester
+        fields = "__all__"
+
+
+class SchoolSerializer(serializers.ModelSerializer):
+    """DRF Serializer for School"""
+
+    class Meta:
+        model = School
+        fields = "__all__"
+
+
+class DepartmentSerializer(serializers.ModelSerializer):
+    """DRF Serializer for Department"""
+
+    school = SchoolSerializer(read_only=True)
+
+    class Meta:
+        model = Department
+        fields = "__all__"
+
+
+class SubdepartmentSerializer(serializers.ModelSerializer):
+    """DRF Serializer for Subdepartment"""
+
+    class Meta:
+        model = Subdepartment
+        fields = "__all__"
+
+
+class CourseSerializer(serializers.ModelSerializer):
+    """DRF Serializer for Course"""
+
+    subdepartment = SubdepartmentSerializer(read_only=True)
+
+    class Meta:
+        model = Course
+        fields = "__all__"
+
+
+class CourseSimpleStatsSerializer(CourseSerializer):
+    """DRF Serializer for Course including some review statistics"""
+
+    semester_last_taught = SemesterSerializer(read_only=True)
+    average_rating = serializers.FloatField(allow_null=True)
+    average_difficulty = serializers.FloatField(allow_null=True)
+    average_gpa = serializers.FloatField(allow_null=True)
+
+    class Meta:
+        model = Course
+        fields = [
+            "id",
+            "title",
+            "description",
+            "number",
+            "subdepartment",
+            "semester_last_taught",
+            "average_rating",
+            "average_difficulty",
+            "average_gpa",
+            "is_recent",
+        ]
+
+
+class CourseAllStatsSerializer(CourseSimpleStatsSerializer):
+    """DRF Serializer for Course including all review statistics"""
+
+    # ratings
+    average_instructor = serializers.FloatField(allow_null=True)
+    average_fun = serializers.FloatField(allow_null=True)
+    average_recommendability = serializers.FloatField(allow_null=True)
+    # workload
+    average_hours_per_week = serializers.FloatField(allow_null=True)
+    average_amount_reading = serializers.FloatField(allow_null=True)
+    average_amount_writing = serializers.FloatField(allow_null=True)
+    average_amount_group = serializers.FloatField(allow_null=True)
+    average_amount_homework = serializers.FloatField(allow_null=True)
+    # grades
+    a_plus = serializers.IntegerField(allow_null=True)
+    a = serializers.IntegerField(allow_null=True)
+    a_minus = serializers.IntegerField(allow_null=True)
+    b_plus = serializers.IntegerField(allow_null=True)
+    b = serializers.IntegerField(allow_null=True)
+    b_minus = serializers.IntegerField(allow_null=True)
+    c_plus = serializers.IntegerField(allow_null=True)
+    c = serializers.IntegerField(allow_null=True)
+    c_minus = serializers.IntegerField(allow_null=True)
+    dfw = serializers.IntegerField(allow_null=True)
+    total_enrolled = serializers.IntegerField(allow_null=True)
+
+    class Meta:
+        model = Course
+        fields = [
+            "id",
+            "title",
+            "description",
+            "number",
+            "subdepartment",
+            "semester_last_taught",
+            "is_recent",
+            # ratings
+            "average_rating",
+            "average_instructor",
+            "average_fun",
+            "average_recommendability",
+            "average_difficulty",
+            # workload
+            "average_hours_per_week",
+            "average_amount_reading",
+            "average_amount_writing",
+            "average_amount_group",
+            "average_amount_homework",
+            # grades
+            "a_plus",
+            "a",
+            "a_minus",
+            "b_plus",
+            "b",
+            "b_minus",
+            "c_plus",
+            "c",
+            "c_minus",
+            "dfw",
+            "total_enrolled",
+            "average_gpa",
+        ]
+
+
+class CourseAutocompleteSerializer(serializers.ModelSerializer):
+    """DRF Serializer for autocomplete course"""
+
+    subdepartment = serializers.CharField(
+        source="subdepartment.mnemonic", read_only=True
+    )
+
+    class Meta:
+        model = Course
+        fields = ["id", "title", "number", "subdepartment"]
+
+
+class InstructorSerializer(serializers.ModelSerializer):
+    """DRF Serializer for Instructor"""
+
+    class Meta:
+        model = Instructor
+        fields = "__all__"
+
+
+class InstructorAutocompleteSerializer(serializers.ModelSerializer):
+    """DRF Serializer for autocomplete instructor"""
+
+    class Meta:
+        model = Instructor
+        fields = [
+            "id",
+            "full_name",
+        ]
+
+
+class ClubCategorySerializer(serializers.ModelSerializer):
+    """DRF Serializer for ClubCategory"""
+
+    class Meta:
+        model = ClubCategory
+        fields = "__all__"
+
+
+class ClubSerializer(serializers.ModelSerializer):
+    """DRF Serializer for Club"""
+
+    category = ClubCategorySerializer(read_only=True)
+
+    class Meta:
+        model = Club
+        fields = "__all__"
+
+
+class ClubAutocompleteSerializer(serializers.ModelSerializer):
+    """DEF Serializer for Club autocomplete"""
+
+    category_name = serializers.CharField(source="category.name", read_only=True)
+
+    class Meta:
+        model = Club
+        fields = (
+            "id",
+            "name",
+            "category_name",
+        )
diff --git a/tcf_website/static/search/autocomplete.js b/tcf_website/static/search/autocomplete.js
new file mode 100644
index 000000000..d4a359da0
--- /dev/null
+++ b/tcf_website/static/search/autocomplete.js
@@ -0,0 +1,189 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const searchInput = document.getElementById("search-input");
+  if (!searchInput) return;
+
+  // Create container for autocomplete suggestions
+  const suggestionsContainer = document.createElement("div");
+  suggestionsContainer.classList.add("autocomplete-suggestions");
+
+  const searchbarWrapper = searchInput.closest(".searchbar-wrapper");
+  if (searchbarWrapper) {
+    searchbarWrapper.appendChild(suggestionsContainer);
+  } else {
+    return;
+  }
+
+  let debounceTimeout = null;
+  let currentRequestController = null;
+
+  // Debounce to reduce API calls
+  function debounce(func, delay) {
+    return function (...args) {
+      clearTimeout(debounceTimeout);
+      debounceTimeout = setTimeout(() => func(...args), delay);
+    };
+  }
+
+  function getSearchMode() {
+    const checked = document.querySelector('input[name="mode"]:checked');
+    return checked ? checked.value : "courses";
+  }
+
+  async function fetchSuggestions(query) {
+    if (!query.trim()) {
+      clearSuggestions();
+      return;
+    }
+
+    // Cancel previous request if still in-flight
+    if (currentRequestController) {
+      currentRequestController.abort();
+    }
+
+    currentRequestController = new AbortController();
+    const signal = currentRequestController.signal;
+
+    const mode = getSearchMode();
+
+    try {
+      const response = await fetch(
+        `/api/autocomplete/?q=${encodeURIComponent(query)}&mode=${mode}`,
+        { signal: signal },
+      );
+
+      if (!response.ok) {
+        clearSuggestions();
+        return;
+      }
+
+      const data = await response.json();
+      renderSuggestions(data);
+    } catch (error) {
+      if (error.name !== "AbortError") {
+        console.error("Autocomplete fetch error:", error);
+      }
+      clearSuggestions();
+    }
+  }
+
+  // Render suggestions
+  function renderSuggestions(data) {
+    suggestionsContainer.innerHTML = "";
+
+    const hasCourses = data?.courses?.length > 0;
+    const hasInstructors = data?.instructors?.length > 0;
+    const hasClubs = data?.clubs?.length > 0;
+
+    if (!hasCourses && !hasInstructors && !hasClubs) {
+      suggestionsContainer.style.display = "none";
+      return;
+    }
+
+    let MAX_RESULTS = 8;
+    if (window.innerWidth < 600) {
+      MAX_RESULTS = 4;
+    }
+    if (window.innerWidth < 1024) {
+      MAX_RESULTS = 6;
+    }
+    const courses = (data.courses || []).slice(0, MAX_RESULTS);
+    const instructors = (data.instructors || []).slice(0, MAX_RESULTS);
+    const clubs = (data.clubs || []).slice(0, MAX_RESULTS);
+
+    // Add group headers for clarity
+    if (hasCourses) {
+      const header = document.createElement("div");
+      header.classList.add("autocomplete-header");
+      header.textContent = "Courses";
+      suggestionsContainer.appendChild(header);
+    }
+
+    // Courses first
+    courses.forEach((course) => {
+      const item = document.createElement("div");
+      item.classList.add("autocomplete-item");
+      item.style.cursor = "pointer";
+      item.textContent = `${course.subdepartment} ${course.number} — ${course.title}`;
+      item.addEventListener("click", () => {
+        searchInput.value = `${course.subdepartment} ${course.number}`;
+        clearSuggestions();
+        if (searchInput.form) {
+          searchInput.form.submit();
+        }
+      });
+      suggestionsContainer.appendChild(item);
+    });
+
+    if (instructors.length > 0) {
+      const header = document.createElement("div");
+      header.classList.add("autocomplete-header");
+      header.textContent = "Instructors";
+      suggestionsContainer.appendChild(header);
+    }
+
+    // Instructor results
+    instructors.forEach((instructor) => {
+      const item = document.createElement("div");
+      item.classList.add("autocomplete-item");
+      item.style.cursor = "pointer";
+      item.textContent = instructor.full_name;
+      item.addEventListener("click", () => {
+        searchInput.value = instructor.full_name;
+        clearSuggestions();
+        if (searchInput.form) {
+          searchInput.form.submit();
+        }
+      });
+      suggestionsContainer.appendChild(item);
+    });
+
+    if (clubs.length > 0) {
+      const header = document.createElement("div");
+      header.classList.add("autocomplete-header");
+      header.textContent = "Clubs";
+      suggestionsContainer.appendChild(header);
+    }
+
+    // Club results
+    clubs.forEach((club) => {
+      const item = document.createElement("div");
+      item.classList.add("autocomplete-item");
+      item.style.cursor = "pointer";
+      item.textContent = club.name;
+      item.addEventListener("click", () => {
+        searchInput.value = club.name;
+        clearSuggestions();
+        if (searchInput.form) {
+          searchInput.form.submit();
+        }
+      });
+      suggestionsContainer.appendChild(item);
+    });
+
+    suggestionsContainer.style.display = "block";
+  }
+
+  // Helper to clear dropdown
+  function clearSuggestions() {
+    suggestionsContainer.innerHTML = "";
+    suggestionsContainer.style.display = "none";
+  }
+
+  // Hide dropdown when clicking outside
+  document.addEventListener("click", (event) => {
+    if (
+      !suggestionsContainer.contains(event.target) &&
+      event.target !== searchInput
+    ) {
+      clearSuggestions();
+    }
+  });
+
+  // Debounced input listener
+  searchInput.addEventListener(
+    "input",
+    debounce((event) => {
+      fetchSuggestions(event.target.value);
+    }, 250),
+  );
+});
diff --git a/tcf_website/static/search/searchbar.css b/tcf_website/static/search/searchbar.css
index 759175e12..5bf561da3 100644
--- a/tcf_website/static/search/searchbar.css
+++ b/tcf_website/static/search/searchbar.css
@@ -303,3 +303,58 @@
   background-color: #cbd5e0;
   border-radius: 2px;
 }
+
+/* Autocomplete suggestions positioning */
+.searchbar-wrapper {
+  position: relative;
+}
+
+/* Remove focus outline from search input */
+#search-input:focus {
+  outline: none !important;
+  box-shadow: none !important;
+  border-color: inherit;
+}
+
+.autocomplete-suggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin-top: 0;
+  max-height: 400px;
+  overflow: hidden;
+  display: none;
+  padding: 0.5rem 0;
+}
+
+.autocomplete-header {
+  padding: 0.75rem 1rem;
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: #4a5568;
+  background-color: #f7fafc;
+  border-bottom: 1px solid #e2e8f0;
+  margin: 0;
+}
+
+.autocomplete-item {
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  border-bottom: 1px solid #f7fafc;
+  margin: 0;
+  transition: background-color 0.15s ease;
+}
+
+.autocomplete-item:hover {
+  background-color: #f7fafc;
+}
+
+.autocomplete-item:last-child {
+  border-bottom: none;
+}
diff --git a/tcf_website/templates/club/mode_toggle.html b/tcf_website/templates/club/mode_toggle.html
index c4d5d0d6c..bb0235251 100644
--- a/tcf_website/templates/club/mode_toggle.html
+++ b/tcf_website/templates/club/mode_toggle.html
@@ -13,6 +13,11 @@
   <label for="search-mode-courses" class="mode-label" role="radio">Courses</label>
   <label for="search-mode-clubs" class="mode-label" role="radio">Clubs</label>
   <div class="toggle-indicator"></div>
+  {% if is_club %}
+    <input type="hidden" id="search-mode" value="clubs">
+  {% else %}
+    <input type="hidden" id="search-mode" value="courses">
+  {% endif %}
 </div>
 {% else %}
 <div class="mode-toggle-container {% if container_class %}{{ container_class }}{% endif %}">
@@ -22,4 +27,4 @@
     <div class="mode-toggle-slider {% if is_club %}slide-right{% endif %}"></div>
   </div>
 </div>
-{% endif %} 
\ No newline at end of file
+{% endif %}
diff --git a/tcf_website/templates/search/searchbar.html b/tcf_website/templates/search/searchbar.html
index 1851ad5cd..a24b29ae8 100644
--- a/tcf_website/templates/search/searchbar.html
+++ b/tcf_website/templates/search/searchbar.html
@@ -2,209 +2,211 @@
 <link rel="stylesheet" href="{% static 'club/mode_toggle.css' %}" />
 <link rel="stylesheet" href="{% static 'search/searchbar.css' %}" />
 <!-- searchbar.html -->
- 
-<form class="form-inline flex-grow-1" action="{% url 'search' %}" method="get">
-  <div class="input-group flex-grow-1">
-    <input 
-      type="search" 
-      class="form-control border border-right-0"
-      placeholder="{% if is_club %}Search for a club...{% else %}Search for a class or professor...{% endif %}" 
-      aria-label="Search" 
-      name="q" 
-      value="{{ query }}"
-    >
-    <div class="input-group-append">
-      <!-- Mode Toggle -->
-      {% include "../club/mode_toggle.html" with is_club=is_club toggle_type="radio" no_transition=True container_class="search-mode-toggle" %}
-      <!-- Search Button -->
-      <button 
-        class="btn btn-outline-secondary border border-left-0" 
-        id="search-button" 
-        aria-label="Search" 
-        type="submit"
+  <div class="searchbar-wrapper">
+  <form class="form-inline flex-grow-1" action="{% url 'search' %}" method="get">
+    <div class="input-group flex-grow-1">
+      <input
+        type="search"
+        class="form-control border border-right-0"
+        id = "search-input"
+        placeholder="{% if is_club %}Search for a club...{% else %}Search for a class or professor...{% endif %}"
+        aria-label="Search"
+        name="q"
+        value="{{ query }}"
       >
-        <i class="fa fa-search" aria-hidden="true"></i>
-      </button>
-    </div>
-    <div class="dropdown-wrapper">
-      <div class="dropdown input-group">
-        <button 
-          class="btn btn-outline-secondary dropdown-toggle border border-left-0" 
-          id="filter-button" 
-          aria-label="Filter" 
-          type="button" 
-          data-toggle="dropdown" 
-          data-bs-display="static" 
-          data-bs-auto-close="outside" 
-          aria-expanded="false" 
+      <div class="input-group-append">
+        <!-- Mode Toggle -->
+        {% include "../club/mode_toggle.html" with is_club=is_club toggle_type="radio" no_transition=True container_class="search-mode-toggle" %}
+        <!-- Search Button -->
+        <button
+          class="btn btn-outline-secondary border border-left-0"
+          id="search-button"
+          aria-label="Search"
+          type="submit"
         >
-          Filters
+          <i class="fa fa-search" aria-hidden="true"></i>
         </button>
-
-        <div 
-          class="dropdown-menu p-4 filter-dropdown dropdown-menu-end" 
-          aria-labelledby="filter-button" 
-          id="filter-dropdown"
-        >
-        <!-- Day and time selections -->
-          <div class="filter-container">
-            <div class="time-filter">
-              <div class="filter-section compact">
-                <h6 class="filter-header">
-                  Exclude Class Days
-                </h6>
-                <div class="day-toggles">
-                  <div class="form-check form-check-inline m-0">
-                    <input class="form-check-input day-checkbox" type="checkbox" id="monday" value="MON">
-                    <label class="form-check-label" for="monday">Mon</label>
-                  </div>
-                  <div class="form-check form-check-inline m-0">
-                    <input class="form-check-input day-checkbox" type="checkbox" id="tuesday" value="TUE">
-                    <label class="form-check-label" for="tuesday">Tue</label>
-                  </div>
-                  <div class="form-check form-check-inline m-0">
-                    <input class="form-check-input day-checkbox" type="checkbox" id="wednesday" value="WED">
-                    <label class="form-check-label" for="wednesday">Wed</label>
-                  </div>
-                  <div class="form-check form-check-inline m-0">
-                    <input class="form-check-input day-checkbox" type="checkbox" id="thursday" value="THU">
-                    <label class="form-check-label" for="thursday">Thu</label>
-                  </div>
-                  <div class="form-check form-check-inline m-0">
-                    <input class="form-check-input day-checkbox" type="checkbox" id="friday" value="FRI">
-                    <label class="form-check-label" for="friday">Fri</label>
+      </div>
+      <div class="dropdown-wrapper">
+        <div class="dropdown input-group">
+          <button
+            class="btn btn-outline-secondary dropdown-toggle border border-left-0"
+            id="filter-button"
+            aria-label="Filter"
+            type="button"
+            data-toggle="dropdown"
+            data-bs-display="static"
+            data-bs-auto-close="outside"
+            aria-expanded="false"
+          >
+            Filters
+          </button>
+          <div
+            class="dropdown-menu p-4 filter-dropdown dropdown-menu-end"
+            aria-labelledby="filter-button"
+            id="filter-dropdown"
+          >
+          <!-- Day and time selections -->
+            <div class="filter-container">
+              <div class="time-filter">
+                <div class="filter-section compact">
+                  <h6 class="filter-header">
+                    Exclude Class Days
+                  </h6>
+                  <div class="day-toggles">
+                    <div class="form-check form-check-inline m-0">
+                      <input class="form-check-input day-checkbox" type="checkbox" id="monday" value="MON">
+                      <label class="form-check-label" for="monday">Mon</label>
+                    </div>
+                    <div class="form-check form-check-inline m-0">
+                      <input class="form-check-input day-checkbox" type="checkbox" id="tuesday" value="TUE">
+                      <label class="form-check-label" for="tuesday">Tue</label>
+                    </div>
+                    <div class="form-check form-check-inline m-0">
+                      <input class="form-check-input day-checkbox" type="checkbox" id="wednesday" value="WED">
+                      <label class="form-check-label" for="wednesday">Wed</label>
+                    </div>
+                    <div class="form-check form-check-inline m-0">
+                      <input class="form-check-input day-checkbox" type="checkbox" id="thursday" value="THU">
+                      <label class="form-check-label" for="thursday">Thu</label>
+                    </div>
+                    <div class="form-check form-check-inline m-0">
+                      <input class="form-check-input day-checkbox" type="checkbox" id="friday" value="FRI">
+                      <label class="form-check-label" for="friday">Fri</label>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <div class="filter-section compact">
-                <h6 class="filter-header">
-                  Preferred Class Time
-                </h6>
-                <div class="day-toggles">
-                  <p>From</p>
-                  <input class="time-selection" type="time" id="from_time" name="from_time">
-                  <p>to</p>
-                  <input class="time-selection" type="time" id="to_time" name="to_time">
-                </div>
-              </div>
-            </div>
-            <!-- Open Section selections -->
-            <div class="filter-row">
-              <!-- Open Section selections -->
-              <div class="filter-section compact">
-                <h6 class="filter-header">
-                  Availability
-                </h6>
-                <div class="filter-option-container">
-                  <div class="form-check d-flex align-items-center">
-                    <input 
-                      class="form-check-input me-2" 
-                      type="checkbox" 
-                      id="open-sections" 
-                      name="open_sections"
-                    >
-                    <label class="form-check-label" for="open-sections">
-                      Show Open Courses Only
-                    </label>
+                <div class="filter-section compact">
+                  <h6 class="filter-header">
+                    Preferred Class Time
+                  </h6>
+                  <div class="day-toggles">
+                    <p>From</p>
+                    <input class="time-selection" type="time" id="from_time" name="from_time">
+                    <p>to</p>
+                    <input class="time-selection" type="time" id="to_time" name="to_time">
                   </div>
                 </div>
               </div>
-              
-              <!-- Min GPA Filter -->
-              <div class="filter-section compact">
-                <h6 class="filter-header">
-                  Minimum GPA
-                </h6>
-                <div class="filter-option-container">
-                  <div class="min-gpa-controls">
-                    <input 
-                      type="range" 
-                      class="form-range" 
-                      id="min-gpa-slider" 
-                      min="0" 
-                      max="4" 
-                      step="0.1" 
-                      value="0.0" 
-                    >
-                    <input 
-                      type="text" 
-                      class="form-control min-gpa-text" 
-                      id="min-gpa-text" 
-                      value="0.0" 
-                    >
+              <!-- Open Section selections -->
+              <div class="filter-row">
+                <!-- Open Section selections -->
+                <div class="filter-section compact">
+                  <h6 class="filter-header">
+                    Availability
+                  </h6>
+                  <div class="filter-option-container">
+                    <div class="form-check d-flex align-items-center">
+                      <input
+                        class="form-check-input me-2"
+                        type="checkbox"
+                        id="open-sections"
+                        name="open_sections"
+                      >
+                      <label class="form-check-label" for="open-sections">
+                        Show Open Courses Only
+                      </label>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </div>
-            
-            <!-- List of subjects -->
-            <div class="filter-grid">
-              <div class="filter-section">
-                <h6 class="filter-header">
-                  Subject
-                </h6>
-                <div class="search-container">
-                  <i class="fa fa-search search-icon"></i>
-                  <input type="text" class="form-control" id="subject-search" placeholder="Search subjects...">
-                </div>
-                <div class="subject-list">
-                  {% for subdept in subdepartments %}
-                    <div class="form-check subdepartment-label">
-                      <input 
-                        class="form-check-input form-check-subjects" 
-                        type="checkbox" 
-                        id="subject-{{ subdept.mnemonic }}" 
-                        name="subdepartment" 
-                        value="{{ subdept.mnemonic }}"
+
+                <!-- Min GPA Filter -->
+                <div class="filter-section compact">
+                  <h6 class="filter-header">
+                    Minimum GPA
+                  </h6>
+                  <div class="filter-option-container">
+                    <div class="min-gpa-controls">
+                      <input
+                        type="range"
+                        class="form-range"
+                        id="min-gpa-slider"
+                        min="0"
+                        max="4"
+                        step="0.1"
+                        value="0.0"
+                      >
+                      <input
+                        type="text"
+                        class="form-control min-gpa-text"
+                        id="min-gpa-text"
+                        value="0.0"
                       >
-                      <label class="form-check-label" for="subject-{{ subdept.mnemonic }}">
-                        {{ subdept.mnemonic }} - {{ subdept.name }}
-                      </label>
                     </div>
-                  {% endfor %}
+                  </div>
                 </div>
               </div>
-              <!-- List of disciplines -->
-              <div class="filter-section">
-                <h6 class="filter-header">
-                  Discipline
-                </h6>
-                <div class="search-container">
-                  <i class="fa fa-search search-icon"></i>
-                  <input type="text" class="form-control" id="discipline-search" placeholder="Search disciplines...">
+
+              <!-- List of subjects -->
+              <div class="filter-grid">
+                <div class="filter-section">
+                  <h6 class="filter-header">
+                    Subject
+                  </h6>
+                  <div class="search-container">
+                    <i class="fa fa-search search-icon"></i>
+                    <input type="text" class="form-control" id="subject-search" placeholder="Search subjects...">
+                  </div>
+                  <div class="subject-list">
+                    {% for subdept in subdepartments %}
+                      <div class="form-check subdepartment-label">
+                        <input
+                          class="form-check-input form-check-subjects"
+                          type="checkbox"
+                          id="subject-{{ subdept.mnemonic }}"
+                          name="subdepartment"
+                          value="{{ subdept.mnemonic }}"
+                        >
+                        <label class="form-check-label" for="subject-{{ subdept.mnemonic }}">
+                          {{ subdept.mnemonic }} - {{ subdept.name }}
+                        </label>
+                      </div>
+                    {% endfor %}
+                  </div>
                 </div>
-                <div class="discipline-list">
-                  {% for discipline in disciplines %}
-                    <div class="form-check discipline-label">
-                      <input 
-                        class="form-check-input form-check-disciplines" 
-                        type="checkbox" 
-                        id="discipline-{{ discipline.name|slugify }}" 
-                        name="discipline" 
-                        value="{{ discipline.name }}"
-                      >
-                      <label class="form-check-label" for="discipline-{{ discipline.name|slugify }}">
-                        {{ discipline.name }}
-                      </label>
-                    </div>
-                  {% endfor %}
+                <!-- List of disciplines -->
+                <div class="filter-section">
+                  <h6 class="filter-header">
+                    Discipline
+                  </h6>
+                  <div class="search-container">
+                    <i class="fa fa-search search-icon"></i>
+                    <input type="text" class="form-control" id="discipline-search" placeholder="Search disciplines...">
+                  </div>
+                  <div class="discipline-list">
+                    {% for discipline in disciplines %}
+                      <div class="form-check discipline-label">
+                        <input
+                          class="form-check-input form-check-disciplines"
+                          type="checkbox"
+                          id="discipline-{{ discipline.name|slugify }}"
+                          name="discipline"
+                          value="{{ discipline.name }}"
+                        >
+                        <label class="form-check-label" for="discipline-{{ discipline.name|slugify }}">
+                          {{ discipline.name }}
+                        </label>
+                      </div>
+                    {% endfor %}
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-  
-          <!-- Action buttons -->
-          <div class="filter-actions">
-            <button type="reset" class="btn btn-outline-secondary">Clear All</button>
-            <button type="submit" class ="btn-custom">Apply Filters</button>
+
+            <!-- Action buttons -->
+            <div class="filter-actions">
+              <button type="reset" class="btn btn-outline-secondary">Clear All</button>
+              <button type="submit" class ="btn-custom">Apply Filters</button>
+            </div>
           </div>
         </div>
       </div>
     </div>
+    <input type="hidden" name="weekdays" id="weekdays-input">
+    <input type="hidden" name="min_gpa" id="min-gpa-input" value="0.0">
+  </form>
   </div>
-  <input type="hidden" name="weekdays" id="weekdays-input">
-  <input type="hidden" name="min_gpa" id="min-gpa-input" value="0.0">
-</form>
 
 <script src="{% static 'club/mode_toggle.js' %}"></script>
 <script src="{% static 'search/filters.js' %}"></script>
+<script src="{% static 'search/autocomplete.js' %}"></script>
diff --git a/tcf_website/tests/test_search_autocomplete.py b/tcf_website/tests/test_search_autocomplete.py
new file mode 100644
index 000000000..1d2a5e91a
--- /dev/null
+++ b/tcf_website/tests/test_search_autocomplete.py
@@ -0,0 +1,55 @@
+"""Tests for the search autocomplete API"""
+
+from django.test import TestCase
+from django.urls import reverse
+
+from .test_utils import setup
+
+
+class AutocompleteAPITestCase(TestCase):
+    """Test cases for the autocomplete API endpoint"""
+
+    def setUp(self):
+        """Set up test data"""
+        setup(self)
+
+    def test_autocomplete_courses(self):
+        """Should match course by title"""
+        response = self.client.get(reverse("autocomplete"), {"q": "software"})
+        self.assertEqual(response.status_code, 200)
+        data = response.json()
+        self.assertIn("courses", data)
+        self.assertTrue(any("Software" in c["title"] for c in data["courses"]))
+
+    def test_autocomplete_instructors(self):
+        """Should match instructor by name"""
+        response = self.client.get(reverse("autocomplete"), {"q": "jefferson"})
+        self.assertEqual(response.status_code, 200)
+        data = response.json()
+        self.assertIn("instructors", data)
+        instructor_names = [i["full_name"] for i in data["instructors"]]
+        self.assertTrue(any("Jefferson" in name for name in instructor_names))
+
+    def test_autocomplete_clubs(self):
+        """Should return clubs in club mode, expected to be empty"""
+        response = self.client.get(
+            reverse("autocomplete"), {"q": "Chess", "mode": "clubs"}
+        )
+        self.assertEqual(response.status_code, 200)
+        data = response.json()
+        self.assertIn("clubs", data)
+        self.assertIsInstance(data["clubs"], list)
+
+    def test_autocomplete_empty_query(self):
+        """Should return empty lists for empty query"""
+        response = self.client.get(reverse("autocomplete"), {"q": ""})
+        self.assertEqual(response.status_code, 200)
+        data = response.json()
+        self.assertEqual(data, {"courses": [], "instructors": [], "clubs": []})
+
+    def test_autocomplete_no_match(self):
+        """Should return empty lists for meaningless query"""
+        response = self.client.get(reverse("autocomplete"), {"q": "zzzzzzzzzz"})
+        self.assertEqual(response.status_code, 200)
+        data = response.json()
+        self.assertTrue(all(len(v) == 0 for v in data.values()))
diff --git a/tcf_website/urls.py b/tcf_website/urls.py
index b23ed4578..7a98ffd2d 100644
--- a/tcf_website/urls.py
+++ b/tcf_website/urls.py
@@ -123,4 +123,5 @@
     path("login/", views.auth.login, name="login"),
     path("cognito-callback/", views.auth.cognito_callback, name="cognito_callback"),
     path("logout/", views.auth.logout, name="logout"),
+    path("api/autocomplete/", views.autocomplete, name="autocomplete"),
 ]
diff --git a/tcf_website/views/__init__.py b/tcf_website/views/__init__.py
index f83dec6b5..d07f47f6b 100644
--- a/tcf_website/views/__init__.py
+++ b/tcf_website/views/__init__.py
@@ -6,12 +6,12 @@
 from .auth import login, logout
 from .browse import (
     browse,
+    club_category,
     course_instructor,
     course_view,
     course_view_legacy,
     department,
     instructor_view,
-    club_category,
 )
 from .index import AboutView, index, privacy, terms
 from .profile import DeleteProfile, profile, reviews
@@ -39,4 +39,4 @@
     view_schedules,
     view_select_schedules_modal,
 )
-from .search import search
+from .search import search, autocomplete
diff --git a/tcf_website/views/search.py b/tcf_website/views/search.py
index 62934b38e..ac8a01596 100644
--- a/tcf_website/views/search.py
+++ b/tcf_website/views/search.py
@@ -2,14 +2,23 @@
 """Views for search results"""
 import re
 import statistics
+from concurrent.futures import ThreadPoolExecutor
 from typing import Iterable
 
 from django.contrib.postgres.search import TrigramSimilarity
+from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator
+from django.db import connection
 from django.db.models import F, FloatField, Q, Value
 from django.db.models.functions import Greatest, Round
 from django.shortcuts import render
-from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
-
+from rest_framework.decorators import api_view
+from rest_framework.response import Response
+
+from ..api.serializers import (
+    ClubAutocompleteSerializer,
+    CourseAutocompleteSerializer,
+    InstructorAutocompleteSerializer,
+)
 from ..models import Club, Course, Instructor, Subdepartment
 
 
@@ -145,7 +154,7 @@ def search(request):
     return render(request, "search/search.html", ctx)
 
 
-def fetch_clubs(query):
+def fetch_clubs(query, limit: int | None = None):
     """Get club data using Django Trigram similarity."""
     threshold = 0.15
     if not query:
@@ -172,7 +181,7 @@ def fetch_clubs(query):
         .order_by("-max_similarity")
     )
 
-    return [
+    qs = [
         {
             "id": c.id,
             "name": c.name,
@@ -184,6 +193,10 @@ def fetch_clubs(query):
         for c in qs
     ]
 
+    if limit:
+        qs = qs[:limit]
+    return qs
+
 
 def decide_order(courses: list[dict], instructors: list[dict]) -> bool:
     """Decides if courses (True) or instructors (False) should be displayed first."""
@@ -198,9 +211,24 @@ def mean(scores: Iterable[int]) -> float:
     return courses_avg > instructors_avg or not instructors
 
 
-def fetch_instructors(query) -> list[dict]:
+def fetch_instructors(query, limit: int = 10) -> list[dict]:
     """Get instructor data using Django Trigram similarity"""
     # arbitrarily chosen threshold
+    results = get_instructor_results(query, limit=limit)
+
+    instructors = [
+        {
+            key: getattr(instructor, key)
+            for key in ("first_name", "last_name", "email", "id", "max_similarity")
+        }
+        for instructor in results
+    ]
+
+    return instructors
+
+
+def get_instructor_results(query, limit: int = 10):
+    """Get instructor query results using Django Trigram similarity."""
     similarity_threshold = 0.5
     results = (
         Instructor.objects.only("first_name", "last_name", "full_name", "email")
@@ -218,21 +246,13 @@ def fetch_instructors(query) -> list[dict]:
             )
         )
         .filter(Q(max_similarity__gte=similarity_threshold))
-        .order_by("-max_similarity")[:10]
+        .order_by("-max_similarity")[:limit]
     )
 
-    instructors = [
-        {
-            key: getattr(instructor, key)
-            for key in ("first_name", "last_name", "email", "id", "max_similarity")
-        }
-        for instructor in results
-    ]
-
-    return instructors
+    return results
 
 
-def fetch_courses(query, filters):
+def fetch_courses(query, filters, limit: int | None = None):
     """Get course data using Django Trigram similarity"""
     # lower similarity threshold for partial searches of course titles
     similarity_threshold = 0.15
@@ -279,6 +299,9 @@ def normalize_search_query(q: str) -> str:
         .order_by("-max_similarity")
     )
 
+    if limit:
+        results = results[:limit]
+
     return results
 
 
@@ -331,3 +354,53 @@ def apply_filters(results, filters):
         results = results.filter(coursegrade__average__gte=float(min_gpa))
 
     return results.distinct()
+
+
+@api_view(["GET"])
+def autocomplete(request):
+    """implement autocomplete for search bar"""
+    query = request.GET.get("q", "").strip()
+    _, is_club = parse_mode(request)
+
+    if not query:
+        return Response(
+            {"courses": [], "instructors": [], "clubs": []}
+        )  # empty list if no input
+
+    if is_club:
+        clubs = fetch_clubs(query, limit=5)
+        return Response({"clubs": ClubAutocompleteSerializer(clubs, many=True).data})
+
+    if connection.in_atomic_block:
+        instructors = list(get_instructor_results(query, limit=5))
+        courses = list(fetch_courses(query, filters={}, limit=5))
+
+        if not courses:
+            courses = list(
+                Course.objects.select_related("subdepartment")
+                .filter(
+                    Q(title__icontains=query)
+                    | Q(combined_mnemonic_number__icontains=query)
+                )
+                .order_by("title")[:5]
+            )
+    else:
+        with ThreadPoolExecutor(max_workers=2) as executor:
+            # wrap results in a list to avoid lazy eval, parallelizing requests
+            instructors_future = executor.submit(
+                lambda: list(get_instructor_results(query, limit=5))
+            )
+            courses_future = executor.submit(
+                lambda: list(fetch_courses(query, filters={}, limit=5))
+            )
+            instructors = instructors_future.result()
+            courses = courses_future.result()
+
+    return Response(
+        {
+            "courses": CourseAutocompleteSerializer(courses, many=True).data,
+            "instructors": InstructorAutocompleteSerializer(
+                instructors, many=True
+            ).data,
+        }
+    )