diff --git a/packages/raystack/components/calendar/calendar.tsx b/packages/raystack/components/calendar/calendar.tsx
index 3fb94e441..0f3096c22 100644
--- a/packages/raystack/components/calendar/calendar.tsx
+++ b/packages/raystack/components/calendar/calendar.tsx
@@ -1,11 +1,6 @@
 'use client';
 
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  ChevronUpIcon
-} from '@radix-ui/react-icons';
+import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
 import { cva, cx } from 'class-variance-authority';
 import { ChangeEvent, ReactNode, useEffect, useState } from 'react';
 import {
@@ -15,7 +10,6 @@ import {
   dateLib
 } from 'react-day-picker';
 
-import { Flex } from '../flex/flex';
 import { IconButton } from '../icon-button';
 import { Select } from '../select';
 import { Skeleton } from '../skeleton';
@@ -82,27 +76,15 @@ function DropDown({
         <Select.Value />
       </Select.Trigger>
       <Select.Content className={styles.dropdownContent}>
-        <Select.ScrollUpButton asChild>
-          <Flex justify='center'>
-            <ChevronUpIcon />
-          </Flex>
-        </Select.ScrollUpButton>
-        <Select.Viewport>
-          {options.map(opt => (
-            <Select.Item
-              value={opt.value.toString()}
-              key={opt.value}
-              disabled={opt.disabled}
-            >
-              {opt.label}
-            </Select.Item>
-          ))}
-        </Select.Viewport>
-        <Select.ScrollDownButton asChild>
-          <Flex justify='center'>
-            <ChevronDownIcon />
-          </Flex>
-        </Select.ScrollDownButton>
+        {options.map(opt => (
+          <Select.Item
+            value={opt.value.toString()}
+            key={opt.value}
+            disabled={opt.disabled}
+          >
+            {opt.label}
+          </Select.Item>
+        ))}
       </Select.Content>
     </Select>
   );
diff --git a/packages/raystack/components/code-block/__tests__/code-block.test.tsx b/packages/raystack/components/code-block/__tests__/code-block.test.tsx
index 6561ad3fa..66d462a04 100644
--- a/packages/raystack/components/code-block/__tests__/code-block.test.tsx
+++ b/packages/raystack/components/code-block/__tests__/code-block.test.tsx
@@ -1,8 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { describe, expect, it, vi } from 'vitest';
-
 import { ComponentProps } from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import { CodeBlock } from '../code-block';
 
 // Mock the clipboard API
@@ -146,13 +145,14 @@ describe('CodeBlock', () => {
     it('updates language when language select is changed', () => {
       const { rerender } = render(<LanguageSelectCodeBlock value='jsx' />);
 
-      expect(screen.getByText('JavaScript')).toBeInTheDocument();
+      const trigger = screen.getByRole('combobox');
+      expect(trigger).toHaveTextContent('JavaScript');
       expect(screen.getByText('function')).toBeInTheDocument();
       expect(screen.queryByText('def')).not.toBeInTheDocument();
 
       rerender(<LanguageSelectCodeBlock value='python' />);
 
-      expect(screen.getByText('Python')).toBeInTheDocument();
+      expect(trigger).toHaveTextContent('Python');
       expect(screen.getByText('def')).toBeInTheDocument();
       expect(screen.queryByText('function')).not.toBeInTheDocument();
     });
diff --git a/packages/raystack/components/filter-chip/__tests__/filter-chip.test.tsx b/packages/raystack/components/filter-chip/__tests__/filter-chip.test.tsx
index 44fd9a801..9fce07bd2 100644
--- a/packages/raystack/components/filter-chip/__tests__/filter-chip.test.tsx
+++ b/packages/raystack/components/filter-chip/__tests__/filter-chip.test.tsx
@@ -82,7 +82,9 @@ describe('FilterChip', () => {
         <FilterChip label='Name' columnType={FilterType.string} />
       );
 
-      const input = container.querySelector('input');
+      const input = container.querySelector(
+        `.${styles.inputFieldWrapper} input`
+      );
       expect(input).toBeInTheDocument();
     });
 
@@ -96,7 +98,9 @@ describe('FilterChip', () => {
         />
       );
 
-      const input = container.querySelector('input') as HTMLInputElement;
+      const input = container.querySelector(
+        `.${styles.inputFieldWrapper} input`
+      ) as HTMLInputElement;
       fireEvent.change(input, { target: { value: 'test value' } });
 
       expect(onValueChange).toHaveBeenCalledWith(
@@ -114,7 +118,9 @@ describe('FilterChip', () => {
         />
       );
 
-      const input = container.querySelector('input');
+      const input = container.querySelector(
+        `.${styles.inputFieldWrapper} input`
+      );
       expect(input).toHaveValue('initial value');
     });
   });
diff --git a/packages/raystack/components/select/__tests__/select.test.tsx b/packages/raystack/components/select/__tests__/select.test.tsx
index c1d9de884..ec423241b 100644
--- a/packages/raystack/components/select/__tests__/select.test.tsx
+++ b/packages/raystack/components/select/__tests__/select.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 import { Select } from '../select';
@@ -10,6 +10,12 @@ Object.defineProperty(Element.prototype, 'scrollIntoView', {
   writable: true
 });
 
+const flushMicrotasks = async () => {
+  await act(async () => {
+    await new Promise(r => setTimeout(r, 0));
+  });
+};
+
 const TRIGGER_TEXT = 'Select a fruit';
 const FRUIT_OPTIONS = [
   { value: 'apple', label: 'Apple' },
@@ -37,8 +43,11 @@ const BasicSelect = ({ ...props }: SelectRootProps) => {
     </Select>
   );
 };
-const renderAndOpenSelect = async (Select: any) => {
-  await fireEvent.click(render(Select).getByRole('combobox'));
+
+const openSelect = async () => {
+  const trigger = screen.getByRole('combobox');
+  fireEvent.click(trigger);
+  await flushMicrotasks();
 };
 
 describe('Select', () => {
@@ -63,63 +72,63 @@ describe('Select', () => {
       expect(trigger).toHaveClass('custom-trigger');
     });
 
-    it('does not show content initially', () => {
-      render(<BasicSelect />);
-      FRUIT_OPTIONS.forEach(option => {
-        expect(screen.queryByText(option.label)).not.toBeInTheDocument();
-      });
-    });
-
     it('shows content when trigger is clicked', async () => {
-      await renderAndOpenSelect(<BasicSelect />);
+      render(<BasicSelect />);
+      await openSelect();
 
       expect(screen.getByRole('listbox')).toBeInTheDocument();
       FRUIT_OPTIONS.forEach(option => {
         expect(screen.getByText(option.label)).toBeInTheDocument();
       });
     });
-
-    it('renders in portal', async () => {
-      await renderAndOpenSelect(<BasicSelect />);
-
-      const content = screen.getByRole('listbox');
-      expect(content.closest('body')).toBe(document.body);
-    });
   });
 
   describe('Single Selection', () => {
-    it('displays selected value', () => {
+    it('displays selected value in trigger', async () => {
       render(<BasicSelect defaultValue='apple' />);
-      expect(screen.getByText('Apple')).toBeInTheDocument();
+      await flushMicrotasks();
+
+      const trigger = screen.getByRole('combobox');
+      expect(trigger).toHaveTextContent('Apple');
     });
 
-    it('works as controlled component', () => {
+    it('works as controlled component', async () => {
       const handleValueChange = vi.fn();
       render(<BasicSelect value='apple' onValueChange={handleValueChange} />);
-      expect(screen.getByText('Apple')).toBeInTheDocument();
+      await flushMicrotasks();
+
+      const trigger = screen.getByRole('combobox');
+      expect(trigger).toHaveTextContent('Apple');
     });
 
     it('selects option when clicked', async () => {
       const handleValueChange = vi.fn();
-      renderAndOpenSelect(
+      render(
         <BasicSelect defaultValue='apple' onValueChange={handleValueChange} />
       );
+      await openSelect();
 
-      const options = await screen.findAllByRole('option');
-      fireEvent.click(options[1]);
+      const options = screen.getAllByRole('option');
+      await act(async () => {
+        await userEvent.click(options[1]);
+      });
+      await flushMicrotasks();
 
       expect(handleValueChange).toHaveBeenCalledWith('banana');
       expect(handleValueChange).toHaveBeenCalledTimes(1);
-      expect(screen.getByText('Banana')).toBeInTheDocument();
     });
 
     it('closes content after selection', async () => {
-      renderAndOpenSelect(<BasicSelect />);
+      render(<BasicSelect />);
+      await openSelect();
 
       expect(screen.getByRole('listbox')).toBeInTheDocument();
 
-      const options = await screen.findAllByRole('option');
-      fireEvent.click(options[1]);
+      const options = screen.getAllByRole('option');
+      await act(async () => {
+        await userEvent.click(options[1]);
+      });
+      await flushMicrotasks();
 
       expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
     });
@@ -128,15 +137,21 @@ describe('Select', () => {
   describe('Multiple Selection', () => {
     it('supports multiple selection', async () => {
       const handleValueChange = vi.fn();
-      renderAndOpenSelect(
-        <BasicSelect multiple onValueChange={handleValueChange} />
-      );
-      const options = await screen.findAllByRole('option');
+      render(<BasicSelect multiple onValueChange={handleValueChange} />);
+      await openSelect();
+
+      const options = screen.getAllByRole('option');
 
-      fireEvent.click(options[1]);
+      await act(async () => {
+        await userEvent.click(options[1]);
+      });
+      await flushMicrotasks();
       expect(handleValueChange).toHaveBeenCalledWith(['banana']);
 
-      fireEvent.click(options[4]);
+      await act(async () => {
+        await userEvent.click(options[4]);
+      });
+      await flushMicrotasks();
       expect(handleValueChange).toHaveBeenCalledWith(['banana', 'pineapple']);
 
       expect(options[1]).toHaveAttribute('aria-selected', 'true');
@@ -145,15 +160,21 @@ describe('Select', () => {
 
     it('allows deselecting items in multiple mode', async () => {
       const handleValueChange = vi.fn();
-      renderAndOpenSelect(
-        <BasicSelect multiple onValueChange={handleValueChange} />
-      );
-      const options = await screen.findAllByRole('option');
+      render(<BasicSelect multiple onValueChange={handleValueChange} />);
+      await openSelect();
 
-      fireEvent.click(options[1]);
+      const options = screen.getAllByRole('option');
+
+      await act(async () => {
+        await userEvent.click(options[1]);
+      });
+      await flushMicrotasks();
       expect(handleValueChange).toHaveBeenCalledWith(['banana']);
 
-      fireEvent.click(options[1]);
+      await act(async () => {
+        await userEvent.click(options[1]);
+      });
+      await flushMicrotasks();
       expect(handleValueChange).toHaveBeenCalledWith([]);
     });
   });
@@ -183,7 +204,8 @@ describe('Select', () => {
 
     it('closes with Escape key', async () => {
       const user = userEvent.setup();
-      renderAndOpenSelect(<BasicSelect />);
+      render(<BasicSelect />);
+      await openSelect();
 
       await user.keyboard('{Escape}');
 
@@ -193,54 +215,64 @@ describe('Select', () => {
     it('selects option with Enter key', async () => {
       const user = userEvent.setup();
       const handleValueChange = vi.fn();
-      renderAndOpenSelect(
+      render(
         <BasicSelect defaultValue='apple' onValueChange={handleValueChange} />
       );
+      await openSelect();
 
-      const options = await screen.findAllByRole('option');
-      options[1].focus();
+      const options = screen.getAllByRole('option');
+      await act(() => options[1].focus());
       await user.keyboard('{Enter}');
+      await flushMicrotasks();
 
       expect(handleValueChange).toHaveBeenCalledWith('banana');
       expect(handleValueChange).toHaveBeenCalledTimes(1);
-      expect(screen.getByText('Banana')).toBeInTheDocument();
     });
 
     it('navigates options with arrow keys', async () => {
       const user = userEvent.setup();
-      renderAndOpenSelect(<BasicSelect defaultValue='apple' />);
+      const handleValueChange = vi.fn();
+      render(
+        <BasicSelect defaultValue='apple' onValueChange={handleValueChange} />
+      );
+      await openSelect();
 
       await user.keyboard('{ArrowDown}{ArrowDown}{Enter}');
+      await flushMicrotasks();
 
-      expect(screen.getByText('Blueberry')).toBeInTheDocument();
+      expect(handleValueChange).toHaveBeenCalledWith('blueberry');
     });
   });
 
   describe('Autocomplete Mode', () => {
     it('renders search input in autocomplete mode', async () => {
-      renderAndOpenSelect(<BasicSelect autocomplete />);
+      render(<BasicSelect autocomplete />);
 
-      expect(screen.getByRole('dialog')).toBeInTheDocument();
-      expect(screen.getByRole('combobox')).toBeInTheDocument();
-      expect(screen.getByRole('combobox')).toHaveAttribute(
-        'placeholder',
-        'Search...'
-      );
+      const trigger = screen.getByLabelText('Select option');
+      fireEvent.click(trigger);
+      await flushMicrotasks();
+
+      expect(screen.getByRole('listbox')).toBeInTheDocument();
+      const searchInput = screen.getByPlaceholderText('Search...');
+      expect(searchInput).toBeInTheDocument();
     });
-  });
 
-  it('filters options based on search', async () => {
-    const user = userEvent.setup();
-    renderAndOpenSelect(<BasicSelect autocomplete />);
+    it('filters options based on search', async () => {
+      const user = userEvent.setup();
+      render(<BasicSelect autocomplete />);
 
-    expect(screen.getByRole('dialog')).toBeInTheDocument();
+      const trigger = screen.getByLabelText('Select option');
+      fireEvent.click(trigger);
+      await flushMicrotasks();
 
-    const searchInput = screen.getByPlaceholderText('Search...');
-    await user.type(searchInput, 'app');
+      const searchInput = screen.getByPlaceholderText('Search...');
+      await user.type(searchInput, 'app');
+      await flushMicrotasks();
 
-    const options = await screen.findAllByRole('option');
-    expect(options.length).toBe(2);
-    expect(options[0].textContent).toBe('Apple');
-    expect(options[1].textContent).toBe('Pineapple');
+      const options = screen.getAllByRole('option');
+      expect(options.length).toBe(2);
+      expect(options[0]).toHaveTextContent('Apple');
+      expect(options[1]).toHaveTextContent('Pineapple');
+    });
   });
 });
diff --git a/packages/raystack/components/select/select-content.tsx b/packages/raystack/components/select/select-content.tsx
index e01815b79..51645699b 100644
--- a/packages/raystack/components/select/select-content.tsx
+++ b/packages/raystack/components/select/select-content.tsx
@@ -1,106 +1,82 @@
 'use client';
 
-import { Combobox, ComboboxList } from '@ariakit/react';
+import {
+  Combobox as ComboboxPrimitive,
+  Select as SelectPrimitive
+} from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { Select as SelectPrimitive, Slot } from 'radix-ui';
-import { ElementRef, forwardRef, useCallback } from 'react';
-import { useSelectContext } from './select-root';
+import { forwardRef, ReactNode } from 'react';
 import styles from './select.module.css';
+import { useSelectContext } from './select-root';
 
-export interface SelectContentProps extends SelectPrimitive.SelectContentProps {
+export interface SelectContentProps {
+  className?: string;
+  children?: ReactNode;
   searchPlaceholder?: string;
+  sideOffset?: number;
+  style?: React.CSSProperties;
 }
 
-export const SelectContent = forwardRef<
-  ElementRef<typeof SelectPrimitive.Content>,
-  SelectContentProps
->(
+export const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
   (
     {
       className,
       children,
-      position = 'popper',
       searchPlaceholder = 'Search...',
       sideOffset = 4,
-      asChild,
-      onEscapeKeyDown: providedOnEscapeKeyDown,
-      onPointerDownOutside: providedOnPointerDownOutside,
       ...props
     },
     ref
   ) => {
-    const { autocomplete, multiple, updateSelectionInProgress } =
-      useSelectContext();
-
-    const onPointerDownOutside = useCallback<
-      NonNullable<SelectContentProps['onPointerDownOutside']>
-    >(
-      event => {
-        updateSelectionInProgress(false);
-        providedOnPointerDownOutside?.(event);
-      },
-      [updateSelectionInProgress, providedOnPointerDownOutside]
-    );
+    const { autocomplete, multiple } = useSelectContext();
 
-    const onEscapeKeyDown = useCallback<
-      NonNullable<SelectContentProps['onEscapeKeyDown']>
-    >(
-      event => {
-        updateSelectionInProgress(false);
-        providedOnEscapeKeyDown?.(event);
-      },
-      [updateSelectionInProgress, providedOnEscapeKeyDown]
-    );
+    if (autocomplete) {
+      return (
+        <ComboboxPrimitive.Portal>
+          <ComboboxPrimitive.Positioner
+            sideOffset={sideOffset}
+            className={styles.positioner}
+          >
+            <ComboboxPrimitive.Popup
+              ref={ref}
+              className={cx(styles.content, className)}
+              data-multiselectable={multiple ? true : undefined}
+              {...props}
+            >
+              <ComboboxPrimitive.Input
+                placeholder={searchPlaceholder}
+                className={styles.comboboxInput}
+              />
+              <ComboboxPrimitive.List
+                className={styles.comboboxContent}
+                aria-multiselectable={multiple ? true : undefined}
+              >
+                {children}
+              </ComboboxPrimitive.List>
+            </ComboboxPrimitive.Popup>
+          </ComboboxPrimitive.Positioner>
+        </ComboboxPrimitive.Portal>
+      );
+    }
 
     return (
-      <SelectPrimitive.Portal>
-        <SelectPrimitive.Content
+      <SelectPrimitive.Positioner
+        sideOffset={sideOffset}
+        className={styles.positioner}
+        alignItemWithTrigger={false}
+      >
+        <SelectPrimitive.Popup
           ref={ref}
-          position={position}
-          sideOffset={sideOffset}
           className={cx(styles.content, className)}
-          onEscapeKeyDown={multiple ? onEscapeKeyDown : providedOnEscapeKeyDown}
-          onPointerDownOutside={
-            multiple ? onPointerDownOutside : providedOnPointerDownOutside
-          }
-          role={autocomplete ? 'dialog' : 'listbox'}
-          aria-multiselectable={!autocomplete && multiple ? true : undefined}
           data-multiselectable={multiple ? true : undefined}
           {...props}
         >
-          <SelectPrimitive.Viewport
-            className={cx(
-              styles.viewport,
-              autocomplete && styles.comboboxViewport
-            )}
-            asChild={!autocomplete ? asChild : undefined}
-          >
-            {autocomplete ? (
-              <>
-                <Combobox
-                  autoSelect
-                  placeholder={searchPlaceholder}
-                  className={styles.comboboxInput}
-                  onBlurCapture={event => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                  }}
-                />
-                <ComboboxList
-                  className={styles.comboboxContent}
-                  aria-multiselectable={multiple ? true : undefined}
-                  render={asChild ? <Slot.Root /> : undefined}
-                >
-                  {children}
-                </ComboboxList>
-              </>
-            ) : (
-              children
-            )}
-          </SelectPrimitive.Viewport>
-        </SelectPrimitive.Content>
-      </SelectPrimitive.Portal>
+          <SelectPrimitive.List className={styles.viewport}>
+            {children}
+          </SelectPrimitive.List>
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
     );
   }
 );
-SelectContent.displayName = SelectPrimitive.Content.displayName;
+SelectContent.displayName = 'Select.Content';
diff --git a/packages/raystack/components/select/select-item.tsx b/packages/raystack/components/select/select-item.tsx
index 6676b655a..b0d12629a 100644
--- a/packages/raystack/components/select/select-item.tsx
+++ b/packages/raystack/components/select/select-item.tsx
@@ -1,21 +1,26 @@
 'use client';
 
-import { ComboboxItem } from '@ariakit/react';
+import {
+  Combobox as ComboboxPrimitive,
+  Select as SelectPrimitive
+} from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { Select as SelectPrimitive } from 'radix-ui';
-import { ElementRef, forwardRef, useLayoutEffect } from 'react';
+import { forwardRef, ReactNode, useLayoutEffect } from 'react';
 import { Checkbox } from '../checkbox';
 import { getMatch } from '../menu/utils';
 import { Text } from '../text';
 import styles from './select.module.css';
 import { useSelectContext } from './select-root';
 
-export const SelectItem = forwardRef<
-  ElementRef<typeof SelectPrimitive.Item>,
-  Omit<SelectPrimitive.SelectItemProps, 'asChild'> & {
-    leadingIcon?: React.ReactNode;
-  }
->(
+export interface SelectItemProps {
+  className?: string;
+  children?: ReactNode;
+  value: string;
+  leadingIcon?: ReactNode;
+  disabled?: boolean;
+}
+
+export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
   (
     {
       className,
@@ -35,6 +40,7 @@ export const SelectItem = forwardRef<
       searchValue,
       value: selectValue,
       shouldFilter,
+      hasItems,
       multiple
     } = useSelectContext();
 
@@ -42,7 +48,7 @@ export const SelectItem = forwardRef<
       ? selectValue?.includes(value)
       : value === selectValue;
     const isMatched = getMatch(value, children, searchValue);
-    const isHidden = shouldFilter && isSelected && !isMatched;
+    const isHidden = shouldFilter && !hasItems && isSelected && !isMatched;
 
     const element =
       typeof children === 'string' ? (
@@ -61,42 +67,30 @@ export const SelectItem = forwardRef<
       };
     }, [value, children, registerItem, unregisterItem, leadingIcon]);
 
-    if (shouldFilter && !isMatched && !isSelected) {
-      // Not selected and doesn't match search, so don't render at all
+    if (shouldFilter && !hasItems && !isMatched && !isSelected) {
       return null;
     }
 
+    const ItemPrimitive = autocomplete
+      ? ComboboxPrimitive.Item
+      : SelectPrimitive.Item;
+
     return (
-      <SelectPrimitive.Item
+      <ItemPrimitive
         ref={ref}
         value={value}
         className={cx(styles.menuitem, className, isHidden && styles.hidden)}
-        data-hidden={isHidden}
+        data-hidden={isHidden || undefined}
         disabled={disabled || isHidden}
-        asChild={autocomplete}
-        aria-selected={isSelected}
-        data-checked={isSelected}
         {...props}
-      >
-        {autocomplete ? (
-          <ComboboxItem
-            clickOnEnter={false}
-            clickOnSpace={false}
-            onBlurCapture={event => {
-              event.preventDefault();
-            }}
-          >
-            {multiple && <Checkbox checked={isSelected} />}
-            {element}
-          </ComboboxItem>
-        ) : (
-          <>
-            {multiple && <Checkbox checked={isSelected} />}
+        render={(renderProps, state) => (
+          <div {...renderProps}>
+            {multiple && <Checkbox checked={state.selected} />}
             {element}
-          </>
+          </div>
         )}
-      </SelectPrimitive.Item>
+      />
     );
   }
 );
-SelectItem.displayName = SelectPrimitive.Item.displayName;
+SelectItem.displayName = 'Select.Item';
diff --git a/packages/raystack/components/select/select-misc.tsx b/packages/raystack/components/select/select-misc.tsx
index 01d3a0ea4..289f64d79 100644
--- a/packages/raystack/components/select/select-misc.tsx
+++ b/packages/raystack/components/select/select-misc.tsx
@@ -1,62 +1,89 @@
 'use client';
 
+import {
+  Combobox as ComboboxPrimitive,
+  Select as SelectPrimitive
+} from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { Select as SelectPrimitive } from 'radix-ui';
-import { ElementRef, Fragment, forwardRef } from 'react';
+import { Fragment, forwardRef, ReactNode } from 'react';
 import styles from './select.module.css';
 import { useSelectContext } from './select-root';
 
-export const SelectGroup = forwardRef<
-  ElementRef<typeof SelectPrimitive.Group>,
-  SelectPrimitive.SelectGroupProps
->(({ className, children, ...props }, ref) => {
-  const { shouldFilter } = useSelectContext();
-
-  if (shouldFilter) return <Fragment>{children}</Fragment>;
-
-  return (
-    <SelectPrimitive.Group
-      ref={ref}
-      className={cx(styles.menugroup, className)}
-      {...props}
-    >
-      {children}
-    </SelectPrimitive.Group>
-  );
-});
-SelectGroup.displayName = SelectPrimitive.Group.displayName;
-
-export const SelectLabel = forwardRef<
-  ElementRef<typeof SelectPrimitive.Label>,
-  SelectPrimitive.SelectLabelProps
->(({ className, ...props }, ref) => {
-  const { shouldFilter } = useSelectContext();
-
-  if (shouldFilter) return null;
-
-  return (
-    <SelectPrimitive.Label
-      ref={ref}
-      className={cx(styles.label, className)}
-      {...props}
-    />
-  );
-});
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-export const SelectSeparator = forwardRef<
-  ElementRef<typeof SelectPrimitive.Separator>,
-  SelectPrimitive.SelectSeparatorProps
->(({ className, ...props }, ref) => {
-  const { shouldFilter } = useSelectContext();
-
-  if (shouldFilter) return null;
-  return (
-    <SelectPrimitive.Separator
-      ref={ref}
-      className={cx(styles.separator, className)}
-      {...props}
-    />
-  );
-});
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+export interface SelectGroupProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(
+  ({ className, children, ...props }, ref) => {
+    const { shouldFilter, autocomplete } = useSelectContext();
+
+    if (shouldFilter) return <Fragment>{children}</Fragment>;
+
+    const GroupPrimitive = autocomplete
+      ? ComboboxPrimitive.Group
+      : SelectPrimitive.Group;
+
+    return (
+      <GroupPrimitive
+        ref={ref}
+        className={cx(styles.menugroup, className)}
+        {...props}
+      >
+        {children}
+      </GroupPrimitive>
+    );
+  }
+);
+SelectGroup.displayName = 'Select.Group';
+
+export interface SelectLabelProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export const SelectLabel = forwardRef<HTMLDivElement, SelectLabelProps>(
+  ({ className, ...props }, ref) => {
+    const { shouldFilter, autocomplete } = useSelectContext();
+
+    if (shouldFilter) return null;
+
+    const LabelPrimitive = autocomplete
+      ? ComboboxPrimitive.GroupLabel
+      : SelectPrimitive.GroupLabel;
+
+    return (
+      <LabelPrimitive
+        ref={ref}
+        className={cx(styles.label, className)}
+        {...props}
+      />
+    );
+  }
+);
+SelectLabel.displayName = 'Select.Label';
+
+export interface SelectSeparatorProps {
+  className?: string;
+}
+
+export const SelectSeparator = forwardRef<HTMLDivElement, SelectSeparatorProps>(
+  ({ className, ...props }, ref) => {
+    const { shouldFilter, autocomplete } = useSelectContext();
+
+    if (shouldFilter) return null;
+
+    const SeparatorPrimitive = autocomplete
+      ? ComboboxPrimitive.Separator
+      : SelectPrimitive.Separator;
+
+    return (
+      <SeparatorPrimitive
+        ref={ref}
+        className={cx(styles.separator, className)}
+        {...props}
+      />
+    );
+  }
+);
+SelectSeparator.displayName = 'Select.Separator';
diff --git a/packages/raystack/components/select/select-multiple-value.tsx b/packages/raystack/components/select/select-multiple-value.tsx
index 929c01a8f..f80978049 100644
--- a/packages/raystack/components/select/select-multiple-value.tsx
+++ b/packages/raystack/components/select/select-multiple-value.tsx
@@ -1,20 +1,13 @@
 'use client';
 
 import { cx } from 'class-variance-authority';
-import { Select as SelectPrimitive } from 'radix-ui';
-import {
-  ElementRef,
-  forwardRef,
-  useLayoutEffect,
-  useRef,
-  useState
-} from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { Chip } from '../chip';
 import { Text } from '../text';
 import styles from './select.module.css';
 import { ItemType } from './types';
 
-interface SelectMultipleValueProps extends SelectPrimitive.SelectValueProps {
+interface SelectMultipleValueProps {
   data: ItemType[];
 }
 
@@ -27,10 +20,9 @@ const calculateTextWidth = (text: string, fontSize: number = 11): number => {
   return text.length * avgCharWidth;
 };
 
-export const SelectMultipleValue = forwardRef<
-  ElementRef<typeof SelectPrimitive.Value>,
-  SelectMultipleValueProps
->(({ data = [], ...props }, ref) => {
+export const SelectMultipleValue = ({
+  data = []
+}: SelectMultipleValueProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [visibleCount, setVisibleCount] = useState(data.length);
   const [containerWidth, setContainerWidth] = useState(0);
@@ -51,7 +43,6 @@ export const SelectMultipleValue = forwardRef<
   useLayoutEffect(() => {
     if (!containerRef.current || data.length === 0) return;
 
-    // Calculate chip widths based on text length and icon width
     const chipWidths: number[] = data.map(item => {
       const text =
         typeof item.children === 'string' ? item.children : item.value;
@@ -62,13 +53,11 @@ export const SelectMultipleValue = forwardRef<
     let totalWidth = 0;
     let count = 0;
 
-    // Always show at least one chip
     if (data.length > 0) {
       count = 1;
       totalWidth = chipWidths[0];
     }
 
-    // Try to fit more chips
     for (let i = 1; i < data.length; i++) {
       const newWidth = totalWidth + chipWidths[i];
       if (newWidth <= containerWidth) {
@@ -84,18 +73,12 @@ export const SelectMultipleValue = forwardRef<
 
   return (
     <div ref={containerRef} className={cx(styles.valueContent)}>
-      <SelectPrimitive.Value ref={ref} {...props}>
-        <div className={cx(styles.valueContent)}>
-          {data.slice(0, visibleCount).map(item => (
-            <Chip key={item.value} leadingIcon={item.leadingIcon}>
-              {typeof item.children === 'string' ? item.children : item.value}
-            </Chip>
-          ))}
-          {data.length > visibleCount && (
-            <Text>+{data.length - visibleCount}</Text>
-          )}
-        </div>
-      </SelectPrimitive.Value>
+      {data.slice(0, visibleCount).map(item => (
+        <Chip key={item.value} leadingIcon={item.leadingIcon}>
+          {typeof item.children === 'string' ? item.children : item.value}
+        </Chip>
+      ))}
+      {data.length > visibleCount && <Text>+{data.length - visibleCount}</Text>}
     </div>
   );
-});
+};
diff --git a/packages/raystack/components/select/select-root.tsx b/packages/raystack/components/select/select-root.tsx
index 62a058337..120f64a9f 100644
--- a/packages/raystack/components/select/select-root.tsx
+++ b/packages/raystack/components/select/select-root.tsx
@@ -1,14 +1,15 @@
 'use client';
 
-import { ComboboxProvider } from '@ariakit/react';
-import { Select as SelectPrimitive } from 'radix-ui';
+import {
+  Combobox as ComboboxPrimitive,
+  Select as SelectPrimitive
+} from '@base-ui/react';
 import {
   createContext,
+  ReactNode,
   useCallback,
   useContext,
-  useId,
   useMemo,
-  useRef,
   useState
 } from 'react';
 import { ItemType } from './types';
@@ -27,8 +28,7 @@ interface SelectContextValue extends CommonProps {
   unregisterItem: (value: string) => void;
   multiple: boolean;
   items: Record<string, ItemType>;
-  updateSelectionInProgress: (value: boolean) => void;
-  setValue: (value: string) => void;
+  hasItems?: boolean;
 }
 
 interface UseSelectContext extends SelectContextValue {
@@ -57,27 +57,17 @@ export const useSelectContext = (): UseSelectContext => {
   };
 };
 
-interface NormalSelectRootProps extends SelectPrimitive.SelectProps {
-  autocomplete?: false;
-  autocompleteMode?: never;
-  searchValue?: never;
-  onSearch?: never;
-  defaultSearchValue?: never;
-}
-
-interface AutocompleteSelectRootProps
-  extends SelectPrimitive.SelectProps,
-    CommonProps {
-  autocomplete: true;
+interface BaseSelectProps extends CommonProps {
+  children?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  items?: string[];
 }
 
-export type BaseSelectProps = Omit<
-  NormalSelectRootProps | AutocompleteSelectRootProps,
-  'autoComplete' | 'value' | 'onValueChange' | 'defaultValue'
-> & {
-  htmlAutoComplete?: string;
-};
-
 export interface SingleSelectProps extends BaseSelectProps {
   multiple?: false;
   value?: string;
@@ -94,8 +84,6 @@ export interface MultipleSelectProps extends BaseSelectProps {
 
 export type SelectRootProps = SingleSelectProps | MultipleSelectProps;
 
-const SELECT_INTERNAL_VALUE = 'SELECT_INTERNAL_VALUE';
-
 export const SelectRoot = (props: SelectRootProps) => {
   const {
     children,
@@ -110,8 +98,11 @@ export const SelectRoot = (props: SelectRootProps) => {
     open: providedOpen,
     defaultOpen = false,
     onOpenChange,
-    htmlAutoComplete,
     multiple = false,
+    disabled,
+    required,
+    name,
+    items: itemsProp,
     ...rest
   } = props;
 
@@ -120,52 +111,31 @@ export const SelectRoot = (props: SelectRootProps) => {
   >(defaultValue);
   const [internalSearchValue, setInternalSearchValue] =
     useState(defaultSearchValue);
-  const [internalOpen, setInternalOpen] = useState(defaultOpen);
-  const [items, setItems] = useState<SelectContextValue['items']>({});
-  const id = useId();
-  const isSelectionInProgress = useRef(false);
+  const [registeredItems, setRegisteredItems] = useState<
+    SelectContextValue['items']
+  >({});
 
   const computedValue = providedValue ?? internalValue;
   const searchValue = providedSearchValue ?? internalSearchValue;
-  const open = providedOpen ?? internalOpen;
-
-  const updateSelectionInProgress = useCallback((value: boolean) => {
-    isSelectionInProgress.current = value;
-  }, []);
-
-  const setValue = useCallback(
-    (value: string) => {
-      /*
-       * If the select is placed inside a form, onChange is called with an empty value
-       * WORKAROUND FOR ISSUE https://github.com/radix-ui/primitives/issues/3135
-       */
-      if (value === '') return;
 
+  const handleValueChange = useCallback(
+    (value: any, _eventDetails?: any) => {
+      setInternalValue(value);
       if (multiple) {
-        updateSelectionInProgress(true);
-        const set = new Set<string>(
-          Array.isArray(computedValue)
-            ? computedValue
-            : [computedValue ?? ''].filter(Boolean)
+        (onValueChange as MultipleSelectProps['onValueChange'])?.(
+          value as string[]
         );
-
-        if (set.has(value)) set.delete(value);
-        else set.add(value);
-
-        const newValue = Array.from(set);
-
-        setInternalValue(newValue);
-        (onValueChange as MultipleSelectProps['onValueChange'])?.(newValue);
       } else {
-        setInternalValue(value);
-        (onValueChange as SingleSelectProps['onValueChange'])?.(value);
+        (onValueChange as SingleSelectProps['onValueChange'])?.(
+          value as string
+        );
       }
     },
-    [multiple, onValueChange, computedValue, updateSelectionInProgress]
+    [multiple, onValueChange]
   );
 
-  const setSearchValue = useCallback(
-    (value: string) => {
+  const handleSearchValueChange = useCallback(
+    (value: string, _eventDetails?: any) => {
       setInternalSearchValue(value);
       onSearch?.(value);
     },
@@ -173,21 +143,19 @@ export const SelectRoot = (props: SelectRootProps) => {
   );
 
   const handleOpenChange = useCallback(
-    (value: boolean) => {
-      if (isSelectionInProgress.current) return;
-      setInternalOpen(value);
-      onOpenChange?.(value);
+    (open: boolean, _eventDetails?: any) => {
+      onOpenChange?.(open);
     },
     [onOpenChange]
   );
 
   const registerItem = useCallback<SelectContextValue['registerItem']>(item => {
-    setItems(prev => ({ ...prev, [item.value]: item }));
+    setRegisteredItems(prev => ({ ...prev, [item.value]: item }));
   }, []);
 
   const unregisterItem = useCallback<SelectContextValue['unregisterItem']>(
     value => {
-      setItems(prev => {
+      setRegisteredItems(prev => {
         const { [value]: _, ...rest } = prev;
         return rest;
       });
@@ -195,56 +163,66 @@ export const SelectRoot = (props: SelectRootProps) => {
     []
   );
 
-  /*
-   * Radix internally shows the placeholder when the value is empty.
-   * This value is used to manage the internal value of Radix Select to make it work
-   */
-  const radixValue = useMemo(() => {
-    if (!computedValue) return '';
-    if (typeof computedValue === 'string') return computedValue;
-    if (Array.isArray(computedValue) && computedValue.length)
-      return `${SELECT_INTERNAL_VALUE}-${id}`;
-    return String(computedValue) ?? '';
-  }, [computedValue, id]);
-
-  const element = (
-    <ComboboxProvider
-      resetValueOnHide
-      focusLoop={false}
-      includesBaseElement={false}
-      value={searchValue}
-      setValue={setSearchValue}
-      open={open}
-      setOpen={handleOpenChange}
-    >
-      {children}
-    </ComboboxProvider>
+  const contextValue = useMemo(
+    () => ({
+      value: computedValue,
+      registerItem,
+      unregisterItem,
+      autocomplete,
+      autocompleteMode,
+      searchValue,
+      multiple,
+      items: registeredItems,
+      hasItems: !!itemsProp
+    }),
+    [
+      computedValue,
+      registerItem,
+      unregisterItem,
+      autocomplete,
+      autocompleteMode,
+      searchValue,
+      multiple,
+      registeredItems,
+      itemsProp
+    ]
   );
 
+  const commonProps = {
+    value: providedValue as any,
+    defaultValue: defaultValue as any,
+    onValueChange: handleValueChange,
+    open: providedOpen,
+    defaultOpen,
+    onOpenChange: handleOpenChange,
+    multiple: multiple as any,
+    disabled,
+    modal: true as const,
+    ...rest
+  };
+
+  if (autocomplete) {
+    return (
+      <SelectContext.Provider value={contextValue}>
+        <ComboboxPrimitive.Root
+          {...commonProps}
+          onInputValueChange={handleSearchValueChange}
+          filter={itemsProp ? undefined : null}
+          items={itemsProp}
+          loopFocus={false}
+          // @ts-ignore BaseUI types are not up to date
+          autoHighlight='always'
+        >
+          {children}
+        </ComboboxPrimitive.Root>
+      </SelectContext.Provider>
+    );
+  }
+
   return (
-    <SelectContext.Provider
-      value={{
-        value: computedValue,
-        registerItem,
-        unregisterItem,
-        autocomplete,
-        autocompleteMode,
-        searchValue,
-        multiple,
-        items,
-        updateSelectionInProgress,
-        setValue
-      }}
-    >
-      <SelectPrimitive.Root
-        autoComplete={htmlAutoComplete}
-        value={radixValue}
-        onValueChange={setValue}
-        open={open}
-        onOpenChange={handleOpenChange}
-        {...rest}
-      >
-        {autocomplete ? element : children}
+    <SelectContext.Provider value={contextValue}>
+      <SelectPrimitive.Root {...commonProps} required={required} name={name}>
+        {children}
       </SelectPrimitive.Root>
     </SelectContext.Provider>
   );
diff --git a/packages/raystack/components/select/select-trigger.tsx b/packages/raystack/components/select/select-trigger.tsx
index cacd2dbc0..2d74bb936 100644
--- a/packages/raystack/components/select/select-trigger.tsx
+++ b/packages/raystack/components/select/select-trigger.tsx
@@ -1,9 +1,12 @@
 'use client';
 
+import {
+  Combobox as ComboboxPrimitive,
+  Select as SelectPrimitive
+} from '@base-ui/react';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 import { cva, VariantProps } from 'class-variance-authority';
-import { Select as SelectPrimitive, Slot } from 'radix-ui';
-import { ElementRef, forwardRef, SVGAttributes } from 'react';
+import { ComponentPropsWithoutRef, forwardRef, SVGAttributes } from 'react';
 import { Flex } from '../flex';
 import styles from './select.module.css';
 import { useSelectContext } from './select-root';
@@ -31,15 +34,12 @@ const trigger = cva(styles.trigger, {
 });
 
 export interface SelectTriggerProps
-  extends SelectPrimitive.SelectTriggerProps,
+  extends ComponentPropsWithoutRef<'button'>,
     VariantProps<typeof trigger> {
   iconProps?: IconProps;
 }
 
-export const SelectTrigger = forwardRef<
-  ElementRef<typeof SelectPrimitive.Trigger>,
-  SelectTriggerProps
->(
+export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
   (
     {
       size,
@@ -47,34 +47,35 @@ export const SelectTrigger = forwardRef<
       className,
       children,
       iconProps = {},
-      asChild,
       'aria-label': ariaLabel,
       ...props
     },
     ref
   ) => {
     const { multiple, autocomplete } = useSelectContext();
+
+    const TriggerPrimitive = autocomplete
+      ? ComboboxPrimitive.Trigger
+      : SelectPrimitive.Trigger;
+
     return (
-      <SelectPrimitive.Trigger
+      <TriggerPrimitive
         data-multiselectable={multiple ? true : undefined}
         ref={ref}
         className={trigger({ size, variant, className })}
         aria-label={ariaLabel || 'Select option'}
-        aria-haspopup={autocomplete ? 'dialog' : 'listbox'}
         {...props}
       >
         <Flex className={styles.triggerContent} align='center' gap={2}>
-          {asChild ? <Slot.Root>{children}</Slot.Root> : children}
+          {children}
         </Flex>
-        <SelectPrimitive.Icon asChild>
-          <ChevronDownIcon
-            className={styles.triggerIcon}
-            aria-hidden='true'
-            {...iconProps}
-          />
-        </SelectPrimitive.Icon>
-      </SelectPrimitive.Trigger>
+        <ChevronDownIcon
+          className={styles.triggerIcon}
+          aria-hidden='true'
+          {...iconProps}
+        />
+      </TriggerPrimitive>
     );
   }
 );
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+SelectTrigger.displayName = 'Select.Trigger';
diff --git a/packages/raystack/components/select/select-value.tsx b/packages/raystack/components/select/select-value.tsx
index a7ad337e3..b796eac09 100644
--- a/packages/raystack/components/select/select-value.tsx
+++ b/packages/raystack/components/select/select-value.tsx
@@ -1,55 +1,81 @@
 'use client';
 
 import { cx } from 'class-variance-authority';
-import { Select as SelectPrimitive } from 'radix-ui';
-import { ElementRef, ReactNode, forwardRef, useMemo } from 'react';
+import { forwardRef, ReactNode, useMemo } from 'react';
+import styles from './select.module.css';
 import { SelectMultipleValue } from './select-multiple-value';
 import { useSelectContext } from './select-root';
-import styles from './select.module.css';
 import { ItemType } from './types';
 
 type ValueType = Omit<ItemType, 'children'>;
 
-type SelectValueProps = Omit<SelectPrimitive.SelectValueProps, 'children'> & {
+type SelectValueProps = {
+  placeholder?: string;
   children?: ((value?: ValueType | ValueType[]) => ReactNode) | ReactNode;
+  className?: string;
 };
 
-export const SelectValue = forwardRef<
-  ElementRef<typeof SelectPrimitive.Value>,
-  SelectValueProps
->(({ children, ...props }, ref) => {
-  const { value, items, multiple } = useSelectContext();
-
-  const item = useMemo(() => {
-    if (!value) return undefined;
-    if (multiple && Array.isArray(value)) {
-      const itemValues = value.map(v => items[v]);
-      if (itemValues.length === 1) return itemValues[0];
-      return itemValues;
+export const SelectValue = forwardRef<HTMLSpanElement, SelectValueProps>(
+  ({ children, placeholder, className, ...props }, ref) => {
+    const { value, items, multiple } = useSelectContext();
+
+    const hasValue = multiple
+      ? Array.isArray(value) && value.length > 0
+      : !!value;
+
+    const item = useMemo(() => {
+      if (!value) return undefined;
+      if (multiple && Array.isArray(value)) {
+        const itemValues = value.map(v => items[v]);
+        if (itemValues.length === 1) return itemValues[0];
+        return itemValues;
+      }
+      return items[value as string];
+    }, [value, items, multiple]);
+
+    if (!hasValue) {
+      return (
+        <span
+          ref={ref}
+          data-placeholder=''
+          className={cx(styles.placeholder, className)}
+          {...props}
+        >
+          {placeholder}
+        </span>
+      );
+    }
+
+    if (typeof children === 'function') {
+      return (
+        <span ref={ref} className={className} {...props}>
+          {children(item)}
+        </span>
+      );
+    }
+
+    if (children) {
+      return (
+        <span ref={ref} className={className} {...props}>
+          {children}
+        </span>
+      );
+    }
+
+    if (Array.isArray(item)) {
+      return <SelectMultipleValue data={item} />;
     }
-    return items[value as string];
-  }, [value, items, multiple]);
 
-  if (children) {
     return (
-      <SelectPrimitive.Value ref={ref} {...props}>
-        {typeof children === 'function' ? children(item) : children}
-      </SelectPrimitive.Value>
+      <span ref={ref} className={className} {...props}>
+        <div className={cx(styles.valueContent)}>
+          {typeof item?.children === 'string' && item?.leadingIcon && (
+            <div className={styles.itemIcon}>{item.leadingIcon}</div>
+          )}
+          {item?.children ?? value}
+        </div>
+      </span>
     );
   }
-
-  if (Array.isArray(item))
-    return <SelectMultipleValue data={item} ref={ref} {...props} />;
-
-  return (
-    <SelectPrimitive.Value ref={ref} {...props}>
-      <div className={cx(styles.valueContent)}>
-        {typeof item?.children === 'string' && item?.leadingIcon && (
-          <div className={styles.itemIcon}>{item.leadingIcon}</div>
-        )}
-        {item?.children ?? value}
-      </div>
-    </SelectPrimitive.Value>
-  );
-});
-SelectValue.displayName = SelectPrimitive.Value.displayName;
+);
+SelectValue.displayName = 'Select.Value';
diff --git a/packages/raystack/components/select/select.module.css b/packages/raystack/components/select/select.module.css
index 5e8c7fb8a..7c4e3c729 100644
--- a/packages/raystack/components/select/select.module.css
+++ b/packages/raystack/components/select/select.module.css
@@ -1,6 +1,9 @@
+.positioner {
+  z-index: var(--rs-z-index-portal);
+}
+
 .content {
   --apsara-select-padding: var(--rs-space-2);
-  z-index: var(--rs-z-index-portal);
   font-size: var(--rs-font-size-small);
   line-height: var(--rs-line-height-small);
   letter-spacing: var(--rs-letter-spacing-small);
@@ -9,10 +12,11 @@
   border-radius: var(--rs-radius-2);
   box-shadow: var(--rs-shadow-soft);
   border: 0.5px solid var(--rs-color-border-base-primary);
-  min-width: var(--radix-select-trigger-width);
+  min-width: var(--anchor-width);
   transition: all 0.2s ease;
   max-height: 320px;
   position: relative;
+  overflow: auto;
 }
 
 .menuitem {
@@ -27,15 +31,15 @@
   border-radius: var(--rs-radius-2);
 }
 
-.menuitem[data-highlighted],
-.menuitem[data-active-item="true"] {
+.menuitem[data-highlighted] {
   outline: none;
   cursor: pointer;
   background: var(--rs-color-background-base-primary-hover);
 }
-.content:not([data-multiselectable="true"]) .menuitem[data-state="checked"] {
+
+/* .content:not([data-multiselectable="true"]) .menuitem[data-selected] {
   background: var(--rs-color-background-neutral-secondary);
-}
+} */
 
 .menuitem[data-disabled] {
   opacity: 0.6;
@@ -213,14 +217,12 @@
 }
 
 .placeholder,
-[data-placeholder],
-.valueContent[data-state="placeholder"] {
+[data-placeholder] {
   color: var(--rs-color-foreground-base-tertiary);
 }
 
 .placeholder:hover,
-[data-placeholder]:hover,
-.valueContent[data-state="placeholder"]:hover {
+[data-placeholder]:hover {
   color: var(--rs-color-foreground-base-tertiary);
 }
 
@@ -247,12 +249,11 @@
 }
 
 .trigger[data-disabled] .placeholder,
-.trigger[data-disabled] [data-placeholder],
-.trigger[data-disabled] .valueContent[data-state="placeholder"] {
+.trigger[data-disabled] [data-placeholder] {
   color: var(--rs-color-foreground-base-tertiary);
 }
 
-[data-disabled=""] {
+[data-disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -262,10 +263,6 @@
   padding: var(--apsara-select-padding);
 }
 
-.comboboxViewport {
-  padding: 0;
-}
-
 /*
   Empty state matches:
    1. Completely empty container
@@ -275,10 +272,8 @@
 .comboboxContent:not(:has(.menuitem:not([data-hidden="true"]))) {
   padding: 0;
 }
-.comboboxContainer:has(.comboboxContent:empty) .comboboxInput,
-.comboboxContainer:has(
-    .comboboxContent:not(:has(.menuitem:not([data-hidden="true"])))
-  )
+.content:has(.comboboxContent:empty) .comboboxInput,
+.content:has(.comboboxContent:not(:has(.menuitem:not([data-hidden="true"]))))
   .comboboxInput {
   border-bottom: none;
 }
diff --git a/packages/raystack/components/select/select.tsx b/packages/raystack/components/select/select.tsx
index 7320d54a1..a4f29d02c 100644
--- a/packages/raystack/components/select/select.tsx
+++ b/packages/raystack/components/select/select.tsx
@@ -1,4 +1,4 @@
-import { Select as SelectPrimitive } from 'radix-ui';
+import { Select as SelectPrimitive } from '@base-ui/react';
 import { SelectContent } from './select-content';
 import { SelectItem } from './select-item';
 import { SelectGroup, SelectLabel, SelectSeparator } from './select-misc';
@@ -9,9 +9,9 @@ import { SelectValue } from './select-value';
 export const Select = Object.assign(SelectRoot, {
   Group: SelectGroup,
   Value: SelectValue,
-  ScrollUpButton: SelectPrimitive.ScrollDownButton,
-  ScrollDownButton: SelectPrimitive.ScrollDownButton,
-  Viewport: SelectPrimitive.Viewport,
+  ScrollUpArrow: SelectPrimitive.ScrollUpArrow,
+  ScrollDownArrow: SelectPrimitive.ScrollDownArrow,
+  List: SelectPrimitive.List,
   Trigger: SelectTrigger,
   Content: SelectContent,
   Item: SelectItem,