From 78c077b8e72ec9790ed68efcd506d9400f5905fe Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Sat, 14 Oct 2023 12:01:11 +0530
Subject: [PATCH 1/3] fix: service imports

---
 .../scope-and-demand/scope-and-demand.tsx     |   5 +-
 .../change-interface-theme.tsx                |   3 +-
 web/components/command-palette/command-k.tsx  |  15 +-
 .../command-palette/command-pallette.tsx      |   9 +-
 .../issue/change-issue-assignee.tsx           |   3 +-
 .../issue/change-issue-priority.tsx           |  11 +-
 .../issue/change-issue-state.tsx              |  14 +-
 .../common/product-updates-modal.tsx          |   6 +-
 web/components/core/activity.tsx              |   7 +-
 web/components/core/image-picker-popover.tsx  |  10 +-
 .../core/modals/gpt-assistant-modal.tsx       |   5 +-
 .../core/modals/image-upload-modal.tsx        |   5 +-
 .../core/views/board-view/all-boards.tsx      | 152 -----
 .../core/views/board-view/board-header.tsx    | 231 --------
 web/components/core/views/board-view/index.ts |   5 -
 .../board-view/inline-create-issue-form.tsx   |  62 --
 .../core/views/board-view/single-board.tsx    | 289 ---------
 .../core/views/board-view/single-issue.tsx    | 547 ------------------
 .../views/calendar-view/calendar-header.tsx   | 153 -----
 .../core/views/calendar-view/calendar.tsx     | 217 -------
 .../core/views/calendar-view/index.ts         |   5 -
 .../inline-create-issue-form.tsx              | 102 ----
 .../core/views/calendar-view/single-date.tsx  | 126 ----
 .../core/views/calendar-view/single-issue.tsx | 403 -------------
 web/components/core/views/list-view/index.ts  |   4 -
 .../list-view/inline-create-issue-form.tsx    |  62 --
 .../core/views/list-view/single-issue.tsx     | 511 ----------------
 .../core/views/list-view/single-list.tsx      | 337 -----------
 .../cycles/active-cycle-details.tsx           |  13 +-
 .../completed-cycles-list.tsx                 |   7 +-
 web/components/cycles/delete-cycle-modal.tsx  |   5 +-
 web/components/cycles/modal.tsx               |   5 +-
 web/components/estimates/single-estimate.tsx  |   5 +-
 .../integration/delete-import-modal.tsx       |   8 +-
 .../integration/single-integration-card.tsx   |  10 +-
 web/components/ui/product-updates-modal.tsx   |  10 +-
 web/components/web-view/select-blocker-to.tsx |  25 +-
 web/components/web-view/select-cycle.tsx      |  22 +-
 web/components/web-view/select-module.tsx     |  21 +-
 .../[projectId]/settings/integrations.tsx     |  14 +-
 .../projects/[projectId]/settings/labels.tsx  |  16 +-
 .../projects/[projectId]/settings/members.tsx |   8 +-
 .../projects/[projectId]/views/[viewId].tsx   |  15 +-
 43 files changed, 162 insertions(+), 3321 deletions(-)
 delete mode 100644 web/components/core/views/board-view/all-boards.tsx
 delete mode 100644 web/components/core/views/board-view/board-header.tsx
 delete mode 100644 web/components/core/views/board-view/index.ts
 delete mode 100644 web/components/core/views/board-view/inline-create-issue-form.tsx
 delete mode 100644 web/components/core/views/board-view/single-board.tsx
 delete mode 100644 web/components/core/views/board-view/single-issue.tsx
 delete mode 100644 web/components/core/views/calendar-view/calendar-header.tsx
 delete mode 100644 web/components/core/views/calendar-view/calendar.tsx
 delete mode 100644 web/components/core/views/calendar-view/index.ts
 delete mode 100644 web/components/core/views/calendar-view/inline-create-issue-form.tsx
 delete mode 100644 web/components/core/views/calendar-view/single-date.tsx
 delete mode 100644 web/components/core/views/calendar-view/single-issue.tsx
 delete mode 100644 web/components/core/views/list-view/index.ts
 delete mode 100644 web/components/core/views/list-view/inline-create-issue-form.tsx
 delete mode 100644 web/components/core/views/list-view/single-issue.tsx
 delete mode 100644 web/components/core/views/list-view/single-list.tsx

diff --git a/web/components/analytics/scope-and-demand/scope-and-demand.tsx b/web/components/analytics/scope-and-demand/scope-and-demand.tsx
index 1acb593add8..0f9e2c712d8 100644
--- a/web/components/analytics/scope-and-demand/scope-and-demand.tsx
+++ b/web/components/analytics/scope-and-demand/scope-and-demand.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import analyticsService from "services/analytics.service";
+import { AnalyticsService } from "services/analytics.service";
 // components
 import { AnalyticsDemand, AnalyticsLeaderBoard, AnalyticsScope, AnalyticsYearWiseIssues } from "components/analytics";
 // ui
@@ -15,6 +15,9 @@ type Props = {
   fullScreen?: boolean;
 };
 
+// services
+const analyticsService = new AnalyticsService();
+
 export const ScopeAndDemand: React.FC<Props> = (props) => {
   const { fullScreen = true } = props;
 
diff --git a/web/components/command-palette/change-interface-theme.tsx b/web/components/command-palette/change-interface-theme.tsx
index 87d1289aec0..1285eeb21cd 100644
--- a/web/components/command-palette/change-interface-theme.tsx
+++ b/web/components/command-palette/change-interface-theme.tsx
@@ -5,7 +5,6 @@ import { Command } from "cmdk";
 import { THEMES_OBJ } from "constants/themes";
 import { useTheme } from "next-themes";
 import { SettingIcon } from "components/icons";
-import userService from "services/user.service";
 import useUser from "hooks/use-user";
 // helper
 import { unsetCustomCssVariables } from "helpers/theme.helper";
@@ -25,7 +24,7 @@ export const ChangeInterfaceTheme: React.FC<Props> = observer(({ setIsPaletteOpe
 
   const { setTheme } = useTheme();
 
-  const { user, mutateUser } = useUser();
+  const { user } = useUser();
 
   const updateUserTheme = (newTheme: string) => {
     if (!user) return;
diff --git a/web/components/command-palette/command-k.tsx b/web/components/command-palette/command-k.tsx
index 25a8de4887d..382acd19e6e 100644
--- a/web/components/command-palette/command-k.tsx
+++ b/web/components/command-palette/command-k.tsx
@@ -9,9 +9,9 @@ import { Command } from "cmdk";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import workspaceService from "services/workspace.service";
-import issuesService from "services/issue/issue.service";
-import inboxService from "services/inbox.service";
+import { WorkspaceService } from "services/workspace.service";
+import { IssueService } from "services/issue";
+import { InboxService } from "services/inbox.service";
 // hooks
 import useProjectDetails from "hooks/use-project-details";
 import useDebounce from "hooks/use-debounce";
@@ -44,6 +44,11 @@ type Props = {
   setIsPaletteOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
+// services
+const workspaceService = new WorkspaceService();
+const issueService = new IssueService();
+const inboxService = new InboxService();
+
 export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPaletteOpen }) => {
   const [placeholder, setPlaceholder] = useState("Type a command or search...");
 
@@ -80,7 +85,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
   const { data: issueDetails } = useSWR(
     workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
     workspaceSlug && projectId && issueId
-      ? () => issuesService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
+      ? () => issueService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
       : null
   );
 
@@ -108,7 +113,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
       );
 
       const payload = { ...formData };
-      await issuesService
+      await issueService
         .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
         .then(() => {
           mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
diff --git a/web/components/command-palette/command-pallette.tsx b/web/components/command-palette/command-pallette.tsx
index f4463d22a04..3b90f26997e 100644
--- a/web/components/command-palette/command-pallette.tsx
+++ b/web/components/command-palette/command-pallette.tsx
@@ -17,12 +17,15 @@ import { CreateUpdatePageModal } from "components/pages";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // services
-import issuesService from "services/issue/issue.service";
+import { IssueService } from "services/issue";
 // fetch keys
 import { ISSUE_DETAILS } from "constants/fetch-keys";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 
+// services
+const issueService = new IssueService();
+
 export const CommandPalette: React.FC = observer(() => {
   const store: any = useMobxStore();
 
@@ -47,7 +50,7 @@ export const CommandPalette: React.FC = observer(() => {
   const { data: issueDetails } = useSWR(
     workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
     workspaceSlug && projectId && issueId
-      ? () => issuesService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
+      ? () => issueService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
       : null
   );
 
@@ -117,7 +120,7 @@ export const CommandPalette: React.FC = observer(() => {
         }
       }
     },
-    [copyIssueUrlToClipboard]
+    [copyIssueUrlToClipboard, store.theme]
   );
 
   useEffect(() => {
diff --git a/web/components/command-palette/issue/change-issue-assignee.tsx b/web/components/command-palette/issue/change-issue-assignee.tsx
index 81d6982af86..dbab764d232 100644
--- a/web/components/command-palette/issue/change-issue-assignee.tsx
+++ b/web/components/command-palette/issue/change-issue-assignee.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { mutate } from "swr";
 import { Command } from "cmdk";
 // services
-import IssueService from "services/issue/issue.service";
+import { IssueService } from "services/issue";
 // hooks
 import useProjectMembers from "hooks/use-project-members";
 // constants
@@ -21,6 +21,7 @@ type Props = {
   user: IUser | undefined;
 };
 
+// services
 const issueService = new IssueService();
 
 export const ChangeIssueAssignee: FC<Props> = ({ setIsPaletteOpen, issue, user }) => {
diff --git a/web/components/command-palette/issue/change-issue-priority.tsx b/web/components/command-palette/issue/change-issue-priority.tsx
index 2234c663fec..e38fb1b8323 100644
--- a/web/components/command-palette/issue/change-issue-priority.tsx
+++ b/web/components/command-palette/issue/change-issue-priority.tsx
@@ -7,9 +7,9 @@ import { mutate } from "swr";
 // cmdk
 import { Command } from "cmdk";
 // services
-import issuesService from "services/issue/issue.service";
+import { IssueService } from "services/issue";
 // types
-import { ICurrentUserResponse, IIssue, TIssuePriorities } from "types";
+import { IIssue, IUser, TIssuePriorities } from "types";
 // constants
 import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 import { PRIORITIES } from "constants/project";
@@ -19,9 +19,12 @@ import { CheckIcon, PriorityIcon } from "components/icons";
 type Props = {
   setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
   issue: IIssue;
-  user: ICurrentUserResponse;
+  user: IUser;
 };
 
+// services
+const issueService = new IssueService();
+
 export const ChangeIssuePriority: React.FC<Props> = ({ setIsPaletteOpen, issue, user }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
@@ -44,7 +47,7 @@ export const ChangeIssuePriority: React.FC<Props> = ({ setIsPaletteOpen, issue,
       );
 
       const payload = { ...formData };
-      await issuesService
+      await issueService
         .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
         .then(() => {
           mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
diff --git a/web/components/command-palette/issue/change-issue-state.tsx b/web/components/command-palette/issue/change-issue-state.tsx
index 10e6a781b6d..0dfa23e6aec 100644
--- a/web/components/command-palette/issue/change-issue-state.tsx
+++ b/web/components/command-palette/issue/change-issue-state.tsx
@@ -7,8 +7,8 @@ import useSWR, { mutate } from "swr";
 // cmdk
 import { Command } from "cmdk";
 // services
-import issuesService from "services/issue/issue.service";
-import stateService from "services/project.service/project_state.service";
+import { IssueService } from "services/issue";
+import { ProjectStateService } from "services/project";
 // ui
 import { Spinner } from "@plane/ui";
 // icons
@@ -16,16 +16,20 @@ import { CheckIcon, StateGroupIcon } from "components/icons";
 // helpers
 import { getStatesList } from "helpers/state.helper";
 // types
-import { ICurrentUserResponse, IIssue } from "types";
+import { IUser, IIssue } from "types";
 // fetch keys
 import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY, STATES_LIST } from "constants/fetch-keys";
 
 type Props = {
   setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
   issue: IIssue;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
+// services
+const issueService = new IssueService();
+const stateService = new ProjectStateService();
+
 export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue, user }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
@@ -53,7 +57,7 @@ export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue, use
       );
 
       const payload = { ...formData };
-      await issuesService
+      await issueService
         .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
         .then(() => {
           mutateIssueDetails();
diff --git a/web/components/common/product-updates-modal.tsx b/web/components/common/product-updates-modal.tsx
index 2c88419ddd7..f309b830386 100644
--- a/web/components/common/product-updates-modal.tsx
+++ b/web/components/common/product-updates-modal.tsx
@@ -5,7 +5,7 @@ import useSWR from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // components
 import { MarkdownRenderer } from "components/ui";
 import { Loader } from "@plane/ui";
@@ -19,8 +19,12 @@ type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
+// services
+const workspaceService = new WorkspaceService();
+
 export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
   const { data: updates } = useSWR("PRODUCT_UPDATES", () => workspaceService.getProductUpdates());
+
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={setIsOpen}>
diff --git a/web/components/core/activity.tsx b/web/components/core/activity.tsx
index 0d0013a52b6..affb2aa46c5 100644
--- a/web/components/core/activity.tsx
+++ b/web/components/core/activity.tsx
@@ -5,7 +5,7 @@ import useSWR from "swr";
 // hook
 import useEstimateOption from "hooks/use-estimate-option";
 // services
-import issuesService from "services/issue/issue.service";
+import { IssueLabelService } from "services/issue";
 // icons
 import { Tooltip } from "@plane/ui";
 import { Icon } from "components/ui";
@@ -33,6 +33,9 @@ import { IIssueActivity } from "types";
 // fetch-keys
 import { WORKSPACE_LABELS } from "constants/fetch-keys";
 
+// services
+const issueLabelService = new IssueLabelService();
+
 const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -74,7 +77,7 @@ const LabelPill = ({ labelId }: { labelId: string }) => {
 
   const { data: labels } = useSWR(
     workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
-    workspaceSlug ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString()) : null
+    workspaceSlug ? () => issueLabelService.getWorkspaceIssueLabels(workspaceSlug.toString()) : null
   );
 
   return (
diff --git a/web/components/core/image-picker-popover.tsx b/web/components/core/image-picker-popover.tsx
index ea6ac68f332..9b6addbb5e0 100644
--- a/web/components/core/image-picker-popover.tsx
+++ b/web/components/core/image-picker-popover.tsx
@@ -6,7 +6,7 @@ import { useDropzone } from "react-dropzone";
 import { Tab, Transition, Popover } from "@headlessui/react";
 import { Control, Controller } from "react-hook-form";
 // services
-import fileService from "services/file.service";
+import { FileService } from "services/file.service";
 // hooks
 import useWorkspaceDetails from "hooks/use-workspace-details";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
@@ -36,6 +36,9 @@ type Props = {
   disabled?: boolean;
 };
 
+// services
+const fileService = new FileService();
+
 export const ImagePickerPopover: React.FC<Props> = ({ label, value, control, onChange, disabled = false }) => {
   const ref = useRef<HTMLDivElement>(null);
 
@@ -65,11 +68,6 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, control, onC
     revalidateOnReconnect: false,
   });
 
-  const { data: projectCoverImages } = useSWR(`PROJECT_COVER_IMAGES`, () => fileService.getProjectCoverImages(), {
-    revalidateOnFocus: false,
-    revalidateOnReconnect: false,
-  });
-
   const imagePickerRef = useRef<HTMLDivElement>(null);
 
   const { workspaceDetails } = useWorkspaceDetails();
diff --git a/web/components/core/modals/gpt-assistant-modal.tsx b/web/components/core/modals/gpt-assistant-modal.tsx
index 3a797ea2bb1..c95266a5be5 100644
--- a/web/components/core/modals/gpt-assistant-modal.tsx
+++ b/web/components/core/modals/gpt-assistant-modal.tsx
@@ -3,8 +3,8 @@ import { useRouter } from "next/router";
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // services
-import AIService from "services/ai.service";
-import TrackEventService from "services/track_event.service";
+import { AIService } from "services/ai.service";
+import { TrackEventService } from "services/track_event.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
@@ -32,6 +32,7 @@ type FormData = {
   task: string;
 };
 
+// services
 const aiService = new AIService();
 const trackEventService = new TrackEventService();
 
diff --git a/web/components/core/modals/image-upload-modal.tsx b/web/components/core/modals/image-upload-modal.tsx
index 5f67c182be1..84f4b03b6b0 100644
--- a/web/components/core/modals/image-upload-modal.tsx
+++ b/web/components/core/modals/image-upload-modal.tsx
@@ -7,7 +7,7 @@ import { useDropzone } from "react-dropzone";
 // headless ui
 import { Transition, Dialog } from "@headlessui/react";
 // services
-import fileService from "services/file.service";
+import { FileService } from "services/file.service";
 // hooks
 import useWorkspaceDetails from "hooks/use-workspace-details";
 // ui
@@ -25,6 +25,9 @@ type Props = {
   userImage?: boolean;
 };
 
+// services
+const fileService = new FileService();
+
 export const ImageUploadModal: React.FC<Props> = ({
   value,
   onSuccess,
diff --git a/web/components/core/views/board-view/all-boards.tsx b/web/components/core/views/board-view/all-boards.tsx
deleted file mode 100644
index 37503043a36..00000000000
--- a/web/components/core/views/board-view/all-boards.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import { useRouter } from "next/router";
-
-//hook
-import useMyIssues from "hooks/my-issues/use-my-issues";
-import useIssuesView from "hooks/use-issues-view";
-import useProfileIssues from "hooks/use-profile-issues";
-// components
-import { SingleBoard } from "components/core/views/board-view/single-board";
-import { IssuePeekOverview } from "components/issues";
-// icons
-import { StateGroupIcon } from "components/icons";
-// helpers
-import { addSpaceIfCamelCase } from "helpers/string.helper";
-// types
-import { ICurrentUserResponse, IIssue, IIssueViewProps, IState, UserAuth } from "types";
-
-type Props = {
-  addIssueToGroup: (groupTitle: string) => void;
-  disableUserActions: boolean;
-  disableAddIssueOption?: boolean;
-  dragDisabled: boolean;
-  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
-  handleDraftIssueAction?: (issue: IIssue, action: "edit" | "delete") => void;
-  handleTrashBox: (isDragging: boolean) => void;
-  openIssuesListModal?: (() => void) | null;
-  removeIssue: ((bridgeId: string, issueId: string) => void) | null;
-  myIssueProjectId?: string | null;
-  handleMyIssueOpen?: (issue: IIssue) => void;
-  states: IState[] | undefined;
-  user: ICurrentUserResponse | undefined;
-  userAuth: UserAuth;
-  viewProps: IIssueViewProps;
-};
-
-export const AllBoards: React.FC<Props> = ({
-  addIssueToGroup,
-  disableUserActions,
-  disableAddIssueOption = false,
-  dragDisabled,
-  handleIssueAction,
-  handleDraftIssueAction,
-  handleTrashBox,
-  openIssuesListModal,
-  myIssueProjectId,
-  handleMyIssueOpen,
-  removeIssue,
-  states,
-  user,
-  userAuth,
-  viewProps,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, userId } = router.query;
-
-  const isProfileIssue =
-    router.pathname.includes("assigned") ||
-    router.pathname.includes("created") ||
-    router.pathname.includes("subscribed");
-
-  const isMyIssue = router.pathname.includes("my-issues");
-
-  const { mutateIssues } = useIssuesView();
-  const { mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
-  const { mutateProfileIssues } = useProfileIssues(workspaceSlug?.toString(), userId?.toString());
-
-  const { displayFilters, groupedIssues } = viewProps;
-
-  return (
-    <>
-      <IssuePeekOverview
-        handleMutation={() =>
-          isMyIssue ? mutateMyIssues() : isProfileIssue ? mutateProfileIssues() : mutateIssues()
-        }
-        projectId={myIssueProjectId ? myIssueProjectId : projectId?.toString() ?? ""}
-        workspaceSlug={workspaceSlug?.toString() ?? ""}
-        readOnly={disableUserActions}
-      />
-      {groupedIssues ? (
-        <div className="horizontal-scroll-enable flex h-full gap-x-4 p-8 bg-custom-background-90">
-          {Object.keys(groupedIssues).map((singleGroup, index) => {
-            const currentState =
-              displayFilters?.group_by === "state"
-                ? states?.find((s) => s.id === singleGroup)
-                : null;
-
-            if (!displayFilters?.show_empty_groups && groupedIssues[singleGroup].length === 0)
-              return null;
-
-            return (
-              <SingleBoard
-                key={index}
-                addIssueToGroup={() => addIssueToGroup(singleGroup)}
-                currentState={currentState}
-                disableUserActions={disableUserActions}
-                disableAddIssueOption={disableAddIssueOption}
-                dragDisabled={dragDisabled}
-                groupTitle={singleGroup}
-                handleIssueAction={handleIssueAction}
-                handleDraftIssueAction={handleDraftIssueAction}
-                handleTrashBox={handleTrashBox}
-                openIssuesListModal={openIssuesListModal ?? null}
-                handleMyIssueOpen={handleMyIssueOpen}
-                removeIssue={removeIssue}
-                user={user}
-                userAuth={userAuth}
-                viewProps={viewProps}
-              />
-            );
-          })}
-          {!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 =
-                    displayFilters?.group_by === "state"
-                      ? states?.find((s) => s.id === singleGroup)
-                      : null;
-
-                  if (groupedIssues[singleGroup].length === 0)
-                    return (
-                      <div
-                        key={index}
-                        className="flex items-center justify-between gap-2 rounded bg-custom-background-90 p-2 shadow"
-                      >
-                        <div className="flex items-center gap-2">
-                          {currentState && (
-                            <StateGroupIcon
-                              stateGroup={currentState.group}
-                              color={currentState.color}
-                              height="16px"
-                              width="16px"
-                            />
-                          )}
-                          <h4 className="text-sm capitalize">
-                            {displayFilters?.group_by === "state"
-                              ? addSpaceIfCamelCase(currentState?.name ?? "")
-                              : addSpaceIfCamelCase(singleGroup)}
-                          </h4>
-                        </div>
-                        <span className="text-xs text-custom-text-200">0</span>
-                      </div>
-                    );
-                })}
-              </div>
-            </div>
-          )}
-        </div>
-      ) : null}
-    </>
-  );
-};
diff --git a/web/components/core/views/board-view/board-header.tsx b/web/components/core/views/board-view/board-header.tsx
deleted file mode 100644
index 1c2bef60fb6..00000000000
--- a/web/components/core/views/board-view/board-header.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import issuesService from "services/issues.service";
-import projectService from "services/project.service";
-// hooks
-import useProjects from "hooks/use-projects";
-// component
-import { Avatar, Icon } from "components/ui";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-import { PriorityIcon, StateGroupIcon } from "components/icons";
-// helpers
-import { addSpaceIfCamelCase } from "helpers/string.helper";
-import { renderEmoji } from "helpers/emoji.helper";
-// types
-import { IIssueViewProps, IState, TIssuePriorities, TStateGroups } from "types";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, WORKSPACE_LABELS } from "constants/fetch-keys";
-// constants
-import { STATE_GROUP_COLORS } from "constants/state";
-
-type Props = {
-  currentState?: IState | null;
-  groupTitle: string;
-  addIssueToGroup: () => void;
-  isCollapsed: boolean;
-  setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
-  disableUserActions: boolean;
-  disableAddIssue: boolean;
-  viewProps: IIssueViewProps;
-};
-
-export const BoardHeader: React.FC<Props> = ({
-  currentState,
-  groupTitle,
-  addIssueToGroup,
-  isCollapsed,
-  setIsCollapsed,
-  disableUserActions,
-  disableAddIssue,
-  viewProps,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { displayFilters, groupedIssues } = viewProps;
-
-  const { data: issueLabels } = useSWR(
-    workspaceSlug && projectId && displayFilters?.group_by === "labels"
-      ? PROJECT_ISSUE_LABELS(projectId.toString())
-      : null,
-    workspaceSlug && projectId && displayFilters?.group_by === "labels"
-      ? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
-
-  const { data: workspaceLabels } = useSWR(
-    workspaceSlug && displayFilters?.group_by === "labels"
-      ? WORKSPACE_LABELS(workspaceSlug.toString())
-      : null,
-    workspaceSlug && displayFilters?.group_by === "labels"
-      ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString())
-      : null
-  );
-
-  const { data: members } = useSWR(
-    workspaceSlug &&
-      projectId &&
-      (displayFilters?.group_by === "created_by" || displayFilters?.group_by === "assignees")
-      ? PROJECT_MEMBERS(projectId.toString())
-      : null,
-    workspaceSlug &&
-      projectId &&
-      (displayFilters?.group_by === "created_by" || displayFilters?.group_by === "assignees")
-      ? () => projectService.projectMembers(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
-
-  const { projects } = useProjects();
-
-  const getGroupTitle = () => {
-    let title = addSpaceIfCamelCase(groupTitle);
-
-    switch (displayFilters?.group_by) {
-      case "state":
-        title = addSpaceIfCamelCase(currentState?.name ?? "");
-        break;
-      case "labels":
-        title =
-          [...(issueLabels ?? []), ...(workspaceLabels ?? [])]?.find(
-            (label) => label.id === groupTitle
-          )?.name ?? "None";
-        break;
-      case "project":
-        title = projects?.find((p) => p.id === groupTitle)?.name ?? "None";
-        break;
-      case "assignees":
-      case "created_by":
-        const member = members?.find((member) => member.member.id === groupTitle)?.member;
-        title = member ? member.display_name : "None";
-
-        break;
-    }
-
-    return title;
-  };
-
-  const getGroupIcon = () => {
-    let icon;
-
-    switch (displayFilters?.group_by) {
-      case "state":
-        icon = currentState && (
-          <StateGroupIcon
-            stateGroup={currentState.group}
-            color={currentState.color}
-            height="16px"
-            width="16px"
-          />
-        );
-        break;
-      case "state_detail.group":
-        icon = (
-          <StateGroupIcon
-            stateGroup={groupTitle as TStateGroups}
-            color={STATE_GROUP_COLORS[groupTitle as TStateGroups]}
-            height="16px"
-            width="16px"
-          />
-        );
-        break;
-      case "priority":
-        icon = <PriorityIcon priority={groupTitle as TIssuePriorities} className="text-lg" />;
-        break;
-      case "project":
-        const project = projects?.find((p) => p.id === groupTitle);
-        icon =
-          project &&
-          (project.emoji !== null
-            ? renderEmoji(project.emoji)
-            : project.icon_prop !== null
-            ? renderEmoji(project.icon_prop)
-            : null);
-        break;
-      case "labels":
-        const labelColor =
-          [...(issueLabels ?? []), ...(workspaceLabels ?? [])]?.find(
-            (label) => label.id === groupTitle
-          )?.color ?? "#000000";
-        icon = (
-          <span
-            className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
-            style={{ backgroundColor: labelColor }}
-          />
-        );
-        break;
-      case "assignees":
-      case "created_by":
-        const member = members?.find((member) => member.member.id === groupTitle)?.member;
-        icon = member ? <Avatar user={member} height="24px" width="24px" fontSize="12px" /> : <></>;
-
-        break;
-    }
-
-    return icon;
-  };
-
-  return (
-    <div
-      className={`flex items-center justify-between px-1 ${
-        !isCollapsed ? "flex-col rounded-md bg-custom-background-90" : ""
-      }`}
-    >
-      <div className={`flex items-center ${isCollapsed ? "gap-1" : "flex-col gap-2"}`}>
-        <div
-          className={`flex cursor-pointer items-center gap-x-2 max-w-[316px] ${
-            !isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
-          }`}
-        >
-          <span className="flex items-center">{getGroupIcon()}</span>
-          <h2
-            className={`text-lg font-semibold truncate ${
-              displayFilters?.group_by === "created_by" ? "" : "capitalize"
-            }`}
-            style={{
-              writingMode: isCollapsed ? "horizontal-tb" : "vertical-rl",
-            }}
-          >
-            {getGroupTitle()}
-          </h2>
-          <span className={`${isCollapsed ? "ml-0.5" : ""} py-1 text-center text-sm`}>
-            {groupedIssues?.[groupTitle].length ?? 0}
-          </span>
-        </div>
-      </div>
-
-      <div className={`flex items-center ${!isCollapsed ? "flex-col pb-2" : ""}`}>
-        <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"
-          onClick={() => {
-            setIsCollapsed((prevData) => !prevData);
-          }}
-        >
-          {isCollapsed ? (
-            <Icon
-              iconName="close_fullscreen"
-              className="text-base font-medium text-custom-text-900"
-            />
-          ) : (
-            <Icon iconName="open_in_full" className="text-base font-medium text-custom-text-900" />
-          )}
-        </button>
-        {!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"
-            onClick={addIssueToGroup}
-          >
-            <PlusIcon className="h-4 w-4" />
-          </button>
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/web/components/core/views/board-view/index.ts b/web/components/core/views/board-view/index.ts
deleted file mode 100644
index a5a6ee497f1..00000000000
--- a/web/components/core/views/board-view/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from "./all-boards";
-export * from "./board-header";
-export * from "./single-board";
-export * from "./single-issue";
-export * from "./inline-create-issue-form";
diff --git a/web/components/core/views/board-view/inline-create-issue-form.tsx b/web/components/core/views/board-view/inline-create-issue-form.tsx
deleted file mode 100644
index 1d6103d19df..00000000000
--- a/web/components/core/views/board-view/inline-create-issue-form.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useEffect } from "react";
-
-// react hook form
-import { useFormContext } from "react-hook-form";
-
-// components
-import { InlineCreateIssueFormWrapper } from "components/core";
-
-// hooks
-import useProjectDetails from "hooks/use-project-details";
-
-// types
-import { IIssue } from "types";
-
-type Props = {
-  isOpen: boolean;
-  handleClose: () => void;
-  onSuccess?: (data: IIssue) => Promise<void> | void;
-  prePopulatedData?: Partial<IIssue>;
-};
-
-const InlineInput = () => {
-  const { projectDetails } = useProjectDetails();
-
-  const { register, setFocus } = useFormContext();
-
-  useEffect(() => {
-    setFocus("name");
-  }, [setFocus]);
-
-  return (
-    <div>
-      <h4 className="text-sm font-medium leading-5 text-custom-text-300">
-        {projectDetails?.identifier ?? "..."}
-      </h4>
-      <input
-        autoComplete="off"
-        placeholder="Issue Title"
-        {...register("name", {
-          required: "Issue title is required.",
-        })}
-        className="w-full px-2 pl-0 py-1.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
-      />
-    </div>
-  );
-};
-
-export const BoardInlineCreateIssueForm: React.FC<Props> = (props) => (
-  <>
-    <InlineCreateIssueFormWrapper
-      className="flex flex-col border-[0.5px] border-custom-border-100 justify-between gap-1.5 group/card relative select-none px-3.5 py-3 h-[118px] mb-3 rounded bg-custom-background-100 shadow-custom-shadow-sm"
-      {...props}
-    >
-      <InlineInput />
-    </InlineCreateIssueFormWrapper>
-    {props.isOpen && (
-      <p className="text-xs ml-3 italic text-custom-text-200">
-        Press {"'"}Enter{"'"} to add another issue
-      </p>
-    )}
-  </>
-);
diff --git a/web/components/core/views/board-view/single-board.tsx b/web/components/core/views/board-view/single-board.tsx
deleted file mode 100644
index 1325f8cab36..00000000000
--- a/web/components/core/views/board-view/single-board.tsx
+++ /dev/null
@@ -1,289 +0,0 @@
-import { useState } from "react";
-
-import { useRouter } from "next/router";
-
-// react-beautiful-dnd
-import StrictModeDroppable from "components/dnd/StrictModeDroppable";
-import { Draggable } from "react-beautiful-dnd";
-// components
-import { CreateUpdateDraftIssueModal } from "components/issues";
-import { BoardHeader, SingleBoardIssue, BoardInlineCreateIssueForm } from "components/core";
-// ui
-import { CustomMenu } from "components/ui";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-// helpers
-import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
-// types
-import { ICurrentUserResponse, IIssue, IIssueViewProps, IState, UserAuth } from "types";
-
-type Props = {
-  addIssueToGroup: () => void;
-  currentState?: IState | null;
-  disableUserActions: boolean;
-  disableAddIssueOption?: boolean;
-  dragDisabled: boolean;
-  groupTitle: string;
-  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
-  handleDraftIssueAction?: (issue: IIssue, action: "edit" | "delete") => void;
-  handleTrashBox: (isDragging: boolean) => void;
-  openIssuesListModal?: (() => void) | null;
-  handleMyIssueOpen?: (issue: IIssue) => void;
-  removeIssue: ((bridgeId: string, issueId: string) => void) | null;
-  user: ICurrentUserResponse | undefined;
-  userAuth: UserAuth;
-  viewProps: IIssueViewProps;
-};
-
-export const SingleBoard: React.FC<Props> = (props) => {
-  const {
-    addIssueToGroup,
-    currentState,
-    groupTitle,
-    disableUserActions,
-    disableAddIssueOption = false,
-    dragDisabled,
-    handleIssueAction,
-    handleDraftIssueAction,
-    handleTrashBox,
-    openIssuesListModal,
-    handleMyIssueOpen,
-    removeIssue,
-    user,
-    userAuth,
-    viewProps,
-  } = props;
-
-  // collapse/expand
-  const [isCollapsed, setIsCollapsed] = useState(true);
-
-  const [isInlineCreateIssueFormOpen, setIsInlineCreateIssueFormOpen] = useState(false);
-  const [isCreateDraftIssueModalOpen, setIsCreateDraftIssueModalOpen] = useState(false);
-
-  const { displayFilters, groupedIssues } = viewProps;
-
-  const router = useRouter();
-  const { cycleId, moduleId } = router.query;
-
-  const isMyIssuesPage = router.pathname.split("/")[3] === "my-issues";
-  const isProfileIssuesPage = router.pathname.split("/")[2] === "profile";
-  const isDraftIssuesPage = router.pathname.split("/")[4] === "draft-issues";
-
-  const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
-
-  // Check if it has at least 4 tickets since it is enough to accommodate the Calendar height
-  const issuesLength = groupedIssues?.[groupTitle].length;
-  const hasMinimumNumberOfCards = issuesLength ? issuesLength >= 4 : false;
-
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disableUserActions;
-
-  const scrollToBottom = () => {
-    const boardListElement = document.getElementById(`board-list-${groupTitle}`);
-
-    // timeout is needed because the animation
-    // takes time to complete & we can scroll only after that
-    const timeoutId = setTimeout(() => {
-      if (boardListElement)
-        boardListElement.scrollBy({
-          top: boardListElement.scrollHeight,
-          left: 0,
-          behavior: "smooth",
-        });
-      clearTimeout(timeoutId);
-    }, 10);
-  };
-
-  const onCreateClick = () => {
-    setIsInlineCreateIssueFormOpen(true);
-    scrollToBottom();
-  };
-
-  const handleAddIssueToGroup = () => {
-    if (isDraftIssuesPage) setIsCreateDraftIssueModalOpen(true);
-    else if (isMyIssuesPage || isProfileIssuesPage) addIssueToGroup();
-    else onCreateClick();
-  };
-
-  return (
-    <div className={`flex-shrink-0 ${!isCollapsed ? "" : "flex h-full flex-col w-96"}`}>
-      <CreateUpdateDraftIssueModal
-        isOpen={isCreateDraftIssueModalOpen}
-        handleClose={() => setIsCreateDraftIssueModalOpen(false)}
-        prePopulateData={{
-          ...(cycleId && { cycle: cycleId.toString() }),
-          ...(moduleId && { module: moduleId.toString() }),
-          [displayFilters?.group_by! === "labels" ? "labels_list" : displayFilters?.group_by!]:
-            displayFilters?.group_by === "labels" ? [groupTitle] : groupTitle,
-        }}
-      />
-
-      <BoardHeader
-        addIssueToGroup={handleAddIssueToGroup}
-        currentState={currentState}
-        groupTitle={groupTitle}
-        isCollapsed={isCollapsed}
-        setIsCollapsed={setIsCollapsed}
-        disableUserActions={disableUserActions}
-        disableAddIssue={disableAddIssueOption}
-        viewProps={viewProps}
-      />
-      {isCollapsed && (
-        <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
-          {(provided, snapshot) => (
-            <div
-              className={`relative h-full ${
-                displayFilters?.order_by !== "sort_order" && snapshot.isDraggingOver
-                  ? "bg-custom-background-100/20"
-                  : ""
-              } ${!isCollapsed ? "hidden" : "flex flex-col"}`}
-              ref={provided.innerRef}
-              {...provided.droppableProps}
-            >
-              {displayFilters?.order_by !== "sort_order" && (
-                <>
-                  <div
-                    className={`absolute ${
-                      snapshot.isDraggingOver ? "block" : "hidden"
-                    } pointer-events-none top-0 left-0 z-[99] h-full w-full bg-custom-background-90 opacity-50`}
-                  />
-                  <div
-                    className={`absolute ${
-                      snapshot.isDraggingOver ? "block" : "hidden"
-                    } pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-custom-background-100 p-2 text-xs`}
-                  >
-                    This board is ordered by{" "}
-                    {replaceUnderscoreIfSnakeCase(
-                      displayFilters?.order_by
-                        ? displayFilters?.order_by[0] === "-"
-                          ? displayFilters?.order_by.slice(1)
-                          : displayFilters?.order_by
-                        : "created_at"
-                    )}
-                  </div>
-                </>
-              )}
-              <div
-                id={`board-list-${groupTitle}`}
-                className={`pt-3 ${
-                  hasMinimumNumberOfCards ? "overflow-hidden overflow-y-scroll" : ""
-                } `}
-              >
-                {groupedIssues?.[groupTitle].map((issue, index) => (
-                  <Draggable
-                    key={issue.id}
-                    draggableId={issue.id}
-                    index={index}
-                    isDragDisabled={isNotAllowed || dragDisabled}
-                  >
-                    {(provided, snapshot) => (
-                      <SingleBoardIssue
-                        key={index}
-                        provided={provided}
-                        snapshot={snapshot}
-                        type={type}
-                        index={index}
-                        issue={issue}
-                        projectId={issue.project_detail.id}
-                        groupTitle={groupTitle}
-                        editIssue={() => handleIssueAction(issue, "edit")}
-                        makeIssueCopy={() => handleIssueAction(issue, "copy")}
-                        handleDeleteIssue={() => handleIssueAction(issue, "delete")}
-                        handleDraftIssueEdit={
-                          handleDraftIssueAction
-                            ? () => handleDraftIssueAction(issue, "edit")
-                            : undefined
-                        }
-                        handleDraftIssueDelete={() =>
-                          handleDraftIssueAction
-                            ? handleDraftIssueAction(issue, "delete")
-                            : undefined
-                        }
-                        handleTrashBox={handleTrashBox}
-                        handleMyIssueOpen={handleMyIssueOpen}
-                        removeIssue={() => {
-                          if (removeIssue && issue.bridge_id)
-                            removeIssue(issue.bridge_id, issue.id);
-                        }}
-                        disableUserActions={disableUserActions}
-                        user={user}
-                        userAuth={userAuth}
-                        viewProps={viewProps}
-                      />
-                    )}
-                  </Draggable>
-                ))}
-                <span
-                  style={{
-                    display: displayFilters?.order_by === "sort_order" ? "inline" : "none",
-                  }}
-                >
-                  <>{provided.placeholder}</>
-                </span>
-
-                <BoardInlineCreateIssueForm
-                  isOpen={isInlineCreateIssueFormOpen}
-                  handleClose={() => setIsInlineCreateIssueFormOpen(false)}
-                  onSuccess={() => scrollToBottom()}
-                  prePopulatedData={{
-                    ...(cycleId && { cycle: cycleId.toString() }),
-                    ...(moduleId && { module: moduleId.toString() }),
-                    [displayFilters?.group_by! === "labels"
-                      ? "labels_list"
-                      : displayFilters?.group_by!]:
-                      displayFilters?.group_by === "labels" ? [groupTitle] : groupTitle,
-                  }}
-                />
-              </div>
-              {displayFilters?.group_by !== "created_by" && (
-                <div>
-                  {type === "issue"
-                    ? !disableAddIssueOption &&
-                      !isDraftIssuesPage && (
-                        <button
-                          type="button"
-                          className="flex items-center gap-2 font-medium text-custom-primary outline-none p-1"
-                          onClick={() => {
-                            if (isMyIssuesPage || isProfileIssuesPage) addIssueToGroup();
-                            else onCreateClick();
-                          }}
-                        >
-                          <PlusIcon className="h-4 w-4" />
-                          Add Issue
-                        </button>
-                      )
-                    : !disableUserActions &&
-                      !isDraftIssuesPage && (
-                        <CustomMenu
-                          customButton={
-                            <div className="flex items-center gap-2 font-medium text-custom-primary outline-none whitespace-nowrap">
-                              <PlusIcon className="h-4 w-4" />
-                              Add Issue
-                            </div>
-                          }
-                          noBorder
-                        >
-                          <CustomMenu.MenuItem
-                            onClick={() => {
-                              if (isDraftIssuesPage) setIsCreateDraftIssueModalOpen(true);
-                              else if (isMyIssuesPage || isProfileIssuesPage) addIssueToGroup();
-                              else onCreateClick();
-                            }}
-                          >
-                            Create new
-                          </CustomMenu.MenuItem>
-                          {openIssuesListModal && (
-                            <CustomMenu.MenuItem onClick={openIssuesListModal}>
-                              Add an existing issue
-                            </CustomMenu.MenuItem>
-                          )}
-                        </CustomMenu>
-                      )}
-                </div>
-              )}
-            </div>
-          )}
-        </StrictModeDroppable>
-      )}
-    </div>
-  );
-};
diff --git a/web/components/core/views/board-view/single-issue.tsx b/web/components/core/views/board-view/single-issue.tsx
deleted file mode 100644
index 1a213bccc2a..00000000000
--- a/web/components/core/views/board-view/single-issue.tsx
+++ /dev/null
@@ -1,547 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-beautiful-dnd
-import {
-  DraggableProvided,
-  DraggableStateSnapshot,
-  DraggingStyle,
-  NotDraggingStyle,
-} from "react-beautiful-dnd";
-// services
-import issuesService from "services/issues.service";
-import trackEventServices from "services/track-event.service";
-// hooks
-import useToast from "hooks/use-toast";
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
-// components
-import { ViewDueDateSelect, ViewEstimateSelect, ViewStartDateSelect } from "components/issues";
-import { MembersSelect, LabelSelect, PrioritySelect } from "components/project";
-import { StateSelect } from "components/states";
-// ui
-import { ContextMenu, CustomMenu, Tooltip } from "components/ui";
-// icons
-import {
-  ClipboardDocumentCheckIcon,
-  LinkIcon,
-  PencilIcon,
-  TrashIcon,
-  XMarkIcon,
-  ArrowTopRightOnSquareIcon,
-  PaperClipIcon,
-  EllipsisHorizontalIcon,
-} from "@heroicons/react/24/outline";
-import { LayerDiagonalIcon } from "components/icons";
-// helpers
-import { handleIssuesMutation } from "constants/issue";
-import { copyTextToClipboard } from "helpers/string.helper";
-// types
-import {
-  ICurrentUserResponse,
-  IIssue,
-  IIssueViewProps,
-  IState,
-  ISubIssueResponse,
-  TIssuePriorities,
-  UserAuth,
-} from "types";
-// fetch-keys
-import { CYCLE_DETAILS, MODULE_DETAILS, SUB_ISSUES } from "constants/fetch-keys";
-
-type Props = {
-  type?: string;
-  provided: DraggableProvided;
-  snapshot: DraggableStateSnapshot;
-  issue: IIssue;
-  projectId: string;
-  groupTitle?: string;
-  index: number;
-  editIssue: () => void;
-  makeIssueCopy: () => void;
-  handleMyIssueOpen?: (issue: IIssue) => void;
-  removeIssue?: (() => void) | null;
-  handleDeleteIssue: (issue: IIssue) => void;
-  handleDraftIssueEdit?: () => void;
-  handleDraftIssueDelete?: () => void;
-  handleTrashBox: (isDragging: boolean) => void;
-  disableUserActions: boolean;
-  user: ICurrentUserResponse | undefined;
-  userAuth: UserAuth;
-  viewProps: IIssueViewProps;
-};
-
-export const SingleBoardIssue: React.FC<Props> = ({
-  type,
-  provided,
-  snapshot,
-  issue,
-  projectId,
-  index,
-  editIssue,
-  makeIssueCopy,
-  handleMyIssueOpen,
-  removeIssue,
-  groupTitle,
-  handleDeleteIssue,
-  handleDraftIssueEdit,
-  handleDraftIssueDelete,
-  handleTrashBox,
-  disableUserActions,
-  user,
-  userAuth,
-  viewProps,
-}) => {
-  // context menu
-  const [contextMenu, setContextMenu] = useState(false);
-  const [contextMenuPosition, setContextMenuPosition] = useState<React.MouseEvent | null>(null);
-
-  const [isMenuActive, setIsMenuActive] = useState(false);
-  const [isDropdownActive, setIsDropdownActive] = useState(false);
-
-  const actionSectionRef = useRef<HTMLDivElement | null>(null);
-
-  const { displayFilters, properties, mutateIssues } = viewProps;
-
-  const router = useRouter();
-  const { workspaceSlug, cycleId, moduleId } = router.query;
-
-  const isDraftIssue = router.pathname.includes("draft-issues");
-
-  const { setToastAlert } = useToast();
-
-  const partialUpdateIssue = useCallback(
-    (formData: Partial<IIssue>, issue: IIssue) => {
-      if (!workspaceSlug || !issue) return;
-
-      if (issue.parent) {
-        mutate<ISubIssueResponse>(
-          SUB_ISSUES(issue.parent.toString()),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            return {
-              ...prevData,
-              sub_issues: (prevData.sub_issues ?? []).map((i) => {
-                if (i.id === issue.id) {
-                  return {
-                    ...i,
-                    ...formData,
-                  };
-                }
-                return i;
-              }),
-            };
-          },
-          false
-        );
-      } else {
-        mutateIssues(
-          (prevData: any) =>
-            handleIssuesMutation(
-              formData,
-              groupTitle ?? "",
-              displayFilters?.group_by ?? null,
-              index,
-              displayFilters?.order_by ?? "-created_at",
-              prevData
-            ),
-          false
-        );
-      }
-
-      issuesService
-        .patchIssue(workspaceSlug as string, issue.project, issue.id, formData, user)
-        .then(() => {
-          mutateIssues();
-
-          if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
-          if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
-        });
-    },
-    [displayFilters, workspaceSlug, cycleId, moduleId, groupTitle, index, mutateIssues, user]
-  );
-
-  const getStyle = (
-    style: DraggingStyle | NotDraggingStyle | undefined,
-    snapshot: DraggableStateSnapshot
-  ) => {
-    if (displayFilters?.order_by === "sort_order") return style;
-    if (!snapshot.isDragging) return {};
-    if (!snapshot.isDropAnimating) return style;
-
-    return {
-      ...style,
-      transitionDuration: `0.001s`,
-    };
-  };
-
-  const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
-    ).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Issue link copied to clipboard.",
-      });
-      setIsMenuActive(false);
-    });
-  };
-
-  const handleStateChange = (data: string, states: IState[] | undefined) => {
-    const oldState = states?.find((s) => s.id === issue.state);
-    const newState = states?.find((s) => s.id === data);
-
-    partialUpdateIssue(
-      {
-        state: data,
-        state_detail: newState,
-      },
-      issue
-    );
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
-      {
-        workspaceSlug,
-        workspaceId: issue.workspace,
-        projectId: issue.project_detail.id,
-        projectIdentifier: issue.project_detail.identifier,
-        projectName: issue.project_detail.name,
-        issueId: issue.id,
-      },
-      "ISSUE_PROPERTY_UPDATE_STATE",
-      user
-    );
-    if (oldState?.group !== "completed" && newState?.group !== "completed") {
-      trackEventServices.trackIssueMarkedAsDoneEvent(
-        {
-          workspaceSlug: issue.workspace_detail.slug,
-          workspaceId: issue.workspace_detail.id,
-          projectId: issue.project_detail.id,
-          projectIdentifier: issue.project_detail.identifier,
-          projectName: issue.project_detail.name,
-          issueId: issue.id,
-        },
-        user
-      );
-    }
-  };
-
-  const handleAssigneeChange = (data: any) => {
-    const newData = issue.assignees ?? [];
-
-    if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
-    else newData.push(data);
-
-    partialUpdateIssue({ assignees_list: data }, issue);
-
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
-      {
-        workspaceSlug,
-        workspaceId: issue.workspace,
-        projectId: issue.project_detail.id,
-        projectIdentifier: issue.project_detail.identifier,
-        projectName: issue.project_detail.name,
-        issueId: issue.id,
-      },
-      "ISSUE_PROPERTY_UPDATE_ASSIGNEE",
-      user
-    );
-  };
-
-  const handleLabelChange = (data: any) => {
-    partialUpdateIssue({ labels_list: data }, issue);
-  };
-
-  const handlePriorityChange = (data: TIssuePriorities) => {
-    partialUpdateIssue({ priority: data }, issue);
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
-      {
-        workspaceSlug,
-        workspaceId: issue.workspace,
-        projectId: issue.project_detail.id,
-        projectIdentifier: issue.project_detail.identifier,
-        projectName: issue.project_detail.name,
-        issueId: issue.id,
-      },
-      "ISSUE_PROPERTY_UPDATE_PRIORITY",
-      user
-    );
-  };
-
-  useEffect(() => {
-    if (snapshot.isDragging) handleTrashBox(snapshot.isDragging);
-  }, [snapshot, handleTrashBox]);
-
-  useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
-
-  const openPeekOverview = () => {
-    const { query } = router;
-
-    if (handleMyIssueOpen) handleMyIssueOpen(issue);
-
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekIssue: issue.id },
-    });
-  };
-
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disableUserActions;
-
-  return (
-    <>
-      <ContextMenu
-        clickEvent={contextMenuPosition}
-        title="Quick actions"
-        isOpen={contextMenu}
-        setIsOpen={setContextMenu}
-      >
-        {!isNotAllowed && (
-          <>
-            <ContextMenu.Item
-              Icon={PencilIcon}
-              onClick={() => {
-                if (isDraftIssue && handleDraftIssueEdit) handleDraftIssueEdit();
-                else editIssue();
-              }}
-            >
-              Edit issue
-            </ContextMenu.Item>
-            {!isDraftIssue && (
-              <ContextMenu.Item Icon={ClipboardDocumentCheckIcon} onClick={makeIssueCopy}>
-                Make a copy...
-              </ContextMenu.Item>
-            )}
-            <ContextMenu.Item
-              Icon={TrashIcon}
-              onClick={() => {
-                if (isDraftIssue && handleDraftIssueDelete) handleDraftIssueDelete();
-                else handleDeleteIssue(issue);
-              }}
-            >
-              Delete issue
-            </ContextMenu.Item>
-          </>
-        )}
-        {!isDraftIssue && (
-          <ContextMenu.Item Icon={LinkIcon} onClick={handleCopyText}>
-            Copy issue link
-          </ContextMenu.Item>
-        )}
-        {!isDraftIssue && (
-          <a
-            href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            <ContextMenu.Item Icon={ArrowTopRightOnSquareIcon}>
-              Open issue in new tab
-            </ContextMenu.Item>
-          </a>
-        )}
-      </ContextMenu>
-      <div
-        className={`mb-3 rounded bg-custom-background-100 shadow ${
-          snapshot.isDragging ? "border-2 border-custom-primary shadow-lg" : ""
-        }`}
-        ref={provided.innerRef}
-        {...provided.draggableProps}
-        {...provided.dragHandleProps}
-        style={getStyle(provided.draggableProps.style, snapshot)}
-        onContextMenu={(e) => {
-          e.preventDefault();
-          setContextMenu(true);
-          setContextMenuPosition(e);
-        }}
-      >
-        <div className="flex flex-col justify-between gap-1.5 group/card relative select-none px-3.5 py-3 h-[118px]">
-          {!isNotAllowed && (
-            <div
-              ref={actionSectionRef}
-              className={`z-1 absolute top-1.5 right-1.5 hidden group-hover/card:!flex ${
-                isMenuActive ? "!flex" : ""
-              }`}
-            >
-              {type && !isNotAllowed && (
-                <CustomMenu
-                  customButton={
-                    <div
-                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded p-1 text-left text-xs duration-300 hover:bg-custom-background-80"
-                      onClick={() => setIsMenuActive(!isMenuActive)}
-                    >
-                      <EllipsisHorizontalIcon className="h-4 w-4" />
-                    </div>
-                  }
-                >
-                  <CustomMenu.MenuItem
-                    onClick={() => {
-                      if (isDraftIssue && handleDraftIssueEdit) handleDraftIssueEdit();
-                      else editIssue();
-                    }}
-                  >
-                    <div className="flex items-center justify-start gap-2">
-                      <PencilIcon className="h-4 w-4" />
-                      <span>Edit issue</span>
-                    </div>
-                  </CustomMenu.MenuItem>
-                  {type !== "issue" && removeIssue && !isDraftIssue && (
-                    <CustomMenu.MenuItem onClick={removeIssue}>
-                      <div className="flex items-center justify-start gap-2">
-                        <XMarkIcon className="h-4 w-4" />
-                        <span>Remove from {type}</span>
-                      </div>
-                    </CustomMenu.MenuItem>
-                  )}
-                  <CustomMenu.MenuItem
-                    onClick={() => {
-                      if (isDraftIssue && handleDraftIssueDelete) handleDraftIssueDelete();
-                      else handleDeleteIssue(issue);
-                    }}
-                  >
-                    <div className="flex items-center justify-start gap-2">
-                      <TrashIcon className="h-4 w-4" />
-                      <span>Delete issue</span>
-                    </div>
-                  </CustomMenu.MenuItem>
-                  {!isDraftIssue && (
-                    <CustomMenu.MenuItem onClick={handleCopyText}>
-                      <div className="flex items-center justify-start gap-2">
-                        <LinkIcon className="h-4 w-4" />
-                        <span>Copy issue Link</span>
-                      </div>
-                    </CustomMenu.MenuItem>
-                  )}
-                </CustomMenu>
-              )}
-            </div>
-          )}
-
-          <div className="flex flex-col gap-1.5">
-            {properties.key && (
-              <div className="text-xs font-medium text-custom-text-200">
-                {issue.project_detail.identifier}-{issue.sequence_id}
-              </div>
-            )}
-            <button
-              type="button"
-              onClick={() => {
-                if (isDraftIssue && handleDraftIssueEdit) handleDraftIssueEdit();
-                else openPeekOverview();
-              }}
-            >
-              <span className="text-sm text-left break-words line-clamp-2">{issue.name}</span>
-            </button>
-          </div>
-
-          <div
-            className={`flex items-center gap-2 text-xs ${
-              isDropdownActive ? "" : "overflow-x-scroll"
-            }`}
-          >
-            {properties.priority && (
-              <PrioritySelect
-                value={issue.priority}
-                onChange={handlePriorityChange}
-                hideDropdownArrow
-                disabled={isNotAllowed}
-              />
-            )}
-            {properties.state && (
-              <StateSelect
-                value={issue.state_detail}
-                onChange={handleStateChange}
-                projectId={projectId}
-                hideDropdownArrow
-                disabled={isNotAllowed}
-              />
-            )}
-            {properties.start_date && issue.start_date && (
-              <ViewStartDateSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                handleOnOpen={() => setIsDropdownActive(true)}
-                handleOnClose={() => setIsDropdownActive(false)}
-                user={user}
-                isNotAllowed={isNotAllowed}
-              />
-            )}
-            {properties.due_date && issue.target_date && (
-              <ViewDueDateSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                handleOnOpen={() => setIsDropdownActive(true)}
-                handleOnClose={() => setIsDropdownActive(false)}
-                user={user}
-                isNotAllowed={isNotAllowed}
-              />
-            )}
-            {properties.labels && issue.labels.length > 0 && (
-              <LabelSelect
-                value={issue.labels}
-                projectId={projectId}
-                onChange={handleLabelChange}
-                labelsDetails={issue.label_details}
-                hideDropdownArrow
-                user={user}
-                disabled={isNotAllowed}
-              />
-            )}
-            {properties.assignee && (
-              <MembersSelect
-                value={issue.assignees}
-                projectId={projectId}
-                onChange={handleAssigneeChange}
-                membersDetails={issue.assignee_details}
-                hideDropdownArrow
-                disabled={isNotAllowed}
-              />
-            )}
-            {properties.estimate && issue.estimate_point !== null && (
-              <ViewEstimateSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                isNotAllowed={isNotAllowed}
-                user={user}
-                selfPositioned
-              />
-            )}
-            {properties.sub_issue_count && issue.sub_issues_count > 0 && (
-              <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
-                <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
-                  <div className="flex items-center gap-1 text-custom-text-200">
-                    <LayerDiagonalIcon className="h-3.5 w-3.5" />
-                    {issue.sub_issues_count}
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-            {properties.link && issue.link_count > 0 && (
-              <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
-                <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
-                  <div className="flex items-center gap-1 text-custom-text-200">
-                    <LinkIcon className="h-3.5 w-3.5" />
-                    {issue.link_count}
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-            {properties.attachment_count && issue.attachment_count > 0 && (
-              <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
-                <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
-                  <div className="flex items-center gap-1 text-custom-text-200">
-                    <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />
-                    {issue.attachment_count}
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/web/components/core/views/calendar-view/calendar-header.tsx b/web/components/core/views/calendar-view/calendar-header.tsx
deleted file mode 100644
index fd69ed44315..00000000000
--- a/web/components/core/views/calendar-view/calendar-header.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import React from "react";
-
-// headless ui
-import { Popover, Transition } from "@headlessui/react";
-// ui
-import { CustomMenu, ToggleSwitch } from "components/ui";
-// icons
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
-// helpers
-import {
-  formatDate,
-  isSameMonth,
-  isSameYear,
-  updateDateWithMonth,
-  updateDateWithYear,
-} from "helpers/calendar.helper";
-// constants
-import { MONTHS_LIST, YEARS_LIST } from "constants/calendar";
-
-type Props = {
-  currentDate: Date;
-  setCurrentDate: React.Dispatch<React.SetStateAction<Date>>;
-  showWeekEnds: boolean;
-  setShowWeekEnds: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-export const CalendarHeader: React.FC<Props> = ({
-  currentDate,
-  setCurrentDate,
-  showWeekEnds,
-  setShowWeekEnds,
-}) => (
-  <div className="mb-4 flex items-center justify-between">
-    <div className="relative flex h-full w-full items-center justify-start gap-2 text-sm ">
-      <Popover className="flex h-full items-center justify-start rounded-lg">
-        {({ open }) => (
-          <>
-            <Popover.Button>
-              <div className="flex items-center justify-center gap-2 text-2xl font-semibold text-custom-text-100">
-                <span>{formatDate(currentDate, "Month")}</span>{" "}
-                <span>{formatDate(currentDate, "yyyy")}</span>
-              </div>
-            </Popover.Button>
-
-            <Transition
-              as={React.Fragment}
-              enter="transition ease-out duration-200"
-              enterFrom="opacity-0 translate-y-1"
-              enterTo="opacity-100 translate-y-0"
-              leave="transition ease-in duration-150"
-              leaveFrom="opacity-100 translate-y-0"
-              leaveTo="opacity-0 translate-y-1"
-            >
-              <Popover.Panel className="absolute top-10 left-0 z-20 flex w-full max-w-xs transform flex-col overflow-hidden rounded-[10px] bg-custom-background-80 shadow-lg">
-                <div className="flex items-center justify-center gap-5 px-2 py-2 text-sm">
-                  {YEARS_LIST.map((year) => (
-                    <button
-                      onClick={() => setCurrentDate(updateDateWithYear(year.label, currentDate))}
-                      className={` ${
-                        isSameYear(year.value, currentDate)
-                          ? "text-sm font-medium text-custom-text-100"
-                          : "text-xs text-custom-text-200 "
-                      } hover:text-sm hover:font-medium hover:text-custom-text-100`}
-                    >
-                      {year.label}
-                    </button>
-                  ))}
-                </div>
-                <div className="grid grid-cols-4  border-t border-custom-border-200 px-2">
-                  {MONTHS_LIST.map((month) => (
-                    <button
-                      onClick={() =>
-                        setCurrentDate(updateDateWithMonth(`${month.value}`, currentDate))
-                      }
-                      className={`px-2 py-2 text-xs text-custom-text-200 hover:font-medium hover:text-custom-text-100 ${
-                        isSameMonth(`${month.value}`, currentDate)
-                          ? "font-medium text-custom-text-100"
-                          : ""
-                      }`}
-                    >
-                      {month.label}
-                    </button>
-                  ))}
-                </div>
-              </Popover.Panel>
-            </Transition>
-          </>
-        )}
-      </Popover>
-
-      <div className="flex items-center gap-2">
-        <button
-          className="cursor-pointer"
-          onClick={() => {
-            const previousMonthYear =
-              currentDate.getMonth() === 0
-                ? currentDate.getFullYear() - 1
-                : currentDate.getFullYear();
-            const previousMonthMonth =
-              currentDate.getMonth() === 0 ? 11 : currentDate.getMonth() - 1;
-
-            const previousMonthFirstDate = new Date(previousMonthYear, previousMonthMonth, 1);
-
-            setCurrentDate(previousMonthFirstDate);
-          }}
-        >
-          <ChevronLeftIcon className="h-4 w-4" />
-        </button>
-        <button
-          className="cursor-pointer"
-          onClick={() => {
-            const nextMonthYear =
-              currentDate.getMonth() === 11
-                ? currentDate.getFullYear() + 1
-                : currentDate.getFullYear();
-            const nextMonthMonth = (currentDate.getMonth() + 1) % 12;
-
-            const nextMonthFirstDate = new Date(nextMonthYear, nextMonthMonth, 1);
-
-            setCurrentDate(nextMonthFirstDate);
-          }}
-        >
-          <ChevronRightIcon className="h-4 w-4" />
-        </button>
-      </div>
-    </div>
-
-    <div className="flex w-full items-center justify-end gap-2">
-      <button
-        className="group flex cursor-pointer items-center gap-2 rounded-md border border-custom-border-200 px-3 py-1 text-sm hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none"
-        onClick={() => setCurrentDate(new Date())}
-      >
-        Today
-      </button>
-
-      <CustomMenu
-        customButton={
-          <div className="group flex cursor-pointer items-center gap-2 rounded-md border border-custom-border-200 px-3 py-1 text-sm hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none">
-            Options
-            <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-          </div>
-        }
-      >
-        <div className="flex w-52 items-center justify-between px-1 text-sm text-custom-text-200">
-          <h4>Show weekends</h4>
-          <ToggleSwitch value={showWeekEnds} onChange={() => setShowWeekEnds(!showWeekEnds)} />
-        </div>
-      </CustomMenu>
-    </div>
-  </div>
-);
-
-export default CalendarHeader;
diff --git a/web/components/core/views/calendar-view/calendar.tsx b/web/components/core/views/calendar-view/calendar.tsx
deleted file mode 100644
index 7758f64cdbb..00000000000
--- a/web/components/core/views/calendar-view/calendar.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useRouter } from "next/router";
-import { mutate } from "swr";
-import { DragDropContext, DropResult } from "react-beautiful-dnd";
-// services
-import issuesService from "services/issues.service";
-// hooks
-import useCalendarIssuesView from "hooks/use-calendar-issues-view";
-// components
-import { SingleCalendarDate, CalendarHeader } from "components/core";
-import { IssuePeekOverview } from "components/issues";
-// ui
-import { Spinner } from "components/ui";
-// helpers
-import { renderDateFormat } from "helpers/date-time.helper";
-import {
-  startOfWeek,
-  lastDayOfWeek,
-  eachDayOfInterval,
-  weekDayInterval,
-  formatDate,
-} from "helpers/calendar.helper";
-// types
-import { ICalendarRange, ICurrentUserResponse, IIssue, UserAuth } from "types";
-// fetch-keys
-import {
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_ISSUES_WITH_PARAMS,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  VIEW_ISSUES,
-} from "constants/fetch-keys";
-
-type Props = {
-  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
-  addIssueToDate: (date: string) => void;
-  disableUserActions: boolean;
-  user: ICurrentUserResponse | undefined;
-  userAuth: UserAuth;
-};
-
-export const CalendarView: React.FC<Props> = ({
-  handleIssueAction,
-  addIssueToDate,
-  disableUserActions,
-  user,
-  userAuth,
-}) => {
-  const [showWeekEnds, setShowWeekEnds] = useState(false);
-
-  const { calendarIssues, mutateIssues, params, activeMonthDate, setActiveMonthDate } =
-    useCalendarIssuesView();
-
-  const [calendarDates, setCalendarDates] = useState<ICalendarRange>({
-    startDate: startOfWeek(activeMonthDate),
-    endDate: lastDayOfWeek(activeMonthDate),
-  });
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
-
-  const currentViewDays = showWeekEnds
-    ? eachDayOfInterval({
-        start: calendarDates.startDate,
-        end: calendarDates.endDate,
-      })
-    : weekDayInterval({
-        start: calendarDates.startDate,
-        end: calendarDates.endDate,
-      });
-
-  const currentViewDaysData = currentViewDays.map((date: Date) => {
-    const filterIssue =
-      calendarIssues.length > 0
-        ? calendarIssues.filter(
-            (issue) =>
-              issue.target_date && renderDateFormat(issue.target_date) === renderDateFormat(date)
-          )
-        : [];
-    return {
-      date: renderDateFormat(date),
-      issues: filterIssue,
-    };
-  });
-
-  const weeks = ((date: Date[]) => {
-    const weeks = [];
-    if (showWeekEnds) {
-      for (let day = 0; day <= 6; day++) {
-        weeks.push(date[day]);
-      }
-    } else {
-      for (let day = 0; day <= 4; day++) {
-        weeks.push(date[day]);
-      }
-    }
-
-    return weeks;
-  })(currentViewDays);
-
-  const onDragEnd = (result: DropResult) => {
-    const { source, destination, draggableId } = result;
-
-    if (!destination || !workspaceSlug || !projectId) return;
-
-    if (source.droppableId === destination.droppableId) return;
-
-    const fetchKey = cycleId
-      ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
-      : moduleId
-      ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
-      : viewId
-      ? VIEW_ISSUES(viewId.toString(), params)
-      : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);
-
-    mutate<IIssue[]>(
-      fetchKey,
-      (prevData) =>
-        (prevData ?? []).map((p) => {
-          if (p.id === draggableId)
-            return {
-              ...p,
-              target_date: destination.droppableId,
-            };
-
-          return p;
-        }),
-      false
-    );
-
-    issuesService
-      .patchIssue(
-        workspaceSlug as string,
-        projectId as string,
-        draggableId,
-        {
-          target_date: destination?.droppableId,
-        },
-        user
-      )
-      .then(() => mutate(fetchKey));
-  };
-
-  useEffect(() => {
-    setCalendarDates({
-      startDate: startOfWeek(activeMonthDate),
-      endDate: lastDayOfWeek(activeMonthDate),
-    });
-  }, [activeMonthDate]);
-
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disableUserActions;
-
-  return (
-    <>
-      <IssuePeekOverview
-        handleMutation={() => mutateIssues()}
-        projectId={projectId?.toString() ?? ""}
-        workspaceSlug={workspaceSlug?.toString() ?? ""}
-        readOnly={disableUserActions}
-      />
-      {calendarIssues ? (
-        <div className="h-full overflow-y-auto">
-          <DragDropContext onDragEnd={onDragEnd}>
-            <div
-              id={`calendar-view-${cycleId ?? moduleId ?? viewId ?? ""}`}
-              className="h-full rounded-lg p-8 text-custom-text-200"
-            >
-              <CalendarHeader
-                showWeekEnds={showWeekEnds}
-                setShowWeekEnds={setShowWeekEnds}
-                currentDate={activeMonthDate}
-                setCurrentDate={setActiveMonthDate}
-              />
-
-              <div
-                className={`grid auto-rows-[minmax(36px,1fr)] rounded-lg ${
-                  showWeekEnds ? "grid-cols-7" : "grid-cols-5"
-                }`}
-              >
-                {weeks.map((date, index) => (
-                  <div
-                    key={index}
-                    className={`flex  items-center justify-start gap-2 border-custom-border-200 bg-custom-background-90 p-1.5 text-base font-medium text-custom-text-200`}
-                  >
-                    <span>{formatDate(date, "eee").substring(0, 3)}</span>
-                  </div>
-                ))}
-              </div>
-
-              <div
-                className={`grid h-full auto-rows-min ${
-                  showWeekEnds ? "grid-cols-7" : "grid-cols-5"
-                } `}
-              >
-                {currentViewDaysData.map((date, index) => (
-                  <SingleCalendarDate
-                    key={`${date}-${index}`}
-                    index={index}
-                    date={date}
-                    handleIssueAction={handleIssueAction}
-                    addIssueToDate={addIssueToDate}
-                    showWeekEnds={showWeekEnds}
-                    user={user}
-                    isNotAllowed={isNotAllowed}
-                  />
-                ))}
-              </div>
-            </div>
-          </DragDropContext>
-        </div>
-      ) : (
-        <div className="flex h-full w-full items-center justify-center">
-          <Spinner />
-        </div>
-      )}
-    </>
-  );
-};
diff --git a/web/components/core/views/calendar-view/index.ts b/web/components/core/views/calendar-view/index.ts
deleted file mode 100644
index 75d8a3a1eff..00000000000
--- a/web/components/core/views/calendar-view/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from "./calendar-header";
-export * from "./calendar";
-export * from "./single-date";
-export * from "./single-issue";
-export * from "./inline-create-issue-form";
diff --git a/web/components/core/views/calendar-view/inline-create-issue-form.tsx b/web/components/core/views/calendar-view/inline-create-issue-form.tsx
deleted file mode 100644
index 51b6c518b42..00000000000
--- a/web/components/core/views/calendar-view/inline-create-issue-form.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-// next
-import { useRouter } from "next/router";
-
-// react hook form
-import { useFormContext } from "react-hook-form";
-
-import { InlineCreateIssueFormWrapper } from "components/core";
-
-// hooks
-import useProjectDetails from "hooks/use-project-details";
-
-// types
-import { IIssue } from "types";
-
-type Props = {
-  isOpen: boolean;
-  handleClose: () => void;
-  onSuccess?: (data: IIssue) => Promise<void> | void;
-  prePopulatedData?: Partial<IIssue>;
-  dependencies: any[];
-};
-
-const useCheckIfThereIsSpaceOnRight = (ref: React.RefObject<HTMLDivElement>, deps: any[]) => {
-  const [isThereSpaceOnRight, setIsThereSpaceOnRight] = useState(true);
-
-  const router = useRouter();
-  const { moduleId, cycleId, viewId } = router.query;
-
-  const container = document.getElementById(`calendar-view-${cycleId ?? moduleId ?? viewId}`);
-
-  useEffect(() => {
-    if (!ref.current) return;
-
-    const { right } = ref.current.getBoundingClientRect();
-
-    const width = right;
-
-    const innerWidth = container?.getBoundingClientRect().width ?? window.innerWidth;
-
-    if (width > innerWidth) setIsThereSpaceOnRight(false);
-    else setIsThereSpaceOnRight(true);
-  }, [ref, deps, container]);
-
-  return isThereSpaceOnRight;
-};
-
-const InlineInput = () => {
-  const { projectDetails } = useProjectDetails();
-
-  const { register, setFocus } = useFormContext();
-
-  useEffect(() => {
-    setFocus("name");
-  }, [setFocus]);
-
-  return (
-    <>
-      <h4 className="text-sm font-medium leading-5 text-custom-text-400">
-        {projectDetails?.identifier ?? "..."}
-      </h4>
-      <input
-        type="text"
-        autoComplete="off"
-        placeholder="Issue Title"
-        {...register("name", {
-          required: "Issue title is required.",
-        })}
-        className="w-full pr-2 py-2.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
-      />
-    </>
-  );
-};
-
-export const CalendarInlineCreateIssueForm: React.FC<Props> = (props) => {
-  const { isOpen, dependencies } = props;
-
-  const ref = useRef<HTMLDivElement>(null);
-
-  const isSpaceOnRight = useCheckIfThereIsSpaceOnRight(ref, dependencies);
-
-  return (
-    <>
-      <div
-        ref={ref}
-        className={`absolute top-10 transition-all z-20 w-full max-w-[calc(100%-1.25rem)] ${
-          isOpen ? "opacity-100 scale-100" : "opacity-0 pointer-events-none scale-95"
-        } right-2.5`}
-      >
-        <InlineCreateIssueFormWrapper
-          {...props}
-          className="flex w-full px-1.5 border-[0.5px] border-custom-border-100 rounded z-50 items-center gap-x-2 bg-custom-background-100 shadow-custom-shadow-sm transition-opacity"
-        >
-          <InlineInput />
-        </InlineCreateIssueFormWrapper>
-      </div>
-      {/* Added to make any other element as outside click. This will make input also to be outside. */}
-      {isOpen && <div className="w-screen h-screen fixed inset-0 z-10" />}
-    </>
-  );
-};
diff --git a/web/components/core/views/calendar-view/single-date.tsx b/web/components/core/views/calendar-view/single-date.tsx
deleted file mode 100644
index a67ca762b11..00000000000
--- a/web/components/core/views/calendar-view/single-date.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, { useState } from "react";
-
-// next
-import { useRouter } from "next/router";
-
-// react-beautiful-dnd
-import { Draggable } from "react-beautiful-dnd";
-// component
-import StrictModeDroppable from "components/dnd/StrictModeDroppable";
-import { SingleCalendarIssue } from "./single-issue";
-import { CalendarInlineCreateIssueForm } from "./inline-create-issue-form";
-// icons
-import { PlusSmallIcon } from "@heroicons/react/24/outline";
-// helper
-import { formatDate } from "helpers/calendar.helper";
-// types
-import { ICurrentUserResponse, IIssue } from "types";
-
-type Props = {
-  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
-  index: number;
-  date: {
-    date: string;
-    issues: IIssue[];
-  };
-  addIssueToDate: (date: string) => void;
-  showWeekEnds: boolean;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const SingleCalendarDate: React.FC<Props> = (props) => {
-  const { handleIssueAction, date, index, showWeekEnds, user, isNotAllowed } = props;
-
-  const router = useRouter();
-  const { cycleId, moduleId } = router.query;
-
-  const [showAllIssues, setShowAllIssues] = useState(false);
-  const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
-
-  const [formPosition, setFormPosition] = useState({ x: 0, y: 0 });
-
-  const totalIssues = date.issues.length;
-
-  return (
-    <StrictModeDroppable droppableId={date.date}>
-      {(provided) => (
-        <div
-          key={index}
-          ref={provided.innerRef}
-          {...provided.droppableProps}
-          className={`group relative flex min-h-[150px] flex-col gap-1.5 border-t border-custom-border-200 p-2.5 text-left text-sm font-medium hover:bg-custom-background-90 ${
-            showWeekEnds
-              ? (index + 1) % 7 === 0
-                ? ""
-                : "border-r"
-              : (index + 1) % 5 === 0
-              ? ""
-              : "border-r"
-          }`}
-        >
-          <>
-            <span>{formatDate(new Date(date.date), "d")}</span>
-            {totalIssues > 0 &&
-              date.issues.slice(0, showAllIssues ? totalIssues : 4).map((issue: IIssue, index) => (
-                <Draggable key={issue.id} draggableId={issue.id} index={index}>
-                  {(provided, snapshot) => (
-                    <SingleCalendarIssue
-                      key={index}
-                      index={index}
-                      provided={provided}
-                      snapshot={snapshot}
-                      issue={issue}
-                      projectId={issue.project_detail.id}
-                      handleEditIssue={() => handleIssueAction(issue, "edit")}
-                      handleDeleteIssue={() => handleIssueAction(issue, "delete")}
-                      user={user}
-                      isNotAllowed={isNotAllowed}
-                    />
-                  )}
-                </Draggable>
-              ))}
-
-            <CalendarInlineCreateIssueForm
-              isOpen={isCreateIssueFormOpen}
-              dependencies={[showWeekEnds]}
-              handleClose={() => setIsCreateIssueFormOpen(false)}
-              prePopulatedData={{
-                target_date: date.date,
-                ...(cycleId && { cycle: cycleId.toString() }),
-                ...(moduleId && { module: moduleId.toString() }),
-              }}
-            />
-
-            {totalIssues > 4 && (
-              <button
-                type="button"
-                className="w-min whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 px-1.5 py-1 text-xs"
-                onClick={() => setShowAllIssues((prevData) => !prevData)}
-              >
-                {showAllIssues ? "Hide" : totalIssues - 4 + " more"}
-              </button>
-            )}
-
-            <div
-              className={`absolute top-2 right-2 flex items-center justify-center rounded-md bg-custom-background-80 p-1 text-xs text-custom-text-200 opacity-0 group-hover:opacity-100`}
-            >
-              <button
-                onClick={(e) => {
-                  setIsCreateIssueFormOpen(true);
-                  setFormPosition({ x: e.clientX, y: e.clientY });
-                }}
-                className="flex items-center justify-center gap-1 text-center"
-              >
-                <PlusSmallIcon className="h-4 w-4 text-custom-text-200" />
-                Add issue
-              </button>
-            </div>
-
-            {provided.placeholder}
-          </>
-        </div>
-      )}
-    </StrictModeDroppable>
-  );
-};
diff --git a/web/components/core/views/calendar-view/single-issue.tsx b/web/components/core/views/calendar-view/single-issue.tsx
deleted file mode 100644
index e0e9aa2a52a..00000000000
--- a/web/components/core/views/calendar-view/single-issue.tsx
+++ /dev/null
@@ -1,403 +0,0 @@
-import React, { useCallback } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-beautiful-dnd
-import { DraggableProvided, DraggableStateSnapshot } from "react-beautiful-dnd";
-// services
-import issuesService from "services/issues.service";
-import trackEventServices from "services/track-event.service";
-// hooks
-import useCalendarIssuesView from "hooks/use-calendar-issues-view";
-import useIssuesProperties from "hooks/use-issue-properties";
-import useToast from "hooks/use-toast";
-// components
-import { CustomMenu, Tooltip } from "components/ui";
-import { ViewDueDateSelect, ViewEstimateSelect, ViewStartDateSelect } from "components/issues";
-import { LabelSelect, MembersSelect, PrioritySelect } from "components/project";
-import { StateSelect } from "components/states";
-// icons
-import { LinkIcon, PaperClipIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
-import { LayerDiagonalIcon } from "components/icons";
-// helper
-import { copyTextToClipboard, truncateText } from "helpers/string.helper";
-// type
-import { ICurrentUserResponse, IIssue, IState, ISubIssueResponse, TIssuePriorities } from "types";
-// fetch-keys
-import {
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_ISSUES_WITH_PARAMS,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  SUB_ISSUES,
-  VIEW_ISSUES,
-} from "constants/fetch-keys";
-
-type Props = {
-  handleEditIssue: (issue: IIssue) => void;
-  handleDeleteIssue: (issue: IIssue) => void;
-  index: number;
-  provided: DraggableProvided;
-  snapshot: DraggableStateSnapshot;
-  issue: IIssue;
-  projectId: string;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
-};
-
-export const SingleCalendarIssue: React.FC<Props> = ({
-  handleEditIssue,
-  handleDeleteIssue,
-  index,
-  provided,
-  snapshot,
-  issue,
-  projectId,
-  user,
-  isNotAllowed,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, cycleId, moduleId, viewId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const { params } = useCalendarIssuesView();
-
-  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
-
-  const partialUpdateIssue = useCallback(
-    (formData: Partial<IIssue>, issue: IIssue) => {
-      if (!workspaceSlug || !projectId) return;
-
-      const fetchKey = cycleId
-        ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
-        : moduleId
-        ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
-        : viewId
-        ? VIEW_ISSUES(viewId.toString(), params)
-        : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);
-
-      if (issue.parent) {
-        mutate<ISubIssueResponse>(
-          SUB_ISSUES(issue.parent.toString()),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            return {
-              ...prevData,
-              sub_issues: (prevData.sub_issues ?? []).map((i) => {
-                if (i.id === issue.id) {
-                  return {
-                    ...i,
-                    ...formData,
-                  };
-                }
-                return i;
-              }),
-            };
-          },
-          false
-        );
-      } else {
-        mutate<IIssue[]>(
-          fetchKey,
-          (prevData) =>
-            (prevData ?? []).map((p) => {
-              if (p.id === issue.id) {
-                return {
-                  ...p,
-                  ...formData,
-                  assignees: formData?.assignees_list ?? p.assignees,
-                };
-              }
-
-              return p;
-            }),
-          false
-        );
-      }
-
-      issuesService
-        .patchIssue(
-          workspaceSlug as string,
-          projectId as string,
-          issue.id as string,
-          formData,
-          user
-        )
-        .then(() => {
-          mutate(fetchKey);
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    [workspaceSlug, projectId, cycleId, moduleId, viewId, params, user]
-  );
-
-  const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
-    ).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Issue link copied to clipboard.",
-      });
-    });
-  };
-
-  const handleStateChange = (data: string, states: IState[] | undefined) => {
-    const oldState = states?.find((s) => s.id === issue.state);
-    const newState = states?.find((s) => s.id === data);
-
-    partialUpdateIssue(
-      {
-        state: data,
-        state_detail: newState,
-      },
-      issue
-    );
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
-      {
-        workspaceSlug,
-        workspaceId: issue.workspace,
-        projectId: issue.project_detail.id,
-        projectIdentifier: issue.project_detail.identifier,
-        projectName: issue.project_detail.name,
-        issueId: issue.id,
-      },
-      "ISSUE_PROPERTY_UPDATE_STATE",
-      user
-    );
-    if (oldState?.group !== "completed" && newState?.group !== "completed") {
-      trackEventServices.trackIssueMarkedAsDoneEvent(
-        {
-          workspaceSlug: issue.workspace_detail.slug,
-          workspaceId: issue.workspace_detail.id,
-          projectId: issue.project_detail.id,
-          projectIdentifier: issue.project_detail.identifier,
-          projectName: issue.project_detail.name,
-          issueId: issue.id,
-        },
-        user
-      );
-    }
-  };
-
-  const handleAssigneeChange = (data: any) => {
-    const newData = issue.assignees ?? [];
-
-    if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
-    else newData.push(data);
-
-    partialUpdateIssue({ assignees_list: data }, issue);
-
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
-      {
-        workspaceSlug,
-        workspaceId: issue.workspace,
-        projectId: issue.project_detail.id,
-        projectIdentifier: issue.project_detail.identifier,
-        projectName: issue.project_detail.name,
-        issueId: issue.id,
-      },
-      "ISSUE_PROPERTY_UPDATE_ASSIGNEE",
-      user
-    );
-  };
-
-  const handleLabelChange = (data: any) => {
-    partialUpdateIssue({ labels_list: data }, issue);
-  };
-
-  const handlePriorityChange = (data: TIssuePriorities) => {
-    partialUpdateIssue({ priority: data }, issue);
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
-      {
-        workspaceSlug,
-        workspaceId: issue.workspace,
-        projectId: issue.project_detail.id,
-        projectIdentifier: issue.project_detail.identifier,
-        projectName: issue.project_detail.name,
-        issueId: issue.id,
-      },
-      "ISSUE_PROPERTY_UPDATE_PRIORITY",
-      user
-    );
-  };
-
-  const displayProperties = properties
-    ? Object.values(properties).some((value) => value === true)
-    : false;
-
-  const openPeekOverview = () => {
-    const { query } = router;
-
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekIssue: issue.id },
-    });
-  };
-
-  return (
-    <div
-      key={index}
-      ref={provided.innerRef}
-      {...provided.draggableProps}
-      {...provided.dragHandleProps}
-      className={`w-full relative cursor-pointer rounded border border-custom-border-200 px-1.5 py-1.5 text-xs duration-300 hover:cursor-move hover:bg-custom-background-80 ${
-        snapshot.isDragging ? "bg-custom-background-80 shadow-lg" : ""
-      }`}
-    >
-      <div className="group/card flex w-full flex-col items-start justify-center gap-1.5 text-xs sm:w-auto ">
-        {!isNotAllowed && (
-          <div className="z-1 absolute top-1.5 right-1.5 opacity-0 group-hover/card:opacity-100">
-            <CustomMenu width="auto" ellipsis>
-              <CustomMenu.MenuItem onClick={() => handleEditIssue(issue)}>
-                <div className="flex items-center justify-start gap-2">
-                  <PencilIcon className="h-4 w-4" />
-                  <span>Edit issue</span>
-                </div>
-              </CustomMenu.MenuItem>
-              <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
-                <div className="flex items-center justify-start gap-2">
-                  <TrashIcon className="h-4 w-4" />
-                  <span>Delete issue</span>
-                </div>
-              </CustomMenu.MenuItem>
-              <CustomMenu.MenuItem onClick={handleCopyText}>
-                <div className="flex items-center justify-start gap-2">
-                  <LinkIcon className="h-4 w-4" />
-                  <span>Copy issue Link</span>
-                </div>
-              </CustomMenu.MenuItem>
-            </CustomMenu>
-          </div>
-        )}
-
-        <button
-          type="button"
-          className="flex w-full cursor-pointer flex-col items-start justify-center gap-1.5"
-          onClick={openPeekOverview}
-        >
-          {properties.key && (
-            <Tooltip
-              tooltipHeading="Issue ID"
-              tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
-            >
-              <span className="flex-shrink-0 text-xs text-custom-text-200">
-                {issue.project_detail?.identifier}-{issue.sequence_id}
-              </span>
-            </Tooltip>
-          )}
-          <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-            <span className="text-xs text-custom-text-100">{truncateText(issue.name, 25)}</span>
-          </Tooltip>
-        </button>
-
-        {displayProperties && (
-          <div className="relative mt-1.5 w-full flex flex-wrap items-center gap-2 text-xs">
-            {properties.priority && (
-              <PrioritySelect
-                value={issue.priority}
-                onChange={handlePriorityChange}
-                hideDropdownArrow
-                disabled={isNotAllowed}
-              />
-            )}
-            {properties.state && (
-              <StateSelect
-                value={issue.state_detail}
-                projectId={projectId}
-                onChange={handleStateChange}
-                hideDropdownArrow
-                disabled={isNotAllowed}
-              />
-            )}
-            {properties.start_date && issue.start_date && (
-              <ViewStartDateSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                user={user}
-                isNotAllowed={isNotAllowed}
-              />
-            )}
-            {properties.due_date && issue.target_date && (
-              <ViewDueDateSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                user={user}
-                isNotAllowed={isNotAllowed}
-              />
-            )}
-            {properties.labels && issue.labels.length > 0 && (
-              <LabelSelect
-                value={issue.labels}
-                projectId={projectId}
-                onChange={handleLabelChange}
-                labelsDetails={issue.label_details}
-                hideDropdownArrow
-                maxRender={1}
-                user={user}
-                disabled={isNotAllowed}
-              />
-            )}
-            {properties.assignee && (
-              <MembersSelect
-                value={issue.assignees}
-                projectId={projectId}
-                onChange={handleAssigneeChange}
-                membersDetails={issue.assignee_details}
-                hideDropdownArrow
-                disabled={isNotAllowed}
-              />
-            )}
-            {properties.estimate && issue.estimate_point !== null && (
-              <ViewEstimateSelect
-                issue={issue}
-                partialUpdateIssue={partialUpdateIssue}
-                position="left"
-                user={user}
-                isNotAllowed={isNotAllowed}
-              />
-            )}
-            {properties.sub_issue_count && issue.sub_issues_count > 0 && (
-              <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
-                <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
-                  <div className="flex items-center gap-1 text-custom-text-200">
-                    <LayerDiagonalIcon className="h-3.5 w-3.5" />
-                    {issue.sub_issues_count}
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-            {properties.link && issue.link_count > 0 && (
-              <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
-                <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
-                  <div className="flex items-center gap-1 text-custom-text-200">
-                    <LinkIcon className="h-3.5 w-3.5" />
-                    {issue.link_count}
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-            {properties.attachment_count && issue.attachment_count > 0 && (
-              <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
-                <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
-                  <div className="flex items-center gap-1 text-custom-text-200">
-                    <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />
-                    {issue.attachment_count}
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/web/components/core/views/list-view/index.ts b/web/components/core/views/list-view/index.ts
deleted file mode 100644
index 4d59be1654d..00000000000
--- a/web/components/core/views/list-view/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./all-lists";
-export * from "./single-issue";
-export * from "./single-list";
-export * from "./inline-create-issue-form";
diff --git a/web/components/core/views/list-view/inline-create-issue-form.tsx b/web/components/core/views/list-view/inline-create-issue-form.tsx
deleted file mode 100644
index b61420fc82a..00000000000
--- a/web/components/core/views/list-view/inline-create-issue-form.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useEffect } from "react";
-// react hook form
-import { useFormContext } from "react-hook-form";
-
-// hooks
-import useProjectDetails from "hooks/use-project-details";
-
-// components
-import { InlineCreateIssueFormWrapper } from "../inline-issue-create-wrapper";
-
-// types
-import { IIssue } from "types";
-
-type Props = {
-  isOpen: boolean;
-  handleClose: () => void;
-  onSuccess?: (data: IIssue) => Promise<void> | void;
-  prePopulatedData?: Partial<IIssue>;
-};
-
-const InlineInput = () => {
-  const { projectDetails } = useProjectDetails();
-
-  const { register, setFocus } = useFormContext();
-
-  useEffect(() => {
-    setFocus("name");
-  }, [setFocus]);
-
-  return (
-    <>
-      <h4 className="text-sm font-medium leading-5 text-custom-text-400">
-        {projectDetails?.identifier ?? "..."}
-      </h4>
-      <input
-        type="text"
-        autoComplete="off"
-        placeholder="Issue Title"
-        {...register("name", {
-          required: "Issue title is required.",
-        })}
-        className="w-full px-2 py-3 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
-      />
-    </>
-  );
-};
-
-export const ListInlineCreateIssueForm: React.FC<Props> = (props) => (
-  <>
-    <InlineCreateIssueFormWrapper
-      className="flex border-[0.5px] border-t-0 border-custom-border-100 px-4 items-center gap-x-5 bg-custom-background-100 shadow-custom-shadow-sm z-10"
-      {...props}
-    >
-      <InlineInput />
-    </InlineCreateIssueFormWrapper>
-    {props.isOpen && (
-      <p className="text-xs ml-3 mt-3 italic text-custom-text-200">
-        Press {"'"}Enter{"'"} to add another issue
-      </p>
-    )}
-  </>
-);
diff --git a/web/components/core/views/list-view/single-issue.tsx b/web/components/core/views/list-view/single-issue.tsx
deleted file mode 100644
index 7fa54b852ee..00000000000
--- a/web/components/core/views/list-view/single-issue.tsx
+++ /dev/null
@@ -1,511 +0,0 @@
-import React, { useCallback, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// services
-import issuesService from "services/issues.service";
-import trackEventServices from "services/track-event.service";
-// hooks
-import useToast from "hooks/use-toast";
-// components
-import { ViewDueDateSelect, ViewEstimateSelect, ViewStartDateSelect } from "components/issues";
-import { LabelSelect, MembersSelect, PrioritySelect } from "components/project";
-import { StateSelect } from "components/states";
-// ui
-import { Tooltip, CustomMenu, ContextMenu } from "components/ui";
-// icons
-import {
-  ClipboardDocumentCheckIcon,
-  LinkIcon,
-  PencilIcon,
-  TrashIcon,
-  XMarkIcon,
-  ArrowTopRightOnSquareIcon,
-  PaperClipIcon,
-} from "@heroicons/react/24/outline";
-import { LayerDiagonalIcon } from "components/icons";
-// helpers
-import { copyTextToClipboard } from "helpers/string.helper";
-import { handleIssuesMutation } from "constants/issue";
-// types
-import {
-  ICurrentUserResponse,
-  IIssue,
-  IIssueViewProps,
-  IState,
-  ISubIssueResponse,
-  IUserProfileProjectSegregation,
-  TIssuePriorities,
-  UserAuth,
-} from "types";
-// fetch-keys
-import {
-  CYCLE_DETAILS,
-  MODULE_DETAILS,
-  SUB_ISSUES,
-  USER_PROFILE_PROJECT_SEGREGATION,
-} from "constants/fetch-keys";
-
-type Props = {
-  type?: string;
-  issue: IIssue;
-  projectId: string;
-  groupTitle?: string;
-  editIssue: () => void;
-  index: number;
-  makeIssueCopy: () => void;
-  removeIssue?: (() => void) | null;
-  handleDeleteIssue: (issue: IIssue) => void;
-  handleDraftIssueSelect?: (issue: IIssue) => void;
-  handleDraftIssueDelete?: (issue: IIssue) => void;
-  handleMyIssueOpen?: (issue: IIssue) => void;
-  disableUserActions: boolean;
-  user: ICurrentUserResponse | undefined;
-  userAuth: UserAuth;
-  viewProps: IIssueViewProps;
-};
-
-export const SingleListIssue: React.FC<Props> = ({
-  type,
-  issue,
-  projectId,
-  editIssue,
-  index,
-  makeIssueCopy,
-  removeIssue,
-  groupTitle,
-  handleDraftIssueDelete,
-  handleDeleteIssue,
-  handleMyIssueOpen,
-  disableUserActions,
-  user,
-  userAuth,
-  viewProps,
-  handleDraftIssueSelect,
-}) => {
-  // context menu
-  const [contextMenu, setContextMenu] = useState(false);
-  const [contextMenuPosition, setContextMenuPosition] = useState<React.MouseEvent | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug, cycleId, moduleId, userId } = router.query;
-  const isArchivedIssues = router.pathname.includes("archived-issues");
-  const isDraftIssues = router.pathname?.split("/")?.[4] === "draft-issues";
-
-  const { setToastAlert } = useToast();
-
-  const { displayFilters, properties, mutateIssues } = viewProps;
-
-  const partialUpdateIssue = useCallback(
-    (formData: Partial<IIssue>, issue: IIssue) => {
-      if (!workspaceSlug || !issue) return;
-
-      if (issue.parent) {
-        mutate<ISubIssueResponse>(
-          SUB_ISSUES(issue.parent.toString()),
-          (prevData) => {
-            if (!prevData) return prevData;
-
-            return {
-              ...prevData,
-              sub_issues: (prevData.sub_issues ?? []).map((i) => {
-                if (i.id === issue.id) {
-                  return {
-                    ...i,
-                    ...formData,
-                  };
-                }
-                return i;
-              }),
-            };
-          },
-          false
-        );
-      } else {
-        mutateIssues(
-          (prevData: any) =>
-            handleIssuesMutation(
-              formData,
-              groupTitle ?? "",
-              displayFilters?.group_by ?? null,
-              index,
-              displayFilters?.order_by ?? "-created_at",
-              prevData
-            ),
-          false
-        );
-      }
-
-      issuesService
-        .patchIssue(workspaceSlug as string, issue.project, issue.id, formData, user)
-        .then(() => {
-          mutateIssues();
-
-          if (userId)
-            mutate<IUserProfileProjectSegregation>(
-              USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString())
-            );
-
-          if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
-          if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
-        });
-    },
-    [
-      displayFilters,
-      workspaceSlug,
-      cycleId,
-      moduleId,
-      userId,
-      groupTitle,
-      index,
-      mutateIssues,
-      user,
-    ]
-  );
-
-  const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
-    ).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Issue link copied to clipboard.",
-      });
-    });
-  };
-
-  const handleStateChange = (data: string, states: IState[] | undefined) => {
-    const oldState = states?.find((s) => s.id === issue.state);
-    const newState = states?.find((s) => s.id === data);
-
-    partialUpdateIssue(
-      {
-        state: data,
-        state_detail: newState,
-      },
-      issue
-    );
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
-      {
-        workspaceSlug,
-        workspaceId: issue.workspace,
-        projectId: issue.project_detail.id,
-        projectIdentifier: issue.project_detail.identifier,
-        projectName: issue.project_detail.name,
-        issueId: issue.id,
-      },
-      "ISSUE_PROPERTY_UPDATE_STATE",
-      user
-    );
-    if (oldState?.group !== "completed" && newState?.group !== "completed") {
-      trackEventServices.trackIssueMarkedAsDoneEvent(
-        {
-          workspaceSlug: issue.workspace_detail.slug,
-          workspaceId: issue.workspace_detail.id,
-          projectId: issue.project_detail.id,
-          projectIdentifier: issue.project_detail.identifier,
-          projectName: issue.project_detail.name,
-          issueId: issue.id,
-        },
-        user
-      );
-    }
-  };
-
-  const handleAssigneeChange = (data: any) => {
-    const newData = issue.assignees ?? [];
-
-    if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
-    else newData.push(data);
-
-    partialUpdateIssue({ assignees_list: data }, issue);
-
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
-      {
-        workspaceSlug,
-        workspaceId: issue.workspace,
-        projectId: issue.project_detail.id,
-        projectIdentifier: issue.project_detail.identifier,
-        projectName: issue.project_detail.name,
-        issueId: issue.id,
-      },
-      "ISSUE_PROPERTY_UPDATE_ASSIGNEE",
-      user
-    );
-  };
-
-  const handleLabelChange = (data: any) => {
-    partialUpdateIssue({ labels_list: data }, issue);
-  };
-
-  const handlePriorityChange = (data: TIssuePriorities) => {
-    partialUpdateIssue({ priority: data }, issue);
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
-      {
-        workspaceSlug,
-        workspaceId: issue.workspace,
-        projectId: issue.project_detail.id,
-        projectIdentifier: issue.project_detail.identifier,
-        projectName: issue.project_detail.name,
-        issueId: issue.id,
-      },
-      "ISSUE_PROPERTY_UPDATE_PRIORITY",
-      user
-    );
-  };
-
-  const issuePath = isArchivedIssues
-    ? `/${workspaceSlug}/projects/${issue.project}/archived-issues/${issue.id}`
-    : isDraftIssues
-    ? `#`
-    : `/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`;
-
-  const openPeekOverview = (issue: IIssue) => {
-    const { query } = router;
-
-    if (handleMyIssueOpen) handleMyIssueOpen(issue);
-    router.push({
-      pathname: router.pathname,
-      query: { ...query, peekIssue: issue.id },
-    });
-  };
-
-  const isNotAllowed =
-    userAuth.isGuest || userAuth.isViewer || disableUserActions || isArchivedIssues;
-
-  return (
-    <>
-      <ContextMenu
-        clickEvent={contextMenuPosition}
-        title="Quick actions"
-        isOpen={contextMenu}
-        setIsOpen={setContextMenu}
-      >
-        {!isNotAllowed && (
-          <>
-            <ContextMenu.Item
-              Icon={PencilIcon}
-              onClick={() => {
-                if (isDraftIssues && handleDraftIssueSelect) handleDraftIssueSelect(issue);
-                else editIssue();
-              }}
-            >
-              Edit issue
-            </ContextMenu.Item>
-            {!isDraftIssues && (
-              <ContextMenu.Item Icon={ClipboardDocumentCheckIcon} onClick={makeIssueCopy}>
-                Make a copy...
-              </ContextMenu.Item>
-            )}
-            <ContextMenu.Item
-              Icon={TrashIcon}
-              onClick={() => {
-                if (isDraftIssues && handleDraftIssueDelete) handleDraftIssueDelete(issue);
-                else handleDeleteIssue(issue);
-              }}
-            >
-              Delete issue
-            </ContextMenu.Item>
-          </>
-        )}
-        {!isDraftIssues && (
-          <>
-            <ContextMenu.Item Icon={LinkIcon} onClick={handleCopyText}>
-              Copy issue link
-            </ContextMenu.Item>
-            <a href={issuePath} target="_blank" rel="noreferrer noopener">
-              <ContextMenu.Item Icon={ArrowTopRightOnSquareIcon}>
-                Open issue in new tab
-              </ContextMenu.Item>
-            </a>
-          </>
-        )}
-      </ContextMenu>
-
-      <div
-        className="flex items-center justify-between px-4 py-2.5 gap-10 border-b-[0.5px] border-custom-border-100 bg-custom-background-100 last:border-b-0"
-        onContextMenu={(e) => {
-          e.preventDefault();
-          setContextMenu(true);
-          setContextMenuPosition(e);
-        }}
-      >
-        <div className="flex-grow cursor-pointer min-w-[200px] whitespace-nowrap overflow-hidden overflow-ellipsis">
-          <div className="group relative flex items-center gap-2">
-            {properties.key && (
-              <Tooltip
-                tooltipHeading="Issue ID"
-                tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
-              >
-                <span className="flex-shrink-0 text-xs text-custom-text-200">
-                  {issue.project_detail?.identifier}-{issue.sequence_id}
-                </span>
-              </Tooltip>
-            )}
-            <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-              <button
-                type="button"
-                className="truncate text-[0.825rem] text-custom-text-100"
-                onClick={() => {
-                  if (isArchivedIssues) return router.push(issuePath);
-                  if (!isDraftIssues) openPeekOverview(issue);
-                  if (isDraftIssues && handleDraftIssueSelect) handleDraftIssueSelect(issue);
-                }}
-              >
-                {issue.name}
-              </button>
-            </Tooltip>
-          </div>
-        </div>
-
-        <div
-          className={`flex flex-shrink-0 items-center gap-2 text-xs ${
-            isArchivedIssues ? "opacity-60" : ""
-          }`}
-        >
-          {properties.priority && (
-            <PrioritySelect
-              value={issue.priority}
-              onChange={handlePriorityChange}
-              hideDropdownArrow
-              disabled={isNotAllowed}
-            />
-          )}
-          {properties.state && (
-            <StateSelect
-              value={issue.state_detail}
-              projectId={projectId}
-              onChange={handleStateChange}
-              hideDropdownArrow
-              disabled={isNotAllowed}
-            />
-          )}
-          {properties.start_date && issue.start_date && (
-            <ViewStartDateSelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          )}
-          {properties.due_date && issue.target_date && (
-            <ViewDueDateSelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          )}
-          {properties.labels && (
-            <LabelSelect
-              value={issue.labels}
-              projectId={projectId}
-              onChange={handleLabelChange}
-              labelsDetails={issue.label_details}
-              hideDropdownArrow
-              maxRender={3}
-              user={user}
-              disabled={isNotAllowed}
-            />
-          )}
-          {properties.assignee && (
-            <MembersSelect
-              value={issue.assignees}
-              projectId={projectId}
-              onChange={handleAssigneeChange}
-              membersDetails={issue.assignee_details}
-              hideDropdownArrow
-              disabled={isNotAllowed}
-            />
-          )}
-          {properties.estimate && issue.estimate_point !== null && (
-            <ViewEstimateSelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              position="right"
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
-          )}
-          {properties.sub_issue_count && issue.sub_issues_count > 0 && (
-            <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
-              <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
-                <div className="flex items-center gap-1 text-custom-text-200">
-                  <LayerDiagonalIcon className="h-3.5 w-3.5" />
-                  {issue.sub_issues_count}
-                </div>
-              </Tooltip>
-            </div>
-          )}
-          {properties.link && issue.link_count > 0 && (
-            <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
-              <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
-                <div className="flex items-center gap-1 text-custom-text-200">
-                  <LinkIcon className="h-3.5 w-3.5" />
-                  {issue.link_count}
-                </div>
-              </Tooltip>
-            </div>
-          )}
-          {properties.attachment_count && issue.attachment_count > 0 && (
-            <div className="flex cursor-default items-center rounded-md border border-custom-border-200 px-2.5 py-1 text-xs shadow-sm">
-              <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
-                <div className="flex items-center gap-1 text-custom-text-200">
-                  <PaperClipIcon className="h-3.5 w-3.5 -rotate-45" />
-                  {issue.attachment_count}
-                </div>
-              </Tooltip>
-            </div>
-          )}
-          {type && !isNotAllowed && (
-            <CustomMenu width="auto" ellipsis>
-              <CustomMenu.MenuItem
-                onClick={() => {
-                  if (isDraftIssues && handleDraftIssueSelect) handleDraftIssueSelect(issue);
-                  else editIssue();
-                }}
-              >
-                <div className="flex items-center justify-start gap-2">
-                  <PencilIcon className="h-4 w-4" />
-                  <span>Edit issue</span>
-                </div>
-              </CustomMenu.MenuItem>
-              {type !== "issue" && removeIssue && (
-                <CustomMenu.MenuItem onClick={removeIssue}>
-                  <div className="flex items-center justify-start gap-2">
-                    <XMarkIcon className="h-4 w-4" />
-                    <span>Remove from {type}</span>
-                  </div>
-                </CustomMenu.MenuItem>
-              )}
-              <CustomMenu.MenuItem
-                onClick={() => {
-                  if (isDraftIssues && handleDraftIssueDelete) handleDraftIssueDelete(issue);
-                  else handleDeleteIssue(issue);
-                }}
-              >
-                <div className="flex items-center justify-start gap-2">
-                  <TrashIcon className="h-4 w-4" />
-                  <span>Delete issue</span>
-                </div>
-              </CustomMenu.MenuItem>
-              {!isDraftIssues && (
-                <CustomMenu.MenuItem onClick={handleCopyText}>
-                  <div className="flex items-center justify-start gap-2">
-                    <LinkIcon className="h-4 w-4" />
-                    <span>Copy issue link</span>
-                  </div>
-                </CustomMenu.MenuItem>
-              )}
-            </CustomMenu>
-          )}
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/web/components/core/views/list-view/single-list.tsx b/web/components/core/views/list-view/single-list.tsx
deleted file mode 100644
index 7bdd7c43885..00000000000
--- a/web/components/core/views/list-view/single-list.tsx
+++ /dev/null
@@ -1,337 +0,0 @@
-import { useState, FC } from "react";
-import { useRouter } from "next/router";
-import useSWR from "swr";
-import { Disclosure, Transition } from "@headlessui/react";
-// services
-import { IssueLabelService } from "services/issue";
-import { ProjectService } from "services/project";
-// hooks
-import useProjects from "hooks/use-projects";
-// components
-import { CreateUpdateDraftIssueModal } from "components/issues";
-import { SingleListIssue, ListInlineCreateIssueForm } from "components/core";
-// ui
-import { Avatar, CustomMenu } from "components/ui";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-import { PriorityIcon, StateGroupIcon } from "components/icons";
-// helpers
-import { addSpaceIfCamelCase } from "helpers/string.helper";
-import { renderEmoji } from "helpers/emoji.helper";
-// types
-import { IUser, IIssue, IIssueViewProps, IState, TIssuePriorities, TStateGroups, UserAuth } from "types";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, WORKSPACE_LABELS } from "constants/fetch-keys";
-// constants
-import { STATE_GROUP_COLORS } from "constants/state";
-
-type Props = {
-  currentState?: IState | null;
-  groupTitle: string;
-  addIssueToGroup: () => void;
-  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
-  handleDraftIssueAction?: (issue: IIssue, action: "edit" | "delete") => void;
-  openIssuesListModal?: (() => void) | null;
-  handleMyIssueOpen?: (issue: IIssue) => void;
-  removeIssue: ((bridgeId: string, issueId: string) => void) | null;
-  disableUserActions: boolean;
-  disableAddIssueOption?: boolean;
-  user: IUser | undefined;
-  userAuth: UserAuth;
-  viewProps: IIssueViewProps;
-};
-
-const issueLabelService = new IssueLabelService();
-const projectService = new ProjectService();
-
-export const SingleList: FC<Props> = (props) => {
-  const {
-    currentState,
-    groupTitle,
-    handleIssueAction,
-    openIssuesListModal,
-    handleDraftIssueAction,
-    handleMyIssueOpen,
-    addIssueToGroup,
-    removeIssue,
-    disableUserActions,
-    disableAddIssueOption = false,
-    user,
-    userAuth,
-    viewProps,
-  } = props;
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
-
-  const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
-  const [isDraftIssuesModalOpen, setIsDraftIssuesModalOpen] = useState(false);
-
-  const isMyIssuesPage = router.pathname.split("/")[3] === "my-issues";
-  const isProfileIssuesPage = router.pathname.split("/")[2] === "profile";
-  const isDraftIssuesPage = router.pathname.split("/")[4] === "draft-issues";
-
-  const isArchivedIssues = router.pathname.includes("archived-issues");
-
-  const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
-
-  const { displayFilters, groupedIssues } = viewProps;
-
-  const { data: issueLabels } = useSWR(
-    workspaceSlug && projectId && displayFilters?.group_by === "labels"
-      ? PROJECT_ISSUE_LABELS(projectId.toString())
-      : null,
-    workspaceSlug && projectId && displayFilters?.group_by === "labels"
-      ? () => issueLabelService.getProjectIssueLabels(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
-
-  const { data: workspaceLabels } = useSWR(
-    workspaceSlug && displayFilters?.group_by === "labels" ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
-    workspaceSlug && displayFilters?.group_by === "labels"
-      ? () => issueLabelService.getWorkspaceIssueLabels(workspaceSlug.toString())
-      : null
-  );
-
-  const { data: members } = useSWR(
-    workspaceSlug &&
-      projectId &&
-      (displayFilters?.group_by === "created_by" || displayFilters?.group_by === "assignees")
-      ? PROJECT_MEMBERS(projectId as string)
-      : null,
-    workspaceSlug &&
-      projectId &&
-      (displayFilters?.group_by === "created_by" || displayFilters?.group_by === "assignees")
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
-      : null
-  );
-
-  const { projects } = useProjects();
-
-  const getGroupTitle = () => {
-    let title = addSpaceIfCamelCase(groupTitle);
-
-    switch (displayFilters?.group_by) {
-      case "state":
-        title = addSpaceIfCamelCase(currentState?.name ?? "");
-        break;
-      case "labels":
-        title =
-          [...(issueLabels ?? []), ...(workspaceLabels ?? [])]?.find((label) => label.id === groupTitle)?.name ??
-          "None";
-        break;
-      case "project":
-        title = projects?.find((p) => p.id === groupTitle)?.name ?? "None";
-        break;
-      case "assignees":
-      case "created_by":
-        const member = members?.find((member) => member.member.id === groupTitle)?.member;
-        title = member ? member.display_name : "None";
-        break;
-    }
-
-    return title;
-  };
-
-  const getGroupIcon = () => {
-    let icon;
-
-    switch (displayFilters?.group_by) {
-      case "state":
-        icon = currentState && (
-          <StateGroupIcon stateGroup={currentState.group} color={currentState.color} height="16px" width="16px" />
-        );
-        break;
-      case "state_detail.group":
-        icon = (
-          <StateGroupIcon
-            stateGroup={groupTitle as TStateGroups}
-            color={STATE_GROUP_COLORS[groupTitle as TStateGroups]}
-            height="16px"
-            width="16px"
-          />
-        );
-        break;
-      case "priority":
-        icon = <PriorityIcon priority={groupTitle as TIssuePriorities} className="text-lg" />;
-        break;
-      case "project":
-        const project = projects?.find((p) => p.id === groupTitle);
-        icon =
-          project &&
-          (project.emoji !== null
-            ? renderEmoji(project.emoji)
-            : project.icon_prop !== null
-            ? renderEmoji(project.icon_prop)
-            : null);
-        break;
-      case "labels":
-        const labelColor =
-          [...(issueLabels ?? []), ...(workspaceLabels ?? [])]?.find((label) => label.id === groupTitle)?.color ??
-          "#000000";
-        icon = <span className="h-3 w-3 flex-shrink-0 rounded-full" style={{ backgroundColor: labelColor }} />;
-        break;
-      case "assignees":
-      case "created_by":
-        const member = members?.find((member) => member.member.id === groupTitle)?.member;
-        icon = member ? <Avatar user={member} height="24px" width="24px" fontSize="12px" /> : <></>;
-
-        break;
-    }
-
-    return icon;
-  };
-
-  if (!groupedIssues) return null;
-
-  return (
-    <>
-      <CreateUpdateDraftIssueModal
-        isOpen={isDraftIssuesModalOpen}
-        handleClose={() => setIsDraftIssuesModalOpen(false)}
-        prePopulateData={{
-          ...(cycleId && { cycle: cycleId.toString() }),
-          ...(moduleId && { module: moduleId.toString() }),
-          [displayFilters?.group_by! === "labels" ? "labels_list" : displayFilters?.group_by!]:
-            displayFilters?.group_by === "labels" ? [groupTitle] : groupTitle,
-        }}
-      />
-
-      <Disclosure as="div" defaultOpen>
-        {({ open }) => (
-          <div>
-            <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">
-                  {displayFilters?.group_by !== null && <div className="flex items-center">{getGroupIcon()}</div>}
-                  {displayFilters?.group_by !== null ? (
-                    <h2
-                      className={`text-sm font-semibold leading-6 text-custom-text-100 ${
-                        displayFilters?.group_by === "created_by" ? "" : "capitalize"
-                      }`}
-                    >
-                      {getGroupTitle()}
-                    </h2>
-                  ) : (
-                    <h2 className="font-medium leading-5">All Issues</h2>
-                  )}
-                  <span className="text-custom-text-200 min-w-[2.5rem] rounded-full bg-custom-background-80 py-1 text-center text-xs">
-                    {groupedIssues[groupTitle as keyof IIssue].length}
-                  </span>
-                </div>
-              </Disclosure.Button>
-              {isArchivedIssues ? (
-                ""
-              ) : type === "issue" ? (
-                !disableAddIssueOption && (
-                  <button
-                    type="button"
-                    className="p-1 text-custom-text-200 hover:bg-custom-background-80"
-                    onClick={() => {
-                      if (isDraftIssuesPage) setIsDraftIssuesModalOpen(true);
-                      else if (isMyIssuesPage || isProfileIssuesPage) addIssueToGroup();
-                      else setIsCreateIssueFormOpen(true);
-                    }}
-                  >
-                    <PlusIcon className="h-4 w-4" />
-                  </button>
-                )
-              ) : disableUserActions ? (
-                ""
-              ) : (
-                <CustomMenu
-                  customButton={
-                    <div className="flex cursor-pointer items-center">
-                      <PlusIcon className="h-4 w-4" />
-                    </div>
-                  }
-                  noBorder
-                >
-                  <CustomMenu.MenuItem onClick={() => setIsCreateIssueFormOpen(true)}>Create new</CustomMenu.MenuItem>
-                  {openIssuesListModal && (
-                    <CustomMenu.MenuItem onClick={openIssuesListModal}>Add an existing issue</CustomMenu.MenuItem>
-                  )}
-                </CustomMenu>
-              )}
-            </div>
-            <Transition
-              show={open}
-              enter="transition duration-100 ease-out"
-              enterFrom="transform opacity-0"
-              enterTo="transform opacity-100"
-              leave="transition duration-75 ease-out"
-              leaveFrom="transform opacity-100"
-              leaveTo="transform opacity-0"
-            >
-              <Disclosure.Panel>
-                {groupedIssues[groupTitle] ? (
-                  groupedIssues[groupTitle].length > 0 ? (
-                    groupedIssues[groupTitle].map((issue, index) => (
-                      <SingleListIssue
-                        key={issue.id}
-                        type={type}
-                        issue={issue}
-                        projectId={issue.project_detail.id}
-                        groupTitle={groupTitle}
-                        index={index}
-                        editIssue={() => handleIssueAction(issue, "edit")}
-                        makeIssueCopy={() => handleIssueAction(issue, "copy")}
-                        handleDeleteIssue={() => handleIssueAction(issue, "delete")}
-                        handleDraftIssueSelect={
-                          handleDraftIssueAction ? () => handleDraftIssueAction(issue, "edit") : undefined
-                        }
-                        handleDraftIssueDelete={
-                          handleDraftIssueAction ? () => handleDraftIssueAction(issue, "delete") : undefined
-                        }
-                        handleMyIssueOpen={handleMyIssueOpen}
-                        removeIssue={() => {
-                          if (removeIssue !== null && issue.bridge_id) removeIssue(issue.bridge_id, issue.id);
-                        }}
-                        disableUserActions={disableUserActions}
-                        user={user}
-                        userAuth={userAuth}
-                        viewProps={viewProps}
-                      />
-                    ))
-                  ) : (
-                    <p className="bg-custom-background-100 px-4 py-2.5 text-sm text-custom-text-200">No issues.</p>
-                  )
-                ) : (
-                  <div className="flex h-full w-full items-center justify-center">Loading...</div>
-                )}
-
-                <ListInlineCreateIssueForm
-                  isOpen={isCreateIssueFormOpen && !disableAddIssueOption}
-                  handleClose={() => setIsCreateIssueFormOpen(false)}
-                  prePopulatedData={{
-                    ...(cycleId && { cycle: cycleId.toString() }),
-                    ...(moduleId && { module: moduleId.toString() }),
-                    [displayFilters?.group_by! === "labels" ? "labels_list" : displayFilters?.group_by!]:
-                      displayFilters?.group_by === "labels" ? [groupTitle] : groupTitle,
-                  }}
-                />
-
-                {!disableAddIssueOption && !isCreateIssueFormOpen && !isDraftIssuesPage && (
-                  <div className="w-full bg-custom-background-100 px-6 py-3 border-b border-custom-border-100">
-                    <button
-                      type="button"
-                      onClick={() => {
-                        if (isDraftIssuesPage) setIsDraftIssuesModalOpen(true);
-                        else if (isMyIssuesPage || isProfileIssuesPage) addIssueToGroup();
-                        else setIsCreateIssueFormOpen(true);
-                      }}
-                      className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
-                    >
-                      <PlusIcon className="h-4 w-4" />
-                      <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
-                    </button>
-                  </div>
-                )}
-              </Disclosure.Panel>
-            </Transition>
-          </div>
-        )}
-      </Disclosure>
-    </>
-  );
-};
diff --git a/web/components/cycles/active-cycle-details.tsx b/web/components/cycles/active-cycle-details.tsx
index 066c8ef1e24..09ee9853d62 100644
--- a/web/components/cycles/active-cycle-details.tsx
+++ b/web/components/cycles/active-cycle-details.tsx
@@ -6,7 +6,7 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 
 // services
-import cyclesService from "services/cycle.service";
+import { CycleService } from "services/cycle.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
@@ -69,6 +69,9 @@ const stateGroups = [
   },
 ];
 
+// services
+const cycleService = new CycleService();
+
 export const ActiveCycleDetails: React.FC = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -78,7 +81,7 @@ export const ActiveCycleDetails: React.FC = () => {
   const { data: currentCycle } = useSWR(
     workspaceSlug && projectId ? CURRENT_CYCLE_LIST(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => cyclesService.getCyclesWithParams(workspaceSlug as string, projectId as string, "current")
+      ? () => cycleService.getCyclesWithParams(workspaceSlug as string, projectId as string, "current")
       : null
   );
   const cycle = currentCycle ? currentCycle[0] : null;
@@ -87,7 +90,7 @@ export const ActiveCycleDetails: React.FC = () => {
     workspaceSlug && projectId && cycle?.id ? CYCLE_ISSUES_WITH_PARAMS(cycle?.id, { priority: "urgent,high" }) : null,
     workspaceSlug && projectId && cycle?.id
       ? () =>
-          cyclesService.getCycleIssuesWithParams(workspaceSlug as string, projectId as string, cycle.id, {
+          cycleService.getCycleIssuesWithParams(workspaceSlug as string, projectId as string, cycle.id, {
             priority: "urgent,high",
           })
       : null
@@ -166,7 +169,7 @@ export const ActiveCycleDetails: React.FC = () => {
       false
     );
 
-    cyclesService
+    cycleService
       .addCycleToFavorites(workspaceSlug as string, projectId as string, {
         cycle: cycle.id,
       })
@@ -202,7 +205,7 @@ export const ActiveCycleDetails: React.FC = () => {
       false
     );
 
-    cyclesService.removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id).catch(() => {
+    cycleService.removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id).catch(() => {
       setToastAlert({
         type: "error",
         title: "Error!",
diff --git a/web/components/cycles/cycles-list-legacy/completed-cycles-list.tsx b/web/components/cycles/cycles-list-legacy/completed-cycles-list.tsx
index ba1068efc96..dbe10bb890b 100644
--- a/web/components/cycles/cycles-list-legacy/completed-cycles-list.tsx
+++ b/web/components/cycles/cycles-list-legacy/completed-cycles-list.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import cyclesService from "services/cycle.service";
+import { CycleService } from "services/cycle.service";
 // components
 import { CyclesView } from "components/cycles";
 // fetch-keys
@@ -13,6 +13,9 @@ type Props = {
   viewType: string | null;
 };
 
+// services
+const cycleService = new CycleService();
+
 export const CompletedCyclesList: React.FC<Props> = ({ viewType }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -20,7 +23,7 @@ export const CompletedCyclesList: React.FC<Props> = ({ viewType }) => {
   const { data: completedCyclesList, mutate } = useSWR(
     workspaceSlug && projectId ? COMPLETED_CYCLES_LIST(projectId.toString()) : null,
     workspaceSlug && projectId
-      ? () => cyclesService.getCyclesWithParams(workspaceSlug.toString(), projectId.toString(), "completed")
+      ? () => cycleService.getCyclesWithParams(workspaceSlug.toString(), projectId.toString(), "completed")
       : null
   );
 
diff --git a/web/components/cycles/delete-cycle-modal.tsx b/web/components/cycles/delete-cycle-modal.tsx
index d1871db8c0c..bfb77d097b9 100644
--- a/web/components/cycles/delete-cycle-modal.tsx
+++ b/web/components/cycles/delete-cycle-modal.tsx
@@ -6,7 +6,7 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import cycleService from "services/cycle.service";
+import { CycleService } from "services/cycle.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
@@ -32,6 +32,9 @@ import {
 } from "constants/fetch-keys";
 import { getDateRangeStatus } from "helpers/date-time.helper";
 
+// services
+const cycleService = new CycleService();
+
 export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({ isOpen, setIsOpen, data, user }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
diff --git a/web/components/cycles/modal.tsx b/web/components/cycles/modal.tsx
index 8e4660be8df..e7906fdaaa4 100644
--- a/web/components/cycles/modal.tsx
+++ b/web/components/cycles/modal.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { mutate } from "swr";
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import cycleService from "services/cycle.service";
+import { CycleService } from "services/cycle.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
@@ -30,6 +30,9 @@ type CycleModalProps = {
   user: ICurrentUserResponse | undefined;
 };
 
+// services
+const cycleService = new CycleService();
+
 export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({ isOpen, handleClose, data, user }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
diff --git a/web/components/estimates/single-estimate.tsx b/web/components/estimates/single-estimate.tsx
index 093d1c8bcff..3f941de2227 100644
--- a/web/components/estimates/single-estimate.tsx
+++ b/web/components/estimates/single-estimate.tsx
@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import { useRouter } from "next/router";
 
 // services
-import projectService from "services/project.service/project.service";
+import { ProjectService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 import useProjectDetails from "hooks/use-project-details";
@@ -26,6 +26,9 @@ type Props = {
   handleEstimateDelete: (estimateId: string) => void;
 };
 
+// services
+const projectService = new ProjectService();
+
 export const SingleEstimate: React.FC<Props> = ({ user, estimate, editEstimate, handleEstimateDelete }) => {
   const [isDeleteEstimateModalOpen, setIsDeleteEstimateModalOpen] = useState(false);
 
diff --git a/web/components/integration/delete-import-modal.tsx b/web/components/integration/delete-import-modal.tsx
index 93c421710ec..7016f865bca 100644
--- a/web/components/integration/delete-import-modal.tsx
+++ b/web/components/integration/delete-import-modal.tsx
@@ -7,7 +7,7 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import IntegrationService from "services/integrations/integration.service";
+import { IntegrationService } from "services/integrations/integration.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
@@ -26,6 +26,9 @@ type Props = {
   user: ICurrentUserResponse | undefined;
 };
 
+// services
+const integrationService = new IntegrationService();
+
 export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data, user }) => {
   const [deleteLoading, setDeleteLoading] = useState(false);
   const [confirmDeleteImport, setConfirmDeleteImport] = useState(false);
@@ -46,7 +49,8 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
       false
     );
 
-    IntegrationService.deleteImporterService(workspaceSlug as string, data.service, data.id, user)
+    integrationService
+      .deleteImporterService(workspaceSlug as string, data.service, data.id, user)
       .catch(() =>
         setToastAlert({
           type: "error",
diff --git a/web/components/integration/single-integration-card.tsx b/web/components/integration/single-integration-card.tsx
index e6a67070d82..cf2b0c6611a 100644
--- a/web/components/integration/single-integration-card.tsx
+++ b/web/components/integration/single-integration-card.tsx
@@ -6,7 +6,7 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 
 // services
-import IntegrationService from "services/integrations/integration.service";
+import { IntegrationService } from "services/integrations";
 // hooks
 import useToast from "hooks/use-toast";
 import useIntegrationPopup from "hooks/use-integration-popup";
@@ -38,6 +38,9 @@ const integrationDetails: { [key: string]: any } = {
   },
 };
 
+// services
+const integrationService = new IntegrationService();
+
 export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
   const [deletingIntegration, setDeletingIntegration] = useState(false);
 
@@ -50,7 +53,7 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
 
   const { data: workspaceIntegrations } = useSWR(
     workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null,
-    () => (workspaceSlug ? IntegrationService.getWorkspaceIntegrationsList(workspaceSlug as string) : null)
+    () => (workspaceSlug ? integrationService.getWorkspaceIntegrationsList(workspaceSlug as string) : null)
   );
 
   const handleRemoveIntegration = async () => {
@@ -60,7 +63,8 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
 
     setDeletingIntegration(true);
 
-    await IntegrationService.deleteWorkspaceIntegration(workspaceSlug as string, workspaceIntegrationId ?? "")
+    await integrationService
+      .deleteWorkspaceIntegration(workspaceSlug as string, workspaceIntegrationId ?? "")
       .then(() => {
         mutate<IWorkspaceIntegration[]>(
           WORKSPACE_INTEGRATIONS(workspaceSlug as string),
diff --git a/web/components/ui/product-updates-modal.tsx b/web/components/ui/product-updates-modal.tsx
index 4f5bad7b3f1..1c27c224ce5 100644
--- a/web/components/ui/product-updates-modal.tsx
+++ b/web/components/ui/product-updates-modal.tsx
@@ -5,7 +5,7 @@ import useSWR from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // components
 import { Loader, MarkdownRenderer } from "components/ui";
 // icons
@@ -18,6 +18,9 @@ type Props = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
+// services
+const workspaceService = new WorkspaceService();
+
 export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
   const { data: updates } = useSWR("PRODUCT_UPDATES", () => workspaceService.getProductUpdates());
   return (
@@ -48,10 +51,7 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
             >
               <Dialog.Panel className="relative overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-100 shadow-custom-shadow-rg] min-w-[100%] sm:min-w-[50%] sm:max-w-[50%]">
                 <div className="flex flex-col p-4 max-h-[90vh] w-full">
-                  <Dialog.Title
-                    as="h3"
-                    className="flex items-center justify-between text-lg font-semibold"
-                  >
+                  <Dialog.Title as="h3" className="flex items-center justify-between text-lg font-semibold">
                     <span>Product Updates</span>
                     <span>
                       <button type="button" onClick={() => setIsOpen(false)}>
diff --git a/web/components/web-view/select-blocker-to.tsx b/web/components/web-view/select-blocker-to.tsx
index 8255d19f982..0ec098c6ec9 100644
--- a/web/components/web-view/select-blocker-to.tsx
+++ b/web/components/web-view/select-blocker-to.tsx
@@ -1,30 +1,19 @@
 // react
 import React, { useState } from "react";
-
-// next
 import { useRouter } from "next/router";
-
-// swr
 import { mutate } from "swr";
-
-// react hook form
 import { useFormContext } from "react-hook-form";
 
 // services
-import issuesService from "services/issues.service";
-
+import { IssueService } from "services/issue";
 // hooks
 import useUser from "hooks/use-user";
-
 // fetch keys
 import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-
 // icons
 import { ChevronDown } from "lucide-react";
-
 // components
 import { IssuesSelectBottomSheet } from "components/web-view";
-
 // types
 import { BlockeIssueDetail, ISearchIssueResponse, IIssue } from "types";
 
@@ -32,6 +21,9 @@ type Props = {
   disabled?: boolean;
 };
 
+// services
+const issueService = new IssueService();
+
 export const BlockerSelect: React.FC<Props> = (props) => {
   const { disabled = false } = props;
 
@@ -71,10 +63,9 @@ export const BlockerSelect: React.FC<Props> = (props) => {
 
     if (!workspaceSlug || !projectId || !issueId || !user) return;
 
-    const blockerIssue =
-      watch("issue_relations")?.filter((i) => i.relation_type === "blocked_by") || [];
+    const blockerIssue = watch("issue_relations")?.filter((i) => i.relation_type === "blocked_by") || [];
 
-    issuesService
+    issueService
       .createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, {
         related_list: [
           ...selectedIssues.map((issue) => ({
@@ -121,9 +112,7 @@ export const BlockerSelect: React.FC<Props> = (props) => {
         type="button"
         disabled={disabled}
         onClick={() => setIsBlockerModalOpen(true)}
-        className={
-          "relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5"
-        }
+        className={"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5"}
       >
         <span className="text-custom-text-200">Select issue</span>
         <ChevronDown className="w-4 h-4 text-custom-text-200" />
diff --git a/web/components/web-view/select-cycle.tsx b/web/components/web-view/select-cycle.tsx
index 4c45156d181..fdf1cebf035 100644
--- a/web/components/web-view/select-cycle.tsx
+++ b/web/components/web-view/select-cycle.tsx
@@ -8,29 +8,29 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 
 // services
-import issuesService from "services/issues.service";
-import cyclesService from "services/cycle.service";
+import { IssueService } from "services/issue";
+import { CycleService } from "services/cycle.service";
 
 // hooks
 import useUser from "hooks/use-user";
-
 // fetch keys
 import { ISSUE_DETAILS, INCOMPLETE_CYCLES_LIST, CYCLE_ISSUES, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-
 // icons
 import { ChevronDown } from "lucide-react";
-
 // components
 import { WebViewModal } from "components/web-view";
-
 // types
-import { ICycle, IIssueCycle } from "types";
+import { ICycle, IIssue, IIssueCycle } from "types";
 
 type Props = {
   disabled?: boolean;
   value?: IIssueCycle | null;
 };
 
+// services
+const issueService = new IssueService();
+const cycleService = new CycleService();
+
 export const CycleSelect: React.FC<Props> = (props) => {
   const { disabled = false, value } = props;
 
@@ -42,7 +42,7 @@ export const CycleSelect: React.FC<Props> = (props) => {
   const { data: incompleteCycles } = useSWR(
     workspaceSlug && projectId ? INCOMPLETE_CYCLES_LIST(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => cyclesService.getCyclesWithParams(workspaceSlug as string, projectId as string, "incomplete")
+      ? () => cycleService.getCyclesWithParams(workspaceSlug as string, projectId as string, "incomplete")
       : null
   );
 
@@ -51,7 +51,7 @@ export const CycleSelect: React.FC<Props> = (props) => {
   const handleCycleChange = (cycleDetails: ICycle) => {
     if (!workspaceSlug || !projectId || !issueId || disabled) return;
 
-    issuesService
+    issueService
       .addIssueToCycle(
         workspaceSlug as string,
         projectId as string,
@@ -70,7 +70,7 @@ export const CycleSelect: React.FC<Props> = (props) => {
   const removeIssueFromCycle = (bridgeId?: string, cycleId?: string) => {
     if (!workspaceSlug || !projectId || !bridgeId || !cycleId || disabled) return;
 
-    mutate(
+    mutate<IIssue>(
       ISSUE_DETAILS(issueId as string),
       (prev) => {
         if (!prev) return prev;
@@ -83,7 +83,7 @@ export const CycleSelect: React.FC<Props> = (props) => {
       false
     );
 
-    issuesService
+    issueService
       .removeIssueFromCycle(workspaceSlug.toString(), projectId.toString(), cycleId, bridgeId)
       .then(() => {
         mutate(CYCLE_ISSUES(cycleId));
diff --git a/web/components/web-view/select-module.tsx b/web/components/web-view/select-module.tsx
index b82505952ca..631b872fb28 100644
--- a/web/components/web-view/select-module.tsx
+++ b/web/components/web-view/select-module.tsx
@@ -1,27 +1,17 @@
-// react
 import React, { useState } from "react";
-
-// next
 import { useRouter } from "next/router";
-
-// swr
 import useSWR, { mutate } from "swr";
 
 // services
-import modulesService from "services/module.service";
-
+import { ModuleService } from "services/module.service";
 // hooks
 import useUser from "hooks/use-user";
-
 // fetch keys
 import { ISSUE_DETAILS, MODULE_LIST, MODULE_ISSUES, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-
 // icons
 import { ChevronDown } from "lucide-react";
-
 // components
 import { WebViewModal } from "components/web-view";
-
 // types
 import { IModule, IIssueModule } from "types";
 
@@ -30,6 +20,9 @@ type Props = {
   value?: IIssueModule | null;
 };
 
+// services
+const moduleService = new ModuleService();
+
 export const ModuleSelect: React.FC<Props> = (props) => {
   const { disabled = false, value } = props;
 
@@ -40,7 +33,7 @@ export const ModuleSelect: React.FC<Props> = (props) => {
 
   const { data: modules } = useSWR(
     workspaceSlug && projectId ? MODULE_LIST(projectId as string) : null,
-    workspaceSlug && projectId ? () => modulesService.getModules(workspaceSlug as string, projectId as string) : null
+    workspaceSlug && projectId ? () => moduleService.getModules(workspaceSlug as string, projectId as string) : null
   );
 
   const { user } = useUser();
@@ -48,7 +41,7 @@ export const ModuleSelect: React.FC<Props> = (props) => {
   const handleModuleChange = (moduleDetail: IModule) => {
     if (!workspaceSlug || !projectId || !issueId || disabled) return;
 
-    modulesService
+    moduleService
       .addIssuesToModule(
         workspaceSlug as string,
         projectId as string,
@@ -79,7 +72,7 @@ export const ModuleSelect: React.FC<Props> = (props) => {
       false
     );
 
-    modulesService
+    moduleService
       .removeIssueFromModule(workspaceSlug as string, projectId as string, moduleId, bridgeId)
       .then(() => {
         mutate(MODULE_ISSUES(moduleId));
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
index e2132a0488c..f124a88c4af 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
@@ -7,16 +7,14 @@ import useSWR from "swr";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // services
-import IntegrationService from "services/integrations/integration.service";
-import projectService from "services/project.service/project.service";
+import { IntegrationService } from "services/integrations";
+import { ProjectService } from "services/project";
 // components
 import { SettingsSidebar, SingleIntegration } from "components/project";
 // ui
-import { EmptyState, IntegrationAndImportExportBanner } from "components/ui";
+import { EmptyState } from "components/common";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 import { Loader } from "@plane/ui";
-// icons
-import { PlusIcon, PuzzlePieceIcon } from "@heroicons/react/24/outline";
 // images
 import emptyIntegration from "public/empty-state/integration.svg";
 // types
@@ -27,6 +25,10 @@ import { PROJECT_DETAILS, USER_PROJECT_VIEW, WORKSPACE_INTEGRATIONS } from "cons
 // helper
 import { truncateText } from "helpers/string.helper";
 
+// services
+const integrationService = new IntegrationService();
+const projectService = new ProjectService();
+
 const ProjectIntegrations: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -38,7 +40,7 @@ const ProjectIntegrations: NextPage = () => {
 
   const { data: workspaceIntegrations } = useSWR(
     workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null,
-    () => (workspaceSlug ? IntegrationService.getWorkspaceIntegrationsList(workspaceSlug as string) : null)
+    () => (workspaceSlug ? integrationService.getWorkspaceIntegrationsList(workspaceSlug as string) : null)
   );
 
   const { data: memberDetails } = useSWR(
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
index 7ad5bb07cb3..a9627e7034e 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -7,8 +7,8 @@ import useSWR from "swr";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 // services
-import projectService from "services/project.service/project.service";
-import issuesService from "services/issue/issue.service";
+import { ProjectService } from "services/project";
+import { IssueLabelService } from "services/issue";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
@@ -22,10 +22,8 @@ import {
 import { SettingsSidebar } from "components/project";
 // ui
 import { Button, Loader } from "@plane/ui";
-import { EmptyState } from "components/ui";
+import { EmptyState } from "components/common";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
 // images
 import emptyLabel from "public/empty-state/label.svg";
 // types
@@ -36,6 +34,10 @@ import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 // helper
 import { truncateText } from "helpers/string.helper";
 
+// services
+const projectService = new ProjectService();
+const issueLabelService = new IssueLabelService();
+
 const LabelsSettings: NextPage = () => {
   // create/edit label form
   const [labelForm, setLabelForm] = useState(false);
@@ -65,7 +67,9 @@ const LabelsSettings: NextPage = () => {
 
   const { data: issueLabels } = useSWR(
     workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
-    workspaceSlug && projectId ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string) : null
+    workspaceSlug && projectId
+      ? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId as string)
+      : null
   );
 
   const newLabel = () => {
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index c68cc3e0023..1d176044158 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -6,8 +6,8 @@ import Link from "next/link";
 import useSWR, { mutate } from "swr";
 
 // services
-import projectService from "services/project.service/project.service";
-import workspaceService from "services/workspace.service";
+import { ProjectService } from "services/project";
+import { WorkspaceService } from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
@@ -49,6 +49,10 @@ const defaultValues: Partial<IProject> = {
   default_assignee: null,
 };
 
+// services
+const projectService = new ProjectService();
+const workspaceService = new WorkspaceService();
+
 const MembersSettings: NextPage = () => {
   const [inviteModal, setInviteModal] = useState(false);
   const [selectedRemoveMember, setSelectedRemoveMember] = useState<string | null>(null);
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
index ce8fc14fc72..8623bdda616 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
@@ -3,15 +3,16 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import projectService from "services/project.service/project.service";
-import viewsService from "services/view.service";
+import { ProjectService } from "services/project";
+import { ViewService } from "services/view.service";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import { ProjectViewLayoutRoot } from "components/issues";
 // ui
-import { CustomMenu, EmptyState } from "components/ui";
+import { CustomMenu } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { EmptyState } from "components/common";
 // icons
 import { StackedLayersIcon } from "components/icons";
 // images
@@ -22,6 +23,10 @@ import { truncateText } from "helpers/string.helper";
 import { PROJECT_DETAILS, VIEWS_LIST, VIEW_DETAILS } from "constants/fetch-keys";
 import { ProjectViewIssuesHeader } from "components/headers";
 
+// services
+const projectService = new ProjectService();
+const viewService = new ViewService();
+
 const SingleView: React.FC = () => {
   const router = useRouter();
   const { workspaceSlug, projectId, viewId } = router.query;
@@ -33,13 +38,13 @@ const SingleView: React.FC = () => {
 
   const { data: views } = useSWR(
     workspaceSlug && projectId ? VIEWS_LIST(projectId as string) : null,
-    workspaceSlug && projectId ? () => viewsService.getViews(workspaceSlug as string, projectId as string) : null
+    workspaceSlug && projectId ? () => viewService.getViews(workspaceSlug as string, projectId as string) : null
   );
 
   const { data: viewDetails, error } = useSWR(
     workspaceSlug && projectId && viewId ? VIEW_DETAILS(viewId as string) : null,
     workspaceSlug && projectId && viewId
-      ? () => viewsService.getViewDetails(workspaceSlug as string, projectId as string, viewId as string)
+      ? () => viewService.getViewDetails(workspaceSlug as string, projectId as string, viewId as string)
       : null
   );
 

From fcc8032fa5abcaf33e6bb9f48b84406bd93a6380 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Sat, 14 Oct 2023 12:40:26 +0530
Subject: [PATCH 2/3] chore: update service imports in store

---
 .../upcoming-cycles-list.tsx                  |   7 +-
 .../cycles/gantt-chart/cycles-list-layout.tsx |   7 +-
 .../create-update-estimate-modal.tsx          |   9 +-
 web/components/exporter/guide.tsx             |   7 +-
 web/components/inbox/issue-activity.tsx       |  14 +-
 .../integration/github/repo-details.tsx       |   7 +-
 web/components/integration/github/root.tsx    |  14 +-
 .../integration/github/single-user-select.tsx |   5 +-
 web/components/integration/guide.tsx          |   7 +-
 .../integration/jira/jira-project-detail.tsx  |   5 +-
 web/components/integration/jira/root.tsx      |   5 +-
 .../issues/attachment/attachments.tsx         |  10 +-
 .../attachment/delete-attachment-modal.tsx    |   7 +-
 .../issues/comment/comment-card.tsx           |  43 +---
 web/components/issues/draft-issue-modal.tsx   |  19 +-
 web/components/issues/form.tsx                |   7 +-
 web/components/issues/main-content.tsx        |  16 +-
 .../issues/parent-issues-list-modal.tsx       |   5 +-
 .../issues/sidebar-select/relates-to.tsx      |   9 +-
 .../issues/sub-issues/properties.tsx          |  18 +-
 .../workspace-views/workpace-view-issues.tsx  | 232 -----------------
 .../workspace-views/workspace-all-issue.tsx   | 236 ------------------
 .../workspace-assigned-issue.tsx              | 148 -----------
 .../workspace-created-issues.tsx              | 147 -----------
 .../workspace-issue-view-option.tsx           | 116 ---------
 .../workspace-subscribed-issue.tsx            | 148 -----------
 web/hooks/gantt-chart/cycle-issues-view.tsx   |  51 ----
 web/hooks/gantt-chart/issue-view.tsx          |  42 ----
 web/hooks/gantt-chart/view-issues-view.tsx    |  38 ---
 web/hooks/use-calendar-issues-view.tsx        | 132 ----------
 .../[projectId]/settings/features.tsx         |  17 +-
 .../[workspaceSlug]/settings/billing.tsx      |   5 +-
 .../[workspaceSlug]/settings/exports.tsx      |   5 +-
 .../[workspaceSlug]/settings/integrations.tsx |  10 +-
 web/pages/create-workspace/index.tsx          |   5 +-
 web/pages/installations/[provider]/index.tsx  |  13 +-
 web/pages/invitations/index.tsx               |   5 +-
 web/pages/m/[workspaceSlug]/editor.tsx        |   3 +-
 web/pages/onboarding/index.tsx                |   8 +-
 web/pages/workspace-invitations/index.tsx     |   5 +-
 web/store/cycle/cycle_issue.store.ts          |   2 +-
 web/store/cycle/cycle_issue_filters.store.ts  |   2 +-
 web/store/cycle/cycles.store.ts               |   2 +-
 .../global-view/global_view_issues.store.ts   |   2 +-
 web/store/global-view/global_views.store.ts   |   2 +-
 web/store/issue/issue_detail.store.ts         |   2 +-
 web/store/issue/issue_draft.store.ts          |   2 +-
 web/store/module/module_filters.store.ts      |   2 +-
 web/store/module/module_issue.store.ts        |   2 +-
 web/store/module/modules.store.ts             |   2 +-
 web/store/page.store.ts                       |   2 +-
 web/store/project-view/project_views.store.ts |   2 +-
 web/store/user.store.ts                       |   4 +-
 web/store/workspace/workspace.store.ts        |   2 +-
 .../workspace/workspace_filters.store.ts      |   2 +-
 55 files changed, 198 insertions(+), 1421 deletions(-)
 delete mode 100644 web/components/issues/workspace-views/workpace-view-issues.tsx
 delete mode 100644 web/components/issues/workspace-views/workspace-all-issue.tsx
 delete mode 100644 web/components/issues/workspace-views/workspace-assigned-issue.tsx
 delete mode 100644 web/components/issues/workspace-views/workspace-created-issues.tsx
 delete mode 100644 web/components/issues/workspace-views/workspace-issue-view-option.tsx
 delete mode 100644 web/components/issues/workspace-views/workspace-subscribed-issue.tsx
 delete mode 100644 web/hooks/gantt-chart/cycle-issues-view.tsx
 delete mode 100644 web/hooks/gantt-chart/issue-view.tsx
 delete mode 100644 web/hooks/gantt-chart/view-issues-view.tsx
 delete mode 100644 web/hooks/use-calendar-issues-view.tsx

diff --git a/web/components/cycles/cycles-list-legacy/upcoming-cycles-list.tsx b/web/components/cycles/cycles-list-legacy/upcoming-cycles-list.tsx
index 68c8dcab85e..a2449fbe9f7 100644
--- a/web/components/cycles/cycles-list-legacy/upcoming-cycles-list.tsx
+++ b/web/components/cycles/cycles-list-legacy/upcoming-cycles-list.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import cyclesService from "services/cycle.service";
+import { CycleService } from "services/cycle.service";
 // components
 import { CyclesView } from "components/cycles";
 // fetch-keys
@@ -13,6 +13,9 @@ type Props = {
   viewType: string | null;
 };
 
+// services
+const cycleService = new CycleService();
+
 export const UpcomingCyclesList: React.FC<Props> = ({ viewType }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -20,7 +23,7 @@ export const UpcomingCyclesList: React.FC<Props> = ({ viewType }) => {
   const { data: upcomingCyclesList, mutate } = useSWR(
     workspaceSlug && projectId ? UPCOMING_CYCLES_LIST(projectId.toString()) : null,
     workspaceSlug && projectId
-      ? () => cyclesService.getCyclesWithParams(workspaceSlug.toString(), projectId.toString(), "upcoming")
+      ? () => cycleService.getCyclesWithParams(workspaceSlug.toString(), projectId.toString(), "upcoming")
       : null
   );
 
diff --git a/web/components/cycles/gantt-chart/cycles-list-layout.tsx b/web/components/cycles/gantt-chart/cycles-list-layout.tsx
index 02ff5756432..b994c8f39f1 100644
--- a/web/components/cycles/gantt-chart/cycles-list-layout.tsx
+++ b/web/components/cycles/gantt-chart/cycles-list-layout.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import { KeyedMutator } from "swr";
 
 // services
-import cyclesService from "services/cycle.service";
+import { CycleService } from "services/cycle.service";
 // hooks
 import useUser from "hooks/use-user";
 import useProjectDetails from "hooks/use-project-details";
@@ -20,6 +20,9 @@ type Props = {
   mutateCycles?: KeyedMutator<ICycle[]>;
 };
 
+// services
+const cycleService = new CycleService();
+
 export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -56,7 +59,7 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
 
     if (newPayload.sort_order && payload.sort_order) newPayload.sort_order = payload.sort_order.newSortOrder;
 
-    cyclesService.patchCycle(workspaceSlug.toString(), cycle.project, cycle.id, newPayload, user);
+    cycleService.patchCycle(workspaceSlug.toString(), cycle.project, cycle.id, newPayload, user);
   };
 
   const blockFormat = (blocks: ICycle[]) =>
diff --git a/web/components/estimates/create-update-estimate-modal.tsx b/web/components/estimates/create-update-estimate-modal.tsx
index bddde84cd02..fbab2925ff7 100644
--- a/web/components/estimates/create-update-estimate-modal.tsx
+++ b/web/components/estimates/create-update-estimate-modal.tsx
@@ -9,7 +9,7 @@ import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import estimatesService from "services/project.service/project_estimates.service";
+import { ProjectEstimateServices } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
@@ -50,6 +50,9 @@ const defaultValues: Partial<FormValues> = {
   value6: "",
 };
 
+// services
+const projectEstimateService = new ProjectEstimateServices();
+
 export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data, isOpen, user }) => {
   const {
     formState: { errors, isSubmitting },
@@ -73,7 +76,7 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
   const createEstimate = async (payload: IEstimateFormData) => {
     if (!workspaceSlug || !projectId) return;
 
-    await estimatesService
+    await projectEstimateService
       .createEstimate(workspaceSlug as string, projectId as string, payload, user)
       .then(() => {
         mutate(ESTIMATES_LIST(projectId as string));
@@ -118,7 +121,7 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
       false
     );
 
-    await estimatesService
+    await projectEstimateService
       .patchEstimate(workspaceSlug as string, projectId as string, data?.id as string, payload, user)
       .then(() => {
         mutate(ESTIMATES_LIST(projectId.toString()));
diff --git a/web/components/exporter/guide.tsx b/web/components/exporter/guide.tsx
index 684722489a2..893197f225b 100644
--- a/web/components/exporter/guide.tsx
+++ b/web/components/exporter/guide.tsx
@@ -9,7 +9,7 @@ import useSWR, { mutate } from "swr";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 // services
-import IntegrationService from "services/integrations/integration.service";
+import { IntegrationService } from "services/integrations";
 // components
 import { Exporter, SingleExport } from "components/exporter";
 // ui
@@ -22,6 +22,9 @@ import { EXPORT_SERVICES_LIST } from "constants/fetch-keys";
 // constants
 import { EXPORTERS_LIST } from "constants/workspace";
 
+// services
+const integrationService = new IntegrationService();
+
 const IntegrationGuide = () => {
   const [refreshing, setRefreshing] = useState(false);
   const per_page = 10;
@@ -35,7 +38,7 @@ const IntegrationGuide = () => {
   const { data: exporterServices } = useSWR(
     workspaceSlug && cursor ? EXPORT_SERVICES_LIST(workspaceSlug as string, cursor, `${per_page}`) : null,
     workspaceSlug && cursor
-      ? () => IntegrationService.getExportsServicesList(workspaceSlug as string, cursor, per_page)
+      ? () => integrationService.getExportsServicesList(workspaceSlug as string, cursor, per_page)
       : null
   );
 
diff --git a/web/components/inbox/issue-activity.tsx b/web/components/inbox/issue-activity.tsx
index bc860aedc62..c405608ec28 100644
--- a/web/components/inbox/issue-activity.tsx
+++ b/web/components/inbox/issue-activity.tsx
@@ -5,7 +5,7 @@ import useSWR, { mutate } from "swr";
 // components
 import { AddComment, IssueActivitySection } from "components/issues";
 // services
-import issuesService from "services/issue/issue.service";
+import { IssueService, IssueCommentService } from "services/issue";
 // hooks
 import useUser from "hooks/use-user";
 import useToast from "hooks/use-toast";
@@ -16,6 +16,10 @@ import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 
 type Props = { issueDetails: IIssue };
 
+// services
+const issueService = new IssueService();
+const issueCommentService = new IssueCommentService();
+
 export const InboxIssueActivity: React.FC<Props> = ({ issueDetails }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, inboxIssueId } = router.query;
@@ -27,14 +31,14 @@ export const InboxIssueActivity: React.FC<Props> = ({ issueDetails }) => {
   const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
     workspaceSlug && projectId && inboxIssueId ? PROJECT_ISSUES_ACTIVITY(inboxIssueId.toString()) : null,
     workspaceSlug && projectId && inboxIssueId
-      ? () => issuesService.getIssueActivities(workspaceSlug.toString(), projectId.toString(), inboxIssueId.toString())
+      ? () => issueService.getIssueActivities(workspaceSlug.toString(), projectId.toString(), inboxIssueId.toString())
       : null
   );
 
   const handleCommentUpdate = async (commentId: string, data: Partial<IIssueComment>) => {
     if (!workspaceSlug || !projectId || !inboxIssueId) return;
 
-    await issuesService
+    await issueCommentService
       .patchIssueComment(workspaceSlug as string, projectId as string, inboxIssueId as string, commentId, data, user)
       .then(() => mutateIssueActivity());
   };
@@ -44,7 +48,7 @@ export const InboxIssueActivity: React.FC<Props> = ({ issueDetails }) => {
 
     mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
 
-    await issuesService
+    await issueCommentService
       .deleteIssueComment(workspaceSlug as string, projectId as string, inboxIssueId as string, commentId, user)
       .then(() => mutateIssueActivity());
   };
@@ -52,7 +56,7 @@ export const InboxIssueActivity: React.FC<Props> = ({ issueDetails }) => {
   const handleAddComment = async (formData: IIssueComment) => {
     if (!workspaceSlug || !issueDetails) return;
 
-    await issuesService
+    await issueCommentService
       .createIssueComment(workspaceSlug.toString(), issueDetails.project, issueDetails.id, formData, user)
       .then(() => {
         mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
diff --git a/web/components/integration/github/repo-details.tsx b/web/components/integration/github/repo-details.tsx
index 10cf5c295db..70e462a1088 100644
--- a/web/components/integration/github/repo-details.tsx
+++ b/web/components/integration/github/repo-details.tsx
@@ -7,7 +7,7 @@ import useSWR from "swr";
 // react-hook-form
 import { UseFormSetValue } from "react-hook-form";
 // services
-import GithubIntegrationService from "services/integrations/github.service";
+import { GithubIntegrationService } from "services/integrations";
 // ui
 import { Button, Loader } from "@plane/ui";
 // types
@@ -22,6 +22,9 @@ type Props = {
   setValue: UseFormSetValue<TFormValues>;
 };
 
+// services
+const githubIntegrationService = new GithubIntegrationService();
+
 export const GithubRepoDetails: FC<Props> = ({ selectedRepo, handleStepChange, setUsers, setValue }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -30,7 +33,7 @@ export const GithubRepoDetails: FC<Props> = ({ selectedRepo, handleStepChange, s
     workspaceSlug && selectedRepo ? GITHUB_REPOSITORY_INFO(workspaceSlug as string, selectedRepo.name) : null,
     workspaceSlug && selectedRepo
       ? () =>
-          GithubIntegrationService.getGithubRepoInfo(workspaceSlug as string, {
+          githubIntegrationService.getGithubRepoInfo(workspaceSlug as string, {
             owner: selectedRepo.owner.login,
             repo: selectedRepo.name,
           })
diff --git a/web/components/integration/github/root.tsx b/web/components/integration/github/root.tsx
index 2734f1b2cf2..0fc73775477 100644
--- a/web/components/integration/github/root.tsx
+++ b/web/components/integration/github/root.tsx
@@ -9,8 +9,7 @@ import useSWR, { mutate } from "swr";
 // react-hook-form
 import { useForm } from "react-hook-form";
 // services
-import IntegrationService from "services/integrations/integration.service";
-import GithubIntegrationService from "services/integrations/github.service";
+import { IntegrationService, GithubIntegrationService } from "services/integrations";
 // hooks
 import useToast from "hooks/use-toast";
 // components
@@ -84,6 +83,10 @@ type Props = {
   user: ICurrentUserResponse | undefined;
 };
 
+// services
+const integrationService = new IntegrationService();
+const githubIntegrationService = new GithubIntegrationService();
+
 export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
   const [currentStep, setCurrentStep] = useState<IIntegrationData>({
     state: "import-configure",
@@ -99,11 +102,11 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
     defaultValues: defaultFormValues,
   });
 
-  const { data: appIntegrations } = useSWR(APP_INTEGRATIONS, () => IntegrationService.getAppIntegrationsList());
+  const { data: appIntegrations } = useSWR(APP_INTEGRATIONS, () => integrationService.getAppIntegrationsList());
 
   const { data: workspaceIntegrations } = useSWR(
     workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null,
-    workspaceSlug ? () => IntegrationService.getWorkspaceIntegrationsList(workspaceSlug as string) : null
+    workspaceSlug ? () => integrationService.getWorkspaceIntegrationsList(workspaceSlug as string) : null
   );
 
   const activeIntegrationState = () => {
@@ -143,7 +146,8 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
       project_id: formData.project,
     };
 
-    await GithubIntegrationService.createGithubServiceImport(workspaceSlug as string, payload, user)
+    await githubIntegrationService
+      .createGithubServiceImport(workspaceSlug as string, payload, user)
       .then(() => {
         router.push(`/${workspaceSlug}/settings/imports`);
         mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string));
diff --git a/web/components/integration/github/single-user-select.tsx b/web/components/integration/github/single-user-select.tsx
index b66b135c3c0..892a0d306d8 100644
--- a/web/components/integration/github/single-user-select.tsx
+++ b/web/components/integration/github/single-user-select.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // ui
 import { Avatar, CustomSearchSelect, CustomSelect } from "components/ui";
 import { Input } from "@plane/ui";
@@ -35,6 +35,9 @@ const importOptions = [
   },
 ];
 
+// services
+const workspaceService = new WorkspaceService();
+
 export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users, setUsers }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
diff --git a/web/components/integration/guide.tsx b/web/components/integration/guide.tsx
index f6c370455e8..fe8f29b24e8 100644
--- a/web/components/integration/guide.tsx
+++ b/web/components/integration/guide.tsx
@@ -9,7 +9,7 @@ import useSWR, { mutate } from "swr";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 // services
-import IntegrationService from "services/integrations/integration.service";
+import { IntegrationService } from "services/integrations";
 // components
 import { DeleteImportModal, GithubImporterRoot, JiraImporterRoot, SingleImport } from "components/integration";
 // ui
@@ -23,6 +23,9 @@ import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys";
 // constants
 import { IMPORTERS_EXPORTERS_LIST } from "constants/workspace";
 
+// services
+const integrationService = new IntegrationService();
+
 const IntegrationGuide = () => {
   const [refreshing, setRefreshing] = useState(false);
   const [deleteImportModal, setDeleteImportModal] = useState(false);
@@ -35,7 +38,7 @@ const IntegrationGuide = () => {
 
   const { data: importerServices } = useSWR(
     workspaceSlug ? IMPORTER_SERVICES_LIST(workspaceSlug as string) : null,
-    workspaceSlug ? () => IntegrationService.getImporterServicesList(workspaceSlug as string) : null
+    workspaceSlug ? () => integrationService.getImporterServicesList(workspaceSlug as string) : null
   );
 
   const handleDeleteImport = (importService: IImporterService) => {
diff --git a/web/components/integration/jira/jira-project-detail.tsx b/web/components/integration/jira/jira-project-detail.tsx
index 2399e6ec3ef..ac8eb3e904d 100644
--- a/web/components/integration/jira/jira-project-detail.tsx
+++ b/web/components/integration/jira/jira-project-detail.tsx
@@ -10,7 +10,7 @@ import useSWR from "swr";
 import { useFormContext, Controller } from "react-hook-form";
 
 // services
-import jiraImporterService from "services/integrations/jira.service";
+import { JiraImporterService } from "services/integrations";
 
 // fetch keys
 import { JIRA_IMPORTER_DETAIL } from "constants/fetch-keys";
@@ -27,6 +27,9 @@ type Props = {
   setDisableTopBarAfter: React.Dispatch<React.SetStateAction<TJiraIntegrationSteps | null>>;
 };
 
+// services
+const jiraImporterService = new JiraImporterService();
+
 export const JiraProjectDetail: React.FC<Props> = (props) => {
   const { setCurrentStep, setDisableTopBarAfter } = props;
 
diff --git a/web/components/integration/jira/root.tsx b/web/components/integration/jira/root.tsx
index b8f28989983..1267606db45 100644
--- a/web/components/integration/jira/root.tsx
+++ b/web/components/integration/jira/root.tsx
@@ -16,7 +16,7 @@ import { ArrowLeftIcon, ListBulletIcon } from "@heroicons/react/24/outline";
 import { CogIcon, UsersIcon, CheckIcon } from "components/icons";
 
 // services
-import jiraImporterService from "services/integrations/jira.service";
+import { JiraImporterService } from "services/integrations";
 
 // fetch keys
 import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys";
@@ -68,6 +68,9 @@ type Props = {
   user: ICurrentUserResponse | undefined;
 };
 
+// services
+const jiraImporterService = new JiraImporterService();
+
 export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
   const [currentStep, setCurrentStep] = useState<IJiraIntegrationData>({
     state: "import-configure",
diff --git a/web/components/issues/attachment/attachments.tsx b/web/components/issues/attachment/attachments.tsx
index 28ab39183c2..afa5441ee1d 100644
--- a/web/components/issues/attachment/attachments.tsx
+++ b/web/components/issues/attachment/attachments.tsx
@@ -12,8 +12,8 @@ import { DeleteAttachmentModal } from "./delete-attachment-modal";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { ExclamationIcon, getFileIcon } from "components/icons";
 // services
-import issuesService from "services/issue/issue.service";
-import projectService from "services/project.service/project.service";
+import { IssueAttachmentService } from "services/issue";
+import { ProjectService } from "services/project";
 // fetch-key
 import { ISSUE_ATTACHMENTS, PROJECT_MEMBERS } from "constants/fetch-keys";
 // helper
@@ -23,6 +23,10 @@ import { convertBytesToSize, getFileExtension, getFileName } from "helpers/attac
 // type
 import { IIssueAttachment } from "types";
 
+// services
+const issueAttachmentService = new IssueAttachmentService();
+const projectService = new ProjectService();
+
 export const IssueAttachments = () => {
   const [deleteAttachment, setDeleteAttachment] = useState<IIssueAttachment | null>(null);
   const [attachmentDeleteModal, setAttachmentDeleteModal] = useState<boolean>(false);
@@ -33,7 +37,7 @@ export const IssueAttachments = () => {
   const { data: attachments } = useSWR<IIssueAttachment[]>(
     workspaceSlug && projectId && issueId ? ISSUE_ATTACHMENTS(issueId as string) : null,
     workspaceSlug && projectId && issueId
-      ? () => issuesService.getIssueAttachment(workspaceSlug as string, projectId as string, issueId as string)
+      ? () => issueAttachmentService.getIssueAttachment(workspaceSlug as string, projectId as string, issueId as string)
       : null
   );
 
diff --git a/web/components/issues/attachment/delete-attachment-modal.tsx b/web/components/issues/attachment/delete-attachment-modal.tsx
index 41e3769ca2e..8633188350b 100644
--- a/web/components/issues/attachment/delete-attachment-modal.tsx
+++ b/web/components/issues/attachment/delete-attachment-modal.tsx
@@ -7,7 +7,7 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import issuesService from "services/issue/issue.service";
+import { IssueAttachmentService } from "services/issue";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
@@ -27,6 +27,9 @@ type Props = {
   data: IIssueAttachment | null;
 };
 
+// services
+const issueAttachmentService = new IssueAttachmentService();
+
 export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
@@ -46,7 +49,7 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
       false
     );
 
-    await issuesService
+    await issueAttachmentService
       .deleteIssueAttachment(workspaceSlug as string, projectId as string, issueId as string, assetId as string)
       .then(() => mutate(PROJECT_ISSUES_ACTIVITY(issueId as string)))
       .catch(() => {
diff --git a/web/components/issues/comment/comment-card.tsx b/web/components/issues/comment/comment-card.tsx
index 7e169a2d5e3..18072238229 100644
--- a/web/components/issues/comment/comment-card.tsx
+++ b/web/components/issues/comment/comment-card.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from "react";
-
-// react-hook-form
 import { useForm } from "react-hook-form";
+
+// services
+import { FileService } from "services/file.service";
 // icons
 import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // hooks
@@ -14,8 +15,9 @@ import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-te
 import { timeAgo } from "helpers/date-time.helper";
 // types
 import type { IIssueComment } from "types";
-import fileService from "services/file.service";
+
 // services
+const fileService = new FileService();
 
 type Props = {
   comment: IIssueComment;
@@ -70,18 +72,14 @@ export const CommentCard: React.FC<Props> = ({
           <img
             src={comment.actor_detail.avatar}
             alt={
-              comment.actor_detail.is_bot
-                ? comment.actor_detail.first_name + " Bot"
-                : comment.actor_detail.display_name
+              comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name
             }
             height={30}
             width={30}
             className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-200"
           />
         ) : (
-          <div
-            className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}
-          >
+          <div className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}>
             {comment.actor_detail.is_bot
               ? comment.actor_detail.first_name.charAt(0)
               : comment.actor_detail.display_name.charAt(0)}
@@ -89,27 +87,18 @@ export const CommentCard: React.FC<Props> = ({
         )}
 
         <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
-          <ChatBubbleLeftEllipsisIcon
-            className="h-3.5 w-3.5 text-custom-text-200"
-            aria-hidden="true"
-          />
+          <ChatBubbleLeftEllipsisIcon className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />
         </span>
       </div>
       <div className="min-w-0 flex-1">
         <div>
           <div className="text-xs">
-            {comment.actor_detail.is_bot
-              ? comment.actor_detail.first_name + " Bot"
-              : comment.actor_detail.display_name}
+            {comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name}
           </div>
-          <p className="mt-0.5 text-xs text-custom-text-200">
-            commented {timeAgo(comment.created_at)}
-          </p>
+          <p className="mt-0.5 text-xs text-custom-text-200">commented {timeAgo(comment.created_at)}</p>
         </div>
         <div className="issue-comments-section p-0">
-          <form
-            className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}
-          >
+          <form className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}>
             <div>
               <LiteTextEditorWithRef
                 onEnterKeyPress={handleSubmit(onEnter)}
@@ -145,10 +134,7 @@ export const CommentCard: React.FC<Props> = ({
           <div className={`relative ${isEditing ? "hidden" : ""}`}>
             {showAccessSpecifier && (
               <div className="absolute top-1 right-1.5 z-[1] text-custom-text-300">
-                <Icon
-                  iconName={comment.access === "INTERNAL" ? "lock" : "public"}
-                  className="!text-xs"
-                />
+                <Icon iconName={comment.access === "INTERNAL" ? "lock" : "public"} className="!text-xs" />
               </div>
             )}
             <LiteReadOnlyEditorWithRef
@@ -162,10 +148,7 @@ export const CommentCard: React.FC<Props> = ({
       </div>
       {user?.id === comment.actor && (
         <CustomMenu ellipsis>
-          <CustomMenu.MenuItem
-            onClick={() => setIsEditing(true)}
-            className="flex items-center gap-1"
-          >
+          <CustomMenu.MenuItem onClick={() => setIsEditing(true)} className="flex items-center gap-1">
             <Icon iconName="edit" />
             Edit comment
           </CustomMenu.MenuItem>
diff --git a/web/components/issues/draft-issue-modal.tsx b/web/components/issues/draft-issue-modal.tsx
index f916377f920..cf4ca2ce3ed 100644
--- a/web/components/issues/draft-issue-modal.tsx
+++ b/web/components/issues/draft-issue-modal.tsx
@@ -7,7 +7,8 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import issuesService from "services/issue/issue.service";
+import { IssueService, IssueDraftService } from "services/issue";
+import { ModuleService } from "services/module.service";
 // hooks
 import useUser from "hooks/use-user";
 import useIssuesView from "hooks/use-issues-view";
@@ -32,7 +33,6 @@ import {
   CYCLE_DETAILS,
   MODULE_DETAILS,
 } from "constants/fetch-keys";
-import modulesService from "services/module.service";
 
 interface IssuesModalProps {
   data?: IIssue | null;
@@ -57,6 +57,11 @@ interface IssuesModalProps {
   onSubmit?: (data: Partial<IIssue>) => Promise<void> | void;
 }
 
+// services
+const issueService = new IssueService();
+const issueDraftService = new IssueDraftService();
+const moduleService = new ModuleService();
+
 export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) => {
   const {
     data,
@@ -189,7 +194,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
   const createDraftIssue = async (payload: Partial<IIssue>) => {
     if (!workspaceSlug || !activeProject || !user) return;
 
-    await issuesService
+    await issueDraftService
       .createDraftIssue(workspaceSlug as string, activeProject ?? "", payload, user)
       .then(async () => {
         mutate(PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
@@ -219,7 +224,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
   const updateDraftIssue = async (payload: Partial<IIssue>) => {
     if (!user) return;
 
-    await issuesService
+    await issueDraftService
       .updateDraftIssue(workspaceSlug as string, activeProject ?? "", data?.id ?? "", payload, user)
       .then((res) => {
         if (isUpdatingSingleIssue) {
@@ -255,7 +260,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
   const addIssueToCycle = async (issueId: string, cycleId: string) => {
     if (!workspaceSlug || !activeProject) return;
 
-    await issuesService
+    await issueService
       .addIssueToCycle(
         workspaceSlug as string,
         activeProject ?? "",
@@ -276,7 +281,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
   const addIssueToModule = async (issueId: string, moduleId: string) => {
     if (!workspaceSlug || !activeProject) return;
 
-    await modulesService
+    await moduleService
       .addIssuesToModule(
         workspaceSlug as string,
         activeProject ?? "",
@@ -297,7 +302,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
   const createIssue = async (payload: Partial<IIssue>) => {
     if (!workspaceSlug || !activeProject) return;
 
-    await issuesService
+    await issueService
       .createIssues(workspaceSlug as string, activeProject ?? "", payload, user)
       .then(async (res) => {
         mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx
index 68726d33c61..a9832c20554 100644
--- a/web/components/issues/form.tsx
+++ b/web/components/issues/form.tsx
@@ -2,7 +2,8 @@ import React, { FC, useState, useEffect, useRef } from "react";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
 // services
-import AIService from "services/ai.service";
+import { AIService } from "services/ai.service";
+import { FileService } from "services/file.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
@@ -28,8 +29,6 @@ import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import type { IUser, IIssue, ISearchIssueResponse } from "types";
 // components
 import { RichTextEditorWithRef } from "@plane/rich-text-editor";
-import fileService from "services/file.service";
-// services
 
 const defaultValues: Partial<IIssue> = {
   project: "",
@@ -82,7 +81,9 @@ export interface IssueFormProps {
   )[];
 }
 
+// services
 const aiService = new AIService();
+const fileService = new FileService();
 
 export const IssueForm: FC<IssueFormProps> = (props) => {
   const {
diff --git a/web/components/issues/main-content.tsx b/web/components/issues/main-content.tsx
index ee2143f3ef7..f77146d37a7 100644
--- a/web/components/issues/main-content.tsx
+++ b/web/components/issues/main-content.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 
 // services
-import issuesService from "services/issue/issue.service";
+import { IssueService, IssueCommentService } from "services/issue";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 import useToast from "hooks/use-toast";
@@ -37,6 +37,10 @@ type Props = {
   uneditable?: boolean;
 };
 
+// services
+const issueService = new IssueService();
+const issueCommentService = new IssueCommentService();
+
 export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges, uneditable = false }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
@@ -51,7 +55,7 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges,
   const { data: siblingIssues } = useSWR(
     workspaceSlug && projectId && issueDetails?.parent ? SUB_ISSUES(issueDetails.parent) : null,
     workspaceSlug && projectId && issueDetails?.parent
-      ? () => issuesService.subIssues(workspaceSlug as string, projectId as string, issueDetails.parent ?? "")
+      ? () => issueService.subIssues(workspaceSlug as string, projectId as string, issueDetails.parent ?? "")
       : null
   );
   const siblingIssuesList = siblingIssues?.sub_issues.filter((i) => i.id !== issueDetails.id);
@@ -59,14 +63,14 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges,
   const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
     workspaceSlug && projectId && issueId ? PROJECT_ISSUES_ACTIVITY(issueId.toString()) : null,
     workspaceSlug && projectId && issueId
-      ? () => issuesService.getIssueActivities(workspaceSlug.toString(), projectId.toString(), issueId.toString())
+      ? () => issueService.getIssueActivities(workspaceSlug.toString(), projectId.toString(), issueId.toString())
       : null
   );
 
   const handleCommentUpdate = async (commentId: string, data: Partial<IIssueComment>) => {
     if (!workspaceSlug || !projectId || !issueId) return;
 
-    await issuesService
+    await issueCommentService
       .patchIssueComment(workspaceSlug as string, projectId as string, issueId as string, commentId, data, user)
       .then(() => mutateIssueActivity());
   };
@@ -76,7 +80,7 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges,
 
     mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
 
-    await issuesService
+    await issueCommentService
       .deleteIssueComment(workspaceSlug as string, projectId as string, issueId as string, commentId, user)
       .then(() => mutateIssueActivity());
   };
@@ -84,7 +88,7 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges,
   const handleAddComment = async (formData: IIssueComment) => {
     if (!workspaceSlug || !issueDetails) return;
 
-    await issuesService
+    await issueCommentService
       .createIssueComment(workspaceSlug.toString(), issueDetails.project, issueDetails.id, formData, user)
       .then(() => {
         mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
diff --git a/web/components/issues/parent-issues-list-modal.tsx b/web/components/issues/parent-issues-list-modal.tsx
index fb5e8c7c19f..fcc8b8cc1e4 100644
--- a/web/components/issues/parent-issues-list-modal.tsx
+++ b/web/components/issues/parent-issues-list-modal.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 // headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 // services
-import projectService from "services/project.service/project.service";
+import { ProjectService } from "services/project";
 // hooks
 import useDebounce from "hooks/use-debounce";
 // components
@@ -27,6 +27,9 @@ type Props = {
   issueId?: string;
 };
 
+// services
+const projectService = new ProjectService();
+
 export const ParentIssuesListModal: React.FC<Props> = ({
   isOpen,
   handleClose: onClose,
diff --git a/web/components/issues/sidebar-select/relates-to.tsx b/web/components/issues/sidebar-select/relates-to.tsx
index 5d991765c02..393c6fa3b7e 100644
--- a/web/components/issues/sidebar-select/relates-to.tsx
+++ b/web/components/issues/sidebar-select/relates-to.tsx
@@ -12,7 +12,7 @@ import { BlockerIcon, RelatedIcon } from "components/icons";
 // components
 import { ExistingIssuesListModal } from "components/core";
 // services
-import issuesService from "services/issue/issue.service";
+import { IssueService } from "services/issue";
 // types
 import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
 
@@ -23,6 +23,9 @@ type Props = {
   disabled?: boolean;
 };
 
+// services
+const issueService = new IssueService();
+
 export const SidebarRelatesSelect: React.FC<Props> = (props) => {
   const { issueId, submitChanges, watch, disabled = false } = props;
 
@@ -64,7 +67,7 @@ export const SidebarRelatesSelect: React.FC<Props> = (props) => {
 
     if (!user) return;
 
-    issuesService
+    issueService
       .createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, {
         related_list: [
           ...selectedIssues.map((issue) => ({
@@ -130,7 +133,7 @@ export const SidebarRelatesSelect: React.FC<Props> = (props) => {
                       onClick={() => {
                         if (!user) return;
 
-                        issuesService
+                        issueService
                           .deleteIssueRelation(
                             workspaceSlug as string,
                             projectId as string,
diff --git a/web/components/issues/sub-issues/properties.tsx b/web/components/issues/sub-issues/properties.tsx
index 9cfd4ec98a7..fbbbae35afc 100644
--- a/web/components/issues/sub-issues/properties.tsx
+++ b/web/components/issues/sub-issues/properties.tsx
@@ -2,8 +2,8 @@ import React from "react";
 // swr
 import { mutate } from "swr";
 // services
-import issuesService from "services/issue/issue.service";
-import trackEventServices from "services/track_event.service";
+import { IssueService } from "services/issue";
+import { TrackEventService } from "services/track_event.service";
 // components
 import { ViewDueDateSelect, ViewStartDateSelect } from "components/issues";
 import { MembersSelect, PrioritySelect } from "components/project";
@@ -24,6 +24,10 @@ export interface IIssueProperty {
   editable: boolean;
 }
 
+// services
+const issueService = new IssueService();
+const trackEventService = new TrackEventService();
+
 export const IssueProperty: React.FC<IIssueProperty> = ({
   workspaceSlug,
   projectId,
@@ -36,7 +40,7 @@ export const IssueProperty: React.FC<IIssueProperty> = ({
 
   const handlePriorityChange = (data: any) => {
     partialUpdateIssue({ priority: data });
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+    trackEventService.trackIssuePartialPropertyUpdateEvent(
       {
         workspaceSlug,
         workspaceId: issue.workspace,
@@ -58,7 +62,7 @@ export const IssueProperty: React.FC<IIssueProperty> = ({
       state: data,
       state_detail: newState,
     });
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+    trackEventService.trackIssuePartialPropertyUpdateEvent(
       {
         workspaceSlug,
         workspaceId: issue.workspace,
@@ -71,7 +75,7 @@ export const IssueProperty: React.FC<IIssueProperty> = ({
       user
     );
     if (oldState?.group !== "completed" && newState?.group !== "completed") {
-      trackEventServices.trackIssueMarkedAsDoneEvent(
+      trackEventService.trackIssueMarkedAsDoneEvent(
         {
           workspaceSlug: issue.workspace_detail.slug,
           workspaceId: issue.workspace_detail.id,
@@ -95,7 +99,7 @@ export const IssueProperty: React.FC<IIssueProperty> = ({
 
     partialUpdateIssue({ assignees_list: data, assignees: data });
 
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+    trackEventService.trackIssuePartialPropertyUpdateEvent(
       {
         workspaceSlug,
         workspaceId: issue.workspace,
@@ -123,7 +127,7 @@ export const IssueProperty: React.FC<IIssueProperty> = ({
       false
     );
 
-    const issueResponse = await issuesService.patchIssue(workspaceSlug as string, issue.project, issue.id, data, user);
+    const issueResponse = await issueService.patchIssue(workspaceSlug as string, issue.project, issue.id, data, user);
 
     mutate(
       SUB_ISSUES(parentIssue.id),
diff --git a/web/components/issues/workspace-views/workpace-view-issues.tsx b/web/components/issues/workspace-views/workpace-view-issues.tsx
deleted file mode 100644
index 78a12f80706..00000000000
--- a/web/components/issues/workspace-views/workpace-view-issues.tsx
+++ /dev/null
@@ -1,232 +0,0 @@
-import React, { useCallback, useState } from "react";
-
-import useSWR from "swr";
-
-import { useRouter } from "next/router";
-
-// context
-import { useProjectMyMembership } from "contexts/project-member.context";
-// service
-import projectIssuesServices from "services/issues.service";
-// hooks
-import useProjects from "hooks/use-projects";
-import useUser from "hooks/use-user";
-import { useWorkspaceView } from "hooks/use-workspace-view";
-import useWorkspaceMembers from "hooks/use-workspace-members";
-import useToast from "hooks/use-toast";
-// components
-import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
-import { EmptyState, PrimaryButton } from "components/ui";
-import { SpreadsheetView, WorkspaceFiltersList } from "components/core";
-import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
-import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
-// icon
-import { PlusIcon } from "components/icons";
-// image
-import emptyView from "public/empty-state/view.svg";
-// constants
-import { WORKSPACE_LABELS } from "constants/fetch-keys";
-import { STATE_GROUP } from "constants/project";
-// types
-import { IIssue, IWorkspaceIssueFilterOptions } from "types";
-
-export const WorkspaceViewIssues = () => {
-  const router = useRouter();
-  const { workspaceSlug, globalViewId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const { memberRole } = useProjectMyMembership();
-  const { user } = useUser();
-  const { isGuest, isViewer } = useWorkspaceMembers(
-    workspaceSlug?.toString(),
-    Boolean(workspaceSlug)
-  );
-  const { filters, viewIssues, mutateViewIssues, handleFilters } = useWorkspaceView();
-
-  const [createViewModal, setCreateViewModal] = useState<any>(null);
-
-  // create issue modal
-  const [createIssueModal, setCreateIssueModal] = useState(false);
-  const [preloadedData, setPreloadedData] = useState<
-    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
-  >(undefined);
-
-  // update issue modal
-  const [editIssueModal, setEditIssueModal] = useState(false);
-  const [issueToEdit, setIssueToEdit] = useState<
-    (IIssue & { actionType: "edit" | "delete" }) | undefined
-  >(undefined);
-
-  // delete issue modal
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
-
-  const { projects: allProjects } = useProjects();
-  const joinedProjects = allProjects?.filter((p) => p.is_member);
-
-  const { data: workspaceLabels } = useSWR(
-    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
-    workspaceSlug ? () => projectIssuesServices.getWorkspaceLabels(workspaceSlug.toString()) : null
-  );
-
-  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
-
-  const makeIssueCopy = useCallback(
-    (issue: IIssue) => {
-      setCreateIssueModal(true);
-
-      setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
-    },
-    [setCreateIssueModal, setPreloadedData]
-  );
-
-  const handleEditIssue = useCallback(
-    (issue: IIssue) => {
-      setEditIssueModal(true);
-      setIssueToEdit({
-        ...issue,
-        actionType: "edit",
-        cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
-        module: issue.issue_module ? issue.issue_module.module : null,
-      });
-    },
-    [setEditIssueModal, setIssueToEdit]
-  );
-
-  const handleDeleteIssue = useCallback(
-    (issue: IIssue) => {
-      setDeleteIssueModal(true);
-      setIssueToDelete(issue);
-    },
-    [setDeleteIssueModal, setIssueToDelete]
-  );
-
-  const handleIssueAction = useCallback(
-    (issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
-      if (action === "copy") makeIssueCopy(issue);
-      else if (action === "edit") handleEditIssue(issue);
-      else if (action === "delete") handleDeleteIssue(issue);
-    },
-    [makeIssueCopy, handleEditIssue, handleDeleteIssue]
-  );
-
-  const nullFilters =
-    filters.filters &&
-    Object.keys(filters.filters).filter(
-      (key) =>
-        filters.filters[key as keyof IWorkspaceIssueFilterOptions] === null ||
-        (filters.filters[key as keyof IWorkspaceIssueFilterOptions]?.length ?? 0) <= 0
-    );
-
-  const areFiltersApplied =
-    filters.filters &&
-    Object.keys(filters.filters).length > 0 &&
-    nullFilters.length !== Object.keys(filters.filters).length;
-
-  const isNotAllowed = isGuest || isViewer;
-  return (
-    <>
-      <CreateUpdateIssueModal
-        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
-        handleClose={() => setCreateIssueModal(false)}
-        prePopulateData={{
-          ...preloadedData,
-        }}
-        onSubmit={async () => mutateViewIssues()}
-      />
-      <CreateUpdateIssueModal
-        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
-        handleClose={() => setEditIssueModal(false)}
-        data={issueToEdit}
-        onSubmit={async () => mutateViewIssues()}
-      />
-      <DeleteIssueModal
-        handleClose={() => setDeleteIssueModal(false)}
-        isOpen={deleteIssueModal}
-        data={issueToDelete}
-        user={user}
-        onSubmit={async () => mutateViewIssues()}
-      />
-      <CreateUpdateWorkspaceViewModal
-        isOpen={createViewModal !== null}
-        handleClose={() => setCreateViewModal(null)}
-        preLoadedData={createViewModal}
-      />
-      <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
-        <div className="h-full w-full border-b border-custom-border-300">
-          <WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
-          {false ? (
-            <EmptyState
-              image={emptyView}
-              title="View does not exist"
-              description="The view you are looking for does not exist or has been deleted."
-              primaryButton={{
-                text: "View other views",
-                onClick: () => router.push(`/${workspaceSlug}/workspace-views`),
-              }}
-            />
-          ) : (
-            <div className="h-full w-full flex flex-col">
-              {areFiltersApplied && (
-                <>
-                  <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
-                    <WorkspaceFiltersList
-                      filters={filters.filters}
-                      setFilters={(updatedFilter) => handleFilters("filters", updatedFilter)}
-                      labels={workspaceLabels}
-                      members={workspaceMembers?.map((m) => m.member)}
-                      stateGroup={STATE_GROUP}
-                      project={joinedProjects}
-                      clearAllFilters={() =>
-                        handleFilters("filters", {
-                          assignees: null,
-                          created_by: null,
-                          labels: null,
-                          priority: null,
-                          state_group: null,
-                          start_date: null,
-                          target_date: null,
-                          subscriber: null,
-                          project: null,
-                        })
-                      }
-                    />
-                    <PrimaryButton
-                      onClick={() => {
-                        if (globalViewId) {
-                          handleFilters("filters", filters.filters, true);
-                          setToastAlert({
-                            title: "View updated",
-                            message: "Your view has been updated",
-                            type: "success",
-                          });
-                        } else
-                          setCreateViewModal({
-                            query: filters.filters,
-                          });
-                      }}
-                      className="flex items-center gap-2 text-sm"
-                    >
-                      {!globalViewId && <PlusIcon className="h-4 w-4" />}
-                      {globalViewId ? "Update" : "Save"} view
-                    </PrimaryButton>
-                  </div>
-                  {<div className="mt-3 border-t border-custom-border-200" />}
-                </>
-              )}
-              <SpreadsheetView
-                spreadsheetIssues={viewIssues}
-                mutateIssues={mutateViewIssues}
-                handleIssueAction={handleIssueAction}
-                disableUserActions={isNotAllowed ?? false}
-                user={user}
-                userAuth={memberRole}
-              />
-            </div>
-          )}
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/web/components/issues/workspace-views/workspace-all-issue.tsx b/web/components/issues/workspace-views/workspace-all-issue.tsx
deleted file mode 100644
index 4618c331d1d..00000000000
--- a/web/components/issues/workspace-views/workspace-all-issue.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-import { useCallback, useState } from "react";
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// hook
-import useUser from "hooks/use-user";
-import useWorkspaceMembers from "hooks/use-workspace-members";
-import useProjects from "hooks/use-projects";
-import { useWorkspaceView } from "hooks/use-workspace-view";
-// context
-import { useProjectMyMembership } from "contexts/project-member.context";
-// services
-import workspaceService from "services/workspace.service";
-import projectIssuesServices from "services/issues.service";
-// components
-import { SpreadsheetView, WorkspaceFiltersList } from "components/core";
-import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
-import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
-import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
-// ui
-import { PrimaryButton } from "components/ui";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-// fetch-keys
-import { WORKSPACE_LABELS, WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
-// constants
-import { STATE_GROUP } from "constants/project";
-// types
-import { IIssue, IWorkspaceIssueFilterOptions } from "types";
-
-export const WorkspaceAllIssue = () => {
-  const router = useRouter();
-  const { workspaceSlug, globalViewId } = router.query;
-
-  const [createViewModal, setCreateViewModal] = useState<any>(null);
-
-  // create issue modal
-  const [createIssueModal, setCreateIssueModal] = useState(false);
-  const [preloadedData, setPreloadedData] = useState<
-    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
-  >(undefined);
-
-  // update issue modal
-  const [editIssueModal, setEditIssueModal] = useState(false);
-  const [issueToEdit, setIssueToEdit] = useState<
-    (IIssue & { actionType: "edit" | "delete" }) | undefined
-  >(undefined);
-
-  // delete issue modal
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
-
-  const { user } = useUser();
-  const { memberRole } = useProjectMyMembership();
-
-  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
-
-  const { data: workspaceLabels } = useSWR(
-    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
-    workspaceSlug ? () => projectIssuesServices.getWorkspaceLabels(workspaceSlug.toString()) : null
-  );
-
-  const { filters, handleFilters } = useWorkspaceView();
-
-  const params: any = {
-    assignees: filters?.filters?.assignees ? filters?.filters?.assignees.join(",") : undefined,
-    subscriber: filters?.filters?.subscriber ? filters?.filters?.subscriber.join(",") : undefined,
-    state_group: filters?.filters?.state_group
-      ? filters?.filters?.state_group.join(",")
-      : undefined,
-    priority: filters?.filters?.priority ? filters?.filters?.priority.join(",") : undefined,
-    labels: filters?.filters?.labels ? filters?.filters?.labels.join(",") : undefined,
-    created_by: filters?.filters?.created_by ? filters?.filters?.created_by.join(",") : undefined,
-    start_date: filters?.filters?.start_date ? filters?.filters?.start_date.join(",") : undefined,
-    target_date: filters?.filters?.target_date
-      ? filters?.filters?.target_date.join(",")
-      : undefined,
-    project: filters?.filters?.project ? filters?.filters?.project.join(",") : undefined,
-    sub_issue: false,
-    type: undefined,
-  };
-
-  const { data: viewIssues, mutate: mutateViewIssues } = useSWR(
-    workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
-    workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
-  );
-
-  const makeIssueCopy = useCallback(
-    (issue: IIssue) => {
-      setCreateIssueModal(true);
-
-      setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
-    },
-    [setCreateIssueModal, setPreloadedData]
-  );
-
-  const handleEditIssue = useCallback(
-    (issue: IIssue) => {
-      setEditIssueModal(true);
-      setIssueToEdit({
-        ...issue,
-        actionType: "edit",
-        cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
-        module: issue.issue_module ? issue.issue_module.module : null,
-      });
-    },
-    [setEditIssueModal, setIssueToEdit]
-  );
-
-  const handleDeleteIssue = useCallback(
-    (issue: IIssue) => {
-      setDeleteIssueModal(true);
-      setIssueToDelete(issue);
-    },
-    [setDeleteIssueModal, setIssueToDelete]
-  );
-
-  const handleIssueAction = useCallback(
-    (issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
-      if (action === "copy") makeIssueCopy(issue);
-      else if (action === "edit") handleEditIssue(issue);
-      else if (action === "delete") handleDeleteIssue(issue);
-    },
-    [makeIssueCopy, handleEditIssue, handleDeleteIssue]
-  );
-
-  const nullFilters =
-    filters.filters &&
-    Object.keys(filters.filters).filter(
-      (key) =>
-        filters.filters[key as keyof IWorkspaceIssueFilterOptions] === null ||
-        (filters.filters[key as keyof IWorkspaceIssueFilterOptions]?.length ?? 0) <= 0
-    );
-
-  const areFiltersApplied =
-    filters.filters &&
-    Object.keys(filters.filters).length > 0 &&
-    nullFilters.length !== Object.keys(filters.filters).length;
-
-  const { projects: allProjects } = useProjects();
-  const joinedProjects = allProjects?.filter((p) => p.is_member);
-
-  return (
-    <>
-      <CreateUpdateIssueModal
-        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
-        handleClose={() => setCreateIssueModal(false)}
-        prePopulateData={{
-          ...preloadedData,
-        }}
-        onSubmit={async () => {
-          mutateViewIssues();
-        }}
-      />
-      <CreateUpdateIssueModal
-        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
-        handleClose={() => setEditIssueModal(false)}
-        data={issueToEdit}
-        onSubmit={async () => {
-          mutateViewIssues();
-        }}
-      />
-      <DeleteIssueModal
-        handleClose={() => setDeleteIssueModal(false)}
-        isOpen={deleteIssueModal}
-        data={issueToDelete}
-        user={user}
-        onSubmit={async () => {
-          mutateViewIssues();
-        }}
-      />
-      <CreateUpdateWorkspaceViewModal
-        isOpen={createViewModal !== null}
-        handleClose={() => setCreateViewModal(null)}
-        preLoadedData={createViewModal}
-      />
-      <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
-        <div className="h-full w-full border-b border-custom-border-300">
-          <WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
-          <div className="h-full w-full flex flex-col">
-            {areFiltersApplied && (
-              <>
-                <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
-                  <WorkspaceFiltersList
-                    filters={filters.filters}
-                    setFilters={(updatedFilter) => handleFilters("filters", updatedFilter)}
-                    labels={workspaceLabels}
-                    members={workspaceMembers?.map((m) => m.member)}
-                    stateGroup={STATE_GROUP}
-                    project={joinedProjects}
-                    clearAllFilters={() =>
-                      handleFilters("filters", {
-                        assignees: null,
-                        created_by: null,
-                        labels: null,
-                        priority: null,
-                        state_group: null,
-                        start_date: null,
-                        target_date: null,
-                        subscriber: null,
-                        project: null,
-                      })
-                    }
-                  />
-                  <PrimaryButton
-                    onClick={() => {
-                      if (globalViewId) handleFilters("filters", filters.filters, true);
-                      else
-                        setCreateViewModal({
-                          query: filters.filters,
-                        });
-                    }}
-                    className="flex items-center gap-2 text-sm"
-                  >
-                    {!globalViewId && <PlusIcon className="h-4 w-4" />}
-                    {globalViewId ? "Update" : "Save"} view
-                  </PrimaryButton>
-                </div>
-                {<div className="mt-3 border-t border-custom-border-200" />}
-              </>
-            )}
-            <SpreadsheetView
-              spreadsheetIssues={viewIssues}
-              mutateIssues={mutateViewIssues}
-              handleIssueAction={handleIssueAction}
-              disableUserActions={false}
-              user={user}
-              userAuth={memberRole}
-            />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/web/components/issues/workspace-views/workspace-assigned-issue.tsx b/web/components/issues/workspace-views/workspace-assigned-issue.tsx
deleted file mode 100644
index 4469804ac86..00000000000
--- a/web/components/issues/workspace-views/workspace-assigned-issue.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import React, { useCallback, useState } from "react";
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// hook
-import useUser from "hooks/use-user";
-// context
-import { useProjectMyMembership } from "contexts/project-member.context";
-// services
-import workspaceService from "services/workspace.service";
-// components
-import { SpreadsheetView } from "components/core";
-import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
-import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
-import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
-// fetch-keys
-import { WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
-// types
-import { IIssue } from "types";
-
-export const WorkspaceAssignedIssue = () => {
-  const [createViewModal, setCreateViewModal] = useState<any>(null);
-
-  // create issue modal
-  const [createIssueModal, setCreateIssueModal] = useState(false);
-  const [preloadedData, setPreloadedData] = useState<
-    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
-  >(undefined);
-
-  // update issue modal
-  const [editIssueModal, setEditIssueModal] = useState(false);
-  const [issueToEdit, setIssueToEdit] = useState<
-    (IIssue & { actionType: "edit" | "delete" }) | undefined
-  >(undefined);
-
-  // delete issue modal
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { user } = useUser();
-
-  const { memberRole } = useProjectMyMembership();
-
-  const params: any = {
-    assignees: user?.id ?? undefined,
-    sub_issue: false,
-  };
-
-  const { data: viewIssues, mutate: mutateIssues } = useSWR(
-    workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
-    workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
-  );
-
-  const makeIssueCopy = useCallback(
-    (issue: IIssue) => {
-      setCreateIssueModal(true);
-
-      setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
-    },
-    [setCreateIssueModal, setPreloadedData]
-  );
-
-  const handleEditIssue = useCallback(
-    (issue: IIssue) => {
-      setEditIssueModal(true);
-      setIssueToEdit({
-        ...issue,
-        actionType: "edit",
-        cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
-        module: issue.issue_module ? issue.issue_module.module : null,
-      });
-    },
-    [setEditIssueModal, setIssueToEdit]
-  );
-
-  const handleDeleteIssue = useCallback(
-    (issue: IIssue) => {
-      setDeleteIssueModal(true);
-      setIssueToDelete(issue);
-    },
-    [setDeleteIssueModal, setIssueToDelete]
-  );
-
-  const handleIssueAction = useCallback(
-    (issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
-      if (action === "copy") makeIssueCopy(issue);
-      else if (action === "edit") handleEditIssue(issue);
-      else if (action === "delete") handleDeleteIssue(issue);
-    },
-    [makeIssueCopy, handleEditIssue, handleDeleteIssue]
-  );
-  return (
-    <>
-      <CreateUpdateIssueModal
-        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
-        handleClose={() => setCreateIssueModal(false)}
-        prePopulateData={{
-          ...preloadedData,
-        }}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <CreateUpdateIssueModal
-        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
-        handleClose={() => setEditIssueModal(false)}
-        data={issueToEdit}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <DeleteIssueModal
-        handleClose={() => setDeleteIssueModal(false)}
-        isOpen={deleteIssueModal}
-        data={issueToDelete}
-        user={user}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <CreateUpdateWorkspaceViewModal
-        isOpen={createViewModal !== null}
-        handleClose={() => setCreateViewModal(null)}
-        preLoadedData={createViewModal}
-      />
-      <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
-        <div className="h-full w-full border-b border-custom-border-300">
-          <WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
-
-          <div className="h-full w-full flex flex-col">
-            <SpreadsheetView
-              spreadsheetIssues={viewIssues}
-              mutateIssues={mutateIssues}
-              handleIssueAction={handleIssueAction}
-              disableUserActions={false}
-              user={user}
-              userAuth={memberRole}
-            />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/web/components/issues/workspace-views/workspace-created-issues.tsx b/web/components/issues/workspace-views/workspace-created-issues.tsx
deleted file mode 100644
index bcc83c38b4b..00000000000
--- a/web/components/issues/workspace-views/workspace-created-issues.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import React, { useCallback, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// hook
-import useUser from "hooks/use-user";
-// context
-import { useProjectMyMembership } from "contexts/project-member.context";
-// services
-import workspaceService from "services/workspace.service";
-// components
-import { SpreadsheetView } from "components/core";
-import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
-import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
-import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
-// fetch-keys
-import { WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
-// types
-import { IIssue } from "types";
-
-export const WorkspaceCreatedIssues = () => {
-  const [createViewModal, setCreateViewModal] = useState<any>(null);
-
-  // create issue modal
-  const [createIssueModal, setCreateIssueModal] = useState(false);
-  const [preloadedData, setPreloadedData] = useState<
-    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
-  >(undefined);
-
-  // update issue modal
-  const [editIssueModal, setEditIssueModal] = useState(false);
-  const [issueToEdit, setIssueToEdit] = useState<
-    (IIssue & { actionType: "edit" | "delete" }) | undefined
-  >(undefined);
-
-  // delete issue modal
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { user } = useUser();
-  const { memberRole } = useProjectMyMembership();
-
-  const params: any = {
-    created_by: user?.id ?? undefined,
-    sub_issue: false,
-  };
-
-  const { data: viewIssues, mutate: mutateIssues } = useSWR(
-    workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
-    workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
-  );
-
-  const makeIssueCopy = useCallback(
-    (issue: IIssue) => {
-      setCreateIssueModal(true);
-
-      setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
-    },
-    [setCreateIssueModal, setPreloadedData]
-  );
-
-  const handleEditIssue = useCallback(
-    (issue: IIssue) => {
-      setEditIssueModal(true);
-      setIssueToEdit({
-        ...issue,
-        actionType: "edit",
-        cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
-        module: issue.issue_module ? issue.issue_module.module : null,
-      });
-    },
-    [setEditIssueModal, setIssueToEdit]
-  );
-
-  const handleDeleteIssue = useCallback(
-    (issue: IIssue) => {
-      setDeleteIssueModal(true);
-      setIssueToDelete(issue);
-    },
-    [setDeleteIssueModal, setIssueToDelete]
-  );
-
-  const handleIssueAction = useCallback(
-    (issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
-      if (action === "copy") makeIssueCopy(issue);
-      else if (action === "edit") handleEditIssue(issue);
-      else if (action === "delete") handleDeleteIssue(issue);
-    },
-    [makeIssueCopy, handleEditIssue, handleDeleteIssue]
-  );
-  return (
-    <>
-      <CreateUpdateIssueModal
-        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
-        handleClose={() => setCreateIssueModal(false)}
-        prePopulateData={{
-          ...preloadedData,
-        }}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <CreateUpdateIssueModal
-        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
-        handleClose={() => setEditIssueModal(false)}
-        data={issueToEdit}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <DeleteIssueModal
-        handleClose={() => setDeleteIssueModal(false)}
-        isOpen={deleteIssueModal}
-        data={issueToDelete}
-        user={user}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <CreateUpdateWorkspaceViewModal
-        isOpen={createViewModal !== null}
-        handleClose={() => setCreateViewModal(null)}
-        preLoadedData={createViewModal}
-      />
-      <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
-        <div className="h-full w-full border-b border-custom-border-300">
-          <WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
-          <div className="h-full w-full flex flex-col">
-            <SpreadsheetView
-              spreadsheetIssues={viewIssues}
-              mutateIssues={mutateIssues}
-              handleIssueAction={handleIssueAction}
-              disableUserActions={false}
-              user={user}
-              userAuth={memberRole}
-            />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/web/components/issues/workspace-views/workspace-issue-view-option.tsx b/web/components/issues/workspace-views/workspace-issue-view-option.tsx
deleted file mode 100644
index 25ddc338a11..00000000000
--- a/web/components/issues/workspace-views/workspace-issue-view-option.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-// hooks
-import { useWorkspaceView } from "hooks/use-workspace-view";
-// components
-import { GlobalSelectFilters } from "components/workspace/views/global-select-filters";
-// ui
-import { Tooltip } from "components/ui";
-// icons
-import { FormatListBulletedOutlined } from "@mui/icons-material";
-import { CreditCard } from "lucide-react";
-// helpers
-import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
-import { checkIfArraysHaveSameElements } from "helpers/array.helper";
-// types
-import { TIssueViewOptions } from "types";
-
-const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
-  {
-    type: "list",
-    Icon: FormatListBulletedOutlined,
-  },
-  {
-    type: "spreadsheet",
-    Icon: CreditCard,
-  },
-];
-
-export const WorkspaceIssuesViewOptions: React.FC = () => {
-  const router = useRouter();
-  const { workspaceSlug, globalViewId } = router.query;
-
-  const { filters, handleFilters } = useWorkspaceView();
-
-  const isWorkspaceViewPath = router.pathname.includes("workspace-views/all-issues");
-
-  const showFilters = isWorkspaceViewPath || globalViewId;
-
-  return (
-    <div className="flex items-center gap-2">
-      <div className="flex items-center gap-x- px-1 py-0.5 rounded bg-custom-sidebar-background-90 ">
-        {issueViewOptions.map((option) => (
-          <Tooltip
-            key={option.type}
-            tooltipContent={
-              <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} View</span>
-            }
-            position="bottom"
-          >
-            <button
-              type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-100 duration-300 ${
-                filters.display_filters?.layout === option.type
-                  ? "bg-custom-sidebar-background-100 shadow-sm"
-                  : "text-custom-sidebar-text-200"
-              }`}
-              onClick={() => {
-                handleFilters("display_filters", { layout: option.type }, true);
-                if (option.type === "spreadsheet")
-                  router.push(`/${workspaceSlug}/workspace-views/all-issues`);
-                else router.push(`/${workspaceSlug}/workspace-views`);
-              }}
-            >
-              <option.Icon
-                sx={{
-                  fontSize: 16,
-                }}
-                className={option.type === "spreadsheet" ? "h-4 w-4" : ""}
-              />
-            </button>
-          </Tooltip>
-        ))}
-      </div>
-
-      {showFilters && (
-        <>
-          <GlobalSelectFilters
-            filters={filters.filters}
-            onSelect={(option) => {
-              const key = option.key as keyof typeof filters.filters;
-
-              if (key === "start_date" || key === "target_date") {
-                const valueExists = checkIfArraysHaveSameElements(
-                  filters.filters?.[key] ?? [],
-                  option.value
-                );
-
-                handleFilters("filters", {
-                  ...filters,
-                  [key]: valueExists ? null : option.value,
-                });
-              } else {
-                if (!filters?.filters?.[key]?.includes(option.value))
-                  handleFilters("filters", {
-                    ...filters,
-                    [key]: [...((filters?.filters?.[key] as any[]) ?? []), option.value],
-                  });
-                else {
-                  handleFilters("filters", {
-                    ...filters,
-                    [key]: (filters?.filters?.[key] as any[])?.filter(
-                      (item) => item !== option.value
-                    ),
-                  });
-                }
-              }
-            }}
-            direction="left"
-          />
-        </>
-      )}
-    </div>
-  );
-};
diff --git a/web/components/issues/workspace-views/workspace-subscribed-issue.tsx b/web/components/issues/workspace-views/workspace-subscribed-issue.tsx
deleted file mode 100644
index d9db2f347fe..00000000000
--- a/web/components/issues/workspace-views/workspace-subscribed-issue.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import React, { useCallback, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// hook
-import useUser from "hooks/use-user";
-// context
-import { useProjectMyMembership } from "contexts/project-member.context";
-// services
-import workspaceService from "services/workspace.service";
-// components
-import { SpreadsheetView } from "components/core";
-import { WorkspaceViewsNavigation } from "components/workspace/views/workpace-view-navigation";
-import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
-import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
-// fetch-keys
-import { WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
-// types
-import { IIssue } from "types";
-
-export const WorkspaceSubscribedIssues = () => {
-  const [createViewModal, setCreateViewModal] = useState<any>(null);
-
-  // create issue modal
-  const [createIssueModal, setCreateIssueModal] = useState(false);
-  const [preloadedData, setPreloadedData] = useState<
-    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
-  >(undefined);
-
-  // update issue modal
-  const [editIssueModal, setEditIssueModal] = useState(false);
-  const [issueToEdit, setIssueToEdit] = useState<
-    (IIssue & { actionType: "edit" | "delete" }) | undefined
-  >(undefined);
-
-  // delete issue modal
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { user } = useUser();
-  const { memberRole } = useProjectMyMembership();
-
-  const params: any = {
-    subscriber: user?.id ?? undefined,
-    sub_issue: false,
-  };
-
-  const { data: viewIssues, mutate: mutateIssues } = useSWR(
-    workspaceSlug ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), params) : null,
-    workspaceSlug ? () => workspaceService.getViewIssues(workspaceSlug.toString(), params) : null
-  );
-
-  const makeIssueCopy = useCallback(
-    (issue: IIssue) => {
-      setCreateIssueModal(true);
-
-      setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
-    },
-    [setCreateIssueModal, setPreloadedData]
-  );
-
-  const handleEditIssue = useCallback(
-    (issue: IIssue) => {
-      setEditIssueModal(true);
-      setIssueToEdit({
-        ...issue,
-        actionType: "edit",
-        cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null,
-        module: issue.issue_module ? issue.issue_module.module : null,
-      });
-    },
-    [setEditIssueModal, setIssueToEdit]
-  );
-
-  const handleDeleteIssue = useCallback(
-    (issue: IIssue) => {
-      setDeleteIssueModal(true);
-      setIssueToDelete(issue);
-    },
-    [setDeleteIssueModal, setIssueToDelete]
-  );
-
-  const handleIssueAction = useCallback(
-    (issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
-      if (action === "copy") makeIssueCopy(issue);
-      else if (action === "edit") handleEditIssue(issue);
-      else if (action === "delete") handleDeleteIssue(issue);
-    },
-    [makeIssueCopy, handleEditIssue, handleDeleteIssue]
-  );
-  return (
-    <>
-      <CreateUpdateIssueModal
-        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
-        handleClose={() => setCreateIssueModal(false)}
-        prePopulateData={{
-          ...preloadedData,
-        }}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <CreateUpdateIssueModal
-        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
-        handleClose={() => setEditIssueModal(false)}
-        data={issueToEdit}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <DeleteIssueModal
-        handleClose={() => setDeleteIssueModal(false)}
-        isOpen={deleteIssueModal}
-        data={issueToDelete}
-        user={user}
-        onSubmit={async () => {
-          mutateIssues();
-        }}
-      />
-      <CreateUpdateWorkspaceViewModal
-        isOpen={createViewModal !== null}
-        handleClose={() => setCreateViewModal(null)}
-        preLoadedData={createViewModal}
-      />
-      <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
-        <div className="h-full w-full border-b border-custom-border-300">
-          <WorkspaceViewsNavigation handleAddView={() => setCreateViewModal(true)} />
-
-          <div className="h-full w-full flex flex-col">
-            <SpreadsheetView
-              spreadsheetIssues={viewIssues}
-              mutateIssues={mutateIssues}
-              handleIssueAction={handleIssueAction}
-              disableUserActions={false}
-              user={user}
-              userAuth={memberRole}
-            />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/web/hooks/gantt-chart/cycle-issues-view.tsx b/web/hooks/gantt-chart/cycle-issues-view.tsx
deleted file mode 100644
index c7b96990f94..00000000000
--- a/web/hooks/gantt-chart/cycle-issues-view.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import useSWR from "swr";
-
-// services
-import cyclesService from "services/cycle.service";
-// hooks
-import useIssuesView from "hooks/use-issues-view";
-// fetch-keys
-import { CYCLE_ISSUES_WITH_PARAMS } from "constants/fetch-keys";
-
-const useGanttChartCycleIssues = (
-  workspaceSlug: string | undefined,
-  projectId: string | undefined,
-  cycleId: string | undefined
-) => {
-  const { displayFilters, filters } = useIssuesView();
-
-  const params: any = {
-    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,
-    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,
-    start_target_date: true, // to fetch only issues with a start and target date
-  };
-
-  // all issues under the workspace and project
-  const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR(
-    workspaceSlug && projectId && cycleId ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params) : null,
-    workspaceSlug && projectId && cycleId
-      ? () =>
-          cyclesService.getCycleIssuesWithParams(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            cycleId.toString(),
-            params
-          )
-      : null
-  );
-
-  return {
-    ganttIssues,
-    mutateGanttIssues,
-  };
-};
-
-export default useGanttChartCycleIssues;
diff --git a/web/hooks/gantt-chart/issue-view.tsx b/web/hooks/gantt-chart/issue-view.tsx
deleted file mode 100644
index 1274d93d22a..00000000000
--- a/web/hooks/gantt-chart/issue-view.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import useSWR from "swr";
-
-// services
-import issuesService from "services/issue/issue.service";
-// hooks
-import useIssuesView from "hooks/use-issues-view";
-// fetch-keys
-import { PROJECT_ISSUES_LIST_WITH_PARAMS } from "constants/fetch-keys";
-
-const useGanttChartIssues = (workspaceSlug: string | undefined, projectId: string | undefined) => {
-  const { displayFilters, filters } = useIssuesView();
-
-  const params: any = {
-    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,
-    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,
-    start_target_date: true, // to fetch only issues with a start and target date
-  };
-
-  // all issues under the workspace and project
-  const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR(
-    workspaceSlug && projectId ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId, params) : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
-      : null
-  );
-
-  return {
-    ganttIssues,
-    mutateGanttIssues,
-    params,
-  };
-};
-
-export default useGanttChartIssues;
diff --git a/web/hooks/gantt-chart/view-issues-view.tsx b/web/hooks/gantt-chart/view-issues-view.tsx
deleted file mode 100644
index e3343a69607..00000000000
--- a/web/hooks/gantt-chart/view-issues-view.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import useSWR from "swr";
-
-// services
-import issuesService from "services/issue/issue.service";
-// hooks
-import useIssuesView from "hooks/use-issues-view";
-// fetch-keys
-import { VIEW_ISSUES } from "constants/fetch-keys";
-
-const useGanttChartViewIssues = (
-  workspaceSlug: string | undefined,
-  projectId: string | undefined,
-  viewId: string | undefined
-) => {
-  const { params } = useIssuesView();
-  const { order_by, group_by, ...viewGanttParams } = params;
-
-  // all issues under the view
-  const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR(
-    workspaceSlug && projectId && viewId
-      ? VIEW_ISSUES(viewId.toString(), { ...viewGanttParams, order_by, start_target_date: true })
-      : null,
-    workspaceSlug && projectId && viewId
-      ? () =>
-          issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), {
-            ...viewGanttParams,
-            start_target_date: true,
-          })
-      : null
-  );
-
-  return {
-    ganttIssues,
-    mutateGanttIssues,
-  };
-};
-
-export default useGanttChartViewIssues;
diff --git a/web/hooks/use-calendar-issues-view.tsx b/web/hooks/use-calendar-issues-view.tsx
deleted file mode 100644
index a05383e000a..00000000000
--- a/web/hooks/use-calendar-issues-view.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { useContext, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// contexts
-import { issueViewContext } from "contexts/issue-view.context";
-// services
-import issuesService from "services/issues.service";
-import cyclesService from "services/cycle.service";
-import modulesService from "services/module.service";
-// helpers
-import { renderDateFormat } from "helpers/date-time.helper";
-// types
-import { IIssue } from "types";
-// fetch-keys
-import {
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_ISSUES_WITH_PARAMS,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  VIEW_ISSUES,
-} from "constants/fetch-keys";
-
-const useCalendarIssuesView = () => {
-  const {
-    display_filters: displayFilters,
-    filters,
-    setFilters,
-    resetFilterToDefault,
-    setNewFilterDefaultView,
-  } = useContext(issueViewContext);
-
-  const [activeMonthDate, setActiveMonthDate] = useState(new Date());
-
-  // previous month's first date
-  const previousMonthYear =
-    activeMonthDate.getMonth() === 0 ? activeMonthDate.getFullYear() - 1 : activeMonthDate.getFullYear();
-  const previousMonthMonth = activeMonthDate.getMonth() === 0 ? 11 : activeMonthDate.getMonth() - 1;
-
-  const previousMonthFirstDate = new Date(previousMonthYear, previousMonthMonth, 1);
-
-  // next month's last date
-  const nextMonthYear =
-    activeMonthDate.getMonth() === 11 ? activeMonthDate.getFullYear() + 1 : activeMonthDate.getFullYear();
-  const nextMonthMonth = (activeMonthDate.getMonth() + 1) % 12;
-  const nextMonthFirstDate = new Date(nextMonthYear, nextMonthMonth, 1);
-
-  const nextMonthLastDate = new Date(nextMonthFirstDate.getFullYear(), nextMonthFirstDate.getMonth() + 1, 0);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
-
-  const params: any = {
-    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
-    state: filters?.state ? filters?.state.join(",") : undefined,
-    priority: filters?.priority ? filters?.priority.join(",") : 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: `${renderDateFormat(previousMonthFirstDate)};after,${renderDateFormat(nextMonthLastDate)};before`,
-  };
-
-  const { data: projectCalendarIssues, mutate: mutateProjectCalendarIssues } = useSWR(
-    workspaceSlug && projectId ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params) : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
-      : null
-  );
-
-  const { data: cycleCalendarIssues, mutate: mutateCycleCalendarIssues } = useSWR(
-    workspaceSlug && projectId && cycleId ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params) : null,
-    workspaceSlug && projectId && cycleId
-      ? () =>
-          cyclesService.getCycleIssuesWithParams(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            cycleId.toString(),
-            params
-          )
-      : null
-  );
-
-  const { data: moduleCalendarIssues, mutate: mutateModuleCalendarIssues } = useSWR(
-    workspaceSlug && projectId && moduleId ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params) : null,
-    workspaceSlug && projectId && moduleId
-      ? () =>
-          modulesService.getModuleIssuesWithParams(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            moduleId.toString(),
-            params
-          )
-      : null
-  );
-
-  const { data: viewCalendarIssues, mutate: mutateViewCalendarIssues } = useSWR(
-    workspaceSlug && projectId && viewId && params ? VIEW_ISSUES(viewId.toString(), params) : null,
-    workspaceSlug && projectId && viewId && params
-      ? () => issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
-      : null
-  );
-
-  const calendarIssues = cycleId
-    ? (cycleCalendarIssues as IIssue[])
-    : moduleId
-    ? (moduleCalendarIssues as IIssue[])
-    : viewId
-    ? (viewCalendarIssues as IIssue[])
-    : (projectCalendarIssues as IIssue[]);
-
-  return {
-    activeMonthDate,
-    setActiveMonthDate,
-    calendarIssues: calendarIssues ?? [],
-    mutateIssues: cycleId
-      ? mutateCycleCalendarIssues
-      : moduleId
-      ? mutateModuleCalendarIssues
-      : viewId
-      ? mutateViewCalendarIssues
-      : mutateProjectCalendarIssues,
-    filters,
-    setFilters,
-    params,
-    resetFilterToDefault,
-    setNewFilterDefaultView,
-  } as const;
-};
-
-export default useCalendarIssuesView;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index c10cfd824cb..2eb1f48584f 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -5,8 +5,8 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 
 // services
-import projectService from "services/project.service/project.service";
-import trackEventServices, { MiscellaneousEventType } from "services/track_event.service";
+import { ProjectService } from "services/project";
+import { TrackEventService, MiscellaneousEventType } from "services/track_event.service";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // hooks
@@ -80,6 +80,10 @@ const getEventType = (feature: string, toggle: boolean): MiscellaneousEventType
   }
 };
 
+// services
+const projectService = new ProjectService();
+const trackEventService = new TrackEventService();
+
 const FeaturesSettings: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -100,13 +104,6 @@ const FeaturesSettings: NextPage = () => {
       : null
   );
 
-  const { data: memberDetails } = useSWR(
-    workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
-
   const handleSubmit = async (formData: Partial<IProject>) => {
     if (!workspaceSlug || !projectId || !projectDetails) return;
 
@@ -184,7 +181,7 @@ const FeaturesSettings: NextPage = () => {
                 <ToggleSwitch
                   value={projectDetails?.[feature.property as keyof IProject]}
                   onChange={() => {
-                    trackEventServices.trackMiscellaneousEvent(
+                    trackEventService.trackMiscellaneousEvent(
                       {
                         workspaceId: (projectDetails?.workspace as any)?.id,
                         workspaceSlug,
diff --git a/web/pages/[workspaceSlug]/settings/billing.tsx b/web/pages/[workspaceSlug]/settings/billing.tsx
index c852fe9e1ce..5469b6b4fd7 100644
--- a/web/pages/[workspaceSlug]/settings/billing.tsx
+++ b/web/pages/[workspaceSlug]/settings/billing.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // component
@@ -20,6 +20,9 @@ import { WORKSPACE_DETAILS } from "constants/fetch-keys";
 // helper
 import { truncateText } from "helpers/string.helper";
 
+// services
+const workspaceService = new WorkspaceService();
+
 const BillingSettings: NextPage = () => {
   const {
     query: { workspaceSlug },
diff --git a/web/pages/[workspaceSlug]/settings/exports.tsx b/web/pages/[workspaceSlug]/settings/exports.tsx
index f90a5da46e9..b0345d49896 100644
--- a/web/pages/[workspaceSlug]/settings/exports.tsx
+++ b/web/pages/[workspaceSlug]/settings/exports.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // components
@@ -18,6 +18,9 @@ import { WORKSPACE_DETAILS } from "constants/fetch-keys";
 // helper
 import { truncateText } from "helpers/string.helper";
 
+// services
+const workspaceService = new WorkspaceService();
+
 const ImportExport: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
diff --git a/web/pages/[workspaceSlug]/settings/integrations.tsx b/web/pages/[workspaceSlug]/settings/integrations.tsx
index ed96c56a5dd..7d6869ed289 100644
--- a/web/pages/[workspaceSlug]/settings/integrations.tsx
+++ b/web/pages/[workspaceSlug]/settings/integrations.tsx
@@ -5,8 +5,8 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import workspaceService from "services/workspace.service";
-import IntegrationService from "services/integrations/integration.service";
+import { WorkspaceService } from "services/workspace.service";
+import { IntegrationService } from "services/integrations";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // components
@@ -23,6 +23,10 @@ import { WORKSPACE_DETAILS, APP_INTEGRATIONS } from "constants/fetch-keys";
 // helper
 import { truncateText } from "helpers/string.helper";
 
+// services
+const workspaceService = new WorkspaceService();
+const integrationService = new IntegrationService();
+
 const WorkspaceIntegrations: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -32,7 +36,7 @@ const WorkspaceIntegrations: NextPage = () => {
   );
 
   const { data: appIntegrations } = useSWR(workspaceSlug ? APP_INTEGRATIONS : null, () =>
-    workspaceSlug ? IntegrationService.getAppIntegrationsList() : null
+    workspaceSlug ? integrationService.getAppIntegrationsList() : null
   );
 
   return (
diff --git a/web/pages/create-workspace/index.tsx b/web/pages/create-workspace/index.tsx
index 867f3f71f92..fea22f71264 100644
--- a/web/pages/create-workspace/index.tsx
+++ b/web/pages/create-workspace/index.tsx
@@ -8,7 +8,7 @@ import { mutate } from "swr";
 // next-themes
 import { useTheme } from "next-themes";
 // services
-import userService from "services/user.service";
+import { UserService } from "services/user.service";
 // hooks
 import useUser from "hooks/use-user";
 // layouts
@@ -25,6 +25,9 @@ import type { NextPage } from "next";
 // fetch-keys
 import { CURRENT_USER } from "constants/fetch-keys";
 
+// services
+const userService = new UserService();
+
 const CreateWorkspace: NextPage = () => {
   const [defaultValues, setDefaultValues] = useState({
     name: "",
diff --git a/web/pages/installations/[provider]/index.tsx b/web/pages/installations/[provider]/index.tsx
index abdcf94cc10..cf249f875fe 100644
--- a/web/pages/installations/[provider]/index.tsx
+++ b/web/pages/installations/[provider]/index.tsx
@@ -3,17 +3,20 @@ import React, { useEffect } from "react";
 import { useRouter } from "next/router";
 
 // services
-import appInstallationsService from "services/app_installation.service";
+import { AppInstallationService } from "services/app_installation.service";
 // ui
 import { Spinner } from "@plane/ui";
 
+// services
+const appInstallationService = new AppInstallationService();
+
 const AppPostInstallation = () => {
   const router = useRouter();
   const { installation_id, setup_action, state, provider, code } = router.query;
 
   useEffect(() => {
     if (provider === "github" && state && installation_id) {
-      appInstallationsService
+      appInstallationService
         .addInstallationApp(state.toString(), provider, { installation_id })
         .then(() => {
           window.opener = null;
@@ -24,7 +27,7 @@ const AppPostInstallation = () => {
           console.log(err);
         });
     } else if (provider === "slack" && state && code) {
-      appInstallationsService
+      appInstallationService
         .getSlackAuthDetails(code.toString())
         .then((res) => {
           const [workspaceSlug, projectId, integrationId] = state.toString().split(",");
@@ -36,7 +39,7 @@ const AppPostInstallation = () => {
               },
             };
 
-            appInstallationsService
+            appInstallationService
               .addInstallationApp(state.toString(), provider, payload)
               .then((r) => {
                 window.opener = null;
@@ -56,7 +59,7 @@ const AppPostInstallation = () => {
               team_name: res.team.name,
               scopes: res.scope,
             };
-            appInstallationsService
+            appInstallationService
               .addSlackChannel(workspaceSlug, projectId, integrationId, payload)
               .then((r) => {
                 window.opener = null;
diff --git a/web/pages/invitations/index.tsx b/web/pages/invitations/index.tsx
index 69a01517b31..5581c93cb8b 100644
--- a/web/pages/invitations/index.tsx
+++ b/web/pages/invitations/index.tsx
@@ -5,8 +5,8 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 import { useTheme } from "next-themes";
 // services
-import WorkspaceService from "services/workspace.service";
-import UserService from "services/user.service";
+import { WorkspaceService } from "services/workspace.service";
+import { UserService } from "services/user.service";
 // hooks
 import useUser from "hooks/use-user";
 import useToast from "hooks/use-toast";
@@ -31,6 +31,7 @@ import { ROLE } from "constants/workspace";
 // components
 import { EmptyState } from "components/common";
 
+// services
 const workspaceService = new WorkspaceService();
 const userService = new UserService();
 
diff --git a/web/pages/m/[workspaceSlug]/editor.tsx b/web/pages/m/[workspaceSlug]/editor.tsx
index 6483f4e53de..da8c1e05459 100644
--- a/web/pages/m/[workspaceSlug]/editor.tsx
+++ b/web/pages/m/[workspaceSlug]/editor.tsx
@@ -16,8 +16,9 @@ import WebViewLayout from "layouts/web-view-layout";
 // components
 import { Button, Spinner } from "@plane/ui";
 import { RichTextEditor } from "@plane/rich-text-editor";
-import fileService from "services/file.service";
 // services
+import { FileService } from "services/file.service";
+const fileService = new FileService();
 
 const Editor: NextPage = () => {
   const [isLoading, setIsLoading] = useState(false);
diff --git a/web/pages/onboarding/index.tsx b/web/pages/onboarding/index.tsx
index 169fa1db184..8c3d1e2ee88 100644
--- a/web/pages/onboarding/index.tsx
+++ b/web/pages/onboarding/index.tsx
@@ -7,8 +7,8 @@ import useSWR, { mutate } from "swr";
 // next-themes
 import { useTheme } from "next-themes";
 // services
-import userService from "services/user.service";
-import workspaceService from "services/workspace.service";
+import { UserService } from "services/user.service";
+import { WorkspaceService } from "services/workspace.service";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 import useWorkspaces from "hooks/use-workspaces";
@@ -28,6 +28,10 @@ import type { NextPage } from "next";
 // fetch-keys
 import { CURRENT_USER, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
 
+// services
+const userService = new UserService();
+const workspaceService = new WorkspaceService();
+
 const Onboarding: NextPage = () => {
   const [step, setStep] = useState<number | null>(null);
 
diff --git a/web/pages/workspace-invitations/index.tsx b/web/pages/workspace-invitations/index.tsx
index 86bce7f5192..dd97afd65ff 100644
--- a/web/pages/workspace-invitations/index.tsx
+++ b/web/pages/workspace-invitations/index.tsx
@@ -6,7 +6,7 @@ import useSWR from "swr";
 import { CheckIcon, CubeIcon, ShareIcon, StarIcon, UserIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // swr
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // hooks
 import useUser from "hooks/use-user";
 // layouts
@@ -20,6 +20,9 @@ import type { NextPage } from "next";
 // constants
 import { WORKSPACE_INVITATION } from "constants/fetch-keys";
 
+// services
+const workspaceService = new WorkspaceService();
+
 const WorkspaceInvitation: NextPage = () => {
   const router = useRouter();
 
diff --git a/web/store/cycle/cycle_issue.store.ts b/web/store/cycle/cycle_issue.store.ts
index b1d4f193a81..8ab84f0aeae 100644
--- a/web/store/cycle/cycle_issue.store.ts
+++ b/web/store/cycle/cycle_issue.store.ts
@@ -4,7 +4,7 @@ import { RootStore } from "../root";
 // types
 import { IIssue } from "types";
 // services
-import CycleService from "services/cycle.service";
+import { CycleService } from "services/cycle.service";
 // constants
 import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
 
diff --git a/web/store/cycle/cycle_issue_filters.store.ts b/web/store/cycle/cycle_issue_filters.store.ts
index f61132c7ec1..c6818b6df21 100644
--- a/web/store/cycle/cycle_issue_filters.store.ts
+++ b/web/store/cycle/cycle_issue_filters.store.ts
@@ -1,6 +1,6 @@
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
 // services
-import CycleService from "services/cycle.service";
+import { CycleService } from "services/cycle.service";
 // helpers
 import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
 // types
diff --git a/web/store/cycle/cycles.store.ts b/web/store/cycle/cycles.store.ts
index 8db6d319139..d3767c88aef 100644
--- a/web/store/cycle/cycles.store.ts
+++ b/web/store/cycle/cycles.store.ts
@@ -5,7 +5,7 @@ import { ICycle } from "types";
 // services
 import { ProjectService } from "services/project";
 import { IssueService } from "services/issue";
-import CycleService from "services/cycle.service";
+import { CycleService } from "services/cycle.service";
 
 export interface ICycleStore {
   loader: boolean;
diff --git a/web/store/global-view/global_view_issues.store.ts b/web/store/global-view/global_view_issues.store.ts
index fdb727eb213..1b28939334b 100644
--- a/web/store/global-view/global_view_issues.store.ts
+++ b/web/store/global-view/global_view_issues.store.ts
@@ -1,7 +1,7 @@
 import { observable, action, makeObservable, runInAction } from "mobx";
 // services
 import { ProjectService } from "services/project";
-import WorkspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // helpers
 import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
 // types
diff --git a/web/store/global-view/global_views.store.ts b/web/store/global-view/global_views.store.ts
index fecfd71f6c1..c9915b8d898 100644
--- a/web/store/global-view/global_views.store.ts
+++ b/web/store/global-view/global_views.store.ts
@@ -1,7 +1,7 @@
 import { observable, action, makeObservable, runInAction } from "mobx";
 // services
 import { ProjectService } from "services/project";
-import WorkspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // types
 import { RootStore } from "../root";
 import { IWorkspaceView } from "types/workspace-views";
diff --git a/web/store/issue/issue_detail.store.ts b/web/store/issue/issue_detail.store.ts
index 0b3ebf9070f..650eaf99e30 100644
--- a/web/store/issue/issue_detail.store.ts
+++ b/web/store/issue/issue_detail.store.ts
@@ -1,6 +1,6 @@
 import { observable, action, makeObservable, runInAction } from "mobx";
 // services
-import IssueService from "services/issue/issue.service";
+import { IssueService } from "services/issue";
 // types
 import { RootStore } from "../root";
 import { IUser, IIssue } from "types";
diff --git a/web/store/issue/issue_draft.store.ts b/web/store/issue/issue_draft.store.ts
index bd44a74658e..747694a4394 100644
--- a/web/store/issue/issue_draft.store.ts
+++ b/web/store/issue/issue_draft.store.ts
@@ -1,7 +1,7 @@
 // mobx
 import { action, observable, runInAction, makeAutoObservable } from "mobx";
 // services
-import issueService from "services/issue/issue.service";
+import { issueService } from "services/issue/issue.service";
 // types
 import type { IIssue } from "types";
 
diff --git a/web/store/module/module_filters.store.ts b/web/store/module/module_filters.store.ts
index f24ac4bd083..66ecb72787f 100644
--- a/web/store/module/module_filters.store.ts
+++ b/web/store/module/module_filters.store.ts
@@ -1,7 +1,7 @@
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
 // services
 import { ProjectService } from "services/project";
-import ModuleService from "services/module.service";
+import { ModuleService } from "services/module.service";
 // helpers
 import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
 // types
diff --git a/web/store/module/module_issue.store.ts b/web/store/module/module_issue.store.ts
index 473ce9d2107..3d59fd5ece2 100644
--- a/web/store/module/module_issue.store.ts
+++ b/web/store/module/module_issue.store.ts
@@ -4,7 +4,7 @@ import { RootStore } from "../root";
 // types
 import { IIssue } from "types";
 // services
-import ModuleService from "services/module.service";
+import { ModuleService } from "services/module.service";
 // helpers
 import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
 
diff --git a/web/store/module/modules.store.ts b/web/store/module/modules.store.ts
index b89ac5362c4..f73b5952f19 100644
--- a/web/store/module/modules.store.ts
+++ b/web/store/module/modules.store.ts
@@ -1,7 +1,7 @@
 import { action, computed, observable, makeObservable, runInAction } from "mobx";
 // services
 import { ProjectService } from "services/project";
-import ModuleService from "services/module.service";
+import { ModuleService } from "services/module.service";
 // types
 import { RootStore } from "../root";
 import { IIssue, IModule } from "types";
diff --git a/web/store/page.store.ts b/web/store/page.store.ts
index 91abc0c40e6..23a8050aeea 100644
--- a/web/store/page.store.ts
+++ b/web/store/page.store.ts
@@ -4,7 +4,7 @@ import { RootStore } from "./root";
 import { IPage } from "types";
 // services
 import { ProjectService } from "services/project";
-import PageService from "services/page.service";
+import { PageService } from "services/page.service";
 
 export interface IPageStore {
   loader: boolean;
diff --git a/web/store/project-view/project_views.store.ts b/web/store/project-view/project_views.store.ts
index 74c51234c16..4c4baf487cc 100644
--- a/web/store/project-view/project_views.store.ts
+++ b/web/store/project-view/project_views.store.ts
@@ -1,6 +1,6 @@
 import { observable, action, makeObservable, runInAction } from "mobx";
 // services
-import ViewService from "services/view.service";
+import { ViewService } from "services/view.service";
 // types
 import { RootStore } from "../root";
 import { IProjectView } from "types";
diff --git a/web/store/user.store.ts b/web/store/user.store.ts
index 46fbef66cfa..e376961599d 100644
--- a/web/store/user.store.ts
+++ b/web/store/user.store.ts
@@ -1,8 +1,8 @@
 // mobx
 import { action, observable, runInAction, makeObservable } from "mobx";
 // services
-import UserService from "services/user.service";
-import WorkspaceService from "services/workspace.service";
+import { UserService } from "services/user.service";
+import { WorkspaceService } from "services/workspace.service";
 // interfaces
 import { IUser, IUserSettings } from "types/users";
 
diff --git a/web/store/workspace/workspace.store.ts b/web/store/workspace/workspace.store.ts
index 3bc1bd88151..a226720ad04 100644
--- a/web/store/workspace/workspace.store.ts
+++ b/web/store/workspace/workspace.store.ts
@@ -3,7 +3,7 @@ import { RootStore } from "../root";
 // types
 import { IIssueLabels, IProject, IWorkspace, IWorkspaceMember } from "types";
 // services
-import WorkspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 import { ProjectService } from "services/project";
 import { IssueService, IssueLabelService } from "services/issue";
 
diff --git a/web/store/workspace/workspace_filters.store.ts b/web/store/workspace/workspace_filters.store.ts
index bea3d783b93..d33a560576e 100644
--- a/web/store/workspace/workspace_filters.store.ts
+++ b/web/store/workspace/workspace_filters.store.ts
@@ -1,6 +1,6 @@
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
 // services
-import WorkspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // helpers
 import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
 // types

From d6f5892eabc8f288974154b58702fa13f02061b7 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Sat, 14 Oct 2023 15:15:45 +0530
Subject: [PATCH 3/3] chore: fix remianing service imports

---
 web/components/issues/comment/add-comment.tsx |   9 +-
 web/components/issues/select/state.tsx        |   7 +-
 .../issues/sidebar-select/assignee.tsx        |   5 +-
 .../issues/sidebar-select/blocked.tsx         |   9 +-
 .../issues/sidebar-select/blocker.tsx         |   9 +-
 .../issues/sidebar-select/cycle.tsx           |  12 +-
 .../issues/sidebar-select/duplicate.tsx       |   9 +-
 .../issues/sidebar-select/state.tsx           |   5 +-
 web/components/labels/delete-label-modal.tsx  |   7 +-
 web/components/labels/single-label-group.tsx  |   7 +-
 .../modules/delete-module-modal.tsx           |   7 +-
 .../gantt-chart/modules-list-layout.tsx       |   7 +-
 .../modules/sidebar-select/select-members.tsx |   5 +-
 web/components/onboarding/invite-members.tsx  |   5 +-
 web/components/onboarding/join-workspaces.tsx |   5 +-
 .../pages/create-update-block-inline.tsx      |  10 +-
 .../pages/create-update-page-modal.tsx        |   9 +-
 web/components/pages/delete-page-modal.tsx    |   7 +-
 .../pages/pages-list/all-pages-list.tsx       |   7 +-
 .../pages/pages-list/favorite-pages-list.tsx  |   7 +-
 .../pages/pages-list/my-pages-list.tsx        |   7 +-
 .../pages/pages-list/other-pages-list.tsx     |   7 +-
 .../pages/pages-list/recent-pages-list.tsx    |   9 +-
 web/components/pages/pages-view.tsx           |  16 +-
 web/components/pages/single-page-block.tsx    |   9 +-
 web/components/profile/overview/activity.tsx  |   5 +-
 .../profile/profile-issues-view.tsx           |  13 +-
 web/components/profile/sidebar.tsx            |   5 +-
 web/components/project/label-select.tsx       |   7 +-
 web/components/project/member-select.tsx      |   5 +-
 .../project/send-project-invitation-modal.tsx |   8 +-
 .../project/single-integration-card.tsx       |   5 +-
 .../project/single-project-card.tsx           |  37 +--
 .../states/create-update-state-inline.tsx     |   2 +-
 web/components/states/single-state.tsx        |  13 +-
 web/components/states/state-select.tsx        |   9 +-
 web/components/ui/avatar.tsx                  |  20 +-
 web/components/views/single-view-item.tsx     | 169 ----------
 web/components/web-view/comment-card.tsx      |  53 +--
 .../web-view/create-update-link-form.tsx      |   2 +-
 web/components/web-view/issue-activity.tsx    |  24 +-
 web/components/web-view/issue-attachments.tsx |  13 +-
 .../web-view/issue-web-view-form.tsx          |  16 +-
 .../web-view/issues-select-bottom-sheet.tsx   |  32 +-
 web/components/web-view/select-assignee.tsx   |  12 +-
 web/components/web-view/select-blocked-by.tsx |  47 +--
 web/components/web-view/select-duplicate.tsx  |  47 +--
 web/components/web-view/select-parent.tsx     |   5 +-
 web/components/web-view/select-relates-to.tsx |  43 +--
 web/components/web-view/select-state.tsx      |  22 +-
 web/components/web-view/sub-issues.tsx        |  22 +-
 .../workspace/create-workspace-form.tsx       |   2 +-
 .../workspace/delete-workspace-modal.tsx      |   5 +-
 .../send-workspace-invitation-modal.tsx       |   2 +-
 web/components/workspace/sidebar-dropdown.tsx |   4 +-
 .../views/delete-workspace-view-modal.tsx     | 141 --------
 .../workspace/views/global-select-filters.tsx | 301 ------------------
 .../views/single-workspace-view-item.tsx      | 110 -------
 .../views/workpace-view-navigation.tsx        | 105 ------
 web/contexts/project-member.context.tsx       |  11 +-
 web/contexts/theme.context.tsx                |   5 +-
 web/contexts/user.context.tsx                 |   5 +-
 web/contexts/workspace-member.context.tsx     |   5 +-
 web/contexts/workspace-view-context.tsx       | 235 --------------
 web/contexts/workspace.context.tsx            |  11 +-
 web/hooks/my-issues/use-my-issues.tsx         |   9 +-
 web/hooks/use-comment-reaction.tsx            |  14 +-
 web/hooks/use-estimate-option.tsx             |   9 +-
 web/hooks/use-issue-reaction.tsx              |  14 +-
 web/hooks/use-issues-view.tsx                 |  37 ++-
 web/hooks/use-profile-issues.tsx              |  16 +-
 web/hooks/use-project-details.tsx             |   4 +-
 web/hooks/use-project-members.tsx             |   4 +-
 web/hooks/use-projects.tsx                    |   4 +-
 web/hooks/use-sub-issue.tsx                   |   8 +-
 web/hooks/use-user-auth.tsx                   |   7 +-
 web/hooks/use-user.tsx                        |   7 +-
 web/hooks/use-workspace-details.tsx           |   4 +-
 web/hooks/use-workspace-members.tsx           |  20 +-
 web/hooks/use-workspaces.tsx                  |   4 +-
 .../project-authorization-wrapper.tsx         |   7 +-
 .../user-authorization-wrapper.tsx            |   5 +-
 .../workspace-authorization-wrapper.tsx       |  81 +++--
 web/layouts/auth-layout/user-wrapper.tsx      |   5 +-
 web/layouts/web-view-layout/index.tsx         |   9 +-
 .../profile/[userId]/index.tsx                |  14 +-
 .../archived-issues/[archivedIssueId].tsx     |  16 +-
 .../[projectId]/archived-issues/index.tsx     |   5 +-
 .../projects/[projectId]/cycles/[cycleId].tsx |  18 +-
 .../[projectId]/draft-issues/index.tsx        |   6 +-
 .../projects/[projectId]/issues/[issueId].tsx |  11 +-
 .../projects/[projectId]/issues/index.tsx     |   5 +-
 .../[projectId]/modules/[moduleId].tsx        |  16 +-
 .../projects/[projectId]/modules/index.tsx    |  13 +-
 .../projects/[projectId]/pages/[pageId].tsx   |  32 +-
 .../projects/[projectId]/pages/index.tsx      |   5 +-
 .../[projectId]/settings/automations.tsx      |   5 +-
 .../[projectId]/settings/estimates.tsx        |  13 +-
 .../projects/[projectId]/settings/index.tsx   |  13 +-
 .../projects/[projectId]/settings/states.tsx  |   9 +-
 .../[workspaceSlug]/settings/imports.tsx      |   5 +-
 web/pages/[workspaceSlug]/settings/index.tsx  |   8 +-
 .../[workspaceSlug]/settings/members.tsx      |   5 +-
 web/pages/_error.tsx                          |   7 +-
 web/pages/accounts/magic-sign-in.tsx          |  10 +-
 web/pages/accounts/reset-password.tsx         |   6 +-
 web/pages/accounts/sign-up.tsx                |   9 +-
 .../projects/[projectId]/issues/[issueId].tsx |  31 +-
 108 files changed, 643 insertions(+), 1661 deletions(-)
 delete mode 100644 web/components/views/single-view-item.tsx
 delete mode 100644 web/components/workspace/views/delete-workspace-view-modal.tsx
 delete mode 100644 web/components/workspace/views/global-select-filters.tsx
 delete mode 100644 web/components/workspace/views/single-workspace-view-item.tsx
 delete mode 100644 web/components/workspace/views/workpace-view-navigation.tsx
 delete mode 100644 web/contexts/workspace-view-context.tsx

diff --git a/web/components/issues/comment/add-comment.tsx b/web/components/issues/comment/add-comment.tsx
index 56c809f201e..87d391f0107 100644
--- a/web/components/issues/comment/add-comment.tsx
+++ b/web/components/issues/comment/add-comment.tsx
@@ -1,7 +1,9 @@
 import React from "react";
 import { useRouter } from "next/router";
-// react-hook-form
 import { useForm, Controller } from "react-hook-form";
+
+// services
+import { FileService } from "services/file.service";
 // components
 import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
 // ui
@@ -9,8 +11,6 @@ import { Icon } from "components/ui";
 import { Button, Tooltip } from "@plane/ui";
 // types
 import type { IIssueComment } from "types";
-// services
-import fileService from "services/file.service";
 
 const defaultValues: Partial<IIssueComment> = {
   access: "INTERNAL",
@@ -41,6 +41,9 @@ const commentAccess: commentAccessType[] = [
   },
 ];
 
+// services
+const fileService = new FileService();
+
 export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit, showAccessSpecifier = false }) => {
   const editorRef = React.useRef<any>(null);
 
diff --git a/web/components/issues/select/state.tsx b/web/components/issues/select/state.tsx
index 48fe0ee04d5..b7424a52bb5 100644
--- a/web/components/issues/select/state.tsx
+++ b/web/components/issues/select/state.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import stateService from "services/project.service/project_state.service";
+import { ProjectStateService } from "services/project";
 // ui
 import { CustomSearchSelect } from "components/ui";
 // icons
@@ -23,6 +23,9 @@ type Props = {
   projectId: string;
 };
 
+// services
+const projectStateService = new ProjectStateService();
+
 export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId }) => {
   // states
   const router = useRouter();
@@ -30,7 +33,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
 
   const { data: stateGroups } = useSWR(
     workspaceSlug && projectId ? STATES_LIST(projectId) : null,
-    workspaceSlug && projectId ? () => stateService.getStates(workspaceSlug as string, projectId) : null
+    workspaceSlug && projectId ? () => projectStateService.getStates(workspaceSlug as string, projectId) : null
   );
   const states = getStatesList(stateGroups);
 
diff --git a/web/components/issues/sidebar-select/assignee.tsx b/web/components/issues/sidebar-select/assignee.tsx
index 9806cf2bc72..05fe6424332 100644
--- a/web/components/issues/sidebar-select/assignee.tsx
+++ b/web/components/issues/sidebar-select/assignee.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import projectService from "services/project.service/project.service";
+import { ProjectService } from "services/project";
 // ui
 import { CustomSearchSelect } from "components/ui";
 import { AssigneesList, Avatar } from "components/ui/avatar";
@@ -18,6 +18,9 @@ type Props = {
   disabled?: boolean;
 };
 
+// services
+const projectService = new ProjectService();
+
 export const SidebarAssigneeSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
diff --git a/web/components/issues/sidebar-select/blocked.tsx b/web/components/issues/sidebar-select/blocked.tsx
index c47b5bbc3d7..3db9c718459 100644
--- a/web/components/issues/sidebar-select/blocked.tsx
+++ b/web/components/issues/sidebar-select/blocked.tsx
@@ -7,7 +7,7 @@ import { UseFormWatch } from "react-hook-form";
 import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
 // services
-import issuesService from "services/issue/issue.service";
+import { IssueService } from "services/issue";
 // components
 import { ExistingIssuesListModal } from "components/core";
 // icons
@@ -23,6 +23,9 @@ type Props = {
   disabled?: boolean;
 };
 
+// services
+const issueService = new IssueService();
+
 export const SidebarBlockedSelect: React.FC<Props> = ({ issueId, submitChanges, watch, disabled = false }) => {
   const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
 
@@ -64,7 +67,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({ issueId, submitChanges,
 
     if (!user) return;
 
-    issuesService
+    issueService
       .createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, {
         related_list: [
           ...selectedIssues.map((issue) => ({
@@ -127,7 +130,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({ issueId, submitChanges,
 
                         if (!user) return;
 
-                        issuesService.deleteIssueRelation(
+                        issueService.deleteIssueRelation(
                           workspaceSlug as string,
                           projectId as string,
                           issueId as string,
diff --git a/web/components/issues/sidebar-select/blocker.tsx b/web/components/issues/sidebar-select/blocker.tsx
index 7305b14a716..8d174e44879 100644
--- a/web/components/issues/sidebar-select/blocker.tsx
+++ b/web/components/issues/sidebar-select/blocker.tsx
@@ -10,7 +10,7 @@ import useUser from "hooks/use-user";
 // components
 import { ExistingIssuesListModal } from "components/core";
 // services
-import issuesService from "services/issue/issue.service";
+import { IssueService } from "services/issue";
 // icons
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { BlockerIcon } from "components/icons";
@@ -24,6 +24,9 @@ type Props = {
   disabled?: boolean;
 };
 
+// services
+const issueService = new IssueService();
+
 export const SidebarBlockerSelect: React.FC<Props> = ({ issueId, submitChanges, watch, disabled = false }) => {
   const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
 
@@ -65,7 +68,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({ issueId, submitChanges,
 
     if (!user) return;
 
-    issuesService
+    issueService
       .createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, {
         related_list: [
           ...selectedIssues.map((issue) => ({
@@ -137,7 +140,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({ issueId, submitChanges,
 
                         if (!user) return;
 
-                        issuesService.deleteIssueRelation(
+                        issueService.deleteIssueRelation(
                           workspaceSlug as string,
                           projectId as string,
                           relation.issue_detail?.id as string,
diff --git a/web/components/issues/sidebar-select/cycle.tsx b/web/components/issues/sidebar-select/cycle.tsx
index cc8dd36a2b3..47ad5aecccd 100644
--- a/web/components/issues/sidebar-select/cycle.tsx
+++ b/web/components/issues/sidebar-select/cycle.tsx
@@ -5,8 +5,8 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 
 // services
-import issuesService from "services/issue/issue.service";
-import cyclesService from "services/cycle.service";
+import { IssueService } from "services/issue";
+import { CycleService } from "services/cycle.service";
 // ui
 import { CustomSelect } from "components/ui";
 import { Spinner, Tooltip } from "@plane/ui";
@@ -23,6 +23,10 @@ type Props = {
   disabled?: boolean;
 };
 
+// services
+const issueService = new IssueService();
+const cycleService = new CycleService();
+
 export const SidebarCycleSelect: React.FC<Props> = ({ issueDetail, handleCycleChange, disabled = false }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
@@ -30,14 +34,14 @@ export const SidebarCycleSelect: React.FC<Props> = ({ issueDetail, handleCycleCh
   const { data: incompleteCycles } = useSWR(
     workspaceSlug && projectId ? INCOMPLETE_CYCLES_LIST(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => cyclesService.getCyclesWithParams(workspaceSlug as string, projectId as string, "incomplete")
+      ? () => cycleService.getCyclesWithParams(workspaceSlug as string, projectId as string, "incomplete")
       : null
   );
 
   const removeIssueFromCycle = (bridgeId: string, cycleId: string) => {
     if (!workspaceSlug || !projectId) return;
 
-    issuesService
+    issueService
       .removeIssueFromCycle(workspaceSlug as string, projectId as string, cycleId, bridgeId)
       .then(() => {
         mutate(ISSUE_DETAILS(issueId as string));
diff --git a/web/components/issues/sidebar-select/duplicate.tsx b/web/components/issues/sidebar-select/duplicate.tsx
index 1c2f537dca6..976dae14bbc 100644
--- a/web/components/issues/sidebar-select/duplicate.tsx
+++ b/web/components/issues/sidebar-select/duplicate.tsx
@@ -12,7 +12,7 @@ import { X, CopyPlus } from "lucide-react";
 import { BlockerIcon } from "components/icons";
 import { ExistingIssuesListModal } from "components/core";
 // services
-import issuesService from "services/issue/issue.service";
+import { IssueService } from "services/issue";
 // types
 import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
 
@@ -23,6 +23,9 @@ type Props = {
   disabled?: boolean;
 };
 
+// services
+const issueService = new IssueService();
+
 export const SidebarDuplicateSelect: React.FC<Props> = (props) => {
   const { issueId, submitChanges, watch, disabled = false } = props;
 
@@ -64,7 +67,7 @@ export const SidebarDuplicateSelect: React.FC<Props> = (props) => {
 
     if (!user) return;
 
-    issuesService
+    issueService
       .createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, {
         related_list: [
           ...selectedIssues.map((issue) => ({
@@ -130,7 +133,7 @@ export const SidebarDuplicateSelect: React.FC<Props> = (props) => {
                       onClick={() => {
                         if (!user) return;
 
-                        issuesService
+                        issueService
                           .deleteIssueRelation(
                             workspaceSlug as string,
                             projectId as string,
diff --git a/web/components/issues/sidebar-select/state.tsx b/web/components/issues/sidebar-select/state.tsx
index 5f2a33bb999..ca62831b659 100644
--- a/web/components/issues/sidebar-select/state.tsx
+++ b/web/components/issues/sidebar-select/state.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import stateService from "services/project.service/project_state.service";
+import { ProjectStateService } from "services/project";
 // ui
 import { CustomSelect } from "components/ui";
 import { Spinner } from "@plane/ui";
@@ -23,6 +23,9 @@ type Props = {
   disabled?: boolean;
 };
 
+// services
+const stateService = new ProjectStateService();
+
 export const SidebarStateSelect: React.FC<Props> = ({ value, onChange, disabled = false }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, inboxIssueId } = router.query;
diff --git a/web/components/labels/delete-label-modal.tsx b/web/components/labels/delete-label-modal.tsx
index 07f234d0f5a..85dd1038766 100644
--- a/web/components/labels/delete-label-modal.tsx
+++ b/web/components/labels/delete-label-modal.tsx
@@ -9,7 +9,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // services
-import issuesService from "services/issue/issue.service";
+import { IssueLabelService } from "services/issue";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
@@ -26,6 +26,9 @@ type Props = {
   user: ICurrentUserResponse | undefined;
 };
 
+// services
+const issueLabelService = new IssueLabelService();
+
 export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
@@ -50,7 +53,7 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
       false
     );
 
-    await issuesService
+    await issueLabelService
       .deleteIssueLabel(workspaceSlug.toString(), projectId.toString(), data.id, user)
       .then(() => handleClose())
       .catch(() => {
diff --git a/web/components/labels/single-label-group.tsx b/web/components/labels/single-label-group.tsx
index 8fdd4f676ec..c03dfd5f65f 100644
--- a/web/components/labels/single-label-group.tsx
+++ b/web/components/labels/single-label-group.tsx
@@ -7,7 +7,7 @@ import { mutate } from "swr";
 // headless ui
 import { Disclosure, Transition } from "@headlessui/react";
 // services
-import issuesService from "services/issue/issue.service";
+import { IssueLabelService } from "services/issue";
 // ui
 import { CustomMenu } from "components/ui";
 // icons
@@ -27,6 +27,9 @@ type Props = {
   user: ICurrentUserResponse | undefined;
 };
 
+// services
+const issueLabelService = new IssueLabelService();
+
 export const SingleLabelGroup: React.FC<Props> = ({
   label,
   labelChildren,
@@ -52,7 +55,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
       false
     );
 
-    issuesService
+    issueLabelService
       .patchIssueLabel(
         workspaceSlug as string,
         projectId as string,
diff --git a/web/components/modules/delete-module-modal.tsx b/web/components/modules/delete-module-modal.tsx
index 2d44bce290a..e9434ec3223 100644
--- a/web/components/modules/delete-module-modal.tsx
+++ b/web/components/modules/delete-module-modal.tsx
@@ -7,7 +7,7 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import modulesService from "services/module.service";
+import { ModuleService } from "services/module.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
@@ -26,6 +26,9 @@ type Props = {
   user: ICurrentUserResponse | undefined;
 };
 
+// services
+const moduleService = new ModuleService();
+
 export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, user }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
@@ -46,7 +49,7 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, us
 
     mutate<IModule[]>(MODULE_LIST(projectId as string), (prevData) => prevData?.filter((m) => m.id !== data.id), false);
 
-    await modulesService
+    await moduleService
       .deleteModule(workspaceSlug as string, projectId as string, data.id, user)
       .then(() => {
         if (moduleId) router.push(`/${workspaceSlug}/projects/${data.project}/modules`);
diff --git a/web/components/modules/gantt-chart/modules-list-layout.tsx b/web/components/modules/gantt-chart/modules-list-layout.tsx
index 67b46c7312d..f25b769212b 100644
--- a/web/components/modules/gantt-chart/modules-list-layout.tsx
+++ b/web/components/modules/gantt-chart/modules-list-layout.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import { KeyedMutator } from "swr";
 
 // services
-import modulesService from "services/module.service";
+import { ModuleService } from "services/module.service";
 // hooks
 import useUser from "hooks/use-user";
 import useProjectDetails from "hooks/use-project-details";
@@ -20,6 +20,9 @@ type Props = {
   mutateModules: KeyedMutator<IModule[]>;
 };
 
+// services
+const moduleService = new ModuleService();
+
 export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -56,7 +59,7 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules })
 
     if (newPayload.sort_order && payload.sort_order) newPayload.sort_order = payload.sort_order.newSortOrder;
 
-    modulesService.patchModule(workspaceSlug.toString(), module.project, module.id, newPayload, user);
+    moduleService.patchModule(workspaceSlug.toString(), module.project, module.id, newPayload, user);
   };
 
   const blockFormat = (blocks: IModule[]) =>
diff --git a/web/components/modules/sidebar-select/select-members.tsx b/web/components/modules/sidebar-select/select-members.tsx
index 2a83279554f..b37acc4c10f 100644
--- a/web/components/modules/sidebar-select/select-members.tsx
+++ b/web/components/modules/sidebar-select/select-members.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import projectService from "services/project.service/project.service";
+import { ProjectService } from "services/project";
 // ui
 import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
 // icons
@@ -18,6 +18,9 @@ type Props = {
   onChange: (val: string[]) => void;
 };
 
+// services
+const projectService = new ProjectService();
+
 export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
diff --git a/web/components/onboarding/invite-members.tsx b/web/components/onboarding/invite-members.tsx
index cf05bc9aeb4..e97fdc11761 100644
--- a/web/components/onboarding/invite-members.tsx
+++ b/web/components/onboarding/invite-members.tsx
@@ -5,7 +5,7 @@ import { Listbox, Transition } from "@headlessui/react";
 // react-hook-form
 import { Control, Controller, FieldArrayWithId, UseFieldArrayRemove, useFieldArray, useForm } from "react-hook-form";
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
@@ -45,6 +45,9 @@ type InviteMemberFormProps = {
   errors: any;
 };
 
+// services
+const workspaceService = new WorkspaceService();
+
 const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
   const { control, index, fields, remove, errors } = props;
 
diff --git a/web/components/onboarding/join-workspaces.tsx b/web/components/onboarding/join-workspaces.tsx
index 43828961728..736480b556c 100644
--- a/web/components/onboarding/join-workspaces.tsx
+++ b/web/components/onboarding/join-workspaces.tsx
@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import useSWR, { mutate } from "swr";
 
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // hooks
 import useUser from "hooks/use-user";
 // ui
@@ -25,6 +25,9 @@ type Props = {
   updateLastWorkspace: () => Promise<void>;
 };
 
+// services
+const workspaceService = new WorkspaceService();
+
 export const JoinWorkspaces: React.FC<Props> = ({ finishOnboarding, stepChange, updateLastWorkspace }) => {
   const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
   const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
diff --git a/web/components/pages/create-update-block-inline.tsx b/web/components/pages/create-update-block-inline.tsx
index f1bbc36138f..f87b1e6f3dc 100644
--- a/web/components/pages/create-update-block-inline.tsx
+++ b/web/components/pages/create-update-block-inline.tsx
@@ -4,9 +4,10 @@ import { mutate } from "swr";
 import { SparklesIcon } from "@heroicons/react/24/outline";
 import { Controller, useForm } from "react-hook-form";
 // services
-import PageService from "services/page.service";
-import IssueService from "services/issue/issue.service";
-import AIService from "services/ai.service";
+import { PageService } from "services/page.service";
+import { IssueService } from "services/issue/issue.service";
+import { AIService } from "services/ai.service";
+import { FileService } from "services/file.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
@@ -17,8 +18,6 @@ import { RichTextEditorWithRef } from "@plane/rich-text-editor";
 import { IUser, IPageBlock } from "types";
 // fetch-keys
 import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
-// services
-import fileService from "services/file.service";
 
 type Props = {
   handleClose: () => void;
@@ -38,6 +37,7 @@ const defaultValues = {
 const aiService = new AIService();
 const pagesService = new PageService();
 const issueService = new IssueService();
+const fileService = new FileService();
 
 export const CreateUpdateBlockInline: FC<Props> = ({
   handleClose,
diff --git a/web/components/pages/create-update-page-modal.tsx b/web/components/pages/create-update-page-modal.tsx
index 6a691274705..af4ddc0e799 100644
--- a/web/components/pages/create-update-page-modal.tsx
+++ b/web/components/pages/create-update-page-modal.tsx
@@ -7,7 +7,7 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import pagesService from "services/page.service";
+import { PageService } from "services/page.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
@@ -24,6 +24,9 @@ type Props = {
   user: ICurrentUserResponse | undefined;
 };
 
+// services
+const pageService = new PageService();
+
 export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, data, user }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -35,7 +38,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
   };
 
   const createPage = async (payload: IPage) => {
-    await pagesService
+    await pageService
       .createPage(workspaceSlug as string, projectId as string, payload, user)
       .then((res) => {
         mutate(RECENT_PAGES_LIST(projectId as string));
@@ -77,7 +80,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
   };
 
   const updatePage = async (payload: IPage) => {
-    await pagesService
+    await pageService
       .patchPage(workspaceSlug as string, projectId as string, data?.id ?? "", payload, user)
       .then((res) => {
         mutate(RECENT_PAGES_LIST(projectId as string));
diff --git a/web/components/pages/delete-page-modal.tsx b/web/components/pages/delete-page-modal.tsx
index 9b2d5d4538b..9317fa5533c 100644
--- a/web/components/pages/delete-page-modal.tsx
+++ b/web/components/pages/delete-page-modal.tsx
@@ -7,7 +7,7 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import pagesService from "services/page.service";
+import { PageService } from "services/page.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
@@ -26,6 +26,9 @@ type TConfirmPageDeletionProps = {
   user: ICurrentUserResponse | undefined;
 };
 
+// services
+const pageService = new PageService();
+
 export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({ isOpen, setIsOpen, data, user }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
@@ -43,7 +46,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({ isOpen, s
     setIsDeleteLoading(true);
     if (!data || !workspaceSlug || !projectId) return;
 
-    await pagesService
+    await pageService
       .deletePage(workspaceSlug as string, data.project, data.id, user)
       .then(() => {
         mutate(RECENT_PAGES_LIST(projectId as string));
diff --git a/web/components/pages/pages-list/all-pages-list.tsx b/web/components/pages/pages-list/all-pages-list.tsx
index 353fa7b8770..22460f734ba 100644
--- a/web/components/pages/pages-list/all-pages-list.tsx
+++ b/web/components/pages/pages-list/all-pages-list.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import pagesService from "services/page.service";
+import { PageService } from "services/page.service";
 // components
 import { PagesView } from "components/pages";
 // types
@@ -11,6 +11,9 @@ import { TPagesListProps } from "./types";
 // fetch-keys
 import { ALL_PAGES_LIST } from "constants/fetch-keys";
 
+// services
+const pageService = new PageService();
+
 export const AllPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -18,7 +21,7 @@ export const AllPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
   const { data: pages } = useSWR(
     workspaceSlug && projectId ? ALL_PAGES_LIST(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => pagesService.getPagesWithParams(workspaceSlug as string, projectId as string, "all")
+      ? () => pageService.getPagesWithParams(workspaceSlug as string, projectId as string, "all")
       : null
   );
 
diff --git a/web/components/pages/pages-list/favorite-pages-list.tsx b/web/components/pages/pages-list/favorite-pages-list.tsx
index e6ba8ec321d..ef50f296a9d 100644
--- a/web/components/pages/pages-list/favorite-pages-list.tsx
+++ b/web/components/pages/pages-list/favorite-pages-list.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import pagesService from "services/page.service";
+import { PageService } from "services/page.service";
 // components
 import { PagesView } from "components/pages";
 // types
@@ -11,6 +11,9 @@ import { TPagesListProps } from "./types";
 // fetch-keys
 import { FAVORITE_PAGES_LIST } from "constants/fetch-keys";
 
+// services
+const pageService = new PageService();
+
 export const FavoritePagesList: React.FC<TPagesListProps> = ({ viewType }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -18,7 +21,7 @@ export const FavoritePagesList: React.FC<TPagesListProps> = ({ viewType }) => {
   const { data: pages } = useSWR(
     workspaceSlug && projectId ? FAVORITE_PAGES_LIST(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => pagesService.getPagesWithParams(workspaceSlug as string, projectId as string, "favorite")
+      ? () => pageService.getPagesWithParams(workspaceSlug as string, projectId as string, "favorite")
       : null
   );
 
diff --git a/web/components/pages/pages-list/my-pages-list.tsx b/web/components/pages/pages-list/my-pages-list.tsx
index 2bd4a20178a..889ffa3b6be 100644
--- a/web/components/pages/pages-list/my-pages-list.tsx
+++ b/web/components/pages/pages-list/my-pages-list.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import pagesService from "services/page.service";
+import { PageService } from "services/page.service";
 // components
 import { PagesView } from "components/pages";
 // types
@@ -11,6 +11,9 @@ import { TPagesListProps } from "./types";
 // fetch-keys
 import { MY_PAGES_LIST } from "constants/fetch-keys";
 
+// services
+const pageService = new PageService();
+
 export const MyPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -18,7 +21,7 @@ export const MyPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
   const { data: pages } = useSWR(
     workspaceSlug && projectId ? MY_PAGES_LIST(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => pagesService.getPagesWithParams(workspaceSlug as string, projectId as string, "created_by_me")
+      ? () => pageService.getPagesWithParams(workspaceSlug as string, projectId as string, "created_by_me")
       : null
   );
 
diff --git a/web/components/pages/pages-list/other-pages-list.tsx b/web/components/pages/pages-list/other-pages-list.tsx
index 72729f9e2da..176bd6cf5ca 100644
--- a/web/components/pages/pages-list/other-pages-list.tsx
+++ b/web/components/pages/pages-list/other-pages-list.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import pagesService from "services/page.service";
+import { PageService } from "services/page.service";
 // components
 import { PagesView } from "components/pages";
 // types
@@ -11,6 +11,9 @@ import { TPagesListProps } from "./types";
 // fetch-keys
 import { OTHER_PAGES_LIST } from "constants/fetch-keys";
 
+// services
+const pageService = new PageService();
+
 export const OtherPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -18,7 +21,7 @@ export const OtherPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
   const { data: pages } = useSWR(
     workspaceSlug && projectId ? OTHER_PAGES_LIST(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => pagesService.getPagesWithParams(workspaceSlug as string, projectId as string, "created_by_other")
+      ? () => pageService.getPagesWithParams(workspaceSlug as string, projectId as string, "created_by_other")
       : null
   );
 
diff --git a/web/components/pages/pages-list/recent-pages-list.tsx b/web/components/pages/pages-list/recent-pages-list.tsx
index f302d607b23..9f89fb486f5 100644
--- a/web/components/pages/pages-list/recent-pages-list.tsx
+++ b/web/components/pages/pages-list/recent-pages-list.tsx
@@ -5,11 +5,11 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import pagesService from "services/page.service";
+import { PageService } from "services/page.service";
 // components
 import { PagesView } from "components/pages";
 // ui
-import { EmptyState } from "components/ui";
+import { EmptyState } from "components/common";
 import { Loader } from "@plane/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -23,13 +23,16 @@ import { RecentPagesResponse } from "types";
 // fetch-keys
 import { RECENT_PAGES_LIST } from "constants/fetch-keys";
 
+// services
+const pageService = new PageService();
+
 export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
   const { data: pages } = useSWR(
     workspaceSlug && projectId ? RECENT_PAGES_LIST(projectId as string) : null,
-    workspaceSlug && projectId ? () => pagesService.getRecentPages(workspaceSlug as string, projectId as string) : null
+    workspaceSlug && projectId ? () => pageService.getRecentPages(workspaceSlug as string, projectId as string) : null
   );
 
   const isEmpty = pages && Object.keys(pages).every((key) => pages[key].length === 0);
diff --git a/web/components/pages/pages-view.tsx b/web/components/pages/pages-view.tsx
index e53c8a476b3..942b68ba8cc 100644
--- a/web/components/pages/pages-view.tsx
+++ b/web/components/pages/pages-view.tsx
@@ -4,15 +4,15 @@ import useSWR, { mutate } from "swr";
 import { useRouter } from "next/router";
 
 // services
-import pagesService from "services/page.service";
-import projectService from "services/project.service/project.service";
+import { PageService } from "services/page.service";
+import { ProjectService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // components
 import { CreateUpdatePageModal, DeletePageModal, SinglePageDetailedItem, SinglePageListItem } from "components/pages";
 // ui
-import { EmptyState } from "components/ui";
+import { EmptyState } from "components/common";
 import { Loader } from "@plane/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -33,6 +33,10 @@ type Props = {
   viewType: TPageViewProps;
 };
 
+// services
+const pageService = new PageService();
+const projectService = new ProjectService();
+
 export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
   const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false);
   const [selectedPageToUpdate, setSelectedPageToUpdate] = useState<IPage | null>(null);
@@ -89,7 +93,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
     );
     mutate<IPage[]>(FAVORITE_PAGES_LIST(projectId.toString()), (prevData) => [page, ...(prevData ?? [])], false);
 
-    pagesService
+    pageService
       .addPageToFavorites(workspaceSlug.toString(), projectId.toString(), {
         page: page.id,
       })
@@ -139,7 +143,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
       false
     );
 
-    pagesService
+    pageService
       .removePageFromFavorites(workspaceSlug.toString(), projectId.toString(), page.id)
       .then(() => {
         mutate(RECENT_PAGES_LIST(projectId.toString()));
@@ -177,7 +181,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
       false
     );
 
-    pagesService.patchPage(workspaceSlug.toString(), projectId.toString(), page.id, formData, user).then(() => {
+    pageService.patchPage(workspaceSlug.toString(), projectId.toString(), page.id, formData, user).then(() => {
       mutate(RECENT_PAGES_LIST(projectId.toString()));
     });
   };
diff --git a/web/components/pages/single-page-block.tsx b/web/components/pages/single-page-block.tsx
index 8960c394c18..ffad1a20092 100644
--- a/web/components/pages/single-page-block.tsx
+++ b/web/components/pages/single-page-block.tsx
@@ -5,9 +5,10 @@ import { mutate } from "swr";
 import { useForm } from "react-hook-form";
 import { Draggable } from "react-beautiful-dnd";
 // services
-import PageService from "services/page.service";
-import IssueService from "services/issue/issue.service";
-import AIService from "services/ai.service";
+import { PageService } from "services/page.service";
+import { IssueService } from "services/issue/issue.service";
+import { AIService } from "services/ai.service";
+import { FileService } from "services/file.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
@@ -35,7 +36,6 @@ import { copyTextToClipboard } from "helpers/string.helper";
 import { IUser, IIssue, IPageBlock, IProject } from "types";
 // fetch-keys
 import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
-import fileService from "services/file.service";
 
 type Props = {
   block: IPageBlock;
@@ -48,6 +48,7 @@ type Props = {
 const aiService = new AIService();
 const pageService = new PageService();
 const issueService = new IssueService();
+const fileService = new FileService();
 
 export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, showBlockDetails, index, user }) => {
   const [isSyncing, setIsSyncing] = useState(false);
diff --git a/web/components/profile/overview/activity.tsx b/web/components/profile/overview/activity.tsx
index e2cc01c8f24..9a4973aaabb 100644
--- a/web/components/profile/overview/activity.tsx
+++ b/web/components/profile/overview/activity.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import userService from "services/user.service";
+import { UserService } from "services/user.service";
 // components
 import { ActivityMessage } from "components/core";
 // ui
@@ -16,6 +16,9 @@ import { timeAgo } from "helpers/date-time.helper";
 // fetch-keys
 import { USER_PROFILE_ACTIVITY } from "constants/fetch-keys";
 
+// services
+const userService = new UserService();
+
 export const ProfileActivity = () => {
   const router = useRouter();
   const { workspaceSlug, userId } = router.query;
diff --git a/web/components/profile/profile-issues-view.tsx b/web/components/profile/profile-issues-view.tsx
index 14bc0f3012b..6c3cac11b49 100644
--- a/web/components/profile/profile-issues-view.tsx
+++ b/web/components/profile/profile-issues-view.tsx
@@ -7,8 +7,8 @@ import useSWR from "swr";
 // react-beautiful-dnd
 import { DropResult } from "react-beautiful-dnd";
 // services
-import issuesService from "services/issue/issue.service";
-import userService from "services/user.service";
+import { IssueService, IssueLabelService } from "services/issue";
+import { UserService } from "services/user.service";
 // hooks
 import useProfileIssues from "hooks/use-profile-issues";
 import useUser from "hooks/use-user";
@@ -22,6 +22,11 @@ import { IIssue, IIssueFilterOptions, TIssuePriorities } from "types";
 // fetch-keys
 import { USER_PROFILE_PROJECT_SEGREGATION, WORKSPACE_LABELS } from "constants/fetch-keys";
 
+// services
+const issueService = new IssueService();
+const issueLabelService = new IssueLabelService();
+const userService = new UserService();
+
 export const ProfileIssuesView = () => {
   // create issue modal
   const [createIssueModal, setCreateIssueModal] = useState(false);
@@ -66,7 +71,7 @@ export const ProfileIssuesView = () => {
   const { data: labels } = useSWR(
     workspaceSlug && (filters?.labels ?? []).length > 0 ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
     workspaceSlug && (filters?.labels ?? []).length > 0
-      ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString())
+      ? () => issueLabelService.getWorkspaceIssueLabels(workspaceSlug.toString())
       : null
   );
 
@@ -116,7 +121,7 @@ export const ProfileIssuesView = () => {
         }, false);
 
         // patch request
-        issuesService
+        issueService
           .patchIssue(
             workspaceSlug as string,
             draggedItem.project,
diff --git a/web/components/profile/sidebar.tsx b/web/components/profile/sidebar.tsx
index 1cccaf5a2a4..9284174869a 100644
--- a/web/components/profile/sidebar.tsx
+++ b/web/components/profile/sidebar.tsx
@@ -6,7 +6,7 @@ import useSWR from "swr";
 // headless ui
 import { Disclosure, Transition } from "@headlessui/react";
 // services
-import userService from "services/user.service";
+import { UserService } from "services/user.service";
 // hooks
 import useUser from "hooks/use-user";
 // ui
@@ -20,6 +20,9 @@ import { renderEmoji } from "helpers/emoji.helper";
 // fetch-keys
 import { USER_PROFILE_PROJECT_SEGREGATION } from "constants/fetch-keys";
 
+// services
+const userService = new UserService();
+
 export const ProfileSidebar = () => {
   const router = useRouter();
   const { workspaceSlug, userId } = router.query;
diff --git a/web/components/project/label-select.tsx b/web/components/project/label-select.tsx
index 1d5b0c3333e..f5ffaef87af 100644
--- a/web/components/project/label-select.tsx
+++ b/web/components/project/label-select.tsx
@@ -7,7 +7,7 @@ import { useRouter } from "next/router";
 // react-popper
 import { usePopper } from "react-popper";
 // services
-import issuesService from "services/issues.service";
+import { IssueLabelService } from "services/issue";
 // headless ui
 import { Combobox } from "@headlessui/react";
 // component
@@ -38,6 +38,9 @@ type Props = {
   user: ICurrentUserResponse | undefined;
 };
 
+// services
+const issueLabelService = new IssueLabelService();
+
 export const LabelSelect: React.FC<Props> = ({
   value,
   projectId,
@@ -70,7 +73,7 @@ export const LabelSelect: React.FC<Props> = ({
   const { data: issueLabels } = useSWR<IIssueLabels[]>(
     projectId && fetchStates ? PROJECT_ISSUE_LABELS(projectId) : null,
     workspaceSlug && projectId && fetchStates
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId)
+      ? () => issueLabelService.getProjectIssueLabels(workspaceSlug.toString(), projectId)
       : null
   );
 
diff --git a/web/components/project/member-select.tsx b/web/components/project/member-select.tsx
index 0fa76ccf39a..d7de89e33bc 100644
--- a/web/components/project/member-select.tsx
+++ b/web/components/project/member-select.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import projectService from "services/project.service/project.service";
+import { ProjectService } from "services/project";
 // ui
 import { Avatar, CustomSearchSelect } from "components/ui";
 // icon
@@ -19,6 +19,9 @@ type Props = {
   isDisabled?: boolean;
 };
 
+// services
+const projectService = new ProjectService();
+
 export const MemberSelect: React.FC<Props> = ({ value, onChange, isDisabled = false }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
index c8638287dd3..ddf73f6c02b 100644
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -14,8 +14,8 @@ import { Avatar, CustomSearchSelect, CustomSelect } from "components/ui";
 import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
 // services
-import projectService from "services/project.service/project.service";
-import workspaceService from "services/workspace.service";
+import { ProjectService } from "services/project";
+import { WorkspaceService } from "services/workspace.service";
 // contexts
 import { useProjectMyMembership } from "contexts/project-member.context";
 // hooks
@@ -53,6 +53,10 @@ const defaultValues: FormValues = {
   ],
 };
 
+// services
+const projectService = new ProjectService();
+const workspaceService = new WorkspaceService();
+
 const SendProjectInvitationModal: React.FC<Props> = (props) => {
   const { isOpen, setIsOpen, members, user, onSuccess } = props;
 
diff --git a/web/components/project/single-integration-card.tsx b/web/components/project/single-integration-card.tsx
index ac697c4a9b6..ae916c782e9 100644
--- a/web/components/project/single-integration-card.tsx
+++ b/web/components/project/single-integration-card.tsx
@@ -5,7 +5,7 @@ import Image from "next/image";
 import useSWR, { mutate } from "swr";
 
 // services
-import projectService from "services/project.service/project.service";
+import { ProjectService } from "services/project";
 // hooks
 import { useRouter } from "next/router";
 import useToast from "hooks/use-toast";
@@ -34,6 +34,9 @@ const integrationDetails: { [key: string]: any } = {
   },
 };
 
+// services
+const projectService = new ProjectService();
+
 export const SingleIntegration: React.FC<Props> = ({ integration }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
diff --git a/web/components/project/single-project-card.tsx b/web/components/project/single-project-card.tsx
index eb88e738194..4f12dbfd01b 100644
--- a/web/components/project/single-project-card.tsx
+++ b/web/components/project/single-project-card.tsx
@@ -6,20 +6,13 @@ import Link from "next/link";
 import { mutate } from "swr";
 
 // services
-import projectService from "services/project.service";
+import { ProjectService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
 import { CustomMenu, Tooltip } from "components/ui";
 // icons
-import {
-  CalendarDaysIcon,
-  LinkIcon,
-  PencilIcon,
-  PlusIcon,
-  StarIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
+import { CalendarDaysIcon, LinkIcon, PencilIcon, PlusIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@@ -35,11 +28,10 @@ export type ProjectCardProps = {
   setDeleteProject: (id: string | null) => void;
 };
 
-export const SingleProjectCard: React.FC<ProjectCardProps> = ({
-  project,
-  setToJoinProject,
-  setDeleteProject,
-}) => {
+// services
+const projectService = new ProjectService();
+
+export const SingleProjectCard: React.FC<ProjectCardProps> = ({ project, setToJoinProject, setDeleteProject }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -53,8 +45,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
 
     mutate<IProject[]>(
       PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-      (prevData) =>
-        (prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: true } : p)),
+      (prevData) => (prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: true } : p)),
       false
     );
 
@@ -83,8 +74,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
 
     mutate<IProject[]>(
       PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-      (prevData) =>
-        (prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: false } : p)),
+      (prevData) => (prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: false } : p)),
       false
     );
 
@@ -107,8 +97,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
   };
 
   const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
 
     copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${project.id}/issues`).then(() => {
       setToastAlert({
@@ -148,9 +137,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
                     <span>Select to Join</span>
                   </button>
                 ) : (
-                  <span className="cursor-default rounded bg-green-600 px-2 py-1 text-xs">
-                    Joined
-                  </span>
+                  <span className="cursor-default rounded bg-green-600 px-2 py-1 text-xs">Joined</span>
                 )}
                 {project.is_favorite && (
                   <span className="grid h-6 w-9 cursor-default place-items-center rounded bg-orange-400">
@@ -174,9 +161,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
                   renderEmoji(project.icon_prop)
                 ) : null}
               </div>
-              <p className="mt-3.5 mb-7 break-words">
-                {truncateText(project.description ?? "", 100)}
-              </p>
+              <p className="mt-3.5 mb-7 break-words">{truncateText(project.description ?? "", 100)}</p>
             </a>
           </Link>
           <div className="flex h-full items-end justify-between">
diff --git a/web/components/states/create-update-state-inline.tsx b/web/components/states/create-update-state-inline.tsx
index e148e336c88..d5d0d9739c1 100644
--- a/web/components/states/create-update-state-inline.tsx
+++ b/web/components/states/create-update-state-inline.tsx
@@ -11,7 +11,7 @@ import { TwitterPicker } from "react-color";
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
 // services
-import ProjectStateService from "services/project.service/project_state.service";
+import { ProjectStateService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
diff --git a/web/components/states/single-state.tsx b/web/components/states/single-state.tsx
index 222a8379cc3..f7a6c35100b 100644
--- a/web/components/states/single-state.tsx
+++ b/web/components/states/single-state.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import { mutate } from "swr";
 
 // services
-import stateService from "services/project.service/project_state.service";
+import { ProjectStateService } from "services/project";
 // ui
 import { Tooltip } from "@plane/ui";
 // icons
@@ -31,6 +31,9 @@ type Props = {
   user: ICurrentUserResponse | undefined;
 };
 
+// services
+const projectStateService = new ProjectStateService();
+
 export const SingleState: React.FC<Props> = ({
   index,
   state,
@@ -61,7 +64,7 @@ export const SingleState: React.FC<Props> = ({
     mutate(STATES_LIST(projectId as string), orderStateGroups(groupBy(newStatesList, "group")), false);
 
     if (currentDefaultState)
-      stateService
+      projectStateService
         .patchState(
           workspaceSlug as string,
           projectId as string,
@@ -72,7 +75,7 @@ export const SingleState: React.FC<Props> = ({
           user
         )
         .then(() => {
-          stateService
+          projectStateService
             .patchState(
               workspaceSlug as string,
               projectId as string,
@@ -91,7 +94,7 @@ export const SingleState: React.FC<Props> = ({
             });
         });
     else
-      stateService
+      projectStateService
         .patchState(
           workspaceSlug as string,
           projectId as string,
@@ -129,7 +132,7 @@ export const SingleState: React.FC<Props> = ({
 
     mutate(STATES_LIST(projectId as string), orderStateGroups(groupBy(newStatesList, "group")), false);
 
-    stateService
+    projectStateService
       .patchState(
         workspaceSlug as string,
         projectId as string,
diff --git a/web/components/states/state-select.tsx b/web/components/states/state-select.tsx
index 4442fadd38a..1d5846019ce 100644
--- a/web/components/states/state-select.tsx
+++ b/web/components/states/state-select.tsx
@@ -7,7 +7,7 @@ import useSWR from "swr";
 // react-popper
 import { usePopper } from "react-popper";
 // services
-import stateService from "services/state.service";
+import { ProjectStateService } from "services/project";
 // headless ui
 import { Combobox } from "@headlessui/react";
 // icons
@@ -35,6 +35,9 @@ type Props = {
   disabled?: boolean;
 };
 
+// services
+const projectStateService = new ProjectStateService();
+
 export const StateSelect: React.FC<Props> = ({
   value,
   onChange,
@@ -62,7 +65,9 @@ export const StateSelect: React.FC<Props> = ({
 
   const { data: stateGroups } = useSWR(
     workspaceSlug && projectId && fetchStates ? STATES_LIST(projectId) : null,
-    workspaceSlug && projectId && fetchStates ? () => stateService.getStates(workspaceSlug as string, projectId) : null
+    workspaceSlug && projectId && fetchStates
+      ? () => projectStateService.getStates(workspaceSlug.toString(), projectId)
+      : null
   );
 
   const states = getStatesList(stateGroups);
diff --git a/web/components/ui/avatar.tsx b/web/components/ui/avatar.tsx
index d60baa56eeb..0c12093f413 100644
--- a/web/components/ui/avatar.tsx
+++ b/web/components/ui/avatar.tsx
@@ -6,7 +6,7 @@ import useSWR from "swr";
 // component
 import { Icon } from "components/ui";
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // icons
 import User from "public/user.png";
 // types
@@ -22,13 +22,10 @@ type AvatarProps = {
   fontSize?: string;
 };
 
-export const Avatar: React.FC<AvatarProps> = ({
-  user,
-  index,
-  height = "24px",
-  width = "24px",
-  fontSize = "12px",
-}) => (
+// services
+const workspaceService = new WorkspaceService();
+
+export const Avatar: React.FC<AvatarProps> = ({ user, index, height = "24px", width = "24px", fontSize = "12px" }) => (
   <div
     className={`relative rounded border-[0.5px] ${
       index && index !== 0 ? "-ml-3.5 border-custom-border-200" : "border-transparent"
@@ -76,12 +73,7 @@ type AsigneesListProps = {
   showLength?: boolean;
 };
 
-export const AssigneesList: React.FC<AsigneesListProps> = ({
-  users,
-  userIds,
-  length = 3,
-  showLength = true,
-}) => {
+export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, length = 3, showLength = true }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
diff --git a/web/components/views/single-view-item.tsx b/web/components/views/single-view-item.tsx
deleted file mode 100644
index d73885403e8..00000000000
--- a/web/components/views/single-view-item.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import React from "react";
-import { mutate } from "swr";
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-// icons
-import { TrashIcon, StarIcon, PencilIcon } from "@heroicons/react/24/outline";
-import { PhotoFilterOutlined } from "@mui/icons-material";
-//components
-import { CustomMenu } from "components/ui";
-// services
-import viewsService from "services/view.service";
-// types
-import { IView } from "types";
-// fetch keys
-import { VIEWS_LIST } from "constants/fetch-keys";
-// hooks
-import useToast from "hooks/use-toast";
-// helpers
-import { truncateText } from "helpers/string.helper";
-
-type Props = {
-  view: IView;
-  handleEditView: () => void;
-  handleDeleteView: () => void;
-};
-
-export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDeleteView }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const handleAddToFavorites = () => {
-    if (!workspaceSlug || !projectId || !view) return;
-
-    mutate<IView[]>(
-      VIEWS_LIST(projectId as string),
-      (prevData) =>
-        (prevData ?? []).map((v) => ({
-          ...v,
-          is_favorite: v.id === view.id ? true : v.is_favorite,
-        })),
-      false
-    );
-
-    viewsService
-      .addViewToFavorites(workspaceSlug as string, projectId as string, {
-        view: view.id,
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't add the view to favorites. Please try again.",
-        });
-      });
-  };
-
-  const handleRemoveFromFavorites = () => {
-    if (!workspaceSlug || !view) return;
-
-    mutate<IView[]>(
-      VIEWS_LIST(projectId as string),
-      (prevData) =>
-        (prevData ?? []).map((v) => ({
-          ...v,
-          is_favorite: v.id === view.id ? false : v.is_favorite,
-        })),
-      false
-    );
-
-    viewsService.removeViewFromFavorites(workspaceSlug as string, projectId as string, view.id).catch(() => {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Couldn't remove the view from favorites. Please try again.",
-      });
-    });
-  };
-
-  const viewRedirectionUrl = `/${workspaceSlug}/projects/${projectId}/views/${view.id}`;
-
-  return (
-    <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
-      <Link href={viewRedirectionUrl}>
-        <a className="flex items-center justify-between relative rounded px-5 py-4 w-full">
-          <div className="flex items-center justify-between w-full">
-            <div className="flex items-center gap-4">
-              <div
-                className={`flex items-center justify-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100`}
-              >
-                <PhotoFilterOutlined className="!text-base !leading-6" />
-              </div>
-              <div className="flex flex-col">
-                <p className="truncate text-sm leading-4 font-medium">{truncateText(view.name, 75)}</p>
-                {view?.description && <p className="text-xs text-custom-text-200">{view.description}</p>}
-              </div>
-            </div>
-            <div className="ml-2 flex flex-shrink-0">
-              <div className="flex items-center gap-4">
-                <p className="rounded bg-custom-background-80 py-1 px-2 text-xs text-custom-text-200 opacity-0 group-hover:opacity-100">
-                  {Object.keys(view.query_data)
-                    .map((key: string) =>
-                      view.query_data[key as keyof typeof view.query_data] !== null
-                        ? (view.query_data[key as keyof typeof view.query_data] as any).length
-                        : 0
-                    )
-                    .reduce((curr, prev) => curr + prev, 0)}{" "}
-                  filters
-                </p>
-
-                {view.is_favorite ? (
-                  <button
-                    type="button"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      handleRemoveFromFavorites();
-                    }}
-                  >
-                    <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
-                  </button>
-                ) : (
-                  <button
-                    type="button"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      handleAddToFavorites();
-                    }}
-                  >
-                    <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
-                  </button>
-                )}
-                <CustomMenu width="auto" ellipsis>
-                  <CustomMenu.MenuItem
-                    onClick={(e: any) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      handleEditView();
-                    }}
-                  >
-                    <span className="flex items-center justify-start gap-2">
-                      <PencilIcon className="h-3.5 w-3.5" />
-                      <span>Edit View</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                  <CustomMenu.MenuItem
-                    onClick={(e: any) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      handleDeleteView();
-                    }}
-                  >
-                    <span className="flex items-center justify-start gap-2">
-                      <TrashIcon className="h-3.5 w-3.5" />
-                      <span>Delete View</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                </CustomMenu>
-              </div>
-            </div>
-          </div>
-        </a>
-      </Link>
-    </div>
-  );
-};
diff --git a/web/components/web-view/comment-card.tsx b/web/components/web-view/comment-card.tsx
index 9f0d40a6ba7..54ee30ad833 100644
--- a/web/components/web-view/comment-card.tsx
+++ b/web/components/web-view/comment-card.tsx
@@ -4,6 +4,8 @@ import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 // icons
 import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
+// service
+import { FileService } from "services/file.service";
 // hooks
 import useUser from "hooks/use-user";
 // ui
@@ -15,8 +17,6 @@ import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-te
 import { timeAgo } from "helpers/date-time.helper";
 // types
 import type { IIssueComment } from "types";
-// service
-import fileService from "services/file.service";
 
 type Props = {
   comment: IIssueComment;
@@ -27,15 +27,11 @@ type Props = {
   disabled?: boolean;
 };
 
+// services
+const fileService = new FileService();
+
 export const CommentCard: React.FC<Props> = (props) => {
-  const {
-    comment,
-    handleCommentDeletion,
-    onSubmit,
-    showAccessSpecifier = false,
-    workspaceSlug,
-    disabled,
-  } = props;
+  const { comment, handleCommentDeletion, onSubmit, showAccessSpecifier = false, workspaceSlug, disabled } = props;
 
   const { user } = useUser();
 
@@ -75,18 +71,14 @@ export const CommentCard: React.FC<Props> = (props) => {
           <img
             src={comment.actor_detail.avatar}
             alt={
-              comment.actor_detail.is_bot
-                ? comment.actor_detail.first_name + " Bot"
-                : comment.actor_detail.display_name
+              comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name
             }
             height={30}
             width={30}
             className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-200"
           />
         ) : (
-          <div
-            className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}
-          >
+          <div className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}>
             {comment.actor_detail.is_bot
               ? comment.actor_detail.first_name.charAt(0)
               : comment.actor_detail.display_name.charAt(0)}
@@ -94,22 +86,15 @@ export const CommentCard: React.FC<Props> = (props) => {
         )}
 
         <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
-          <ChatBubbleLeftEllipsisIcon
-            className="h-3.5 w-3.5 text-custom-text-200"
-            aria-hidden="true"
-          />
+          <ChatBubbleLeftEllipsisIcon className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />
         </span>
       </div>
       <div className="min-w-0 flex-1">
         <div>
           <div className="text-xs">
-            {comment.actor_detail.is_bot
-              ? comment.actor_detail.first_name + " Bot"
-              : comment.actor_detail.display_name}
+            {comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name}
           </div>
-          <p className="mt-0.5 text-xs text-custom-text-200">
-            commented {timeAgo(comment.created_at)}
-          </p>
+          <p className="mt-0.5 text-xs text-custom-text-200">commented {timeAgo(comment.created_at)}</p>
         </div>
         <div className="issue-comments-section p-0">
           <form className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}>
@@ -148,10 +133,7 @@ export const CommentCard: React.FC<Props> = (props) => {
           <div className={`relative ${isEditing ? "hidden" : ""}`}>
             {showAccessSpecifier && (
               <div className="absolute top-1 right-1.5 z-[1] text-custom-text-300">
-                <Icon
-                  iconName={comment.access === "INTERNAL" ? "lock" : "public"}
-                  className="!text-xs"
-                />
+                <Icon iconName={comment.access === "INTERNAL" ? "lock" : "public"} className="!text-xs" />
               </div>
             )}
             <LiteReadOnlyEditorWithRef
@@ -159,20 +141,13 @@ export const CommentCard: React.FC<Props> = (props) => {
               value={comment.comment_html}
               customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
             />
-            <CommentReaction
-              readonly={disabled}
-              projectId={comment.project}
-              commentId={comment.id}
-            />
+            <CommentReaction readonly={disabled} projectId={comment.project} commentId={comment.id} />
           </div>
         </div>
       </div>
       {user?.id === comment.actor && !disabled && (
         <CustomMenu ellipsis>
-          <CustomMenu.MenuItem
-            onClick={() => setIsEditing(true)}
-            className="flex items-center gap-1"
-          >
+          <CustomMenu.MenuItem onClick={() => setIsEditing(true)} className="flex items-center gap-1">
             <Icon iconName="edit" />
             Edit comment
           </CustomMenu.MenuItem>
diff --git a/web/components/web-view/create-update-link-form.tsx b/web/components/web-view/create-update-link-form.tsx
index 01f34c82f25..85e16d34af9 100644
--- a/web/components/web-view/create-update-link-form.tsx
+++ b/web/components/web-view/create-update-link-form.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { mutate } from "swr";
 import { Controller, useForm } from "react-hook-form";
 // services
-import IssueService from "services/issue/issue.service";
+import { IssueService } from "services/issue";
 // fetch keys
 import { ISSUE_DETAILS } from "constants/fetch-keys";
 // hooks
diff --git a/web/components/web-view/issue-activity.tsx b/web/components/web-view/issue-activity.tsx
index de50334e9eb..34bb0e907c4 100644
--- a/web/components/web-view/issue-activity.tsx
+++ b/web/components/web-view/issue-activity.tsx
@@ -1,30 +1,20 @@
 // react
 import React from "react";
-
-// next
 import { useRouter } from "next/router";
-
-// swr
 import useSWR, { mutate } from "swr";
 
 // fetch key
 import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-
 // services
-import issuesService from "services/issue/issue.service";
-
+import { IssueService, IssueCommentService } from "services/issue";
 // hooks
 import useUser from "hooks/use-user";
-
 // components
 import { Label, AddComment, ActivityMessage, ActivityIcon, CommentCard } from "components/web-view";
-
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
-
 // ui
 import { Icon } from "components/ui";
-
 // types
 import type { IIssue, IIssueComment } from "types";
 
@@ -33,6 +23,10 @@ type Props = {
   issueDetails: IIssue;
 };
 
+// services
+const issueService = new IssueService();
+const issueCommentService = new IssueCommentService();
+
 export const IssueActivity: React.FC<Props> = (props) => {
   const { issueDetails, allowed } = props;
 
@@ -44,14 +38,14 @@ export const IssueActivity: React.FC<Props> = (props) => {
   const { data: issueActivities, mutate: mutateIssueActivity } = useSWR(
     workspaceSlug && projectId && issueId ? PROJECT_ISSUES_ACTIVITY(issueId.toString()) : null,
     workspaceSlug && projectId && issueId
-      ? () => issuesService.getIssueActivities(workspaceSlug.toString(), projectId.toString(), issueId.toString())
+      ? () => issueService.getIssueActivities(workspaceSlug.toString(), projectId.toString(), issueId.toString())
       : null
   );
 
   const handleCommentUpdate = async (comment: any, formData: any) => {
     if (!workspaceSlug || !projectId || !issueId || !allowed) return;
 
-    await issuesService
+    await issueCommentService
       .patchIssueComment(workspaceSlug as string, projectId as string, issueId as string, comment, formData, user)
       .then(() => mutateIssueActivity())
       .catch(() =>
@@ -70,7 +64,7 @@ export const IssueActivity: React.FC<Props> = (props) => {
 
     mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
 
-    await issuesService
+    await issueCommentService
       .deleteIssueComment(workspaceSlug as string, projectId as string, issueId as string, commentId, user)
       .then(() => mutateIssueActivity())
       .catch(() =>
@@ -87,7 +81,7 @@ export const IssueActivity: React.FC<Props> = (props) => {
   const handleAddComment = async (formData: IIssueComment) => {
     if (!workspaceSlug || !issueDetails || !allowed) return;
 
-    await issuesService
+    await issueCommentService
       .createIssueComment(workspaceSlug.toString(), issueDetails.project, issueDetails.id, formData, user)
       .then(() => {
         mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
diff --git a/web/components/web-view/issue-attachments.tsx b/web/components/web-view/issue-attachments.tsx
index 2e6c7db863a..d04f59fcdc6 100644
--- a/web/components/web-view/issue-attachments.tsx
+++ b/web/components/web-view/issue-attachments.tsx
@@ -4,17 +4,15 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 import { useDropzone } from "react-dropzone";
 // services
-import IssueService from "services/issue/issue.service";
+import { IssueAttachmentService } from "services/issue";
 // fetch key
 import { ISSUE_ATTACHMENTS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 // icons
 import { FileText, ChevronRight, X, Image as ImageIcon } from "lucide-react";
 // components
 import { Label, WebViewModal, DeleteConfirmation } from "components/web-view";
-
 // helpers
 import { getFileName } from "helpers/attachment.helper";
-
 // types
 import type { IIssueAttachment } from "types";
 
@@ -24,7 +22,7 @@ type Props = {
 
 const isImage = (fileName: string) => /\.(gif|jpe?g|tiff?|png|webp|bmp)$/i.test(fileName);
 
-const issueService = new IssueService();
+const issueAttachmentService = new IssueAttachmentService();
 
 export const IssueAttachments: React.FC<Props> = (props) => {
   const { allowed } = props;
@@ -53,7 +51,7 @@ export const IssueAttachments: React.FC<Props> = (props) => {
       );
       setIsLoading(true);
 
-      issueService
+      issueAttachmentService
         .uploadIssueAttachment(workspaceSlug as string, projectId as string, issueId as string, formData)
         .then((res) => {
           mutate<IIssueAttachment[]>(
@@ -97,7 +95,7 @@ export const IssueAttachments: React.FC<Props> = (props) => {
       false
     );
 
-    await issuesService
+    await issueAttachmentService
       .deleteIssueAttachment(workspaceSlug as string, projectId as string, issueId as string, assetId as string)
       .then(() => mutate(PROJECT_ISSUES_ACTIVITY(issueId as string)))
       .catch(() => {
@@ -120,7 +118,8 @@ export const IssueAttachments: React.FC<Props> = (props) => {
   const { data: attachments } = useSWR<IIssueAttachment[]>(
     workspaceSlug && projectId && issueId ? ISSUE_ATTACHMENTS(issueId as string) : null,
     workspaceSlug && projectId && issueId
-      ? () => issueService.getIssueAttachment(workspaceSlug.toString(), projectId.toString(), issueId.toString())
+      ? () =>
+          issueAttachmentService.getIssueAttachment(workspaceSlug.toString(), projectId.toString(), issueId.toString())
       : null
   );
 
diff --git a/web/components/web-view/issue-web-view-form.tsx b/web/components/web-view/issue-web-view-form.tsx
index c66531783c3..56e5f7ecc0b 100644
--- a/web/components/web-view/issue-web-view-form.tsx
+++ b/web/components/web-view/issue-web-view-form.tsx
@@ -1,28 +1,19 @@
-// react
 import React, { useCallback, useEffect, useState } from "react";
-
-// next
 import { useRouter } from "next/router";
-
-// react hook forms
 import { Controller } from "react-hook-form";
 
+// services
+import { FileService } from "services/file.service";
 // hooks
-
 import { useDebouncedCallback } from "use-debounce";
 import useReloadConfirmations from "hooks/use-reload-confirmation";
-
 // ui
 import { TextArea } from "@plane/ui";
-
 // components
 import { RichTextEditor } from "@plane/rich-text-editor";
 import { Label } from "components/web-view";
-
 // types
 import type { IIssue } from "types";
-import fileService from "services/file.service";
-// services
 
 type Props = {
   isAllowed: boolean;
@@ -34,6 +25,9 @@ type Props = {
   handleSubmit: any;
 };
 
+// services
+const fileService = new FileService();
+
 export const IssueWebViewForm: React.FC<Props> = (props) => {
   const { isAllowed, issueDetails, submitChanges, control, watch, handleSubmit } = props;
 
diff --git a/web/components/web-view/issues-select-bottom-sheet.tsx b/web/components/web-view/issues-select-bottom-sheet.tsx
index 266f29a76a9..80bf13795e0 100644
--- a/web/components/web-view/issues-select-bottom-sheet.tsx
+++ b/web/components/web-view/issues-select-bottom-sheet.tsx
@@ -1,21 +1,15 @@
-// react
 import React, { useState, useEffect } from "react";
-
-// next
 import { useRouter } from "next/router";
 
 // hooks
 import useUser from "hooks/use-user";
 import useDebounce from "hooks/use-debounce";
-
 // services
-import projectService from "services/project.service";
-
+import { ProjectService } from "services/project";
 // components
 import { WebViewModal } from "components/web-view";
 import { LayerDiagonalIcon } from "components/icons";
 import { Loader, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
-
 // types
 import { ISearchIssueResponse, TProjectIssuesSearchParams } from "types";
 
@@ -27,6 +21,9 @@ type IssuesSelectBottomSheetProps = {
   singleSelect?: boolean;
 };
 
+// services
+const projectService = new ProjectService();
+
 export const IssuesSelectBottomSheet: React.FC<IssuesSelectBottomSheetProps> = (props) => {
   const { isOpen, onClose, onSubmit, searchParams, singleSelect = false } = props;
 
@@ -85,15 +82,7 @@ export const IssuesSelectBottomSheet: React.FC<IssuesSelectBottomSheetProps> = (
       })
       .then((res) => setIssues(res))
       .finally(() => setIsSearching(false));
-  }, [
-    debouncedSearchTerm,
-    isOpen,
-    isWorkspaceLevel,
-    issueId,
-    projectId,
-    workspaceSlug,
-    searchParams,
-  ]);
+  }, [debouncedSearchTerm, isOpen, isWorkspaceLevel, issueId, projectId, workspaceSlug, searchParams]);
 
   return (
     <WebViewModal isOpen={isOpen} onClose={handleClose} modalTitle="Select issue">
@@ -112,15 +101,8 @@ export const IssuesSelectBottomSheet: React.FC<IssuesSelectBottomSheetProps> = (
           isWorkspaceLevel ? "text-custom-text-100" : "text-custom-text-200"
         }`}
       >
-        <ToggleSwitch
-          value={isWorkspaceLevel}
-          onChange={() => setIsWorkspaceLevel((prevData) => !prevData)}
-        />
-        <button
-          type="button"
-          onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
-          className="flex-shrink-0"
-        >
+        <ToggleSwitch value={isWorkspaceLevel} onChange={() => setIsWorkspaceLevel((prevData) => !prevData)} />
+        <button type="button" onClick={() => setIsWorkspaceLevel((prevData) => !prevData)} className="flex-shrink-0">
           Workspace Level
         </button>
       </div>
diff --git a/web/components/web-view/select-assignee.tsx b/web/components/web-view/select-assignee.tsx
index af8bbec929c..877452579c7 100644
--- a/web/components/web-view/select-assignee.tsx
+++ b/web/components/web-view/select-assignee.tsx
@@ -1,21 +1,14 @@
 // react
 import React, { useState } from "react";
-
-// next
 import { useRouter } from "next/router";
-
-// swr
 import useSWR from "swr";
 
 // icons
 import { ChevronDown } from "lucide-react";
-
 // services
-import projectService from "services/project.service/project.service";
-
+import { ProjectService } from "services/project";
 // fetch key
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
-
 // components
 import { Avatar } from "components/ui/avatar";
 import { WebViewModal } from "./web-view-modal";
@@ -26,6 +19,9 @@ type Props = {
   disabled?: boolean;
 };
 
+// services
+const projectService = new ProjectService();
+
 export const AssigneeSelect: React.FC<Props> = (props) => {
   const { value, onChange, disabled = false } = props;
 
diff --git a/web/components/web-view/select-blocked-by.tsx b/web/components/web-view/select-blocked-by.tsx
index 97eaf6d95b9..f7b96b64966 100644
--- a/web/components/web-view/select-blocked-by.tsx
+++ b/web/components/web-view/select-blocked-by.tsx
@@ -1,30 +1,18 @@
-// react
 import React, { useState } from "react";
-
-// next
 import { useRouter } from "next/router";
-
-// swr
 import { mutate } from "swr";
-
-// react hook form
 import { useFormContext } from "react-hook-form";
 
 // services
-import issuesService from "services/issues.service";
-
+import { IssueService } from "services/issue";
 // hooks
 import useUser from "hooks/use-user";
-
 // fetch keys
 import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-
 // icons
 import { ChevronDown } from "lucide-react";
-
 // components
 import { IssuesSelectBottomSheet } from "components/web-view";
-
 // types
 import type { IIssue, BlockeIssueDetail, ISearchIssueResponse } from "types";
 
@@ -32,6 +20,9 @@ type Props = {
   disabled?: boolean;
 };
 
+// services
+const issueService = new IssueService();
+
 export const BlockedBySelect: React.FC<Props> = (props) => {
   const { disabled = false } = props;
 
@@ -71,25 +62,19 @@ export const BlockedBySelect: React.FC<Props> = (props) => {
 
     const relatedIssues = watch("related_issues");
 
-    await issuesService
-      .createIssueRelation(
-        workspaceSlug.toString(),
-        projectId.toString(),
-        issueId.toString(),
-        user,
-        {
-          related_list: [
-            ...selectedIssues.map((issue) => ({
-              issue: issueId as string,
-              relation_type: "blocked_by" as const,
-              issue_detail: issue.blocked_issue_detail,
-              related_issue: issue.blocked_issue_detail.id,
-            })),
-          ],
-        }
-      )
+    await issueService
+      .createIssueRelation(workspaceSlug.toString(), projectId.toString(), issueId.toString(), user, {
+        related_list: [
+          ...selectedIssues.map((issue) => ({
+            issue: issueId as string,
+            relation_type: "blocked_by" as const,
+            issue_detail: issue.blocked_issue_detail,
+            related_issue: issue.blocked_issue_detail.id,
+          })),
+        ],
+      })
       .then((response) => {
-        mutate(ISSUE_DETAILS(issueId as string), (prevData) => {
+        mutate<IIssue>(ISSUE_DETAILS(issueId as string), (prevData) => {
           if (!prevData) return prevData;
           return {
             ...prevData,
diff --git a/web/components/web-view/select-duplicate.tsx b/web/components/web-view/select-duplicate.tsx
index 16899b8336a..ae28a215ed3 100644
--- a/web/components/web-view/select-duplicate.tsx
+++ b/web/components/web-view/select-duplicate.tsx
@@ -1,27 +1,17 @@
-// react
 import React, { useState } from "react";
-
-// next
 import { useRouter } from "next/router";
-
-// swr
 import { mutate } from "swr";
 
 // services
-import issuesService from "services/issues.service";
-
+import { IssueService } from "services/issue";
 // hooks
 import useUser from "hooks/use-user";
-
 // fetch keys
 import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-
 // icons
 import { ChevronDown } from "lucide-react";
-
 // components
 import { IssuesSelectBottomSheet } from "components/web-view";
-
 // types
 import { BlockeIssueDetail, ISearchIssueResponse } from "types";
 
@@ -29,6 +19,9 @@ type Props = {
   disabled?: boolean;
 };
 
+// services
+const issueService = new IssueService();
+
 export const DuplicateSelect: React.FC<Props> = (props) => {
   const { disabled = false } = props;
 
@@ -66,23 +59,17 @@ export const DuplicateSelect: React.FC<Props> = (props) => {
 
     if (!user) return;
 
-    issuesService
-      .createIssueRelation(
-        workspaceSlug.toString(),
-        projectId.toString(),
-        issueId.toString(),
-        user,
-        {
-          related_list: [
-            ...selectedIssues.map((issue) => ({
-              issue: issueId as string,
-              issue_detail: issue.blocker_issue_detail,
-              related_issue: issue.blocker_issue_detail.id,
-              relation_type: "duplicate" as const,
-            })),
-          ],
-        }
-      )
+    issueService
+      .createIssueRelation(workspaceSlug.toString(), projectId.toString(), issueId.toString(), user, {
+        related_list: [
+          ...selectedIssues.map((issue) => ({
+            issue: issueId as string,
+            issue_detail: issue.blocker_issue_detail,
+            related_issue: issue.blocker_issue_detail.id,
+            relation_type: "duplicate" as const,
+          })),
+        ],
+      })
       .then(() => {
         mutate(ISSUE_DETAILS(issueId as string));
         mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
@@ -104,9 +91,7 @@ export const DuplicateSelect: React.FC<Props> = (props) => {
         type="button"
         disabled={disabled}
         onClick={() => setIsBottomSheetOpen(true)}
-        className={
-          "relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5"
-        }
+        className={"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5"}
       >
         <span className="text-custom-text-200">Select issue</span>
         <ChevronDown className="w-4 h-4 text-custom-text-200" />
diff --git a/web/components/web-view/select-parent.tsx b/web/components/web-view/select-parent.tsx
index f2b40cf8272..77bfe0055d8 100644
--- a/web/components/web-view/select-parent.tsx
+++ b/web/components/web-view/select-parent.tsx
@@ -1,16 +1,15 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
+
 // services
-import IssueService from "services/issue/issue.service";
+import { IssueService } from "services/issue";
 // constants
 import { ISSUE_DETAILS } from "constants/fetch-keys";
 // components
 import { IssuesSelectBottomSheet } from "components/web-view";
-
 // icons
 import { ChevronDown, X } from "lucide-react";
-
 // types
 import { ISearchIssueResponse } from "types";
 
diff --git a/web/components/web-view/select-relates-to.tsx b/web/components/web-view/select-relates-to.tsx
index 56e509d2ff6..47a7c7853ec 100644
--- a/web/components/web-view/select-relates-to.tsx
+++ b/web/components/web-view/select-relates-to.tsx
@@ -1,27 +1,17 @@
-// react
 import React, { useState } from "react";
-
-// next
 import { useRouter } from "next/router";
-
-// swr
 import { mutate } from "swr";
 
 // services
-import issuesService from "services/issues.service";
-
+import { IssueService } from "services/issue";
 // hooks
 import useUser from "hooks/use-user";
-
 // fetch keys
 import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-
 // icons
 import { ChevronDown } from "lucide-react";
-
 // components
 import { IssuesSelectBottomSheet } from "components/web-view";
-
 // types
 import { BlockeIssueDetail, ISearchIssueResponse } from "types";
 
@@ -29,6 +19,9 @@ type Props = {
   disabled?: boolean;
 };
 
+// services
+const issueService = new IssueService();
+
 export const RelatesSelect: React.FC<Props> = (props) => {
   const { disabled = false } = props;
 
@@ -64,23 +57,17 @@ export const RelatesSelect: React.FC<Props> = (props) => {
       },
     }));
 
-    issuesService
-      .createIssueRelation(
-        workspaceSlug.toString(),
-        projectId.toString(),
-        issueId.toString(),
-        user,
-        {
-          related_list: [
-            ...selectedIssues.map((issue) => ({
-              issue: issueId as string,
-              issue_detail: issue.blocker_issue_detail,
-              related_issue: issue.blocker_issue_detail.id,
-              relation_type: "relates_to" as const,
-            })),
-          ],
-        }
-      )
+    issueService
+      .createIssueRelation(workspaceSlug.toString(), projectId.toString(), issueId.toString(), user, {
+        related_list: [
+          ...selectedIssues.map((issue) => ({
+            issue: issueId as string,
+            issue_detail: issue.blocker_issue_detail,
+            related_issue: issue.blocker_issue_detail.id,
+            relation_type: "relates_to" as const,
+          })),
+        ],
+      })
       .then(() => {
         mutate(ISSUE_DETAILS(issueId as string));
         mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
diff --git a/web/components/web-view/select-state.tsx b/web/components/web-view/select-state.tsx
index 051aaae6578..966a2f30061 100644
--- a/web/components/web-view/select-state.tsx
+++ b/web/components/web-view/select-state.tsx
@@ -1,25 +1,16 @@
-// react
 import React, { useState } from "react";
-
-// next
 import { useRouter } from "next/router";
-
-// swr
 import useSWR from "swr";
 
 // icons
 import { ChevronDown } from "lucide-react";
-
 // services
-import stateService from "services/project.service/project_state.service";
-
+import { ProjectStateService } from "services/project";
 // fetch key
 import { STATES_LIST } from "constants/fetch-keys";
-
 // components
 import { StateGroupIcon } from "components/icons";
 import { WebViewModal } from "./web-view-modal";
-
 // helpers
 import { getStatesList } from "helpers/state.helper";
 
@@ -29,6 +20,9 @@ type Props = {
   disabled?: boolean;
 };
 
+// services
+const projectStateService = new ProjectStateService();
+
 export const StateSelect: React.FC<Props> = (props) => {
   const { value, onChange, disabled = false } = props;
 
@@ -39,7 +33,9 @@ export const StateSelect: React.FC<Props> = (props) => {
 
   const { data: stateGroups } = useSWR(
     workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug && projectId ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null
+    workspaceSlug && projectId
+      ? () => projectStateService.getStates(workspaceSlug as string, projectId as string)
+      : null
   );
   const states = getStatesList(stateGroups);
 
@@ -75,9 +71,7 @@ export const StateSelect: React.FC<Props> = (props) => {
         type="button"
         disabled={disabled}
         onClick={() => setIsOpen(true)}
-        className={
-          "relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5"
-        }
+        className={"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5"}
       >
         <span className="text-custom-text-200">{selectedState?.name || "Select a state"}</span>
         <ChevronDown className="w-4 h-4 text-custom-text-200" />
diff --git a/web/components/web-view/sub-issues.tsx b/web/components/web-view/sub-issues.tsx
index 917cb79751b..167c6e871ab 100644
--- a/web/components/web-view/sub-issues.tsx
+++ b/web/components/web-view/sub-issues.tsx
@@ -1,30 +1,19 @@
-// react
 import React, { useState } from "react";
-
-// next
 import { useRouter } from "next/router";
-
-// swr
 import useSWR, { mutate } from "swr";
 
 // icons
 import { X, PlusIcon } from "lucide-react";
-
 // services
-import issuesService from "services/issue/issue.service";
-
+import { IssueService } from "services/issue";
 // fetch key
 import { SUB_ISSUES } from "constants/fetch-keys";
-
 // hooks
 import useUser from "hooks/use-user";
-
 // ui
 import { Spinner } from "components/ui";
-
 // components
 import { Label, IssuesSelectBottomSheet, DeleteConfirmation } from "components/web-view";
-
 // types
 import { IIssue, ISearchIssueResponse } from "types";
 
@@ -32,6 +21,9 @@ type Props = {
   issueDetails?: IIssue;
 };
 
+// services
+const issueService = new IssueService();
+
 export const SubIssueList: React.FC<Props> = (props) => {
   const { issueDetails } = props;
 
@@ -48,7 +40,7 @@ export const SubIssueList: React.FC<Props> = (props) => {
   const { data: subIssuesResponse } = useSWR(
     workspaceSlug && issueDetails ? SUB_ISSUES(issueDetails.id) : null,
     workspaceSlug && issueDetails
-      ? () => issuesService.subIssues(workspaceSlug as string, issueDetails.project, issueDetails.id)
+      ? () => issueService.subIssues(workspaceSlug as string, issueDetails.project, issueDetails.id)
       : null
   );
 
@@ -73,7 +65,7 @@ export const SubIssueList: React.FC<Props> = (props) => {
       false
     );
 
-    issuesService
+    issueService
       .patchIssue(workspaceSlug.toString(), issue.project, issue.id, { parent: null }, user)
       .finally(() => mutate(SUB_ISSUES(issueDetails.id)));
   };
@@ -84,7 +76,7 @@ export const SubIssueList: React.FC<Props> = (props) => {
     const payload = {
       sub_issue_ids: data.map((i) => i.id),
     };
-    await issuesService
+    await issueService
       .addSubIssues(workspaceSlug.toString(), projectId.toString(), issueId.toString(), payload)
       .finally(() => {
         mutate(SUB_ISSUES(issueId.toString()));
diff --git a/web/components/workspace/create-workspace-form.tsx b/web/components/workspace/create-workspace-form.tsx
index 6ec6dbef67d..a84bf44706b 100644
--- a/web/components/workspace/create-workspace-form.tsx
+++ b/web/components/workspace/create-workspace-form.tsx
@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction, useEffect, useState, FC } from "react";
 import { mutate } from "swr";
 import { Controller, useForm } from "react-hook-form";
 // services
-import WorkspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
diff --git a/web/components/workspace/delete-workspace-modal.tsx b/web/components/workspace/delete-workspace-modal.tsx
index 3e18d7575e4..8557d51eb2c 100644
--- a/web/components/workspace/delete-workspace-modal.tsx
+++ b/web/components/workspace/delete-workspace-modal.tsx
@@ -9,7 +9,7 @@ import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // icons
@@ -33,6 +33,9 @@ const defaultValues = {
   confirmDelete: "",
 };
 
+// services
+const workspaceService = new WorkspaceService();
+
 export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, user }) => {
   const router = useRouter();
 
diff --git a/web/components/workspace/send-workspace-invitation-modal.tsx b/web/components/workspace/send-workspace-invitation-modal.tsx
index dd0f6d3eb3e..5422c147db0 100644
--- a/web/components/workspace/send-workspace-invitation-modal.tsx
+++ b/web/components/workspace/send-workspace-invitation-modal.tsx
@@ -3,7 +3,7 @@ import { mutate } from "swr";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import WorkspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx
index ac8040b41a5..ecd1c12493c 100644
--- a/web/components/workspace/sidebar-dropdown.tsx
+++ b/web/components/workspace/sidebar-dropdown.tsx
@@ -10,8 +10,8 @@ import useUser from "hooks/use-user";
 import useWorkspaces from "hooks/use-workspaces";
 import useToast from "hooks/use-toast";
 // services
-import UserService from "services/user.service";
-import AuthService from "services/auth.service";
+import { UserService } from "services/user.service";
+import { AuthService } from "services/auth.service";
 // components
 import { Avatar, Icon } from "components/ui";
 import { Loader } from "@plane/ui";
diff --git a/web/components/workspace/views/delete-workspace-view-modal.tsx b/web/components/workspace/views/delete-workspace-view-modal.tsx
deleted file mode 100644
index 6030f630f11..00000000000
--- a/web/components/workspace/views/delete-workspace-view-modal.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// services
-import workspaceService from "services/workspace.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { DangerButton, SecondaryButton } from "components/ui";
-// icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-// types
-import { IWorkspaceView } from "types/workspace-views";
-// fetch-keys
-import { WORKSPACE_VIEWS_LIST } from "constants/fetch-keys";
-
-type Props = {
-  isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  data: IWorkspaceView | null;
-};
-
-export const DeleteWorkspaceViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen }) => {
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const handleClose = () => {
-    setIsOpen(false);
-    setIsDeleteLoading(false);
-  };
-
-  const handleDeletion = async () => {
-    setIsDeleteLoading(true);
-
-    if (!workspaceSlug || !data) return;
-
-    await workspaceService
-      .deleteView(workspaceSlug as string, data.id)
-      .then(() => {
-        mutate<IWorkspaceView[]>(WORKSPACE_VIEWS_LIST(workspaceSlug as string), (views) =>
-          views?.filter((view) => view.id !== data.id)
-        );
-
-        handleClose();
-
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "View deleted successfully.",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "View could not be deleted. Please try again.",
-        });
-      })
-      .finally(() => {
-        setIsDeleteLoading(false);
-      });
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
-        <Transition.Child
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={React.Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                  <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium leading-6 text-custom-text-100"
-                      >
-                        Delete View
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
-                          Are you sure you want to delete view-{" "}
-                          <span className="break-words font-medium text-custom-text-100">
-                            {data?.name}
-                          </span>
-                          ? All of the data related to the view will be permanently removed. This
-                          action cannot be undone.
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex justify-end gap-2 p-4 sm:px-6">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
-                    {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/web/components/workspace/views/global-select-filters.tsx b/web/components/workspace/views/global-select-filters.tsx
deleted file mode 100644
index 967ee1bf800..00000000000
--- a/web/components/workspace/views/global-select-filters.tsx
+++ /dev/null
@@ -1,301 +0,0 @@
-import { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// hook
-import useProjects from "hooks/use-projects";
-import useWorkspaceMembers from "hooks/use-workspace-members";
-// services
-import issuesService from "services/issues.service";
-// components
-import { DateFilterModal } from "components/core";
-// ui
-import { Avatar, MultiLevelDropdown } from "components/ui";
-// icons
-import { PriorityIcon, StateGroupIcon } from "components/icons";
-// helpers
-import { checkIfArraysHaveSameElements } from "helpers/array.helper";
-// types
-import { IWorkspaceIssueFilterOptions, TStateGroups } from "types";
-// fetch-keys
-import { WORKSPACE_LABELS } from "constants/fetch-keys";
-// constants
-import { GROUP_CHOICES, PRIORITIES } from "constants/project";
-import { DATE_FILTER_OPTIONS } from "constants/filters";
-
-type Props = {
-  filters: Partial<IWorkspaceIssueFilterOptions>;
-  onSelect: (option: any) => void;
-  direction?: "left" | "right";
-  height?: "sm" | "md" | "rg" | "lg";
-};
-
-export const GlobalSelectFilters: React.FC<Props> = ({
-  filters,
-  onSelect,
-  direction = "right",
-  height = "md",
-}) => {
-  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
-  const [dateFilterType, setDateFilterType] = useState<{
-    title: string;
-    type: "start_date" | "target_date";
-  }>({
-    title: "",
-    type: "start_date",
-  });
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
-
-  const { data: workspaceLabels } = useSWR(
-    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
-    workspaceSlug ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString()) : null
-  );
-
-  const { projects: allProjects } = useProjects();
-  const joinedProjects = allProjects?.filter((p) => p.is_member);
-
-  const workspaceFilterOption = [
-    {
-      id: "project",
-      label: "Project",
-      value: joinedProjects,
-      hasChildren: true,
-      children: joinedProjects?.map((project) => ({
-        id: project.id,
-        label: <div className="flex items-center gap-2">{project.name}</div>,
-        value: {
-          key: "project",
-          value: project.id,
-        },
-        selected: filters?.project?.includes(project.id),
-      })),
-    },
-    {
-      id: "state_group",
-      label: "State groups",
-      value: GROUP_CHOICES,
-      hasChildren: true,
-      children: [
-        ...Object.keys(GROUP_CHOICES).map((key) => ({
-          id: key,
-          label: (
-            <div className="flex items-center gap-2">
-              <StateGroupIcon stateGroup={key as TStateGroups} />
-              {GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]}
-            </div>
-          ),
-          value: {
-            key: "state_group",
-            value: key,
-          },
-          selected: filters?.state_group?.includes(key),
-        })),
-      ],
-    },
-    {
-      id: "labels",
-      label: "Labels",
-      value: workspaceLabels,
-      hasChildren: true,
-      children: workspaceLabels?.map((label) => ({
-        id: label.id,
-        label: (
-          <div className="flex items-center gap-2">
-            <div
-              className="h-2 w-2 rounded-full"
-              style={{
-                backgroundColor: label.color && label.color !== "" ? label.color : "#000000",
-              }}
-            />
-            {label.name}
-          </div>
-        ),
-        value: {
-          key: "labels",
-          value: label.id,
-        },
-        selected: filters?.labels?.includes(label.id),
-      })),
-    },
-    {
-      id: "priority",
-      label: "Priority",
-      value: PRIORITIES,
-      hasChildren: true,
-      children: PRIORITIES.map((priority) => ({
-        id: priority === null ? "null" : priority,
-        label: (
-          <div className="flex items-center gap-2 capitalize">
-            <PriorityIcon priority={priority} />
-            {priority ?? "None"}
-          </div>
-        ),
-        value: {
-          key: "priority",
-          value: priority === null ? "null" : priority,
-        },
-        selected: filters?.priority?.includes(priority === null ? "null" : priority),
-      })),
-    },
-    {
-      id: "created_by",
-      label: "Created by",
-      value: workspaceMembers,
-      hasChildren: true,
-      children: workspaceMembers?.map((member) => ({
-        id: member.member.id,
-        label: (
-          <div className="flex items-center gap-2">
-            <Avatar user={member.member} />
-            {member.member.display_name}
-          </div>
-        ),
-        value: {
-          key: "created_by",
-          value: member.member.id,
-        },
-        selected: filters?.created_by?.includes(member.member.id),
-      })),
-    },
-    {
-      id: "assignees",
-      label: "Assignees",
-      value: workspaceMembers,
-      hasChildren: true,
-      children: workspaceMembers?.map((member) => ({
-        id: member.member.id,
-        label: (
-          <div className="flex items-center gap-2">
-            <Avatar user={member.member} />
-            {member.member.display_name}
-          </div>
-        ),
-        value: {
-          key: "assignees",
-          value: member.member.id,
-        },
-        selected: filters?.assignees?.includes(member.member.id),
-      })),
-    },
-    {
-      id: "subscriber",
-      label: "Subscriber",
-      value: workspaceMembers,
-      hasChildren: true,
-      children: workspaceMembers?.map((member) => ({
-        id: member.member.id,
-        label: (
-          <div className="flex items-center gap-2">
-            <Avatar user={member.member} />
-            {member.member.display_name}
-          </div>
-        ),
-        value: {
-          key: "subscriber",
-          value: member.member.id,
-        },
-        selected: filters?.subscriber?.includes(member.member.id),
-      })),
-    },
-    {
-      id: "start_date",
-      label: "Start date",
-      value: DATE_FILTER_OPTIONS,
-      hasChildren: true,
-      children: [
-        ...DATE_FILTER_OPTIONS.map((option) => ({
-          id: option.name,
-          label: option.name,
-          value: {
-            key: "start_date",
-            value: option.value,
-          },
-          selected: checkIfArraysHaveSameElements(filters?.start_date ?? [], option.value),
-        })),
-        {
-          id: "custom",
-          label: "Custom",
-          value: "custom",
-          element: (
-            <button
-              onClick={() => {
-                setIsDateFilterModalOpen(true);
-                setDateFilterType({
-                  title: "Start date",
-                  type: "start_date",
-                });
-              }}
-              className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-            >
-              Custom
-            </button>
-          ),
-        },
-      ],
-    },
-    {
-      id: "target_date",
-      label: "Due date",
-      value: DATE_FILTER_OPTIONS,
-      hasChildren: true,
-      children: [
-        ...DATE_FILTER_OPTIONS.map((option) => ({
-          id: option.name,
-          label: option.name,
-          value: {
-            key: "target_date",
-            value: option.value,
-          },
-          selected: checkIfArraysHaveSameElements(filters?.target_date ?? [], option.value),
-        })),
-        {
-          id: "custom",
-          label: "Custom",
-          value: "custom",
-          element: (
-            <button
-              onClick={() => {
-                setIsDateFilterModalOpen(true);
-                setDateFilterType({
-                  title: "Due date",
-                  type: "target_date",
-                });
-              }}
-              className="w-full rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80"
-            >
-              Custom
-            </button>
-          ),
-        },
-      ],
-    },
-  ];
-
-  return (
-    <>
-      {isDateFilterModalOpen && (
-        <DateFilterModal
-          title={dateFilterType.title}
-          field={dateFilterType.type}
-          filters={filters as IWorkspaceIssueFilterOptions}
-          handleClose={() => setIsDateFilterModalOpen(false)}
-          isOpen={isDateFilterModalOpen}
-          onSelect={onSelect}
-        />
-      )}
-      <MultiLevelDropdown
-        label="Filters"
-        onSelect={onSelect}
-        direction={direction}
-        height={height}
-        options={workspaceFilterOption}
-      />
-    </>
-  );
-};
diff --git a/web/components/workspace/views/single-workspace-view-item.tsx b/web/components/workspace/views/single-workspace-view-item.tsx
deleted file mode 100644
index fd153bdfcb7..00000000000
--- a/web/components/workspace/views/single-workspace-view-item.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from "react";
-
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-// icons
-import { TrashIcon, PencilIcon } from "@heroicons/react/24/outline";
-import { PhotoFilterOutlined } from "@mui/icons-material";
-//components
-import { CustomMenu } from "components/ui";
-import { IWorkspaceView } from "types/workspace-views";
-// helpers
-import { truncateText } from "helpers/string.helper";
-
-type Props = {
-  view: IWorkspaceView;
-  handleEditView: () => void;
-  handleDeleteView: () => void;
-};
-
-export const SingleWorkspaceViewItem: React.FC<Props> = ({
-  view,
-  handleEditView,
-  handleDeleteView,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const viewRedirectionUrl = `/${workspaceSlug}/workspace-views/issues?globalViewId=${view.id}`;
-
-  return (
-    <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
-      <Link href={viewRedirectionUrl}>
-        <a className="flex items-center justify-between relative rounded px-5 py-4 w-full">
-          <div className="flex items-center justify-between w-full">
-            <div className="flex items-center gap-4">
-              <div
-                className={`flex items-center justify-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100`}
-              >
-                <PhotoFilterOutlined className="!text-base !leading-6" />
-              </div>
-              <div className="flex flex-col">
-                <p className="truncate text-sm leading-4 font-medium">
-                  {truncateText(view.name, 75)}
-                </p>
-                {view?.description && (
-                  <p className="text-xs text-custom-text-200">{view.description}</p>
-                )}
-              </div>
-            </div>
-            <div className="ml-2 flex flex-shrink-0">
-              <div className="flex items-center gap-4">
-                <p className="rounded bg-custom-background-80 py-1 px-2 text-xs text-custom-text-200 opacity-0 group-hover:opacity-100">
-                  {view.query_data.filters && Object.keys(view.query_data.filters).length > 0
-                    ? `${Object.keys(view.query_data.filters)
-                        .map((key: string) =>
-                          view.query_data.filters[key as keyof typeof view.query_data.filters] !==
-                          null
-                            ? isNaN(
-                                (
-                                  view.query_data.filters[
-                                    key as keyof typeof view.query_data.filters
-                                  ] as any
-                                ).length
-                              )
-                              ? 0
-                              : (
-                                  view.query_data.filters[
-                                    key as keyof typeof view.query_data.filters
-                                  ] as any
-                                ).length
-                            : 0
-                        )
-                        .reduce((curr, prev) => curr + prev, 0)} filters`
-                    : "0 filters"}
-                </p>
-                <CustomMenu width="auto" ellipsis>
-                  <CustomMenu.MenuItem
-                    onClick={(e: any) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      handleEditView();
-                    }}
-                  >
-                    <span className="flex items-center justify-start gap-2">
-                      <PencilIcon className="h-3.5 w-3.5" />
-                      <span>Edit View</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                  <CustomMenu.MenuItem
-                    onClick={(e: any) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      handleDeleteView();
-                    }}
-                  >
-                    <span className="flex items-center justify-start gap-2">
-                      <TrashIcon className="h-3.5 w-3.5" />
-                      <span>Delete View</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                </CustomMenu>
-              </div>
-            </div>
-          </div>
-        </a>
-      </Link>
-    </div>
-  );
-};
diff --git a/web/components/workspace/views/workpace-view-navigation.tsx b/web/components/workspace/views/workpace-view-navigation.tsx
deleted file mode 100644
index 867764a5d7d..00000000000
--- a/web/components/workspace/views/workpace-view-navigation.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// icon
-import { PlusIcon } from "lucide-react";
-// constant
-import { WORKSPACE_VIEWS_LIST } from "constants/fetch-keys";
-// service
-import workspaceService from "services/workspace.service";
-
-type Props = {
-  handleAddView: () => void;
-};
-
-export const WorkspaceViewsNavigation: React.FC<Props> = ({ handleAddView }) => {
-  const router = useRouter();
-  const { workspaceSlug, globalViewId } = router.query;
-
-  const { data: workspaceViews } = useSWR(
-    workspaceSlug ? WORKSPACE_VIEWS_LIST(workspaceSlug.toString()) : null,
-    workspaceSlug ? () => workspaceService.getAllViews(workspaceSlug.toString()) : null
-  );
-
-  const isSelected = (pathName: string) => router.pathname.includes(pathName);
-  React.useEffect(() => {
-    const activeTabElement = document.getElementById("active-tab-global-view");
-    if (activeTabElement) activeTabElement.scrollIntoView({ behavior: "smooth", inline: "center" });
-  }, [globalViewId, workspaceViews]);
-
-  const tabsList = [
-    {
-      key: "all",
-      label: "All Issues",
-      selected: isSelected("workspace-views/all-issues"),
-      onClick: () => router.replace(`/${workspaceSlug}/workspace-views/all-issues`),
-    },
-    {
-      key: "assigned",
-      label: "Assigned",
-      selected: isSelected("workspace-views/assigned"),
-      onClick: () => router.replace(`/${workspaceSlug}/workspace-views/assigned`),
-    },
-    {
-      key: "created",
-      label: "Created",
-      selected: isSelected("workspace-views/created"),
-      onClick: () => router.replace(`/${workspaceSlug}/workspace-views/created`),
-    },
-    {
-      key: "subscribed",
-      label: "Subscribed",
-      selected: isSelected("workspace-views/subscribed"),
-      onClick: () => router.replace(`/${workspaceSlug}/workspace-views/subscribed`),
-    },
-  ];
-
-  return (
-    <div className="group flex items-center gap-x-1 overflow-x-scroll relative">
-      {tabsList.map((tab) => (
-        <button
-          key={tab.key}
-          type="button"
-          onClick={tab.onClick}
-          className={`border-b-2 min-w-min p-3 text-sm font-medium outline-none whitespace-nowrap flex-shrink-0 ${
-            tab.selected
-              ? "border-custom-primary-100 text-custom-primary-100"
-              : "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
-          }`}
-          id={tab.selected ? `active-tab-global-view` : ``}
-        >
-          {tab.label}
-        </button>
-      ))}
-
-      {workspaceViews &&
-        workspaceViews.length > 0 &&
-        workspaceViews?.map((view) => (
-          <button
-            className={`border-b-2 min-w-min p-3 text-sm font-medium outline-none whitespace-nowrap flex-shrink-0 ${
-              view.id === globalViewId
-                ? "border-custom-primary-100 text-custom-primary-100"
-                : "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
-            }`}
-            id={view.id === globalViewId ? `active-tab-global-view` : ``}
-            onClick={() =>
-              router.replace(`/${workspaceSlug}/workspace-views/issues?globalViewId=${view.id}`)
-            }
-          >
-            {view.name}
-          </button>
-        ))}
-
-      <button
-        type="button"
-        className="flex items-center justify-center flex-shrink-0 sticky right-0 w-12 py-3 border-transparent bg-custom-background-100 hover:border-custom-border-200 hover:text-custom-text-400"
-        onClick={handleAddView}
-      >
-        <PlusIcon className="h-4 w-4 text-custom-primary-200" />
-      </button>
-    </div>
-  );
-};
diff --git a/web/contexts/project-member.context.tsx b/web/contexts/project-member.context.tsx
index 5bd2636e432..5e594a73328 100644
--- a/web/contexts/project-member.context.tsx
+++ b/web/contexts/project-member.context.tsx
@@ -1,17 +1,11 @@
 import { createContext, useContext } from "react";
-
-// next
 import { useRouter } from "next/router";
-
-// swr
 import useSWR from "swr";
 
 // services
-import projectService from "services/project.service/project.service";
-
+import { ProjectService } from "services/project";
 // keys
 import { USER_PROJECT_VIEW } from "constants/fetch-keys";
-
 // types
 import { IProjectMember } from "types";
 
@@ -21,6 +15,9 @@ type ContextType = {
   error: any;
 };
 
+// services
+const projectService = new ProjectService();
+
 export const ProjectMemberContext = createContext<ContextType>({} as ContextType);
 
 type Props = {
diff --git a/web/contexts/theme.context.tsx b/web/contexts/theme.context.tsx
index 852f58a5cfd..e0c32328ecd 100644
--- a/web/contexts/theme.context.tsx
+++ b/web/contexts/theme.context.tsx
@@ -7,7 +7,7 @@ import ToastAlert from "components/toast-alert";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 // services
-import projectService from "services/project.service/project.service";
+import { ProjectService } from "services/project";
 // fetch-keys
 import { USER_PROJECT_VIEW } from "constants/fetch-keys";
 // helper
@@ -16,6 +16,9 @@ import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
 
 export const themeContext = createContext<ContextType>({} as ContextType);
 
+// services
+const projectService = new ProjectService();
+
 type ThemeProps = {
   collapsed: boolean;
 };
diff --git a/web/contexts/user.context.tsx b/web/contexts/user.context.tsx
index 3f076b326b1..474ea24f60e 100644
--- a/web/contexts/user.context.tsx
+++ b/web/contexts/user.context.tsx
@@ -3,7 +3,7 @@ import React, { createContext, ReactElement } from "react";
 import useSWR, { KeyedMutator } from "swr";
 
 // services
-import userService from "services/user.service";
+import { UserService } from "services/user.service";
 // constants
 import { CURRENT_USER } from "constants/fetch-keys";
 // types
@@ -17,6 +17,9 @@ interface IUserContextProps {
   workspaceInvitesLength?: number;
 }
 
+// services
+const userService = new UserService();
+
 export const UserContext = createContext<IUserContextProps>({} as IUserContextProps);
 
 export const UserProvider = ({ children }: { children: ReactElement }) => {
diff --git a/web/contexts/workspace-member.context.tsx b/web/contexts/workspace-member.context.tsx
index dfba45b24f5..d312751feab 100644
--- a/web/contexts/workspace-member.context.tsx
+++ b/web/contexts/workspace-member.context.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 
 import useSWR from "swr";
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // types
 import { IWorkspaceMember } from "types";
 // fetch-keys
@@ -23,6 +23,9 @@ type Props = {
   children: React.ReactNode;
 };
 
+// services
+const workspaceService = new WorkspaceService();
+
 export const WorkspaceMemberProvider: React.FC<Props> = (props) => {
   const { children } = props;
 
diff --git a/web/contexts/workspace-view-context.tsx b/web/contexts/workspace-view-context.tsx
deleted file mode 100644
index 9b936463756..00000000000
--- a/web/contexts/workspace-view-context.tsx
+++ /dev/null
@@ -1,235 +0,0 @@
-import { createContext, useEffect, useState } from "react";
-// next imports
-import { useRouter } from "next/router";
-// swr
-import useSWR, { KeyedMutator } from "swr";
-// services
-import workspaceService from "services/workspace.service";
-// types
-import { IIssue, IWorkspaceGlobalViewProps } from "types";
-import { IWorkspaceView } from "types/workspace-views";
-// fetch-keys
-import { WORKSPACE_VIEW_DETAILS, WORKSPACE_VIEW_ISSUES } from "constants/fetch-keys";
-
-export interface IWorkspaceViewContext {
-  params: any;
-  view: IWorkspaceView | undefined;
-  viewLoading: boolean;
-  viewIssues: IIssue[];
-  mutateViewIssues: KeyedMutator<any>;
-  viewIssueLoading: boolean;
-  filters: IWorkspaceGlobalViewProps;
-  handleFilters: (
-    filterType: "filters" | "display_filters" | "display_properties",
-    payload: { [key: string]: any },
-    saveFiltersToServer?: boolean
-  ) => void;
-}
-
-export const WorkspaceIssueViewContext = createContext<IWorkspaceViewContext | undefined>(
-  undefined
-);
-
-export const initialState: IWorkspaceGlobalViewProps = {
-  filters: {
-    assignees: null,
-    created_by: null,
-    labels: null,
-    priority: null,
-    state_group: null,
-    subscriber: null,
-    start_date: null,
-    target_date: null,
-    project: null,
-  },
-  display_filters: {
-    order_by: "-created_at",
-    sub_issue: false,
-    type: null,
-    layout: "spreadsheet",
-  },
-  display_properties: {
-    assignee: true,
-    start_date: true,
-    due_date: true,
-    key: true,
-    labels: true,
-    priority: true,
-    state: true,
-    sub_issue_count: true,
-    attachment_count: true,
-    link: true,
-    estimate: true,
-    created_on: true,
-    updated_on: true,
-  },
-};
-
-const saveViewFilters = async (
-  workspaceSlug: string,
-  globalViewId: string,
-  state: IWorkspaceGlobalViewProps
-) => {
-  await workspaceService.updateView(workspaceSlug, globalViewId, {
-    query_data: state,
-  });
-};
-
-export const WorkspaceViewProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const router = useRouter();
-  const { workspaceSlug, globalViewId } = router.query as {
-    workspaceSlug: string;
-    globalViewId: string;
-  };
-
-  const [filters, setFilters] = useState<IWorkspaceGlobalViewProps>(initialState);
-
-  const handleFilters = (
-    filterType: "filters" | "display_filters" | "display_properties",
-    payload: { [key: string]: any },
-    saveFiltersToServer?: boolean
-  ) => {
-    const updatedFilterPayload = {
-      ...filters,
-      [filterType]: {
-        ...filters[filterType],
-        ...payload,
-      },
-    };
-    setFilters(() => updatedFilterPayload);
-
-    if (saveFiltersToServer) saveViewFilters(workspaceSlug, globalViewId, updatedFilterPayload);
-  };
-
-  const computedFilter = (filters: any) => {
-    const computedFilters: any = {};
-    Object.keys(filters).map((key) => {
-      if (filters[key] != undefined)
-        computedFilters[key] =
-          typeof filters[key] === "string" || typeof filters[key] === "boolean"
-            ? filters[key]
-            : filters[key].join(",");
-    });
-    return computedFilters;
-  };
-
-  const computedParams = (filters: any) => {
-    const params: any = {
-      assignees: (filters && filters?.filters?.assignees) || undefined,
-      created_by: (filters && filters?.filters?.created_by) || undefined,
-      labels: (filters && filters?.filters?.labels) || undefined,
-      priority: (filters && filters?.filters?.priority) || undefined,
-      state_group: (filters && filters?.filters?.state_group) || undefined,
-      subscriber: (filters && filters?.filters?.subscriber) || undefined,
-      start_date: (filters && filters?.filters?.start_date) || undefined,
-      target_date: (filters && filters?.filters?.target_date) || undefined,
-      project: (filters && filters?.filters?.project) || undefined,
-      order_by: (filters && filters?.display_filters?.order_by) || "-created_at",
-      sub_issue: (filters && filters?.display_filters?.sub_issue) || false,
-      type: filters && filters?.display_filters?.type,
-    };
-    return params;
-  };
-
-  const params: any = {
-    assignees: filters?.filters.assignees ? filters?.filters?.assignees.join(",") : undefined,
-    created_by: filters?.filters.created_by ? filters?.filters?.created_by.join(",") : undefined,
-    labels: filters?.filters.labels ? filters?.filters?.labels.join(",") : undefined,
-    priority: filters?.filters.priority ? filters?.filters?.priority.join(",") : undefined,
-    state_group: filters?.filters.state_group ? filters?.filters?.state_group.join(",") : undefined,
-    subscriber: filters?.filters.subscriber ? filters?.filters?.subscriber.join(",") : undefined,
-    start_date: filters?.filters.start_date ? filters?.filters?.start_date.join(",") : undefined,
-    target_date: filters?.filters.target_date ? filters?.filters?.target_date.join(",") : undefined,
-    project: filters?.filters.project ? filters?.filters?.project.join(",") : undefined,
-
-    order_by: filters?.display_filters?.order_by
-      ? filters?.display_filters?.order_by
-      : "-created_at",
-    sub_issue: filters?.display_filters?.sub_issue ? filters?.display_filters?.sub_issue : false,
-    type: filters?.display_filters?.type ? filters?.display_filters?.type : undefined,
-    layout: filters?.display_filters?.layout ? filters?.display_filters?.layout : undefined,
-  };
-
-  const { data: view, isLoading: viewLoading } = useSWR(
-    workspaceSlug && globalViewId ? WORKSPACE_VIEW_DETAILS(globalViewId.toString()) : null,
-    workspaceSlug && globalViewId
-      ? () => workspaceService.getViewDetails(workspaceSlug.toString(), globalViewId.toString())
-      : null
-  );
-
-  const {
-    data: viewIssues,
-    mutate: mutateViewIssues,
-    isLoading: viewIssueLoading,
-  } = useSWR(
-    workspaceSlug && view && globalViewId && filters
-      ? WORKSPACE_VIEW_ISSUES(globalViewId.toString(), params)
-      : null,
-    workspaceSlug && view && globalViewId
-      ? () =>
-          workspaceService.getViewIssues(
-            workspaceSlug.toString(),
-            computedFilter(computedParams(filters))
-          )
-      : null
-  );
-
-  useEffect(() => {
-    if (view && view?.query_data) {
-      const payload = {
-        filters: {
-          ...view?.query_data?.filters,
-          assignees: view?.query_data?.filters?.assignees || null,
-          created_by: view?.query_data?.filters?.created_by || null,
-          labels: view?.query_data?.filters?.labels || null,
-          priority: view?.query_data?.filters?.priority || null,
-          state_group: view?.query_data?.filters?.state_group || null,
-          subscriber: view?.query_data?.filters?.subscriber || null,
-          start_date: view?.query_data?.filters?.start_date || null,
-          target_date: view?.query_data?.filters?.target_date || null,
-          project: view?.query_data?.filters?.project || null,
-        },
-        display_filters: {
-          ...view?.query_data?.display_filters,
-          order_by: view?.query_data?.display_filters?.order_by || "-created_at",
-          sub_issue: view?.query_data?.display_filters?.sub_issue || true,
-          type: view?.query_data?.display_filters?.type || null,
-        },
-        display_properties: {
-          ...view?.query_data?.display_properties,
-          assignee: view?.query_data?.display_properties?.assignee || true,
-          start_date: view?.query_data?.display_properties?.start_date || true,
-          due_date: view?.query_data?.display_properties?.due_date || true,
-          key: view?.query_data?.display_properties?.key || true,
-          labels: view?.query_data?.display_properties?.labels || true,
-          priority: view?.query_data?.display_properties?.priority || true,
-          state: view?.query_data?.display_properties?.state || true,
-          sub_issue_count: view?.query_data?.display_properties?.sub_issue_count || true,
-          attachment_count: view?.query_data?.display_properties?.attachment_count || true,
-          link: view?.query_data?.display_properties?.link || true,
-          estimate: view?.query_data?.display_properties?.estimate || true,
-          created_on: view?.query_data?.display_properties?.created_on || true,
-          updated_on: view?.query_data?.display_properties?.updated_on || true,
-        },
-      };
-      setFilters(payload);
-    }
-  }, [view, setFilters]);
-
-  return (
-    <WorkspaceIssueViewContext.Provider
-      value={{
-        params,
-        view,
-        viewLoading,
-        viewIssues,
-        mutateViewIssues,
-        viewIssueLoading,
-        filters,
-        handleFilters,
-      }}
-    >
-      {children}
-    </WorkspaceIssueViewContext.Provider>
-  );
-};
diff --git a/web/contexts/workspace.context.tsx b/web/contexts/workspace.context.tsx
index 2ecbb2ef510..f389381f95a 100644
--- a/web/contexts/workspace.context.tsx
+++ b/web/contexts/workspace.context.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // types
 import { IWorkspace } from "types";
 // constants
@@ -21,6 +21,9 @@ export interface WorkspaceContextProps {
   mutateWorkspaces: () => void;
 }
 
+// services
+const workspaceService = new WorkspaceService();
+
 export const WorkspaceContext = createContext<WorkspaceContextProps>({} as WorkspaceContextProps);
 
 export const WorkspaceProvider: FC<WorkspaceProviderProps> = (props) => {
@@ -29,11 +32,7 @@ export const WorkspaceProvider: FC<WorkspaceProviderProps> = (props) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
   // API to fetch user information
-  const {
-    data = [],
-    error,
-    mutate,
-  } = useSWR<IWorkspace[]>(USER_WORKSPACES, () => workspaceService.userWorkspaces());
+  const { data = [], error, mutate } = useSWR<IWorkspace[]>(USER_WORKSPACES, () => workspaceService.userWorkspaces());
   // active workspace
   const activeWorkspace = data?.find((w) => w.slug === workspaceSlug);
 
diff --git a/web/hooks/my-issues/use-my-issues.tsx b/web/hooks/my-issues/use-my-issues.tsx
index 3e79d6f1e3b..f9ced399029 100644
--- a/web/hooks/my-issues/use-my-issues.tsx
+++ b/web/hooks/my-issues/use-my-issues.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import userService from "services/user.service";
+import { UserService } from "services/user.service";
 // hooks
 import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
 // types
@@ -13,6 +13,9 @@ import { IIssue } from "types";
 // fetch-keys
 import { USER_ISSUES } from "constants/fetch-keys";
 
+// services
+const userService = new UserService();
+
 const useMyIssues = (workspaceSlug: string | undefined) => {
   const router = useRouter();
 
@@ -33,9 +36,7 @@ const useMyIssues = (workspaceSlug: string | undefined) => {
   };
 
   const { data: myIssues, mutate: mutateMyIssues } = useSWR(
-    workspaceSlug && router.pathname.includes("my-issues")
-      ? USER_ISSUES(workspaceSlug.toString(), params)
-      : null,
+    workspaceSlug && router.pathname.includes("my-issues") ? USER_ISSUES(workspaceSlug.toString(), params) : null,
     workspaceSlug && router.pathname.includes("my-issues")
       ? () => userService.userIssues(workspaceSlug.toString(), params)
       : null
diff --git a/web/hooks/use-comment-reaction.tsx b/web/hooks/use-comment-reaction.tsx
index 1d3968d3b4b..af1d0a90f8d 100644
--- a/web/hooks/use-comment-reaction.tsx
+++ b/web/hooks/use-comment-reaction.tsx
@@ -2,16 +2,16 @@ import useSWR from "swr";
 
 // fetch keys
 import { COMMENT_REACTION_LIST } from "constants/fetch-keys";
-
 // services
-import reactionService from "services/issue/issue_reaction.service";
-
+import { IssueReactionService } from "services/issue";
 // helpers
 import { groupReactions } from "helpers/emoji.helper";
-
 // hooks
 import useUser from "./use-user";
 
+// services
+const issueReactionService = new IssueReactionService();
+
 const useCommentReaction = (
   workspaceSlug?: string | string[] | null,
   projectId?: string | string[] | null,
@@ -27,7 +27,7 @@ const useCommentReaction = (
       : null,
     workspaceSlug && projectId && commendId
       ? () =>
-          reactionService.listIssueCommentReactions(
+          issueReactionService.listIssueCommentReactions(
             workspaceSlug.toString(),
             projectId.toString(),
             commendId.toString()
@@ -48,7 +48,7 @@ const useCommentReaction = (
   const handleReactionCreate = async (reaction: string) => {
     if (!workspaceSlug || !projectId || !commendId) return;
 
-    const data = await reactionService.createIssueCommentReaction(
+    const data = await issueReactionService.createIssueCommentReaction(
       workspaceSlug.toString(),
       projectId.toString(),
       commendId.toString(),
@@ -73,7 +73,7 @@ const useCommentReaction = (
       false
     );
 
-    await reactionService.deleteIssueCommentReaction(
+    await issueReactionService.deleteIssueCommentReaction(
       workspaceSlug.toString(),
       projectId.toString(),
       commendId.toString(),
diff --git a/web/hooks/use-estimate-option.tsx b/web/hooks/use-estimate-option.tsx
index 9768ab3f47a..e2bb9086c52 100644
--- a/web/hooks/use-estimate-option.tsx
+++ b/web/hooks/use-estimate-option.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import estimatesService from "services/project.service/project_estimates.service";
+import { ProjectEstimateServices } from "services/project";
 // hooks
 import useProjectDetails from "hooks/use-project-details";
 // helpers
@@ -11,19 +11,22 @@ import { orderArrayBy } from "helpers/array.helper";
 // fetch-keys
 import { ESTIMATE_DETAILS } from "constants/fetch-keys";
 
+// services
+const projectEstimateService = new ProjectEstimateServices();
+
 const useEstimateOption = (estimateKey?: number | null) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
   const { projectDetails } = useProjectDetails();
 
-  const { data: estimateDetails, error: estimateDetailsError } = useSWR(
+  const { data: estimateDetails } = useSWR(
     workspaceSlug && projectId && projectDetails && projectDetails?.estimate
       ? ESTIMATE_DETAILS(projectDetails.estimate as string)
       : null,
     workspaceSlug && projectId && projectDetails && projectDetails.estimate
       ? () =>
-          estimatesService.getEstimateDetails(
+          projectEstimateService.getEstimateDetails(
             workspaceSlug.toString(),
             projectId.toString(),
             projectDetails.estimate as string
diff --git a/web/hooks/use-issue-reaction.tsx b/web/hooks/use-issue-reaction.tsx
index 33f03811255..c4ea210ded2 100644
--- a/web/hooks/use-issue-reaction.tsx
+++ b/web/hooks/use-issue-reaction.tsx
@@ -2,16 +2,15 @@ import useSWR from "swr";
 
 // fetch keys
 import { ISSUE_REACTION_LIST } from "constants/fetch-keys";
-
 // helpers
 import { groupReactions } from "helpers/emoji.helper";
-
 // services
-import reactionService from "services/issue/issue_reaction.service";
-
+import { IssueReactionService } from "services/issue";
 // hooks
 import useUser from "./use-user";
 
+const issueReactionService = new IssueReactionService();
+
 const useIssueReaction = (
   workspaceSlug?: string | string[] | null,
   projectId?: string | string[] | null,
@@ -28,7 +27,8 @@ const useIssueReaction = (
       ? ISSUE_REACTION_LIST(workspaceSlug.toString(), projectId.toString(), issueId.toString())
       : null,
     workspaceSlug && projectId && issueId
-      ? () => reactionService.listIssueReactions(workspaceSlug.toString(), projectId.toString(), issueId.toString())
+      ? () =>
+          issueReactionService.listIssueReactions(workspaceSlug.toString(), projectId.toString(), issueId.toString())
       : null
   );
 
@@ -43,7 +43,7 @@ const useIssueReaction = (
   const handleReactionCreate = async (reaction: string) => {
     if (!workspaceSlug || !projectId || !issueId) return;
 
-    const data = await reactionService.createIssueReaction(
+    const data = await issueReactionService.createIssueReaction(
       workspaceSlug.toString(),
       projectId.toString(),
       issueId.toString(),
@@ -68,7 +68,7 @@ const useIssueReaction = (
       false
     );
 
-    await reactionService.deleteIssueReaction(
+    await issueReactionService.deleteIssueReaction(
       workspaceSlug.toString(),
       projectId.toString(),
       issueId.toString(),
diff --git a/web/hooks/use-issues-view.tsx b/web/hooks/use-issues-view.tsx
index cc5141b3e47..feba952d9e7 100644
--- a/web/hooks/use-issues-view.tsx
+++ b/web/hooks/use-issues-view.tsx
@@ -7,10 +7,10 @@ import useSWR from "swr";
 // contexts
 import { issueViewContext } from "contexts/issue-view.context";
 // services
-import issuesService from "services/issue/issue.service";
-import cyclesService from "services/cycle.service";
-import modulesService from "services/module.service";
-import stateService from "services/project.service/project_state.service";
+import { IssueService, IssueArchiveService, IssueDraftService } from "services/issue";
+import { CycleService } from "services/cycle.service";
+import { ModuleService } from "services/module.service";
+import { ProjectStateService } from "services/project";
 // helpers
 import { getStatesList } from "helpers/state.helper";
 // types
@@ -26,6 +26,14 @@ import {
   VIEW_ISSUES,
 } from "constants/fetch-keys";
 
+// services
+const issueService = new IssueService();
+const issueArchiveService = new IssueArchiveService();
+const issueDraftService = new IssueDraftService();
+const cycleService = new CycleService();
+const moduleService = new ModuleService();
+const projectStateService = new ProjectStateService();
+
 const useIssuesView = () => {
   const {
     display_filters: displayFilters,
@@ -58,7 +66,7 @@ const useIssuesView = () => {
   const { data: projectIssues, mutate: mutateProjectIssues } = useSWR(
     workspaceSlug && projectId && params ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params) : null,
     workspaceSlug && projectId && params
-      ? () => issuesService.getIssuesWithParams(workspaceSlug as string, projectId as string, params)
+      ? () => issueService.getIssuesWithParams(workspaceSlug as string, projectId as string, params)
       : null
   );
 
@@ -67,7 +75,7 @@ const useIssuesView = () => {
       ? PROJECT_ARCHIVED_ISSUES_LIST_WITH_PARAMS(projectId as string, params)
       : null,
     workspaceSlug && projectId && params && isArchivedIssues && !archivedIssueId
-      ? () => issuesService.getArchivedIssues(workspaceSlug as string, projectId as string, params)
+      ? () => issueArchiveService.getArchivedIssues(workspaceSlug as string, projectId as string, params)
       : null
   );
 
@@ -76,7 +84,7 @@ const useIssuesView = () => {
       ? PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS(projectId as string, params)
       : null,
     workspaceSlug && projectId && params && isDraftIssues && !archivedIssueId
-      ? () => issuesService.getDraftIssues(workspaceSlug as string, projectId as string, params)
+      ? () => issueDraftService.getDraftIssues(workspaceSlug as string, projectId as string, params)
       : null
   );
 
@@ -84,12 +92,7 @@ const useIssuesView = () => {
     workspaceSlug && projectId && cycleId && params ? CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params) : null,
     workspaceSlug && projectId && cycleId && params
       ? () =>
-          cyclesService.getCycleIssuesWithParams(
-            workspaceSlug as string,
-            projectId as string,
-            cycleId as string,
-            params
-          )
+          cycleService.getCycleIssuesWithParams(workspaceSlug as string, projectId as string, cycleId as string, params)
       : null
   );
 
@@ -97,7 +100,7 @@ const useIssuesView = () => {
     workspaceSlug && projectId && moduleId && params ? MODULE_ISSUES_WITH_PARAMS(moduleId as string, params) : null,
     workspaceSlug && projectId && moduleId && params
       ? () =>
-          modulesService.getModuleIssuesWithParams(
+          moduleService.getModuleIssuesWithParams(
             workspaceSlug as string,
             projectId as string,
             moduleId as string,
@@ -109,13 +112,15 @@ const useIssuesView = () => {
   const { data: viewIssues, mutate: mutateViewIssues } = useSWR(
     workspaceSlug && projectId && viewId && params ? VIEW_ISSUES(viewId.toString(), params) : null,
     workspaceSlug && projectId && viewId && params
-      ? () => issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
+      ? () => issueService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
       : null
   );
 
   const { data: states } = useSWR(
     workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug && projectId ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null
+    workspaceSlug && projectId
+      ? () => projectStateService.getStates(workspaceSlug as string, projectId as string)
+      : null
   );
   const statesList = getStatesList(states);
   const activeStatesList = statesList?.filter((state) => state.group === "started" || state.group === "unstarted");
diff --git a/web/hooks/use-profile-issues.tsx b/web/hooks/use-profile-issues.tsx
index 263aa307c3a..fabe880140c 100644
--- a/web/hooks/use-profile-issues.tsx
+++ b/web/hooks/use-profile-issues.tsx
@@ -5,14 +5,16 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import userService from "services/user.service";
+import { UserService } from "services/user.service";
 // contexts
 import { profileIssuesContext } from "contexts/profile-issues-context";
+import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
 // types
 import { IIssue } from "types";
 // fetch-keys
 import { USER_PROFILE_ISSUES } from "constants/fetch-keys";
-import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
+
+const userService = new UserService();
 
 const useProfileIssues = (workspaceSlug: string | undefined, userId: string | undefined) => {
   const {
@@ -84,18 +86,12 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
   useEffect(() => {
     if (!userId || !filters) return;
 
-    if (
-      router.pathname.includes("assigned") &&
-      (!filters.assignees || !filters.assignees.includes(userId))
-    ) {
+    if (router.pathname.includes("assigned") && (!filters.assignees || !filters.assignees.includes(userId))) {
       setFilters({ assignees: [...(filters.assignees ?? []), userId] });
       return;
     }
 
-    if (
-      router.pathname.includes("created") &&
-      (!filters.created_by || !filters.created_by.includes(userId))
-    ) {
+    if (router.pathname.includes("created") && (!filters.created_by || !filters.created_by.includes(userId))) {
       setFilters({ created_by: [...(filters.created_by ?? []), userId] });
       return;
     }
diff --git a/web/hooks/use-project-details.tsx b/web/hooks/use-project-details.tsx
index a3582423f8e..4a6fdd690e2 100644
--- a/web/hooks/use-project-details.tsx
+++ b/web/hooks/use-project-details.tsx
@@ -3,10 +3,12 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import projectService from "services/project.service/project.service";
+import { ProjectService } from "services/project";
 // fetch-keys
 import { PROJECT_DETAILS } from "constants/fetch-keys";
 
+const projectService = new ProjectService();
+
 const useProjectDetails = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
diff --git a/web/hooks/use-project-members.tsx b/web/hooks/use-project-members.tsx
index a60ce570ab9..4b7abe641dc 100644
--- a/web/hooks/use-project-members.tsx
+++ b/web/hooks/use-project-members.tsx
@@ -1,11 +1,13 @@
 import useSWR from "swr";
 // services
-import projectService from "services/project.service/project.service";
+import { ProjectService } from "services/project";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 // hooks
 import useUser from "./use-user";
 
+const projectService = new ProjectService();
+
 const useProjectMembers = (
   workspaceSlug: string | undefined,
   projectId: string | undefined,
diff --git a/web/hooks/use-projects.tsx b/web/hooks/use-projects.tsx
index 4050e3e59a6..c618ae7d32b 100644
--- a/web/hooks/use-projects.tsx
+++ b/web/hooks/use-projects.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import projectService from "services/project.service/project.service";
+import { ProjectService } from "services/project";
 // helpers
 import { orderArrayBy } from "helpers/array.helper";
 // types
@@ -11,6 +11,8 @@ import { IProject } from "types";
 // fetch-keys
 import { PROJECTS_LIST } from "constants/fetch-keys";
 
+const projectService = new ProjectService();
+
 const useProjects = (type?: "all" | boolean, fetchCondition?: boolean) => {
   fetchCondition = fetchCondition ?? true;
 
diff --git a/web/hooks/use-sub-issue.tsx b/web/hooks/use-sub-issue.tsx
index 3a0b801a2bc..a1d2e281cc7 100644
--- a/web/hooks/use-sub-issue.tsx
+++ b/web/hooks/use-sub-issue.tsx
@@ -1,16 +1,16 @@
-import { useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
 // services
-import issuesService from "services/issue/issue.service";
+import { IssueService } from "services/issue";
 // types
 import { ISubIssueResponse } from "types";
 // fetch-keys
 import { SUB_ISSUES } from "constants/fetch-keys";
 
+const issueService = new IssueService();
+
 const useSubIssue = (projectId: string, issueId: string, isExpanded: boolean) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -19,7 +19,7 @@ const useSubIssue = (projectId: string, issueId: string, isExpanded: boolean) =>
 
   const { data: subIssuesResponse, isLoading } = useSWR<ISubIssueResponse>(
     shouldFetch ? SUB_ISSUES(issueId as string) : null,
-    shouldFetch ? () => issuesService.subIssues(workspaceSlug as string, projectId as string, issueId as string) : null
+    shouldFetch ? () => issueService.subIssues(workspaceSlug as string, projectId as string, issueId as string) : null
   );
 
   return {
diff --git a/web/hooks/use-user-auth.tsx b/web/hooks/use-user-auth.tsx
index d3116ce0677..c8ea78ee600 100644
--- a/web/hooks/use-user-auth.tsx
+++ b/web/hooks/use-user-auth.tsx
@@ -6,11 +6,14 @@ import useSWR from "swr";
 // keys
 import { CURRENT_USER } from "constants/fetch-keys";
 // services
-import userService from "services/user.service";
-import workspaceService from "services/workspace.service";
+import { UserService } from "services/user.service";
+import { WorkspaceService } from "services/workspace.service";
 // types
 import type { IWorkspace, ICurrentUserResponse } from "types";
 
+const userService = new UserService();
+const workspaceService = new WorkspaceService();
+
 const useUserAuth = (routeAuth: "sign-in" | "onboarding" | "admin" | null = "admin") => {
   const router = useRouter();
   const { next_url } = router.query as { next_url: string };
diff --git a/web/hooks/use-user.tsx b/web/hooks/use-user.tsx
index f9b6e36d8bf..0a65292be9f 100644
--- a/web/hooks/use-user.tsx
+++ b/web/hooks/use-user.tsx
@@ -2,11 +2,14 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 // services
-import userService from "services/user.service";
+import { UserService } from "services/user.service";
 // constants
 import { CURRENT_USER } from "constants/fetch-keys";
 // types
-import type { ICurrentUserResponse, IUser } from "types";
+import type { ICurrentUserResponse } from "types";
+
+// services
+const userService = new UserService();
 
 export default function useUser({ redirectTo = "", redirectIfFound = false, options = {} } = {}) {
   const router = useRouter();
diff --git a/web/hooks/use-workspace-details.tsx b/web/hooks/use-workspace-details.tsx
index 4a2f9762646..e0eaa3fe5bb 100644
--- a/web/hooks/use-workspace-details.tsx
+++ b/web/hooks/use-workspace-details.tsx
@@ -2,10 +2,12 @@ import { useEffect } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // fetch-keys
 import { WORKSPACE_DETAILS } from "constants/fetch-keys";
 
+const workspaceService = new WorkspaceService();
+
 const useWorkspaceDetails = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
diff --git a/web/hooks/use-workspace-members.tsx b/web/hooks/use-workspace-members.tsx
index d4104d3bdf6..e6fa6d2e387 100644
--- a/web/hooks/use-workspace-members.tsx
+++ b/web/hooks/use-workspace-members.tsx
@@ -1,11 +1,13 @@
 import useSWR from "swr";
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // fetch-keys
 import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 // hooks
 import useUser from "./use-user";
 
+const workspaceService = new WorkspaceService();
+
 const useWorkspaceMembers = (workspaceSlug: string | undefined, fetchCondition?: boolean) => {
   fetchCondition = fetchCondition ?? true;
 
@@ -18,18 +20,10 @@ const useWorkspaceMembers = (workspaceSlug: string | undefined, fetchCondition?:
 
   const hasJoined = workspaceMembers?.some((item: any) => item.member.id === (user as any)?.id);
 
-  const isOwner = workspaceMembers?.some(
-    (item) => item.member.id === (user as any)?.id && item.role === 20
-  );
-  const isMember = workspaceMembers?.some(
-    (item) => item.member.id === (user as any)?.id && item.role === 15
-  );
-  const isViewer = workspaceMembers?.some(
-    (item) => item.member.id === (user as any)?.id && item.role === 10
-  );
-  const isGuest = workspaceMembers?.some(
-    (item) => item.member.id === (user as any)?.id && item.role === 5
-  );
+  const isOwner = workspaceMembers?.some((item) => item.member.id === (user as any)?.id && item.role === 20);
+  const isMember = workspaceMembers?.some((item) => item.member.id === (user as any)?.id && item.role === 15);
+  const isViewer = workspaceMembers?.some((item) => item.member.id === (user as any)?.id && item.role === 10);
+  const isGuest = workspaceMembers?.some((item) => item.member.id === (user as any)?.id && item.role === 5);
 
   return {
     workspaceMembers,
diff --git a/web/hooks/use-workspaces.tsx b/web/hooks/use-workspaces.tsx
index d924d0f692f..7637ccffe2b 100644
--- a/web/hooks/use-workspaces.tsx
+++ b/web/hooks/use-workspaces.tsx
@@ -3,10 +3,12 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // fetch-keys
 import { USER_WORKSPACES } from "constants/fetch-keys";
 
+const workspaceService = new WorkspaceService();
+
 const useWorkspaces = () => {
   // router
   const router = useRouter();
diff --git a/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx b/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx
index 98ee0d668f2..cb2abc56f4e 100644
--- a/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx
+++ b/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx
@@ -5,7 +5,6 @@ import { useRouter } from "next/router";
 
 // contexts
 import { useProjectMyMembership, ProjectMemberProvider } from "contexts/project-member.context";
-import { WorkspaceViewProvider } from "contexts/workspace-view-context";
 // layouts
 import AppHeader from "layouts/app-layout-legacy/app-header";
 import AppSidebar from "layouts/app-layout-legacy/app-sidebar";
@@ -14,7 +13,7 @@ import { NotAuthorizedView, JoinProject } from "components/auth-screens";
 import { CommandPalette } from "components/command-palette";
 // ui
 import { Button, Spinner } from "@plane/ui";
-import { EmptyState } from "components/ui";
+import { EmptyState } from "components/common";
 // icons
 import { LayerDiagonalIcon } from "components/icons";
 // images
@@ -31,9 +30,7 @@ type Props = {
 
 export const ProjectAuthorizationWrapper: React.FC<Props> = (props) => (
   <ProjectMemberProvider>
-    <WorkspaceViewProvider>
-      <ProjectAuthorizationWrapped {...props} />
-    </WorkspaceViewProvider>
+    <ProjectAuthorizationWrapped {...props} />
   </ProjectMemberProvider>
 );
 
diff --git a/web/layouts/auth-layout-legacy/user-authorization-wrapper.tsx b/web/layouts/auth-layout-legacy/user-authorization-wrapper.tsx
index 8f323268b88..33e414e287c 100644
--- a/web/layouts/auth-layout-legacy/user-authorization-wrapper.tsx
+++ b/web/layouts/auth-layout-legacy/user-authorization-wrapper.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import userService from "services/user.service";
+import { UserService } from "services/user.service";
 // ui
 import { Spinner } from "@plane/ui";
 // fetch-keys
@@ -13,6 +13,9 @@ type Props = {
   children: React.ReactNode;
 };
 
+// services
+const userService = new UserService();
+
 export const UserAuthorizationLayout: React.FC<Props> = ({ children }) => {
   const router = useRouter();
 
diff --git a/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx b/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx
index d121ab31233..cdaf04d037b 100644
--- a/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx
+++ b/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx
@@ -6,10 +6,9 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import workspaceServices from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // contexts
 import { WorkspaceMemberProvider } from "contexts/workspace-member.context";
-import { WorkspaceViewProvider } from "contexts/workspace-view-context";
 // layouts
 import AppSidebar from "layouts/app-layout-legacy/app-sidebar";
 import AppHeader from "layouts/app-layout-legacy/app-header";
@@ -82,47 +81,45 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
   return (
     <UserAuthorizationLayout>
       <WorkspaceMemberProvider>
-        <WorkspaceViewProvider>
-          <CommandPalette />
-          <div className="relative flex h-screen w-full overflow-hidden">
-            <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
-            {settingsLayout && (memberType?.isGuest || memberType?.isViewer) ? (
-              <NotAuthorizedView
-                actionButton={
-                  <Link href={`/${workspaceSlug}`}>
-                    <a>
-                      <PrimaryButton className="flex items-center gap-1">
-                        <LayerDiagonalIcon height={16} width={16} color="white" /> Go to workspace
-                      </PrimaryButton>
-                    </a>
-                  </Link>
-                }
-                type="workspace"
+        <CommandPalette />
+        <div className="relative flex h-screen w-full overflow-hidden">
+          <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
+          {settingsLayout && (memberType?.isGuest || memberType?.isViewer) ? (
+            <NotAuthorizedView
+              actionButton={
+                <Link href={`/${workspaceSlug}`}>
+                  <a>
+                    <PrimaryButton className="flex items-center gap-1">
+                      <LayerDiagonalIcon height={16} width={16} color="white" /> Go to workspace
+                    </PrimaryButton>
+                  </a>
+                </Link>
+              }
+              type="workspace"
+            />
+          ) : (
+            <main
+              className={`relative flex h-full w-full flex-col overflow-hidden ${
+                bg === "primary"
+                  ? "bg-custom-background-100"
+                  : bg === "secondary"
+                  ? "bg-custom-background-90"
+                  : "bg-custom-background-80"
+              }`}
+            >
+              <AppHeader
+                breadcrumbs={breadcrumbs}
+                left={left}
+                right={right}
+                setToggleSidebar={setToggleSidebar}
+                noHeader={noHeader}
               />
-            ) : (
-              <main
-                className={`relative flex h-full w-full flex-col overflow-hidden ${
-                  bg === "primary"
-                    ? "bg-custom-background-100"
-                    : bg === "secondary"
-                    ? "bg-custom-background-90"
-                    : "bg-custom-background-80"
-                }`}
-              >
-                <AppHeader
-                  breadcrumbs={breadcrumbs}
-                  left={left}
-                  right={right}
-                  setToggleSidebar={setToggleSidebar}
-                  noHeader={noHeader}
-                />
-                <div className="h-full w-full overflow-hidden">
-                  <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
-                </div>
-              </main>
-            )}
-          </div>
-        </WorkspaceViewProvider>
+              <div className="h-full w-full overflow-hidden">
+                <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
+              </div>
+            </main>
+          )}
+        </div>
       </WorkspaceMemberProvider>
     </UserAuthorizationLayout>
   );
diff --git a/web/layouts/auth-layout/user-wrapper.tsx b/web/layouts/auth-layout/user-wrapper.tsx
index 3c30910513b..c3d29aeb5f4 100644
--- a/web/layouts/auth-layout/user-wrapper.tsx
+++ b/web/layouts/auth-layout/user-wrapper.tsx
@@ -2,7 +2,7 @@ import { FC, ReactNode } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 // services
-import userService from "services/user.service";
+import { UserService } from "services/user.service";
 // ui
 import { Spinner } from "@plane/ui";
 // fetch-keys
@@ -12,6 +12,9 @@ export interface IUserAuthWrapper {
   children: ReactNode;
 }
 
+// services
+const userService = new UserService();
+
 export const UserAuthWrapper: FC<IUserAuthWrapper> = (props) => {
   const { children } = props;
   // router
diff --git a/web/layouts/web-view-layout/index.tsx b/web/layouts/web-view-layout/index.tsx
index 6814a6f257b..f50c23512ea 100644
--- a/web/layouts/web-view-layout/index.tsx
+++ b/web/layouts/web-view-layout/index.tsx
@@ -1,15 +1,11 @@
-// swr
 import useSWR from "swr";
 
 // services
-import userService from "services/user.service";
-
+import { UserService } from "services/user.service";
 // fetch keys
 import { CURRENT_USER } from "constants/fetch-keys";
-
 // icons
 import { AlertCircle } from "lucide-react";
-
 // ui
 import { Spinner } from "@plane/ui";
 
@@ -18,6 +14,9 @@ type Props = {
   fullScreen?: boolean;
 };
 
+// services
+const userService = new UserService();
+
 const getIfInWebview = (userAgent: NavigatorID["userAgent"]) => {
   const safari = /safari/.test(userAgent);
 
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/index.tsx b/web/pages/[workspaceSlug]/profile/[userId]/index.tsx
index 0cf54bb0d03..c674dcf3322 100644
--- a/web/pages/[workspaceSlug]/profile/[userId]/index.tsx
+++ b/web/pages/[workspaceSlug]/profile/[userId]/index.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import userService from "services/user.service";
+import { UserService } from "services/user.service";
 // layouts
 import { ProfileAuthWrapper } from "layouts/profile-layout";
 // components
@@ -23,15 +23,16 @@ import { IUserStateDistribution, TStateGroups } from "types";
 import { USER_PROFILE_DATA } from "constants/fetch-keys";
 import { GROUP_CHOICES } from "constants/project";
 
+// services
+const userService = new UserService();
+
 const ProfileOverview: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug, userId } = router.query;
 
   const { data: userProfile } = useSWR(
     workspaceSlug && userId ? USER_PROFILE_DATA(workspaceSlug.toString(), userId.toString()) : null,
-    workspaceSlug && userId
-      ? () => userService.getUserProfileData(workspaceSlug.toString(), userId.toString())
-      : null
+    workspaceSlug && userId ? () => userService.getUserProfileData(workspaceSlug.toString(), userId.toString()) : null
   );
 
   const stateDistribution: IUserStateDistribution[] = Object.keys(GROUP_CHOICES).map((key) => {
@@ -48,10 +49,7 @@ const ProfileOverview: NextPage = () => {
         <ProfileWorkload stateDistribution={stateDistribution} />
         <div className="grid grid-cols-1 xl:grid-cols-2 items-stretch gap-5">
           <ProfilePriorityDistribution userProfile={userProfile} />
-          <ProfileStateDistribution
-            stateDistribution={stateDistribution}
-            userProfile={userProfile}
-          />
+          <ProfileStateDistribution stateDistribution={stateDistribution} userProfile={userProfile} />
         </div>
         <ProfileActivity />
       </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
index f3ebbd8497a..a7729d847b0 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
@@ -7,7 +7,7 @@ import useSWR, { mutate } from "swr";
 // react-hook-form
 import { useForm } from "react-hook-form";
 // services
-import issuesService from "services/issue/issue.service";
+import { IssueService, IssueArchiveService } from "services/issue";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 import useToast from "hooks/use-toast";
@@ -41,6 +41,10 @@ const defaultValues: Partial<IIssue> = {
   labels_list: [],
 };
 
+// services
+const issueService = new IssueService();
+const issueArchiveService = new IssueArchiveService();
+
 const ArchivedIssueDetailsPage: NextPage = () => {
   const [isRestoring, setIsRestoring] = useState(false);
 
@@ -54,7 +58,11 @@ const ArchivedIssueDetailsPage: NextPage = () => {
     workspaceSlug && projectId && archivedIssueId ? ISSUE_DETAILS(archivedIssueId as string) : null,
     workspaceSlug && projectId && archivedIssueId
       ? () =>
-          issuesService.retrieveArchivedIssue(workspaceSlug as string, projectId as string, archivedIssueId as string)
+          issueArchiveService.retrieveArchivedIssue(
+            workspaceSlug as string,
+            projectId as string,
+            archivedIssueId as string
+          )
       : null
   );
 
@@ -83,7 +91,7 @@ const ArchivedIssueDetailsPage: NextPage = () => {
         ...formData,
       };
 
-      await issuesService
+      await issueService
         .patchIssue(workspaceSlug as string, projectId as string, archivedIssueId as string, payload, user)
         .then(() => {
           mutateIssueDetails();
@@ -113,7 +121,7 @@ const ArchivedIssueDetailsPage: NextPage = () => {
 
     setIsRestoring(true);
 
-    await issuesService
+    await issueArchiveService
       .unarchiveIssue(workspaceSlug as string, projectId as string, archivedIssueId as string)
       .then(() => {
         setToastAlert({
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
index 6a95a8e409f..debdd54258d 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import projectService from "services/project.service/project.service";
+import { ProjectService } from "services/project";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // contexts
@@ -22,6 +22,9 @@ import type { NextPage } from "next";
 // fetch-keys
 import { PROJECT_DETAILS } from "constants/fetch-keys";
 
+// services
+const projectService = new ProjectService();
+
 const ProjectArchivedIssues: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index a2af08b68d3..500264027da 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -15,14 +15,14 @@ import { ExistingIssuesListModal } from "components/core";
 import { CycleDetailsSidebar, TransferIssues, TransferIssuesModal } from "components/cycles";
 import { CycleLayoutRoot } from "components/issues/issue-layouts";
 // services
-import issuesService from "services/issue/issue.service";
-import cycleServices from "services/cycle.service";
+import { IssueService } from "services/issue";
+import { CycleService } from "services/cycle.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // ui
-import { Button } from "@plane/ui";
-import { CustomMenu, EmptyState } from "components/ui";
+import { CustomMenu } from "components/ui";
+import { EmptyState } from "components/common";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // images
 import emptyCycle from "public/empty-state/cycle.svg";
@@ -35,6 +35,10 @@ import { ISearchIssueResponse } from "types";
 import { CYCLES_LIST, CYCLE_DETAILS } from "constants/fetch-keys";
 import { CycleIssuesHeader } from "components/headers";
 
+// services
+const issueService = new IssueService();
+const cycleService = new CycleService();
+
 const SingleCycle: React.FC = () => {
   const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
   const [cycleSidebar, setCycleSidebar] = useState(true);
@@ -51,14 +55,14 @@ const SingleCycle: React.FC = () => {
   const { data: cycles } = useSWR(
     workspaceSlug && projectId ? CYCLES_LIST(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => cycleServices.getCyclesWithParams(workspaceSlug as string, projectId as string, "all")
+      ? () => cycleService.getCyclesWithParams(workspaceSlug as string, projectId as string, "all")
       : null
   );
 
   const { data: cycleDetails, error } = useSWR(
     workspaceSlug && projectId && cycleId ? CYCLE_DETAILS(cycleId.toString()) : null,
     workspaceSlug && projectId && cycleId
-      ? () => cycleServices.getCycleDetails(workspaceSlug.toString(), projectId.toString(), cycleId.toString())
+      ? () => cycleService.getCycleDetails(workspaceSlug.toString(), projectId.toString(), cycleId.toString())
       : null
   );
 
@@ -74,7 +78,7 @@ const SingleCycle: React.FC = () => {
       issues: data.map((i) => i.id),
     };
 
-    await issuesService
+    await issueService
       .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
       .catch(() => {
         setToastAlert({
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
index fac7f3e01ab..d2b073a329c 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import projectService from "services/project.service/project.service";
+import { ProjectService } from "services/project";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // contexts
@@ -13,7 +13,6 @@ import { truncateText } from "helpers/string.helper";
 // components
 import { IssuesFilterView, IssuesView } from "components/core";
 // ui
-import { Icon } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { X, PenSquare } from "lucide-react";
@@ -22,6 +21,9 @@ import type { NextPage } from "next";
 // fetch-keys
 import { PROJECT_DETAILS } from "constants/fetch-keys";
 
+// services
+const projectService = new ProjectService();
+
 const ProjectDraftIssues: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index 3944f5383db..158201aa890 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -7,7 +7,7 @@ import useSWR, { mutate } from "swr";
 // react-hook-form
 import { useForm } from "react-hook-form";
 // services
-import issuesService from "services/issue/issue.service";
+import { IssueService } from "services/issue";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 // layouts
@@ -15,7 +15,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
 // ui
-import { EmptyState } from "components/ui";
+import { EmptyState } from "components/common";
 import { Breadcrumbs } from "components/breadcrumbs";
 import { Loader } from "@plane/ui";
 // images
@@ -43,6 +43,9 @@ const defaultValues: Partial<IIssue> = {
   target_date: null,
 };
 
+// services
+const issueService = new IssueService();
+
 const IssueDetailsPage: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
@@ -57,7 +60,7 @@ const IssueDetailsPage: NextPage = () => {
   } = useSWR(
     workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
     workspaceSlug && projectId && issueId
-      ? () => issuesService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
+      ? () => issueService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
       : null
   );
 
@@ -89,7 +92,7 @@ const IssueDetailsPage: NextPage = () => {
       delete payload.related_issues;
       delete payload.issue_relations;
 
-      await issuesService
+      await issueService
         .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
         .then(() => {
           mutateIssueDetails();
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
index cc7a7971945..ac193e32551 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
@@ -5,7 +5,7 @@ import useSWR from "swr";
 // mobx
 import { useMobxStore } from "lib/mobx/store-provider";
 // services
-import projectService from "services/project.service/project.service";
+import { ProjectService } from "services/project";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // helper
@@ -20,6 +20,9 @@ import type { NextPage } from "next";
 // fetch-keys
 import { PROJECT_DETAILS } from "constants/fetch-keys";
 
+// services
+const projectService = new ProjectService();
+
 const ProjectIssues: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
index 43805dfa170..e291fe5cbc7 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -7,7 +7,7 @@ import useSWR from "swr";
 // icons
 import { RectangleGroupIcon } from "@heroicons/react/24/outline";
 // services
-import modulesService from "services/module.service";
+import { ModuleService } from "services/module.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
@@ -19,7 +19,8 @@ import { ModuleDetailsSidebar } from "components/modules";
 import { ModuleLayoutRoot } from "components/issues";
 import { ModuleIssuesHeader } from "components/headers";
 // ui
-import { CustomMenu, EmptyState } from "components/ui";
+import { CustomMenu } from "components/ui";
+import { EmptyState } from "components/common";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // images
 import emptyModule from "public/empty-state/module.svg";
@@ -30,6 +31,9 @@ import { ISearchIssueResponse } from "types";
 // fetch-keys
 import { MODULE_DETAILS, MODULE_ISSUES, MODULE_LIST } from "constants/fetch-keys";
 
+// services
+const moduleService = new ModuleService();
+
 const SingleModule: React.FC = () => {
   const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
   const [moduleSidebar, setModuleSidebar] = useState(false);
@@ -43,20 +47,20 @@ const SingleModule: React.FC = () => {
 
   const { data: modules } = useSWR(
     workspaceSlug && projectId ? MODULE_LIST(projectId as string) : null,
-    workspaceSlug && projectId ? () => modulesService.getModules(workspaceSlug as string, projectId as string) : null
+    workspaceSlug && projectId ? () => moduleService.getModules(workspaceSlug as string, projectId as string) : null
   );
 
   const { data: moduleIssues } = useSWR(
     workspaceSlug && projectId && moduleId ? MODULE_ISSUES(moduleId as string) : null,
     workspaceSlug && projectId && moduleId
-      ? () => modulesService.getModuleIssues(workspaceSlug as string, projectId as string, moduleId as string)
+      ? () => moduleService.getModuleIssues(workspaceSlug as string, projectId as string, moduleId as string)
       : null
   );
 
   const { data: moduleDetails, error } = useSWR(
     moduleId ? MODULE_DETAILS(moduleId as string) : null,
     workspaceSlug && projectId
-      ? () => modulesService.getModuleDetails(workspaceSlug as string, projectId as string, moduleId as string)
+      ? () => moduleService.getModuleDetails(workspaceSlug as string, projectId as string, moduleId as string)
       : null
   );
 
@@ -67,7 +71,7 @@ const SingleModule: React.FC = () => {
       issues: data.map((i) => i.id),
     };
 
-    await modulesService
+    await moduleService
       .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
       .catch(() =>
         setToastAlert({
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index 03387d6ad76..4176ba426b6 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -9,13 +9,14 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 // services
-import projectService from "services/project.service/project.service";
-import modulesService from "services/module.service";
+import { ProjectService } from "services/project";
+import { ModuleService } from "services/module.service";
 // components
 import { CreateUpdateModuleModal, ModulesListGanttChartView, SingleModuleCard } from "components/modules";
 // ui
 import { Button, Loader, Tooltip } from "@plane/ui";
-import { EmptyState, Icon } from "components/ui";
+import { Icon } from "components/ui";
+import { EmptyState } from "components/common";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -40,6 +41,10 @@ const moduleViewOptions: { type: "grid" | "gantt_chart"; icon: any }[] = [
   },
 ];
 
+// services
+const projectService = new ProjectService();
+const moduleService = new ModuleService();
+
 const ProjectModules: NextPage = () => {
   const [selectedModule, setSelectedModule] = useState<SelectModuleType>();
   const [createUpdateModule, setCreateUpdateModule] = useState(false);
@@ -58,7 +63,7 @@ const ProjectModules: NextPage = () => {
 
   const { data: modules, mutate: mutateModules } = useSWR(
     workspaceSlug && projectId ? MODULE_LIST(projectId as string) : null,
-    workspaceSlug && projectId ? () => modulesService.getModules(workspaceSlug as string, projectId as string) : null
+    workspaceSlug && projectId ? () => moduleService.getModules(workspaceSlug as string, projectId as string) : null
   );
 
   const handleEditModule = (module: IModule) => {
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index 68da2fac52f..92c4d6d2222 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -14,9 +14,9 @@ import { TwitterPicker } from "react-color";
 import { DragDropContext, DropResult } from "react-beautiful-dnd";
 import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 // services
-import projectService from "services/project.service/project.service";
-import pagesService from "services/page.service";
-import issuesService from "services/issue/issue.service";
+import { ProjectService } from "services/project";
+import { PageService } from "services/page.service";
+import { IssueLabelService } from "services/issue";
 // hooks
 import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
@@ -28,7 +28,8 @@ import { CreateLabelModal } from "components/labels";
 import { CreateBlock } from "components/pages/create-block";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-import { CustomSearchSelect, EmptyState } from "components/ui";
+import { CustomSearchSelect } from "components/ui";
+import { EmptyState } from "components/common";
 import { TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // images
 import emptyPage from "public/empty-state/page.svg";
@@ -60,6 +61,11 @@ import {
   USER_PROJECT_VIEW,
 } from "constants/fetch-keys";
 
+// services
+const projectService = new ProjectService();
+const pageService = new PageService();
+const issueLabelService = new IssueLabelService();
+
 const SinglePage: NextPage = () => {
   const [createBlockForm, setCreateBlockForm] = useState(false);
   const [labelModal, setLabelModal] = useState(false);
@@ -86,20 +92,22 @@ const SinglePage: NextPage = () => {
   const { data: pageDetails, error } = useSWR(
     workspaceSlug && projectId && pageId ? PAGE_DETAILS(pageId as string) : null,
     workspaceSlug && projectId
-      ? () => pagesService.getPageDetails(workspaceSlug as string, projectId as string, pageId as string)
+      ? () => pageService.getPageDetails(workspaceSlug as string, projectId as string, pageId as string)
       : null
   );
 
   const { data: pageBlocks } = useSWR(
     workspaceSlug && projectId && pageId ? PAGE_BLOCKS_LIST(pageId as string) : null,
     workspaceSlug && projectId
-      ? () => pagesService.listPageBlocks(workspaceSlug as string, projectId as string, pageId as string)
+      ? () => pageService.listPageBlocks(workspaceSlug as string, projectId as string, pageId as string)
       : null
   );
 
   const { data: labels } = useSWR<IIssueLabels[]>(
     workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
-    workspaceSlug && projectId ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string) : null
+    workspaceSlug && projectId
+      ? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId as string)
+      : null
   );
 
   const { data: memberDetails } = useSWR(
@@ -114,7 +122,7 @@ const SinglePage: NextPage = () => {
 
     if (!formData.name || formData.name.length === 0 || formData.name === "") return;
 
-    await pagesService
+    await pageService
       .patchPage(workspaceSlug as string, projectId as string, pageId as string, formData, user)
       .then(() => {
         mutate<IPage>(
@@ -141,7 +149,7 @@ const SinglePage: NextPage = () => {
       false
     );
 
-    await pagesService
+    await pageService
       .patchPage(workspaceSlug as string, projectId as string, pageId as string, formData, user)
       .then(() => {
         mutate(PAGE_DETAILS(pageId as string));
@@ -166,7 +174,7 @@ const SinglePage: NextPage = () => {
       });
     });
 
-    pagesService.addPageToFavorites(workspaceSlug as string, projectId as string, {
+    pageService.addPageToFavorites(workspaceSlug as string, projectId as string, {
       page: pageId as string,
     });
   };
@@ -189,7 +197,7 @@ const SinglePage: NextPage = () => {
       });
     });
 
-    pagesService.removePageFromFavorites(workspaceSlug as string, projectId as string, pageId as string);
+    pageService.removePageFromFavorites(workspaceSlug as string, projectId as string, pageId as string);
   };
 
   const handleOnDragEnd = (result: DropResult) => {
@@ -219,7 +227,7 @@ const SinglePage: NextPage = () => {
       false
     );
 
-    pagesService.patchPageBlock(
+    pageService.patchPageBlock(
       workspaceSlug as string,
       projectId as string,
       pageId as string,
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index 8c2409d3c73..ca6745f9424 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -8,7 +8,7 @@ import useSWR from "swr";
 // headless ui
 import { Tab } from "@headlessui/react";
 // services
-import projectService from "services/project.service/project.service";
+import { ProjectService } from "services/project";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
 import useUserAuth from "hooks/use-user-auth";
@@ -49,6 +49,9 @@ const OtherPagesList = dynamic<TPagesListProps>(() => import("components/pages")
 
 const tabsList = ["Recent", "All", "Favorites", "Created by me", "Created by others"];
 
+// services
+const projectService = new ProjectService();
+
 const ProjectPages: NextPage = () => {
   const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false);
 
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
index c3fd348bcf4..afa2c088e50 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 
 // services
-import projectService from "services/project.service/project.service";
+import { ProjectService } from "services/project";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // hooks
@@ -25,6 +25,9 @@ import { PROJECTS_LIST, PROJECT_DETAILS, USER_PROJECT_VIEW } from "constants/fet
 // helper
 import { truncateText } from "helpers/string.helper";
 
+// services
+const projectService = new ProjectService();
+
 const AutomationsSettings: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
index e643ca25c8d..271472c202b 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -5,8 +5,7 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 
 // services
-import estimatesService from "services/project.service/project_estimates.service";
-import projectService from "services/project.service/project.service";
+import { ProjectService, ProjectEstimateServices } from "services/project";
 // hooks
 import useProjectDetails from "hooks/use-project-details";
 // layouts
@@ -19,7 +18,7 @@ import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // ui
 import { Button, Loader } from "@plane/ui";
-import { EmptyState } from "components/ui";
+import { EmptyState } from "components/common";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -33,6 +32,10 @@ import { ESTIMATES_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
 // helper
 import { truncateText } from "helpers/string.helper";
 
+// services
+const projectService = new ProjectService();
+const projectEstimateService = new ProjectEstimateServices();
+
 const EstimatesSettings: NextPage = () => {
   const [estimateFormOpen, setEstimateFormOpen] = useState(false);
 
@@ -50,7 +53,7 @@ const EstimatesSettings: NextPage = () => {
   const { data: estimatesList } = useSWR<IEstimate[]>(
     workspaceSlug && projectId ? ESTIMATES_LIST(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => estimatesService.getEstimatesList(workspaceSlug as string, projectId as string)
+      ? () => projectEstimateService.getEstimatesList(workspaceSlug as string, projectId as string)
       : null
   );
 
@@ -68,7 +71,7 @@ const EstimatesSettings: NextPage = () => {
       false
     );
 
-    estimatesService.deleteEstimate(workspaceSlug as string, projectId as string, estimateId, user).catch(() => {
+    projectEstimateService.deleteEstimate(workspaceSlug as string, projectId as string, estimateId, user).catch(() => {
       setToastAlert({
         type: "error",
         title: "Error!",
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index a874be35259..06a5f1b0f83 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -5,7 +5,7 @@ import { Disclosure, Transition } from "@headlessui/react";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // services
-import projectService from "services/project.service/project.service";
+import { ProjectService } from "services/project";
 // components
 import { DeleteProjectModal, ProjectDetailsForm, ProjectDetailsFormLoader, SettingsSidebar } from "components/project";
 // hooks
@@ -17,19 +17,14 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
-import { IProject } from "types";
 import type { NextPage } from "next";
 // fetch-keys
-import { PROJECT_DETAILS, USER_PROJECT_VIEW } from "constants/fetch-keys";
+import { USER_PROJECT_VIEW } from "constants/fetch-keys";
 import { useMobxStore } from "lib/mobx/store-provider";
 import { observer } from "mobx-react-lite";
 
-const defaultValues: Partial<IProject> = {
-  name: "",
-  description: "",
-  identifier: "",
-  network: 0,
-};
+// services
+const projectService = new ProjectService();
 
 const GeneralSettings: NextPage = observer(() => {
   const { project: projectStore } = useMobxStore();
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index 91cf4971c5c..0da70905aa5 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import stateService from "services/project.service/project_state.service";
+import { ProjectStateService } from "services/project";
 // hooks
 import useProjectDetails from "hooks/use-project-details";
 import useUserAuth from "hooks/use-user-auth";
@@ -27,6 +27,9 @@ import type { NextPage } from "next";
 // fetch-keys
 import { STATES_LIST } from "constants/fetch-keys";
 
+// services
+const projectStateService = new ProjectStateService();
+
 const StatesSettings: NextPage = () => {
   const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
   const [selectedState, setSelectedState] = useState<string | null>(null);
@@ -41,7 +44,9 @@ const StatesSettings: NextPage = () => {
 
   const { data: states } = useSWR(
     workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug && projectId ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null
+    workspaceSlug && projectId
+      ? () => projectStateService.getStates(workspaceSlug as string, projectId as string)
+      : null
   );
   const orderedStateGroups = orderStateGroups(states);
   const statesList = getStatesList(orderedStateGroups);
diff --git a/web/pages/[workspaceSlug]/settings/imports.tsx b/web/pages/[workspaceSlug]/settings/imports.tsx
index 95ee3f32fa0..c0b500637b0 100644
--- a/web/pages/[workspaceSlug]/settings/imports.tsx
+++ b/web/pages/[workspaceSlug]/settings/imports.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // components
@@ -18,6 +18,9 @@ import { WORKSPACE_DETAILS } from "constants/fetch-keys";
 // helper
 import { truncateText } from "helpers/string.helper";
 
+// services
+const workspaceService = new WorkspaceService();
+
 const ImportExport: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
diff --git a/web/pages/[workspaceSlug]/settings/index.tsx b/web/pages/[workspaceSlug]/settings/index.tsx
index aadc38b2321..2acf2f9604b 100644
--- a/web/pages/[workspaceSlug]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/index.tsx
@@ -7,8 +7,8 @@ import useSWR, { mutate } from "swr";
 // react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // services
-import workspaceService from "services/workspace.service";
-import fileService from "services/file.service";
+import { WorkspaceService } from "services/workspace.service";
+import { FileService } from "services/file.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
@@ -42,6 +42,10 @@ const defaultValues: Partial<IWorkspace> = {
   logo: null,
 };
 
+// services
+const workspaceService = new WorkspaceService();
+const fileService = new FileService();
+
 const WorkspaceSettings: NextPage = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [isImageUploading, setIsImageUploading] = useState(false);
diff --git a/web/pages/[workspaceSlug]/settings/members.tsx b/web/pages/[workspaceSlug]/settings/members.tsx
index a42a0d336ae..3408540dc04 100644
--- a/web/pages/[workspaceSlug]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/settings/members.tsx
@@ -6,7 +6,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
@@ -32,6 +32,9 @@ import { ROLE } from "constants/workspace";
 // helper
 import { truncateText } from "helpers/string.helper";
 
+// services
+const workspaceService = new WorkspaceService();
+
 const MembersSettings: NextPage = () => {
   const [selectedRemoveMember, setSelectedRemoveMember] = useState<string | null>(null);
   const [selectedInviteRemoveMember, setSelectedInviteRemoveMember] = useState<string | null>(null);
diff --git a/web/pages/_error.tsx b/web/pages/_error.tsx
index 699b7c5b6da..e131c4e014c 100644
--- a/web/pages/_error.tsx
+++ b/web/pages/_error.tsx
@@ -3,7 +3,7 @@ import * as Sentry from "@sentry/nextjs";
 import { useRouter } from "next/router";
 
 // services
-import authenticationService from "services/auth.service";
+import { AuthService } from "services/auth.service";
 // hooks
 import useToast from "hooks/use-toast";
 // layouts
@@ -11,13 +11,16 @@ import DefaultLayout from "layouts/default-layout";
 // ui
 import { Button } from "@plane/ui";
 
+// services
+const authService = new AuthService();
+
 const CustomErrorComponent = () => {
   const router = useRouter();
 
   const { setToastAlert } = useToast();
 
   const handleSignOut = async () => {
-    await authenticationService
+    await authService
       .signOut()
       .catch(() =>
         setToastAlert({
diff --git a/web/pages/accounts/magic-sign-in.tsx b/web/pages/accounts/magic-sign-in.tsx
index 076684e2633..e7322eb8c2b 100644
--- a/web/pages/accounts/magic-sign-in.tsx
+++ b/web/pages/accounts/magic-sign-in.tsx
@@ -7,13 +7,15 @@ import { useTheme } from "next-themes";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // services
-import authenticationService from "services/auth.service";
+import { AuthService } from "services/auth.service";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 import useToast from "hooks/use-toast";
 // types
 import type { NextPage } from "next";
 
+const authService = new AuthService();
+
 const MagicSignIn: NextPage = () => {
   const router = useRouter();
   const { password, key } = router.query;
@@ -39,9 +41,9 @@ const MagicSignIn: NextPage = () => {
       return;
     } else {
       setIsSigningIn(() => true);
-      authenticationService
+      authService
         .magicSignIn({ token: password, key })
-        .then(async (res) => {
+        .then(async () => {
           setIsSigningIn(false);
           await mutateUser();
         })
@@ -70,7 +72,7 @@ const MagicSignIn: NextPage = () => {
               <span
                 className="cursor-pointer underline"
                 onClick={() => {
-                  authenticationService
+                  authService
                     .emailCode({ email: (key as string).split("_")[1] })
                     .then(() => {
                       setToastAlert({
diff --git a/web/pages/accounts/reset-password.tsx b/web/pages/accounts/reset-password.tsx
index 533f9df1204..18310931c4e 100644
--- a/web/pages/accounts/reset-password.tsx
+++ b/web/pages/accounts/reset-password.tsx
@@ -10,7 +10,7 @@ import { Controller, useForm } from "react-hook-form";
 // hooks
 import useToast from "hooks/use-toast";
 // services
-import userService from "services/user.service";
+import { UserService } from "services/user.service";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // ui
@@ -25,6 +25,9 @@ type FormData = {
   confirmPassword: string;
 };
 
+// services
+const userService = new UserService();
+
 const ResetPasswordPage: NextPage = () => {
   const [isLoading, setIsLoading] = useState(true);
 
@@ -36,7 +39,6 @@ const ResetPasswordPage: NextPage = () => {
   const { setTheme } = useTheme();
 
   const {
-    register,
     handleSubmit,
     control,
     formState: { errors, isSubmitting },
diff --git a/web/pages/accounts/sign-up.tsx b/web/pages/accounts/sign-up.tsx
index 8ccc7f6e93a..0a9aee79727 100644
--- a/web/pages/accounts/sign-up.tsx
+++ b/web/pages/accounts/sign-up.tsx
@@ -4,14 +4,14 @@ import { useRouter } from "next/router";
 // next-themes
 import { useTheme } from "next-themes";
 // services
-import authenticationService from "services/auth.service";
+import { AuthService } from "services/auth.service";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 import useToast from "hooks/use-toast";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // components
-import { EmailPasswordForm, EmailSignUpForm } from "components/account";
+import { EmailSignUpForm } from "components/account";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 // types
@@ -22,6 +22,9 @@ type EmailPasswordFormValues = {
   medium?: string;
 };
 
+// services
+const authService = new AuthService();
+
 const SignUp: NextPage = () => {
   const router = useRouter();
 
@@ -37,7 +40,7 @@ const SignUp: NextPage = () => {
       password: formData.password ?? "",
     };
 
-    await authenticationService
+    await authService
       .emailSignUp(payload)
       .then(async (response) => {
         setToastAlert({
diff --git a/web/pages/m/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/web/pages/m/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index 997bdb12b57..167b89de742 100644
--- a/web/pages/m/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/web/pages/m/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -1,31 +1,19 @@
-// react
 import React, { useCallback, useEffect } from "react";
-
-// next
 import { useRouter } from "next/router";
-
-// swr
 import useSWR, { mutate } from "swr";
-
-// react hook forms
 import { useFormContext, useForm, FormProvider } from "react-hook-form";
 
 // services
-import issuesService from "services/issue/issue.service";
-
+import { IssueService, IssueArchiveService } from "services/issue";
 // fetch key
 import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-
 // hooks
 import useUser from "hooks/use-user";
 import useProjectMembers from "hooks/use-project-members";
-
 // layouts
 import WebViewLayout from "layouts/web-view-layout";
-
 // ui
 import { Spinner } from "@plane/ui";
-
 // components
 import {
   IssueWebViewForm,
@@ -34,12 +22,14 @@ import {
   IssuePropertiesDetail,
   IssueLinks,
   IssueActivity,
-  Spinner,
 } from "components/web-view";
-
 // types
 import type { IIssue } from "types";
 
+// services
+const issueService = new IssueService();
+const issueArchiveService = new IssueArchiveService();
+
 const MobileWebViewIssueDetail_ = () => {
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
@@ -62,19 +52,20 @@ const MobileWebViewIssueDetail_ = () => {
   } = useSWR(
     workspaceSlug && projectId && issueId && !isArchive ? ISSUE_DETAILS(issueId.toString()) : null,
     workspaceSlug && projectId && issueId && !isArchive
-      ? () => issuesService.retrieve(workspaceSlug.toString(), projectId.toString(), issueId.toString())
+      ? () => issueService.retrieve(workspaceSlug.toString(), projectId.toString(), issueId.toString())
       : null
   );
 
-  const { data: archiveIssueDetails, mutate: mutateaArchiveIssue } = useSWR<IIssue | undefined>(
+  const { data: archiveIssueDetails, mutate: mutateArchiveIssue } = useSWR<IIssue | undefined>(
     workspaceSlug && projectId && issueId && isArchive ? ISSUE_DETAILS(issueId as string) : null,
     workspaceSlug && projectId && issueId && isArchive
-      ? () => issuesService.retrieveArchivedIssue(workspaceSlug.toString(), projectId.toString(), issueId.toString())
+      ? () =>
+          issueArchiveService.retrieveArchivedIssue(workspaceSlug.toString(), projectId.toString(), issueId.toString())
       : null
   );
 
   const issueDetails = isArchive ? archiveIssueDetails : issue;
-  const mutateIssueDetails = isArchive ? mutateaArchiveIssue : mutateIssue;
+  const mutateIssueDetails = isArchive ? mutateArchiveIssue : mutateIssue;
 
   useEffect(() => {
     if (!issueDetails) return;
@@ -114,7 +105,7 @@ const MobileWebViewIssueDetail_ = () => {
       delete payload.issue_relations;
       delete payload.related_issues;
 
-      await issuesService
+      await issueService
         .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
         .then(() => {
           mutateIssueDetails();