diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index 11675bac85..d8dad77a29 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -14,8 +14,8 @@ import {
   IssuePrioritySelect,
   IssueProjectSelect,
   IssueStateSelect,
+  IssueDateSelect,
 } from "components/issues/select";
-import { CycleSelect as IssueCycleSelect } from "components/cycles/select";
 import { CreateStateModal } from "components/states";
 import { CreateUpdateCycleModal } from "components/cycles";
 import { CreateLabelModal } from "components/labels";
@@ -266,16 +266,16 @@ export const IssueForm: FC<IssueFormProps> = ({
                 />
                 <Controller
                   control={control}
-                  name="cycle"
+                  name="priority"
                   render={({ field: { value, onChange } }) => (
-                    <IssueCycleSelect projectId={projectId} value={value} onChange={onChange} />
+                    <IssuePrioritySelect value={value} onChange={onChange} />
                   )}
                 />
                 <Controller
                   control={control}
-                  name="priority"
+                  name="assignees"
                   render={({ field: { value, onChange } }) => (
-                    <IssuePrioritySelect value={value} onChange={onChange} />
+                    <IssueAssigneeSelect projectId={projectId} value={value} onChange={onChange} />
                   )}
                 />
                 <Controller
@@ -295,21 +295,10 @@ export const IssueForm: FC<IssueFormProps> = ({
                     control={control}
                     name="target_date"
                     render={({ field: { value, onChange } }) => (
-                      <CustomDatePicker
-                        value={value}
-                        onChange={onChange}
-                        className="max-w-[7rem]"
-                      />
+                      <IssueDateSelect value={value} onChange={onChange} />
                     )}
                   />
                 </div>
-                <Controller
-                  control={control}
-                  name="assignees"
-                  render={({ field: { value, onChange } }) => (
-                    <IssueAssigneeSelect projectId={projectId} value={value} onChange={onChange} />
-                  )}
-                />
                 <IssueParentSelect
                   control={control}
                   isOpen={parentIssueListModalOpen}
diff --git a/apps/app/components/issues/select/assignee.tsx b/apps/app/components/issues/select/assignee.tsx
index 414ec2e9a9..0cedee0cdb 100644
--- a/apps/app/components/issues/select/assignee.tsx
+++ b/apps/app/components/issues/select/assignee.tsx
@@ -10,6 +10,9 @@ import { Transition, Combobox } from "@headlessui/react";
 import projectServices from "services/project.service";
 // ui
 import { AssigneesList, Avatar } from "components/ui";
+// icons
+import { UserGroupIcon, MagnifyingGlassIcon, CheckIcon } from "@heroicons/react/24/outline";
+
 // fetch keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -61,48 +64,83 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
     >
       {({ open }: any) => (
         <>
-          <Combobox.Button className="flex items-center cursor-pointer gap-1 rounded-md">
-            <div className="flex items-center gap-1 text-xs">
-              {value && Array.isArray(value) ? <AssigneesList userIds={value} length={10} /> : null}
-            </div>
+          <Combobox.Button
+            className={({ open }) =>
+              `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
+              ${
+                open
+                  ? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
+                  : "hover:bg-theme/5 "
+              }`
+            }
+          >
+            {value && value.length > 0 && Array.isArray(value) ? (
+              <span className="flex items-center justify-center text-xs 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 text-xs gap-2  px-3 py-1.5">
+                <UserGroupIcon className="h-4 w-4 text-gray-500 " />
+                <span className=" text-gray-500">Assignee</span>
+              </span>
+            )}
           </Combobox.Button>
 
           <Transition
             show={open}
             as={Fragment}
-            leave="transition ease-in duration-100"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
+            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-32 min-w-[8rem] overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none text-xs`}
+              className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
+              rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
             >
-              <Combobox.Input
-                className="w-full border-b bg-transparent p-2 text-xs focus:outline-none"
-                onChange={(event) => setQuery(event.target.value)}
-                placeholder="Search"
-                displayValue={(assigned: any) => assigned?.name}
-              />
-              <div className="py-1">
+              <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full 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, selected }) =>
-                          `${active ? "bg-indigo-50" : ""} ${
-                            selected ? "bg-indigo-50 font-medium" : ""
-                          } flex cursor-pointer select-none items-center gap-2 truncate px-2 py-1 text-gray-900`
+                        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-500`
                         }
                         value={option.value}
                       >
-                        {people && (
-                          <>
-                            <Avatar
-                              user={people?.find((p) => p.member.id === option.value)?.member}
-                            />
-                            {option.display}
-                          </>
+                        {({ selected, active }) => (
+                          <div className="flex w-full gap-2 justify-between rounded">
+                            <div className="flex justify-start items-center gap-1">
+                              <Avatar
+                                user={people?.find((p) => p.member.id === option.value)?.member}
+                              />
+                              <span>{option.display}</span>
+                            </div>
+                            <div
+                              className={`flex justify-center items-center p-1 rounded border  border-gray-500 border-opacity-0 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>
                     ))
diff --git a/apps/app/components/issues/select/date.tsx b/apps/app/components/issues/select/date.tsx
new file mode 100644
index 0000000000..0760b0214a
--- /dev/null
+++ b/apps/app/components/issues/select/date.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+
+import { Popover, Transition } from "@headlessui/react";
+import { CalendarDaysIcon, XMarkIcon } from "@heroicons/react/24/outline";
+// react-datepicker
+import DatePicker from "react-datepicker";
+// import "react-datepicker/dist/react-datepicker.css";
+import { renderDateFormat } from "helpers/date-time.helper";
+
+type Props = {
+  value: string | null;
+  onChange: (val: string | null) => void;
+};
+
+export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
+  <Popover className="flex justify-center items-center relative  rounded-lg">
+    {({ open }) => (
+      <>
+        <Popover.Button
+          className={({ open }) =>
+            `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
+              ${
+                open
+                  ? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
+                  : "hover:bg-theme/5 "
+              }`
+          }
+        >
+          <span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
+            {value ? (
+              <>
+                <span className="text-gray-600">{value}</span>
+                <button onClick={() => onChange(null)}>
+                  <XMarkIcon className="h-3 w-3 text-gray-600" />
+                </button>
+              </>
+            ) : (
+              <>
+                <CalendarDaysIcon className="h-4 w-4 flex-shrink-0 " />
+                <span className="text-gray-500">Due Date</span>
+              </>
+            )}
+          </span>
+        </Popover.Button>
+
+        <Transition
+          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"
+        >
+          <Popover.Panel className="absolute top-10 -left-10 z-20  transform overflow-hidden">
+            <DatePicker
+              selected={value ? new Date(value) : null}
+              onChange={(val) => {
+                if (!val) onChange("");
+                else onChange(renderDateFormat(val));
+              }}
+              dateFormat="dd-MM-yyyy"
+              inline
+            />
+          </Popover.Panel>
+        </Transition>
+      </>
+    )}
+  </Popover>
+);
diff --git a/apps/app/components/issues/select/index.ts b/apps/app/components/issues/select/index.ts
index 4338b31629..a21a1cbbb5 100644
--- a/apps/app/components/issues/select/index.ts
+++ b/apps/app/components/issues/select/index.ts
@@ -4,3 +4,4 @@ export * from "./parent";
 export * from "./priority";
 export * from "./project";
 export * from "./state";
+export * from "./date";
diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx
index 2b810b30ab..d762b2bc0d 100644
--- a/apps/app/components/issues/select/label.tsx
+++ b/apps/app/components/issues/select/label.tsx
@@ -7,13 +7,20 @@ import useSWR from "swr";
 // headless ui
 import { Combobox, Transition } from "@headlessui/react";
 // icons
-import { PlusIcon, RectangleGroupIcon, TagIcon } from "@heroicons/react/24/outline";
+import {
+  CheckIcon,
+  MagnifyingGlassIcon,
+  PlusIcon,
+  RectangleGroupIcon,
+  TagIcon,
+} from "@heroicons/react/24/outline";
 // services
 import issuesServices from "services/issues.service";
 // types
 import type { IIssueLabels } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+import { IssueLabelsList } from "components/ui";
 
 type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -52,36 +59,57 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
       >
         {({ open }: any) => (
           <>
-            <Combobox.Label className="sr-only">Labels</Combobox.Label>
             <Combobox.Button
-              className={`flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
+              className={({ open }) =>
+                `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
+              ${
+                open
+                  ? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
+                  : "hover:bg-theme/5 "
+              }`
+              }
             >
-              <TagIcon className="h-3 w-3 text-gray-500" />
-              <span className={`flex items-center gap-2 ${!value ? "" : "text-gray-900"}`}>
-                {Array.isArray(value)
-                  ? value.map((v) => issueLabels?.find((l) => l.id === v)?.name).join(", ") ||
-                    "Labels"
-                  : issueLabels?.find((l) => l.id === value)?.name || "Labels"}
-              </span>
+              {value && value.length > 0 ? (
+                <span className="flex items-center justify-center text-xs gap-2 px-3 py-1">
+                  <IssueLabelsList
+                    labels={value.map((v) => issueLabels?.find((l) => l.id === v)?.color) ?? []}
+                    length={3}
+                    showLength
+                  />
+                  <span className=" text-gray-600">{value.length} Labels</span>
+                </span>
+              ) : (
+                <span className="flex items-center justify-center text-xs gap-2  px-3 py-1.5">
+                  <TagIcon className="h-3 w-3 text-gray-500" />
+                  <span className=" text-gray-500">Label</span>
+                </span>
+              )}
             </Combobox.Button>
 
             <Transition
               show={open}
               as={React.Fragment}
-              leave="transition ease-in duration-100"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
+              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-32 min-w-[8rem] overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none text-xs`}
+                className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
+                rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
               >
-                <Combobox.Input
-                  className="w-full border-b bg-transparent p-2 text-xs focus:outline-none"
-                  onChange={(event) => setQuery(event.target.value)}
-                  placeholder="Search"
-                  displayValue={(assigned: any) => assigned?.name}
-                />
-                <div className="py-1">
+                <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full 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 label..."
+                    displayValue={(assigned: any) => assigned?.name}
+                  />
+                </div>
+                <div className="py-1.5">
                   {issueLabels && filteredOptions ? (
                     filteredOptions.length > 0 ? (
                       filteredOptions.map((label) => {
@@ -92,21 +120,36 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                             return (
                               <Combobox.Option
                                 key={label.id}
-                                className={({ active, selected }) =>
-                                  `${active ? "bg-indigo-50" : ""} ${
-                                    selected ? "bg-indigo-50 font-medium" : ""
-                                  } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
+                                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={label.id}
                               >
-                                <span
-                                  className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                                  style={{
-                                    backgroundColor:
-                                      label.color && label.color !== "" ? label.color : "#000",
-                                  }}
-                                />
-                                {label.name}
+                                {({ selected }) => (
+                                  <div className="flex w-full gap-2 justify-between rounded">
+                                    <div className="flex justify-start items-center gap-2">
+                                      <span
+                                        className="h-3 w-3 flex-shrink-0 rounded-full"
+                                        style={{
+                                          backgroundColor:
+                                            label.color && label.color !== ""
+                                              ? label.color
+                                              : "#000",
+                                        }}
+                                      />
+                                      <span>{label.name}</span>
+                                    </div>
+                                    <div className="flex justify-center items-center p-1 rounded">
+                                      <CheckIcon
+                                        className={`h-3 w-3 ${
+                                          selected ? "opacity-100" : "opacity-0"
+                                        }`}
+                                      />
+                                    </div>
+                                  </div>
+                                )}
                               </Combobox.Option>
                             );
                         } else
@@ -119,20 +162,33 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                                 {children.map((child) => (
                                   <Combobox.Option
                                     key={child.id}
-                                    className={({ active, selected }) =>
-                                      `${active ? "bg-indigo-50" : ""} ${
-                                        selected ? "bg-indigo-50 font-medium" : ""
-                                      } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
+                                    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={child.id}
                                   >
-                                    <span
-                                      className="h-2 w-2 flex-shrink-0 rounded-full"
-                                      style={{
-                                        backgroundColor: child?.color ?? "black",
-                                      }}
-                                    />
-                                    {child.name}
+                                    {({ selected }) => (
+                                      <div className="flex w-full gap-2 justify-between rounded">
+                                        <div className="flex justify-start items-center gap-2">
+                                          <span
+                                            className="h-3 w-3 flex-shrink-0 rounded-full"
+                                            style={{
+                                              backgroundColor: child?.color ?? "black",
+                                            }}
+                                          />
+                                          <span>{child.name}</span>
+                                        </div>
+                                        <div className="flex justify-center items-center p-1 rounded">
+                                          <CheckIcon
+                                            className={`h-3 w-3 ${
+                                              selected ? "opacity-100" : "opacity-0"
+                                            }`}
+                                          />
+                                        </div>
+                                      </div>
+                                    )}
                                   </Combobox.Option>
                                 ))}
                               </div>
@@ -147,11 +203,13 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                   )}
                   <button
                     type="button"
-                    className="flex select-none w-full items-center gap-2 p-2 text-gray-400 outline-none hover:bg-indigo-50 hover:text-gray-900"
+                    className="flex select-none w-full items-center py-2 px-1 rounded hover:bg-gray-200"
                     onClick={() => setIsOpen(true)}
                   >
-                    <PlusIcon className="h-3 w-3 text-gray-400" aria-hidden="true" />
-                    <span className="text-xs whitespace-nowrap">Create label</span>
+                    <span className="flex justify-start items-center gap-1">
+                      <PlusIcon className="h-4 w-4 text-gray-600" aria-hidden="true" />
+                      <span className="text-gray-600">Create New Label</span>
+                    </span>
                   </button>
                 </div>
               </Combobox.Options>
diff --git a/apps/app/components/issues/select/priority.tsx b/apps/app/components/issues/select/priority.tsx
index 1347e27659..4a3c5fdba6 100644
--- a/apps/app/components/issues/select/priority.tsx
+++ b/apps/app/components/issues/select/priority.tsx
@@ -6,6 +6,7 @@ import { Listbox, Transition } from "@headlessui/react";
 import { getPriorityIcon } from "components/icons/priority-icon";
 // constants
 import { PRIORITIES } from "constants/project";
+import { CheckIcon } from "@heroicons/react/24/outline";
 
 type Props = {
   value: string | null;
@@ -16,34 +17,62 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
   <Listbox as="div" className="relative" value={value} onChange={onChange}>
     {({ open }) => (
       <>
-        <Listbox.Button className="flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
-          <span className="text-gray-500 grid place-items-center">{getPriorityIcon(value)}</span>
-          <div className="flex items-center gap-2 capitalize">{value ?? "Priority"}</div>
+        <Listbox.Button
+          className={({ open }) =>
+            `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
+            ${
+              open ? "outline-none border-theme bg-theme/5 ring-1 ring-theme " : "hover:bg-theme/5"
+            }`
+          }
+        >
+          <span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
+            <span className="flex items-center">
+              {getPriorityIcon(value, `${value ? "text-xs" : "text-xs text-gray-500"}`)}
+            </span>
+            <span className={`${value ? "text-gray-600" : "text-gray-500"} capitalize`}>
+              {value ?? "Priority"}
+            </span>
+          </span>
         </Listbox.Button>
 
         <Transition
           show={open}
           as={React.Fragment}
-          leave="transition ease-in duration-100"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
+          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"
         >
-          <Listbox.Options className="absolute mt-1 max-h-32 min-w-[8rem] overflow-y-auto whitespace-nowrap bg-white shadow-lg text-xs z-10 rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none">
-            <div className="py-1">
+          <Listbox.Options
+            className={`absolute z-10 max-h-52 min-w-[8rem] px-2 py-2  text-xs 
+              rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
+          >
+            <div>
               {PRIORITIES.map((priority) => (
                 <Listbox.Option
                   key={priority}
-                  className={({ selected, active }) =>
-                    `${selected ? "bg-indigo-50 font-medium" : ""} ${
-                      active ? "bg-indigo-50" : ""
-                    } relative cursor-pointer select-none p-2 text-gray-900`
+                  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={priority}
                 >
-                  <span className="flex items-center gap-2 capitalize">
-                    {getPriorityIcon(priority)}
-                    {priority ?? "None"}
-                  </span>
+                  {({ selected, active }) => (
+                    <div className="flex w-full gap-2 justify-between rounded">
+                      <div className="flex justify-start items-center gap-2">
+                        <span>{getPriorityIcon(priority)}</span>
+                        <span className="capitalize">{priority ?? "None"}</span>
+                      </div>
+                      <div className="flex justify-center items-center p-1 rounded">
+                        <CheckIcon
+                          className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
+                        />
+                      </div>
+                    </div>
+                  )}
                 </Listbox.Option>
               ))}
             </div>
diff --git a/apps/app/components/issues/select/state.tsx b/apps/app/components/issues/select/state.tsx
index 269b0af733..41f498ec0f 100644
--- a/apps/app/components/issues/select/state.tsx
+++ b/apps/app/components/issues/select/state.tsx
@@ -7,13 +7,19 @@ import useSWR from "swr";
 // services
 import stateService from "services/state.service";
 // headless ui
-import { Squares2X2Icon, PlusIcon } from "@heroicons/react/24/outline";
+import {
+  Squares2X2Icon,
+  PlusIcon,
+  MagnifyingGlassIcon,
+  CheckIcon,
+} from "@heroicons/react/24/outline";
 // icons
 import { Combobox, Transition } from "@headlessui/react";
 // 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>>;
@@ -41,6 +47,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
     value: state.id,
     display: state.name,
     color: state.color,
+    group: state.group,
   }));
 
   const filteredOptions =
@@ -48,6 +55,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
       ? options
       : options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase()));
 
+  const currentOption = options?.find((option) => option.value === value);
   return (
     <Combobox
       as="div"
@@ -57,64 +65,80 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
     >
       {({ open }: any) => (
         <>
-          <Combobox.Label className="sr-only">State</Combobox.Label>
           <Combobox.Button
-            className={`flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
+            className={({ open }) =>
+              `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
+            ${
+              open ? "outline-none border-theme bg-theme/5 ring-1 ring-theme " : "hover:bg-theme/5"
+            }`
+            }
           >
-            <Squares2X2Icon className="h-3 w-3 text-gray-500" />
-            <span className={`flex items-center gap-2 ${!value ? "" : "text-gray-900"}`}>
-              {value && value !== "" ? (
-                <span
-                  className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                  style={{
-                    backgroundColor: options?.find((option) => option.value === value)?.color,
-                  }}
-                />
-              ) : null}
-              {options?.find((option) => option.value === value)?.display || "State"}
-            </span>
+            {value && value !== "" ? (
+              <span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
+                {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  text-xs  gap-2  px-3 py-1.5">
+                <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}
-            leave="transition ease-in duration-100"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
+            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-32 min-w-[8rem] overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none text-xs`}
+              className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs 
+              rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
             >
-              <Combobox.Input
-                className="w-full border-b bg-transparent p-2 text-xs focus:outline-none"
-                onChange={(event) => setQuery(event.target.value)}
-                placeholder="Search"
-                displayValue={(assigned: any) => assigned?.name}
-              />
-              <div className="py-1">
+              <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full 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, selected }) =>
-                          `${active ? "bg-indigo-50" : ""} ${
-                            selected ? "bg-indigo-50 font-medium" : ""
-                          } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
+                        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}
                       >
-                        {states && (
-                          <>
-                            <span
-                              className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
-                              style={{
-                                backgroundColor: option.color,
-                              }}
-                            />
-                            {option.display}
-                          </>
-                        )}
+                        {({ selected, active }) =>
+                          states && (
+                            <div className="flex w-full gap-2 justify-between rounded">
+                              <div className="flex justify-start items-center gap-2">
+                                {getStateGroupIcon(option.group, "16", "16", option.color)}
+                                <span>{option.display}</span>
+                              </div>
+                              <div className="flex justify-center items-center p-1 rounded">
+                                <CheckIcon
+                                  className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
+                                />
+                              </div>
+                            </div>
+                          )
+                        }
                       </Combobox.Option>
                     ))
                   ) : (
@@ -125,11 +149,13 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                 )}
                 <button
                   type="button"
-                  className="flex select-none w-full items-center gap-2 p-2 text-gray-400 hover:bg-indigo-50 hover:text-gray-900"
+                  className="flex select-none w-full items-center py-2 px-1 rounded hover:bg-gray-200"
                   onClick={() => setIsOpen(true)}
                 >
-                  <PlusIcon className="h-3 w-3 text-gray-400" aria-hidden="true" />
-                  <span className="text-xs whitespace-nowrap">Create state</span>
+                  <span className="flex justify-start items-center 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>
diff --git a/apps/app/components/ui/avatar.tsx b/apps/app/components/ui/avatar.tsx
index 4726ca8350..2b1c7b2cc4 100644
--- a/apps/app/components/ui/avatar.tsx
+++ b/apps/app/components/ui/avatar.tsx
@@ -18,7 +18,7 @@ type AvatarProps = {
 };
 
 export const Avatar: React.FC<AvatarProps> = ({ user, index }) => (
-  <div className={`relative h-5 w-5 rounded-full ${index && index !== 0 ? "-ml-2.5" : ""}`}>
+  <div className={`relative h-5 w-5 rounded-full ${index && index !== 0 ? "-ml-3.5" : ""}`}>
     {user && user.avatar && user.avatar !== "" ? (
       <div
         className={`h-5 w-5 rounded-full border-2 ${
@@ -47,9 +47,15 @@ type AsigneesListProps = {
   users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[];
   userIds?: string[];
   length?: number;
+  showLength?: boolean;
 };
 
-export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, length = 5 }) => {
+export const AssigneesList: React.FC<AsigneesListProps> = ({
+  users,
+  userIds,
+  length = 5,
+  showLength = true,
+}) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -82,7 +88,13 @@ export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, len
 
             return <Avatar key={userId} user={user} index={index} />;
           })}
-          {userIds.length > length ? <span>+{userIds.length - length}</span> : null}
+          {showLength ? (
+            userIds.length > length ? (
+              <span>+{userIds.length - length}</span>
+            ) : null
+          ) : (
+            ""
+          )}
         </>
       )}
     </>
diff --git a/apps/app/components/ui/index.ts b/apps/app/components/ui/index.ts
index 04cb34fa3b..ca610a71cf 100644
--- a/apps/app/components/ui/index.ts
+++ b/apps/app/components/ui/index.ts
@@ -15,3 +15,4 @@ export * from "./progress-bar";
 export * from "./select";
 export * from "./spinner";
 export * from "./tooltip";
+export * from "./labels-list";
diff --git a/apps/app/components/ui/labels-list.tsx b/apps/app/components/ui/labels-list.tsx
new file mode 100644
index 0000000000..26257549b3
--- /dev/null
+++ b/apps/app/components/ui/labels-list.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+type IssueLabelsListProps = {
+  labels?: (string | undefined)[];
+  length?: number;
+  showLength?: boolean;
+};
+
+export const IssueLabelsList: React.FC<IssueLabelsListProps> = ({
+  labels,
+  length = 5,
+  showLength = true,
+}) => (
+  <>
+    {labels && (
+      <>
+        {labels.map((color, index) => (
+          <div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
+            <span
+              className={`h-4 w-4 flex-shrink-0 rounded-full border border-white
+              `}
+              style={{
+                backgroundColor: color,
+              }}
+            />
+          </div>
+        ))}
+        {labels.length > length ? <span>+{labels.length - length}</span> : null}
+      </>
+    )}
+  </>
+);