diff --git a/src/components/AttachEvidenceDialog/index.tsx b/src/components/AttachEvidenceDialog/index.tsx
index ea3333893..56e085549 100644
--- a/src/components/AttachEvidenceDialog/index.tsx
+++ b/src/components/AttachEvidenceDialog/index.tsx
@@ -1,8 +1,11 @@
+import { yupResolver } from "@hookform/resolvers/yup";
 import { useCallback, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import * as yup from "yup";
-import { yupResolver } from "@hookform/resolvers/yup";
 
+import { useQueryClient } from "@tanstack/react-query";
+import { Link } from "react-router-dom";
+import { createIncidentQueryKey } from "../../api/query-hooks";
 import { createEvidence } from "../../api/services/evidence";
 import {
   createHypothesis,
@@ -13,24 +16,21 @@ import {
 } from "../../api/services/hypothesis";
 import {
   createIncident,
-  searchIncident,
   IncidentSeverity,
-  IncidentStatus
+  IncidentStatus,
+  searchIncident
 } from "../../api/services/incident";
 import { useUser } from "../../context";
-import { TextInput } from "../TextInput";
-import { Modal } from "../Modal";
+import { Events, sendAnalyticEvent } from "../../services/analytics";
+import { IItem } from "../../types/IItem";
 import { DropdownWithActions } from "../Dropdown/DropdownWithActions";
-import { IncidentStatusTag } from "../IncidentStatusTag";
+import SelectDropdown from "../Dropdown/SelectDropdown";
+import { severityItems, typeItems } from "../Incidents/data";
 import { IncidentSeverityTag } from "../IncidentSeverityTag";
-import { IItem } from "../../types/IItem";
+import { IncidentStatusTag } from "../IncidentStatusTag";
+import { Modal } from "../Modal";
+import { TextInput } from "../TextInput";
 import { toastSuccess } from "../Toast/toast";
-import { Link } from "react-router-dom";
-import { severityItems, typeItems } from "../Incidents/data";
-import { ReactSelectDropdown } from "../ReactSelectDropdown";
-import { useQueryClient } from "@tanstack/react-query";
-import { createIncidentQueryKey } from "../../api/query-hooks";
-import { Events, sendAnalyticEvent } from "../../services/analytics";
 
 interface Props {
   title?: string;
@@ -141,6 +141,22 @@ const validationSchema = yup
   })
   .required();
 
+export const severityOptions = Object.entries(severityItems).map(
+  ([_, { value, description, icon }]) => ({
+    value,
+    label: description,
+    icon
+  })
+);
+
+export const typeOptions = Object.entries(typeItems).map(
+  ([_, { value, description, icon }]) => ({
+    value,
+    label: description,
+    icon
+  })
+);
+
 export function AttachEvidenceDialog({
   title = "Link to Incident",
   config_id,
@@ -394,13 +410,15 @@ export function AttachEvidenceDialog({
                     <span className="text-sm font-bold text-gray-700 mb-1 mr-4 w-16">
                       Type
                     </span>
-                    <ReactSelectDropdown
+                    <SelectDropdown
                       name="type"
-                      label=""
                       className="w-full"
-                      control={control}
-                      items={typeItems}
+                      options={typeOptions}
                       value={watchType}
+                      onChange={(e) => {
+                        if (!e) return;
+                        setValue("type", e);
+                      }}
                     />
                     <p className="text-red-600 text-sm">
                       {errors.type?.message}
@@ -414,13 +432,15 @@ export function AttachEvidenceDialog({
                     <span className="text-sm font-bold text-gray-700 mb-1 mr-4 w-16">
                       Severity
                     </span>
-                    <ReactSelectDropdown
+                    <SelectDropdown
                       name="severity"
-                      label=""
                       className="w-full"
-                      control={control}
-                      items={severityItems}
+                      options={severityOptions}
                       value={watchSeverity}
+                      onChange={(e) => {
+                        if (!e) return;
+                        setValue("severity", e);
+                      }}
                     />
                     <p className="text-red-600 text-sm">
                       {errors.severity?.message}
diff --git a/src/components/Dropdown/SelectDropdown.tsx b/src/components/Dropdown/SelectDropdown.tsx
new file mode 100644
index 000000000..93aeee08f
--- /dev/null
+++ b/src/components/Dropdown/SelectDropdown.tsx
@@ -0,0 +1,62 @@
+import clsx from "clsx";
+import { ComponentProps } from "react";
+import Select, { components } from "react-select";
+
+type SelectDropdownProps<TValue = string> = {
+  options: {
+    label: string;
+    value: TValue;
+    icon?: React.ReactNode;
+  }[];
+  value?: TValue;
+  onChange: (value: TValue) => void;
+} & Omit<ComponentProps<Select>, "onChange" | "value" | "options">;
+
+export default function SelectDropdown<TValue = string>({
+  options,
+  value,
+  onChange = () => {},
+  ...props
+}: SelectDropdownProps<TValue>) {
+  return (
+    <Select
+      {...props}
+      options={options}
+      value={options.find((e) => e.value === value)}
+      onChange={(e) => {
+        return onChange((e as any).value);
+      }}
+      openMenuOnClick
+      openMenuOnFocus
+      components={{
+        SingleValue: ({ className, ...props }: any) => {
+          return (
+            <components.SingleValue
+              className={clsx(className, "text-sm")}
+              {...props}
+            >
+              <div
+                className="flex flex-row gap-2 items-center cursor-pointer"
+                role="button"
+              >
+                <span>{props.data.icon}</span> <span>{props.data.label}</span>
+              </div>
+            </components.SingleValue>
+          );
+        },
+        Option: ({ className, ...props }: any) => {
+          return (
+            <components.Option {...props}>
+              <div
+                className="flex flex-row gap-2 items-center cursor-pointer"
+                role="button"
+              >
+                <span>{props.data.icon}</span> <span>{props.data.label}</span>
+              </div>
+            </components.Option>
+          );
+        }
+      }}
+    />
+  );
+}
diff --git a/src/components/Incidents/IncidentCreate/index.tsx b/src/components/Incidents/IncidentCreate/index.tsx
index aa32135a3..822cfa775 100644
--- a/src/components/Incidents/IncidentCreate/index.tsx
+++ b/src/components/Incidents/IncidentCreate/index.tsx
@@ -21,11 +21,20 @@ import {
 } from "../../../api/services/incident";
 import { useUser } from "../../../context";
 import { Events, sendAnalyticEvent } from "../../../services/analytics";
+import { severityOptions, typeOptions } from "../../AttachEvidenceDialog";
 import { Button } from "../../Button";
-import { ReactSelectDropdown } from "../../ReactSelectDropdown";
+import SelectDropdown from "../../Dropdown/SelectDropdown";
 import { TextInput } from "../../TextInput";
 import { toastError } from "../../Toast/toast";
-import { incidentStatusItems, severityItems, typeItems } from "../data";
+import { incidentStatusItems, severityItems } from "../data";
+
+const incidentStatusOptions = Object.entries(incidentStatusItems).map(
+  ([_, { value, description, icon }]) => ({
+    value,
+    label: description,
+    icon
+  })
+);
 
 const validationSchema = yup
   .object({
@@ -62,7 +71,8 @@ export function IncidentCreate({
     control,
     formState: { errors },
     handleSubmit,
-    watch
+    watch,
+    setValue
   } = useForm<
     Omit<NewIncident, "created_by" | "commander_id" | "communicator_id">
   >({
@@ -156,21 +166,26 @@ export function IncidentCreate({
   return (
     <div className={`max-w-prose ${rest.className || ""}`} {...rest}>
       <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="p-5">
-          <div className="mb-4">
-            <ReactSelectDropdown
-              control={control}
-              label="Type"
-              name="type"
-              className="w-full"
-              labelClass="block text-sm font-bold text-gray-700 mb-2"
-              containerClassName="flex flex-col space-y-1"
-              items={typeItems}
-              value={type}
-            />
-            <p className="text-red-600 text-sm">{errors.type?.message}</p>
+        <div className="flex flex-col gap-4 p-5">
+          <div className="flex flex-col">
+            <div className="flex flex-col">
+              <span className="text-sm font-bold text-gray-700 mb-1 mr-4 w-16">
+                Type
+              </span>
+              <SelectDropdown
+                name="type"
+                className="w-full"
+                options={typeOptions}
+                value={type}
+                onChange={(e) => {
+                  if (!e) return;
+                  setValue("type", e);
+                }}
+              />
+              <p className="text-red-600 text-sm">{errors.type?.message}</p>
+            </div>
           </div>
-          <div className="mb-4">
+          <div className="flex flex-col">
             <Controller
               control={control}
               name="title"
@@ -189,7 +204,7 @@ export function IncidentCreate({
             />
             <p className="text-red-600 text-sm">{errors.title?.message}</p>
           </div>
-          <div className="mb-4">
+          <div className="flex flex-col">
             <Controller
               control={control}
               name="description"
@@ -210,94 +225,39 @@ export function IncidentCreate({
               {errors.description?.message}
             </p>
           </div>
-          {/* <div className="mb-4">
-          <Controller
-            control={control}
-            name="communicator_id"
-            render={({ field }) => {
-              const { onChange, value } = field;
-              return (
-                <TextInput
-                  label="Communicator"
-                  id="communicator_id"
-                  className="w-full"
-                  onChange={onChange}
-                  value={value}
-                />
-              );
-            }}
-          />
-          <p className="text-red-600 text-sm">
-            {errors.communicator_id?.message}
-          </p>
-        </div>
-        <div className="mb-4">
-          <Controller
-            control={control}
-            name="commander_id"
-            render={({ field }) => {
-              const { onChange, value } = field;
-              return (
-                <TextInput
-                  label="Commander"
-                  id="commander_id"
-                  className="w-full"
-                  onChange={onChange}
-                  value={value}
-                />
-              );
-            }}
-          />
-          <p className="text-red-600 text-sm">{errors.commander_id?.message}</p>
-        </div> */}
-          {/* <div className="mb-4">
-          <Controller
-            control={control}
-            name="tracking"
-            render={({ field }) => {
-              const { onChange, value } = field;
-              return (
-                <TextInput
-                  label="Tracking"
-                  id="tracking"
-                  type="email"
-                  placeholder="example@company.com"
-                  className="w-full"
-                  onChange={onChange}
-                  value={value}
-                />
-              );
-            }}
-          />
-          <p className="text-red-600 text-sm">{errors.tracking?.message}</p>
-        </div> */}
 
-          <div className="mb-4">
-            {/* have a look at this */}
-            <ReactSelectDropdown
-              control={control}
-              label="Severity"
+          <div className="flex flex-col">
+            <span className="text-sm font-bold text-gray-700 mb-1 mr-4 w-16">
+              Severity
+            </span>
+            <SelectDropdown
               name="severity"
               className="w-full"
-              items={severityItems}
-              containerClassName="flex flex-col space-y-1"
-              labelClass="block text-sm font-bold text-gray-700 mb-2"
+              options={severityOptions}
               value={severity}
+              onChange={(e) => {
+                if (!e) return;
+                setValue("severity", e);
+              }}
             />
             <p className="text-red-600 text-sm">{errors.severity?.message}</p>
           </div>
-          <div className="mb-4">
-            <ReactSelectDropdown
-              control={control}
-              label="Status"
+
+          <div className="flex flex-col">
+            <span className="text-sm font-bold text-gray-700 mb-1 mr-4 w-16">
+              Status
+            </span>
+            <SelectDropdown
               name="status"
               className="w-full"
-              items={incidentStatusItems}
-              labelClass="block text-sm font-bold text-gray-700 mb-2"
-              containerClassName="flex flex-col space-y-1"
+              options={incidentStatusOptions}
               value={status}
+              onChange={(e) => {
+                if (!e) return;
+                setValue("status", e);
+              }}
             />
-            <p className="text-red-600 text-sm">{errors.status?.message}</p>
+            <p className="text-red-600 text-sm">{errors.severity?.message}</p>
           </div>
         </div>
         <div className="flex justify-end bg-gray-100 px-5 py-4 w-full rounded">