diff --git a/packages/components/src/FormSelect/Async.tsx b/packages/components/src/FormSelect/Async.tsx
new file mode 100644
index 00000000..172fc1cb
--- /dev/null
+++ b/packages/components/src/FormSelect/Async.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import AsyncSelect from "react-select/async";
+import Wrapper from "./Wrapper";
+import { formatOptionLabel, getComponents } from "./components";
+import customStyles, { mobileStyles } from "./styles";
+import { AsyncProps, Option, OptionTypeBase } from "./types";
+
+export default function FormSelectAsync<
+  T,
+  OptionType extends OptionTypeBase<T> = Option<T>,
+  IsMulti extends boolean = false,
+>({
+  mono = false,
+  light = false,
+  small = false,
+  pill = false,
+  transparentBorder = false,
+  blue = false,
+  rounded = false,
+  forMobile = false,
+  ...props
+}: AsyncProps<T, OptionType, IsMulti>): JSX.Element {
+  const styles = forMobile
+    ? mobileStyles<T, OptionType, IsMulti>(light)
+    : customStyles<T, OptionType, IsMulti>(
+        mono,
+        light,
+        small,
+        pill,
+        transparentBorder,
+        blue,
+        rounded,
+      );
+
+  return (
+    <Wrapper {...props} small={small}>
+      <AsyncSelect
+        {...props}
+        styles={props.customStyles ? props.customStyles(styles) : styles}
+        components={getComponents(props.components, blue, forMobile && !light)}
+        formatOptionLabel={formatOptionLabel}
+      />
+    </Wrapper>
+  );
+}
diff --git a/packages/components/src/FormSelect/components/Clear.tsx b/packages/components/src/FormSelect/components/Clear.tsx
new file mode 100644
index 00000000..3f818e95
--- /dev/null
+++ b/packages/components/src/FormSelect/components/Clear.tsx
@@ -0,0 +1,22 @@
+import { AiOutlineClose } from "@react-icons/all-files/ai/AiOutlineClose";
+import cx from "classnames";
+import React from "react";
+import { ClearIndicatorProps } from "react-select";
+import { OptionTypeBase } from "../types";
+import css from "./index.module.css";
+
+export default function Clear<
+  T,
+  OptionType extends OptionTypeBase<T>,
+  IsMulti extends boolean,
+>(props: ClearIndicatorProps<OptionType, IsMulti> & { blue?: boolean }) {
+  return (
+    <div {...props.innerProps}>
+      <AiOutlineClose
+        className={cx(css.clearIndicator, {
+          [css.blueIndicator]: !!props.blue,
+        })}
+      />
+    </div>
+  );
+}
diff --git a/packages/components/src/FormSelect/components/Dropdown.tsx b/packages/components/src/FormSelect/components/Dropdown.tsx
new file mode 100644
index 00000000..09efce27
--- /dev/null
+++ b/packages/components/src/FormSelect/components/Dropdown.tsx
@@ -0,0 +1,28 @@
+import { AiFillCaretDown } from "@react-icons/all-files/ai/AiFillCaretDown";
+import cx from "classnames";
+import React from "react";
+import { DropdownIndicatorProps } from "react-select";
+import { OptionTypeBase } from "../types";
+import css from "./index.module.css";
+
+export default function Dropdown<
+  T,
+  OptionType extends OptionTypeBase<T>,
+  IsMulti extends boolean,
+>(
+  props: DropdownIndicatorProps<OptionType, IsMulti> & {
+    blue?: boolean;
+    light?: boolean;
+  },
+) {
+  return (
+    <div {...props.innerProps}>
+      <AiFillCaretDown
+        className={cx(css.dropdownIndicator, {
+          [css.blueIndicator]: !!props.blue,
+          [css.whiteIndicator]: !!props.light,
+        })}
+      />
+    </div>
+  );
+}
diff --git a/packages/components/src/FormSelect/components/MultiValueRemove.tsx b/packages/components/src/FormSelect/components/MultiValueRemove.tsx
new file mode 100644
index 00000000..fc120e1d
--- /dev/null
+++ b/packages/components/src/FormSelect/components/MultiValueRemove.tsx
@@ -0,0 +1,24 @@
+import { AiOutlineClose } from "@react-icons/all-files/ai/AiOutlineClose";
+import cx from "classnames";
+import React from "react";
+import { MultiValueRemoveProps } from "react-select";
+import { OptionTypeBase } from "../types";
+import css from "./index.module.css";
+
+export default function MultiValueRemove<
+  T,
+  OptionType extends OptionTypeBase<T>,
+  IsMulti extends boolean,
+>(props: MultiValueRemoveProps<OptionType, IsMulti> & { blue?: boolean }) {
+  return (
+    <div
+      {...props.innerProps}
+      className={cx(css.multiValueRemove, {
+        [css.blueIndicator]: !!props.blue,
+      })}
+      aria-label={`remove ${props.data.label}`}
+    >
+      <AiOutlineClose />
+    </div>
+  );
+}
diff --git a/packages/components/src/FormSelect/components/index.module.css b/packages/components/src/FormSelect/components/index.module.css
new file mode 100644
index 00000000..b7dcc689
--- /dev/null
+++ b/packages/components/src/FormSelect/components/index.module.css
@@ -0,0 +1,47 @@
+.dropdownIndicator {
+  @apply mr-3;
+
+  &:hover {
+    @apply text-button-2;
+  }
+}
+
+.clearIndicator {
+  @apply text-ld-darkgrey mr-3;
+
+  &:hover {
+    @apply text-ld-darkergrey;
+  }
+}
+
+.multiValueRemove {
+  @apply flex px-1 items-center rounded-sm text-primary;
+
+  &:hover {
+    @apply text-acc-red;
+  }
+}
+
+.blueIndicator {
+  @apply text-link-1;
+
+  &:hover {
+    @apply text-link-2;
+  }
+}
+
+.whiteIndicator {
+  @apply text-white;
+
+  &:hover {
+    @apply text-white;
+  }
+}
+
+.withIconPath {
+  @apply flex items-center;
+
+  img {
+    @apply h-7 w-7 rounded-full mr-2;
+  }
+}
diff --git a/packages/components/src/FormSelect/components/index.tsx b/packages/components/src/FormSelect/components/index.tsx
new file mode 100644
index 00000000..f3fda958
--- /dev/null
+++ b/packages/components/src/FormSelect/components/index.tsx
@@ -0,0 +1,48 @@
+import cx from "classnames";
+import React from "react";
+import { GroupBase, SelectComponentsConfig } from "react-select";
+import { Option, OptionTypeBase } from "../types";
+import Clear from "./Clear";
+import Dropdown from "./Dropdown";
+import MultiValueRemove from "./MultiValueRemove";
+import css from "./index.module.css";
+
+type Components<Option, IsMulti extends boolean> =
+  | Partial<SelectComponentsConfig<Option, IsMulti, GroupBase<Option>>>
+  | undefined;
+
+export function getComponents<
+  T,
+  OptionType extends OptionTypeBase<T>,
+  IsMulti extends boolean,
+>(
+  components?: Components<OptionType, IsMulti>,
+  blue?: boolean,
+  light?: boolean,
+): Components<OptionType, IsMulti> {
+  return {
+    ...components,
+    IndicatorSeparator: () => null,
+    DropdownIndicator: props => (
+      <Dropdown {...props} blue={blue} light={light} />
+    ),
+    ClearIndicator: props => <Clear {...props} blue={blue} />,
+    MultiValueRemove: props => <MultiValueRemove {...props} blue={blue} />,
+  };
+}
+
+export function formatOptionLabel<T>(option: Option<T>): React.ReactNode {
+  if (!option.icon && !option.details && !option.iconPath) {
+    return option.label;
+  }
+  return React.createElement(
+    "div",
+    {},
+    <span className={cx({ [css.withIconPath]: !!option.iconPath })}>
+      {option.iconPath && <img src={option.iconPath} alt={option.label} />}
+      {option.icon}
+      <span>{option.label}</span>
+      {option.details}
+    </span>,
+  );
+}
diff --git a/packages/components/src/FormSelect/customComponents.tsx b/packages/components/src/FormSelect/customComponents.tsx
deleted file mode 100644
index 767d0d6b..00000000
--- a/packages/components/src/FormSelect/customComponents.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { AiFillCaretDown } from "@react-icons/all-files/ai/AiFillCaretDown";
-import { AiOutlineClose } from "@react-icons/all-files/ai/AiOutlineClose";
-import cx from "classnames";
-import React from "react";
-import {
-  ClearIndicatorProps,
-  DropdownIndicatorProps,
-  GroupBase,
-  MultiValueRemoveProps,
-  SelectComponentsConfig,
-} from "react-select";
-import css from "./index.module.css";
-import { Option, OptionTypeBase } from "./types";
-
-function Dropdown<
-  T,
-  OptionType extends OptionTypeBase<T>,
-  IsMulti extends boolean,
->(
-  props: DropdownIndicatorProps<OptionType, IsMulti> & {
-    blue?: boolean;
-    light?: boolean;
-  },
-) {
-  return (
-    <div {...props.innerProps}>
-      <AiFillCaretDown
-        className={cx(css.dropdownIndicator, {
-          [css.blueIndicator]: !!props.blue,
-          [css.whiteIndicator]: !!props.light,
-        })}
-      />
-    </div>
-  );
-}
-
-function Clear<
-  T,
-  OptionType extends OptionTypeBase<T>,
-  IsMulti extends boolean,
->(props: ClearIndicatorProps<OptionType, IsMulti> & { blue?: boolean }) {
-  return (
-    <div {...props.innerProps}>
-      <AiOutlineClose
-        className={cx(css.clearIndicator, {
-          [css.blueIndicator]: !!props.blue,
-        })}
-      />
-    </div>
-  );
-}
-
-function MultiValueRemove<
-  T,
-  OptionType extends OptionTypeBase<T>,
-  IsMulti extends boolean,
->(props: MultiValueRemoveProps<OptionType, IsMulti> & { blue?: boolean }) {
-  return (
-    <div
-      {...props.innerProps}
-      className={cx(css.multiValueRemove, {
-        [css.blueIndicator]: !!props.blue,
-      })}
-    >
-      <AiOutlineClose />
-    </div>
-  );
-}
-
-type Components<Option, IsMulti extends boolean> =
-  | Partial<SelectComponentsConfig<Option, IsMulti, GroupBase<Option>>>
-  | undefined;
-
-export function getComponents<
-  T,
-  OptionType extends OptionTypeBase<T>,
-  IsMulti extends boolean,
->(
-  components?: Components<OptionType, IsMulti>,
-  blue?: boolean,
-  light?: boolean,
-): Components<OptionType, IsMulti> {
-  return {
-    ...components,
-    IndicatorSeparator: () => null,
-    DropdownIndicator: props => (
-      <Dropdown {...props} blue={blue} light={light} />
-    ),
-    ClearIndicator: props => <Clear {...props} blue={blue} />,
-    MultiValueRemove: props => <MultiValueRemove {...props} blue={blue} />,
-  };
-}
-
-export function formatOptionLabel<T>(option: Option<T>): React.ReactNode {
-  if (!option.icon && !option.details && !option.iconPath) {
-    return option.label;
-  }
-  return React.createElement(
-    "div",
-    {},
-    <span className={cx({ [css.withIconPath]: !!option.iconPath })}>
-      {option.iconPath && <img src={option.iconPath} alt={option.label} />}
-      {option.icon}
-      <span>{option.label}</span>
-      {option.details}
-    </span>,
-  );
-}
diff --git a/packages/components/src/FormSelect/index.module.css b/packages/components/src/FormSelect/index.module.css
index 6e44f902..ca6d4d23 100644
--- a/packages/components/src/FormSelect/index.module.css
+++ b/packages/components/src/FormSelect/index.module.css
@@ -13,51 +13,3 @@
 .smallLabel {
   @apply text-sm;
 }
-
-.dropdownIndicator {
-  @apply mr-3;
-
-  &:hover {
-    @apply text-button-2;
-  }
-}
-
-.clearIndicator {
-  @apply text-ld-darkgrey mr-3;
-
-  &:hover {
-    @apply text-ld-darkergrey;
-  }
-}
-
-.multiValueRemove {
-  @apply flex px-1 items-center rounded-sm text-primary;
-
-  &:hover {
-    @apply text-acc-red;
-  }
-}
-
-.blueIndicator {
-  @apply text-link-1;
-
-  &:hover {
-    @apply text-link-2;
-  }
-}
-
-.whiteIndicator {
-  @apply text-white;
-
-  &:hover {
-    @apply text-white;
-  }
-}
-
-.withIconPath {
-  @apply flex items-center;
-
-  img {
-    @apply h-7 w-7 rounded-full mr-2;
-  }
-}
diff --git a/packages/components/src/FormSelect/index.tsx b/packages/components/src/FormSelect/index.tsx
index 3378db0f..ca99c764 100644
--- a/packages/components/src/FormSelect/index.tsx
+++ b/packages/components/src/FormSelect/index.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import Select from "react-select";
-import AsyncSelect from "react-select/async";
+import FormSelectAsync from "./Async";
 import Wrapper from "./Wrapper";
-import { formatOptionLabel, getComponents } from "./customComponents";
+import { formatOptionLabel, getComponents } from "./components";
 import customStyles, { mobileStyles } from "./styles";
-import { AsyncProps, Option, OptionTypeBase, Props } from "./types";
+import { Option, Props } from "./types";
 import { getOnChange, getValue, moveSelectedToTop } from "./utils";
 
 /*
@@ -59,45 +59,6 @@ function FormSelect<T>({
   );
 }
 
-function FormSelectAsync<
-  T,
-  OptionType extends OptionTypeBase<T> = Option<T>,
-  IsMulti extends boolean = false,
->({
-  mono = false,
-  light = false,
-  small = false,
-  pill = false,
-  transparentBorder = false,
-  blue = false,
-  rounded = false,
-  forMobile = false,
-  ...props
-}: AsyncProps<T, OptionType, IsMulti>): JSX.Element {
-  const styles = forMobile
-    ? mobileStyles<T, OptionType, IsMulti>(light)
-    : customStyles<T, OptionType, IsMulti>(
-        mono,
-        light,
-        small,
-        pill,
-        transparentBorder,
-        blue,
-        rounded,
-      );
-
-  return (
-    <Wrapper {...props} small={small}>
-      <AsyncSelect
-        {...props}
-        styles={props.customStyles ? props.customStyles(styles) : styles}
-        components={getComponents(props.components, blue, forMobile && !light)}
-        formatOptionLabel={formatOptionLabel}
-      />
-    </Wrapper>
-  );
-}
-
 FormSelect.Async = FormSelectAsync;
 
 export default FormSelect;