diff --git a/src/data/types.ts b/src/data/types.ts
index b82b692..6e46f24 100644
--- a/src/data/types.ts
+++ b/src/data/types.ts
@@ -19,7 +19,7 @@ export type AtlasBundle = {
   /** The unique reference or ID to this entry */
   id: string;
   /** The platform for which the bundle was created */
-  platform: 'android' | 'ios' | 'web' | 'server' | 'unknown';
+  platform: 'android' | 'ios' | 'web' | 'unknown';
   /** The environment this bundle is compiled for */
   environment: 'client' | 'node' | 'react-server';
   /** The absolute path to the root of the project */
diff --git a/webui/src/app/--/bundles/index+api.ts b/webui/src/app/--/bundles/index+api.ts
index 78254b8..3aef289 100644
--- a/webui/src/app/--/bundles/index+api.ts
+++ b/webui/src/app/--/bundles/index+api.ts
@@ -1,9 +1,8 @@
 import { getSource } from '~/utils/atlas';
-import type { PartialAtlasBundle } from '~core/data/types';
 
 export async function GET() {
   try {
-    const bundles = (await getSource().listBundles()).sort(sortBundlesByPlatform);
+    const bundles = await getSource().listBundles();
     const bundlesWithRelativeEntry = bundles.map((bundle) => ({
       ...bundle,
       // TODO(cedric): this is a temporary workaround to make entry points look better on Windows
@@ -19,9 +18,3 @@ export async function GET() {
     return Response.json({ error: error.message }, { status: 406 });
   }
 }
-
-function sortBundlesByPlatform(a: PartialAtlasBundle, b: PartialAtlasBundle) {
-  if (a.platform === 'server') return 1;
-  if (b.platform === 'server') return -1;
-  return 0;
-}
diff --git a/webui/src/app/_layout.tsx b/webui/src/app/_layout.tsx
index d01d338..ae957ad 100644
--- a/webui/src/app/_layout.tsx
+++ b/webui/src/app/_layout.tsx
@@ -5,6 +5,7 @@ import { HmrProvider } from '~/providers/hmr';
 import { QueryProvider } from '~/providers/query';
 import { ThemeProvider } from '~/providers/theme';
 import { ToastProvider } from '~/ui/Toast';
+import { TooltipProvider } from '~/ui/Tooltip';
 
 // Import the Expo-required radix styles
 import '@radix-ui/colors/green.css';
@@ -34,12 +35,14 @@ export default function RootLayout() {
   return (
     <QueryProvider>
       <ThemeProvider>
-        <BundleProvider>
-          <ToastProvider />
-          <HmrProvider>
-            <Slot />
-          </HmrProvider>
-        </BundleProvider>
+        <TooltipProvider delayDuration={200}>
+          <BundleProvider>
+            <ToastProvider />
+            <HmrProvider>
+              <Slot />
+            </HmrProvider>
+          </BundleProvider>
+        </TooltipProvider>
       </ThemeProvider>
     </QueryProvider>
   );
diff --git a/webui/src/components/BundleSelectForm.tsx b/webui/src/components/BundleSelectForm.tsx
index b23fdd0..2eeeec0 100644
--- a/webui/src/components/BundleSelectForm.tsx
+++ b/webui/src/components/BundleSelectForm.tsx
@@ -1,63 +1,88 @@
-import * as Select from '@radix-ui/react-select';
-import { cx } from 'class-variance-authority';
 import { useRouter } from 'expo-router';
-// @ts-expect-error
-import ChevronDownIcon from 'lucide-react/dist/esm/icons/chevron-down';
+import { useMemo } from 'react';
 
-import { BundleTag } from '~/components/BundleTag';
+import { EnvironmentIcon } from '~/components/EnvironmentIcon';
+import { PlatformName } from '~/components/PlatformName';
 import { useBundle } from '~/providers/bundle';
-import { Button } from '~/ui/Button';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '~/ui/Select';
 import { relativeBundlePath } from '~/utils/bundle';
+import type { PartialAtlasBundle } from '~core/data/types';
 
 export function BundleSelectForm() {
   const router = useRouter();
   const { bundle, bundles } = useBundle();
+  const bundlesByPlatform = useMemo(() => groupBundlesByPlatform(bundles), [bundles]);
 
   return (
-    <Select.Root value={bundle.id} onValueChange={(bundle) => router.setParams({ bundle })}>
-      <Select.Trigger asChild>
-        <Button variant="quaternary" size="sm">
-          <BundleTag
-            className="mr-2"
-            size="xs"
-            platform={bundle.platform}
-            environment={bundle.environment}
-          />
-          <Select.Value placeholder="Select bundle to inspect" />
-          <Select.Icon className="text-icon-default">
-            <ChevronDownIcon size={16} className="m-1 mr-0 align-middle" />
-          </Select.Icon>
-        </Button>
-      </Select.Trigger>
-      <Select.Portal>
-        <Select.Content
-          side="bottom"
-          collisionPadding={{ left: 16, right: 16 }}
-          className={cx(
-            'flex min-w-[220px] flex-col gap-0.5 rounded-md border border-default bg-default p-1 shadow-md',
-            'transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:duration-300',
-            'data-[state=closed]:fade-out data-[state=closed]:slide-out-to-top-1/3 data-[state=open]:fade-in data-[state=open]:slide-in-from-top-1/3'
-          )}
-        >
-          <Select.Viewport className="py-2">
-            {bundles.map((item) => (
-              <div key={item.id}>
-                <Select.Item value={item.id} asChild>
-                  <Button variant="quaternary" size="sm" className="w-full !justify-start my-0.5">
-                    <BundleTag
-                      className="mr-2"
-                      size="xs"
-                      platform={item.platform}
-                      environment={item.environment}
-                    />
-                    <Select.ItemText>{relativeBundlePath(item, item.entryPoint)}</Select.ItemText>
-                  </Button>
-                </Select.Item>
-              </div>
-            ))}
-          </Select.Viewport>
-        </Select.Content>
-      </Select.Portal>
-    </Select.Root>
+    <Select value={bundle.id} onValueChange={(bundle) => router.setParams({ bundle })}>
+      <SelectTrigger className="!w-auto">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent side="bottom" collisionPadding={{ left: 16, right: 16 }}>
+        {bundlesByPlatform.map(([platform, bundles]) => {
+          // Hide empty `unknown` platforms. If there are unknown platforms, render them.
+          if (platform === 'unknown' && bundles.length === 0) {
+            return null;
+          }
+
+          return (
+            <SelectGroup key={platform}>
+              <SelectLabel className="m-0.5 capitalize">
+                <PlatformName platform={platform} />
+              </SelectLabel>
+              {bundles.length === 0 ? (
+                <SelectItem disabled value="none" className="italic mb-1">
+                  No bundle available for this platform
+                </SelectItem>
+              ) : (
+                bundles.map((item) => (
+                  <SelectItem key={item.id} value={item.id}>
+                    <span className="inline-flex items-center select-none mb-0.5">
+                      <PlatformName platform={item.platform}>
+                        <EnvironmentIcon environment={item.environment} size={16} />
+                      </PlatformName>
+                      <span className="ml-2 mr-1">{relativeBundlePath(item, item.entryPoint)}</span>
+                    </span>
+                  </SelectItem>
+                ))
+              )}
+            </SelectGroup>
+          );
+        })}
+      </SelectContent>
+    </Select>
+  );
+}
+
+function groupBundlesByPlatform(bundles: PartialAtlasBundle[]) {
+  const groups: Record<PartialAtlasBundle['platform'], PartialAtlasBundle[]> = {
+    android: [],
+    ios: [],
+    web: [],
+    unknown: [],
+  };
+
+  for (const bundle of bundles) {
+    if (groups[bundle.platform]) {
+      groups[bundle.platform]!.push(bundle);
+    }
+  }
+
+  return Object.entries(groups).map(
+    ([platform, bundles]) =>
+      [platform as PartialAtlasBundle['platform'], bundles.sort(sortBundlesByEnvironment)] as const
   );
 }
+
+/** Sort all bundles by environment, in alphabetical order "client -> node -> react-server" */
+function sortBundlesByEnvironment(a: PartialAtlasBundle, b: PartialAtlasBundle) {
+  return a.environment.localeCompare(b.environment);
+}
diff --git a/webui/src/components/BundleTag.tsx b/webui/src/components/BundleTag.tsx
index 0b389f6..f902d3e 100644
--- a/webui/src/components/BundleTag.tsx
+++ b/webui/src/components/BundleTag.tsx
@@ -1,23 +1,26 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import { type ComponentProps } from 'react';
 
+import { EnvironmentIcon } from '~/components/EnvironmentIcon';
+import { EnvironmentName } from '~/components/EnvironmentName';
+import { PlatformName } from '~/components/PlatformName';
 import { Tag } from '~/ui/Tag';
+import { Tooltip, TooltipContent, TooltipTrigger } from '~/ui/Tooltip';
 import type { AtlasBundle } from '~core/data/types';
 
 const bundleTagVariants = cva('', {
   variants: {
     platform: {
-      android: 'bg-palette-green3 text-palette-green11',
-      ios: 'bg-palette-blue3 text-palette-blue11',
-      web: 'bg-palette-orange3 text-palette-orange11',
-      server: 'bg-palette-orange3 text-palette-orange11',
+      android: 'bg-palette-green3',
+      ios: 'bg-palette-blue3',
+      web: 'bg-palette-orange3',
       unknown: '',
-    },
+    } satisfies Record<AtlasBundle['platform'], string>,
     environment: {
       client: '',
-      node: 'bg-palette-orange3 text-palette-orange11',
-      'react-server': 'bg-palette-green3 text-palette-green11',
-    },
+      node: 'bg-palette-orange3',
+      'react-server': 'bg-palette-orange3',
+    } satisfies Record<AtlasBundle['environment'], string>,
   },
   defaultVariants: {
     platform: 'unknown', // Default platform value, see MetroGraphSource
@@ -25,20 +28,6 @@ const bundleTagVariants = cva('', {
   },
 });
 
-const platformChildren: Record<AtlasBundle['platform'], string> = {
-  android: 'Android',
-  ios: 'iOS',
-  server: 'Server',
-  web: 'Web',
-  unknown: '???',
-};
-
-const environmentChildren: Record<AtlasBundle['environment'], string> = {
-  client: 'Client',
-  node: 'SSR',
-  'react-server': 'RSC',
-};
-
 type BundelTagProps = Omit<
   ComponentProps<typeof Tag> & VariantProps<typeof bundleTagVariants>,
   'children'
@@ -46,27 +35,54 @@ type BundelTagProps = Omit<
 
 export function BundleTag({ className, platform, environment, ...props }: BundelTagProps) {
   return (
-    <Tag
-      className={bundleTagVariants({ platform, environment, className })}
-      variant="none"
-      {...props}
-    >
-      {getBundelTagChildren({ platform, environment })}
-    </Tag>
+    <Tooltip>
+      <TooltipTrigger>
+        <Tag
+          className={bundleTagVariants({ platform, environment, className })}
+          variant="none"
+          {...props}
+        >
+          <PlatformName platform={platform!} className="inline-flex items-center gap-1.5">
+            <PlatformName platform={platform!} />
+            <span>×</span>
+            <EnvironmentName environment={environment!} />
+            <EnvironmentIcon environment={environment!} size={14} />
+          </PlatformName>
+        </Tag>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>
+          Expo creates bundles for every platform containing only{' '}
+          <a
+            className="text-link hover:underline"
+            href="https://reactnative.dev/docs/platform-specific-code"
+            target="_blank"
+          >
+            platform-specific code
+          </a>
+          , like Android, iOS, and Web. Some platforms can also run in multiple environments.
+        </p>
+        <p className="my-2">
+          Atlas marks every bundle with both the platform and target environment for which the
+          bundle is built.
+        </p>
+        <p className="mt-2">
+          <ul className="list-disc">
+            <li className="inline-flex items-center gap-1">
+              <EnvironmentIcon environment="client" size={14} /> Client — Bundles that run on
+              device.
+            </li>
+            <li className="inline-flex items-center gap-1">
+              <EnvironmentIcon environment="node" size={14} /> SSR — Bundles that only run on
+              server.
+            </li>
+            <li className="inline-flex items-center gap-1">
+              <EnvironmentIcon environment="react-server" size={14} /> RSC — React server component
+              bundles.
+            </li>
+          </ul>
+        </p>
+      </TooltipContent>
+    </Tooltip>
   );
 }
-
-function getBundelTagChildren(props: BundelTagProps) {
-  const children: string[] = [];
-
-  if (props.platform) {
-    children.push(platformChildren[props.platform]);
-  }
-
-  // Only add the environment specifier if it's not bundled for the client
-  if (props.environment && props.environment !== 'client') {
-    children.push(environmentChildren[props.environment]);
-  }
-
-  return children.join(' × ');
-}
diff --git a/webui/src/components/EnvironmentIcon.tsx b/webui/src/components/EnvironmentIcon.tsx
new file mode 100644
index 0000000..7726be9
--- /dev/null
+++ b/webui/src/components/EnvironmentIcon.tsx
@@ -0,0 +1,21 @@
+import type { LucideProps } from 'lucide-react';
+
+import type { AtlasBundle } from '~core/data/types';
+
+type EnvironmentIconProps = Omit<
+  LucideProps & {
+    environment: AtlasBundle['environment'];
+  },
+  'children'
+>;
+
+const iconsByEnvironment: Record<AtlasBundle['environment'], any> = {
+  client: require('lucide-react/dist/esm/icons/tablet-smartphone').default,
+  node: require('lucide-react/dist/esm/icons/hexagon').default,
+  'react-server': require('lucide-react/dist/esm/icons/server').default,
+};
+
+export function EnvironmentIcon({ className, environment, ...props }: EnvironmentIconProps) {
+  const Icon = iconsByEnvironment[environment];
+  return <Icon {...props} />;
+}
diff --git a/webui/src/components/EnvironmentName.tsx b/webui/src/components/EnvironmentName.tsx
new file mode 100644
index 0000000..d070576
--- /dev/null
+++ b/webui/src/components/EnvironmentName.tsx
@@ -0,0 +1,18 @@
+import type { PropsWithChildren } from 'react';
+
+import type { AtlasBundle } from '~core/data/types';
+
+type EnvironmentNameProps = PropsWithChildren<{
+  environment: AtlasBundle['environment'];
+  className?: string;
+}>;
+
+export const environmentNames: Record<AtlasBundle['environment'], string> = {
+  client: 'Client',
+  node: 'SSR',
+  'react-server': 'RSC',
+};
+
+export function EnvironmentName({ children, environment, ...props }: EnvironmentNameProps) {
+  return <span {...props}>{children || environmentNames[environment]}</span>;
+}
diff --git a/webui/src/components/FileSize.tsx b/webui/src/components/FileSize.tsx
index a4a8e90..01ddd1c 100644
--- a/webui/src/components/FileSize.tsx
+++ b/webui/src/components/FileSize.tsx
@@ -1,7 +1,7 @@
 // @ts-expect-error
 import AsteriskIcon from 'lucide-react/dist/esm/icons/asterisk';
 
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '~/ui/Tooltip';
+import { Tooltip, TooltipContent, TooltipTrigger } from '~/ui/Tooltip';
 
 type BundleFileSizeProps = {
   /** The size of the files or bundle, in bytes */
@@ -12,32 +12,30 @@ export function FileSize(props: BundleFileSizeProps) {
   return (
     <div className="inline-flex flex-row items-start">
       {formatByteSize(props.byteSize)}
-      <TooltipProvider delayDuration={0}>
-        <Tooltip>
-          <TooltipTrigger className="group">
-            <AsteriskIcon
-              className="hover:color-info group-data-[state=delayed-open]:color-info group-data-[state=instant-open]:color-info"
-              size={12}
-            />
-          </TooltipTrigger>
-          <TooltipContent className="border-info text-quaternary shadow-md">
-            <p className="mb-2">
-              All file sizes are calculated based on the transpiled JavaScript byte size.
-            </p>
-            <p className="">
-              While these sizes might differ from actual bundle size when using{' '}
-              <a
-                className="text-link hover:underline"
-                href="https://github.com/facebook/hermes/blob/main/doc/Design.md"
-                target="_blank"
-              >
-                Hermes Bytecode (HBC)
-              </a>
-              , the relative proportions are still correct.
-            </p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger className="group">
+          <AsteriskIcon
+            className="hover:color-info group-data-[state=delayed-open]:color-info group-data-[state=instant-open]:color-info"
+            size={12}
+          />
+        </TooltipTrigger>
+        <TooltipContent className="border-info text-quaternary shadow-md">
+          <p className="mb-2">
+            All file sizes are calculated based on the transpiled JavaScript byte size.
+          </p>
+          <p>
+            While these sizes might differ from actual bundle size when using{' '}
+            <a
+              className="text-link hover:underline"
+              href="https://github.com/facebook/hermes/blob/main/doc/Design.md"
+              target="_blank"
+            >
+              Hermes Bytecode (HBC)
+            </a>
+            , the relative proportions are still correct.
+          </p>
+        </TooltipContent>
+      </Tooltip>
     </div>
   );
 }
diff --git a/webui/src/components/PlatformName.tsx b/webui/src/components/PlatformName.tsx
new file mode 100644
index 0000000..455d47f
--- /dev/null
+++ b/webui/src/components/PlatformName.tsx
@@ -0,0 +1,38 @@
+import { cva } from 'class-variance-authority';
+import type { PropsWithChildren } from 'react';
+
+import type { AtlasBundle } from '~core/data/types';
+
+type PlatformNameProps = PropsWithChildren<{
+  platform: AtlasBundle['platform'];
+  className?: string;
+}>;
+
+export const platformVariants = cva('', {
+  variants: {
+    platform: {
+      android: 'text-palette-green11',
+      ios: 'text-palette-blue11',
+      web: 'text-palette-orange11',
+      unknown: 'text-secondary',
+    } satisfies Record<AtlasBundle['platform'], string>,
+  },
+  defaultVariants: {
+    platform: 'unknown',
+  },
+});
+
+export const platformNames: Record<AtlasBundle['platform'], string> = {
+  android: 'Android',
+  ios: 'iOS',
+  web: 'Web',
+  unknown: 'Unknown',
+};
+
+export function PlatformName({ children, className, platform }: PlatformNameProps) {
+  return (
+    <span className={platformVariants({ className, platform })}>
+      {children || platformNames[platform]}
+    </span>
+  );
+}
diff --git a/webui/src/ui/Select.tsx b/webui/src/ui/Select.tsx
new file mode 100644
index 0000000..cf4a6a3
--- /dev/null
+++ b/webui/src/ui/Select.tsx
@@ -0,0 +1,154 @@
+// see: https://ui.shadcn.com/docs/components/select
+
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { cx } from 'class-variance-authority';
+// @ts-expect-error
+import CheckIcon from 'lucide-react/dist/esm/icons/check';
+// @ts-expect-error
+import ChevronDownIcon from 'lucide-react/dist/esm/icons/chevron-down';
+// @ts-expect-error
+import ChevronUpIcon from 'lucide-react/dist/esm/icons/chevron-up';
+import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react';
+
+export const Select = SelectPrimitive.Root;
+
+export const SelectGroup = SelectPrimitive.Group;
+
+export const SelectValue = SelectPrimitive.Value;
+
+export const SelectTrigger = forwardRef<
+  ElementRef<typeof SelectPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cx(
+      'h-10 px-3 py-2 w-full flex items-center justify-between whitespace-nowrap group',
+      'text-sm shadow-sm border rounded-md border-default bg-transparent hover:bg-subtle focus:bg-subtle transition-colors ring-offset-background',
+      'hover:text-default data-[state=closed]:text-secondary focus:outline-none focus:ring-1 focus:ring-ring',
+      'disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDownIcon className="h-4 w-4 text-icon-secondary transition-transform duration-200 group-data-[state=open]:rotate-180" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+export const SelectScrollUpButton = forwardRef<
+  ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cx('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronUpIcon className="text-icon-default" size={16} />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+export const SelectScrollDownButton = forwardRef<
+  ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cx('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronDownIcon className="text-icon-default" size={16} />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+export const SelectContent = forwardRef<
+  ElementRef<typeof SelectPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cx(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-default bg-default text-popover-foreground shadow-md ',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'data-[side=bottom]:slide-in-from-top-1/3 data-[side=left]:slide-in-from-right-1/3 data-[side=right]:slide-in-from-left-1/3 data-[side=top]:slide-in-from-bottom-1/3',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cx(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+export const SelectLabel = forwardRef<
+  ElementRef<typeof SelectPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cx(
+      'px-2 py-1 text-2xs leading-[1.6154] tracking-[-0.003rem] font-semibold text-secondary truncate',
+      className
+    )}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+export const SelectItem = forwardRef<
+  ElementRef<typeof SelectPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cx(
+      'relative w-full py-1.5 pl-2 pr-8 flex items-center cursor-pointer select-none rounded-sm text-sm text-secondary outline-none transition-colors',
+      'hover:bg-subtle focus:bg-subtle focus:text-default hover:text-default',
+      'data-[state=checked]:bg-subtle data-[state=checked]:text-default data-[state=checked]:cursor-default',
+      'data-[disabled]:cursor-default data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4 text-icon-secondary" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+export const SelectSeparator = forwardRef<
+  ElementRef<typeof SelectPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cx('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;