diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index 1aac1494c8..d0e8628606 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -175,7 +175,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                 <div
                   key={type.id}
                   style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
-                  className="dark:bg-darkgray-100 group relative border-b border-gray-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50 dark:border-gray-700 dark:hover:border-gray-600">
+                  className="dark:bg-darkgray-100 dark:hover:bg-darkgray-200 group relative border-b border-gray-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50 dark:border-gray-700">
                   <FiArrowRight className="absolute right-4 top-4 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
                   {/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
                   <Link
diff --git a/packages/ui/components/badge/Badge.tsx b/packages/ui/components/badge/Badge.tsx
index 837ebb27cb..2eac4f1736 100644
--- a/packages/ui/components/badge/Badge.tsx
+++ b/packages/ui/components/badge/Badge.tsx
@@ -9,7 +9,7 @@ const badgeClassNameByVariant = {
   orange: "bg-orange-100 text-orange-800",
   success: "bg-green-100 text-green-800",
   green: "bg-green-100 text-green-800",
-  gray: "bg-gray-100 text-gray-800 dark:bg-transparent dark:text-darkgray-800 group-hover:bg-gray-200 dark:group-hover:bg-darkgray-200",
+  gray: "bg-gray-100 text-gray-800 dark:bg-darkgray-200 dark:text-darkgray-800 group-hover:bg-gray-200 dark:group-hover:bg-darkgray-300",
   blue: "bg-blue-100 text-blue-800",
   red: "bg-red-100 text-red-800",
   error: "bg-red-100 text-red-800",