diff --git a/libs/ui-toolkit/src/components/select/select.tsx b/libs/ui-toolkit/src/components/select/select.tsx
index 779f5ccc7..0fcb32c1a 100644
--- a/libs/ui-toolkit/src/components/select/select.tsx
+++ b/libs/ui-toolkit/src/components/select/select.tsx
@@ -2,7 +2,7 @@ import type { SelectHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import classNames from 'classnames';
 import { Icon } from '..';
-import { defaultFormElement } from '../../utils/shared';
+import { defaultSelectElement } from '../../utils/shared';
 
 export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
   hasError?: boolean;
@@ -18,7 +18,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
         ref={ref}
         {...props}
         className={classNames(
-          defaultFormElement(hasError),
+          defaultSelectElement(hasError),
           className,
           'appearance-none rounded-md'
         )}
diff --git a/libs/ui-toolkit/src/utils/shared.ts b/libs/ui-toolkit/src/utils/shared.ts
index 0bfb696e2..c25215e2a 100644
--- a/libs/ui-toolkit/src/utils/shared.ts
+++ b/libs/ui-toolkit/src/utils/shared.ts
@@ -1,10 +1,13 @@
 import classnames from 'classnames';
 
+export const defaultSelectElement = (hasError?: boolean) =>
+  classnames(defaultFormElement(hasError), 'dark:bg-black');
+
 export const defaultFormElement = (hasError?: boolean) =>
   classnames(
     'flex items-center w-full text-sm',
     'p-2 border-2 rounded-none',
-    'bg-transparent ',
+    'bg-transparent',
     'border border-neutral-500 focus:border-black dark:focus:border-white',
     'disabled:opacity-40',
     {