diff --git a/apps/landing/src/app/[locale]/(main)/footer.tsx b/apps/landing/src/app/[locale]/(main)/footer.tsx
index 3dd23d74c..af36ea1da 100644
--- a/apps/landing/src/app/[locale]/(main)/footer.tsx
+++ b/apps/landing/src/app/[locale]/(main)/footer.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import languages, { supportedLngs } from "@rallly/languages";
-import { Button } from "@rallly/ui/button";
 import {
   Select,
   SelectContent,
@@ -41,10 +40,8 @@ const LanguageSelect = () => {
         router.replace(`/${newLocale}${newPath}`);
       }}
     >
-      <SelectTrigger asChild>
-        <Button className="w-full">
-          <SelectValue />
-        </Button>
+      <SelectTrigger className="w-full">
+        <SelectValue />
       </SelectTrigger>
       <SelectContent>
         {Object.entries(languages).map(([code, name]) => (
diff --git a/apps/web/src/app/[locale]/(space)/settings/preferences/components/date-time-preferences.tsx b/apps/web/src/app/[locale]/(space)/settings/preferences/components/date-time-preferences.tsx
index 6ee376f69..0eafef9d4 100644
--- a/apps/web/src/app/[locale]/(space)/settings/preferences/components/date-time-preferences.tsx
+++ b/apps/web/src/app/[locale]/(space)/settings/preferences/components/date-time-preferences.tsx
@@ -99,10 +99,8 @@ const DateTimePreferencesForm = () => {
                       field.onChange(Number.parseInt(value));
                     }}
                   >
-                    <SelectTrigger asChild>
-                      <Button>
-                        <SelectValue />
-                      </Button>
+                    <SelectTrigger>
+                      <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
                       {dayjs.weekdays().map((day, index) => (
diff --git a/apps/web/src/components/forms/poll-options-form/month-calendar/time-picker.tsx b/apps/web/src/components/forms/poll-options-form/month-calendar/time-picker.tsx
index 0c6aef305..59f853cc1 100644
--- a/apps/web/src/components/forms/poll-options-form/month-calendar/time-picker.tsx
+++ b/apps/web/src/components/forms/poll-options-form/month-calendar/time-picker.tsx
@@ -1,4 +1,3 @@
-import { Button } from "@rallly/ui/button";
 import {
   Select,
   SelectContent,
@@ -62,10 +61,8 @@ const TimePicker: React.FunctionComponent<TimePickerProps> = ({
       open={open}
       onOpenChange={setOpen}
     >
-      <SelectTrigger asChild>
-        <Button className={className}>
-          <SelectValue placeholder="Select time" />
-        </Button>
+      <SelectTrigger className={className}>
+        <SelectValue placeholder="Select time" />
       </SelectTrigger>
       <SelectContent>
         {open ? (
diff --git a/apps/web/src/components/poll/language-selector.tsx b/apps/web/src/components/poll/language-selector.tsx
index fb3bf66b0..2526fc4c1 100644
--- a/apps/web/src/components/poll/language-selector.tsx
+++ b/apps/web/src/components/poll/language-selector.tsx
@@ -1,5 +1,4 @@
 import languages from "@rallly/languages";
-import { Button } from "@rallly/ui/button";
 import { Icon } from "@rallly/ui/icon";
 import {
   Select,
@@ -17,13 +16,11 @@ export const LanguageSelect: React.FunctionComponent<{
 }> = ({ className, value, onChange }) => {
   return (
     <Select value={value} onValueChange={onChange}>
-      <SelectTrigger asChild className={className}>
-        <Button>
-          <Icon>
-            <LanguagesIcon />
-          </Icon>
-          <SelectValue />
-        </Button>
+      <SelectTrigger className={className}>
+        <Icon>
+          <LanguagesIcon />
+        </Icon>
+        <SelectValue />
       </SelectTrigger>
       <SelectContent>
         {Object.entries(languages).map(([code, name]) => (
diff --git a/apps/web/src/components/poll/mobile-poll.tsx b/apps/web/src/components/poll/mobile-poll.tsx
index 8da5d691a..a7b42cb26 100644
--- a/apps/web/src/components/poll/mobile-poll.tsx
+++ b/apps/web/src/components/poll/mobile-poll.tsx
@@ -81,10 +81,8 @@ const MobilePoll: React.FunctionComponent = () => {
               }}
               disabled={isEditing}
             >
-              <SelectTrigger asChild className="w-full">
-                <Button>
-                  <SelectValue />
-                </Button>
+              <SelectTrigger className="w-full">
+                <SelectValue />
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="all">
diff --git a/packages/ui/src/select.tsx b/packages/ui/src/select.tsx
index 31ffd066b..8a31c0e65 100644
--- a/packages/ui/src/select.tsx
+++ b/packages/ui/src/select.tsx
@@ -4,6 +4,7 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
 import * as React from "react";
 
+import { buttonVariants } from "./button";
 import { Icon } from "./icon";
 import { cn } from "./lib/utils";
 
@@ -12,7 +13,7 @@ const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 
 const SelectValue = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Value>,
+  React.ComponentRef<typeof SelectPrimitive.Value>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>
 >(({ ...props }, ref) => {
   return (
@@ -27,17 +28,21 @@ const SelectValue = React.forwardRef<
 SelectValue.displayName = SelectPrimitive.Value.displayName;
 
 const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger ref={ref} className={cn(className)} {...props}>
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(buttonVariants({ variant: "default" }), className)}
+    {...props}
+  >
     {children}
   </SelectPrimitive.Trigger>
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 >(({ className, children, position = "popper", ...props }, ref) => (
   <SelectPrimitive.Portal>
@@ -66,7 +71,7 @@ const SelectContent = React.forwardRef<
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentRef<typeof SelectPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
@@ -81,7 +86,7 @@ const SelectLabel = React.forwardRef<
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentRef<typeof SelectPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
 >(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Item
@@ -105,7 +110,7 @@ const SelectItem = React.forwardRef<
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentRef<typeof SelectPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator