diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
index 60895852c..bd7a0733d 100644
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
@@ -9,10 +9,10 @@
       "version": "0.1.0",
       "hasInstallScript": true,
       "dependencies": {
-        "@headlessui/react": "^2.0.3",
         "@radix-ui/react-accordion": "^1.2.1",
         "@radix-ui/react-checkbox": "^1.1.1",
         "@radix-ui/react-dialog": "^1.1.2",
+        "@radix-ui/react-dropdown-menu": "^2.1.2",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-separator": "^1.1.0",
@@ -1135,21 +1135,6 @@
         "@floating-ui/utils": "^0.2.8"
       }
     },
-    "node_modules/@floating-ui/react": {
-      "version": "0.26.28",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz",
-      "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/react-dom": "^2.1.2",
-        "@floating-ui/utils": "^0.2.8",
-        "tabbable": "^6.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
     "node_modules/@floating-ui/react-dom": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
@@ -1169,25 +1154,6 @@
       "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
       "license": "MIT"
     },
-    "node_modules/@headlessui/react": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.0.tgz",
-      "integrity": "sha512-RzCEg+LXsuI7mHiSomsu/gBJSjpupm6A1qIZ5sWjd7JhARNlMiSA4kKfJpCKwU9tE+zMRterhhrP74PvfJrpXQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/react": "^0.26.16",
-        "@react-aria/focus": "^3.17.1",
-        "@react-aria/interactions": "^3.21.3",
-        "@tanstack/react-virtual": "^3.8.1"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "react": "^18 || ^19 || ^19.0.0-rc",
-        "react-dom": "^18 || ^19 || ^19.0.0-rc"
-      }
-    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -3151,6 +3117,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.2.tgz",
+      "integrity": "sha512-GVZMR+eqK8/Kes0a36Qrv+i20bAPXSn8rCBTHx30w+3ECnR5o3xixAlqcVaYvLeyKUsm0aqyhWfmUcqufM8nYA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-menu": "2.1.2",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-focus-guards": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
@@ -3232,6 +3227,46 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.2.tgz",
+      "integrity": "sha512-lZ0R4qR2Al6fZ4yCCZzu/ReTFrylHFxIqy7OezIpWF4bL0o9biKo0pFIvkaew3TyZ9Fy5gYVrR5zCGZBVbO1zg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-roving-focus": "1.1.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.6.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
@@ -3350,6 +3385,52 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz",
+      "integrity": "sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-select": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.2.tgz",
@@ -3609,134 +3690,6 @@
       "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==",
       "license": "MIT"
     },
-    "node_modules/@react-aria/focus": {
-      "version": "3.19.0",
-      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.19.0.tgz",
-      "integrity": "sha512-hPF9EXoUQeQl1Y21/rbV2H4FdUR2v+4/I0/vB+8U3bT1CJ+1AFj1hc/rqx2DqEwDlEwOHN+E4+mRahQmlybq0A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/interactions": "^3.22.5",
-        "@react-aria/utils": "^3.26.0",
-        "@react-types/shared": "^3.26.0",
-        "@swc/helpers": "^0.5.0",
-        "clsx": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
-      }
-    },
-    "node_modules/@react-aria/focus/node_modules/@swc/helpers": {
-      "version": "0.5.15",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
-      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.8.0"
-      }
-    },
-    "node_modules/@react-aria/interactions": {
-      "version": "3.22.5",
-      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.22.5.tgz",
-      "integrity": "sha512-kMwiAD9E0TQp+XNnOs13yVJghiy8ET8L0cbkeuTgNI96sOAp/63EJ1FSrDf17iD8sdjt41LafwX/dKXW9nCcLQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/ssr": "^3.9.7",
-        "@react-aria/utils": "^3.26.0",
-        "@react-types/shared": "^3.26.0",
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
-      }
-    },
-    "node_modules/@react-aria/interactions/node_modules/@swc/helpers": {
-      "version": "0.5.15",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
-      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.8.0"
-      }
-    },
-    "node_modules/@react-aria/ssr": {
-      "version": "3.9.7",
-      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.7.tgz",
-      "integrity": "sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      },
-      "engines": {
-        "node": ">= 12"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
-      }
-    },
-    "node_modules/@react-aria/ssr/node_modules/@swc/helpers": {
-      "version": "0.5.15",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
-      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.8.0"
-      }
-    },
-    "node_modules/@react-aria/utils": {
-      "version": "3.26.0",
-      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.26.0.tgz",
-      "integrity": "sha512-LkZouGSjjQ0rEqo4XJosS4L3YC/zzQkfRM3KoqK6fUOmUJ9t0jQ09WjiF+uOoG9u+p30AVg3TrZRUWmoTS+koQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@react-aria/ssr": "^3.9.7",
-        "@react-stately/utils": "^3.10.5",
-        "@react-types/shared": "^3.26.0",
-        "@swc/helpers": "^0.5.0",
-        "clsx": "^2.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
-      }
-    },
-    "node_modules/@react-aria/utils/node_modules/@swc/helpers": {
-      "version": "0.5.15",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
-      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.8.0"
-      }
-    },
-    "node_modules/@react-stately/utils": {
-      "version": "3.10.5",
-      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.5.tgz",
-      "integrity": "sha512-iMQSGcpaecghDIh3mZEpZfoFH3ExBwTtuBEcvZ2XnGzCgQjeYXcMdIUwAfVQLXFTdHUHGF6Gu6/dFrYsCzySBQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
-      }
-    },
-    "node_modules/@react-stately/utils/node_modules/@swc/helpers": {
-      "version": "0.5.15",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
-      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.8.0"
-      }
-    },
-    "node_modules/@react-types/shared": {
-      "version": "3.26.0",
-      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.26.0.tgz",
-      "integrity": "sha512-6FuPqvhmjjlpEDLTiYx29IJCbCNWPlsyO+ZUmCUXzhUv2ttShOXfw8CmeHWHftT/b2KweAWuzqSlfeXPR76jpw==",
-      "license": "Apache-2.0",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
-      }
-    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -6466,33 +6419,6 @@
         "react": "^18 || ^19"
       }
     },
-    "node_modules/@tanstack/react-virtual": {
-      "version": "3.10.9",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.10.9.tgz",
-      "integrity": "sha512-OXO2uBjFqA4Ibr2O3y0YMnkrRWGVNqcvHQXmGvMu6IK8chZl3PrDxFXdGZ2iZkSrKh3/qUYoFqYe+Rx23RoU0g==",
-      "license": "MIT",
-      "dependencies": {
-        "@tanstack/virtual-core": "3.10.9"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/@tanstack/react-virtual/node_modules/@tanstack/virtual-core": {
-      "version": "3.10.9",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.10.9.tgz",
-      "integrity": "sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
@@ -20036,12 +19962,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/tabbable": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
-      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
-      "license": "MIT"
-    },
     "node_modules/tailwind-merge": {
       "version": "2.5.4",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.4.tgz",
diff --git a/dashboard/package.json b/dashboard/package.json
index 796161f29..61d32d65e 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -12,10 +12,10 @@
     "preinstall": "cd ../sdk-js && npm i && npm run build"
   },
   "dependencies": {
-    "@headlessui/react": "^2.0.3",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.1.0",
diff --git a/dashboard/src/app/[tenantId]/(diagram)/wfSpec/[...props]/components/Thread.tsx b/dashboard/src/app/[tenantId]/(diagram)/wfSpec/[...props]/components/Thread.tsx
index be951a33c..0e90d49e6 100644
--- a/dashboard/src/app/[tenantId]/(diagram)/wfSpec/[...props]/components/Thread.tsx
+++ b/dashboard/src/app/[tenantId]/(diagram)/wfSpec/[...props]/components/Thread.tsx
@@ -1,7 +1,6 @@
 'use client'
-import { Disclosure } from '@headlessui/react'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
 import { ThreadSpec } from 'littlehorse-client/proto'
-import { ChevronUpIcon } from 'lucide-react'
 import { FC } from 'react'
 import { Mutations } from './Mutations'
 import { Variables } from './Variables'
@@ -13,20 +12,17 @@ type Props = {
 export const Thread: FC<Props> = ({ name, spec }) => {
   return (
     <div className="mb-4 rounded border-2 border-slate-100 p-2">
-      <Disclosure>
-        {({ open }) => (
-          <>
-            <Disclosure.Button className="flex w-full items-center justify-between">
-              <h2 className="text-xl">Thread: {name}</h2>
-              <ChevronUpIcon className={`${open ? 'rotate-180 transform' : ''} h-6 w-6`} />
-            </Disclosure.Button>
-            <Disclosure.Panel className="flex gap-4">
-              <Variables variableDefs={spec.variableDefs} />
-              <Mutations nodes={spec.nodes} />
-            </Disclosure.Panel>
-          </>
-        )}
-      </Disclosure>
+      <Accordion type="single" collapsible>
+        <AccordionItem value="thread">
+          <AccordionTrigger>
+            <h2 className="text-xl">Thread: {name}</h2>
+          </AccordionTrigger>
+          <AccordionContent className="flex gap-4">
+            <Variables variableDefs={spec.variableDefs} />
+            <Mutations nodes={spec.nodes} />
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
     </div>
   )
 }
diff --git a/dashboard/src/app/[tenantId]/(diagram)/wfSpec/[...props]/components/WfRunsHeader.tsx b/dashboard/src/app/[tenantId]/(diagram)/wfSpec/[...props]/components/WfRunsHeader.tsx
index 1c4eabe56..8347737fa 100644
--- a/dashboard/src/app/[tenantId]/(diagram)/wfSpec/[...props]/components/WfRunsHeader.tsx
+++ b/dashboard/src/app/[tenantId]/(diagram)/wfSpec/[...props]/components/WfRunsHeader.tsx
@@ -1,5 +1,5 @@
 import { TIME_RANGES, TIME_RANGES_NAMES, TimeRange, WF_RUN_STATUSES } from '@/app/constants'
-import { Listbox, ListboxButton, ListboxOptions } from '@headlessui/react'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { LHStatus, WfSpec } from 'littlehorse-client/proto'
 import { ClockIcon } from 'lucide-react'
 import LinkWithTenant from '@/app/[tenantId]/components/LinkWithTenant'
@@ -23,29 +23,21 @@ export const WfRunsHeader: FC<Props> = ({ spec, currentStatus, currentWindow, se
       <h2 className="text-2xl font-bold">WfRun Search</h2>
 
       <div className="flex items-center justify-between gap-4">
-        <Listbox value={currentWindow} onChange={setWindow}>
-          <div className="relative">
-            <ListboxButton className="flex items-center gap-2 rounded-lg border-2 px-2 py-1 text-xs">
+        <Select value={currentWindow.toString()} onValueChange={value => setWindow(parseInt(value) as TimeRange)}>
+          <SelectTrigger className="w-[150px] min-w-fit">
+            <div className="flex items-center gap-2">
               <ClockIcon className="h-5 w-5 fill-none stroke-black" />
-              {currentWindow !== -1 ? `Last ${TIME_RANGES_NAMES[currentWindow]}` : TIME_RANGES_NAMES[currentWindow]}
-            </ListboxButton>
-            <ListboxOptions className="absolute mt-1 w-[120px] rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
-              {TIME_RANGES.map(time => (
-                <Listbox.Option
-                  key={time}
-                  value={time}
-                  className={({ active }) =>
-                    `relative cursor-default select-none py-2 pl-2 pr-4 text-xs ${
-                      active ? 'bg-blue-500 text-white' : 'text-gray-900'
-                    }`
-                  }
-                >
-                  {time !== -1 ? `Last ${TIME_RANGES_NAMES[time]}` : TIME_RANGES_NAMES[time]}
-                </Listbox.Option>
-              ))}
-            </ListboxOptions>
-          </div>
-        </Listbox>
+              <SelectValue>{currentWindow !== -1 ? `Last ${TIME_RANGES_NAMES[currentWindow]}` : TIME_RANGES_NAMES[currentWindow]}</SelectValue>
+            </div>
+          </SelectTrigger>
+          <SelectContent>
+            {TIME_RANGES.map(time => (
+              <SelectItem key={time} value={time.toString()}>
+                {time !== -1 ? `Last ${TIME_RANGES_NAMES[time]}` : TIME_RANGES_NAMES[time]}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
         <div className="flex">
           {['ALL', ...WF_RUN_STATUSES].map(status => (
             <LinkWithTenant
diff --git a/dashboard/src/app/[tenantId]/components/Principal.tsx b/dashboard/src/app/[tenantId]/components/Principal.tsx
index b47f5b20a..434bd47c7 100644
--- a/dashboard/src/app/[tenantId]/components/Principal.tsx
+++ b/dashboard/src/app/[tenantId]/components/Principal.tsx
@@ -1,5 +1,12 @@
 import { useWhoAmI } from '@/contexts/WhoAmIContext'
-import { Menu, Transition } from '@headlessui/react'
+import {
+  DropdownMenu,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+} from '@/components/ui/dropdown-menu'
 import { signOut } from 'next-auth/react'
 import { FC, Fragment } from 'react'
 function classNames(...classes: Array<string | boolean>) {
@@ -9,44 +16,19 @@ function classNames(...classes: Array<string | boolean>) {
 export const Principal: FC = () => {
   const { user } = useWhoAmI()
   return (
-    <Menu as="div" className="relative inline-block text-left">
-      <div>
-        <Menu.Button className="inline-flex w-full justify-center gap-x-1.5 px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm">
-          <div className="relative inline-flex h-8 w-8 items-center justify-center overflow-hidden rounded-full bg-gray-100 dark:bg-gray-600">
-            <span className="font-medium text-gray-600 dark:text-gray-300">{user?.name?.at(0)}</span>
-          </div>
-        </Menu.Button>
-      </div>
-
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-          <div className="py-1">
-            <Menu.Item>
-              {({ active }) => (
-                <button
-                  onClick={() => {
-                    signOut()
-                  }}
-                  className={classNames(
-                    active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-                    'block w-full px-4 py-2 text-left text-sm'
-                  )}
-                >
-                  Sign out
-                </button>
-              )}
-            </Menu.Item>
-          </div>
-        </Menu.Items>
-      </Transition>
-    </Menu>
+    <DropdownMenu>
+      <DropdownMenuTrigger className="inline-flex w-full justify-center gap-x-1.5 px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm">
+        <div className="relative inline-flex h-8 w-8 items-center justify-center overflow-hidden rounded-full bg-gray-100 dark:bg-gray-600">
+          <span className="font-medium text-gray-600 dark:text-gray-300">{user?.name?.at(0)}</span>
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <DropdownMenuLabel>{user?.name}</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={() => signOut()} className="block w-full px-4 py-2 text-left text-sm">
+          Sign out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
diff --git a/dashboard/src/app/[tenantId]/components/TenantSelector.tsx b/dashboard/src/app/[tenantId]/components/TenantSelector.tsx
index 1a18dcae0..196f13a81 100644
--- a/dashboard/src/app/[tenantId]/components/TenantSelector.tsx
+++ b/dashboard/src/app/[tenantId]/components/TenantSelector.tsx
@@ -1,8 +1,14 @@
 'use client'
 import { useWhoAmI } from '@/contexts/WhoAmIContext'
-import { Menu, Transition } from '@headlessui/react'
+import {
+  DropdownMenu,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '@/components/ui/dropdown-menu'
 import { useParams, useRouter } from 'next/navigation'
-import { FC, Fragment } from 'react'
+import { FC } from 'react'
 
 export const TenantSelector: FC = () => {
   const { tenants } = useWhoAmI()
@@ -10,53 +16,37 @@ export const TenantSelector: FC = () => {
   const router = useRouter()
 
   return (
-    <Menu as="div" className="relative inline-block text-left">
-      <div className="">
-        <Menu.Button className="inline-flex w-full items-center justify-center gap-x-1.5 rounded bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            strokeWidth={1.5}
-            stroke="currentColor"
-            className="h-4 w-4 text-blue-500"
+    <DropdownMenu>
+      <DropdownMenuTrigger className="inline-flex w-full items-center justify-center gap-x-1.5 rounded bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="h-4 w-4 text-blue-500"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122"
+          />
+        </svg>
+        {tenantId}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+        <div className="px-2 py-2 text-sm font-bold uppercase">Tenants</div>
+        <DropdownMenuSeparator />
+        {tenants.map(tenant => (
+          <DropdownMenuItem
+            key={tenant}
+            className="block w-full px-4 py-2 text-left text-sm hover:bg-gray-100"
+            onClick={() => router.push(`/${tenant}`)}
           >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122"
-            />
-          </svg>
-          {tenantId}
-        </Menu.Button>
-      </div>
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-          <div className="px-2 py-2 text-sm font-bold uppercase">Tenants</div>
-          {tenants.map(tenant => (
-            <div key={tenant} className="py-1">
-              <Menu.Item>
-                <button
-                  className="block w-full px-4 py-2 text-left text-sm hover:bg-gray-100"
-                  onClick={() => {
-                    router.push(`/${tenant}`)
-                  }}
-                >
-                  {tenant}
-                </button>
-              </Menu.Item>
-            </div>
-          ))}
-        </Menu.Items>
-      </Transition>
-    </Menu>
+            {tenant}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
diff --git a/dashboard/src/app/[tenantId]/components/VersionSelector.tsx b/dashboard/src/app/[tenantId]/components/VersionSelector.tsx
index e58b0d8b0..1e8aad9ea 100644
--- a/dashboard/src/app/[tenantId]/components/VersionSelector.tsx
+++ b/dashboard/src/app/[tenantId]/components/VersionSelector.tsx
@@ -1,7 +1,7 @@
-import { Listbox } from '@headlessui/react'
 import { TagIcon } from 'lucide-react'
 import { FC } from 'react'
 import LinkWithTenant from './LinkWithTenant'
+import { Select, SelectContent, SelectTrigger, SelectValue } from '@/components/ui/select'
 
 type Props = {
   path: string
@@ -12,31 +12,29 @@ type Props = {
 
 export const VersionSelector: FC<Props> = ({ path, currentVersion, versions, loadVersions }) => {
   return (
-    <Listbox>
-      <div className="flex">
-        <Listbox.Label className="block text-sm font-medium leading-6 text-gray-900">Version: </Listbox.Label>
-        <div className="relative">
-          <Listbox.Button onClick={loadVersions} className="ml-2 flex gap-2 rounded border-2 border-slate-100 px-2">
-            <TagIcon className="h-5 w-5" />
-            {currentVersion}
-          </Listbox.Button>
-          <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
-            {[...versions].reverse().map(version => {
-              return (
-                <Listbox.Option
-                  className="relative block cursor-pointer select-none p-2 hover:bg-slate-300"
-                  key={version}
-                  value={version}
-                  as={LinkWithTenant}
-                  href={`${path}/${version}`}
-                >
-                  {version}
-                </Listbox.Option>
-              )
-            })}
-          </Listbox.Options>
-        </div>
-      </div>
-    </Listbox>
+    <div className="flex items-center gap-2">
+      <span className="text-sm font-medium text-gray-900">Version:</span>
+      <Select defaultValue={currentVersion} onOpenChange={loadVersions}>
+        <SelectTrigger className="w-auto">
+          <SelectValue>
+            <div className="flex items-center gap-2">
+              <TagIcon className="h-5 w-5" />
+              {currentVersion}
+            </div>
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          {[...versions].reverse().map(version => (
+            <LinkWithTenant
+              key={version}
+              href={`${path}/${version}`}
+              className="relative block cursor-pointer select-none p-2 hover:bg-slate-300"
+            >
+              {version}
+            </LinkWithTenant>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
   )
 }
diff --git a/dashboard/src/app/[tenantId]/taskDef/[name]/components/TaskDef.tsx b/dashboard/src/app/[tenantId]/taskDef/[name]/components/TaskDef.tsx
index bfbb4df0e..68c8101ed 100644
--- a/dashboard/src/app/[tenantId]/taskDef/[name]/components/TaskDef.tsx
+++ b/dashboard/src/app/[tenantId]/taskDef/[name]/components/TaskDef.tsx
@@ -5,7 +5,8 @@ import { SearchFooter } from '@/app/[tenantId]/components/SearchFooter'
 import { SEARCH_DEFAULT_LIMIT } from '@/app/constants'
 import { concatWfRunIds, localDateTimeToUTCIsoString, utcToLocalDateTime } from '@/app/utils'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { Field, Input, Label } from '@headlessui/react'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { TaskDef as TaskDefProto, TaskStatus } from 'littlehorse-client/proto'
 import { RefreshCwIcon } from 'lucide-react'
@@ -64,25 +65,25 @@ export const TaskDef: FC<Props> = ({ spec }) => {
         </select>
       </div>
       <div className="mb-5 flex max-w-fit items-start justify-between">
-        <Field className="flex items-center justify-between">
-          <Label className="block w-1/2 font-bold">Created after:</Label>
+        <div className="flex items-center justify-between">
+          <Label className="mr-3 font-bold">Created after:</Label>
           <Input
             type="datetime-local"
             value={createdAfter}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCreatedAfter(e.target.value)}
-            className="focus:shadow-outline ml-3 w-full appearance-none rounded border px-3 py-2 leading-tight shadow focus:outline-none"
+            className="w-full"
           />
-        </Field>
+        </div>
 
-        <Field className="ml-10 flex items-center justify-between">
-          <Label className="block w-1/2 font-bold">Created before:</Label>
+        <div className="ml-10 flex items-center justify-between">
+          <Label className="mr-4 font-bold">Created before:</Label>
           <Input
             type="datetime-local"
             value={createdBefore}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCreatedBefore(e.target.value)}
-            className="focus:shadow-outline ml-4 w-full appearance-none rounded border px-3 py-2 leading-tight shadow focus:outline-none"
+            className="w-full"
           />
-        </Field>
+        </div>
       </div>
 
       {isPending ? (
diff --git a/dashboard/src/app/[tenantId]/userTaskDef/[...props]/components/UserTaskDef.tsx b/dashboard/src/app/[tenantId]/userTaskDef/[...props]/components/UserTaskDef.tsx
index 4491acbfd..ade44c9e7 100644
--- a/dashboard/src/app/[tenantId]/userTaskDef/[...props]/components/UserTaskDef.tsx
+++ b/dashboard/src/app/[tenantId]/userTaskDef/[...props]/components/UserTaskDef.tsx
@@ -11,7 +11,9 @@ import LinkWithTenant from '@/app/[tenantId]/components/LinkWithTenant'
 import { SEARCH_DEFAULT_LIMIT } from '@/app/constants'
 import { concatWfRunIds, localDateTimeToUTCIsoString, utcToLocalDateTime } from '@/app/utils'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { Button, Field, Input, Label } from '@headlessui/react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { UserTaskDef as UserTaskDefProto, UserTaskRunStatus } from 'littlehorse-client/proto'
 import { RefreshCwIcon } from 'lucide-react'
@@ -85,7 +87,8 @@ export const UserTaskDef: FC<Props> = ({ spec }) => {
             <Button
               onClick={() => setSelectedStatus(status)}
               key={status}
-              className={`flex items-center border-y-2 border-l-2 p-2 text-xs first-of-type:rounded-l-lg first-of-type:border-l-2 last-of-type:rounded-r-lg last-of-type:border-r-2 ${status === selectedStatus ? 'border-blue-500 bg-blue-500 text-white' : ' text-gray-500'}`}
+              variant={status === selectedStatus ? 'default' : 'outline'}
+              className="rounded-none first:rounded-l-lg last:rounded-r-lg"
             >
               {status}
             </Button>
@@ -93,46 +96,46 @@ export const UserTaskDef: FC<Props> = ({ spec }) => {
         </div>
       </div>
       <div className="mb-5 flex max-w-fit items-start justify-between">
-        <Field className="flex items-center justify-between">
-          <Label className="block w-1/2 font-bold">User Id:</Label>
+        <div className="flex items-center justify-between">
+          <Label className="mr-3 font-bold">User Id:</Label>
           <Input
             type="text"
             value={userId}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setUserId(e.target.value)}
-            className="focus:shadow-outline ml-6 w-full appearance-none rounded border px-3 py-2 leading-tight shadow focus:outline-none"
+            className="w-full"
           />
-        </Field>
+        </div>
 
-        <Field className="ml-16 flex items-center justify-between">
-          <Label className="block w-1/2 font-bold">User Group:</Label>
+        <div className="ml-16 flex items-center justify-between">
+          <Label className="mr-4 font-bold">User Group:</Label>
           <Input
             type="text"
             value={userGroup}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setUserGroup(e.target.value)}
-            className="focus:shadow-outline ml-4 w-full appearance-none rounded border px-3 py-2 leading-tight shadow focus:outline-none"
+            className="w-full"
           />
-        </Field>
+        </div>
       </div>
       <div className="mb-5 flex max-w-fit items-start justify-between">
-        <Field className="flex items-center justify-between">
-          <Label className="block w-1/2 font-bold">Created after:</Label>
+        <div className="flex items-center justify-between">
+          <Label className="mr-3 font-bold">Created after:</Label>
           <Input
             type="datetime-local"
             value={createdAfter}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCreatedAfter(e.target.value)}
-            className="focus:shadow-outline ml-3 w-full appearance-none rounded border px-3 py-2 leading-tight shadow focus:outline-none"
+            className="w-full"
           />
-        </Field>
+        </div>
 
-        <Field className="ml-10 flex items-center justify-between">
-          <Label className="block w-1/2 font-bold">Created before:</Label>
+        <div className="ml-10 flex items-center justify-between">
+          <Label className="mr-4 font-bold">Created before:</Label>
           <Input
             type="datetime-local"
             value={createdBefore}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCreatedBefore(e.target.value)}
-            className="focus:shadow-outline ml-4 w-full appearance-none rounded border px-3 py-2 leading-tight shadow focus:outline-none"
+            className="w-full"
           />
-        </Field>
+        </div>
       </div>
 
       {isPending ? (
diff --git a/dashboard/src/components/ui/accordion.tsx b/dashboard/src/components/ui/accordion.tsx
new file mode 100644
index 000000000..99824cd57
--- /dev/null
+++ b/dashboard/src/components/ui/accordion.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDown } from 'lucide-react'
+
+import { cn } from '@/components/utils'
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
+))
+AccordionItem.displayName = 'AccordionItem'
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/dashboard/src/components/ui/dropdown-menu.tsx b/dashboard/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 000000000..e567e757e
--- /dev/null
+++ b/dashboard/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,181 @@
+'use client'
+
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { Check, ChevronRight, Circle } from 'lucide-react'
+
+import { cn } from '@/components/utils'
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
+}
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/dashboard/tailwind.config.ts b/dashboard/tailwind.config.ts
index 445e1e8b7..ab2df872f 100644
--- a/dashboard/tailwind.config.ts
+++ b/dashboard/tailwind.config.ts
@@ -55,12 +55,20 @@ const config = {
       },
       keyframes: {
         'accordion-down': {
-          from: { height: '0' },
-          to: { height: 'var(--radix-accordion-content-height)' },
+          from: {
+            height: '0',
+          },
+          to: {
+            height: 'var(--radix-accordion-content-height)',
+          },
         },
         'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: '0' },
+          from: {
+            height: 'var(--radix-accordion-content-height)',
+          },
+          to: {
+            height: '0',
+          },
         },
       },
       animation: {