diff --git a/space/components/issues/board-views/kanban/block.tsx b/space/components/issues/board-views/kanban/block.tsx
index e44f1dba0..34e4cb3f1 100644
--- a/space/components/issues/board-views/kanban/block.tsx
+++ b/space/components/issues/board-views/kanban/block.tsx
@@ -13,7 +13,7 @@ import { IIssue } from "types/issue";
 import { RootStore } from "store/root";
 import { useRouter } from "next/router";
 
-export const IssueListBlock = observer(({ issue }: { issue: IIssue }) => {
+export const IssueKanBanBlock = observer(({ issue }: { issue: IIssue }) => {
   const { project: projectStore, issueDetails: issueDetailStore }: RootStore = useMobxStore();
 
   // router
diff --git a/space/components/issues/board-views/kanban/header.tsx b/space/components/issues/board-views/kanban/header.tsx
index 8f2f28496..488d94b59 100644
--- a/space/components/issues/board-views/kanban/header.tsx
+++ b/space/components/issues/board-views/kanban/header.tsx
@@ -10,7 +10,7 @@ import { StateGroupIcon } from "@plane/ui";
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 
-export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
+export const IssueKanBanHeader = observer(({ state }: { state: IIssueState }) => {
   const store: RootStore = useMobxStore();
 
   const stateGroup = issueGroupFilter(state.group);
diff --git a/space/components/issues/board-views/kanban/index.tsx b/space/components/issues/board-views/kanban/index.tsx
index b45b037d2..cc00f931e 100644
--- a/space/components/issues/board-views/kanban/index.tsx
+++ b/space/components/issues/board-views/kanban/index.tsx
@@ -3,8 +3,8 @@
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // components
-import { IssueListHeader } from "components/issues/board-views/kanban/header";
-import { IssueListBlock } from "components/issues/board-views/kanban/block";
+import { IssueKanBanHeader } from "components/issues/board-views/kanban/header";
+import { IssueKanBanBlock } from "components/issues/board-views/kanban/block";
 // ui
 import { Icon } from "components/ui";
 // interfaces
@@ -23,14 +23,14 @@ export const IssueKanbanView = observer(() => {
         store?.issue?.states.map((_state: IIssueState) => (
           <div key={_state.id} className="flex-shrink-0 relative w-[340px] h-full flex flex-col">
             <div className="flex-shrink-0">
-              <IssueListHeader state={_state} />
+              <IssueKanBanHeader state={_state} />
             </div>
             <div className="w-full h-full overflow-hidden overflow-y-auto hide-vertical-scrollbar">
               {store.issue.getFilteredIssuesByState(_state.id) &&
               store.issue.getFilteredIssuesByState(_state.id).length > 0 ? (
                 <div className="space-y-3 pb-2 px-2">
                   {store.issue.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
-                    <IssueListBlock key={_issue.id} issue={_issue} />
+                    <IssueKanBanBlock key={_issue.id} issue={_issue} />
                   ))}
                 </div>
               ) : (
diff --git a/space/components/issues/filters-render/index.tsx b/space/components/issues/filters-render/index.tsx
deleted file mode 100644
index d797d1506..000000000
--- a/space/components/issues/filters-render/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useRouter } from "next/router";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// components
-import IssueStateFilter from "./state";
-import IssueLabelFilter from "./label";
-import IssuePriorityFilter from "./priority";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-const IssueFilter = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  const router = useRouter();
-  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
-
-  const clearAllFilters = () => {
-    // router.replace(
-    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
-    //     key: "all",
-    //     removeAll: true,
-    //   })
-    // );
-  };
-
-  // if (store.issue.getIfFiltersIsEmpty()) return null;
-
-  return (
-    <div className="flex-shrink-0 min-h-[50px] h-auto py-1.5 border-b border-custom-border-200 relative flex items-center shadow-md bg-whiate select-none">
-      <div className="px-5 flex justify-start items-center flex-wrap gap-2 text-sm">
-        {/* state */}
-        {/* {store.issue.checkIfFilterExistsForKey("state") && <IssueStateFilter />} */}
-        {/* labels */}
-        {/* {store.issue.checkIfFilterExistsForKey("label") && <IssueLabelFilter />} */}
-        {/* priority */}
-        {/* {store.issue.checkIfFilterExistsForKey("priority") && <IssuePriorityFilter />} */}
-        {/* clear all filters */}
-        <div
-          className="flex items-center gap-2 border border-custom-border-200 px-2 py-1 cursor-pointer text-xs rounded-full"
-          onClick={clearAllFilters}
-        >
-          <div>Clear all filters</div>
-          <div className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm">
-            <span className="material-symbols-rounded text-[12px]">close</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-});
-
-export default IssueFilter;
diff --git a/space/components/issues/filters-render/label/filter-label-block.tsx b/space/components/issues/filters-render/label/filter-label-block.tsx
deleted file mode 100644
index a54fb65e4..000000000
--- a/space/components/issues/filters-render/label/filter-label-block.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useRouter } from "next/router";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-// interfaces
-import { IIssueLabel } from "types/issue";
-
-export const RenderIssueLabel = observer(({ label }: { label: IIssueLabel }) => {
-  const store = useMobxStore();
-
-  const router = useRouter();
-  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
-
-  const removeLabelFromFilter = () => {
-    // router.replace(
-    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
-    //     key: "label",
-    //     value: label?.id,
-    //   })
-    // );
-  };
-
-  return (
-    <div
-      className="flex-shrink-0 relative flex items-center flex-wrap gap-1 px-2 py-0.5 rounded-full select-none"
-      style={{ color: label?.color, backgroundColor: `${label?.color}10` }}
-    >
-      <div
-        className="flex-shrink-0 w-1.5 h-1.5 flex justify-center items-center overflow-hidden rounded-full"
-        style={{ backgroundColor: `${label?.color}` }}
-      />
-
-      <div className="font-medium whitespace-nowrap text-xs">{label?.name}</div>
-      <div
-        className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-full"
-        onClick={removeLabelFromFilter}
-      >
-        <span className="material-symbols-rounded text-xs">close</span>
-      </div>
-    </div>
-  );
-});
diff --git a/space/components/issues/filters-render/label/index.tsx b/space/components/issues/filters-render/label/index.tsx
deleted file mode 100644
index 1d9a4f990..000000000
--- a/space/components/issues/filters-render/label/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useRouter } from "next/router";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// components
-import { RenderIssueLabel } from "./filter-label-block";
-// interfaces
-import { IIssueLabel } from "types/issue";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-const IssueLabelFilter = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  const router = useRouter();
-  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
-
-  const clearLabelFilters = () => {
-    // router.replace(
-    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
-    //     key: "label",
-    //     removeAll: true,
-    //   })
-    // );
-  };
-
-  return (
-    <>
-      <div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
-        <div className="flex-shrink-0 text-custom-text-200">Labels</div>
-        <div className="relative flex flex-wrap items-center gap-1">
-          {/* {store?.issue?.labels &&
-            store?.issue?.labels.map(
-              (_label: IIssueLabel, _index: number) =>
-                store.issue.getUserSelectedFilter("label", _label.id) && (
-                  <RenderIssueLabel key={_label.id} label={_label} />
-                )
-            )} */}
-        </div>
-        <div
-          className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
-          onClick={clearLabelFilters}
-        >
-          <span className="material-symbols-rounded text-[12px]">close</span>
-        </div>
-      </div>
-    </>
-  );
-});
-
-export default IssueLabelFilter;
diff --git a/space/components/issues/filters-render/priority/filter-priority-block.tsx b/space/components/issues/filters-render/priority/filter-priority-block.tsx
deleted file mode 100644
index 5fd1ef1a7..000000000
--- a/space/components/issues/filters-render/priority/filter-priority-block.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useRouter } from "next/router";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-// interfaces
-import { IIssuePriorityFilters } from "types/issue";
-
-export const RenderIssuePriority = observer(({ priority }: { priority: IIssuePriorityFilters }) => {
-  const store = useMobxStore();
-
-  const router = useRouter();
-  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
-
-  const removePriorityFromFilter = () => {
-    // router.replace(
-    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
-    //     key: "priority",
-    //     value: priority?.key,
-    //   })
-    // );
-  };
-
-  return (
-    <div
-      className={`flex-shrink-0 relative flex items-center flex-wrap gap-1 px-2 py-0.5 text-xs rounded-full select-none ${
-        priority.className || ``
-      }`}
-    >
-      <div className="flex-shrink-0 flex justify-center items-center overflow-hidden rounded-full">
-        <span className="material-symbols-rounded text-xs">{priority?.icon}</span>
-      </div>
-      <div className="whitespace-nowrap">{priority?.title}</div>
-      <div
-        className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-full"
-        onClick={removePriorityFromFilter}
-      >
-        <span className="material-symbols-rounded text-xs">close</span>
-      </div>
-    </div>
-  );
-});
diff --git a/space/components/issues/filters-render/priority/index.tsx b/space/components/issues/filters-render/priority/index.tsx
deleted file mode 100644
index 100ba1761..000000000
--- a/space/components/issues/filters-render/priority/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useRouter } from "next/router";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-// components
-import { RenderIssuePriority } from "./filter-priority-block";
-// interfaces
-import { IIssuePriorityFilters } from "types/issue";
-// constants
-import { issuePriorityFilters } from "constants/data";
-
-const IssuePriorityFilter = observer(() => {
-  const store = useMobxStore();
-
-  const router = useRouter();
-  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
-
-  const clearPriorityFilters = () => {
-    // router.replace(
-    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
-    //     key: "priority",
-    //     removeAll: true,
-    //   })
-    // );
-  };
-
-  return (
-    <>
-      <div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
-        <div className="flex-shrink-0 text-custom-text-200">Priority</div>
-        <div className="relative flex flex-wrap items-center gap-1">
-          {/* {issuePriorityFilters.map(
-            (_priority: IIssuePriorityFilters, _index: number) =>
-              store.issue.getUserSelectedFilter("priority", _priority.key) && (
-                <RenderIssuePriority key={_priority.key} priority={_priority} />
-              )
-          )} */}
-        </div>
-        <div
-          className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
-          onClick={() => {
-            clearPriorityFilters();
-          }}
-        >
-          <span className="material-symbols-rounded text-[12px]">close</span>
-        </div>
-      </div>
-    </>
-  );
-});
-
-export default IssuePriorityFilter;
diff --git a/space/components/issues/filters-render/state/filter-state-block.tsx b/space/components/issues/filters-render/state/filter-state-block.tsx
deleted file mode 100644
index b9c8ed4ec..000000000
--- a/space/components/issues/filters-render/state/filter-state-block.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { observer } from "mobx-react-lite";
-// interfaces
-import { IIssueState } from "types/issue";
-// constants
-import { issueGroupFilter } from "constants/data";
-
-export const RenderIssueState = observer(({ state }: { state: IIssueState }) => {
-  const stateGroup = issueGroupFilter(state.group);
-
-  const removeStateFromFilter = () => {
-    // router.replace(
-    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
-    //     key: "state",
-    //     value: state?.id,
-    //   })
-    // );
-  };
-
-  if (stateGroup === null) return <></>;
-  return (
-    <div className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 ${stateGroup.className || ``}`}>
-      <div className="flex h-3 w-3 flex-shrink-0 items-center justify-center overflow-hidden rounded-full">
-        {/* <stateGroup.icon /> */}
-      </div>
-      <div className="whitespace-nowrap text-xs font-medium">{state?.name}</div>
-      <div
-        className="flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full"
-        onClick={removeStateFromFilter}
-      >
-        <span className="material-symbols-rounded text-xs">close</span>
-      </div>
-    </div>
-  );
-});
diff --git a/space/components/issues/filters-render/state/index.tsx b/space/components/issues/filters-render/state/index.tsx
deleted file mode 100644
index 0198c5215..000000000
--- a/space/components/issues/filters-render/state/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useRouter } from "next/router";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// components
-import { RenderIssueState } from "./filter-state-block";
-// interfaces
-import { IIssueState } from "types/issue";
-// mobx hook
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-const IssueStateFilter = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  const router = useRouter();
-  const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
-
-  const clearStateFilters = () => {
-    // router.replace(
-    //   store.issue.getURLDefinition(workspace_slug, project_slug, {
-    //     key: "state",
-    //     removeAll: true,
-    //   })
-    // );
-  };
-
-  return (
-    <>
-      <div className="flex items-center gap-2 border border-custom-border-300 px-2 py-1 rounded-full text-xs">
-        <div className="flex-shrink-0 text-custom-text-200">State</div>
-        <div className="relative flex flex-wrap items-center gap-1">
-          {/* {store?.issue?.states &&
-            store?.issue?.states.map(
-              (_state: IIssueState, _index: number) =>
-                store.issue.getUserSelectedFilter("state", _state.id) && (
-                  <RenderIssueState key={_state.id} state={_state} />
-                )
-            )} */}
-        </div>
-        <div
-          className="flex-shrink-0 w-3 h-3 cursor-pointer flex justify-center items-center overflow-hidden rounded-sm"
-          onClick={clearStateFilters}
-        >
-          <span className="material-symbols-rounded text-[12px]">close</span>
-        </div>
-      </div>
-    </>
-  );
-});
-
-export default IssueStateFilter;
diff --git a/space/components/issues/filters/applied-filters/filters-list.tsx b/space/components/issues/filters/applied-filters/filters-list.tsx
new file mode 100644
index 000000000..898898232
--- /dev/null
+++ b/space/components/issues/filters/applied-filters/filters-list.tsx
@@ -0,0 +1,80 @@
+// components
+import { AppliedLabelsFilters } from "./label";
+import { AppliedPriorityFilters } from "./priority";
+import { AppliedStateFilters } from "./state";
+// icons
+import { X } from "lucide-react";
+// helpers
+import { IIssueFilterOptions } from "store/issues/types";
+import { IIssueLabel, IIssueState } from "types/issue";
+// types
+
+type Props = {
+  appliedFilters: IIssueFilterOptions;
+  handleRemoveAllFilters: () => void;
+  handleRemoveFilter: (key: keyof IIssueFilterOptions, value: string | null) => void;
+  labels?: IIssueLabel[] | undefined;
+  states?: IIssueState[] | undefined;
+};
+
+export const replaceUnderscoreIfSnakeCase = (str: string) => str.replace(/_/g, " ");
+
+export const AppliedFiltersList: React.FC<Props> = (props) => {
+  const { appliedFilters, handleRemoveAllFilters, handleRemoveFilter, labels, states } = props;
+
+  return (
+    <div className="flex items-stretch gap-2 flex-wrap bg-custom-background-100">
+      {Object.entries(appliedFilters).map(([key, value]) => {
+        const filterKey = key as keyof IIssueFilterOptions;
+
+        if (!value) return;
+
+        return (
+          <div
+            key={filterKey}
+            className="capitalize py-1 px-2 border border-custom-border-200 rounded-md flex items-center gap-2 flex-wrap"
+          >
+            <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+            <div className="flex items-center gap-1 flex-wrap">
+              {filterKey === "priority" && (
+                <AppliedPriorityFilters handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} />
+              )}
+
+              {filterKey === "labels" && labels && (
+                <AppliedLabelsFilters
+                  handleRemove={(val) => handleRemoveFilter("labels", val)}
+                  labels={labels}
+                  values={value}
+                />
+              )}
+
+              {filterKey === "state" && states && (
+                <AppliedStateFilters
+                  handleRemove={(val) => handleRemoveFilter("state", val)}
+                  states={states}
+                  values={value}
+                />
+              )}
+
+              <button
+                type="button"
+                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                onClick={() => handleRemoveFilter(filterKey, null)}
+              >
+                <X size={12} strokeWidth={2} />
+              </button>
+            </div>
+          </div>
+        );
+      })}
+      <button
+        type="button"
+        onClick={handleRemoveAllFilters}
+        className="flex items-center gap-2 text-xs border border-custom-border-200 py-1 px-2 rounded-md text-custom-text-300 hover:text-custom-text-200"
+      >
+        Clear all
+        <X size={12} strokeWidth={2} />
+      </button>
+    </div>
+  );
+};
diff --git a/space/components/issues/filters/applied-filters/label.tsx b/space/components/issues/filters/applied-filters/label.tsx
new file mode 100644
index 000000000..ecf824210
--- /dev/null
+++ b/space/components/issues/filters/applied-filters/label.tsx
@@ -0,0 +1,42 @@
+import { X } from "lucide-react";
+// types
+import { IIssueLabel } from "types/issue";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  labels: IIssueLabel[] | undefined;
+  values: string[];
+};
+
+export const AppliedLabelsFilters: React.FC<Props> = (props) => {
+  const { handleRemove, labels, values } = props;
+
+  return (
+    <>
+      {values.map((labelId) => {
+        const labelDetails = labels?.find((l) => l.id === labelId);
+
+        if (!labelDetails) return null;
+
+        return (
+          <div key={labelId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+            <span
+              className="h-1.5 w-1.5 rounded-full"
+              style={{
+                backgroundColor: labelDetails.color,
+              }}
+            />
+            <span className="normal-case">{labelDetails.name}</span>
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(labelId)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+    </>
+  );
+};
diff --git a/space/components/issues/filters/applied-filters/priority.tsx b/space/components/issues/filters/applied-filters/priority.tsx
new file mode 100644
index 000000000..f051abf2d
--- /dev/null
+++ b/space/components/issues/filters/applied-filters/priority.tsx
@@ -0,0 +1,31 @@
+import { PriorityIcon } from "@plane/ui";
+import { X } from "lucide-react";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+};
+
+export const AppliedPriorityFilters: React.FC<Props> = (props) => {
+  const { handleRemove, values } = props;
+
+  return (
+    <>
+      {values &&
+        values.length > 0 &&
+        values.map((priority) => (
+          <div key={priority} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+            <PriorityIcon priority={priority as any} className={`h-3 w-3`} />
+            {priority}
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(priority)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          </div>
+        ))}
+    </>
+  );
+};
diff --git a/space/components/issues/filters/applied-filters/root.tsx b/space/components/issues/filters/applied-filters/root.tsx
new file mode 100644
index 000000000..3f77dcc06
--- /dev/null
+++ b/space/components/issues/filters/applied-filters/root.tsx
@@ -0,0 +1,90 @@
+import { FC, useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// components
+import { AppliedFiltersList } from "./filters-list";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+import { IIssueFilterOptions } from "store/issues/types";
+
+export const IssueAppliedFilters: FC = observer(() => {
+  const router = useRouter();
+  const { workspace_slug: workspaceSlug, project_slug: projectId } = router.query as {
+    workspace_slug: string;
+    project_slug: string;
+  };
+
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+    issue: { states, labels },
+    project: { activeBoard },
+  }: RootStore = useMobxStore();
+
+  const userFilters = issueFilters?.filters || {};
+
+  const appliedFilters: IIssueFilterOptions = {};
+  Object.entries(userFilters).forEach(([key, value]) => {
+    if (!value) return;
+    if (Array.isArray(value) && value.length === 0) return;
+    appliedFilters[key as keyof IIssueFilterOptions] = value;
+  });
+
+  const updateRouteParams = useCallback(
+    (key: keyof IIssueFilterOptions | null, value: string[] | null, clearFields: boolean = false) => {
+      const state = key === "state" ? value || [] : issueFilters?.filters?.state ?? [];
+      const priority = key === "priority" ? value || [] : issueFilters?.filters?.priority ?? [];
+      const labels = key === "labels" ? value || [] : issueFilters?.filters?.labels ?? [];
+
+      let params: any = { board: activeBoard || "list" };
+      if (!clearFields) {
+        if (priority.length > 0) params = { ...params, priorities: priority.join(",") };
+        if (state.length > 0) params = { ...params, states: state.join(",") };
+        if (labels.length > 0) params = { ...params, labels: labels.join(",") };
+      }
+
+      router.push({ pathname: `/${workspaceSlug}/${projectId}`, query: { ...params } }, undefined, { shallow: true });
+    },
+    [workspaceSlug, projectId, activeBoard, issueFilters, router]
+  );
+
+  const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
+    if (!projectId) return;
+    if (!value) {
+      updateFilters(projectId, { [key]: null });
+      return;
+    }
+
+    let newValues = issueFilters?.filters?.[key] ?? [];
+    newValues = newValues.filter((val) => val !== value);
+
+    updateFilters(projectId, { [key]: newValues });
+    updateRouteParams(key, newValues);
+  };
+
+  const handleRemoveAllFilters = () => {
+    if (!projectId) return;
+
+    const newFilters: IIssueFilterOptions = {};
+    Object.keys(userFilters).forEach((key) => {
+      newFilters[key as keyof IIssueFilterOptions] = null;
+    });
+
+    updateFilters(projectId, { ...newFilters });
+    updateRouteParams(null, null, true);
+  };
+
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  return (
+    <div className="p-5 py-3 border-b border-custom-border-200">
+      <AppliedFiltersList
+        appliedFilters={appliedFilters || {}}
+        handleRemoveFilter={handleRemoveFilter}
+        handleRemoveAllFilters={handleRemoveAllFilters}
+        labels={labels ?? []}
+        states={states ?? []}
+      />
+    </div>
+  );
+});
diff --git a/space/components/issues/filters/applied-filters/state.tsx b/space/components/issues/filters/applied-filters/state.tsx
new file mode 100644
index 000000000..f238197b8
--- /dev/null
+++ b/space/components/issues/filters/applied-filters/state.tsx
@@ -0,0 +1,39 @@
+import { X } from "lucide-react";
+import { StateGroupIcon } from "@plane/ui";
+// icons
+import { IIssueState } from "types/issue";
+// types
+
+type Props = {
+  handleRemove: (val: string) => void;
+  states: IIssueState[];
+  values: string[];
+};
+
+export const AppliedStateFilters: React.FC<Props> = (props) => {
+  const { handleRemove, states, values } = props;
+
+  return (
+    <>
+      {values.map((stateId) => {
+        const stateDetails = states?.find((s) => s.id === stateId);
+
+        if (!stateDetails) return null;
+
+        return (
+          <div key={stateId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+            <StateGroupIcon color={stateDetails.color} stateGroup={stateDetails.group} height="12px" width="12px" />
+            {stateDetails.name}
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(stateId)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+    </>
+  );
+};
diff --git a/space/components/issues/filters/helpers/dropdown.tsx b/space/components/issues/filters/helpers/dropdown.tsx
new file mode 100644
index 000000000..0f93b75c9
--- /dev/null
+++ b/space/components/issues/filters/helpers/dropdown.tsx
@@ -0,0 +1,72 @@
+import React, { Fragment, useState } from "react";
+import { usePopper } from "react-popper";
+import { Popover, Transition } from "@headlessui/react";
+import { Placement } from "@popperjs/core";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { ChevronUp } from "lucide-react";
+
+type Props = {
+  children: React.ReactNode;
+  title?: string;
+  placement?: Placement;
+};
+
+export const FiltersDropdown: React.FC<Props> = (props) => {
+  const { children, title = "Dropdown", placement } = props;
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "auto",
+  });
+
+  return (
+    <Popover as="div">
+      {({ open }) => {
+        if (open) {
+        }
+        return (
+          <>
+            <Popover.Button as={React.Fragment}>
+              <Button
+                ref={setReferenceElement}
+                variant="neutral-primary"
+                size="sm"
+                appendIcon={
+                  <ChevronUp className={`transition-all ${open ? "" : "rotate-180"}`} size={14} strokeWidth={2} />
+                }
+              >
+                <div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
+                  <span>{title}</span>
+                </div>
+              </Button>
+            </Popover.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel>
+                <div
+                  className="z-10 bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-rg rounded overflow-hidden"
+                  ref={setPopperElement}
+                  style={styles.popper}
+                  {...attributes.popper}
+                >
+                  <div className="w-[18.75rem] max-h-[37.5rem] flex flex-col overflow-hidden">{children}</div>
+                </div>
+              </Popover.Panel>
+            </Transition>
+          </>
+        );
+      }}
+    </Popover>
+  );
+};
diff --git a/space/components/issues/filters/helpers/filter-header.tsx b/space/components/issues/filters/helpers/filter-header.tsx
new file mode 100644
index 000000000..4513b0795
--- /dev/null
+++ b/space/components/issues/filters/helpers/filter-header.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+// lucide icons
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+interface IFilterHeader {
+  title: string;
+  isPreviewEnabled: boolean;
+  handleIsPreviewEnabled: () => void;
+}
+
+export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) => (
+  <div className="flex items-center justify-between gap-2 bg-custom-background-100 sticky top-0">
+    <div className="text-custom-text-300 text-xs font-medium flex-grow truncate">{title}</div>
+    <button
+      type="button"
+      className="flex-shrink-0 w-5 h-5 grid place-items-center rounded hover:bg-custom-background-80"
+      onClick={handleIsPreviewEnabled}
+    >
+      {isPreviewEnabled ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+    </button>
+  </div>
+);
diff --git a/space/components/issues/filters/helpers/filter-option.tsx b/space/components/issues/filters/helpers/filter-option.tsx
new file mode 100644
index 000000000..4b6f1b041
--- /dev/null
+++ b/space/components/issues/filters/helpers/filter-option.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+// lucide icons
+import { Check } from "lucide-react";
+
+type Props = {
+  icon?: React.ReactNode;
+  isChecked: boolean;
+  title: React.ReactNode;
+  onClick?: () => void;
+  multiple?: boolean;
+};
+
+export const FilterOption: React.FC<Props> = (props) => {
+  const { icon, isChecked, multiple = true, onClick, title } = props;
+
+  return (
+    <button
+      type="button"
+      className="flex items-center gap-2 rounded hover:bg-custom-background-80 w-full p-1.5"
+      onClick={onClick}
+    >
+      <div
+        className={`flex-shrink-0 w-3 h-3 grid place-items-center bg-custom-background-90 border ${
+          isChecked ? "bg-custom-primary-100 border-custom-primary-100 text-white" : "border-custom-border-300"
+        } ${multiple ? "rounded-sm" : "rounded-full"}`}
+      >
+        {isChecked && <Check size={10} strokeWidth={3} />}
+      </div>
+      <div className="flex items-center gap-2 truncate">
+        {icon && <div className="flex-shrink-0 grid place-items-center w-5">{icon}</div>}
+        <div className="flex-grow truncate text-custom-text-200 text-xs">{title}</div>
+      </div>
+    </button>
+  );
+};
diff --git a/space/components/issues/filters/helpers/index.ts b/space/components/issues/filters/helpers/index.ts
new file mode 100644
index 000000000..ef38d9884
--- /dev/null
+++ b/space/components/issues/filters/helpers/index.ts
@@ -0,0 +1,3 @@
+export * from "./dropdown";
+export * from "./filter-header";
+export * from "./filter-option";
diff --git a/space/components/issues/filters/index.ts b/space/components/issues/filters/index.ts
new file mode 100644
index 000000000..56a01386d
--- /dev/null
+++ b/space/components/issues/filters/index.ts
@@ -0,0 +1,11 @@
+// filters
+export * from "./root";
+export * from "./selection";
+
+// properties
+export * from "./state";
+export * from "./priority";
+export * from "./labels";
+
+// helpers
+export * from "./helpers";
diff --git a/space/components/issues/filters/labels.tsx b/space/components/issues/filters/labels.tsx
new file mode 100644
index 000000000..4b8aa3b4f
--- /dev/null
+++ b/space/components/issues/filters/labels.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+
+// components
+import { FilterHeader, FilterOption } from "./helpers";
+// ui
+import { Loader } from "@plane/ui";
+// types
+import { IIssueLabel } from "types/issue";
+
+const LabelIcons = ({ color }: { color: string }) => (
+  <span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: color }} />
+);
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  labels: IIssueLabel[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterLabels: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, labels, searchQuery } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = labels?.filter((label) => label.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Label${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((label) => (
+                  <FilterOption
+                    key={label?.id}
+                    isChecked={appliedFilters?.includes(label?.id) ? true : false}
+                    onClick={() => handleUpdate(label?.id)}
+                    icon={<LabelIcons color={label.color} />}
+                    title={label.name}
+                  />
+                ))}
+                {filteredOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="text-custom-primary-100 text-xs font-medium ml-8"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/space/components/issues/filters/priority.tsx b/space/components/issues/filters/priority.tsx
new file mode 100644
index 000000000..94a7f6a8c
--- /dev/null
+++ b/space/components/issues/filters/priority.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+// ui
+import { PriorityIcon } from "@plane/ui";
+// components
+import { FilterHeader, FilterOption } from "./helpers";
+// constants
+import { issuePriorityFilters } from "constants/data";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterPriority: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = issuePriorityFilters.filter((p) => p.key.includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      <FilterHeader
+        title={`Priority${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((priority) => (
+              <FilterOption
+                key={priority.key}
+                isChecked={appliedFilters?.includes(priority.key) ? true : false}
+                onClick={() => handleUpdate(priority.key)}
+                icon={<PriorityIcon priority={priority.key} className="h-3.5 w-3.5" />}
+                title={priority.title}
+              />
+            ))
+          ) : (
+            <p className="text-xs text-custom-text-400 italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/space/components/issues/filters/root.tsx b/space/components/issues/filters/root.tsx
new file mode 100644
index 000000000..eb9946a24
--- /dev/null
+++ b/space/components/issues/filters/root.tsx
@@ -0,0 +1,77 @@
+import { FC, useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// components
+import { FiltersDropdown } from "./helpers/dropdown";
+import { FilterSelection } from "./selection";
+// types
+import { IIssueFilterOptions } from "store/issues/types";
+// helpers
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "store/issues/helpers";
+// store
+import { RootStore } from "store/root";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export const IssueFiltersDropdown: FC = observer(() => {
+  const router = useRouter();
+  const { workspace_slug: workspaceSlug, project_slug: projectId } = router.query as {
+    workspace_slug: string;
+    project_slug: string;
+  };
+
+  const {
+    project: { activeBoard },
+    issue: { states, labels },
+    issuesFilter: { issueFilters, updateFilters },
+  }: RootStore = useMobxStore();
+
+  const updateRouteParams = useCallback(
+    (key: keyof IIssueFilterOptions, value: string[]) => {
+      const state = key === "state" ? value : issueFilters?.filters?.state ?? [];
+      const priority = key === "priority" ? value : issueFilters?.filters?.priority ?? [];
+      const labels = key === "labels" ? value : issueFilters?.filters?.labels ?? [];
+
+      let params: any = { board: activeBoard || "list" };
+      if (priority.length > 0) params = { ...params, priorities: priority.join(",") };
+      if (state.length > 0) params = { ...params, states: state.join(",") };
+      if (labels.length > 0) params = { ...params, labels: labels.join(",") };
+
+      router.push({ pathname: `/${workspaceSlug}/${projectId}`, query: { ...params } }, undefined, { shallow: true });
+    },
+    [workspaceSlug, projectId, activeBoard, issueFilters, router]
+  );
+
+  const handleFilters = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!projectId) return;
+      const newValues = issueFilters?.filters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(projectId, { [key]: newValues });
+      updateRouteParams(key, newValues);
+    },
+    [projectId, issueFilters, updateFilters, updateRouteParams]
+  );
+
+  return (
+    <div className="w-full h-full flex flex-col z-50">
+      <FiltersDropdown title="Filters" placement="bottom-end">
+        <FilterSelection
+          filters={issueFilters?.filters ?? {}}
+          handleFilters={handleFilters}
+          layoutDisplayFiltersOptions={activeBoard ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeBoard] : undefined}
+          states={states ?? undefined}
+          labels={labels ?? undefined}
+        />
+      </FiltersDropdown>
+    </div>
+  );
+});
diff --git a/space/components/issues/filters/selection.tsx b/space/components/issues/filters/selection.tsx
new file mode 100644
index 000000000..e479a7d59
--- /dev/null
+++ b/space/components/issues/filters/selection.tsx
@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Search, X } from "lucide-react";
+// components
+import { FilterLabels, FilterPriority, FilterState } from "./";
+// types
+
+// filter helpers
+import { ILayoutDisplayFiltersOptions } from "store/issues/helpers";
+import { IIssueFilterOptions } from "store/issues/types";
+import { IIssueState, IIssueLabel } from "types/issue";
+
+type Props = {
+  filters: IIssueFilterOptions;
+  handleFilters: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
+  layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions | undefined;
+  labels?: IIssueLabel[] | undefined;
+  states?: IIssueState[] | undefined;
+};
+
+export const FilterSelection: React.FC<Props> = observer((props) => {
+  const { filters, handleFilters, layoutDisplayFiltersOptions, labels, states } = props;
+
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+
+  const isFilterEnabled = (filter: keyof IIssueFilterOptions) => layoutDisplayFiltersOptions?.filters.includes(filter);
+
+  return (
+    <div className="w-full h-full flex flex-col overflow-hidden">
+      <div className="p-2.5 pb-0 bg-custom-background-100">
+        <div className="bg-custom-background-90 border-[0.5px] border-custom-border-200 text-xs rounded flex items-center gap-1.5 px-1.5 py-1">
+          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+          <input
+            type="text"
+            className="bg-custom-background-90 placeholder:text-custom-text-400 w-full outline-none"
+            placeholder="Search"
+            value={filtersSearchQuery}
+            onChange={(e) => setFiltersSearchQuery(e.target.value)}
+            autoFocus
+          />
+          {filtersSearchQuery !== "" && (
+            <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
+              <X className="text-custom-text-300" size={12} strokeWidth={2} />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="w-full h-full divide-y divide-custom-border-200 px-2.5 overflow-y-auto">
+        {/* priority */}
+        {isFilterEnabled("priority") && (
+          <div className="py-2">
+            <FilterPriority
+              appliedFilters={filters.priority ?? null}
+              handleUpdate={(val) => handleFilters("priority", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* state */}
+        {isFilterEnabled("state") && (
+          <div className="py-2">
+            <FilterState
+              appliedFilters={filters.state ?? null}
+              handleUpdate={(val) => handleFilters("state", val)}
+              searchQuery={filtersSearchQuery}
+              states={states}
+            />
+          </div>
+        )}
+
+        {/* labels */}
+        {isFilterEnabled("labels") && (
+          <div className="py-2">
+            <FilterLabels
+              appliedFilters={filters.labels ?? null}
+              handleUpdate={(val) => handleFilters("labels", val)}
+              labels={labels}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/space/components/issues/filters/state.tsx b/space/components/issues/filters/state.tsx
new file mode 100644
index 000000000..1175a5ed6
--- /dev/null
+++ b/space/components/issues/filters/state.tsx
@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+// components
+import { FilterHeader, FilterOption } from "./helpers";
+// ui
+import { Loader, StateGroupIcon } from "@plane/ui";
+// types
+import { IIssueState } from "types/issue";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+  states: IIssueState[] | undefined;
+};
+
+export const FilterState: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, searchQuery, states } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = states?.filter((s) => s.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`State${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((state) => (
+                  <FilterOption
+                    key={state.id}
+                    isChecked={appliedFilters?.includes(state.id) ? true : false}
+                    onClick={() => handleUpdate(state.id)}
+                    icon={<StateGroupIcon stateGroup={state.group} color={state.color} />}
+                    title={state.name}
+                  />
+                ))}
+                {filteredOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="text-custom-primary-100 text-xs font-medium ml-8"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/space/components/issues/navbar/index.tsx b/space/components/issues/navbar/index.tsx
index e4ce36050..d6491bc26 100644
--- a/space/components/issues/navbar/index.tsx
+++ b/space/components/issues/navbar/index.tsx
@@ -9,6 +9,7 @@ import { observer } from "mobx-react-lite";
 // import { NavbarSearch } from "./search";
 import { NavbarIssueBoardView } from "./issue-board-view";
 import { NavbarTheme } from "./theme";
+import { IssueFiltersDropdown } from "components/issues/filters";
 // ui
 import { Avatar, Button } from "@plane/ui";
 import { Briefcase } from "lucide-react";
@@ -16,6 +17,7 @@ import { Briefcase } from "lucide-react";
 import { useMobxStore } from "lib/mobx/store-provider";
 // store
 import { RootStore } from "store/root";
+import { TIssueBoardKeys } from "types/issue";
 
 const renderEmoji = (emoji: string | { name: string; color: string }) => {
   if (!emoji) return;
@@ -30,10 +32,21 @@ const renderEmoji = (emoji: string | { name: string; color: string }) => {
 };
 
 const IssueNavbar = observer(() => {
-  const { project: projectStore, user: userStore }: RootStore = useMobxStore();
+  const {
+    project: projectStore,
+    user: userStore,
+    issuesFilter: { updateFilters },
+  }: RootStore = useMobxStore();
   // router
   const router = useRouter();
-  const { workspace_slug, project_slug, board } = router.query;
+  const { workspace_slug, project_slug, board, states, priorities, labels } = router.query as {
+    workspace_slug: string;
+    project_slug: string;
+    board: string;
+    states: string;
+    priorities: string;
+    labels: string;
+  };
 
   const user = userStore?.currentUser;
 
@@ -46,7 +59,7 @@ const IssueNavbar = observer(() => {
   useEffect(() => {
     if (workspace_slug && project_slug && projectStore?.deploySettings) {
       const viewsAcceptable: string[] = [];
-      let currentBoard: string | null = null;
+      let currentBoard: TIssueBoardKeys | null = null;
 
       if (projectStore?.deploySettings?.views?.list) viewsAcceptable.push("list");
       if (projectStore?.deploySettings?.views?.kanban) viewsAcceptable.push("kanban");
@@ -56,31 +69,41 @@ const IssueNavbar = observer(() => {
 
       if (board) {
         if (viewsAcceptable.includes(board.toString())) {
-          currentBoard = board.toString();
+          currentBoard = board.toString() as TIssueBoardKeys;
         } else {
           if (viewsAcceptable && viewsAcceptable.length > 0) {
-            currentBoard = viewsAcceptable[0];
+            currentBoard = viewsAcceptable[0] as TIssueBoardKeys;
           }
         }
       } else {
         if (viewsAcceptable && viewsAcceptable.length > 0) {
-          currentBoard = viewsAcceptable[0];
+          currentBoard = viewsAcceptable[0] as TIssueBoardKeys;
         }
       }
 
       if (currentBoard) {
         if (projectStore?.activeBoard === null || projectStore?.activeBoard !== currentBoard) {
+          let params: any = { board: currentBoard };
+          if (priorities && priorities.length > 0) params = { ...params, priorities: priorities };
+          if (states && states.length > 0) params = { ...params, states: states };
+          if (labels && labels.length > 0) params = { ...params, labels: labels };
+
+          let storeParams: any = {};
+          if (priorities && priorities.length > 0) storeParams = { ...storeParams, priority: priorities.split(",") };
+          if (states && states.length > 0) storeParams = { ...storeParams, state: states.split(",") };
+          if (labels && labels.length > 0) storeParams = { ...storeParams, labels: labels.split(",") };
+
+          if (storeParams) updateFilters(project_slug, storeParams);
+
           projectStore.setActiveBoard(currentBoard);
           router.push({
             pathname: `/${workspace_slug}/${project_slug}`,
-            query: {
-              board: currentBoard,
-            },
+            query: { ...params },
           });
         }
       }
     }
-  }, [board, workspace_slug, project_slug, router, projectStore, projectStore?.deploySettings]);
+  }, [board, workspace_slug, project_slug, router, projectStore, projectStore?.deploySettings, updateFilters]);
 
   return (
     <div className="relative flex w-full items-center gap-4 px-5">
@@ -120,6 +143,11 @@ const IssueNavbar = observer(() => {
         <NavbarIssueBoardView />
       </div>
 
+      {/* issue filters */}
+      <div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
+        <IssueFiltersDropdown />
+      </div>
+
       {/* theming */}
       <div className="relative flex-shrink-0">
         <NavbarTheme />
diff --git a/space/components/issues/navbar/issue-board-view.tsx b/space/components/issues/navbar/issue-board-view.tsx
index 16b09229a..906d3543d 100644
--- a/space/components/issues/navbar/issue-board-view.tsx
+++ b/space/components/issues/navbar/issue-board-view.tsx
@@ -5,6 +5,7 @@ import { issueViews } from "constants/data";
 // mobx
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
+import { TIssueBoardKeys } from "types/issue";
 
 export const NavbarIssueBoardView = observer(() => {
   const {
@@ -15,7 +16,7 @@ export const NavbarIssueBoardView = observer(() => {
   const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
 
   const handleCurrentBoardView = (boardView: string) => {
-    setActiveBoard(boardView);
+    setActiveBoard(boardView as TIssueBoardKeys);
     router.push(`/${workspace_slug}/${project_slug}?board=${boardView}`);
   };
 
diff --git a/space/components/issues/navbar/issue-filter.tsx b/space/components/issues/navbar/issue-filter.tsx
deleted file mode 100644
index 83d5159d6..000000000
--- a/space/components/issues/navbar/issue-filter.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { useRouter } from "next/router";
-import { observer } from "mobx-react-lite";
-import { ChevronDown } from "lucide-react";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-// components
-import { Dropdown } from "components/ui/dropdown";
-// constants
-import { issueGroupFilter } from "constants/data";
-
-const PRIORITIES = ["urgent", "high", "medium", "low"];
-
-export const NavbarIssueFilter = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  const router = useRouter();
-  const pathName = router.asPath;
-
-  const handleOnSelect = (key: "states" | "labels" | "priorities", value: string) => {
-    // if (key === "states") {
-    //   store.issue.userSelectedStates = store.issue.userSelectedStates.includes(value)
-    //     ? store.issue.userSelectedStates.filter((s) => s !== value)
-    //     : [...store.issue.userSelectedStates, value];
-    // } else if (key === "labels") {
-    //   store.issue.userSelectedLabels = store.issue.userSelectedLabels.includes(value)
-    //     ? store.issue.userSelectedLabels.filter((l) => l !== value)
-    //     : [...store.issue.userSelectedLabels, value];
-    // } else if (key === "priorities") {
-    //   store.issue.userSelectedPriorities = store.issue.userSelectedPriorities.includes(value)
-    //     ? store.issue.userSelectedPriorities.filter((p) => p !== value)
-    //     : [...store.issue.userSelectedPriorities, value];
-    // }
-    // const paramsCommaSeparated = `${`board=${store.issue.currentIssueBoardView || "list"}`}${
-    //   store.issue.userSelectedPriorities.length > 0 ? `&priorities=${store.issue.userSelectedPriorities.join(",")}` : ""
-    // }${store.issue.userSelectedStates.length > 0 ? `&states=${store.issue.userSelectedStates.join(",")}` : ""}${
-    //   store.issue.userSelectedLabels.length > 0 ? `&labels=${store.issue.userSelectedLabels.join(",")}` : ""
-    // }`;
-    // router.replace(`${pathName}?${paramsCommaSeparated}`);
-  };
-
-  return (
-    <Dropdown
-      button={
-        <>
-          <span>Filters</span>
-          <ChevronDown className="h-3 w-3" aria-hidden="true" />
-        </>
-      }
-      items={[
-        {
-          display: "Priority",
-          children: PRIORITIES.map((priority) => ({
-            display: (
-              <span className="capitalize flex items-center gap-x-2">
-                <span className="material-symbols-rounded text-[14px]">
-                  {priority === "urgent"
-                    ? "error"
-                    : priority === "high"
-                    ? "signal_cellular_alt"
-                    : priority === "medium"
-                    ? "signal_cellular_alt_2_bar"
-                    : "signal_cellular_alt_1_bar"}
-                </span>
-                {priority}
-              </span>
-            ),
-            onClick: () => handleOnSelect("priorities", priority),
-            isSelected: store.issue.filteredPriorities.includes(priority),
-          })),
-        },
-        {
-          display: "State",
-          children: (store.issue.states || []).map((state) => {
-            const stateGroup = issueGroupFilter(state.group);
-
-            return {
-              display: (
-                <span className="capitalize flex items-center gap-x-2">
-                  {/* {stateGroup && <stateGroup.icon />} */}
-                  {state.name}
-                </span>
-              ),
-              onClick: () => handleOnSelect("states", state.id),
-              isSelected: store.issue.filteredStates.includes(state.id),
-            };
-          }),
-        },
-        {
-          display: "Labels",
-          children: [...(store.issue.labels || [])].map((label) => ({
-            display: (
-              <span className="capitalize flex items-center gap-x-2">
-                <span
-                  className="w-3 h-3 rounded-full"
-                  style={{
-                    backgroundColor: label.color || "#000",
-                  }}
-                />
-                {label.name}
-              </span>
-            ),
-            onClick: () => handleOnSelect("labels", label.id),
-            isSelected: store.issue.filteredLabels.includes(label.id),
-          })),
-        },
-      ]}
-    />
-  );
-});
diff --git a/space/components/views/project-details.tsx b/space/components/views/project-details.tsx
index cd2658279..520def908 100644
--- a/space/components/views/project-details.tsx
+++ b/space/components/views/project-details.tsx
@@ -9,6 +9,7 @@ import { IssueCalendarView } from "components/issues/board-views/calendar";
 import { IssueSpreadsheetView } from "components/issues/board-views/spreadsheet";
 import { IssueGanttView } from "components/issues/board-views/gantt";
 import { IssuePeekOverview } from "components/issues/peek-overview";
+import { IssueAppliedFilters } from "components/issues/filters/applied-filters/root";
 // mobx store
 import { RootStore } from "store/root";
 import { useMobxStore } from "lib/mobx/store-provider";
@@ -71,7 +72,10 @@ export const ProjectDetailsView = observer(() => {
             </div>
           ) : (
             projectStore?.activeBoard && (
-              <>
+              <div className="relative w-full h-full overflow-hidden flex flex-col">
+                {/* applied filters */}
+                <IssueAppliedFilters />
+
                 {projectStore?.activeBoard === "list" && (
                   <div className="relative h-full w-full overflow-y-auto">
                     <IssueListView />
@@ -85,7 +89,7 @@ export const ProjectDetailsView = observer(() => {
                 {projectStore?.activeBoard === "calendar" && <IssueCalendarView />}
                 {projectStore?.activeBoard === "spreadsheet" && <IssueSpreadsheetView />}
                 {projectStore?.activeBoard === "gantt" && <IssueGanttView />}
-              </>
+              </div>
             )
           )}
         </>
diff --git a/space/layouts/project-layout.tsx b/space/layouts/project-layout.tsx
index 1a0b7899e..c8bdfd9a1 100644
--- a/space/layouts/project-layout.tsx
+++ b/space/layouts/project-layout.tsx
@@ -1,4 +1,3 @@
-import Link from "next/link";
 import Image from "next/image";
 
 // mobx
diff --git a/space/store/issue.ts b/space/store/issue.ts
index d47336984..02dd3cdd0 100644
--- a/space/store/issue.ts
+++ b/space/store/issue.ts
@@ -1,4 +1,4 @@
-import { observable, action, computed, makeObservable, runInAction, reaction } from "mobx";
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
 // services
 import IssueService from "services/issue.service";
 // store
diff --git a/space/store/issues/base-issue-filter.store.ts b/space/store/issues/base-issue-filter.store.ts
new file mode 100644
index 000000000..2cd2e3bc9
--- /dev/null
+++ b/space/store/issues/base-issue-filter.store.ts
@@ -0,0 +1,29 @@
+// types
+import { RootStore } from "store/root";
+
+export interface IIssueFilterBaseStore {
+  // helper methods
+  computedFilter(filters: any, filteredParams: any): any;
+}
+
+export class IssueFilterBaseStore implements IIssueFilterBaseStore {
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    // root store
+    this.rootStore = _rootStore;
+  }
+
+  // helper methods
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+}
diff --git a/space/store/issues/helpers.ts b/space/store/issues/helpers.ts
new file mode 100644
index 000000000..a862ca6e0
--- /dev/null
+++ b/space/store/issues/helpers.ts
@@ -0,0 +1,52 @@
+import { TIssueBoardKeys } from "types/issue";
+import { IIssueFilterOptions, TIssueParams } from "./types";
+
+export const isNil = (value: any) => {
+  if (value === undefined || value === null) return true;
+
+  return false;
+};
+
+export interface ILayoutDisplayFiltersOptions {
+  filters: (keyof IIssueFilterOptions)[];
+  display_properties: boolean | null;
+  display_filters: null;
+  extra_options: null;
+}
+
+export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
+  [pageType: string]: { [layoutType: string]: ILayoutDisplayFiltersOptions };
+} = {
+  issues: {
+    list: {
+      filters: ["priority", "state", "labels"],
+      display_properties: null,
+      display_filters: null,
+      extra_options: null,
+    },
+    kanban: {
+      filters: ["priority", "state", "labels"],
+      display_properties: null,
+      display_filters: null,
+      extra_options: null,
+    },
+  },
+};
+
+export const handleIssueQueryParamsByLayout = (
+  layout: TIssueBoardKeys | undefined,
+  viewType: "issues"
+): TIssueParams[] | null => {
+  const queryParams: TIssueParams[] = [];
+
+  if (!layout) return null;
+
+  const layoutOptions = ISSUE_DISPLAY_FILTERS_BY_LAYOUT[viewType][layout];
+
+  // add filters query params
+  layoutOptions.filters.forEach((option) => {
+    queryParams.push(option);
+  });
+
+  return queryParams;
+};
diff --git a/space/store/issues/issue-filters.store.ts b/space/store/issues/issue-filters.store.ts
new file mode 100644
index 000000000..f2408e290
--- /dev/null
+++ b/space/store/issues/issue-filters.store.ts
@@ -0,0 +1,106 @@
+import { action, makeObservable, observable, runInAction, computed } from "mobx";
+// types
+import { RootStore } from "store/root";
+import { IIssueFilterOptions, TIssueParams } from "./types";
+import { handleIssueQueryParamsByLayout } from "./helpers";
+import { IssueFilterBaseStore } from "./base-issue-filter.store";
+
+interface IFiltersOptions {
+  filters: IIssueFilterOptions;
+}
+
+export interface IIssuesFilterStore {
+  // observables
+  projectIssueFilters: { [projectId: string]: IFiltersOptions } | undefined;
+  // computed
+  issueFilters: IFiltersOptions | undefined;
+  appliedFilters: TIssueParams[] | undefined;
+  // helpers
+  issueDisplayFilters: (projectId: string) => IFiltersOptions | undefined;
+  // actions
+  updateFilters: (projectId: string, filters: IIssueFilterOptions) => Promise<IFiltersOptions>;
+}
+
+export class IssuesFilterStore extends IssueFilterBaseStore implements IIssuesFilterStore {
+  // observables
+  projectIssueFilters: { [projectId: string]: IFiltersOptions } | undefined = undefined;
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    super(_rootStore);
+
+    makeObservable(this, {
+      // observables
+      projectIssueFilters: observable.ref,
+      // computed
+      issueFilters: computed,
+      appliedFilters: computed,
+      // actions
+      updateFilters: action,
+    });
+    // root store
+    this.rootStore = _rootStore;
+  }
+
+  // helpers
+  issueDisplayFilters = (projectId: string) => {
+    if (!projectId) return undefined;
+    return this.projectIssueFilters?.[projectId] || undefined;
+  };
+
+  // actions
+
+  updateFilters = async (projectId: string, filters: IIssueFilterOptions) => {
+    try {
+      let _projectIssueFilters = { ...this.projectIssueFilters };
+      if (!_projectIssueFilters) _projectIssueFilters = {};
+      if (!_projectIssueFilters[projectId]) _projectIssueFilters[projectId] = { filters: {} };
+
+      const _filters = {
+        filters: { ..._projectIssueFilters[projectId].filters },
+      };
+
+      _filters.filters = { ..._filters.filters, ...filters };
+
+      _projectIssueFilters[projectId] = {
+        filters: _filters.filters,
+      };
+
+      runInAction(() => {
+        this.projectIssueFilters = _projectIssueFilters;
+      });
+
+      return _filters;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  get issueFilters() {
+    const projectId = this.rootStore.project.project?.id;
+    if (!projectId) return undefined;
+
+    const issueFilters = this.issueDisplayFilters(projectId);
+    if (!issueFilters) return undefined;
+
+    return issueFilters;
+  }
+
+  get appliedFilters() {
+    const userFilters = this.issueFilters;
+    const layout = this.rootStore.project?.activeBoard;
+    if (!userFilters || !layout) return undefined;
+
+    let filteredRouteParams: any = {
+      priority: userFilters?.filters?.priority || undefined,
+      state: userFilters?.filters?.state || undefined,
+      labels: userFilters?.filters?.labels || undefined,
+    };
+
+    const filteredParams = handleIssueQueryParamsByLayout(layout, "issues");
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    return filteredRouteParams;
+  }
+}
diff --git a/space/store/issues/types.ts b/space/store/issues/types.ts
new file mode 100644
index 000000000..d1de0a5ea
--- /dev/null
+++ b/space/store/issues/types.ts
@@ -0,0 +1,36 @@
+import { IIssue } from "types/issue";
+
+export type TIssueGroupByOptions = "state" | "priority" | "labels" | null;
+
+export type TIssueParams = "priority" | "state" | "labels";
+
+export interface IIssueFilterOptions {
+  state?: string[] | null;
+  labels?: string[] | null;
+  priority?: string[] | null;
+}
+
+// issues
+export interface IGroupedIssues {
+  [group_id: string]: string[];
+}
+
+export interface ISubGroupedIssues {
+  [sub_grouped_id: string]: {
+    [group_id: string]: string[];
+  };
+}
+
+export type TUnGroupedIssues = string[];
+
+export interface IIssueResponse {
+  [issue_id: string]: IIssue;
+}
+
+export type TLoader = "init-loader" | "mutation" | undefined;
+
+export interface ViewFlags {
+  enableQuickAdd: boolean;
+  enableIssueCreation: boolean;
+  enableInlineEditing: boolean;
+}
diff --git a/space/store/project.ts b/space/store/project.ts
index ddd589f9a..76b4d06cb 100644
--- a/space/store/project.ts
+++ b/space/store/project.ts
@@ -2,6 +2,7 @@
 import { observable, action, makeObservable, runInAction } from "mobx";
 // service
 import ProjectService from "services/project.service";
+import { TIssueBoardKeys } from "types/issue";
 // types
 import { IWorkspace, IProject, IProjectSettings } from "types/project";
 
@@ -12,9 +13,9 @@ export interface IProjectStore {
   project: IProject | null;
   deploySettings: IProjectSettings | null;
   viewOptions: any;
-  activeBoard: string | null;
+  activeBoard: TIssueBoardKeys | null;
   fetchProjectSettings: (workspace_slug: string, project_slug: string) => Promise<void>;
-  setActiveBoard: (value: string) => void;
+  setActiveBoard: (value: TIssueBoardKeys) => void;
 }
 
 class ProjectStore implements IProjectStore {
@@ -25,7 +26,7 @@ class ProjectStore implements IProjectStore {
   project: IProject | null = null;
   deploySettings: IProjectSettings | null = null;
   viewOptions: any = null;
-  activeBoard: string | null = null;
+  activeBoard: TIssueBoardKeys | null = null;
   // root store
   rootStore;
   // service
@@ -80,7 +81,7 @@ class ProjectStore implements IProjectStore {
     }
   };
 
-  setActiveBoard = (boardValue: string) => {
+  setActiveBoard = (boardValue: TIssueBoardKeys) => {
     this.activeBoard = boardValue;
   };
 }
diff --git a/space/store/root.ts b/space/store/root.ts
index 22b951d20..5a9e0bca1 100644
--- a/space/store/root.ts
+++ b/space/store/root.ts
@@ -6,6 +6,7 @@ import IssueStore, { IIssueStore } from "./issue";
 import ProjectStore, { IProjectStore } from "./project";
 import IssueDetailStore, { IIssueDetailStore } from "./issue_details";
 import { IMentionsStore, MentionsStore } from "./mentions.store";
+import { IIssuesFilterStore, IssuesFilterStore } from "./issues/issue-filters.store";
 
 enableStaticRendering(typeof window === "undefined");
 
@@ -15,6 +16,7 @@ export class RootStore {
   issueDetails: IIssueDetailStore;
   project: IProjectStore;
   mentionsStore: IMentionsStore;
+  issuesFilter: IIssuesFilterStore;
 
   constructor() {
     this.user = new UserStore(this);
@@ -22,5 +24,6 @@ export class RootStore {
     this.project = new ProjectStore(this);
     this.issueDetails = new IssueDetailStore(this);
     this.mentionsStore = new MentionsStore(this);
+    this.issuesFilter = new IssuesFilterStore(this);
   }
 }
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index 316d88144..4b00361b0 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -1,4 +1,6 @@
+import { memo } from "react";
 import { Draggable } from "@hello-pangea/dnd";
+import isEqual from "lodash/isEqual";
 // components
 import { KanBanProperties } from "./properties";
 // ui
@@ -21,7 +23,7 @@ interface IssueBlockProps {
   isReadOnly: boolean;
 }
 
-export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
+export const KanBanIssueMemoBlock: React.FC<IssueBlockProps> = (props) => {
   const {
     sub_group_id,
     columnId,
@@ -63,30 +65,36 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
             {...provided.draggableProps}
             {...provided.dragHandleProps}
             ref={provided.innerRef}
-            onClick={handleIssuePeekOverview}
           >
             {issue.tempId !== undefined && (
               <div className="absolute top-0 left-0 w-full h-full animate-pulse bg-custom-background-100/20 z-[99999]" />
             )}
-            <div className="absolute top-3 right-3 hidden group-hover/kanban-block:block">
-              {quickActions(
-                !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
-                !columnId && columnId === "null" ? null : columnId,
-                issue
-              )}
-            </div>
             <div
               className={`text-sm rounded py-2 px-3 shadow-custom-shadow-2xs space-y-2 border-[0.5px] border-custom-border-200 transition-all bg-custom-background-100 ${
                 isDragDisabled ? "" : "hover:cursor-grab"
               } ${snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`}`}
             >
               {displayProperties && displayProperties?.key && (
-                <div className="text-xs line-clamp-1 text-custom-text-300">
-                  {issue.project_detail.identifier}-{issue.sequence_id}
+                <div className="relative">
+                  <div className="text-xs line-clamp-1 text-custom-text-300">
+                    {issue.project_detail.identifier}-{issue.sequence_id}
+                  </div>
+                  <div className="absolute -top-1 right-0 hidden group-hover/kanban-block:block">
+                    {quickActions(
+                      !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+                      !columnId && columnId === "null" ? null : columnId,
+                      issue
+                    )}
+                  </div>
                 </div>
               )}
               <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-                <div className="line-clamp-2 text-sm font-medium text-custom-text-100">{issue.name}</div>
+                <div
+                  className="line-clamp-2 text-sm font-medium text-custom-text-100"
+                  onClick={handleIssuePeekOverview}
+                >
+                  {issue.name}
+                </div>
               </Tooltip>
               <div>
                 <KanBanProperties
@@ -106,3 +114,10 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
     </>
   );
 };
+
+const validateMemo = (prevProps: IssueBlockProps, nextProps: IssueBlockProps) => {
+  if (prevProps.issue != nextProps.issue) return true;
+  return false;
+};
+
+export const KanbanIssueBlock = memo(KanBanIssueMemoBlock, validateMemo);
diff --git a/web/components/issues/modal.tsx b/web/components/issues/modal.tsx
index 3d5780c06..65ae1b12f 100644
--- a/web/components/issues/modal.tsx
+++ b/web/components/issues/modal.tsx
@@ -240,7 +240,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
         if (handleSubmit) {
           await handleSubmit(res);
         } else {
-          currentIssueStore.fetchIssues(workspaceSlug, dataIdToUpdate, "mutation", viewId);
+          if (viewId) currentIssueStore.fetchIssues(workspaceSlug, dataIdToUpdate, "mutation", viewId);
 
           if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res, payload.cycle);
           if (payload.module && payload.module !== "") await addIssueToModule(res, payload.module);
diff --git a/web/components/profile/profile-issues.tsx b/web/components/profile/profile-issues.tsx
index 11974caaa..cfb8cdbe6 100644
--- a/web/components/profile/profile-issues.tsx
+++ b/web/components/profile/profile-issues.tsx
@@ -16,6 +16,8 @@ interface IProfileIssuesPage {
 }
 
 export const ProfileIssuesPage = observer((props: IProfileIssuesPage) => {
+  const { type } = props;
+
   const router = useRouter();
   const { workspaceSlug, userId } = router.query as {
     workspaceSlug: string;
@@ -28,11 +30,11 @@ export const ProfileIssuesPage = observer((props: IProfileIssuesPage) => {
   }: RootStore = useMobxStore();
 
   useSWR(
-    workspaceSlug && userId ? `CURRENT_WORKSPACE_PROFILE_ISSUES_${workspaceSlug}_${userId}_${props.type}` : null,
+    workspaceSlug && userId ? `CURRENT_WORKSPACE_PROFILE_ISSUES_${workspaceSlug}_${userId}_${type}` : null,
     async () => {
       if (workspaceSlug && userId) {
         await fetchFilters(workspaceSlug);
-        await fetchIssues(workspaceSlug, userId, getIssues ? "mutation" : "init-loader", props.type);
+        await fetchIssues(workspaceSlug, userId, getIssues ? "mutation" : "init-loader", type);
       }
     }
   );
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx b/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
index a2c09dd98..cd2eb09bc 100644
--- a/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
+++ b/web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
@@ -1,5 +1,4 @@
 import React, { ReactElement } from "react";
-import { observer } from "mobx-react-lite";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 import { ProfileAuthWrapper } from "layouts/user-profile-layout";
@@ -9,7 +8,7 @@ import { UserProfileHeader } from "components/headers";
 import { NextPageWithLayout } from "types/app";
 import { ProfileIssuesPage } from "components/profile/profile-issues";
 
-const ProfileAssignedIssuesPage: NextPageWithLayout = observer(() => <ProfileIssuesPage type="assigned" />);
+const ProfileAssignedIssuesPage: NextPageWithLayout = () => <ProfileIssuesPage type="assigned" />;
 
 ProfileAssignedIssuesPage.getLayout = function getLayout(page: ReactElement) {
   return (
diff --git a/web/store/issues/base-issue-kanban-helper.store.ts b/web/store/issues/base-issue-kanban-helper.store.ts
index 62b25fe22..e21c85e84 100644
--- a/web/store/issues/base-issue-kanban-helper.store.ts
+++ b/web/store/issues/base-issue-kanban-helper.store.ts
@@ -118,8 +118,6 @@ export class KanBanHelpers implements IKanBanHelpers {
 
       const [removed] = sourceIssues.splice(source.index, 1);
 
-      console.log("removed", removed);
-
       if (removed) {
         if (viewId) store?.removeIssue(workspaceSlug, projectId, removed, viewId);
         else store?.removeIssue(workspaceSlug, projectId, removed);
diff --git a/web/store/issues/profile/issue.store.ts b/web/store/issues/profile/issue.store.ts
index 37b9f3085..eb02796c6 100644
--- a/web/store/issues/profile/issue.store.ts
+++ b/web/store/issues/profile/issue.store.ts
@@ -28,7 +28,6 @@ export interface IProfileIssuesStore {
     workspaceSlug: string,
     userId: string,
     loadType: TLoader,
-    _?: string,
     type?: "assigned" | "created" | "subscribed"
   ) => Promise<IIssueResponse>;
   createIssue: (workspaceSlug: string, userId: string, data: Partial<IIssue>) => Promise<IIssue | undefined>;
@@ -151,7 +150,6 @@ export class ProfileIssuesStore extends IssueBaseStore implements IProfileIssues
     workspaceSlug: string,
     userId: string,
     loadType: TLoader = "init-loader",
-    _?: string,
     type?: "assigned" | "created" | "subscribed"
   ) => {
     try {