diff --git a/src/frontend/src/primitives/Select.tsx b/src/frontend/src/primitives/Select.tsx
index f84cf7cb..990af07a 100644
--- a/src/frontend/src/primitives/Select.tsx
+++ b/src/frontend/src/primitives/Select.tsx
@@ -42,6 +42,31 @@ const StyledButton = styled(Button, {
       boxShadow: '0 1px 2px rgba(0 0 0 / 0.02)',
     },
   },
+  variants: {
+    variant: {
+      light: {},
+      dark: {
+        backgroundColor: 'primaryDark.100',
+        fontWeight: 'medium !important',
+        color: 'white',
+        '&[data-pressed]': {
+          backgroundColor: 'primaryDark.900',
+          color: 'primaryDark.100',
+        },
+        '&[data-hovered]': {
+          backgroundColor: 'primaryDark.300',
+          color: 'white',
+        },
+        '&[data-selected]': {
+          backgroundColor: 'primaryDark.700 !important',
+          color: 'primaryDark.100 !important',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'light',
+  },
 })
 
 const StyledSelectValue = styled(SelectValue, {
@@ -69,6 +94,7 @@ export const Select = <T extends string | number>({
   items,
   errors,
   placement,
+  variant = 'light',
   ...props
 }: Omit<SelectProps<object>, 'items' | 'label' | 'errors'> & {
   iconComponent?: RemixiconComponentType
@@ -76,12 +102,13 @@ export const Select = <T extends string | number>({
   items: Array<{ value: T; label: ReactNode }>
   errors?: ReactNode
   placement?: Placement
+  variant?: 'light' | 'dark'
 }) => {
   const IconComponent = iconComponent
   return (
     <RACSelect {...props}>
       {label}
-      <StyledButton>
+      <StyledButton variant={variant}>
         {!!IconComponent && (
           <StyledIcon>
             <IconComponent size={18} />
@@ -94,12 +121,15 @@ export const Select = <T extends string | number>({
         />
       </StyledButton>
       <StyledPopover placement={placement}>
-        <Box size="sm" type="popover" variant="control">
+        <Box size="sm" type="popover" variant={variant}>
           <ListBox>
             {items.map((item) => (
               <ListBoxItem
                 className={
-                  menuRecipe({ extraPadding: true, variant: 'light' }).item
+                  menuRecipe({
+                    extraPadding: true,
+                    variant: variant,
+                  }).item
                 }
                 id={item.value}
                 key={item.value}