From b5b809500dc671e8aba29d64a6ee6fcc073db3db Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Wed, 4 Oct 2023 14:38:49 +0530
Subject: [PATCH] chore: issue properties for list and kanban layouts and
 implemented estimates in project store (#2363)

* chore: issue properties for state, priorit, labels and members

* feat: implemented assignee, labels properties

* fix: implemented estimates in project store and issue properties

* chore: staer_date and due_date and validation properties in kanban
---
 web/components/core/views/all-views.tsx       |  45 +--
 .../issues/issue-layouts/kanban/block.tsx     |  27 +-
 .../issues/issue-layouts/kanban/default.tsx   | 182 +++++++-----
 .../issue-layouts/kanban/headers/priority.tsx |   1 +
 .../issue-layouts/kanban/properties.tsx       | 272 +++++++++++++-----
 .../issues/issue-layouts/kanban/root.tsx      |  24 +-
 .../issues/issue-layouts/kanban/swimlanes.tsx | 267 +++++++++--------
 .../issue-layouts/properties/assignee.tsx     | 266 +++++++++++++++++
 .../issues/issue-layouts/properties/date.tsx  |  96 +++++++
 .../properties/dropdown-template.tsx          | 177 ++++++++++++
 .../issue-layouts/properties/estimates.tsx    | 215 ++++++++++++++
 .../issue-layouts/properties/labels.tsx       | 234 +++++++++++++++
 .../issue-layouts/properties/priority.tsx     | 224 +++++++++++++++
 .../issues/issue-layouts/properties/state.tsx | 218 ++++++++++++++
 web/components/states/state-select.tsx        | 139 +++++----
 web/components/ui/tooltip.tsx                 |  10 +-
 web/store/issue.ts                            |   8 +-
 web/store/project.ts                          |  62 +++-
 18 files changed, 2074 insertions(+), 393 deletions(-)
 create mode 100644 web/components/issues/issue-layouts/properties/assignee.tsx
 create mode 100644 web/components/issues/issue-layouts/properties/date.tsx
 create mode 100644 web/components/issues/issue-layouts/properties/dropdown-template.tsx
 create mode 100644 web/components/issues/issue-layouts/properties/estimates.tsx
 create mode 100644 web/components/issues/issue-layouts/properties/labels.tsx
 create mode 100644 web/components/issues/issue-layouts/properties/priority.tsx
 create mode 100644 web/components/issues/issue-layouts/properties/state.tsx

diff --git a/web/components/core/views/all-views.tsx b/web/components/core/views/all-views.tsx
index 85830ee27..a8d6f929a 100644
--- a/web/components/core/views/all-views.tsx
+++ b/web/components/core/views/all-views.tsx
@@ -19,32 +19,39 @@ export const AllViews: React.FC = observer(() => {
 
   const { issue: issueStore, project: projectStore, issueFilter: issueFilterStore } = useMobxStore();
 
-  useSWR(workspaceSlug && projectId ? `PROJECT_ISSUES` : null, async () => {
-    if (workspaceSlug && projectId) {
-      await issueFilterStore.fetchUserProjectFilters(workspaceSlug, projectId);
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_ISSUES` : null,
+    async () => {
+      if (workspaceSlug && projectId) {
+        await issueFilterStore.fetchUserProjectFilters(workspaceSlug, projectId);
 
-      await projectStore.fetchProjectStates(workspaceSlug, projectId);
-      await projectStore.fetchProjectLabels(workspaceSlug, projectId);
-      await projectStore.fetchProjectMembers(workspaceSlug, projectId);
+        await projectStore.fetchProjectStates(workspaceSlug, projectId);
+        await projectStore.fetchProjectLabels(workspaceSlug, projectId);
+        await projectStore.fetchProjectMembers(workspaceSlug, projectId);
+        await projectStore.fetchProjectEstimates(workspaceSlug, projectId);
 
-      await issueStore.fetchIssues(workspaceSlug, projectId);
-    }
-  });
+        await issueStore.fetchIssues(workspaceSlug, projectId);
+      }
+    },
+    { revalidateOnFocus: false }
+  );
 
   const activeLayout = issueFilterStore.userDisplayFilters.layout;
 
   return (
     <div className="relative w-full h-full flex flex-col overflow-auto">
-      <AppliedFiltersRoot />
-      {activeLayout === "kanban" ? (
-        <KanBanLayout />
-      ) : activeLayout === "calendar" ? (
-        <CalendarLayout />
-      ) : activeLayout === "gantt_chart" ? (
-        <GanttLayout />
-      ) : activeLayout === "spreadsheet" ? (
-        <SpreadsheetLayout />
-      ) : null}
+      <AppliedFiltersList />
+      <div className="w-full h-full">
+        {activeLayout === "kanban" ? (
+          <KanBanLayout />
+        ) : activeLayout === "calendar" ? (
+          <CalendarLayout />
+        ) : activeLayout === "gantt_chart" ? (
+          <GanttLayout />
+        ) : activeLayout === "spreadsheet" ? (
+          <SpreadsheetLayout />
+        ) : null}
+      </div>
     </div>
   );
 });
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index ad424df25..c65680dc1 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -8,9 +8,18 @@ interface IssueBlockProps {
   columnId: string;
   issues: any;
   isDragDisabled: boolean;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
 }
 
-export const IssueBlock = ({ sub_group_id, columnId, issues, isDragDisabled }: IssueBlockProps) => (
+export const IssueBlock = ({
+  sub_group_id,
+  columnId,
+  issues,
+  isDragDisabled,
+  handleIssues,
+  display_properties,
+}: IssueBlockProps) => (
   <>
     {issues && issues.length > 0 ? (
       <>
@@ -30,14 +39,22 @@ export const IssueBlock = ({ sub_group_id, columnId, issues, isDragDisabled }: I
                 ref={provided.innerRef}
               >
                 <div
-                  className={`min-h-[106px] text-sm rounded p-2 px-3 shadow-custom-shadow-2xs space-y-[8px] border transition-all bg-custom-background-100 hover:cursor-grab ${
+                  className={`text-sm rounded p-2 px-3 shadow-custom-shadow-2xs space-y-[8px] border transition-all bg-custom-background-100 hover:cursor-grab ${
                     snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`
                   }`}
                 >
-                  <div className="text-xs line-clamp-1 text-custom-text-300">ONE-{issue.sequence_id}</div>
+                  {display_properties && display_properties?.key && (
+                    <div className="text-xs line-clamp-1 text-custom-text-300">ONE-{issue.sequence_id}</div>
+                  )}
                   <div className="line-clamp-2 h-[40px] text-sm font-medium text-custom-text-100">{issue.name}</div>
-                  <div className="min-h-[22px]">
-                    <KanBanProperties />
+                  <div>
+                    <KanBanProperties
+                      sub_group_id={sub_group_id}
+                      columnId={columnId}
+                      issue={issue}
+                      handleIssues={handleIssues}
+                      display_properties={display_properties}
+                    />
                   </div>
                 </div>
               </div>
diff --git a/web/components/issues/issue-layouts/kanban/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx
index 842550e40..395e93ea8 100644
--- a/web/components/issues/issue-layouts/kanban/default.tsx
+++ b/web/components/issues/issue-layouts/kanban/default.tsx
@@ -19,12 +19,23 @@ export interface IGroupByKanBan {
   sub_group_id: string;
   list: any;
   listKey: string;
-  handleIssues?: () => void;
   isDragDisabled: boolean;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
 }
 
 const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
-  ({ issues, sub_group_by, group_by, sub_group_id = "null", list, listKey, isDragDisabled }) => {
+  ({
+    issues,
+    sub_group_by,
+    group_by,
+    sub_group_id = "null",
+    list,
+    listKey,
+    isDragDisabled,
+    handleIssues,
+    display_properties,
+  }) => {
     const { issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();
 
     const verticalAlignPosition = (_list: any) =>
@@ -42,7 +53,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
                     column_id={getValueFromObject(_list, listKey) as string}
                     sub_group_by={sub_group_by}
                     group_by={group_by}
-                    issues_count={issues?.[getValueFromObject(_list, listKey) as string].length || 0}
+                    issues_count={issues?.[getValueFromObject(_list, listKey) as string]?.length || 0}
                   />
                 </div>
               )}
@@ -64,6 +75,8 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
                             columnId={getValueFromObject(_list, listKey) as string}
                             issues={issues[getValueFromObject(_list, listKey) as string]}
                             isDragDisabled={isDragDisabled}
+                            handleIssues={handleIssues}
+                            display_properties={display_properties}
                           />
                         ) : (
                           isDragDisabled && (
@@ -90,86 +103,101 @@ export interface IKanBan {
   sub_group_by: string | null;
   group_by: string | null;
   sub_group_id?: string;
-  handleIssues?: () => void;
   handleDragDrop?: (result: any) => void | undefined;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
 }
 
-export const KanBan: React.FC<IKanBan> = observer(({ issues, sub_group_by, group_by, sub_group_id = "null" }) => {
-  const { project: projectStore, issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();
+export const KanBan: React.FC<IKanBan> = observer(
+  ({ issues, sub_group_by, group_by, sub_group_id = "null", handleIssues, display_properties }) => {
+    const { project: projectStore, issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();
 
-  return (
-    <div className="relative w-full h-full">
-      {group_by && group_by === "state" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          sub_group_by={sub_group_by}
-          sub_group_id={sub_group_id}
-          list={projectStore?.projectStates}
-          listKey={`id`}
-          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-        />
-      )}
+    return (
+      <div className="relative w-full h-full">
+        {group_by && group_by === "state" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={projectStore?.projectStates}
+            listKey={`id`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+          />
+        )}
 
-      {group_by && group_by === "state_detail.group" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          sub_group_by={sub_group_by}
-          sub_group_id={sub_group_id}
-          list={ISSUE_STATE_GROUPS}
-          listKey={`key`}
-          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-        />
-      )}
+        {group_by && group_by === "state_detail.group" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={ISSUE_STATE_GROUPS}
+            listKey={`key`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+          />
+        )}
 
-      {group_by && group_by === "priority" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          sub_group_by={sub_group_by}
-          sub_group_id={sub_group_id}
-          list={ISSUE_PRIORITIES}
-          listKey={`key`}
-          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-        />
-      )}
+        {group_by && group_by === "priority" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={ISSUE_PRIORITIES}
+            listKey={`key`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+          />
+        )}
 
-      {group_by && group_by === "labels" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          sub_group_by={sub_group_by}
-          sub_group_id={sub_group_id}
-          list={projectStore?.projectLabels}
-          listKey={`id`}
-          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-        />
-      )}
+        {group_by && group_by === "labels" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={projectStore?.projectLabels}
+            listKey={`id`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+          />
+        )}
 
-      {group_by && group_by === "assignees" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          sub_group_by={sub_group_by}
-          sub_group_id={sub_group_id}
-          list={projectStore?.projectMembers}
-          listKey={`member.id`}
-          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-        />
-      )}
+        {group_by && group_by === "assignees" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={projectStore?.projectMembers}
+            listKey={`member.id`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+          />
+        )}
 
-      {group_by && group_by === "created_by" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          sub_group_by={sub_group_by}
-          sub_group_id={sub_group_id}
-          list={projectStore?.projectMembers}
-          listKey={`member.id`}
-          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
-        />
-      )}
-    </div>
-  );
-});
+        {group_by && group_by === "created_by" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={projectStore?.projectMembers}
+            listKey={`member.id`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+          />
+        )}
+      </div>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/kanban/headers/priority.tsx b/web/components/issues/issue-layouts/kanban/headers/priority.tsx
index 38e4afbc4..91820530b 100644
--- a/web/components/issues/issue-layouts/kanban/headers/priority.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/priority.tsx
@@ -8,6 +8,7 @@ import { HeaderSubGroupByCard } from "./sub-group-by-card";
 // constants
 import { issuePriorityByKey } from "constants/issue";
 
+
 export interface IPriorityHeader {
   column_id: string;
   sub_group_by: string | null;
diff --git a/web/components/issues/issue-layouts/kanban/properties.tsx b/web/components/issues/issue-layouts/kanban/properties.tsx
index b2a8ce8ff..03df73fca 100644
--- a/web/components/issues/issue-layouts/kanban/properties.tsx
+++ b/web/components/issues/issue-layouts/kanban/properties.tsx
@@ -1,91 +1,205 @@
+// mobx
+import { observer } from "mobx-react-lite";
 // lucide icons
-import { Circle } from "lucide-react";
+import { Layers, Link, Paperclip } from "lucide-react";
+// components
+import { IssuePropertyState } from "../properties/state";
+import { IssuePropertyPriority } from "../properties/priority";
+import { IssuePropertyLabels } from "../properties/labels";
+import { IssuePropertyAssignee } from "../properties/assignee";
+import { IssuePropertyEstimates } from "../properties/estimates";
+import { IssuePropertyStartDate } from "../properties/date";
+import { Tooltip } from "components/ui";
 
-export const KanBanProperties = () => {
-  console.log("properties");
-  return (
-    <div className="relative flex gap-2 overflow-hidden overflow-x-auto whitespace-nowrap">
-      {/* basic properties */}
-      {/* state */}
-      <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-        <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-          <Circle width={10} strokeWidth={2} />
-        </div>
-        <div className="pl-0.5 pr-1 text-xs">state</div>
-      </div>
+export interface IKanBanProperties {
+  sub_group_id: string;
+  columnId: string;
+  issue: any;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
+}
 
-      {/* priority */}
-      <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-        <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-          <Circle width={10} strokeWidth={2} />
-        </div>
-        <div className="pl-0.5 pr-1 text-xs">priority</div>
-      </div>
+export const KanBanProperties: React.FC<IKanBanProperties> = observer(
+  ({ sub_group_id, columnId: group_id, issue, handleIssues, display_properties }) => {
+    const handleState = (id: string) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, state: id }
+        );
+    };
 
-      {/* label */}
-      <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-        <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-          <Circle width={10} strokeWidth={2} />
-        </div>
-        <div className="pl-0.5 pr-1 text-xs">label</div>
-      </div>
+    const handlePriority = (id: string) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, priority: id }
+        );
+    };
 
-      {/* assignee */}
-      <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-        <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-          <Circle width={10} strokeWidth={2} />
-        </div>
-        <div className="pl-0.5 pr-1 text-xs">assignee</div>
-      </div>
+    const handleLabel = (ids: string[]) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, labels: ids }
+        );
+    };
 
-      {/* start date */}
-      <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-        <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-          <Circle width={10} strokeWidth={2} />
-        </div>
-        <div className="pl-0.5 pr-1 text-xs">start date</div>
-      </div>
+    const handleAssignee = (ids: string[]) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, assignees: ids }
+        );
+    };
 
-      {/* target/due date */}
-      <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-        <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-          <Circle width={10} strokeWidth={2} />
-        </div>
-        <div className="pl-0.5 pr-1 text-xs">target/due date</div>
-      </div>
+    const handleStartDate = (date: string) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, start_date: date }
+        );
+    };
 
-      {/* extra render properties */}
-      {/* estimate */}
-      <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-        <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
-          <Circle width={10} strokeWidth={2} />
-        </div>
-        <div className="pl-0.5 pr-1 text-xs">0</div>
-      </div>
+    const handleTargetDate = (date: string) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, target_date: date }
+        );
+    };
 
-      {/* sub-issues */}
-      <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-        <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-          <Circle width={10} strokeWidth={2} />
-        </div>
-        <div className="pl-0.5 pr-1 text-xs">0</div>
-      </div>
+    const handleEstimate = (id: string) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, estimate_point: id }
+        );
+    };
 
-      {/* attachments */}
-      <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-        <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-          <Circle width={10} strokeWidth={2} />
-        </div>
-        <div className="pl-0.5 pr-1 text-xs">0</div>
-      </div>
+    return (
+      <div className="relative flex gap-2 overflow-x-auto whitespace-nowrap">
+        {/* basic properties */}
+        {/* state */}
+        {display_properties && display_properties?.state && (
+          <IssuePropertyState
+            value={issue?.state || null}
+            dropdownArrow={false}
+            onChange={(id: string) => handleState(id)}
+            disabled={false}
+          />
+        )}
 
-      {/* link */}
-      <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center">
-        <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-          <Circle width={10} strokeWidth={2} />
-        </div>
-        <div className="pl-0.5 pr-1 text-xs">0</div>
+        {/* priority */}
+        {display_properties && display_properties?.priority && (
+          <IssuePropertyPriority
+            value={issue?.priority || null}
+            dropdownArrow={false}
+            onChange={(id: string) => handlePriority(id)}
+            disabled={false}
+          />
+        )}
+
+        {/* label */}
+        {display_properties && display_properties?.labels && (
+          <IssuePropertyLabels
+            value={issue?.labels || null}
+            dropdownArrow={false}
+            onChange={(ids: string[]) => handleLabel(ids)}
+            disabled={false}
+          />
+        )}
+
+        {/* assignee */}
+        {display_properties && display_properties?.assignee && (
+          <IssuePropertyAssignee
+            value={issue?.assignees || null}
+            dropdownArrow={false}
+            onChange={(ids: string[]) => handleAssignee(ids)}
+            disabled={false}
+          />
+        )}
+
+        {/* start date */}
+        {display_properties && display_properties?.start_date && (
+          <IssuePropertyStartDate
+            value={issue?.start_date || null}
+            onChange={(date: string) => handleStartDate(date)}
+            disabled={false}
+          />
+        )}
+
+        {/* target/due date */}
+        {display_properties && display_properties?.due_date && (
+          <IssuePropertyStartDate
+            value={issue?.target_date || null}
+            onChange={(date: string) => handleTargetDate(date)}
+            disabled={false}
+          />
+        )}
+
+        {/* estimates */}
+        {display_properties && display_properties?.estimate && (
+          <IssuePropertyEstimates
+            value={issue?.estimate_point?.toString() || null}
+            dropdownArrow={false}
+            onChange={(id: string) => handleEstimate(id)}
+            disabled={false}
+            workspaceSlug={issue?.workspace_detail?.slug || null}
+            projectId={issue?.project_detail?.id || null}
+          />
+        )}
+
+        {/* extra render properties */}
+        {/* sub-issues */}
+        {display_properties && display_properties?.sub_issue_count && (
+          <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
+            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
+              <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
+                <Layers width={10} strokeWidth={2} />
+              </div>
+              <div className="pl-0.5 pr-1 text-xs">{issue.sub_issues_count}</div>
+            </div>
+          </Tooltip>
+        )}
+
+        {/* attachments */}
+        {display_properties && display_properties?.attachment_count && (
+          <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
+            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
+              <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
+                <Paperclip width={10} strokeWidth={2} />
+              </div>
+              <div className="pl-0.5 pr-1 text-xs">{issue.attachment_count}</div>
+            </div>
+          </Tooltip>
+        )}
+
+        {/* link */}
+        {display_properties && display_properties?.link && (
+          <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
+            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
+              <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
+                <Link width={10} strokeWidth={2} />
+              </div>
+              <div className="pl-0.5 pr-1 text-xs">{issue.link_count}</div>
+            </div>
+          </Tooltip>
+        )}
       </div>
-    </div>
-  );
-};
+    );
+  }
+);
+
+created_on: true;
+updated_on: true;
+due_date: true;
+
+key: true;
diff --git a/web/components/issues/issue-layouts/kanban/root.tsx b/web/components/issues/issue-layouts/kanban/root.tsx
index 5701a297d..4d72936c0 100644
--- a/web/components/issues/issue-layouts/kanban/root.tsx
+++ b/web/components/issues/issue-layouts/kanban/root.tsx
@@ -25,6 +25,8 @@ export const KanBanLayout: React.FC = observer(() => {
 
   const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
 
+  const display_properties = issueFilterStore?.userDisplayProperties || null;
+
   const currentKanBanView: "swimlanes" | "default" = issueFilterStore?.userDisplayFilters?.sub_group_by
     ? "swimlanes"
     : "default";
@@ -45,13 +47,29 @@ export const KanBanLayout: React.FC = observer(() => {
       : issueKanBanViewStore?.handleSwimlaneDragDrop(result.source, result.destination);
   };
 
+  const updateIssue = (sub_group_by: string | null, group_by: string | null, issue: any) => {
+    issueStore.updateIssueStructure(group_by, sub_group_by, issue);
+  };
+
   return (
-    <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90`}>
+    <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
       <DragDropContext onDragEnd={onDragEnd}>
         {currentKanBanView === "default" ? (
-          <KanBan issues={issues} sub_group_by={sub_group_by} group_by={group_by} />
+          <KanBan
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            handleIssues={updateIssue}
+            display_properties={display_properties}
+          />
         ) : (
-          <KanBanSwimLanes issues={issues} sub_group_by={sub_group_by} group_by={group_by} />
+          <KanBanSwimLanes
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            handleIssues={updateIssue}
+            display_properties={display_properties}
+          />
         )}
       </DragDropContext>
     </div>
diff --git a/web/components/issues/issue-layouts/kanban/swimlanes.tsx b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
index 5579b33cd..6f0dee695 100644
--- a/web/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -54,187 +54,208 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
 
 interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
   issues: any;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
 }
-const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer(({ issues, sub_group_by, group_by, list, listKey }) => {
-  const { issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();
+const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer(
+  ({ issues, sub_group_by, group_by, list, listKey, handleIssues, display_properties }) => {
+    const { issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();
 
-  const calculateIssueCount = (column_id: string) => {
-    let issueCount = 0;
-    issues?.[column_id] &&
-      Object.keys(issues?.[column_id])?.forEach((_list: any) => {
-        issueCount += issues?.[column_id]?.[_list]?.length || 0;
-      });
-    return issueCount;
-  };
+    const calculateIssueCount = (column_id: string) => {
+      let issueCount = 0;
+      issues?.[column_id] &&
+        Object.keys(issues?.[column_id])?.forEach((_list: any) => {
+          issueCount += issues?.[column_id]?.[_list]?.length || 0;
+        });
+      return issueCount;
+    };
 
-  return (
-    <div className="relative w-full min-h-full h-max">
-      {list &&
-        list.length > 0 &&
-        list.map((_list: any) => (
-          <div className="flex-shrink-0 flex flex-col">
-            <div className="sticky top-[50px] w-full z-[1] bg-custom-background-90 flex items-center py-1">
-              <div className="flex-shrink-0 sticky left-0 bg-custom-background-90 pr-2">
-                <KanBanSubGroupByHeaderRoot
-                  column_id={getValueFromObject(_list, listKey) as string}
-                  sub_group_by={sub_group_by}
-                  group_by={group_by}
-                  issues_count={calculateIssueCount(getValueFromObject(_list, listKey) as string)}
-                />
+    return (
+      <div className="relative w-full min-h-full h-max">
+        {list &&
+          list.length > 0 &&
+          list.map((_list: any) => (
+            <div className="flex-shrink-0 flex flex-col">
+              <div className="sticky top-[50px] w-full z-[1] bg-custom-background-90 flex items-center py-1">
+                <div className="flex-shrink-0 sticky left-0 bg-custom-background-90 pr-2">
+                  <KanBanSubGroupByHeaderRoot
+                    column_id={getValueFromObject(_list, listKey) as string}
+                    sub_group_by={sub_group_by}
+                    group_by={group_by}
+                    issues_count={calculateIssueCount(getValueFromObject(_list, listKey) as string)}
+                  />
+                </div>
+                <div className="w-full border-b border-custom-border-400 border-dashed" />
               </div>
-              <div className="w-full border-b border-custom-border-400 border-dashed" />
+              {!issueKanBanViewStore.kanBanToggle?.subgroupByIssuesVisibility.includes(
+                getValueFromObject(_list, listKey) as string
+              ) && (
+                <div className="relative">
+                  <KanBan
+                    issues={issues?.[getValueFromObject(_list, listKey) as string]}
+                    sub_group_by={sub_group_by}
+                    group_by={group_by}
+                    sub_group_id={getValueFromObject(_list, listKey) as string}
+                    handleIssues={handleIssues}
+                    display_properties={display_properties}
+                  />
+                </div>
+              )}
             </div>
-            {!issueKanBanViewStore.kanBanToggle?.subgroupByIssuesVisibility.includes(
-              getValueFromObject(_list, listKey) as string
-            ) && (
-              <div className="relative">
-                <KanBan
-                  issues={issues?.[getValueFromObject(_list, listKey) as string]}
-                  sub_group_by={sub_group_by}
-                  group_by={group_by}
-                  sub_group_id={getValueFromObject(_list, listKey) as string}
-                />
-              </div>
-            )}
-          </div>
-        ))}
-    </div>
-  );
-});
+          ))}
+      </div>
+    );
+  }
+);
 
 export interface IKanBanSwimLanes {
   issues: any;
   sub_group_by: string | null;
   group_by: string | null;
-  handleIssues?: () => void;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
 }
 
-export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer(({ issues, sub_group_by, group_by }) => {
-  const { project: projectStore }: RootStore = useMobxStore();
+export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer(
+  ({ issues, sub_group_by, group_by, handleIssues, display_properties }) => {
+    const { project: projectStore }: RootStore = useMobxStore();
 
-  return (
-    <div className="relative">
-      <div className="sticky top-0 z-[2] bg-custom-background-90 h-[50px]">
-        {group_by && group_by === "state" && (
-          <SubGroupSwimlaneHeader
+    return (
+      <div className="relative">
+        <div className="sticky top-0 z-[2] bg-custom-background-90 h-[50px]">
+          {group_by && group_by === "state" && (
+            <SubGroupSwimlaneHeader
+              issues={issues}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              list={projectStore?.projectStates}
+              listKey={`id`}
+            />
+          )}
+
+          {group_by && group_by === "state_detail.group" && (
+            <SubGroupSwimlaneHeader
+              issues={issues}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              list={ISSUE_STATE_GROUPS}
+              listKey={`key`}
+            />
+          )}
+
+          {group_by && group_by === "priority" && (
+            <SubGroupSwimlaneHeader
+              issues={issues}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              list={ISSUE_PRIORITIES}
+              listKey={`key`}
+            />
+          )}
+
+          {group_by && group_by === "labels" && (
+            <SubGroupSwimlaneHeader
+              issues={issues}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              list={projectStore?.projectLabels}
+              listKey={`id`}
+            />
+          )}
+
+          {group_by && group_by === "assignees" && (
+            <SubGroupSwimlaneHeader
+              issues={issues}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              list={projectStore?.projectMembers}
+              listKey={`member.id`}
+            />
+          )}
+
+          {group_by && group_by === "created_by" && (
+            <SubGroupSwimlaneHeader
+              issues={issues}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              list={projectStore?.projectMembers}
+              listKey={`member.id`}
+            />
+          )}
+        </div>
+
+        {sub_group_by && sub_group_by === "state" && (
+          <SubGroupSwimlane
             issues={issues}
             sub_group_by={sub_group_by}
             group_by={group_by}
             list={projectStore?.projectStates}
             listKey={`id`}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
           />
         )}
 
-        {group_by && group_by === "state_detail.group" && (
-          <SubGroupSwimlaneHeader
+        {sub_group_by && sub_group_by === "state_detail.group" && (
+          <SubGroupSwimlane
             issues={issues}
             sub_group_by={sub_group_by}
             group_by={group_by}
             list={ISSUE_STATE_GROUPS}
             listKey={`key`}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
           />
         )}
 
-        {group_by && group_by === "priority" && (
-          <SubGroupSwimlaneHeader
+        {sub_group_by && sub_group_by === "priority" && (
+          <SubGroupSwimlane
             issues={issues}
             sub_group_by={sub_group_by}
             group_by={group_by}
             list={ISSUE_PRIORITIES}
             listKey={`key`}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
           />
         )}
 
-        {group_by && group_by === "labels" && (
-          <SubGroupSwimlaneHeader
+        {sub_group_by && sub_group_by === "labels" && (
+          <SubGroupSwimlane
             issues={issues}
             sub_group_by={sub_group_by}
             group_by={group_by}
             list={projectStore?.projectLabels}
             listKey={`id`}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
           />
         )}
 
-        {group_by && group_by === "assignees" && (
-          <SubGroupSwimlaneHeader
+        {sub_group_by && sub_group_by === "assignees" && (
+          <SubGroupSwimlane
             issues={issues}
             sub_group_by={sub_group_by}
             group_by={group_by}
             list={projectStore?.projectMembers}
             listKey={`member.id`}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
           />
         )}
 
-        {group_by && group_by === "created_by" && (
-          <SubGroupSwimlaneHeader
+        {sub_group_by && sub_group_by === "created_by" && (
+          <SubGroupSwimlane
             issues={issues}
             sub_group_by={sub_group_by}
             group_by={group_by}
             list={projectStore?.projectMembers}
             listKey={`member.id`}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
           />
         )}
       </div>
-
-      {sub_group_by && sub_group_by === "state" && (
-        <SubGroupSwimlane
-          issues={issues}
-          sub_group_by={sub_group_by}
-          group_by={group_by}
-          list={projectStore?.projectStates}
-          listKey={`id`}
-        />
-      )}
-
-      {sub_group_by && sub_group_by === "state_detail.group" && (
-        <SubGroupSwimlane
-          issues={issues}
-          sub_group_by={sub_group_by}
-          group_by={group_by}
-          list={ISSUE_STATE_GROUPS}
-          listKey={`key`}
-        />
-      )}
-
-      {sub_group_by && sub_group_by === "priority" && (
-        <SubGroupSwimlane
-          issues={issues}
-          sub_group_by={sub_group_by}
-          group_by={group_by}
-          list={ISSUE_PRIORITIES}
-          listKey={`key`}
-        />
-      )}
-
-      {sub_group_by && sub_group_by === "labels" && (
-        <SubGroupSwimlane
-          issues={issues}
-          sub_group_by={sub_group_by}
-          group_by={group_by}
-          list={projectStore?.projectLabels}
-          listKey={`id`}
-        />
-      )}
-
-      {sub_group_by && sub_group_by === "assignees" && (
-        <SubGroupSwimlane
-          issues={issues}
-          sub_group_by={sub_group_by}
-          group_by={group_by}
-          list={projectStore?.projectMembers}
-          listKey={`member.id`}
-        />
-      )}
-
-      {sub_group_by && sub_group_by === "created_by" && (
-        <SubGroupSwimlane
-          issues={issues}
-          sub_group_by={sub_group_by}
-          group_by={group_by}
-          list={projectStore?.projectMembers}
-          listKey={`member.id`}
-        />
-      )}
-    </div>
-  );
-});
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/properties/assignee.tsx b/web/components/issues/issue-layouts/properties/assignee.tsx
new file mode 100644
index 000000000..26ec6f204
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/assignee.tsx
@@ -0,0 +1,266 @@
+import React from "react";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// lucide icons
+import { ChevronDown, Search, X, Check } from "lucide-react";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { Tooltip } from "components/ui";
+// hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+// mobx
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+interface IFiltersOption {
+  id: string;
+  title: string;
+  avatar: string;
+}
+
+export interface IIssuePropertyAssignee {
+  value?: any;
+  onChange?: (id: any, data: any) => void;
+  disabled?: boolean;
+
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  dropdownArrow?: boolean;
+}
+
+export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
+  ({
+    value,
+    onChange,
+    disabled,
+
+    className,
+    buttonClassName,
+    optionsClassName,
+    dropdownArrow = true,
+  }) => {
+    const { project: projectStore }: RootStore = useMobxStore();
+
+    const dropdownBtn = React.useRef<any>(null);
+    const dropdownOptions = React.useRef<any>(null);
+
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+    const [search, setSearch] = React.useState<string>("");
+
+    const options: IFiltersOption[] | [] =
+      (projectStore?.projectMembers &&
+        projectStore?.projectMembers?.length > 0 &&
+        projectStore?.projectMembers.map((_member: any) => ({
+          id: _member?.member?.id,
+          title: _member?.member?.display_name,
+          avatar: _member?.member?.avatar && _member?.member?.avatar !== "" ? _member?.member?.avatar : null,
+        }))) ||
+      [];
+
+    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+    const selectedOption: IFiltersOption[] =
+      (value && value?.length > 0 && options.filter((_member: IFiltersOption) => value.includes(_member.id))) || [];
+
+    const filteredOptions: IFiltersOption[] =
+      search === ""
+        ? options && options.length > 0
+          ? options
+          : []
+        : options && options.length > 0
+        ? options.filter((_member: IFiltersOption) =>
+            _member.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+          )
+        : [];
+
+    const assigneeRenderLength = 5;
+
+    return (
+      <Combobox
+        multiple={true}
+        as="div"
+        className={`${className}`}
+        value={selectedOption.map((_member: IFiltersOption) => _member.id) as string[]}
+        onChange={(data: string[]) => {
+          if (onChange && selectedOption) onChange(data, selectedOption);
+        }}
+        disabled={disabled}
+      >
+        {({ open }: { open: boolean }) => {
+          if (open) {
+            if (!isOpen) setIsOpen(true);
+          } else if (isOpen) setIsOpen(false);
+
+          return (
+            <>
+              <Combobox.Button
+                ref={dropdownBtn}
+                type="button"
+                className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
+                  disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+                } ${buttonClassName}`}
+              >
+                {selectedOption && selectedOption?.length > 0 ? (
+                  <>
+                    {selectedOption?.length > 1 ? (
+                      <Tooltip
+                        tooltipHeading={`Assignees`}
+                        tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
+                      >
+                        <div className="flex-shrink-0 flex justify-center items-center gap-1 pr-[8px]">
+                          {selectedOption.slice(0, assigneeRenderLength).map((_assignee) => (
+                            <div
+                              key={_assignee?.id}
+                              className="flex-shrink-0 w-[16px] h-[16px] rounded-sm bg-gray-700 flex justify-center items-center text-white capitalize relative -mr-[8px] text-xs overflow-hidden border border-custom-border-300"
+                            >
+                              {_assignee && _assignee.avatar ? (
+                                <img
+                                  src={_assignee.avatar}
+                                  className="absolute top-0 left-0 h-full w-full object-cover"
+                                  alt={_assignee.title}
+                                />
+                              ) : (
+                                _assignee.title[0]
+                              )}
+                            </div>
+                          ))}
+                          {selectedOption.length > assigneeRenderLength && (
+                            <div className="flex-shrink-0 h-[16px] px-0.5 rounded-sm bg-gray-700 flex justify-center items-center text-white capitalize relative -mr-[8px] text-xs overflow-hidden border border-custom-border-300">
+                              +{selectedOption?.length - assigneeRenderLength}
+                            </div>
+                          )}
+                        </div>
+                      </Tooltip>
+                    ) : (
+                      <Tooltip
+                        tooltipHeading={`Assignees`}
+                        tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
+                      >
+                        <div className="flex-shrink-0 flex justify-center items-center gap-1 text-xs">
+                          <div className="flex-shrink-0 w-[14px] h-[14px] rounded-sm flex justify-center items-center text-white capitalize relative overflow-hidden text-xs">
+                            {selectedOption[0] && selectedOption[0].avatar ? (
+                              <img
+                                src={selectedOption[0].avatar}
+                                className="absolute top-0 left-0 h-full w-full object-cover"
+                                alt={selectedOption[0].title}
+                              />
+                            ) : (
+                              <div className="w-full h-full bg-gray-700 flex justify-center items-center">
+                                {selectedOption[0].title[0]}
+                              </div>
+                            )}
+                          </div>
+                          <div className="line-clamp-1">{selectedOption[0].title}</div>
+                        </div>
+                      </Tooltip>
+                    )}
+                  </>
+                ) : (
+                  <div className="text-xs">Select option</div>
+                )}
+
+                {dropdownArrow && !disabled && (
+                  <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
+                    <ChevronDown width={14} strokeWidth={2} />
+                  </div>
+                )}
+              </Combobox.Button>
+
+              <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+                <Combobox.Options
+                  ref={dropdownOptions}
+                  className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
+                >
+                  {options && options.length > 0 ? (
+                    <>
+                      <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
+                        <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
+                          <Search width={12} strokeWidth={2} />
+                        </div>
+
+                        <div>
+                          <Combobox.Input
+                            className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                            value={search}
+                            onChange={(e) => setSearch(e.target.value)}
+                            placeholder="Search"
+                            displayValue={(assigned: any) => assigned?.name}
+                          />
+                        </div>
+
+                        {search && search.length > 0 && (
+                          <div
+                            onClick={() => setSearch("")}
+                            className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
+                          >
+                            <X width={12} strokeWidth={2} />
+                          </div>
+                        )}
+                      </div>
+
+                      <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
+                        {filteredOptions ? (
+                          filteredOptions.length > 0 ? (
+                            filteredOptions.map((option) => (
+                              <Combobox.Option
+                                key={option.id}
+                                value={option.id}
+                                className={({ active }) =>
+                                  `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                                    active || (value && value.length > 0 && value.includes(option?.id))
+                                      ? "bg-custom-background-80"
+                                      : ""
+                                  } ${
+                                    value && value.length > 0 && value.includes(option?.id)
+                                      ? "text-custom-text-100"
+                                      : "text-custom-text-200"
+                                  }`
+                                }
+                              >
+                                <div className="flex items-center gap-1 w-full px-1">
+                                  <div className="flex-shrink-0 w-[18px] h-[18px] rounded-sm flex justify-center items-center text-white capitalize relative overflow-hidden">
+                                    {option && option.avatar ? (
+                                      <img
+                                        src={option.avatar}
+                                        className="absolute top-0 left-0 h-full w-full object-cover"
+                                        alt={option.title}
+                                      />
+                                    ) : (
+                                      <div className="w-full h-full bg-gray-700 flex justify-center items-center">
+                                        {option.title[0]}
+                                      </div>
+                                    )}
+                                  </div>
+                                  <div className="line-clamp-1">{option.title}</div>
+                                  {value && value.length > 0 && value.includes(option?.id) && (
+                                    <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
+                                      <Check width={13} strokeWidth={2} />
+                                    </div>
+                                  )}
+                                </div>
+                              </Combobox.Option>
+                            ))
+                          ) : (
+                            <span className="flex items-center gap-2 p-1">
+                              <p className="text-left text-custom-text-200 ">No matching results</p>
+                            </span>
+                          )
+                        ) : (
+                          <p className="text-center text-custom-text-200">Loading...</p>
+                        )}
+                      </div>
+                    </>
+                  ) : (
+                    <p className="text-center text-custom-text-200">No options available.</p>
+                  )}
+                </Combobox.Options>
+              </div>
+            </>
+          );
+        }}
+      </Combobox>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/properties/date.tsx b/web/components/issues/issue-layouts/properties/date.tsx
new file mode 100644
index 000000000..37853ced1
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/date.tsx
@@ -0,0 +1,96 @@
+import React from "react";
+// headless ui
+import { Popover } from "@headlessui/react";
+// lucide icons
+import { Calendar, X } from "lucide-react";
+// react date picker
+import DatePicker from "react-datepicker";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { Tooltip } from "components/ui";
+// hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+// helpers
+import { renderDateFormat } from "helpers/date-time.helper";
+
+export interface IIssuePropertyStartDate {
+  value?: any;
+  onChange?: (date: any) => void;
+  disabled?: boolean;
+}
+
+export const IssuePropertyStartDate: React.FC<IIssuePropertyStartDate> = observer(({ value, onChange, disabled }) => {
+  const dropdownBtn = React.useRef<any>(null);
+  const dropdownOptions = React.useRef<any>(null);
+
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+
+  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+  return (
+    <Popover as="div" className="relative">
+      {({ open }) => {
+        if (open) {
+          if (!isOpen) setIsOpen(true);
+        } else if (isOpen) setIsOpen(false);
+
+        return (
+          <>
+            <Popover.Button
+              ref={dropdownBtn}
+              className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+              }`}
+            >
+              <Tooltip tooltipHeading={`Start Date`} tooltipContent={value}>
+                <div className="flex-shrink-0 overflow-hidden rounded-sm flex justify-center items-center">
+                  <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
+                    <Calendar width={10} strokeWidth={2} />
+                  </div>
+                  {value ? (
+                    <>
+                      <div className="px-1 text-xs">{value}</div>
+                      <div
+                        className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center cursor-pointer"
+                        onClick={() => {
+                          if (onChange) onChange(null);
+                        }}
+                      >
+                        <X width={10} strokeWidth={2} />
+                      </div>
+                    </>
+                  ) : (
+                    <div className="text-xs">Select date</div>
+                  )}
+                </div>
+              </Tooltip>
+            </Popover.Button>
+
+            <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+              <Popover.Panel
+                ref={dropdownOptions}
+                className={`absolute z-10 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1`}
+              >
+                {({ close }) => (
+                  <DatePicker
+                    selected={value ? new Date(value) : new Date()}
+                    onChange={(val: any) => {
+                      if (onChange && val) {
+                        onChange(renderDateFormat(val));
+                        close();
+                      }
+                    }}
+                    dateFormat="dd-MM-yyyy"
+                    calendarClassName="h-full"
+                    inline
+                  />
+                )}
+              </Popover.Panel>
+            </div>
+          </>
+        );
+      }}
+    </Popover>
+  );
+});
diff --git a/web/components/issues/issue-layouts/properties/dropdown-template.tsx b/web/components/issues/issue-layouts/properties/dropdown-template.tsx
new file mode 100644
index 000000000..4afc04cb0
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/dropdown-template.tsx
@@ -0,0 +1,177 @@
+import React from "react";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// lucide icons
+import { ChevronDown, Search, X, Check } from "lucide-react";
+// hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+
+interface IFiltersOption {
+  id: string;
+  title: string;
+}
+
+export interface IIssuePropertyState {
+  options: IFiltersOption[];
+  value?: any;
+  onChange?: (id: any, data: IFiltersOption) => void;
+  disabled?: boolean;
+
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  dropdownArrow?: boolean;
+
+  children?: any;
+}
+
+export const IssuePropertyState: React.FC<IIssuePropertyState> = ({
+  options,
+  value,
+  onChange,
+  disabled,
+
+  className,
+  buttonClassName,
+  optionsClassName,
+  dropdownArrow = true,
+
+  children,
+}) => {
+  const dropdownBtn = React.useRef<any>(null);
+  const dropdownOptions = React.useRef<any>(null);
+
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [search, setSearch] = React.useState<string>("");
+
+  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+  const selectedOption: IFiltersOption | null | undefined =
+    (value && options.find((person: IFiltersOption) => person.id === value)) || null;
+
+  const filteredOptions: IFiltersOption[] =
+    search === ""
+      ? options && options.length > 0
+        ? options
+        : []
+      : options && options.length > 0
+      ? options.filter((person: IFiltersOption) =>
+          person.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+        )
+      : [];
+
+  const label = () => <div>Hello</div>;
+
+  return (
+    <Combobox
+      as="div"
+      className={`${className}`}
+      value={selectedOption && selectedOption.id}
+      onChange={(data: string) => {
+        if (onChange && selectedOption) onChange(data, selectedOption);
+      }}
+      disabled={disabled}
+    >
+      {({ open }: { open: boolean }) => {
+        if (open) {
+          if (!isOpen) setIsOpen(true);
+        } else if (isOpen) setIsOpen(false);
+
+        return (
+          <>
+            <Combobox.Button
+              ref={dropdownBtn}
+              type="button"
+              className={`flex items-center justify-between gap-1 w-full px-1 py-1 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+              } ${buttonClassName}`}
+            >
+              {children ? (
+                children
+              ) : (
+                <div className="text-xs">{(selectedOption && selectedOption?.title) || "Select option"}</div>
+              )}
+
+              {dropdownArrow && !disabled && (
+                <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
+                  <ChevronDown width={14} strokeWidth={2} />
+                </div>
+              )}
+            </Combobox.Button>
+
+            {options && options.length > 0 ? (
+              <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+                <Combobox.Options
+                  ref={dropdownOptions}
+                  className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none min-w-48 max-w-60 whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
+                >
+                  <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
+                    <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
+                      <Search width={12} strokeWidth={2} />
+                    </div>
+
+                    <div>
+                      <Combobox.Input
+                        className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                        value={search}
+                        onChange={(e) => setSearch(e.target.value)}
+                        placeholder="Search"
+                        displayValue={(assigned: any) => assigned?.name}
+                      />
+                    </div>
+
+                    {search && search.length > 0 && (
+                      <div
+                        onClick={() => setSearch("")}
+                        className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
+                      >
+                        <X width={12} strokeWidth={2} />
+                      </div>
+                    )}
+                  </div>
+
+                  <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
+                    {filteredOptions ? (
+                      filteredOptions.length > 0 ? (
+                        filteredOptions.map((option) => (
+                          <Combobox.Option
+                            key={option.id}
+                            value={option.id}
+                            className={({ active, selected }) =>
+                              `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                                active || selected ? "bg-custom-background-80" : ""
+                              } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                            }
+                          >
+                            {({ selected }) => (
+                              <div className="flex justify-between items-center gap-1 w-full px-1">
+                                <div className="line-clamp-1">{option.title}</div>
+                                {selected && (
+                                  <div className="flex-shrink-0 w-[13px] h-[13px] flex justify-center items-center">
+                                    <Check width={13} strokeWidth={2} />
+                                  </div>
+                                )}
+                              </div>
+                            )}
+                          </Combobox.Option>
+                        ))
+                      ) : (
+                        <span className="flex items-center gap-2 p-1">
+                          <p className="text-left text-custom-text-200 ">No matching results</p>
+                        </span>
+                      )
+                    ) : (
+                      <p className="text-center text-custom-text-200">Loading...</p>
+                    )}
+                  </div>
+                </Combobox.Options>
+              </div>
+            ) : (
+              <p className="text-center text-custom-text-200">No options available.</p>
+            )}
+          </>
+        );
+      }}
+    </Combobox>
+  );
+};
diff --git a/web/components/issues/issue-layouts/properties/estimates.tsx b/web/components/issues/issue-layouts/properties/estimates.tsx
new file mode 100644
index 000000000..1647d1a16
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/estimates.tsx
@@ -0,0 +1,215 @@
+import React from "react";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// lucide icons
+import { ChevronDown, Search, X, Check, Triangle } from "lucide-react";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { Tooltip } from "components/ui";
+// hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+// mobx
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+interface IFiltersOption {
+  id: string;
+  title: string;
+  key: string;
+}
+
+export interface IIssuePropertyEstimates {
+  value?: any;
+  onChange?: (id: any) => void;
+  disabled?: boolean;
+
+  workspaceSlug?: string;
+  projectId?: string;
+
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  dropdownArrow?: boolean;
+}
+
+export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observer(
+  ({
+    value,
+    onChange,
+    disabled,
+
+    workspaceSlug,
+    projectId,
+
+    className,
+    buttonClassName,
+    optionsClassName,
+    dropdownArrow = true,
+  }) => {
+    const { project: projectStore }: RootStore = useMobxStore();
+
+    const dropdownBtn = React.useRef<any>(null);
+    const dropdownOptions = React.useRef<any>(null);
+
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+    const [search, setSearch] = React.useState<string>("");
+
+    const projectDetail =
+      (workspaceSlug && projectId && projectStore?.getProjectById(workspaceSlug, projectId)) || null;
+    const projectEstimateId = (projectDetail && projectDetail?.estimate) || null;
+    const estimates = (projectEstimateId && projectStore?.getProjectEstimateById(projectEstimateId)) || null;
+
+    const options: IFiltersOption[] | [] =
+      (estimates &&
+        estimates.points &&
+        estimates.points.length > 0 &&
+        estimates.points.map((_estimate) => ({
+          id: _estimate?.id,
+          title: _estimate?.value,
+          key: _estimate?.key.toString(),
+        }))) ||
+      [];
+
+    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+    const selectedOption: IFiltersOption | null | undefined =
+      (value && options.find((_estimate: IFiltersOption) => _estimate.key === value)) || null;
+
+    const filteredOptions: IFiltersOption[] =
+      search === ""
+        ? options && options.length > 0
+          ? options
+          : []
+        : options && options.length > 0
+        ? options.filter((_estimate: IFiltersOption) =>
+            _estimate.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+          )
+        : [];
+
+    return (
+      <Combobox
+        as="div"
+        className={`${className}`}
+        value={selectedOption && selectedOption.key}
+        onChange={(data: string) => {
+          if (onChange) onChange(data);
+        }}
+        disabled={disabled}
+      >
+        {({ open }: { open: boolean }) => {
+          if (open) {
+            if (!isOpen) setIsOpen(true);
+          } else if (isOpen) setIsOpen(false);
+
+          return (
+            <>
+              <Combobox.Button
+                ref={dropdownBtn}
+                type="button"
+                className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
+                  disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+                } ${buttonClassName}`}
+              >
+                {selectedOption ? (
+                  <Tooltip tooltipHeading={`Estimates`} tooltipContent={selectedOption?.title}>
+                    <div className="flex-shrink-0 flex justify-center items-center gap-1">
+                      <div className="flex-shrink-0 w-[12px] h-[12px] flex justify-center items-center">
+                        <Triangle width={14} strokeWidth={2} />
+                      </div>
+                      <div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
+                    </div>
+                  </Tooltip>
+                ) : (
+                  <div className="text-xs">Select option</div>
+                )}
+
+                {dropdownArrow && !disabled && (
+                  <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
+                    <ChevronDown width={14} strokeWidth={2} />
+                  </div>
+                )}
+              </Combobox.Button>
+
+              <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+                <Combobox.Options
+                  ref={dropdownOptions}
+                  className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
+                >
+                  {options && options.length > 0 ? (
+                    <>
+                      <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
+                        <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
+                          <Search width={12} strokeWidth={2} />
+                        </div>
+
+                        <div>
+                          <Combobox.Input
+                            className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                            value={search}
+                            onChange={(e) => setSearch(e.target.value)}
+                            placeholder="Search"
+                            displayValue={(assigned: any) => assigned?.name}
+                          />
+                        </div>
+
+                        {search && search.length > 0 && (
+                          <div
+                            onClick={() => setSearch("")}
+                            className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
+                          >
+                            <X width={12} strokeWidth={2} />
+                          </div>
+                        )}
+                      </div>
+
+                      <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
+                        {filteredOptions ? (
+                          filteredOptions.length > 0 ? (
+                            filteredOptions.map((option) => (
+                              <Combobox.Option
+                                key={option.key}
+                                value={option.key}
+                                className={({ active, selected }) =>
+                                  `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                                    active || selected ? "bg-custom-background-80" : ""
+                                  } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                                }
+                              >
+                                {({ selected }) => (
+                                  <div className="flex items-center gap-1 w-full px-1">
+                                    <div className="flex-shrink-0 w-[13px] h-[13px] flex justify-center items-center">
+                                      <Triangle width={14} strokeWidth={2} />
+                                    </div>
+                                    <div className="line-clamp-1">{option.title}</div>
+                                    {selected && (
+                                      <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
+                                        <Check width={13} strokeWidth={2} />
+                                      </div>
+                                    )}
+                                  </div>
+                                )}
+                              </Combobox.Option>
+                            ))
+                          ) : (
+                            <span className="flex items-center gap-2 p-1">
+                              <p className="text-left text-custom-text-200 ">No matching results</p>
+                            </span>
+                          )
+                        ) : (
+                          <p className="text-center text-custom-text-200">Loading...</p>
+                        )}
+                      </div>
+                    </>
+                  ) : (
+                    <p className="text-center text-custom-text-200">No options available.</p>
+                  )}
+                </Combobox.Options>
+              </div>
+            </>
+          );
+        }}
+      </Combobox>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
new file mode 100644
index 000000000..c1f60f909
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -0,0 +1,234 @@
+import React from "react";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// lucide icons
+import { ChevronDown, Search, X, Check } from "lucide-react";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { Tooltip } from "components/ui";
+// hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+// mobx
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+interface IFiltersOption {
+  id: string;
+  title: string;
+  color: string | null;
+}
+
+export interface IIssuePropertyLabels {
+  value?: any;
+  onChange?: (id: any, data: any) => void;
+  disabled?: boolean;
+
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  dropdownArrow?: boolean;
+}
+
+export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer(
+  ({
+    value,
+    onChange,
+    disabled,
+
+    className,
+    buttonClassName,
+    optionsClassName,
+    dropdownArrow = true,
+  }) => {
+    const { project: projectStore }: RootStore = useMobxStore();
+
+    const dropdownBtn = React.useRef<any>(null);
+    const dropdownOptions = React.useRef<any>(null);
+
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+    const [search, setSearch] = React.useState<string>("");
+
+    const options: IFiltersOption[] | [] =
+      (projectStore?.projectLabels &&
+        projectStore?.projectLabels?.length > 0 &&
+        projectStore?.projectLabels.map((_label: any) => ({
+          id: _label?.id,
+          title: _label?.name,
+          color: _label?.color || null,
+        }))) ||
+      [];
+
+    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+    const selectedOption: IFiltersOption[] =
+      (value && value?.length > 0 && options.filter((_label: IFiltersOption) => value.includes(_label.id))) || [];
+
+    const filteredOptions: IFiltersOption[] =
+      search === ""
+        ? options && options.length > 0
+          ? options
+          : []
+        : options && options.length > 0
+        ? options.filter((_label: IFiltersOption) =>
+            _label.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+          )
+        : [];
+
+    return (
+      <Combobox
+        multiple={true}
+        as="div"
+        className={`${className}`}
+        value={selectedOption.map((_label: IFiltersOption) => _label.id) as string[]}
+        onChange={(data: string[]) => {
+          if (onChange && selectedOption) onChange(data, selectedOption);
+        }}
+        disabled={disabled}
+      >
+        {({ open }: { open: boolean }) => {
+          if (open) {
+            if (!isOpen) setIsOpen(true);
+          } else if (isOpen) setIsOpen(false);
+
+          return (
+            <>
+              <Combobox.Button
+                ref={dropdownBtn}
+                type="button"
+                className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
+                  disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+                } ${buttonClassName}`}
+              >
+                {selectedOption && selectedOption?.length > 0 ? (
+                  <>
+                    {selectedOption?.length === 1 ? (
+                      <Tooltip
+                        tooltipHeading={`Labels`}
+                        tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
+                      >
+                        <div className="flex-shrink-0 flex justify-center items-center gap-1">
+                          <div
+                            className="flex-shrink-0 w-[10px] h-[10px] rounded-full"
+                            style={{
+                              backgroundColor: selectedOption[0]?.color || "#444",
+                            }}
+                          />
+                          <div className="pl-0.5 pr-1 text-xs">{selectedOption[0]?.title}</div>
+                        </div>
+                      </Tooltip>
+                    ) : (
+                      <Tooltip
+                        tooltipHeading={`Labels`}
+                        tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
+                      >
+                        <div className="flex-shrink-0 flex justify-center items-center gap-1">
+                          <div
+                            className="flex-shrink-0 w-[10px] h-[10px] rounded-full"
+                            style={{ backgroundColor: "#444" }}
+                          />
+                          <div className="pl-0.5 pr-1 text-xs">{selectedOption?.length} Labels</div>
+                        </div>
+                      </Tooltip>
+                    )}
+                  </>
+                ) : (
+                  <div className="text-xs">Select option</div>
+                )}
+
+                {dropdownArrow && !disabled && (
+                  <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
+                    <ChevronDown width={14} strokeWidth={2} />
+                  </div>
+                )}
+              </Combobox.Button>
+
+              <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+                <Combobox.Options
+                  ref={dropdownOptions}
+                  className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
+                >
+                  {options && options.length > 0 ? (
+                    <>
+                      <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
+                        <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
+                          <Search width={12} strokeWidth={2} />
+                        </div>
+
+                        <div>
+                          <Combobox.Input
+                            className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                            value={search}
+                            onChange={(e) => setSearch(e.target.value)}
+                            placeholder="Search"
+                            displayValue={(assigned: any) => assigned?.name}
+                          />
+                        </div>
+
+                        {search && search.length > 0 && (
+                          <div
+                            onClick={() => setSearch("")}
+                            className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
+                          >
+                            <X width={12} strokeWidth={2} />
+                          </div>
+                        )}
+                      </div>
+
+                      <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
+                        {filteredOptions ? (
+                          filteredOptions.length > 0 ? (
+                            filteredOptions.map((option) => (
+                              <Combobox.Option
+                                key={option.id}
+                                value={option.id}
+                                className={({ active }) =>
+                                  `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                                    active || (value && value.length > 0 && value.includes(option?.id))
+                                      ? "bg-custom-background-80"
+                                      : ""
+                                  } ${
+                                    value && value.length > 0 && value.includes(option?.id)
+                                      ? "text-custom-text-100"
+                                      : "text-custom-text-200"
+                                  }`
+                                }
+                              >
+                                <div className="flex items-center gap-1 w-full px-1">
+                                  <div
+                                    className="flex-shrink-0 w-[10px] h-[10px] rounded-full"
+                                    style={{
+                                      backgroundColor: option.color || "#444",
+                                    }}
+                                  />
+                                  <div className="line-clamp-1">{option.title}</div>
+                                  {value && value.length > 0 && value.includes(option?.id) && (
+                                    <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
+                                      <Check width={13} strokeWidth={2} />
+                                    </div>
+                                  )}
+                                </div>
+                              </Combobox.Option>
+                            ))
+                          ) : (
+                            <span className="flex items-center gap-2 p-1">
+                              <p className="text-left text-custom-text-200 ">No matching results</p>
+                            </span>
+                          )
+                        ) : (
+                          <p className="text-center text-custom-text-200">Loading...</p>
+                        )}
+                      </div>
+                    </>
+                  ) : (
+                    <p className="text-center text-custom-text-200">No options available.</p>
+                  )}
+                </Combobox.Options>
+              </div>
+            </>
+          );
+        }}
+      </Combobox>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/properties/priority.tsx b/web/components/issues/issue-layouts/properties/priority.tsx
new file mode 100644
index 000000000..a6776633a
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/priority.tsx
@@ -0,0 +1,224 @@
+import React from "react";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// lucide icons
+import { ChevronDown, Search, X, Check, AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { Tooltip } from "components/ui";
+// hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+// constants
+import { ISSUE_PRIORITIES } from "constants/issue";
+
+interface IFiltersOption {
+  id: string;
+  title: string;
+}
+
+export interface IIssuePropertyPriority {
+  value?: any;
+  onChange?: (id: any, data: IFiltersOption) => void;
+  disabled?: boolean;
+
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  dropdownArrow?: boolean;
+}
+
+const Icon = ({ priority }: any) => (
+  <div className="w-full h-full">
+    {priority === "urgent" ? (
+      <div className="border border-red-500 bg-red-500 text-white w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <AlertCircle size={12} strokeWidth={2} />
+      </div>
+    ) : priority === "high" ? (
+      <div className="border border-red-500/20 bg-red-500/10 text-red-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalHigh size={12} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : priority === "medium" ? (
+      <div className="border border-orange-500/20 bg-orange-500/10 text-orange-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalMedium size={12} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : priority === "low" ? (
+      <div className="border border-green-500/20 bg-green-500/10 text-green-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalLow size={12} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : (
+      <div className="border border-custom-border-400/20 bg-custom-text-400/10 text-custom-text-400 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <Ban size={12} strokeWidth={2} />
+      </div>
+    )}
+  </div>
+);
+
+export const IssuePropertyPriority: React.FC<IIssuePropertyPriority> = observer(
+  ({
+    value,
+    onChange,
+    disabled,
+
+    className,
+    buttonClassName,
+    optionsClassName,
+    dropdownArrow = true,
+  }) => {
+    const dropdownBtn = React.useRef<any>(null);
+    const dropdownOptions = React.useRef<any>(null);
+
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+    const [search, setSearch] = React.useState<string>("");
+
+    const options: IFiltersOption[] | [] =
+      (ISSUE_PRIORITIES &&
+        ISSUE_PRIORITIES?.length > 0 &&
+        ISSUE_PRIORITIES.map((_priority: any) => ({
+          id: _priority?.key,
+          title: _priority?.title,
+        }))) ||
+      [];
+
+    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+    const selectedOption: IFiltersOption | null | undefined =
+      (value && options.find((_priority: IFiltersOption) => _priority.id === value)) || null;
+
+    const filteredOptions: IFiltersOption[] =
+      search === ""
+        ? options && options.length > 0
+          ? options
+          : []
+        : options && options.length > 0
+        ? options.filter((_priority: IFiltersOption) =>
+            _priority.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+          )
+        : [];
+
+    return (
+      <Combobox
+        as="div"
+        className={`${className}`}
+        value={selectedOption && selectedOption.id}
+        onChange={(data: string) => {
+          if (onChange && selectedOption) onChange(data, selectedOption);
+        }}
+        disabled={disabled}
+      >
+        {({ open }: { open: boolean }) => {
+          if (open) {
+            if (!isOpen) setIsOpen(true);
+          } else if (isOpen) setIsOpen(false);
+
+          return (
+            <>
+              <Combobox.Button
+                ref={dropdownBtn}
+                type="button"
+                className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
+                  disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+                } ${buttonClassName}`}
+              >
+                {selectedOption ? (
+                  <Tooltip tooltipHeading={`Priority`} tooltipContent={selectedOption?.title}>
+                    <div className="flex-shrink-0 flex justify-center items-center gap-1">
+                      <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
+                        <Icon priority={selectedOption?.id} />
+                      </div>
+                      <div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
+                    </div>
+                  </Tooltip>
+                ) : (
+                  <div className="text-xs">Select option</div>
+                )}
+
+                {dropdownArrow && !disabled && (
+                  <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
+                    <ChevronDown width={14} strokeWidth={2} />
+                  </div>
+                )}
+              </Combobox.Button>
+
+              <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+                <Combobox.Options
+                  ref={dropdownOptions}
+                  className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
+                >
+                  {options && options.length > 0 ? (
+                    <>
+                      <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
+                        <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
+                          <Search width={12} strokeWidth={2} />
+                        </div>
+
+                        <div>
+                          <Combobox.Input
+                            className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                            value={search}
+                            onChange={(e) => setSearch(e.target.value)}
+                            placeholder="Search"
+                            displayValue={(assigned: any) => assigned?.name}
+                          />
+                        </div>
+
+                        {search && search.length > 0 && (
+                          <div
+                            onClick={() => setSearch("")}
+                            className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
+                          >
+                            <X width={12} strokeWidth={2} />
+                          </div>
+                        )}
+                      </div>
+
+                      <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
+                        {filteredOptions ? (
+                          filteredOptions.length > 0 ? (
+                            filteredOptions.map((option) => (
+                              <Combobox.Option
+                                key={option.id}
+                                value={option.id}
+                                className={({ active, selected }) =>
+                                  `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                                    active || selected ? "bg-custom-background-80" : ""
+                                  } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                                }
+                              >
+                                {({ selected }) => (
+                                  <div className="flex items-center gap-1 w-full px-1">
+                                    <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
+                                      <Icon priority={option?.id} />
+                                    </div>
+                                    <div className="line-clamp-1">{option.title}</div>
+                                    {selected && (
+                                      <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
+                                        <Check width={13} strokeWidth={2} />
+                                      </div>
+                                    )}
+                                  </div>
+                                )}
+                              </Combobox.Option>
+                            ))
+                          ) : (
+                            <span className="flex items-center gap-2 p-1">
+                              <p className="text-left text-custom-text-200 ">No matching results</p>
+                            </span>
+                          )
+                        ) : (
+                          <p className="text-center text-custom-text-200">Loading...</p>
+                        )}
+                      </div>
+                    </>
+                  ) : (
+                    <p className="text-center text-custom-text-200">No options available.</p>
+                  )}
+                </Combobox.Options>
+              </div>
+            </>
+          );
+        }}
+      </Combobox>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/properties/state.tsx b/web/components/issues/issue-layouts/properties/state.tsx
new file mode 100644
index 000000000..28ed1fe0e
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/state.tsx
@@ -0,0 +1,218 @@
+import React from "react";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// lucide icons
+import { ChevronDown, Search, X, Check } from "lucide-react";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { Tooltip } from "components/ui";
+import { StateGroupIcon } from "components/icons";
+// hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+// mobx
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+// types
+import { IState } from "types";
+
+interface IFiltersOption {
+  id: string;
+  title: string;
+  group: string;
+  color: string | null;
+}
+
+export interface IIssuePropertyState {
+  value?: any;
+  onChange?: (id: any, data: IFiltersOption) => void;
+  disabled?: boolean;
+
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  dropdownArrow?: boolean;
+}
+
+export const IssuePropertyState: React.FC<IIssuePropertyState> = observer(
+  ({
+    value,
+    onChange,
+    disabled,
+
+    className,
+    buttonClassName,
+    optionsClassName,
+    dropdownArrow = true,
+  }) => {
+    const { project: projectStore }: RootStore = useMobxStore();
+
+    const dropdownBtn = React.useRef<any>(null);
+    const dropdownOptions = React.useRef<any>(null);
+
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+    const [search, setSearch] = React.useState<string>("");
+
+    const options: IFiltersOption[] | [] =
+      (projectStore?.projectStates &&
+        projectStore?.projectStates?.length > 0 &&
+        projectStore?.projectStates.map((_state: IState) => ({
+          id: _state?.id,
+          title: _state?.name,
+          group: _state?.group,
+          color: _state?.color || null,
+        }))) ||
+      [];
+
+    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+    const selectedOption: IFiltersOption | null | undefined =
+      (value && options.find((_state: IFiltersOption) => _state.id === value)) || null;
+
+    const filteredOptions: IFiltersOption[] =
+      search === ""
+        ? options && options.length > 0
+          ? options
+          : []
+        : options && options.length > 0
+        ? options.filter((_state: IFiltersOption) =>
+            _state.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+          )
+        : [];
+
+    return (
+      <Combobox
+        as="div"
+        className={`${className}`}
+        value={selectedOption && selectedOption.id}
+        onChange={(data: string) => {
+          if (onChange && selectedOption) onChange(data, selectedOption);
+        }}
+        disabled={disabled}
+      >
+        {({ open }: { open: boolean }) => {
+          if (open) {
+            if (!isOpen) setIsOpen(true);
+          } else if (isOpen) setIsOpen(false);
+
+          return (
+            <>
+              <Combobox.Button
+                ref={dropdownBtn}
+                type="button"
+                className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
+                  disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+                } ${buttonClassName}`}
+              >
+                {selectedOption ? (
+                  <Tooltip tooltipHeading={`State`} tooltipContent={selectedOption?.title}>
+                    <div className="flex-shrink-0 flex justify-center items-center gap-1">
+                      <div className="flex-shrink-0 w-[12px] h-[12px] flex justify-center items-center">
+                        <StateGroupIcon
+                          stateGroup={selectedOption?.group as any}
+                          color={(selectedOption?.color || null) as any}
+                          width="12"
+                          height="12"
+                        />
+                      </div>
+                      <div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
+                    </div>
+                  </Tooltip>
+                ) : (
+                  <div className="text-xs">Select option</div>
+                )}
+
+                {dropdownArrow && !disabled && (
+                  <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
+                    <ChevronDown width={14} strokeWidth={2} />
+                  </div>
+                )}
+              </Combobox.Button>
+
+              <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+                <Combobox.Options
+                  ref={dropdownOptions}
+                  className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
+                >
+                  {options && options.length > 0 ? (
+                    <>
+                      <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
+                        <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
+                          <Search width={12} strokeWidth={2} />
+                        </div>
+
+                        <div>
+                          <Combobox.Input
+                            className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                            value={search}
+                            onChange={(e) => setSearch(e.target.value)}
+                            placeholder="Search"
+                            displayValue={(assigned: any) => assigned?.name}
+                          />
+                        </div>
+
+                        {search && search.length > 0 && (
+                          <div
+                            onClick={() => setSearch("")}
+                            className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
+                          >
+                            <X width={12} strokeWidth={2} />
+                          </div>
+                        )}
+                      </div>
+
+                      <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
+                        {filteredOptions ? (
+                          filteredOptions.length > 0 ? (
+                            filteredOptions.map((option) => (
+                              <Combobox.Option
+                                key={option.id}
+                                value={option.id}
+                                className={({ active, selected }) =>
+                                  `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                                    active || selected ? "bg-custom-background-80" : ""
+                                  } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                                }
+                              >
+                                {({ selected }) => (
+                                  <div className="flex items-center gap-1 w-full px-1">
+                                    <div className="flex-shrink-0 w-[13px] h-[13px] flex justify-center items-center">
+                                      <StateGroupIcon
+                                        stateGroup={option?.group as any}
+                                        color={(option?.color || null) as any}
+                                        width="13"
+                                        height="13"
+                                      />
+                                    </div>
+                                    <div className="line-clamp-1">{option.title}</div>
+                                    {selected && (
+                                      <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
+                                        <Check width={13} strokeWidth={2} />
+                                      </div>
+                                    )}
+                                  </div>
+                                )}
+                              </Combobox.Option>
+                            ))
+                          ) : (
+                            <span className="flex items-center gap-2 p-1">
+                              <p className="text-left text-custom-text-200 ">No matching results</p>
+                            </span>
+                          )
+                        ) : (
+                          <p className="text-center text-custom-text-200">Loading...</p>
+                        )}
+                      </div>
+                    </>
+                  ) : (
+                    <p className="text-center text-custom-text-200">No options available.</p>
+                  )}
+                </Combobox.Options>
+              </div>
+            </>
+          );
+        }}
+      </Combobox>
+    );
+  }
+);
diff --git a/web/components/states/state-select.tsx b/web/components/states/state-select.tsx
index 22e4ef115..02c2ea365 100644
--- a/web/components/states/state-select.tsx
+++ b/web/components/states/state-select.tsx
@@ -87,83 +87,72 @@ export const StateSelect: React.FC<Props> = ({
   useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
 
   return (
-    <Combobox
-      as="div"
-      className={`flex-shrink-0 text-left ${className}`}
-      value={value.id}
-      onChange={(data: string) => {
-        onChange(data, states);
-      }}
-      disabled={disabled}
-    >
-      {({ open }: { open: boolean }) => {
-        if (open) {
-          if (!isOpen) setIsOpen(true);
-          setFetchStates(true);
-        } else if (isOpen) setIsOpen(false);
-
-        return (
-          <>
-            <Combobox.Button
-              ref={dropdownBtn}
-              type="button"
-              className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded-md shadow-sm border border-custom-border-300 duration-300 focus:outline-none ${
-                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-              } ${buttonClassName}`}
-            >
-              {label}
-              {!hideDropdownArrow && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
+    <div className="fixed top-16 w-72">
+      <Combobox value={selected} onChange={setSelected}>
+        <div className="relative mt-1">
+          <div className="relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
+            <Combobox.Input
+              className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
+              displayValue={(person) => person.name}
+              onChange={(event) => setQuery(event.target.value)}
+            />
+            <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
+              <ChevronUpDownIcon
+                className="h-5 w-5 text-gray-400"
+                aria-hidden="true"
+              />
             </Combobox.Button>
-            <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
-              <Combobox.Options
-                ref={dropdownOptions}
-                className={`absolute z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none w-48 whitespace-nowrap mt-1 ${optionsClassName}`}
-              >
-                <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
-                  <MagnifyingGlassIcon className="h-3.5 w-3.5 text-custom-text-300" />
-                  <Combobox.Input
-                    className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                    value={query}
-                    onChange={(e) => setQuery(e.target.value)}
-                    placeholder="Search"
-                    displayValue={(assigned: any) => assigned?.name}
-                  />
+          </div>
+          <Transition
+            as={Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+            afterLeave={() => setQuery('')}
+          >
+            <Combobox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+              {filteredPeople.length === 0 && query !== '' ? (
+                <div className="relative cursor-default select-none py-2 px-4 text-gray-700">
+                  Nothing found.
                 </div>
-                <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
-                  {filteredOptions ? (
-                    filteredOptions.length > 0 ? (
-                      filteredOptions.map((option) => (
-                        <Combobox.Option
-                          key={option.value}
-                          value={option.value}
-                          className={({ active, selected }) =>
-                            `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                              active && !selected ? "bg-custom-background-80" : ""
-                            } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                          }
+              ) : (
+                filteredPeople.map((person) => (
+                  <Combobox.Option
+                    key={person.id}
+                    className={({ active }) =>
+                      `relative cursor-default select-none py-2 pl-10 pr-4 ${
+                        active ? 'bg-teal-600 text-white' : 'text-gray-900'
+                      }`
+                    }
+                    value={person}
+                  >
+                    {({ selected, active }) => (
+                      <>
+                        <span
+                          className={`block truncate ${
+                            selected ? 'font-medium' : 'font-normal'
+                          }`}
                         >
-                          {({ selected }) => (
-                            <>
-                              {option.content}
-                              {selected && <CheckIcon className={`h-3.5 w-3.5`} />}
-                            </>
-                          )}
-                        </Combobox.Option>
-                      ))
-                    ) : (
-                      <span className="flex items-center gap-2 p-1">
-                        <p className="text-left text-custom-text-200 ">No matching results</p>
-                      </span>
-                    )
-                  ) : (
-                    <p className="text-center text-custom-text-200">Loading...</p>
-                  )}
-                </div>
-              </Combobox.Options>
-            </div>
-          </>
-        );
-      }}
-    </Combobox>
+                          {person.name}
+                        </span>
+                        {selected ? (
+                          <span
+                            className={`absolute inset-y-0 left-0 flex items-center pl-3 ${
+                              active ? 'text-white' : 'text-teal-600'
+                            }`}
+                          >
+                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                          </span>
+                        ) : null}
+                      </>
+                    )}
+                  </Combobox.Option>
+                ))
+              )}
+            </Combobox.Options>
+          </Transition>
+        </div>
+      </Combobox>
+    </div>
   );
 };
diff --git a/web/components/ui/tooltip.tsx b/web/components/ui/tooltip.tsx
index 3a4c5d71f..0f9163521 100644
--- a/web/components/ui/tooltip.tsx
+++ b/web/components/ui/tooltip.tsx
@@ -51,17 +51,11 @@ export const Tooltip: React.FC<Props> = ({
       content={
         <div
           className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md ${
-            theme === "custom"
-              ? "bg-custom-background-100 text-custom-text-200"
-              : "bg-black text-gray-400"
+            theme === "custom" ? "bg-custom-background-100 text-custom-text-200" : "bg-black text-gray-400"
           } break-words overflow-hidden ${className}`}
         >
           {tooltipHeading && (
-            <h5
-              className={`font-medium ${
-                theme === "custom" ? "text-custom-text-100" : "text-white"
-              }`}
-            >
+            <h5 className={`font-medium ${theme === "custom" ? "text-custom-text-100" : "text-white"}`}>
               {tooltipHeading}
             </h5>
           )}
diff --git a/web/store/issue.ts b/web/store/issue.ts
index a4374e8ad..13ced147e 100644
--- a/web/store/issue.ts
+++ b/web/store/issue.ts
@@ -111,7 +111,7 @@ class IssueStore implements IIssueStore {
       issues = issues as IIssueGroupedStructure;
       issues = {
         ...issues,
-        [group_id]: issues[group_id].map((i: IIssue) => (i?.id === issue?.id ? issue : i)),
+        [group_id]: issues[group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
       };
     }
     if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
@@ -120,15 +120,17 @@ class IssueStore implements IIssueStore {
         ...issues,
         [sub_group_id]: {
           ...issues[sub_group_id],
-          [group_id]: issues[sub_group_id][group_id].map((i: IIssue) => (i?.id === issue?.id ? issue : i)),
+          [group_id]: issues[sub_group_id][group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
         },
       };
     }
     if (issueType === "ungrouped") {
       issues = issues as IIssueUnGroupedStructure;
-      issues = issues.map((i: IIssue) => (i?.id === issue?.id ? issue : i));
+      issues = issues.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i));
     }
 
+    // reorder issues based on the issue update
+
     runInAction(() => {
       this.issues = { ...this.issues, [projectId]: { ...this.issues[projectId], [issueType]: issues } };
     });
diff --git a/web/store/project.ts b/web/store/project.ts
index 75a3aab04..057337c4f 100644
--- a/web/store/project.ts
+++ b/web/store/project.ts
@@ -1,11 +1,12 @@
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
 // types
 import { RootStore } from "./root";
-import { IProject, IIssueLabels, IProjectMember, IStateResponse, IState } from "types";
+import { IProject, IIssueLabels, IProjectMember, IStateResponse, IState, IEstimate } from "types";
 // services
 import { ProjectService } from "services/project.service";
 import { IssueService } from "services/issue.service";
 import { ProjectStateServices } from "services/project_state.service";
+import { ProjectEstimateServices } from "services/project_estimates.service";
 import { CycleService } from "services/cycles.service";
 import { ModuleService } from "services/modules.service";
 import { ViewService } from "services/views.service";
@@ -30,6 +31,9 @@ export interface IProjectStore {
   members: {
     [projectId: string]: IProjectMember[] | null; // project_id: members
   } | null;
+  estimates: {
+    [projectId: string]: IEstimate[] | null; // project_id: members
+  } | null;
 
   // computed
   searchedProjects: IProject[];
@@ -37,6 +41,7 @@ export interface IProjectStore {
   projectStates: IState[] | null;
   projectLabels: IIssueLabels[] | null;
   projectMembers: IProjectMember[] | null;
+  projectEstimates: IEstimate[] | null;
 
   joinedProjects: IProject[];
   favoriteProjects: IProject[];
@@ -45,16 +50,19 @@ export interface IProjectStore {
   setProjectId: (projectId: string) => void;
   setSearchQuery: (query: string) => void;
 
+  getProjectById: (workspaceSlug: string, projectId: string) => IProject | null;
   getProjectStateById: (stateId: string) => IState | null;
   getProjectLabelById: (labelId: string) => IIssueLabels | null;
   getProjectMemberById: (memberId: string) => IProjectMember | null;
   getProjectMemberByUserId: (memberId: string) => IProjectMember | null;
+  getProjectEstimateById: (estimateId: string) => IEstimate | null;
 
   fetchProjects: (workspaceSlug: string) => Promise<void>;
   fetchProjectDetails: (workspaceSlug: string, projectId: string) => Promise<any>;
   fetchProjectStates: (workspaceSlug: string, projectId: string) => Promise<void>;
   fetchProjectLabels: (workspaceSlug: string, projectId: string) => Promise<void>;
   fetchProjectMembers: (workspaceSlug: string, projectId: string) => Promise<void>;
+  fetchProjectEstimates: (workspaceSlug: string, projectId: string) => Promise<void>;
 
   addProjectToFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
   removeProjectFromFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
@@ -88,6 +96,9 @@ class ProjectStore implements IProjectStore {
   members: {
     [key: string]: IProjectMember[]; // project_id: members
   } | null = {};
+  estimates: {
+    [key: string]: IEstimate[]; // project_id: estimates
+  } | null = {};
 
   // root store
   rootStore;
@@ -95,6 +106,7 @@ class ProjectStore implements IProjectStore {
   projectService;
   issueService;
   stateService;
+  estimateService;
 
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
@@ -116,6 +128,7 @@ class ProjectStore implements IProjectStore {
       projectStates: computed,
       projectLabels: computed,
       projectMembers: computed,
+      projectEstimates: computed,
 
       joinedProjects: computed,
       favoriteProjects: computed,
@@ -126,6 +139,7 @@ class ProjectStore implements IProjectStore {
       fetchProjects: action,
       fetchProjectDetails: action,
 
+      getProjectById: action,
       getProjectStateById: action,
       getProjectLabelById: action,
       getProjectMemberById: action,
@@ -133,6 +147,7 @@ class ProjectStore implements IProjectStore {
       fetchProjectStates: action,
       fetchProjectLabels: action,
       fetchProjectMembers: action,
+      fetchProjectEstimates: action,
 
       addProjectToFavorites: action,
       removeProjectFromFavorites: action,
@@ -148,6 +163,7 @@ class ProjectStore implements IProjectStore {
     this.projectService = new ProjectService();
     this.issueService = new IssueService();
     this.stateService = new ProjectStateServices();
+    this.estimateService = new ProjectEstimateServices();
   }
 
   get searchedProjects() {
@@ -202,6 +218,11 @@ class ProjectStore implements IProjectStore {
     return this.members?.[this.projectId] || null;
   }
 
+  get projectEstimates() {
+    if (!this.projectId) return null;
+    return this.estimates?.[this.projectId] || null;
+  }
+
   // actions
   setProjectId = (projectSlug: string) => {
     this.projectId = projectSlug ?? null;
@@ -246,6 +267,14 @@ class ProjectStore implements IProjectStore {
     }
   };
 
+  getProjectById = (workspaceSlug: string, projectId: string) => {
+    if (!this.projectId) return null;
+    const projects = this.projects?.[workspaceSlug];
+    if (!projects) return null;
+    const projectInfo: IProject | null = projects.find((project) => project.id === projectId) || null;
+    return projectInfo;
+  };
+
   getProjectStateById = (stateId: string) => {
     if (!this.projectId) return null;
     const states = this.projectStates;
@@ -278,6 +307,14 @@ class ProjectStore implements IProjectStore {
     return memberInfo;
   };
 
+  getProjectEstimateById = (estimateId: string) => {
+    if (!this.projectId) return null;
+    const estimates = this.projectEstimates;
+    if (!estimates) return null;
+    const estimateInfo: IEstimate | null = estimates.find((estimate) => estimate.id === estimateId) || null;
+    return estimateInfo;
+  };
+
   fetchProjectStates = async (workspaceSlug: string, projectSlug: string) => {
     try {
       this.loader = true;
@@ -347,6 +384,29 @@ class ProjectStore implements IProjectStore {
     }
   };
 
+  fetchProjectEstimates = async (workspaceSlug: string, projectSlug: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const estimatesResponse = await this.estimateService.getEstimatesList(workspaceSlug, projectSlug);
+      const _estimates = {
+        ...this.estimates,
+        [projectSlug]: estimatesResponse,
+      };
+
+      runInAction(() => {
+        this.estimates = _estimates;
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      console.error(error);
+      this.loader = false;
+      this.error = error;
+    }
+  };
+
   addProjectToFavorites = async (workspaceSlug: string, projectId: string) => {
     try {
       const response = await this.projectService.addProjectToFavorites(workspaceSlug, projectId);