diff --git a/src/common/components/Form/Select.tsx b/src/common/components/Form/Select.tsx
index 8c21dd9..16ed3ee 100644
--- a/src/common/components/Form/Select.tsx
+++ b/src/common/components/Form/Select.tsx
@@ -1,79 +1,117 @@
-import { InputHTMLAttributes, PropsWithChildren } from 'react';
+import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react';
 import { Control, FieldValues, Path, useController } from 'react-hook-form';
+import noop from 'lodash/noop';
 
 import { cn } from 'common/utils/css';
-import { PropsWithTestId } from 'common/utils/types';
+import { BaseComponentProps } from 'common/utils/types';
 import Label from './Label';
 import FieldError from './FieldError';
 import HelpText from '../Text/HelpText';
+import FAIcon, { FAIconProps } from '../Icon/FAIcon';
+import Backdrop from '../Backdrop/Backdrop';
+import Divider, { DividerProps } from '../Divider/Divider';
+
+/**
+ * The type of value for the select form control.
+ */
+type SelectValue = boolean | number | string;
+
+/**
+ * Defines the attributes of the SelectContext value.
+ */
+type SelectContextValue = {
+  isDisabled: boolean;
+  isError: boolean;
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  text?: string;
+  setText: (text?: string) => void;
+  value?: SelectValue;
+  setValue: (val: SelectValue) => void;
+};
+
+/**
+ * The SelectContext instance.
+ */
+const SelectContext = createContext<SelectContextValue>({
+  isDisabled: false,
+  isError: false,
+  isOpen: false,
+  setIsOpen: noop,
+  text: undefined,
+  setText: noop,
+  value: undefined,
+  setValue: noop,
+});
 
 /**
  * Properties for the `Select` component.
  * @param {Control} control - Object containing methods for registering components
  * into React Hook Form.
+ * @param {boolean} [disabled] - Optional. Indicates if the control is disabled.
+ * Defaults to `false`.
  * @param {string} [label] - Optional. The text to display. If omitted, the
  * `value` is displayed.
  * @param {string} name - Name of the form control.
+ * @param {boolean} [required] - Optional. Indicates if a value is required.
+ * Defaults to `false`.
  * @param {string} [supportingText] - Optional. Help text or instructions.
- * @see {@link BaseComponentProps}
- * @see {@link PropsWithChildren}
- * @see {@link InputHTMLAttributes}
  */
-export interface SelectProps<T extends FieldValues>
-  extends PropsWithTestId,
-    PropsWithChildren,
-    InputHTMLAttributes<HTMLSelectElement> {
+export interface SelectProps<T extends FieldValues> extends BaseComponentProps, PropsWithChildren {
   control: Control<T>;
+  disabled?: boolean;
   label?: string;
   name: string;
+  required?: boolean;
   supportingText?: string;
 }
 
 /**
- * The `Select` component renders a HTML `select` element. It is used to capture
- * one or more values from a curated set of options.
- *
- * The `children` must contain one or more `option` or `optgroup` elements.
- * @param {SelectProps} props - Component properties.
- * @returns JSX
+ * The `Select` component renders a list of options from which a user may select.
  */
 const Select = <T extends FieldValues>({
   children,
   className,
   control,
+  disabled = false,
   label,
   name,
+  required = false,
   supportingText,
   testId = 'select',
-  ...props
 }: SelectProps<T>): JSX.Element => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [text, setText] = useState<string>();
   const { field, fieldState } = useController({ control, name: name as Path<T> });
-  const isDisabled = props.disabled || props.readOnly;
+
+  /** Reset "text" when field value is changed to empty */
+  useEffect(() => {
+    if (!field.value) {
+      setText(undefined);
+    }
+  }, [field.value]);
 
   return (
-    <div className={className} data-testid={testId}>
+    <div className={cn('relative', className)} data-testid={testId}>
       {!!label && (
-        <Label htmlFor={name} required={props.required} testId={`${testId}-label`}>
+        <Label htmlFor={name} required={required} testId={`${testId}-label`}>
           {label}
         </Label>
       )}
-      <select
-        id={props.id || name}
-        {...props}
-        {...field}
-        className={cn(
-          'mb-1 block w-full border-b border-neutral-500/50 bg-transparent py-0.5 focus:border-blue-600',
-          {
-            'border-red-600!': fieldState.error,
-          },
-          {
-            'opacity-50': isDisabled,
-          },
-        )}
-        data-testid={`${testId}-select`}
+      <SelectContext.Provider
+        value={{
+          isDisabled: disabled,
+          isError: !!fieldState.error,
+          isOpen,
+          setIsOpen,
+          text,
+          setText,
+          value: field.value,
+          setValue: field.onChange,
+        }}
       >
         {children}
-      </select>
+      </SelectContext.Provider>
       <FieldError message={fieldState.error?.message} testId={`${testId}-error`} />
       {!!supportingText && (
         <HelpText testId={`${testId}-supporting-text`}>{supportingText}</HelpText>
@@ -82,4 +120,195 @@ const Select = <T extends FieldValues>({
   );
 };
 
+/**
+ * The `Trigger` component wraps the element used to open the Select Options.
+ * There should be 1 Trigger within a Select.
+ */
+const Trigger = ({
+  children,
+  className,
+  testId = 'select-trigger',
+}: BaseComponentProps & PropsWithChildren): JSX.Element => {
+  const { isDisabled, isError, isOpen, setIsOpen } = useContext(SelectContext);
+
+  const handleClick = () => {
+    if (!isDisabled) {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  return (
+    <button
+      className={cn(
+        'flex w-full items-center gap-2 border-b py-0.5',
+        { 'border-neutral-500/50 focus:border-blue-600': !isError },
+        { 'border-red-600': isError },
+        { 'opacity-50': isDisabled },
+        { 'cursor-pointer': !isDisabled },
+        className,
+      )}
+      onClick={handleClick}
+      aria-haspopup={true}
+      aria-expanded={isOpen}
+      data-testid={testId}
+    >
+      {children}
+    </button>
+  );
+};
+Select.Trigger = Trigger;
+
+/**
+ * Properties for the Value component.
+ */
+interface ValueProps extends BaseComponentProps {
+  placeholder?: string;
+}
+
+/**
+ * The `Value` component displays either the current Select value. If there is no value
+ * and "placeholder" is supplied, the placeholder is displayed.
+ *
+ * The Value component is a child of the Select Trigger.
+ */
+const Value = ({ className, placeholder, testId = 'select-value' }: ValueProps): JSX.Element => {
+  const { text } = useContext(SelectContext);
+
+  return (
+    <div className={cn('grow truncate text-left', className)} data-testid={testId}>
+      {text}
+      {!text && <span className="opacity-75">{placeholder}</span>}
+    </div>
+  );
+};
+Select.Value = Value;
+
+/**
+ * The `Icon` component displays the icon within a Select Trigger.  By default,
+ * the chevron down icon is displayed; however, the icon may be overridden.
+ */
+const Icon = ({
+  icon = 'chevronDown',
+  testId = 'select-icon',
+  ...props
+}: Omit<FAIconProps, 'icon'> & Partial<Pick<FAIconProps, 'icon'>>): JSX.Element => {
+  return <FAIcon icon={icon} testId={testId} {...props} />;
+};
+Select.Icon = Icon;
+
+/**
+ * The `Options` component wraps the individual Select Option, Header,
+ * and Separator components. There should be 1 Options within a Select.
+ */
+const Options = ({
+  children,
+  className,
+  testId = 'select-options',
+}: BaseComponentProps & PropsWithChildren): JSX.Element => {
+  const { isOpen, setIsOpen } = useContext(SelectContext);
+
+  return (
+    <>
+      <Backdrop
+        className={cn('bg-transparent', { hidden: !isOpen })}
+        onClick={() => setIsOpen(!isOpen)}
+        testId={`${testId}-backdrop`}
+      />
+      <ul
+        className={cn(
+          'absolute right-0 z-1001 mt-1 max-h-60 w-full overflow-y-auto rounded-md border border-neutral-500 bg-white p-1 dark:bg-neutral-800',
+          { hidden: !isOpen },
+          className,
+        )}
+        role="listbox"
+        data-testid={testId}
+      >
+        {children}
+      </ul>
+    </>
+  );
+};
+Select.Options = Options;
+
+/**
+ * Properties for the Option component.
+ */
+interface OptionProps extends BaseComponentProps, PropsWithChildren {
+  value: SelectValue;
+}
+
+/**
+ * The `Option` component renders an individual Option. The "value" property
+ * specifies the value which will be updated in the form context when this Option
+ * is selected.
+ */
+const Option = ({
+  children,
+  className,
+  testId = 'select-option',
+  value,
+}: OptionProps): JSX.Element => {
+  const { setIsOpen, value: currentValue, setValue, setText } = useContext(SelectContext);
+  const isSelected = value === currentValue;
+
+  /* Set the "text" value for the selected item. */
+  useEffect(() => {
+    if (isSelected) {
+      setText(children?.toString());
+    }
+  }, [isSelected]);
+
+  const handleClick = () => {
+    setValue(value);
+    setIsOpen(false);
+  };
+
+  return (
+    <li
+      className={cn(
+        'flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm not-last:mb-1',
+        { 'bg-neutral-500/25': isSelected },
+        { 'cursor-pointer hover:bg-neutral-500/25': !isSelected },
+        className,
+      )}
+      onClick={handleClick}
+      aria-selected={isSelected}
+      role="option"
+      data-testid={testId}
+    >
+      <div className="flex w-4 items-center justify-around">
+        {isSelected && <FAIcon icon="check" size="sm" testId={`${testId}-selected`} />}
+      </div>
+      {children}
+    </li>
+  );
+};
+Select.Option = Option;
+
+/**
+ * The `Heading` component renders a heading within the Options list. A Heading
+ * is useful for categorizing a group of related Option components.
+ */
+const Heading = ({
+  children,
+  className,
+  testId = 'select-heading',
+}: BaseComponentProps & PropsWithChildren): JSX.Element => {
+  return (
+    <h5 className={cn('px-2 py-1.5 text-sm font-bold', className)} data-testid={testId}>
+      {children}
+    </h5>
+  );
+};
+Select.Heading = Heading;
+
+/**
+ * The `Separator` component renders a horizontal divider within Select Options.
+ * This is useful to organize and separate groups of related options.
+ */
+const Separator = ({ className, testId = 'select-separator' }: DividerProps): JSX.Element => {
+  return <Divider className={cn('-mx-1 my-1', className)} testId={testId} />;
+};
+Select.Separator = Separator;
+
 export default Select;
diff --git a/src/common/components/Form/__stories__/Select.stories.tsx b/src/common/components/Form/__stories__/Select.stories.tsx
index c31a61a..34d3311 100644
--- a/src/common/components/Form/__stories__/Select.stories.tsx
+++ b/src/common/components/Form/__stories__/Select.stories.tsx
@@ -7,7 +7,7 @@ import { default as MySelect } from '../Select';
 import { SelectProps } from '../Select';
 
 const formSchema = object({
-  color: string().required('Required. ').oneOf(['blue', 'green'], 'Must be blue or green. '),
+  color: string().required('Required. ').oneOf(['blue', 'red'], 'Must be blue or red. '),
 });
 
 type FormValues = InferType<typeof formSchema>;
@@ -28,7 +28,7 @@ const Select = (props: Omit<SelectProps<FormValues>, 'control'>) => {
   const onSubmit = () => {};
 
   return (
-    <form className="w-96" onSubmit={form.handleSubmit(onSubmit)} noValidate>
+    <form className="h-100 w-96" onSubmit={form.handleSubmit(onSubmit)} noValidate>
       <MySelect control={form.control} {...props}></MySelect>
     </form>
   );
@@ -58,17 +58,27 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-const options = (
-  <>
-    <option value="blue">Blue</option>
-    <option value="green">Green</option>
-    <option value="red">Red</option>
-  </>
-);
-
 export const WithSupportingText: Story = {
   args: {
-    children: options,
+    children: (
+      <>
+        <MySelect.Trigger>
+          <MySelect.Value />
+          <MySelect.Icon />
+        </MySelect.Trigger>
+        <MySelect.Options>
+          <MySelect.Heading>Primary Colors</MySelect.Heading>
+          <MySelect.Option value="blue">Blue</MySelect.Option>
+          <MySelect.Option value="red">Red</MySelect.Option>
+          <MySelect.Option value="yellow">Yellow</MySelect.Option>
+          <MySelect.Separator />
+          <MySelect.Heading>Secondary Colors</MySelect.Heading>
+          <MySelect.Option value="green">Green</MySelect.Option>
+          <MySelect.Option value="orange">Orange</MySelect.Option>
+          <MySelect.Option value="purple">Purple</MySelect.Option>
+        </MySelect.Options>
+      </>
+    ),
     name: 'color',
     label: 'Color',
     supportingText: 'Choose a color.',
@@ -77,7 +87,25 @@ export const WithSupportingText: Story = {
 
 export const WithLabel: Story = {
   args: {
-    children: options,
+    children: (
+      <>
+        <MySelect.Trigger>
+          <MySelect.Value />
+          <MySelect.Icon />
+        </MySelect.Trigger>
+        <MySelect.Options>
+          <MySelect.Heading>Primary Colors</MySelect.Heading>
+          <MySelect.Option value="blue">Blue</MySelect.Option>
+          <MySelect.Option value="red">Red</MySelect.Option>
+          <MySelect.Option value="yellow">Yellow</MySelect.Option>
+          <MySelect.Separator />
+          <MySelect.Heading>Secondary Colors</MySelect.Heading>
+          <MySelect.Option value="green">Green</MySelect.Option>
+          <MySelect.Option value="orange">Orange</MySelect.Option>
+          <MySelect.Option value="purple">Purple</MySelect.Option>
+        </MySelect.Options>
+      </>
+    ),
     name: 'color',
     label: 'Color',
   },
@@ -85,9 +113,46 @@ export const WithLabel: Story = {
 
 export const Required: Story = {
   args: {
-    children: options,
+    children: (
+      <>
+        <MySelect.Trigger>
+          <MySelect.Value />
+          <MySelect.Icon />
+        </MySelect.Trigger>
+        <MySelect.Options>
+          <MySelect.Heading>Primary Colors</MySelect.Heading>
+          <MySelect.Option value="blue">Blue</MySelect.Option>
+          <MySelect.Option value="red">Red</MySelect.Option>
+          <MySelect.Option value="yellow">Yellow</MySelect.Option>
+          <MySelect.Separator />
+          <MySelect.Heading>Secondary Colors</MySelect.Heading>
+          <MySelect.Option value="green">Green</MySelect.Option>
+          <MySelect.Option value="orange">Orange</MySelect.Option>
+          <MySelect.Option value="purple">Purple</MySelect.Option>
+        </MySelect.Options>
+      </>
+    ),
     name: 'color',
     label: 'Color',
     required: true,
   },
 };
+
+export const Basic: Story = {
+  args: {
+    children: (
+      <>
+        <MySelect.Trigger>
+          <MySelect.Value />
+          <MySelect.Icon />
+        </MySelect.Trigger>
+        <MySelect.Options>
+          <MySelect.Option value="blue">Blue</MySelect.Option>
+          <MySelect.Option value="red">Red</MySelect.Option>
+          <MySelect.Option value="yellow">Yellow</MySelect.Option>
+        </MySelect.Options>
+      </>
+    ),
+    name: 'color',
+  },
+};
diff --git a/src/common/components/Form/__tests__/Select.test.tsx b/src/common/components/Form/__tests__/Select.test.tsx
index 57eedc9..9e5e8d2 100644
--- a/src/common/components/Form/__tests__/Select.test.tsx
+++ b/src/common/components/Form/__tests__/Select.test.tsx
@@ -4,7 +4,7 @@ import { useForm } from 'react-hook-form';
 import { InferType, object, string } from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 
-import { render, screen } from 'test/test-utils';
+import { render, screen, waitFor } from 'test/test-utils';
 
 import Select, { SelectProps } from '../Select';
 
@@ -41,8 +41,17 @@ describe('Select', () => {
     // ARRANGE
     render(
       <SelectWrapper name="color">
-        <option value="blue">Blue</option>
-        <option value="red">Red</option>
+        <Select.Trigger>
+          <Select.Value placeholder="None selected" />
+          <Select.Icon />
+        </Select.Trigger>
+        <Select.Options>
+          <Select.Heading>Primary</Select.Heading>
+          <Select.Separator />
+          <Select.Option value="blue">Blue</Select.Option>
+          <Select.Option value="red">Blue</Select.Option>
+          <Select.Option value="yellow">Blue</Select.Option>
+        </Select.Options>
       </SelectWrapper>,
     );
     await screen.findByTestId('select');
@@ -51,13 +60,52 @@ describe('Select', () => {
     expect(screen.getByTestId('select')).toBeDefined();
   });
 
+  it('should render components', async () => {
+    // ARRANGE
+    render(
+      <SelectWrapper name="color">
+        <Select.Trigger>
+          <Select.Value placeholder="None selected" />
+          <Select.Icon />
+        </Select.Trigger>
+        <Select.Options>
+          <Select.Heading>Primary</Select.Heading>
+          <Select.Separator />
+          <Select.Option value="blue">Blue</Select.Option>
+          <Select.Option value="red">Blue</Select.Option>
+          <Select.Option value="yellow">Blue</Select.Option>
+        </Select.Options>
+      </SelectWrapper>,
+    );
+    await screen.findByTestId('select');
+
+    // ASSERT
+    expect(screen.getByTestId('select')).toBeDefined();
+    expect(screen.getByTestId('select-trigger')).toBeDefined();
+    expect(screen.getByTestId('select-value')).toBeDefined();
+    expect(screen.getByTestId('select-icon')).toBeDefined();
+    expect(screen.getByTestId('select-options')).toBeDefined();
+    expect(screen.getByTestId('select-heading')).toBeDefined();
+    expect(screen.getByTestId('select-separator')).toBeDefined();
+    expect(screen.getAllByTestId('select-option')).toHaveLength(3);
+  });
+
   it('should show label', async () => {
     // ARRANGE
     const label = 'label value';
     render(
       <SelectWrapper name="color" label={label}>
-        <option value="blue">Blue</option>
-        <option value="red">Red</option>
+        <Select.Trigger>
+          <Select.Value placeholder="None selected" />
+          <Select.Icon />
+        </Select.Trigger>
+        <Select.Options>
+          <Select.Heading>Primary</Select.Heading>
+          <Select.Separator />
+          <Select.Option value="blue">Blue</Select.Option>
+          <Select.Option value="red">Blue</Select.Option>
+          <Select.Option value="yellow">Blue</Select.Option>
+        </Select.Options>
       </SelectWrapper>,
     );
     await screen.findByTestId('select-label');
@@ -71,8 +119,17 @@ describe('Select', () => {
     const supportingText = 'supporting text content';
     render(
       <SelectWrapper name="color" supportingText={supportingText}>
-        <option value="blue">Blue</option>
-        <option value="red">Red</option>
+        <Select.Trigger>
+          <Select.Value placeholder="None selected" />
+          <Select.Icon />
+        </Select.Trigger>
+        <Select.Options>
+          <Select.Heading>Primary</Select.Heading>
+          <Select.Separator />
+          <Select.Option value="blue">Blue</Select.Option>
+          <Select.Option value="red">Blue</Select.Option>
+          <Select.Option value="yellow">Blue</Select.Option>
+        </Select.Options>
       </SelectWrapper>,
     );
     await screen.findByTestId('select-supporting-text');
@@ -81,20 +138,118 @@ describe('Select', () => {
     expect(screen.getByTestId('select-supporting-text')).toHaveTextContent(supportingText);
   });
 
+  it('should show placeholder when no value selected', async () => {
+    // ARRANGE
+    render(
+      <SelectWrapper name="color">
+        <Select.Trigger>
+          <Select.Value placeholder="None selected" />
+          <Select.Icon />
+        </Select.Trigger>
+        <Select.Options>
+          <Select.Heading>Primary</Select.Heading>
+          <Select.Separator />
+          <Select.Option value="blue">Blue</Select.Option>
+          <Select.Option value="red">Blue</Select.Option>
+          <Select.Option value="yellow">Blue</Select.Option>
+        </Select.Options>
+      </SelectWrapper>,
+    );
+    await screen.findByTestId('select-value');
+
+    // ASSERT
+    expect(screen.getByTestId('select-value')).toBeDefined();
+    expect(screen.getByTestId('select-value')).toHaveTextContent(/none selected/i);
+  });
+
+  it('should show options when trigger clicked', async () => {
+    // ARRANGE
+    const user = userEvent.setup();
+    render(
+      <SelectWrapper name="color">
+        <Select.Trigger>
+          <Select.Value placeholder="None selected" />
+          <Select.Icon />
+        </Select.Trigger>
+        <Select.Options>
+          <Select.Heading>Primary</Select.Heading>
+          <Select.Separator />
+          <Select.Option value="blue">Blue</Select.Option>
+          <Select.Option value="red">Blue</Select.Option>
+          <Select.Option value="yellow">Blue</Select.Option>
+        </Select.Options>
+      </SelectWrapper>,
+    );
+    await screen.findByTestId('select');
+    // expect options to be hidden
+    expect(screen.getByTestId('select-options')).toHaveClass('hidden');
+
+    // ACT
+    await user.click(screen.getByTestId('select-trigger'));
+    await waitFor(() => expect(screen.getByTestId('select-options')).not.toHaveClass('hidden'));
+
+    // ASSERT
+    expect(screen.getByTestId('select-options')).not.toHaveClass('hidden');
+  });
+
+  it('should hide options when backdrop clicked', async () => {
+    // ARRANGE
+    const user = userEvent.setup();
+    render(
+      <SelectWrapper name="color">
+        <Select.Trigger>
+          <Select.Value placeholder="None selected" />
+          <Select.Icon />
+        </Select.Trigger>
+        <Select.Options>
+          <Select.Heading>Primary</Select.Heading>
+          <Select.Separator />
+          <Select.Option value="blue">Blue</Select.Option>
+          <Select.Option value="red">Blue</Select.Option>
+          <Select.Option value="yellow">Blue</Select.Option>
+        </Select.Options>
+      </SelectWrapper>,
+    );
+    await screen.findByTestId('select');
+    // expect options to be hidden
+    expect(screen.getByTestId('select-options')).toHaveClass('hidden');
+
+    // ACT
+    await user.click(screen.getByTestId('select-trigger'));
+    await waitFor(() => expect(screen.getByTestId('select-options')).not.toHaveClass('hidden'));
+
+    await user.click(screen.getByTestId('select-options-backdrop'));
+    await waitFor(() => expect(screen.getByTestId('select-options')).toHaveClass('hidden'));
+
+    // ASSERT
+    expect(screen.getByTestId('select-options')).toHaveClass('hidden');
+  });
+
   it('should show error message', async () => {
     // ARRANGE
     const user = userEvent.setup();
     render(
       <SelectWrapper name="color">
-        <option value="blue" data-testid="option-blue">
-          Blue
-        </option>
-        <option value="red" data-testid="option-red">
-          Red
-        </option>
+        <Select.Trigger>
+          <Select.Value placeholder="None selected" />
+          <Select.Icon />
+        </Select.Trigger>
+        <Select.Options>
+          <Select.Heading>Primary</Select.Heading>
+          <Select.Separator />
+          <Select.Option value="blue" testId="option-blue">
+            Blue
+          </Select.Option>
+          <Select.Option value="red" testId="option-red">
+            Blue
+          </Select.Option>
+          <Select.Option value="yellow" testId="option-yellow">
+            Blue
+          </Select.Option>
+        </Select.Options>
       </SelectWrapper>,
     );
-    await screen.findByTestId('select-select');
+    await screen.findByTestId('option-red');
 
     // ACT
     await user.click(screen.getByTestId('option-red'));
diff --git a/src/common/components/Router/Router.tsx b/src/common/components/Router/Router.tsx
index 19e9ff8..7b2613e 100644
--- a/src/common/components/Router/Router.tsx
+++ b/src/common/components/Router/Router.tsx
@@ -41,6 +41,7 @@ const PageComponents = lazy(() => import('pages/Components/components/PageCompon
 const SearchInputComponents = lazy(
   () => import('pages/Components/components/SearchInputComponents'),
 );
+const SelectComponents = lazy(() => import('pages/Components/components/SelectComponents'));
 const TabsComponents = lazy(() => import('pages/Components/components/TabsComponents'));
 const TextComponents = lazy(() => import('pages/Components/components/TextComponents'));
 const TextareaComponents = lazy(() => import('pages/Components/components/TextareaComponents'));
@@ -165,6 +166,10 @@ export const routes: RouteObject[] = [
                 path: 'search-input',
                 element: withSuspense(<SearchInputComponents />),
               },
+              {
+                path: 'select',
+                element: withSuspense(<SelectComponents />),
+              },
               {
                 path: 'tabs',
                 element: withSuspense(<TabsComponents />),
diff --git a/src/pages/Components/ComponentsPage.tsx b/src/pages/Components/ComponentsPage.tsx
index 8c2e846..f9d3217 100644
--- a/src/pages/Components/ComponentsPage.tsx
+++ b/src/pages/Components/ComponentsPage.tsx
@@ -79,6 +79,9 @@ const ComponentsPage = (): JSX.Element => {
             <MenuNavLink to="search-input" styleActive>
               Search Input
             </MenuNavLink>
+            <MenuNavLink to="select" styleActive>
+              Select
+            </MenuNavLink>
             <MenuNavLink to="tabs" styleActive>
               Tabs
             </MenuNavLink>
diff --git a/src/pages/Components/components/SelectComponents.tsx b/src/pages/Components/components/SelectComponents.tsx
new file mode 100644
index 0000000..7de178b
--- /dev/null
+++ b/src/pages/Components/components/SelectComponents.tsx
@@ -0,0 +1,339 @@
+import { createColumnHelper } from '@tanstack/react-table';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { object, string } from 'yup';
+import noop from 'lodash/noop';
+
+import { BaseComponentProps } from 'common/utils/types';
+import { ComponentProperty } from '../model/components';
+import Table from 'common/components/Table/Table';
+import CodeSnippet from 'common/components/Text/CodeSnippet';
+import Heading from 'common/components/Text/Heading';
+import Button from 'common/components/Button/Button';
+import Select from 'common/components/Form/Select';
+
+/**
+ * The `SelectComponents` component renders a set of examples illustrating
+ * the use of the `Select` component.
+ */
+const SelectComponents = ({
+  className,
+  testId = 'components-select',
+}: BaseComponentProps): JSX.Element => {
+  const data: ComponentProperty[] = [
+    {
+      name: 'className',
+      description: 'Optional. Additional CSS class names.',
+    },
+    {
+      name: 'control',
+      description: 'The React Hook Form control object.',
+    },
+    {
+      name: 'label',
+      description: 'Optional. The label text.',
+    },
+    {
+      name: 'name',
+      description: 'The form control name.',
+    },
+    {
+      name: 'supportingText',
+      description: 'Optional. The supporting or help text.',
+    },
+    {
+      name: 'testId',
+      description: 'Optional. Identifier for testing.',
+    },
+  ];
+  const columnHelper = createColumnHelper<ComponentProperty>();
+  const columns = [
+    columnHelper.accessor('name', {
+      cell: (info) => (
+        <span className="font-mono text-sky-700 dark:text-sky-500">{info.getValue()}</span>
+      ),
+      header: () => 'Name',
+    }),
+    columnHelper.accessor('description', {
+      cell: (info) => info.renderValue(),
+      header: () => 'Description',
+    }),
+  ];
+
+  const { control, handleSubmit, reset } = useForm({
+    defaultValues: {
+      color: '',
+      food: '',
+    },
+    mode: 'all',
+    resolver: yupResolver(
+      object({
+        color: string()
+          .required('Color is required.')
+          .oneOf(['blue', 'red', 'yellow'], 'You must select a primary color.'),
+        food: string().required('Food is required.'),
+      }),
+    ),
+  });
+
+  const onSubmit = noop;
+
+  return (
+    <section className={className} data-testid={testId}>
+      <Heading level={2} className="mb-4">
+        Select Component
+      </Heading>
+
+      <div className="my-8">
+        <div className="mb-4">
+          The <span className="font-mono font-bold">Select</span> component displays a list of
+          options from which the user may choose.
+        </div>
+
+        <div className="my-8">
+          <Heading level={3} className="mb-2">
+            Properties
+          </Heading>
+          <Table<ComponentProperty, string> data={data} columns={columns} />
+        </div>
+
+        <Heading level={3} className="mb-2">
+          Examples
+        </Heading>
+
+        <Heading level={4} className="my-2">
+          Basic
+        </Heading>
+        <div className="mb-4 opacity-85">
+          This is the most basic use of the Select component. It has no label or supporting text. It
+          is integrated with React Hook Form through the "control" value obtained from the "useForm"
+          hook (see the React Hook Form documentation for more information).
+        </div>
+        <div className="my-8">
+          <div className="mb-2 flex flex-col place-content-center rounded-sm border border-neutral-500/10 p-4 dark:bg-neutral-700/25">
+            {/* Example */}
+            <form onSubmit={handleSubmit(onSubmit)} className="max-w-lg">
+              <Select control={control} name="color" required className="mb-8">
+                <Select.Trigger>
+                  <Select.Value placeholder="None selected" />
+                  <Select.Icon />
+                </Select.Trigger>
+                <Select.Options>
+                  <Select.Heading>Primary Colors</Select.Heading>
+                  <Select.Option value="blue">Blue</Select.Option>
+                  <Select.Option value="red">Red</Select.Option>
+                  <Select.Option value="yellow">Yellow</Select.Option>
+                  <Select.Separator />
+                  <Select.Heading>Secondary Colors</Select.Heading>
+                  <Select.Option value="green">Green</Select.Option>
+                  <Select.Option value="orange">Orange</Select.Option>
+                  <Select.Option value="purple">Purple</Select.Option>
+                </Select.Options>
+              </Select>
+              <Button
+                onClick={() => reset()}
+                size="sm"
+                variant="outline"
+                className="ml-auto"
+                testId="reset-1"
+              >
+                Reset
+              </Button>
+            </form>
+          </div>
+          <CodeSnippet
+            className="my-2"
+            code={`<form onSubmit={handleSubmit(onSubmit)} className="max-w-lg">
+  <Select control={control} name="color" required className="mb-8">
+    <Select.Trigger>
+      <Select.Value placeholder="None selected" />
+      <Select.Icon />
+    </Select.Trigger>
+    <Select.Options>
+      <Select.Heading>Primary Colors</Select.Heading>
+      <Select.Option value="blue">Blue</Select.Option>
+      <Select.Option value="red">Red</Select.Option>
+      <Select.Option value="yellow">Yellow</Select.Option>
+      <Select.Separator />
+      <Select.Heading>Secondary Colors</Select.Heading>
+      <Select.Option value="green">Green</Select.Option>
+      <Select.Option value="orange">Orange</Select.Option>
+      <Select.Option value="purple">Purple</Select.Option>
+    </Select.Options>
+  </Select>
+  <Button
+    onClick={() => reset()}
+    size="sm"
+    variant="outline"
+    className="ml-auto"
+    testId="reset-1"
+  >
+    Reset
+  </Button>
+</form>`}
+          />
+        </div>
+
+        <Heading level={4} className="my-2">
+          Labels
+        </Heading>
+        <div className="mb-4 opacity-85">
+          Use the "label" property to associate a HTML label with the textarea. When the textarea is
+          required, the label is styled to indicate.
+        </div>
+        <div className="my-8">
+          <div className="mb-2 flex flex-col place-content-center rounded-sm border border-neutral-500/10 p-4 dark:bg-neutral-700/25">
+            {/* Example */}
+            <form onSubmit={handleSubmit(onSubmit)} className="max-w-lg">
+              <Select control={control} name="color" label="Color" required className="mb-8">
+                <Select.Trigger>
+                  <Select.Value placeholder="None selected" />
+                  <Select.Icon />
+                </Select.Trigger>
+                <Select.Options>
+                  <Select.Heading>Primary Colors</Select.Heading>
+                  <Select.Option value="blue">Blue</Select.Option>
+                  <Select.Option value="red">Red</Select.Option>
+                  <Select.Option value="yellow">Yellow</Select.Option>
+                  <Select.Separator />
+                  <Select.Heading>Secondary Colors</Select.Heading>
+                  <Select.Option value="green">Green</Select.Option>
+                  <Select.Option value="orange">Orange</Select.Option>
+                  <Select.Option value="purple">Purple</Select.Option>
+                </Select.Options>
+              </Select>
+              <Button
+                onClick={() => reset()}
+                size="sm"
+                variant="outline"
+                className="ml-auto"
+                testId="reset-2"
+              >
+                Reset
+              </Button>
+            </form>
+          </div>
+          <CodeSnippet
+            className="my-2"
+            code={`<form onSubmit={handleSubmit(onSubmit)} className="max-w-lg">
+  <Select control={control} name="color" label="Color" required className="mb-8">
+    <Select.Trigger>
+      <Select.Value placeholder="None selected" />
+      <Select.Icon />
+    </Select.Trigger>
+    <Select.Options>
+      <Select.Heading>Primary Colors</Select.Heading>
+      <Select.Option value="blue">Blue</Select.Option>
+      <Select.Option value="red">Red</Select.Option>
+      <Select.Option value="yellow">Yellow</Select.Option>
+      <Select.Separator />
+      <Select.Heading>Secondary Colors</Select.Heading>
+      <Select.Option value="green">Green</Select.Option>
+      <Select.Option value="orange">Orange</Select.Option>
+      <Select.Option value="purple">Purple</Select.Option>
+    </Select.Options>
+  </Select>
+  <Button
+    onClick={() => reset()}
+    size="sm"
+    variant="outline"
+    className="ml-auto"
+    testId="reset-1"
+  >
+    Reset
+  </Button>
+</form>`}
+          />
+        </div>
+
+        <Heading level={4} className="my-2">
+          Supporting Text
+        </Heading>
+        <div className="mb-4 opacity-85">
+          Use the "supportingText" property to add helpful information below the textarea containing
+          instructions, validation requirements, or other tips for entering information.
+        </div>
+        <div className="my-8">
+          <div className="mb-2 flex flex-col place-content-center rounded-sm border border-neutral-500/10 p-4 dark:bg-neutral-700/25">
+            {/* Example */}
+            <form onSubmit={handleSubmit(onSubmit)} className="max-w-lg">
+              <Select
+                control={control}
+                name="color"
+                label="Color"
+                supportingText="Select your favorite color."
+                required
+                className="mb-8"
+              >
+                <Select.Trigger>
+                  <Select.Value placeholder="None selected" />
+                  <Select.Icon />
+                </Select.Trigger>
+                <Select.Options>
+                  <Select.Heading>Primary Colors</Select.Heading>
+                  <Select.Option value="blue">Blue</Select.Option>
+                  <Select.Option value="red">Red</Select.Option>
+                  <Select.Option value="yellow">Yellow</Select.Option>
+                  <Select.Separator />
+                  <Select.Heading>Secondary Colors</Select.Heading>
+                  <Select.Option value="green">Green</Select.Option>
+                  <Select.Option value="orange">Orange</Select.Option>
+                  <Select.Option value="purple">Purple</Select.Option>
+                </Select.Options>
+              </Select>
+              <Button
+                onClick={() => reset()}
+                size="sm"
+                variant="outline"
+                className="ml-auto"
+                testId="reset-3"
+              >
+                Reset
+              </Button>
+            </form>
+          </div>
+          <CodeSnippet
+            className="my-2"
+            code={`<form onSubmit={handleSubmit(onSubmit)} className="max-w-lg">
+  <Select
+    control={control}
+    name="color"
+    label="Color"
+    supportingText="Select your favorite color."
+    required
+    className="mb-8"
+  >
+    <Select.Trigger>
+      <Select.Value placeholder="None selected" />
+      <Select.Icon />
+    </Select.Trigger>
+    <Select.Options>
+      <Select.Heading>Primary Colors</Select.Heading>
+      <Select.Option value="blue">Blue</Select.Option>
+      <Select.Option value="red">Red</Select.Option>
+      <Select.Option value="yellow">Yellow</Select.Option>
+      <Select.Separator />
+      <Select.Heading>Secondary Colors</Select.Heading>
+      <Select.Option value="green">Green</Select.Option>
+      <Select.Option value="orange">Orange</Select.Option>
+      <Select.Option value="purple">Purple</Select.Option>
+    </Select.Options>
+  </Select>
+  <Button
+    onClick={() => reset()}
+    size="sm"
+    variant="outline"
+    className="ml-auto"
+    testId="reset-1"
+  >
+    Reset
+  </Button>
+</form>`}
+          />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SelectComponents;
diff --git a/src/pages/Components/components/__tests__/SelectComponents.test.tsx b/src/pages/Components/components/__tests__/SelectComponents.test.tsx
new file mode 100644
index 0000000..a65e53a
--- /dev/null
+++ b/src/pages/Components/components/__tests__/SelectComponents.test.tsx
@@ -0,0 +1,32 @@
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+
+import { render, screen } from 'test/test-utils';
+
+import SelectComponents from '../SelectComponents';
+
+describe('SelectComponents', () => {
+  it('should render successfully', async () => {
+    // ARRANGE
+    render(<SelectComponents />);
+    await screen.findByTestId('components-select');
+
+    // ASSERT
+    expect(screen.getByTestId('components-select'));
+  });
+
+  it('should click buttons', async () => {
+    // ARRANGE
+    const user = userEvent.setup();
+    render(<SelectComponents />);
+    await screen.findByTestId('components-select');
+
+    // ACT
+    await user.click(screen.getByTestId('reset-1'));
+    await user.click(screen.getByTestId('reset-2'));
+    await user.click(screen.getByTestId('reset-3'));
+
+    // ASSERT
+    expect(screen.getByTestId('components-select'));
+  });
+});