diff --git a/src/stories/Dropdown/Dropdown.stories.tsx b/src/stories/Dropdown/Dropdown.stories.tsx
index 6356c8d..1c7e94f 100644
--- a/src/stories/Dropdown/Dropdown.stories.tsx
+++ b/src/stories/Dropdown/Dropdown.stories.tsx
@@ -1,16 +1,29 @@
 import { Meta, StoryFn } from "@storybook/react";
-import { SelectNew } from ".";
+import Dropdown, { DropdownProps } from ".";
+import { colourOptions } from "./data";
 
 export default {
-  title: "SelectNew",
-  component: SelectNew,
+  title: "Dropdown",
+  component: Dropdown,
 } as Meta;
 
-const Template: StoryFn<SelectProps> = (args) => {
-  return <SelectNew {...args} />;
+const Template: StoryFn<DropdownProps> = (args) => {
+  return <Dropdown {...args} />;
 };
 
-export const SelectBase = Template.bind({});
-SelectBase.args = {
-  value: { label: "", value: "" },
+export const SingleDropdown = Template.bind({});
+SingleDropdown.args = {
+  className: "basic-single",
+  defaultValue: colourOptions[0],
+  name: "color",
+  options: colourOptions,
+};
+
+export const MultiDropdown = Template.bind({});
+MultiDropdown.args = {
+  isMulti: true,
+  className: "basic-multi",
+  defaultValue: [colourOptions[2], colourOptions[3]],
+  name: "colors",
+  options: colourOptions,
 };
diff --git a/src/stories/Dropdown/Option.tsx b/src/stories/Dropdown/Option.tsx
deleted file mode 100644
index baf3083..0000000
--- a/src/stories/Dropdown/Option.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-export interface DropdownOptions
-  extends React.HTMLAttributes<HTMLOptionElement> {
-  value: string;
-  label: string;
-  [key: string]: any;
-}
-
-export const Option = ({ value, label, ...props }: DropdownOptions) => {
-  return (
-    <option value={value} {...props}>
-      {label}
-    </option>
-  );
-};
diff --git a/src/stories/Dropdown/data.ts b/src/stories/Dropdown/data.ts
new file mode 100644
index 0000000..d369b8b
--- /dev/null
+++ b/src/stories/Dropdown/data.ts
@@ -0,0 +1,142 @@
+export interface ColourOption {
+  readonly value: string;
+  readonly label: string;
+  readonly color: string;
+  readonly isFixed?: boolean;
+  readonly isDisabled?: boolean;
+}
+
+export const colourOptions: readonly ColourOption[] = [
+  { value: "ocean", label: "Ocean", color: "#00B8D9", isFixed: true },
+  { value: "blue", label: "Blue", color: "#0052CC", isDisabled: true },
+  { value: "purple", label: "Purple", color: "#5243AA" },
+  { value: "red", label: "Red", color: "#FF5630", isFixed: true },
+  { value: "orange", label: "Orange", color: "#FF8B00" },
+  { value: "yellow", label: "Yellow", color: "#FFC400" },
+  { value: "green", label: "Green", color: "#36B37E" },
+  { value: "forest", label: "Forest", color: "#00875A" },
+  { value: "slate", label: "Slate", color: "#253858" },
+  { value: "silver", label: "Silver", color: "#666666" },
+];
+
+export interface FlavourOption {
+  readonly value: string;
+  readonly label: string;
+  readonly rating: string;
+}
+
+export const flavourOptions: readonly FlavourOption[] = [
+  { value: "vanilla", label: "Vanilla", rating: "safe" },
+  { value: "chocolate", label: "Chocolate", rating: "good" },
+  { value: "strawberry", label: "Strawberry", rating: "wild" },
+  { value: "salted-caramel", label: "Salted Caramel", rating: "crazy" },
+];
+
+export interface StateOption {
+  readonly value: string;
+  readonly label: string;
+}
+
+export const stateOptions: readonly StateOption[] = [
+  { value: "AL", label: "Alabama" },
+  { value: "AK", label: "Alaska" },
+  { value: "AS", label: "American Samoa" },
+  { value: "AZ", label: "Arizona" },
+  { value: "AR", label: "Arkansas" },
+  { value: "CA", label: "California" },
+  { value: "CO", label: "Colorado" },
+  { value: "CT", label: "Connecticut" },
+  { value: "DE", label: "Delaware" },
+  { value: "DC", label: "District Of Columbia" },
+  { value: "FM", label: "Federated States Of Micronesia" },
+  { value: "FL", label: "Florida" },
+  { value: "GA", label: "Georgia" },
+  { value: "GU", label: "Guam" },
+  { value: "HI", label: "Hawaii" },
+  { value: "ID", label: "Idaho" },
+  { value: "IL", label: "Illinois" },
+  { value: "IN", label: "Indiana" },
+  { value: "IA", label: "Iowa" },
+  { value: "KS", label: "Kansas" },
+  { value: "KY", label: "Kentucky" },
+  { value: "LA", label: "Louisiana" },
+  { value: "ME", label: "Maine" },
+  { value: "MH", label: "Marshall Islands" },
+  { value: "MD", label: "Maryland" },
+  { value: "MA", label: "Massachusetts" },
+  { value: "MI", label: "Michigan" },
+  { value: "MN", label: "Minnesota" },
+  { value: "MS", label: "Mississippi" },
+  { value: "MO", label: "Missouri" },
+  { value: "MT", label: "Montana" },
+  { value: "NE", label: "Nebraska" },
+  { value: "NV", label: "Nevada" },
+  { value: "NH", label: "New Hampshire" },
+  { value: "NJ", label: "New Jersey" },
+  { value: "NM", label: "New Mexico" },
+  { value: "NY", label: "New York" },
+  { value: "NC", label: "North Carolina" },
+  { value: "ND", label: "North Dakota" },
+  { value: "MP", label: "Northern Mariana Islands" },
+  { value: "OH", label: "Ohio" },
+  { value: "OK", label: "Oklahoma" },
+  { value: "OR", label: "Oregon" },
+  { value: "PW", label: "Palau" },
+  { value: "PA", label: "Pennsylvania" },
+  { value: "PR", label: "Puerto Rico" },
+  { value: "RI", label: "Rhode Island" },
+  { value: "SC", label: "South Carolina" },
+  { value: "SD", label: "South Dakota" },
+  { value: "TN", label: "Tennessee" },
+  { value: "TX", label: "Texas" },
+  { value: "UT", label: "Utah" },
+  { value: "VT", label: "Vermont" },
+  { value: "VI", label: "Virgin Islands" },
+  { value: "VA", label: "Virginia" },
+  { value: "WA", label: "Washington" },
+  { value: "WV", label: "West Virginia" },
+  { value: "WI", label: "Wisconsin" },
+  { value: "WY", label: "Wyoming" },
+];
+
+export const optionLength = [
+  { value: 1, label: "general" },
+  {
+    value: 2,
+    label:
+      "Evil is the moment when I lack the strength to be true to the Good that compels me.",
+  },
+  {
+    value: 3,
+    label:
+      "It is now an easy matter to spell out the ethic of a truth: 'Do all that you can to persevere in that which exceeds your perseverance. Persevere in the interruption. Seize in your being that which has seized and broken you.",
+  },
+];
+
+export const dogOptions = [
+  { id: 1, label: "Chihuahua" },
+  { id: 2, label: "Bulldog" },
+  { id: 3, label: "Dachshund" },
+  { id: 4, label: "Akita" },
+];
+
+// let bigOptions = [];
+// for (let i = 0; i < 10000; i++) {
+// 	bigOptions = bigOptions.concat(colourOptions);
+// }
+
+export interface GroupedOption {
+  readonly label: string;
+  readonly options: readonly ColourOption[] | readonly FlavourOption[];
+}
+
+export const groupedOptions: readonly GroupedOption[] = [
+  {
+    label: "Colours",
+    options: colourOptions,
+  },
+  {
+    label: "Flavours",
+    options: flavourOptions,
+  },
+];
diff --git a/src/stories/Dropdown/index.tsx b/src/stories/Dropdown/index.tsx
index 0264f66..e0c568f 100644
--- a/src/stories/Dropdown/index.tsx
+++ b/src/stories/Dropdown/index.tsx
@@ -1,16 +1,219 @@
-import { DropdownOptions, Option } from "./Option";
+import ReactSelect, { Props, GroupBase, StylesConfig } from "react-select5";
+import { aqTheme, customComponents } from "./styles";
+import { aqBootstrapTheme } from "../theme/defaultTheme";
 
-export interface DropdownProps extends React.HTMLAttributes<HTMLSelectElement> {
-  options: DropdownOptions[];
-}
+export interface DropdownProps extends Props {}
+
+function Dropdown<
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>(props: Props<Option, IsMulti, Group>) {
+  const customStyle: StylesConfig<Option, IsMulti, Group> = {
+    control: (provided, state) => {
+      let borderColor = aqBootstrapTheme.colors.elementGeneric;
+      if (state.isFocused) {
+        borderColor = aqBootstrapTheme.variants.secondary;
+      }
+      if (state.isDisabled && state.hasValue) {
+        borderColor = aqBootstrapTheme.colors.gray100;
+      }
+      const boxShadow = "none";
+      const lineHeight = "1.5";
+      const minHeight = "39px";
+      const background =
+        state.isDisabled && state.hasValue
+          ? `${aqBootstrapTheme.colors.gray100}`
+          : `${aqBootstrapTheme.colors.white}`;
+
+      return {
+        ...provided,
+        background,
+        borderColor,
+        minHeight,
+        boxShadow,
+        lineHeight,
+        ":hover": {
+          borderColor: borderColor,
+        },
+      };
+    },
+    dropdownIndicator: (provided, state) => {
+      let color = aqBootstrapTheme.palette.primary;
+      if (state.isDisabled && !state.hasValue) {
+        color = aqBootstrapTheme.colors.disabledFont;
+      }
+      if (state.selectProps.menuIsOpen) {
+        color = aqBootstrapTheme.palette.secondary;
+      }
+      const fontSize = "20px";
+      const transform = state.selectProps.menuIsOpen ? "rotate(180deg)" : "";
+      const cursor = "pointer";
+      return {
+        ...provided,
+        color,
+        fontSize,
+        transform,
+        cursor,
+      };
+    },
+    menu: (provided) => {
+      const borderColor = `${aqBootstrapTheme.colors.elementGeneric}`;
+      const borderWidth = "1px";
+      const borderStyle = "solid";
+      const borderRadius = `${aqBootstrapTheme.general.borderRadius}`;
+      const boxShadow = `${aqBootstrapTheme.general.boxShadow}`;
+
+      return {
+        ...provided,
+        borderColor,
+        borderRadius,
+        borderWidth,
+        borderStyle,
+        boxShadow,
+      };
+    },
+    menuPortal: (provided) => {
+      const zIndex = "9999";
+      return {
+        ...provided,
+        zIndex,
+      };
+    },
+    groupHeading: (provided) => {
+      const fontFamily = `${aqBootstrapTheme.typography.fontFamily.mono}`;
+      const fontWeight = aqBootstrapTheme.typography.fontWeight.light;
+      const fontSize = `${aqBootstrapTheme.typography.fontSize.small}`;
+      const color = `${aqBootstrapTheme.palette.secondary}`;
+
+      return {
+        ...provided,
+        fontFamily,
+        fontWeight,
+        fontSize,
+        color,
+      };
+    },
+    noOptionsMessage: (provided) => {
+      const color = `${aqBootstrapTheme.colors.disabledFont}`;
+
+      return {
+        ...provided,
+        color,
+      };
+    },
+    option: (provided, state) => {
+      const activeColor = aqBootstrapTheme.variants.secondary;
+      const hoverColor = aqBootstrapTheme.colors.purple100;
+
+      provided = {
+        ...provided,
+        ":hover": {
+          background: hoverColor,
+        },
+      };
+      // focused and not selected
+      if (state.isFocused && !state.isSelected) {
+        return {
+          ...provided,
+          background: hoverColor,
+          ":active": {
+            background: activeColor,
+          },
+        };
+      }
+      // selected
+      if (state.isSelected) {
+        return {
+          ...provided,
+          background: aqBootstrapTheme.variants.secondary,
+          color: aqBootstrapTheme.palette.secondary,
+          ":hover": {
+            background: aqBootstrapTheme.variants.secondary,
+            color: aqBootstrapTheme.palette.secondary,
+          },
+        };
+      }
+
+      return {
+        ...provided,
+        ":active": {
+          background: activeColor,
+        },
+      };
+    },
+    placeholder: (provided, state) => {
+      const color = state.isDisabled
+        ? `${aqBootstrapTheme.colors.disabledFont}`
+        : `${aqBootstrapTheme.colors.gray500}`;
+      const fontWeight = parseInt(
+        `${aqBootstrapTheme.typography.fontWeight.light}`,
+      );
+
+      return {
+        ...provided,
+        color,
+        fontWeight,
+      };
+    },
+    singleValue: (provided, state) => {
+      const color =
+        state.isDisabled && state.hasValue
+          ? aqBootstrapTheme.variants.primary
+          : aqBootstrapTheme.palette.primary;
+      return {
+        ...provided,
+        color,
+      };
+    },
+    multiValue: (provided, state) => {
+      const backgroundColor = `transparent`;
+
+      return {
+        ...provided,
+        backgroundColor,
+      };
+    },
+    multiValueRemove: (provided, state) => {
+      const backgroundColor = aqBootstrapTheme.variants.secondary;
+      const color = `${aqBootstrapTheme.colors.white}`;
+      const borderRadius = `50%`;
+      const float = "right";
+      const padding = "0";
+      const margin = "0 0 0 10px";
+      const alignSelf = "center";
+      const cursor = "pointer";
+
+      return {
+        ...provided,
+        ":hover": {
+          ...provided[":hover"],
+          backgroundColor,
+          color: aqBootstrapTheme.palette.secondary,
+        },
+        alignSelf,
+        borderRadius,
+        backgroundColor,
+        float,
+        padding,
+        margin,
+        color,
+        cursor,
+      };
+    },
+  };
 
-export const SelectNew = ({ options, ...props }: DropdownProps) => {
   return (
-    <>
-      <select {...props}></select>
-      {options.map((option) => (
-        <Option key={option.value} {...option} />
-      ))}
-    </>
+    <ReactSelect
+      theme={(theme) => ({
+        ...theme,
+        ...aqTheme,
+      })}
+      styles={customStyle}
+      {...customComponents}
+      {...props}
+    />
   );
-};
+}
+
+export default Dropdown;
diff --git a/src/stories/Dropdown/styles.tsx b/src/stories/Dropdown/styles.tsx
new file mode 100644
index 0000000..a48cca5
--- /dev/null
+++ b/src/stories/Dropdown/styles.tsx
@@ -0,0 +1,77 @@
+import { ChevronDown, X } from "react-bootstrap-icons";
+import { Theme, components } from "react-select5";
+import { Pill } from "../pill/Pill";
+import { aqBootstrapTheme } from "../theme/defaultTheme";
+
+const aqTheme = (theme: Theme) => ({
+  borderRadius: aqBootstrapTheme.general.borderRadiusNumber,
+  spacing: theme.spacing,
+  colors: {
+    ...theme.colors,
+    primary: aqBootstrapTheme.palette.primary,
+    primary25: aqBootstrapTheme.colors.gray300,
+  },
+});
+
+const IndicatorSeparator = () => null;
+const MultiValueContainer = (
+  props: JSX.LibraryManagedAttributes<
+    typeof components.MultiValueContainer,
+    any
+  >,
+) => {
+  return (
+    <components.MultiValueContainer {...props}>
+      <Pill
+        type="secondary"
+        title={props.data.label}
+        flat
+        style={{
+          maxWidth: "100%",
+        }}
+      >
+        <div style={{ display: "flex" }}>{props.children}</div>
+      </Pill>
+    </components.MultiValueContainer>
+  );
+};
+const MultiValueLabel = (
+  props: JSX.LibraryManagedAttributes<typeof components.MultiValueLabel, any>,
+) => {
+  return (
+    <span
+      style={{
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis",
+      }}
+    >
+      {props.children}
+    </span>
+  );
+};
+const DropdownIndicator = (
+  props: JSX.LibraryManagedAttributes<typeof components.DropdownIndicator, any>,
+) => (
+  <components.DropdownIndicator {...props}>
+    <ChevronDown />
+  </components.DropdownIndicator>
+);
+const ClearIndicator = (
+  props: JSX.LibraryManagedAttributes<typeof components.DropdownIndicator, any>,
+) => (
+  <components.ClearIndicator {...props}>
+    <X />
+  </components.ClearIndicator>
+);
+let customComponents = {
+  components: {
+    IndicatorSeparator,
+    DropdownIndicator,
+    ClearIndicator,
+    MultiValueContainer,
+    MultiValueLabel,
+  },
+};
+
+export { aqTheme, customComponents };