diff --git a/apps/web/package.json b/apps/web/package.json
index f1ac05c973..d7716777a4 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -115,6 +115,7 @@
     "short-uuid": "^4.2.0",
     "stripe": "^9.16.0",
     "superjson": "1.9.1",
+    "tailwindcss-radix": "^2.6.0",
     "uuid": "^8.3.2",
     "web3": "^1.7.5",
     "zod": "^3.18.0"
diff --git a/packages/config/tailwind-preset.js b/packages/config/tailwind-preset.js
index bdceee0689..8e62c7a63b 100644
--- a/packages/config/tailwind-preset.js
+++ b/packages/config/tailwind-preset.js
@@ -194,6 +194,7 @@ module.exports = {
     require("@tailwindcss/forms"),
     require("@tailwindcss/typography"),
     require("@tailwindcss/line-clamp"),
+    require("tailwindcss-radix")(),
     plugin(({ addVariant }) => {
       addVariant("mac", ".mac &");
       addVariant("windows", ".windows &");
diff --git a/packages/ui/v2/core/Dropdown.tsx b/packages/ui/v2/core/Dropdown.tsx
index dada7c075f..f8b02884cf 100644
--- a/packages/ui/v2/core/Dropdown.tsx
+++ b/packages/ui/v2/core/Dropdown.tsx
@@ -15,7 +15,10 @@ export const DropdownMenuTrigger = forwardRef<HTMLButtonElement, DropdownMenuTri
       {...props}
       className={
         props.asChild
-          ? className
+          ? classNames(
+              className,
+              "radix-state-open:bg-gray-100 radix-state-open:ring-brand-800 radix-state-open:ring-1"
+            )
           : `inline-flex items-center rounded-md bg-transparent px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-1 group-hover:text-black ${className}`
       }
       ref={forwardedRef}