From 696436fb62270cf7063740565286d4ed87b93982 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 12 Sep 2023 11:43:49 +0530
Subject: [PATCH 1/2] chore: update view_props types

---
 web/services/issues.service.ts  |  1 -
 web/services/modules.service.ts |  2 +-
 web/types/index.d.ts            |  1 +
 web/types/issues.d.ts           | 53 +++---------------------------
 web/types/projects.d.ts         | 13 ++------
 web/types/view-props.d.ts       | 57 +++++++++++++++++++++++++++++++++
 6 files changed, 66 insertions(+), 61 deletions(-)
 create mode 100644 web/types/view-props.d.ts

diff --git a/web/services/issues.service.ts b/web/services/issues.service.ts
index af5d722e3bf..8362ab2615b 100644
--- a/web/services/issues.service.ts
+++ b/web/services/issues.service.ts
@@ -8,7 +8,6 @@ import type {
   IIssueActivity,
   IIssueComment,
   IIssueLabels,
-  IIssueViewOptions,
   ISubIssueResponse,
 } from "types";
 
diff --git a/web/services/modules.service.ts b/web/services/modules.service.ts
index 0e3b5cfe29e..8981643664e 100644
--- a/web/services/modules.service.ts
+++ b/web/services/modules.service.ts
@@ -3,7 +3,7 @@ import APIService from "services/api.service";
 import trackEventServices from "./track-event.service";
 
 // types
-import type { IIssueViewOptions, IModule, IIssue, ICurrentUserResponse } from "types";
+import type { IModule, IIssue, ICurrentUserResponse } from "types";
 
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
diff --git a/web/types/index.d.ts b/web/types/index.d.ts
index dbd3148269d..b6811a287f8 100644
--- a/web/types/index.d.ts
+++ b/web/types/index.d.ts
@@ -18,6 +18,7 @@ export * from "./calendar";
 export * from "./notifications";
 export * from "./waitlist";
 export * from "./reaction";
+export * from "./view-props";
 
 export type NestedKeyOf<ObjectType extends object> = {
   [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object
diff --git a/web/types/issues.d.ts b/web/types/issues.d.ts
index cdc0a391ab2..05fbb05aced 100644
--- a/web/types/issues.d.ts
+++ b/web/types/issues.d.ts
@@ -11,6 +11,10 @@ import type {
   IStateLite,
   TStateGroups,
   Properties,
+  IIssueFilterOptions,
+  TIssueGroupByOptions,
+  TIssueViewOptions,
+  TIssueOrderByOptions,
 } from "types";
 
 export interface IIssueCycle {
@@ -213,55 +217,6 @@ export interface IIssueLite {
   workspace__slug: string;
 }
 
-export interface IIssueFilterOptions {
-  type: "active" | "backlog" | null;
-  assignees: string[] | null;
-  start_date: string[] | null;
-  target_date: string[] | null;
-  state: string[] | null;
-  state_group: TStateGroups[] | null;
-  subscriber: string[] | null;
-  labels: string[] | null;
-  priority: string[] | null;
-  created_by: string[] | null;
-}
-
-export type TIssueViewOptions = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt_chart";
-
-export type TIssueGroupByOptions =
-  | "state"
-  | "priority"
-  | "labels"
-  | "created_by"
-  | "state_detail.group"
-  | "project"
-  | "assignees"
-  | null;
-
-export type TIssueOrderByOptions =
-  | "-created_at"
-  | "-updated_at"
-  | "priority"
-  | "sort_order"
-  | "state__name"
-  | "-state__name"
-  | "assignees__name"
-  | "-assignees__name"
-  | "labels__name"
-  | "-labels__name"
-  | "target_date"
-  | "-target_date"
-  | "estimate__point"
-  | "-estimate__point"
-  | "start_date"
-  | "-start_date";
-
-export interface IIssueViewOptions {
-  group_by: TIssueGroupByOptions;
-  order_by: TIssueOrderByOptions;
-  filters: IIssueFilterOptions;
-}
-
 export interface IIssueAttachment {
   asset: string;
   attributes: {
diff --git a/web/types/projects.d.ts b/web/types/projects.d.ts
index 590fe5023e2..44426acd633 100644
--- a/web/types/projects.d.ts
+++ b/web/types/projects.d.ts
@@ -8,6 +8,7 @@ import type {
   TIssueOrderByOptions,
   TIssueViewOptions,
   TStateGroups,
+  IProjectViewProps,
 } from ".";
 
 export interface IProject {
@@ -66,14 +67,6 @@ export interface IProjectLite {
   identifier: string;
 }
 
-type ProjectViewTheme = {
-  issueView: TIssueViewOptions;
-  groupByProperty: TIssueGroupByOptions;
-  orderBy: TIssueOrderByOptions;
-  calendarDateRange: string;
-  filters: IIssueFilterOptions;
-};
-
 type ProjectPreferences = {
   pages: {
     block_display: boolean;
@@ -90,8 +83,8 @@ export interface IProjectMember {
 
   preferences: ProjectPreferences;
 
-  view_props: ProjectViewTheme;
-  default_props: ProjectViewTheme;
+  view_props: IProjectViewProps;
+  default_props: IProjectViewProps;
 
   created_at: Date;
   updated_at: Date;
diff --git a/web/types/view-props.d.ts b/web/types/view-props.d.ts
new file mode 100644
index 00000000000..0514fe52170
--- /dev/null
+++ b/web/types/view-props.d.ts
@@ -0,0 +1,57 @@
+export type TIssueViewOptions = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt_chart";
+
+export type TIssueGroupByOptions =
+  | "state"
+  | "priority"
+  | "labels"
+  | "created_by"
+  | "state_detail.group"
+  | "project"
+  | "assignees"
+  | null;
+
+export type TIssueOrderByOptions =
+  | "-created_at"
+  | "-updated_at"
+  | "priority"
+  | "sort_order"
+  | "state__name"
+  | "-state__name"
+  | "assignees__name"
+  | "-assignees__name"
+  | "labels__name"
+  | "-labels__name"
+  | "target_date"
+  | "-target_date"
+  | "estimate__point"
+  | "-estimate__point"
+  | "start_date"
+  | "-start_date";
+
+export interface IIssueFilterOptions {
+  assignees: string[] | null;
+  created_by: string[] | null;
+  labels: string[] | null;
+  priority: string[] | null;
+  start_date: string[] | null;
+  state: string[] | null;
+  state_group: TStateGroups[] | null;
+  subscriber: string[] | null;
+  target_date: string[] | null;
+}
+
+export interface IIssueDisplayFilterOptions {
+  calendar_date_range?: string;
+  group_by?: TIssueGroupByOptions;
+  layout?: TIssueViewOptions;
+  order_by?: TIssueOrderByOptions;
+  show_empty_groups?: boolean;
+  start_target_date?: boolean;
+  sub_issue?: boolean;
+  type?: "active" | "backlog" | null;
+}
+
+export interface IProjectViewProps {
+  filters: IIssueFilterOptions;
+  display_filters: IIssueDisplayFilterOptions;
+}

From a9e0c7e49de87b80b2889aac6d6dbd8e7c420fb0 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 12 Sep 2023 22:16:01 +0530
Subject: [PATCH 2/2] refactor: view props structure

---
 .../core/filters/issues-view-filter.tsx       | 145 +++----
 .../core/modals/bulk-delete-issues-modal.tsx  |   6 +-
 web/components/core/views/all-views.tsx       |  18 +-
 .../core/views/board-view/all-boards.tsx      |  17 +-
 .../core/views/board-view/board-header.tsx    |  24 +-
 .../core/views/board-view/single-board.tsx    |  16 +-
 .../core/views/board-view/single-issue.tsx    |  20 +-
 .../core/views/calendar-view/calendar.tsx     |  20 +-
 web/components/core/views/issues-view.tsx     |  69 ++--
 .../core/views/list-view/all-lists.tsx        |   9 +-
 .../core/views/list-view/single-issue.tsx     |   9 +-
 .../core/views/list-view/single-list.tsx      |  12 +-
 .../spreadsheet-view/spreadsheet-columns.tsx  |   6 +-
 .../gantt-chart/cycle-issues-layout.tsx       |   4 +-
 web/components/issues/delete-issue-modal.tsx  |   6 +-
 web/components/issues/gantt-chart/layout.tsx  |   4 +-
 web/components/issues/modal.tsx               |  12 +-
 .../my-issues/my-issues-view-options.tsx      | 192 ++++-----
 .../issues/my-issues/my-issues-view.tsx       |  43 +-
 .../issues/view-select/due-date.tsx           |   6 +-
 .../issues/view-select/start-date.tsx         |   6 +-
 .../gantt-chart/module-issues-layout.tsx      |   4 +-
 .../profile/profile-issues-view-options.tsx   | 193 ++++-----
 .../profile/profile-issues-view.tsx           |  52 ++-
 web/contexts/issue-view.context.tsx           | 375 ++++--------------
 web/contexts/profile-issues-context.tsx       | 199 +++-------
 web/hooks/gantt-chart/cycle-issues-view.tsx   |   8 +-
 web/hooks/gantt-chart/issue-view.tsx          |   8 +-
 web/hooks/gantt-chart/module-issues-view.tsx  |   8 +-
 web/hooks/my-issues/use-my-issues-filter.tsx  | 127 +++---
 web/hooks/my-issues/use-my-issues.tsx         |  12 +-
 web/hooks/use-calendar-issues-view.tsx        |  16 +-
 web/hooks/use-issues-view.tsx                 |  47 +--
 web/hooks/use-profile-issues.tsx              |  38 +-
 web/hooks/use-spreadsheet-issues-view.tsx     |  16 +-
 web/pages/[workspaceSlug]/me/my-issues.tsx    |   1 -
 .../[projectId]/archived-issues/index.tsx     |   4 -
 web/services/project.service.ts               |   6 +-
 web/types/issues.d.ts                         |   6 +-
 web/types/view-props.d.ts                     |  24 +-
 web/types/workspace.d.ts                      |  10 +-
 41 files changed, 706 insertions(+), 1092 deletions(-)

diff --git a/web/components/core/filters/issues-view-filter.tsx b/web/components/core/filters/issues-view-filter.tsx
index 1266bd5a355..6354625dcac 100644
--- a/web/components/core/filters/issues-view-filter.tsx
+++ b/web/components/core/filters/issues-view-filter.tsx
@@ -58,16 +58,8 @@ export const IssuesFilterView: React.FC = () => {
   const isArchivedIssues = router.pathname.includes("archived-issues");
 
   const {
-    issueView,
-    setIssueView,
-    groupByProperty,
-    setGroupByProperty,
-    orderBy,
-    setOrderBy,
-    showEmptyGroups,
-    showSubIssues,
-    setShowSubIssues,
-    setShowEmptyGroups,
+    displayFilters,
+    setDisplayFilters,
     filters,
     setFilters,
     resetFilterToDefault,
@@ -96,11 +88,11 @@ export const IssuesFilterView: React.FC = () => {
               <button
                 type="button"
                 className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
-                  issueView === option.type
+                  displayFilters.layout === option.type
                     ? "bg-custom-sidebar-background-80"
                     : "text-custom-sidebar-text-200"
                 }`}
-                onClick={() => setIssueView(option.type)}
+                onClick={() => setDisplayFilters({ layout: option.type })}
               >
                 <option.Icon
                   sx={{
@@ -174,28 +166,30 @@ export const IssuesFilterView: React.FC = () => {
               <Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-200 bg-custom-background-90 p-3 shadow-lg">
                 <div className="relative divide-y-2 divide-custom-border-200">
                   <div className="space-y-4 pb-3 text-xs">
-                    {issueView !== "calendar" &&
-                      issueView !== "spreadsheet" &&
-                      issueView !== "gantt_chart" && (
+                    {displayFilters.layout !== "calendar" &&
+                      displayFilters.layout !== "spreadsheet" &&
+                      displayFilters.layout !== "gantt_chart" && (
                         <div className="flex items-center justify-between">
                           <h4 className="text-custom-text-200">Group by</h4>
                           <div className="w-28">
                             <CustomMenu
                               label={
-                                GROUP_BY_OPTIONS.find((option) => option.key === groupByProperty)
-                                  ?.name ?? "Select"
+                                GROUP_BY_OPTIONS.find(
+                                  (option) => option.key === displayFilters.group_by
+                                )?.name ?? "Select"
                               }
                               className="!w-full"
                               buttonClassName="w-full"
                             >
                               {GROUP_BY_OPTIONS.map((option) => {
-                                if (issueView === "kanban" && option.key === null) return null;
+                                if (displayFilters.layout === "kanban" && option.key === null)
+                                  return null;
                                 if (option.key === "project") return null;
 
                                 return (
                                   <CustomMenu.MenuItem
                                     key={option.key}
-                                    onClick={() => setGroupByProperty(option.key)}
+                                    onClick={() => setDisplayFilters({ group_by: option.key })}
                                   >
                                     {option.name}
                                   </CustomMenu.MenuItem>
@@ -205,41 +199,45 @@ export const IssuesFilterView: React.FC = () => {
                           </div>
                         </div>
                       )}
-                    {issueView !== "calendar" && issueView !== "spreadsheet" && (
-                      <div className="flex items-center justify-between">
-                        <h4 className="text-custom-text-200">Order by</h4>
-                        <div className="w-28">
-                          <CustomMenu
-                            label={
-                              ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
-                              "Select"
-                            }
-                            className="!w-full"
-                            buttonClassName="w-full"
-                          >
-                            {ORDER_BY_OPTIONS.map((option) =>
-                              groupByProperty === "priority" && option.key === "priority" ? null : (
-                                <CustomMenu.MenuItem
-                                  key={option.key}
-                                  onClick={() => {
-                                    setOrderBy(option.key);
-                                  }}
-                                >
-                                  {option.name}
-                                </CustomMenu.MenuItem>
-                              )
-                            )}
-                          </CustomMenu>
+                    {displayFilters.layout !== "calendar" &&
+                      displayFilters.layout !== "spreadsheet" && (
+                        <div className="flex items-center justify-between">
+                          <h4 className="text-custom-text-200">Order by</h4>
+                          <div className="w-28">
+                            <CustomMenu
+                              label={
+                                ORDER_BY_OPTIONS.find(
+                                  (option) => option.key === displayFilters.order_by
+                                )?.name ?? "Select"
+                              }
+                              className="!w-full"
+                              buttonClassName="w-full"
+                            >
+                              {ORDER_BY_OPTIONS.map((option) =>
+                                displayFilters.group_by === "priority" &&
+                                option.key === "priority" ? null : (
+                                  <CustomMenu.MenuItem
+                                    key={option.key}
+                                    onClick={() => {
+                                      setDisplayFilters({ order_by: option.key });
+                                    }}
+                                  >
+                                    {option.name}
+                                  </CustomMenu.MenuItem>
+                                )
+                              )}
+                            </CustomMenu>
+                          </div>
                         </div>
-                      </div>
-                    )}
+                      )}
                     <div className="flex items-center justify-between">
                       <h4 className="text-custom-text-200">Issue type</h4>
                       <div className="w-28">
                         <CustomMenu
                           label={
-                            FILTER_ISSUE_OPTIONS.find((option) => option.key === filters.type)
-                              ?.name ?? "Select"
+                            FILTER_ISSUE_OPTIONS.find(
+                              (option) => option.key === displayFilters.type
+                            )?.name ?? "Select"
                           }
                           className="!w-full"
                           buttonClassName="w-full"
@@ -248,7 +246,7 @@ export const IssuesFilterView: React.FC = () => {
                             <CustomMenu.MenuItem
                               key={option.key}
                               onClick={() =>
-                                setFilters({
+                                setDisplayFilters({
                                   type: option.key,
                                 })
                               }
@@ -260,33 +258,40 @@ export const IssuesFilterView: React.FC = () => {
                       </div>
                     </div>
 
-                    {issueView !== "calendar" && issueView !== "spreadsheet" && (
-                      <div className="flex items-center justify-between">
-                        <h4 className="text-custom-text-200">Show sub-issues</h4>
-                        <div className="w-28">
-                          <ToggleSwitch
-                            value={showSubIssues}
-                            onChange={() => setShowSubIssues(!showSubIssues)}
-                          />
+                    {displayFilters.layout !== "calendar" &&
+                      displayFilters.layout !== "spreadsheet" && (
+                        <div className="flex items-center justify-between">
+                          <h4 className="text-custom-text-200">Show sub-issues</h4>
+                          <div className="w-28">
+                            <ToggleSwitch
+                              value={displayFilters.sub_issue ?? true}
+                              onChange={() =>
+                                setDisplayFilters({ sub_issue: !displayFilters.sub_issue })
+                              }
+                            />
+                          </div>
                         </div>
-                      </div>
-                    )}
-                    {issueView !== "calendar" &&
-                      issueView !== "spreadsheet" &&
-                      issueView !== "gantt_chart" && (
+                      )}
+                    {displayFilters.layout !== "calendar" &&
+                      displayFilters.layout !== "spreadsheet" &&
+                      displayFilters.layout !== "gantt_chart" && (
                         <div className="flex items-center justify-between">
                           <h4 className="text-custom-text-200">Show empty states</h4>
                           <div className="w-28">
                             <ToggleSwitch
-                              value={showEmptyGroups}
-                              onChange={() => setShowEmptyGroups(!showEmptyGroups)}
+                              value={displayFilters.show_empty_groups ?? true}
+                              onChange={() =>
+                                setDisplayFilters({
+                                  show_empty_groups: !displayFilters.show_empty_groups,
+                                })
+                              }
                             />
                           </div>
                         </div>
                       )}
-                    {issueView !== "calendar" &&
-                      issueView !== "spreadsheet" &&
-                      issueView !== "gantt_chart" && (
+                    {displayFilters.layout !== "calendar" &&
+                      displayFilters.layout !== "spreadsheet" &&
+                      displayFilters.layout !== "gantt_chart" && (
                         <div className="relative flex justify-end gap-x-3">
                           <button type="button" onClick={() => resetFilterToDefault()}>
                             Reset to default
@@ -302,7 +307,7 @@ export const IssuesFilterView: React.FC = () => {
                       )}
                   </div>
 
-                  {issueView !== "gantt_chart" && (
+                  {displayFilters.layout !== "gantt_chart" && (
                     <div className="space-y-2 py-3">
                       <h4 className="text-sm text-custom-text-200">Display Properties</h4>
                       <div className="flex flex-wrap items-center gap-2 text-custom-text-200">
@@ -310,7 +315,7 @@ export const IssuesFilterView: React.FC = () => {
                           if (key === "estimate" && !isEstimateActive) return null;
 
                           if (
-                            issueView === "spreadsheet" &&
+                            displayFilters.layout === "spreadsheet" &&
                             (key === "attachment_count" ||
                               key === "link" ||
                               key === "sub_issue_count")
@@ -318,7 +323,7 @@ export const IssuesFilterView: React.FC = () => {
                             return null;
 
                           if (
-                            issueView !== "spreadsheet" &&
+                            displayFilters.layout !== "spreadsheet" &&
                             (key === "created_on" || key === "updated_on")
                           )
                             return null;
diff --git a/web/components/core/modals/bulk-delete-issues-modal.tsx b/web/components/core/modals/bulk-delete-issues-modal.tsx
index 59e7c8a84db..375e155a414 100644
--- a/web/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/web/components/core/modals/bulk-delete-issues-modal.tsx
@@ -58,7 +58,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
   );
 
   const { setToastAlert } = useToast();
-  const { issueView, params } = useIssuesView();
+  const { displayFilters, params } = useIssuesView();
   const { params: calendarParams } = useCalendarIssuesView();
   const { order_by, group_by, ...viewGanttParams } = params;
 
@@ -126,8 +126,8 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
           message: "Issues deleted successfully!",
         });
 
-        if (issueView === "calendar") mutate(calendarFetchKey);
-        else if (issueView === "gantt_chart") mutate(ganttFetchKey);
+        if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
+        else if (displayFilters.layout === "gantt_chart") mutate(ganttFetchKey);
         else {
           if (cycleId) {
             mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params));
diff --git a/web/components/core/views/all-views.tsx b/web/components/core/views/all-views.tsx
index eb54ccb2ace..3b95ed86309 100644
--- a/web/components/core/views/all-views.tsx
+++ b/web/components/core/views/all-views.tsx
@@ -80,7 +80,7 @@ export const AllViews: React.FC<Props> = ({
   const { user } = useUser();
   const { memberRole } = useProjectMyMembership();
 
-  const { groupedIssues, isEmpty, issueView } = viewProps;
+  const { groupedIssues, isEmpty, displayFilters } = viewProps;
 
   const { data: stateGroups } = useSWR(
     workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
@@ -117,11 +117,11 @@ export const AllViews: React.FC<Props> = ({
       </StrictModeDroppable>
       {groupedIssues ? (
         !isEmpty ||
-        issueView === "kanban" ||
-        issueView === "calendar" ||
-        issueView === "gantt_chart" ? (
+        displayFilters?.layout === "kanban" ||
+        displayFilters?.layout === "calendar" ||
+        displayFilters?.layout === "gantt_chart" ? (
           <>
-            {issueView === "list" ? (
+            {displayFilters?.layout === "list" ? (
               <AllLists
                 states={states}
                 addIssueToGroup={addIssueToGroup}
@@ -134,7 +134,7 @@ export const AllViews: React.FC<Props> = ({
                 userAuth={memberRole}
                 viewProps={viewProps}
               />
-            ) : issueView === "kanban" ? (
+            ) : displayFilters?.layout === "kanban" ? (
               <AllBoards
                 addIssueToGroup={addIssueToGroup}
                 disableUserActions={disableUserActions}
@@ -149,7 +149,7 @@ export const AllViews: React.FC<Props> = ({
                 userAuth={memberRole}
                 viewProps={viewProps}
               />
-            ) : issueView === "calendar" ? (
+            ) : displayFilters?.layout === "calendar" ? (
               <CalendarView
                 handleIssueAction={handleIssueAction}
                 addIssueToDate={addIssueToDate}
@@ -157,7 +157,7 @@ export const AllViews: React.FC<Props> = ({
                 user={user}
                 userAuth={memberRole}
               />
-            ) : issueView === "spreadsheet" ? (
+            ) : displayFilters?.layout === "spreadsheet" ? (
               <SpreadsheetView
                 handleIssueAction={handleIssueAction}
                 openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
@@ -166,7 +166,7 @@ export const AllViews: React.FC<Props> = ({
                 userAuth={memberRole}
               />
             ) : (
-              issueView === "gantt_chart" && <GanttChartView />
+              displayFilters?.layout === "gantt_chart" && <GanttChartView />
             )}
           </>
         ) : router.pathname.includes("archived-issues") ? (
diff --git a/web/components/core/views/board-view/all-boards.tsx b/web/components/core/views/board-view/all-boards.tsx
index ea0f64ace0b..0d5a4534e72 100644
--- a/web/components/core/views/board-view/all-boards.tsx
+++ b/web/components/core/views/board-view/all-boards.tsx
@@ -36,7 +36,7 @@ export const AllBoards: React.FC<Props> = ({
   userAuth,
   viewProps,
 }) => {
-  const { groupByProperty: selectedGroup, groupedIssues, showEmptyGroups } = viewProps;
+  const { displayFilters, groupedIssues } = viewProps;
 
   return (
     <>
@@ -44,9 +44,12 @@ export const AllBoards: React.FC<Props> = ({
         <div className="horizontal-scroll-enable flex h-full gap-x-4 p-8">
           {Object.keys(groupedIssues).map((singleGroup, index) => {
             const currentState =
-              selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;
+              displayFilters?.group_by === "state"
+                ? states?.find((s) => s.id === singleGroup)
+                : null;
 
-            if (!showEmptyGroups && groupedIssues[singleGroup].length === 0) return null;
+            if (!displayFilters?.show_empty_groups && groupedIssues[singleGroup].length === 0)
+              return null;
 
             return (
               <SingleBoard
@@ -67,13 +70,15 @@ export const AllBoards: React.FC<Props> = ({
               />
             );
           })}
-          {!showEmptyGroups && (
+          {!displayFilters?.show_empty_groups && (
             <div className="h-full w-96 flex-shrink-0 space-y-2 p-1">
               <h2 className="text-lg font-semibold">Hidden groups</h2>
               <div className="space-y-3">
                 {Object.keys(groupedIssues).map((singleGroup, index) => {
                   const currentState =
-                    selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;
+                    displayFilters?.group_by === "state"
+                      ? states?.find((s) => s.id === singleGroup)
+                      : null;
 
                   if (groupedIssues[singleGroup].length === 0)
                     return (
@@ -91,7 +96,7 @@ export const AllBoards: React.FC<Props> = ({
                             />
                           )}
                           <h4 className="text-sm capitalize">
-                            {selectedGroup === "state"
+                            {displayFilters?.group_by === "state"
                               ? addSpaceIfCamelCase(currentState?.name ?? "")
                               : addSpaceIfCamelCase(singleGroup)}
                           </h4>
diff --git a/web/components/core/views/board-view/board-header.tsx b/web/components/core/views/board-view/board-header.tsx
index 144bdb826f8..1cbfdc81a98 100644
--- a/web/components/core/views/board-view/board-header.tsx
+++ b/web/components/core/views/board-view/board-header.tsx
@@ -48,22 +48,28 @@ export const BoardHeader: React.FC<Props> = ({
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { groupedIssues, groupByProperty: selectedGroup } = viewProps;
+  const { displayFilters, groupedIssues } = viewProps;
+
+  console.log("dF", displayFilters);
 
   const { data: issueLabels } = useSWR(
-    workspaceSlug && projectId && selectedGroup === "labels"
+    workspaceSlug && projectId && displayFilters?.group_by === "labels"
       ? PROJECT_ISSUE_LABELS(projectId.toString())
       : null,
-    workspaceSlug && projectId && selectedGroup === "labels"
+    workspaceSlug && projectId && displayFilters?.group_by === "labels"
       ? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString())
       : null
   );
 
   const { data: members } = useSWR(
-    workspaceSlug && projectId && (selectedGroup === "created_by" || selectedGroup === "assignees")
+    workspaceSlug &&
+      projectId &&
+      (displayFilters?.group_by === "created_by" || displayFilters?.group_by === "assignees")
       ? PROJECT_MEMBERS(projectId.toString())
       : null,
-    workspaceSlug && projectId && (selectedGroup === "created_by" || selectedGroup === "assignees")
+    workspaceSlug &&
+      projectId &&
+      (displayFilters?.group_by === "created_by" || displayFilters?.group_by === "assignees")
       ? () => projectService.projectMembers(workspaceSlug.toString(), projectId.toString())
       : null
   );
@@ -73,7 +79,7 @@ export const BoardHeader: React.FC<Props> = ({
   const getGroupTitle = () => {
     let title = addSpaceIfCamelCase(groupTitle);
 
-    switch (selectedGroup) {
+    switch (displayFilters?.group_by) {
       case "state":
         title = addSpaceIfCamelCase(currentState?.name ?? "");
         break;
@@ -97,7 +103,7 @@ export const BoardHeader: React.FC<Props> = ({
   const getGroupIcon = () => {
     let icon;
 
-    switch (selectedGroup) {
+    switch (displayFilters?.group_by) {
       case "state":
         icon = currentState && (
           <StateGroupIcon
@@ -167,7 +173,7 @@ export const BoardHeader: React.FC<Props> = ({
           <span className="flex items-center">{getGroupIcon()}</span>
           <h2
             className={`text-lg font-semibold truncate ${
-              selectedGroup === "created_by" ? "" : "capitalize"
+              displayFilters?.group_by === "created_by" ? "" : "capitalize"
             }`}
             style={{
               writingMode: isCollapsed ? "horizontal-tb" : "vertical-rl",
@@ -198,7 +204,7 @@ export const BoardHeader: React.FC<Props> = ({
             <Icon iconName="open_in_full" className="text-base font-medium text-custom-text-900" />
           )}
         </button>
-        {!disableAddIssue && !disableUserActions && selectedGroup !== "created_by" && (
+        {!disableAddIssue && !disableUserActions && displayFilters?.group_by !== "created_by" && (
           <button
             type="button"
             className="grid h-7 w-7 place-items-center rounded p-1 text-custom-text-200 outline-none duration-300 hover:bg-custom-background-80"
diff --git a/web/components/core/views/board-view/single-board.tsx b/web/components/core/views/board-view/single-board.tsx
index 7ba70c97b46..fcc3a56bfe4 100644
--- a/web/components/core/views/board-view/single-board.tsx
+++ b/web/components/core/views/board-view/single-board.tsx
@@ -50,7 +50,7 @@ export const SingleBoard: React.FC<Props> = ({
   // collapse/expand
   const [isCollapsed, setIsCollapsed] = useState(true);
 
-  const { groupedIssues, groupByProperty: selectedGroup, orderBy, properties } = viewProps;
+  const { displayFilters, groupedIssues, properties } = viewProps;
 
   const router = useRouter();
   const { cycleId, moduleId } = router.query;
@@ -80,14 +80,14 @@ export const SingleBoard: React.FC<Props> = ({
           {(provided, snapshot) => (
             <div
               className={`relative h-full ${
-                orderBy !== "sort_order" && snapshot.isDraggingOver
+                displayFilters?.order_by !== "sort_order" && snapshot.isDraggingOver
                   ? "bg-custom-background-100/20"
                   : ""
               } ${!isCollapsed ? "hidden" : "flex flex-col"}`}
               ref={provided.innerRef}
               {...provided.droppableProps}
             >
-              {orderBy !== "sort_order" && (
+              {displayFilters?.order_by !== "sort_order" && (
                 <>
                   <div
                     className={`absolute ${
@@ -101,7 +101,11 @@ export const SingleBoard: React.FC<Props> = ({
                   >
                     This board is ordered by{" "}
                     {replaceUnderscoreIfSnakeCase(
-                      orderBy ? (orderBy[0] === "-" ? orderBy.slice(1) : orderBy) : "created_at"
+                      displayFilters?.order_by
+                        ? displayFilters?.order_by[0] === "-"
+                          ? displayFilters?.order_by.slice(1)
+                          : displayFilters?.order_by
+                        : "created_at"
                     )}
                   </div>
                 </>
@@ -145,13 +149,13 @@ export const SingleBoard: React.FC<Props> = ({
                 ))}
                 <span
                   style={{
-                    display: orderBy === "sort_order" ? "inline" : "none",
+                    display: displayFilters?.order_by === "sort_order" ? "inline" : "none",
                   }}
                 >
                   {provided.placeholder}
                 </span>
               </div>
-              {selectedGroup !== "created_by" && (
+              {displayFilters?.group_by !== "created_by" && (
                 <div>
                   {type === "issue"
                     ? !disableAddIssueOption && (
diff --git a/web/components/core/views/board-view/single-issue.tsx b/web/components/core/views/board-view/single-issue.tsx
index 455ba48e6ac..dc750babe36 100644
--- a/web/components/core/views/board-view/single-issue.tsx
+++ b/web/components/core/views/board-view/single-issue.tsx
@@ -93,7 +93,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
 
   const actionSectionRef = useRef<HTMLDivElement | null>(null);
 
-  const { groupByProperty: selectedGroup, orderBy, properties, mutateIssues } = viewProps;
+  const { displayFilters, properties, mutateIssues } = viewProps;
 
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
@@ -131,9 +131,9 @@ export const SingleBoardIssue: React.FC<Props> = ({
             handleIssuesMutation(
               formData,
               groupTitle ?? "",
-              selectedGroup,
+              displayFilters?.group_by ?? null,
               index,
-              orderBy,
+              displayFilters?.order_by ?? "-created_at",
               prevData
             ),
           false
@@ -149,24 +149,14 @@ export const SingleBoardIssue: React.FC<Props> = ({
           if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
         });
     },
-    [
-      workspaceSlug,
-      cycleId,
-      moduleId,
-      groupTitle,
-      index,
-      selectedGroup,
-      mutateIssues,
-      orderBy,
-      user,
-    ]
+    [displayFilters, workspaceSlug, cycleId, moduleId, groupTitle, index, mutateIssues, user]
   );
 
   const getStyle = (
     style: DraggingStyle | NotDraggingStyle | undefined,
     snapshot: DraggableStateSnapshot
   ) => {
-    if (orderBy === "sort_order") return style;
+    if (displayFilters?.order_by === "sort_order") return style;
     if (!snapshot.isDragging) return {};
     if (!snapshot.isDropAnimating) return style;
 
diff --git a/web/components/core/views/calendar-view/calendar.tsx b/web/components/core/views/calendar-view/calendar.tsx
index 5a8a07260b4..db7d7dc8470 100644
--- a/web/components/core/views/calendar-view/calendar.tsx
+++ b/web/components/core/views/calendar-view/calendar.tsx
@@ -60,7 +60,7 @@ export const CalendarView: React.FC<Props> = ({
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
 
-  const { calendarIssues, params, setCalendarDateRange } = useCalendarIssuesView();
+  const { calendarIssues, params, setDisplayFilters } = useCalendarIssuesView();
 
   const totalDate = eachDayOfInterval({
     start: calendarDates.startDate,
@@ -152,18 +152,20 @@ export const CalendarView: React.FC<Props> = ({
       endDate,
     });
 
-    setCalendarDateRange(
-      `${renderDateFormat(startDate)};after,${renderDateFormat(endDate)};before`
-    );
+    setDisplayFilters({
+      calendar_date_range: `${renderDateFormat(startDate)};after,${renderDateFormat(
+        endDate
+      )};before`,
+    });
   };
 
   useEffect(() => {
-    setCalendarDateRange(
-      `${renderDateFormat(startOfWeek(currentDate))};after,${renderDateFormat(
+    setDisplayFilters({
+      calendar_date_range: `${renderDateFormat(startOfWeek(currentDate))};after,${renderDateFormat(
         lastDayOfWeek(currentDate)
-      )};before`
-    );
-  }, [currentDate]);
+      )};before`,
+    });
+  }, [currentDate, setDisplayFilters]);
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disableUserActions;
 
diff --git a/web/components/core/views/issues-view.tsx b/web/components/core/views/issues-view.tsx
index 556c4d98e19..b4dd665ddd5 100644
--- a/web/components/core/views/issues-view.tsx
+++ b/web/components/core/views/issues-view.tsx
@@ -77,18 +77,8 @@ export const IssuesView: React.FC<Props> = ({
 
   const { setToastAlert } = useToast();
 
-  const {
-    groupedByIssues,
-    mutateIssues,
-    issueView,
-    groupByProperty: selectedGroup,
-    orderBy,
-    filters,
-    isEmpty,
-    setFilters,
-    params,
-    showEmptyGroups,
-  } = useIssuesView();
+  const { groupedByIssues, mutateIssues, displayFilters, filters, isEmpty, setFilters, params } =
+    useIssuesView();
   const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
 
   const { data: stateGroups } = useSWR(
@@ -129,7 +119,7 @@ export const IssuesView: React.FC<Props> = ({
       if (destination.droppableId === "trashBox") {
         handleDeleteIssue(draggedItem);
       } else {
-        if (orderBy === "sort_order") {
+        if (displayFilters.order_by === "sort_order") {
           let newSortOrder = draggedItem.sort_order;
 
           const destinationGroupArray = groupedByIssues[destination.droppableId];
@@ -177,16 +167,19 @@ export const IssuesView: React.FC<Props> = ({
 
         const destinationGroup = destination.droppableId; // destination group id
 
-        if (orderBy === "sort_order" || source.droppableId !== destination.droppableId) {
+        if (
+          displayFilters.order_by === "sort_order" ||
+          source.droppableId !== destination.droppableId
+        ) {
           // different group/column;
 
           // source.droppableId !== destination.droppableId -> even if order by is not sort_order,
           // if the issue is moved to a different group, then we will change the group of the
           // dragged item(or issue)
 
-          if (selectedGroup === "priority")
+          if (displayFilters.group_by === "priority")
             draggedItem.priority = destinationGroup as TIssuePriorities;
-          else if (selectedGroup === "state") {
+          else if (displayFilters.group_by === "state") {
             draggedItem.state = destinationGroup;
             draggedItem.state_detail = states?.find((s) => s.id === destinationGroup) as IState;
           }
@@ -213,8 +206,14 @@ export const IssuesView: React.FC<Props> = ({
 
             return {
               ...prevData,
-              [sourceGroup]: orderArrayBy(sourceGroupArray, orderBy),
-              [destinationGroup]: orderArrayBy(destinationGroupArray, orderBy),
+              [sourceGroup]: orderArrayBy(
+                sourceGroupArray,
+                displayFilters.order_by ?? "-created_at"
+              ),
+              [destinationGroup]: orderArrayBy(
+                destinationGroupArray,
+                displayFilters.order_by ?? "-created_at"
+              ),
             };
           },
           false
@@ -267,13 +266,13 @@ export const IssuesView: React.FC<Props> = ({
       }
     },
     [
+      displayFilters.group_by,
+      displayFilters.order_by,
       workspaceSlug,
       cycleId,
       moduleId,
       groupedByIssues,
       projectId,
-      selectedGroup,
-      orderBy,
       handleDeleteIssue,
       params,
       states,
@@ -287,19 +286,19 @@ export const IssuesView: React.FC<Props> = ({
 
       let preloadedValue: string | string[] = groupTitle;
 
-      if (selectedGroup === "labels") {
+      if (displayFilters.group_by === "labels") {
         if (groupTitle === "None") preloadedValue = [];
         else preloadedValue = [groupTitle];
       }
 
-      if (selectedGroup)
+      if (displayFilters.group_by)
         setPreloadedData({
-          [selectedGroup]: preloadedValue,
+          [displayFilters.group_by]: preloadedValue,
           actionType: "createIssue",
         });
       else setPreloadedData({ actionType: "createIssue" });
     },
-    [setCreateIssueModal, setPreloadedData, selectedGroup]
+    [displayFilters.group_by, setCreateIssueModal, setPreloadedData]
   );
 
   const addIssueToDate = useCallback(
@@ -352,7 +351,7 @@ export const IssuesView: React.FC<Props> = ({
         CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params),
         (prevData: any) => {
           if (!prevData) return prevData;
-          if (selectedGroup) {
+          if (displayFilters.group_by) {
             const filteredData: any = {};
             for (const key in prevData) {
               filteredData[key] = prevData[key].filter((item: any) => item.id !== issueId);
@@ -384,7 +383,7 @@ export const IssuesView: React.FC<Props> = ({
           console.log(e);
         });
     },
-    [workspaceSlug, projectId, cycleId, params, selectedGroup, setToastAlert]
+    [displayFilters.group_by, workspaceSlug, projectId, cycleId, params, setToastAlert]
   );
 
   const removeIssueFromModule = useCallback(
@@ -395,7 +394,7 @@ export const IssuesView: React.FC<Props> = ({
         MODULE_ISSUES_WITH_PARAMS(moduleId as string, params),
         (prevData: any) => {
           if (!prevData) return prevData;
-          if (selectedGroup) {
+          if (displayFilters.group_by) {
             const filteredData: any = {};
             for (const key in prevData) {
               filteredData[key] = prevData[key].filter((item: any) => item.id !== issueId);
@@ -427,7 +426,7 @@ export const IssuesView: React.FC<Props> = ({
           console.log(e);
         });
     },
-    [workspaceSlug, projectId, moduleId, params, selectedGroup, setToastAlert]
+    [displayFilters.group_by, workspaceSlug, projectId, moduleId, params, setToastAlert]
   );
 
   const nullFilters = Object.keys(filters).filter(
@@ -481,7 +480,6 @@ export const IssuesView: React.FC<Props> = ({
                   state: null,
                   start_date: null,
                   target_date: null,
-                  type: null,
                 })
               }
             />
@@ -513,10 +511,10 @@ export const IssuesView: React.FC<Props> = ({
         addIssueToGroup={addIssueToGroup}
         disableUserActions={disableUserActions}
         dragDisabled={
-          selectedGroup === "created_by" ||
-          selectedGroup === "labels" ||
-          selectedGroup === "state_detail.group" ||
-          selectedGroup === "assignees"
+          displayFilters.group_by === "created_by" ||
+          displayFilters.group_by === "labels" ||
+          displayFilters.group_by === "state_detail.group" ||
+          displayFilters.group_by === "assignees"
         }
         emptyState={{
           title: cycleId
@@ -554,15 +552,12 @@ export const IssuesView: React.FC<Props> = ({
         trashBox={trashBox}
         setTrashBox={setTrashBox}
         viewProps={{
-          groupByProperty: selectedGroup,
           groupedIssues: groupedByIssues,
+          displayFilters,
           isEmpty,
-          issueView,
           mutateIssues,
-          orderBy,
           params,
           properties,
-          showEmptyGroups,
         }}
       />
     </>
diff --git a/web/components/core/views/list-view/all-lists.tsx b/web/components/core/views/list-view/all-lists.tsx
index 84ef029620e..282e27755b2 100644
--- a/web/components/core/views/list-view/all-lists.tsx
+++ b/web/components/core/views/list-view/all-lists.tsx
@@ -29,7 +29,7 @@ export const AllLists: React.FC<Props> = ({
   userAuth,
   viewProps,
 }) => {
-  const { groupByProperty: selectedGroup, groupedIssues, showEmptyGroups } = viewProps;
+  const { displayFilters, groupedIssues } = viewProps;
 
   return (
     <>
@@ -37,9 +37,12 @@ export const AllLists: React.FC<Props> = ({
         <div className="h-full overflow-y-auto">
           {Object.keys(groupedIssues).map((singleGroup) => {
             const currentState =
-              selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;
+              displayFilters?.group_by === "state"
+                ? states?.find((s) => s.id === singleGroup)
+                : null;
 
-            if (!showEmptyGroups && groupedIssues[singleGroup].length === 0) return null;
+            if (!displayFilters?.show_empty_groups && groupedIssues[singleGroup].length === 0)
+              return null;
 
             return (
               <SingleList
diff --git a/web/components/core/views/list-view/single-issue.tsx b/web/components/core/views/list-view/single-issue.tsx
index d89ef69279b..1e5d551c306 100644
--- a/web/components/core/views/list-view/single-issue.tsx
+++ b/web/components/core/views/list-view/single-issue.tsx
@@ -91,7 +91,7 @@ export const SingleListIssue: React.FC<Props> = ({
 
   const { setToastAlert } = useToast();
 
-  const { groupByProperty: selectedGroup, orderBy, properties, mutateIssues } = viewProps;
+  const { displayFilters, properties, mutateIssues } = viewProps;
 
   const partialUpdateIssue = useCallback(
     (formData: Partial<IIssue>, issue: IIssue) => {
@@ -124,9 +124,9 @@ export const SingleListIssue: React.FC<Props> = ({
             handleIssuesMutation(
               formData,
               groupTitle ?? "",
-              selectedGroup,
+              displayFilters?.group_by ?? null,
               index,
-              orderBy,
+              displayFilters?.order_by ?? "-created_at",
               prevData
             ),
           false
@@ -148,15 +148,14 @@ export const SingleListIssue: React.FC<Props> = ({
         });
     },
     [
+      displayFilters,
       workspaceSlug,
       cycleId,
       moduleId,
       userId,
       groupTitle,
       index,
-      selectedGroup,
       mutateIssues,
-      orderBy,
       user,
     ]
   );
diff --git a/web/components/core/views/list-view/single-list.tsx b/web/components/core/views/list-view/single-list.tsx
index 14829adc44d..1917b37a7aa 100644
--- a/web/components/core/views/list-view/single-list.tsx
+++ b/web/components/core/views/list-view/single-list.tsx
@@ -69,7 +69,7 @@ export const SingleList: React.FC<Props> = ({
 
   const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
 
-  const { groupByProperty: selectedGroup, groupedIssues } = viewProps;
+  const { displayFilters, groupedIssues } = viewProps;
 
   const { data: issueLabels } = useSWR<IIssueLabels[]>(
     workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
@@ -90,7 +90,7 @@ export const SingleList: React.FC<Props> = ({
   const getGroupTitle = () => {
     let title = addSpaceIfCamelCase(groupTitle);
 
-    switch (selectedGroup) {
+    switch (displayFilters?.group_by) {
       case "state":
         title = addSpaceIfCamelCase(currentState?.name ?? "");
         break;
@@ -113,7 +113,7 @@ export const SingleList: React.FC<Props> = ({
   const getGroupIcon = () => {
     let icon;
 
-    switch (selectedGroup) {
+    switch (displayFilters?.group_by) {
       case "state":
         icon = currentState && (
           <StateGroupIcon
@@ -177,13 +177,13 @@ export const SingleList: React.FC<Props> = ({
           <div className="flex items-center justify-between px-4 py-2.5 bg-custom-background-90">
             <Disclosure.Button>
               <div className="flex items-center gap-x-3">
-                {selectedGroup !== null && (
+                {displayFilters?.group_by !== null && (
                   <div className="flex items-center">{getGroupIcon()}</div>
                 )}
-                {selectedGroup !== null ? (
+                {displayFilters?.group_by !== null ? (
                   <h2
                     className={`text-sm font-semibold leading-6 text-custom-text-100 ${
-                      selectedGroup === "created_by" ? "" : "capitalize"
+                      displayFilters?.group_by === "created_by" ? "" : "capitalize"
                     }`}
                   >
                     {getGroupTitle()}
diff --git a/web/components/core/views/spreadsheet-view/spreadsheet-columns.tsx b/web/components/core/views/spreadsheet-view/spreadsheet-columns.tsx
index 181ea93a7c1..f52f1ab3843 100644
--- a/web/components/core/views/spreadsheet-view/spreadsheet-columns.tsx
+++ b/web/components/core/views/spreadsheet-view/spreadsheet-columns.tsx
@@ -22,10 +22,10 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
   const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } =
     useLocalStorage("spreadsheetViewActiveSortingProperty", "");
 
-  const { orderBy, setOrderBy } = useSpreadsheetIssuesView();
+  const { displayFilters, setDisplayFilters } = useSpreadsheetIssuesView();
 
   const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
-    setOrderBy(order);
+    setDisplayFilters({ order_by: order });
     setSelectedMenuItem(`${order}_${itemKey}`);
     setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
   };
@@ -239,7 +239,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                   </CustomMenu.MenuItem>
                   {selectedMenuItem &&
                     selectedMenuItem !== "" &&
-                    orderBy !== "-created_at" &&
+                    displayFilters?.order_by !== "-created_at" &&
                     selectedMenuItem.includes(col.propertyName) && (
                       <CustomMenu.MenuItem
                         className={`mt-0.5${
diff --git a/web/components/cycles/gantt-chart/cycle-issues-layout.tsx b/web/components/cycles/gantt-chart/cycle-issues-layout.tsx
index c18bc9346e6..1c78da0961b 100644
--- a/web/components/cycles/gantt-chart/cycle-issues-layout.tsx
+++ b/web/components/cycles/gantt-chart/cycle-issues-layout.tsx
@@ -16,7 +16,7 @@ export const CycleIssuesGanttChartView = () => {
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
 
-  const { orderBy } = useIssuesView();
+  const { displayFilters } = useIssuesView();
 
   const { user } = useUser();
   const { projectDetails } = useProjectDetails();
@@ -44,7 +44,7 @@ export const CycleIssuesGanttChartView = () => {
         enableBlockLeftResize={isAllowed}
         enableBlockRightResize={isAllowed}
         enableBlockMove={isAllowed}
-        enableReorder={orderBy === "sort_order" && isAllowed}
+        enableReorder={displayFilters.order_by === "sort_order" && isAllowed}
         bottomSpacing
       />
     </div>
diff --git a/web/components/issues/delete-issue-modal.tsx b/web/components/issues/delete-issue-modal.tsx
index e9907973f67..d76e5ddd2ed 100644
--- a/web/components/issues/delete-issue-modal.tsx
+++ b/web/components/issues/delete-issue-modal.tsx
@@ -50,7 +50,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
   const { workspaceSlug, projectId, cycleId, moduleId, viewId, issueId } = router.query;
   const isArchivedIssues = router.pathname.includes("archived-issues");
 
-  const { issueView, params } = useIssuesView();
+  const { displayFilters, params } = useIssuesView();
   const { params: calendarParams } = useCalendarIssuesView();
   const { params: spreadsheetParams } = useSpreadsheetIssuesView();
 
@@ -73,7 +73,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
     await issueServices
       .deleteIssue(workspaceSlug as string, data.project, data.id, user)
       .then(() => {
-        if (issueView === "calendar") {
+        if (displayFilters.layout === "calendar") {
           const calendarFetchKey = cycleId
             ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), calendarParams)
             : moduleId
@@ -87,7 +87,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
             (prevData) => (prevData ?? []).filter((p) => p.id !== data.id),
             false
           );
-        } else if (issueView === "spreadsheet") {
+        } else if (displayFilters.layout === "spreadsheet") {
           const spreadsheetFetchKey = cycleId
             ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), spreadsheetParams)
             : moduleId
diff --git a/web/components/issues/gantt-chart/layout.tsx b/web/components/issues/gantt-chart/layout.tsx
index 39e169a60d3..a78319a4bcb 100644
--- a/web/components/issues/gantt-chart/layout.tsx
+++ b/web/components/issues/gantt-chart/layout.tsx
@@ -16,7 +16,7 @@ export const IssueGanttChartView = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { orderBy } = useIssuesView();
+  const { displayFilters } = useIssuesView();
 
   const { user } = useUser();
   const { projectDetails } = useProjectDetails();
@@ -43,7 +43,7 @@ export const IssueGanttChartView = () => {
         enableBlockLeftResize={isAllowed}
         enableBlockRightResize={isAllowed}
         enableBlockMove={isAllowed}
-        enableReorder={orderBy === "sort_order" && isAllowed}
+        enableReorder={displayFilters.order_by === "sort_order" && isAllowed}
         bottomSpacing
       />
     </div>
diff --git a/web/components/issues/modal.tsx b/web/components/issues/modal.tsx
index 4c4f2ba446c..2dfd4e2c4bd 100644
--- a/web/components/issues/modal.tsx
+++ b/web/components/issues/modal.tsx
@@ -78,7 +78,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId, viewId, inboxId } = router.query;
 
-  const { issueView, params } = useIssuesView();
+  const { displayFilters, params } = useIssuesView();
   const { params: calendarParams } = useCalendarIssuesView();
   const { order_by, group_by, ...viewGanttParams } = params;
   const { params: inboxParams } = useInboxView();
@@ -247,13 +247,13 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
           if (payload.module && payload.module !== "")
             await addIssueToModule(res.id, payload.module);
 
-          if (issueView === "calendar") mutate(calendarFetchKey);
-          if (issueView === "gantt_chart")
+          if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
+          if (displayFilters.layout === "gantt_chart")
             mutate(ganttFetchKey, {
               start_target_date: true,
               order_by: "sort_order",
             });
-          if (issueView === "spreadsheet") mutate(spreadsheetFetchKey);
+          if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
           if (groupedIssues) mutateMyIssues();
 
           setToastAlert({
@@ -285,8 +285,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
         if (isUpdatingSingleIssue) {
           mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
         } else {
-          if (issueView === "calendar") mutate(calendarFetchKey);
-          if (issueView === "spreadsheet") mutate(spreadsheetFetchKey);
+          if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
+          if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
           if (payload.parent) mutate(SUB_ISSUES(payload.parent.toString()));
           mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
         }
diff --git a/web/components/issues/my-issues/my-issues-view-options.tsx b/web/components/issues/my-issues/my-issues-view-options.tsx
index d31f884dcba..90d9b8971a9 100644
--- a/web/components/issues/my-issues/my-issues-view-options.tsx
+++ b/web/components/issues/my-issues/my-issues-view-options.tsx
@@ -37,20 +37,8 @@ export const MyIssuesViewOptions: React.FC = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const {
-    issueView,
-    setIssueView,
-    groupBy,
-    setGroupBy,
-    orderBy,
-    setOrderBy,
-    showEmptyGroups,
-    setShowEmptyGroups,
-    properties,
-    setProperty,
-    filters,
-    setFilters,
-  } = useMyIssuesFilters(workspaceSlug?.toString());
+  const { displayFilters, setDisplayFilters, properties, setProperty, filters, setFilters } =
+    useMyIssuesFilters(workspaceSlug?.toString());
 
   const { isEstimateActive } = useEstimateOption();
 
@@ -68,11 +56,11 @@ export const MyIssuesViewOptions: React.FC = () => {
             <button
               type="button"
               className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
-                issueView === option.type
+                displayFilters?.layout === option.type
                   ? "bg-custom-sidebar-background-80"
                   : "text-custom-sidebar-text-200"
               }`}
-              onClick={() => setIssueView(option.type)}
+              onClick={() => setDisplayFilters({ layout: option.type })}
             >
               <option.Icon
                 sx={{
@@ -139,81 +127,89 @@ export const MyIssuesViewOptions: React.FC = () => {
               <Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-200 bg-custom-background-90 p-3 shadow-lg">
                 <div className="relative divide-y-2 divide-custom-border-200">
                   <div className="space-y-4 pb-3 text-xs">
-                    {issueView !== "calendar" && issueView !== "spreadsheet" && (
-                      <>
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Group by</h4>
-                          <div className="w-28">
-                            <CustomMenu
-                              label={
-                                groupBy === "project"
-                                  ? "Project"
-                                  : GROUP_BY_OPTIONS.find((option) => option.key === groupBy)
-                                      ?.name ?? "Select"
-                              }
-                              className="!w-full"
-                              buttonClassName="w-full"
-                            >
-                              {GROUP_BY_OPTIONS.map((option) => {
-                                if (issueView === "kanban" && option.key === null) return null;
-                                if (
-                                  option.key === "state" ||
-                                  option.key === "created_by" ||
-                                  option.key === "assignees"
-                                )
-                                  return null;
+                    {displayFilters?.layout !== "calendar" &&
+                      displayFilters?.layout !== "spreadsheet" && (
+                        <>
+                          <div className="flex items-center justify-between">
+                            <h4 className="text-custom-text-200">Group by</h4>
+                            <div className="w-28">
+                              <CustomMenu
+                                label={
+                                  displayFilters?.group_by === "project"
+                                    ? "Project"
+                                    : GROUP_BY_OPTIONS.find(
+                                        (option) => option.key === displayFilters?.group_by
+                                      )?.name ?? "Select"
+                                }
+                                className="!w-full"
+                                buttonClassName="w-full"
+                              >
+                                {GROUP_BY_OPTIONS.map((option) => {
+                                  if (displayFilters?.layout === "kanban" && option.key === null)
+                                    return null;
+                                  if (
+                                    option.key === "state" ||
+                                    option.key === "created_by" ||
+                                    option.key === "assignees"
+                                  )
+                                    return null;
 
-                                return (
-                                  <CustomMenu.MenuItem
-                                    key={option.key}
-                                    onClick={() => setGroupBy(option.key)}
-                                  >
-                                    {option.name}
-                                  </CustomMenu.MenuItem>
-                                );
-                              })}
-                            </CustomMenu>
+                                  return (
+                                    <CustomMenu.MenuItem
+                                      key={option.key}
+                                      onClick={() => setDisplayFilters({ group_by: option.key })}
+                                    >
+                                      {option.name}
+                                    </CustomMenu.MenuItem>
+                                  );
+                                })}
+                              </CustomMenu>
+                            </div>
                           </div>
-                        </div>
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Order by</h4>
-                          <div className="w-28">
-                            <CustomMenu
-                              label={
-                                ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
-                                "Select"
-                              }
-                              className="!w-full"
-                              buttonClassName="w-full"
-                            >
-                              {ORDER_BY_OPTIONS.map((option) => {
-                                if (groupBy === "priority" && option.key === "priority")
-                                  return null;
-                                if (option.key === "sort_order") return null;
+                          <div className="flex items-center justify-between">
+                            <h4 className="text-custom-text-200">Order by</h4>
+                            <div className="w-28">
+                              <CustomMenu
+                                label={
+                                  ORDER_BY_OPTIONS.find(
+                                    (option) => option.key === displayFilters?.order_by
+                                  )?.name ?? "Select"
+                                }
+                                className="!w-full"
+                                buttonClassName="w-full"
+                              >
+                                {ORDER_BY_OPTIONS.map((option) => {
+                                  if (
+                                    displayFilters?.group_by === "priority" &&
+                                    option.key === "priority"
+                                  )
+                                    return null;
+                                  if (option.key === "sort_order") return null;
 
-                                return (
-                                  <CustomMenu.MenuItem
-                                    key={option.key}
-                                    onClick={() => {
-                                      setOrderBy(option.key);
-                                    }}
-                                  >
-                                    {option.name}
-                                  </CustomMenu.MenuItem>
-                                );
-                              })}
-                            </CustomMenu>
+                                  return (
+                                    <CustomMenu.MenuItem
+                                      key={option.key}
+                                      onClick={() => {
+                                        setDisplayFilters({ order_by: option.key });
+                                      }}
+                                    >
+                                      {option.name}
+                                    </CustomMenu.MenuItem>
+                                  );
+                                })}
+                              </CustomMenu>
+                            </div>
                           </div>
-                        </div>
-                      </>
-                    )}
+                        </>
+                      )}
                     <div className="flex items-center justify-between">
                       <h4 className="text-custom-text-200">Issue type</h4>
                       <div className="w-28">
                         <CustomMenu
                           label={
-                            FILTER_ISSUE_OPTIONS.find((option) => option.key === filters?.type)
-                              ?.name ?? "Select"
+                            FILTER_ISSUE_OPTIONS.find(
+                              (option) => option.key === displayFilters?.type
+                            )?.name ?? "Select"
                           }
                           className="!w-full"
                           buttonClassName="w-full"
@@ -222,7 +218,7 @@ export const MyIssuesViewOptions: React.FC = () => {
                             <CustomMenu.MenuItem
                               key={option.key}
                               onClick={() =>
-                                setFilters({
+                                setDisplayFilters({
                                   type: option.key,
                                 })
                               }
@@ -234,16 +230,24 @@ export const MyIssuesViewOptions: React.FC = () => {
                       </div>
                     </div>
 
-                    {issueView !== "calendar" && issueView !== "spreadsheet" && (
-                      <>
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Show empty states</h4>
-                          <div className="w-28">
-                            <ToggleSwitch value={showEmptyGroups} onChange={setShowEmptyGroups} />
+                    {displayFilters?.layout !== "calendar" &&
+                      displayFilters?.layout !== "spreadsheet" && (
+                        <>
+                          <div className="flex items-center justify-between">
+                            <h4 className="text-custom-text-200">Show empty states</h4>
+                            <div className="w-28">
+                              <ToggleSwitch
+                                value={displayFilters?.show_empty_groups ?? true}
+                                onChange={() =>
+                                  setDisplayFilters({
+                                    show_empty_groups: !displayFilters?.show_empty_groups,
+                                  })
+                                }
+                              />
+                            </div>
                           </div>
-                        </div>
-                      </>
-                    )}
+                        </>
+                      )}
                   </div>
 
                   <div className="space-y-2 py-3">
@@ -253,7 +257,7 @@ export const MyIssuesViewOptions: React.FC = () => {
                         if (key === "estimate" && !isEstimateActive) return null;
 
                         if (
-                          issueView === "spreadsheet" &&
+                          displayFilters?.layout === "spreadsheet" &&
                           (key === "attachment_count" ||
                             key === "link" ||
                             key === "sub_issue_count")
@@ -261,7 +265,7 @@ export const MyIssuesViewOptions: React.FC = () => {
                           return null;
 
                         if (
-                          issueView !== "spreadsheet" &&
+                          displayFilters?.layout !== "spreadsheet" &&
                           (key === "created_on" || key === "updated_on")
                         )
                           return null;
diff --git a/web/components/issues/my-issues/my-issues-view.tsx b/web/components/issues/my-issues/my-issues-view.tsx
index a66f4618b89..81a4560791d 100644
--- a/web/components/issues/my-issues/my-issues-view.tsx
+++ b/web/components/issues/my-issues/my-issues-view.tsx
@@ -57,8 +57,9 @@ export const MyIssuesView: React.FC<Props> = ({
   const { user } = useUserAuth();
 
   const { groupedIssues, mutateMyIssues, isEmpty, params } = useMyIssues(workspaceSlug?.toString());
-  const { filters, setFilters, issueView, groupBy, orderBy, properties, showEmptyGroups } =
-    useMyIssuesFilters(workspaceSlug?.toString());
+  const { filters, setFilters, displayFilters, setDisplayFilters, properties } = useMyIssuesFilters(
+    workspaceSlug?.toString()
+  );
 
   const { data: labels } = useSWR(
     workspaceSlug && (filters?.labels ?? []).length > 0
@@ -81,7 +82,13 @@ export const MyIssuesView: React.FC<Props> = ({
     async (result: DropResult) => {
       setTrashBox(false);
 
-      if (!result.destination || !workspaceSlug || !groupedIssues || groupBy !== "priority") return;
+      if (
+        !result.destination ||
+        !workspaceSlug ||
+        !groupedIssues ||
+        displayFilters?.group_by !== "priority"
+      )
+        return;
 
       const { source, destination } = result;
 
@@ -96,7 +103,7 @@ export const MyIssuesView: React.FC<Props> = ({
         const sourceGroup = source.droppableId;
         const destinationGroup = destination.droppableId;
 
-        draggedItem[groupBy] = destinationGroup as TIssuePriorities;
+        draggedItem[displayFilters.group_by] = destinationGroup as TIssuePriorities;
 
         mutate<{
           [key: string]: IIssue[];
@@ -113,8 +120,14 @@ export const MyIssuesView: React.FC<Props> = ({
 
             return {
               ...prevData,
-              [sourceGroup]: orderArrayBy(sourceGroupArray, orderBy),
-              [destinationGroup]: orderArrayBy(destinationGroupArray, orderBy),
+              [sourceGroup]: orderArrayBy(
+                sourceGroupArray,
+                displayFilters.order_by ?? "-created_at"
+              ),
+              [destinationGroup]: orderArrayBy(
+                destinationGroupArray,
+                displayFilters.order_by ?? "-created_at"
+              ),
             };
           },
           false
@@ -134,7 +147,7 @@ export const MyIssuesView: React.FC<Props> = ({
           .catch(() => mutate(USER_ISSUES(workspaceSlug.toString(), params)));
       }
     },
-    [groupBy, groupedIssues, handleDeleteIssue, orderBy, params, user, workspaceSlug]
+    [displayFilters, groupedIssues, handleDeleteIssue, params, user, workspaceSlug]
   );
 
   const addIssueToGroup = useCallback(
@@ -143,19 +156,19 @@ export const MyIssuesView: React.FC<Props> = ({
 
       let preloadedValue: string | string[] = groupTitle;
 
-      if (groupBy === "labels") {
+      if (displayFilters?.group_by === "labels") {
         if (groupTitle === "None") preloadedValue = [];
         else preloadedValue = [groupTitle];
       }
 
-      if (groupBy)
+      if (displayFilters?.group_by)
         setPreloadedData({
-          [groupBy]: preloadedValue,
+          [displayFilters?.group_by]: preloadedValue,
           actionType: "createIssue",
         });
       else setPreloadedData({ actionType: "createIssue" });
     },
-    [setCreateIssueModal, setPreloadedData, groupBy]
+    [setCreateIssueModal, setPreloadedData, displayFilters?.group_by]
   );
 
   const addIssueToDate = useCallback(
@@ -263,7 +276,6 @@ export const MyIssuesView: React.FC<Props> = ({
                   state_group: null,
                   start_date: null,
                   target_date: null,
-                  type: null,
                 })
               }
             />
@@ -275,7 +287,7 @@ export const MyIssuesView: React.FC<Props> = ({
         addIssueToDate={addIssueToDate}
         addIssueToGroup={addIssueToGroup}
         disableUserActions={disableUserActions}
-        dragDisabled={groupBy !== "priority"}
+        dragDisabled={displayFilters?.group_by !== "priority"}
         emptyState={{
           title: filters.assignees
             ? "You don't have any issue assigned to you yet"
@@ -304,15 +316,12 @@ export const MyIssuesView: React.FC<Props> = ({
         trashBox={trashBox}
         setTrashBox={setTrashBox}
         viewProps={{
-          groupByProperty: groupBy,
+          displayFilters,
           groupedIssues,
           isEmpty,
-          issueView,
           mutateIssues: mutateMyIssues,
-          orderBy,
           params,
           properties,
-          showEmptyGroups,
         }}
       />
     </>
diff --git a/web/components/issues/view-select/due-date.tsx b/web/components/issues/view-select/due-date.tsx
index 5f5e5cbd053..5cbc2645204 100644
--- a/web/components/issues/view-select/due-date.tsx
+++ b/web/components/issues/view-select/due-date.tsx
@@ -34,7 +34,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { issueView } = useIssuesView();
+  const { displayFilters } = useIssuesView();
 
   const minDate = issue.start_date ? new Date(issue.start_date) : null;
   minDate?.setDate(minDate.getDate());
@@ -80,7 +80,9 @@ export const ViewDueDateSelect: React.FC<Props> = ({
             );
           }}
           className={`${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${
-            issueView === "kanban" ? "bg-custom-background-90" : "bg-custom-background-100"
+            displayFilters.layout === "kanban"
+              ? "bg-custom-background-90"
+              : "bg-custom-background-100"
           }`}
           minDate={minDate ?? undefined}
           noBorder={noBorder}
diff --git a/web/components/issues/view-select/start-date.tsx b/web/components/issues/view-select/start-date.tsx
index 8748567ae5e..14b78f6ace2 100644
--- a/web/components/issues/view-select/start-date.tsx
+++ b/web/components/issues/view-select/start-date.tsx
@@ -34,7 +34,7 @@ export const ViewStartDateSelect: React.FC<Props> = ({
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { issueView } = useIssuesView();
+  const { displayFilters } = useIssuesView();
 
   const maxDate = issue.target_date ? new Date(issue.target_date) : null;
   maxDate?.setDate(maxDate.getDate());
@@ -72,7 +72,9 @@ export const ViewStartDateSelect: React.FC<Props> = ({
             );
           }}
           className={`${issue?.start_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${
-            issueView === "kanban" ? "bg-custom-background-90" : "bg-custom-background-100"
+            displayFilters.layout === "kanban"
+              ? "bg-custom-background-90"
+              : "bg-custom-background-100"
           }`}
           maxDate={maxDate ?? undefined}
           noBorder={noBorder}
diff --git a/web/components/modules/gantt-chart/module-issues-layout.tsx b/web/components/modules/gantt-chart/module-issues-layout.tsx
index c350232e91b..ca8aae52778 100644
--- a/web/components/modules/gantt-chart/module-issues-layout.tsx
+++ b/web/components/modules/gantt-chart/module-issues-layout.tsx
@@ -20,7 +20,7 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId } = router.query;
 
-  const { orderBy } = useIssuesView();
+  const { displayFilters } = useIssuesView();
 
   const { user } = useUser();
   const { projectDetails } = useProjectDetails();
@@ -48,7 +48,7 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
         enableBlockLeftResize={isAllowed}
         enableBlockRightResize={isAllowed}
         enableBlockMove={isAllowed}
-        enableReorder={orderBy === "sort_order" && isAllowed}
+        enableReorder={displayFilters.order_by === "sort_order" && isAllowed}
         bottomSpacing
       />
     </div>
diff --git a/web/components/profile/profile-issues-view-options.tsx b/web/components/profile/profile-issues-view-options.tsx
index 4d59d6ffa8d..a7be9d3b650 100644
--- a/web/components/profile/profile-issues-view-options.tsx
+++ b/web/components/profile/profile-issues-view-options.tsx
@@ -41,16 +41,10 @@ export const ProfileIssuesViewOptions: React.FC = () => {
   const { projects } = useProjects();
 
   const {
-    issueView,
-    setIssueView,
-    groupByProperty,
-    setGroupByProperty,
-    orderBy,
-    setOrderBy,
-    showEmptyGroups,
-    setShowEmptyGroups,
+    displayFilters,
+    setDisplayFilters,
     filters,
-    properties,
+    displayProperties,
     setProperties,
     setFilters,
   } = useProfileIssues(workspaceSlug?.toString(), userId?.toString());
@@ -94,11 +88,11 @@ export const ProfileIssuesViewOptions: React.FC = () => {
             <button
               type="button"
               className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
-                issueView === option.type
+                displayFilters.layout === option.type
                   ? "bg-custom-sidebar-background-80"
                   : "text-custom-sidebar-text-200"
               }`}
-              onClick={() => setIssueView(option.type)}
+              onClick={() => setDisplayFilters({ layout: option.type })}
             >
               <option.Icon
                 sx={{
@@ -165,82 +159,89 @@ export const ProfileIssuesViewOptions: React.FC = () => {
               <Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-200 bg-custom-background-90 p-3 shadow-lg">
                 <div className="relative divide-y-2 divide-custom-border-200">
                   <div className="space-y-4 pb-3 text-xs">
-                    {issueView !== "calendar" && issueView !== "spreadsheet" && (
-                      <>
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Group by</h4>
-                          <div className="w-28">
-                            <CustomMenu
-                              label={
-                                groupByProperty === "project"
-                                  ? "Project"
-                                  : GROUP_BY_OPTIONS.find(
-                                      (option) => option.key === groupByProperty
-                                    )?.name ?? "Select"
-                              }
-                              className="!w-full"
-                              buttonClassName="w-full"
-                            >
-                              {GROUP_BY_OPTIONS.map((option) => {
-                                if (issueView === "kanban" && option.key === null) return null;
-                                if (
-                                  option.key === "state" ||
-                                  option.key === "created_by" ||
-                                  option.key === "assignees"
-                                )
-                                  return null;
+                    {displayFilters.layout !== "calendar" &&
+                      displayFilters.layout !== "spreadsheet" && (
+                        <>
+                          <div className="flex items-center justify-between">
+                            <h4 className="text-custom-text-200">Group by</h4>
+                            <div className="w-28">
+                              <CustomMenu
+                                label={
+                                  displayFilters.group_by === "project"
+                                    ? "Project"
+                                    : GROUP_BY_OPTIONS.find(
+                                        (option) => option.key === displayFilters.group_by
+                                      )?.name ?? "Select"
+                                }
+                                className="!w-full"
+                                buttonClassName="w-full"
+                              >
+                                {GROUP_BY_OPTIONS.map((option) => {
+                                  if (displayFilters.layout === "kanban" && option.key === null)
+                                    return null;
+                                  if (
+                                    option.key === "state" ||
+                                    option.key === "created_by" ||
+                                    option.key === "assignees"
+                                  )
+                                    return null;
 
-                                return (
-                                  <CustomMenu.MenuItem
-                                    key={option.key}
-                                    onClick={() => setGroupByProperty(option.key)}
-                                  >
-                                    {option.name}
-                                  </CustomMenu.MenuItem>
-                                );
-                              })}
-                            </CustomMenu>
+                                  return (
+                                    <CustomMenu.MenuItem
+                                      key={option.key}
+                                      onClick={() => setDisplayFilters({ group_by: option.key })}
+                                    >
+                                      {option.name}
+                                    </CustomMenu.MenuItem>
+                                  );
+                                })}
+                              </CustomMenu>
+                            </div>
                           </div>
-                        </div>
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Order by</h4>
-                          <div className="w-28">
-                            <CustomMenu
-                              label={
-                                ORDER_BY_OPTIONS.find((option) => option.key === orderBy)?.name ??
-                                "Select"
-                              }
-                              className="!w-full"
-                              buttonClassName="w-full"
-                            >
-                              {ORDER_BY_OPTIONS.map((option) => {
-                                if (groupByProperty === "priority" && option.key === "priority")
-                                  return null;
-                                if (option.key === "sort_order") return null;
+                          <div className="flex items-center justify-between">
+                            <h4 className="text-custom-text-200">Order by</h4>
+                            <div className="w-28">
+                              <CustomMenu
+                                label={
+                                  ORDER_BY_OPTIONS.find(
+                                    (option) => option.key === displayFilters.order_by
+                                  )?.name ?? "Select"
+                                }
+                                className="!w-full"
+                                buttonClassName="w-full"
+                              >
+                                {ORDER_BY_OPTIONS.map((option) => {
+                                  if (
+                                    displayFilters.group_by === "priority" &&
+                                    option.key === "priority"
+                                  )
+                                    return null;
+                                  if (option.key === "sort_order") return null;
 
-                                return (
-                                  <CustomMenu.MenuItem
-                                    key={option.key}
-                                    onClick={() => {
-                                      setOrderBy(option.key);
-                                    }}
-                                  >
-                                    {option.name}
-                                  </CustomMenu.MenuItem>
-                                );
-                              })}
-                            </CustomMenu>
+                                  return (
+                                    <CustomMenu.MenuItem
+                                      key={option.key}
+                                      onClick={() => {
+                                        setDisplayFilters({ order_by: option.key });
+                                      }}
+                                    >
+                                      {option.name}
+                                    </CustomMenu.MenuItem>
+                                  );
+                                })}
+                              </CustomMenu>
+                            </div>
                           </div>
-                        </div>
-                      </>
-                    )}
+                        </>
+                      )}
                     <div className="flex items-center justify-between">
                       <h4 className="text-custom-text-200">Issue type</h4>
                       <div className="w-28">
                         <CustomMenu
                           label={
-                            FILTER_ISSUE_OPTIONS.find((option) => option.key === filters?.type)
-                              ?.name ?? "Select"
+                            FILTER_ISSUE_OPTIONS.find(
+                              (option) => option.key === displayFilters?.type
+                            )?.name ?? "Select"
                           }
                           className="!w-full"
                           buttonClassName="w-full"
@@ -249,7 +250,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
                             <CustomMenu.MenuItem
                               key={option.key}
                               onClick={() =>
-                                setFilters({
+                                setDisplayFilters({
                                   type: option.key,
                                 })
                               }
@@ -261,26 +262,34 @@ export const ProfileIssuesViewOptions: React.FC = () => {
                       </div>
                     </div>
 
-                    {issueView !== "calendar" && issueView !== "spreadsheet" && (
-                      <>
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Show empty states</h4>
-                          <div className="w-28">
-                            <ToggleSwitch value={showEmptyGroups} onChange={setShowEmptyGroups} />
+                    {displayFilters.layout !== "calendar" &&
+                      displayFilters.layout !== "spreadsheet" && (
+                        <>
+                          <div className="flex items-center justify-between">
+                            <h4 className="text-custom-text-200">Show empty states</h4>
+                            <div className="w-28">
+                              <ToggleSwitch
+                                value={displayFilters.show_empty_groups ?? true}
+                                onChange={() =>
+                                  setDisplayFilters({
+                                    show_empty_groups: !displayFilters.show_empty_groups,
+                                  })
+                                }
+                              />
+                            </div>
                           </div>
-                        </div>
-                      </>
-                    )}
+                        </>
+                      )}
                   </div>
 
                   <div className="space-y-2 py-3">
                     <h4 className="text-sm text-custom-text-200">Display Properties</h4>
                     <div className="flex flex-wrap items-center gap-2 text-custom-text-200">
-                      {Object.keys(properties).map((key) => {
+                      {Object.keys(displayProperties).map((key) => {
                         if (key === "estimate" && !isEstimateActive) return null;
 
                         if (
-                          issueView === "spreadsheet" &&
+                          displayFilters.layout === "spreadsheet" &&
                           (key === "attachment_count" ||
                             key === "link" ||
                             key === "sub_issue_count")
@@ -288,7 +297,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
                           return null;
 
                         if (
-                          issueView !== "spreadsheet" &&
+                          displayFilters.layout !== "spreadsheet" &&
                           (key === "created_on" || key === "updated_on")
                         )
                           return null;
@@ -298,7 +307,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
                             key={key}
                             type="button"
                             className={`rounded border px-2 py-1 text-xs capitalize ${
-                              properties[key as keyof Properties]
+                              displayProperties[key as keyof Properties]
                                 ? "border-custom-primary bg-custom-primary text-white"
                                 : "border-custom-border-200"
                             }`}
diff --git a/web/components/profile/profile-issues-view.tsx b/web/components/profile/profile-issues-view.tsx
index f4d75974ebe..23835f9d147 100644
--- a/web/components/profile/profile-issues-view.tsx
+++ b/web/components/profile/profile-issues-view.tsx
@@ -50,14 +50,12 @@ export const ProfileIssuesView = () => {
   const {
     groupedIssues,
     mutateProfileIssues,
-    issueView,
-    groupByProperty,
-    orderBy,
+    displayFilters,
+    setDisplayFilters,
     isEmpty,
-    showEmptyGroups,
     filters,
     setFilters,
-    properties,
+    displayProperties,
     params,
   } = useProfileIssues(workspaceSlug?.toString(), userId?.toString());
 
@@ -92,7 +90,12 @@ export const ProfileIssuesView = () => {
     async (result: DropResult) => {
       setTrashBox(false);
 
-      if (!result.destination || !workspaceSlug || !groupedIssues || groupByProperty !== "priority")
+      if (
+        !result.destination ||
+        !workspaceSlug ||
+        !groupedIssues ||
+        displayFilters.group_by !== "priority"
+      )
         return;
 
       const { source, destination } = result;
@@ -108,7 +111,7 @@ export const ProfileIssuesView = () => {
         const sourceGroup = source.droppableId;
         const destinationGroup = destination.droppableId;
 
-        draggedItem[groupByProperty] = destinationGroup as TIssuePriorities;
+        draggedItem[displayFilters.group_by] = destinationGroup as TIssuePriorities;
 
         mutateProfileIssues((prevData: any) => {
           if (!prevData) return prevData;
@@ -121,8 +124,11 @@ export const ProfileIssuesView = () => {
 
           return {
             ...prevData,
-            [sourceGroup]: orderArrayBy(sourceGroupArray, orderBy),
-            [destinationGroup]: orderArrayBy(destinationGroupArray, orderBy),
+            [sourceGroup]: orderArrayBy(sourceGroupArray, displayFilters.order_by ?? "-created_at"),
+            [destinationGroup]: orderArrayBy(
+              destinationGroupArray,
+              displayFilters.order_by ?? "-created_at"
+            ),
           };
         }, false);
 
@@ -140,15 +146,7 @@ export const ProfileIssuesView = () => {
           .catch(() => mutateProfileIssues());
       }
     },
-    [
-      groupByProperty,
-      groupedIssues,
-      handleDeleteIssue,
-      mutateProfileIssues,
-      orderBy,
-      user,
-      workspaceSlug,
-    ]
+    [displayFilters, groupedIssues, handleDeleteIssue, mutateProfileIssues, user, workspaceSlug]
   );
 
   const addIssueToGroup = useCallback(
@@ -157,19 +155,19 @@ export const ProfileIssuesView = () => {
 
       let preloadedValue: string | string[] = groupTitle;
 
-      if (groupByProperty === "labels") {
+      if (displayFilters.group_by === "labels") {
         if (groupTitle === "None") preloadedValue = [];
         else preloadedValue = [groupTitle];
       }
 
-      if (groupByProperty)
+      if (displayFilters.group_by)
         setPreloadedData({
-          [groupByProperty]: preloadedValue,
+          [displayFilters.group_by]: preloadedValue,
           actionType: "createIssue",
         });
       else setPreloadedData({ actionType: "createIssue" });
     },
-    [setCreateIssueModal, setPreloadedData, groupByProperty]
+    [setCreateIssueModal, setPreloadedData, displayFilters.group_by]
   );
 
   const addIssueToDate = useCallback(
@@ -277,7 +275,6 @@ export const ProfileIssuesView = () => {
                   state_group: null,
                   start_date: null,
                   target_date: null,
-                  type: null,
                 })
               }
             />
@@ -289,7 +286,7 @@ export const ProfileIssuesView = () => {
         addIssueToDate={addIssueToDate}
         addIssueToGroup={addIssueToGroup}
         disableUserActions={false}
-        dragDisabled={groupByProperty !== "priority"}
+        dragDisabled={displayFilters.group_by !== "priority"}
         emptyState={{
           title: router.pathname.includes("assigned")
             ? `Issues assigned to ${profileData?.user_data.display_name} will appear here`
@@ -305,15 +302,12 @@ export const ProfileIssuesView = () => {
         trashBox={trashBox}
         setTrashBox={setTrashBox}
         viewProps={{
-          groupByProperty,
           groupedIssues,
+          displayFilters,
           isEmpty,
-          issueView,
           mutateIssues: mutateProfileIssues,
-          orderBy,
           params,
-          properties,
-          showEmptyGroups,
+          properties: displayProperties,
         }}
       />
     </>
diff --git a/web/contexts/issue-view.context.tsx b/web/contexts/issue-view.context.tsx
index 134e0d8f65f..80b81b7d24b 100644
--- a/web/contexts/issue-view.context.tsx
+++ b/web/contexts/issue-view.context.tsx
@@ -11,14 +11,15 @@ import projectService from "services/project.service";
 import cyclesService from "services/cycles.service";
 import modulesService from "services/modules.service";
 import viewsService from "services/views.service";
+// hooks
+import useUserAuth from "hooks/use-user-auth";
 // types
 import {
   IIssueFilterOptions,
-  TIssueViewOptions,
   IProjectMember,
-  TIssueGroupByOptions,
-  TIssueOrderByOptions,
   ICurrentUserResponse,
+  IIssueDisplayFilterOptions,
+  IProjectViewProps,
 } from "types";
 // fetch-keys
 import {
@@ -27,66 +28,34 @@ import {
   USER_PROJECT_VIEW,
   VIEW_DETAILS,
 } from "constants/fetch-keys";
-import useUserAuth from "hooks/use-user-auth";
 
 export const issueViewContext = createContext<ContextType>({} as ContextType);
 
-type IssueViewProps = {
-  issueView: TIssueViewOptions;
-  groupByProperty: TIssueGroupByOptions;
-  orderBy: TIssueOrderByOptions;
-  showEmptyGroups: boolean;
-  showSubIssues: boolean;
-  calendarDateRange: string;
-  filters: IIssueFilterOptions;
-};
-
 type ReducerActionType = {
-  type:
-    | "REHYDRATE_THEME"
-    | "SET_ISSUE_VIEW"
-    | "SET_ORDER_BY_PROPERTY"
-    | "SET_SHOW_EMPTY_STATES"
-    | "SET_CALENDAR_DATE_RANGE"
-    | "SET_FILTERS"
-    | "SET_GROUP_BY_PROPERTY"
-    | "RESET_TO_DEFAULT"
-    | "SET_SHOW_SUB_ISSUES";
-  payload?: Partial<IssueViewProps>;
+  type: "REHYDRATE_THEME" | "SET_DISPLAY_FILTERS" | "SET_FILTERS" | "RESET_TO_DEFAULT";
+  payload?: Partial<IProjectViewProps>;
 };
 
-type ContextType = IssueViewProps & {
-  setGroupByProperty: (property: TIssueGroupByOptions) => void;
-  setOrderBy: (property: TIssueOrderByOptions) => void;
-  setShowEmptyGroups: (property: boolean) => void;
-  setShowSubIssues: (value: boolean) => void;
-  setCalendarDateRange: (property: string) => void;
+type ContextType = IProjectViewProps & {
+  setDisplayFilters: (displayFilter: Partial<IIssueDisplayFilterOptions>) => void;
   setFilters: (filters: Partial<IIssueFilterOptions>, saveToServer?: boolean) => void;
   resetFilterToDefault: () => void;
   setNewFilterDefaultView: () => void;
-  setIssueView: (property: TIssueViewOptions) => void;
 };
 
-type StateType = {
-  issueView: TIssueViewOptions;
-  groupByProperty: TIssueGroupByOptions;
-  orderBy: TIssueOrderByOptions;
-  showEmptyGroups: boolean;
-  showSubIssues: boolean;
-  calendarDateRange: string;
-  filters: IIssueFilterOptions;
-};
+type StateType = IProjectViewProps;
 type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
 
 export const initialState: StateType = {
-  issueView: "list",
-  groupByProperty: null,
-  orderBy: "-created_at",
-  showEmptyGroups: true,
-  showSubIssues: true,
-  calendarDateRange: "",
+  display_filters: {
+    calendar_date_range: "",
+    group_by: null,
+    layout: "list",
+    order_by: "-created_at",
+    show_empty_groups: true,
+    sub_issue: true,
+  },
   filters: {
-    type: null,
     priority: null,
     assignees: null,
     labels: null,
@@ -110,70 +79,14 @@ export const reducer: ReducerFunctionType = (state, action) => {
       return { ...initialState, ...payload, collapsed };
     }
 
-    case "SET_ISSUE_VIEW": {
-      const newState = {
-        ...state,
-        issueView: payload?.issueView || "list",
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_GROUP_BY_PROPERTY": {
-      const newState = {
-        ...state,
-        groupByProperty: payload?.groupByProperty || null,
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_ORDER_BY_PROPERTY": {
-      const newState = {
-        ...state,
-        orderBy: payload?.orderBy || "-created_at",
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_SHOW_EMPTY_STATES": {
-      const newState = {
-        ...state,
-        showEmptyGroups: payload?.showEmptyGroups || true,
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_SHOW_SUB_ISSUES": {
-      const newState = {
-        ...state,
-        showSubIssues: payload?.showSubIssues || true,
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_CALENDAR_DATE_RANGE": {
+    case "SET_DISPLAY_FILTERS": {
       const newState = {
         ...state,
-        calendarDateRange: payload?.calendarDateRange || "",
+        display_filters: {
+          ...state.display_filters,
+          ...payload,
+        },
+        issueView: payload?.display_filters?.layout || "list",
       };
 
       return {
@@ -210,9 +123,13 @@ export const reducer: ReducerFunctionType = (state, action) => {
   }
 };
 
-const saveDataToServer = async (workspaceSlug: string, projectID: string, state: any) => {
+const saveDataToServer = async (
+  workspaceSlug: string,
+  projectId: string,
+  state: IProjectViewProps
+) => {
   mutate<IProjectMember>(
-    workspaceSlug && projectID ? USER_PROJECT_VIEW(projectID as string) : null,
+    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId as string) : null,
     (prevData) => {
       if (!prevData) return prevData;
 
@@ -224,7 +141,7 @@ const saveDataToServer = async (workspaceSlug: string, projectID: string, state:
     false
   );
 
-  await projectService.setProjectView(workspaceSlug, projectID, {
+  await projectService.setProjectView(workspaceSlug, projectId, {
     view_props: state,
   });
 };
@@ -354,44 +271,57 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
       : null
   );
 
-  const setIssueView = useCallback(
-    (property: TIssueViewOptions) => {
+  const setDisplayFilters = useCallback(
+    (displayFilter: Partial<IIssueDisplayFilterOptions>) => {
       dispatch({
-        type: "SET_ISSUE_VIEW",
+        type: "SET_DISPLAY_FILTERS",
         payload: {
-          issueView: property,
+          display_filters: {
+            ...state.display_filters,
+            ...displayFilter,
+          },
         },
       });
 
-      const additionalProperties = {
-        groupByProperty: state.groupByProperty,
-        orderBy: state.orderBy,
+      const additionalProperties: Partial<IIssueDisplayFilterOptions> = {
+        group_by: displayFilter.group_by ?? state.display_filters?.group_by,
+        order_by: displayFilter.order_by ?? state.display_filters?.order_by,
       };
 
-      if (property === "kanban" && state.groupByProperty === null) {
-        additionalProperties.groupByProperty = "state";
+      if (
+        displayFilter.layout &&
+        displayFilter.layout === "kanban" &&
+        state.display_filters?.group_by === null
+      ) {
+        additionalProperties.group_by = "state";
         dispatch({
-          type: "SET_GROUP_BY_PROPERTY",
+          type: "SET_DISPLAY_FILTERS",
           payload: {
-            groupByProperty: "state",
+            display_filters: {
+              group_by: "state",
+            },
           },
         });
       }
-      if (property === "calendar") {
-        additionalProperties.groupByProperty = null;
+      if (displayFilter.layout && displayFilter.layout === "calendar") {
+        additionalProperties.group_by = null;
         dispatch({
-          type: "SET_GROUP_BY_PROPERTY",
+          type: "SET_DISPLAY_FILTERS",
           payload: {
-            groupByProperty: null,
+            display_filters: {
+              group_by: null,
+            },
           },
         });
       }
-      if (property === "gantt_chart") {
-        additionalProperties.orderBy = "sort_order";
+      if (displayFilter.layout && displayFilter.layout === "gantt_chart") {
+        additionalProperties.order_by = "sort_order";
         dispatch({
-          type: "SET_ORDER_BY_PROPERTY",
+          type: "SET_DISPLAY_FILTERS",
           payload: {
-            orderBy: "sort_order",
+            display_filters: {
+              order_by: "sort_order",
+            },
           },
         });
       }
@@ -400,166 +330,14 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
 
       saveDataToServer(workspaceSlug as string, projectId as string, {
         ...state,
-        issueView: property,
-        ...additionalProperties,
-      });
-    },
-    [workspaceSlug, projectId, state]
-  );
-
-  const setGroupByProperty = useCallback(
-    (property: TIssueGroupByOptions) => {
-      dispatch({
-        type: "SET_GROUP_BY_PROPERTY",
-        payload: {
-          groupByProperty: property,
-        },
-      });
-
-      if (!workspaceSlug || !projectId) return;
-
-      mutateMyViewProps((prevData: any) => {
-        if (!prevData) return prevData;
-
-        return {
-          ...prevData,
-          view_props: {
-            ...state,
-            groupByProperty: property,
-          },
-        };
-      }, false);
-
-      saveDataToServer(workspaceSlug as string, projectId as string, {
-        ...state,
-        groupByProperty: property,
-      });
-    },
-    [projectId, workspaceSlug, state, mutateMyViewProps]
-  );
-
-  const setOrderBy = useCallback(
-    (property: TIssueOrderByOptions) => {
-      dispatch({
-        type: "SET_ORDER_BY_PROPERTY",
-        payload: {
-          orderBy: property,
-        },
-      });
-
-      if (!workspaceSlug || !projectId) return;
-
-      mutateMyViewProps((prevData: any) => {
-        if (!prevData) return prevData;
-
-        return {
-          ...prevData,
-          view_props: {
-            ...state,
-            orderBy: property,
-          },
-        };
-      }, false);
-
-      saveDataToServer(workspaceSlug as string, projectId as string, {
-        ...state,
-        orderBy: property,
-      });
-    },
-    [projectId, workspaceSlug, state, mutateMyViewProps]
-  );
-
-  const setShowEmptyGroups = useCallback(
-    (property: boolean) => {
-      dispatch({
-        type: "SET_SHOW_EMPTY_STATES",
-        payload: {
-          showEmptyGroups: property,
-        },
-      });
-
-      if (!workspaceSlug || !projectId) return;
-
-      mutateMyViewProps((prevData: any) => {
-        if (!prevData) return prevData;
-
-        return {
-          ...prevData,
-          view_props: {
-            ...state,
-            showEmptyGroups: property,
-          },
-        };
-      }, false);
-
-      saveDataToServer(workspaceSlug as string, projectId as string, {
-        ...state,
-        showEmptyGroups: property,
-      });
-    },
-    [projectId, workspaceSlug, state, mutateMyViewProps]
-  );
-
-  const setShowSubIssues = useCallback(
-    (property: boolean) => {
-      dispatch({
-        type: "SET_SHOW_SUB_ISSUES",
-        payload: {
-          showSubIssues: property,
+        display_filters: {
+          ...state.display_filters,
+          ...displayFilter,
+          ...additionalProperties,
         },
       });
-
-      if (!workspaceSlug || !projectId) return;
-
-      mutateMyViewProps((prevData: any) => {
-        if (!prevData) return prevData;
-
-        return {
-          ...prevData,
-          view_props: {
-            ...state,
-            showSubIssues: property,
-          },
-        };
-      }, false);
-
-      saveDataToServer(workspaceSlug as string, projectId as string, {
-        ...state,
-        showSubIssues: property,
-      });
     },
-    [projectId, workspaceSlug, state, mutateMyViewProps]
-  );
-
-  const setCalendarDateRange = useCallback(
-    (value: string) => {
-      dispatch({
-        type: "SET_CALENDAR_DATE_RANGE",
-        payload: {
-          calendarDateRange: value,
-        },
-      });
-
-      if (!workspaceSlug || !projectId) return;
-
-      mutateMyViewProps((prevData: any) => {
-        if (!prevData) return prevData;
-
-        return {
-          ...prevData,
-          view_props: {
-            ...state,
-            calendarDateRange: value,
-          },
-        };
-      }, false);
-
-      saveDataToServer(workspaceSlug as string, projectId as string, {
-        ...state,
-        calendarDateRange: value,
-      });
-    },
-    [projectId, workspaceSlug, state, mutateMyViewProps]
+    [workspaceSlug, projectId, state]
   );
 
   const setFilters = useCallback(
@@ -717,12 +495,13 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
       payload: myViewProps?.default_props,
     });
 
-    if (!workspaceSlug || !projectId) return;
+    if (!workspaceSlug || !projectId || !myViewProps) return;
 
-    saveDataToServer(workspaceSlug as string, projectId as string, myViewProps?.default_props);
+    saveDataToServer(workspaceSlug as string, projectId as string, myViewProps.default_props);
   }, [projectId, workspaceSlug, myViewProps]);
 
   useEffect(() => {
+    console.log("running");
     dispatch({
       type: "REHYDRATE_THEME",
       payload: {
@@ -743,22 +522,12 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
   return (
     <issueViewContext.Provider
       value={{
-        issueView: state.issueView,
-        groupByProperty: state.groupByProperty,
-        setGroupByProperty,
-        orderBy: state.orderBy,
-        showEmptyGroups: state.showEmptyGroups,
-        showSubIssues: state.showSubIssues,
-        calendarDateRange: state.calendarDateRange,
-        setCalendarDateRange,
-        setOrderBy,
-        setShowEmptyGroups,
-        setShowSubIssues,
+        display_filters: state.display_filters,
+        setDisplayFilters,
         filters: state.filters,
         setFilters,
         resetFilterToDefault: resetToDefault,
         setNewFilterDefaultView: setNewDefaultView,
-        setIssueView,
       }}
     >
       <ToastAlert />
diff --git a/web/contexts/profile-issues-context.tsx b/web/contexts/profile-issues-context.tsx
index db54f247006..fa8c2d2b84f 100644
--- a/web/contexts/profile-issues-context.tsx
+++ b/web/contexts/profile-issues-context.tsx
@@ -5,66 +5,36 @@ import ToastAlert from "components/toast-alert";
 // types
 import {
   IIssueFilterOptions,
-  TIssueViewOptions,
-  TIssueGroupByOptions,
-  TIssueOrderByOptions,
   Properties,
+  IWorkspaceViewProps,
+  IIssueDisplayFilterOptions,
 } from "types";
 
 export const profileIssuesContext = createContext<ContextType>({} as ContextType);
 
-type IssueViewProps = {
-  issueView: TIssueViewOptions;
-  groupByProperty: TIssueGroupByOptions;
-  orderBy: TIssueOrderByOptions;
-  showEmptyGroups: boolean;
-  showSubIssues: boolean;
-  filters: IIssueFilterOptions;
-  properties: Properties;
-};
-
 type ReducerActionType = {
-  type:
-    | "SET_ISSUE_VIEW"
-    | "SET_ORDER_BY_PROPERTY"
-    | "SET_SHOW_EMPTY_STATES"
-    | "SET_FILTERS"
-    | "SET_PROPERTIES"
-    | "SET_GROUP_BY_PROPERTY"
-    | "RESET_TO_DEFAULT"
-    | "SET_SHOW_SUB_ISSUES";
-  payload?: Partial<IssueViewProps>;
+  type: "SET_DISPLAY_FILTERS" | "SET_FILTERS" | "SET_PROPERTIES" | "RESET_TO_DEFAULT";
+  payload?: Partial<IWorkspaceViewProps>;
 };
 
-type ContextType = IssueViewProps & {
-  setGroupByProperty: (property: TIssueGroupByOptions) => void;
-  setOrderBy: (property: TIssueOrderByOptions) => void;
-  setShowEmptyGroups: (property: boolean) => void;
-  setShowSubIssues: (value: boolean) => void;
+type ContextType = IWorkspaceViewProps & {
+  setDisplayFilters: (displayFilter: Partial<IIssueDisplayFilterOptions>) => void;
   setFilters: (filters: Partial<IIssueFilterOptions>) => void;
   setProperties: (key: keyof Properties) => void;
-  setIssueView: (property: TIssueViewOptions) => void;
 };
 
-type StateType = {
-  issueView: TIssueViewOptions;
-  groupByProperty: TIssueGroupByOptions;
-  orderBy: TIssueOrderByOptions;
-  showEmptyGroups: boolean;
-  showSubIssues: boolean;
-  filters: IIssueFilterOptions;
-  properties: Properties;
-};
+type StateType = IWorkspaceViewProps;
 type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
 
 export const initialState: StateType = {
-  issueView: "list",
-  groupByProperty: null,
-  orderBy: "-created_at",
-  showEmptyGroups: true,
-  showSubIssues: true,
+  display_filters: {
+    group_by: null,
+    layout: "list",
+    order_by: "-created_at",
+    show_empty_groups: true,
+    sub_issue: true,
+  },
   filters: {
-    type: null,
     priority: null,
     assignees: null,
     labels: null,
@@ -75,7 +45,7 @@ export const initialState: StateType = {
     start_date: null,
     target_date: null,
   },
-  properties: {
+  display_properties: {
     assignee: true,
     start_date: true,
     due_date: true,
@@ -96,58 +66,14 @@ export const reducer: ReducerFunctionType = (state, action) => {
   const { type, payload } = action;
 
   switch (type) {
-    case "SET_ISSUE_VIEW": {
-      const newState = {
-        ...state,
-        issueView: payload?.issueView || "list",
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_GROUP_BY_PROPERTY": {
-      const newState = {
-        ...state,
-        groupByProperty: payload?.groupByProperty || null,
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_ORDER_BY_PROPERTY": {
-      const newState = {
-        ...state,
-        orderBy: payload?.orderBy || "-created_at",
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_SHOW_EMPTY_STATES": {
+    case "SET_DISPLAY_FILTERS": {
       const newState = {
         ...state,
-        showEmptyGroups: payload?.showEmptyGroups || true,
-      };
-
-      return {
-        ...state,
-        ...newState,
-      };
-    }
-
-    case "SET_SHOW_SUB_ISSUES": {
-      const newState = {
-        ...state,
-        showSubIssues: payload?.showSubIssues || true,
+        display_filters: {
+          ...state.display_filters,
+          ...payload,
+        },
+        issueView: payload?.display_filters?.layout || "list",
       };
 
       return {
@@ -175,8 +101,8 @@ export const reducer: ReducerFunctionType = (state, action) => {
       const newState = {
         ...state,
         properties: {
-          ...state.properties,
-          ...payload?.properties,
+          ...state.display_properties,
+          ...payload?.display_properties,
         },
       };
 
@@ -197,20 +123,29 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
 }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
-  const setIssueView = useCallback(
-    (property: TIssueViewOptions) => {
+  const setDisplayFilters = useCallback(
+    (displayFilter: Partial<IIssueDisplayFilterOptions>) => {
       dispatch({
-        type: "SET_ISSUE_VIEW",
+        type: "SET_DISPLAY_FILTERS",
         payload: {
-          issueView: property,
+          display_filters: {
+            ...state.display_filters,
+            ...displayFilter,
+          },
         },
       });
 
-      if (property === "kanban" && state.groupByProperty === null) {
+      if (
+        displayFilter.layout &&
+        displayFilter.layout === "kanban" &&
+        state.display_filters.group_by === null
+      ) {
         dispatch({
-          type: "SET_GROUP_BY_PROPERTY",
+          type: "SET_DISPLAY_FILTERS",
           payload: {
-            groupByProperty: "state_detail.group",
+            display_filters: {
+              group_by: "state_detail.group",
+            },
           },
         });
       }
@@ -218,42 +153,6 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
     [state]
   );
 
-  const setGroupByProperty = useCallback((property: TIssueGroupByOptions) => {
-    dispatch({
-      type: "SET_GROUP_BY_PROPERTY",
-      payload: {
-        groupByProperty: property,
-      },
-    });
-  }, []);
-
-  const setOrderBy = useCallback((property: TIssueOrderByOptions) => {
-    dispatch({
-      type: "SET_ORDER_BY_PROPERTY",
-      payload: {
-        orderBy: property,
-      },
-    });
-  }, []);
-
-  const setShowEmptyGroups = useCallback((property: boolean) => {
-    dispatch({
-      type: "SET_SHOW_EMPTY_STATES",
-      payload: {
-        showEmptyGroups: property,
-      },
-    });
-  }, []);
-
-  const setShowSubIssues = useCallback((property: boolean) => {
-    dispatch({
-      type: "SET_SHOW_SUB_ISSUES",
-      payload: {
-        showSubIssues: property,
-      },
-    });
-  }, []);
-
   const setFilters = useCallback(
     (property: Partial<IIssueFilterOptions>) => {
       Object.keys(property).forEach((key) => {
@@ -279,9 +178,9 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
       dispatch({
         type: "SET_PROPERTIES",
         payload: {
-          properties: {
-            ...state.properties,
-            [key]: !state.properties[key],
+          display_properties: {
+            ...state.display_properties,
+            [key]: !state.display_properties[key],
           },
         },
       });
@@ -292,19 +191,11 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
   return (
     <profileIssuesContext.Provider
       value={{
-        issueView: state.issueView,
-        setIssueView,
-        groupByProperty: state.groupByProperty,
-        setGroupByProperty,
-        orderBy: state.orderBy,
-        setOrderBy,
-        showEmptyGroups: state.showEmptyGroups,
-        setShowEmptyGroups,
-        showSubIssues: state.showSubIssues,
-        setShowSubIssues,
+        display_filters: state.display_filters,
+        setDisplayFilters,
         filters: state.filters,
         setFilters,
-        properties: state.properties,
+        display_properties: state.display_properties,
         setProperties,
       }}
     >
diff --git a/web/hooks/gantt-chart/cycle-issues-view.tsx b/web/hooks/gantt-chart/cycle-issues-view.tsx
index 8d32d5e4b41..21af6666121 100644
--- a/web/hooks/gantt-chart/cycle-issues-view.tsx
+++ b/web/hooks/gantt-chart/cycle-issues-view.tsx
@@ -12,12 +12,12 @@ const useGanttChartCycleIssues = (
   projectId: string | undefined,
   cycleId: string | undefined
 ) => {
-  const { orderBy, filters, showSubIssues } = useIssuesView();
+  const { displayFilters, filters } = useIssuesView();
 
   const params: any = {
-    order_by: orderBy,
-    type: filters?.type ? filters?.type : undefined,
-    sub_issue: showSubIssues,
+    order_by: displayFilters.order_by,
+    type: displayFilters?.type ? displayFilters?.type : undefined,
+    sub_issue: displayFilters.sub_issue,
     assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
     state: filters?.state ? filters?.state.join(",") : undefined,
     priority: filters?.priority ? filters?.priority.join(",") : undefined,
diff --git a/web/hooks/gantt-chart/issue-view.tsx b/web/hooks/gantt-chart/issue-view.tsx
index ba9465114b4..8b24a566c0f 100644
--- a/web/hooks/gantt-chart/issue-view.tsx
+++ b/web/hooks/gantt-chart/issue-view.tsx
@@ -8,12 +8,12 @@ import useIssuesView from "hooks/use-issues-view";
 import { PROJECT_ISSUES_LIST_WITH_PARAMS } from "constants/fetch-keys";
 
 const useGanttChartIssues = (workspaceSlug: string | undefined, projectId: string | undefined) => {
-  const { orderBy, filters, showSubIssues } = useIssuesView();
+  const { displayFilters, filters } = useIssuesView();
 
   const params: any = {
-    order_by: orderBy,
-    type: filters?.type ? filters?.type : undefined,
-    sub_issue: showSubIssues,
+    order_by: displayFilters.order_by,
+    type: displayFilters?.type ? displayFilters?.type : undefined,
+    sub_issue: displayFilters.sub_issue,
     assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
     state: filters?.state ? filters?.state.join(",") : undefined,
     priority: filters?.priority ? filters?.priority.join(",") : undefined,
diff --git a/web/hooks/gantt-chart/module-issues-view.tsx b/web/hooks/gantt-chart/module-issues-view.tsx
index 3d88cab4f29..5be58702ef7 100644
--- a/web/hooks/gantt-chart/module-issues-view.tsx
+++ b/web/hooks/gantt-chart/module-issues-view.tsx
@@ -12,12 +12,12 @@ const useGanttChartModuleIssues = (
   projectId: string | undefined,
   moduleId: string | undefined
 ) => {
-  const { orderBy, filters, showSubIssues } = useIssuesView();
+  const { displayFilters, filters } = useIssuesView();
 
   const params: any = {
-    order_by: orderBy,
-    type: filters?.type ? filters?.type : undefined,
-    sub_issue: showSubIssues,
+    order_by: displayFilters.order_by,
+    type: displayFilters?.type ? displayFilters?.type : undefined,
+    sub_issue: displayFilters.sub_issue,
     assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
     state: filters?.state ? filters?.state.join(",") : undefined,
     priority: filters?.priority ? filters?.priority.join(",") : undefined,
diff --git a/web/hooks/my-issues/use-my-issues-filter.tsx b/web/hooks/my-issues/use-my-issues-filter.tsx
index 2de72918f2d..17cb81c6dc7 100644
--- a/web/hooks/my-issues/use-my-issues-filter.tsx
+++ b/web/hooks/my-issues/use-my-issues-filter.tsx
@@ -6,33 +6,25 @@ import useSWR, { mutate } from "swr";
 import workspaceService from "services/workspace.service";
 // types
 import {
+  IIssueDisplayFilterOptions,
   IIssueFilterOptions,
   IWorkspaceMember,
   IWorkspaceViewProps,
   Properties,
-  TIssueGroupByOptions,
-  TIssueOrderByOptions,
-  TIssueViewOptions,
 } from "types";
 // fetch-keys
 import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
 
 const initialValues: IWorkspaceViewProps = {
-  issueView: "list",
-  filters: {
-    assignees: null,
-    created_by: null,
-    labels: null,
-    priority: null,
-    state_group: null,
-    subscriber: null,
-    start_date: null,
-    target_date: null,
+  display_filters: {
+    group_by: null,
+    layout: "list",
+    order_by: "-created_at",
+    show_empty_groups: true,
+    sub_issue: true,
     type: null,
   },
-  groupByProperty: null,
-  orderBy: "-created_at",
-  properties: {
+  display_properties: {
     assignee: true,
     start_date: true,
     due_date: true,
@@ -47,7 +39,16 @@ const initialValues: IWorkspaceViewProps = {
     created_on: true,
     updated_on: true,
   },
-  showEmptyGroups: true,
+  filters: {
+    assignees: null,
+    created_by: null,
+    labels: null,
+    priority: null,
+    state_group: null,
+    subscriber: null,
+    start_date: null,
+    target_date: null,
+  },
 };
 
 const useMyIssuesFilters = (workspaceSlug: string | undefined) => {
@@ -90,59 +91,39 @@ const useMyIssuesFilters = (workspaceSlug: string | undefined) => {
     [myWorkspace, workspaceSlug]
   );
 
-  const issueView = (myWorkspace?.view_props ?? initialValues).issueView;
-  const groupBy = (myWorkspace?.view_props ?? initialValues).groupByProperty;
-  const orderBy = (myWorkspace?.view_props ?? initialValues).orderBy;
-  const showEmptyGroups = (myWorkspace?.view_props ?? initialValues).showEmptyGroups;
+  const groupBy = (myWorkspace?.view_props ?? initialValues).display_filters.group_by;
   const filters = (myWorkspace?.view_props ?? initialValues).filters;
 
-  const setIssueView = useCallback(
-    (newView: TIssueViewOptions) => {
+  const setDisplayFilters = useCallback(
+    (displayFilter: Partial<IIssueDisplayFilterOptions>) => {
       const payload: Partial<IWorkspaceViewProps> = {
-        issueView: newView,
+        display_filters: {
+          ...myWorkspace?.view_props?.display_filters,
+          ...displayFilter,
+        },
       };
 
-      if (newView === "kanban" && groupBy === null) payload.groupByProperty = "state_detail.group";
+      if (
+        displayFilter.layout &&
+        displayFilter.layout === "kanban" &&
+        groupBy === null &&
+        payload.display_filters
+      )
+        payload.display_filters.group_by = "state_detail.group";
 
       saveData(payload);
     },
-    [groupBy, saveData]
-  );
-
-  const setGroupBy = useCallback(
-    (newGroup: TIssueGroupByOptions) => {
-      saveData({
-        groupByProperty: newGroup,
-      });
-    },
-    [saveData]
-  );
-
-  const setOrderBy = useCallback(
-    (newOrderBy: TIssueOrderByOptions) => {
-      saveData({
-        orderBy: newOrderBy,
-      });
-    },
-    [saveData]
+    [groupBy, myWorkspace?.view_props.display_filters, saveData]
   );
 
-  const setShowEmptyGroups = useCallback(() => {
-    if (!myWorkspace) return;
-
-    saveData({
-      showEmptyGroups: !myWorkspace?.view_props?.showEmptyGroups,
-    });
-  }, [myWorkspace, saveData]);
-
   const setProperty = useCallback(
     (key: keyof Properties) => {
       if (!myWorkspace) return;
 
       saveData({
-        properties: {
-          ...myWorkspace.view_props?.properties,
-          [key]: !myWorkspace.view_props?.properties[key],
+        display_properties: {
+          ...myWorkspace.view_props?.display_properties,
+          [key]: !myWorkspace.view_props?.display_properties[key],
         },
       });
     },
@@ -174,30 +155,24 @@ const useMyIssuesFilters = (workspaceSlug: string | undefined) => {
   }, [myWorkspace, workspaceSlug]);
 
   const newProperties: Properties = {
-    assignee: myWorkspace?.view_props.properties.assignee ?? true,
-    start_date: myWorkspace?.view_props.properties.start_date ?? true,
-    due_date: myWorkspace?.view_props.properties.due_date ?? true,
-    key: myWorkspace?.view_props.properties.key ?? true,
-    labels: myWorkspace?.view_props.properties.labels ?? true,
-    priority: myWorkspace?.view_props.properties.priority ?? true,
-    state: myWorkspace?.view_props.properties.state ?? true,
-    sub_issue_count: myWorkspace?.view_props.properties.sub_issue_count ?? true,
-    attachment_count: myWorkspace?.view_props.properties.attachment_count ?? true,
-    link: myWorkspace?.view_props.properties.link ?? true,
-    estimate: myWorkspace?.view_props.properties.estimate ?? true,
-    created_on: myWorkspace?.view_props.properties.created_on ?? true,
-    updated_on: myWorkspace?.view_props.properties.updated_on ?? true,
+    assignee: myWorkspace?.view_props.display_properties.assignee ?? true,
+    start_date: myWorkspace?.view_props.display_properties.start_date ?? true,
+    due_date: myWorkspace?.view_props.display_properties.due_date ?? true,
+    key: myWorkspace?.view_props.display_properties.key ?? true,
+    labels: myWorkspace?.view_props.display_properties.labels ?? true,
+    priority: myWorkspace?.view_props.display_properties.priority ?? true,
+    state: myWorkspace?.view_props.display_properties.state ?? true,
+    sub_issue_count: myWorkspace?.view_props.display_properties.sub_issue_count ?? true,
+    attachment_count: myWorkspace?.view_props.display_properties.attachment_count ?? true,
+    link: myWorkspace?.view_props.display_properties.link ?? true,
+    estimate: myWorkspace?.view_props.display_properties.estimate ?? true,
+    created_on: myWorkspace?.view_props.display_properties.created_on ?? true,
+    updated_on: myWorkspace?.view_props.display_properties.updated_on ?? true,
   };
 
   return {
-    issueView,
-    setIssueView,
-    groupBy,
-    setGroupBy,
-    orderBy,
-    setOrderBy,
-    showEmptyGroups,
-    setShowEmptyGroups,
+    displayFilters: myWorkspace?.view_props?.display_filters,
+    setDisplayFilters,
     properties: newProperties,
     setProperty,
     filters,
diff --git a/web/hooks/my-issues/use-my-issues.tsx b/web/hooks/my-issues/use-my-issues.tsx
index 2cb97ecd01b..3e79d6f1e3b 100644
--- a/web/hooks/my-issues/use-my-issues.tsx
+++ b/web/hooks/my-issues/use-my-issues.tsx
@@ -16,20 +16,20 @@ import { USER_ISSUES } from "constants/fetch-keys";
 const useMyIssues = (workspaceSlug: string | undefined) => {
   const router = useRouter();
 
-  const { filters, groupBy, orderBy } = useMyIssuesFilters(workspaceSlug);
+  const { filters, displayFilters } = useMyIssuesFilters(workspaceSlug);
 
   const params: any = {
     assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
     created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
-    group_by: groupBy,
+    group_by: displayFilters?.group_by,
     labels: filters?.labels ? filters?.labels.join(",") : undefined,
-    order_by: orderBy,
+    order_by: displayFilters?.order_by,
     priority: filters?.priority ? filters?.priority.join(",") : undefined,
     state_group: filters?.state_group ? filters?.state_group.join(",") : undefined,
     subscriber: filters?.subscriber ? filters?.subscriber.join(",") : undefined,
     start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
     target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
-    type: filters?.type ? filters?.type : undefined,
+    type: displayFilters?.type,
   };
 
   const { data: myIssues, mutate: mutateMyIssues } = useSWR(
@@ -53,7 +53,7 @@ const useMyIssues = (workspaceSlug: string | undefined) => {
         allIssues: myIssues,
       };
 
-    if (groupBy === "state_detail.group") {
+    if (displayFilters?.group_by === "state_detail.group") {
       return myIssues
         ? Object.assign(
             {
@@ -69,7 +69,7 @@ const useMyIssues = (workspaceSlug: string | undefined) => {
     }
 
     return myIssues;
-  }, [groupBy, myIssues]);
+  }, [displayFilters, myIssues]);
 
   const isEmpty =
     Object.values(groupedIssues ?? {}).every((group) => group.length === 0) ||
diff --git a/web/hooks/use-calendar-issues-view.tsx b/web/hooks/use-calendar-issues-view.tsx
index d69864c2d77..362cd741f6b 100644
--- a/web/hooks/use-calendar-issues-view.tsx
+++ b/web/hooks/use-calendar-issues-view.tsx
@@ -22,14 +22,12 @@ import {
 
 const useCalendarIssuesView = () => {
   const {
-    issueView,
-    calendarDateRange,
-    setCalendarDateRange,
+    display_filters: displayFilters,
+    setDisplayFilters,
     filters,
     setFilters,
     resetFilterToDefault,
     setNewFilterDefaultView,
-    setIssueView,
   } = useContext(issueViewContext);
 
   const router = useRouter();
@@ -39,11 +37,11 @@ const useCalendarIssuesView = () => {
     assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
     state: filters?.state ? filters?.state.join(",") : undefined,
     priority: filters?.priority ? filters?.priority.join(",") : undefined,
-    type: filters?.type ? filters?.type : undefined,
+    type: displayFilters?.type ? displayFilters?.type : undefined,
     labels: filters?.labels ? filters?.labels.join(",") : undefined,
     created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
     start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
-    target_date: calendarDateRange,
+    target_date: displayFilters?.calendar_date_range,
   };
 
   const { data: projectCalendarIssues } = useSWR(
@@ -103,16 +101,14 @@ const useCalendarIssuesView = () => {
     : (projectCalendarIssues as IIssue[]);
 
   return {
-    issueView,
+    displayFilters,
+    setDisplayFilters,
     calendarIssues: calendarIssues ?? [],
-    calendarDateRange,
-    setCalendarDateRange,
     filters,
     setFilters,
     params,
     resetFilterToDefault,
     setNewFilterDefaultView,
-    setIssueView,
   } as const;
 };
 
diff --git a/web/hooks/use-issues-view.tsx b/web/hooks/use-issues-view.tsx
index 767dbdb4ce7..111b6971fa3 100644
--- a/web/hooks/use-issues-view.tsx
+++ b/web/hooks/use-issues-view.tsx
@@ -27,22 +27,12 @@ import {
 
 const useIssuesView = () => {
   const {
-    issueView,
-    groupByProperty,
-    setGroupByProperty,
-    orderBy,
-    setOrderBy,
-    showEmptyGroups,
-    showSubIssues,
-    setShowEmptyGroups,
-    setShowSubIssues,
-    calendarDateRange,
-    setCalendarDateRange,
+    display_filters: displayFilters,
+    setDisplayFilters,
     filters,
     setFilters,
     resetFilterToDefault,
     setNewFilterDefaultView,
-    setIssueView,
   } = useContext(issueViewContext);
 
   const router = useRouter();
@@ -50,17 +40,17 @@ const useIssuesView = () => {
   const isArchivedIssues = router.pathname.includes("archived-issues");
 
   const params: any = {
-    order_by: orderBy,
-    group_by: groupByProperty,
+    order_by: displayFilters?.order_by,
+    group_by: displayFilters?.group_by,
     assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
     state: filters?.state ? filters?.state.join(",") : undefined,
     priority: filters?.priority ? filters?.priority.join(",") : undefined,
-    type: filters?.type ? filters?.type : undefined,
+    type: displayFilters?.type ? displayFilters?.type : undefined,
     labels: filters?.labels ? filters?.labels.join(",") : undefined,
     created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
     start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
     target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
-    sub_issue: showSubIssues,
+    sub_issue: displayFilters?.sub_issue,
   };
 
   const { data: projectIssues, mutate: mutateProjectIssues } = useSWR(
@@ -133,9 +123,9 @@ const useIssuesView = () => {
   const backlogStatesList = statesList?.filter((state) => state.group === "backlog");
 
   const stateIds =
-    filters && filters?.type === "active"
+    displayFilters && displayFilters?.type === "active"
       ? activeStatesList?.map((state) => state.id)
-      : filters?.type === "backlog"
+      : displayFilters?.type === "backlog"
       ? backlogStatesList?.map((state) => state.id)
       : statesList?.map((state) => state.id);
 
@@ -164,17 +154,17 @@ const useIssuesView = () => {
       : projectIssues;
 
     if (Array.isArray(issuesToGroup)) return { allIssues: issuesToGroup };
-    if (groupByProperty === "state")
+    if (displayFilters?.group_by === "state")
       return issuesToGroup ? Object.assign(emptyStatesObject, issuesToGroup) : undefined;
 
     return issuesToGroup;
   }, [
+    displayFilters?.group_by,
     projectIssues,
     cycleIssues,
     moduleIssues,
     viewIssues,
     projectArchivedIssues,
-    groupByProperty,
     cycleId,
     moduleId,
     viewId,
@@ -187,6 +177,11 @@ const useIssuesView = () => {
     Object.keys(groupedByIssues ?? {}).length === 0;
 
   return {
+    displayFilters: {
+      ...displayFilters,
+      layout: isArchivedIssues ? "list" : displayFilters?.layout,
+    },
+    setDisplayFilters,
     groupedByIssues,
     mutateIssues: cycleId
       ? mutateCycleIssues
@@ -197,24 +192,12 @@ const useIssuesView = () => {
       : isArchivedIssues
       ? mutateProjectArchivedIssues
       : mutateProjectIssues,
-    issueView: isArchivedIssues ? "list" : issueView,
-    groupByProperty,
-    setGroupByProperty,
-    orderBy,
-    setOrderBy,
-    showEmptyGroups: isArchivedIssues ? false : showEmptyGroups,
-    showSubIssues,
-    setShowEmptyGroups,
-    setShowSubIssues,
-    calendarDateRange,
-    setCalendarDateRange,
     filters,
     setFilters,
     params,
     isEmpty,
     resetFilterToDefault,
     setNewFilterDefaultView,
-    setIssueView,
   } as const;
 };
 
diff --git a/web/hooks/use-profile-issues.tsx b/web/hooks/use-profile-issues.tsx
index c232199bc8d..a83af019f4e 100644
--- a/web/hooks/use-profile-issues.tsx
+++ b/web/hooks/use-profile-issues.tsx
@@ -16,19 +16,11 @@ import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
 
 const useProfileIssues = (workspaceSlug: string | undefined, userId: string | undefined) => {
   const {
-    issueView,
-    setIssueView,
-    groupByProperty,
-    setGroupByProperty,
-    orderBy,
-    setOrderBy,
-    showEmptyGroups,
-    setShowEmptyGroups,
-    showSubIssues,
-    setShowSubIssues,
+    display_filters: displayFilters,
+    setDisplayFilters,
     filters,
     setFilters,
-    properties,
+    display_properties: displayProperties,
     setProperties,
   } = useContext(profileIssuesContext);
 
@@ -39,14 +31,14 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
   const params: any = {
     assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
     created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
-    group_by: groupByProperty,
+    group_by: displayFilters.group_by,
     labels: filters?.labels ? filters?.labels.join(",") : undefined,
-    order_by: orderBy,
+    order_by: displayFilters.order_by,
     priority: filters?.priority ? filters?.priority.join(",") : undefined,
     state_group: filters?.state_group ? filters?.state_group.join(",") : undefined,
     start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
     target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
-    type: filters?.type ? filters?.type : undefined,
+    type: displayFilters?.type ? displayFilters?.type : undefined,
     subscriber: filters?.subscriber ? filters?.subscriber.join(",") : undefined,
   };
 
@@ -71,7 +63,7 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
         allIssues: userProfileIssues,
       };
 
-    if (groupByProperty === "state_detail.group") {
+    if (displayFilters.group_by === "state_detail.group") {
       return userProfileIssues
         ? Object.assign(
             {
@@ -87,7 +79,7 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
     }
 
     return userProfileIssues;
-  }, [groupByProperty, userProfileIssues]);
+  }, [displayFilters.group_by, userProfileIssues]);
 
   useEffect(() => {
     if (!userId || !filters) return;
@@ -120,19 +112,11 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
 
   return {
     groupedIssues,
-    issueView,
-    setIssueView,
-    groupByProperty,
-    setGroupByProperty,
-    orderBy,
-    setOrderBy,
-    showEmptyGroups,
-    setShowEmptyGroups,
-    showSubIssues,
-    setShowSubIssues,
+    displayFilters,
+    setDisplayFilters,
     filters,
     setFilters,
-    properties,
+    displayProperties,
     setProperties,
     isEmpty,
     mutateProfileIssues,
diff --git a/web/hooks/use-spreadsheet-issues-view.tsx b/web/hooks/use-spreadsheet-issues-view.tsx
index 145313dac4b..5aa86c600f9 100644
--- a/web/hooks/use-spreadsheet-issues-view.tsx
+++ b/web/hooks/use-spreadsheet-issues-view.tsx
@@ -22,25 +22,23 @@ import {
 
 const useSpreadsheetIssuesView = () => {
   const {
-    issueView,
-    orderBy,
-    setOrderBy,
+    display_filters: displayFilters,
+    setDisplayFilters,
     filters,
     setFilters,
     resetFilterToDefault,
     setNewFilterDefaultView,
-    setIssueView,
   } = useContext(issueViewContext);
 
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
 
   const params: any = {
-    order_by: orderBy,
+    order_by: displayFilters?.order_by,
     assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
     state: filters?.state ? filters?.state.join(",") : undefined,
     priority: filters?.priority ? filters?.priority.join(",") : undefined,
-    type: filters?.type ? filters?.type : undefined,
+    type: displayFilters?.type ? displayFilters?.type : undefined,
     labels: filters?.labels ? filters?.labels.join(",") : undefined,
     created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
     start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
@@ -105,7 +103,8 @@ const useSpreadsheetIssuesView = () => {
     : (projectSpreadsheetIssues as IIssue[]);
 
   return {
-    issueView,
+    displayFilters,
+    setDisplayFilters,
     mutateIssues: cycleId
       ? mutateCycleSpreadsheetIssues
       : moduleId
@@ -114,14 +113,11 @@ const useSpreadsheetIssuesView = () => {
       ? mutateViewSpreadsheetIssues
       : mutateProjectSpreadsheetIssues,
     spreadsheetIssues: spreadsheetIssues ?? [],
-    orderBy,
-    setOrderBy,
     filters,
     setFilters,
     params,
     resetFilterToDefault,
     setNewFilterDefaultView,
-    setIssueView,
   } as const;
 };
 
diff --git a/web/pages/[workspaceSlug]/me/my-issues.tsx b/web/pages/[workspaceSlug]/me/my-issues.tsx
index 2571727815f..5b6ae3ecd87 100644
--- a/web/pages/[workspaceSlug]/me/my-issues.tsx
+++ b/web/pages/[workspaceSlug]/me/my-issues.tsx
@@ -7,7 +7,6 @@ import { PlusIcon } from "@heroicons/react/24/outline";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 // hooks
-import useProjects from "hooks/use-projects";
 import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
 // components
 import { MyIssuesView, MyIssuesViewOptions } from "components/issues";
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
index b2c0ab42845..d09ee9ffa69 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
@@ -4,8 +4,6 @@ import useSWR from "swr";
 
 // services
 import projectService from "services/project.service";
-// hooks
-import useIssuesView from "hooks/use-issues-view";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // contexts
@@ -28,8 +26,6 @@ const ProjectArchivedIssues: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { showEmptyGroups, setShowEmptyGroups } = useIssuesView();
-
   const { data: projectDetails } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
     workspaceSlug && projectId
diff --git a/web/services/project.service.ts b/web/services/project.service.ts
index 0c2712c5622..0d97b9efbe3 100644
--- a/web/services/project.service.ts
+++ b/web/services/project.service.ts
@@ -12,7 +12,7 @@ import type {
   IProjectMemberInvitation,
   ISearchIssueResponse,
   ProjectPreferences,
-  ProjectViewTheme,
+  IProjectViewProps,
   TProjectIssuesSearchParams,
 } from "types";
 
@@ -297,8 +297,8 @@ export class ProjectServices extends APIService {
     workspaceSlug: string,
     projectId: string,
     data: {
-      view_props?: ProjectViewTheme;
-      default_props?: ProjectViewTheme;
+      view_props?: IProjectViewProps;
+      default_props?: IProjectViewProps;
       preferences?: ProjectPreferences;
       sort_order?: number;
     }
diff --git a/web/types/issues.d.ts b/web/types/issues.d.ts
index 05fbb05aced..b21f5e52136 100644
--- a/web/types/issues.d.ts
+++ b/web/types/issues.d.ts
@@ -15,6 +15,7 @@ import type {
   TIssueGroupByOptions,
   TIssueViewOptions,
   TIssueOrderByOptions,
+  IIssueDisplayFilterOptions,
 } from "types";
 
 export interface IIssueCycle {
@@ -235,19 +236,16 @@ export interface IIssueAttachment {
 
 export interface IIssueViewProps {
   groupedIssues: { [key: string]: IIssue[] } | undefined;
-  groupByProperty: TIssueGroupByOptions;
+  displayFilters: IIssueDisplayFilterOptions | undefined;
   isEmpty: boolean;
-  issueView: TIssueViewOptions;
   mutateIssues: KeyedMutator<
     | IIssue[]
     | {
         [key: string]: IIssue[];
       }
   >;
-  orderBy: TIssueOrderByOptions;
   params: any;
   properties: Properties;
-  showEmptyGroups: boolean;
 }
 
 export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | null;
diff --git a/web/types/view-props.d.ts b/web/types/view-props.d.ts
index 0514fe52170..a4dc5563807 100644
--- a/web/types/view-props.d.ts
+++ b/web/types/view-props.d.ts
@@ -29,15 +29,15 @@ export type TIssueOrderByOptions =
   | "-start_date";
 
 export interface IIssueFilterOptions {
-  assignees: string[] | null;
-  created_by: string[] | null;
-  labels: string[] | null;
-  priority: string[] | null;
-  start_date: string[] | null;
-  state: string[] | null;
-  state_group: TStateGroups[] | null;
-  subscriber: string[] | null;
-  target_date: string[] | null;
+  assignees?: string[] | null;
+  created_by?: string[] | null;
+  labels?: string[] | null;
+  priority?: string[] | null;
+  start_date?: string[] | null;
+  state?: string[] | null;
+  state_group?: TStateGroups[] | null;
+  subscriber?: string[] | null;
+  target_date?: string[] | null;
 }
 
 export interface IIssueDisplayFilterOptions {
@@ -52,6 +52,12 @@ export interface IIssueDisplayFilterOptions {
 }
 
 export interface IProjectViewProps {
+  display_filters: IIssueDisplayFilterOptions | undefined;
   filters: IIssueFilterOptions;
+}
+
+export interface IWorkspaceViewProps {
   display_filters: IIssueDisplayFilterOptions;
+  display_properties: Properties;
+  filters: IIssueFilterOptions;
 }
diff --git a/web/types/workspace.d.ts b/web/types/workspace.d.ts
index 635aea2db65..de0bc93e240 100644
--- a/web/types/workspace.d.ts
+++ b/web/types/workspace.d.ts
@@ -3,6 +3,7 @@ import type {
   IProjectMember,
   IUser,
   IUserMemberLite,
+  IWorkspaceViewProps,
   TIssueGroupByOptions,
   TIssueOrderByOptions,
   TIssueViewOptions,
@@ -63,15 +64,6 @@ export type Properties = {
   updated_on: boolean;
 };
 
-export interface IWorkspaceViewProps {
-  properties: Properties;
-  issueView: TIssueViewOptions;
-  groupByProperty: TIssueGroupByOptions;
-  orderBy: TIssueOrderByOptions;
-  filters: Partial<IIssueFilterOptions>;
-  showEmptyGroups: boolean;
-}
-
 export interface IWorkspaceMember {
   readonly id: string;
   workspace: IWorkspace;