diff --git a/app/views/shared/_footer_nav.html.erb b/app/views/shared/_footer_nav.html.erb
index b8de09b3a..81657b689 100644
--- a/app/views/shared/_footer_nav.html.erb
+++ b/app/views/shared/_footer_nav.html.erb
@@ -1,9 +1,10 @@
 <!-- Floating Help Button -->
-<div id="fab-container"
-     class="fixed bottom-6 right-6 z-50 flex flex-col items-end">
+<div class="fixed bottom-6 right-6 z-50 flex flex-col items-end"
+     data-controller="dropdown">
 
   <!-- Hidden menu items -->
   <div id="fab-menu"
+       data-dropdown-target="content"
      class="hidden flex flex-col items-start space-y-2 mb-2 p-4 bg-white border border-gray-300 rounded-lg shadow-md transition-all duration-300">
  
   <%= link_to faqs_path, class: "flex items-center space-x-2 text-gray-800 px-3 py-2 rounded hover:bg-gray-100 w-max" do %>
@@ -33,23 +34,10 @@
   <!-- Main round button -->
   <button id="fab-button"
           type="button"
+          data-action="dropdown#toggle"
+          data-dropdown-payload-param='[{"fab-menu":"hidden"}, {"fab-button":"rotate-45"}]'
           class="bg-primary text-white w-10 h-10 rounded-full shadow-lg flex items-center
                  justify-center text-lg font-bold hover:bg-blue-700 transition">
     ?
   </button>
 </div>
-
-<script>
-    document.addEventListener("turbo:load", () => {
-        const fabButton = document.getElementById("fab-button");
-        const fabMenu = document.getElementById("fab-menu");
-
-        if (!fabButton || !fabMenu) return;
-
-        // Remove any previous event listener to prevent duplicates
-        fabButton.onclick = () => {
-            fabMenu.classList.toggle("hidden");
-            fabButton.classList.toggle("rotate-45");
-        };
-    });
-</script>
diff --git a/app/views/shared/_svg_symbols.html.erb b/app/views/shared/_svg_symbols.html.erb
index 99f9cb55f..7c0318192 100644
--- a/app/views/shared/_svg_symbols.html.erb
+++ b/app/views/shared/_svg_symbols.html.erb
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden">
+<svg xmlns="http://www.w3.org/2000/svg" class="absolute w-0 h-0 overflow-hidden">
   <symbol id="purple-star" viewBox="14 12 72 74">
     <defs>
       <radialGradient id="starGrad" cx="50%" cy="45%" r="55%">
diff --git a/spec/system/footer_help_button_spec.rb b/spec/system/footer_help_button_spec.rb
new file mode 100644
index 000000000..cbbcbb4a7
--- /dev/null
+++ b/spec/system/footer_help_button_spec.rb
@@ -0,0 +1,19 @@
+require "rails_helper"
+
+# The footer's floating help button is driven by the shared `dropdown`
+# controller (no bespoke controller). Clicking it should reveal the help menu
+# and clicking again should hide it.
+RSpec.describe "Footer help button", type: :system do
+  it "toggles the help menu open and closed" do
+    visit faqs_path
+
+    expect(page).to have_css("#fab-menu.hidden", visible: :all)
+
+    find("#fab-button").click
+    expect(page).to have_css("#fab-menu:not(.hidden)")
+    expect(page).to have_link("FAQs")
+
+    find("#fab-button").click
+    expect(page).to have_css("#fab-menu.hidden", visible: :all)
+  end
+end