diff --git a/packages/design-system/lib/components/Select/Select.stories.tsx b/packages/design-system/lib/components/Select/Select.stories.tsx
new file mode 100644
index 000000000..6ac4240e9
--- /dev/null
+++ b/packages/design-system/lib/components/Select/Select.stories.tsx
@@ -0,0 +1,67 @@
+import 'react-material-symbols/rounded'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Select } from './Select'
+
+const meta: Meta<typeof Select> = {
+  title: 'Components/Select',
+  component: Select,
+  argTypes: {},
+}
+
+export default meta
+
+type Story = StoryObj<typeof Select>
+
+const items = [
+  { label: 'Foo', value: 'foo' },
+  { label: 'Bar', value: 'bar' },
+  { label: 'Baz', value: 'baz' },
+]
+
+export const Default: Story = {
+  args: {
+    items,
+    label: 'Select an item',
+    name: 'foo',
+  },
+}
+
+export const DefaultSelected: Story = {
+  args: {
+    items,
+    label: 'Select an item',
+    name: 'foo',
+    defaultSelectedKey: 'foo',
+  },
+}
+
+export const Icons: Story = {
+  args: {
+    items,
+    label: 'Select an item',
+    name: 'foo',
+    icon: 'star',
+    itemIcon: 'check',
+  },
+}
+
+export const Filtering: Story = {
+  args: {
+    items,
+    label: 'Select an item',
+    name: 'foo',
+    enableFiltering: true,
+  },
+}
+
+export const FilteringSelected: Story = {
+  args: {
+    items,
+    label: 'Select an item',
+    name: 'foo',
+    enableFiltering: true,
+    defaultSelectedKey: 'foo',
+  },
+}
diff --git a/packages/design-system/lib/components/Select/Select.tsx b/packages/design-system/lib/components/Select/Select.tsx
new file mode 100644
index 000000000..0682939b2
--- /dev/null
+++ b/packages/design-system/lib/components/Select/Select.tsx
@@ -0,0 +1,107 @@
+import {
+  Select as AriaSelect,
+  SelectValue,
+  Popover,
+  ListBox,
+  Button,
+} from 'react-aria-components'
+import { cx } from 'class-variance-authority'
+
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { Typography } from '../Typography'
+import { SelectItem } from './SelectItem'
+import { SelectFilter } from './SelectFilter'
+
+import type { SelectProps, SelectFilterProps } from './types'
+
+import styles from './select.module.css'
+
+export function Select({
+  name,
+  label,
+  items,
+  isDisabled,
+  icon,
+  itemIcon,
+  ...props
+}: SelectProps | SelectFilterProps) {
+  if ('enableFiltering' in props) {
+    return (
+      <SelectFilter
+        name={name}
+        label={label}
+        items={items}
+        icon={icon}
+        itemIcon={itemIcon}
+        {...props}
+      />
+    )
+  }
+  const iconColor = isDisabled ? 'Icon/Interactive/Disabled' : 'Icon/Default'
+
+  return (
+    <AriaSelect
+      className={styles.select}
+      name={name}
+      aria-label={label}
+      isDisabled={isDisabled}
+      {...props}
+    >
+      <Button className={cx(styles.inner, styles.button)}>
+        {icon ? (
+          <MaterialIcon
+            icon={icon}
+            size={24}
+            color={iconColor}
+            aria-hidden="true"
+          />
+        ) : null}
+        <SelectValue className={cx(styles.displayText, styles.selectValue)}>
+          {({ selectedText }) => {
+            return (
+              <>
+                <Typography
+                  variant={
+                    selectedText
+                      ? 'Label/xsRegular'
+                      : 'Body/Paragraph/mdRegular'
+                  }
+                >
+                  <span className={styles.label}>{label}</span>
+                </Typography>
+                {selectedText ? (
+                  <Typography variant="Body/Paragraph/mdRegular">
+                    <span>{selectedText}</span>
+                  </Typography>
+                ) : null}
+              </>
+            )
+          }}
+        </SelectValue>
+
+        <MaterialIcon
+          icon="chevron_right"
+          size={24}
+          color={iconColor}
+          aria-hidden="true"
+          className={styles.chevron}
+        />
+      </Button>
+
+      <Popover className={styles.popover} shouldFlip={false}>
+        <ListBox className={styles.listBox}>
+          {items.map((item) => (
+            <SelectItem
+              key={item.value}
+              id={item.value}
+              icon={item.icon || itemIcon}
+              isDisabled={item.isDisabled}
+            >
+              {item.label}
+            </SelectItem>
+          ))}
+        </ListBox>
+      </Popover>
+    </AriaSelect>
+  )
+}
diff --git a/packages/design-system/lib/components/Select/SelectFilter.tsx b/packages/design-system/lib/components/Select/SelectFilter.tsx
new file mode 100644
index 000000000..42a6e5514
--- /dev/null
+++ b/packages/design-system/lib/components/Select/SelectFilter.tsx
@@ -0,0 +1,105 @@
+import {
+  Button,
+  ComboBox,
+  Input,
+  Key,
+  ListBox,
+  Popover,
+} from 'react-aria-components'
+import { useState } from 'react'
+
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { Typography } from '../Typography'
+import { SelectItem } from './SelectItem'
+
+import type { SelectFilterProps } from './types'
+
+import styles from './select.module.css'
+
+export function SelectFilter({
+  name,
+  label,
+  items,
+  isDisabled,
+  icon,
+  itemIcon,
+  defaultSelectedKey,
+  onSelectionChange,
+  ...props
+}: SelectFilterProps) {
+  const [focus, setFocus] = useState(false)
+  const [value, setValue] = useState<Key | null>(defaultSelectedKey ?? null)
+  const iconColor = isDisabled ? 'Icon/Interactive/Disabled' : 'Icon/Default'
+
+  return (
+    <ComboBox
+      className={styles.select}
+      name={name}
+      aria-label={label}
+      isDisabled={isDisabled}
+      onSelectionChange={(val) => {
+        setValue(val)
+        if (onSelectionChange) {
+          onSelectionChange(val)
+        }
+      }}
+      onFocus={() => setFocus(true)}
+      onBlur={() => setFocus(false)}
+      defaultSelectedKey={defaultSelectedKey}
+      {...props}
+    >
+      <label className={styles.inner}>
+        {icon ? (
+          <MaterialIcon
+            icon={icon}
+            size={24}
+            color={iconColor}
+            aria-hidden="true"
+          />
+        ) : null}
+
+        <span className={styles.displayText}>
+          <Typography
+            variant={
+              focus || value ? 'Label/xsRegular' : 'Body/Paragraph/mdRegular'
+            }
+          >
+            <span className={styles.label}>{label}</span>
+          </Typography>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <Input className={styles.input} />
+          </Typography>
+        </span>
+        <Button className={styles.button}>
+          <MaterialIcon
+            icon="chevron_right"
+            size={24}
+            color={iconColor}
+            aria-hidden="true"
+            className={styles.chevron}
+          />
+        </Button>
+      </label>
+
+      <Popover
+        className={styles.popover}
+        shouldFlip={false}
+        crossOffset={icon ? -40 : -8}
+        offset={22}
+      >
+        <ListBox className={styles.listBox}>
+          {items.map((item) => (
+            <SelectItem
+              key={item.value}
+              id={item.value}
+              icon={item.icon || itemIcon}
+              isDisabled={item.isDisabled}
+            >
+              {item.label}
+            </SelectItem>
+          ))}
+        </ListBox>
+      </Popover>
+    </ComboBox>
+  )
+}
diff --git a/packages/design-system/lib/components/Select/SelectItem.tsx b/packages/design-system/lib/components/Select/SelectItem.tsx
new file mode 100644
index 000000000..0a2d8a631
--- /dev/null
+++ b/packages/design-system/lib/components/Select/SelectItem.tsx
@@ -0,0 +1,43 @@
+import { ListBoxItem } from 'react-aria-components'
+import { Typography } from '../Typography'
+import styles from './select.module.css'
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { SelectItemProps } from './types'
+
+export function SelectItem({
+  children,
+  icon,
+  isDisabled,
+  ...props
+}: SelectItemProps) {
+  const iconColor = isDisabled ? 'Icon/Interactive/Disabled' : 'Icon/Default'
+
+  return (
+    <ListBoxItem
+      className={styles.listBoxItem}
+      textValue={children}
+      isDisabled={isDisabled}
+      {...props}
+    >
+      {({ isSelected }) => (
+        <>
+          {icon ? (
+            <MaterialIcon
+              icon={icon}
+              size={24}
+              color={iconColor}
+              aria-hidden="true"
+            />
+          ) : null}
+          <Typography
+            variant={
+              isSelected ? 'Body/Paragraph/mdBold' : 'Body/Paragraph/mdRegular'
+            }
+          >
+            <span>{children}</span>
+          </Typography>
+        </>
+      )}
+    </ListBoxItem>
+  )
+}
diff --git a/packages/design-system/lib/components/Select/index.ts b/packages/design-system/lib/components/Select/index.ts
new file mode 100644
index 000000000..20fbbe724
--- /dev/null
+++ b/packages/design-system/lib/components/Select/index.ts
@@ -0,0 +1,3 @@
+export { Select } from './Select'
+export { SelectItem } from './SelectItem'
+export { SelectFilter } from './SelectFilter'
diff --git a/packages/design-system/lib/components/Select/select.module.css b/packages/design-system/lib/components/Select/select.module.css
new file mode 100644
index 000000000..c56960e97
--- /dev/null
+++ b/packages/design-system/lib/components/Select/select.module.css
@@ -0,0 +1,134 @@
+.select {
+  position: relative;
+  background-color: var(--Surface-UI-Fill-Default);
+  border: 1px solid var(--Border-Interactive-Default);
+  border-radius: var(--Corner-radius-md);
+
+  &[data-required] .label::after {
+    content: ' *';
+  }
+  &[data-open] .chevron {
+    rotate: -90deg;
+  }
+  &[data-focused] {
+    border-color: var(--Border-Interactive-Focus);
+
+    .button,
+    .input {
+      outline: none;
+    }
+    .input {
+      position: unset;
+    }
+    .label {
+      color: var(--Text-Interactive-Focus);
+    }
+  }
+  &[data-disabled] {
+    .inner {
+      background-color: var(--Surface-Primary-Disabled);
+      color: var(--Text-Interactive-Disabled);
+    }
+    .button,
+    .input,
+    .label,
+    .selectValue {
+      color: var(--Text-Interactive-Disabled);
+    }
+  }
+  &[data-invalid] {
+    border-color: var(--Border-Interactive-Error);
+  }
+}
+
+.chevron {
+  rotate: 90deg;
+}
+
+.inner {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x1);
+  width: 100%;
+  height: 56px;
+  padding: var(--Space-x15);
+  box-sizing: border-box;
+
+  .button {
+    padding: 0;
+  }
+}
+
+.button,
+.input {
+  background: none;
+  border: 0;
+}
+
+.input {
+  position: absolute;
+  padding: 0;
+
+  &[value]:not([value='']) {
+    position: unset;
+  }
+}
+
+.displayText {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--Space-x05) / 2);
+  flex: 1;
+  justify-content: center;
+  height: 100%;
+
+  &:has(.input) {
+    cursor: text;
+  }
+}
+
+.selectValue {
+  align-items: flex-start;
+  color: var(--Text-Default);
+}
+
+.label {
+  color: var(--Text-Interactive-Placeholder);
+}
+
+.popover {
+  background-color: var(--Surface-Primary-Default);
+  border-radius: var(--Corner-radius-md);
+  box-shadow: 0 0 14px 6px rgb(0 0 0 / 10%);
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+  overflow: auto;
+  padding: var(--Space-x2);
+  outline: none;
+  min-width: 280px;
+}
+
+.listBox {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+  outline: none;
+}
+
+.listBoxItem {
+  padding: var(--Space-x1) var(--Space-x1) var(--Space-x1) var(--Space-x15);
+  color: var(--Text-Default);
+  border-radius: var(--Corner-radius-md);
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x1);
+
+  &[data-focused] {
+    outline: none;
+  }
+  &[data-focused],
+  &[data-hovered] {
+    background-color: var(--Surface-Primary-Hover);
+  }
+}
diff --git a/packages/design-system/lib/components/Select/types.ts b/packages/design-system/lib/components/Select/types.ts
new file mode 100644
index 000000000..49a40ff8e
--- /dev/null
+++ b/packages/design-system/lib/components/Select/types.ts
@@ -0,0 +1,34 @@
+import { ComponentProps } from 'react'
+import { ComboBox, Key, ListBoxItem, Select } from 'react-aria-components'
+import { MaterialIconProps } from '../Icons/MaterialIcon'
+
+interface Item extends Record<string, unknown> {
+  label: string
+  value: Key
+  isDisabled?: boolean
+  icon?: MaterialIconProps['icon']
+}
+
+export interface SelectProps extends ComponentProps<typeof Select> {
+  icon?: MaterialIconProps['icon']
+  itemIcon?: MaterialIconProps['icon']
+  items: Item[]
+  name: string
+  label: string
+  onSelectionChange?: (key: Key | null) => void
+}
+
+export interface SelectItemProps extends ComponentProps<typeof ListBoxItem> {
+  icon?: MaterialIconProps['icon']
+  children: string
+}
+
+export interface SelectFilterProps extends ComponentProps<typeof ComboBox> {
+  icon?: MaterialIconProps['icon']
+  itemIcon?: MaterialIconProps['icon']
+  items: Item[]
+  name: string
+  label: string
+  onSelectionChange?: (key: Key | null) => void
+  enableFiltering: boolean
+}
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 051a1bcb5..1aad0512e 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -9,6 +9,7 @@
     "./ChipButton": "./dist/components/ChipButton/index.js",
     "./ChipLink": "./dist/components/ChipLink/index.js",
     "./Chips": "./dist/components/Chips/index.js",
+    "./Select": "./dist/components/Select/index.js",
     "./Typography": "./dist/components/Typography/index.js",
     "./RegularRateCard": "./dist/components/RateCard/Regular/index.js",
     "./CampaignRateCard": "./dist/components/RateCard/Campaign/index.js",