diff --git a/apps/design-system/src/pages/view-preview/view-settings.tsx b/apps/design-system/src/pages/view-preview/view-settings.tsx
index bc3738ee70..2e79f16b16 100644
--- a/apps/design-system/src/pages/view-preview/view-settings.tsx
+++ b/apps/design-system/src/pages/view-preview/view-settings.tsx
@@ -3,7 +3,7 @@ import { useLocation, useNavigate } from 'react-router-dom'
 
 import { clsx } from 'clsx'
 
-import { Button, Icon, Select, SelectContent, SelectItem, Spacer } from '@harnessio/ui/components'
+import { Button, Icon, Select, Spacer } from '@harnessio/ui/components'
 
 import css from './view-settings.module.css'
 
@@ -17,7 +17,7 @@ enum Themes {
   DARK_PROT_STD = 'dark-prot-std',
   DARK_STANDARD_HIGH = 'dark-std-high',
   LIGHT = 'light-std-std',
-  LIGHT_PROTO_STD = 'light-prot-std'
+  LIGHT_PROT_STD = 'light-prot-std'
 }
 
 const ViewSettings: FC<ViewSettingsProps> = ({ routes }) => {
@@ -65,30 +65,30 @@ const ViewSettings: FC<ViewSettingsProps> = ({ routes }) => {
 
       {showSettings && (
         <>
-          <Select placeholder="Select view" label="View" value={currentView} onValueChange={navigate}>
-            <SelectContent>
+          <Select.Root placeholder="Select view" label="View" value={currentView} onValueChange={navigate}>
+            <Select.Content>
               {routes.map(route => (
-                <SelectItem key={route} value={route}>
+                <Select.Item key={route} value={route}>
                   {route}
-                </SelectItem>
+                </Select.Item>
               ))}
-            </SelectContent>
-          </Select>
+            </Select.Content>
+          </Select.Root>
           <Spacer size={5} />
-          <Select
+          <Select.Root
             placeholder="Select theme"
             label="Theme"
             value={currentTheme}
             onValueChange={(newTheme: Themes) => setCurrentTheme(newTheme)}
           >
-            <SelectContent>
+            <Select.Content>
               {Object.values(Themes).map(theme => (
-                <SelectItem key={theme} value={theme}>
+                <Select.Item key={theme} value={theme}>
                   {theme}
-                </SelectItem>
+                </Select.Item>
               ))}
-            </SelectContent>
-          </Select>
+            </Select.Content>
+          </Select.Root>
         </>
       )}
     </aside>
diff --git a/apps/portal/src/content/docs/components/select.mdx b/apps/portal/src/content/docs/components/select.mdx
new file mode 100644
index 0000000000..9c58432678
--- /dev/null
+++ b/apps/portal/src/content/docs/components/select.mdx
@@ -0,0 +1,378 @@
+---
+title: Select
+description: Select component
+---
+
+The `Select` component provides a way to create dropdown selections with various sub-components for customization.
+
+import { DocsPage } from "../../../components/docs-page";
+
+<DocsPage.ComponentExample
+  client:only
+  code={`() => {
+    const [color, setColor] = React.useState()
+    const [randomItem, setRandomItem] = React.useState()
+    const [searchRandomItems, setSearchRandomItems] = React.useState('')
+
+    const allRandomItems = React.useMemo(
+      () => [...new Array(300)].map((_, index) => ({value: index+1, label: \`Item \${index+1}\`})),
+      []
+    )
+
+    const filteredRandomItems = React.useMemo(
+      () => searchRandomItems.trim() ? allRandomItems.filter(item => item.label.toLowerCase().includes(searchRandomItems.toLowerCase())) : allRandomItems,
+    )
+
+    return (
+        <div className="flex flex-col gap-8">
+            <div>
+                <h5>With group</h5>
+                <Select.Root
+                    name="color"
+                    placeholder="Select..."
+                    label="Color theme"
+                    value={color}
+                    onValueChange={setColor}
+                >
+                    <Select.Content defaultValue={color}>
+                        <Select.Item value="standard">Standard</Select.Item>
+                        <Select.Item value="accessible">Accessible</Select.Item>
+                        <Select.Item value="vivid">Vivid</Select.Item>
+
+                        <Select.Separator />
+
+                        <Select.Group>
+                            <Select.Label>Custom label</Select.Label>
+                            <Select.Item value="custom">Custom</Select.Item>
+                        </Select.Group>
+                    </Select.Content>
+                </Select.Root>
+            </div>
+
+            <hr />
+
+            <div>
+                <h5>With search</h5>
+                <Select.Root
+                    name="random"
+                    placeholder="Select..."
+                    label="Random item"
+                    value={randomItem}
+                    onValueChange={setRandomItem}
+                >
+                    <Select.Content
+                        withSearch
+                        searchProps={{
+                            searchValue: searchRandomItems,
+                            handleChangeSearchValue: setSearchRandomItems
+                        }}
+                    >
+                        {filteredRandomItems.map(item => (
+                            <Select.Item
+                                key={item.value}
+                                value={item.value}
+                            >
+                                {item.label}
+                            </Select.Item>
+                        ))}
+                    </Select.Content>
+                </Select.Root>
+            </div>
+        </div>
+    )
+
+}`}
+/>
+
+## Usage
+
+```typescript jsx
+import { Select } from '@harnessio/ui/components'
+
+//...
+
+const [color, setColor] = useState()
+
+return (
+  <Select.Root
+    name="color"
+    placeholder="Select..."
+    label="Color theme"
+    value={color}
+    onValueChange={setColor}
+  >
+    <Select.Content>
+      <Select.Item value="standard">Standard</Select.Item>
+      <Select.Item value="accessible">Accessible</Select.Item>
+      <Select.Item value="vivid">Vivid</Select.Item>
+
+      <Select.Separator />
+
+      <Select.Group>
+        <Select.Label>Custom label</Select.Label>
+        <Select.Item value="custom">Custom</Select.Item>
+      </Select.Group>
+    </Select.Content>
+  </Select.Root>
+)
+```
+
+## Anatomy
+
+All parts of the `Select` component can be imported and composed as required.
+
+```typescript jsx
+<Select.Root>
+  <Select.Content>
+    <Select.Item />
+    <Select.Separator />
+    <Select.Group>
+      <Select.Label />
+      <Select.Item />
+    </Select.Group>
+  </Select.Content>
+</Select.Root>
+```
+
+## API Reference
+
+### `Root`
+
+The `Root` component for the Select can be either controlled or uncontrolled. A controlled Select component takes a `value`
+and an `onValueChange` handler as props, and will only update the value when the user makes a selection. An uncontrolled
+Select component will update the value whenever a user makes a selection, and will not re-render when the value is
+changed from outside the component.
+
+```typescript jsx
+<Select.Root
+  name="color"                        // [OPTIONAL] Name of the select
+  label="Color theme"                 // [OPTIONAL] Label text
+  placeholder="Select a color theme"  // [OPTIONAL] Placeholder text
+  value={color}                       // [OPTIONAL] Current value
+  onValueChange={setColor}            // [OPTIONAL] Value change handler
+>
+  {/* Select content */}
+</Select.Root>
+```
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "name",
+      description: "Name of the select",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "label",
+      description: "Label text",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "placeholder",
+      description: "Placeholder text",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "value",
+      description: "Current value of the select",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "onValueChange",
+      description: "Handler called when the value changes",
+      required: false,
+      value: "(value: string) => void",
+    },
+  ]}
+/>
+
+### `Content`
+
+The content of the select dropdown. This is a required element. The `defaultValue` prop sets the default value of the
+select. The `withSearch` prop enables search support in the dropdown. This is optional and can be used to search the
+available options. The `searchProps` prop is used to pass additional props to the search input when `withSearch` is
+true. This can be used to customize the search input, such as changing the placeholder text.
+
+```typescript jsx
+<Select.Content
+  defaultValue={color}                 // [OPTIONAL] Default value
+  className="custom-class"             // [OPTIONAL] Custom class name
+  position="popper"                    // [OPTIONAL] Position of the content, either 'item-aligned' or 'popper'
+  withSearch                           // [OPTIONAL] Enable search
+  searchProps={{                       // [OPTIONAL] Search props
+    placeholder: 'Search...',          // [OPTIONAL] Placeholder text
+    searchValue: search,               // [OPTIONAL] Current search value
+    handleChangeSearchValue: setSearch // [OPTIONAL] Search value change handler
+  }}
+>
+  {/* SelectItem components */}
+</Select.Content>
+```
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "defaultValue",
+      description: "Default value for the select",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "className",
+      description: "Custom class name",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "position",
+      description: "Position of the content",
+      required: false,
+      value: "'item-aligned' | 'popper'",
+      defaultValue: "popper",
+    },
+    {
+      name: "withSearch",
+      description: "Enable search",
+      required: false,
+      value: "boolean",
+      defaultValue: "false",
+    },
+    {
+      name: "searchProps",
+      description: "Props for the search",
+      required: false,
+      value:
+        "{ placeholder?: string, searchValue: string, handleChangeSearchValue: (searchValue: string) => void }",
+    },
+  ]}
+/>
+
+### `Item`
+
+The `Item` component is used to create an individual item in the select dropdown. Each item requires a `value` prop
+which is the value of the item. If the value is not suitable for typeahead search, you can use the `textValue` prop to
+provide a searchable text string for typeahead search. For example, if the value is JSON-encoded object, `textValue` can
+be used to provide a searchable label for the object.
+
+```typescript jsx
+<Select.Item
+  value="value"     // Value of the item
+  textValue="text"  // [OPTIONAL] Text value of the item to be used for when value suitable for typeahead search
+  disabled          // [OPTIONAL] Disable the item
+  asChild           // [OPTIONAL] Render the item as a child
+  isItemTextAsChild // [OPTIONAL] Render the item text as a child
+>
+  Name
+</Select.Item>
+```
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "value",
+      description: "Value of the item",
+      required: true,
+      value: "string",
+    },
+    {
+      name: "textValue",
+      description:
+        "Text value of the item to be used for search when value is not suitable for typeahead search",
+      required: false,
+      value: "string",
+    },
+    {
+      name: "disabled",
+      description: "Disable the item",
+      required: false,
+      value: "boolean",
+      defaultValue: "false",
+    },
+    {
+      name: "asChild",
+      description: "Render the item as a child",
+      required: false,
+      value: "boolean",
+      defaultValue: "false",
+    },
+    {
+      name: "isItemTextAsChild",
+      description: "Render the item text as a child",
+      required: false,
+      value: "boolean",
+      defaultValue: "false",
+    },
+  ]}
+/>
+
+### `Separator`
+
+The `Separator` component is used to create a separator in the select dropdown.
+
+```typescript jsx
+<Select.Separator
+  className="custom-class" // [OPTIONAL] Custom class name
+/>
+```
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "className",
+      description: "Custom class name",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### `Group`
+
+The `Group` component is used to create a group of items in the select dropdown.
+
+```typescript jsx
+<Select.Group
+  className="custom-class" // [OPTIONAL] Custom class name
+>
+  <Select.Label>Custom label</Select.Label>
+  <Select.Item value="custom">Custom</Select.Item>
+</Select.Group>
+```
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "className",
+      description: "Custom class name",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
+
+### `Label`
+
+The `Label` component is used to create a label for a group of items in the select dropdown.
+
+```typescript jsx
+<Select.Label
+  className="custom-class" // [OPTIONAL] Custom class name
+>
+  Custom label
+</Select.Label>
+```
+
+<DocsPage.PropsTable
+  props={[
+    {
+      name: "className",
+      description: "Custom class name",
+      required: false,
+      value: "string",
+    },
+  ]}
+/>
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index a2e61f7d19..17dea81556 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -1,4 +1,13 @@
-import { Children, ComponentPropsWithoutRef, ElementRef, FC, forwardRef, PropsWithChildren, ReactNode } from 'react'
+import {
+  Children,
+  ComponentPropsWithoutRef,
+  ElementRef,
+  FC,
+  forwardRef,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactNode
+} from 'react'
 
 import { Caption, Icon, Label, Message, MessageTheme, SearchBox } from '@/components'
 import { usePortal } from '@/context'
@@ -6,8 +15,8 @@ import { useDebounceSearch } from '@hooks/use-debounce-search'
 import * as SelectPrimitive from '@radix-ui/react-select'
 import { cn } from '@utils/cn'
 
-interface SelectProps
-  extends Omit<Omit<PropsWithChildren<React.HTMLAttributes<HTMLElement>>, 'defaultValue'>, 'dir'>,
+interface SelectRootProps
+  extends Omit<Omit<PropsWithChildren<HTMLAttributes<HTMLElement>>, 'defaultValue'>, 'dir'>,
     SelectPrimitive.SelectProps {
   label?: string
   error?: string
@@ -20,12 +29,14 @@ interface SelectProps
 /**
  * A customizable select component that supports labels, error states, and captions
  * @example
- * <Select name="select" label="Select an option" placeholder="Select an option">
- *   <SelectItem value="option1">Option 1</SelectItem>
- *   <SelectItem value="option2">Option 2</SelectItem>
- * </Select>
+ * <Select.Root name="select" label="Select an option" placeholder="Select an option">
+ *   <Select.Content>
+ *     <Select.Item val`ue="option1">Option 1</Select.Item>
+ *     <Select.Item val`ue="option2">Option 2</Select.Item>
+ *   </Select.Content>
+ * </Select.Root>
  */
-const Select: FC<SelectProps> = ({
+const SelectRoot: FC<SelectRootProps> = ({
   name,
   label,
   error,
@@ -60,7 +71,7 @@ const Select: FC<SelectProps> = ({
     {caption && <Caption>{caption}</Caption>}
   </SelectPrimitive.Root>
 )
-Select.displayName = SelectPrimitive.Root.displayName
+SelectRoot.displayName = SelectPrimitive.Root.displayName
 
 const SelectGroup = SelectPrimitive.Group
 
@@ -209,4 +220,13 @@ const SelectSeparator = forwardRef<
 ))
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName
 
-export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator }
+const Select = {
+  Root: SelectRoot,
+  Group: SelectGroup,
+  Content: SelectContent,
+  Label: SelectLabel,
+  Item: SelectItem,
+  Separator: SelectSeparator
+}
+
+export { Select }
diff --git a/packages/ui/src/components/theme-selector-v2/theme-dialog.tsx b/packages/ui/src/components/theme-selector-v2/theme-dialog.tsx
index f1b1308bba..fcabce90cd 100644
--- a/packages/ui/src/components/theme-selector-v2/theme-dialog.tsx
+++ b/packages/ui/src/components/theme-selector-v2/theme-dialog.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react'
 
-import { Dialog, Icon, Select, SelectContent, SelectItem, Separator } from '@/components'
+import { Dialog, Icon, Select, Separator } from '@/components'
 import darkModeImage from '@/svgs/theme-dark.png'
 import lightModeImage from '@/svgs/theme-light.png'
 import { cn } from '@/utils/cn'
@@ -95,7 +95,7 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
                 High contrast improves readability, Dimmer mode reduces glare.
               </p>
             </div>
-            <Select
+            <Select.Root
               name="contrast"
               value={contrast}
               onValueChange={(value: Contrast) => {
@@ -104,14 +104,14 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
               }}
               placeholder="Select"
             >
-              <SelectContent>
+              <Select.Content>
                 {Object.values(Contrast).map(item => (
-                  <SelectItem key={item} value={item}>
+                  <Select.Item key={item} value={item}>
                     {item}
-                  </SelectItem>
+                  </Select.Item>
                 ))}
-              </SelectContent>
-            </Select>
+              </Select.Content>
+            </Select.Root>
           </div>
 
           <Separator className="h-px bg-borders-4" />
@@ -124,7 +124,7 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
                 Adjust colors for different types of color blindness.
               </p>
             </div>
-            <Select
+            <Select.Root
               name="color-adjustment"
               value={colorAdjustment}
               onValueChange={(value: ColorAdjustment) => {
@@ -133,14 +133,14 @@ const ThemeDialog: FC<ThemeDialogProps> = ({ defaultTheme, theme, open, onOpenCh
               }}
               placeholder="Select"
             >
-              <SelectContent>
+              <Select.Content>
                 {Object.values(ColorAdjustment).map(item => (
-                  <SelectItem key={item} value={item}>
+                  <Select.Item key={item} value={item}>
                     {item}
-                  </SelectItem>
+                  </Select.Item>
                 ))}
-              </SelectContent>
-            </Select>
+              </Select.Content>
+            </Select.Root>
           </div>
 
           <Separator className="h-px bg-borders-4" />
diff --git a/packages/ui/src/components/theme-selector/color-select.tsx b/packages/ui/src/components/theme-selector/color-select.tsx
index 42fbcf125b..3f02efabfe 100644
--- a/packages/ui/src/components/theme-selector/color-select.tsx
+++ b/packages/ui/src/components/theme-selector/color-select.tsx
@@ -1,4 +1,5 @@
-import { Label, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator } from '..'
+import { Label, Select } from '@/components'
+
 import { ColorType, ContrastType, FullTheme, ModeType } from './types'
 
 export function ColorSelect({
@@ -15,7 +16,7 @@ export function ColorSelect({
   return (
     <div>
       <Label className="text-xs">Color</Label>
-      <Select
+      <Select.Root
         name="color"
         placeholder="Select a color theme"
         value={color}
@@ -23,16 +24,16 @@ export function ColorSelect({
           setTheme(`${mode}-${color}-${contrast}`)
         }}
       >
-        <SelectContent defaultValue={color}>
-          <SelectItem value={ColorType.Standard}>Standard</SelectItem>
-          <SelectSeparator />
-          <SelectGroup>
-            <SelectLabel>Vision Assistive</SelectLabel>
-            <SelectItem value={ColorType.Tritanopia}>Tritanopia</SelectItem>
-            <SelectItem value={ColorType.ProtanopiaAndDeuteranopia}>Protanopia & Deuteranopia</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
+        <Select.Content defaultValue={color}>
+          <Select.Item value={ColorType.Standard}>Standard</Select.Item>
+          <Select.Separator />
+          <Select.Group>
+            <Select.Label>Vision Assistive</Select.Label>
+            <Select.Item value={ColorType.Tritanopia}>Tritanopia</Select.Item>
+            <Select.Item value={ColorType.ProtanopiaAndDeuteranopia}>Protanopia & Deuteranopia</Select.Item>
+          </Select.Group>
+        </Select.Content>
+      </Select.Root>
     </div>
   )
 }
diff --git a/packages/ui/src/components/theme-selector/contrast-select.tsx b/packages/ui/src/components/theme-selector/contrast-select.tsx
index 8ee5236439..628dcaffa8 100644
--- a/packages/ui/src/components/theme-selector/contrast-select.tsx
+++ b/packages/ui/src/components/theme-selector/contrast-select.tsx
@@ -1,4 +1,5 @@
-import { Label, Select, SelectContent, SelectItem } from '..'
+import { Label, Select } from '@/components'
+
 import { ColorType, ContrastType, FullTheme, ModeType } from './types'
 
 export function ContrastSelect({
@@ -15,7 +16,7 @@ export function ContrastSelect({
   return (
     <div>
       <Label className="text-xs">Contrast</Label>
-      <Select
+      <Select.Root
         name="contrast"
         placeholder="Select a theme contrast"
         value={contrast}
@@ -23,12 +24,12 @@ export function ContrastSelect({
           setTheme(`${mode}-${color}-${contrast}`)
         }}
       >
-        <SelectContent defaultValue={contrast}>
-          <SelectItem value={ContrastType.Standard}>Standard</SelectItem>
-          <SelectItem value={ContrastType.Low}>Low</SelectItem>
-          <SelectItem value={ContrastType.High}>High</SelectItem>
-        </SelectContent>
-      </Select>
+        <Select.Content defaultValue={contrast}>
+          <Select.Item value={ContrastType.Standard}>Standard</Select.Item>
+          <Select.Item value={ContrastType.Low}>Low</Select.Item>
+          <Select.Item value={ContrastType.High}>High</Select.Item>
+        </Select.Content>
+      </Select.Root>
     </div>
   )
 }
diff --git a/packages/ui/src/components/theme-selector/mode-select.tsx b/packages/ui/src/components/theme-selector/mode-select.tsx
index 25e830f087..7454488990 100644
--- a/packages/ui/src/components/theme-selector/mode-select.tsx
+++ b/packages/ui/src/components/theme-selector/mode-select.tsx
@@ -1,4 +1,5 @@
-import { Label, Select, SelectContent, SelectItem } from '..'
+import { Label, Select } from '@/components'
+
 import { ColorType, ContrastType, FullTheme, ModeType } from './types'
 
 export function ModeSelect({
@@ -15,7 +16,7 @@ export function ModeSelect({
   return (
     <div>
       <Label className="text-xs">Mode</Label>
-      <Select
+      <Select.Root
         name="mode"
         placeholder="Select a theme mode"
         value={mode}
@@ -23,12 +24,12 @@ export function ModeSelect({
           setTheme(`${mode}-${color}-${contrast}`)
         }}
       >
-        <SelectContent defaultValue={mode}>
-          <SelectItem value={ModeType.Light}>Light</SelectItem>
-          <SelectItem value={ModeType.Dark}>Dark</SelectItem>
-          <SelectItem value={ModeType.System}>System</SelectItem>
-        </SelectContent>
-      </Select>
+        <Select.Content defaultValue={mode}>
+          <Select.Item value={ModeType.Light}>Light</Select.Item>
+          <Select.Item value={ModeType.Dark}>Dark</Select.Item>
+          <Select.Item value={ModeType.System}>System</Select.Item>
+        </Select.Content>
+      </Select.Root>
     </div>
   )
 }
diff --git a/packages/ui/src/views/labels/components/label-form-color-and-name-group.tsx b/packages/ui/src/views/labels/components/label-form-color-and-name-group.tsx
index 6bb83d4ca3..369f12d7ee 100644
--- a/packages/ui/src/views/labels/components/label-form-color-and-name-group.tsx
+++ b/packages/ui/src/views/labels/components/label-form-color-and-name-group.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { UseFormRegister } from 'react-hook-form'
 
-import { Button, Icon, Input, Select, SelectContent, SelectItem } from '@/components'
+import { Button, Icon, Input, Select } from '@/components'
 import { ColorsEnum, CreateLabelFormFields, TranslationStore } from '@/views'
 
 const SelectColorMarker = {
@@ -50,18 +50,18 @@ export const LabelFormColorAndNameGroup: FC<LabelFormColorAndNameGroupProps> = (
   return (
     <div className="flex gap-x-2.5">
       <div className="w-32 flex-none">
-        <Select name={`color-${name}`} value={colorValue} onValueChange={handleColorChange} error={colorError}>
-          <SelectContent>
+        <Select.Root name={`color-${name}`} value={colorValue} onValueChange={handleColorChange} error={colorError}>
+          <Select.Content>
             {Object.values(ColorsEnum).map(color => (
-              <SelectItem key={color} value={color}>
+              <Select.Item key={color} value={color}>
                 <div className="flex max-w-full items-center gap-x-1.5">
                   <div className={`size-2 rounded-full ${SelectColorMarker[color]}`} />
                   <span className="truncate">{color}</span>
                 </div>
-              </SelectItem>
+              </Select.Item>
             ))}
-          </SelectContent>
-        </Select>
+          </Select.Content>
+        </Select.Root>
       </div>
       <Input
         wrapperClassName="flex-1"
diff --git a/packages/ui/src/views/pipeline-edit/components/pipeline-studio-footer.tsx b/packages/ui/src/views/pipeline-edit/components/pipeline-studio-footer.tsx
index cf554b2165..6e832f26ea 100644
--- a/packages/ui/src/views/pipeline-edit/components/pipeline-studio-footer.tsx
+++ b/packages/ui/src/views/pipeline-edit/components/pipeline-studio-footer.tsx
@@ -1,4 +1,4 @@
-import { Icon, Popover, Select, SelectContent, SelectItem } from '@/components'
+import { Icon, Popover, Select } from '@/components'
 import { cn } from '@utils/cn'
 
 import { PopoverCommitInfo } from './popover-commit-info'
@@ -70,15 +70,15 @@ export const PipelineStudioFooter: React.FC<PipelineStudioFooterProps> = (props:
           <div className={'flex gap-2'}>
             <div className={'flex items-center'}>
               <span className="text-[12px] text-tertiary-background">Branch:</span>
-              <Select value={currentBranch} disabled={branchesLoading} onValueChange={onBranchChange}>
-                <SelectContent>
+              <Select.Root value={currentBranch} disabled={branchesLoading} onValueChange={onBranchChange}>
+                <Select.Content>
                   {branches?.map(branch => (
-                    <SelectItem key={branch} value={branch}>
+                    <Select.Item key={branch} value={branch}>
                       {branch}
-                    </SelectItem>
+                    </Select.Item>
                   ))}
-                </SelectContent>
-              </Select>
+                </Select.Content>
+              </Select.Root>
             </div>
           </div>
         ) : null}
diff --git a/packages/ui/src/views/pipelines/create-pipeline-dialog/create-pipeline-dialog.tsx b/packages/ui/src/views/pipelines/create-pipeline-dialog/create-pipeline-dialog.tsx
index a4ba326946..e9aa15ee3e 100644
--- a/packages/ui/src/views/pipelines/create-pipeline-dialog/create-pipeline-dialog.tsx
+++ b/packages/ui/src/views/pipelines/create-pipeline-dialog/create-pipeline-dialog.tsx
@@ -1,18 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
-import {
-  Alert,
-  Button,
-  ControlGroup,
-  Dialog,
-  Fieldset,
-  FormWrapper,
-  Input,
-  Select,
-  SelectContent,
-  SelectItem
-} from '@/components'
+import { Alert, Button, ControlGroup, Dialog, Fieldset, FormWrapper, Input, Select } from '@/components'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
@@ -116,7 +105,7 @@ export function CreatePipelineDialog(props: CreatePipelineDialogProps) {
 
           <Fieldset>
             <ControlGroup>
-              <Select
+              <Select.Root
                 disabled={isLoadingBranchNames}
                 name="branch"
                 value={branch}
@@ -124,14 +113,14 @@ export function CreatePipelineDialog(props: CreatePipelineDialogProps) {
                 placeholder="Select"
                 label="Branch"
               >
-                <SelectContent>
+                <Select.Content>
                   {branchNames?.map(branchName => (
-                    <SelectItem key={branchName} value={branchName}>
+                    <Select.Item key={branchName} value={branchName}>
                       {branchName}
-                    </SelectItem>
+                    </Select.Item>
                   ))}
-                </SelectContent>
-              </Select>
+                </Select.Content>
+              </Select.Root>
             </ControlGroup>
           </Fieldset>
 
diff --git a/packages/ui/src/views/profile-settings/components/profile-settings-token-create-dialog.tsx b/packages/ui/src/views/profile-settings/components/profile-settings-token-create-dialog.tsx
index 2238023a16..86a49839cb 100644
--- a/packages/ui/src/views/profile-settings/components/profile-settings-token-create-dialog.tsx
+++ b/packages/ui/src/views/profile-settings/components/profile-settings-token-create-dialog.tsx
@@ -1,18 +1,7 @@
 import { FC, useEffect } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 
-import {
-  Alert,
-  Button,
-  CopyButton,
-  Dialog,
-  Fieldset,
-  FormWrapper,
-  Input,
-  Select,
-  SelectContent,
-  SelectItem
-} from '@/components'
+import { Alert, Button, CopyButton, Dialog, Fieldset, FormWrapper, Input, Select } from '@/components'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { TranslationStore } from '@views/repo'
 import { z } from 'zod'
@@ -170,23 +159,23 @@ export const ProfileSettingsTokenCreateDialog: FC<ProfileSettingsTokenCreateDial
           ) : (
             <>
               <Fieldset className="gap-y-0">
-                <Select
+                <Select.Root
                   value={expirationValue}
                   onValueChange={value => handleSelectChange('lifetime', value)}
                   label={t('views:profileSettings.expiration', 'Expiration')}
                   placeholder={t('views:profileSettings.select', 'Select')}
                   error={errors.lifetime?.message?.toString()}
                 >
-                  <SelectContent>
+                  <Select.Content>
                     {expirationOptions.map(expirationOption => {
                       return (
-                        <SelectItem key={expirationOption.value} value={expirationOption.value}>
+                        <Select.Item key={expirationOption.value} value={expirationOption.value}>
                           <span className="text-foreground-1">{expirationOption.label}</span>
-                        </SelectItem>
+                        </Select.Item>
                       )
                     })}
-                  </SelectContent>
-                </Select>
+                  </Select.Content>
+                </Select.Root>
                 {isValid && (
                   <span className="mt-1.5 text-14 text-foreground-3">
                     {watch('lifetime') === 'never' ? (
diff --git a/packages/ui/src/views/project/project-import.tsx b/packages/ui/src/views/project/project-import.tsx
index 335e2e14a6..f5879fac32 100644
--- a/packages/ui/src/views/project/project-import.tsx
+++ b/packages/ui/src/views/project/project-import.tsx
@@ -12,8 +12,6 @@ import {
   Input,
   Option,
   Select,
-  SelectContent,
-  SelectItem,
   Spacer,
   Text
 } from '@/components'
@@ -104,18 +102,18 @@ export function ImportProjectPage({ onFormSubmit, onFormCancel, isLoading, apiEr
           {/* provider */}
           <Fieldset>
             <ControlGroup>
-              <Select
+              <Select.Root
                 name="provider"
                 value={providerValue}
                 onValueChange={value => handleSelectChange('provider', value)}
                 placeholder="Select"
                 label="Git provider"
               >
-                <SelectContent>
+                <Select.Content>
                   {ProviderOptionsEnum &&
                     Object.values(ProviderOptionsEnum)?.map(option => {
                       return (
-                        <SelectItem
+                        <Select.Item
                           key={option}
                           value={option}
                           disabled={
@@ -123,11 +121,11 @@ export function ImportProjectPage({ onFormSubmit, onFormCancel, isLoading, apiEr
                           }
                         >
                           {option}
-                        </SelectItem>
+                        </Select.Item>
                       )
                     })}
-                </SelectContent>
-              </Select>
+                </Select.Content>
+              </Select.Root>
             </ControlGroup>
           </Fieldset>
           {watch('provider') === ProviderOptionsEnum.GITHUB_ENTERPRISE && (
diff --git a/packages/ui/src/views/project/project-members/components/invite-member-dialog.tsx b/packages/ui/src/views/project/project-members/components/invite-member-dialog.tsx
index 8299ea5cad..19eb8c3890 100644
--- a/packages/ui/src/views/project/project-members/components/invite-member-dialog.tsx
+++ b/packages/ui/src/views/project/project-members/components/invite-member-dialog.tsx
@@ -1,18 +1,7 @@
 import { FC, forwardRef, useEffect, useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
 
-import {
-  Alert,
-  Avatar,
-  Button,
-  ControlGroup,
-  Dialog,
-  Fieldset,
-  FormWrapper,
-  Select,
-  SelectContent,
-  SelectItem
-} from '@/components'
+import { Alert, Avatar, Button, ControlGroup, Dialog, Fieldset, FormWrapper, Select } from '@/components'
 import { PrincipalType } from '@/types'
 import { InviteMemberDialogProps, InviteMemberFormFields } from '@/views'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -122,7 +111,7 @@ export const InviteMemberDialog: FC<InviteMemberDialogProps> = ({
         <FormWrapper className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
           <Fieldset>
             <ControlGroup>
-              <Select
+              <Select.Root
                 name="member"
                 value={invitedMember}
                 onValueChange={handleMemberChange}
@@ -133,7 +122,7 @@ export const InviteMemberDialog: FC<InviteMemberDialogProps> = ({
                   !!invitedMemberFullModel && <PrincipalOption isShortView principal={invitedMemberFullModel} />
                 }
               >
-                <SelectContent
+                <Select.Content
                   withSearch
                   searchProps={{
                     placeholder: t('views:repos.search', 'Search'),
@@ -142,15 +131,15 @@ export const InviteMemberDialog: FC<InviteMemberDialogProps> = ({
                   }}
                 >
                   {principals.map(principal => (
-                    <SelectItem key={principal.uid} value={principal.uid} isItemTextAsChild>
+                    <Select.Item key={principal.uid} value={principal.uid} isItemTextAsChild>
                       <PrincipalOption principal={principal} />
-                    </SelectItem>
+                    </Select.Item>
                   ))}
-                </SelectContent>
-              </Select>
+                </Select.Content>
+              </Select.Root>
             </ControlGroup>
             <ControlGroup>
-              <Select
+              <Select.Root
                 name="role"
                 value={memberRole}
                 onValueChange={value => handleSelectChange('role', value)}
@@ -161,17 +150,17 @@ export const InviteMemberDialog: FC<InviteMemberDialogProps> = ({
                   !!selectedRoleFullModel && <span className="text-foreground-1">{selectedRoleFullModel.label}</span>
                 }
               >
-                <SelectContent>
+                <Select.Content>
                   {roleOptions.map(option => (
-                    <SelectItem key={option.uid} value={option.uid} isItemTextAsChild>
+                    <Select.Item key={option.uid} value={option.uid} isItemTextAsChild>
                       <div className="flex cursor-pointer flex-col gap-y-1.5">
                         <span className="leading-none text-foreground-8">{option.label}</span>
                         <span className="leading-tight text-foreground-4">{option.description}</span>
                       </div>
-                    </SelectItem>
+                    </Select.Item>
                   ))}
-                </SelectContent>
-              </Select>
+                </Select.Content>
+              </Select.Root>
             </ControlGroup>
           </Fieldset>
 
diff --git a/packages/ui/src/views/repo/pull-request/details/components/conversation/pull-request-status-select-button.tsx b/packages/ui/src/views/repo/pull-request/details/components/conversation/pull-request-status-select-button.tsx
index db738b0a63..459e499487 100644
--- a/packages/ui/src/views/repo/pull-request/details/components/conversation/pull-request-status-select-button.tsx
+++ b/packages/ui/src/views/repo/pull-request/details/components/conversation/pull-request-status-select-button.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react'
 
-import { Select, SelectContent, SelectItem } from '@components/index'
+import { Select } from '@/components'
 import { useEmitCodeCommentStatus } from '@views/repo/pull-request/hooks/useEmitCodeCommentStatus'
 import { TypesPullReq } from '@views/repo/pull-request/pull-request.types'
 
@@ -19,12 +19,12 @@ interface StatusButtonProps {
 }
 
 const StatusButton = ({ codeCommentStatus, onChange }: StatusButtonProps) => (
-  <Select placeholder={codeCommentStatus} onValueChange={onChange}>
-    <SelectContent>
-      <SelectItem value={CodeCommentState.ACTIVE}>Active</SelectItem>
-      <SelectItem value={CodeCommentState.RESOLVED}>Resolved</SelectItem>
-    </SelectContent>
-  </Select>
+  <Select.Root placeholder={codeCommentStatus} onValueChange={onChange}>
+    <Select.Content>
+      <Select.Item value={CodeCommentState.ACTIVE}>Active</Select.Item>
+      <Select.Item value={CodeCommentState.RESOLVED}>Resolved</Select.Item>
+    </Select.Content>
+  </Select.Root>
 )
 StatusButton.displayName = 'StatusButton'
 
diff --git a/packages/ui/src/views/repo/repo-branch/components/create-branch-dialog.tsx b/packages/ui/src/views/repo/repo-branch/components/create-branch-dialog.tsx
index 652d2d4b75..e0a56cfb19 100644
--- a/packages/ui/src/views/repo/repo-branch/components/create-branch-dialog.tsx
+++ b/packages/ui/src/views/repo/repo-branch/components/create-branch-dialog.tsx
@@ -1,19 +1,7 @@
 import { useEffect, useMemo } from 'react'
 import { useForm } from 'react-hook-form'
 
-import {
-  Alert,
-  Button,
-  ControlGroup,
-  Dialog,
-  Fieldset,
-  FormWrapper,
-  Icon,
-  Input,
-  Select,
-  SelectContent,
-  SelectItem
-} from '@/components'
+import { Alert, Button, ControlGroup, Dialog, Fieldset, FormWrapper, Icon, Input, Select } from '@/components'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 
@@ -118,7 +106,7 @@ export function CreateBranchDialog({
 
           <Fieldset>
             <ControlGroup>
-              <Select
+              <Select.Root
                 name="target"
                 value={targetValue || defaultBranch}
                 onValueChange={value => handleSelectChange('target', value)}
@@ -131,7 +119,7 @@ export function CreateBranchDialog({
                 }
                 disabled={isLoadingBranches || !branches?.length}
               >
-                <SelectContent
+                <Select.Content
                   withSearch
                   searchProps={{
                     placeholder: t('views:repos.search', 'Search'),
@@ -142,16 +130,16 @@ export function CreateBranchDialog({
                   {processedBranches?.map(
                     branch =>
                       branch?.name && (
-                        <SelectItem key={branch.name} value={branch.name as string}>
+                        <Select.Item key={branch.name} value={branch.name as string}>
                           <span className="flex items-center gap-1.5">
                             <Icon name="branch" size={14} />
                             {branch.name}
                           </span>
-                        </SelectItem>
+                        </Select.Item>
                       )
                   )}
-                </SelectContent>
-              </Select>
+                </Select.Content>
+              </Select.Root>
             </ControlGroup>
           </Fieldset>
 
diff --git a/packages/ui/src/views/repo/repo-create/index.tsx b/packages/ui/src/views/repo/repo-create/index.tsx
index e1536a8a54..4d5f8f3956 100644
--- a/packages/ui/src/views/repo/repo-create/index.tsx
+++ b/packages/ui/src/views/repo/repo-create/index.tsx
@@ -15,8 +15,6 @@ import {
   RadioButton,
   RadioGroup,
   Select,
-  SelectContent,
-  SelectItem,
   Spacer,
   StyledLink,
   Text,
@@ -154,7 +152,7 @@ export function RepoCreatePage({
           {/* GITIGNORE */}
           <Fieldset>
             <ControlGroup>
-              <Select
+              <Select.Root
                 name="gitignore"
                 value={gitignoreValue}
                 onValueChange={value => handleSelectChange('gitignore', value)}
@@ -163,20 +161,20 @@ export function RepoCreatePage({
                 error={errors.gitignore?.message?.toString()}
                 caption="Choose which files not to track from a list of templates."
               >
-                <SelectContent>
+                <Select.Content>
                   {!!gitIgnoreOptions &&
                     gitIgnoreOptions.map(option => (
-                      <SelectItem key={option} value={option}>
+                      <Select.Item key={option} value={option}>
                         {option}
-                      </SelectItem>
+                      </Select.Item>
                     ))}
-                </SelectContent>
-              </Select>
+                </Select.Content>
+              </Select.Root>
             </ControlGroup>
 
             {/* LICENSE */}
             <ControlGroup>
-              <Select
+              <Select.Root
                 name="license"
                 value={licenseValue}
                 onValueChange={value => handleSelectChange('license', value)}
@@ -185,15 +183,15 @@ export function RepoCreatePage({
                 error={errors.license?.message?.toString()}
                 caption="A license tells others what they can and can't do with your code."
               >
-                <SelectContent>
+                <Select.Content>
                   {licenseOptions &&
                     licenseOptions?.map(option => (
-                      <SelectItem key={option.value} value={option.value ?? ''}>
+                      <Select.Item key={option.value} value={option.value ?? ''}>
                         {option.label}
-                      </SelectItem>
+                      </Select.Item>
                     ))}
-                </SelectContent>
-              </Select>
+                </Select.Content>
+              </Select.Root>
             </ControlGroup>
           </Fieldset>
 
diff --git a/packages/ui/src/views/repo/repo-import/repo-import-mulitple.tsx b/packages/ui/src/views/repo/repo-import/repo-import-mulitple.tsx
index da709acd11..fc3a70aabb 100644
--- a/packages/ui/src/views/repo/repo-import/repo-import-mulitple.tsx
+++ b/packages/ui/src/views/repo/repo-import/repo-import-mulitple.tsx
@@ -11,8 +11,6 @@ import {
   Input,
   Option,
   Select,
-  SelectContent,
-  SelectItem,
   Spacer,
   Text
 } from '@/components'
@@ -163,24 +161,24 @@ export function RepoImportMultiplePage({
           {/* provider */}
           <Fieldset>
             <ControlGroup>
-              <Select
+              <Select.Root
                 name="provider"
                 value={providerValue}
                 onValueChange={value => handleSelectChange('provider', value)}
                 placeholder="Select"
                 label="Git provider"
               >
-                <SelectContent>
+                <Select.Content>
                   {ProviderOptionsEnum &&
                     Object.values(ProviderOptionsEnum)?.map(option => {
                       return (
-                        <SelectItem key={option} value={option}>
+                        <Select.Item key={option} value={option}>
                           {option}
-                        </SelectItem>
+                        </Select.Item>
                       )
                     })}
-                </SelectContent>
-              </Select>
+                </Select.Content>
+              </Select.Root>
             </ControlGroup>
           </Fieldset>
 
diff --git a/packages/ui/src/views/repo/repo-import/repo-import.tsx b/packages/ui/src/views/repo/repo-import/repo-import.tsx
index 192c0c99c0..fd00daae1e 100644
--- a/packages/ui/src/views/repo/repo-import/repo-import.tsx
+++ b/packages/ui/src/views/repo/repo-import/repo-import.tsx
@@ -12,8 +12,6 @@ import {
   Input,
   Option,
   Select,
-  SelectContent,
-  SelectItem,
   Spacer,
   Text,
   Textarea
@@ -163,24 +161,24 @@ export function RepoImportPage({
           {/* provider */}
           <Fieldset>
             <ControlGroup>
-              <Select
+              <Select.Root
                 name="provider"
                 value={providerValue}
                 onValueChange={value => handleSelectChange('provider', value)}
                 placeholder="Select"
                 label="Provider"
               >
-                <SelectContent>
+                <Select.Content>
                   {ProviderOptionsEnum &&
                     Object.values(ProviderOptionsEnum)?.map(option => {
                       return (
-                        <SelectItem key={option} value={option}>
+                        <Select.Item key={option} value={option}>
                           {option}
-                        </SelectItem>
+                        </Select.Item>
                       )
                     })}
-                </SelectContent>
-              </Select>
+                </Select.Content>
+              </Select.Root>
             </ControlGroup>
           </Fieldset>