diff --git a/apps/app/components/issues/select/assignee.tsx b/apps/app/components/issues/select/assignee.tsx
index 42f7063ae..f932e0e6c 100644
--- a/apps/app/components/issues/select/assignee.tsx
+++ b/apps/app/components/issues/select/assignee.tsx
@@ -1,35 +1,23 @@
-import { useState, FC, Fragment } from "react";
-
 import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
-// headless ui
-import { Transition, Combobox } from "@headlessui/react";
 // services
 import projectServices from "services/project.service";
 // ui
-import { AssigneesList, Avatar } from "components/ui";
+import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
 // icons
-import { UserGroupIcon, MagnifyingGlassIcon, CheckIcon } from "@heroicons/react/24/outline";
-
-// fetch keys
+import { UserGroupIcon } from "@heroicons/react/24/outline";
+// fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
-export type IssueAssigneeSelectProps = {
+export type Props = {
   projectId: string;
   value: string[];
   onChange: (value: string[]) => void;
 };
 
-export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
-  projectId,
-  value = [],
-  onChange,
-}) => {
-  // states
-  const [query, setQuery] = useState("");
-
+export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], onChange }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -41,120 +29,44 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
       : null
   );
 
-  const options = people?.map((person) => ({
-    value: person.member.id,
-    display:
-      person.member.first_name && person.member.first_name !== ""
-        ? person.member.first_name
-        : person.member.email,
-  }));
-
-  const filteredOptions =
-    query === ""
-      ? options
-      : options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase()));
+  const options =
+    people?.map((person) => ({
+      value: person.member.id,
+      query:
+        person.member.first_name && person.member.first_name !== ""
+          ? person.member.first_name
+          : person.member.email,
+      content: (
+        <div className="flex items-center gap-2">
+          <Avatar user={person.member} />
+          {person.member.first_name && person.member.first_name !== ""
+            ? person.member.first_name
+            : person.member.email}
+        </div>
+      ),
+    })) ?? [];
 
   return (
-    <Combobox
-      as="div"
+    <CustomSearchSelect
       value={value}
-      onChange={(val) => onChange(val)}
-      className="relative flex-shrink-0"
+      onChange={onChange}
+      options={options}
+      label={
+        <div className="flex items-center gap-2 text-gray-500">
+          {value && value.length > 0 && Array.isArray(value) ? (
+            <span className="flex items-center justify-center gap-2">
+              <AssigneesList userIds={value} length={3} showLength={false} />
+              <span className=" text-gray-500">{value.length} Assignees</span>
+            </span>
+          ) : (
+            <span className="flex items-center justify-center gap-2">
+              <UserGroupIcon className="h-4 w-4 text-gray-500 " />
+              <span className=" text-gray-500">Assignee</span>
+            </span>
+          )}
+        </div>
+      }
       multiple
-    >
-      {({ open }: any) => (
-        <>
-          <Combobox.Button
-            className={({ open }) =>
-              `flex cursor-pointer items-center rounded-md border text-xs shadow-sm duration-200 
-              ${
-                open
-                  ? "border-theme bg-theme/5 outline-none ring-1 ring-theme "
-                  : "hover:bg-theme/5 "
-              }`
-            }
-          >
-            {value && value.length > 0 && Array.isArray(value) ? (
-              <span className="flex items-center justify-center gap-2 px-3 py-1">
-                <AssigneesList userIds={value} length={3} showLength={false} />
-                <span className=" text-gray-500">{value.length} Assignees</span>
-              </span>
-            ) : (
-              <span className="flex items-center justify-center gap-2 px-3  py-1.5 text-xs">
-                <UserGroupIcon className="h-4 w-4 text-gray-500 " />
-                <span className=" text-gray-500">Assignee</span>
-              </span>
-            )}
-          </Combobox.Button>
-
-          <Transition
-            show={open}
-            as={Fragment}
-            enter="transition ease-out duration-200"
-            enterFrom="opacity-0 translate-y-1"
-            enterTo="opacity-100 translate-y-0"
-            leave="transition ease-in duration-150"
-            leaveFrom="opacity-100 translate-y-0"
-            leaveTo="opacity-0 translate-y-1"
-          >
-            <Combobox.Options
-              className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none
-              bg-white px-2 py-2 text-xs shadow-md focus:outline-none`}
-            >
-              <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-gray-100 px-2">
-                <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
-                <Combobox.Input
-                  className="w-full  bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
-                  onChange={(event) => setQuery(event.target.value)}
-                  placeholder="Search for a person..."
-                  displayValue={(assigned: any) => assigned?.name}
-                />
-              </div>
-              <div className="py-1.5">
-                {filteredOptions ? (
-                  filteredOptions.length > 0 ? (
-                    filteredOptions.map((option) => (
-                      <Combobox.Option
-                        key={option.value}
-                        className={({ active }) =>
-                          `${
-                            active ? "bg-hover-gray" : ""
-                          } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-500`
-                        }
-                        value={option.value}
-                      >
-                        {({ selected, active }) => (
-                          <div className="flex w-full justify-between gap-2 rounded">
-                            <div className="flex items-center justify-start gap-1">
-                              <Avatar
-                                user={people?.find((p) => p.member.id === option.value)?.member}
-                              />
-                              <span>{option.display}</span>
-                            </div>
-                            <div
-                              className={`flex items-center justify-center rounded border border-gray-500  border-opacity-0 p-1 group-hover:border-opacity-100 
-                              ${selected ? "border-opacity-100 " : ""}  
-                              ${active ? "bg-gray-100" : ""} `}
-                            >
-                              <CheckIcon
-                                className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
-                              />
-                            </div>
-                          </div>
-                        )}
-                      </Combobox.Option>
-                    ))
-                  ) : (
-                    <p className="px-2 text-xs text-gray-500">No assignees found</p>
-                  )
-                ) : (
-                  <p className="px-2 text-xs text-gray-500">Loading...</p>
-                )}
-              </div>
-            </Combobox.Options>
-          </Transition>
-        </>
-      )}
-    </Combobox>
+    />
   );
 };
diff --git a/apps/app/components/issues/select/state.tsx b/apps/app/components/issues/select/state.tsx
index a14d384a2..f8a0c5e15 100644
--- a/apps/app/components/issues/select/state.tsx
+++ b/apps/app/components/issues/select/state.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 
 import { useRouter } from "next/router";
 
@@ -6,20 +6,15 @@ import useSWR from "swr";
 
 // services
 import stateService from "services/state.service";
-// headless ui
-import {
-  Squares2X2Icon,
-  PlusIcon,
-  MagnifyingGlassIcon,
-  CheckIcon,
-} from "@heroicons/react/24/outline";
+// ui
+import { CustomSearchSelect } from "components/ui";
 // icons
-import { Combobox, Transition } from "@headlessui/react";
+import { PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+import { getStateGroupIcon } from "components/icons";
 // helpers
 import { getStatesList } from "helpers/state.helper";
 // fetch keys
 import { STATE_LIST } from "constants/fetch-keys";
-import { getStateGroupIcon } from "components/icons";
 
 type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -30,8 +25,6 @@ type Props = {
 
 export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId }) => {
   // states
-  const [query, setQuery] = useState("");
-
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -45,123 +38,40 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
 
   const options = states?.map((state) => ({
     value: state.id,
-    display: state.name,
-    color: state.color,
-    group: state.group,
+    query: state.name,
+    content: (
+      <div className="flex items-center gap-2">
+        {getStateGroupIcon(state.group, "16", "16", state.color)}
+        {state.name}
+      </div>
+    ),
   }));
 
-  const filteredOptions =
-    query === ""
-      ? options
-      : options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase()));
+  const selectedOption = states?.find((s) => s.id === value);
 
-  const currentOption = options?.find((option) => option.value === value);
   return (
-    <Combobox
-      as="div"
+    <CustomSearchSelect
       value={value}
-      onChange={(val: any) => onChange(val)}
-      className="relative flex-shrink-0"
-    >
-      {({ open }: any) => (
-        <>
-          <Combobox.Button
-            className={({ open }) =>
-              `flex cursor-pointer items-center rounded-md border text-xs shadow-sm duration-200 
-            ${
-              open ? "border-theme bg-theme/5 outline-none ring-1 ring-theme " : "hover:bg-theme/5"
-            }`
-            }
-          >
-            {value && value !== "" ? (
-              <span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs">
-                {currentOption && currentOption.group
-                  ? getStateGroupIcon(currentOption.group, "16", "16", currentOption.color)
-                  : ""}
-                <span className=" text-gray-600">{currentOption?.display}</span>
-              </span>
-            ) : (
-              <span className="flex items-center justify-center  gap-2  px-3  py-1.5 text-xs">
-                <Squares2X2Icon className="h-4 w-4 text-gray-500 " />
-                <span className=" text-gray-500">{currentOption?.display || "State"}</span>
-              </span>
-            )}
-          </Combobox.Button>
-
-          <Transition
-            show={open}
-            as={React.Fragment}
-            enter="transition ease-out duration-200"
-            enterFrom="opacity-0 translate-y-1"
-            enterTo="opacity-100 translate-y-0"
-            leave="transition ease-in duration-150"
-            leaveFrom="opacity-100 translate-y-0"
-            leaveTo="opacity-0 translate-y-1"
-          >
-            <Combobox.Options
-              className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none 
-              bg-white px-2 py-2 text-xs shadow-md focus:outline-none`}
-            >
-              <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-gray-100 px-2">
-                <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
-                <Combobox.Input
-                  className="w-full  bg-transparent py-1 px-2  text-xs text-gray-500 focus:outline-none"
-                  onChange={(event) => setQuery(event.target.value)}
-                  placeholder="Search States"
-                  displayValue={(assigned: any) => assigned?.name}
-                />
-              </div>
-              <div className="py-1.5">
-                {filteredOptions ? (
-                  filteredOptions.length > 0 ? (
-                    filteredOptions.map((option) => (
-                      <Combobox.Option
-                        key={option.value}
-                        className={({ active }) =>
-                          `${
-                            active ? "bg-gray-200" : ""
-                          } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
-                        }
-                        value={option.value}
-                      >
-                        {({ selected, active }) =>
-                          states && (
-                            <div className="flex w-full justify-between gap-2 rounded">
-                              <div className="flex items-center justify-start gap-2">
-                                {getStateGroupIcon(option.group, "16", "16", option.color)}
-                                <span>{option.display}</span>
-                              </div>
-                              <div className="flex items-center justify-center rounded p-1">
-                                <CheckIcon
-                                  className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
-                                />
-                              </div>
-                            </div>
-                          )
-                        }
-                      </Combobox.Option>
-                    ))
-                  ) : (
-                    <p className="px-2 text-xs text-gray-500">No states found</p>
-                  )
-                ) : (
-                  <p className="px-2 text-xs text-gray-500">Loading...</p>
-                )}
-                <button
-                  type="button"
-                  className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-gray-200"
-                  onClick={() => setIsOpen(true)}
-                >
-                  <span className="flex items-center justify-start gap-1">
-                    <PlusIcon className="h-4 w-4 text-gray-600" aria-hidden="true" />
-                    <span className="text-gray-600">Create New State</span>
-                  </span>
-                </button>
-              </div>
-            </Combobox.Options>
-          </Transition>
-        </>
-      )}
-    </Combobox>
+      onChange={onChange}
+      options={options}
+      label={
+        <div className="flex items-center gap-2 text-gray-500">
+          <Squares2X2Icon className="h-4 w-4" />
+          {selectedOption &&
+            getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)}
+          {selectedOption?.name ?? "State"}
+        </div>
+      }
+      footerOption={
+        <button
+          type="button"
+          className="flex w-full select-none items-center gap-2 rounded px-1 py-1.5 text-xs text-gray-500 hover:bg-hover-gray"
+          onClick={() => setIsOpen(true)}
+        >
+          <PlusIcon className="h-4 w-4" aria-hidden="true" />
+          Create New State
+        </button>
+      }
+    />
   );
 };
diff --git a/apps/app/components/ui/custom-search-select.tsx b/apps/app/components/ui/custom-search-select.tsx
new file mode 100644
index 000000000..b9266a8af
--- /dev/null
+++ b/apps/app/components/ui/custom-search-select.tsx
@@ -0,0 +1,243 @@
+import React, { useState } from "react";
+
+// headless ui
+import { Combobox, Transition } from "@headlessui/react";
+// icons
+import { CheckIcon, ChevronDownIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+
+type CustomSearchSelectProps = {
+  value: any;
+  onChange: any;
+  options: {
+    value: any;
+    query: string;
+    content: JSX.Element;
+  }[];
+  label?: string | JSX.Element;
+  textAlignment?: "left" | "center" | "right";
+  position?: "right" | "left";
+  input?: boolean;
+  noChevron?: boolean;
+  customButton?: JSX.Element;
+  optionsClassName?: string;
+  disabled?: boolean;
+  selfPositioned?: boolean;
+  multiple?: boolean;
+  footerOption?: JSX.Element;
+};
+
+export const CustomSearchSelect = ({
+  label,
+  textAlignment,
+  value,
+  onChange,
+  options,
+  position = "left",
+  input = false,
+  noChevron = false,
+  customButton,
+  optionsClassName = "",
+  disabled = false,
+  selfPositioned = false,
+  multiple = false,
+  footerOption,
+}: CustomSearchSelectProps) => {
+  const [query, setQuery] = useState("");
+
+  const filteredOptions =
+    query === ""
+      ? options
+      : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  return (
+    <>
+      {/* TODO: Improve this multiple logic */}
+      {multiple ? (
+        <Combobox
+          as="div"
+          value={value}
+          onChange={onChange}
+          className={`${!selfPositioned ? "relative" : ""} flex-shrink-0 text-left`}
+          multiple
+        >
+          {({ open }: any) => (
+            <>
+              {customButton ? (
+                <Combobox.Button as="div">{customButton}</Combobox.Button>
+              ) : (
+                <Combobox.Button
+                  className={`flex w-full ${
+                    disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
+                  } items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+                    input ? "border-gray-300 px-3 py-2 text-sm" : "px-3 py-1.5 text-xs"
+                  } ${
+                    textAlignment === "right"
+                      ? "text-right"
+                      : textAlignment === "center"
+                      ? "text-center"
+                      : "text-left"
+                  }`}
+                >
+                  {label}
+                  {!noChevron && !disabled && (
+                    <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                  )}
+                </Combobox.Button>
+              )}
+
+              <Transition
+                show={open}
+                as={React.Fragment}
+                enter="transition ease-out duration-200"
+                enterFrom="opacity-0 translate-y-1"
+                enterTo="opacity-100 translate-y-0"
+                leave="transition ease-in duration-150"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 translate-y-1"
+              >
+                <Combobox.Options
+                  className={`${optionsClassName} absolute min-w-[10rem] p-2 ${
+                    position === "right" ? "right-0" : "left-0"
+                  } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none  ${
+                    input ? "max-h-48" : ""
+                  }`}
+                >
+                  <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-gray-100 px-2">
+                    <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
+                    <Combobox.Input
+                      className="w-full  bg-transparent py-1 px-2  text-xs text-gray-500 focus:outline-none"
+                      onChange={(e) => setQuery(e.target.value)}
+                      placeholder="Type to search..."
+                      displayValue={(assigned: any) => assigned?.name}
+                    />
+                  </div>
+                  <div className="mt-2">
+                    {filteredOptions ? (
+                      filteredOptions.length > 0 ? (
+                        filteredOptions.map((option) => (
+                          <Combobox.Option
+                            key={option.value}
+                            value={option.value}
+                            className={({ active, selected }) =>
+                              `${active || selected ? "bg-hover-gray" : ""} ${
+                                selected ? "font-medium" : ""
+                              } flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-gray-500`
+                            }
+                          >
+                            {({ selected }) => (
+                              <>
+                                {option.content}
+                                {selected && <CheckIcon className="h-4 w-4" />}
+                              </>
+                            )}
+                          </Combobox.Option>
+                        ))
+                      ) : (
+                        <p className="text-xs text-gray-500">No matching results</p>
+                      )
+                    ) : (
+                      <p className="text-xs text-gray-500">Loading...</p>
+                    )}
+                  </div>
+                  {footerOption}
+                </Combobox.Options>
+              </Transition>
+            </>
+          )}
+        </Combobox>
+      ) : (
+        <Combobox
+          as="div"
+          value={value}
+          onChange={onChange}
+          className={`${!selfPositioned ? "relative" : ""} flex-shrink-0 text-left`}
+        >
+          {({ open }: any) => (
+            <>
+              {customButton ? (
+                <Combobox.Button as="div">{customButton}</Combobox.Button>
+              ) : (
+                <Combobox.Button
+                  className={`flex w-full ${
+                    disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
+                  } items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+                    input ? "border-gray-300 px-3 py-2 text-sm" : "px-3 py-1.5 text-xs"
+                  } ${
+                    textAlignment === "right"
+                      ? "text-right"
+                      : textAlignment === "center"
+                      ? "text-center"
+                      : "text-left"
+                  }`}
+                >
+                  {label}
+                  {!noChevron && !disabled && (
+                    <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                  )}
+                </Combobox.Button>
+              )}
+
+              <Transition
+                show={open}
+                as={React.Fragment}
+                enter="transition ease-out duration-200"
+                enterFrom="opacity-0 translate-y-1"
+                enterTo="opacity-100 translate-y-0"
+                leave="transition ease-in duration-150"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 translate-y-1"
+              >
+                <Combobox.Options
+                  className={`${optionsClassName} absolute min-w-[10rem] p-2 ${
+                    position === "right" ? "right-0" : "left-0"
+                  } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none  ${
+                    input ? "max-h-48" : ""
+                  }`}
+                >
+                  <div className="flex w-full items-center justify-start rounded-sm border bg-gray-100 px-2 text-gray-500">
+                    <MagnifyingGlassIcon className="h-3 w-3" />
+                    <Combobox.Input
+                      className="w-full  bg-transparent py-1 px-2  text-xs focus:outline-none"
+                      onChange={(e) => setQuery(e.target.value)}
+                      placeholder="Type to search..."
+                      displayValue={(assigned: any) => assigned?.name}
+                    />
+                  </div>
+                  <div className="mt-2">
+                    {filteredOptions ? (
+                      filteredOptions.length > 0 ? (
+                        filteredOptions.map((option) => (
+                          <Combobox.Option
+                            key={option.value}
+                            value={option.value}
+                            className={({ active, selected }) =>
+                              `${active || selected ? "bg-hover-gray" : ""} ${
+                                selected ? "font-medium" : ""
+                              } flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-gray-500`
+                            }
+                          >
+                            {({ selected }) => (
+                              <>
+                                {option.content}
+                                {selected && <CheckIcon className="h-4 w-4" />}
+                              </>
+                            )}
+                          </Combobox.Option>
+                        ))
+                      ) : (
+                        <p className="text-gray-500">No matching results</p>
+                      )
+                    ) : (
+                      <p className="text-gray-500">Loading...</p>
+                    )}
+                  </div>
+                  {footerOption}
+                </Combobox.Options>
+              </Transition>
+            </>
+          )}
+        </Combobox>
+      )}
+    </>
+  );
+};
diff --git a/apps/app/components/ui/index.ts b/apps/app/components/ui/index.ts
index 541a6fdb6..66f0ea1e5 100644
--- a/apps/app/components/ui/index.ts
+++ b/apps/app/components/ui/index.ts
@@ -3,6 +3,7 @@ export * from "./text-area";
 export * from "./avatar";
 export * from "./button";
 export * from "./custom-menu";
+export * from "./custom-search-select";
 export * from "./custom-select";
 export * from "./datepicker";
 export * from "./empty-space";