diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
index b3131322..85d363dc 100644
--- a/app/javascript/controllers/index.js
+++ b/app/javascript/controllers/index.js
@@ -1,6 +1,9 @@
 import { Application } from "stimulus"
 import { definitionsFromContext } from "stimulus/webpack-helpers"
+import Dropdown from 'stimulus-dropdown'
 
 const application = Application.start()
+application.register('dropdown', Dropdown)
+
 const context = require.context(".", true, /\.js$/)
 application.load(definitionsFromContext(context))
\ No newline at end of file
diff --git a/app/views/content/index.html.erb b/app/views/content/index.html.erb
index a7af251b..b8966217 100644
--- a/app/views/content/index.html.erb
+++ b/app/views/content/index.html.erb
@@ -224,9 +224,9 @@
 
     <div class="relative z-10 bg-white border-b border-gray-200 pb-4">
       <div class="max-w-7xl mx-auto px-4 flex items-center justify-between sm:px-6 lg:px-8">
-        <div class="relative inline-block text-left">
+        <div data-controller="dropdown" class="relative inline-block text-left">
           <div>
-            <button type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900" id="menu-button" aria-expanded="false" aria-haspopup="true">
+            <button data-action="dropdown#toggle click@window->dropdown#hide" type="button" class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900" id="menu-button" aria-expanded="false" aria-haspopup="true">
               Sort
               <!-- Heroicon name: solid/chevron-down -->
               <svg class="flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -245,7 +245,7 @@
               From: "transform opacity-100 scale-100"
               To: "transform opacity-0 scale-95"
           -->
-          <div class="origin-top-left absolute left-0 mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
+          <div data-dropdown-target="menu" class="origin-top-left absolute left-0 mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
             <div class="py-1" role="none">
               <!--
                 Active: "bg-gray-100", Not Active: ""