diff --git a/packages/connect-react/package.json b/packages/connect-react/package.json
index bcd1a8a0d89f4..d7039ff9eeaaa 100644
--- a/packages/connect-react/package.json
+++ b/packages/connect-react/package.json
@@ -6,6 +6,7 @@
     "dist"
   ],
   "type": "module",
+  "main": "./dist/connect-react.umd.js",
   "browser": "./dist/connect-react.umd.js",
   "module": "./dist/connect-react.es.js",
   "types": "./dist/connect-react.umd.d.ts",
diff --git a/packages/connect-react/src/components/ControlApp.tsx b/packages/connect-react/src/components/ControlApp.tsx
index 2c97211dfd320..484a098bbab8d 100644
--- a/packages/connect-react/src/components/ControlApp.tsx
+++ b/packages/connect-react/src/components/ControlApp.tsx
@@ -3,8 +3,14 @@ import { useFrontendClient } from "../hooks/frontend-client-context";
 import { useAccounts } from "../hooks/use-accounts";
 import { useFormFieldContext } from "../hooks/form-field-context";
 import { useFormContext } from "../hooks/form-context";
-import { useCustomize } from "../hooks/customization-context";
-import type { BaseReactSelectProps } from "../hooks/customization-context";
+import {
+  useCustomize,
+  type BaseReactSelectProps,
+} from "../hooks/customization-context";
+import {
+  createBaseSelectStyles,
+  resolveSelectColors,
+} from "../utils/select-styles";
 import { useMemo } from "react";
 import type { CSSProperties } from "react";
 import type { OptionProps } from "react-select";
@@ -49,6 +55,16 @@ export function ControlApp({ app }: ControlAppProps) {
     getProps, select, theme,
   } = useCustomize();
 
+  const {
+    surface,
+    border,
+    text,
+    textStrong,
+    hoverBg,
+    selectedBg,
+    selectedHoverBg,
+  } = resolveSelectColors(theme.colors);
+
   const baseStyles: CSSProperties = {
     color: theme.colors.neutral60,
     gridArea: "control",
@@ -63,15 +79,28 @@ export function ControlApp({ app }: ControlAppProps) {
     gridArea: "control",
   };
 
+  const selectStyles = createBaseSelectStyles<SelectValue>({
+    colors: {
+      surface,
+      border,
+      text,
+      textStrong,
+      hoverBg,
+      selectedBg,
+      selectedHoverBg,
+    },
+    boxShadow: theme.boxShadow,
+  });
+
   const baseSelectProps: BaseReactSelectProps<SelectValue> = {
     components: {
       Option: BaseOption,
     },
     styles: {
-      control: (base) => ({
-        ...base,
+      ...selectStyles,
+      control: (base, state) => ({
+        ...(selectStyles.control?.(base, state) ?? base),
         gridArea: "control",
-        boxShadow: theme.boxShadow.input,
       }),
     },
   };
diff --git a/packages/connect-react/src/components/SelectApp.tsx b/packages/connect-react/src/components/SelectApp.tsx
index d44989e8d2852..1f546a495e981 100644
--- a/packages/connect-react/src/components/SelectApp.tsx
+++ b/packages/connect-react/src/components/SelectApp.tsx
@@ -6,6 +6,14 @@ import type {
   MenuListProps, OptionProps, SingleValueProps,
 } from "react-select";
 import { useApps } from "../hooks/use-apps";
+import {
+  useCustomize,
+  type BaseReactSelectProps,
+} from "../hooks/customization-context";
+import {
+  createBaseSelectStyles,
+  resolveSelectColors,
+} from "../utils/select-styles";
 import type {
   App,
   AppsListRequest,
@@ -62,6 +70,9 @@ export function SelectApp({
     SingleValue,
     MenuList,
   } = components;
+  const {
+    select, theme,
+  } = useCustomize();
   const isLoadingMoreRef = useRef(isLoadingMore);
   isLoadingMoreRef.current = isLoadingMore;
 
@@ -87,6 +98,34 @@ export function SelectApp({
     loadMore,
   ]);
 
+  const {
+    surface,
+    border,
+    text,
+    textStrong,
+    hoverBg,
+    selectedBg,
+    selectedHoverBg,
+    appIconBg,
+  } = resolveSelectColors(theme.colors);
+
+  const baseSelectProps: BaseReactSelectProps<App> = {
+    styles: createBaseSelectStyles<App>({
+      colors: {
+        surface,
+        border,
+        text,
+        textStrong,
+        hoverBg,
+        selectedBg,
+        selectedHoverBg,
+      },
+      boxShadow: theme.boxShadow,
+    }),
+  };
+
+  const selectProps = select.getProps("selectApp", baseSelectProps);
+
   // Memoize custom components to prevent remounting
   const customComponents = useMemo(() => ({
     Option: (optionProps: OptionProps<App>) => (
@@ -100,6 +139,9 @@ export function SelectApp({
             style={{
               height: 24,
               width: 24,
+              backgroundColor: appIconBg,
+              borderRadius: 6,
+              padding: 2,
             }}
             alt={optionProps.data.name}
           />
@@ -121,6 +163,9 @@ export function SelectApp({
             style={{
               height: 24,
               width: 24,
+              backgroundColor: appIconBg,
+              borderRadius: 6,
+              padding: 2,
             }}
             alt={singleValueProps.data.name}
           />
@@ -152,13 +197,18 @@ export function SelectApp({
     Option,
     SingleValue,
     MenuList,
+    appIconBg,
   ]);
   return (
     <Select
       instanceId={instanceId}
       className="react-select-container text-sm"
+      {...selectProps}
       classNamePrefix="react-select"
-      components={customComponents}
+      components={{
+        ...selectProps.components,
+        ...customComponents,
+      }}
       options={apps || []}
       getOptionLabel={(o: App) => o.name || o.nameSlug}
       getOptionValue={(o: App) => o.nameSlug}
@@ -179,6 +229,7 @@ export function SelectApp({
       }
       menuPosition="fixed"
       styles={{
+        ...(selectProps.styles ?? {}),
         menuPortal: (base) => ({
           ...base,
           zIndex: 99999,
diff --git a/packages/connect-react/src/components/SelectComponent.tsx b/packages/connect-react/src/components/SelectComponent.tsx
index 5763d544024b7..41147672ff23c 100644
--- a/packages/connect-react/src/components/SelectComponent.tsx
+++ b/packages/connect-react/src/components/SelectComponent.tsx
@@ -11,6 +11,14 @@ import {
 import Select, { components } from "react-select";
 import type { MenuListProps } from "react-select";
 import { useComponents } from "../hooks/use-components";
+import {
+  useCustomize,
+  type BaseReactSelectProps,
+} from "../hooks/customization-context";
+import {
+  createBaseSelectStyles,
+  resolveSelectColors,
+} from "../utils/select-styles";
 
 type SelectComponentProps = {
   app?: Partial<App> & { nameSlug: string; };
@@ -38,6 +46,20 @@ export function SelectComponent({
   });
 
   const { MenuList } = components;
+  const {
+    select, theme,
+  } = useCustomize();
+
+  const {
+    surface,
+    border,
+    text,
+    textStrong,
+    hoverBg,
+    selectedBg,
+    selectedHoverBg,
+  } = resolveSelectColors(theme.colors);
+
   const isLoadingMoreRef = useRef(isLoadingMore);
   isLoadingMoreRef.current = isLoadingMore;
 
@@ -60,6 +82,23 @@ export function SelectComponent({
     loadMore,
   ]);
 
+  const baseSelectProps: BaseReactSelectProps<Component> = {
+    styles: createBaseSelectStyles<Component>({
+      colors: {
+        surface,
+        border,
+        text,
+        textStrong,
+        hoverBg,
+        selectedBg,
+        selectedHoverBg,
+      },
+      boxShadow: theme.boxShadow,
+    }),
+  };
+
+  const selectProps = select.getProps("selectComponent", baseSelectProps);
+
   // Memoize custom components to prevent remounting
   const customComponents = useMemo(() => ({
     MenuList: (props: MenuListProps<Component>) => (
@@ -89,6 +128,7 @@ export function SelectComponent({
     <Select
       instanceId={instanceId}
       className="react-select-container text-sm"
+      {...selectProps}
       classNamePrefix="react-select"
       options={componentsList}
       getOptionLabel={(o) => o.name || o.key}
@@ -97,7 +137,10 @@ export function SelectComponent({
       onChange={(o) => onChange?.((o as Component) || undefined)}
       onMenuScrollToBottom={handleMenuScrollToBottom}
       isLoading={isLoading}
-      components={customComponents}
+      components={{
+        ...selectProps.components,
+        ...customComponents,
+      }}
       menuPortalTarget={
         typeof document !== "undefined"
           ? document.body
@@ -105,6 +148,7 @@ export function SelectComponent({
       }
       menuPosition="fixed"
       styles={{
+        ...(selectProps.styles ?? {}),
         menuPortal: (base) => ({
           ...base,
           zIndex: 99999,
diff --git a/packages/connect-react/src/hooks/customization-context.tsx b/packages/connect-react/src/hooks/customization-context.tsx
index bd9b377ffa87c..a6f3511f738e7 100644
--- a/packages/connect-react/src/hooks/customization-context.tsx
+++ b/packages/connect-react/src/hooks/customization-context.tsx
@@ -54,6 +54,8 @@ export const defaultComponents = {
 export type ReactSelectComponents = {
   controlAppSelect: typeof ControlApp;
   controlSelect: typeof ControlSelect;
+  selectApp: typeof ControlApp;
+  selectComponent: typeof ControlSelect;
 };
 
 export type CustomComponents<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
diff --git a/packages/connect-react/src/theme.ts b/packages/connect-react/src/theme.ts
index 0c670d8d5516f..70de50177555f 100644
--- a/packages/connect-react/src/theme.ts
+++ b/packages/connect-react/src/theme.ts
@@ -59,6 +59,17 @@ export type Colors = {
   // select.singleValue:color
   neutral80: string;
   neutral90: string;
+
+  // Option state backgrounds (dark mode friendly)
+  // select.option:hover:backgroundColor
+  optionHover?: string;
+  // select.option:selected:backgroundColor
+  optionSelected?: string;
+  // select.option:selected:hover:backgroundColor
+  optionSelectedHover?: string;
+
+  // App icon background color (for visibility in dark mode)
+  appIconBackground?: string;
 };
 
 export type Shadows = {
diff --git a/packages/connect-react/src/utils/select-styles.ts b/packages/connect-react/src/utils/select-styles.ts
new file mode 100644
index 0000000000000..fe32a228a7ef8
--- /dev/null
+++ b/packages/connect-react/src/utils/select-styles.ts
@@ -0,0 +1,109 @@
+import type {
+  CSSObjectWithLabel, GroupBase, StylesConfig,
+} from "react-select";
+import type {
+  Colors, Shadows,
+} from "../theme";
+
+export type SelectColorConfig = {
+  surface: string;
+  border: string;
+  text: string;
+  textStrong: string;
+  hoverBg: string;
+  selectedBg: string;
+  selectedHoverBg: string;
+};
+
+export type SelectStyleConfig = {
+  colors: SelectColorConfig;
+  boxShadow: Shadows;
+};
+
+/**
+ * Resolves theme colors with fallbacks for dark mode styling.
+ * Returns the theme value if defined, otherwise the fallback.
+ */
+export function resolveSelectColors(colors: Partial<Colors>): SelectColorConfig & { appIconBg: string } {
+  const resolve = <K extends keyof Colors>(key: K, fallback: string): string => {
+    const current = colors[key];
+    return current !== undefined
+      ? current
+      : fallback;
+  };
+
+  return {
+    surface: resolve("neutral0", "#18181b"),
+    border: resolve("neutral20", "rgba(255,255,255,0.16)"),
+    text: resolve("neutral80", "#a1a1aa"),
+    textStrong: resolve("neutral90", "#e4e4e7"),
+    hoverBg: resolve("optionHover", "#27272a"),
+    selectedBg: resolve("optionSelected", "rgba(59,130,246,0.2)"),
+    selectedHoverBg: resolve("optionSelectedHover", "rgba(59,130,246,0.35)"),
+    appIconBg: resolve("appIconBackground", "#fff"),
+  };
+}
+
+/**
+ * Creates base styles for react-select components with dark mode support.
+ * Shared across SelectApp, SelectComponent, and ControlApp.
+ */
+export function createBaseSelectStyles<
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>(config: SelectStyleConfig): StylesConfig<Option, IsMulti, Group> {
+  const {
+    colors: {
+      surface,
+      border,
+      text,
+      textStrong,
+      hoverBg,
+      selectedBg,
+      selectedHoverBg,
+    },
+    boxShadow,
+  } = config;
+
+  return {
+    control: (base: CSSObjectWithLabel) => ({
+      ...base,
+      backgroundColor: surface,
+      borderColor: border,
+      color: text,
+      boxShadow: boxShadow.input,
+    }),
+    menu: (base: CSSObjectWithLabel) => ({
+      ...base,
+      backgroundColor: surface,
+      boxShadow: boxShadow.dropdown,
+    }),
+    singleValue: (base: CSSObjectWithLabel) => ({
+      ...base,
+      color: text,
+    }),
+    input: (base: CSSObjectWithLabel) => ({
+      ...base,
+      color: text,
+    }),
+    option: (
+      base: CSSObjectWithLabel,
+      state: { isSelected: boolean; isFocused: boolean },
+    ) => {
+      let bg = surface;
+      if (state.isSelected && state.isFocused) {
+        bg = selectedHoverBg;
+      } else if (state.isSelected) {
+        bg = selectedBg;
+      } else if (state.isFocused) {
+        bg = hoverBg;
+      }
+      return {
+        ...base,
+        backgroundColor: bg,
+        color: textStrong,
+      };
+    },
+  };
+}