diff --git a/app/assets/stylesheets/shared/dashboard.scss b/app/assets/stylesheets/shared/dashboard.scss
index fc6ff4896c..4f666f8f00 100644
--- a/app/assets/stylesheets/shared/dashboard.scss
+++ b/app/assets/stylesheets/shared/dashboard.scss
@@ -23,10 +23,6 @@
   padding: 8px;
 }
 
-.supervisor-options {
-  min-width: 15rem;
-}
-
 .language-icon {
   cursor: context-menu;
   font-size: 1.5rem;
diff --git a/app/components/dropdown_menu_component.html.erb b/app/components/dropdown_menu_component.html.erb
index d8d3f1a1c2..5b98ed1677 100644
--- a/app/components/dropdown_menu_component.html.erb
+++ b/app/components/dropdown_menu_component.html.erb
@@ -1,12 +1,7 @@
-<div class="dropdown <%= @class %>">
-  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+<div class="dropdown <%= @container_class %>">
+  <button class="btn btn-secondary dropdown-toggle d-flex align-items-center <%= @button_class %>" type="button" data-bs-toggle="dropdown" aria-expanded="false">
     <% if icon? %>
       <%= render_icon %>
-    <% else %>
-      <svg width="5" height="20" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <title><%= @menu_title %></title>
-        <path d="M2.5 0.9375C1.82292 0.9375 1.23698 1.17188 0.742187 1.64063C0.247396 2.10938 -7.68364e-08 2.69531 -1.07571e-07 3.39844C-1.38306e-07 4.10156 0.247396 4.70052 0.742187 5.19531C1.23698 5.6901 1.82292 5.9375 2.5 5.9375C3.17708 5.9375 3.76302 5.6901 4.25781 5.19531C4.7526 4.70052 5 4.10156 5 3.39844C5 2.69531 4.7526 2.10938 4.25781 1.64063C3.76302 1.17188 3.17708 0.9375 2.5 0.9375ZM2.5 7.5C1.82292 7.5 1.23698 7.7474 0.742187 8.24219C0.247395 8.73698 -3.66538e-07 9.32292 -3.96134e-07 10C-4.25731e-07 10.6771 0.247395 11.263 0.742187 11.7578C1.23698 12.2526 1.82292 12.5 2.5 12.5C3.17708 12.5 3.76302 12.2526 4.25781 11.7578C4.7526 11.263 5 10.6771 5 10C5 9.32292 4.7526 8.73698 4.25781 8.24219C3.76302 7.7474 3.17708 7.5 2.5 7.5ZM2.5 14.0625C1.82292 14.0625 1.23698 14.3099 0.742187 14.8047C0.247395 15.2995 -6.53963e-07 15.8984 -6.84698e-07 16.6016C-7.15432e-07 17.3047 0.247395 17.8906 0.742187 18.3594C1.23698 18.8281 1.82292 19.0625 2.5 19.0625C3.17708 19.0625 3.76302 18.8281 4.25781 18.3594C4.7526 17.8906 5 17.3047 5 16.6016C5 15.8984 4.7526 15.2995 4.25781 14.8047C3.76302 14.3099 3.17708 14.0625 2.5 14.0625Z" fill="#5D657B" />
-      </svg>
     <% end %>
     <%= button_label %>
   </button>
diff --git a/app/components/dropdown_menu_component.rb b/app/components/dropdown_menu_component.rb
index cfb4f67927..3aa14cab01 100644
--- a/app/components/dropdown_menu_component.rb
+++ b/app/components/dropdown_menu_component.rb
@@ -3,12 +3,13 @@
 class DropdownMenuComponent < ViewComponent::Base
   renders_one :icon
 
-  def initialize(menu_title:, icon_name: nil, hide_label: false, render_check: true, klass: nil)
+  def initialize(menu_title:, icon_name: nil, hide_label: false, render_check: true, container_klass: nil, button_klass: nil)
     @menu_title = menu_title
     @render_check = render_check
     @hide_label = hide_label
     @icon_name = icon_name
-    @class = klass
+    @container_class = container_klass
+    @button_class = button_klass
   end
 
   def render_icon
@@ -26,6 +27,6 @@ def render?
   end
 
   def button_label
-    content_tag(:span, @menu_title, class: @hide_label ? "sr-only" : nil)
+    content_tag(:span, @menu_title, class: ["mr-5", {"sr-only" => @hide_label}])
   end
 end
diff --git a/app/views/casa_cases/_filter.html.erb b/app/views/casa_cases/_filter.html.erb
index aac24684da..8c0b5c52b2 100644
--- a/app/views/casa_cases/_filter.html.erb
+++ b/app/views/casa_cases/_filter.html.erb
@@ -2,101 +2,74 @@
   <div class="row casa-case-filters">
     <div class="col-sm-12 flex align-items-center">
       <h4 class="pull-left my-1 mr-2">Filter by:</h4>
-      <div class="dropdown pull-left mx-2 my-1">
-        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          Status
-        </button>
-        <div class="dropdown-menu status-options" aria-labelledby="dropdownMenuButton1">
-          <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "status_option_active", "Active", true,
-                              class: "form-check-input",
-                              data: { value: "Active" } %>
-            <%= label_tag "status_option_active", "Active", class: "form-check-label" %>
-          </div>
-          <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "status_option_inactive", "Inactive", false,
-                              class: "form-check-input",
-                              data: { value: "Inactive" } %>
-            <%= label_tag "status_option_inactive", "Inactive", class: "form-check-label" %>
-          </div>
+      <%= render(DropdownMenuComponent.new(menu_title: "Status", container_klass: "pull-left mx-2 my-1 status-options")) do %>
+        <div class="dropdown-item form-check checkbox-style">
+          <%= check_box_tag "status_option_active", "Active", true,
+                            class: "form-check-input",
+                            data: { value: "Active" } %>
+          <%= label_tag "status_option_active", "Active", class: "form-check-label" %>
         </div>
-      </div>
-      <div class="dropdown pull-left mx-2 my-1">
-        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          Assigned to Volunteer
-        </button>
-        <div class="dropdown-menu assigned-to-volunteer-options" aria-labelledby="dropdownMenuButton2">
-          <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "assigned_to_volunteer_option_yes", "Yes", true,
-                              class: "form-check-input",
-                              data: { value: "Yes" } %>
-            <%= label_tag "assigned_to_volunteer_option_yes", "Yes", class: "form-check-label" %>
-          </div>
-          <div class="dropdown-item form-check form-check checkbox-style">
-            <%= check_box_tag "assigned_to_volunteer_option_no", "No", true,
-                              class: "form-check-input",
-                              data: { value: "No" } %>
-            <%= label_tag "assigned_to_volunteer_option_no", "No", class: "form-check-label" %>
-          </div>
+        <div class="dropdown-item form-check checkbox-style">
+          <%= check_box_tag "status_option_inactive", "Inactive", false,
+                            class: "form-check-input",
+                            data: { value: "Inactive" } %>
+          <%= label_tag "status_option_inactive", "Inactive", class: "form-check-label" %>
         </div>
-      </div>
-      <div class="dropdown pull-left mx-2 my-1">
-        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          Assigned to more than 1 Volunteer
-        </button>
-        <div class="dropdown-menu more-than-one-volunteer-options" aria-labelledby="dropdownMenuButton3">
-          <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "more_than_one_volunteer_option_yes", "Yes", true,
-                              class: "form-check-input",
-                              data: { value: "Yes" } %>
-            <%= label_tag "more_than_one_volunteer_option_yes", "Yes", class: "form-check-label" %>
-          </div>
-          <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "more_than_one_volunteer_option_no", "No", true,
-                              class: "form-check-input",
-                              data: { value: "No" } %>
-            <%= label_tag "more_than_one_volunteer_option_no", "No", class: "form-check-label" %>
-          </div>
+      <% end %>
+      <%= render(DropdownMenuComponent.new(menu_title: "Assigned to Volunteer", container_klass: "pull-left mx-2 my-1 assigned-to-volunteer-options")) do %>
+        <div class="dropdown-item form-check checkbox-style">
+          <%= check_box_tag "assigned_to_volunteer_option_yes", "Yes", true,
+                            class: "form-check-input",
+                            data: { value: "Yes" } %>
+          <%= label_tag "assigned_to_volunteer_option_yes", "Yes", class: "form-check-label" %>
         </div>
-      </div>
-      <div class="dropdown pull-left mx-2 my-1">
-        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton4" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          Assigned to Transition Aged Youth
-        </button>
-        <div class="dropdown-menu transition-youth-options" aria-labelledby="dropdownMenuButton4">
-          <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "transition_youth_option_yes", "Yes 🦋", true,
-                              class: "form-check-input",
-                              data: { value: "Yes 🦋" } %>
-            <%= label_tag "transition_youth_option_yes", "Yes", class: "form-check-label" %>
-          </div>
+        <div class="dropdown-item form-check form-check checkbox-style">
+          <%= check_box_tag "assigned_to_volunteer_option_no", "No", true,
+                            class: "form-check-input",
+                            data: { value: "No" } %>
+          <%= label_tag "assigned_to_volunteer_option_no", "No", class: "form-check-label" %>
+        </div>
+      <% end %>
+      <%= render(DropdownMenuComponent.new(menu_title: "Assigned to more than 1 Volunteer", container_klass: "pull-left mx-2 my-1 more-than-one-volunteer-options")) do %>
+        <div class="dropdown-item form-check checkbox-style">
+          <%= check_box_tag "more_than_one_volunteer_option_yes", "Yes", true,
+                            class: "form-check-input",
+                            data: { value: "Yes" } %>
+          <%= label_tag "more_than_one_volunteer_option_yes", "Yes", class: "form-check-label" %>
+        </div>
+        <div class="dropdown-item form-check checkbox-style">
+          <%= check_box_tag "more_than_one_volunteer_option_no", "No", true,
+                            class: "form-check-input",
+                            data: { value: "No" } %>
+          <%= label_tag "more_than_one_volunteer_option_no", "No", class: "form-check-label" %>
+        </div>
+      <% end %>
+      <%= render(DropdownMenuComponent.new(menu_title: "Assigned to Transition Aged Youth", container_klass: "pull-left mx-2 my-1 transition-youth-options")) do %>
+        <div class="dropdown-item form-check checkbox-style">
+          <%= check_box_tag "transition_youth_option_yes", "Yes 🦋", true,
+                            class: "form-check-input",
+                            data: { value: "Yes 🦋" } %>
+          <%= label_tag "transition_youth_option_yes", "Yes", class: "form-check-label" %>
+        </div>
+        <div class="dropdown-item form-check checkbox-style">
+          <%= check_box_tag "transition_youth_option_no", "No", true,
+                            class: "form-check-input",
+                            data: { value: "No 🐛" } %>
+          <%= label_tag "transition_youth_option_no", "No", class: "form-check-label" %>
+        </div>
+      <% end %>
+      <%= render(DropdownMenuComponent.new(menu_title: "Casa Case Prefix", container_klass: "pull-left mx-2 my-1 case-number-prefix-options")) do %>
+        <% ["CINA", "None", "TPR"].each do |option| %>
           <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "transition_youth_option_no", "No", true,
+            <% option_for_name = option.downcase.gsub(/[^a-z]+/, '') -%>
+            <% tag_name = "case_case_prefix_option_#{option_for_name}" -%>
+            <%= check_box_tag tag_name, option, true,
                               class: "form-check-input",
-                              data: { value: "No 🐛" } %>
-            <%= label_tag "transition_youth_option_no", "No", class: "form-check-label" %>
+                              data: { value: option } %>
+            <%= label_tag tag_name, option, class: "form-check-label" %>
           </div>
-        </div>
-      </div>
-      <div class="dropdown pull-left mx-2 my-1">
-        <% unless current_user.volunteer? %>
-          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton5" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Casa Case Prefix
-          </button>
         <% end %>
-        <div class="dropdown-menu case-number-prefix-options" aria-labelledby="dropdownMenuButton5">
-          <% ["CINA", "None", "TPR"].each do |option| %>
-            <div class="dropdown-item form-check checkbox-style">
-              <% option_for_name = option.downcase.gsub(/[^a-z]+/, '') -%>
-              <% tag_name = "case_case_prefix_option_#{option_for_name}" -%>
-              <%= check_box_tag tag_name, option, true,
-                                class: "form-check-input",
-                                data: { value: option } %>
-              <%= label_tag tag_name, option, class: "form-check-label" %>
-            </div>
-          <% end %>
-        </div>
-      </div>
+      <% end %>
     </div>
   </div>
 </div>
diff --git a/app/views/casa_org/_contact_topics.html.erb b/app/views/casa_org/_contact_topics.html.erb
index 747435379f..a25b86b2ea 100644
--- a/app/views/casa_org/_contact_topics.html.erb
+++ b/app/views/casa_org/_contact_topics.html.erb
@@ -37,7 +37,14 @@
                   <%= contact_topic.active ? "Yes" : "No" %>
                 </td>
                 <td>
-                  <%= render(DropdownMenuComponent.new(menu_title: "Actions Menu", hide_label: true)) do %>
+                  <%= render(DropdownMenuComponent.new(menu_title: "Actions Menu", hide_label: true)) do |component| %>
+                    <% component.with_icon do %>
+                      <svg width="5" height="20" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <title><%= "Actions Menu" %></title>
+                        <path d="M2.5 0.9375C1.82292 0.9375 1.23698 1.17188 0.742187 1.64063C0.247396 2.10938 -7.68364e-08 2.69531 -1.07571e-07 3.39844C-1.38306e-07 4.10156 0.247396 4.70052 0.742187 5.19531C1.23698 5.6901 1.82292 5.9375 2.5 5.9375C3.17708 5.9375 3.76302 5.6901 4.25781 5.19531C4.7526 4.70052 5 4.10156 5 3.39844C5 2.69531 4.7526 2.10938 4.25781 1.64063C3.76302 1.17188 3.17708 0.9375 2.5 0.9375ZM2.5 7.5C1.82292 7.5 1.23698 7.7474 0.742187 8.24219C0.247395 8.73698 -3.66538e-07 9.32292 -3.96134e-07 10C-4.25731e-07 10.6771 0.247395 11.263 0.742187 11.7578C1.23698 12.2526 1.82292 12.5 2.5 12.5C3.17708 12.5 3.76302 12.2526 4.25781 11.7578C4.7526 11.263 5 10.6771 5 10C5 9.32292 4.7526 8.73698 4.25781 8.24219C3.76302 7.7474 3.17708 7.5 2.5 7.5ZM2.5 14.0625C1.82292 14.0625 1.23698 14.3099 0.742187 14.8047C0.247395 15.2995 -6.53963e-07 15.8984 -6.84698e-07 16.6016C-7.15432e-07 17.3047 0.247395 17.8906 0.742187 18.3594C1.23698 18.8281 1.82292 19.0625 2.5 19.0625C3.17708 19.0625 3.76302 18.8281 4.25781 18.3594C4.7526 17.8906 5 17.3047 5 16.6016C5 15.8984 4.7526 15.2995 4.25781 14.8047C3.76302 14.3099 3.17708 14.0625 2.5 14.0625Z" fill="#5D657B" />
+                      </svg>
+                    <% end %>
+
                     <li><%= link_to "Edit", edit_contact_topic_path(contact_topic), class: "dropdown-item" %></li>
                     <li><%= render(Modal::OpenLinkComponent.new(text: "Delete", target: id, klass: "dropdown-item")) %></li>
                   <% end %>
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 75ccef2185..84dbe5e50f 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -40,13 +40,8 @@
 
           </div>
 
-          <div class="profile-box ml-15">
-            <button
-              class="dropdown-toggle bg-transparent border-0"
-              type="button"
-              id="profile"
-              data-bs-toggle="dropdown"
-              aria-expanded="false">
+          <%= render(DropdownMenuComponent.new(menu_title: current_user.display_name, hide_label: true, container_klass: "profile-box ml-15", button_klass: "bg-transparent border-0")) do |component| %>
+            <% component.with_icon do %>
               <div class="profile-info">
                 <div class="info">
                   <h6><%= current_user.display_name %>
@@ -57,56 +52,52 @@
                   </div>
                 </div>
               </div>
-              <i class="lni lni-chevron-down"></i>
-            </button>
-            <ul
-              class="dropdown-menu dropdown-menu-end"
-              aria-labelledby="profile">
-              <li>
-                <span>
-                  <strong>Role: <%= current_role %></strong>
-                </span>
-              </li>
-              <li>
-                <span>
-                  <strong> <%= current_user.email %></strong>
-                </span>
-              </li>
-              <li>
-                <%= link_to edit_users_path do %>
-                  <i class="lni lni-pencil"></i>
-                  Edit Profile
-                <% end %>
-              </li>
-              <li>
-                <%= link_to notifications_path do %>
-                  <i class="lni lni-envelope"></i>
-                  Messages
-                <% end %>
-              </li>
-              <% if policy(:application).modify_organization? %>
-                <li>
-                  <%= link_to edit_casa_org_path(current_organization) do %>
-                    <i class="lni lni-cogs mr-10"></i>
-                    Edit Organization
-                  <% end %>
-                </li>
+              <i class="lni lni-chevron-down text-dark"></i>
+            <% end %>
+            <li>
+              <span>
+                <strong>Role: <%= current_role %></strong>
+              </span>
+            </li>
+            <li>
+              <span>
+                <strong> <%= current_user.email %></strong>
+              </span>
+            </li>
+            <li>
+              <%= link_to edit_users_path do %>
+                <i class="lni lni-pencil"></i>
+                Edit Profile
               <% end %>
+            </li>
+            <li>
+              <%= link_to notifications_path do %>
+                <i class="lni lni-envelope"></i>
+                Messages
+              <% end %>
+            </li>
+            <% if policy(:application).modify_organization? %>
               <li>
-                <% help_url = current_user.volunteer? ? help_volunteers_url : help_admins_supervisors_url %>
-                <%= link_to help_url, target: :_blank do %>
-                  <i class="lni lni-question-circle"></i>
-                  Help
-                <% end %>
-              </li>
-              <li>
-                <%= link_to destroy_user_session_path do %>
-                  <i class="lni lni-exit"></i>
-                  Sign Out
+                <%= link_to edit_casa_org_path(current_organization) do %>
+                  <i class="lni lni-cogs mr-10"></i>
+                  Edit Organization
                 <% end %>
               </li>
-            </ul>
-          </div>
+            <% end %>
+            <li>
+              <% help_url = current_user.volunteer? ? help_volunteers_url : help_admins_supervisors_url %>
+              <%= link_to help_url, target: :_blank do %>
+                <i class="lni lni-question-circle"></i>
+                Help
+              <% end %>
+            </li>
+            <li>
+              <%= link_to destroy_user_session_path do %>
+                <i class="lni lni-exit"></i>
+                Sign Out
+              <% end %>
+            </li>
+          <% end %>
         </div>
       </div>
     </div>
diff --git a/app/views/reimbursements/index.html.erb b/app/views/reimbursements/index.html.erb
index 0b584a4755..c8d599f2e0 100644
--- a/app/views/reimbursements/index.html.erb
+++ b/app/views/reimbursements/index.html.erb
@@ -36,9 +36,8 @@
         </select>
       </div>
       <!-- Occurred at filter -->
-      <div class="dropdown pull-left mr-2" data-filter="occurred_at">
-        <%= render partial: "filter_trigger", locals: { title: "Occurred at" } %>
-        <div class="dropdown-menu">
+      <%= render(DropdownMenuComponent.new(menu_title: "Occurred at", container_klass: "pull-left mr-2")) do %>
+        <div data-filter="occurred_at">
           <%= render partial: "occurred_at_filter_input", locals: {
             label: "Starting from",
             name: :occurred_at_starting
@@ -48,7 +47,7 @@
             name: :occurred_at_ending
           } %>
         </div>
-      </div>
+      <% end %>
     </div>
   </div>
 </div>
diff --git a/app/views/supervisors/index.html.erb b/app/views/supervisors/index.html.erb
index e8bcbd6855..64a8f8e2de 100644
--- a/app/views/supervisors/index.html.erb
+++ b/app/views/supervisors/index.html.erb
@@ -9,10 +9,7 @@
     <div class="col-md-6">
       <div class="breadcrumb-wrapper mb-30">
         <span class="ml-5">
-        <div class="dropdown pull-left mx-2 supervisor-filters">
-          <button class="btn-sm main-btn dark-btn dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          <i class="lni lni-funnel mr-10"></i>Filter Status</button>
-          <div class="dropdown-menu status-options" aria-labelledby="dropdownMenuButton">
+          <%= render(DropdownMenuComponent.new(menu_title: "Filter Status", container_klass: "pull-left mx-2 supervisor-filters status-options", button_klass: "btn-sm main-btn dark-btn", icon_name: "funnel")) do %>
             <div class="dropdown-item form-check checkbox-style">
               <%= check_box_tag "status_option_active", "true", true,
                             class: "active form-check-input",
@@ -25,8 +22,7 @@
                             data: { value: "false" } %>
               <%= label_tag "status_option_inactive", "Inactive", class: "form-check-label" %>
             </div>
-          </div>
-        </div>
+          <% end %>
         </span>
         <span class="ml-5">
           <% if policy(Supervisor).create? %>
diff --git a/app/views/volunteers/index.html.erb b/app/views/volunteers/index.html.erb
index b90f53baa8..b505f9ec02 100644
--- a/app/views/volunteers/index.html.erb
+++ b/app/views/volunteers/index.html.erb
@@ -29,89 +29,69 @@
   <div class="row volunteer-filters">
     <div class="col-sm-12 flex align-items-center">
       <h4 class="pull-left my-1 mr-2">Filter by:</h4>
-      <div class="dropdown pull-left mx-2 my-1">
-        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          Supervisor
-        </button>
-        <div class="dropdown-menu supervisor-options">
-          <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "supervisor-option-none", "", true,
-                              class: "form-check-input",
-                              data: { value: "" },
-                              id: "unassigned-vol-filter" %>
-            <%= label_tag "supervisor-option-none", "No supervisor assignment", class: "form-check-label", for: "unassigned-vol-filter" %>
-          </div>
-          <% current_organization.supervisors.where(active: true).each do |supervisor| %>
-            <div class="dropdown-item form-check checkbox-style">
-              <% option_for_name = supervisor.display_name.downcase.gsub(/ /, '_').gsub(/[^a-z_]+/, '') -%>
-              <% tag_name = "supervisor-option-#{option_for_name}" -%>
-              <%= check_box_tag tag_name, supervisor.id,
-                                policy(User).edit_name?(supervisor), # checked?
-                                class: "form-check-input",
-                                data: { value: supervisor.id } %>
-              <%= label_tag tag_name, supervisor.display_name, class: "form-check-label" %>
-            </div>
-          <% end %>
+      <%= render(DropdownMenuComponent.new(menu_title: "Supervisor", container_klass: "pull-left mx-2 my-1 supervisor-options")) do %>
+        <div class="dropdown-item form-check checkbox-style">
+          <%= check_box_tag "supervisor-option-none", "", true,
+                            class: "form-check-input",
+                            data: { value: "" },
+                            id: "unassigned-vol-filter" %>
+          <%= label_tag "supervisor-option-none", "No supervisor assignment", class: "form-check-label", for: "unassigned-vol-filter" %>
         </div>
-      </div>
-      <div class="dropdown pull-left mx-2 my-1">
-        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          Status
-        </button>
-        <div class="dropdown-menu status-options" aria-labelledby="dropdownMenuButton">
-          <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "status_option_active", "true", true,
-                              class: "form-check-input",
-                              data: { value: "true" } %>
-            <%= label_tag "status_option_active", "Active", class: "form-check-label" %>
-          </div>
+        <% current_organization.supervisors.where(active: true).each do |supervisor| %>
           <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "status_option_inactive", "false", false,
+            <% option_for_name = supervisor.display_name.downcase.gsub(/ /, '_').gsub(/[^a-z_]+/, '') -%>
+            <% tag_name = "supervisor-option-#{option_for_name}" -%>
+            <%= check_box_tag tag_name, supervisor.id,
+                              policy(User).edit_name?(supervisor), # checked?
                               class: "form-check-input",
-                              data: { value: "false" } %>
-            <%= label_tag "status_option_inactive", "Inactive", class: "form-check-label" %>
+                              data: { value: supervisor.id } %>
+            <%= label_tag tag_name, supervisor.display_name, class: "form-check-label" %>
           </div>
+        <% end %>
+      <% end %>
+      <%= render(DropdownMenuComponent.new(menu_title: "Status", container_klass: "pull-left mx-2 my-1 status-options")) do %>
+        <div class="dropdown-item form-check checkbox-style">
+          <%= check_box_tag "status_option_active", "true", true,
+                            class: "form-check-input",
+                            data: { value: "true" } %>
+          <%= label_tag "status_option_active", "Active", class: "form-check-label" %>
         </div>
-      </div>
+        <div class="dropdown-item form-check checkbox-style">
+          <%= check_box_tag "status_option_inactive", "false", false,
+                            class: "form-check-input",
+                            data: { value: "false" } %>
+          <%= label_tag "status_option_inactive", "Inactive", class: "form-check-label" %>
+        </div>
+      <% end %>
 
-      <div class="dropdown pull-left mx-2 my-1">
-        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          Assigned to Transition Aged Youth
-        </button>
-        <div class="dropdown-menu transition-youth-options" aria-labelledby="dropdownMenuButton">
-          <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "transition_youth_option_yes", "true", true,
-                              class: "form-check-input",
-                              data: { value: "true" } %>
-            <%= label_tag "transition_youth_option_yes", "Yes", class: "form-check-label" %>
-          </div>
-          <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "transition_youth_option_no", "false", true,
-                              class: "form-check-input",
-                              data: { value: "false" } %>
-            <%= label_tag "transition_youth_option_no", "No", class: "form-check-label" %>
-          </div>
+      <%= render(DropdownMenuComponent.new(menu_title: "Assigned to Transition Aged Youth", container_klass: "pull-left mx-2 my-1 transition-youth-options")) do %>
+        <div class="dropdown-item form-check checkbox-style">
+          <%= check_box_tag "transition_youth_option_yes", "true", true,
+                            class: "form-check-input",
+                            data: { value: "true" } %>
+          <%= label_tag "transition_youth_option_yes", "Yes", class: "form-check-label" %>
         </div>
-      </div>
-      <div class="dropdown pull-left mx-2 my-1">
-        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          Has Extra Languages
-        </button>
-        <div class="dropdown-menu extra-language-options" aria-labelledby="dropdownMenuButton">
-          <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "extra_language_option_yes", "true", true,
-                              class: "form-check-input",
-                              data: { value: "true" } %>
-            <%= label_tag "extra_language_option_yes", "Yes", class: "form-check-label" %>
-          </div>
-          <div class="dropdown-item form-check checkbox-style">
-            <%= check_box_tag "extra_language_option_no", "false", true,
-                              class: "form-check-input",
-                              data: { value: "false" } %>
-            <%= label_tag "extra_language_option_no", "No", class: "form-check-label" %>
-          </div>
+        <div class="dropdown-item form-check checkbox-style">
+          <%= check_box_tag "transition_youth_option_no", "false", true,
+                            class: "form-check-input",
+                            data: { value: "false" } %>
+          <%= label_tag "transition_youth_option_no", "No", class: "form-check-label" %>
         </div>
-      </div>
+      <% end %>
+      <%= render(DropdownMenuComponent.new(menu_title: "Has Extra Languages", container_klass: "pull-left mx-2 my-1 extra-language-options")) do %>
+        <div class="dropdown-item form-check checkbox-style">
+          <%= check_box_tag "extra_language_option_yes", "true", true,
+                            class: "form-check-input",
+                            data: { value: "true" } %>
+          <%= label_tag "extra_language_option_yes", "Yes", class: "form-check-label" %>
+        </div>
+        <div class="dropdown-item form-check checkbox-style">
+          <%= check_box_tag "extra_language_option_no", "false", true,
+                            class: "form-check-input",
+                            data: { value: "false" } %>
+          <%= label_tag "extra_language_option_no", "No", class: "form-check-label" %>
+        </div>
+      <% end %>
     </div>
   </div>
 </div>
diff --git a/spec/components/dropdown_menu_component_spec.rb b/spec/components/dropdown_menu_component_spec.rb
index 64f6ad7636..e0a8252141 100644
--- a/spec/components/dropdown_menu_component_spec.rb
+++ b/spec/components/dropdown_menu_component_spec.rb
@@ -25,8 +25,7 @@
     render_inline(DropdownMenuComponent.new(menu_title: "Example Title")) { "Example Item" }
 
     expect(page).to have_css("div.dropdown")
-    expect(page).to have_css("button.btn.btn-secondary.dropdown-toggle svg")
-    expect(page).to have_css("svg title", text: "Example Title")
+    expect(page).to have_css("button.btn.btn-secondary.dropdown-toggle")
     expect(page).to have_css(".dropdown-menu", text: "Example Item")
   end
 
@@ -37,7 +36,7 @@
   end
 
   it "renders the dropdown menu with additional classes" do
-    render_inline(DropdownMenuComponent.new(menu_title: "Example", klass: "example-class")) { "Example Content" }
+    render_inline(DropdownMenuComponent.new(menu_title: "Example", container_klass: "example-class")) { "Example Content" }
 
     expect(page).to have_css("div.dropdown.example-class")
   end