diff --git a/app/controllers/courses_controller.rb b/app/controllers/courses_controller.rb
index 827fb9f..b3bdccf 100644
--- a/app/controllers/courses_controller.rb
+++ b/app/controllers/courses_controller.rb
@@ -7,45 +7,39 @@ class CoursesController < ApplicationController
   def show
     authorize @course
 
+    # query for all projects_instances, owner_type and owner_id for participants table
+    @course.projects.includes(project_instances: { enrolment: :user }).load
+    @projects_by_owner = @course.projects.index_by { |p| [p.owner_type, p.owner_id] }
+
     @student_list = @course.students
     @description = @course.course_description
     @lecturers = @course.lecturers
-    @group_list = @course.grouped? ? @course.project_groups.to_a : []
     @lecturer_enrolment = @course.enrolments.find_by(user: current_user, role: :lecturer)
     @current_user_enrolment = @course.enrolments.find_by(user: current_user)
 
     @topic_list = policy_scope(@course.topics, policy_scope_class: TopicPolicy::Scope)
     @my_topics = @topic_list.where(owner: current_user)
 
-    # SET STUDENT PROJECTS
-    projects_ownerships = @course.projects.approved
-                                 .where(owner_type: 'User')
-                                 .pluck('owner_id')
-
-    @students_with_projects = @student_list.select do |student|
-      projects_ownerships.include?(student.id)
-    end
-
-    @students_without_projects = @student_list.reject do |student|
-      projects_ownerships.include?(student.id)
-    end
+    # set students projects
+    projects_ownerships = @course.projects.approved.where(owner_type: 'User').pluck('owner_id')
 
-    @filtered_group_list   = filtered_group_list
-    @filtered_student_list = filtered_student_list
-    @my_student_projects = []
-    @incoming_proposals = []
+    @students_with_projects = @student_list.select { |s| projects_ownerships.include?(s.id) }
+    @students_without_projects = @student_list.reject { |s| projects_ownerships.include?(s.id) }
 
     if @course.grouped?
       @group = current_user.project_groups.find_by(course: @course)
-
-      @project = (@course.projects.find_by(owner_type: 'ProjectGroup', owner_id: @group.id) if @group)
+      @project = @projects_by_owner[['ProjectGroup', @group.id]] if @group
+      @group_list = @course.project_groups.includes(project_group_members: :user).to_a
     else
       @group = nil
       @project = @course.projects.find_by(owner_type: 'User', owner_id: current_user.id)
+      @group_list = []
     end
 
+    # view instances for incoming topics and my_student_projects
     @current_status = @project&.current_status || 'not_submitted'
-
+    @my_student_projects = []
+    @incoming_proposals = []
     if @current_user_enrolment&.coordinator?
       supervisor_enrolment = @lecturer_enrolment || @current_user_enrolment
       @my_student_projects = @course.projects.supervised_by(supervisor_enrolment).approved
@@ -55,13 +49,29 @@ def show
       @incoming_proposals = @course.projects.where(enrolment: @current_user_enrolment).proposals
     end
 
-    # SET LECTURER CAPACITY
+    # view instances for participants_table
+    @filtered_group_list   = filtered_group_list
+    @filtered_student_list = filtered_student_list
+
+    @show_all = params[:show_all] == 'true'
+    @total_group_count   = @filtered_group_list.count
+    @total_student_count = @filtered_student_list.count
+    @total_count = @course.grouped? ? @total_group_count : @total_student_count
+    @total_count = @course.grouped? ? @filtered_group_list.count : @filtered_student_list.count
+
+    unless @show_all
+      @filtered_group_list = @filtered_group_list.first(Rails.application.config.participants_pagination_threshold)
+      @filtered_student_list = @filtered_student_list.first(Rails.application.config.participants_pagination_threshold)
+    end
+
+    @displayed_count = @course.grouped? ? @filtered_group_list.count : @filtered_student_list.count
+
     @lecturer_capacity_info = {}
     @lecturers.each do |lecturer|
       @lecturer_capacity_info[lecturer.id] = @course.lecturer_capacity(lecturer)
     end
 
-    return unless request.headers['HX-Request'] && params[:status_filter].present?
+    return unless request.headers['HX-Request']
 
     render partial: 'participants_table',
            locals: {
@@ -250,9 +260,11 @@ def profile
     @participant_type = params[:participant_type]
     @participant_id = params[:participant_id]
     @course = Course.find(params[:id])
-
     @grouped = @course.grouped
 
+    @course.projects.includes(project_instances: { enrolment: :user }).load
+    @projects_by_owner = @course.projects.index_by { |p| [p.owner_type, p.owner_id] }
+
     if @participant_type == 'group'
       @group = @course.project_groups.find(@participant_id)
       @members = @group.project_group_members.includes(:user)
@@ -512,6 +524,8 @@ def create_lecturer_enrolments(lecturer_emails, parent_course, unregistered_lect
     end
   end
 
+  # CSV_export helpers
+
   def generate_csv_export
     template_fields = @course.project_template&.project_template_fields&.order(:id) || []
 
@@ -624,6 +638,8 @@ def get_project_details_values(current_instance, template_fields)
     end
   end
 
+  # Lecturer capcity helpers
+
   def lecturer_approved_proposals_count(lecturer, course)
     lecturer_enrolment = course.enrolments.find_by(user: lecturer, role: :lecturer)
     return 0 unless lecturer_enrolment
@@ -653,6 +669,8 @@ def lecturer_capacity_info(lecturer, course)
     }
   end
 
+  # Filter Project by status helpers
+
   def students_by_status(status, student_list, students_with_projects, students_without_projects, course)
     return [] unless student_list.present?
 
@@ -699,18 +717,122 @@ def groups_by_status(status, group_list, course)
     end
   end
 
+  # Participants Table Filters helpers
+
+  def search_groups(group_list, query)
+    downcased_query = query.downcase
+
+    group_list.select do |group|
+      project = participant_project(group, 'ProjectGroup')
+
+      group_name_match = group.group_name.downcase.include?(downcased_query)
+      member_match = group.project_group_members.any? do |member|
+        member.user.username.downcase.include?(downcased_query)
+      end
+      title_match = project&.current_title&.downcase&.include?(downcased_query) || false
+
+      group_name_match || member_match || title_match
+    end
+  end
+
+  def search_students(student_list, query)
+    downcased_query = query.downcase
+
+    student_list.select do |student|
+      project = participant_project(student, 'User')
+
+      name_match  = student.username.downcase.include?(downcased_query)
+      id_match    = student.student_id&.downcase&.include?(downcased_query) || false
+      title_match = project&.current_title&.downcase&.include?(downcased_query) || false
+
+      name_match || id_match || title_match
+    end
+  end
+
+  def sort_descending?
+    params[:sort_dir] == 'desc'
+  end
+
+  def participant_project(item, owner_type)
+    @projects_by_owner[[owner_type, item.id]]
+  end
+
+  def sort_value_for_group(group)
+    project = participant_project(group, 'ProjectGroup')
+    case params[:sort_by]
+    when 'status'
+      Project::STATUS_SORT_ORDER.fetch(project&.current_status || 'not_submitted', 99)
+    when 'project_title'
+      project&.current_title&.downcase || ''
+    when 'supervisor'
+      project&.supervisor&.username&.downcase || ''
+    else
+      group.group_name.downcase
+    end
+  end
+
+  def sort_value_for_student(student)
+    project = participant_project(student, 'User')
+    case params[:sort_by]
+    when 'status'
+      Project::STATUS_SORT_ORDER.fetch(project&.current_status || 'not_submitted', 99)
+    when 'project_title'
+      project&.current_title&.downcase || ''
+    when 'supervisor'
+      project&.supervisor&.username&.downcase || ''
+    else
+      student.username.downcase
+    end
+  end
+
+  def lecturer_enrolment_filter
+    return nil unless params[:lecturer_filter].present? && params[:lecturer_filter] != 'all'
+
+    @course.enrolments.find_by(user_id: params[:lecturer_filter], role: :lecturer)
+  end
+
+  def supervised_owner_ids(owner_type)
+    enrolment = lecturer_enrolment_filter
+    return nil unless enrolment
+
+    @course.projects.supervised_by(enrolment).where(owner_type: owner_type).pluck(:owner_id)
+  end
+
   def filtered_group_list
-    group_list = if params[:status_filter].present? && params[:status_filter] != 'all'
-                   @course.groups_with_status(params[:status_filter], @group_list)
-                 else
-                   @group_list
-                 end
-    group_list.sort_by(&:group_name)
+    group_list = @group_list
+
+    if (ids = supervised_owner_ids('ProjectGroup'))
+      group_list = group_list.select { |g| ids.include?(g.id) }
+    end
+
+    if params[:status_filter].present? && params[:status_filter] != 'all'
+      group_list = @course.groups_with_status(params[:status_filter], group_list)
+    end
+
+    if params[:search_query].present?
+      group_list = search_groups(group_list, params[:search_query])
+    end
+
+    sorted_list = group_list.sort_by { |group| sort_value_for_group(group) }
+    sort_descending? ? sorted_list.reverse : sorted_list
   end
 
   def filtered_student_list
-    return @student_list unless params[:status_filter].present? && params[:status_filter] != 'all'
+    student_list = @student_list
+
+    if (ids = supervised_owner_ids('User'))
+      student_list = student_list.select { |s| ids.include?(s.id) }
+    end
+
+    if params[:status_filter].present? && params[:status_filter] != 'all'
+      student_list = @course.students_with_status(params[:status_filter], student_list)
+    end
+
+    if params[:search_query].present?
+      student_list = search_students(student_list, params[:search_query])
+    end
 
-    @course.students_with_status(params[:status_filter], @student_list)
+    sorted_list = student_list.sort_by { |student| sort_value_for_student(student) }
+    sort_descending? ? sorted_list.reverse : sorted_list
   end
 end
diff --git a/app/controllers/participants_controller.rb b/app/controllers/participants_controller.rb
index 5a4e7fc..4a182f0 100644
--- a/app/controllers/participants_controller.rb
+++ b/app/controllers/participants_controller.rb
@@ -1,36 +1,78 @@
 class ParticipantsController < ApplicationController
   def index
     @course = Course.find(params[:course_id])
+    authorize @course
+
+    # query for all projects_instances, owner_type and owner_id for participants table
+    @course.projects.includes(project_instances: { enrolment: :user }).load
+    @projects_by_owner = @course.projects.index_by { |p| [p.owner_type, p.owner_id]
+
     @student_list = @course.students
-    @group_list = @course.grouped? ? @course.project_groups.to_a : []
+
+    if @course.grouped?
+      @group_list = @course.project_groups.includes(project_group_members: :user).to_a
+    else 
+      @group_list = []
+    end
+
+    projects_ownerships = @course.projects.approved.where(owner_type: 'User').pluck('owner_id')
 
     @filtered_group_list = filtered_group_list
     @filtered_student_list = filtered_student_list
 
-    projects_ownerships = @course.projects.approved
-                                 .where(owner_type: 'User')
-                                 .pluck('owner_id')
+    @students_with_projects = @student_list.select { |s| projects_ownerships.include?(s.id) }
+    @students_without_projects = @student_list.reject { |s| projects_ownerships.include?(s.id) }
 
-    @students_with_projects = @student_list.select do |student|
-      projects_ownerships.include?(student.id)
+    @show_all = params[:show_all] == 'true'
+    @total_count = @course.grouped? ? @filtered_group_list.count : @filtered_student_list.count
+
+    unless @show_all
+      @filtered_group_list = @filtered_group_list.first(Rails.application.config.participants_pagination_threshold)
+      @filtered_student_list = @filtered_student_list.first(Rails.application.config.participants_pagination_threshold)
     end
 
-    @students_without_projects = @student_list.reject do |student|
-      projects_ownerships.include?(student.id)
+    @displayed_count = @course.grouped? ? @filtered_group_list.count : @filtered_student_list.count
     end
   end
 
   private
 
+  def lecturer_enrolment_filter
+    return nil unless params[:lecturer_filter].present? && params[:lecturer_filter] != 'all'
+
+    @course.enrolments.find_by(user_id: params[:lecturer_filter], role: :lecturer)
+  end
+
+  def supervised_owner_ids(owner_type)
+    enrolment = lecturer_enrolment_filter
+    return nil unless enrolment
+
+    @course.projects.supervised_by(enrolment).where(owner_type: owner_type).pluck(:owner_id)
+  end
+
   def filtered_group_list
-    return @group_list unless params[:status_filter].present? && params[:status_filter] != 'all'
+    group_list = @group_list
 
-    @course.groups_with_status(params[:status_filter], @group_list)
+    if (ids = supervised_owner_ids('ProjectGroup'))
+      group_list = group_list.select { |g| ids.include?(g.id) }
+    end
+
+    if params[:status_filter].present? && params[:status_filter] != 'all'
+      group_list = @course.groups_with_status(params[:status_filter], group_list)
+    end
+
+    return group_list.sort_by(&:group_name)
   end
 
   def filtered_student_list
-    return @student_list unless params[:status_filter].present? && params[:status_filter] != 'all'
+    student_list = @student_list
+
+    if (ids = supervised_owner_ids('User'))
+      student_list = student_list.select { |s| ids.include?(s.id) }
+    end
+
+    return student_list unless params[:status_filter].present? && params[:status_filter] != 'all'
 
-    @course.students_with_status(params[:status_filter], @student_list)
+    @course.students_with_status(params[:status_filter], student_list)
   end
 end
diff --git a/app/helpers/courses_helper.rb b/app/helpers/courses_helper.rb
index 991fc8f..600e973 100644
--- a/app/helpers/courses_helper.rb
+++ b/app/helpers/courses_helper.rb
@@ -1,39 +1,25 @@
 module CoursesHelper
-  def group_project_for(group, course)
-    @group_projects_cache ||= {}
-    @group_projects_cache[group.id] ||= course.projects
-                                              .find_by(owner_type: 'ProjectGroup', owner_id: group.id)
+  def group_project_for(group, _course)
+    @projects_by_owner[['ProjectGroup', group.id]]
   end
 
-  def student_project_for(student, course)
-    @student_projects_cache ||= {}
-    @student_projects_cache[student.id] ||= course.projects
-                                                  .find_by(owner_type: 'User', owner_id: student.id)
+  def student_project_for(student, _course)
+    @projects_by_owner[['User', student.id]]
   end
 
   def group_status(group, course)
-    project = group_project_for(group, course)
-    return 'not_submitted' unless project
-
-    project.current_status
+    group_project_for(group, course)&.current_status || 'not_submitted'
   end
 
   def student_status(student, course)
-    project = student_project_for(student, course)
-    return 'not_submitted' unless project
-
-    project.current_status
+    student_project_for(student, course)&.current_status || 'not_submitted'
   end
 
   def participants_exceed?(course)
-    return false unless course.students.present?
-
-    course.students.count > Rails.application.config.participants_threshold
+    course.students.size > Rails.application.config.participants_threshold
   end
 
   def supervisors_exceed?(course)
-    return false unless course.supervisors.present?
-
-    course.supervisors.count > Rails.application.config.supervisors_threshold
+    course.supervisors.size > Rails.application.config.supervisors_threshold
   end
 end
diff --git a/app/models/project.rb b/app/models/project.rb
index 1ab9e0e..053abce 100644
--- a/app/models/project.rb
+++ b/app/models/project.rb
@@ -32,6 +32,8 @@ class Project < ApplicationRecord
 
   before_validation :set_ownership_type
 
+  STATUS_SORT_ORDER = { 'rejected' => 0, 'redo' => 1, 'pending' => 2, 'not_submitted' => 3, 'approved' => 4 }.freeze
+
   def supervisor
     return nil unless enrolment_id.present?
 
diff --git a/app/views/courses/_participants.html.erb b/app/views/courses/_participants.html.erb
index ccbe0cb..324eaa3 100644
--- a/app/views/courses/_participants.html.erb
+++ b/app/views/courses/_participants.html.erb
@@ -6,12 +6,41 @@
       w-full bg-[#f8f9fa] rounded-[10px] p-5 shadow-sm border border-gray-100
     ">
 
-    <%# --- Header & Filter Controls --- %>
+    <%# --- Header, Search Bar and Filters --- %>
     <header
       class="
         mb-5 flex flex-col md:flex-row md:items-center justify-between gap-4
       ">
-      <h4 class="text-xl text-black font-normal m-0">Participants</h4>
+      <div class="flex items-center gap-3 shrink-0">
+        <h4 class="text-xl text-black font-normal m-0">Participants</h4>
+
+        <%# Search Bar %>
+        <% unless participants_exceed?(@course) && !local_assigns[:fullpage] %>
+          <div class="relative flex items-center w-[220px] ">
+            <svg
+              class="absolute left-2.5 w-4 h-4 text-gray-400 pointer-events-none"
+              fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" />
+            </svg>
+            <input
+              type="text"
+              id="search-query"
+              name="search_query"
+              value="<%= params[:search_query] %>"
+              class="
+                bg-white border border-gray-300 text-gray-700 text-sm rounded-lg
+                focus:ring-blue-500 focus:border-blue-500 block w-full pl-8 pr-3 py-2 shadow-sm
+                transition-colors
+              "
+              hx-get="<%= course_url(@course) %>"
+              hx-target="#participants-table-container"
+              hx-trigger="input changed delay:300ms"
+              hx-include="#filter-controls, #search-query"
+              hx-indicator="#loading-spinner">
+          </div>
+        <% end %>
+      </div>
 
       <% if participants_exceed?(@course) && !local_assigns[:fullpage] %>
         <%= link_to "Show all participants",
@@ -22,16 +51,59 @@
         <div
           class="
             flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 w-full md:w-auto
-          ">
+          " id="filter-controls">
+
           <label
-            for="status-filter"
             class="
               text-xs uppercase font-bold text-gray-500 tracking-wider whitespace-nowrap
             ">
-            Filter by Status:
+            Filters:
           </label>
 
           <div class="relative flex items-center justify-center gap-3 w-full sm:w-auto">
+
+            <%# Lecturer Filter %>
+            <div class="relative flex items-center justify-center w-full sm:w-[200px]">
+
+              <select
+                id="lecturer-filter"
+                name="lecturer_filter"
+                class="
+                  bg-white border border-gray-300 text-gray-700 text-sm rounded-lg
+                  focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 pr-8 shadow-sm
+                  transition-colors cursor-pointer appearance-none justify-center items-center
+                "
+                hx-get="<%= course_url(@course) %>"
+                hx-target="#participants-table-container"
+                hx-trigger="change"
+                hx-include="#filter-controls"
+                hx-indicator="#loading-spinner">
+                <option
+                  value="all"
+                  <%= 'selected' if params[:lecturer_filter].blank? || params[:lecturer_filter] == 'all' %>
+                >All Supervisors</option>
+                <% @lecturers.each do |lecturer| %>
+                  <option
+                    value="<%= lecturer.id %>"
+                    <%= 'selected' if params[:lecturer_filter] == lecturer.id.to_s %>
+                  ><%= lecturer.username %></option>
+                <% end %>
+              </select>
+              
+              <div
+                class="
+                  pointer-events-none inset-y-0 right-0 flex justify-start items-center px-2
+                  text-gray-500 -ml-[2em] -mt-[0.5em]
+                ">
+                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M19 9l-7 7-7-7"></path></svg>
+              </div>
+            </div>
+
+            <%# Status Filter %>
             <div class="relative flex items-center justify-center w-full sm:w-[200px]">
               <select
                 id="status-filter"
@@ -44,31 +116,18 @@
                 hx-get="<%= course_url(@course) %>"
                 hx-target="#participants-table-container"
                 hx-trigger="change"
-                hx-include="this"
+                hx-include="#filter-controls"
                 hx-indicator="#loading-spinner">
                 <option
                   value="all"
                   <%= 'selected' if params[:status_filter] == 'all' || params[:status_filter].blank? %>
                 >All Statuses</option>
-                <option
-                  value="approved"
-                  <%= 'selected' if params[:status_filter] == 'approved' %>
-                >Approved</option>
-                <option
-                  value="pending"
-                  <%= 'selected' if params[:status_filter] == 'pending' %>
-                >Pending</option>
-                <option value="redo" <%= 'selected' if params[:status_filter] == 'redo' %>>Redo</option>
-                <option
-                  value="rejected"
-                  <%= 'selected' if params[:status_filter] == 'rejected' %>
-                >Rejected</option>
-                <option
-                  value="not_submitted"
-                  <%= 'selected' if params[:status_filter] == 'not_submitted' %>
-                >Not Submitted</option>
+                <option value="approved"      <%= 'selected' if params[:status_filter] == 'approved' %>>Approved</option>
+                <option value="pending"       <%= 'selected' if params[:status_filter] == 'pending' %>>Pending</option>
+                <option value="redo"          <%= 'selected' if params[:status_filter] == 'redo' %>>Redo</option>
+                <option value="rejected"      <%= 'selected' if params[:status_filter] == 'rejected' %>>Rejected</option>
+                <option value="not_submitted" <%= 'selected' if params[:status_filter] == 'not_submitted' %>>Not Submitted</option>
               </select>
-
               <div
                 class="
                   pointer-events-none inset-y-0 right-0 flex justify-start items-center px-2
@@ -94,20 +153,12 @@
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24">
-                <circle
-                  class="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  stroke-width="4"></circle>
-                <path
-                  class="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
               </svg>
               Loading...
             </div>
+
           </div>
         </div>
       <% end %>
@@ -136,19 +187,19 @@
           <div class="flex flex-col gap-2">
             <div class="flex items-center gap-1">
               <span class="text-gray-700 text-md font-semibold">Total Groups:</span>
-              <%= @filtered_group_list&.count || 0 %>
+              <%= @total_group_count || 0 %>
             </div>
 
             <div class="flex items-center gap-1">
               <span class="text-gray-700 text-md font-semibold">Total Students:</span>
-              <%= @filtered_student_list&.count || 0 %>
+              <%= @total_student_count || 0 %>
             </div>
           </div>
         <% else %>
           <div class="flex items-center gap-1">
             <span class="text-gray-700 text-md font-semibold">Total Students:
             </span>
-            <%= @filtered_student_list&.count || 0 %>
+            <%= @total_student_count || 0 %>
           </div>
         <% end %>
       </div>
diff --git a/app/views/courses/_participants_table.html.erb b/app/views/courses/_participants_table.html.erb
index 4e5baa2..7b6c704 100644
--- a/app/views/courses/_participants_table.html.erb
+++ b/app/views/courses/_participants_table.html.erb
@@ -1,3 +1,41 @@
+<%# sort column helper %>
+<% sort_column = ->(column, label, icon, align: :left, width: nil) do %>
+  <% is_active = params[:sort_by] == column %>
+  <% next_dir = (is_active && params[:sort_dir] == 'asc') ? 'desc' : 'asc' %>
+  <th
+    scope="col"
+    class="
+      <%= width %> px-4 py-3 text-<%= align %> text-xs font-bold text-gray-500 uppercase
+      tracking-wider hover:bg-gray-100 cursor-pointer transition-colors duration-150
+    "
+    hx-get="<%= course_url(@course) %>"
+    hx-target="#participants-table-container"
+    hx-trigger="click"
+    hx-include="#filter-controls, #search-query"
+    hx-vals='{"sort_by": "<%= column %>", "sort_dir": "<%= next_dir %>"}'
+    hx-indicator="#loading-spinner">
+    <div class="flex items-center justify-<%= align %> gap-1">
+      <%= image_tag icon, class: "w-5 h-5 opacity-70" %>
+      <%= label %>
+      <% if is_active %>
+        <% if params[:sort_dir] == 'desc' %>
+          <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19V5M5 12l7-7 7 7" />
+          </svg>
+        <% else %>
+          <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v14M5 12l7 7 7-7" />
+          </svg>
+        <% end %>
+      <% else %>
+        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4" />
+        </svg>
+      <% end %>
+    </div>
+  </th>
+<% end %>
+
 <div class="w-full overflow-hidden rounded-lg border border-gray-200 shadow-sm">
   <div class="overflow-x-auto">
     <table class="min-w-full divide-y divide-gray-200 table-fixed">
@@ -5,68 +43,39 @@
       <%# --- Table Header --- %>
       <thead class="bg-gray-50">
         <tr>
-          <th
-            scope="col"
-            class="
-              px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider
-              <%= @course.grouped? ? 'w-[14.28%]' : 'w-1/3' %>
-            ">
-            <div class="flex items-center justify-start gap-2">
-              <%= image_tag "alphabet.svg", class: "w-5 h-5 opacity-70" %>
-              <%= @course.grouped? ? "Group Name" : "Student Name" %>
-            </div>
-          </th>
-
-          <th
-            scope="col"
-            class="
-              px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider
-              <%= @course.grouped? ? 'w-1/3' : 'w-[14.28%]' %>
-            ">
-            <div class="flex items-center justify-start gap-2">
-              <%= image_tag "person_grey.svg", class: "w-5 h-5 opacity-70" %>
-              <%= @course.grouped? ? "Members" : "Student ID" %>
-            </div>
-          </th>
+
+          <%# 1. Group Name / Student Name %>
+          <% if @course.grouped? %>
+            <% sort_column.call('group_name', 'Group Name', 'alphabet.svg', width: 'w-[14.28%]') %>
+          <% else %>
+            <% sort_column.call('student_name', 'Student Name', 'alphabet.svg', width: 'w-1/3') %>
+          <% end %>
+
+          <%# 2. Members / Student ID %>
+          <% if @course.grouped? %>
+            <th
+              scope="col"
+              class="
+                w-1/3 px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider
+              ">
+              <div class="flex items-center justify-start gap-2">
+                <%= image_tag "person_grey.svg", class: "w-5 h-5 opacity-70" %>
+                Members
+              </div>
+            </th>
+          <% else %>
+            <% sort_column.call('student_id', 'Student ID', 'person_grey.svg', width: 'w-[14.28%]') %>
+          <% end %>
 
           <%# 3. Project Title %>
-          <th
-            scope="col"
-            class="
-              px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider
-              w-1/5
-            ">
-            <div class="flex items-center justify-start gap-2">
-              <%= image_tag "project.svg", class: "w-5 h-5 opacity-70" %>
-              Project Title
-            </div>
-          </th>
+          <% sort_column.call('project_title', 'Project Title', 'project.svg', width: 'w-1/5') %>
 
           <%# 4. Status %>
-          <th
-            scope="col"
-            class="
-              px-4 py-3 text-center text-xs font-bold text-gray-500 uppercase tracking-wider
-              w-1/8
-            ">
-            <div class="flex items-center justify-center gap-2">
-              <%= image_tag "status_grey.svg", class: "w-5 h-5 opacity-70" %>
-              Status
-            </div>
-          </th>
+          <% sort_column.call('status', 'Status', 'status_grey.svg', align: :center, width: 'w-1/8') %>
 
           <%# 5. Supervisor %>
-          <th
-            scope="col"
-            class="
-              px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wider
-              w-1/4
-            ">
-            <div class="flex items-center justify-start gap-2">
-              <%= image_tag "person_grey.svg", class: "w-5 h-5 opacity-70" %>
-              Supervisor
-            </div>
-          </th>
+          <% sort_column.call('supervisor', 'Supervisor', 'person_grey.svg', width: 'w-1/4') %>
+
         </tr>
       </thead>
 
@@ -98,9 +107,8 @@
                 <%# 2. Members List %>
                 <td class="px-4 py-4 text-sm text-gray-500 align-top text-left">
                   <ul class="space-y-2">
-                    <% group.project_group_members.includes(:user).each do |member| %>
+                    <% group.project_group_members.each do |member| %>
                       <li class="block leading-snug">
-
                         <%= link_to participant_profile_course_path(@course, member.user.id, 'student'), class: "inline group/member hover:text-gray-900" do %>
                           <div
                             class="
@@ -113,7 +121,6 @@
                           <span class="text-xs text-gray-700 align-middle group-hover/member:underline"><%= member.user.username || "-" %></span>
                         <% end %>
 
-                        <%# Pending Badge (Inline, flows after name) %>
                         <% unless member.user.has_registered %>
                           <span
                             class="
@@ -152,53 +159,38 @@
                 <%# 4. Status (Group) %>
                 <td class="px-4 py-4 whitespace-nowrap align-top text-center">
                   <div class="flex flex-col items-center gap-1">
-                    <%# --- STATUS BADGE --- %>
                     <% project_status = status.to_s.downcase %>
                     <% badge_classes, dot_class =
                       case project_status
-                      when "approved"
-                        ["bg-emerald-100 text-emerald-800 border-emerald-200", "bg-emerald-600"]
-                      when "pending"
-                        ["bg-blue-100 text-blue-800 border-blue-200", "bg-blue-600"]
-                      when "redo"
-                        ["bg-orange-100 text-orange-800 border-orange-200", "bg-orange-600"]
-                      when "rejected"
-                        ["bg-rose-100 text-rose-800 border-rose-200", "bg-rose-600"]
-                      else
-                        ["bg-gray-100 text-gray-600 border-gray-200", "bg-gray-500"]
+                      when "approved"  then ["bg-emerald-100 text-emerald-800 border-emerald-200", "bg-emerald-600"]
+                      when "pending"   then ["bg-blue-100 text-blue-800 border-blue-200", "bg-blue-600"]
+                      when "redo"      then ["bg-orange-100 text-orange-800 border-orange-200", "bg-orange-600"]
+                      when "rejected"  then ["bg-rose-100 text-rose-800 border-rose-200", "bg-rose-600"]
+                      else                  ["bg-gray-100 text-gray-600 border-gray-200", "bg-gray-500"]
                       end %>
-
-                    <% link_target =
-                      group_project.present? ? course_project_path(@course, group_project) : "#" %>
-
+                    <% link_target = group_project.present? ? course_project_path(@course, group_project) : "#" %>
+                    
                     <a
                       href="<%= link_target %>"
                       class="
                         inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border
                         <%= badge_classes %> capitalize hover:opacity-80
-                      "
-                    >
+                      ">
                       <span class="w-1.5 h-1.5 rounded-full mr-1.5 <%= dot_class %>"></span>
                       <%= status.humanize %>
                     </a>
 
-                    <%# --- PROGRESS INDICATOR (Below Badge) --- %>
                     <% if use_progress_updates && group_project.present? && project_status == "approved" %>
                       <% count = group_project.progress_updates.count %>
                       <span class="text-sm text-gray-600 font-normal flex items-center pt-1 gap-1">
-                        <%= count %>
-                        updates
+                        <%= count %> updates
                       </span>
                     <% end %>
-
                   </div>
                 </td>
 
                 <%# 5. Supervisor %>
-                <td
-                  class="
-                    px-4 py-4 whitespace-nowrap text-sm text-gray-500 align-top text-left
-                  ">
+                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 align-top text-left">
                   <% if supervisor.present? %>
                     <%= link_to course_lecturer_path(@course, supervisor), class: "flex items-center justify-start gap-2 group/sup" do %>
                       <div
@@ -210,9 +202,7 @@
                         <%= supervisor.username.first.upcase %>
                       </div>
                       <span
-                        class="
-                          truncate max-w-[150px] group-hover/sup:text-gray-700
-                        "
+                        class="truncate max-w-[150px] group-hover/sup:text-gray-700"
                         title="<%= supervisor.username %>">
                         <%= supervisor.username %>
                       </span>
@@ -305,53 +295,38 @@
                 <%# 4. Status (Student) %>
                 <td class="px-4 py-3 whitespace-nowrap align-top text-center">
                   <div class="flex flex-col items-center gap-1">
-                    <%# --- STATUS BADGE --- %>
-
                     <% project_status = status.to_s.downcase %>
                     <% badge_classes, dot_class =
                       case project_status
-                      when "approved"
-                        ["bg-emerald-100 text-emerald-800 border-emerald-200", "bg-emerald-600"]
-                      when "pending"
-                        ["bg-blue-100 text-blue-800 border-blue-200", "bg-blue-600"]
-                      when "redo"
-                        ["bg-orange-100 text-orange-800 border-orange-200", "bg-orange-600"]
-                      when "rejected"
-                        ["bg-rose-100 text-rose-800 border-rose-200", "bg-rose-600"]
-                      else
-                        ["bg-gray-100 text-gray-600 border-gray-200", "bg-gray-500"]
+                      when "approved"  then ["bg-emerald-100 text-emerald-800 border-emerald-200", "bg-emerald-600"]
+                      when "pending"   then ["bg-blue-100 text-blue-800 border-blue-200", "bg-blue-600"]
+                      when "redo"      then ["bg-orange-100 text-orange-800 border-orange-200", "bg-orange-600"]
+                      when "rejected"  then ["bg-rose-100 text-rose-800 border-rose-200", "bg-rose-600"]
+                      else                  ["bg-gray-100 text-gray-600 border-gray-200", "bg-gray-500"]
                       end %>
+                    <% link_target = student_project.present? ? course_project_path(@course, student_project) : "#" %>
 
-                    <% link_target =
-                      student_project.present? ? course_project_path(@course, student_project) : "#" %>
-
-                    <a
+                    <a                    
                       href="<%= link_target %>"
                       class="
                         inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border
                         <%= badge_classes %> capitalize hover:opacity-80
-                      "
-                    >
+                      ">
                       <span class="w-1.5 h-1.5 rounded-full mr-1.5 <%= dot_class %>"></span>
                       <%= status.humanize %>
                     </a>
 
-                    <%# --- PROGRESS INDICATOR (Below Badge) --- %>
                     <% if use_progress_updates && student_project.present? && project_status == "approved" %>
                       <% count = student_project.progress_updates.count %>
                       <span class="text-sm text-gray-400 font-medium flex items-center gap-1">
-                        <%= count %>
-                        updates
+                        <%= count %> updates
                       </span>
                     <% end %>
-
                   </div>
                 </td>
+
                 <%# 5. Supervisor %>
-                <td
-                  class="
-                    px-4 py-4 whitespace-nowrap text-sm text-gray-500 align-top text-left
-                  ">
+                <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 align-top text-left">
                   <% if supervisor.present? %>
                     <%= link_to course_lecturer_path(@course, supervisor), class: "flex items-center justify-start gap-2 group/sup" do %>
                       <div
@@ -363,9 +338,7 @@
                         <%= supervisor.username.first.upcase %>
                       </div>
                       <span
-                        class="
-                          truncate max-w-[150px] group-hover/sup:text-gray-700
-                        "
+                        class="truncate max-w-[150px] group-hover/sup:text-gray-700"
                         title="<%= supervisor.username %>">
                         <%= supervisor.username %>
                       </span>
@@ -393,4 +366,32 @@
       </tbody>
     </table>
   </div>
+
+  <%# --- Pagination Bar --- %>
+  <% if @total_count > 0 %>
+    <div class="flex items-center justify-between px-4 py-3 border-t border-gray-200 bg-white rounded-b-lg">
+      <span class="text-sm text-gray-500">
+        Showing <span class="font-semibold text-gray-700"><%= @displayed_count %></span>
+        of <span class="font-semibold text-gray-700"><%= @total_count %></span>
+        <%= @course.grouped? ? 'groups' : 'students' %>
+      </span>
+
+      <% if !@show_all && @total_count > @displayed_count %>
+        <button
+          class="
+            text-sm font-medium text-blue-600 hover:text-blue-800 hover:underline
+            transition-colors cursor-pointer
+          "
+          hx-get="<%= course_url(@course) %>"
+          hx-target="#participants-table-container"
+          hx-trigger="click"
+          hx-include="#filter-controls, #search-query"
+          hx-vals='{"show_all": "true"}'
+          hx-indicator="#loading-spinner">
+          Show all <%= @total_count %>
+        </button>
+      <% end %>
+    </div>
+  <% end %>
 </div>
+
diff --git a/config/application.rb b/config/application.rb
index d115942..ae8f567 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -28,5 +28,6 @@ class Application < Rails::Application
     # view constants thresholds
     config.participants_threshold = 500
     config.supervisors_threshold = 100
+    config.participants_pagination_threshold = 25
   end
 end