diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index 02139589..8e2dbfe4 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta } from '@storybook/react';
 
 import Select, { SelectProps } from './Select';
+import { SelectVariants } from './types';
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta = {
   title: 'Components/Select',
@@ -24,6 +25,11 @@ const argTypes = {
       type: 'boolean',
     },
   },
+  showCustomIcon: {
+    control: {
+      type: 'boolean',
+    },
+  },
   invalid: {
     control: {
       type: 'boolean',
@@ -54,6 +60,12 @@ const argTypes = {
       type: 'select',
     },
   },
+  variant: {
+    options: [SelectVariants.default, SelectVariants.tertiary],
+    control: {
+      type: 'select',
+    },
+  },
   value: {
     control: {
       type: 'text',
@@ -90,14 +102,45 @@ Playground.args = {
   playgroundWidth: 300,
   className: 'input-test-class',
   defaultValue: 'Option 2',
+  showCustomIcon: false,
   disabled: false,
   invalid: false,
   invalidText: 'Error message',
   labelText: 'Label text',
   readOnly: false,
   size: 'md',
+  variant: SelectVariants.default,
   warn: false,
   warnText: 'Warning message that is really long can wrap to more lines.',
 };
 
 Playground.argTypes = argTypes;
+
+export const Tertiary = ({ playgroundWidth, ...args }: StoryProps) => (
+  <div style={{ width: playgroundWidth, margin: '1rem' }}>
+    <Select key={args.defaultValue} {...args} id="Input-1" value="show-lot" hideLabel={true}>
+      <option key="0" value="show-lot" hidden>
+        Show Lot No.
+      </option>
+
+      {Array.from({ length: 20 }, (_, i) => (
+        <option key={i}>Option {i + 1}</option>
+      ))}
+    </Select>
+  </div>
+);
+
+Tertiary.args = {
+  showCustomIcon: true,
+  variant: SelectVariants.tertiary,
+};
+
+Tertiary.argTypes = {
+  variant: {
+    options: [SelectVariants.default, SelectVariants.tertiary],
+    control: {
+      type: 'select',
+    },
+    defaultValue: SelectVariants.tertiary,
+  },
+};
diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
index dba36ab6..e4a31965 100644
--- a/src/components/Select/Select.test.tsx
+++ b/src/components/Select/Select.test.tsx
@@ -3,9 +3,17 @@ import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
 import Select from './Select';
+import { px } from '../../utils';
 
 describe('A Select', () => {
   const reqProps = { labelText: 'My Test Label', id: 'test-id' };
+  const mockLabel = 'Test Label';
+  const mockOptions = (
+    <>
+      <option value="1">Option 1</option>
+      <option value="2">Option 2</option>
+    </>
+  );
 
   it('will render a default value if passed', () => {
     const testRef = React.createRef<HTMLSelectElement>();
@@ -54,4 +62,36 @@ describe('A Select', () => {
     await userEvent.selectOptions(screen.getByTestId('test-id'), ['option one']);
     await waitFor(() => expect(mockedOnChange.mock.calls).toHaveLength(0));
   });
+
+  it('should toggle --open and --closed classes on click', async () => {
+    render(
+      <Select id="test-select" labelText={mockLabel} showCustomIcon>
+        {mockOptions}
+      </Select>,
+    );
+
+    const selectElement = screen.getByTestId('test-select');
+
+    // Initial state should be closed
+    expect(selectElement).toHaveClass(`${px}-input__select--closed`);
+
+    // Simulate click to open
+    await userEvent.click(selectElement);
+    expect(selectElement).toHaveClass(`${px}-input__select--open`);
+
+    // Simulate blur to close
+    await userEvent.tab();
+    expect(selectElement).toHaveClass(`${px}-input__select--closed`);
+  });
+
+  it('should apply --tertiary class when variant is tertiary', () => {
+    render(
+      <Select id="test-select-tertiary" labelText={mockLabel} variant="tertiary">
+        {mockOptions}
+      </Select>,
+    );
+
+    const selectElement = screen.getByTestId('test-select-tertiary');
+    expect(selectElement).toHaveClass(`${px}-input__select--tertiary`);
+  });
 });
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 562da613..d59284e9 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -1,15 +1,23 @@
 import * as React from 'react';
 import classnames from 'classnames';
-
 import { px, useNormalizedInputProps } from '../../utils';
-
 import { InputProps } from '../Input/Input';
+import './select.scss';
+import { SelectVariants } from './types';
 
 export interface SelectProps extends InputProps {
   /**
    * Option elements that are selectable
    */
   children: React.ReactNode;
+  /**
+   * Determines if you want to show the icon
+   */
+  showCustomIcon?: boolean;
+  /**
+   * Determines the variant of the select
+   */
+  variant: SelectVariants;
 }
 
 /**
@@ -31,6 +39,8 @@ const Select = React.forwardRef(
       disabled,
       hideLabel,
       id,
+      showCustomIcon = false,
+      variant = SelectVariants.default,
       inline,
       invalid,
       invalidText,
@@ -48,6 +58,9 @@ const Select = React.forwardRef(
   ) => {
     const type = 'select';
     const inputProps = useNormalizedInputProps({ disabled, id, invalid, invalidText, readOnly, type, warn, warnText });
+    const [isOpen, setIsOpen] = React.useState(false);
+    const handleIsOpen = () => setIsOpen((prev) => !prev);
+    const closeDropdown = () => setIsOpen(false);
 
     const wrapperClassnames = classnames(`${px}-${type}-input`, `${px}-input`, `${px}-input--${size}`, {
       [`${px}-input--inline`]: inline,
@@ -58,19 +71,32 @@ const Select = React.forwardRef(
       [`${className}__wrapper`]: className,
     });
 
+    const selectClassnames = classnames(`${px}-input__input`, {
+      className,
+      [`${px}-input__select--open`]: isOpen && showCustomIcon,
+      [`${px}-input__select--closed`]: !isOpen && showCustomIcon,
+      [`${px}-input__select--tertiary`]: variant === SelectVariants.tertiary,
+    });
+
+    const handleClick = (e: React.MouseEvent<HTMLSelectElement>) => {
+      handleIsOpen();
+      onClick?.(e);
+    };
+
     return (
       <div className={wrapperClassnames}>
         <label htmlFor={id} className={classnames(`${px}-input__label`, { [`${px}-input__label--hidden`]: hideLabel })}>
           {labelText}
         </label>
         <select
-          className={classnames(`${px}-input__input`, { className })}
+          className={selectClassnames}
           data-testid={id}
           defaultValue={defaultValue}
           disabled={inputProps.disabled}
           id={id}
           onChange={onChange}
-          onClick={onClick}
+          onBlur={closeDropdown}
+          onClick={handleClick}
           ref={ref}
           value={value}
           {...rest}
diff --git a/src/components/Select/select.scss b/src/components/Select/select.scss
new file mode 100644
index 00000000..d9fc0389
--- /dev/null
+++ b/src/components/Select/select.scss
@@ -0,0 +1,42 @@
+@use '#scss/allPartials' as *;
+
+.#{$px}-select-input {
+  select.#{$px}-input {
+    &__select {
+      &--tertiary {
+        border: 0;
+        color: inherit;
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        &:focus-visible {
+          background-color: $pure-white;
+          border-radius: 0;
+          outline-color: $soft-black;
+          outline-offset: 4.5px;
+        }
+      }
+
+      &--closed {
+        background: url("data:image/svg+xml,<svg height='16' width='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M8.06566 9.12623L12.2097 4.98219C12.3561 4.83574 12.7442 4.80954 12.9673 5.0327C13.1905 5.25585 13.1643 5.64386 13.0178 5.79031L8.42162 10.3865C8.34739 10.4607 8.21109 10.5041 8.06566 10.4997C7.92022 10.5041 7.78392 10.4607 7.70969 10.3865L3.1135 5.79031C2.96705 5.64386 2.94085 5.25585 3.16401 5.0327C3.38716 4.80954 3.77517 4.83574 3.92162 4.98219L8.06566 9.12623Z' fill='black'/></svg>")
+          no-repeat;
+      }
+
+      &--open {
+        background: url("data:image/svg+xml,<svg height='16' width='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M8.06566 6.37378L12.2097 10.5178C12.3561 10.6643 12.7442 10.6905 12.9673 10.4673C13.1905 10.2442 13.1643 9.85614 13.0178 9.70969L8.42162 5.1135C8.34739 5.03927 8.21109 4.99593 8.06566 5.00031C7.92022 4.99593 7.78392 5.03927 7.70969 5.1135L3.1135 9.70969C2.96705 9.85614 2.94085 10.2442 3.16401 10.4673C3.38716 10.6905 3.77517 10.6643 3.92162 10.5178L8.06566 6.37378Z' fill='black'/></svg>")
+          no-repeat;
+      }
+
+      &--closed,
+      &--open {
+        appearance: none;
+        appearance: none;
+        appearance: none;
+        background-position: calc(100% - 0.75rem) center;
+        padding-right: $spacing-md;
+      }
+    }
+  }
+}
diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts
new file mode 100644
index 00000000..e963e045
--- /dev/null
+++ b/src/components/Select/types.ts
@@ -0,0 +1,4 @@
+export enum SelectVariants {
+  default = 'default',
+  tertiary = 'tertiary',
+}
diff --git a/src/index.ts b/src/index.ts
index 167c7c2a..acce274e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -44,6 +44,7 @@ export { default as GridItem, type GridItemProps } from './components/GridItem/G
 export { GridItemAlign } from './components/GridItem/types';
 export { default as Search, type SearchProps } from './components/Search/Search';
 export { default as Select, type SelectProps } from './components/Select/Select';
+export { SelectVariants } from './components/Select/types';
 export { default as SplitPanel, type SplitPanelProps } from './components/SplitPanel/SplitPanel';
 export { default as Subscribe, type SubscribeProps } from './patterns/Subscribe/Subscribe';
 export { SubscriptionState } from './patterns/Subscribe/types';